-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
96 lines (87 loc) · 5.41 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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My JavaScript30</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/png" href="./resources/favicon.ico">
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Josefin+Slab" rel="stylesheet">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="left">
<div class="description">
<h1>JavaScript 30</h1>
<p>
An amazing serie of mini projects with VanillaJS by <a href="https://github.com/wesbos" target="blank">Wes Bos</a>. <br>
This amazing course can be found <a href="https://javascript30.com/" target="blank">here</a>, wesbos repo with original files and solutions are <a href="https://github.com/wesbos/JavaScript30" target="blank">here</a>,
and last but not least, the images used in my solutions are from <a href="http://deathtothestockphoto.com/" target="blank">here</a>. <br>
I added some notes to each of this mini-projects that can be found on my <a href="https://github.com/yhabib/JavaScript30" target="blank">repo</a>.
</p>
<ul>Legend:
<li>🤓 -- Theoricall, outputs in the console</li>
<li>🎓 -- Super useful</li>
<li>🔝 -- Best ones</li>
<li>⭐ -- My favorites</li>
<li>❌ -- Incompatible</li>
</ul>
<!--<img src="resources/JS30.png" alt="Course image">-->
</div>
</div>
<div class="right">
<div class="links">
<a class="link" target="blank" href="./01 - JavaScript Drum Kit/index.html">JavaScript Drum Kit</a>
<a class="link" target="blank" href="./02 - JS + CSS Clock/index.html">JS + CSS Clock ⭐</a>
<a class="link" target="blank" href="./03 - CSS Variables/index.html">CSS Variables 🎓</a>
<a class="link" target="blank" href="./04 - Array Cardio Day 1/index.html">Array Cardio Day1 🤓</a>
<a class="link" target="blank" href="./05 - Flex Panel Gallery/index.html">Flex Panel Gallery ⭐🎓</a>
<a class="link" target="blank" href="./06 - Type Ahead/index.html">Type Ahead</a>
<a class="link" target="blank" href="./07 - Array Cardio Day 2/index.html">Array Cardio Day 2 🤓</a>
<a class="link" target="blank" href="./08 - Fun with HTML5 Canvas/index.html">Fun with HTML5 Canvas</a>
<a class="link" target="blank" href="./09 - Dev Tools Domination/index.html">Dev Tools Domination 🤓</a>
<a class="link" target="blank" href="./10 - Hold Shift and Check Checkboxes/index.html">Hold Shift an Check Checkboxes</a>
<a class="link" target="blank" href="./11 - Custom Video Player/index.html">Custom Video Player ⭐</a>
<a class="link" target="blank" href="./12 - Key Sequence Detection/index.html">Key Sequence Detection</a>
<a class="link" target="blank" href="./13 - Slide in on Scroll/index.html">Slide in on Scroll</a>
<a class="link" target="blank" href="./14 - JavaScript References VS Copying/index.html">JavaScript References VS Copying 🤓</a>
<a class="link" target="blank" href="./15 - LocalStorage/index.html">LocalStorage</a>
<a class="link" target="blank" href="./16 - Mouse Move Shadow/index.html">Mouse Move Shadow</a>
<a class="link" target="blank" href="./17 - Sort Without Articles/index.html">Sort Without Articles 🎓</a>
<a class="link" target="blank" href="./18 - Adding Up Times with Reduce/index.html">Adding Up Times with Reduce 🤓</a>
<a class="link" target="blank" href="./19 - Webcam Fun/index.html">Webcam Fun 🔝</a>
<a class="link" target="blank" href="./20 - Speech Detection/index.html">Speech Detection 🔝</a>
<a class="link" target="blank" href="./21 - Geolocation/index.html">Geolocation ❌</a>
<a class="link" target="blank" href="./22 - Follow Along Link Highlighter/index.html">Follow Along Link Highlighter 🎓</a>
<a class="link" target="blank" href="./23 - Speech Synthesis/index.html">Speech Systenshis 🔝</a>
<a class="link" target="blank" href="./24 - Sticky Nav/index.html">Sticky Nav ⭐🎓</a>
<a class="link" target="blank" href="./25 - Event Capture, Propagation, Bubbling and Once/index.html">Event Capture, Propagation, Bubbling and Once 🤓</a>
<a class="link" target="blank" href="./26 - Stripe Follow Along Nav/index.html">Stripe Follow Along Nav ⭐</a>
<a class="link" target="blank" href="./27 - Click and Drag/index.html">Click and Drag 🎓</a>
<a class="link" target="blank" href="./28 - Video Speed Controller/index.html">Video Speed Controller</a>
<a class="link" target="blank" href="./29 - Countdown Timer/index.html">Countdown Timer ⭐</a>
<a class="link" target="blank" href="./30 - Whack A Mole/index.html">Whack A Mole</a>
</div>
</div>
</body>
<script>
var links = document.querySelectorAll('.link');
links.forEach(function(item, i) {
i++;
var link = `${i > 9 ? i : '0' + i} - ${item.textContent}`;
item.textContent = link;
});
</script>
</html>
<!--
var old_element = document.getElementById("btn");
var new_element = old_element.cloneNode(true);-->