UW-JavaScript-310B · ductran67 · Feb 22, 2022 · Feb 22, 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"
+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"
+// Get all elements that have classname = 'sun'
+const sunEls = document.getElementsByClassName('sun');
+// Convert sunEls to array sunElArray
+const sunElArray = Array.from(sunEls);
+// Set color = 'orange' for these elements
+sunElArray.forEach((el) => {
+  el.style.color = 'orange';
+});
 
-// Change the class of the second <li> from to "sun" to "cloudy"
+// Change the class of the second <li> from "sun" to "cloudy"
+sunEls[1].className = 'cloudy';
diff --git a/dom-crud.js b/dom-crud.js
@@ -1,14 +1,33 @@
 // Create a new <a> element containing the text "Buy Now!" 
 // with an id of "cta" after the last <p>
-
+// Create a new <a> element
+const aEl = document.createElement('a');
+// Set attribute 'cta' for this element
+aEl.setAttribute('id','cta');
+// Create a new textnode for this element
+const aTxt = document.createTextNode('Buy Now!');
+// Add the textnode to <a> element
+aEl.appendChild(aTxt);
+// Get main element
+const mainEl = document.getElementsByTagName('main')[0];
+// Add <a> element as a child to main element
+mainEl.appendChild(aEl);
 
 // Access (read) the data-color attribute of the <img>,
 // log to the console
-
+const carImg = document.getElementsByTagName('img')[0];
+const carColor = carImg.dataset.color;
+console.log(carColor);
 
 // Update the third <li> item ("Turbocharged"), 
 // set the class name to "highlight"
-
+// Get all <li> element 
+const liCollection = document.getElementsByTagName('li');
+liCollection[2].className = "highlight";
 
 // Remove (delete) the last paragraph
 // (starts with "Available for purchase now…")
+// Get the <p> element
+const para = document.getElementsByTagName('p')[0];
+// Remove this element from main element
+mainEl.removeChild(para);
diff --git a/plusesAndMinuses.css b/plusesAndMinuses.css
@@ -0,0 +1,32 @@
+* {
+  box-sizing : border-box;
+}
+
+body {
+  margin: 0;
+  padding: 10px;
+  font-family: Arial, Helvetica, sans-serif;
+}
+.button {
+  border: none;
+  border-radius: 4px;
+  color: white;
+  padding: 10px 17px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 20px;
+  font-weight: bold;
+  margin: 2px 2px;
+  cursor: pointer;
+}
+.plus {
+  background-color: #4CAF50;
+}
+.minus {
+  background-color: red;
+}
+.result {
+  color: blue;
+  font-weight: bold;
+}
diff --git a/plusesAndMinuses.html b/plusesAndMinuses.html
@@ -2,9 +2,19 @@
 <html>
   <head>
     <title>Pluses and Minuses</title>
+    <link rel="stylesheet" href="plusesAndMinuses.css" />
   </head>
 
   <body>
     <!-- Your HTML here -->
+    <h2>Click on these buttons and see the result below:</h2>
+    <button id="plus" class="button plus">+</button>
+    <button id="minus" class="button minus">&ndash;</button>
+    <br>
+    <p>The result is 
+      <span id="counter" class="result">0</span>
+    </p>
+
+    <script src="plusesAndMinuses.js"></script>
   </body>
 </html>
diff --git a/plusesAndMinuses.js b/plusesAndMinuses.js
@@ -1,2 +1,20 @@
+// Define var counter and get <counter> element
+let counter = 0;
+const counterEl = document.getElementById("counter");
 // When a user clicks the + element, the count should increase by 1 on screen.
+const plusEl = document.getElementById("plus");
+// plus click event
+plusEl.addEventListener('click', (e) => {
+  counter++;
+  // Display the result in HTML page
+  counterEl.innerHTML = counter;
+});
+
 // When a user clicks the – element, the count should decrease by 1 on screen.
