UW-JavaScript-310B · Himanshi9gupta · Feb 22, 2022
diff --git a/accessing.js b/accessing.js
@@ -1,5 +1,13 @@
 // Change the text of the "Seattle Weather" header to "February 10 Weather Forecast, Seattle"
+let header2 = document.getElementById("weather-head");
+header2.innerText = "February 10 Weather Forecast, Seattle";
 
 // Change the styling of every element with class "sun" to set the color to "orange"
-
+let sunClassElement = document.querySelectorAll(".sun");
+sunClassElement.forEach((sun)=>{
+    sun.style.color = "orange";
+})
 // Change the class of the second <li> from to "sun" to "cloudy"
+let allLi = document.querySelectorAll("li");
+allLi[1].classList.remove('sun');
+allLi[1].classList.add('cloudy');
diff --git a/dom-crud.html b/dom-crud.html
@@ -22,6 +22,7 @@ <h1>Our Product</h1>
       </ul>
 
       <p><a href="">Available for purchase</a> now! Limited time offer.</p>
+      <div id="new"></div>
     </main>
 
     <script src="dom-crud.js"></script>

diff --git a/dom-crud.js b/dom-crud.js
@@ -1,14 +1,26 @@
 // Create a new <a> element containing the text "Buy Now!" 
 // with an id of "cta" after the last <p>
+const para = document.getElementsByTagName('p');
+const anchor = document.createElement('a');
+    anchor.innerText = 'Buy Now!';
+    anchor.id = "cta";
 
-
+    document.getElementById('new').append(anchor);
+
 // Access (read) the data-color attribute of the <img>,
 // log to the console
-
-
+const img = document.getElementsByTagName('img');
+console.log(img[0].dataset.color);
 // Update the third <li> item ("Turbocharged"), 
 // set the class name to "highlight"
-
-
+let allList = document.querySelectorAll('li');
+allList[2].innerText = '"Turbocharged"';
+allList[2].classList.add('highlight');
 // Remove (delete) the last paragraph
 // (starts with "Available for purchase now…")
+
+//para[0].style.display = 'none';
+let main = document.getElementsByTagName('main')[0];
+let p = main.getElementsByTagName("p");
+p = Array.from(p);
+main.removeChild(p[p.length - 1]);
diff --git a/plusesAndMinuses.html b/plusesAndMinuses.html
@@ -2,9 +2,35 @@
 <html>
   <head>
     <title>Pluses and Minuses</title>
+   <style>
+    #plus{
+      width:40px;
+      height:40px;
+      background-color:green;
+      color:white;
+      font-size: 30px;
+      margin-right: 10px;
+    }
+    #minus{
+      width:40px;
+      height:40px;
+      background-color:red;
+      color:white;
+      font-size: 30px;
+    }
+    #container{
+      text-align: center;
+    }
+    #header{
+      font-size: 70px;
+    }
+   </style>
   </head>
-
+  <div id="container">
+    <h1 id="header"></h1>
+  </div>  
   <body>
     <!-- Your HTML here -->
   </body>
+  <script src="plusesAndMinuses.js"></script>
 </html>
diff --git a/plusesAndMinuses.js b/plusesAndMinuses.js
@@ -1,2 +1,31 @@
 // 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.
