joinpursuit · floweraviles · Feb 11, 2021 · Feb 11, 2021 · 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>
@@ -16,33 +17,55 @@ <h2>1. String Mirror</h2>
 
     <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>
+    <button onclick="getMirror()" id="mirror-button" type="submit">Submit</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="uppercase-input" type="text" placeholder="Enter your text here">
+    <p id="uppercase-output">Waiting for input...</p>
+    <button onclick="getUpperCase()"id="uppercase-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 text here">
+    <p id="palindrome-output">Waiting for input...</p>
+    <button onclick="palindrome()"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="text" placeholder="Enter your text here">
+    <p id="even-checker-output">Waiting for input...</p>
+    <button onclick="evenNums()" 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="text" placeholder="Enter your text here">
+    <p id="doubler-output">Waiting for input...</p>
+    <button onclick="doubleNums()" 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" type="text" placeholder="Enter your number here">
+    <input id="average-input-2" type="text" placeholder="Enter your number here">
+    <input id="average-input-3" type="text" placeholder="Enter your number here">
+    <p id="average-output">Waiting for input...</p>
+    <button onclick="averageNums()" id="average-button" type="submit">Submit</button>
+
     <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,49 @@
+const averageNums = () => {
+  let num1 = Number(document.getElementById("average-input-1").value);
+  let num2 = Number(document.getElementById("average-input-2").value);
+  let num3 = Number(document.getElementById("average-input-3").value);
+  let p = document.getElementById("average-output");
+  let average = (num1 + num2 + num3) / 3;
+  p.innerText = `The average of ${num1}, ${num2}, and ${num3} is ${average}`;
+};
+
+const doubleNums = () => {
+  let enteredNum = Number(document.getElementById("doubler-input").value);
+  let p = document.getElementById("doubler-output");
+  let doubledVal = enteredNum * 2;
+  p.innerText = `${enteredNum} doubled is ${doubledVal}`;
+};
+
+const evenNums = () => {
+  let enteredNum = Number(document.getElementById("even-checker-input").value);
+  let p = document.getElementById("even-checker-output");
+  let evenVal = enteredNum % 2 === 0;
+  p.innerText = `It is ${evenVal} that ${enteredNum} is even`;
+};
+
+const palindrome = () => {
+  let enteredString = document.getElementById("palindrome-input").value;
+  let p = document.getElementById("palindrome-output")
+  let stringVal = isPalindrome(enteredString)
+  p.innerText = `It is ${stringVal} that ${enteredString} is a palindrome`;
+};
+const isPalindrome = (str) => {
+    for (let i = 0; i < str.length; i++) {
+    if (str[i] !== str[str.length - i - 1]) {
+      return false;
+    }
+      return true;
+    }
+}
+
+const getUpperCase = () => {
+  let input = document.getElementById("uppercaser-input").value;
+  let p = document.getElementById("uppercaser-output");
+  p.innerText = input.toUpperCase();
+};
+
+const getMirror = () => {
+    let input = document.getElementById("mirror-input").value;
+    let p = document.getElementById("mirror-output");
+    p.innerText = input
+}