tdsills · tdsills · Jan 26, 2021 · Jan 27, 2021 · Jan 27, 2021 · Jan 28, 2021
diff --git a/dom/inject/inject.html b/dom/inject/inject.html
@@ -1,11 +1,12 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
-</head>
-<body>
+  </head>
+  <body>
     <div id="inject"></div>
-</body>
-</html>
+    <script src="inject.js"></script>
+  </body>
+</html>
diff --git a/dom/inject/inject.js b/dom/inject/inject.js
@@ -1,4 +1,35 @@
-/*Exercise instructions : take the html code from the following codepen : https://codepen.io/ayunas-the-scripter/pen/WNQgpqB, and use JavaScript DOM manipulation to inject the html into the inject id element of inject.html.  You are not allowed to simply set the innerHTML of the <div> to the entire html document. 
-*/
+/*Exercise instructions : take the html code from the following codepen : https://codepen.io/ayunas-the-scripter/pen/WNQgpqB, and use JavaScript DOM manipulation to inject the html into the inject id element of inject.html.  You are not allowed to simply set the innerHTML of the <div> to the entire html document.
+ */
+let injectDiv = document.querySelector("#inject");
+let center = document.createElement("center");
+let h1 = document.createElement("h1");
+let h2 = document.createElement("h2");
+let hr = document.createElement("hr");
+let p = document.createElement("p");
+let ol = document.createElement("ol");
+let hr2 = document.createElement("hr2");
+let p2 = document.createElement("p2");
+let h1Fin = document.createElement("h1Fin");
+let pFin = document.createElement("pFin");
 
+h1.innerHTML = `<i>HTML Practice Exercise TEKcamp.</i>`;
+h2.innerHTML = `<a href="">TEKsystems "TEKcamp"</a>`;
+p.innerHTML = `I love <i>HTML</i> for the following reasons:`;
+ol.innerHTML = `<li>I learned it quickly.</li>
+<li>I can make web pages using code. </li>
+<li> It’s fun.</li>`;
+p2.innerHTML = `My instructor’s email address is: <a href="mailto:ayunas@teksystems.com">ayunas@teksystems.com</a>.`;
+h1Fin.innerHTML = "Have a great day!";
+pFin.innerHTML = `I really look forward to learning how to code!  Have a great day.  
+-[Team "Git'er Done"]`;
 
