removed .classList from js file

BakhatBegum · BakhatBegum · commit afbbe7349236 · 2024-01-23T14:44:49.000Z
diff --git a/week-3/todo-list/index.html b/week-3/todo-list/index.html
@@ -10,6 +10,7 @@
   </head>
   <body>
     <form>
+      
       <div class="todo-style">
         <label for="todo-list" id="add-style">Add new Todos</label>
         <div class="line"></div>
@@ -20,10 +21,7 @@
         <button type="button" onclick="addNewTodo()">Add Todo</button>
         <button type="submit" >Remove all completed </button>
       </div>
-        
-          <ul id="task-list">
-            
-        </ul>
+        <ul id="task-list"></ul>
        
     
     </form>
diff --git a/week-3/todo-list/script.js b/week-3/todo-list/script.js
@@ -1,11 +1,8 @@
-// These are the same todos that currently display in the HTML
-// You will want to remove the ones in the current HTML after you have created them using JavaScript
 let todos = [
   { task: "Wash the dishes", completed: false },
   { task: "Do the shopping", completed: false },
 ];
 
-// This function will take the value of the input field and add it as a new todo to the bottom of the todo list. These new todos will need the completed and delete buttons adding like normal.
 function addNewTodo(event) {
 
   let list = document.getElementById("todo-list");
@@ -14,11 +11,11 @@ function addNewTodo(event) {
   
   let li = document.createElement("li")
   li.classList.add("style-list");
-  list.appendChild(li);
-  
+    list.appendChild(li);
+
+    
   let container = document.createElement("span")
-    container.className = "badge bg-primary rounded-pill";
-      container.classList.add("layout");
+    container.classList.add("layout");
       list.appendChild(container);
 
       
@@ -28,6 +25,7 @@ function addNewTodo(event) {
     checkIcon.onclick = function() {
       li.classList.toggle("completed");
     }
+     container.appendChild(checkIcon);
    
 
     let trashIcon = document.createElement("i");
@@ -36,7 +34,6 @@ function addNewTodo(event) {
     trashIcon.onclick = function(){
       li.remove();
    };
-        container.appendChild(checkIcon);
         container.appendChild(trashIcon);
 
   let textNode = document.createTextNode(listValue);
@@ -51,11 +48,10 @@ function addNewTodo(event) {
 }
 
 
-// Advanced challenge: Write a fucntion that checks the todos in the todo list and deletes the completed ones (we can check which ones are completed by seeing if they have the line-through styling applied or not).
 function deleteAllCompletedTodos(event) {
   let todoList = document.getElementById("task-list");
-  let completedItems = document.querySelectorAll(".completed");
-  completedItems.forEach(function (item) {
+  let itemsTocompleted = document.querySelectorAll(".completed");
+  itemsTocompleted.forEach(function (item) {
     todoList.removeChild(item);
   });
 }
diff --git a/week-3/todo-list/style.css b/week-3/todo-list/style.css
@@ -3,13 +3,10 @@ body{
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: center;
-    background-size: auto 100%;
+    background-size: auto;
     background-image: url("./assets/world.jpg");
 }
-/* form{
-   margin-left: 600px;
-  
-} */
+
 .completed{
     text-decoration: line-through;
     color: rgb(24, 27, 24);
@@ -79,6 +76,9 @@ button{
    }
 
    @media screen and (max-width: 768px) {
+    .layout{
+        padding-left:200px;
+    }
     form{
         align-items: flex-start;
         justify-content: start;
