<div id="container">
<h1>To-Do List <i class="fa fa-plus"></i></h1> <input type="text" placeholder="Add New Todo">
<ul>
<li><span><i class="fa fa-trash"></i></span> Go To Maths Class</li>
<li><span><i class="fa fa-trash"></i></span> Buy New Clothes</li>
<li><span><i class="fa fa-trash"></i></span> Visit George</li>
</ul>
</div>
body {
font-family: Roboto;
background: -webkit-linear-gradient(90deg, #2BC0E4 10%, #EAECC6 90%)
}
ul {
list-style: none;
margin: 0;
padding: 0
}
h1 {
background: #2980b9;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal
}
.fa-plus {
float: right
}
li {
background: #fff;
height: 40px;
line-height: 40px;
color: #666
}
li:nth-child(2n) {
background: #f7f7f7
}
span {
background: #e74c3c;
height: 40px;
margin-right: 20px;
text-align: center;
color: white;
width: 0;
display: inline-block;
transition: 0.2s linear;
opacity: 0
}
li:hover span {
width: 40px;
opacity: 1.0
}
input {
font-size: 18px;
color: #2980b9;
background-color: #f7f7f7;
width: 100%;
padding: 13px 13px 13px 20px;
box-sizing: border-box;
border: 3px solid rgba(0, 0, 0, 0)
}
input:focus {
background: #fff;
border: 3px solid #2980b9;
outline: none
}
#container {
width: 360px;
margin: 100px auto;
background: #f7f7f7;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1)
}
.completed {
color: gray;
text-decoration: line-through
}
$(document).ready(function(){
$("ul").on("click", "li", function(){
$(this).toggleClass("completed");
});
$("ul").on("click", "span", function(event){
$(this).parent().fadeOut(500,function(){
$(this).remove();
});
event.stopPropagation();
});
$("input[type='text']").keypress(function(event){
if(event.which === 13){
var todoText = $(this).val();
$(this).val("");
$("ul").append("
" + todoText + "")
}
});
$(".fa-plus").click(function(){
$("input[type='text']").fadeToggle();
});
});