UW-JavaScript-310B · jelizaga · Feb 20, 2022
diff --git a/accessing.js b/accessing.js
@@ -1,5 +1,18 @@
 // Change the text of the "Seattle Weather" header to "February 10 Weather Forecast, Seattle"
 
+let weatherHead = document.getElementById("weather-head");
+weatherHead.innerText = "February 10 Weather Forecast, Seattle";
+
 // Change the styling of every element with class "sun" to set the color to "orange"
 
+let weather = document.getElementById("weather");
+let suns = weather.getElementsByClassName("sun");
+suns = Array.from(suns);
+suns.forEach(sun => {
+    sun.style.color = "orange";
+});
+
 // Change the class of the second <li> from to "sun" to "cloudy"
+
+let secondLi = weather.querySelector("li:nth-child(2)");
+secondLi.className = "cloudy";
diff --git a/dom-crud.js b/dom-crud.js
@@ -1,14 +1,28 @@
 // Create a new <a> element containing the text "Buy Now!" 
 // with an id of "cta" after the last <p>
 
+let cta = document.createElement("a");
+cta.innerText = "Buy Now!";
+cta.id = "cta";
+let main = document.getElementsByTagName("main")[0];
+main.appendChild(cta);
 
 // Access (read) the data-color attribute of the <img>,
 // log to the console
 
+let image = document.getElementsByTagName("img")[0];
+console.log(image.dataset.color);
 
 // Update the third <li> item ("Turbocharged"), 
 // set the class name to "highlight"
 
+let ul = document.getElementsByTagName("ul")[0];
+let li = ul.querySelector("li:nth-child(3)");
+li.className = "highlight";
 
 // Remove (delete) the last paragraph
 // (starts with "Available for purchase now…")
+
+let p = main.getElementsByTagName("p");
+p = Array.from(p);
+main.removeChild(p[p.length - 1]);
diff --git a/plusesAndMinuses.html b/plusesAndMinuses.html
@@ -5,6 +5,9 @@
   </head>
 
   <body>
-    <!-- Your HTML here -->
+    <button id="plus-btn">+</button>
+    <button id="minus-btn">-</button>
+    <p id="counter">0</p>
   </body>
+  <script src="plusesAndMinuses.js"></script>
 </html>
diff --git a/plusesAndMinuses.js b/plusesAndMinuses.js
@@ -1,2 +1,20 @@
 // When a user clicks the + element, the count should increase by 1 on screen.
+
+let counterValue = 0;
+const plusBtn = document.getElementById("plus-btn");
+const minusBtn = document.getElementById("minus-btn");
+const counter = document.getElementById("counter");
+console.log(plusBtn);
+
+
+plusBtn.addEventListener("click", () => {
+    counterValue++;
+    counter.innerText = counterValue;
+});
+
 // When a user clicks the – element, the count should decrease by 1 on screen.
+
+minusBtn.addEventListener("click", () => {
+    counterValue--;
+    counter.innerText = counterValue;
+});
diff --git a/toDoList.js b/toDoList.js
@@ -1,14 +1,41 @@
 // If an li element is clicked, toggle the class "done" on the <li>
 
+const addBtn = document.getElementsByClassName("add-item")[0];
+const todayList = document.getElementsByClassName("today-list")[0];
+
+const doneListItem = function(e) {
+  console.log(e.target);
+  e.preventDefault();
+  if (e.target.tagName === "LI") {
+    e.target.className = "done";
+  }
+}
+
 // If a delete link is clicked, delete the li element / remove from the DOM
 
+const deleteListItem = function(e) {
+  e.preventDefault();
+  if (e.target.className === "delete") {
+    e.target.parentNode.remove();
+  }
+}
+
 // If an 'Add' link is clicked, adds the item as a new list item with
 // addListItem function has been started to help you get going!
 // Make sure to add an event listener(s) to your new <li> (if needed)
 const addListItem = function(e) {
   e.preventDefault();
   const input = this.parentNode.getElementsByTagName('input')[0];
-  const text = input.value; // use this text to create a new <li>
-
-  // Finish function here
+  const text = input.value;
+  let li = document.createElement("li");
+  li.innerHTML =
+    `
+      <span>${text}</span>
+      <a class="delete">Delete</a>
+    `
+  li.addEventListener("click", deleteListItem);
+  li.addEventListener("click", doneListItem);
+  todayList.appendChild(li);
 };
+
+addBtn.addEventListener("click", addListItem);
diff --git a/traversing.js b/traversing.js
@@ -1,11 +1,17 @@
 // Given the <body> element as variable body,
 // access the <main> node and log to the console.
+
 const body = document.querySelector('body');
+console.log(body.getElementsByTagName("main")[0]);
 
 // Given the <ul> element as variable ul,
-// access <body>  and log to the console.
+// access <body> and log to the console.
+
 const ul = document.querySelector('ul');
+console.log(ul.parentNode.parentNode);
 
 // Given the <p> element as var p,
 // access the 3rd <li>  and log to the console.
+
 const p = document.querySelector('p');
+console.log(p.previousSibling.previousSibling.firstChild.nextSibling.nextSibling.nextSibling.nextSibling.nextSibling);
diff --git a/wheresThePointer.js b/wheresThePointer.js
@@ -1,3 +1,10 @@
 // Attach one listener that will detect clicks on any of the <td>
 // elements.  Should update that element's innerHTML to be the
 // x, y coordinates of the mouse at the time of the click
+
+const table = document.getElementsByTagName("table")[0];
+console.log(table);
+
+table.addEventListener("click", function (e) {
+    e.target.innerHTML = `${e.clientX}, ${e.clientY}`;
+})