UW-JavaScript-310B · pablomarcel · Feb 18, 2022 · Feb 18, 2022 · Feb 23, 2022 · Feb 23, 2022
diff --git a/accessing.js b/accessing.js
@@ -1,5 +1,17 @@
 // Change the text of the "Seattle Weather" header to "February 10 Weather Forecast, Seattle"
 
+const weatherHeader = document.getElementById("weather-head")
+weatherHeader.textContent='February 10 Weather Forecast, Seattle'
+
+
 // Change the styling of every element with class "sun" to set the color to "orange"
 
+const sunClasses = document.querySelectorAll('.sun')
+
+sunClasses.forEach((thing)=>thing.style.color = 'orange')
+
 // Change the class of the second <li> from to "sun" to "cloudy"
+
+const secondSun = document.querySelectorAll('.sun')[1]
+
+secondSun.className='cloudy'
diff --git a/dom-crud.js b/dom-crud.js
@@ -1,14 +1,38 @@
 // Create a new <a> element containing the text "Buy Now!" 
 // with an id of "cta" after the last <p>
 
+//append to main
+
+const aElem = document.createElement('a')
+
+const link = document.createTextNode("Buy Now!")
+
+aElem.appendChild(link)
+
+aElem.id="cta"
+
+const mainElem = document.getElementsByTagName('main')[0]
+
+mainElem.appendChild(aElem)
 
 // Access (read) the data-color attribute of the <img>,
 // log to the console
 
+const imgElem = document.getElementsByTagName('img')[0]
+
+const imgColor = imgElem.dataset.color
+
+console.log(imgColor)
 
 // Update the third <li> item ("Turbocharged"), 
 // set the class name to "highlight"
 
+const liElements = document.getElementsByTagName('li')
+liElements[2].className='highlight'
 
 // Remove (delete) the last paragraph
 // (starts with "Available for purchase now…")
+
+const pElem = document.getElementsByTagName('p')[0]
+
+mainElem.removeChild(pElem)
diff --git a/plusesAndMinuses.html b/plusesAndMinuses.html
@@ -6,5 +6,14 @@
 
   <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,23 @@
 // When a user clicks the + element, the count should increase by 1 on screen.
+let counter =0
+
+let incRef = document.getElementById('increment')
+
+let decRef = document.getElementById('decrement')
+
+let divRef = document.getElementById('counter')
+
+incRef.addEventListener('click', ()=>{
+    counter++;
+    console.log(counter)
+    divRef.innerText=counter;
+})
+
 // When a user clicks the – element, the count should decrease by 1 on screen.
+
+//
+decRef.addEventListener('click', ()=>{
+    counter--;
+    console.log(counter)
+    divRef.innerText=counter;
+})
diff --git a/toDoList.js b/toDoList.js
@@ -1,6 +1,53 @@
 // If an li element is clicked, toggle the class "done" on the <li>
 
-// If a delete link is clicked, delete the li element / remove from the DOM
+// done was fixed by adding an event listener in the addListItem Function
+//fixed done by using the span element instead of li element. If a li element is used,
+//it interferes with the delete tag.
+//fixed delete by adding an event listener in the addListItem Function
+
+let deleteRef = document.getElementsByClassName('delete')
+
+const doneItem = function(e) {
+  e.preventDefault();
+  if (this) {
+    this.parentNode.className = 'done'
+  }
+
+}
+
+let spanRef = document.getElementsByTagName('span')
+
+for (let i=0; i<spanRef.length; i++){
+
+  spanRef[i].addEventListener('click', doneItem)
+
+}
+
+
+const deleteListItem = function(e) {
+  e.preventDefault();
+
+  const liEl=this.parentNode
+
+  //console.log(liEl)
+
+  const ulEl=liEl.parentNode
+
+  //console.log(ulEl)
+
+  ulEl.removeChild(liEl)
+
+}
+
+for (let i=0; i<deleteRef.length; i++){
+
+  //console.log(deleteRef.length)
+
+  deleteRef[i].addEventListener('click', deleteListItem)
+
+}
+
+let addElem = document.getElementsByClassName('add-item')
 
 // 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!
@@ -11,4 +58,38 @@ const addListItem = function(e) {
   const text = input.value; // use this text to create a new <li>
 
   // Finish function here
+
+  // need to access ul from div
+
+  const mainElem = this.parentNode.parentNode
+
+  const ulElem = mainElem.getElementsByTagName('ul')[0]
+
+  const liElem = document.createElement('li')
+
+  const spanElem = document.createElement('span')
+
+  spanElem.textContent=text
+
+  const aElem = document.createElement('a')
+
+  aElem.className="delete"
+
+  const link = document.createTextNode('Delete')
+
+  aElem.appendChild(link)
+
+  liElem.appendChild(spanElem)
+
+  liElem.appendChild(aElem)
+
+  spanElem.addEventListener('click', doneItem)
+
+  aElem.addEventListener('click', deleteListItem)
+
+  ulElem.append(liElem)
+
 };
+
+addElem[0].addEventListener('click', addListItem)
+
diff --git a/traversing.js b/traversing.js
@@ -2,10 +2,23 @@
 // access the <main> node and log to the console.
 const body = document.querySelector('body');
 
+const mainElement = body.getElementsByTagName('main')[0]
+
+console.log(mainElement)
+
 // Given the <ul> element as variable ul,
 // access <body>  and log to the console.
 const ul = document.querySelector('ul');
 
+let ulMain = ul.parentNode
+
+let bodyElem = ulMain.parentNode
+
+console.log(bodyElem)
+
 // Given the <p> element as var p,
 // access the 3rd <li>  and log to the console.
 const p = document.querySelector('p');
+
+const ulElem = p.previousElementSibling
+console.log(ulElem.children[2].outerText)
diff --git a/wheresThePointer.js b/wheresThePointer.js
@@ -1,3 +1,18 @@
 // Attach one listener that will detect clicks on any of the <td>
+
+let tableRef = document.getElementsByTagName('td')
+
+//tableRef is a collection
+
+for (let i=0; i<tableRef.length; i++){
+
+    tableRef[i].addEventListener('click',(event)=>{
+        console.log(`x= ${event.x}, y=${event.y}`)
+        tableRef[i].innerText=`${event.x}, ${event.y}`
+    })
+
+}
+
 // elements.  Should update that element's innerHTML to be the
+
 // x, y coordinates of the mouse at the time of the click