UW-JavaScript-310B · slartib · Mar 11, 2022
diff --git a/accessing.js b/accessing.js
@@ -1,5 +1,11 @@
 // Change the text of the "Seattle Weather" header to "February 10 Weather Forecast, Seattle"
-
+document.getElementById("weather-head").innerHTML = "February 10 Weather Forecast, Seattle"
 // Change the styling of every element with class "sun" to set the color to "orange"
-
+let elements = document.getElementsByClassName("sun")
+for (i = 0; i < elements.length; i++)
+{
+    elements[i].style.color = 'orange'
+}
 // Change the class of the second <li> from to "sun" to "cloudy"
+let uList = document.getElementById("weather")
+uList.getElementsByTagName("li")[1].className = "cloudy"
diff --git a/dom-crud.js b/dom-crud.js
@@ -1,14 +1,25 @@
 // Create a new <a> element containing the text "Buy Now!" 
 // with an id of "cta" after the last <p>
+let aNode = document.createElement("a")
+aNode.id = "cta"
+aNode.appendChild(document.createTextNode("Buy Now!"))
+let paraGraphs = document.getElementsByTagName("p")
+let lastPara =  paraGraphs[paraGraphs.length - 1]
+lastPara.parentNode.insertBefore(aNode, lastPara.nextSibling)
 
 
 // Access (read) the data-color attribute of the <img>,
 // log to the console
+let imgNodes = document.getElementsByTagName("img")
 
+console.log(imgNodes[0].getAttribute("data-color"))
 
 // Update the third <li> item ("Turbocharged"), 
 // set the class name to "highlight"
+let liElements = document.getElementsByTagName("li")
+liElements[2].className = "highlight"
 
 
 // Remove (delete) the last paragraph
 // (starts with "Available for purchase now…")
+lastPara.parentNode.removeChild(lastPara)
diff --git a/plusesAndMinuses.html b/plusesAndMinuses.html
@@ -5,6 +5,10 @@
   </head>
 
   <body>
-    <!-- Your HTML here -->
+  <button id="plus" type="button">+</button>
+  <button id="minus" type="button">-</button>
+  <p id="count">0</p>
   </body>
+
+  <script src="plusesAndMinuses.js"></script>
 </html>
diff --git a/plusesAndMinuses.js b/plusesAndMinuses.js
@@ -1,2 +1,12 @@
 // When a user clicks the + element, the count should increase by 1 on screen.
+let count = 0
+//let plus = document.getElementById("plus")
+document.getElementById("plus").addEventListener("click", function ()
+{count++;
+    console.log(count)
+document.getElementById("count").innerText = count.toString()})
 // When a user clicks the – element, the count should decrease by 1 on screen.
+document.getElementById("minus").addEventListener("click", function ()
+{count--;
+    console.log(count)
+    document.getElementById("count").innerText = count.toString()})
diff --git a/stoppingBehavior.js b/stoppingBehavior.js
@@ -5,6 +5,13 @@ document.getElementById('cat').addEventListener('click', () => {
 
 // When clicked, "More info" link should alert "Here's some info"
 // instead of going to a new webpage
-
+document.getElementById('more-info').addEventListener('click', (e) => {
+  e.preventDefault()
+  alert("Here's some info!");
+});
 // When the bark button is clicked, should alert "Bow wow!"
 // Should *not* alert "meow"
+document.getElementById('dog').addEventListener('click', (e) => {
+  e.stopPropagation()
+  alert('Bow woa!');
+});
diff --git a/toDoList.js b/toDoList.js
@@ -1,6 +1,27 @@
 // If an li element is clicked, toggle the class "done" on the <li>
+const toggleLiDone = function(e)
+{
 
+  if (e.target.tagName === 'LI') {
+    if (e.target.className === 'done') {
+      e.target.className = ''
+    } else {
+      e.target.className = 'done'
+    }
+  }
+}
+
+let ulNode = document.getElementsByClassName('today-list')
+ulNode[0].addEventListener('click', toggleLiDone)
 // If a delete link is clicked, delete the li element / remove from the DOM
+const deleteLi = (e) =>
+{
+  e.preventDefault()
+  e.stopPropagation()
+  e.target.parentElement.parentElement.removeChild(e.target.parentElement)
+}
+
+ulNode[0].addEventListener('click', deleteLi)
 
 // 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!
@@ -9,6 +30,19 @@ 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>
+  let ulElement = document.getElementsByClassName("today-list")[0]
+  let liElement = document.createElement("li")
+  let spanElement = document.createElement("span")
+  spanElement.innerText = text + " "
+  liElement.appendChild(spanElement)
+  let aElement = document.createElement("a")
+  aElement.innerText = 'Delete'
+  aElement.className = 'delete'
+  liElement.appendChild(aElement)
+  ulElement.appendChild(liElement)
 
   // Finish function here
 };
+
+let addButton = document.getElementsByClassName("add-item")[0]
+addButton.addEventListener('click', addListItem)
diff --git a/traversing.js b/traversing.js
@@ -1,11 +1,14 @@
 // Given the <body> element as variable body,
 // access the <main> node and log to the console.
 const body = document.querySelector('body');
+console.log(body.firstElementChild)
 
 // Given the <ul> element as variable ul,
 // access <body>  and log to the console.
 const ul = document.querySelector('ul');
+console.log(ul.parentElement.parentElement)
 
 // Given the <p> element as var p,
 // access the 3rd <li>  and log to the console.
 const p = document.querySelector('p');
+console.log(p.previousElementSibling.children[2])
diff --git a/wheresThePointer.js b/wheresThePointer.js
@@ -1,3 +1,14 @@
 // 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 wheresThePointer = function(e)
+{
+    e.stopPropagation()
+    if (e.target.tagName === 'TD')
+    {
+        e.target.innerHTML = `${e.clientX},${e.clientY}`
+    }
+}
+
+let tableElement = document.getElementsByTagName('table')[0]
+tableElement.addEventListener('click', wheresThePointer)