Showing with 1,303 additions and 745 deletions.
  1. +1 −0 .gitignore
  2. BIN 01 - JavaScript Drum Kit/background.jpg
  3. +1 −0 01 - JavaScript Drum Kit/index-FINISHED.html
  4. +1 −0 01 - JavaScript Drum Kit/index-START.html
  5. BIN 01 - JavaScript Drum Kit/sounds/tink.wav
  6. +20 −19 01 - JavaScript Drum Kit/style.css
  7. +17 −15 {02 - JS + CSS Clock → 02 - JS and CSS Clock}/index-FINISHED.html
  8. +15 −13 {02 - JS + CSS Clock → 02 - JS and CSS Clock}/index-START.html
  9. +5 −7 03 - CSS Variables/index-FINISHED.html
  10. +5 −7 03 - CSS Variables/index-START.html
  11. +10 −3 04 - Array Cardio Day 1/index-FINISHED.html
  12. +11 −6 04 - Array Cardio Day 1/index-START.html
  13. +23 −20 05 - Flex Panel Gallery/index-FINISHED.html
  14. +19 −20 05 - Flex Panel Gallery/index-START.html
  15. +1 −0 06 - Type Ahead/index-FINISHED.html
  16. +2 −1 06 - Type Ahead/index-START.html
  17. +64 −77 06 - Type Ahead/style.css
  18. +2 −1 07 - Array Cardio Day 2/index-FINISHED.html
  19. +3 −2 07 - Array Cardio Day 2/index-START.html
  20. +2 −1 08 - Fun with HTML5 Canvas/index-FINISHED.html
  21. +2 −1 08 - Fun with HTML5 Canvas/index-START.html
  22. +1 −0 09 - Dev Tools Domination/index-FINISHED.html
  23. +1 −0 09 - Dev Tools Domination/index-START.html
  24. +22 −28 10 - Hold Shift and Check Checkboxes/index-FINISHED.html
  25. +19 −26 10 - Hold Shift and Check Checkboxes/index-START.html
  26. BIN 11 - Custom Video Player/652333414.mp4
  27. +3 −2 11 - Custom Video Player/index.html
  28. +1 −1 11 - Custom Video Player/scripts-FINISHED.js
  29. +54 −37 11 - Custom Video Player/style.css
  30. +370 −0 12 - Key Sequence Detection/cornify.js
  31. +25 −21 12 - Key Sequence Detection/index-FINISHED.html
  32. +9 −9 12 - Key Sequence Detection/index-START.html
  33. +19 −15 13 - Slide in on Scroll/index-FINISHED.html
  34. +18 −14 13 - Slide in on Scroll/index-START.html
  35. +2 −1 14 - JavaScript References VS Copying/index-FINISHED.html
  36. +6 −1 14 - JavaScript References VS Copying/index-START.html
  37. +1 −0 15 - LocalStorage/index-FINISHED.html
  38. +1 −0 15 - LocalStorage/index-START.html
  39. BIN 15 - LocalStorage/oh-la-la.jpeg
  40. +69 −66 15 - LocalStorage/style.css
  41. +9 −5 16 - Mouse Move Shadow/{index-finished.html → index-FINISHED.html}
  42. +8 −3 16 - Mouse Move Shadow/{index-start.html → index-START.html}
  43. +4 −0 17 - Sort Without Articles/index-FINISHED.html
  44. +4 −0 17 - Sort Without Articles/index-START.html
  45. +2 −1 18 - Adding Up Times with Reduce/index-FINISHED.html
  46. +2 −1 18 - Adding Up Times with Reduce/index-START.html
  47. +2 −1 19 - Webcam Fun/index.html
  48. +2 −2 19 - Webcam Fun/package.json
  49. +14 −6 19 - Webcam Fun/scripts-FINISHED.js
  50. BIN 19 - Webcam Fun/snap.mp3
  51. +18 −17 19 - Webcam Fun/style.css
  52. +12 −9 20 - Speech Detection/index-FINISHED.html
  53. +11 −9 20 - Speech Detection/index-START.html
  54. +2 −2 20 - Speech Detection/package.json
  55. +12 −9 21 - Geolocation/index-FINISHED.html
  56. +12 −21 21 - Geolocation/index-START.html
  57. +2 −2 21 - Geolocation/package.json
  58. +2 −1 22 - Follow Along Link Highlighter/index-FINISHED.html
  59. +1 −0 22 - Follow Along Link Highlighter/index-START.html
  60. +16 −14 22 - Follow Along Link Highlighter/style.css
  61. +1 −0 23 - Speech Synthesis/index-FINISHED.html
  62. +1 −0 23 - Speech Synthesis/index-START.html
  63. +23 −31 23 - Speech Synthesis/style.css
  64. +2 −1 24 - Sticky Nav/index-FINISHED.html
  65. +1 −0 24 - Sticky Nav/index-START.html
  66. +25 −24 24 - Sticky Nav/style-FINISHED.css
  67. +23 −21 24 - Sticky Nav/style-START.css
  68. +9 −5 25 - Event Capture, Propagation, Bubbling and Once/index-FINISHED.html
  69. +9 −5 25 - Event Capture, Propagation, Bubbling and Once/index-START.html
  70. +44 −31 26 - Stripe Follow Along Nav/index-FINISHED.html
  71. +43 −30 26 - Stripe Follow Along Nav/index-START.html
  72. +1 −0 27 - Click and Drag/index-FINISHED.html
  73. +1 −0 27 - Click and Drag/index-START.html
  74. +6 −12 27 - Click and Drag/style.css
  75. +2 −1 28 - Video Speed Controller/index-FINISHED.html
  76. +2 −1 28 - Video Speed Controller/index-START.html
  77. +23 −19 28 - Video Speed Controller/style.css
  78. +1 −0 29 - Countdown Timer/index.html
  79. +23 −23 29 - Countdown Timer/style.css
  80. +2 −1 30 - Whack A Mole/index-FINISHED.html
  81. +1 −0 30 - Whack A Mole/index-START.html
  82. +17 −17 30 - Whack A Mole/style.css
  83. +14 −0 PULL_REQUEST_TEMPLATE.md
  84. +69 −6 readme.md
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,4 @@
node_modules/
*.log
haters/
.idea/
Binary file added 01 - JavaScript Drum Kit/background.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions 01 - JavaScript Drum Kit/index-FINISHED.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
1 change: 1 addition & 0 deletions 01 - JavaScript Drum Kit/index-START.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
Binary file modified 01 - JavaScript Drum Kit/sounds/tink.wav
100755 → 100644
Binary file not shown.
39 changes: 20 additions & 19 deletions 01 - JavaScript Drum Kit/style.css
Original file line number Diff line number Diff line change
@@ -1,50 +1,51 @@
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;
font-family: sans-serif;
}

