forked from JTaylor-Code/html-js-drills
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
152 lines (141 loc) · 5.56 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML JS Drills</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main>
<header>
<h1>HTML/JavaScript Drills</h1>
<p>Welcome to the HTML/JavaScript Drills! Today you will be learning how to manipulate the DOM (Document
Object Model AKA the elements on your html page). This page is split into 4 sections. Read the comments
in the JavaScript to see what needs to be done in each section.</p>
</header>
<div class="container">
<div>
<div class="title">Hello, my name is <span id="name">Name</span></div>
<p>These are my favorite things</p>
<ul id="favthings"></ul>
<div id="codestatus">I don't like to code</div>
</div>
<img src="https://picsum.photos/id/237/200/300" width="200" height="300" alt="Image of myself" id="picture">
<div>
<button type="button" id="show-info-button" class="btn btn-primary">Show Info</button>
</div>
</div>
<div class="container">
<div>
<div class="title">I like to collect information</div>
<form id="information-form">
<div class="form-group">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" value="" class="form-control">
</div>
<div class="form-group">
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" value="" class="form-control">
</div>
<div class="form-group">
<label for="cars">Cars</label>
<select id="cars" name="cars" class="form-control">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="checkbox-label">Do you like icecream?</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="icecream" id="icecreamyes" value="Yes">
<label class="form-check-label" for="icecreamyes">
Yes
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="icecream" id="icecreamno" value="No">
<label class="form-check-label" for="icecreamno">
No
</label>
</div>
<div class="checkbox-label">Checks</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="humancheck">
<label class="form-check-label" for="humancheck">
I am a human
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="codercheck">
<label class="form-check-label" for="codercheck">
I am a coder
</label>
</div>
<button type="submit" class="btn btn-secondary">Submit</button>
</form>
</div>
<div>
<div class="title">And display that info here</div>
<div>First Name: <span id="firstname"></span></div>
<div>Last Name: <span id="lastname"></span></div>
<div>Car: <span id="chosencar"></span></div>
<div>Do I like ice cream? <span id="icecreamstatus"></span></div>
<div>Checks: <span id="checks"></span></div>
</div>
</div>
<div class="container">
<div>
<button type="button" class="btn btn-primary" id="console-log-button">Click me to log something to the console</button>
<button type="button" class="btn btn-primary" id="make-blue-button">Change the text to the right blue</button>
</div>
<div class="output">
<div>Log it!</div>
<div id="colorText">Use JavaScript to give me a class of "blue"</div>
</div>
</div>
<div class="container">
<div>
<div class="title">To Do List App</div>
<form class="form">
<div class="form-group">
<label for="todo" class="form-check-label">What do you need to do today?</label>
<input type="text" class="form-control" id="todo" placeholder="Go grocery shopping">
</div>
<button type="submit" class="btn btn-primary">Add to To Do List</button>
</form>
</div>
<div>
<div class="title"> To Dos</div>
<ul id="todos">
<li>I need to do something!</li>
</ul>
</div>
</div>
<div class="container">
<div>
<div class="title">My Own Section</div>
<div class="title">SetTimeout Vs Set Interval</div>
Here's my second counter: <span id="seconds"></span>
</div>
<div>
Here's my delayed display:<div id="delayedDisplay"></div>
</div>
</div>
<div class="container">
<div id="fullscreen">
<video id="spanish" width="500" height="500" controls>
<source id ='source' src="spanish.mp4" type="video/mp4">
</video>
<div class="display" style ="display:block">
<button id="toggle-fullscreen" >Open in Full Screen</button>
</div>
</div>
</div>
</main>
<script src="script.js"></script>
</body>
</html>