AustinCodingAcademy · Christrevino22 · Mar 25, 2020 · Mar 25, 2020 · Apr 8, 2020 · Apr 8, 2020
diff --git a/01week/helloworld.js b/01week/helloworld.js
@@ -0,0 +1,3 @@
+"use strict"
+
+    console.log("Hello World!");
diff --git a/03week/toDo.js b/03week/toDo.js
@@ -0,0 +1,85 @@
+    console.log("Loaded todo.js file");
+
+    // when the add button gets clicked
+    // append the text to the button of the list
+
+    let addButton = document.getElementById('addButton');   //<= this is grabbing element id add button/HTML
+    addButton.addEventListener('click', function () {
+       console.log("clicked the add button") ;
+       //read the value from the input box
+       let inputElement = document.getElementById('inputText') ;
+       let todoText = inputElement.value;
+       inputElement.value = '';
+
+      //create an li element
+      let li = document.createElement('li');
+
+      //create a span element
+      let span = document.createElement('span');
+      //update the inner text of the span element
+      span.innerText = todoText;
+
+      //create a delete button
+      let deleteButton = document.createElement('button');
+      //add the size if the button but thanks to google i figured it out
+      deleteButton.style.width = 'fit-content';
+      //update the inner text of the delete button
+      deleteButton.innerText = "delete";
+      //add a class to the delete button
+      deleteButton.classList.add("delete");
+
+      //add the li to the button of the ul element
+      let ul = document.querySelector('ul');
+      ul.appendChild(li)
+
+      //add the span and the delete button as children of the newly created li
+      li.appendChild(span);
+      setupSpanEvent(span);
+      li.appendChild(deleteButton);
+      setupDeleteEvent(deleteButton);
+
+
+    })
+
+    //when a delete button get clicked
+    //delete its parent list item
+
+    let allDeletes = document.querySelectorAll('delete');
+    for(let i=o; i < allDeletes.length; i++) {
+      let deleteButton = allDeletes[i];
+      setupDeleteEvent(deleteButton);
+
+    }
+
+    function setupDeleteEvent(deleteButton){
+      deleteButton.addEventListener('click', function(){
+        console.log('Delete got clicked, parent li is', deleteButton.parentElement) ;
+        let parentLi = deleteButton.parentElement;
+        parentLi.remove();
+        // let parentUl = parentLi.parentElement;
+        // console.log('The parent UL:', parentUl);
+        // parentUl.removeChild(parentLi);
+
+      });
+    }
+
+    //when the span is clicked
+    //class done should be added to it
+
+    let allSpans = document.querySelectorAll("span") ;
+    //console.log("Alls spans:", allSpans);
+    for(let i = 0; i < allSpans.length; i++) {
+        let span = allSpans[i];
+        setupSpanEvent(span);
+
+    }
+
+    //this function add a click event to the span
+    function setupSpanEvent(span) {
+      span.addEventListener('click', function() {
+        console.log("this span got clicked", span);
+        span.classList.toggle ("done");
+      })
+    }
+
+
diff --git a/03week/todo.html b/03week/todo.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>To Do List</title>
+</head>
+<body>
+  <h1>The Best ToDo Tracker</h1>
+  <div id='ulWrapper'>
+    <ul>
+
+    </ul>
+  </div>
+    <input type= 'text' id= "inputText"> <button id= "addButton"> add </button>  
+</body>
+<style>
+  .done {
+    text-decoration: line-through;
+
+  }
+</style>
+<script src= todo.js></script>
+</html>