+let plusBtn = document.createElement('button');
+plusBtn.id= 'plus';
+plusBtn.innerText = '+';
+
+
+let minusBtn = document.createElement('button');
+minusBtn.id= 'minus';
+minusBtn.innerText = '-';
+
+document.getElementById('container').append(plusBtn);
+document.getElementById('container').append(minusBtn);
+
+let header = document.getElementById('header');
+let counter = 0;
+
+header.innerText =counter;
+
+plusBtn.addEventListener('click', ()=>{
+
+    counter++;
+    header.innerText = counter;
+})
+minusBtn.addEventListener('click',()=>{
+    if(counter<=0){
+        alert('Counter is negative!')
+    }
+    counter--;
+    header.innerText = counter;
+})
diff --git a/stoppingBehavior.js b/stoppingBehavior.js
@@ -1,3 +1,10 @@
+
+document.getElementById('cat').addEventListener('click',function func(e){
+  alert("Bow wow!");
+  e.stopImmediatePropagation();
+})
+
+
 // Do not change
 document.getElementById('cat').addEventListener('click', () => {
   alert('meow!');
@@ -6,5 +13,15 @@ document.getElementById('cat').addEventListener('click', () => {
 // When clicked, "More info" link should alert "Here's some info"
 // instead of going to a new webpage
 
+let anchor = document.getElementById('more-info');  
+  anchor.href = '#';
+
+anchor.addEventListener('click',()=>{
+
+  alert("Here's some info");
+})
 // When the bark button is clicked, should alert "Bow wow!"
 // Should *not* alert "meow"
+
+
+
diff --git a/toDoList.css b/toDoList.css
@@ -43,3 +43,16 @@ li.done span {
 .add-item {
   background-color: darkturquoise;
 }
+.btn{
+  text-align: center;
+
+  width: 370px;
+}
+#plus,#minus{
+  width: 40px;
+  height: 40px;
+  font-size: 30px;
+  background: cadetblue;
+  margin: 0px 5px;
+
+}
diff --git a/toDoList.html b/toDoList.html
@@ -10,12 +10,19 @@ <h1>To Do:</h1>
       <ul class="today-list">
         <li>
           <span>Reading</span>
-          <a class="delete">Delete</a>
+          <a class="delete" id="anchor">Delete</a>
         </li>
       </ul>
       <div class="add"><input type="text" /> <a class="add-item">Add</a></div>
+
+     <div class="btn">
+       <h6>***You can re-arrange the list using plus and minus button***</h6>
+      <button id="plus">+</button>
+      <button id="minus">-</button>
+    </div>
     </main>
 
     <script src="toDoList.js"></script>
   </body>
 </html>
+
diff --git a/toDoList.js b/toDoList.js
@@ -1,14 +1,64 @@
 // If an li element is clicked, toggle the class "done" on the <li>
 
+let liEl = document.getElementsByTagName('li');
+let index = 0;
+function funct(e){
+  liEl[index].classList.toggle('done');
+  e.path[1].classList.toggle('done');
+}
+liEl[index].addEventListener('click',funct);
 // If a delete link is clicked, delete the li element / remove from the DOM
 
+const delBtn = document.getElementById('anchor');
+const allList = document.querySelector('ul');
+delBtn.addEventListener('click', ()=>{
+  allList.removeChild(liEl[0]); 
+})
+
+
+
 // 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>
 
+  let newLi = document.createElement('li');
+
+  let newSpan = document.createElement('span');
+  newSpan.innerText = text;
+  newLi.appendChild(newSpan);
+  document.getElementsByClassName('today-list')[0].append(newLi);
+
   // Finish function here
-};
+};  
+
+document.getElementsByClassName('add-item')[0].addEventListener('click', addListItem);
+
+const listItems = document.getElementsByTagName('li')[0];
+  // return listItems;
+
+
+
+
+allList.addEventListener('click',(e)=>{
+  console.log(e.path[1]);
+  console.log(e.target);
+   //e.target.classList.toggle('done');
+   e.path[1].classList.toggle('done');
+ });
+
+
+ document.getElementById('plus').addEventListener('click',()=>{
+  let items = document.querySelectorAll('li');
+  items[items.length-1].parentNode.insertBefore(items[items.length-1], items[0]);
+ })
+ document.getElementById('minus').addEventListener('click',()=>{
+  let items = document.querySelectorAll('li');
+  items[items.length-1].parentNode.insertBefore(items[0],items[items.length]);
+ })
diff --git a/traversing.js b/traversing.js
@@ -1,11 +1,17 @@
 // Given the <body> element as variable body,
 // access the <main> node and log to the console.
 const body = document.querySelector('body');
-
+let main = body.querySelector('main');
+console.log(main);
 // Given the <ul> element as variable ul,
 // access <body>  and log to the console.
 const ul = document.querySelector('ul');
+const ulParent = ul.parentElement.parentNode; 
+console.log(ulParent);
 
 // Given the <p> element as var p,
 // access the 3rd <li>  and log to the console.
 const p = document.querySelector('p');
+const ulEle = p.previousElementSibling;
+ console.log(ulEle.children[2]);
+ console.log(`accessing 3rd li element: `+ ulEle.children[2].innerText);
diff --git a/wheresThePointer.css b/wheresThePointer.css
@@ -4,6 +4,7 @@ table {
 
 td {
   border: 2px solid #4b2e83;
-  width: 75px;
-  height: 75px
+  width: 100px;
+  height: 100px;
+  text-align:center;
 }
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
+
+let allTd = document.querySelector('tbody');
+allTd.addEventListener('click',(e)=>{
+
+    e.target.innerHTML =`X: ${e.clientX}, Y:${e.clientY}`;
+})
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,6 +22,7 @@ <h1>Our Product</h1> @@
           </ul>
           <p><a href="">Available for purchase</a> now! Limited time offer.</p>
+          <div id="new"></div>
         </main>
         <script src="dom-crud.js"></script>
@@ Expand Down @@