UW-JavaScript-310B · jcahill53 · Feb 19, 2022 · Feb 20, 2022 · Feb 21, 2022 · Feb 21, 2022
diff --git a/accessing.js b/accessing.js
@@ -1,5 +1,18 @@
 // Change the text of the "Seattle Weather" header to "February 10 Weather Forecast, Seattle"
+let title = document.getElementById("weather-head");
+title.innerHTML = 'February 10 Weather Forecast, Seattle';
+
 
 // Change the styling of every element with class "sun" to set the color to "orange"
 
+// const sunColor = document.querySelectorAll('.sun');
+const sunColor = document.querySelectorAll('.sun');
+sunColor.forEach((el) => el.style.color = 'orange')
+
 // Change the class of the second <li> from to "sun" to "cloudy"
+let sunToCloudy = document.getElementsByTagName('li')[1];
+console.log(sunToCloudy);
+
+sunToCloudy.className =  'cloudy';
+sunToCloudy.removeAttribute("style")
+
diff --git a/dom-crud.js b/dom-crud.js
@@ -1,14 +1,29 @@
 // Create a new <a> element containing the text "Buy Now!" 
 // with an id of "cta" after the last <p>
 
+const aEl = document.createElement('a');
+aEl.innerText = "Buy Now!";
+aEl.setAttribute("id","cta");
+const main = document.getElementsByTagName('main')[0];
+main.appendChild(aEl);
+
 
 // Access (read) the data-color attribute of the <img>,
 // log to the console
+const carImg = document.getElementsByTagName('img')[0];
+const carColor = carImg.getAttribute('data-color');
+console.log(carColor);
 
 
 // Update the third <li> item ("Turbocharged"), 
 // set the class name to "highlight"
-
+const listItem = document.getElementsByTagName('li')[2];
+listItem.classList.add('highlight');
 
 // Remove (delete) the last paragraph
 // (starts with "Available for purchase now…")
+let pEl = document.getElementsByTagName('p')[0];
+main.removeChild(pEl);
+
+
+
diff --git a/plusesAndMinuses.css b/plusesAndMinuses.css
@@ -0,0 +1,28 @@
+* {
+    margin: 0;
+    padding: 0;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 17px;
+    color: #444444;
+}
+
+button {
+    width: 20%;
+    margin: 3rem  15%;
+    padding: .5rem 3rem .5rem 3rem;
+    /* background-color: darkblue;
+    border: 1px solid white;
+    color: white; */
+    font-weight: bold;
+    font-size: 3rem;
+
+}
+
+#counter {
+
+    font-size: 3rem;
+    text-align: center;
+    color: black;
+    font-weight: bold;
+    font-size: 3rem;
+}
diff --git a/plusesAndMinuses.html b/plusesAndMinuses.html
@@ -2,9 +2,12 @@
 <html>
   <head>
     <title>Pluses and Minuses</title>
+    <link href="plusesAndMinuses.css" type="text/css" rel="stylesheet">
   </head>
 
   <body>
     <!-- Your HTML here -->
+
+    <script id = "lastEl" src="plusesAndMinuses.js"></script>
   </body>
 </html>
diff --git a/plusesAndMinuses.js b/plusesAndMinuses.js
@@ -1,2 +1,66 @@
 // 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.
+
+
+//create a main element inside the body for the counter and buttons
+let mainEl = document.createElement("main")
+mainEl.setAttribute("id", "main-section");
+
+// Get the reference element for the script element
+let scriptEl = document.getElementById("lastEl")
+
+// Get the parent element
+let parentEl = scriptEl.parentNode
+
+// Insert the new main element into the body before the script
+parentEl.insertBefore(mainEl, scriptEl)
+
+
+//create a button for adding
+const addButton = document.createElement('button');
+addButton.setAttribute("id", "add");
+addButton.innerHTML = "+";
+mainEl.appendChild(addButton);
+
+
+//create a button for subtracting
+const subtractButton = document.createElement('button');
+subtractButton.setAttribute("id", "subtract");
+subtractButton.innerHTML = "-";
+mainEl.appendChild(subtractButton);
+
+
+//create a div for the counter and assign it an id of "counter"
+const divEl = document.createElement('div');
+divEl.setAttribute("id", "counter");
+mainEl.appendChild(divEl);
+
+//add counter to the page
+let counter = 0;
+divEl.innerHTML = `Total Count is ${counter}`;
+
+//create event to add a 1 when add button is clicked
+const addEl = document.getElementById('add');
+
+addEl.addEventListener('click', () => {
+    {
+        counter++;
+    }
+    console.log(counter);
+    divEl.innerHTML = `Total Count is ${counter}`;
+
+
+})
+
+//create event to subtrace a 1 when subtract button is clicked
+
+const subtractEl = document.getElementById('subtract');
+
+subtractEl.addEventListener('click', () => {
+    {
+        counter--;
+    }
+    console.log(counter);
+    divEl.innerHTML = `Total Count is ${counter}`;
+
+})
diff --git a/stoppingBehavior.html b/stoppingBehavior.html
@@ -11,7 +11,7 @@
   <p>
     <a id="more-info" href="https://www.yahoo.com">More info</a>
   </p>
