-
Notifications
You must be signed in to change notification settings - Fork 20
/
index.html
201 lines (200 loc) · 8.71 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="author" content="Amelie Yeh">
<title>JS30 by Amelie Yeh</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<header>
<h1>JavaScript 30</h1>
<div>This is a JavaScript practice with <a href="https://javascript30.com/">JavaScript30</a> by <a href="https://github.com/wesbos">Wes Bos</a> without any frameworks, no compilers, no boilerplate, no libraries, and with ES6 syntax.</div>
<div class="note">demot site by <a href="https://github.com/amelieyeh">Amelie Yeh</a>...view on <a href="https://github.com/amelieyeh/JS30">github</a></div>
</header>
<div class="items">
<div class="item">
<a href="01-JSDrumKit/index.html" rel="nofollow" target="_blank">
<img src="01-JSDrumKit/images/01_00.png" alt="JS Drum Kit">
<h3>01. JS Drum Kit</h3>
</a>
</div>
<div class="item">
<a href="02-JS+CSSClock/index.html" rel="nofollow" target="_blank">
<img src="02-JS+CSSClock/images/02_00.png" alt="JS + CSS Clock">
<h3>02. JS + CSS Clock</h3>
</a>
</div>
<div class="item">
<a href="03-CSS Variables and JS/index.html" rel="nofollow" target="_blank">
<img src="03-CSS Variables and JS/images/03_00.png" alt="CSS Variables and JS">
<h3>03. CSS Variables and JS</h3>
</a>
</div>
<div class="item">
<a href="04-Array cardio day 1/index.html" rel="nofollow" target="_blank">
<img src="04-Array cardio day 1/images/04_00.png" alt="Array cardio day 1">
<h3>04. Array cardio day 1</h3>
</a>
</div>
<div class="item">
<a href="05-Flex Panels Image Gallery/index.html" rel="nofollow" target="_blank">
<img src="05-Flex Panels Image Gallery/images/05_00.png" alt="Flex Panels Image Gallery">
<h3>05. Flex Panels Image Gallery</h3>
</a>
</div>
<div class="item">
<a href="06-Ajax Type Ahead/index.html" rel="nofollow" target="_blank">
<img src="06-Ajax Type Ahead/images/06_00.png" alt="Ajax Type Ahead">
<h3>06. Ajax Type Ahead</h3>
</a>
</div>
<div class="item">
<a href="07-Array cardio day 2/index.html" rel="nofollow" target="_blank">
<img src="07-Array cardio day 2/images/07_00.png" alt="Array cardio day 2">
<h3>07-Array cardio day 2</h3>
</a>
</div>
<div class="item">
<a href="08-Fun with HTML5 Canvas/index.html" rel="nofollow" target="_blank">
<img src="08-Fun with HTML5 Canvas/images/08_00.png" alt="Fun with HTML5 Canvas">
<h3>08. Fun with HTML5 Canvas</h3>
</a>
</div>
<div class="item">
<a href="09-Dev Tools Domination/index.html" rel="nofollow" target="_blank">
<img src="09-Dev Tools Domination/images/09_00.png" alt="Dev Tools Domination">
<h3>09. Dev Tools Domination</h3>
</a>
</div>
<div class="item">
<a href="10-Hold Shift and Check Checkboxes/index.html" rel="nofollow" target="_blank">
<img src="10-Hold Shift and Check Checkboxes/images/10_00.png" alt="Hold Shift and Check Checkboxes">
<h3>10. Hold Shift and Check Checkboxes</h3>
</a>
</div>
<div class="item">
<a href="11-Custom Video Player/index.html" rel="nofollow" target="_blank">
<img src="11-Custom Video Player/images/11_00.png" alt="Custom Video Player">
<h3>11. Custom Video Player</h3>
</a>
</div>
<div class="item">
<a href="12-Key Sequence Detection/index.html" rel="nofollow" target="_blank">
<img src="12-Key Sequence Detection/images/12_00.png" alt="Key Sequence Detection">
<h3>12. Key Sequence Detection</h3>
</a>
</div>
<div class="item">
<a href="13-Slide in on Scroll/index.html" rel="nofollow" target="_blank">
<img src="13-Slide in on Scroll/images/13_00.png" alt="Slide in on Scroll">
<h3>13. Slide in on Scroll</h3>
</a>
</div>
<div class="item">
<a href="14-JavaScript References VS Copying/index.html" rel="nofollow" target="_blank">
<img src="14-JavaScript References VS Copying/images/14_00.png" alt="JavaScript References VS Copying">
<h3>14. JavaScript References VS Copying</h3>
</a>
</div>
<div class="item">
<a href="15-LocalStorage and Event Delegation/index.html" rel="nofollow" target="_blank">
<img src="15-LocalStorage and Event Delegation/images/15_00.png" alt="LocalStorage and Event Delegation">
<h3>15. LocalStorage and Event Delegation</h3>
</a>
</div>
<div class="item">
<a href="16-Mouse Move Shadow/index.html" rel="nofollow" target="_blank">
<img src="16-Mouse Move Shadow/images/16_00.png" alt="Mouse Move Shadow">
<h3>16. Mouse Move Shadow</h3>
</a>
</div>
<div class="item">
<a href="17-Sort Without Articles/index.html" rel="nofollow" target="_blank">
<img src="17-Sort Without Articles/images/17_00.png" alt="Sort Without Articles">
<h3>17. Sort Without Articles</h3>
</a>
</div>
<div class="item">
<a href="18-Adding Up Times with Reduce/index.html" rel="nofollow target="_blank">
<img src="18-Adding Up Times with Reduce/images/18_00.png" alt="Adding Up Times with Reduce">
<h3>18. Adding Up Times with Reduce</h3>
</a>
</div>
<div class="item">
<a href="19-Webcam Fun/index.html" rel="nofollow" target="_blank">
<img src="19-Webcam Fun/images/19_00.png" alt="Webcam Fun">
<h3>19. Webcam Fun</h3>
</a>
</div>
<div class="item">
<a href="20-Speech Detection/index.html" rel="nofollow" target="_blank">
<img src="20-Speech Detection/images/20_00.png" alt="Speech Detection">
<h3>20. Speech Detection</h3>
</a>
</div>
<div class="item">
<a href="21-Geolocation/index.html" rel="nofollow" target="_blank">
<img src="21-Geolocation/images/21_00.png" alt="21-Geolocation">
<h3>21. Geolocation</h3>
</a>
</div>
<div class="item">
<a href="22-Follow Along Link Highlighter/index.html" rel="nofollow" target="_blank">
<img src="22-Follow Along Link Highlighter/images/22_00.png" alt="Follow Along Link Highlighter">
<h3>22. Follow Along Link Highlighter</h3>
</a>
</div>
<div class="item">
<a href="23-Speech Synthesis/index.html" rel="nofollow" target="_blank">
<img src="23-Speech Synthesis/images/23_00.png" alt="Speech Synthesis">
<h3>23. Speech Synthesis</h3>
</a>
</div>
<div class="item">
<a href="24-Sticky Nav/index.html" rel="nofollow" target="_blank">
<img src="24-Sticky Nav/images/24_00.png" alt="Sticky Nav">
<h3>24. Sticky Nav</h3>
</a>
</div>
<div class="item">
<a href="25-Event Capture, Propagation, Bubbling and Once/index.html" rel="nofollow" target="_blank">
<img src="25-Event Capture, Propagation, Bubbling and Once/images/25_00.png" alt="Event Capture, Propagation, Bubbling and Once">
<h3>25. Event Capture, Propagation, Bubbling and Once</h3>
</a>
</div>
<div class="item">
<a href="26-Stripe Follow Along Nav/index.html" rel="nofollow" target="_blank" >
<img src="26-Stripe Follow Along Nav/images/26_00.png" alt="Stripe Follow Along Nav">
<h3>26. Stripe Follow Along Nav</h3>
</a>
</div>
<div class="item">
<a href="27-Click and Drag/index.html" rel="nofollow" target="_blank">
<img src="27-Click and Drag/images/27_00.png" alt="Click and Drag">
<h3>27. Click and Drag</h3>
</a>
</div>
<div class="item">
<a href="28-Video Speed Controller/index.html" rel="nofollow" target="_blank">
<img src="28-Video Speed Controller/images/28_00.png" alt="Video Speed Controller">
<h3>28. Video Speed Controller</h3>
</a>
</div>
<div class="item">
<a href="29-Countdown Timer/index.html" rel="nofollow" target="_blank">
<img src="29-Countdown Timer/images/29_00.png" alt="Countdown Timer">
<h3>29. Countdown Timer</h3>
</a>
</div>
<div class="item">
<a href="30-Whack A Mole/index.html" rel="nofollow" target="_blank">
<img src="30-Whack A Mole/images/30_00.png" alt="Whack A Mole">
<h3>30. Whack A Mole</h3>
</a>
</div>
<div class="item hidden"></div>
<div class="item hidden"></div>
</div>
</body>
</html>