UW-JavaScript-310B · carlitos-206 · Feb 24, 2022
diff --git a/accessing.html b/accessing.html
@@ -3,6 +3,7 @@
   <head>
     <title>Accessing Elements</title>
     <link rel="stylesheet" href="accessing.css" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   </head>
 
   <body>
@@ -13,7 +14,7 @@ <h2 id="weather-head">Seattle Weather</h2>
       <li class="sun">Tuesday</li>
       <li class="sun">Wednesday</li>
     </ul>
-
     <script src="accessing.js"></script>
+    <script src="jquery.js"></script>
   </body>
 </html>
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 weatherHead = document.getElementById('weather-head');
+weatherHead.innerHTML = 'February 10 Weather Forecast, Seattle'
 // Change the styling of every element with class "sun" to set the color to "orange"
-
+
+// To acces class it creates an array meaning that we have to loop throug it, to acces the array[i]
+let classes = document.getElementsByClassName("sun")
+console.log(classes)
+for(let i =0; i<classes.length; i++){
+    classes[i].setAttribute('style', 'color:orange')
+}
 // Change the class of the second <li> from to "sun" to "cloudy"
+// see Jquery.js file
+const child2 = document.querySelector('#weather :nth-child(2)');
+child2.setAttribute('name', 'I_also_did_it_in_Vanilla_JS')
diff --git a/dom-crud.js b/dom-crud.js
@@ -1,14 +1,31 @@
 // Create a new <a> element containing the text "Buy Now!" 
 // with an id of "cta" after the last <p>
+// this gets an array with one elem inside of it
+let main = document.getElementsByTagName('main')[0]
+let nextTag = document.createElement('a')
+nextTag.setAttribute('href', '#')
+nextTag.innerText="Buy Now!"
 
+console.log(main, nextTag)
+
+main.appendChild(nextTag)
 
 // Access (read) the data-color attribute of the <img>,
 // log to the console
 
-
+let imgAttribute = document.getElementsByTagName('img')[0].getAttribute('data-color')
+console.log(imgAttribute)
 // Update the third <li> item ("Turbocharged"), 
 // set the class name to "highlight"
-
+let list = document.querySelector('ul :nth-child(3)')
+list.setAttribute('class', 'highlight')
+console.log(list)
 
 // Remove (delete) the last paragraph
 // (starts with "Available for purchase now…")
+let p= document.getElementsByTagName('p')[0]
+p.remove()
+
+
+// these are the DOM-CRUD's
+
diff --git a/jquery.js b/jquery.js
@@ -0,0 +1,7 @@
+// Change the class of the second <li> from to "sun" to "cloudy"
+$(document).ready(
+    function(){
+        let x = $('#weather li:nth-child(2)')
+        x.attr('class', 'cloudy')
+    }
+);
diff --git a/plusesAndMinuses.html b/plusesAndMinuses.html
@@ -2,9 +2,13 @@
 <html>
   <head>
     <title>Pluses and Minuses</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
+    <script src="plusesAndMinuses.js"></script>
   </head>
 
   <body>
-    <!-- Your HTML here -->
+    <button style="position: absolute; left:50px; top:25px;border-radius: 10px"  onclick="minus()"> - </button>
+    <p style="position: absolute; left:105px;top: 25px; ">0</p>
+    <button style="position: absolute; left:145px;top:25px;border-radius: 10px;" onclick="plus()"> + </button>
   </body>
 </html>
diff --git a/plusesAndMinuses.js b/plusesAndMinuses.js
@@ -1,2 +1,15 @@
 // When a user clicks the + element, the count should increase by 1 on screen.
+function plus(){
+    let stringNum = document.getElementsByTagName('p')[0].innerText
+    let num = parseInt(stringNum)
+    num+=1
+    document.getElementsByTagName('p')[0].innerText = num
+}
 // When a user clicks the – element, the count should decrease by 1 on screen.
+function minus() {
+    let stringNum = document.getElementsByTagName('p')[0].innerText
+    let num = parseInt(stringNum)
+    num-=1
+    document.getElementsByTagName('p')[0].innerText = num
+
+}
diff --git a/stoppingBehavior.html b/stoppingBehavior.html
@@ -9,11 +9,11 @@
     tempor incididunt ut labore et dolore magna aliqua.
   </p>
   <p>
-    <a id="more-info" href="https://www.yahoo.com">More info</a>
+    <a id="more-info" href="https://www.yahoo.com" onclick="switchToAlert()">More info</a>
   </p>
   <div id="cat" class="container">
-    <button id="dog" class="dog">Bark</button>
+    <button id="dog" class="dog" onclick="killOldAlert()" >Bark</button>
   </div>
 
