-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
287 lines (286 loc) · 9.14 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
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Vanilla JS Academy</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<header>
<h1>VanillaJS Projects</h1>
</header>
<main>
<h2>Projects List</h2>
<dl>
<dt>
<a href="./pages/01-toggle-password-visibility/">Day One</a>: Toggle
Password Visibility
</dt>
<dd>
Write a script that lets users toggle the visibility of a password
field
</dd>
<dt>
<a href="./pages/02-toggle-multiple-password-fields/">Day Three</a>:
Toggle Passwords
</dt>
<dd>
Write a script that lets users toggle two password fields at one time
</dd>
<dt>
<a href="./pages/03-toggle-passwords-in-multiple-forms/">Day Five</a>:
Toggle Multiple Form Passwords
</dt>
<dd>
Write a script that lets users toggle password fields on multiple
forms
</dd>
<dt>
<a href="./pages/04-character-count/">Day Seven</a>: Display Live
Character Counts
</dt>
<dd>
Write a script that updates the UI to display live character counts
</dd>
<dt>
<a href="./pages/05-word-count/">Day Nine</a>: Display Live Word
Counts
</dt>
<dd>
Write a script that updates the UI to display live word counts
</dd>
<dt>
<a href="./pages/06-accessible-word-count/">Day Eleven</a>: Announce
Character & Word Counts
</dt>
<dd>
Write a script that announces the current count to screen reader users
as it changes
</dd>
<dt>
<a href="./pages/07-random-ron/">Day Thirteen</a>: Display a Random
Ron Swanson Quote
</dt>
<dd>
Write a script that fetches and then displays a random Ron Swanson
quote (from the show Parks and Recreation) using the Ron Swanson
Quotes API
</dd>
<dt>
<a href="./pages/08-random-ron-without-duplicates/">Day Fifteen</a>:
Display a Random Ron Swanson Quote Without Duplicates
</dt>
<dd>
Write a script that fetches and then displays a random Ron Swanson
quote using the Ron Swanson Quotes API. The script should prevent the
same quote from showing up twice
</dd>
<dt>
<a href="./pages/09-nyt-top-stories/">Day Seventeen</a>: What To Read
Today
</dt>
<dd>
Write a script that uses the New York Times API to display their top
stories of the day on a webpage
</dd>
<dt>
<a href="./pages/10-nyt-multiple-categories/">Day Nineteen</a>: What
To Read Today | Multiple Sections
</dt>
<dd>
Write a script that uses the New York Times API to get articles from
three to five categories and then display the first five top stories
from each category on a webpage
</dd>
<dt>
<a href="./pages/11-sanitizing-data/">Day Twenty One</a>: Sanitizing
the NYT API Data
</dt>
<dd>
Write a script that before rendering API data into the DOM as markup,
sanitize it to protect yourself from any malicious code that might get
sent back
</dd>
<dt>
<a href="./pages/12-shuffling-arrays/">Day Twenty Three</a>: Monster
Shuffle
</dt>
<dd>
Write a script that takes an array of monsters, mix them up, and
display them in the DOM
</dd>
<dt>
<a href="./pages/13-find-the-monsters/">Day Twenty Five</a>: Find The
Monsters | Reveal
</dt>
<dd>
The monsters should all be hidden behind doors. Clicking on one will
reveal the monster. If you find the sock before you’ve found all of
the monsters, you lose. People who navigate the web with a keyboard or
use a screen reader should still be able to play this game
</dd>
<dt>
<a href="./pages/14-find-the-monsters-track-wins/">Day Twenty Seven</a
>: Find The Monsters | Track Wins
</dt>
<dd>
Write a script that tracks whether the user has won or lost our Find
the Monsters game and provide a way for them to play again
</dd>
<dt>
<a href="./pages/15-table-of-contents/">Day Twenty Nine</a>: Table of
Contents
</dt>
<dd>
Write a script that dynamically creates a table of contents based on
the headings in a document
</dd>
<dt>
<a href="./pages/16-table-of-contents-missing-id/">Day Thirty One</a>:
Table of Contents | Missing IDs
</dt>
<dd>
Write a script that dynamically creates a table of contents based on
the headings in a document. The script should also support headings
that don’t have IDs on them
</dd>
<dt>
<a href="./pages/18-weather-app/">Day Thirty Five</a>: Weather App
</dt>
<dd>
Write a script that gets a user’s location and displays their current
weather information
</dd>
<dt>
<a href="./pages/19-weather-app-plugin/">Day Thirty Seven</a>: Weather
App Plugin
</dt>
<dd>
Write a script that modifies our weather app script to convert it into
a plugin
</dd>
<dt>
<a href="./pages/20-helper-library/">Day Thirty Nine</a>: Helper
Library
</dt>
<dd>
Create a helper library with public methods you can use to: convert a
NodeList to an array, get the first matching element in the DOM, get
all matching elements in the DOM as an array, add a class to all
elements in an array and remove a class from all elements in an array
</dd>
<dt>
<a href="./pages/21-dom-manipulation-library/">Day Forty One</a>: DOM
Manipulation Library
</dt>
<dd>
Create a DOM manipulation library with public methods you can use to:
get an array of items from the DOM, get the first and last matching
items from the DOM, add and remove a class to all matching elements.
It should work like jQuery, where you pass in a selector, and can then
call helper functions on your matching elements
</dd>
<dt>
<a href="./pages/22-dom-manipulation-library-with-chaining-methods/"
>Day Forty Three</a
>: DOM manipulation library with chaining methods
</dt>
<dd>
Modify our DOM manipulation library to allow us to chain methods
together. The methods to add and remove classes should be chainable
</dd>
<dt>
<a href="./pages/23-debugging-broken-code/">Day Forty Five</a>:
Debugging Broken Code
</dt>
<dd>
Look for five bugs, fix them and get the game working again
</dd>
<dt><a href="./pages/24-autosave/">Day Forty Seven</a>: Autosave</dt>
<dd>
Write a script that automatically saves form field data as a user
types
</dd>
<dd>
Look for five bugs, fix them and get the game working again
</dd>
<dt>
<a href="./pages/25-autosave-single-entry/">Day Forty Nine</a>:
Autosave | Single Entry
</dt>
<dd>
Modify our form saver script to store all of the fields as a single
entry in localStorage
</dd>
<dt>
<a href="./pages/26-autosave-other-field-types/">Day Fifty One</a>:
Autosave | Other Field Types
</dt>
<dd>
Modify our form saver script to handle field types beyond text inputs
</dd>
<dt><a href="./pages/27-api-cache/">Day Fifty Three</a>: API Cache</dt>
<dd>
Write a script that creates a magazine for pirates using an API, and
use localStorage to cache the API data for improved performance and
network resilience
</dd>
<dt>
<a href="./pages/28-api-cache-fallback/">Day Fifty Five</a>: API Cache
| Fallback
</dt>
<dd>
Modify our API cache script to fallback to the cache if the API call
fails—even if data has expired
</dd>
<dt>
<a href="./pages/29-countdown-timer/">Day Fifty Seven</a>: Countdown
Timer
</dt>
<dd>
Build a state-based timer that counts down from 60 seconds to zero
</dd>
<dt>
<a href="./pages/30-timer-formatted/">Day Fifty Nine</a>: Timer |
Formatted
</dt>
<dd>
Format the time in our timer before rendering it into the UI
</dd>
<dt>
<a href="./pages/31-timer-start-and-pause-buttons/">Day Sixty One</a>:
Timer | Start and Pause Buttons
</dt>
<dd>
Add two always-present buttons below the countdown in the timer. One
button will say Start when the timer is stopped, and Pause when it’s
running. Clicking it starts or stops the timer without resetting the
time. The second, Restart, will reset the time to its original value
and start the timer over again
</dd>
<dt>
<a href="./pages/32-timer-reactive-data/">Day Sixty Three</a>: Timer |
Reactive Data
</dt>
<dd>
Modify our timer app to use reactive data
</dd>
<dt><a href="./pages/33-todo-list/">Day Sixty Five</a>: Todo List</dt>
<dd>
Build a simple todo list app
</dd>
</dd>
<dt><a href="./pages/34-todo-list-save-and-delete/">Day Sixty Seven</a>: Todo List | Save and Delete</dt>
<dd>
Add the ability to save and delete todo items
</dd>
<dt><a href="./pages/35-todo-list-multiple-lists/">Day Sixty Nine</a>: Todo List | Multiple Lists</dt>
<dd>
Add support multiple lists
</dd>
</dl>
</main>
</body>
</html>