Maneeta Maharjan

11/9/16

by nsatija

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<body>
  <div class = "container">
    <h1>TO DO LIST</h1>
    <p><em>Click and drag to reorder and double click to cross an item off</em></p>
    
    
    <form name = "toDoList">
      <input type = "text" name = "ListItem" placeholder =  "What needs to be done?"/>
      
    </form>
    
    <div id = "button">
    ADD
    </div>
    <br>
    <ol></ol>
    
  </div>

CSS

body{
  font: Helvetica;
  background: lightblue;
}

.container{
  background: white;
  width: 300px;
  padding: 20px;
  marrgin: 0 auto;
  margin-top: 40px;
  border-radius: 5px;
  
}

form{
  display:inline-block;
}

input{
  padding: 6px 20px 5px 6px;
}

#button{
  display: inline-block;
  background color: light Grey;
  color: Grey;
  border-radius: 5px;
  text-align: centre;
  margin-top: 2px;
  padding: 5px 15px;
  
  
}

#button:hover{
  cursor: pointer;
  opacity: .8;
}

ol{
  
  padding-left: 20px;
}

  


ol li{
  
}

.strike{
  text-decoration: line-through;
  
}
li:hover{
  cursor: pointer;
}

JavaScript

$(document).ready(function(){
	$("#button").click(function(){
  	var justAdd = $("input[name = ListItem]").val();
    $("ol").append("<li>" + justAdd + "</li>");
  });
  $("input[name = ListItem]").keyup(function(event){
  	if(event.keycode == 13){
    	$("#button").click();
    }
  });
  
  
  $(document).on("dblcick","li",function(){
  	//$(this).toggleClass("strike").fadeOut("slow");
  });
  
  $("input").focus(function(){
  	$(this).val("");
  });
  $("ol").sortable();

});