UW-JavaScript-310B · RyanOD · Feb 24, 2022 · Feb 24, 2022 · Feb 24, 2022 · Feb 25, 2022
diff --git a/accessing.js b/accessing.js
@@ -1,5 +1,8 @@
 // Change the text of the "Seattle Weather" header to "February 10 Weather Forecast, Seattle"
+document.getElementById('weather-head').innerText = `February 10 Weather Forecast, Seattle`;
 
 // Change the styling of every element with class "sun" to set the color to "orange"
+Array.from(document.getElementsByClassName('sun')).forEach(element => element.style.color = "orange");
 
 // Change the class of the second <li> from to "sun" to "cloudy"
+document.querySelector("ul li:nth-of-type(2)").className = "cloudy";
diff --git a/dom-crud.js b/dom-crud.js
@@ -1,14 +1,17 @@
 // Create a new <a> element containing the text "Buy Now!" 
 // with an id of "cta" after the last <p>
-
+let cta = document.createElement("a");
+cta.innerText = "Buy Now!";
+document.querySelector("p").after(cta);
 
 // Access (read) the data-color attribute of the <img>,
 // log to the console
-
+console.log(document.querySelector("img").getAttribute("data-color"));
 
 // Update the third <li> item ("Turbocharged"), 
 // set the class name to "highlight"
-
+document.querySelector("ul li:nth-child(3)").className = "highlight";
 
 // Remove (delete) the last paragraph
 // (starts with "Available for purchase now…")
+document.querySelector("p").remove();
diff --git a/plusesAndMinuses.html b/plusesAndMinuses.html
@@ -5,6 +5,10 @@
   </head>
 
   <body>
-    <!-- Your HTML here -->
+    <h1>Counter</h1>
+    <h2>0</h2>
+    <button id="increment">Add one</button>
+    <button id="decrememt">Subtract one</button>
+    <script src="./plusesAndMinuses.js"></script>
   </body>
 </html>
diff --git a/plusesAndMinuses.js b/plusesAndMinuses.js
@@ -1,2 +1,8 @@
 // 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 header = document.querySelector("h2");
+header.innerText = 0;
+
+document.getElementById("increment").addEventListener("click", () => header.innerText++);
+document.getElementById("decrememt").addEventListener("click", () => header.innerText--);
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", (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) => {
+  alert(document.getElementById("dog").innerText);
+  e.stopPropagation();
+});
diff --git a/toDoList.css b/toDoList.css
@@ -27,8 +27,15 @@ li {
 a {
   padding: 3px 6px;
   border-radius: 5px;
-  font-size: 0.8em;
+}
+
+#up, #down {
+  font-size: 2em;
+}
+
+.delete {
   color: white;
+  font-size: 0.8em;
 }
 
 li.done span {
@@ -38,6 +45,8 @@ li.done span {
 
 .delete {
   background-color: darkred;
+  margin-left: 5px;
+  padding:6px;
 }
 
 .add-item {

diff --git a/toDoList.html b/toDoList.html
@@ -9,8 +9,7 @@
       <h1>To Do:</h1>
       <ul class="today-list">
         <li>
-          <span>Reading</span>
-          <a class="delete">Delete</a>
+          <span>Reading</span><a class="delete">Delete</a><a class="moveUp">Up</a><a class="moveDown">Down</a>
         </li>
       </ul>
       <div class="add"><input type="text" /> <a class="add-item">Add</a></div>

diff --git a/toDoList.js b/toDoList.js
@@ -1,14 +1,71 @@
 // If an li element is clicked, toggle the class "done" on the <li>
+document.querySelector("ul").addEventListener("click", listManager);
 
-// If a delete link is clicked, delete the li element / remove from the DOM
+function listManager(e) {
+  if(e.target.localName === 'li') {
+    e.target.classList.toggle('done');
+  }
+  else if(e.target.localName === 'span') {
+    e.target.parentNode.classList.toggle('done');
+  }
+  else if(e.target.className === 'delete') {
+    e.target.parentElement.remove();
+  }
+  else if(e.target.className === "moveUp") {
+    const parentElement = e.target.parentElement;
+    if(parentElement.previousElementSibling !== null) {
+      const item = parentElement.cloneNode();
+      item.innerHTML = parentElement.innerHTML;
+      parentElement.previousElementSibling.before(item);
+      parentElement.remove();
+    }
+  }
+  else if(e.target.className === "moveDown") {
+    const parentElement = e.target.parentElement;
+    if(parentElement.nextElementSibling !== null) {
+      const item = parentElement.cloneNode();
+      item.innerHTML = parentElement.innerHTML;
+      parentElement.nextElementSibling.after(item);
+      parentElement.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) {
-  e.preventDefault();
-  const input = this.parentNode.getElementsByTagName('input')[0];
-  const text = input.value; // use this text to create a new <li>
 
-  // Finish function here
+document.getElementsByClassName("add-item")[0].addEventListener("click", addListItem);
+
+function addListItem() {
+  const text = this.parentNode.getElementsByTagName('input')[0].value;
+
+  if(text !== '') {
+    const span = document.createElement("span");
+    span.innerText = text;
+
+    const deleteItem = document.createElement("a");
+    deleteItem.className = "delete";
+    deleteItem.innerText = "Delete";
+
+    const toDo = document.createElement("li");
+    toDo.appendChild(span);
+    toDo.appendChild(deleteItem);
+
+    const up = document.createElement("a");
+    up.innerText = "Up";
+    up.className = "moveUp";
+    toDo.appendChild(up);
+
+    const down = document.createElement("a");
+    down.innerText = "Down";
+    down.className = "moveDown";
+    toDo.appendChild(down);
+
+    document.getElementsByClassName("today-list")[0].appendChild(toDo);
+  }
 };
+
+if(document.querySelectorAll("li").length > 1) {
+  document.getElementById("moveUp").addEventListener("click", moveUp);
+}
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.children[0]);
 
 // Given the <ul> element as variable ul,
-// access <body>  and log to the console.
+// access <body> and log to the console.
 const ul = document.querySelector('ul');
+console.log(ul.parentElement.parentElement);
 
 // Given the <p> element as var p,
-// access the 3rd <li>  and log to the console.
+// access the 3rd <li> and log to the console.
 const p = document.querySelector('p');
+console.log(p.previousElementSibling.querySelector("li:nth-child(3)"));
diff --git a/wheresThePointer.js b/wheresThePointer.js
@@ -1,3 +1,4 @@
 // 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.querySelector("table").addEventListener("click", (e) => console.log(e.target.innerText = `(${e.clientX}, ${e.clientY})`));