diff --git a/.gitignore b/.gitignore
index 6e1a3738b8..164ae8655c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
node_modules/
*.log
haters/
+.idea/
diff --git a/01 - JavaScript Drum Kit/background.jpg b/01 - JavaScript Drum Kit/background.jpg
new file mode 100644
index 0000000000..590036d636
Binary files /dev/null and b/01 - JavaScript Drum Kit/background.jpg differ
diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html
index 1a16d0997c..ae9aacaf07 100644
--- a/01 - JavaScript Drum Kit/index-FINISHED.html
+++ b/01 - JavaScript Drum Kit/index-FINISHED.html
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<title>JS Drum Kit</title>
<link rel="stylesheet" href="style.css">
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body>
diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html
index 4070d32767..8a2f8e8417 100644
--- a/01 - JavaScript Drum Kit/index-START.html
+++ b/01 - JavaScript Drum Kit/index-START.html
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<title>JS Drum Kit</title>
<link rel="stylesheet" href="style.css">
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
diff --git a/01 - JavaScript Drum Kit/sounds/tink.wav b/01 - JavaScript Drum Kit/sounds/tink.wav
old mode 100755
new mode 100644
index f907ea2c0e..1f3c7b9191
Binary files a/01 - JavaScript Drum Kit/sounds/tink.wav and b/01 - JavaScript Drum Kit/sounds/tink.wav differ
diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css
index 3e0a320b37..bfdba84312 100644
--- a/01 - JavaScript Drum Kit/style.css
+++ b/01 - JavaScript Drum Kit/style.css
@@ -1,8 +1,9 @@
html {
font-size: 10px;
- background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
+ background: url('./background.jpg') bottom center;
background-size: cover;
}
+
body,html {
margin: 0;
padding: 0;
@@ -10,41 +11,41 @@ body,html {
}
.keys {
- display:flex;
- flex:1;
- min-height:100vh;
+ display: flex;
+ flex: 1;
+ min-height: 100vh;
align-items: center;
justify-content: center;
}
.key {
- border:4px solid black;
- border-radius:5px;
- margin:1rem;
+ border: .4rem solid black;
+ border-radius: .5rem;
+ margin: 1rem;
font-size: 1.5rem;
- padding:1rem .5rem;
- transition:all .07s;
- width:100px;
+ padding: 1rem .5rem;
+ transition: all .07s ease;
+ width: 10rem;
text-align: center;
- color:white;
- background:rgba(0,0,0,0.4);
- text-shadow:0 0 5px black;
+ color: white;
+ background: rgba(0,0,0,0.4);
+ text-shadow: 0 0 .5rem black;
}
.playing {
- transform:scale(1.1);
- border-color:#ffc600;
- box-shadow: 0 0 10px #ffc600;
+ transform: scale(1.1);
+ border-color: #ffc600;
+ box-shadow: 0 0 1rem #ffc600;
}
kbd {
display: block;
- font-size: 40px;
+ font-size: 4rem;
}
.sound {
font-size: 1.2rem;
text-transform: uppercase;
- letter-spacing: 1px;
- color:#ffc600;
+ letter-spacing: .1rem;
+ color: #ffc600;
}
diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS and CSS Clock/index-FINISHED.html
similarity index 75%
rename from 02 - JS + CSS Clock/index-FINISHED.html
rename to 02 - JS and CSS Clock/index-FINISHED.html
index db653a5340..87b91480ca 100644
--- a/02 - JS + CSS Clock/index-FINISHED.html
+++ b/02 - JS and CSS Clock/index-FINISHED.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>JS + CSS Clock</title>
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body>
@@ -18,17 +19,18 @@
<style>
html {
- background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
- background-size:cover;
- font-family:'helvetica neue';
+ background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5);
+ background-size: cover;
+ font-family: 'helvetica neue';
text-align: center;
font-size: 10px;
}
body {
+ margin: 0;
font-size: 2rem;
- display:flex;
- flex:1;
+ display: flex;
+ flex: 1;
min-height: 100vh;
align-items: center;
}
@@ -36,11 +38,11 @@
.clock {
width: 30rem;
height: 30rem;
- border:20px solid white;
- border-radius:50%;
- margin:50px auto;
+ border: 20px solid white;
+ border-radius: 50%;
+ margin: 50px auto;
position: relative;
- padding:2rem;
+ padding: 2rem;
box-shadow:
0 0 0 4px rgba(0,0,0,0.1),
inset 0 0 0 3px #EFEFEF,
@@ -56,11 +58,11 @@
}
.hand {
- width:50%;
- height:6px;
- background:black;
+ width: 50%;
+ height: 6px;
+ background: black;
position: absolute;
- top:50%;
+ top: 50%;
transform-origin: 100%;
transform: rotate(90deg);
transition: all 0.05s;
@@ -81,11 +83,11 @@
secondHand.style.transform = `rotate(${secondsDegrees}deg)`;
const mins = now.getMinutes();
- const minsDegrees = ((mins / 60) * 360) + 90;
+ const minsDegrees = ((mins / 60) * 360) + ((seconds/60)*6) + 90;
minsHand.style.transform = `rotate(${minsDegrees}deg)`;
const hour = now.getHours();
- const hourDegrees = ((hour / 12) * 360) + 90;
+ const hourDegrees = ((hour / 12) * 360) + ((mins/60)*30) + 90;
hourHand.style.transform = `rotate(${hourDegrees}deg)`;
}
diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html
similarity index 69%
rename from 02 - JS + CSS Clock/index-START.html
rename to 02 - JS and CSS Clock/index-START.html
index 2712384201..55ab1a5331 100644
--- a/02 - JS + CSS Clock/index-START.html
+++ b/02 - JS and CSS Clock/index-START.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>JS + CSS Clock</title>
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
@@ -18,17 +19,18 @@
<style>
html {
- background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
- background-size:cover;
- font-family:'helvetica neue';
+ background: #018DED url(https://unsplash.it/1500/1000?image=881&blur=5);
+ background-size: cover;
+ font-family: 'helvetica neue';
text-align: center;
font-size: 10px;
}
body {
+ margin: 0;
font-size: 2rem;
- display:flex;
- flex:1;
+ display: flex;
+ flex: 1;
min-height: 100vh;
align-items: center;
}
@@ -36,11 +38,11 @@
.clock {
width: 30rem;
height: 30rem;
- border:20px solid white;
- border-radius:50%;
- margin:50px auto;
+ border: 20px solid white;
+ border-radius: 50%;
+ margin: 50px auto;
position: relative;
- padding:2rem;
+ padding: 2rem;
box-shadow:
0 0 0 4px rgba(0,0,0,0.1),
inset 0 0 0 3px #EFEFEF,
@@ -56,11 +58,11 @@
}
.hand {
- width:50%;
- height:6px;
- background:black;
+ width: 50%;
+ height: 6px;
+ background: black;
position: absolute;
- top:50%;
+ top: 50%;
}
</style>
diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/index-FINISHED.html
index c3217fc003..b52b9f61af 100644
--- a/03 - CSS Variables/index-FINISHED.html
+++ b/03 - CSS Variables/index-FINISHED.html
@@ -3,19 +3,20 @@
<head>
<meta charset="UTF-8">
<title>Scoped CSS Variables and JS</title>
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body>
<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
<div class="controls">
<label for="spacing">Spacing:</label>
- <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
+ <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
<label for="blur">Blur:</label>
- <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
+ <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
<label for="base">Base Color</label>
- <input type="color" name="base" value="#ffc600">
+ <input id="base" type="color" name="base" value="#ffc600">
</div>
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
@@ -43,9 +44,6 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
body {
text-align: center;
- }
-
- body {
background: #193549;
color: white;
font-family: 'helvetica neue', sans-serif;
@@ -58,7 +56,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
}
input {
- width:100px;
+ width: 100px;
}
</style>
diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html
index 7171607a8b..d5fcc3a2ae 100644
--- a/03 - CSS Variables/index-START.html
+++ b/03 - CSS Variables/index-START.html
@@ -3,19 +3,20 @@
<head>
<meta charset="UTF-8">
<title>Scoped CSS Variables and JS</title>
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
<div class="controls">
<label for="spacing">Spacing:</label>
- <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
+ <input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
<label for="blur">Blur:</label>
- <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
+ <input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
<label for="base">Base Color</label>
- <input type="color" name="base" value="#ffc600">
+ <input id="base" type="color" name="base" value="#ffc600">
</div>
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
@@ -28,9 +29,6 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
body {
text-align: center;
- }
-
- body {
background: #193549;
color: white;
font-family: 'helvetica neue', sans-serif;
@@ -43,7 +41,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
}
input {
- width:100px;
+ width: 100px;
}
</style>
diff --git a/04 - Array Cardio Day 1/index-FINISHED.html b/04 - Array Cardio Day 1/index-FINISHED.html
index e61b94c006..10b655820a 100644
--- a/04 - Array Cardio Day 1/index-FINISHED.html
+++ b/04 - Array Cardio Day 1/index-FINISHED.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Array Cardio ๐ช</title>
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body>
<p><em>Psst: have a look at the JavaScript Console</em> ๐</p>
@@ -27,7 +28,13 @@
{ first: 'Hanna', last: 'Hammarstrรถm', year: 1829, passed: 1909 }
];
- const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];
+ const people = [
+ 'Bernhard, Sandra', 'Bethea, Erin', 'Becker, Carl', 'Bentsen, Lloyd', 'Beckett, Samuel', 'Blake, William', 'Berger, Ric', 'Beddoes, Mick', 'Beethoven, Ludwig',
+ 'Belloc, Hilaire', 'Begin, Menachem', 'Bellow, Saul', 'Benchley, Robert', 'Blair, Robert', 'Benenson, Peter', 'Benjamin, Walter', 'Berlin, Irving',
+ 'Benn, Tony', 'Benson, Leana', 'Bent, Silas', 'Berle, Milton', 'Berry, Halle', 'Biko, Steve', 'Beck, Glenn', 'Bergman, Ingmar', 'Black, Elk', 'Berio, Luciano',
+ 'Berne, Eric', 'Berra, Yogi', 'Berry, Wendell', 'Bevan, Aneurin', 'Ben-Gurion, David', 'Bevel, Ken', 'Biden, Joseph', 'Bennington, Chester', 'Bierce, Ambrose',
+ 'Billings, Josh', 'Birrell, Augustine', 'Blair, Tony', 'Beecher, Henry', 'Biondo, Frank'
+ ];
// Array.prototype.filter()
// 1. Filter the list of inventors for those who were born in the 1500's
@@ -81,8 +88,8 @@
// 7. sort Exercise
// Sort the people alphabetically by last name
const alpha = people.sort((lastOne, nextOne) => {
- const [aFirst, aLast] = lastOne.split(', ');
- const [bFirst, bLast] = nextOne.split(', ');
+ const [aLast, aFirst] = lastOne.split(', ');
+ const [bLast, bFirst] = nextOne.split(', ');
return aLast > bLast ? 1 : -1;
});
console.log(alpha);
diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html
index 4162bce339..0dcfd00f40 100644
--- a/04 - Array Cardio Day 1/index-START.html
+++ b/04 - Array Cardio Day 1/index-START.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Array Cardio ๐ช</title>
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
<p><em>Psst: have a look at the JavaScript Console</em> ๐</p>
@@ -27,21 +28,25 @@
{ first: 'Hanna', last: 'Hammarstrรถm', year: 1829, passed: 1909 }
];
- const flavours = ['Chocolate Chip', 'Kulfi', 'Caramel Praline', 'Chocolate', 'Burnt Caramel', 'Pistachio', 'Rose', 'Sweet Coconut', 'Lemon Cookie', 'Toffeeness', 'Toasted Almond', 'Black Raspberry Crunch', 'Chocolate Brownies', 'Pistachio Almond', 'Strawberry', 'Lavender Honey', 'Lychee', 'Peach', 'Black Walnut', 'Birthday Cake', 'Mexican Chocolate', 'Mocha Almond Fudge', 'Raspberry'];
-
- const people = ['Beck, Glenn', 'Becker, Carl', 'Beckett, Samuel', 'Beddoes, Mick', 'Beecher, Henry', 'Beethoven, Ludwig', 'Begin, Menachem', 'Belloc, Hilaire', 'Bellow, Saul', 'Benchley, Robert', 'Benenson, Peter', 'Ben-Gurion, David', 'Benjamin, Walter', 'Benn, Tony', 'Bennington, Chester', 'Benson, Leana', 'Bent, Silas', 'Bentsen, Lloyd', 'Berger, Ric', 'Bergman, Ingmar', 'Berio, Luciano', 'Berle, Milton', 'Berlin, Irving', 'Berne, Eric', 'Bernhard, Sandra', 'Berra, Yogi', 'Berry, Halle', 'Berry, Wendell', 'Bethea, Erin', 'Bevan, Aneurin', 'Bevel, Ken', 'Biden, Joseph', 'Bierce, Ambrose', 'Biko, Steve', 'Billings, Josh', 'Biondo, Frank', 'Birrell, Augustine', 'Black Elk', 'Blair, Robert', 'Blair, Tony', 'Blake, William'];
-
+ const people = [
+ 'Bernhard, Sandra', 'Bethea, Erin', 'Becker, Carl', 'Bentsen, Lloyd', 'Beckett, Samuel', 'Blake, William', 'Berger, Ric', 'Beddoes, Mick', 'Beethoven, Ludwig',
+ 'Belloc, Hilaire', 'Begin, Menachem', 'Bellow, Saul', 'Benchley, Robert', 'Blair, Robert', 'Benenson, Peter', 'Benjamin, Walter', 'Berlin, Irving',
+ 'Benn, Tony', 'Benson, Leana', 'Bent, Silas', 'Berle, Milton', 'Berry, Halle', 'Biko, Steve', 'Beck, Glenn', 'Bergman, Ingmar', 'Black, Elk', 'Berio, Luciano',
+ 'Berne, Eric', 'Berra, Yogi', 'Berry, Wendell', 'Bevan, Aneurin', 'Ben-Gurion, David', 'Bevel, Ken', 'Biden, Joseph', 'Bennington, Chester', 'Bierce, Ambrose',
+ 'Billings, Josh', 'Birrell, Augustine', 'Blair, Tony', 'Beecher, Henry', 'Biondo, Frank'
+ ];
+
// Array.prototype.filter()
// 1. Filter the list of inventors for those who were born in the 1500's
// Array.prototype.map()
- // 2. Give us an array of the inventors' first and last names
+ // 2. Give us an array of the inventors first and last names
// Array.prototype.sort()
// 3. Sort the inventors by birthdate, oldest to youngest
// Array.prototype.reduce()
- // 4. How many years did all the inventors live?
+ // 4. How many years did all the inventors live all together?
// 5. Sort the inventors by years lived
diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/index-FINISHED.html
index 243f8a221d..85c33c1ee2 100644
--- a/05 - Flex Panel Gallery/index-FINISHED.html
+++ b/05 - Flex Panel Gallery/index-FINISHED.html
@@ -4,35 +4,38 @@
<meta charset="UTF-8">
<title>Flex Panels ๐ช</title>
<link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body>
<style>
html {
box-sizing: border-box;
- background:#ffc600;
- font-family:'helvetica neue';
+ background: #ffc600;
+ font-family: 'helvetica neue';
font-size: 20px;
font-weight: 200;
}
+
body {
margin: 0;
}
+
*, *:before, *:after {
box-sizing: inherit;
}
.panels {
- min-height:100vh;
+ min-height: 100vh;
overflow: hidden;
display: flex;
}
.panel {
- background:#6B0F9C;
- box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
- color:white;
+ background: #6B0F9C;
+ box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1);
+ color: white;
text-align: center;
- align-items:center;
+ align-items: center;
/* Safari transitionend event.propertyName === flex */
/* Chrome + FF transitionend event.propertyName === flex-grow */
transition:
@@ -40,28 +43,27 @@
flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
background 0.2s;
font-size: 20px;
- background-size:cover;
- background-position:center;
+ background-size: cover;
+ background-position: center;
flex: 1;
justify-content: center;
display: flex;
flex-direction: column;
}
-
.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
- .panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); }
+ .panel2 { background-image:url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500); }
.panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
/* Flex Items */
.panel > * {
- margin:0;
+ margin: 0;
width: 100%;
- transition:transform 0.5s;
+ transition: transform 0.5s;
flex: 1 0 auto;
- display:flex;
+ display: flex;
justify-content: center;
align-items: center;
}
@@ -74,23 +76,24 @@
.panel p {
text-transform: uppercase;
font-family: 'Amatic SC', cursive;
- text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
+ text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
font-size: 2em;
}
+
.panel p:nth-child(2) {
font-size: 4em;
}
.panel.open {
flex: 5;
- font-size:40px;
+ font-size: 40px;
}
- .cta {
- color:white;
- text-decoration: none;
+ @media only screen and (max-width: 600px) {
+ .panel p {
+ font-size: 1em;
+ }
}
-
</style>
diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html
index e1d643ad5c..88a4f1d1e2 100644
--- a/05 - Flex Panel Gallery/index-START.html
+++ b/05 - Flex Panel Gallery/index-START.html
@@ -4,34 +4,37 @@
<meta charset="UTF-8">
<title>Flex Panels ๐ช</title>
<link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
<style>
html {
box-sizing: border-box;
- background:#ffc600;
- font-family:'helvetica neue';
+ background: #ffc600;
+ font-family: 'helvetica neue';
font-size: 20px;
font-weight: 200;
}
+
body {
margin: 0;
}
+
*, *:before, *:after {
box-sizing: inherit;
}
.panels {
- min-height:100vh;
+ min-height: 100vh;
overflow: hidden;
}
.panel {
- background:#6B0F9C;
- box-shadow:inset 0 0 0 5px rgba(255,255,255,0.1);
- color:white;
+ background: #6B0F9C;
+ box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1);
+ color: white;
text-align: center;
- align-items:center;
+ align-items: center;
/* Safari transitionend event.propertyName === flex */
/* Chrome + FF transitionend event.propertyName === flex-grow */
transition:
@@ -39,40 +42,36 @@
flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
background 0.2s;
font-size: 20px;
- background-size:cover;
- background-position:center;
+ background-size: cover;
+ background-position: center;
}
-
.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
- .panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); }
+ .panel2 { background-image:url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500); }
.panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
+ /* Flex Children */
.panel > * {
- margin:0;
+ margin: 0;
width: 100%;
- transition:transform 0.5s;
+ transition: transform 0.5s;
}
.panel p {
text-transform: uppercase;
font-family: 'Amatic SC', cursive;
- text-shadow:0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
+ text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
font-size: 2em;
}
+
.panel p:nth-child(2) {
font-size: 4em;
}
.panel.open {
- font-size:40px;
- }
-
- .cta {
- color:white;
- text-decoration: none;
+ font-size: 40px;
}
</style>
diff --git a/06 - Type Ahead/index-FINISHED.html b/06 - Type Ahead/index-FINISHED.html
index 5902b43936..b11786cee7 100644
--- a/06 - Type Ahead/index-FINISHED.html
+++ b/06 - Type Ahead/index-FINISHED.html
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<title>Type Ahead ๐</title>
<link rel="stylesheet" href="style.css">
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body>
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..5a9aa7e4e8 100644
--- a/06 - Type Ahead/index-START.html
+++ b/06 - Type Ahead/index-START.html
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<title>Type Ahead ๐</title>
<link rel="stylesheet" href="style.css">
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
@@ -18,5 +19,5 @@
const endpoint = 'https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json';
</script>
- </body>
+</body>
</html>
diff --git a/06 - Type Ahead/style.css b/06 - Type Ahead/style.css
index 36dc55f30e..0c8c74e01b 100644
--- a/06 - Type Ahead/style.css
+++ b/06 - Type Ahead/style.css
@@ -1,87 +1,74 @@
- html {
- box-sizing: border-box;
- background:#ffc600;
- font-family:'helvetica neue';
- font-size: 20px;
- font-weight: 200;
- }
- *, *:before, *:after {
- box-sizing: inherit;
- }
- input {
- width: 100%;
- padding:20px;
- }
+html {
+ box-sizing: border-box;
+ background: #ffc600;
+ font-family: 'helvetica neue';
+ font-size: 20px;
+ font-weight: 200;
+}
- .search-form {
- max-width:400px;
- margin:50px auto;
- }
+*, *:before, *:after {
+ box-sizing: inherit;
+}
- input.search {
- margin: 0;
- text-align: center;
- outline:0;
- border: 10px solid #F7F7F7;
- width: 120%;
- left: -10%;
- position: relative;
- top: 10px;
- z-index: 2;
- border-radius: 5px;
- font-size: 40px;
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19);
- }
+input {
+ width: 100%;
+ padding: 20px;
+}
+.search-form {
+ max-width: 400px;
+ margin: 50px auto;
+}
- .suggestions {
- margin: 0;
- padding: 0;
- position: relative;
- /*perspective:20px;*/
- }
- .suggestions li {
- background:white;
- list-style: none;
- border-bottom: 1px solid #D8D8D8;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
- margin:0;
- padding:20px;
- transition:background 0.2s;
- display:flex;
- justify-content:space-between;
- text-transform: capitalize;
- }
+input.search {
+ margin: 0;
+ text-align: center;
+ outline: 0;
+ border: 10px solid #F7F7F7;
+ width: 120%;
+ left: -10%;
+ position: relative;
+ top: 10px;
+ z-index: 2;
+ border-radius: 5px;
+ font-size: 40px;
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19);
+}
- .suggestions li:nth-child(even) {
- transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001);
- background: linear-gradient(to bottom, #ffffff 0%,#EFEFEF 100%);
- }
- .suggestions li:nth-child(odd) {
- transform: perspective(100px) rotateX(-3deg) translateY(3px);
- background: linear-gradient(to top, #ffffff 0%,#EFEFEF 100%);
- }
+.suggestions {
+ margin: 0;
+ padding: 0;
+ position: relative;
+ /*perspective: 20px;*/
+}
- span.population {
- font-size: 15px;
- }
+.suggestions li {
+ background: white;
+ list-style: none;
+ border-bottom: 1px solid #D8D8D8;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.14);
+ margin: 0;
+ padding: 20px;
+ transition: background 0.2s;
+ display: flex;
+ justify-content: space-between;
+ text-transform: capitalize;
+}
+.suggestions li:nth-child(even) {
+ transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001);
+ background: linear-gradient(to bottom, #ffffff 0%,#EFEFEF 100%);
+}
- .details {
- text-align: center;
- font-size: 15px;
- }
+.suggestions li:nth-child(odd) {
+ transform: perspective(100px) rotateX(-3deg) translateY(3px);
+ background: linear-gradient(to top, #ffffff 0%,#EFEFEF 100%);
+}
- .hl {
- background:#ffc600;
- }
+span.population {
+ font-size: 15px;
+}
- .love {
- text-align: center;
- }
-
- a {
- color:black;
- background:rgba(0,0,0,0.1);
- text-decoration: none;
- }
+.hl {
+ background: #ffc600;
+}
diff --git a/07 - Array Cardio Day 2/index-FINISHED.html b/07 - Array Cardio Day 2/index-FINISHED.html
index c8e5b25d3b..0d99beba99 100644
--- a/07 - Array Cardio Day 2/index-FINISHED.html
+++ b/07 - Array Cardio Day 2/index-FINISHED.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Array Cardio ๐ช๐ช</title>
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body>
<p><em>Psst: have a look at the JavaScript Console</em> ๐</p>
@@ -13,7 +14,7 @@
{ name: 'Wes', year: 1988 },
{ name: 'Kait', year: 1986 },
{ name: 'Irv', year: 1970 },
- { name: 'Lux', year: 2015 },
+ { name: 'Lux', year: 2015 }
];
const comments = [
diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 206ec31aa0..4ca34c7536 100644
--- a/07 - Array Cardio Day 2/index-START.html
+++ b/07 - Array Cardio Day 2/index-START.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Array Cardio ๐ช๐ช</title>
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
<p><em>Psst: have a look at the JavaScript Console</em> ๐</p>
@@ -25,8 +26,8 @@
];
// Some and Every Checks
- // Array.prototype.some() // is at least one person 19?
- // Array.prototype.every() // is everyone 19?
+ // Array.prototype.some() // is at least one person 19 or older?
+ // Array.prototype.every() // is everyone 19 or older?
// Array.prototype.find()
// Find is like filter, but instead returns just the one you are looking for
diff --git a/08 - Fun with HTML5 Canvas/index-FINISHED.html b/08 - Fun with HTML5 Canvas/index-FINISHED.html
index 0791e17d0d..7d2c933c61 100644
--- a/08 - Fun with HTML5 Canvas/index-FINISHED.html
+++ b/08 - Fun with HTML5 Canvas/index-FINISHED.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas</title>
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body>
<canvas id="draw" width="800" height="800"></canvas>
@@ -65,7 +66,7 @@
<style>
html, body {
- margin:0;
+ margin: 0;
}
</style>
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..f70ad2059b 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html
+++ b/08 - Fun with HTML5 Canvas/index-START.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas</title>
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
<canvas id="draw" width="800" height="800"></canvas>
@@ -11,7 +12,7 @@
<style>
html, body {
- margin:0;
+ margin: 0;
}
</style>
diff --git a/09 - Dev Tools Domination/index-FINISHED.html b/09 - Dev Tools Domination/index-FINISHED.html
index 55cd3a2f42..0fdf53baf2 100644
--- a/09 - Dev Tools Domination/index-FINISHED.html
+++ b/09 - Dev Tools Domination/index-FINISHED.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Console Tricks!</title>
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body>
diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html
index 196fffd719..c061d01cda 100644
--- a/09 - Dev Tools Domination/index-START.html
+++ b/09 - Dev Tools Domination/index-START.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Console Tricks!</title>
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
diff --git a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html b/10 - Hold Shift and Check Checkboxes/index-FINISHED.html
index 3ce296cc4b..0ee3162ae2 100644
--- a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html
+++ b/10 - Hold Shift and Check Checkboxes/index-FINISHED.html
@@ -2,66 +2,60 @@
<html lang="en">
<head>
<meta charset="UTF-8">
- <title>Document</title>
+ <title>Hold Shift to Check Multiple Checkboxes</title>
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body>
<style>
html {
font-family: sans-serif;
- background:#ffc600;
+ background: #ffc600;
}
.inbox {
- max-width:400px;
- margin:50px auto;
- background:white;
- border-radius:5px;
- box-shadow:10px 10px 0 rgba(0,0,0,0.1);
+ max-width: 400px;
+ margin: 50px auto;
+ background: white;
+ border-radius: 5px;
+ box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
}
.item {
- display:flex;
- align-items:center;
+ display: flex;
+ align-items: center;
border-bottom: 1px solid #F1F1F1;
}
.item:last-child {
- border-bottom:0;
+ border-bottom: 0;
}
input:checked + p {
- background:#F9F9F9;
+ background: #F9F9F9;
text-decoration: line-through;
}
input[type="checkbox"] {
- margin:20px;
+ margin: 20px;
}
p {
- margin:0;
- padding:20px;
- transition:background 0.2s;
- flex:1;
- font-family:'helvetica neue';
+ margin: 0;
+ padding: 20px;
+ transition: background 0.2s;
+ flex: 1;
+ font-family: 'helvetica neue';
font-size: 20px;
font-weight: 200;
border-left: 1px solid #D1E2FF;
}
-
- .details {
- text-align: center;
- font-size: 15px;
- }
-
-
</style>
<!--
The following is a common layout you would see in an email client.
- When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes inbetween those two checkboxes should be checked.
+ When a user clicks a checkbox, holds Shift, and then clicks another checkbox a few rows down, all the checkboxes in-between those two checkboxes should be checked.
-->
<div class="inbox">
@@ -83,11 +77,11 @@
</div>
<div class="item">
<input type="checkbox">
- <p>Everything inbetween should also be set to checked</p>
+ <p>Everything in between should also be set to checked</p>
</div>
<div class="item">
<input type="checkbox">
- <p>Try do it with out any libraries</p>
+ <p>Try do it without any libraries</p>
</div>
<div class="item">
<input type="checkbox">
@@ -119,7 +113,7 @@
console.log(checkbox);
if (checkbox === this || checkbox === lastChecked) {
inBetween = !inBetween;
- console.log('STarting to check them inbetween!');
+ console.log('Starting to check them in between!');
}
if (inBetween) {
diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html
index eb7ed310bb..25df6ad31e 100644
--- a/10 - Hold Shift and Check Checkboxes/index-START.html
+++ b/10 - Hold Shift and Check Checkboxes/index-START.html
@@ -2,61 +2,54 @@
<html lang="en">
<head>
<meta charset="UTF-8">
- <title>Document</title>
+ <title>Hold Shift to Check Multiple Checkboxes</title>
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
<style>
html {
font-family: sans-serif;
- background:#ffc600;
+ background: #ffc600;
}
.inbox {
- max-width:400px;
- margin:50px auto;
- background:white;
- border-radius:5px;
- box-shadow:10px 10px 0 rgba(0,0,0,0.1);
+ max-width: 400px;
+ margin: 50px auto;
+ background: white;
+ border-radius: 5px;
+ box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
}
.item {
- display:flex;
- align-items:center;
+ display: flex;
+ align-items: center;
border-bottom: 1px solid #F1F1F1;
}
.item:last-child {
- border-bottom:0;
+ border-bottom: 0;
}
-
input:checked + p {
- background:#F9F9F9;
+ background: #F9F9F9;
text-decoration: line-through;
}
input[type="checkbox"] {
- margin:20px;
+ margin: 20px;
}
p {
- margin:0;
- padding:20px;
- transition:background 0.2s;
- flex:1;
+ margin: 0;
+ padding: 20px;
+ transition: background 0.2s;
+ flex: 1;
font-family:'helvetica neue';
font-size: 20px;
font-weight: 200;
border-left: 1px solid #D1E2FF;
}
-
- .details {
- text-align: center;
- font-size: 15px;
- }
-
-
</style>
<!--
The following is a common layout you would see in an email client.
@@ -83,11 +76,11 @@
</div>
<div class="item">
<input type="checkbox">
- <p>Everything inbetween should also be set to checked</p>
+ <p>Everything in between should also be set to checked</p>
</div>
<div class="item">
<input type="checkbox">
- <p>Try do it with out any libraries</p>
+ <p>Try to do it without any libraries</p>
</div>
<div class="item">
<input type="checkbox">
diff --git a/11 - Custom Video Player/652333414.mp4 b/11 - Custom Video Player/652333414.mp4
new file mode 100644
index 0000000000..09ed31eca5
Binary files /dev/null and b/11 - Custom Video Player/652333414.mp4 differ
diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html
index fe2b55b394..d824b1e5d3 100644
--- a/11 - Custom Video Player/index.html
+++ b/11 - Custom Video Player/index.html
@@ -4,18 +4,19 @@
<meta charset="UTF-8">
<title>HTML Video Player</title>
<link rel="stylesheet" href="style.css">
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
<div class="player">
- <video class="player__video viewer" src="https://player.vimeo.com/external/194837908.sd.mp4?s=c350076905b78c67f74d7ee39fdb4fef01d12420&profile_id=164"></video>
+ <video class="player__video viewer" src="652333414.mp4"></video>
<div class="player__controls">
<div class="progress">
<div class="progress__filled"></div>
</div>
<button class="player__button toggle" title="Toggle Play">โบ</button>
- <input type="range" name="volume" class="player__slider" min=0 max="1" step="0.05" value="1">
+ <input type="range" name="volume" class="player__slider" min="0" max="1" step="0.05" value="1">
<input type="range" name="playbackRate" class="player__slider" min="0.5" max="2" step="0.1" value="1">
<button data-skip="-10" class="player__button">ยซ 10s</button>
<button data-skip="25" class="player__button">25s ยป</button>
diff --git a/11 - Custom Video Player/scripts-FINISHED.js b/11 - Custom Video Player/scripts-FINISHED.js
index cedacf2f68..4656b218a7 100644
--- a/11 - Custom Video Player/scripts-FINISHED.js
+++ b/11 - Custom Video Player/scripts-FINISHED.js
@@ -37,7 +37,7 @@ function scrub(e) {
video.currentTime = scrubTime;
}
-/* Hook up the event listners */
+/* Hook up the event listeners */
video.addEventListener('click', togglePlay);
video.addEventListener('play', updateButton);
video.addEventListener('pause', updateButton);
diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css
index c07581c1c0..f2420cdf32 100644
--- a/11 - Custom Video Player/style.css
+++ b/11 - Custom Video Player/style.css
@@ -7,39 +7,51 @@ html {
}
body {
+ margin: 0;
padding: 0;
- display:flex;
- background:#7A419B;
- min-height:100vh;
+ display: flex;
+ background: #7A419B;
+ min-height: 100vh;
background: linear-gradient(135deg, #7c1599 0%,#921099 48%,#7e4ae8 100%);
- background-size:cover;
+ background-size: cover;
align-items: center;
justify-content: center;
}
.player {
- max-width:750px;
- border:5px solid rgba(0,0,0,0.2);
- box-shadow:0 0 20px rgba(0,0,0,0.2);
+ max-width: 750px;
+ border: 5px solid rgba(0,0,0,0.2);
+ box-shadow: 0 0 20px rgba(0,0,0,0.2);
position: relative;
font-size: 0;
overflow: hidden;
}
+/* This css is only applied when fullscreen is active. */
+.player:fullscreen {
+ max-width: none;
+ width: 100%;
+}
+
+.player:-webkit-full-screen {
+ max-width: none;
+ width: 100%;
+}
+
.player__video {
width: 100%;
}
.player__button {
- background:none;
- border:0;
- line-height:1;
- color:white;
+ background: none;
+ border: 0;
+ line-height: 1;
+ color: white;
text-align: center;
- outline:0;
+ outline: 0;
padding: 0;
- cursor:pointer;
- max-width:50px;
+ cursor: pointer;
+ max-width: 50px;
}
.player__button:focus {
@@ -47,19 +59,19 @@ body {
}
.player__slider {
- width:10px;
- height:30px;
+ width: 10px;
+ height: 30px;
}
.player__controls {
- display:flex;
+ display: flex;
position: absolute;
- bottom:0;
+ bottom: 0;
width: 100%;
transform: translateY(100%) translateY(-5px);
- transition:all .3s;
- flex-wrap:wrap;
- background:rgba(0,0,0,0.1);
+ transition: all .3s;
+ flex-wrap: wrap;
+ background: rgba(0,0,0,0.1);
}
.player:hover .player__controls {
@@ -67,42 +79,44 @@ body {
}
.player:hover .progress {
- height:15px;
+ height: 15px;
}
.player__controls > * {
- flex:1;
+ flex: 1;
}
.progress {
- flex:10;
+ flex: 10;
position: relative;
- display:flex;
- flex-basis:100%;
- height:5px;
- transition:height 0.3s;
- background:rgba(0,0,0,0.5);
- cursor:ew-resize;
+ display: flex;
+ flex-basis: 100%;
+ height: 5px;
+ transition: height 0.3s;
+ background: rgba(0,0,0,0.5);
+ cursor: ew-resize;
}
.progress__filled {
- width:50%;
- background:#ffc600;
- flex:0;
- flex-basis:50%;
+ width: 50%;
+ background: #ffc600;
+ flex: 0;
+ flex-basis: 50%;
}
/* unholy css to style input type="range" */
input[type=range] {
-webkit-appearance: none;
- background:transparent;
+ background: transparent;
width: 100%;
margin: 0 5px;
}
+
input[type=range]:focus {
outline: none;
}
+
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8.4px;
@@ -112,8 +126,8 @@ input[type=range]::-webkit-slider-runnable-track {
border-radius: 1.3px;
border: 0.2px solid rgba(1, 1, 1, 0);
}
+
input[type=range]::-webkit-slider-thumb {
- box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
height: 15px;
width: 15px;
border-radius: 50px;
@@ -123,9 +137,11 @@ input[type=range]::-webkit-slider-thumb {
margin-top: -3.5px;
box-shadow:0 0 2px rgba(0,0,0,0.2);
}
-input[type=range]:focus::-wefbkit-slider-runnable-track {
+
+input[type=range]:focus::-webkit-slider-runnable-track {
background: #bada55;
}
+
input[type=range]::-moz-range-track {
width: 100%;
height: 8.4px;
@@ -135,6 +151,7 @@ input[type=range]::-moz-range-track {
border-radius: 1.3px;
border: 0.2px solid rgba(1, 1, 1, 0);
}
+
input[type=range]::-moz-range-thumb {
box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
height: 15px;
diff --git a/12 - Key Sequence Detection/cornify.js b/12 - Key Sequence Detection/cornify.js
new file mode 100644
index 0000000000..b7be31e5fc
--- /dev/null
+++ b/12 - Key Sequence Detection/cornify.js
@@ -0,0 +1,370 @@
+/*
+
+ _______ ,-----. .-------. ,---. .--..-./`) ________ ____ __
+ / __ \ .' .-, '. | _ _ \ | \ | |\ .-.')| | \ \ / /
+ | ,_/ \__) / ,-.| \ _ \ | ( ' ) | | , \ | |/ `-' \| .----' \ _. / '
+,-./ ) ; \ '_ / | :|(_ o _) / | |\_ \| | `-'`"`| _|____ _( )_ .'
+\ '_ '`) | _`,/ \ _/ || (_,_).' __ | _( )_\ | .---. |_( )_ | ___(_ o _)'
+ > (_) ) __: ( '\_/ \ ;| |\ \ | || (_ o _) | | | (_ o._)__|| |(_,_)'
+( . .-'_/ )\ `"/ \ ) / | | \ `' /| (_,_)\ | | | |(_,_) | `-' /
+ `-'`-' / '. \_/``".' | | \ / | | | | | | | | \ /
+ `._____.' '-----' ''-' `'-' '--' '--' '---' '---' `-..-'
+
+ This script has been modified by @wesbos because
+ https://twitter.com/wesbos/status/1657012836403388416
+
+*/
+
+var cornify_count = 0;
+var cornify_add = function (options) {
+ // Track how often we cornified.
+ cornify_count += 1;
+
+ // Prepare our lovely variables.
+ var cornify_url = "https://www.cornify.com/";
+ var numType = "px";
+ var heightRandom = Math.random() * 0.75;
+ var windowHeight = 768;
+ var windowWidth = 1024;
+ var height = 0;
+ var width = 0;
+ var de = document.documentElement;
+ var transform = "translate(-50%, -50%)";
+ var showGrandUnicorn = cornify_count == 15;
+
+ // Create a container for our 'corn or 'bow.
+ var div = document.createElement("div");
+ div.style.position = "fixed";
+ div.className = "__cornify_unicorn";
+ div.style.zIndex = 143143;
+ div.style.outline = 0;
+ div.onclick = cornify_add; // Click for more magic.
+
+ // Get the window width and height - requires some cross browser checking.
+ if (typeof window.innerHeight == "number") {
+ windowHeight = window.innerHeight;
+ windowWidth = window.innerWidth;
+ } else if (de && de.clientHeight) {
+ windowHeight = de.clientHeight;
+ windowWidth = de.clientWidth;
+ } else {
+ numType = "%";
+ height = Math.round(height * 100) + "%";
+ }
+
+ if (showGrandUnicorn) {
+ // Clicking 15 times summons the grand unicorn - which is centered on the screen.
+ div.style.top = "50%";
+ div.style.left = "50%";
+ div.style.zIndex = 143143143;
+ } else {
+ // Otherwise we randomize the position.
+ div.style.top = Math.round(Math.random() * 100) + "%";
+ div.style.left = Math.round(Math.random() * 100) + "%";
+
+ transform += " rotate(" + Math.round(Math.random() * 10 - 5) + "deg)";
+ }
+
+ // Create the image element.
+ var img = document.createElement("img");
+ img.style.opacity = 0;
+ img.style.transition = "all .1s linear";
+ img.alt = "A lovely unicorn or rainbow";
+ img.onload = function () {
+ img.style.opacity = 1;
+ };
+
+ // Used as a cache buster so the browser makes a new request every time instead of usign the previous, cached one.
+ var currentTime = new Date();
+ var submitTime = currentTime.getTime();
+
+ if (showGrandUnicorn) {
+ // Caching doesn't matter for the Grand Unicorn.
+ submitTime = 0;
+ }
+
+ // Construct our unicorn & rainbow request.
+ var url = `https://www.cornify.com/corns/${
+ Math.random() > 0.5 ? "r" : "u"
+ }${Math.ceil(Math.random() * 7)}.gif`;
+
+ // Add younicorns if requested.
+ if (options && (options.y || options.younicorns)) {
+ url += "&y=" + (options.y ? options.y : options.younicorns);
+
+ if (Math.random() > 0.5) {
+ // Flip horizontally at random.
+ if (transform.length > 0) {
+ transform += " scaleX(-1)";
+ }
+ }
+ }
+
+ div.style.transform = transform;
+ div.style.MozTransform = transform;
+ div.style.webkitTransform = transform;
+
+ img.setAttribute("src", url);
+
+ // Add a nice hover wigggle.
+ img.style.transition = "all .1s linear";
+
+ div.onmouseover = function () {
+ var size = 1 + Math.round(Math.random() * 10) / 100;
+ var angle = Math.round(Math.random() * 20 - 10);
+ var result = "rotate(" + angle + "deg) scale(" + size + "," + size + ")";
+ img.style.transform = result;
+ img.style.MozTransform = result;
+ img.style.webkitTransform = result;
+ };
+
+ div.onmouseout = function () {
+ var size = 0.9 + Math.round(Math.random() * 10) / 100;
+ var angle = Math.round(Math.random() * 6 - 3);
+ var result = "rotate(" + angle + "deg) scale(" + size + "," + size + ")";
+ img.style.transform = result;
+ img.style.MozTransform = result;
+ img.style.webkitTransform = result;
+ };
+
+ // Append our container DIV to the page.
+ var body = document.getElementsByTagName("body")[0];
+ body.appendChild(div);
+ div.appendChild(img);
+
+ // Hooray - now we have a sparkly unicorn (or rainbow) on the page. Another cornification well done. Congrats!
+
+ // When clicking 5 times, add a custom stylesheet to make the page look awesome.
+ if (cornify_count == 5) {
+ var cssExisting = document.getElementById("__cornify_css");
+
+ if (!cssExisting) {
+ var head = document.getElementsByTagName("head")[0];
+ var css = document.createElement("link");
+ css.id = "__cornify_css";
+ css.type = "text/css";
+ css.rel = "stylesheet";
+ css.href = "https://www.cornify.com/css/cornify.css";
+ css.media = "screen";
+ head.appendChild(css);
+ }
+ cornify_replace();
+ }
+
+ cornify_updatecount();
+
+ // Trigger an event on the document.
+ var event = new Event("cornify");
+ document.dispatchEvent(event);
+};
+
+// Tracks how often we cornified.
+var cornify_updatecount = function () {
+ var id = "__cornify_count";
+ var p = document.getElementById(id);
+
+ if (p == null) {
+ var p = document.createElement("p");
+ p.id = id;
+ p.style.position = "fixed";
+ p.style.bottom = "5px";
+ p.style.left = "0px";
+ p.style.right = "0px";
+ p.style.zIndex = "1000000000";
+ p.style.color = "#ff00ff";
+ p.style.textAlign = "center";
+ p.style.fontSize = "24px";
+ p.style.fontFamily = "'Comic Sans MS', 'Comic Sans', 'Marker Felt', serif"; // Only the best!
+ p.style.textTransform = "uppercase";
+ var body = document.getElementsByTagName("body")[0];
+ body.appendChild(p);
+ }
+
+ if (cornify_count == 1) {
+ p.innerHTML = "You cornified!";
+ } else {
+ p.innerHTML = "You cornified " + cornify_count + " times!";
+ }
+
+ // Stores our count in a cookie for our next session.
+ cornify_setcookie("cornify", cornify_count + "", 1000);
+};
+
+var cornify_setcookie = function (name, value, days) {
+ var d = new Date();
+ d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000);
+ var expires = "expires=" + d.toGMTString();
+ document.cookie = name + "=" + value + "; " + expires;
+};
+
+var cornify_getcookie = function (cname) {
+ var name = cname + "=";
+ var ca = document.cookie.split(";");
+ for (var i = 0; i < ca.length; i++) {
+ var c = ca[i].trim();
+ if (c.indexOf(name) == 0) {
+ return c.substring(name.length, c.length);
+ }
+ }
+ return "";
+};
+
+// Retrieve our click count from the cookie when we start up.
+cornify_count = parseInt(cornify_getcookie("cornify"));
+if (isNaN(cornify_count)) {
+ cornify_count = 0;
+}
+
+// Adds happy words at the beginning of all headers on the page.
+var cornify_replace = function () {
+ // Replace text.
+ var hc = 6;
+ var hs;
+ var h;
+ var k;
+ var words = [
+ "Happy",
+ "Sparkly",
+ "Glittery",
+ "Fun",
+ "Magical",
+ "Lovely",
+ "Cute",
+ "Charming",
+ "Amazing",
+ "Wonderful",
+ ];
+ while (hc >= 1) {
+ hs = document.getElementsByTagName("h" + hc);
+ for (k = 0; k < hs.length; k++) {
+ h = hs[k];
+ h.innerHTML =
+ words[Math.floor(Math.random() * words.length)] + " " + h.innerHTML;
+ }
+ hc -= 1;
+ }
+};
+
+// Adds happy words at the beginning of all headers on the page.
+var cornify_replace = function () {
+ var headerTypeIndex = 6;
+ var headerElements;
+ var headerElement;
+ var i;
+ var magicalWords = [
+ "Happy",
+ "Sparkly",
+ "Glittery",
+ "Fun",
+ "Magical",
+ "Lovely",
+ "Cute",
+ "Charming",
+ "Amazing",
+ "Wonderful",
+ ];
+
+ while (headerTypeIndex >= 1) {
+ headerElements = document.getElementsByTagName("h" + headerTypeIndex);
+
+ for (i = 0; i < headerElements.length; i++) {
+ headerElement = headerElements[i];
+ headerElement.innerHTML =
+ magicalWords[Math.floor(Math.random() * magicalWords.length)] +
+ " " +
+ headerElement.innerHTML;
+ }
+
+ headerTypeIndex -= 1;
+ }
+};
+
+// Clicking the rainbow cupcake button makes all the unicorns
+// disappear (should only be used in an emergency, since it's sad).
+var cornify_click_cupcake_button = function () {
+ var doc = document;
+
+ var corns = doc.getElementsByClassName("__cornify_unicorn");
+ if (corns) {
+ for (var i = 0; i < corns.length; i++) {
+ corns[i].parentNode.removeChild(corns[i]);
+ }
+ }
+
+ // Remove our counter.
+ var button = doc.getElementById("__cornify_count");
+ if (button) {
+ button.parentNode.removeChild(button);
+ }
+
+ // Remove the cupcake button.
+ var button = doc.getElementById("__cornify_cupcake_button");
+ if (button) {
+ button.parentNode.removeChild(button);
+ }
+
+ var event = new Event("cornify-clear");
+ document.dispatchEvent(event);
+};
+
+// Add the rainbow cupcake button to the page.
+var cornify_add_cupcake_button = function () {
+ var id = "__cornify_cupcake_button";
+ var doc = document;
+ var button = doc.getElementById(id);
+
+ if (!button) {
+ button = doc.createElement("div");
+ button.id = id;
+ button.onclick = cornify_click_cupcake_button;
+ button.style.position = "fixed";
+ button.style.top = "10px";
+ button.style.right = "10px";
+ button.style.zIndex = 2147483640;
+ button.setAttribute("aria-label", "Hide unicorns and rainbows");
+
+ var image = document.createElement("img");
+ image.src = "https://www.cornify.com/assets/cornify-cupcake-button.png";
+ image.alt = "Cupcake button";
+ image.width = 50;
+ image.height = 50;
+ image.style.width = "50px !important";
+ image.style.height = "50px !important";
+ image.style.display = "block !important";
+ image.style.cursor = "pointer !important";
+ image.style.margin = "0 !important";
+ image.style.padding = "0 !important";
+ button.appendChild(image);
+
+ doc.getElementsByTagName("body")[0].appendChild(button);
+ }
+};
+
+// Adapted from http://www.snaptortoise.com/konami-js/
+var cornami = {
+ input: "",
+ pattern: "38384040373937396665",
+ clear: setTimeout("cornami.clear_input()", 5000),
+ load: function () {
+ window.document.onkeydown = function (event) {
+ if (cornami.input == cornami.pattern) {
+ cornify_add();
+ clearTimeout(cornami.clear);
+ return;
+ } else {
+ cornami.input += event.keyCode;
+ if (cornami.input == cornami.pattern) {
+ cornify_add();
+ }
+ clearTimeout(cornami.clear);
+ cornami.clear = setTimeout("cornami.clear_input()", 5000);
+ }
+ };
+ },
+ clear_input: function () {
+ cornami.input = "";
+ clearTimeout(cornami.clear);
+ },
+};
+
+cornami.load();
diff --git a/12 - Key Sequence Detection/index-FINISHED.html b/12 - Key Sequence Detection/index-FINISHED.html
index 562127a0d2..51942ee5c4 100644
--- a/12 - Key Sequence Detection/index-FINISHED.html
+++ b/12 - Key Sequence Detection/index-FINISHED.html
@@ -1,25 +1,29 @@
<!DOCTYPE html>
<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title>Key Detection</title>
- <script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script>
-</head>
-<body>
-<script>
-const pressed = [];
-const secretCode = 'wesbos';
+ <head>
+ <meta charset="UTF-8" />
+ <title>Key Detection</title>
+ <script type="text/javascript" src="./cornify.js"></script>
+ <link rel="icon" href="https://fav.farm/โ
" />
+ </head>
+ <body>
+ <script>
+ const pressed = [];
+ const secretCode = "wesbos";
-window.addEventListener('keyup', (e) => {
- console.log(e.key);
- pressed.push(e.key);
- pressed.splice(-secretCode.length - 1, pressed.length - secretCode.length);
- if (pressed.join('').includes(secretCode)) {
- console.log('DING DING!');
- cornify_add();
- }
- console.log(pressed);
-});
-</script>
-</body>
+ window.addEventListener("keyup", (e) => {
+ console.log(e.key);
+ pressed.push(e.key);
+ pressed.splice(
+ -secretCode.length - 1,
+ pressed.length - secretCode.length
+ );
+ if (pressed.join("").includes(secretCode)) {
+ console.log("DING DING!");
+ cornify_add();
+ }
+ console.log(pressed);
+ });
+ </script>
+ </body>
</html>
diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index 8cab786140..6ca54bf60c 100644
--- a/12 - Key Sequence Detection/index-START.html
+++ b/12 - Key Sequence Detection/index-START.html
@@ -1,12 +1,12 @@
<!DOCTYPE html>
<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title>Key Detection</title>
- <script type="text/javascript" src="http://www.cornify.com/js/cornify.js"></script>
-</head>
-<body>
-<script>
-</script>
-</body>
+ <head>
+ <meta charset="UTF-8" />
+ <title>Key Detection</title>
+ <script type="text/javascript" src="./cornify.js"></script>
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
+ </head>
+ <body>
+ <script></script>
+ </body>
</html>
diff --git a/13 - Slide in on Scroll/index-FINISHED.html b/13 - Slide in on Scroll/index-FINISHED.html
index bbaf0b6f22..10aa9059c3 100644
--- a/13 - Slide in on Scroll/index-FINISHED.html
+++ b/13 - Slide in on Scroll/index-FINISHED.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Document</title>
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body>
@@ -60,7 +61,7 @@ <h1>Slide in on Scroll</h1>
const sliderImages = document.querySelectorAll('.slide-in');
- function checkSlide(e) {
+ function checkSlide() {
sliderImages.forEach(sliderImage => {
// half way through the image
const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
@@ -83,14 +84,16 @@ <h1>Slide in on Scroll</h1>
<style>
html {
box-sizing: border-box;
- background:#ffc600;
- font-family:'helvetica neue';
+ background: #ffc600;
+ font-family: 'helvetica neue';
font-size: 20px;
font-weight: 200;
}
+
body {
margin: 0;
}
+
*, *:before, *:after {
box-sizing: inherit;
}
@@ -102,36 +105,37 @@ <h1>Slide in on Scroll</h1>
.site-wrap {
max-width: 700px;
margin: 100px auto;
- background:white;
- padding:40px;
+ background: white;
+ padding: 40px;
text-align: justify;
}
.align-left {
- float:left;
- margin-right:20px;
+ float: left;
+ margin-right: 20px;
}
.align-right {
- float:right;
- margin-left:20px;
+ float: right;
+ margin-left: 20px;
}
.slide-in {
- opacity:0;
- transition:all .5s;
+ opacity: 0;
+ transition: all .5s;
}
.align-left.slide-in {
- transform:translateX(-30%) scale(0.95);
+ transform: translateX(-30%) scale(0.95);
}
+
.align-right.slide-in {
- transform:translateX(30%) scale(0.95);
+ transform: translateX(30%) scale(0.95);
}
.slide-in.active {
- opacity:1;
- transform:translateX(0%) scale(1);
+ opacity: 1;
+ transform: translateX(0%) scale(1);
}
</style>
diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html
index 0b9fb8fccb..c6b4dcc6f8 100644
--- a/13 - Slide in on Scroll/index-START.html
+++ b/13 - Slide in on Scroll/index-START.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Document</title>
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
@@ -63,14 +64,16 @@ <h1>Slide in on Scroll</h1>
<style>
html {
box-sizing: border-box;
- background:#ffc600;
- font-family:'helvetica neue';
+ background: #ffc600;
+ font-family: 'helvetica neue';
font-size: 20px;
font-weight: 200;
}
+
body {
margin: 0;
}
+
*, *:before, *:after {
box-sizing: inherit;
}
@@ -82,36 +85,37 @@ <h1>Slide in on Scroll</h1>
.site-wrap {
max-width: 700px;
margin: 100px auto;
- background:white;
- padding:40px;
+ background: white;
+ padding: 40px;
text-align: justify;
}
.align-left {
- float:left;
- margin-right:20px;
+ float: left;
+ margin-right: 20px;
}
.align-right {
- float:right;
- margin-left:20px;
+ float: right;
+ margin-left: 20px;
}
.slide-in {
- opacity:0;
- transition:all .5s;
+ opacity: 0;
+ transition: all .5s;
}
.align-left.slide-in {
- transform:translateX(-30%) scale(0.95);
+ transform: translateX(-30%) scale(0.95);
}
+
.align-right.slide-in {
- transform:translateX(30%) scale(0.95);
+ transform: translateX(30%) scale(0.95);
}
.slide-in.active {
- opacity:1;
- transform:translateX(0%) scale(1);
+ opacity: 1;
+ transform: translateX(0%) scale(1);
}
</style>
diff --git a/14 - JavaScript References VS Copying/index-FINISHED.html b/14 - JavaScript References VS Copying/index-FINISHED.html
index be6d1b7646..4b173b9b80 100644
--- a/14 - JavaScript References VS Copying/index-FINISHED.html
+++ b/14 - JavaScript References VS Copying/index-FINISHED.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>JS Reference VS Copy</title>
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body>
@@ -41,7 +42,7 @@
// So, how do we fix this? We take a copy instead!
const team2 = players.slice();
- // one day
+ // one way
// or create a new array and concat the old one in
const team3 = [].concat(players);
diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html
index 4da1bac2ea..d211a784cf 100644
--- a/14 - JavaScript References VS Copying/index-START.html
+++ b/14 - JavaScript References VS Copying/index-START.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>JS Reference VS Copy</title>
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
@@ -26,7 +27,7 @@
// So, how do we fix this? We take a copy instead!
- // one day
+ // one way
// or create a new array and concat the old one in
@@ -37,6 +38,10 @@
// The same thing goes for objects, let's say we have a person object
// with Objects
+ const person = {
+ name: 'Wes Bos',
+ age: 80
+ };
// and think we make a copy:
diff --git a/15 - LocalStorage/index-FINISHED.html b/15 - LocalStorage/index-FINISHED.html
index 2c492b1088..5f10efaec6 100644
--- a/15 - LocalStorage/index-FINISHED.html
+++ b/15 - LocalStorage/index-FINISHED.html
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<title>LocalStorage</title>
<link rel="stylesheet" href="style.css">
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body>
<!--
diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html
index d444f1d68b..4a52598db2 100644
--- a/15 - LocalStorage/index-START.html
+++ b/15 - LocalStorage/index-START.html
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<title>LocalStorage</title>
<link rel="stylesheet" href="style.css">
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
<!--
diff --git a/15 - LocalStorage/oh-la-la.jpeg b/15 - LocalStorage/oh-la-la.jpeg
new file mode 100644
index 0000000000..404dd52127
Binary files /dev/null and b/15 - LocalStorage/oh-la-la.jpeg differ
diff --git a/15 - LocalStorage/style.css b/15 - LocalStorage/style.css
index ea5bab179c..f6444f4407 100644
--- a/15 - LocalStorage/style.css
+++ b/15 - LocalStorage/style.css
@@ -1,78 +1,81 @@
+html {
+ box-sizing: border-box;
+ background: url("oh-la-la.jpeg") center no-repeat;
+ background-size: cover;
+ min-height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ text-align: center;
+ font-family: Futura, "Trebuchet MS", Arial, sans-serif;
+}
- html {
- box-sizing: border-box;
- background:url('http://wes.io/hx9M/oh-la-la.jpg') center no-repeat;
- background-size:cover;
- min-height:100vh;
- display:flex;
- justify-content: center;
- align-items: center;
- text-align: center;
- font-family: Futura,"Trebuchet MS",Arial,sans-serif
- }
- *, *:before, *:after {box-sizing: inherit; }
+*,
+*:before,
+*:after {
+ box-sizing: inherit;
+}
- svg {
- fill:white;
- background: rgba(0,0,0,0.1);
- padding: 20px;
- border-radius: 50%;
- width:200px;
- margin-bottom: 50px;
- }
+svg {
+ fill: white;
+ background: rgba(0, 0, 0, 0.1);
+ padding: 20px;
+ border-radius: 50%;
+ width: 200px;
+ margin-bottom: 50px;
+}
- .wrapper {
- padding: 20px;
- max-width: 350px;
- background: rgba(255,255,255,0.95);
- box-shadow: 0 0 0 10px rgba(0,0,0,0.1);
- }
+.wrapper {
+ padding: 20px;
+ max-width: 350px;
+ background: rgba(255, 255, 255, 0.95);
+ box-shadow: 0 0 0 10px rgba(0, 0, 0, 0.1);
+}
- h2 {
- text-align: center;
- margin: 0;
- font-weight: 200;
- }
+h2 {
+ text-align: center;
+ margin: 0;
+ font-weight: 200;
+}
- .plates {
- margin: 0;
- padding: 0;
- text-align: left;
- list-style: none;
- }
+.plates {
+ margin: 0;
+ padding: 0;
+ text-align: left;
+ list-style: none;
+}
- .plates li {
- border-bottom: 1px solid rgba(0,0,0,0.2);
- padding: 10px 0;
- font-weight: 100;
- display: flex;
- }
+.plates li {
+ border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+ padding: 10px 0;
+ font-weight: 100;
+ display: flex;
+}
- .plates label {
- flex:1;
- cursor: pointer;
+.plates label {
+ flex: 1;
+ cursor: pointer;
+}
- }
+.plates input {
+ display: none;
+}
- .plates input {
- display: none;
- }
+.plates input + label:before {
+ content: "โฌ๏ธ";
+ margin-right: 10px;
+}
- .plates input + label:before {
- content: 'โฌ๏ธ';
- margin-right: 10px;
- }
+.plates input:checked + label:before {
+ content: "๐ฎ";
+}
- .plates input:checked + label:before {
- content: '๐ฎ';
- }
+.add-items {
+ margin-top: 20px;
+}
- .add-items {
- margin-top: 20px;
- }
-
- .add-items input {
- padding:10px;
- outline:0;
- border:1px solid rgba(0,0,0,0.1);
- }
+.add-items input {
+ padding: 10px;
+ outline: 0;
+ border: 1px solid rgba(0, 0, 0, 0.1);
+}
diff --git a/16 - Mouse Move Shadow/index-finished.html b/16 - Mouse Move Shadow/index-FINISHED.html
similarity index 88%
rename from 16 - Mouse Move Shadow/index-finished.html
rename to 16 - Mouse Move Shadow/index-FINISHED.html
index 4328eaf6ab..8aa04ff82d 100644
--- a/16 - Mouse Move Shadow/index-finished.html
+++ b/16 - Mouse Move Shadow/index-FINISHED.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Mouse Shadow</title>
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body>
@@ -12,19 +13,22 @@ <h1 contenteditable>๐ฅWOAH!</h1>
<style>
html {
- color:black;
+ color: black;
font-family: sans-serif;
}
+ body {
+ margin: 0;
+ }
+
.hero {
min-height: 100vh;
- display:flex;
+ display: flex;
justify-content: center;
align-items: center;
- color:black;
+ color: black;
}
-
h1 {
text-shadow: 10px 10px 0 rgba(0,0,0,1);
font-size: 100px;
@@ -34,7 +38,7 @@ <h1 contenteditable>๐ฅWOAH!</h1>
<script>
const hero = document.querySelector('.hero');
const text = hero.querySelector('h1');
- const walk = 500; // 100px
+ const walk = 500; // 500px
function shadow(e) {
const { offsetWidth: width, offsetHeight: height } = hero;
diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-START.html
similarity index 76%
rename from 16 - Mouse Move Shadow/index-start.html
rename to 16 - Mouse Move Shadow/index-START.html
index 58a9bba861..74418928e8 100644
--- a/16 - Mouse Move Shadow/index-start.html
+++ b/16 - Mouse Move Shadow/index-START.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Mouse Shadow</title>
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
@@ -12,16 +13,20 @@ <h1 contenteditable>๐ฅWOAH!</h1>
<style>
html {
- color:black;
+ color: black;
font-family: sans-serif;
}
+ body {
+ margin: 0;
+ }
+
.hero {
min-height: 100vh;
- display:flex;
+ display: flex;
justify-content: center;
align-items: center;
- color:black;
+ color: black;
}
h1 {
diff --git a/17 - Sort Without Articles/index-FINISHED.html b/17 - Sort Without Articles/index-FINISHED.html
index 5de851cbbd..7a8cf803e1 100644
--- a/17 - Sort Without Articles/index-FINISHED.html
+++ b/17 - Sort Without Articles/index-FINISHED.html
@@ -3,11 +3,13 @@
<head>
<meta charset="UTF-8">
<title>Sort Without Articles</title>
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body>
<style>
body {
+ margin: 0;
font-family: sans-serif;
background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
background-size: cover;
@@ -25,10 +27,12 @@
padding: 0;
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
}
+
#bands li {
border-bottom: 1px solid #efefef;
padding: 20px;
}
+
#bands li:last-child {
border-bottom: 0;
}
diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html
index cfaf3e0440..94400858b1 100644
--- a/17 - Sort Without Articles/index-START.html
+++ b/17 - Sort Without Articles/index-START.html
@@ -3,11 +3,13 @@
<head>
<meta charset="UTF-8">
<title>Sort Without Articles</title>
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
<style>
body {
+ margin: 0;
font-family: sans-serif;
background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
background-size: cover;
@@ -25,10 +27,12 @@
padding: 0;
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
}
+
#bands li {
border-bottom: 1px solid #efefef;
padding: 20px;
}
+
#bands li:last-child {
border-bottom: 0;
}
diff --git a/18 - Adding Up Times with Reduce/index-FINISHED.html b/18 - Adding Up Times with Reduce/index-FINISHED.html
index 9dcbb3d396..64e1a9fc0b 100644
--- a/18 - Adding Up Times with Reduce/index-FINISHED.html
+++ b/18 - Adding Up Times with Reduce/index-FINISHED.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Videos</title>
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body>
<ul class="videos">
@@ -180,7 +181,7 @@
<li data-time="4:04">
Video 58
</li>
-
+ </ul>
<script>
const timeNodes = Array.from(document.querySelectorAll('[data-time]'));
diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html
index 3eaee0f3ef..2601705c01 100644
--- a/18 - Adding Up Times with Reduce/index-START.html
+++ b/18 - Adding Up Times with Reduce/index-START.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Videos</title>
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
<ul class="videos">
@@ -180,7 +181,7 @@
<li data-time="4:04">
Video 58
</li>
-
+ </ul>
<script>
</script>
</body>
diff --git a/19 - Webcam Fun/index.html b/19 - Webcam Fun/index.html
index d4ffc4dc2a..9dce69c546 100755
--- a/19 - Webcam Fun/index.html
+++ b/19 - Webcam Fun/index.html
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<title>Get User Media Code Along!</title>
<link rel="stylesheet" href="style.css">
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
@@ -37,7 +38,7 @@
<div class="strip"></div>
</div>
- <audio class="snap" src="http://wesbos.com/demos/photobooth/snap.mp3" hidden></audio>
+ <audio class="snap" src="./snap.mp3" hidden></audio>
<script src="scripts.js"></script>
diff --git a/19 - Webcam Fun/package.json b/19 - Webcam Fun/package.json
index 616baf5369..93bfac7cd0 100755
--- a/19 - Webcam Fun/package.json
+++ b/19 - Webcam Fun/package.json
@@ -4,11 +4,11 @@
"description": "",
"main": "scripts.js",
"scripts": {
- "start" : "browser-sync start --server --files '*.css, *.html, *.js'"
+ "start": "browser-sync start --server --files \"*.css, *.html, *.js\""
},
"author": "",
"license": "ISC",
"devDependencies": {
- "browser-sync": "^2.12.5"
+ "browser-sync": "^2.12.5 <2.23.2"
}
}
diff --git a/19 - Webcam Fun/scripts-FINISHED.js b/19 - Webcam Fun/scripts-FINISHED.js
index 0d62c8dc23..543eae8426 100755
--- a/19 - Webcam Fun/scripts-FINISHED.js
+++ b/19 - Webcam Fun/scripts-FINISHED.js
@@ -8,7 +8,15 @@ function getVideo() {
navigator.mediaDevices.getUserMedia({ video: true, audio: false })
.then(localMediaStream => {
console.log(localMediaStream);
- video.src = window.URL.createObjectURL(localMediaStream);
+
+// DEPRECIATION :
+// The following has been depreceated by major browsers as of Chrome and Firefox.
+// video.src = window.URL.createObjectURL(localMediaStream);
+// Please refer to these:
+// Deprecated - https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL
+// Newer Syntax - https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/srcObject
+
+ video.srcObject = localMediaStream;
video.play();
})
.catch(err => {
@@ -16,7 +24,7 @@ function getVideo() {
});
}
-function paintToCanavas() {
+function paintToCanvas() {
const width = video.videoWidth;
const height = video.videoHeight;
canvas.width = width;
@@ -49,11 +57,11 @@ function takePhoto() {
link.href = data;
link.setAttribute('download', 'handsome');
link.innerHTML = `<img src="${data}" alt="Handsome Man" />`;
- strip.insertBefore(link, strip.firsChild);
+ strip.insertBefore(link, strip.firstChild);
}
function redEffect(pixels) {
- for(let i = 0; i < pixels.data.length; i+=4) {
+ for (let i = 0; i < pixels.data.length; i+=4) {
pixels.data[i + 0] = pixels.data[i + 0] + 200; // RED
pixels.data[i + 1] = pixels.data[i + 1] - 50; // GREEN
pixels.data[i + 2] = pixels.data[i + 2] * 0.5; // Blue
@@ -62,7 +70,7 @@ function redEffect(pixels) {
}
function rgbSplit(pixels) {
- for(let i = 0; i < pixels.data.length; i+=4) {
+ for (let i = 0; i < pixels.data.length; i+=4) {
pixels.data[i - 150] = pixels.data[i + 0]; // RED
pixels.data[i + 500] = pixels.data[i + 1]; // GREEN
pixels.data[i - 550] = pixels.data[i + 2]; // Blue
@@ -99,4 +107,4 @@ function greenScreen(pixels) {
getVideo();
-video.addEventListener('canplay', paintToCanavas);
+video.addEventListener('canplay', paintToCanvas);
diff --git a/19 - Webcam Fun/snap.mp3 b/19 - Webcam Fun/snap.mp3
new file mode 100644
index 0000000000..16a288858a
Binary files /dev/null and b/19 - Webcam Fun/snap.mp3 differ
diff --git a/19 - Webcam Fun/style.css b/19 - Webcam Fun/style.css
index 4e8bee57c8..4a5bb622d6 100755
--- a/19 - Webcam Fun/style.css
+++ b/19 - Webcam Fun/style.css
@@ -8,14 +8,14 @@ html {
html {
font-size: 10px;
- background:#ffc600;
+ background: #ffc600;
}
.photobooth {
- background:white;
- max-width:150rem;
+ background: white;
+ max-width: 150rem;
margin: 2rem auto;
- border-radius:2px;
+ border-radius: 2px;
}
/*clearfix*/
@@ -26,13 +26,13 @@ html {
}
.photo {
- width:100%;
- float:left;
+ width: 100%;
+ float: left;
}
.player {
position: absolute;
- top:20px;
+ top: 20px;
right: 20px;
width:200px;
}
@@ -42,18 +42,19 @@ html {
*/
.strip {
- padding:2rem;
+ padding: 2rem;
}
+
.strip img {
- width:100px;
+ width: 100px;
overflow-x: scroll;
- padding:0.8rem 0.8rem 2.5rem 0.8rem;
- box-shadow:0 0 3px rgba(0,0,0,0.2);
- background:white;
+ padding: 0.8rem 0.8rem 2.5rem 0.8rem;
+ box-shadow: 0 0 3px rgba(0,0,0,0.2);
+ background: white;
}
-.strip a:nth-child(5n+1) img { rotate: 10deg; }
-.strip a:nth-child(5n+2) img { rotate: -2deg; }
-.strip a:nth-child(5n+3) img { rotate: 8deg; }
-.strip a:nth-child(5n+4) img { rotate: -11deg; }
-.strip a:nth-child(5n+5) img { rotate: 12deg; }
+.strip a:nth-child(5n+1) img { transform: rotate(10deg); }
+.strip a:nth-child(5n+2) img { transform: rotate(-2deg); }
+.strip a:nth-child(5n+3) img { transform: rotate(8deg); }
+.strip a:nth-child(5n+4) img { transform: rotate(-11deg); }
+.strip a:nth-child(5n+5) img { transform: rotate(12deg); }
diff --git a/20 - Speech Detection/index-FINISHED.html b/20 - Speech Detection/index-FINISHED.html
index 413c3eeaaf..e538b87b76 100644
--- a/20 - Speech Detection/index-FINISHED.html
+++ b/20 - Speech Detection/index-FINISHED.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Speech Detection</title>
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body>
@@ -14,6 +15,7 @@
const recognition = new SpeechRecognition();
recognition.interimResults = true;
+ recognition.lang = 'en-US';
let p = document.createElement('p');
const words = document.querySelector('.words');
@@ -47,26 +49,27 @@
}
body {
- background:#ffc600;
+ background: #ffc600;
font-family: 'helvetica neue';
font-weight: 200;
font-size: 20px;
}
.words {
- max-width:500px;
- margin:50px auto;
- background:white;
- border-radius:5px;
- box-shadow:10px 10px 0 rgba(0,0,0,0.1);
- padding:1rem 2rem 1rem 5rem;
+ max-width: 500px;
+ margin: 50px auto;
+ background: white;
+ border-radius: 5px;
+ box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
+ padding: 1rem 2rem 1rem 5rem;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
background-size: 100% 3rem;
position: relative;
- line-height:3rem;
+ line-height: 3rem;
}
+
p {
- margin: 0 0 3rem 0;
+ margin: 0 0 3rem;
}
.words:before {
diff --git a/20 - Speech Detection/index-START.html b/20 - Speech Detection/index-START.html
index d3395cca35..6b3c712533 100644
--- a/20 - Speech Detection/index-START.html
+++ b/20 - Speech Detection/index-START.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Speech Detection</title>
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
@@ -22,26 +23,27 @@
}
body {
- background:#ffc600;
+ background: #ffc600;
font-family: 'helvetica neue';
font-weight: 200;
font-size: 20px;
}
.words {
- max-width:500px;
- margin:50px auto;
- background:white;
- border-radius:5px;
- box-shadow:10px 10px 0 rgba(0,0,0,0.1);
- padding:1rem 2rem 1rem 5rem;
+ max-width: 500px;
+ margin: 50px auto;
+ background: white;
+ border-radius: 5px;
+ box-shadow: 10px 10px 0 rgba(0,0,0,0.1);
+ padding: 1rem 2rem 1rem 5rem;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;
background-size: 100% 3rem;
position: relative;
- line-height:3rem;
+ line-height: 3rem;
}
+
p {
- margin: 0 0 3rem 0;
+ margin: 0 0 3rem;
}
.words:before {
diff --git a/20 - Speech Detection/package.json b/20 - Speech Detection/package.json
index 5118ca0600..6a65e9225c 100755
--- a/20 - Speech Detection/package.json
+++ b/20 - Speech Detection/package.json
@@ -4,11 +4,11 @@
"description": "",
"main": "scripts.js",
"scripts": {
- "start" : "browser-sync start --directory --server --files '*.css, *.html, *.js'"
+ "start": "browser-sync start --directory --server --files \"*.css, *.html, *.js\""
},
"author": "",
"license": "ISC",
"devDependencies": {
- "browser-sync": "^2.12.5"
+ "browser-sync": "^2.12.5 <2.23.2"
}
}
diff --git a/21 - Geolocation/index-FINISHED.html b/21 - Geolocation/index-FINISHED.html
index 0f2ddecf2a..ab98927c9d 100644
--- a/21 - Geolocation/index-FINISHED.html
+++ b/21 - Geolocation/index-FINISHED.html
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width">
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body>
<svg class="arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve"><g><path fill="#ffffff" d="M32,1.824C15.361,1.824,1.825,15.361,1.825,32c0,16.639,13.537,30.176,30.175,30.176 S62.175,48.639,62.175,32C62.175,15.361,48.639,1.824,32,1.824z M29.715,3.988h1.12l2.333,3.807V3.988h1.069v5.701h-1.155 l-2.298-3.718v3.718h-1.069V3.988z M9.323,33.917H8.102l-1.136-4.262l-1.132,4.262H4.587l-1.361-5.701h1.178l0.859,3.916 l1.042-3.916h1.369l0.999,3.982l0.875-3.982h1.159L9.323,33.917z M33.995,59.828c-0.181,0.285-0.438,0.497-0.77,0.636 c-0.332,0.139-0.745,0.208-1.241,0.208c-0.721,0-1.274-0.167-1.661-0.5c-0.386-0.333-0.617-0.819-0.692-1.456l1.12-0.109 c0.067,0.376,0.204,0.652,0.41,0.828c0.206,0.176,0.484,0.264,0.834,0.264c0.371,0,0.65-0.078,0.838-0.235 c0.188-0.157,0.282-0.34,0.282-0.55c0-0.135-0.04-0.25-0.119-0.344c-0.079-0.095-0.217-0.177-0.414-0.247 c-0.135-0.047-0.442-0.13-0.922-0.249c-0.617-0.153-1.05-0.341-1.299-0.564c-0.35-0.314-0.525-0.696-0.525-1.147 c0-0.29,0.082-0.562,0.247-0.815c0.165-0.253,0.402-0.445,0.712-0.577c0.31-0.132,0.684-0.198,1.122-0.198 c0.716,0,1.254,0.157,1.616,0.471c0.362,0.314,0.552,0.733,0.57,1.256l-1.151,0.051c-0.049-0.293-0.155-0.504-0.317-0.632 c-0.162-0.128-0.405-0.193-0.729-0.193c-0.334,0-0.596,0.069-0.786,0.206c-0.122,0.088-0.183,0.206-0.183,0.354 c0,0.135,0.057,0.25,0.171,0.346c0.145,0.122,0.498,0.249,1.058,0.381c0.56,0.132,0.974,0.269,1.243,0.41 c0.268,0.141,0.478,0.334,0.63,0.58c0.152,0.245,0.227,0.548,0.227,0.908C34.267,59.237,34.176,59.543,33.995,59.828z M32,52.795 c-11.466,0-20.795-9.329-20.795-20.795c0-11.466,9.329-20.795,20.795-20.795S52.795,20.534,52.795,32 C52.795,43.466,43.466,52.795,32,52.795z M55.014,33.917v-5.701h4.227v0.965h-3.076v1.264h2.862v0.96h-2.862v1.552h3.185v0.961 H55.014z"/><g><path fill="#000000" d="M48.904,31.863c-4.074-1.358-8.148-2.717-12.226-4.066c-0.265-0.087-0.399-0.223-0.486-0.486 c-1.349-4.077-2.708-8.151-4.066-12.226c-0.029-0.087-0.074-0.169-0.132-0.3c-0.054,0.152-0.09,0.245-0.122,0.34 c-1.352,4.053-2.707,8.104-4.048,12.161c-0.096,0.292-0.246,0.428-0.532,0.522c-4.056,1.342-8.108,2.696-12.16,4.049 c-0.097,0.032-0.189,0.074-0.344,0.137c0.172,0.06,0.267,0.093,0.362,0.125c4.074,1.358,8.148,2.717,12.224,4.072 c0.204,0.068,0.337,0.158,0.412,0.386c1.243,3.757,2.498,7.511,3.75,11.265c0.144,0.432,0.291,0.862,0.463,1.373 c0.068-0.185,0.108-0.285,0.142-0.386c1.349-4.042,2.701-8.083,4.04-12.128c0.094-0.284,0.231-0.438,0.523-0.534 c4.056-1.341,8.108-2.696,12.161-4.048c0.099-0.033,0.195-0.076,0.347-0.137C49.067,31.925,48.987,31.891,48.904,31.863z M37.475,32.038c-1.316,0.439-2.631,0.879-3.947,1.314c-0.095,0.031-0.139,0.081-0.17,0.173c-0.434,1.313-0.873,2.625-1.311,3.937 c-0.012,0.033-0.024,0.066-0.046,0.126c-0.056-0.166-0.104-0.306-0.15-0.446c-0.407-1.219-0.814-2.437-1.218-3.657 c-0.025-0.074-0.068-0.104-0.134-0.125c-1.323-0.44-2.646-0.881-3.968-1.322c-0.031-0.01-0.062-0.022-0.118-0.041 c0.05-0.02,0.081-0.034,0.112-0.045c1.315-0.439,2.631-0.879,3.947-1.314c0.093-0.03,0.142-0.075,0.173-0.17 c0.435-1.316,0.875-2.632,1.314-3.947c0.01-0.031,0.022-0.062,0.039-0.11c0.019,0.042,0.033,0.069,0.043,0.097 c0.441,1.323,0.882,2.645,1.321,3.969c0.028,0.085,0.072,0.129,0.158,0.158c1.324,0.438,2.646,0.879,3.969,1.32 c0.027,0.009,0.053,0.02,0.1,0.038C37.538,32.013,37.507,32.027,37.475,32.038z"/><path fill="#000000" d="M24.436,27.633c-1.069-2.137-2.119-4.237-3.216-6.43c2.189,1.094,4.292,2.145,6.433,3.216 c-0.359,0.713-0.706,1.404-1.057,2.091c-0.023,0.045-0.078,0.082-0.127,0.106C25.807,26.949,25.143,27.28,24.436,27.633z"/><path fill="#000000" d="M39.573,27.632c-0.696-0.348-1.351-0.673-2.002-1.005c-0.076-0.038-0.155-0.104-0.193-0.177 c-0.338-0.661-0.666-1.326-1.019-2.033c2.121-1.061,4.228-2.115,6.43-3.217C41.69,23.399,40.635,25.509,39.573,27.632z"/><path fill="#000000" d="M24.436,36.339c0.712,0.357,1.394,0.698,2.074,1.043c0.046,0.024,0.088,0.073,0.113,0.121 c0.339,0.671,0.674,1.345,1.028,2.051c-2.126,1.063-4.232,2.117-6.43,3.216C22.317,40.577,23.37,38.472,24.436,36.339z"/><path fill="#000000" d="M36.358,39.555c0.354-0.707,0.688-1.38,1.028-2.05c0.028-0.056,0.084-0.111,0.14-0.139 c0.67-0.339,1.343-0.674,2.047-1.026c1.066,2.131,2.118,4.235,3.215,6.43C40.601,41.676,38.503,40.628,36.358,39.555z"/></g></g></svg>
@@ -18,10 +19,12 @@ <h1 class="speed">
html {
font-size: 100px;
}
+
body {
+ margin: 0;
font-family: sans-serif;
- min-height:100vh;
- display:flex;
+ min-height: 100vh;
+ display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
@@ -30,24 +33,24 @@ <h1 class="speed">
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
- background-color:#282828;
- background-size:16px 16px;
- background-position: fixed;
+ background-color: #282828;
+ background-size: 16px 16px;
+ background-attachment: fixed;
}
.arrow {
- width:250px;
+ width: 250px;
overflow: hidden;
transition: all 0.2s;
- transform:rotate(0deg);
+ transform: rotate(0deg);
display: inline-block;
}
h1 {
- color:white;
+ color: white;
font-weight: 100;
font-size: 60px;
- display:flex;
+ display: flex;
align-items: center;
}
diff --git a/21 - Geolocation/index-START.html b/21 - Geolocation/index-START.html
index d794c144ba..b59c533663 100644
--- a/21 - Geolocation/index-START.html
+++ b/21 - Geolocation/index-START.html
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width">
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
<svg class="arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve"><g><path fill="#ffffff" d="M32,1.824C15.361,1.824,1.825,15.361,1.825,32c0,16.639,13.537,30.176,30.175,30.176 S62.175,48.639,62.175,32C62.175,15.361,48.639,1.824,32,1.824z M29.715,3.988h1.12l2.333,3.807V3.988h1.069v5.701h-1.155 l-2.298-3.718v3.718h-1.069V3.988z M9.323,33.917H8.102l-1.136-4.262l-1.132,4.262H4.587l-1.361-5.701h1.178l0.859,3.916 l1.042-3.916h1.369l0.999,3.982l0.875-3.982h1.159L9.323,33.917z M33.995,59.828c-0.181,0.285-0.438,0.497-0.77,0.636 c-0.332,0.139-0.745,0.208-1.241,0.208c-0.721,0-1.274-0.167-1.661-0.5c-0.386-0.333-0.617-0.819-0.692-1.456l1.12-0.109 c0.067,0.376,0.204,0.652,0.41,0.828c0.206,0.176,0.484,0.264,0.834,0.264c0.371,0,0.65-0.078,0.838-0.235 c0.188-0.157,0.282-0.34,0.282-0.55c0-0.135-0.04-0.25-0.119-0.344c-0.079-0.095-0.217-0.177-0.414-0.247 c-0.135-0.047-0.442-0.13-0.922-0.249c-0.617-0.153-1.05-0.341-1.299-0.564c-0.35-0.314-0.525-0.696-0.525-1.147 c0-0.29,0.082-0.562,0.247-0.815c0.165-0.253,0.402-0.445,0.712-0.577c0.31-0.132,0.684-0.198,1.122-0.198 c0.716,0,1.254,0.157,1.616,0.471c0.362,0.314,0.552,0.733,0.57,1.256l-1.151,0.051c-0.049-0.293-0.155-0.504-0.317-0.632 c-0.162-0.128-0.405-0.193-0.729-0.193c-0.334,0-0.596,0.069-0.786,0.206c-0.122,0.088-0.183,0.206-0.183,0.354 c0,0.135,0.057,0.25,0.171,0.346c0.145,0.122,0.498,0.249,1.058,0.381c0.56,0.132,0.974,0.269,1.243,0.41 c0.268,0.141,0.478,0.334,0.63,0.58c0.152,0.245,0.227,0.548,0.227,0.908C34.267,59.237,34.176,59.543,33.995,59.828z M32,52.795 c-11.466,0-20.795-9.329-20.795-20.795c0-11.466,9.329-20.795,20.795-20.795S52.795,20.534,52.795,32 C52.795,43.466,43.466,52.795,32,52.795z M55.014,33.917v-5.701h4.227v0.965h-3.076v1.264h2.862v0.96h-2.862v1.552h3.185v0.961 H55.014z"/><g><path fill="#000000" d="M48.904,31.863c-4.074-1.358-8.148-2.717-12.226-4.066c-0.265-0.087-0.399-0.223-0.486-0.486 c-1.349-4.077-2.708-8.151-4.066-12.226c-0.029-0.087-0.074-0.169-0.132-0.3c-0.054,0.152-0.09,0.245-0.122,0.34 c-1.352,4.053-2.707,8.104-4.048,12.161c-0.096,0.292-0.246,0.428-0.532,0.522c-4.056,1.342-8.108,2.696-12.16,4.049 c-0.097,0.032-0.189,0.074-0.344,0.137c0.172,0.06,0.267,0.093,0.362,0.125c4.074,1.358,8.148,2.717,12.224,4.072 c0.204,0.068,0.337,0.158,0.412,0.386c1.243,3.757,2.498,7.511,3.75,11.265c0.144,0.432,0.291,0.862,0.463,1.373 c0.068-0.185,0.108-0.285,0.142-0.386c1.349-4.042,2.701-8.083,4.04-12.128c0.094-0.284,0.231-0.438,0.523-0.534 c4.056-1.341,8.108-2.696,12.161-4.048c0.099-0.033,0.195-0.076,0.347-0.137C49.067,31.925,48.987,31.891,48.904,31.863z M37.475,32.038c-1.316,0.439-2.631,0.879-3.947,1.314c-0.095,0.031-0.139,0.081-0.17,0.173c-0.434,1.313-0.873,2.625-1.311,3.937 c-0.012,0.033-0.024,0.066-0.046,0.126c-0.056-0.166-0.104-0.306-0.15-0.446c-0.407-1.219-0.814-2.437-1.218-3.657 c-0.025-0.074-0.068-0.104-0.134-0.125c-1.323-0.44-2.646-0.881-3.968-1.322c-0.031-0.01-0.062-0.022-0.118-0.041 c0.05-0.02,0.081-0.034,0.112-0.045c1.315-0.439,2.631-0.879,3.947-1.314c0.093-0.03,0.142-0.075,0.173-0.17 c0.435-1.316,0.875-2.632,1.314-3.947c0.01-0.031,0.022-0.062,0.039-0.11c0.019,0.042,0.033,0.069,0.043,0.097 c0.441,1.323,0.882,2.645,1.321,3.969c0.028,0.085,0.072,0.129,0.158,0.158c1.324,0.438,2.646,0.879,3.969,1.32 c0.027,0.009,0.053,0.02,0.1,0.038C37.538,32.013,37.507,32.027,37.475,32.038z"/><path fill="#000000" d="M24.436,27.633c-1.069-2.137-2.119-4.237-3.216-6.43c2.189,1.094,4.292,2.145,6.433,3.216 c-0.359,0.713-0.706,1.404-1.057,2.091c-0.023,0.045-0.078,0.082-0.127,0.106C25.807,26.949,25.143,27.28,24.436,27.633z"/><path fill="#000000" d="M39.573,27.632c-0.696-0.348-1.351-0.673-2.002-1.005c-0.076-0.038-0.155-0.104-0.193-0.177 c-0.338-0.661-0.666-1.326-1.019-2.033c2.121-1.061,4.228-2.115,6.43-3.217C41.69,23.399,40.635,25.509,39.573,27.632z"/><path fill="#000000" d="M24.436,36.339c0.712,0.357,1.394,0.698,2.074,1.043c0.046,0.024,0.088,0.073,0.113,0.121 c0.339,0.671,0.674,1.345,1.028,2.051c-2.126,1.063-4.232,2.117-6.43,3.216C22.317,40.577,23.37,38.472,24.436,36.339z"/><path fill="#000000" d="M36.358,39.555c0.354-0.707,0.688-1.38,1.028-2.05c0.028-0.056,0.084-0.111,0.14-0.139 c0.67-0.339,1.343-0.674,2.047-1.026c1.066,2.131,2.118,4.235,3.215,6.43C40.601,41.676,38.503,40.628,36.358,39.555z"/></g></g></svg>
@@ -18,10 +19,12 @@ <h1 class="speed">
html {
font-size: 100px;
}
+
body {
+ margin: 0;
font-family: sans-serif;
- min-height:100vh;
- display:flex;
+ min-height: 100vh;
+ display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
@@ -30,24 +33,24 @@ <h1 class="speed">
radial-gradient(black 15%, transparent 16%) 8px 8px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
- background-color:#282828;
- background-size:16px 16px;
- background-position: fixed;
+ background-color: #282828;
+ background-size: 16px 16px;
+ background-attachment: fixed;
}
.arrow {
- width:250px;
+ width: 250px;
overflow: hidden;
transition: all 0.2s;
- transform:rotate(0deg);
+ transform: rotate(0deg);
display: inline-block;
}
h1 {
- color:white;
+ color: white;
font-weight: 100;
font-size: 60px;
- display:flex;
+ display: flex;
align-items: center;
}
@@ -57,18 +60,6 @@ <h1 class="speed">
/*Compass: https://thenounproject.com/search/?q=compass&i=592352*/
</style>
<script>
- const arrow = document.querySelector('.arrow');
- const speed = document.querySelector('.speed-value');
-
- navigator.geolocation.watchPosition((data) => {
- console.log(data);
- speed.textContent = data.coords.speed;
- arrow.style.transform = `rotate(${data.coords.heading}deg)`;
- }, (err) => {
- console.err(err);
- alert('HEY! YOU GOTTA ALLOW THAT TO HAPPEN!!!');
- });
-
</script>
</body>
</html>
diff --git a/21 - Geolocation/package.json b/21 - Geolocation/package.json
index 80b7e68219..aad6fe2edc 100755
--- a/21 - Geolocation/package.json
+++ b/21 - Geolocation/package.json
@@ -4,11 +4,11 @@
"description": "",
"main": "scripts.js",
"scripts": {
- "start" : "browser-sync start --directory --server --files '*.css, *.html, *.js' --https"
+ "start": "browser-sync start --directory --server --files \"*.css, *.html, *.js\" --https"
},
"author": "",
"license": "ISC",
"devDependencies": {
- "browser-sync": "^2.12.5"
+ "browser-sync": "^2.12.5 <2.23.2"
}
}
diff --git a/22 - Follow Along Link Highlighter/index-FINISHED.html b/22 - Follow Along Link Highlighter/index-FINISHED.html
index 74bd06e321..103579c109 100644
--- a/22 - Follow Along Link Highlighter/index-FINISHED.html
+++ b/22 - Follow Along Link Highlighter/index-FINISHED.html
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<title>๐๐๐Follow Along Nav</title>
<link rel="stylesheet" href="style.css">
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body>
@@ -29,7 +30,7 @@
const triggers = document.querySelectorAll('a');
const highlight = document.createElement('span');
highlight.classList.add('highlight');
- document.body.append(highlight);
+ document.body.appendChild(highlight);
function highlightLink() {
const linkCoords = this.getBoundingClientRect();
diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index-START.html
index 8476112b5e..6b972dc067 100644
--- a/22 - Follow Along Link Highlighter/index-START.html
+++ b/22 - Follow Along Link Highlighter/index-START.html
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<title>๐๐๐Follow Along Nav</title>
<link rel="stylesheet" href="style.css">
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
diff --git a/22 - Follow Along Link Highlighter/style.css b/22 - Follow Along Link Highlighter/style.css
index 222e27ae68..dfd88ef1be 100644
--- a/22 - Follow Along Link Highlighter/style.css
+++ b/22 - Follow Along Link Highlighter/style.css
@@ -1,9 +1,11 @@
html {
box-sizing: border-box;
}
+
*, *:before, *:after {
box-sizing: inherit;
}
+
body {
min-height: 100vh;
margin: 0; /* Important! */
@@ -16,8 +18,8 @@ body {
}
.wrapper {
- margin:0 auto;
- max-width:500px;
+ margin: 0 auto;
+ max-width: 500px;
font-size: 20px;
line-height: 2;
position: relative;
@@ -25,22 +27,22 @@ body {
a {
text-decoration: none;
- color:black;
- background:rgba(0,0,0,0.05);
- border-radius: 20px
+ color: black;
+ background: rgba(0,0,0,0.05);
+ border-radius: 20px;
}
.highlight {
transition: all 0.2s;
- border-bottom:2px solid white;
+ border-bottom: 2px solid white;
position: absolute;
- top:0;
- background:white;
- left:0;
+ top: 0;
+ background: white;
+ left: 0;
z-index: -1;
- border-radius:20px;
+ border-radius: 20px;
display: block;
- box-shadow: 0 0 10px rgba(0,0,0,0.2)
+ box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.menu {
@@ -53,7 +55,7 @@ a {
.menu a {
display: inline-block;
- padding:5px;
- margin:0 20px;
- color:black;
+ padding: 5px;
+ margin: 0 20px;
+ color: black;
}
diff --git a/23 - Speech Synthesis/index-FINISHED.html b/23 - Speech Synthesis/index-FINISHED.html
index 5ea9a4a8e7..8127931af7 100644
--- a/23 - Speech Synthesis/index-FINISHED.html
+++ b/23 - Speech Synthesis/index-FINISHED.html
@@ -5,6 +5,7 @@
<title>Speech Synthesis</title>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body>
diff --git a/23 - Speech Synthesis/index-START.html b/23 - Speech Synthesis/index-START.html
index e890008d36..246caa2846 100644
--- a/23 - Speech Synthesis/index-START.html
+++ b/23 - Speech Synthesis/index-START.html
@@ -5,6 +5,7 @@
<title>Speech Synthesis</title>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
diff --git a/23 - Speech Synthesis/style.css b/23 - Speech Synthesis/style.css
index 0e44fd0522..72d210062f 100644
--- a/23 - Speech Synthesis/style.css
+++ b/23 - Speech Synthesis/style.css
@@ -8,10 +8,11 @@ html {
}
body {
+ margin: 0;
padding: 0;
font-family: sans-serif;
- background-color:#3BC1AC;
- display:flex;
+ background-color: #3BC1AC;
+ display: flex;
min-height: 100vh;
align-items: center;
@@ -24,34 +25,29 @@ body {
background-size:100px 50px;
}
-
.voiceinator {
- padding:2rem;
- width:50rem;
- margin:0 auto;
- border-radius:1rem;
+ padding: 2rem;
+ width: 50rem;
+ margin: 0 auto;
+ border-radius: 1rem;
position: relative;
- background:white;
+ background: white;
overflow: hidden;
z-index: 1;
- box-shadow:0 0 5px 5px rgba(0,0,0,0.1);
+ box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);
}
h1 {
- width:calc(100% + 4rem);
- margin: 0;
- margin-left: -2rem;
- margin-top: -2rem;
- margin-bottom: 2rem;
- padding:.5rem;
+ width: calc(100% + 4rem);
+ margin: -2rem 0 2rem -2rem;
+ padding: .5rem;
background: #ffc600;
border-bottom: 5px solid #F3C010;
text-align: center;
font-size: 5rem;
font-weight: 100;
font-family: 'Pacifico', cursive;
- text-shadow:3px 3px 0 #F3C010;
-
+ text-shadow: 3px 3px 0 #F3C010;
}
.voiceinator input,
@@ -60,37 +56,33 @@ h1 {
.voiceinator textarea {
width: 100%;
display: block;
- margin:10px 0;
- padding:10px;
- border:0;
+ margin: 10px 0;
+ padding: 10px;
+ border: 0;
font-size: 2rem;
- background:#F7F7F7;
- outline:0;
+ background: #F7F7F7;
+ outline: 0;
}
textarea {
height: 20rem;
}
-input[type="select"] {
-
-}
-
.voiceinator button {
- background:#ffc600;
- border:0;
+ background: #ffc600;
+ border: 0;
width: 49%;
- float:left;
+ float: left;
font-family: 'Pacifico', cursive;
margin-bottom: 0;
font-size: 2rem;
border-bottom: 5px solid #F3C010;
- cursor:pointer;
+ cursor: pointer;
position: relative;
}
.voiceinator button:active {
- top:2px;
+ top: 2px;
}
.voiceinator button:nth-of-type(1) {
diff --git a/24 - Sticky Nav/index-FINISHED.html b/24 - Sticky Nav/index-FINISHED.html
index 2e5961192c..4184dc6131 100644
--- a/24 - Sticky Nav/index-FINISHED.html
+++ b/24 - Sticky Nav/index-FINISHED.html
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style-FINISHED.css">
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body>
@@ -49,7 +50,7 @@ <h1>A story about getting lost.</h1>
let topOfNav = nav.offsetTop;
function fixNav() {
- if(window.scrollY >= topOfNav) {
+ if (window.scrollY >= topOfNav) {
document.body.style.paddingTop = nav.offsetHeight + 'px';
document.body.classList.add('fixed-nav');
} else {
diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html
index e7bc67e9a5..9bf3d01f2c 100644
--- a/24 - Sticky Nav/index-START.html
+++ b/24 - Sticky Nav/index-START.html
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<title>Sticky Nav</title>
<link rel="stylesheet" href="style-START.css">
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
diff --git a/24 - Sticky Nav/style-FINISHED.css b/24 - Sticky Nav/style-FINISHED.css
index b551473357..0f8df57cb9 100644
--- a/24 - Sticky Nav/style-FINISHED.css
+++ b/24 - Sticky Nav/style-FINISHED.css
@@ -1,13 +1,15 @@
html {
box-sizing: border-box;
- background:#eeeeee;
- font-family:'helvetica neue';
+ background: #eeeeee;
+ font-family: 'helvetica neue';
font-size: 20px;
font-weight: 200;
}
+
body {
margin: 0;
}
+
*, *:before, *:after {
box-sizing: inherit;
}
@@ -15,8 +17,8 @@ body {
.site-wrap {
max-width: 700px;
margin: 70px auto;
- background:white;
- padding:40px;
+ background: white;
+ padding: 40px;
text-align: justify;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
transform: scale(0.98);
@@ -27,26 +29,25 @@ body.fixed-nav .site-wrap {
transform: scale(1);
}
-
header {
text-align: center;
- height:50vh;
- background:url(http://wes.io/iEgP/wow-so-deep.jpg) bottom center no-repeat;
- background-size:cover;
- display:flex;
- align-items:center;
+ height: 50vh;
+ background: url(https://source.unsplash.com/GKN6rpDr0EI/960x640) bottom center no-repeat;
+ background-size: cover;
+ display: flex;
+ align-items: center;
justify-content: center;
}
h1 {
- color:white;
+ color: white;
font-size: 7vw;
- text-shadow: 3px 4px 0 rgba(0,0,0,0.2)
+ text-shadow: 3px 4px 0 rgba(0,0,0,0.2);
}
nav {
- background:black;
- top:0;
+ background: black;
+ top: 0;
width: 100%;
transition:all 0.5s;
position: relative;
@@ -55,18 +56,18 @@ nav {
body.fixed-nav nav {
position: fixed;
- box-shadow:0 5px 0 rgba(0,0,0,0.1);
+ box-shadow: 0 5px 0 rgba(0,0,0,0.1);
}
nav ul {
margin: 0;
- padding:0;
+ padding: 0;
list-style: none;
- display:flex;
+ display: flex;
}
nav li {
- flex:1;
+ flex: 1;
text-align: center;
display: flex;
justify-content: center;
@@ -74,7 +75,7 @@ nav li {
}
li.logo {
- max-width:0;
+ max-width: 0;
overflow: hidden;
background: white;
transition: all 0.5s;
@@ -83,18 +84,18 @@ li.logo {
}
li.logo a {
- color:black;
+ color: black;
}
.fixed-nav li.logo {
- max-width:500px;
+ max-width: 500px;
}
nav a {
text-decoration: none;
- padding:20px;
+ padding: 20px;
display: inline-block;
- color:white;
- transition:all 0.2s;
+ color: white;
+ transition: all 0.2s;
text-transform: uppercase;
}
diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css
index c6d59a31b3..ef2bc15845 100644
--- a/24 - Sticky Nav/style-START.css
+++ b/24 - Sticky Nav/style-START.css
@@ -1,13 +1,15 @@
html {
box-sizing: border-box;
- background:#eeeeee;
- font-family:'helvetica neue';
+ background: #eeeeee;
+ font-family: 'helvetica neue';
font-size: 20px;
font-weight: 200;
}
+
body {
margin: 0;
}
+
*, *:before, *:after {
box-sizing: inherit;
}
@@ -15,8 +17,8 @@ body {
.site-wrap {
max-width: 700px;
margin: 70px auto;
- background:white;
- padding:40px;
+ background: white;
+ padding: 40px;
text-align: justify;
box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
transform: scale(0.98);
@@ -25,25 +27,25 @@ body {
header {
text-align: center;
- height:50vh;
- background:url(http://wes.io/iEgP/wow-so-deep.jpg) bottom center no-repeat;
- background-size:cover;
- display:flex;
- align-items:center;
+ height: 50vh;
+ background: url(https://source.unsplash.com/GKN6rpDr0EI/960x640) bottom center no-repeat;
+ background-size: cover;
+ display: flex;
+ align-items: center;
justify-content: center;
}
h1 {
- color:white;
+ color: white;
font-size: 7vw;
- text-shadow: 3px 4px 0 rgba(0,0,0,0.2)
+ text-shadow: 3px 4px 0 rgba(0,0,0,0.2);
}
nav {
- background:black;
- top:0;
+ background: black;
+ top: 0;
width: 100%;
- transition:all 0.5s;
+ transition: all 0.5s;
position: relative;
z-index: 1;
}
@@ -52,11 +54,11 @@ nav ul {
margin: 0;
padding:0;
list-style: none;
- display:flex;
+ display: flex;
}
nav li {
- flex:1;
+ flex: 1;
text-align: center;
display: flex;
justify-content: center;
@@ -64,7 +66,7 @@ nav li {
}
li.logo {
- max-width:0;
+ max-width: 0;
overflow: hidden;
background: white;
transition: all .5s;
@@ -73,14 +75,14 @@ li.logo {
}
li.logo a {
- color:black;
+ color: black;
}
nav a {
text-decoration: none;
- padding:20px;
+ padding: 20px;
display: inline-block;
- color:white;
- transition:all 0.2s;
+ color: white;
+ transition: all 0.2s;
text-transform: uppercase;
}
diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-FINISHED.html b/25 - Event Capture, Propagation, Bubbling and Once/index-FINISHED.html
index 8856df9d89..49caca9375 100644
--- a/25 - Event Capture, Propagation, Bubbling and Once/index-FINISHED.html
+++ b/25 - Event Capture, Propagation, Bubbling and Once/index-FINISHED.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Understanding JavaScript's Capture</title>
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body class="bod">
@@ -17,11 +18,14 @@
html {
box-sizing: border-box;
}
- *, *:before, *:after { box-sizing: inherit; }
+
+ *, *:before, *:after {
+ box-sizing: inherit;
+ }
div {
- width:100%;
- padding:100px;
+ width: 100%;
+ padding: 100px;
}
.one {
@@ -29,11 +33,11 @@
}
.two {
- background:mistyrose;
+ background: mistyrose;
}
.three {
- background:coral;
+ background: coral;
}
</style>
diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html
index 98f5e070c4..35783bff72 100644
--- a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html
+++ b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Understanding JavaScript's Capture</title>
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body class="bod">
@@ -17,11 +18,14 @@
html {
box-sizing: border-box;
}
- *, *:before, *:after { box-sizing: inherit; }
+
+ *, *:before, *:after {
+ box-sizing: inherit;
+ }
div {
- width:100%;
- padding:100px;
+ width: 100%;
+ padding: 100px;
}
.one {
@@ -29,11 +33,11 @@
}
.two {
- background:mistyrose;
+ background: mistyrose;
}
.three {
- background:coral;
+ background: coral;
}
</style>
diff --git a/26 - Stripe Follow Along Nav/index-FINISHED.html b/26 - Stripe Follow Along Nav/index-FINISHED.html
index 9cf05f388d..53aaa8ea9d 100644
--- a/26 - Stripe Follow Along Nav/index-FINISHED.html
+++ b/26 - Stripe Follow Along Nav/index-FINISHED.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Follow Along Nav</title>
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body>
<h2>Cool</h2>
@@ -32,13 +33,21 @@ <h2>Cool</h2>
<span class="code">ES6</span>
<a href="https://ES6.io">ES6 For Everyone</a>
</li>
+ <li>
+ <span class="code">NODE</span>
+ <a href="https://LearnNode.com">Learn Node</a>
+ </li>
<li>
<span class="code">STPU</span>
<a href="https://SublimeTextBook.com">Sublime Text Power User</a>
</li>
<li>
<span class="code">WTF</span>
- <a href="http://flexbox.io">What The Flexbox?!</a>
+ <a href="http://Flexbox.io">What The Flexbox?!</a>
+ </li>
+ <li>
+ <span class="code">GRID</span>
+ <a href="https://CSSGrid.io">CSS Grid</a>
</li>
<li>
<span class="code">LRX</span>
@@ -57,7 +66,7 @@ <h2>Cool</h2>
<li>
<a href="#">Other Links</a>
<ul class="dropdown dropdown3">
- <li><a class="button" href="http://twitter.com/wesbos">Twiter</a></li>
+ <li><a class="button" href="http://twitter.com/wesbos">Twitter</a></li>
<li><a class="button" href="http://facebook.com/wesbos.developer">Facebook</a></li>
<li><a class="button" href="http://wesbos.com">Blog</a></li>
<li><a class="button" href="http://wesbos.com/courses">Course Catalog</a></li>
@@ -69,12 +78,15 @@ <h2>Cool</h2>
<style>
html {
box-sizing: border-box;
- font-family: "Arial Rounded MT Bold","Helvetica Rounded",Arial,sans-serif
+ font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
}
+
*, *:before, *:after {
box-sizing: inherit;
}
+
body {
+ margin: 0;
min-height: 100vh;
background:
linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%),
@@ -83,6 +95,11 @@ <h2>Cool</h2>
linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
}
+ h2 {
+ margin-top: 0;
+ padding-top: .8em;
+ }
+
nav {
position: relative;
perspective: 600px;
@@ -93,10 +110,10 @@ <h2>Cool</h2>
text-decoration: none;
font-size: 20px;
background: rgba(0,0,0,0.2);
- padding:10px 20px;
+ padding: 10px 20px;
display: inline-block;
- margin:20px;
- border-radius:5px;
+ margin: 20px;
+ border-radius: 5px;
}
nav ul {
@@ -109,7 +126,7 @@ <h2>Cool</h2>
.cool > li {
position: relative;
- display:flex;
+ display: flex;
justify-content: center;
}
@@ -117,12 +134,12 @@ <h2>Cool</h2>
opacity: 0;
position: absolute;
overflow: hidden;
- padding:20px;
- top:-20px;
- border-radius:2px;
+ padding: 20px;
+ top: -20px;
+ border-radius: 2px;
transition: all 0.5s;
transform: translateY(100px);
- will-change: transform;
+ will-change: opacity;
display: none;
}
@@ -134,20 +151,18 @@ <h2>Cool</h2>
opacity: 1;
}
-
-
.dropdownBackground {
- width:100px;
- height:100px;
+ width: 100px;
+ height: 100px;
position: absolute;
background: #fff;
border-radius: 4px;
box-shadow: 0 50px 100px rgba(50,50,93,.1), 0 15px 35px rgba(50,50,93,.15), 0 5px 15px rgba(0,0,0,.1);
- transition:all 0.3s, opacity 0.1s, translate 0.2s;
- transform-origin: 50% 0%;
+ transition: all 0.3s, opacity 0.1s, transform 0.2s;
+ transform-origin: 50% 0;
display: flex;
justify-content: center;
- opacity:0;
+ opacity: 0;
}
.dropdownBackground.open {
@@ -156,28 +171,28 @@ <h2>Cool</h2>
.arrow {
position: absolute;
- width:20px;
- height:20px;
+ width: 20px;
+ height: 20px;
display: block;
- background:white;
+ background: white;
transform: translateY(-50%) rotate(45deg);
}
.bio {
- min-width:500px;
- display:flex;
+ min-width: 500px;
+ display: flex;
justify-content: center;
align-items: center;
line-height: 1.7;
}
.bio img {
- float:left;
- margin-right:20px;
+ float: left;
+ margin-right: 20px;
}
.courses {
- min-width:300px;
+ min-width: 300px;
}
.courses li {
@@ -192,19 +207,17 @@ <h2>Cool</h2>
}
a.button {
- background:black;
+ background: black;
display: block;
- padding:10px;
- color:white;
+ padding: 10px;
+ color: white;
margin-bottom: 10px;
}
-
/* Matches Twitter, TWITTER, twitter, tWitter, TWiTTeR... */
.button[href*=twitter] { background: #019FE9; }
.button[href*=facebook] { background: #3B5998; }
.button[href*=courses] { background: #ffc600; }
-
</style>
<script>
diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html
index 9780d0d1ac..6bbbfbad44 100644
--- a/26 - Stripe Follow Along Nav/index-START.html
+++ b/26 - Stripe Follow Along Nav/index-START.html
@@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>Follow Along Nav</title>
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
<h2>Cool</h2>
@@ -32,13 +33,21 @@ <h2>Cool</h2>
<span class="code">ES6</span>
<a href="https://ES6.io">ES6 For Everyone</a>
</li>
+ <li>
+ <span class="code">NODE</span>
+ <a href="https://LearnNode.com">Learn Node</a>
+ </li>
<li>
<span class="code">STPU</span>
<a href="https://SublimeTextBook.com">Sublime Text Power User</a>
</li>
<li>
<span class="code">WTF</span>
- <a href="http://flexbox.io">What The Flexbox?!</a>
+ <a href="http://Flexbox.io">What The Flexbox?!</a>
+ </li>
+ <li>
+ <span class="code">GRID</span>
+ <a href="https://CSSGrid.io">CSS Grid</a>
</li>
<li>
<span class="code">LRX</span>
@@ -57,7 +66,7 @@ <h2>Cool</h2>
<li>
<a href="#">Other Links</a>
<ul class="dropdown dropdown3">
- <li><a class="button" href="http://twitter.com/wesbos">Twiter</a></li>
+ <li><a class="button" href="http://twitter.com/wesbos">Twitter</a></li>
<li><a class="button" href="http://facebook.com/wesbos.developer">Facebook</a></li>
<li><a class="button" href="http://wesbos.com">Blog</a></li>
<li><a class="button" href="http://wesbos.com/courses">Course Catalog</a></li>
@@ -69,12 +78,15 @@ <h2>Cool</h2>
<style>
html {
box-sizing: border-box;
- font-family: "Arial Rounded MT Bold","Helvetica Rounded",Arial,sans-serif
+ font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
}
+
*, *:before, *:after {
box-sizing: inherit;
}
+
body {
+ margin: 0;
min-height: 100vh;
background:
linear-gradient(45deg, hsla(340, 100%, 55%, 1) 0%, hsla(340, 100%, 55%, 0) 70%),
@@ -83,6 +95,11 @@ <h2>Cool</h2>
linear-gradient(315deg, hsla(35, 95%, 55%, 1) 100%, hsla(35, 95%, 55%, 0) 70%);
}
+ h2 {
+ margin-top: 0;
+ padding-top: .8em;
+ }
+
nav {
position: relative;
perspective: 600px;
@@ -93,10 +110,10 @@ <h2>Cool</h2>
text-decoration: none;
font-size: 20px;
background: rgba(0,0,0,0.2);
- padding:10px 20px;
+ padding: 10px 20px;
display: inline-block;
- margin:20px;
- border-radius:5px;
+ margin: 20px;
+ border-radius: 5px;
}
nav ul {
@@ -109,7 +126,7 @@ <h2>Cool</h2>
.cool > li {
position: relative;
- display:flex;
+ display: flex;
justify-content: center;
}
@@ -117,12 +134,12 @@ <h2>Cool</h2>
opacity: 0;
position: absolute;
overflow: hidden;
- padding:20px;
- top:-20px;
- border-radius:2px;
+ padding: 20px;
+ top: -20px;
+ border-radius: 2px;
transition: all 0.5s;
transform: translateY(100px);
- will-change: transform;
+ will-change: opacity;
display: none;
}
@@ -134,17 +151,15 @@ <h2>Cool</h2>
opacity: 1;
}
-
-
.dropdownBackground {
- width:100px;
- height:100px;
+ width: 100px;
+ height: 100px;
position: absolute;
background: #fff;
border-radius: 4px;
box-shadow: 0 50px 100px rgba(50,50,93,.1), 0 15px 35px rgba(50,50,93,.15), 0 5px 15px rgba(0,0,0,.1);
- transition:all 0.3s, opacity 0.1s, translate 0.2s;
- transform-origin: 50% 0%;
+ transition: all 0.3s, opacity 0.1s, transform 0.2s;
+ transform-origin: 50% 0;
display: flex;
justify-content: center;
opacity:0;
@@ -156,28 +171,28 @@ <h2>Cool</h2>
.arrow {
position: absolute;
- width:20px;
- height:20px;
+ width: 20px;
+ height: 20px;
display: block;
- background:white;
+ background: white;
transform: translateY(-50%) rotate(45deg);
}
.bio {
- min-width:500px;
- display:flex;
+ min-width: 500px;
+ display: flex;
justify-content: center;
align-items: center;
line-height: 1.7;
}
.bio img {
- float:left;
- margin-right:20px;
+ float: left;
+ margin-right: 20px;
}
.courses {
- min-width:300px;
+ min-width: 300px;
}
.courses li {
@@ -192,19 +207,17 @@ <h2>Cool</h2>
}
a.button {
- background:black;
+ background: black;
display: block;
- padding:10px;
- color:white;
+ padding: 10px;
+ color: white;
margin-bottom: 10px;
}
-
/* Matches Twitter, TWITTER, twitter, tWitter, TWiTTeR... */
.button[href*=twitter] { background: #019FE9; }
.button[href*=facebook] { background: #3B5998; }
.button[href*=courses] { background: #ffc600; }
-
</style>
<script>
diff --git a/27 - Click and Drag/index-FINISHED.html b/27 - Click and Drag/index-FINISHED.html
index 52eb86628c..fcbe4f0c44 100644
--- a/27 - Click and Drag/index-FINISHED.html
+++ b/27 - Click and Drag/index-FINISHED.html
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<title>Click and Drag</title>
<link rel="stylesheet" href="style.css">
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body>
<div class="items">
diff --git a/27 - Click and Drag/index-START.html b/27 - Click and Drag/index-START.html
index b8609315f7..5dc6d3d1ba 100644
--- a/27 - Click and Drag/index-START.html
+++ b/27 - Click and Drag/index-START.html
@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<title>Click and Drag</title>
<link rel="stylesheet" href="style.css">
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
<div class="items">
diff --git a/27 - Click and Drag/style.css b/27 - Click and Drag/style.css
index 209b32cae5..debd09247a 100644
--- a/27 - Click and Drag/style.css
+++ b/27 - Click and Drag/style.css
@@ -19,11 +19,10 @@ body {
}
.items {
- height:800px;
+ height: 800px;
padding: 100px;
- width:100%;
- border:1px solid white;
- box-shadow: 0 0 10px 7px rgba(0, 0, 0, 0.09);
+ width: 100%;
+ border: 1px solid white;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
@@ -31,6 +30,7 @@ body {
cursor: pointer;
transition: all 0.2s;
transform: scale(0.98);
+ will-change: transform;
position: relative;
background: rgba(255,255,255,0.1);
font-size: 0;
@@ -45,14 +45,14 @@ body {
}
.item {
- width:200px;
+ width: 200px;
height: calc(100% - 40px);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 80px;
font-weight: 100;
- color:rgba(0,0,0,0.15);
+ color: rgba(0,0,0,0.15);
box-shadow: inset 0 0 0 10px rgba(0,0,0,0.15);
}
@@ -68,9 +68,3 @@ body {
.item:nth-child(even) { transform: scaleX(1.31) rotateY(40deg); }
.item:nth-child(odd) { transform: scaleX(1.31) rotateY(-40deg); }
-
-.wrap {
- width: auto;
- border:2px solid green;
- height: 100%;
-}
diff --git a/28 - Video Speed Controller/index-FINISHED.html b/28 - Video Speed Controller/index-FINISHED.html
index a7d2f3e38c..0b5b2e5773 100644
--- a/28 - Video Speed Controller/index-FINISHED.html
+++ b/28 - Video Speed Controller/index-FINISHED.html
@@ -4,11 +4,12 @@
<meta charset="UTF-8">
<title>Video Speed Scrubber</title>
<link rel="stylesheet" href="style.css">
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body>
<div class="wrapper">
- <video class="flex" width="765" height="430" src="https://www.dropbox.com/s/nf6jfkwck1glsyo/12%20-%20flex-wrapping-and-columns.mp4?dl=1" loop controls></video>
+ <video class="flex" width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" loop controls></video>
<div class="speed">
<div class="speed-bar">1ร</div>
</div>
diff --git a/28 - Video Speed Controller/index-START.html b/28 - Video Speed Controller/index-START.html
index c4cbd4259a..2fb24216f8 100644
--- a/28 - Video Speed Controller/index-START.html
+++ b/28 - Video Speed Controller/index-START.html
@@ -4,11 +4,12 @@
<meta charset="UTF-8">
<title>Video Speed Scrubber</title>
<link rel="stylesheet" href="style.css">
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
<div class="wrapper">
- <video class="flex" width="765" height="430" src="https://www.dropbox.com/s/nf6jfkwck1glsyo/12%20-%20flex-wrapping-and-columns.mp4?dl=1" loop controls></video>
+ <video class="flex" width="765" height="430" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" loop controls></video>
<div class="speed">
<div class="speed-bar">1ร</div>
</div>
diff --git a/28 - Video Speed Controller/style.css b/28 - Video Speed Controller/style.css
index c837d991e4..656c796247 100644
--- a/28 - Video Speed Controller/style.css
+++ b/28 - Video Speed Controller/style.css
@@ -1,38 +1,42 @@
body {
- display:flex;
+ margin: 0;
+ display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
- background:#4C4C4C url('https://unsplash.it/1500/900?image=1021');
- background-size:cover;
+ background: #4C4C4C url('https://unsplash.it/1500/900?image=1021');
+ background-size: cover;
font-family: sans-serif;
}
+
.wrapper {
- width:850px;
- display:flex;
+ width: 850px;
+ display: flex;
}
+
video {
- box-shadow:0 0 1px 3px rgba(0,0,0,0.1);
+ box-shadow: 0 0 1px 3px rgba(0,0,0,0.1);
}
.speed {
- background:#efefef;
- flex:1;
- display:flex;
- align-items:flex-start;
- margin:10px;
- border-radius:50px;
- box-shadow:0 0 1px 3px rgba(0,0,0,0.1);
+ background: #efefef;
+ flex: 1;
+ display: flex;
+ align-items: flex-start;
+ margin: 10px;
+ border-radius: 50px;
+ box-shadow: 0 0 1px 3px rgba(0,0,0,0.1);
overflow: hidden;
}
+
.speed-bar {
- width:100%;
- background:linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%);
- text-shadow:1px 1px 0 rgba(0,0,0,0.2);
+ width: 100%;
+ background: linear-gradient(-170deg, #2376ae 0%, #c16ecf 100%);
+ text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
display: flex;
align-items: center;
justify-content: center;
- padding:2px;
- color:white;
- height:16.3%;
+ padding: 2px;
+ color: white;
+ height: 16.3%;
}
diff --git a/29 - Countdown Timer/index.html b/29 - Countdown Timer/index.html
index d54f447dd9..cfddfafd5b 100644
--- a/29 - Countdown Timer/index.html
+++ b/29 - Countdown Timer/index.html
@@ -5,6 +5,7 @@
<title>Countdown Timer</title>
<link href='https://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
<div class="timer">
diff --git a/29 - Countdown Timer/style.css b/29 - Countdown Timer/style.css
index f240799477..f8416c0fb0 100644
--- a/29 - Countdown Timer/style.css
+++ b/29 - Countdown Timer/style.css
@@ -10,7 +10,7 @@ html {
}
body {
- margin:0;
+ margin: 0;
text-align: center;
font-family: 'Inconsolata', monospace;
}
@@ -19,14 +19,14 @@ body {
font-weight: 100;
font-size: 20rem;
margin: 0;
- color:white;
- text-shadow:4px 4px 0 rgba(0,0,0,0.05);
+ color: white;
+ text-shadow: 4px 4px 0 rgba(0,0,0,0.05);
}
.timer {
- display:flex;
+ display: flex;
min-height: 100vh;
- flex-direction:column;
+ flex-direction: column;
}
.timer__controls {
@@ -34,43 +34,43 @@ body {
}
.timer__controls > * {
- flex:1;
+ flex: 1;
}
.timer__controls form {
- flex:1;
- display:flex;
+ flex: 1;
+ display: flex;
}
.timer__controls input {
- flex:1;
- border:0;
- padding:2rem;
+ flex: 1;
+ border: 0;
+ padding: 2rem;
}
.timer__button {
- background:none;
- border:0;
+ background: none;
+ border: 0;
cursor: pointer;
- color:white;
+ color: white;
font-size: 2rem;
text-transform: uppercase;
- background:rgba(0,0,0,0.1);
- border-bottom:3px solid rgba(0,0,0,0.2);
- border-right:1px solid rgba(0,0,0,0.2);
- padding:1rem;
+ background: rgba(0,0,0,0.1);
+ border-bottom: 3px solid rgba(0,0,0,0.2);
+ border-right: 1px solid rgba(0,0,0,0.2);
+ padding: 1rem;
font-family: 'Inconsolata', monospace;
}
.timer__button:hover,
.timer__button:focus {
- background:rgba(0,0,0,0.2);
- outline:0;
+ background: rgba(0,0,0,0.2);
+ outline: 0;
}
.display {
- flex:1;
- display:flex;
+ flex: 1;
+ display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
@@ -78,5 +78,5 @@ body {
.display__end-time {
font-size: 4rem;
- color:white;
+ color: white;
}
diff --git a/30 - Whack A Mole/index-FINISHED.html b/30 - Whack A Mole/index-FINISHED.html
index 8d741d5bf0..e15492e45f 100644
--- a/30 - Whack A Mole/index-FINISHED.html
+++ b/30 - Whack A Mole/index-FINISHED.html
@@ -5,6 +5,7 @@
<title>Whack A Mole!</title>
<link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
+ <link rel="icon" href="https://fav.farm/โ
" />
</head>
<body>
@@ -76,7 +77,7 @@ <h1>Whack-a-mole! <span class="score">0</span></h1>
function bonk(e) {
if(!e.isTrusted) return; // cheater!
score++;
- this.classList.remove('up');
+ this.parentNode.classList.remove('up');
scoreBoard.textContent = score;
}
diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html
index 2014ff458c..43fde15f96 100644
--- a/30 - Whack A Mole/index-START.html
+++ b/30 - Whack A Mole/index-START.html
@@ -5,6 +5,7 @@
<title>Whack A Mole!</title>
<link href='https://fonts.googleapis.com/css?family=Amatic+SC:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
+ <link rel="icon" href="https://fav.farm/๐ฅ" />
</head>
<body>
diff --git a/30 - Whack A Mole/style.css b/30 - Whack A Mole/style.css
index 8fec3f5d8e..03779ff2a7 100644
--- a/30 - Whack A Mole/style.css
+++ b/30 - Whack A Mole/style.css
@@ -10,30 +10,30 @@ html {
body {
padding: 0;
- margin:0;
+ margin: 0;
font-family: 'Amatic SC', cursive;
}
h1 {
text-align: center;
font-size: 10rem;
- line-height:1;
+ line-height: 1;
margin-bottom: 0;
}
.score {
- background:rgba(255,255,255,0.2);
- padding:0 3rem;
- line-height:1;
- border-radius:1rem;
+ background: rgba(255,255,255,0.2);
+ padding: 0 3rem;
+ line-height: 1;
+ border-radius: 1rem;
}
.game {
- width:600px;
- height:400px;
- display:flex;
- flex-wrap:wrap;
- margin:0 auto;
+ width: 600px;
+ height: 400px;
+ display: flex;
+ flex-wrap: wrap;
+ margin: 0 auto;
}
.hole {
@@ -45,18 +45,18 @@ h1 {
.hole:after {
display: block;
background: url(dirt.svg) bottom center no-repeat;
- background-size:contain;
- content:'';
+ background-size: contain;
+ content: '';
width: 100%;
height:70px;
position: absolute;
z-index: 2;
- bottom:-30px;
+ bottom: -30px;
}
.mole {
- background:url('mole.svg') bottom center no-repeat;
- background-size:60%;
+ background: url('mole.svg') bottom center no-repeat;
+ background-size: 60%;
position: absolute;
top: 100%;
width: 100%;
@@ -65,5 +65,5 @@ h1 {
}
.hole.up .mole {
- top:0;
+ top: 0;
}
diff --git a/PULL_REQUEST_TEMPLATE.md b/PULL_REQUEST_TEMPLATE.md
new file mode 100644
index 0000000000..a6876a1908
--- /dev/null
+++ b/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,14 @@
+<!--
+๐๐๐๐๐๐๐๐๐๐๐๐๐๐
+๐๐๐Hello Friend!๐๐๐๐
+๐๐๐๐๐๐๐๐๐๐๐๐๐๐
+
+Thanks for Submitting a pull request. Before you hit that button please make sure:
+
+These files are meant to be 1:1 copies of what is done in the video. If you found a better / different way to do things or fixed a small bug, that is great great, but I will be keeping them the same as the videos to avoid confusing.
+
+Spelling mistakes / CSS updates / other clarifications are welcome as long as they don't change what is shown in the videos.
+
+I encourage you to blog about your implementation and add the link to this repo - that way everyone can benefit from it.
+
+-->
diff --git a/readme.md b/readme.md
index 5a1eaa18c8..584068db0e 100644
--- a/readme.md
+++ b/readme.md
@@ -1,17 +1,80 @@
-
+๏ปฟ
# JavaScript30
-Starter Files + Completed solutions for the JavaScript 30 Day Challenge.
+Starter Files + Completed solutions for the JavaScript 30 Day Challenge.
Grab the course at [https://JavaScript30.com](https://JavaScript30.com)
-Text-based guides (unofficial) for the challenges can be found here - [Text Guides](https://github.com/nitishdayal/JavaScript30).
+## Community #JavaScript30 Content
-## Pull Requests
+Feel free to submit a PR by adding a link to your own recaps, guides, or reviews!
-These are meant to be 1:1 copies of what is done in the video. If you found a better / different way to do things, great, but I will be keeping them the same as the videos.
+* [Arjun Khodeโs blog](http://thesagittariusme.blogspot.com/search/label/JS30) about summaries for each day, including fixed glitches, bugs and extra features.
+* [Nitish Dayal's Text Guides](https://github.com/nitishdayal/JavaScript30) are great for those who like reading over watching.
+* [Thorsten Frommen](https://tfrommen.de/tag/javascript-30/) shares how he solved the exercises before viewing the answers.
+* [Soyaine ๅ็ไธญๆๆๅ](https://github.com/soyaine/JavaScript30)ๅ
ๅซไบ่ฟ็จ่ฎฐๅฝๅ้พ็น่งฃ้
+* [Aaron็่ฏญ้ๅญฆไน ๅฐ็ป](https://github.com/A-aronYang/JavaScript30)ๅ
ๅซไธญๆๆๆกฃ๏ผๆกไพๅ็ธๅ
ณ่ตๆ
+* [ไนๆจ ๅฝๅถ็่ฎฒ่งฃ่ง้ข](https://b23.tv/pSa7rdu) ็ไธญๆ่ฎฒ่งฃ่ง้ขไธ่ตทๅญฆไน Javascript30 ๅง! Javascript30 ไธญ CSS/JS/HTML ่ง้ข่ฎฒ่งฃ
+* [Ayo Isaiah's](https://freshman.tech/archive/#javascript30) Recaps and Lessons Learned.
+* [Adriana Rios](https://stpcollabr8nlstn.github.io/JavaScript30/) shares her alternative solutions.
+* [Michael Einsohn](http://30daysofjs.michaeleinsohn.com) publishes each challenge after watching the video once.
+* [Mike Ekkel](https://medium.com/@mike_ekkel/javascript-30-a-30-day-vanilla-js-challenge-6a733fc9f62c#.9frjtaje9)
+* [Yusef Habib](https://github.com/yhabib/JavaScript30) lessons and tricks learned, and a [gh-page](https://yhabib.github.io/JavaScript30/) to see working all the mini-projects.
+* [Amelie Yeh](https://github.com/amelieyeh/JS30) 30 lesson notes with things I've learned, and those important recaps. and directly view my demos [here](https://amelieyeh.github.io/JS30/) ๐น๐ผ๐
+* [Winar](https://github.com/winar-jin/JavaScript30-Challenge)็JavaScript30ๅคฉๆๆ๏ผ่ฎฐๅฝ็ปไน ่ฟ็จ๏ผ้้พ็นๅๅ
ถไป็่งฃๅณๆนๆกใ๐จ
+* [Rayhatron](https://rayhatron.github.io/blog/) - walkthroughs, recaps, and lessons learned.
+* [Andrei Dobra](https://github.com/andreidbr/JS30) Full repo with lessons learned and a [gh-page](https://andreidbr.github.io/JS30/) with all the exercises.
+* [ไป้ถๅฐๅฃนๅ
จๆ ้จ่ฝ](https://github.com/liyuechun/JavaScript30-liyuechun),ๆฅๅฅๅ่ตท็ไป้ถๅฐๅฃนๅ
จๆ ้จ่ฝ๏ผๆจๅจๅธฆ้ขๅคงๅฎถไธ่ตทๅญฆไน ๏ผไธ่ตท่พๅบ๏ผๆๆกฃๅ๏ผไปฃ็ ๅ๏ผไธญๆ่ง้ขๅ๏ผๅ
จๆ ้จ่ฝๅฃๅท๏ผ่พๅบๆฏๆๅฅฝ็ๅญฆไน ๆนๅผใ
+* [Usmaan Ali's](https://github.com/usyyy/javascript/blob/master/JavaScript30/analysis.md) summary of the technical skills learned from each project. He's also posting them as separate blog posts [here](https://medium.com/@usyyy).
+* [Axel](https://github.com/afuh/js30)'s lessons learned and a [showcase](https://afuh.github.io/js30/) with the projects.
+* [Chris](https://github.com/dwatow/JavaScript30) ไธญๆๅฏฆๆฐ๏ผ็ฎๆจๆ่ฟฐใ้็จ็ด้ใ
+* [Muhammad D. Ramadhan's](https://miayam.github.io) blog. He shamlesly mixed his personal life with 30 day JavaScript challenge to increase his learning retention. He also summarised the challenge on [one single page](https://miayam.github.io/js30). Do not read his blog!
+* [Lee Keitel's Blog](https://blog.keitel.xyz/categories/javascript30/) includes summaries of each lesson, what I learned from each one, and my thoughts about the topic taught and using them in the future.
+* [Dustin Hsiao](https://github.com/dustinhsiao21/Javascript30-dustin) ๅ
ๅซไบๅ็ฏไป็ดนใ ๆๆDemoใๅ็ฏ่ฉณ่งฃๅ่จ้้็จ๏ผ้ไธ้จๅๅปถไผธ้ฑ่ฎๅ[gh-page](https://dustinhsiao21.github.io/Javascript30-dustin/)ใ
+* [GuaHsu](https://github.com/guahsu/JavaScript30) - ็ด้ๅ็ฏ็ทด็ฟ้็จ่ๅฟๅพ๏ผไธฆๅ่ฉฆๆดๅ
้จๅ็ทด็ฟ๏ผไนๅไบไธๅๅ
ๅซๅ
จ้จ็ทด็ฟ็[ไป็ดน็ซ](http://guahsu.io/JavaScript30/)๐น๐ผ
+* [Daniela](https://github.com/misslild)'s completed challenges on [GitHub Pages](https://misslild.github.io/WesBos-30day-Coding-challenge/) and [Codepen](https://codepen.io/collection/DapZeP/) :raised_hands: :muscle: :+1:
+* [Dmitrii Pashutskii's](https://github.com/guar47) code of all challenges on [GitHub with Pages](https://github.com/guar47/javascript30Summary) and review [blog posts](https://blog.dpashutskii.com/tag/javascript30/).
+* [Abid Hasan's](https://github.com/sabidhasan/javascript-30) completion of all challenges. This was awesome!! Learned so much! :+1:
+* [Yusong Notes](https://sky172839465.github.io/course/js30) Records Yusong JS 30 days note and demo. :star2:
+* [Ding's Implementation](https://github.com/Ding-Fan/javascript30) code and online demo.
+* [Herminio Torres](https://github.com/herminiotorres/JavaScript30) lessons and tricks learned, and a [gh-page](https://herminiotorres.github.io/JavaScript30/) to see working all the mini-projects.
+* [Dmytro Borysovskyi](https://github.com/dimabory) says many thanks for the course to Wes ๐ค It was incredible challenge ๐ The full repository with code available [here](https://github.com/dimabory/dimabory.github.io/tree/gh-pages/src/components/JavaScript30Days) and demos can be reached by the link to [gh-pages](https://dimabory.github.io/#/js30days).๐๐๐
+* [Kizito](https://github.com/akhilome/)'s follow along [repo](https://github.com/akhilome/js30) with [completed challenges](https://akhilome.github.io/js30) and [notes](https://akhilome.github.io/js30/notes).
+* [VannTile](https://github.com/vanntile)'s [repository](https://github.com/vanntile/JavaScript30) and [GitHub Pages showcase](https://vanntile.github.io/JavaScript30/). Thank you for a great โจ๏ธ experience.
+* [Alex Kim](https://github.com/Alex-K1m/js30-challenge) completed all the challenges. You can check them out at [GitHub pages](https://alex-k1m.github.io/js30-challenge/).
+* [Mikhail Thomas](https://github.com/seckela) created [JS30++](https://github.com/seckela/js30plusplus) to add another level of challenge on top of this already great course.
+* [Ramon Morcillo](https://github.com/reymon359/JavaScript30) finished this awesome challenge!. You can see the showcase of his implementations on [this link](https://reymon359.github.io/JavaScript30/).
+* [Santiago Escobar](https://github.com/sescobar99)'s [repository](https://github.com/sescobar99/javascript30-challenge) and [GitHub Pages showcase](https://sescobar99.github.io/javascript30-challenge/).
+* [Harry Xie](https://github.com/a90100/JavaScript30) ็ด้ 30 ๅคฉ็็ทด็ฟ็ญ่จๅจ [ๆญค้ฃ็ต](https://github.com/a90100/JavaScript30).
+* [ Van Ribeiro's ](https://vanribeiro-30daysofjavascript.netlify.app/) about demos and recaps. On [GitHub Repo](https://github.com/vanribeiro/30days-Of-JavaScript) there's a summary about what was learned and researched.
+* [Mugilan](https://github.com/Mugilan-Codes) is currently doing this challenge. Check out his [Repo](https://github.com/Mugilan-Codes/javascript-30) and the [Live Demo](https://mugilan-codes.github.io/javascript-30/).
+* [Eshan Vohra](https://github.com/eshanvohra) is currently doing this challenge. Check out my repo [here](https://github.com/eshanvohra/JavaScript30).
+* [RegusAl](https://github.com/RegusAl) is currently doing this challenge. Check out my repo [here](https://github.com/RegusAl/JavaScript30).
+* [Ayush Gupta's](https://javascript30.ayushgupta.tech/) implementation of JavaScript30 challenge with some add-ons & updated design.
+* [filipkowal](https://github.com/filipkowal/JS30-05-Flex-Panels-Deactivate) Fix to flex panels (5th day) so the panels deactivate when clicked on another one.
+* [Mo. Saif's](https://github.com/MoSaif00)note on lessons learned and a [gh-pages showcase](https://mosaif00.github.io/30-Days-JavaScript-Challenge/) for the projects.
+* [Stiaannel's](https://stiaannel.co.za/my-projects/javascript30) implementation of the Javascript30 challenge, with small design changes and a couple of extra features.
+* [Kelly CHI's](https://kellychi22.github.io/JavaScript30/) complete JavaScript30 challenges! Click the links to check demos and notes of each challenge. ๐น๐ผ ๐
+* [Issam Seghir](https://issam-seghir.github.io/JavaScript30/) added custom solutions and styles ๐ง, improved performance, including fixed bugs/issus ๐ข. , added articles for each exercise ๐.
-The starter files + solutions will be updated if/when the videos are updated.
+## Alternative Implementations
+Here are some links of people who have done the tutorials, but in a different language or framework:
+
+* [Thomas Mattacchione](https://github.com/tkjone/clojurescript-30) JavaScript 30 written in ClojureScript.
+* [Dave Follett's](https://github.com/davefollett) blog series, [A New Vue on #JavaScript30](https://davefollett.io/categories/a-new-vue-on-javascript30/), where he explores re-implementing #JavaScript30 projects using [Vue](https://vuejs.org).
+* [Akinjide Bankole](https://github.com/akinjide/JS30days) used Node.js with [Jade](http://jadelang.net) to solve the exercises.
+* [Adrien Poly](https://github.com/adrienpoly/javascript30-stimulus) a modest attempt to convert Drum Kit, Video Player, Local Tapas, TypeHead to [Stimulus JS](https://stimulusjs.org/) framework in a Rails App.
+* [Bogdan Lazar](https://github.com/tricinel/TypeScript30) all the JavaScript 30 written in [TypeScript](https://www.typescriptlang.org/).
+* [Will Wager](https://github.com/wwags33/JavaScript30) another [TypeScript](https://www.typescriptlang.org/) implementation!
+* [marcoSven](https://github.com/marcoSven) solution suggestion for [10 - Hold Shift and Check Checkboxes](https://github.com/marcoSven/JavaScript30/blob/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/index-FINISHED.html).
+* [ALMaclaine](https://github.com/almaclaine) Javascript 30 written in [Dart 2.0](https://github.com/ALMaclaine/Dart30).
+* [Connie Leung](https://github.com/railsstudent) Javascript 30 written in [Angular and RxJS](https://github.com/railsstudent/ng-rxjs-30).
+
+## A note on Pull Requests
+
+These are meant to be 1:1 copies of what is done in the video. If you found a better / different way to do things, great, but I will be keeping them the same as the videos.
+
+The starter files + solutions will be updated if/when the videos are updated.
Thanks!