├── style.css
├── app.js
└── index.html
/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 | box-sizing: border-box;
5 | font-family: cursive;
6 | }
7 |
8 | body {
9 | background: #f2f2f2;
10 | overflow: auto;
11 | }
12 |
13 | h1 {
14 | text-align: center;
15 | margin: 5%;
16 | font-size: 3rem;
17 | text-decoration: underline;
18 | }
19 |
20 | ul {
21 | text-align: left;
22 | padding-left: 10%;
23 | padding: 7%;
24 | font-size: 2rem;
25 | list-style: circle;
26 | }
27 |
28 | li:hover {
29 | color: red;
30 | margin: 4%;
31 | transition: 1.5s ease;
32 | cursor: pointer;
33 | }
34 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | // Function called while clicking add button
2 | function add_item() {
3 |
4 | // Getting box and ul by selecting id;
5 | let item = document.getElementById("box");
6 | let list_item = document.getElementById("list_item");
7 | if(item.value != ""){
8 |
9 | // Creating element and adding value to it
10 | let make_li = document.createElement("LI");
11 | make_li.appendChild(document.createTextNode(item.value));
12 |
13 | // Adding li to ul
14 | list_item.appendChild(make_li);
15 |
16 | // Reset the value of box
17 | item.value=""
18 |
19 | // Delete a li item on click
20 | make_li.onclick = function(){
21 | this.parentNode.removeChild(this);
22 | }
23 |
24 | }
25 | else{
26 |
27 | // Alert msg when value of box is "" empty.
28 | alert("plz add a value to item");
29 | }
30 |
31 | }
32 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | todo list
6 |
7 |
8 |
9 |
12 |
13 |
14 |
15 |
16 |
TODO APP
17 |
18 |
41 |
44 |