UW-JavaScript-310B · nellb28 · Feb 22, 2022 · Feb 22, 2022 · Feb 23, 2022 · Feb 23, 2022
diff --git a/accessing.html b/accessing.html
@@ -4,7 +4,14 @@
     <title>Accessing Elements</title>
     <link rel="stylesheet" href="accessing.css" />
   </head>
-
+  <style>
+    .bright {
+      color: orange;
+    }
+    .dark {
+      color: navy;
+    }
+  </style>
   <body>
     <h1>Accessing Elements</h1>
     <h2 id="weather-head">Seattle Weather</h2>

diff --git a/accessing.js b/accessing.js
@@ -1,5 +1,13 @@
 // Change the text of the "Seattle Weather" header to "February 10 Weather Forecast, Seattle"
+const weatherHeader = document.getElementById("weather-head");
+weatherHeader.innerHTML = "February 10 Weather Forecast, Seattle";
 
 // Change the styling of every element with class "sun" to set the color to "orange"
+const sunsByGet = document.getElementsByClassName("sun");
+for (let index = 0; index < sunsByGet.length; index++) {
+  sunsByGet.item(index).style.color = "orange";
+}
 
-// Change the class of the second <li> from to "sun" to "cloudy"
+//Change the class of the second <li> from to "sun" to "cloudy"
+const secondSunElement = document.querySelector("ul li:nth-child(2)");
+secondSunElement.className = "cloudy";
diff --git a/dom-crud.js b/dom-crud.js
@@ -1,14 +1,24 @@
-// Create a new <a> element containing the text "Buy Now!" 
+// Create a new <a> element containing the text "Buy Now!"
 // with an id of "cta" after the last <p>
-
+const aTag = document.createElement("a");
+aTag.setAttribute("id", "cta");
+aTag.innerText = "Buy Now!";
+const pTag = document.getElementsByTagName("p")[0];
+pTag.appendChild(aTag);
 
 // Access (read) the data-color attribute of the <img>,
 // log to the console
+const imageTag = document.getElementsByTagName("img")[0];
+const dataColor = imageTag.dataset.color;
+console.log(dataColor);
 
-
-// Update the third <li> item ("Turbocharged"), 
+// Update the third <li> item ("Turbocharged"),
 // set the class name to "highlight"
-
+const thirdListElement = document.querySelector("ul li:nth-child(2)");
+thirdListElement.setAttribute("class", "highlight");
 
 // Remove (delete) the last paragraph
 // (starts with "Available for purchase now…")
+const mainElement = document.getElementsByTagName("main")[0];
+const paragraphElement = document.getElementsByTagName("p")[0];
+mainElement.removeChild(paragraphElement);
diff --git a/plusesAndMinuses.html b/plusesAndMinuses.html
@@ -5,6 +5,11 @@
   </head>
 
   <body>
-    <!-- Your HTML here -->
+    <button id="minusButton" type="button">-</button>
+    <button id="plusButton" type="button">+</button>
+    <button id="resetButton" type="button">RESET</button>
+    <div class="myDiv"><p id="result">0</p></div>
+
+    <script src="plusesAndMinuses.js"></script>
   </body>
 </html>
diff --git a/plusesAndMinuses.js b/plusesAndMinuses.js
@@ -1,2 +1,22 @@
 // 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 plusButton = document.getElementById("plusButton");
+const minusButton = document.getElementById("minusButton");
+const resetButton = document.getElementById("resetButton");
+const resultField = document.getElementById("result");
+
+plusButton.addEventListener("click", () => {
+  counter++;
+  resultField.innerHTML = counter;
+});
+
+minusButton.addEventListener("click", () => {
+  counter--;
+  resultField.innerHTML = counter;
+});
+
+resetButton.addEventListener("click", () => {
+  counter = 0;
+  resultField.innerHTML = counter;
+});
diff --git a/stoppingBehavior.js b/stoppingBehavior.js
@@ -1,10 +1,22 @@
 // Do not change
-document.getElementById('cat').addEventListener('click', () => {
-  alert('meow!');
+document.getElementById("cat").addEventListener("click", () => {
+  alert("meow!");
 });
 
 // When clicked, "More info" link should alert "Here's some info"
 // instead of going to a new webpage
+document.getElementById("more-info").addEventListener("click", clickAlert);
+
+function clickAlert(event) {
+  event.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", bark);
+
+function bark(event) {
+  event.stopPropagation();
+  alert("Bow wow!");
+}
diff --git a/toDoList.js b/toDoList.js
@@ -5,10 +5,50 @@
 // 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>
+const addListItem = function (event) {
+  event.preventDefault();
+  const input = this.parentNode.getElementsByTagName("input")[0];
+  console.log(input);
+  const inputElement = input.parentNode;
+  console.log(inputElement);
+  const listElement = inputElement.previousElementSibling;
+  console.log(listElement);
+  const text = input.value;
+  const listItem = document.createElement(`li`);
+  const listSpan = document.createElement(`span`);
+  const listATag = document.createElement(`a`);
+  listSpan.innerText = text + " ";
+  listATag.setAttribute("class", "delete");
+  listATag.innerText = "Delete";
+  listElement.appendChild(listItem);
+  listItem.appendChild(listSpan);
+  listItem.appendChild(listATag);
+  listSpan.addEventListener("click", clickListItem);
 
-  // Finish function here
+  const lastRow =
+    event.target.parentNode.previousElementSibling.querySelector(
+      "li:last-child"
+    );
+  document.querySelector("ul.today-list li:last-child");
+  const deleteButton = lastRow.querySelector(".delete");
+  deleteButton.addEventListener("click", deleteListItem);
 };
+
+const clickListItem = function (event) {
+  event.target.parentNode.classList.toggle("done");
+};
+
+const deleteListItem = function (event) {
+  console.log(`delete`);
+  console.log(event.target.parentNode);
+  console.log(event.target.parentNode.parentNode);
+  event.target.parentNode.parentNode.removeChild(event.target.parentNode);
+};
+
+const addButton = document.querySelector(".add-item");
+const deleteButton = document.querySelector(".delete");
+const listElement = document.getElementsByClassName("today-list");
+const listItem = document.querySelector("ul.today-list li:first-child span");
+addButton.addEventListener("click", addListItem);
+listItem.addEventListener("click", clickListItem);
+deleteButton.addEventListener("click", deleteListItem);
diff --git a/traversing.js b/traversing.js
@@ -1,11 +1,19 @@
 // Given the <body> element as variable body,
 // access the <main> node and log to the console.
-const body = document.querySelector('body');
+const body = document.querySelector("body");
+const main = body.children[0];
+console.log(main);
 
 // Given the <ul> element as variable ul,
 // access <body>  and log to the console.
-const ul = document.querySelector('ul');
+const ul = document.querySelector("ul");
+const bodyNode = ul.parentNode;
+console.log(bodyNode);
 
 // Given the <p> element as var p,
 // access the 3rd <li>  and log to the console.
-const p = document.querySelector('p');
+const p = document.querySelector("p");
+const pSibling = p.previousElementSibling;
+console.log(pSibling);
+const thirdElement = pSibling.children[2];
+console.log(thirdElement);
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 updateTable = function (event) {
+  var items = this.getElementsByTagName("td");
+  event.target.innerHTML = `${event.x}, ${event.y}`;
+};
+
+const cells = document.querySelectorAll("tr");
+
+for (let i = 0; i < cells.length; i++) {
+  cells[i].addEventListener("click", updateTable);
+}