├── practice.js ├── index.html └── practice.css /practice.js: -------------------------------------------------------------------------------- 1 | $("ul").on("click","li",function(){ 2 | $(this).toggleClass("completed"); 3 | }); 4 | $("ul").on("click","span",function(event){ 5 | $(this).parent().fadeOut(500,function(){ 6 | $(this).remove(); 7 | }); 8 | 9 | event.stopPropagation(); 10 | 11 | 12 | }); 13 | $(".fa-pen-alt").on("click",function(){ 14 | $("input[type='text']").fadeToggle(); 15 | }); 16 | $("input[type='text']").keypress(function(event){ 17 | if(event.which===13){ 18 | var todoText=$(this).val(); 19 | $(this).val(""); 20 | $("ul").append("
  • "+ todoText +"
    • "); 21 | } 22 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | To Do List 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
    14 |

    To-Do List

    15 | 16 | 21 |
    22 | 23 | 24 | -------------------------------------------------------------------------------- /practice.css: -------------------------------------------------------------------------------- 1 | .container{ 2 | 3 | width: 360px; 4 | margin: 100px auto; 5 | background: #f7f7f7; 6 | box-shadow: 0 0 4px rgba(0,0,0, 0.1); 7 | } 8 | h1{ 9 | background: #4b6cb7; /* fallback for old browsers */ 10 | background: -webkit-linear-gradient(to right, #182848, #4b6cb7); /* Chrome 10-25, Safari 5.1-6 */ 11 | background: linear-gradient(to right, #182848, #4b6cb7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ 12 | 13 | margin: 0; 14 | color: white; 15 | font-size: 24px; 16 | font-weight: normal; 17 | text-transform: uppercase; 18 | padding: 10px 20px; 19 | } 20 | ul{ 21 | list-style: none; 22 | margin: 0; 23 | padding: 0; 24 | 25 | } 26 | body{ 27 | font-family:'Roboto', sans-serif; 28 | background: #2bc0e4; /* fallback for old browsers */ 29 | background: -webkit-linear-gradient(to right, #2bc0e4, #eaecc6); /* Chrome 10-25, Safari 5.1-6 */ 30 | background: linear-gradient(to right, #2bc0e4, #eaecc6); 31 | } 32 | 33 | 34 | 35 | li{ 36 | background: #fff; 37 | height: 40px; 38 | line-height: 40px; 39 | color: #666; 40 | } 41 | input{ 42 | font-size: 18px; 43 | background-color: #f7f7f7; 44 | width: 100%; 45 | padding: 13px 13px 13px 20px; 46 | box-sizing: border-box; 47 | color: #2980b9; 48 | border: 3px solid rgba(0,0,0,0); 49 | } 50 | input:focus{ 51 | background: #fff; 52 | border: 3px solid #2980b9; 53 | 54 | } 55 | li:nth-child(2n){ 56 | background: #f7f7f7; 57 | } 58 | .completed{ 59 | color: gray; 60 | text-decoration: line-through; 61 | } 62 | .fa-pen-alt{ 63 | float: right; 64 | } 65 | span{ 66 | background-color: #e74c3c; 67 | height: 40px; 68 | color: white; 69 | display: inline-block; 70 | width: 0; 71 | margin-right: 20px; 72 | text-align: center; 73 | transition: 0.25s linear; 74 | opacity: 0; 75 | } 76 | li:hover span{ 77 | width: 40px; 78 | opacity: 1; 79 | } --------------------------------------------------------------------------------