UW-JavaScript-310B · jarkhyun · Feb 24, 2022 · Feb 24, 2022 · Feb 24, 2022 · Feb 24, 2022
diff --git a/accessing.js b/accessing.js
@@ -1,5 +1,15 @@
 // Change the text of the "Seattle Weather" header to "February 10 Weather Forecast, Seattle"
 
+const headLine = document.getElementById('weather-head')
+
+headLine.innerText = 'February 10 Weather Forecast, Seattle'
+
 // Change the styling of every element with class "sun" to set the color to "orange"
 
+const sunEls = document.querySelectorAll('.sun')
+
+sunEls.forEach((el) => el.style.color = 'orange')
+
 // Change the class of the second <li> from to "sun" to "cloudy"
+
+document.querySelector('li.sun').setAttribute('class', 'cloudy')
diff --git a/dom-crud.js b/dom-crud.js
@@ -1,14 +1,25 @@
 // Create a new <a> element containing the text "Buy Now!" 
 // with an id of "cta" after the last <p>
+const createEl = document.createElement('a', {'id': 'cta'});
+const newText = document.createTextNode('Buy Now!');
+createEl.appendChild(newText);
 
+const targetBody = document.getElementsByTagName('body')[0];
+targetBody.appendChild(createEl);
 
 // Access (read) the data-color attribute of the <img>,
 // log to the console
-
+const carImg = document.getElementsByTagName('img')[0];
+const colorImg = carImg.dataset.color;
+console.log(colorImg);
 
 // Update the third <li> item ("Turbocharged"), 
 // set the class name to "highlight"
-
+document.getElementsByTagName('li')[2].setAttribute('class', 'highlight')
 
 // Remove (delete) the last paragraph
 // (starts with "Available for purchase now…")
+
+const mainEl = document.getElementsByTagName('main')[0];
+const targetP = document.getElementsByTagName('p')[0];
+mainEl.removeChild(targetP);
diff --git a/plusesAndMinuses.html b/plusesAndMinuses.html
@@ -5,6 +5,12 @@
   </head>
 
   <body>
-    <!-- Your HTML here -->
+    <button id="increment">+</button>
+
+    <button id="decrement">-</button>
+
+    <div id="counter">0</div>
+
+    <script src="plusesAndMinuses.js"></script>
   </body>
 </html>
diff --git a/plusesAndMinuses.js b/plusesAndMinuses.js
@@ -1,2 +1,16 @@
 // 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 buttonInc = document.getElementById('increment')
+const buttonDec = document.getElementById('decrement')
+let counterHTML = document.getElementById('counter')
+let counter = 0; 
+
+buttonInc.addEventListener('click', function(e) {
+    counter++;
+    counterHTML.innerText = counter; 
+} )
+
+buttonDec.addEventListener('click', function(e) {
+    counter--; 
+    counterHTML.innerText = counter; 
+} )
diff --git a/toDoList.js b/toDoList.js
@@ -1,14 +1,69 @@
+let todayList = document.querySelector('.today-list');
+
 // If an li element is clicked, toggle the class "done" on the <li>
 
+todayList.addEventListener('click', function(e) {
+  if (e.target.localName === 'span')
+  e.target.parentNode.classList.toggle('done');
+  } );
+
 // If a delete link is clicked, delete the li element / remove from the DOM
 
+const delListItem = function(e) {
+  if (e.target.className === 'delete') {
+    e.target.parentNode.remove(); 
+  }
+};
+
+todayList.addEventListener('click', delListItem);
+
 // 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 text = input.value + " "; // use this text to create a new <li>
 
   // Finish function here
+  let newLi = document.createElement('li');
+  let newSpan = document.createElement('span');
+  let newDelete = document.createElement('a');
+
+  let upButton = document.createElement('button');
+  let downButton = document.createElement('button');
+  upButton.appendChild(document.createTextNode('Up'));
+  downButton.appendChild(document.createTextNode('Down'));
+
+  newDelete.className = "delete"
+  newDelete.appendChild(document.createTextNode('Delete'));
+  newSpan.appendChild(document.createTextNode(text));
+  newLi.appendChild(newSpan);
+  newLi.appendChild(newDelete);
+  newLi.appendChild(upButton);
+  newLi.appendChild(downButton);
+  todayList.appendChild(newLi);  
 };
+
+const addList = document.querySelector('.add-item');
+addList.addEventListener('click', addListItem);
+
+const moveUpOrDown = function(e) {
+  if (e.target.outerText === 'Up') {
+    todayList.insertBefore(e.target.parentNode, e.target.parentNode.previousSibling);
+  } else if (e.target.outerText === 'Down') {
+    todayList.insertBefore(e.target.parentNode, e.target.parentNode.nextSibling.nextSibling);
+  }
+}
+
+let firstUpButton = document.createElement('button');
+let firstDownButton = document.createElement('button');
+firstUpButton.appendChild(document.createTextNode('Up'));
+firstDownButton.appendChild(document.createTextNode('Down'));
+
+let liFirst = document.querySelector('li');
+liFirst.appendChild(firstUpButton);
+liFirst.appendChild(firstDownButton);
+
+todayList.addEventListener('click', moveUpOrDown);
diff --git a/traversing.js b/traversing.js
@@ -1,11 +1,16 @@
 // Given the <body> element as variable body,
 // access the <main> node and log to the console.
 const body = document.querySelector('body');
+const mainNode = body.getElementsByClassName('main');
+console.log(mainNode);
 
 // Given the <ul> element as variable ul,
 // 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.
 const p = document.querySelector('p');
+const liThree = p.previousElementSibling.children[2];
+console.log(liThree);
diff --git a/wheresThePointer.js b/wheresThePointer.js
@@ -1,3 +1,14 @@
 // 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 clickDetect = document.getElementsByTagName('tbody')[0];
+
+clickDetect.addEventListener('click', function(e) {
+    let x = e.pageX;
+    let y = e.pageY;
+    let coordinates = `${x}, ${y}`;
+
+    e.target.innerHTML = coordinates;
+} )
+