├── README.md
├── td.js
├── index.html
└── td.css
/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 |
--------------------------------------------------------------------------------
/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(""+ x +" ");
8 | }
9 | $(".addtask").val("");
10 | });
11 | $(document).on("click","li",function odd(){
12 | $(this).toggleClass("strike").fadeOut("slow");
13 | });
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | To-Do List
7 | To-Do List Enter Your Task And Click On Plus To Add Your Task To My Task List
13 |
14 | Add +
16 |
17 |
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 |
--------------------------------------------------------------------------------