joinpursuit · bedonjonathan · Feb 18, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
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 onclick="mirrorString()" 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="uppercaser-input" type="text" placeholder="Lets uppercase IT">
+    <p id="uppercaser-output"> OUTPUT.... </p>
+    <button onclick="upperCaseIt()" id="uppercaser-button" type="submit"> Upper Case</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="Palindrome Detector">
+    <p id="palindrome-output"> True or False?</p>
+    <button onclick="palindromeDetector()" id="palindrome-button" type="submit"> Lets check</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 Digit">
+    <p id="even-checker-output"> output</p>
+    <button onclick="evenChecker()" id="even-checker-button" type="submit"> Even Check</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="Number Doubler">
+    <p id="doubler-output"> Doubled Digit</p>
+    <button onclick="doubler()" id="doubler-button" type="submit"> Doubler</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="number" placeholder="Number #1">
+    <input id="average-input-2" type="number" placeholder="Number #2">
+    <input id="average-input-3" type="number" placeholder="Number #3">
+
+    <p id="average-output"> Average</p>
+    <button onclick="average()" id="average-button" type="submit"> Average</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,57 @@
+const mirrorString = () => {
+  const text = document.getElementById("mirror-output");
+  const input = document.getElementById("mirror-input");
+  text.innerText = input.value;
+};
+
+const upperCaseIt = () => {
+  const output = document.getElementById("uppercaser-output");
+  const input = document.getElementById("uppercaser-input");
+  output.innerText = input.value.toUpperCase();
+};
+
+const palindromeDetector = () => {
+  const output = document.getElementById("palindrome-output");
+  const input = document.getElementById("palindrome-input").value;
+  console.log(input)
+  //debugger
+  for (let i = 0; i < input.length/2; i++) {
+    let frontLetter = input[i];
+    let endLetter = input[input.length - i - 1];
+    if (frontLetter !== endLetter) {
+      output.innerText = `It is false that ${input} is a palindrome`;
+      return;
+    }
+  }
+  output.innerText = `It is true that ${input} is a palindrome`;
+  return;
+};
+
+const evenChecker = () => {
+  const output = document.getElementById("even-checker-output");
+  const input = document.getElementById("even-checker-input");
+  if (input.value % 2 === 0) {
+    output.innerText = `It is true that ${input.value} is even`;
+    return;
+  }
+  output.innerText = `It is false that ${input.value} is even`;
+  return;
+};
+
+const doubler =() =>{
+    const output = document.getElementById("doubler-output")
+    const input = document.getElementById("doubler-input")
+    output.innerText = `${input.value} doubled is ${input.value * 2}`
+}
+
+const average =() =>{
+    const output = document.getElementById("average-output")
+    const inputOne = Number(document.getElementById("average-input-1").value)
+    const inputTwo = Number(document.getElementById("average-input-2").value)
+    const inputThree = Number(document.getElementById("average-input-3").value)
+    let result =  (inputOne + inputTwo + inputThree)/3 //Number(inputOne.value + inputTwo.value +inputThree.value)/3
+    //console.log(result)
+    //debugger
+    output.innerText =`The average of ${inputOne}, ${inputTwo}, and ${inputThree} is ${result}`
+
+}