-  <div id="cat" class="container">
+  <div id="cat" class="container"" >
     <button id="dog" class="dog">Bark</button>
   </div>
 

diff --git a/stoppingBehavior.js b/stoppingBehavior.js
@@ -1,10 +1,25 @@
 // Do not change
-document.getElementById('cat').addEventListener('click', () => {
+document.getElementById('cat').addEventListener('click', (e) => {
   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) => {
+  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) => {
+
+  e.stopPropagation();
+  alert('Bow Wow!');
+
+});
diff --git a/toDoList.html b/toDoList.html
@@ -8,7 +8,7 @@
     <main>
       <h1>To Do:</h1>
       <ul class="today-list">
-        <li>
+        <li class="toDo-item">
           <span>Reading</span>
           <a class="delete">Delete</a>
         </li>

diff --git a/toDoList.js b/toDoList.js
@@ -1,14 +1,82 @@
 // If an li element is clicked, toggle the class "done" on the <li>
 
+const list = document.querySelector('ul.today-list');
+// console.log(list);
+
+let listItems = document.querySelectorAll('li');
+// console.log(listItems);
+
+// const listChildren = list.children;
+// console.log(listChildren);
+
+//toggle the class for the li element under the parent list when it is clicked
+
+list.addEventListener('click', e => {
+
+      e.preventDefault();
+      let listItems2 = document.querySelectorAll('li');
+      // console.log('clicked');
+      const li = e.target;
+      listItems2.forEach(e => e.classList.toggle('done'));
+
+});
+
 // If a delete link is clicked, delete the li element / remove from the DOM
+//identify elements for button and parent of the button
+
+const deleteButton = document.querySelectorAll('.delete');
+// const buttonParent = document.querySelectorAll('.toDo-item');;
+// const buttonUL = document.querySelectorAll('.today-list');
+
+// console.log(deleteButton);
+// console.log(buttonParent);
+// console.log(buttonUL);
+
+function deleteToDo(e) {
+
+      // Implement the click handler here for button of class 'remove'
+      var target = e.target;
+      target.parentNode.parentNode.removeChild(target.parentNode);
+};
+
+for (var i = 0; i < deleteButton.length; i++) {
+      deleteButton[i].addEventListener("click", deleteToDo);
+};
 
 // 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
+//identify the ul element which will be the parent of the new li
+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>
+
+      // create and add the list element
+      let newToDo = document.createElement("li");
+      newToDo.setAttribute("class", "toDo-item");
+
+      //append the new list to the parent ul
+      list.appendChild(newToDo);
+
+      // create and add the span element
+      let newDescr = document.createElement("span");
+      newDescr.innerHTML = ` ${text}   `;
+      //append the new span to the parent li
+      newToDo.appendChild(newDescr);
+
+      // create and add the span element
+      let newDelete = document.createElement("a");
+      newDelete.setAttribute("class", "delete");
+      newDelete.innerHTML = `Delete`;
+      //append the new span to the parent li
+      newToDo.appendChild(newDelete);
+
 };
+
+
+//identify the element that will be clicked to trigger the event
+const addNewToDo = document.getElementsByClassName('add-item')[0];
+//add the new ToDo item when the add-item button is clicked
+addNewToDo.addEventListener('click', addListItem);
diff --git a/traversing.js b/traversing.js
@@ -1,11 +1,18 @@
 // Given the <body> element as variable body,
 // access the <main> node and log to the console.
 const body = document.querySelector('body');
+const mainEl = body.firstElementChild;
+console.log(mainEl);
 
 // Given the <ul> element as variable ul,
 // access <body>  and log to the console.
 const ul = document.querySelector('ul');
+const bodyEl =  ul.closest('body');;
+console.log(bodyEl);
 
 // Given the <p> element as var p,
 // access the 3rd <li>  and log to the console.
 const p = document.querySelector('p');
+const ulEl =p.previousElementSibling;
+const ulLastChild = ulEl.lastElementChild;
+console.log(ulLastChild);
diff --git a/wheresThePointer.js b/wheresThePointer.js
@@ -1,3 +1,11 @@
 // 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 cells = document.querySelectorAll('td')
+cells.forEach(e => e.addEventListener('click', function(e) {
+    console.log("clicked");
+    let x = e.pageX;
+    let y = e.pageY;
+    this.innerHTML = `(${x}, ${y})`;
+}));