A Pen by A2

Thumbnail
This awesome code was written by a_tinker, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright a_tinker ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  A2</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>To do <i id = 'plus' class = 'fa fa-plus plus'></i><i class = 'fa fa-minus plus minus'></i></h1>

<div class = 'td_item'><input class = 'chk' type = 'checkbox'/><input class = 'task_td' type = 'text'></input></div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/a_tinker/a-pen-by-a2-vNxPzK */
h1{
  margin-left: 10%;
  font-family: Arial;
}
.td_item{
  margin-left: 12%;
  border-bottom: 2px solid rgba(180, 180, 180, 0.7);
  width: 30%;
  font-size: 1em;
  font-family: Arial;
  clear: both;
  padding: 10px;
  
}
.task_td{
  margin-left: 2%;
  width: 90%;
  border: none;
  display: inline-block;
}
.plus{
  font-size: 16px;
  margin-left: 1%;
  text-shadow: 1px 1px 1px rgba(180, 180, 180, 0.7, 1px 2px 1px rgba(180, 180, 180, 0.3));
}
.plus:hover{
  color: coral;
}
.minus{
  z-index: 2;
  
}




/*Downloaded from https://www.codeseek.co/a_tinker/a-pen-by-a2-vNxPzK */
$(document).ready(function(){
  
  $('#plus').click(function(){
  //makes a new todo. i want to do this without append (it seems sloppy to me, or like there is a more efficient way to do this) but i'm too lazy rn. eventually...
    $('body').append("<div class = 'td_item' ><input class = 'chk' type = 'checkbox'/><input class = 'task_td' type = 'text'></input></div>");
    
 
  });
  
  
  
  $('.minus').click(function(){
    //deletes EVERYTHING. :D
    var k = alert("Are you sure you want to clear your todo list?");
    //^checks to make sure you are okay, though idk if u really have a choice.
    if($('.td_item').has('.chk')){
      if($('.chk').is(":checked")){
        //makes sure you've at least done something before they all go bye-bye. without being saved. :D
         $('.td_item').remove();
      } else{
        //lets you know that you've been slacking. how polite
        var niceTry = alert("You don't seem to have done anything on your list.");
      }
    }
   
    
    
    
  });
  
 
  
//don't mind this i was just playing around
  $('td_item').dblclick(function(){
    
    $('.td_item').draggable();
  
    $('.td_item').resizeable();
   
  });
  
  
  

  
  
 
  
});

Comments