<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Todo List</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Cabin:400,700" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div class="container">
<h1>To-Do List <span id="shbtn">+</span></h1>
<input id="txt" type="text" placeholder="What needs to be done?" style="display:none;">
<ul>
</ul>
<div id="summary">
<p>Date : <span id="date"> 0</span></p>
<p>Total : <span id="total"> 0</span></p>
</div>
</div>
</body>
</html>
------------------------------------------------------------------------------------------
CSS :
* {margin: 0;padding: 0;font-family: arial;box-sizing: border-box;}
:focus{outline: none;}
body{background: rgb(232,61,46);
background: -moz-linear-gradient(left, rgba(232,61,46,1) 0%, rgba(221,106,44,1) 46%, rgba(221,192,97,1) 100%);
background: -webkit-linear-gradient(left, rgba(232,61,46,1) 0%,rgba(221,106,44,1) 46%,rgba(221,192,97,1) 100%);
background: linear-gradient(to right, rgba(232,61,46,1) 0%,rgba(221,106,44,1) 46%,rgba(221,192,97,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e83d2e', endColorstr='#ddc061',GradientType=1 );}
.container {margin:30px auto 0;max-width: 600px;overflow: hidden;}
.container h1 {margin: 0;font-size: 19px;padding: 10px;color: #fff;background: #9c9c9c;position: relative;background: rgb(165,33,33);
background: -moz-linear-gradient(left, rgba(165,33,33,1) 0%, rgba(221,106,44,1) 46%, rgba(252,165,111,1) 100%);
background: -webkit-linear-gradient(left, rgba(165,33,33,1) 0%,rgba(221,106,44,1) 46%,rgba(252,165,111,1) 100%);
background: linear-gradient(to right, rgba(165,33,33,1) 0%,rgba(221,106,44,1) 46%,rgba(252,165,111,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a52121', endColorstr='#fca56f',GradientType=1 );}
.container h1 span {cursor: pointer;position: absolute;right: 0px;font-size: 30px;top: 0px;height: 42px;width: 44px;text-align: center;line-height: 41px;border-left: 1px solid #fff;}
.container input[type="text"] {width: 100%;padding: 12px 10px 11px;font-size: 15px;border: 0;background: #fff;color: #737373;}
.container ul {float: left;width: 100%;background: #fff;}
.container ul li {float: left;width: 100%;position: relative;padding: 9px 10px;font-size: 15px;color: #737373; transition: all 0.26s ease-out 0s;}
.container ul li span {position: absolute;left: -100%;top: 0;height: 36px; cursor: pointer;width: 36px;background: #a62421;color: #fff;text-align: center;line-height: 38px;transition: all 0.26s ease-out 0s;}
.container ul li:hover span, .container ul li.selected span {left: 0;}
.container ul li:hover, .container ul li.selected {text-decoration: line-through;}
#summary {display: flex;justify-content: space-between;padding: 10px;border-top: 1px solid #fff;background: rgb(165,33,33);
background: -moz-linear-gradient(left, rgba(165,33,33,1) 0%, rgba(221,106,44,1) 46%, rgba(252,165,111,1) 100%);
background: -webkit-linear-gradient(left, rgba(165,33,33,1) 0%,rgba(221,106,44,1) 46%,rgba(252,165,111,1) 100%);
background: linear-gradient(to right, rgba(165,33,33,1) 0%,rgba(221,106,44,1) 46%,rgba(252,165,111,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a52121', endColorstr='#fca56f',GradientType=1 );}
#summary p {font-size: 12px;color: #fff;}
---------------------------------------------------------------
jQuery :
$(document).ready(function(){
var d = new Date(),
total =0;
$(document).on('click', '#shbtn', function(){
$('#txt').slideToggle();
});
$('#txt').keypress(function(e){
if(e.which===13){
var txt_val = $(this).val();
$('ul').append('<li><span>X</span>' + txt_val + '</li>');
$('#txt').val('');
total++;
$('#total').text(total);
}
});
$(document).on('click', 'ul li', function(){
$(this).toggleClass('selected');
});
$(document).on('click', 'ul li span', function(){
total--;
$('#total').text(total);
$(this).closest('li').fadeOut('slow', function(){
$(this).remove();
});
});
$('#date').text(d.toDateString());
});
Hello,
No comments:
Post a Comment