-  <script src="./stoppingBehavior.js"></script>
+  <script src="stoppingBehavior.js"></script>
 </body>
diff --git a/stoppingBehavior.js b/stoppingBehavior.js
@@ -5,6 +5,33 @@ document.getElementById('cat').addEventListener('click', () => {
 
 // When clicked, "More info" link should alert "Here's some info"
 // instead of going to a new webpage
-
+function switchToAlert(){
+  let aTag = document.getElementById('more-info')
+  aTag.setAttribute('href', '#')
+  alert("Here's some info")
+}
 // When the bark button is clicked, should alert "Bow wow!"
 // Should *not* alert "meow"
+// document.getElementById('cat').addEventListener('mouseover', ()=>{
+//   let cat = document.querySelector('cat')
+//   cat.setAttribute('id', 'woof')
+// })
+// function killOldAlert(e){
+//   // e.stopPropagation()
+//   let doggy = document.getElementById('dog')
+//   doggy.addEventListener('click', () =>{
+//     alert(`Bow wow wow yippy yo yippy yay 
+//     Doggy Dogg's in the ... house`);
+//     alert("Sorry... couldn't miss the oppurtunity ...its an old 90's song")
+//   })
+// }
+
+const killCat = document.getElementById('dog').addEventListener('click', event => {
+  event.stopPropagation()
+  alert(`Bow wow wow yippy yo yippy yay 
+  Doggy Dogg's in the ... house`);
+    alert("Sorry... couldn't miss the oppurtunity ...its an old 90's song")
+})
+
+// doc:https://www.w3schools.com/jsref/event_stoppropagation.asp
+// doc:https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_stoppropagation
diff --git a/toDoList.html b/toDoList.html
@@ -13,7 +13,7 @@ <h1>To Do:</h1>
           <a class="delete">Delete</a>
         </li>
       </ul>
-      <div class="add"><input type="text" /> <a class="add-item">Add</a></div>
+      <div class="add"><input type="text" /> <a class="add-item" onclick="addListItem()">Add</a></div>
     </main>
 
     <script src="toDoList.js"></script>

diff --git a/toDoList.js b/toDoList.js
@@ -1,14 +1,54 @@
 // If an li element is clicked, toggle the class "done" on the <li>
-
+let array = document.querySelectorAll('li')
+console.log(array)
+for(let i = 0;i<array.length;i++){
+  array[i].addEventListener('click',()=>{
+    array[i].setAttribute('class', 'done')
+  })
+}
 // If a delete link is clicked, delete the li element / remove from the DOM
+let remove = document.getElementsByClassName('delete')
+console.log(remove)
 
+for(let i = 0;i<array.length;i++){
+  for(let j =0; j<remove.length;j++){
+    remove[i].addEventListener('click', ()=>{
+      array[i].remove()
+    })
+  }
+}
 // 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
+
+  const todayList = document.querySelector('.today-list');
+  const li = document.createElement('li');
+  const spanTag = document.createElement('span');
+  spanTag.textContent = text + " ";
+  const aTag = document.createElement('a');
+  aTag.textContent = 'Delete'
+  aTag.setAttribute('class', 'delete');
+  li.append(spanTag);
+  li.append(aTag);
+  console.log(li)
+  todayList.append(li);
 };
+
+const addList = document.getElementsByClassName('add-item')[0]
+// addList.addEventListener('click', ()=>{
+//   test = new addListItem()
+//   console.log(test)
+// })
+
+addList.addEventListener('click',addListItem) 
+
+// To have the actual elements function in the html they must be created indivudually
+//  ex: 
+//  const li = document.createElement('li').innerHTML=`<span>${text}</span> <a class="delete">Delete</a>`
+// this appends the li element with a string of innerHTML
diff --git a/traversing.js b/traversing.js
@@ -1,11 +1,14 @@
 // Given the <body> element as variable body,
 // access the <main> node and log to the console.
 const body = document.querySelector('body');
-
+console.log(body.querySelector('main'))
 // Given the <ul> element as variable ul,
 // access <body>  and log to the console.
 const ul = document.querySelector('ul');
-
+// ul is a child of the main and main is a child of body
+console.log(ul.parentNode.parentNode)
 // Given the <p> element as var p,
 // access the 3rd <li>  and log to the console.
 const p = document.querySelector('p');
+let child3 = p.parentElement.childNodes[3].childNodes[5]
+console.log(child3)
diff --git a/wheresThePointer.js b/wheresThePointer.js
@@ -1,3 +1,12 @@
 // 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
+
+let box = document.querySelectorAll('td')
+for(let i =0;i<box.length;i++){
+    box[i].addEventListener('click', (e)=>{
+        let x = e.clientX
+        let y = e.clientY
+        box[i].innerHTML = `(${x} , ${y})`
+    })
+}