To_Do/index.html at main · vrindaatalwar/To_Do · 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
<html>
  <head>
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body class="bg-gray-900 text-white min-h-screen flex flex-col items-center py-10">
    <h1 class="text-3xl font-bold mb-6">To-do List</h1>

    <div class="flex gap-2 mb-6">
      <input type="text"
             class="border border-gray-700 bg-gray-800 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500 text-white"
             placeholder="Enter a task...">
      <button onClick="addTodo()"
              class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-md">Add To-do</button>
      <button onClick="deleteAllTodo()"
              class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded-md">Delete All</button>
    </div>

    <div id="todoss" class="w-full max-w-md space-y-3"></div>
  </body>
  <script>
    let todos = [];
    function addTodo(){
      todos.push({
        title: document.querySelector("input").value
      })
      render();
    }

    function deleteTodo(index){
      todos.splice(index, 1);
      render();
    }

    function deleteAllTodo(){
      todos = [];
      render();
    }

    function render(){
      document.querySelector("#todoss").innerHTML = "";
      for(let i = 0; i < todos.length; i++){
        const todo = todos[i];
        const div = document.createElement("div");
        div.className = "flex justify-between items-center bg-gray-800 p-3 rounded-md border border-gray-700";

        const newSpan = document.createElement("span");
        newSpan.innerHTML = todo.title;

        const newButton = document.createElement("button");
        newButton.innerHTML = "Delete";
        newButton.className = "bg-red-600 hover:bg-red-700 px-3 py-1 rounded-md";
        newButton.setAttribute("onclick", "deleteTodo(" + i + ")");

        div.appendChild(newSpan);
        div.appendChild(newButton);
        document.querySelector("#todoss").appendChild(div);
      }
    }
  </script>
</html>