+const minusEl = document.getElementById("minus");
+// minus click event
+minusEl.addEventListener('click', (e) => {
+  counter--;
+  // Display the result in HTML page
+  counterEl.innerHTML = counter;
+});
diff --git a/stoppingBehavior.js b/stoppingBehavior.js
@@ -5,6 +5,17 @@ document.getElementById('cat').addEventListener('click', () => {
 
 // When clicked, "More info" link should alert "Here's some info"
 // instead of going to a new webpage
+const moreInfo = document.getElementById("more-info");
+moreInfo.addEventListener('click', e => {
+  e.preventDefault();
+  alert(`Here's some info!`);
+});
 
 // When the bark button is clicked, should alert "Bow wow!"
 // Should *not* alert "meow"
+const bark = document.getElementById('dog');
+// Bark click event function
+bark.addEventListener('click', e => {
+  e.stopPropagation();
+  alert('Bow wow!');
+});
diff --git a/toDoList.css b/toDoList.css
@@ -29,6 +29,7 @@ a {
   border-radius: 5px;
   font-size: 0.8em;
   color: white;
+  cursor: pointer;
 }
 
 li.done span {
@@ -43,3 +44,21 @@ li.done span {
 .add-item {
   background-color: darkturquoise;
 }
+
+.button {
+  background-color: green;
+  border: none;
+  border-radius: 4px;
+  color: white;
+  padding: 5px 12px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 20px;
+  font-weight: bold;
+  margin: 2px 2px;
+  cursor: pointer;
+}
+li.selected span {
+  background-color: aqua;
+}
diff --git a/toDoList.html b/toDoList.html
@@ -13,6 +13,13 @@ <h1>To Do:</h1>
           <a class="delete">Delete</a>
         </li>
       </ul>
+      <!-- Create 2 up & down arrow buttons -->
+      <div id="btn" style="display: none;">
+        <button id="up" class="button">⇧</button>
+        <button id="down" class="button">⇩</button>
+        <br>
+      </div>
+
       <div class="add"><input type="text" /> <a class="add-item">Add</a></div>
     </main>
 

diff --git a/toDoList.js b/toDoList.js
@@ -1,6 +1,48 @@
 // If an li element is clicked, toggle the class "done" on the <li>
+// Get <ul> element "today-list"
+const todayList = document.getElementsByClassName('today-list')[0];
+// Define a var for the current selected item
+let liSelectedItem;
+// Fires when users click on <today-list>
+todayList.addEventListener('click', e => {
+  let liItem = e.target;
+  switch (liItem.tagName) {
+    // The current element is <li> 
+    case 'LI':
+      // Get the current selected item from the list
+      liSelectedItem = liItem;
+      // If a <li> element is clicked, toggle the class "done" on it
+      liItem.classList.toggle('done');
+      break;
 
-// If a delete link is clicked, delete the li element / remove from the DOM
+    // The current element is <span>
+    case 'SPAN':
+      // Get the current selected li
+      liSelectedItem = liItem.parentNode;
+      // If a span element inside a <li> is clicked, toggle class "done" on the <li> element (i.e. span parent node)
+      liItem.parentNode.classList.toggle('done')
+      break;
+
+    // When the delete link is clicked
+    case 'A':
+      // Show a confirmation message before deleting
+      if (confirm('Are you sure?')) {
+        // If the deleted item is the selected item, reset var liSelectedItem
+        if (liItem.parentNode === liSelectedItem) {
+          liSelectedItem = undefined;
+        }
+        // If a delete link is clicked, delete the li element / remove from the DOM
+        todayList.removeChild(liItem.parentNode);
+        // Set visible for up & down buttons if today-list has more than 1 item.
+        document.getElementById('btn').style.display = todayList.childElementCount > 1 ? 'block':'none';
+      }
+      break;
+
+    // Others
+    default:
+      break;
+  }
+});
 
 // 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!
@@ -10,5 +52,54 @@ const addListItem = function(e) {
   const input = this.parentNode.getElementsByTagName('input')[0];
   const text = input.value; // use this text to create a new <li>
 
-  // Finish function here
+  // Check if the text value is empty or not 
+  if (text.trim().length !== 0) {
+    // Create a new <li> item
+    const liItem = document.createElement('li');
+    // Create a <span> element with desc is text's content.
+    const span = document.createElement('span');
+    span.innerHTML = `${text} `;
+    // Append this <span> element as a child to the <li> item
+    liItem.appendChild(span);
+    // Create an <a> element with desc is "Delete" and className is 'delete'
+    const deleteEl = document.createElement('a');
+    deleteEl.innerHTML = "Delete";
+    deleteEl.className = 'delete';
+    // Add this <a> element to <li>
+    liItem.appendChild(deleteEl);
+
+    // Add the new <li> item above to <today-list> as a child
+    todayList.appendChild(liItem);
+  } else {
+    alert('Please input your to-do task!');
+  }
+  input.value = '';
+  // Set visible for up & down buttons if today-list has more than 1 item.
+  document.getElementById('btn').style.display = todayList.childElementCount > 1 ? 'block':'none';
 };
+
+// Create addItem function to add new item to item list
+const addItem = document.getElementsByClassName('add-item')[0];
+// Fires when <add-item> element is clicked
+addItem.addEventListener('click', addListItem);
+
+// Define function "btn" to move up & down the selected item from the list
+const btn = document.getElementById('btn');
+btn.addEventListener('click', e => {
+  // Check if an item in the list is selected or not
+  if (liSelectedItem !== undefined) {
+    // If the clicked button is "up" button and the selected item is under another item
+    if (e.target.id === 'up' && (liSelectedItem.previousElementSibling)) {
+      // Move up the selected item
+      todayList.insertBefore(liSelectedItem, liSelectedItem.previousElementSibling);
+
+      // If the clicked button is "down" and the selected item is above another item
+    } else if (e.target.id === 'down' && (liSelectedItem.nextElementSibling)) {
+      // Move down the selected item
+      todayList.insertBefore(liSelectedItem.nextElementSibling, liSelectedItem);
+    }
+  } else {
+    // There is no selected item
+    alert('Please select an item in the list that you want to move up/down!');
+  }
+});
diff --git a/traversing.js b/traversing.js
@@ -1,11 +1,19 @@
 // Given the <body> element as variable body,
 // access the <main> node and log to the console.
 const body = document.querySelector('body');
+// Access the <main> node
+const main = body.firstElementChild;
+// Log <main> node to the console
+console.log(main);
 
 // Given the <ul> element as variable ul,
 // access <body>  and log to the console.
 const ul = document.querySelector('ul');
+// Access the <body> element from ul (<ul> is a grand child of <body>)
+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');
+// Access the 3rd <li> from <p> element
+console.log(p.previousElementSibling.lastElementChild);
diff --git a/wheresThePointer.css b/wheresThePointer.css
@@ -6,4 +6,8 @@ td {
   border: 2px solid #4b2e83;
   width: 75px;
   height: 75px
+}
+.cell {
+  text-align: center;
+  font-weight: bold;
 }
diff --git a/wheresThePointer.html b/wheresThePointer.html
@@ -6,7 +6,7 @@
   </head>
   <body>
     <table>
-      <tbody>
+      <tbody class="cell">
         <tr>
           <td></td>
           <td></td>

diff --git a/wheresThePointer.js b/wheresThePointer.js
@@ -1,3 +1,9 @@
 // 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 tbody = document.getElementsByTagName('tbody')[0];
+// Table body click event
+tbody.addEventListener('click', e => {
+  let td = e.target;
+  td.innerHTML = `${e.clientX}; ${e.clientY}`;
+});
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,7 +6,7 @@ @@
       </head>
       <body>
         <table>
-          <tbody>
+          <tbody class="cell">
             <tr>
               <td></td>
               <td></td>
@@ Expand Down @@