+
+
+
Combining HTML and JavaScript + DOM Lab
-
-
-
Combining HTML and JavaScript + DOM Lab
-
Complete each of the sections below
-
1. String Mirror
+
+
+
+
Combining HTML and JavaScript + DOM Lab
+
Complete each of the sections below
+
1. String Mirror
-
Make a text input with id='mirror-input' and a button with id='mirror-button'
-
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'
-
-
-
+
+ Make a text input with id='mirror-input' and a button with id='mirror-button'
+
+
+ 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'
+
+
+
+
Waiting for input...
-
-
+
2. String Uppercaser
-
Make a text input with id='uppercaser-input'
-
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'
-
+
+ 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'
+
+
+
+
Waiting for input...
+
3. Palindrome Detector
-
-
The user should be able to enter a string into a text input with id='palindrome-input'
-
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'
-
+
+ The user should be able to enter a string into a text input with id='palindrome-input'
+
+
+ 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'
+
+
+
+
Waiting for input...
+
4. Even Checker
-
-
The user should be able to enter a number into an input with id='even-checker-input'
-
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'
-
+
+ The user should be able to enter a number into an input with id='even-checker-input'
+
+
+ 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'
+
+
+
+
Waiting for input...
+
5. Number Doubler
-
-
The user should be able to enter a number into an input with id='doubler-input'
-
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'
-
+
+ The user should be able to enter a number into an input with id='doubler-input'
+
+
+ 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'
+
+
+
+
Waiting for input...
+
6. Average of Three Numbers
-
-
The user should be able to enter 3 numbers into text inputs with ids 'average-input-1', 'average-input-2', and 'average-input-3'
-
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'
-
+
+ The user should be able to enter 3 numbers into text inputs with ids 'average-input-1', 'average-input-2', and 'average-input-3'
+
+
+ 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'
+
+
+
+
+
+
Waiting for input...
+
Bonus: Vowel Remover
-
-
The user should be able to enter a string into a text input with id='vowel-remover-input'
-
The user should be able to select or deselect a checkbox with id='y-is-vowel-checkbox'
-
They should then be able to click a "submit" button with id='vowel-remover-button' that will display the original string with all vowels removed with id='vowel-remover-output'. If the checkbox is checked, count y as a vowel. Otherwise, count y as a consonant.
+
+ The user should be able to enter a string into a text input with id='vowel-remover-input'
+
+
+ The user should be able to select or deselect a checkbox with id='y-is-vowel-checkbox'
+
+
+ They should then be able to click a "submit" button with id='vowel-remover-button' that will display the original string with all vowels removed with id='vowel-remover-output'. If the checkbox is checked, count y as a vowel. Otherwise, count y as a consonant.
+