joinpursuit · MendozaHolger · Mar 7, 2021
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@
 * `npm test` to open the cypress testing window
 
 > *Note*: Remember to `git add`, `git commit` and `git push` regularly
-
+ 
 ## Submission Guidelines
   * When finished, commit and push your work.
   * Make a pull request on github.`

diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
   <head>
     <link rel="stylesheet" href="./index.css">
     <title>Combining HTML and JavaScript + DOM Lab</title>
+    <script src="index.js"></script>
   </head>
   <body>
     <h1 id = "top_heading">Combining HTML and JavaScript + DOM Lab</h1>
@@ -16,33 +17,56 @@ <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 id="mirror-button" type="submit" onclick="userMirror()">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 type="text" id="uppercaser-input">
+    <p id="uppercaser-output">Answer Here!</p>
+    <button id="uppercaser-button" onclick="upperCaseButton()">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 type="text" id="palindrome-input">
+    <p id="palindrome-output">Answer Here!</p>
+     <button id="palindrome-button" onclick="ifPalindrome()">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 type="text" id="even-checker-input">
+    <p id="even-checker-output">Answer Here!</p>
+    <button id="even-checker-button" onclick="evenChecker()">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 type="text" id="doubler-input">
+    <p id="doubler-output">Answer Here!</p>
+    <button id="doubler-button" onclick="numberDoubler()">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 type="text" id="average-input-1">
+    <input type="text" id="average-input-2">
+    <input type="text" id="average-input-3">
+    <p id="average-output">Answer Here!</p>
+    <button id="average-button" onclick="averageCalc()">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,62 @@
+const userMirror = () => {
+    const userText = document.getElementById('mirror-input');
+    const output = userText.value;
+    const userOutput = document.getElementById('mirror-output');
+
+    userOutput.textContent = output;
+}
+
+const upperCaseButton = () => {
+    const input = document.getElementById('uppercaser-input');
+    const output = input.value;
+    const display = document.getElementById('uppercaser-output');
+
+    display.textContent = output.toUpperCase()
+}
+
+const ifPalindrome = () => {
+    const input = document.getElementById('palindrome-input').value;
+    let display = document.getElementById('palindrome-output');
+
+    let reverse = '';
+    for (let i = input.length -1; i >= 0; i--){
+        reverse += input[i];
+    }   
+    if (reverse === input){
+        display.textContent = `It is ${true} that ${input} is a palindrome!`
+    } else {
+        display.textContent = `It is ${false} that ${input} is a palindrome!`
+    }
+}
+
+const evenChecker = () => {
+    const input = document.getElementById('even-checker-input').value;
+    let output = document.getElementById('even-checker-output');
+    let string = '';
+
+    for (let i = input.length -1; i >= 0; i--){
+        string + input[i];
+    }
+    if (input.length % 2 === 0){
+        output.textContent = `It is ${true} that ${input} is even`;
+    } else {
+        output.textContent = `It is ${false} that ${input} is even`
+    }
+}
+
+const numberDoubler = () => {
+    const input = document.getElementById('doubler-input').value;
+    const output = document.getElementById('doubler-output');       
+    const byTwo = (input * 2);
+
+    output.textContent = `${input} doubled is ${byTwo}`
+}
+
+function averageCalc() {
+    let number1 = Number(document.getElementById('average-input-1').value)
+    let number2 = Number(document.getElementById('average-input-2').value)
+    let number3 = Number(document.getElementById('average-input-3').value)
+    let output = document.getElementById('average-output')
+    let average = Math.floor((number1 + number2 + number3) / 3)
+    output.textContent = `The average of ${number1}, ${number2}, and ${number3} is ${average}`
+}