-
Give
-
All
-
You can
+
+
+
+
+
+
+
Give
+
Take
+
Receive
+
+
+
Experience
+
It
+
Today
+
+
+
-
-
Life
-
In
-
Motion
+
+
+
+
+
+
+
+
+
+
+
Flex Panels 💪
+
+
+
+
+
+
+
+
+
+
+
Give
+
Take
+
Receive
+
+
+
Experience
+
It
+
Today
+
+
+
-
-
+ function toggleOpen() {
+ this.classList.toggle('open');
+ }
+ function toggleActive(e) {
+ if (e.propertyName.includes('flex')) {
+ this.classList.toggle('open-active');
+ }
+ }
+ panels.forEach(panel => panel.addEventListener('click', toggleOpen));
+ panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
+
-
+
+
\ No newline at end of file
diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html
index 1436886918..3665e19334 100644
--- a/06 - Type Ahead/index-START.html
+++ b/06 - Type Ahead/index-START.html
@@ -1,22 +1,65 @@
-
-
-
-
-
Type Ahead 👀
-
-
-
-
-
-
-
-
+
+
+
+
+
+
Type Ahead 👀
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/06 - Type Ahead/style.css b/06 - Type Ahead/style.css
index 65b3164ea7..5216f4bd2f 100644
--- a/06 - Type Ahead/style.css
+++ b/06 - Type Ahead/style.css
@@ -1,71 +1,156 @@
- 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;
- }
-
- .search-form {
- max-width:400px;
- margin:50px auto;
- }
-
- 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 {
- 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;
- }
-
- .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%);
- }
-
- span.population {
- font-size: 15px;
- }
-
- .hl {
- background:#ffc600;
- }
\ No newline at end of file
+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;
+}
+
+.search-form {
+ max-width: 400px;
+ margin: 50px auto;
+}
+
+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 {
+ 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;
+}
+
+.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%);
+}
+
+span.population {
+ font-size: 15px;
+}
+
+.hl {
+ background: #ffc600;
+}
+
+a {
+ color: black;
+ background: rgba(0, 0, 0, 0.1);
+ text-decoration: none;
+}
+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;
+}
+
+.search-form {
+ max-width: 400px;
+ margin: 50px auto;
+}
+
+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 {
+ 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;
+}
+
+.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%);
+}
+
+span.population {
+ font-size: 15px;
+}
+
+.hl {
+ background: #ffc600;
+}
+
+a {
+ color: black;
+ background: rgba(0, 0, 0, 0.1);
+ text-decoration: none;
+}
diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html
index 969566ff78..29cf32f34e 100644
--- a/07 - Array Cardio Day 2/index-START.html
+++ b/07 - Array Cardio Day 2/index-START.html
@@ -1,41 +1,79 @@
-
-
-
-
-
Array Cardio 💪💪
-
-
-
Psst: have a look at the JavaScript Console 💁
-
-
-
+
+
+
+
+
+
Array Cardio 💪💪
+
+
+
+
Psst: have a look at the JavaScript Console 💁
+
+
+
+
\ No newline at end of file
diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html
index 37c148df07..a3fb6de291 100644
--- a/08 - Fun with HTML5 Canvas/index-START.html
+++ b/08 - Fun with HTML5 Canvas/index-START.html
@@ -1,19 +1,76 @@
-
-
-
-
-
HTML5 Canvas
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
HTML5 Canvas
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html b/10 - Hold Shift and Check Checkboxes/index-FINISHED.html
index 7b08517a29..0bc7905544 100644
--- a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html
+++ b/10 - Hold Shift and Check Checkboxes/index-FINISHED.html
@@ -1,59 +1,190 @@
+
Hold Shift to Check Multiple Checkboxes
+
+
+
+
+
+
This is an inbox layout.
+
+
+
+
+
Hold down your Shift key
+
+
+
+
+
Everything inbetween should also be set to checked
+
+
+
+
Try do it with out any libraries
+
+
+
+
Just regular JavaScript
+
+
+
+
+
Don't forget to tweet your result!
+
+
+
+
+
+
+
+
+
+
+
+
Hold Shift to Check Multiple Checkboxes
+
+
+
+
-
-
-
-
-
This is an inbox layout.
-
-
-
-
-
Hold down your Shift key
-
-
-
-
-
Everything inbetween should also be set to checked
-
-
-
-
Try do it with out any libraries
-
-
-
-
Just regular JavaScript
-
-
-
-
-
Don't forget to tweet your result!
-
-
-
-
-
-
+
+
+
+
+
Hold Shift to Check Multiple Checkboxes
+
+
+
+
+
+
+
+
This is an inbox layout.
+
+
+
+
+
Hold down your Shift key
+
+
+
+
+
Everything inbetween should also be set to checked
+
+
+
+
Try do it with out any libraries
+
+
+
+
Just regular JavaScript
+
+
+
+
+
Don't forget to tweet your result!
+
+
+
+
+
+
diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js
index e69de29bb2..93569815e1 100644
--- a/11 - Custom Video Player/scripts.js
+++ b/11 - Custom Video Player/scripts.js
@@ -0,0 +1,51 @@
+/* Get our elements */
+const player = document.querySelector('.player');
+const video = player.querySelector('.viewer');
+const progress = player.querySelector('.progress');
+const progressBar = player.querySelector('.progress__filled');
+const toggle = player.querySelector('.toggle');
+const skipButtons = player.querySelectorAll('[data-skip]');
+const ranges = player.querySelectorAll('.player__slider');
+
+/* Build out functions */
+function togglePlay() {
+ video.paused ? video.play() : video.pause();
+}
+
+function updateButton() {
+ toggle.textContent = this.paused ? '►' : '❚ ❚';
+}
+
+function skip() {
+ video.currentTime += parseFloat(this.dataset.skip);
+}
+
+function handeRangeUpdate() {
+ video[this.name] = this.value;
+}
+
+function handleProgress() {
+ const percent = video.currentTime / video.duration * 100;
+ progressBar.style.flexBasis = `${percent}%`;
+}
+
+function scrub(e) {
+ const scrubTime = e.offsetX / progress.offsetWidth * video.duration;
+ video.currentTime = scrubTime;
+}
+
+/* Hook up the event listener */
+video.addEventListener('click', togglePlay);
+video.addEventListener('play', updateButton);
+video.addEventListener('pause', updateButton);
+video.addEventListener('timeupdate', handleProgress);
+toggle.addEventListener('click', togglePlay);
+skipButtons.forEach(button => button.addEventListener('click', skip));
+ranges.forEach(range => range.addEventListener('change', handeRangeUpdate));
+ranges.forEach(range => range.addEventListener('mousemove', handeRangeUpdate));
+
+let mousedown = false;
+progress.addEventListener('click', scrub);
+progress.addEventListener('mousemove', e => mousedown && scrub(e));
+progress.addEventListener('mousedown', () => (mousedown = true));
+progress.addEventListener('mouseup', () => (mousedown = false));
\ No newline at end of file
diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css
index ab3b5b2ce8..ff96978b8b 100644
--- a/11 - Custom Video Player/style.css
+++ b/11 - Custom Video Player/style.css
@@ -1,156 +1,156 @@
-html {
- box-sizing: border-box;
-}
-
-*, *:before, *:after {
- box-sizing: inherit;
-}
-
-body {
- margin: 0;
- padding: 0;
- display:flex;
- background:#7A419B;
- min-height:100vh;
- background: linear-gradient(135deg, #7c1599 0%,#921099 48%,#7e4ae8 100%);
- 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);
- 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;
- text-align: center;
- outline:0;
- padding: 0;
- cursor:pointer;
- max-width:50px;
-}
-
-.player__button:focus {
- border-color: #ffc600;
-}
-
-.player__slider {
- width:10px;
- height:30px;
-}
-
-.player__controls {
- display:flex;
- position: absolute;
- bottom:0;
- width: 100%;
- transform: translateY(100%) translateY(-5px);
- transition:all .3s;
- flex-wrap:wrap;
- background:rgba(0,0,0,0.1);
-}
-
-.player:hover .player__controls {
- transform: translateY(0);
-}
-
-.player:hover .progress {
- height:15px;
-}
-
-.player__controls > * {
- flex:1;
-}
-
-.progress {
- 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;
-}
-
-.progress__filled {
- width:50%;
- background:#ffc600;
- flex:0;
- flex-basis:50%;
-}
-
-/* unholy css to style input type="range" */
-
-input[type=range] {
- -webkit-appearance: none;
- 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;
- cursor: pointer;
- box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
- background: rgba(255,255,255,0.8);
- border-radius: 1.3px;
- border: 0.2px solid rgba(1, 1, 1, 0);
-}
-input[type=range]::-webkit-slider-thumb {
- height: 15px;
- width: 15px;
- border-radius: 50px;
- background: #ffc600;
- cursor: pointer;
- -webkit-appearance: none;
- margin-top: -3.5px;
- box-shadow:0 0 2px rgba(0,0,0,0.2);
-}
-input[type=range]:focus::-webkit-slider-runnable-track {
- background: #bada55;
-}
-input[type=range]::-moz-range-track {
- width: 100%;
- height: 8.4px;
- cursor: pointer;
- box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
- background: #ffffff;
- 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;
- width: 15px;
- border-radius: 50px;
- background: #ffc600;
- cursor: pointer;
-}
+html {
+ box-sizing: border-box;
+}
+
+*, *:before, *:after {
+ box-sizing: inherit;
+}
+
+body {
+ margin: 0;
+ padding: 0;
+ display:flex;
+ background:#7A419B;
+ min-height:100vh;
+ background: linear-gradient(135deg, #7c1599 0%,#921099 48%,#7e4ae8 100%);
+ 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);
+ 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;
+ text-align: center;
+ outline:0;
+ padding: 0;
+ cursor:pointer;
+ max-width:50px;
+}
+
+.player__button:focus {
+ border-color: #ffc600;
+}
+
+.player__slider {
+ width:10px;
+ height:30px;
+}
+
+.player__controls {
+ display:flex;
+ position: absolute;
+ bottom:0;
+ width: 100%;
+ transform: translateY(100%) translateY(-5px);
+ transition:all .3s;
+ flex-wrap:wrap;
+ background:rgba(0,0,0,0.1);
+}
+
+.player:hover .player__controls {
+ transform: translateY(0);
+}
+
+.player:hover .progress {
+ height:15px;
+}
+
+.player__controls > * {
+ flex:1;
+}
+
+.progress {
+ 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;
+}
+
+.progress__filled {
+ width:50%;
+ background:#ffc600;
+ flex:0;
+ flex-basis:50%;
+}
+
+/* unholy css to style input type="range" */
+
+input[type=range] {
+ -webkit-appearance: none;
+ 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;
+ cursor: pointer;
+ box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
+ background: rgba(255,255,255,0.8);
+ border-radius: 1.3px;
+ border: 0.2px solid rgba(1, 1, 1, 0);
+}
+input[type=range]::-webkit-slider-thumb {
+ height: 15px;
+ width: 15px;
+ border-radius: 50px;
+ background: #ffc600;
+ cursor: pointer;
+ -webkit-appearance: none;
+ margin-top: -3.5px;
+ box-shadow:0 0 2px rgba(0,0,0,0.2);
+}
+input[type=range]:focus::-webkit-slider-runnable-track {
+ background: #bada55;
+}
+input[type=range]::-moz-range-track {
+ width: 100%;
+ height: 8.4px;
+ cursor: pointer;
+ box-shadow: 1px 1px 1px rgba(0, 0, 0, 0), 0 0 1px rgba(13, 13, 13, 0);
+ background: #ffffff;
+ 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;
+ width: 15px;
+ border-radius: 50px;
+ background: #ffc600;
+ cursor: pointer;
+}
diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html
index 8cab786140..dd8c1a2cd7 100644
--- a/12 - Key Sequence Detection/index-START.html
+++ b/12 - Key Sequence Detection/index-START.html
@@ -1,12 +1,27 @@
+
-
-
Key Detection
-
+
+
Key Detection
+
+
-
+
-
+
+
-
-
-
-
-
-
-
-
+
+
+
+
+