UW-JavaScript-310B · khanhqhoang · Feb 25, 2022 · Feb 25, 2022 · Mar 1, 2022
diff --git a/accessing.html b/accessing.html
@@ -7,7 +7,7 @@
 
   <body>
     <h1>Accessing Elements</h1>
-    <h2 id="weather-head">Seattle Weather</h2>
+    <h2 id="weather-head"Seattle Weather></h2>
     <ul id="weather">
       <li class="rain">Monday</li>
       <li class="sun">Tuesday</li>

diff --git a/accessing.js b/accessing.js
@@ -1,5 +1,16 @@
 // Change the text of the "Seattle Weather" header to "February 10 Weather Forecast, Seattle"
-
+// get a handle on the  element to be changed
+const h2Node = document.getElementById('weather-head');
+//change text attribute of the element
+h2Node.innerHTML = 'February 10 Weather Forecast, Seattle';
 // Change the styling of every element with class "sun" to set the color to "orange"
+//get the array of all elements with sun styling class
+const liSun = document.querySelectorAll('.sun')
+//for each element in the array, change the style color to orange
+liSun.forEach(v => {v.style.color = 'orange'});
 
 // Change the class of the second <li> from to "sun" to "cloudy"
+//get the array of all <li> elements
+const liArr = document.querySelectorAll('li');
+//change the styling class name of the second <li> to "cloudy"
+liArr[1].className = 'cloudy';
diff --git a/dom-crud.js b/dom-crud.js
@@ -1,14 +1,39 @@
 // Create a new <a> element containing the text "Buy Now!" 
 // with an id of "cta" after the last <p>
 
+// get the array of all the <p> elements
+const pElment = document.querySelectorAll('p');
+// get the handle of the last <p> element
+const lastP = pElment[pElment.length - 1];
 
+//create a new element <a>
+const aElement = document.createElement('a');
+//set the id of the new element to cta
+aElement.setAttribute('id','cta');
+// create a text node 'Buy Now'
+const aTextNode = document.createTextNode('Buy Now');
+// append the new text node to <a> element
+aElement.appendChild(aTextNode);
+
+//add new element to the  last <p> element
+lastP.parentNode.insertBefore(aElement, lastP.nextSibling);
 // Access (read) the data-color attribute of the <img>,
 // log to the console
-
-
+// get the handle on <img> tag
+const imgElement = document.querySelector('img');
+// access the data-color attribute of the <img> tag
+const imgColor = imgElement.getAttribute('data-color');
+// write the attribute to console
+console.log(`image color: ${imgColor}`);
 // Update the third <li> item ("Turbocharged"), 
 // set the class name to "highlight"
-
-
+//get the array of all <li> tags
+const liArr = document.querySelectorAll('li')
+//set the classname of the 3 item in the array to "highlight"
+liArr[2].className = 'highlight';
 // Remove (delete) the last paragraph
 // (starts with "Available for purchase now…")
+// get a handle on the main element
+const mainElement = document.getElementsByTagName('main')[0];
+//remove the child node of main element
+mainElement.removeChild(lastP);
diff --git a/plusesAndMinuses.html b/plusesAndMinuses.html
@@ -1,10 +1,12 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <title>Pluses and Minuses</title>
-  </head>
+    <body>
 
-  <body>
-    <!-- Your HTML here -->
-  </body>
+        <input type="number" id="countInput" min="0">
+        <button id="plusBtn">+</button>
+        <button id="minusBtn">-</button>
+
+    <script src="plusesAndminuses.js"></script>
+
+    </body>
 </html>
diff --git a/plusesAndMinuses.js b/plusesAndMinuses.js
@@ -1,2 +1,25 @@
+//initialize counter to 0
+let counter = 0;
+//get a handle on text input
+let countElm = document.getElementById("countInput");
+
 // When a user clicks the + element, the count should increase by 1 on screen.
+//get a handle on button plus
+const plusElm = document.getElementById("plusBtn");
+//add click event listener on button plus
+plusElm.addEventListener("click", plusBtnFtn);
+//function to increase counter by 1 and display in the input element
+function plusBtnFtn() {
+    counter++;
+    countElm.value = counter;
+}
 // When a user clicks the – element, the count should decrease by 1 on screen.
+//get a handle on button minus
+const minusElm = document.getElementById("minusBtn");
+//add click event listener on button minus
+minusElm.addEventListener("click", minusBtnFtn);
+//function to decrease counter by 1 and display in the input element
+function minusBtnFtn() {
+    counter--;
+    countElm.value = counter;
+}
diff --git a/stoppingBehavior.js b/stoppingBehavior.js
@@ -1,10 +1,23 @@
 // Do not change
 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', e =>{
