joinpursuit · auredysanchez · Feb 11, 2021 · Feb 13, 2021
diff --git a/index.html b/index.html
@@ -2,6 +2,7 @@
 <html>
   <head>
     <link rel="stylesheet" href="./index.css">
+    <script src="./index.js" defer></script>
     <title>Combining HTML and JavaScript + DOM Lab</title>
   </head>
   <body>
@@ -15,34 +16,51 @@ <h2>1. String Mirror</h2>
     </ul>    
 
     <input id="mirror-input" type="text" placeholder="Enter your string here">
-    <p id="mirror-output">Waiting for input...</p>
-    <button id="mirror-button" type="submit">Submit</button>
+    <p id="mirror-output"></p>
+    <button onclick="mirrorString()" id="mirror-button" type="submit">Submit</button>
+    <!-- <button >Hello world!</button> -->
 
     <h2>2. String Uppercaser</h2>
 
     <li>Make a text input with id='uppercaser-input'</li>
     <li>They should then be able to click a "submit" button with id='uppercaser-button' that will display the string the user entered in all uppercase in an element with id='uppercaser-output'</li>
-
+    <input id="uppercaser-input" type="text" placeholder="Enter your string here">
+    <p id="uppercaser-output"></p>
+    <button onclick="upperCaseString()" id="uppercaser-button" type="submit">Submit</button>
     <h2>3. Palindrome Detector</h2>
 
     <li>The user should be able to enter a string into a text input with id='palindrome-input'</li>
     <li>They should then be able to click a "submit" button with id='palindrome-button'. Clicking the button will display a string in the form "It is ${true/false} that ${entered string} is a palindrome" with id='palindrome-output'</li>
-
+    <input id="palindrome-input" type="text" placeholder="Enter your string here">
+    <p id="palindrome-output"></p>
+    <button  onclick="checkPalindrome()" id="palindrome-button" type="submit">Submit</button>
+
     <h2>4. Even Checker</h2>
 
     <li>The user should be able to enter a number into an input with id='even-checker-input'</li>
     <li>They should then be able to click a "submit" button with id='even-checker-button' that will display a string in the form "It is ${true/false} that ${entered number} is even" with id='even-checker-output'</li>
-
+    <input id="even-checker-input" type="number" placeholder="Enter your string here">
+    <p id="even-checker-output"></p>
+    <button  onclick="checkEven()" id="even-checker-button" type="submit">Submit</button>
+
     <h2>5. Number Doubler</h2>
 
     <li>The user should be able to enter a number into an input with id='doubler-input'</li>
     <li>They should then be able to click a "submit" button with id='doubler-button' that will display a string in the form "${entered number} doubled is ${doubledVal}" with id='doubler-output'</li>
-
+    <input id="doubler-input" type="number" placeholder="Enter your string here">
+    <p id="doubler-output"></p>
+    <button  onclick="doubleNumber()" id="doubler-button" type="submit">Submit</button>
     <h2>6. Average of Three Numbers</h2>
 
     <li>The user should be able to enter 3 numbers into text inputs with ids 'average-input-1', 'average-input-2', and 'average-input-3'</li>
     <li>They should then be able to click a "submit" button with id='average-button' that will display a string in the form "The average of ${numberOne}, ${numberTwo}, and ${numberThree} is ${average}" with id='average-output'</li>
-
+    <!-- <input id="average-input-1"  id="average-input-2" id="average-input-3" type="number" placeholder="Enter your string here"> -->
+    <input type="number" id="average-input-1"/>
+    <input type="number" id="average-input-2"/>
+    <input type="number" id="average-input-3"/>
+    <p id="average-output"></p>
+    <button  onclick="displayAverage()" id="average-button" type="submit">Submit</button>
+    <h2>6. Average of Three Numbers</h2>
     <h2>Bonus: Vowel Remover</h2>
 
     <li>The user should be able to enter a string into a text input with id='vowel-remover-input'</li>

diff --git a/index.js b/index.js
@@ -0,0 +1,57 @@
+const mirrorString = () => {
+  const input = document.querySelector("#mirror-input");
+  const p = document.getElementById("mirror-output");
+  p.innerText = input.value;
+};
+
+const upperCaseString = () => {
+  const input = document.querySelector("#uppercaser-input");
+  const p = document.getElementById("uppercaser-output");
+  p.innerText = input.value.toUpperCase();
+};
+
+const palindromeDetector = () => {
+  const input = document.querySelector("#palindrome-input");
+  const p = document.getElementById("palindrome-output");
+  p.innerText = input.value;
+};
+
+const checkPalindrome = () => {
+  const input = document.querySelector("#palindrome-input");
+  const p = document.getElementById("palindrome-output");
+  const str = input.value;
+  // let output = "";
+  let revStr = str.split("").reverse("").join("");
+  if (str === revStr) {
+    p.innerText = `It is true that ${input.value} is a palindrome`;
+  } else {
+    p.innerText = `It is false that ${input.value} is a palindrome`;
+  }
+};
+
+const checkEven = () => {
+  const input = document.querySelector("#even-checker-input");
+  const p = document.getElementById("even-checker-output");
+  const num = input.value;
+  if (num % 2 === 0) {
+    p.innerText = `It is true that ${input.value} is even`;
+  } else {
+    p.innerText = `It is false that ${input.value} is even`;
+  }
+};
+
+const doubleNumber = () => {
+  const input = Number(document.querySelector("#doubler-input").value);
+  const p = document.getElementById("doubler-output");
+  p.innerText = `${input} doubled is ${input * 2}`;
+};
+
+const displayAverage = () => {
+  const input1 = Number(document.querySelector("#average-input-1").value);
+  const input2 = Number(document.querySelector("#average-input-2").value);
+  const input3 = Number(document.querySelector("#average-input-3").value);
+  const p = document.getElementById("average-output");
+  const avg = ((input1 + input2 + input3 )/ 3);
+  // debugger;
+  p.innerText = `The average of ${input1}, ${input2}, and ${input3} is ${avg}`;
+};