forked from wesbos/JavaScript30
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
229 lines (226 loc) · 13.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
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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<meta content="public" http-equiv="cache-control">
<meta content="0" http-equiv="expires">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content='on' http-equiv='cleartype'>
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no, minimum-scale=1" name="viewport">
<title>VannTile's JavaScript30</title>
<link rel="stylesheet" href="assets/style.css">
</head>
<body>
<div class="container header">
<h1>VanTile's JavaScript30</h1>
<h2>This is a page showcasing my demo implementations of a JavaScript tutorial series by Wes Bos.</h2>
<p>This is a plain vanilla JavaScript exercise, without any libraries, transpilers or frameworks. You can find the original JavaScript30 <a href="https://javascript30.com/">here</a> and my public code on <a href="https://github.com/vanntile/JavaScript30">Github</a>.</p>
</div>
<div class="container">
<div class="container-block container-before">
<a href="https://vanntile.github.io/JavaScript30/01%20-%20JavaScript%20Drum%20Kit/">
<img src="assets/img/01 - JavaScript Drum Kit.png" alt="JavaScript Drum Kit Demo">
<span class="description">#1 JavaScript Drum Kit</span>
</a>
</div>
<div class="container-block container-before">
<a href="https://vanntile.github.io/JavaScript30/02%20-%20JS%20and%20CSS%20Clock/">
<img src="assets/img/02 - JS and CSS Clock.png" alt="JS and CSS Clock Demo">
<span class="description">#2 JS and CSS Clock</span>
</a>
</div>
<div class="container-block container-before">
<a href="https://vanntile.github.io/JavaScript30/03%20-%20CSS%20Variables/">
<img src="assets/img/03 - CSS Variables.png" alt="CSS Variables Demo">
<span class="description">#3 CSS Variables</span>
</a>
</div>
<div class="container-block container-before">
<a href="https://vanntile.github.io/JavaScript30/04%20-%20Array%20Cardio%20Day%201/">
<img src="assets/img/04 - Array Cardio Day 1.png" alt="Array Cardio Day 1 Demo">
<span class="description">#4 Array Cardio Day 1</span>
</a>
</div>
<div class="container-block container-before">
<a href="https://vanntile.github.io/JavaScript30/05%20-%20Flex%20Panel%20Gallery/">
<img src="assets/img/05 - Flex Panel Gallery.png" alt="Flex Panel Gallery Demo">
<span class="description">#5 Flex Panel Gallery</span>
</a>
</div>
<div class="container-block">
<a href="https://vanntile.github.io/JavaScript30/06%20-%20Type%20Ahead">
<img src="assets/img/06 - Type Ahead.png" alt="Type Ahead Demo">
<span class="description">#6 Type Ahead</span>
</a>
</div>
<div class="container-block">
<a href="https://vanntile.github.io/JavaScript30/07%20-%20Array%20Cardio%20Day%202/">
<img src="assets/img/07 - Array Cardio Day 2.png" alt="Array Cardio Day 2 Demo">
<span class="description">#7 Array Cardio Day 2</span>
</a>
</div>
<div class="container-block">
<a href="https://vanntile.github.io/JavaScript30/08%20-%20Fun%20with%20HTML5%20Canvas">
<img src="assets/img/08 - Fun with HTML5 Canvas.png" alt="Fun with HTML5 Canvas Demo">
<span class="description">#8 Fun with HTML5 Canvas</span>
</a>
</div>
<div class="container-block">
<a href="https://vanntile.github.io/JavaScript30/09%20-%20Dev%20Tools%20Domination/">
<img src="assets/img/09 - Dev Tools Domination.png" alt="Dev Tools Domination Demo">
<span class="description">#9 Dev Tools Domination</span>
</a>
</div>
<div class="container-block">
<a href="https://vanntile.github.io/JavaScript30/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes">
<img src="assets/img/10 - Hold Shift and Check Checkboxes.png" alt="Hold Shift and Check Checkboxes Demo">
<span class="description">#10 Hold Shift and Check Checkboxes</span>
</a>
</div>
<div class="container-block">
<a href="https://vanntile.github.io/JavaScript30/11%20-%20Custom%20Video%20Player/">
<img src="assets/img/11 - Custom Video Player.png" alt="Custom Video Player Demo">
<span class="description">#11 Custom Video Player</span>
</a>
</div>
<div class="container-block">
<a href="https://vanntile.github.io/JavaScript30/12%20-%20Key%20Sequence%20Detection">
<img src="assets/img/12 - Key Sequence Detection.png" alt="Key Sequence Detection Demo">
<span class="description">#12 Key Sequence Detection</span>
</a>
</div>
<div class="container-block">
<a href="https://vanntile.github.io/JavaScript30/13%20-%20Slide%20in%20on%20Scroll">
<img src="assets/img/13 - Slide in on Scroll.png" alt="Slide in on Scroll Demo">
<span class="description">#13 Slide in on Scroll</span>
</a>
</div>
<div class="container-block">
<a href="https://vanntile.github.io/JavaScript30/14%20-%20JavaScript%20References%20VS%20Copying">
<img src="assets/img/14 - JavaScript References VS Copying.png" alt="JavaScript References VS Copying Demo">
<span class="description">#14 JavaScript References VS Copying</span>
</a>
</div>
<div class="container-block">
<a href="https://vanntile.github.io/JavaScript30/15%20-%20LocalStorage">
<img src="assets/img/15 - LocalStorage.png" alt="LocalStorage Demo">
<span class="description">#15 LocalStorage</span>
</a>
</div>
<div class="container-block">
<a href="https://vanntile.github.io/JavaScript30/16%20-%20Mouse%20Move%20Shadow">
<img src="assets/img/16 - Mouse Move Shadow.png" alt="Mouse Move Shadow Demo">
<span class="description">#16 Mouse Move Shadow</span>
</a>
</div>
<div class="container-block">
<a href="https://vanntile.github.io/JavaScript30/17%20-%20Sort%20Without%20Articles">
<img src="assets/img/17 - Sort Without Articles.png" alt="Sort Without Articles Demo">
<span class="description">#17 Sort Without Articles</span>
</a>
</div>
<div class="container-block">
<a href="https://vanntile.github.io/JavaScript30/18%20-%20Adding%20Up%20Times%20with%20Reduce">
<img src="assets/img/18 - Adding Up Times with Reduce.png" alt="Adding Up Times with Reduce Demo">
<span class="description">#18 Adding Up Times with Reduce</span>
</a>
</div>
<div class="container-block">
<a href="https://vanntile.github.io/JavaScript30/19%20-%20Webcam%20Fun">
<img src="assets/img/19 - Webcam Fun.png" alt="Webcam Fun Demo">
<span class="description">#19 Webcam Fun</span>
</a>
</div>
<div class="container-block container-special">
<div class="panel">
<div class="panel-icons">
<a href="https://www.linkedin.com/in/valentin-ionita/" target="_blank">
<svg class="icon" viewbox="0 0 24 24">
<path d="M1.75 0C.784 0 0 .762 0 1.704v20.404c0 .943.784 1.704 1.75 1.704h20.166c.965 0 1.75-.761 1.75-1.704V1.704c0-.942-.785-1.704-1.75-1.704zm3.66 3.998c1.222 0 1.972.8 1.995 1.855 0 1.033-.775 1.857-2.022 1.857h-.02c-1.2 0-1.976-.824-1.976-1.857 0-1.055.8-1.855 2.022-1.855zM15.95 8.93c2.352 0 4.11 1.537 4.11 4.84v6.165h-3.573V14.18c0-1.446-.516-2.433-1.81-2.433-.987 0-1.578.67-1.837 1.312-.094.23-.112.548-.112.87v6.005h-3.58s.047-9.744 0-10.753h3.58V10.7c.475-.733 1.327-1.77 3.222-1.77zm-3.222 1.77c-.007.013-.017.027-.026.04h.026zM3.6 9.182h3.573v10.753H3.6z" />
</svg>
</a>
<a href="https://github.com/vanntile" target="_blank">
<svg class="icon" viewbox="0 0 24 24">
<path d="M11.998905.10651931C5.4328587.10651931.10921502 5.4301635.10921502 11.997669c0 5.253567 3.40675248 9.710011 8.13182368 11.283088.5949227.108766.8117226-.258408.8117226-.573754 0-.281767-.010221-1.029981-.016058-2.022006-3.3074763.718287-4.0053236-1.594246-4.0053236-1.594246-.5409049-1.373067-1.3205093-1.738779-1.3205093-1.738779-1.0796199-.737997.081759-.723397.081759-.723397 1.193495.08467 1.8212657 1.225614 1.8212657 1.225614 1.0606413 1.816885 2.7833612 1.29204 3.4607703.988374.1080349-.768655.4146206-1.29277.7547848-1.589867-2.6402876-.300016-5.4163497-1.320509-5.4163497-5.876959 0-1.297879.4635286-2.3592504 1.2241536-3.1906808-.1226342-.3007467-.530685-1.5095708.1160647-3.1468853 0 0 .9985939-.3197254 3.2702486 1.2190432.9482262-.2635176 1.9657996-.3956411 2.9768026-.4000208 1.009543.00436 2.027116.1365032 2.976802.4000208 2.270195-1.5387686 3.266599-1.2190432 3.266599-1.2190432.64894 1.6373145.240888 2.8461386.118255 3.1468853.762084.8314304 1.222693 1.8928018 1.222693 3.1906808 0 4.56813-2.780442 5.573292-5.429488 5.867469.427029.367173.807342 1.09276.807342 2.202309 0 1.589136-.01461 2.871687-.01461 3.261488 0 .318266.213881.688359.817563.572294 4.721422-1.575997 8.125255-6.029521 8.125255-11.281628 0-6.5675055-5.324374-11.89114969-11.89188-11.89114969"
s />
</svg>
</a>
<a href="http://stackoverflow.com/users/4679160/vanntile-ianito" target="_blank">
<svg class="icon" viewbox="0 0 24 24">
<path d="M24 15v9h-24v-9h3v6h18v-6zM4.5 16.5h15v3h-15zM4.855 13.253l0.649-2.929 14.645 3.246-0.649 2.929zM6.554 7.232l1.268-2.719 13.595 6.339-1.268 2.719zM23.243 8.472l-1.826 2.38-11.9-9.131 1.32-1.721h1.365z"></path>
</svg>
</a>
<a href="https://medium.com/@vanntile" target="_blank">
<svg class="icon" viewbox="0 0 24 24">
<path d="M0 0v24h24V0zm4.0185096 5.415384h4.6745192l3.6129812 7.9238 3.176442-7.9238h4.45601v.270915l-1.28702 1.234133c-.110966.08458-.166023.223464-.143028.361059v9.067789c-.02299.137595.03206.276472.143028.361056l1.256972 1.234136v.270912h-6.322837v-.270912l1.302163-1.264184c.127961-.127925.127885-.165648.127885-.361296V8.989664l-3.620433 9.195672h-.489182L6.6906251 8.989664v6.162979c-.035145.259109.050983.520077.2334133.707453l1.6937501 2.054328v.270912h-4.802404v-.270912l1.6935099-2.054328c.1811024-.187685.2621219-.450384.2182691-.707453v-7.1262c.020032-.19792-.0553366-.393475-.2031251-.526683L4.0185096 5.686299z" /></svg>
</svg>
</a>
</div>
<div class="panel-text">
Check my other projects around the interwebs!
</div>
</div>
</div>
<div class="container-block">
<a href="https://vanntile.github.io/JavaScript30/21%20-%20Geolocation">
<img src="assets/img/21 - Geolocation.png" alt="Geolocation Demo">
<span class="description">#21 Geolocation</span>
</a>
</div>
<div class="container-block">
<a href="https://vanntile.github.io/JavaScript30/22%20-%20Follow%20Along%20Link%20Highlighter">
<img src="assets/img/22 - Follow Along Link Highlighter.png" alt="Follow Along Link Highlighter Demo">
<span class="description">#22 Follow Along Link Highlighter</span>
</a>
</div>
<div class="container-block">
<a href="https://vanntile.github.io/JavaScript30/23%20-%20Speech%20Synthesis">
<img src="assets/img/23 - Speech Synthesis.png" alt="Speech Synthesis Demo">
<span class="description">#23 Speech Synthesis</span>
</a>
</div>
<div class="container-block">
<a href="https://vanntile.github.io/JavaScript30/24%20-%20Sticky%20Nav">
<img src="assets/img/24 - Sticky Nav.png" alt="Sticky Nav Demo">
<span class="description">#24 Sticky Nav</span>
</a>
</div>
<div class="container-block">
<a href="https://vanntile.github.io/JavaScript30/25%20-%20Event%20Capture,%20Propagation,%20Bubbling%20and%20Once">
<img src="assets/img/25 - Event Capture, Propagation, Bubbling and Once.png" alt="Stripe Follow Along Nav Demo">
<span class="description">#25 Event Capture && Propagation</span>
</a>
</div>
<div class="container-block">
<a href="https://vanntile.github.io/JavaScript30/26%20-%20Stripe%20Follow%20Along%20Nav">
<img src="assets/img/26 - Stripe Follow Along Nav.png" alt="Stripe Follow Along Nav Demo">
<span class="description">#26 Stripe Follow Along Nav</span>
</a>
</div>
<div class="container-block">
<a href="https://vanntile.github.io/JavaScript30/27%20-%20Click%20and%20Drag">
<img src="assets/img/27 - Click and Drag.png" alt="Click and Drag Demo">
<span class="description">#27 Click and Drag</span>
</a>
</div>
<div class="container-block">
<a href="https://vanntile.github.io/JavaScript30/28%20-%20Video%20Speed%20Controller">
<img src="assets/img/28 - Video Speed Controller.png" alt="Video Speed Controller Demo">
<span class="description">#28 Video Speed Controller</span>
</a>
</div>
<div class="container-block">
<a href="https://vanntile.github.io/JavaScript30/29%20-%20Countdown%20Timer">
<img src="assets/img/29 - Countdown Timer.png" alt="Countdown Timer Demo">
<span class="description">#29 Countdown Timer</span>
</a>
</div>
<div class="container-block">
<a href="https://vanntile.github.io/JavaScript30/30%20-%20Whack%20A%20Mole">
<img src="assets/img/30 - Whack A Mole.png" alt="Whack A Mole Demo">
<span class="description">#30 Whack A Mole</span>
</a>
</div>
</div>
</body>
</html>