-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
53 lines (38 loc) · 3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./index.css">
<title>Combining HTML and JavaScript + DOM Lab</title>
</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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<li>The user should be able to select or deselect a checkbox with id='y-is-vowel-checkbox'</li>
<li>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.</li>
</body>
</html>