UW-JavaScript-310B · aliciagoodwin · Feb 18, 2022 · Feb 18, 2022 · Feb 23, 2022 · Feb 24, 2022
diff --git a/accessing.js b/accessing.js
@@ -1,5 +1,12 @@
 // Change the text of the "Seattle Weather" header to "February 10 Weather Forecast, Seattle"
+const header = document.getElementById('weather-head');
+    header.innerText = "February 10 Weather Forecast, Seattle";
 
 // Change the styling of every element with class "sun" to set the color to "orange"
+ const sunPl = document.querySelectorAll('.sun');
+
+ sunPl.forEach((s) => s.style.color = "orange");
 
 // Change the class of the second <li> from to "sun" to "cloudy"
+const liSecond = document.querySelectorAll('li')[1];
+ liSecond.className = "cloudy";
diff --git a/dom-crud.js b/dom-crud.js
@@ -1,14 +1,37 @@
 // Create a new <a> element containing the text "Buy Now!" 
 // with an id of "cta" after the last <p>
 
+const newP = document.createElement('p');
+const newAEl = document.createElement("a");
+const aText = document.createTextNode("Buy Now!");
+    newAEl.setAttribute('href', "");
+    newAEl.appendChild(aText);
+    newP.setAttribute('id', 'cta');
+    newP.appendChild(newAEl);
+
 
+    //const newP = document.createElement("p");
+    //newP.setAttribute('id', 'cta');
+    //newP.appendChild(newAEl);
+
+ const firstP = document.getElementsByTagName('p')[0];
+    firstP.parentNode.insertBefore(newP, firstP);
+
+
 // Access (read) the data-color attribute of the <img>,
 // log to the console
 
+const imgCol = document.getElementsByTagName('img')[0];
+const col = imgCol.dataset.color;
+console.log(`${col}`);
 
 // Update the third <li> item ("Turbocharged"), 
 // set the class name to "highlight"
 
+const liThird = document.getElementsByTagName('li')[2];
+    liThird.setAttribute('class', 'highlight');
 
 // Remove (delete) the last paragraph
 // (starts with "Available for purchase now…")
+
+firstP.parentNode.removeChild(firstP);
diff --git a/plusesAndMinuses.html b/plusesAndMinuses.html
@@ -6,5 +6,9 @@
 
   <body>
     <!-- Your HTML here -->
+    <p id="plus">+</p>
+    <p id="minus">-</p>
+
+    <script src="plusesAndMinuses.js"></script>
   </body>
 </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.
 // When a user clicks the – element, the count should decrease by 1 on screen.
+
+let counter = 0;
+
+const plusEl = document.getElementById('plus');
+
+    plusEl.addEventListener('click', (e) => {
+        counter++;
+        console.log(`Count is ${counter}`);
+
+    });
+
+    const minusEl = document.getElementById('minus');
+
+    minusEl.addEventListener('click', (e) => {
+        counter--;
+        console.log(`Count is ${counter}`);
+
+    });
diff --git a/toDoList.js b/toDoList.js
@@ -9,6 +9,38 @@ 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
+  input.value = "";
+
+  let addToList = document.querySelector('.today-list');
+    liTag = document.createElement('li');
+      addToList.appendChild(liTag);
+        spanTag = document.createElement('span');
+      liTag.appendChild(spanTag);
+          spanTag.innerHTML = text;
+          deleteItem = document.createElement('a'); 
+          deleteItem.classList.add('delete');
+          deleteItem.innerHTML = 'Delete';
+      liTag.appendChild(deleteItem); 
+
 };
+
+
+const listItemClickHandler = function(e) {
+  if (e.target.className === 'delete') {
+    const deleteButton = e.target;
+    const item = deleteButton.parentNode;
+    todayList.removeChild(item);
+
+   } else {
+
+    const underlineItem = e.target.parentNode;
+      underlineItem.classList.toggle('done');
+   }
+}
+
+const addButton = document.querySelector('.add-item');
+addButton.addEventListener('click', addListItem);
+
+const todayList = document.querySelector('.today-list');
+todayList.addEventListener('click', listItemClickHandler);
+
diff --git a/traversing.js b/traversing.js
@@ -2,10 +2,21 @@
 // access the <main> node and log to the console.
 const body = document.querySelector('body');
 
+const main = body.getElementsByTagName('main');
+
+console.log(main);
+
 // Given the <ul> element as variable ul,
 // access <body>  and log to the console.
 const ul = document.querySelector('ul');
+    const ulBody = ul.parentNode.parentNode;
+    console.log(ulBody);
 
 // Given the <p> element as var p,
 // access the 3rd <li>  and log to the console.
 const p = document.querySelector('p');
+
+const findSibling = p.previousElementSibling;
+
+const findThirdLi = findSibling.getElementsByTagName('li')[2];
+    console.log(findThirdLi);
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 wholeTable = document.querySelector('table');
+
+const addCoord = (e) => {
+           let tdToChange = e.target;
+             tdToChange.innerHTML = `${e.offsetX}, ${e.offsetY}`;
+    };
+
+    wholeTable.addEventListener('click', addCoord);