-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
219 lines (194 loc) · 12.2 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
<!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>Virtual's Javascript30</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/octicons.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/octicons/4.4.0/font/octicons.min.css" />
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script>
function updatedAt(date) {
if (date) {
// MST: UTC -7
// return ( moment((new Date(date)) + "-07:00").fromNow() )
return ( moment((new Date(date))).fromNow() )
}
}
</script>
</head>
<body>
<div style="min-height: 100vh" class="d-flex flex-column">
<header class=" p-3 masthead mb-auto">
<div class="inner container">
<div class="row">
<div class="col-12">
<p class="masthead-brand"> <span class="octicon octicon-flame"><span class="sr-only">flame</span></span> Javascript30
<small>30 days of Vanilla JS projects from Wes Bos</small>
</p>
</div>
</div>
</div>
</header>
<main role="main" class="container">
<div class="row">
<div class="col-12">
<div class="card-columns">
<div class="card">
<a href="./01-drumkit/index.html"><img class="card-img-top" src="./01-drumkit/01-drumkit.png" alt="Rock band on stage"></a>
<div class="card-body">
<h2 class="card-title"><a href="./01-drumkit/index.html">Drum Kit (01)</a></h2>
<p class="card-text">An interactive soundboard</p>
</div>
<div class="card-footer">
<small class="text-muted"><span class="octicon octicon-pencil"><span class="sr-only">Edit</span></span> Last updated <span class="updatedTime">02/05/2018</span></script></small>
</div>
</div>
<div class="card">
<a href="./02-clock/index.html"><img class="card-img-top" src="./02-clock/thumbnail.png" alt="A clock"></a>
<div class="card-body">
<h2 class="card-title"><a href="./02-clock/index.html">Clock (02)</a></h2>
<p class="card-text">A clock using CSS transform and JavaScript</p>
</div>
<div class="card-footer">
<small class="text-muted"><span class="octicon octicon-pencil"><span class="sr-only">Edit</span></span> Last updated <span class="updatedTime">03/10/2018</span></script></small>
</div>
</div>
<div class="card">
<a href="./03-cssvars/index.html"><img class="card-img-top" src="./03-cssvars/thumbnail.png" alt="An application that changes styles using input selectors"></a>
<div class="card-body">
<h2 class="card-title"><a href="./03-cssvars/index.html">Updating CSS Variables (03)</a></h2>
<p class="card-text">Using input sliders, update the CSS variables set on the root element.</p>
</div>
<div class="card-footer">
<small class="text-muted"><span class="octicon octicon-pencil"><span class="sr-only">Edit</span></span> Last updated <span class="updatedTime">03/09/2018</span></script></small>
</div>
</div>
<div class="card">
<a href="./04-arrays/index.html"><img class="card-img-top" src="./04-arrays/thumbnail.png" alt="Playtime with arrays and prototype functions"></a>
<div class="card-body">
<h2 class="card-title"><a href="./04-arrays/index.html">Array Cardio (04)</a></h2>
<p class="card-text">Processing data with arrays and prototype functions.</p>
</div>
<div class="card-footer">
<small class="text-muted"><span class="octicon octicon-pencil"><span class="sr-only">Edit</span></span> Last updated <span class="updatedTime">03/11/2018</span></script></small>
</div>
</div>
<div class="card">
<a href="./05-flex/index.html"><img class="card-img-top" src="./05-flex/thumbnail.png" alt="A gallery of outdoor images featuring a fox with the words 'give all you can'"></a>
<div class="card-body">
<h2 class="card-title"><a href="./05-flex/index.html">Flex Panel Image Gallery (05)</a></h2>
<p class="card-text">Using CSS transforms and tansitions, make an interactive feature that allows you to highlight one image and message</p>
</div>
<div class="card-footer">
<small class="text-muted"><span class="octicon octicon-pencil"><span class="sr-only">Edit</span></span> Last updated <span class="updatedTime">05/14/2018</span></script></small>
</div>
</div>
<div class="card">
<a href="./06-typeahead/index.html"><img class="card-img-top" src="./06-typeahead/thumbnail.png" alt="A selectbox showing highlighted cities for the query 'Montana'"></a>
<div class="card-body">
<h2 class="card-title"><a href="./06-typeahead/index.html">Ajax Type Ahead (06)</a></h2>
<p class="card-text">Dynamically match the query with a list of cities and states provided via a JSON file and highlight matches.</p>
</div>
<div class="card-footer">
<small class="text-muted"><span class="octicon octicon-pencil"><span class="sr-only">Edit</span></span> Last updated <span class="updatedTime">11/26/2019</span></script></small>
</div>
</div>
<div class="card">
<a href="./07-arrays/index.html"><img class="card-img-top" src="./07-arrays/thumbnail.png" alt="code for array manipulation"></a>
<div class="card-body">
<h2 class="card-title"><a href="./07-arrays/index.html">Array Cardio Day 2 (07)</a></h2>
<p class="card-text">More manipulation on arrays using some, every, find and findIndex functions.</p>
</div>
<div class="card-footer">
<small class="text-muted"><span class="octicon octicon-pencil"><span class="sr-only">Edit</span></span> Last updated <span class="updatedTime">12/02/2019</span></script></small>
</div>
</div>
<div class="card">
<a href="./08-canvas/index.html"><img class="card-img-top" src="./08-canvas/thumbnail.png" alt="a rainbow colored drawn cat"></a>
<div class="card-body">
<h2 class="card-title"><a href="./08-canvas/index.html">HTML Canvas (08)</a></h2>
<p class="card-text">Creating and manipulating the stroke tool for an HTML Canvas element.</p>
</div>
<div class="card-footer">
<small class="text-muted"><span class="octicon octicon-pencil"><span class="sr-only">Edit</span></span> Last updated <span class="updatedTime">03/21/2020</span></script></small>
</div>
</div>
<div class="card">
<a href="./09-dev-tools/index.html"><img class="card-img-top" src="./09-dev-tools/thumbnail.png" alt="error consoles shown in browser log"></a>
<div class="card-body">
<h2 class="card-title"><a href="./09-dev-tools/index.html">Dev Tools (09)</a></h2>
<p class="card-text">Different methods of using console logging for debugging.</p>
</div>
<div class="card-footer">
<small class="text-muted"><span class="octicon octicon-pencil"><span class="sr-only">Edit</span></span> Last updated <span class="updatedTime">03/29/2020 08:23</span></script></small>
</div>
</div>
<div class="card">
<a href="./10-checkbox-range/index.html"><img class="card-img-top" src="./10-checkbox-range/thumbnail.png" alt="checkboxes with strikethrough lines"></a>
<div class="card-body">
<h2 class="card-title"><a href="./10-checkbox-range/index.html">Checkbox Range (10)</a></h2>
<p class="card-text">Hold shift to check multiple checkboxes.</p>
</div>
<div class="card-footer">
<small class="text-muted"><span class="octicon octicon-pencil"><span class="sr-only">Edit</span></span> Last updated <span class="updatedTime">04/22/2020 17:38</span></script></small>
</div>
</div>
<div class="card">
<a href="./11-video-player"><img class="card-img-top" src="./11-video-player/thumbnail.png" alt="a video on a blue background"></a>
<div class="card-body">
<h2 class="card-title"><a href="./11-video-player">Video Player (11)</a></h2>
<p class="card-text">Create custom controls for an HTML5 video.</p>
</div>
<div class="card-footer">
<small class="text-muted"><span class="octicon octicon-pencil"><span class="sr-only">Edit</span></span> Last updated <span class="updatedTime">07/16/2021 10:42</span></script></small>
</div>
</div>
<div class="card">
<a href="./12-konami"><img class="card-img-top" src="./12-konami/thumbnail.png" alt="sparkly cats and unicorns when typing mew"></a>
<div class="card-body">
<h2 class="card-title"><a href="./12-konami">Key Sequence Detection (12)</a></h2>
<p class="card-text">Amazing suprises await when you type 'mew!'</p>
</div>
<div class="card-footer">
<small class="text-muted"><span class="octicon octicon-pencil"><span class="sr-only">Edit</span></span> Last updated <span class="updatedTime">07/18/2021 12:32</span></script></small>
</div>
</div>
<div class="card">
<a href="./13-copy-ref"><img class="card-img-top" src="./13-copy-ref/thumbnail.png" alt="sparkly cats and unicorns when typing mew"></a>
<div class="card-body">
<h2 class="card-title"><a href="./13-copy-ref">JS Reference VS Copy (13)</a></h2>
<p class="card-text">How to copy arrays and objects so they don't screw up the original.</p>
</div>
<div class="card-footer">
<small class="text-muted"><span class="octicon octicon-pencil"><span class="sr-only">Edit</span></span> Last updated <span class="updatedTime">09/04/2021 12:06</span></script></small>
</div>
</div>
</div>
</div>
</main>
<footer class=" p-3 mastfoot mt-auto">
<div class="inner container">
<div class="row">
<div class="col-12">
<p><a href="https://github.com/virtual"><span class="octicon octicon-mark-github"><span class="sr-only">Github user</span></span> Virtual</a></p>
</div>
</div>
</div>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
// loop through time data and get relative update
var list = document.getElementsByClassName("updatedTime");
for (var i = 0; i < list.length; i++) {
list[i].innerHTML = updatedAt(list[i].innerText)
}
</script>
</body>
</html>