lab complete

cypress/integration/mirror_spec.js

@@ -1,99 +1,99 @@
-describe('Mirror-spec', () => {
-  describe('1. String Mirror', () => {
-    it('mirrors the entered string', () => {
-      cy.get('#mirror-input')
+describe("Mirror-spec", () => {
+  describe("1. String Mirror", () => {
+    it("mirrors the entered string", () => {
+      cy.get("#mirror-input")
         .clear()
-        .type('Hello world!')
-        .get('#mirror-button')
+        .type("Hello world!")
+        .get("#mirror-button")
         .click()
-        .get('#mirror-output')
-        .contains('Hello world!');
+        .get("#mirror-output")
+        .contains("Hello world!");
     });
   });
 
-  describe('2. String Uppercaser', () => {
-    it('uppercases the entered string', () => {
-      cy.get('#uppercaser-input')
+  describe("2. String Uppercaser", () => {
+    it("uppercases the entered string", () => {
+      cy.get("#uppercaser-input")
         .clear()
-        .type('Hello world!')
-        .get('#uppercaser-button')
+        .type("Hello world!")
+        .get("#uppercaser-button")
         .click()
-        .get('#uppercaser-output')
-        .contains('HELLO WORLD!');
+        .get("#uppercaser-output")
+        .contains("HELLO WORLD!");
     });
   });
 
-  describe('3. Palindrome Detector', () => {
-    it('displays true when the string is a palindrome', () => {
-      cy.get('#palindrome-input')
+  describe("3. Palindrome Detector", () => {
+    it("displays true when the string is a palindrome", () => {
+      cy.get("#palindrome-input")
         .clear()
-        .type('tacocat')
-        .get('#palindrome-button')
+        .type("tacocat")
+        .get("#palindrome-button")
         .click()
-        .get('#palindrome-output')
-        .contains('It is true that tacocat is a palindrome');
+        .get("#palindrome-output")
+        .contains("It is true that tacocat is a palindrome");
     });
 
-    it('displays false when the string is not a palindrome', () => {
-      cy.get('#palindrome-input')
+    it("displays false when the string is not a palindrome", () => {
+      cy.get("#palindrome-input")
         .clear()
-        .type('nachodog')
-        .get('#palindrome-button')
+        .type("nachodog")
+        .get("#palindrome-button")
         .click()
-        .get('#palindrome-output')
-        .contains('It is false that nachodog is a palindrome');
+        .get("#palindrome-output")
+        .contains("It is false that nachodog is a palindrome");
     });
   });
 
-  describe('4. Even Checker', () => {
-    it('displays true when the number is even', () => {
-      cy.get('#even-checker-input')
+  describe("4. Even Checker", () => {
+    it("displays true when the number is even", () => {
+      cy.get("#even-checker-input")
         .clear()
-        .type('42')
-        .get('#even-checker-button')
+        .type("42")
+        .get("#even-checker-button")
         .click()
-        .get('#even-checker-output')
-        .contains('It is true that 42 is even');
+        .get("#even-checker-output")
+        .contains("It is true that 42 is even");
     });
 
-    it('displays false when the number is even', () => {
-      cy.get('#even-checker-input')
+    it("displays false when the number is even", () => {
+      cy.get("#even-checker-input")
         .clear()
-        .type('117')
-        .get('#even-checker-button')
+        .type("117")
+        .get("#even-checker-button")
         .click()
-        .get('#even-checker-output')
-        .contains('It is false that 117 is even');
+        .get("#even-checker-output")
+        .contains("It is false that 117 is even");
     });
   });
 
-  describe('5. Number Doubler', () => {
-    it('displays the number doubled', () => {
-      cy.get('#doubler-input')
+  describe("5. Number Doubler", () => {
+    it("displays the number doubled", () => {
+      cy.get("#doubler-input")
         .clear()
-        .type('12')
-        .get('#doubler-button')
+        .type("12")
+        .get("#doubler-button")
         .click()
-        .get('#doubler-output')
-        .contains('12 doubled is 24');
+        .get("#doubler-output")
+        .contains("12 doubled is 24");
     });
   });
 
-  describe('6. Average of Three Numbers', () => {
-    it('displays the average', () => {
-      cy.get('#average-input-1')
+  describe("6. Average of Three Numbers", () => {
+    it("displays the average", () => {
+      cy.get("#average-input-1")
         .clear()
-        .type('10')
-        .get('#average-input-2')
+        .type("10")
+        .get("#average-input-2")
         .clear()
-        .type('35')
-        .get('#average-input-3')
+        .type("35")
+        .get("#average-input-3")
         .clear()
-        .type('45')
-        .get('#average-button')
+        .type("45")
+        .get("#average-button")
         .click()
-        .get('#average-output')
-        .contains('The average of 10, 35, and 45 is 30');
+        .get("#average-output")
+        .contains("The average of 10, 35, and 45 is 30");
     });
   });
 });

index.css

@@ -1,5 +1,5 @@
 form {
-    border: 1px solid black;
-    padding: 20px;
-    background-color: beige;
-}
+  border: 1px solid black;
+  padding: 20px;
+  background-color: beige;
+}

index.html

@@ -3,7 +3,11 @@
   <head>
     <link rel="stylesheet" href="./index.css">
     <title>Combining HTML and JavaScript + DOM Lab</title>
+   <script src="./index.js" defer></script>
+
+   </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>
@@ -12,36 +16,60 @@ <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>    
+  </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>
+
 
     <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="isEven()" 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 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="avgOfNumbers()" id="average-button" type=Submit> </button>
+
 
     <h2>Bonus: Vowel Remover</h2>
 
@@ -51,3 +79,5 @@ <h2>Bonus: Vowel Remover</h2>
 
   </body>
 </html>
+
+

index.js

@@ -0,0 +1,49 @@
+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 checkPalindrome = () => {
+  const input = document.querySelector("#palindrome-input");
+  const p = document.getElementById("palindrome-output");
+  const str = input.value;
+  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 isEven = () => {
+  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 avgOfNumbers = () => {
+  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;
+  p.innerText = `The average of ${input1}, ${input2}, and ${input3} is ${avg}`;
+};