UW-JavaScript-310B · Cahillmn · Feb 24, 2022
diff --git a/accessing.js b/accessing.js
@@ -1,5 +1,10 @@
 // Change the text of the "Seattle Weather" header to "February 10 Weather Forecast, Seattle"
-
+let day = document.getElementById("weather-head");
+day.innerHTML = "February 10 Weather Forecast, Seattle"
 // Change the styling of every element with class "sun" to set the color to "orange"
-
+let elementColor = document.querySelectorAll('.sun');
+elementColor.forEach((element) => element.style.color = 'orange');
 // Change the class of the second <li> from to "sun" to "cloudy"
+let sunToCloud = document.getElementsByTagName('li')[1];
+sunToCloud.className = 'cloudy';
+sunToCloud.removeAttribute("style");
diff --git a/dom-crud.js b/dom-crud.js
@@ -1,14 +1,26 @@
 // Create a new <a> element containing the text "Buy Now!" 
 // with an id of "cta" after the last <p>
+const aElement = document.createElement('a');
+aElement.innerText = "Buy Now!"
+aElement.setAttribute('id', 'cta');
+const mainElement = document.getElementsByTagName('main')[0];
+mainElement.appendChild(aElement);
 
 
 // Access (read) the data-color attribute of the <img>,
 // log to the console
+const image = document.getElementsByTagName('img')[0];
+const color = image.getAttribute('data-color');
+console.log(color);
 
 
 // Update the third <li> item ("Turbocharged"), 
 // set the class name to "highlight"
+const turbocharged = document.getElementsByTagName('li')[2];
+  turbocharged.classList.add('highlight');
 
 
 // Remove (delete) the last paragraph
 // (starts with "Available for purchase now…")
+const paragraph = document.getElementsByTagName('p')[0];
+mainElement.removeChild(paragraph);
diff --git a/plusesAndMinuses.html b/plusesAndMinuses.html
@@ -1,10 +1,21 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>Pluses and Minuses</title>
-  </head>
-
-  <body>
-    <!-- Your HTML here -->
-  </body>
-</html>
+
+<head>
+  <title>Pluses and Minuses</title>
+</head>
+
+<body>
+  <!-- Your HTML here -->
+  <main>
+    <button id ="add">+</button>
+    <button id ="subtract">-</button>
+    <div id = "total">Total Count: 0</div>
+  </main>
+  <script src="plusesAndMinuses.js">
+
+  </script>
+
+</body>
+
+</html>
diff --git a/plusesAndMinuses.js b/plusesAndMinuses.js
@@ -1,2 +1,24 @@
+let counter = 0
+
 // When a user clicks the + element, the count should increase by 1 on screen.
+const addButton = document.getElementById('add');
+const subtractButton = document.getElementById('subtract');
+const counterDiv = document.getElementById('total');
+
+addButton.addEventListener('click', () => {
+    {
+        counter++;
+    }
+    counterDiv.innerHTML = `Total Count: ${counter}`;
+
+
+})
 // When a user clicks the – element, the count should decrease by 1 on screen.
+subtractButton.addEventListener('click', () => {
+    {
+        counter--;
+    }
+    counterDiv.innerHTML = `Total Count: ${counter}`;
+
+
+})
diff --git a/stoppingBehavior.js b/stoppingBehavior.js
@@ -5,6 +5,14 @@ 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', (event) => {
+  alert("Here's some info");
+  event.preventDefault();
+});
 
 // When the bark button is clicked, should alert "Bow wow!"
 // Should *not* alert "meow"
+document.getElementById('dog').addEventListener('click', (event) => {
+  alert("Bow wow!");
+  event.stopPropagation();
+});
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 ulList = document.querySelector('ul.today-list');
+
+let liList = document.querySelectorAll('li');
+
+ulList.addEventListener('click', e => {
+  const li = e.target;
+  liList.forEach(e => e.classList.toggle("done"));
+
+});
+
+
 // If a delete link is clicked, delete the li element / remove from the DOM
+const deleteLink = document.getElementsByClassName('delete')[0];
+const parentLink = deleteLink.parentNode;
+console.log(parentLink);
+
+deleteLink.addEventListener('click', (e) => {
+
+  parentLink.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!
@@ -9,6 +30,22 @@ 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>
+  // ulList has the ul in it
+
+  const liElement = document.createElement('li');
+  const aElement = document.createElement('a');
+  const spanElement = document.createElement('span');
+
+  ulList.appendChild(liElement);
+  liElement.appendChild(spanElement);
+  liElement.appendChild(aElement);
+
+  spanElement.innerText = `${text}`;
+  aElement.setAttribute('class', 'delete');
+  aElement.innerHTML = `Delete`;
 
   // Finish function here
 };
+
+const addItem = document.getElementsByClassName('add-item')[0];
+addItem.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');
-
+const bodyChild = body.children[0];
+console.log(bodyChild)
 // Given the <ul> element as variable ul,
 // access <body>  and log to the console.
 const ul = document.querySelector('ul');
+const bodyElement = ul.closest('body');
+console.log(bodyElement);
 
 // Given the <p> element as var p,
 // access the 3rd <li>  and log to the console.
 const p = document.querySelector('p');
+const siblingUl = p.previousElementSibling;
+const child = siblingUl.lastElementChild;
+console.log(child)
diff --git a/wheresThePointer.js b/wheresThePointer.js
@@ -1,3 +1,13 @@
 // 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 detecter = document.querySelectorAll('td');
+detecter.forEach(e => e.addEventListener('click',
+
+function(e) {
+ let x = e.pageX;
+ let y = e.pageY;
+    this.innerHTML = `${x}, ${y}`;
+}
+
+));