├── README.md ├── index.html ├── td.css └── td.js /README.md: -------------------------------------------------------------------------------- 1 | # to-do-list-js 2 | Enter Your Task And Click On Plus To Add Your Task To My Task List .If You Want To Delete The Task Click On Task To Delete It 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | To-Do List 7 | 8 | 9 | 10 | 11 |

To-Do List


12 |

Enter Your Task And Click On Plus To Add Your Task To My Task List
If You Want To Delete The Task Click On Task To Delete It

13 |
14 | 15 | 16 |
17 |
18 |
    19 |
    20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /td.css: -------------------------------------------------------------------------------- 1 | *{ 2 | font-family: 'Poppins'; 3 | margin: 0px; 4 | padding: 0px; 5 | } 6 | .para{ 7 | padding: 0px; 8 | } 9 | .box{ 10 | position: absolute; 11 | top: 30%; 12 | left: 50%; 13 | transform: translate(-50%,50%); 14 | border: none; 15 | } 16 | .plus{ 17 | background-color: green; 18 | color: white; 19 | size: 100px; 20 | border: 0px solid transparent; 21 | border-bottom: grey; 22 | padding: 7px; 23 | border-radius: 10px ; 24 | box-shadow: 0 4px 8px grey; 25 | } 26 | .myt{ 27 | top: 50%; 28 | left: 50%; 29 | transform: translate(-50%,-50%); 30 | position: absolute; 31 | } 32 | .mytask{ 33 | top:65%; 34 | left: 50%; 35 | transform: translate(-50%,-50%); 36 | position: absolute; 37 | background-color: green; 38 | color: white; 39 | padding: 5px; 40 | width: 80%; 41 | height: auto; 42 | border-radius: 5px; 43 | text-align: center; 44 | text-align: center; 45 | } 46 | .ol:hover{ 47 | cursor: pointer; 48 | } 49 | .strike{ 50 | text-decoration: line-through; 51 | } 52 | .plus:hover{ 53 | cursor: pointer; 54 | box-shadow: none; 55 | } 56 | .addtask{ 57 | border: 3px solid transparent; 58 | border-bottom: 3px solid grey; 59 | } 60 | -------------------------------------------------------------------------------- /td.js: -------------------------------------------------------------------------------- 1 | $(".plus").on("click",function even(){ 2 | if ($(".addtask").val()==0) { 3 | alert("Enter The Task"); 4 | } 5 | else{ 6 | var x=$(".addtask").val(); 7 | $(".ol").append("
  1. "+ x +"
    2. "); 8 | } 9 | $(".addtask").val(""); 10 | }); 11 | $(document).on("click","li",function odd(){ 12 | $(this).toggleClass("strike").fadeOut("slow"); 13 | }); --------------------------------------------------------------------------------