UW-JavaScript-310B · fdcartwright · Feb 24, 2022
diff --git a/accessing.js b/accessing.js
@@ -1,5 +1,16 @@
 // Change the text of the "Seattle Weather" header to "February 10 Weather Forecast, Seattle"
 
+const weatherChange = document.getElementById("weather-head");
+weatherChange.innerHTML = "February 10 Weather Forecast, Seattle";
+
 // Change the styling of every element with class "sun" to set the color to "orange"
 
+const sunElements = document.getElementsByClassName("sun");
+for (var i = 0; i < sunElements.length; i++) {
+    console.log('second element', sunElements)
+    sunElements[i].style.color = 'orange';
+}
+
 // Change the class of the second <li> from to "sun" to "cloudy"
+const sunClass = document.querySelector('li.sun')
+sunClass.className = 'cloudy';
diff --git a/dom-crud.html b/dom-crud.html
@@ -4,7 +4,7 @@
     <title>DOM CRUD</title>
     <link rel="stylesheet" href="dom-crud.css" />
   </head>
-
+ 
   <body>
     <main>
       <h1>Our Product</h1>

diff --git a/dom-crud.js b/dom-crud.js
@@ -1,14 +1,30 @@
 // Create a new <a> element containing the text "Buy Now!" 
 // with an id of "cta" after the last <p>
 
+const newEl = document.createElement('a');
+const newTxtNode = document.createTextNode('Buy Now!');
+newEl.appendChild(newTxtNode);
+newEl.setAttribute('id', 'cta')
+
+const body = document.getElementsByTagName('main')[0];
+body.appendChild(newEl);
+
 
 // Access (read) the data-color attribute of the <img>,
 // log to the console
 
+const readAtt = document.getElementsByTagName('img')[0];
+const readColor = readAtt.getAttribute('data-color');
+console.log(readColor);
 
 // Update the third <li> item ("Turbocharged"), 
 // set the class name to "highlight"
 
+const tuboChanged = document.getElementsByTagName('li')[2];
+tuboChanged.className = 'highlight';
 
 // Remove (delete) the last paragraph
 // (starts with "Available for purchase now…")
+
+const lastPara = document.getElementsByTagName('p')[0];
+lastPara.remove();
diff --git a/plusesAndMinuses.html b/plusesAndMinuses.html
@@ -5,6 +5,9 @@
   </head>
 
   <body>
-    <!-- Your HTML here -->
+  <button id="plus" type="button">+</button>
+  <button id="minus" type="button">-</button>
+  <div id="count">Counter: 0</div>
   </body>
+  <script src="plusesAndMinuses.js"></script>
 </html>
diff --git a/plusesAndMinuses.js b/plusesAndMinuses.js
@@ -1,2 +1,15 @@
 // When a user clicks the + element, the count should increase by 1 on screen.
+let counter = 0
+const countEl = document.getElementById('count');
+const plusEl = document.getElementById('plus');
+plusEl.addEventListener('click', (e) =>{
+    counter++;
+    countEl.innerHTML = `counter: ${counter}`
+})
+
 // When a user clicks the – element, the count should decrease by 1 on screen.
+const minusEl = document.getElementById("minus");
+minusEl.addEventListener('click', (e) =>{
+    counter--;
+    countEl.innerHTML = `counter: ${counter}`
+})
diff --git a/stoppingBehavior.js b/stoppingBehavior.js
@@ -6,5 +6,17 @@ document.getElementById('cat').addEventListener('click', () => {
 // When clicked, "More info" link should alert "Here's some info"
 // instead of going to a new webpage
 
+const moreEl = document.getElementById('more-info');
+moreEl.addEventListener("click", function (e) {
+  e.preventDefault();
+  alert("Here's some info");
+});
+
 // When the bark button is clicked, should alert "Bow wow!"
 // Should *not* alert "meow"
+
+const newClick = document.getElementById('dog');
+newClick.addEventListener('click', (e) => {
+  e.stopPropagation();
+  alert("Bow wow!");
+});
diff --git a/toDoList.js b/toDoList.js
@@ -1,14 +1,57 @@
 // If an li element is clicked, toggle the class "done" on the <li>
 
+const liElement = document.getElementsByTagName('li')[0];
+liElement.addEventListener('click', function (e) {
+  liElement.classList.toggle('done');
+})
+
+const toggleClass = (node) => {
+  node.classList.toggle("done");
+}
+
 // If a delete link is clicked, delete the li element / remove from the DOM
 
+const delEl = document.getElementsByClassName('delete')[0];
+delEl.addEventListener('click', function (e) {
+  e.target.parentNode.remove();
+})
+
+const deleteNode = (node) => {
+  node.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) {
+
+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>
+  const input = document.getElementsByTagName('input')[0];
+  const text = input.value; // use this text to create a new <li> 
+  const liEl = document.createElement('li');
+  const ulEl = document.getElementsByClassName('today-list')[0];
+  ulEl.appendChild(liEl);
+
+  const spanEl = document.createElement('span');
+  spanEl.onclick = () => { toggleClass(liEl) }
+  const liTextNode = document.createTextNode(text);
+  spanEl.appendChild(liTextNode);
+  liEl.appendChild(spanEl);
+
+  const a = document.createElement('a');
+  a.onclick = () => { deleteNode(a) }
+  a.classList.add("delete");
+  liEl.appendChild(a);
+
+  const deleteTxt = document.createTextNode('Delete').style.marin = "5px";
+  a.appendChild(deleteTxt);
 
   // Finish function here
 };
+
+const addClick = document.getElementsByClassName('add-item');
+for (let i = 0; i < addClick.length; i++) {
+  addClick[i].addEventListener('click', function (e) {
+    addListItem(e);
+  });
+}
diff --git a/traversing.js b/traversing.js
@@ -1,11 +1,22 @@
 // Given the <body> element as variable body,
 // access the <main> node and log to the console.
+
 const body = document.querySelector('body');
+const mainEl = body.querySelector('main');
+console.log(mainEl);
+
+// // Given the <ul> element as variable ul,
+// // access <body>  and log to the console.
 
-// Given the <ul> element as variable ul,
-// access <body>  and log to the console.
 const ul = document.querySelector('ul');
+const bodyEl = ul.closest('body');
+console.log(bodyEl);
+
+// // Given the <p> element as var p,
+// // access the 3rd <li>  and log to the console.
 
-// Given the <p> element as var p,
-// access the 3rd <li>  and log to the console.
 const p = document.querySelector('p');
+const ulEl = p.previousElementSibling;
+const ulList = ulEl.children;
+const liEl = ulList[2].innerHTML;
+console.log(liEl);
diff --git a/wheresThePointer.js b/wheresThePointer.js
@@ -1,3 +1,11 @@
 // 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 elList = document.getElementsByTagName('td');
+for (let i = 0; i < elList.length; i++) {
+    elList[i].addEventListener('click', function (e) {
+        console.log("here is e", e)
+        elList[i].innerHTML = `x: ${e.clientX}, y: ${e.clientY}`
+    });
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,7 @@ @@
         <title>DOM CRUD</title>
         <link rel="stylesheet" href="dom-crud.css" />
       </head>
       <body>
         <main>
           <h1>Our Product</h1>
@@ Expand Down @@