.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;
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>JS + CSS Clock</title>
<link rel="icon" href="https://fav.farm/✅" />
</head>
<body>

Expand All @@ -18,29 +19,30 @@

<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;
}

.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,
Expand All @@ -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;
Expand All @@ -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)`;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<head>
<meta charset="UTF-8">
<title>JS + CSS Clock</title>
<link rel="icon" href="https://fav.farm/🔥" />
</head>
<body>

Expand All @@ -18,29 +19,30 @@

<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;
}

.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,
Expand All @@ -56,11 +58,11 @@
}

.hand {
width:50%;
height:6px;
background:black;
width: 50%;
height: 6px;
background: black;
position: absolute;
top:50%;
top: 50%;
}

</style>
Expand Down
12 changes: 5 additions & 7 deletions 03 - CSS Variables/index-FINISHED.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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;
Expand All @@ -58,7 +56,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
}

input {
width:100px;
width: 100px;
}
</style>

Expand Down
12 changes: 5 additions & 7 deletions 03 - CSS Variables/index-START.html
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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;
Expand All @@ -43,7 +41,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
}

input {
width:100px;
width: 100px;
}
</style>

Expand Down
13 changes: 10 additions & 3 deletions 04 - Array Cardio Day 1/index-FINISHED.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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
Expand Down Expand Up @@ -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);
Expand Down
17 changes: 11 additions & 6 deletions 04 - Array Cardio Day 1/index-START.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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

Expand Down
Loading