+
+  alert('Here\'s some info');
+  //use e.preventDefault() to suppress DOM default behaviour
+  e.preventDefault()
+});
 // When the bark button is clicked, should alert "Bow wow!"
 // Should *not* alert "meow"
+document.getElementById('dog').addEventListener('click', e => {
+
+  alert('Bow wow!');
+  //use e.stopPropagation to stop event bubble up
+  e.stopPropagation();
+
+});
diff --git a/toDoList.js b/toDoList.js
@@ -1,14 +1,81 @@
 // If an li element is clicked, toggle the class "done" on the <li>
 
+let liArr = document.getElementsByTagName('li');
+
+for (let e of liArr)
+{
+  addEvtListnerToggleClass(e);  
+}
+function addEvtListnerToggleClass(elmt)
+{
+  elmt.addEventListener('click', () =>
+  {
+    elmt.classList.toggle('done');
+  });
+}
+
 // If a delete link is clicked, delete the li element / remove from the DOM
+// get a handle of all delete class tags
+let deleteArr = document.getElementsByClassName('delete');
+// loop through the tag collection and attach a click event handler
+// on each tag.  Remove the node when it is clicked
+for (let i = 0; i < deleteArr.length; i++)
+{
+  deleteArr[i].addEventListener('click', () =>
+  {
+    let liNode = deleteArr[i].parentNode;
+    let ulNode = liNode.parentNode;
+
+    ulNode.removeChild(liNode);
+  })
+}
 
 // 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 input = document.getElementsByTagName('input')[0];
   const text = input.value; // use this text to create a new <li>
 
   // Finish function here
+  // create a new li node
+  let li = document.createElement('li');
+  //add click event listenter to to li tag to toggle class
+  addEvtListnerToggleClass(li);
+  // create a new span node
+  let span = document.createElement('span');
+  // set text of span node to value in input tag
+  span.innerHTML = text;
+  //append span node to li node
+  li.appendChild(span);
+  //create a new a node
+  let a = document.createElement('a');
+  // set text of the a node to Delete
+  a.innerHTML = 'Delete';
+  // set class of the a node to delete
+  a.className = 'delete';
+  // add click event listener for a tag
+  // to remove li tag
+  a.addEventListener('click', () => {  
+    let ulNode = li.parentNode;
+    ulNode.removeChild(li)
+  });
+  //append the a node to the span node
+  span.appendChild(a);
+  // get a handle on the ul node
+  let ul = document.querySelector('ul');
+  // append the li node to ul node
+  ul.appendChild(li);
+  // reset input value
+  input.value = '';
 };
+
+//get a handle on button class
+const btnAdd = document.querySelector('.add-item');
+//create a click event listener for button class
+
+btnAdd.addEventListener('click',function(event){
+ event.preventDefault();
+ addListItem(event);
+});
diff --git a/traversing.js b/traversing.js
@@ -1,11 +1,21 @@
 // Given the <body> element as variable body,
 // access the <main> node and log to the console.
+// get the handle of the <body> tag
 const body = document.querySelector('body');
-
+// get the handle of the <main> tag which is a child of <main> tag
+const main = body.children;
+//write to console
+console.log(main);
 // Given the <ul> element as variable ul,
 // access <body>  and log to the console.
 const ul = document.querySelector('ul');
-
+const bodyElement = ul.parentElement.parentElement;
+console.log(bodyElement);
 // Given the <p> element as var p,
 // access the 3rd <li>  and log to the console.
+//get the handle of the <p> tag  element
 const p = document.querySelector('p');
+//get the handle of the previous sibling element which is <ul> tag
+const ulElement = p.previousElementSibling;
+//write the last child of the <ul> tag
+console.log(ulElement.lastElementChild);
diff --git a/wheresThePointer.js b/wheresThePointer.js
@@ -1,3 +1,33 @@
 // 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
+
+
+//This function will capture x,y coordinates of the pointer 
+// and then display its value inside <td> tag
+function clickHandler(tdCell, Event) {
+    // Here, `this` refers to the element the event was hooked on
+    //let td = tdCell.target
+    let x = Event.clientX;
+    let y = Event.clientY;
+    let coords = `${x}, ${y}`;
+    tdCell.innerHTML = coords;
+
+}
+
+//get an array of all <td> tags
+let tdArr = document.querySelectorAll('td');
+
+//for each <td> tag, attach listener
+// that captures Mouse Click event
+// and call clickHandler function
+// in response to the event
+
+tdArr.forEach(cell => cell.addEventListener("click", function(e)
+{
+    clickHandler(cell, e);
+}
+));
+
+
+