UW-JavaScript-310B · miguerurso · Feb 24, 2022
diff --git a/.DS_Store b/.DS_Store
diff --git a/accessing.js b/accessing.js
@@ -1,5 +1,19 @@
 // Change the text of the "Seattle Weather" header to "February 10 Weather Forecast, Seattle"
 
+    let header = document.querySelector('h1');
+
+    header.innerHTML = 'February 10 Weather Forecast, Seattle';
+
 // Change the styling of every element with class "sun" to set the color to "orange"
 
+    let sun = document.querySelectorAll('.sun');
+    function toOrange(sunItem){
+        sunItem.style.color = 'orange';
+    };
+    sun.forEach(toOrange);
+
 // Change the class of the second <li> from to "sun" to "cloudy"
+
+    let listItems = document.getElementsByTagName('li');
+
+    listItems[1].className = 'cloudy';
diff --git a/dom-crud.js b/dom-crud.js
@@ -1,14 +1,40 @@
 // 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.innerHTML='Buy Now!';
+
+const para = document.getElementsByTagName('p')[0];
+
+para.after(aTag);
+
+
 
 // Access (read) the data-color attribute of the <img>,
 // log to the console
 
+let carImg = document.getElementsByTagName('img')[0];
+
+let dataSet = carImg.getAttribute('data-color');
+
+console.log(dataSet)
 
 // Update the third <li> item ("Turbocharged"), 
 // set the class name to "highlight"
 
+const listItems = document.getElementsByTagName('li');
+
+const thirdLi = listItems[2];
+
+thirdLi.setAttribute('class','highlight');
+
 
 // Remove (delete) the last paragraph
 // (starts with "Available for purchase now…")
+const main = document.getElementsByTagName('main')[0];
+console.log(main.childNodes);
+
+main.removeChild(para);
diff --git a/plusesAndMinuses.html b/plusesAndMinuses.html
@@ -5,6 +5,13 @@
   </head>
 
   <body>
-    <!-- Your HTML here -->
+    <div style="width: 100%; margin: 0 auto;">
+      <div id="counter" style="font-size: 10em; font-family: Arial, Helvetica, sans-serif;"></div>
+      <div id="button-row">
+        <button id="plus" style="padding: 2%; font-size: 3em;">+</button>
+        <button id="minus" style="padding: 2%; font-size: 3em;">-</button>
+      </div>
+    </div>
   </body>
+  <script src="plusesAndMinuses.js"></script>
 </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.
+
+const plus = document.getElementById('plus');
+const minus = document.getElementById('minus');
+let jsCounter = 0;
+const counter = document.getElementById('counter');
+
+
+plus.addEventListener('click', () => {
+    jsCounter ++;
+    counter.innerText = jsCounter;
+    console.log(`The current count is now ${jsCounter}`)
+});
+
+minus.addEventListener('click', () => {
+    jsCounter --;
+    counter.innerText = jsCounter;
+    console.log(`The current count is now ${jsCounter}`)
+});
diff --git a/stoppingBehavior.js b/stoppingBehavior.js
@@ -6,5 +6,25 @@ document.getElementById('cat').addEventListener('click', () => {
 // When clicked, "More info" link should alert "Here's some info"
 // instead of going to a new webpage
 
+const moreInfoBtn = document.getElementById('more-info');
+console.log(moreInfoBtn);
+
+function stopLink(e){
+  e.preventDefault();
+  alert("Here's some info");
+}
+
+moreInfoBtn.addEventListener('click', stopLink,)
+
 // When the bark button is clicked, should alert "Bow wow!"
 // Should *not* alert "meow"
+
+const bark = document.getElementById('dog');
+console.log(bark);
+
+function bowwow(e){
+  e.stopPropagation();
+  alert("Bow wow!");
+}
+
+bark.addEventListener('click', bowwow);
diff --git a/toDoList.css b/toDoList.css
@@ -39,6 +39,12 @@ li.done span {
 .delete {
   background-color: darkred;
 }
+.up {
+  background-color: rgb(43, 23, 255);
+}
+.down {
+  background-color: rgb(0, 139, 56);
+}
 
 .add-item {
   background-color: darkturquoise;

diff --git a/toDoList.html b/toDoList.html
@@ -11,6 +11,8 @@ <h1>To Do:</h1>
         <li>
           <span>Reading</span>
           <a class="delete">Delete</a>
+          <a class="up">Move Up</a>
+          <a class="down">Move 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,48 @@
 // If an li element is clicked, toggle the class "done" on the <li>
 
+const listItem = document.querySelectorAll('li');
+const parentList = document.querySelector('ul.today-list');
+const delBtn = document.querySelector('a.delete');
+
+parentList.addEventListener('click', (e) => {
+  const clickedElement = e.target;
+  clickedElement.classList.toggle('done')
+
+  if (clickedElement.classList.contains('delete')) clickedElement.parentElement.remove();
+
+
+  function moveUpDown() {
+    let currentLi = clickedElement.parentElement;
+    let prevLi = currentLi.previousElementSibling;
+    let nextLi = currentLi.nextElementSibling;
+    if (clickedElement.classList.contains('up')){
+    parentList.insertBefore(currentLi, prevLi);
+    }else if(clickedElement.classList.contains('down')){
+      parentList.insertBefore(nextLi, currentLi);
+    }
+  }
+   moveUpDown();
+
+});
+
 // If a delete link is clicked, delete the li element / remove from the DOM
 
+
 // 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 addBtn = document.getElementsByClassName('add-item')[0];
+let main = document.getElementsByTagName('main')[0];
+
 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
+  let li = document.createElement("li");
+  let newLi = parentList.appendChild(li);
+  newLi.innerHTML = `<span>${text}</span> <a class="delete">Delete</a> <a class="up">Move Up</a>
+  <a class="down">Move Down</a>`;
 };
+
+addBtn.addEventListener('click', addListItem);
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');
 
+console.log(body.childNodes)
+const text = body.firstChild;
+const main = text.nextSibling;
+console.log(main);
+
 // Given the <ul> element as variable ul,
 // access <body>  and log to the console.
 const ul = document.querySelector('ul');
+const ulMain = ul.parentElement;
+const ulBody = ulMain.parentElement;
+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 pUl = p.previousElementSibling;
+const pLi = pUl.childNodes[5];
+console.log(pLi);
diff --git a/wheresThePointer.js b/wheresThePointer.js
@@ -1,3 +1,24 @@
 // 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 tdList = document.querySelectorAll("td");
+console.log(tdList);
+
+console.log(tdList[1].getBoundingClientRect().x);
+
+/*eventFunc = (item) => {
+    item.getBoundingClientRect();
+   console.log.log(item.getBoundingClientRect());
+  }
+
+tdList.forEach(eventFunc);*/
+
+
+tdList.forEach(function(item) {
+    item.addEventListener("click", function() {
+        const x = this.getBoundingClientRect().x;
+        const y = this.getBoundingClientRect().y;
+        this.innerText = `This Square's coordinates are: \n \n ${x} , ${y}`
+    });
+});