Implemented changes to html to build the to do list

Halimatou-saddiyaa · Halimatou-saddiyaa · commit 70fd62339adb · 2025-08-13T19:15:54.000+02:00
diff --git a/Sprint-3/todo-list/index.html b/Sprint-3/todo-list/index.html
@@ -2,26 +2,42 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Title here</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>To Do List App</title>
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
     <link rel="stylesheet" href="style.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+    />
   </head>
   <body>
-    <form>
-      <div>
-        <input type="text" placeholder="New todo..." />
-      </div>
-      <div>
-        <button type="submit">Add Todo</button>
-        <button
-          type="button"
-          id="remove-all-completed"
-          class="btn btn-primary mb-3"
-        >
-          Remove all completed
-        </button>
-      </div>
-    </form>
+    <div class="todo-container">
+      <form onsubmit="addNewTodo(event)" id="todo-form">
+        <div>
+          <input
+            id="todoInput"
+            type="text"
+            placeholder="New todo..."
+            class="form-control"
+          />
+        </div>
+        <div>
+          <button type="submit" class="btn btn-primary mt-2">Add Todo</button>
+          <button
+            type="button"
+            id="remove-all-completed"
+            class="btn btn-primary mt-2"
+          >
+            Remove all completed
+          </button>
+        </div>
+      </form>
+      <ul id="todo-list" class="list-group mt-3"></ul>
+    </div>
     <script src="script.js"></script>
   </body>
 </html>
