UW-JavaScript-310B · jl105 · Feb 20, 2022 · Mar 2, 2022
diff --git a/accessing.js b/accessing.js
@@ -1,5 +1,9 @@
 // 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 els = document.getElementsByClassName("sun");
+Array.prototype.forEach.call(els, function(el) {
+    el.style.color  = "orange";
+});
 // Change the class of the second <li> from to "sun" to "cloudy"
+document.getElementsByClassName("sun")[0].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!" 
 // with an id of "cta" after the last <p>
-
+let anchorEl = document.createElement('a');
+let anchorText = document.createTextNode('Buy Now!');
+anchorEl.appendChild(anchorText);
+anchorEl.setAttribute("id", "cta");
+const body = document.getElementsByTagName('body')[0];
+body.appendChild(anchorEl);
 
 // Access (read) the data-color attribute of the <img>,
 // log to the console
-
+let imgEl = document.getElementsByTagName('img')[0];
+console.log(imgEl.dataset.color);
 
 // Update the third <li> item ("Turbocharged"), 
 // set the class name to "highlight"
-
+let liEl = document.getElementsByTagName("li")[2];
+liEl.setAttribute("class", "highlight");
 
 // Remove (delete) the last paragraph
 // (starts with "Available for purchase now…")
+let mainEl = document.getElementsByTagName("main")[0];
+let pEl = document.getElementsByTagName("p")[0];
+mainEl.removeChild(pEl);
diff --git a/plusesAndMinuses.html b/plusesAndMinuses.html
@@ -2,9 +2,16 @@
 <html>
   <head>
     <title>Pluses and Minuses</title>
+    <link rel="stylesheet" href="https://www.w3schools.com/lib/w3schools30.css">
   </head>
-
+<style>
+
+</style>
   <body>
     <!-- Your HTML here -->
+    <div style="margin: 120px 120px">
+    <button class="w3-button w3-blue" id="btnDec">-</button><span id="cntText">Count is 0</span><button id="btnInc" class="w3-button w3-blue">+</button>
+  </div>
+  <script src="plusesAndMinuses.js"></script>
   </body>
 </html>
diff --git a/plusesAndMinuses.js b/plusesAndMinuses.js
@@ -1,2 +1,14 @@
 // When a user clicks the + element, the count should increase by 1 on screen.
+let counter = 0;
+const plusEl = document.getElementById("btnInc");
+const minusEl = document.getElementById("btnDec");
+let cntTextEl = document.getElementById("cntText");
+plusEl.addEventListener ('click', (e) => {
+    counter++;
+    cntTextEl.innerHTML = `Count is ${counter}`;
+});
+minusEl.addEventListener ('click', (e) => {
+    counter--;
+    cntTextEl.innerHTML = `Count is ${counter}`;
+});
 // When a user clicks the – element, the count should decrease by 1 on screen.
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 now!');
+});
diff --git a/toDoList.css b/toDoList.css
@@ -43,3 +43,8 @@ li.done span {
 .add-item {
   background-color: darkturquoise;
 }
+
+a.arrow {
+  background-color: green;
+  color: white;
+}
diff --git a/toDoList.js b/toDoList.js
@@ -1,14 +1,79 @@
 // If an li element is clicked, toggle the class "done" on the <li>
+document.querySelectorAll('li').forEach(e => e.addEventListener("mousedown", function(e) {
+  e.target.parentNode.classList.toggle("done");
+}));
 
 // If a delete link is clicked, delete the li element / remove from the DOM
-
+document.querySelectorAll('a.delete').forEach(e => e.addEventListener("mousedown", function(e) {
+  e.preventDefault();
+  e.target.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)
+// Finish function here
 const addListItem = function(e) {
   e.preventDefault();
-  const input = this.parentNode.getElementsByTagName('input')[0];
+  const input = e.target.parentNode.getElementsByTagName('input')[0];
   const text = input.value; // use this text to create a new <li>
 
   // Finish function here
+  if (text.trim() != "") {
+    let ulElement = e.target.parentNode.previousSibling.previousSibling;
+    let liEl = document.createElement("li");
+    let spanEl = document.createElement('span');
+    spanEl.appendChild(document.createTextNode(text));
+    liEl.appendChild(spanEl);
+    addEvent(liEl);
+
+    let deleteEl = document.createElement("a");
+    deleteEl.classList.add("delete");
+    deleteEl.append(document.createTextNode("Delete"));
+    deleteEl.setAttribute("id", "delete" + Math.ceil(Math.random()*10));
+    liEl.appendChild(deleteEl);
+    addEvent(deleteEl);
+
+    let upEl = document.createElement("a");
+    upEl.classList.add("arrow");
+    upEl.append(document.createTextNode("Up \u2191"));
+    upEl.setAttribute("id", "up" + Math.ceil(Math.random()*10));
+    liEl.appendChild(upEl);
+    addEvent(upEl);
+
+    let downEl = document.createElement("a");
+    downEl.classList.add("arrow");
+    downEl.append(document.createTextNode("Down \u2193"));
+    downEl.setAttribute("id", "down" + Math.ceil(Math.random()*10));
+    liEl.appendChild(downEl);
+    addEvent(downEl);
+
+    ulElement.appendChild(liEl);
+  }
 };
+
+const addEvent = (target, event = 'click') => {
+  if (target != undefined && target != null) {
+    if (target.classList.contains("delete")){
+      target.addEventListener(event, function() {
+        this.parentNode.remove();
+      });
+    } else if (target.nodeName.toLowerCase() == "a" && target.getAttribute("id").indexOf("up") > -1){
+      target.addEventListener(event, (e) => {
+        e.stopPropagation();
+        target.parentNode.parentNode.insertBefore(target.parentNode, target.parentNode.previousElementSibling);
+      });
+    }else if (target.nodeName.toLowerCase() == "a" && target.getAttribute("id").indexOf("down") > -1){
+      target.addEventListener(event, (e) => {
+        e.stopPropagation();
+        if (target.parentNode.nextElementSibling != null) {
+          target.parentNode.parentNode.insertBefore(target.parentNode.nextElementSibling, target.parentNode);
+        }
+      });
+    }
+  }
+}
+document.querySelectorAll('a.add-item').forEach(e => e.addEventListener("mousedown", (e) => {
+  addListItem(e);
+}));
+
+
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.childNodes[1]);
 
 // Given the <ul> element as variable ul,
 // access <body>  and log to the console.
 const ul = document.querySelector('ul');
+console.log(ul.parentNode.parentNode);
 
 // Given the <p> element as var p,
 // access the 3rd <li>  and log to the console.
 const p = document.querySelector('p');
+console.log(p.previousSibling.previousSibling.childNodes[5]);
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
+document.querySelectorAll('td')
+.forEach(e => e.addEventListener("mousedown", function(e) {
+    // Here, `this` refers to the element the event was hooked on
+    console.log("clicked");
+    let x = e.clientX;
+    let y = e.clientY;
+    this.innerHTML = `(${x}, ${y})`;
+}));