joinpursuit · jasleenv · Mar 6, 2021
diff --git a/answers.js b/answers.js
@@ -0,0 +1,55 @@
+function displayMirror () {
+    let input = document.getElementById("mirror-input").value
+    let mirrorOutput = document.getElementById("mirror-output")
+    mirrorOutput.textContent = input
+  }
+
+  function upperCase(){
+    let input = document.getElementById("uppercaser-input").value.toUpperCase()
+    let output = document.getElementById("uppercaser-output")
+    output.textContent = input
+  }
+
+ function palindrome(){
+     let text = document.getElementById("palindrome-input").value
+     let output= document.getElementById("palindrome-output")
+     let newString =""
+     for(let i=text.length-1;i >=0; i--){
+         newString = newString + text[i]
+     }
+     if(text === newString){
+         output.textContent =`It is true that ${text} is a palindrome`
+    } else {
+        output.textContent = `It is false that ${text} is a palindrome`
+    }
+ }
+
+ function evenChecker(){
+     let text= document.getElementById('even-checker-input').value
+     let output = document.getElementById('even-checker-output')
+     if(text % 2 === 0){
+         output.textContent = `It is true that ${text} is even`
+     } else {
+         output.textContent =`It is false that ${text} is even`
+     }
+ }
+
+ function doubler(){
+     let text= document.getElementById('doubler-input').value
+     let output= document.getElementById('doubler-output')
+     let doubledVal = text * 2
+     output.textContent = `${text} doubled is ${doubledVal}`
+
+ }
+
+ function avg(){
+     let text1 = Number(document.getElementById("average-input-1").value)
+     let text2 = Number(document.getElementById("average-input-2").value)
+     let text3 = Number(document.getElementById("average-input-3").value)
+     let average = (text1 +text2 + text3)/3
+     let output = document.getElementById("average-output")
+     output.textContent = `The average of ${text1}, ${text2}, and ${text3} is ${average}`
+
+ }
+
+
diff --git a/index.html b/index.html
@@ -3,46 +3,75 @@
   <head>
     <link rel="stylesheet" href="./index.css">
     <title>Combining HTML and JavaScript + DOM Lab</title>
+    <script src="answers.js" defer></script>
   </head>
   <body>
     <h1 id = "top_heading">Combining HTML and JavaScript + DOM Lab</h1>
     <p id = "welcome_para">Complete each of the sections below</p>
-    <h2>1. String Mirror</h2>
 
+    <h2>1. String Mirror</h2>
     <ul>
       <li>Make a text input with id='mirror-input' and a button with id='mirror-button'</li>
       <li>They should then be able to click a "submit" button that will display the string the user entered in an element with id='mirror-output'</li>
     </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>
+    <button onclick="displayMirror()"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>
+    <p id="uppercaser-output" > Entered </p>
+  <input id="uppercaser-input" type="text">
+  <button onclick="upperCase()" 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 type="text" id="palindrome-input" placeholder= "Enter String Here:" >
+<button type="submit" id="palindrome-button" onclick="palindrome()">Submit</button>
+<p id="palindrome-output"><</p>
 
     <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" placeholder="Enter a number here:" >
+    <button type="submit" id="even-checker-button" onclick="evenChecker()">Submit</button>
+    <p id="even-checker-output"></p>
+
+
     <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" placeholder="Enter a number:">
+    <button type="submit" id="doubler-button" onclick="doubler()">Submit</button>
+    <p id="doubler-output"></p>
+
+
+
     <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">
+    <button type="submit" id ="average-button" onclick="avg()">Submit</button> 
+    <p id= "average-output"></p>
+
+
+
     <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>