completed homework for week-5

accessing.js

@@ -1,5 +1,12 @@
 // Change the text of the "Seattle Weather" header to "February 10 Weather Forecast, Seattle"
+const headline = document.getElementById('weather-head')
+
+headline.innerText = 'February 10 Weather Forecast, Seattle'
 
 // Change the styling of every element with class "sun" to set the color to "orange"
+const sunEls = document.querySelectorAll('.sun')
+sunEls.forEach((el) => el.style.color = 'orange')
 
 // Change the class of the second <li> from to "sun" to "cloudy"
+const secLi = document.getElementsByTagName('li');
+secLi[1].innerText = "cloudy";

dom-crud.js

@@ -1,14 +1,25 @@
 // Create a new <a> element containing the text "Buy Now!" 
 // with an id of "cta" after the last <p>
 
+const aElement = document.createElement('a', { 'id': 'cta' });
+const aElementText = document.createTextNode('Buy Now!');
+
+aElement.appendChild(aElementText);
+const body = document.getElementsByTagName('body')[0];
+body.appendChild(aElement);
 
 // Access (read) the data-color attribute of the <img>,
 // log to the console
-
+const getImg = document.getElementsByTagName('img')[0];
+const getImgDataColor = getImg.getAttribute('data-color');
+console.log(getImgDataColor);
 
 // Update the third <li> item ("Turbocharged"), 
 // set the class name to "highlight"
-
+const getThirdLi = document.getElementsByTagName('li')[2]
+getThirdLi.classList.add('highlight');
 
 // Remove (delete) the last paragraph
 // (starts with "Available for purchase now…")
+const getLastPar = document.getElementsByTagName('p')[0];
+getLastPar.remove();

plusesAndMinuses.js

@@ -1,2 +1,24 @@
 // When a user clicks the + element, the count should increase by 1 on screen.
+let counter = 0;
+let counterText = document.getElementById('counter')
+const incrementButton = document.getElementById('increment');
+
+incrementButton.addEventListener('click', eventHandlerincrement);
+
+// would like to turn this into an if statement if i have time, so i would only need one
+// function instead of two to get increment or decrement
+function eventHandlerincrement(e) {
+  counter++
+  console.log(`counter is now ${counter}`);
+  counterText.innerText = counter;
+};
+
 // When a user clicks the – element, the count should decrease by 1 on screen.
+const decrementButton = document.getElementById('decrement');
+decrementButton.addEventListener('click', eventHandlerdecrement);
+
+function eventHandlerdecrement(e) {
+  counter--
+  console.log(`counter is now ${counter}`);
+  counterText.innerText = counter;
+};

toDoList.js

@@ -1,14 +1,38 @@
 // If an li element is clicked, toggle the class "done" on the <li>
+const listParent = document.querySelector('ul.today-list');
+let listItems = document.querySelectorAll('li')
+
+listParent.addEventListener('click', (e) => {
+  const clickedLiElement = e.target;
+  clickedLiElement.classList.toggle('done');
+});
 
 // If a delete link is clicked, delete the li element / remove from the DOM
+const deleteEl = document.getElementsByClassName('delete')[0].parentNode;
+
+const deleteLi = (e) => {
+  deleteEl.remove()
+};
+
+deleteEl.addEventListener('click', (deleteLi));
 
 // 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) {
+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
+  let newListItem = document.createElement('li');
+  let span = document.createElement('span');
+  let deleteClass = document.createElement('a');
+  deleteClass.classList.add('delete')
+  deleteClass.appendChild(document.createTextNode('Delete'));
+  span.appendChild(document.createTextNode(text));
+  newListItem.appendChild(span);
+  newListItem.appendChild(deleteClass);
+  listParent.appendChild(newListItem);
 };
+
+const newListItem = document.getElementsByClassName('add-item')[0];
+newListItem.addEventListener('click', addListItem);

traversing.js

@@ -1,11 +1,21 @@
 // Given the <body> element as variable body,
 // access the <main> node and log to the console.
 const body = document.querySelector('body');
+const getMainNode = body.getElementsByClassName('main');
+console.log(getMainNode);
+
+// other solution
+const getMainNode1 = body.children[0];
+console.log(getMainNode1);
 
 // Given the <ul> element as variable ul,
 // access <body>  and log to the console.
 const ul = document.querySelector('ul');
+const getBody = ul.parentElement.parentElement;
+console.log(getBody);
 
 // Given the <p> element as var p,
 // access the 3rd <li>  and log to the console.
 const p = document.querySelector('p');
+const getThirdLi = p.previousElementSibling.children[2];
+console.log(getThirdLi);

wheresThePointer.js

@@ -1,3 +1,20 @@
 // 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 getPointerClick = document.getElementsByTagName('tbody')[0];
+console.log(getPointerClick);
+
+getPointerClick.addEventListener('click', eventHandler);
+
+function eventHandler(e) {
+    coordinateX = e.clientX;
+    coordinateY = e.clientY;
+    mouseCoordinates = (`${coordinateX} ${coordinateY}`);
+    let tdInnerHtml = e.target.innerHTML;
+    console.log(td);
+    if (mouseCoordinates) {
+        tdInnerHtml = mouseCoordinates;
+        console.log(tdInnerHtml)
+    }
+};