HTML-CSS-Project/to-do.html at master · uttam8299/HTML-CSS-Project · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<style>

    body{
        background-color: cornsilk;
    }
    #h1{
        color: red;
        background-color: yellow;
    }
    #h3{
        color: black;
        background-color: coral;
    }
    .div{
        padding: 20px;
        margin: 40px;
    }
    #todo{
        text-align: center;
        padding: 50px;
        margin:auto;
        list-style: none;
    }
    hr{
        border: 2px solid;
        color: red;
    }
    #btn{

     width: 15%;
padding: 12px 20px;
margin: 8px 0;
display:inline-block;
border: 1px solid #ccc;
border-radius: 4px;

    }

</style>

<!--HTML Code -->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>To-Do List</title>
</head>

<body>
    <center><h1 id="h1">To-Do List</h1></center>
    <center><h3 id="h3">Click on the button below to make your To-Do List</h3></center>
     <hr>
       <div class="list" >

         <ol id="todo">
         </ol>
        </div>

   <div class="div">
      <center><button id="btn">Add Items
         </button></center>
    </div>


    <script>
    document.getElementById("btn").addEventListener("click",e=>{
        const val = prompt("Enter your items");
        if(val==""){
            val = prompt("Enter your item");
        }
        else{
        const list = document.createElement("li");
        list.textContent = val;
        document.getElementById("todo").appendChild(list);
        }
    });

    </script>

</body>

</html>