+injectDiv.appendChild(center);
+center.appendChild(h1);
+center.appendChild(h2);
+injectDiv.appendChild(hr);
+injectDiv.appendChild(p);
+injectDiv.appendChild(ol);
+injectDiv.appendChild(hr2);
+injectDiv.appendChild(p2);
+injectDiv.appendChild(h1Fin);
+injectDiv.appendChild(pFin);
diff --git a/dom/shopping/shopping-list.html b/dom/shopping/shopping-list.html
@@ -3,7 +3,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Shopping list example</title>
     <style>
       li {
@@ -18,21 +18,16 @@
     </style>
   </head>
   <body>
-
     <h1>My shopping list</h1>
 
     <div>
       <label for="item">Enter a new item:</label>
-      <input type="text" name="item" id="item">
+      <input type="text" name="item" id="item" />
       <button>Add item</button>
     </div>
 
-    <ul>
-
-    </ul>
-
-    <script>
+    <ul></ul>
 
-    </script>
+    <script src="./shoppingList.js"></script>
   </body>
-</html>
+</html>
diff --git a/dom/shopping/shoppingList.js b/dom/shopping/shoppingList.js
@@ -1,41 +1,34 @@
-/*
-    Do the following steps in this file, and make sure this file is linked to the shopping-list.html file
+// Do the following steps in this file, and make sure this file is linked to the shopping-list.html file
 
-
+// 1. Create three variables that hold references to the following elements &lt;ul&gt; &lt;input&gt; &lt;button&gt; elements.
+const ul = document.querySelector("ul");
+const input = document.querySelector("#item");
+const button = document.querySelector("button");
+console.log(button);
+// 2. Create a function that will run in response to the button being clicked.
 
-    1. Create three variables that hold references to the following elements &lt;ul&gt; &lt;input&gt; &lt;button&gt; elements.
-
-
-    2. Create a function that will run in response to the button being clicked.
-
-
-
-    3. Inside the function body, start off by storing the current value of the input element in a variable.
-
-
-
-    4. Next, empty the input element by setting its value to an empty string — ''.
-
-
-
-    5. Create three new elements — a list item (&lt;li&gt;), &lt;span&gt;, and &lt;button&gt;, and store them in variables.
-
-
-
-    6. Append the span and the button as children of the list item.
-
-
-
-    7. Set the text content of the span to the input element value you saved earlier, and the text content of the button to 'Delete'.
-
-
-
-    8. Append the list item as a child of the list.
-
-
-
-    9. Attach an event handler to the delete button, so that when clicked it will delete the entire list item it is inside.
-
-
-
-    10. Finally, use the focus() method to focus the input element ready for entering the next shopping list item.
+// 3. Inside the function body, start off by storing the current value of the input element in a variable.// 4. Next, empty the input element by setting its value to an empty string — ''.
+// 5. Create three new elements — a list item (&lt;li&gt;), &lt;span&gt;, and &lt;button&gt;, and store them in variables.
+// 6. Append the span and the button as children of the list item.
+
+button.addEventListener("click", function () {
+  const clicked = document.getElementById("item").value;
+  console.log(clicked);
+  document.querySelector("#item").value = " ";
+  const li = document.createElement("li");
+  const span = document.createElement("span");
+  const buttonDel = document.createElement("button");
+  li.append(span, buttonDel);
+  span.textContent = clicked;
+  buttonDel.textContent = "Delete";
+  ul.appendChild(li);
+  buttonDel.addEventListener("click", function () {
+    li.remove();
+  });
+  document.getElementById("item").focus();
+});
+
+// 7. Set the text content of the span to the input element value you saved earlier, and the text content of the button to 'Delete'.
+// 8. Append the list item as a child of the list.
+// 9. Attach an event handler to the delete button, so that when clicked it will delete the entire list item it is inside.
+// 10. Finally, use the focus() method to focus the input element ready for entering the next shopping list item.
diff --git a/dom/timer/timer-dom.js b/dom/timer/timer-dom.js
@@ -1,2 +1,26 @@
 console.log("time to start the timer!");
+const time = document.querySelector("timer");
 
+const timeButton = document.querySelector(".timer-buttons");
+const start = timeButton.children[0];
+const stop = timeButton.children[1];
+const reset = timeButton.children[2];
+let countdown = 59;
+
+start.addEventListener("click", function () {
+  let click = setInterval(function () {
+    countdown--;
+    time.textContent = `0:${countdown}`;
+    if (countdown === 0) {
+      clearInterval(click);
+    }
+  }, 1000);
+  stop.addEventListener("click", function () {
+    clearInterval(click);
+  });
+  reset.addEventListener("click", function () {
+    clearInterval(click);
+    coundown = 59;
+    time.textContent = `0:${countdown}`;
+  });
+});
diff --git a/dom/timer/timer.html b/dom/timer/timer.html
@@ -1,20 +1,20 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="timer.css">
-    <script src="timer-dom.js"></script>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="timer.css" />
+    <script defer src="timer-dom.js"></script>
     <title>Document</title>
-</head>
-<body>
+  </head>
+  <body>
     <main id="timer">
-        <p>0:00</p>
-        <div class=timer-buttons>
-            <button>Start</button>
-            <button>Stop</button>
-            <button>Reset</button>
-        </div>
+      <p>0:00</p>
+      <div class="timer-buttons">
+        <button>Start</button>
+        <button>Stop</button>
+        <button>Reset</button>
+      </div>
     </main>
-</body>
-</html>
+  </body>
+</html>