From 4268dbada0c4be2193fdd6fa94880fd81f376cbf Mon Sep 17 00:00:00 2001 From: ShimmiChristo Date: Fri, 28 Jul 2017 10:19:18 -0400 Subject: [PATCH 01/26] added my finished projects. 1-3 projects --- 01 - JavaScript Drum Kit/index-FINISHED.html | 83 ----------------- 01 - JavaScript Drum Kit/index-START.html | 20 ++++ 02 - JS + CSS Clock/index-FINISHED.html | 98 -------------------- 02 - JS + CSS Clock/index-START.html | 27 ++++++ 03 - CSS Variables/index-FINISHED.html | 79 ---------------- 03 - CSS Variables/index-START.html | 25 +++++ readme.md | 1 - 7 files changed, 72 insertions(+), 261 deletions(-) delete mode 100644 01 - JavaScript Drum Kit/index-FINISHED.html delete mode 100644 02 - JS + CSS Clock/index-FINISHED.html delete mode 100644 03 - CSS Variables/index-FINISHED.html diff --git a/01 - JavaScript Drum Kit/index-FINISHED.html b/01 - JavaScript Drum Kit/index-FINISHED.html deleted file mode 100644 index 1a16d0997c..0000000000 --- a/01 - JavaScript Drum Kit/index-FINISHED.html +++ /dev/null @@ -1,83 +0,0 @@ - - - - - JS Drum Kit - - - - - -

- A - clap -

- S - hihat -

- D - kick -

- F - openhat -

- G - boom -

- H - ride -

- J - snare -

- K - tom -

- L - tink -

- -

- - - - - - diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..fedf22a8f4 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -59,6 +59,26 @@ diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock/index-FINISHED.html deleted file mode 100644 index db653a5340..0000000000 --- a/02 - JS + CSS Clock/index-FINISHED.html +++ /dev/null @@ -1,98 +0,0 @@ - - - - - JS + CSS Clock - - - - -

- - - - - - - diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html index 2712384201..90ea4e96b7 100644 --- a/02 - JS + CSS Clock/index-START.html +++ b/02 - JS + CSS Clock/index-START.html @@ -61,12 +61,39 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0.07, 2.54, 0.17, 1.4); } diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables/index-FINISHED.html deleted file mode 100644 index c3217fc003..0000000000 --- a/03 - CSS Variables/index-FINISHED.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - Scoped CSS Variables and JS - - -

Update CSS Variables with JS

- -

- Spacing: - - - Blur: - - - Base Color - -

- -

- - - - - - - - diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 7171607a8b..9f633a0b82 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -21,6 +21,20 @@

Update CSS Variables with JS

diff --git a/readme.md b/readme.md index 5a1eaa18c8..a8f639dca1 100644 --- a/readme.md +++ b/readme.md @@ -1,4 +1,3 @@ -![](https://javascript30.com/images/JS3-social-share.png) # JavaScript30 From 7987e25fa50e99d551d0fbcf410e2a07eaef9653 Mon Sep 17 00:00:00 2001 From: ShimmiChristo Date: Fri, 28 Jul 2017 10:27:31 -0400 Subject: [PATCH 02/26] deleted files that were not complete --- 04 - Array Cardio Day 1/index-FINISHED.html | 106 -------- 04 - Array Cardio Day 1/index-START.html | 61 ----- 05 - Flex Panel Gallery/index-FINISHED.html | 145 ----------- 05 - Flex Panel Gallery/index-START.html | 116 --------- 06 - Type Ahead/index-FINISHED.html | 61 ----- 06 - Type Ahead/index-START.html | 22 -- 06 - Type Ahead/style.css | 87 ------- 07 - Array Cardio Day 2/index-FINISHED.html | 68 ----- 07 - Array Cardio Day 2/index-START.html | 41 --- .../index-FINISHED.html | 73 ------ 08 - Fun with HTML5 Canvas/index-START.html | 19 -- 09 - Dev Tools Domination/index-FINISHED.html | 89 ------- 09 - Dev Tools Domination/index-START.html | 46 ---- .../index-FINISHED.html | 137 ---------- .../index-START.html | 109 -------- 11 - Custom Video Player/index.html | 27 -- 11 - Custom Video Player/scripts-FINISHED.js | 55 ---- 11 - Custom Video Player/scripts.js | 0 11 - Custom Video Player/style.css | 145 ----------- .../index-FINISHED.html | 25 -- 12 - Key Sequence Detection/index-START.html | 12 - 13 - Slide in on Scroll/index-FINISHED.html | 140 ---------- 13 - Slide in on Scroll/index-START.html | 120 --------- .../index-FINISHED.html | 99 ------- .../index-START.html | 52 ---- 15 - LocalStorage/index-FINISHED.html | 77 ------ 15 - LocalStorage/index-START.html | 38 --- 15 - LocalStorage/style.css | 78 ------ 16 - Mouse Move Shadow/index-finished.html | 63 ----- 16 - Mouse Move Shadow/index-start.html | 36 --- .../index-FINISHED.html | 64 ----- 17 - Sort Without Articles/index-START.html | 52 ---- .../index-FINISHED.html | 207 --------------- .../index-START.html | 187 ------------- 19 - Webcam Fun/index.html | 45 ---- 19 - Webcam Fun/package.json | 14 - 19 - Webcam Fun/scripts-FINISHED.js | 102 -------- 19 - Webcam Fun/scripts.js | 5 - 19 - Webcam Fun/style.css | 59 ----- 20 - Speech Detection/index-FINISHED.html | 85 ------ 20 - Speech Detection/index-START.html | 60 ----- 20 - Speech Detection/package.json | 14 - 21 - Geolocation/index-FINISHED.html | 72 ----- 21 - Geolocation/index-START.html | 74 ------ 21 - Geolocation/package.json | 14 - .../index-FINISHED.html | 55 ---- .../index-START.html | 33 --- 22 - Follow Along Link Highlighter/style.css | 59 ----- 23 - Speech Synthesis/index-FINISHED.html | 75 ------ 23 - Speech Synthesis/index-START.html | 41 --- 23 - Speech Synthesis/style.css | 98 ------- 24 - Sticky Nav/index-FINISHED.html | 67 ----- 24 - Sticky Nav/index-START.html | 61 ----- 24 - Sticky Nav/style-FINISHED.css | 100 ------- 24 - Sticky Nav/style-START.css | 86 ------ .../index-FINISHED.html | 64 ----- .../index-START.html | 45 ---- .../index-FINISHED.html | 246 ------------------ 26 - Stripe Follow Along Nav/index-START.html | 214 --------------- 27 - Click and Drag/index-FINISHED.html | 71 ----- 27 - Click and Drag/index-START.html | 41 --- 27 - Click and Drag/style.css | 76 ------ .../index-FINISHED.html | 38 --- 28 - Video Speed Controller/index-START.html | 20 -- 28 - Video Speed Controller/style.css | 38 --- 29 - Countdown Timer/index.html | 29 --- 29 - Countdown Timer/scripts-FINISHED.js | 55 ---- 29 - Countdown Timer/scripts-START.js | 0 29 - Countdown Timer/style.css | 82 ------ 30 - Whack A Mole/dirt.svg | 40 --- 30 - Whack A Mole/index-FINISHED.html | 87 ------- 30 - Whack A Mole/index-START.html | 42 --- 30 - Whack A Mole/mole.svg | 56 ---- 30 - Whack A Mole/style.css | 69 ----- 74 files changed, 5189 deletions(-) delete mode 100644 04 - Array Cardio Day 1/index-FINISHED.html delete mode 100644 04 - Array Cardio Day 1/index-START.html delete mode 100644 05 - Flex Panel Gallery/index-FINISHED.html delete mode 100644 05 - Flex Panel Gallery/index-START.html delete mode 100644 06 - Type Ahead/index-FINISHED.html delete mode 100644 06 - Type Ahead/index-START.html delete mode 100644 06 - Type Ahead/style.css delete mode 100644 07 - Array Cardio Day 2/index-FINISHED.html delete mode 100644 07 - Array Cardio Day 2/index-START.html delete mode 100644 08 - Fun with HTML5 Canvas/index-FINISHED.html delete mode 100644 08 - Fun with HTML5 Canvas/index-START.html delete mode 100644 09 - Dev Tools Domination/index-FINISHED.html delete mode 100644 09 - Dev Tools Domination/index-START.html delete mode 100644 10 - Hold Shift and Check Checkboxes/index-FINISHED.html delete mode 100644 10 - Hold Shift and Check Checkboxes/index-START.html delete mode 100644 11 - Custom Video Player/index.html delete mode 100644 11 - Custom Video Player/scripts-FINISHED.js delete mode 100644 11 - Custom Video Player/scripts.js delete mode 100644 11 - Custom Video Player/style.css delete mode 100644 12 - Key Sequence Detection/index-FINISHED.html delete mode 100644 12 - Key Sequence Detection/index-START.html delete mode 100644 13 - Slide in on Scroll/index-FINISHED.html delete mode 100644 13 - Slide in on Scroll/index-START.html delete mode 100644 14 - JavaScript References VS Copying/index-FINISHED.html delete mode 100644 14 - JavaScript References VS Copying/index-START.html delete mode 100644 15 - LocalStorage/index-FINISHED.html delete mode 100644 15 - LocalStorage/index-START.html delete mode 100644 15 - LocalStorage/style.css delete mode 100644 16 - Mouse Move Shadow/index-finished.html delete mode 100644 16 - Mouse Move Shadow/index-start.html delete mode 100644 17 - Sort Without Articles/index-FINISHED.html delete mode 100644 17 - Sort Without Articles/index-START.html delete mode 100644 18 - Adding Up Times with Reduce/index-FINISHED.html delete mode 100644 18 - Adding Up Times with Reduce/index-START.html delete mode 100755 19 - Webcam Fun/index.html delete mode 100755 19 - Webcam Fun/package.json delete mode 100755 19 - Webcam Fun/scripts-FINISHED.js delete mode 100644 19 - Webcam Fun/scripts.js delete mode 100755 19 - Webcam Fun/style.css delete mode 100644 20 - Speech Detection/index-FINISHED.html delete mode 100644 20 - Speech Detection/index-START.html delete mode 100755 20 - Speech Detection/package.json delete mode 100644 21 - Geolocation/index-FINISHED.html delete mode 100644 21 - Geolocation/index-START.html delete mode 100755 21 - Geolocation/package.json delete mode 100644 22 - Follow Along Link Highlighter/index-FINISHED.html delete mode 100644 22 - Follow Along Link Highlighter/index-START.html delete mode 100644 22 - Follow Along Link Highlighter/style.css delete mode 100644 23 - Speech Synthesis/index-FINISHED.html delete mode 100644 23 - Speech Synthesis/index-START.html delete mode 100644 23 - Speech Synthesis/style.css delete mode 100644 24 - Sticky Nav/index-FINISHED.html delete mode 100644 24 - Sticky Nav/index-START.html delete mode 100644 24 - Sticky Nav/style-FINISHED.css delete mode 100644 24 - Sticky Nav/style-START.css delete mode 100644 25 - Event Capture, Propagation, Bubbling and Once/index-FINISHED.html delete mode 100644 25 - Event Capture, Propagation, Bubbling and Once/index-START.html delete mode 100644 26 - Stripe Follow Along Nav/index-FINISHED.html delete mode 100644 26 - Stripe Follow Along Nav/index-START.html delete mode 100644 27 - Click and Drag/index-FINISHED.html delete mode 100644 27 - Click and Drag/index-START.html delete mode 100644 27 - Click and Drag/style.css delete mode 100644 28 - Video Speed Controller/index-FINISHED.html delete mode 100644 28 - Video Speed Controller/index-START.html delete mode 100644 28 - Video Speed Controller/style.css delete mode 100644 29 - Countdown Timer/index.html delete mode 100644 29 - Countdown Timer/scripts-FINISHED.js delete mode 100644 29 - Countdown Timer/scripts-START.js delete mode 100644 29 - Countdown Timer/style.css delete mode 100644 30 - Whack A Mole/dirt.svg delete mode 100644 30 - Whack A Mole/index-FINISHED.html delete mode 100644 30 - Whack A Mole/index-START.html delete mode 100644 30 - Whack A Mole/mole.svg delete mode 100644 30 - Whack A Mole/style.css diff --git a/04 - Array Cardio Day 1/index-FINISHED.html b/04 - Array Cardio Day 1/index-FINISHED.html deleted file mode 100644 index e61b94c006..0000000000 --- a/04 - Array Cardio Day 1/index-FINISHED.html +++ /dev/null @@ -1,106 +0,0 @@ - - - - - Array Cardio 💪 - - -

Psst: have a look at the JavaScript Console 💁

- - - diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html deleted file mode 100644 index 4162bce339..0000000000 --- a/04 - Array Cardio Day 1/index-START.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - - Array Cardio 💪 - - -

Psst: have a look at the JavaScript Console 💁

- - - diff --git a/05 - Flex Panel Gallery/index-FINISHED.html b/05 - Flex Panel Gallery/index-FINISHED.html deleted file mode 100644 index 243f8a221d..0000000000 --- a/05 - Flex Panel Gallery/index-FINISHED.html +++ /dev/null @@ -1,145 +0,0 @@ - - - - - Flex Panels 💪 - - - - - - -

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

- - - - - diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html deleted file mode 100644 index e1d643ad5c..0000000000 --- a/05 - Flex Panel Gallery/index-START.html +++ /dev/null @@ -1,116 +0,0 @@ - - - - - Flex Panels 💪 - - - - - - -

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

- - - - - - - diff --git a/06 - Type Ahead/index-FINISHED.html b/06 - Type Ahead/index-FINISHED.html deleted file mode 100644 index 5902b43936..0000000000 --- a/06 - Type Ahead/index-FINISHED.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - - Type Ahead 👀 - - - - - - - - diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html deleted file mode 100644 index 1436886918..0000000000 --- a/06 - Type Ahead/index-START.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - Type Ahead 👀 - - - - - - - - diff --git a/06 - Type Ahead/style.css b/06 - Type Ahead/style.css deleted file mode 100644 index 36dc55f30e..0000000000 --- a/06 - Type Ahead/style.css +++ /dev/null @@ -1,87 +0,0 @@ - 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; - } - - - .details { - text-align: center; - font-size: 15px; - } - - .hl { - background:#ffc600; - } - - .love { - text-align: center; - } - - a { - color:black; - background:rgba(0,0,0,0.1); - text-decoration: none; - } diff --git a/07 - Array Cardio Day 2/index-FINISHED.html b/07 - Array Cardio Day 2/index-FINISHED.html deleted file mode 100644 index c8e5b25d3b..0000000000 --- a/07 - Array Cardio Day 2/index-FINISHED.html +++ /dev/null @@ -1,68 +0,0 @@ - - - - - Array Cardio 💪💪 - - -

Psst: have a look at the JavaScript Console 💁

- - - diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html deleted file mode 100644 index 206ec31aa0..0000000000 --- a/07 - Array Cardio Day 2/index-START.html +++ /dev/null @@ -1,41 +0,0 @@ - - - - - Array Cardio 💪💪 - - -

Psst: have a look at the JavaScript Console 💁

- - - diff --git a/08 - Fun with HTML5 Canvas/index-FINISHED.html b/08 - Fun with HTML5 Canvas/index-FINISHED.html deleted file mode 100644 index 0791e17d0d..0000000000 --- a/08 - Fun with HTML5 Canvas/index-FINISHED.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - HTML5 Canvas - - -

- - - - - - diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html deleted file mode 100644 index 37c148df07..0000000000 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - HTML5 Canvas - - -

- - - - - - diff --git a/09 - Dev Tools Domination/index-FINISHED.html b/09 - Dev Tools Domination/index-FINISHED.html deleted file mode 100644 index 55cd3a2f42..0000000000 --- a/09 - Dev Tools Domination/index-FINISHED.html +++ /dev/null @@ -1,89 +0,0 @@ - - - - - Console Tricks! - - - -

×BREAK×DOWN×

- - - - diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html deleted file mode 100644 index 196fffd719..0000000000 --- a/09 - Dev Tools Domination/index-START.html +++ /dev/null @@ -1,46 +0,0 @@ - - - - - Console Tricks! - - - -

×BREAK×DOWN×

- - - - diff --git a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html b/10 - Hold Shift and Check Checkboxes/index-FINISHED.html deleted file mode 100644 index 3ce296cc4b..0000000000 --- a/10 - Hold Shift and Check Checkboxes/index-FINISHED.html +++ /dev/null @@ -1,137 +0,0 @@ - - - - - Document - - - - -

- -

This is an inbox layout.

- -

Check one item

- -

Hold down your Shift key

- -

Check a lower item

- -

Everything inbetween should also be set to checked

- -

Try do it with out any libraries

- -

Just regular JavaScript

- -

Good Luck!

- -

Don't forget to tweet your result!

- - - - diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html deleted file mode 100644 index eb7ed310bb..0000000000 --- a/10 - Hold Shift and Check Checkboxes/index-START.html +++ /dev/null @@ -1,109 +0,0 @@ - - - - - Document - - - - -

- -

This is an inbox layout.

- -

Check one item

- -

Hold down your Shift key

- -

Check a lower item

- -

Everything inbetween should also be set to checked

- -

Try do it with out any libraries

- -

Just regular JavaScript

- -

Good Luck!

- -

Don't forget to tweet your result!

- - - - diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html deleted file mode 100644 index fe2b55b394..0000000000 --- a/11 - Custom Video Player/index.html +++ /dev/null @@ -1,27 +0,0 @@ - - - - - HTML Video Player - - - - -

- -

- - - - - -

- - - - diff --git a/11 - Custom Video Player/scripts-FINISHED.js b/11 - Custom Video Player/scripts-FINISHED.js deleted file mode 100644 index cedacf2f68..0000000000 --- a/11 - Custom Video Player/scripts-FINISHED.js +++ /dev/null @@ -1,55 +0,0 @@ -/* 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() { - const method = video.paused ? 'play' : 'pause'; - video[method](); -} - -function updateButton() { - const icon = this.paused ? '►' : '❚ ❚'; - console.log(icon); - toggle.textContent = icon; -} - -function skip() { - video.currentTime += parseFloat(this.dataset.skip); -} - -function handleRangeUpdate() { - 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 listners */ -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', handleRangeUpdate)); -ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate)); - -let mousedown = false; -progress.addEventListener('click', scrub); -progress.addEventListener('mousemove', (e) => mousedown && scrub(e)); -progress.addEventListener('mousedown', () => mousedown = true); -progress.addEventListener('mouseup', () => mousedown = false); diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css deleted file mode 100644 index c07581c1c0..0000000000 --- a/11 - Custom Video Player/style.css +++ /dev/null @@ -1,145 +0,0 @@ -html { - box-sizing: border-box; -} - -*, *:before, *:after { - box-sizing: inherit; -} - -body { - 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; -} - -.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 { - 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; - -webkit-appearance: none; - margin-top: -3.5px; - box-shadow:0 0 2px rgba(0,0,0,0.2); -} -input[type=range]:focus::-wefbkit-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-FINISHED.html b/12 - Key Sequence Detection/index-FINISHED.html deleted file mode 100644 index 562127a0d2..0000000000 --- a/12 - Key Sequence Detection/index-FINISHED.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - Key Detection - - - - - - diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html deleted file mode 100644 index 8cab786140..0000000000 --- a/12 - Key Sequence Detection/index-START.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - Key Detection - - - - - - diff --git a/13 - Slide in on Scroll/index-FINISHED.html b/13 - Slide in on Scroll/index-FINISHED.html deleted file mode 100644 index bbaf0b6f22..0000000000 --- a/13 - Slide in on Scroll/index-FINISHED.html +++ /dev/null @@ -1,140 +0,0 @@ - - - - - Document - - - -

- -

Slide in on Scroll

- -

Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores sunt esse magni, ut, dignissimos.

Lorem ipsum cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

Adipisicing elit. Tempore tempora rerum..

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariatur fugit quibusdam dolores sunt esse magni, ut, dignissimos.

- -

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt facilis et iste corrupti omnis tenetur est. Iste ut est dicta dolor itaque adipisci, dolorum minima, veritatis earum provident error molestias. Ratione magni illo sint vel velit ut excepturi consectetur suscipit, earum modi accusamus voluptatem nostrum, praesentium numquam, reiciendis voluptas sit id quisquam. Consequatur in quis reprehenderit modi perspiciatis necessitatibus saepe, quidem, suscipit iure natus dignissimos ipsam, eligendi deleniti accusantium, rerum quibusdam fugit perferendis et optio recusandae sed ratione. Culpa, dolorum reprehenderit harum ab voluptas fuga, nisi eligendi natus maiores illum quas quos et aperiam aut doloremque optio maxime fugiat doloribus. Eum dolorum expedita quam, nesciunt

- -

at provident praesentium atque quas rerum optio dignissimos repudiandae ullam illum quibusdam. Vel ad error quibusdam, illo ex totam placeat. Quos excepturi fuga, molestiae ea quisquam minus, ratione dicta consectetur officia omnis, doloribus voluptatibus? Veniam ipsum veritatis architecto, provident quas consequatur doloremque quam quidem earum expedita, ad delectus voluptatum, omnis praesentium nostrum qui aspernatur ea eaque adipisci et cumque ab? Ea voluptatum dolore itaque odio. Eius minima distinctio harum, officia ab nihil exercitationem. Tempora rem nemo nam temporibus molestias facilis minus ipsam quam doloribus consequatur debitis nesciunt tempore officiis aperiam quisquam, molestiae voluptates cum, fuga culpa. Distinctio accusamus quibusdam, tempore perspiciatis dolorum optio facere consequatur quidem ullam beatae architecto, ipsam sequi officiis dignissimos amet impedit natus necessitatibus tenetur repellendus dolor rem! Dicta dolorem, iure, facilis illo ex nihil ipsa amet officia, optio temporibus eum autem odit repellendus nisi. Possimus modi, corrupti error debitis doloribus dicta libero earum, sequi porro ut excepturi nostrum ea voluptatem nihil culpa? Ullam expedita eligendi obcaecati reiciendis velit provident omnis quas qui in corrupti est dolore facere ad hic, animi soluta assumenda consequuntur reprehenderit! Voluptate dolor nihil veniam laborum voluptas nisi pariatur sed optio accusantium quam consectetur, corrupti, sequi et consequuntur, excepturi doloremque. Tempore quis velit corporis neque fugit non sequi eaque rem hic. Facere, inventore, aspernatur. Accusantium modi atque, asperiores qui nobis soluta cumque suscipit excepturi possimus doloremque odit saepe perferendis temporibus molestiae nostrum voluptatum quis id sint quidem nesciunt culpa. Rerum labore dolor beatae blanditiis praesentium explicabo velit optio esse aperiam similique, voluptatem cum, maiores ipsa tempore. Reiciendis sed culpa atque inventore, nam ullam enim expedita consectetur id velit iusto alias vitae explicabo nemo neque odio reprehenderit soluta sint eaque. Aperiam, qui ut tenetur, voluptate doloremque officiis dicta quaerat voluptatem rerum natus magni. Eum amet autem dolor ullam.

- -

- - -

laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

- -

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.

- - - - -

- - - - - - - diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html deleted file mode 100644 index 0b9fb8fccb..0000000000 --- a/13 - Slide in on Scroll/index-START.html +++ /dev/null @@ -1,120 +0,0 @@ - - - - - Document - - - -

- -

Slide in on Scroll

- -

Adipisicing elit. Tempore tempora rerum..

- -

- - -

- -

- - - - -

- - - - - - - diff --git a/14 - JavaScript References VS Copying/index-FINISHED.html b/14 - JavaScript References VS Copying/index-FINISHED.html deleted file mode 100644 index be6d1b7646..0000000000 --- a/14 - JavaScript References VS Copying/index-FINISHED.html +++ /dev/null @@ -1,99 +0,0 @@ - - - - - JS Reference VS Copy - - - - - - - diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html deleted file mode 100644 index 4da1bac2ea..0000000000 --- a/14 - JavaScript References VS Copying/index-START.html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - JS Reference VS Copy - - - - - - - diff --git a/15 - LocalStorage/index-FINISHED.html b/15 - LocalStorage/index-FINISHED.html deleted file mode 100644 index 2c492b1088..0000000000 --- a/15 - LocalStorage/index-FINISHED.html +++ /dev/null @@ -1,77 +0,0 @@ - - - - - LocalStorage - - - - - - - -

LOCAL TAPAS

Loading Tapas...

- -

- - - - - - - diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html deleted file mode 100644 index d444f1d68b..0000000000 --- a/15 - LocalStorage/index-START.html +++ /dev/null @@ -1,38 +0,0 @@ - - - - - LocalStorage - - - - - - - -

LOCAL TAPAS

Loading Tapas...

- -

- - - - - - - diff --git a/15 - LocalStorage/style.css b/15 - LocalStorage/style.css deleted file mode 100644 index ea5bab179c..0000000000 --- a/15 - LocalStorage/style.css +++ /dev/null @@ -1,78 +0,0 @@ - - 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; } - - 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); - } - - h2 { - text-align: center; - margin: 0; - font-weight: 200; - } - - .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 label { - flex:1; - cursor: pointer; - - } - - .plates input { - display: none; - } - - .plates input + label:before { - content: '⬜️'; - margin-right: 10px; - } - - .plates input:checked + label:before { - content: '🌮'; - } - - .add-items { - margin-top: 20px; - } - - .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 deleted file mode 100644 index 4328eaf6ab..0000000000 --- a/16 - Mouse Move Shadow/index-finished.html +++ /dev/null @@ -1,63 +0,0 @@ - - - - - Mouse Shadow - - - -

🔥WOAH!

- - - - - - diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html deleted file mode 100644 index 58a9bba861..0000000000 --- a/16 - Mouse Move Shadow/index-start.html +++ /dev/null @@ -1,36 +0,0 @@ - - - - - Mouse Shadow - - - -

🔥WOAH!

- - - - - - diff --git a/17 - Sort Without Articles/index-FINISHED.html b/17 - Sort Without Articles/index-FINISHED.html deleted file mode 100644 index 5de851cbbd..0000000000 --- a/17 - Sort Without Articles/index-FINISHED.html +++ /dev/null @@ -1,64 +0,0 @@ - - - - - Sort Without Articles - - - - - -

- - - - - diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html deleted file mode 100644 index cfaf3e0440..0000000000 --- a/17 - Sort Without Articles/index-START.html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - Sort Without Articles - - - - - -

- - - - - diff --git a/18 - Adding Up Times with Reduce/index-FINISHED.html b/18 - Adding Up Times with Reduce/index-FINISHED.html deleted file mode 100644 index 9dcbb3d396..0000000000 --- a/18 - Adding Up Times with Reduce/index-FINISHED.html +++ /dev/null @@ -1,207 +0,0 @@ - - - - - Videos - - -

- Video 1 -
- Video 2 -
- Video 3 -
- Video 4 -
- Video 5 -
- Video 6 -
- Video 7 -
- Video 8 -
- Video 9 -
- Video 10 -
- Video 11 -
- Video 12 -
- Video 13 -
- Video 14 -
- Video 15 -
- Video 16 -
- Video 17 -
- Video 18 -
- Video 19 -
- Video 20 -
- Video 21 -
- Video 22 -
- Video 23 -
- Video 24 -
- Video 25 -
- Video 26 -
- Video 27 -
- Video 28 -
- Video 29 -
- Video 30 -
- Video 31 -
- Video 32 -
- Video 33 -
- Video 34 -
- Video 35 -
- Video 36 -
- Video 37 -
- Video 38 -
- Video 39 -
- Video 40 -
- Video 41 -
- Video 42 -
- Video 43 -
- Video 44 -
- Video 45 -
- Video 46 -
- Video 47 -
- Video 48 -
- Video 49 -
- Video 50 -
- Video 51 -
- Video 52 -
- Video 53 -
- Video 54 -
- Video 55 -
- Video 56 -
- Video 57 -
- Video 58 -

Videos

- Video 1 -
- Video 2 -
- Video 3 -
- Video 4 -
- Video 5 -
- Video 6 -
- Video 7 -
- Video 8 -
- Video 9 -
- Video 10 -
- Video 11 -
- Video 12 -
- Video 13 -
- Video 14 -
- Video 15 -
- Video 16 -
- Video 17 -
- Video 18 -
- Video 19 -
- Video 20 -
- Video 21 -
- Video 22 -
- Video 23 -
- Video 24 -
- Video 25 -
- Video 26 -
- Video 27 -
- Video 28 -
- Video 29 -
- Video 30 -
- Video 31 -
- Video 32 -
- Video 33 -
- Video 34 -
- Video 35 -
- Video 36 -
- Video 37 -
- Video 38 -
- Video 39 -
- Video 40 -
- Video 41 -
- Video 42 -
- Video 43 -
- Video 44 -
- Video 45 -
- Video 46 -
- Video 47 -
- Video 48 -
- Video 49 -
- Video 50 -
- Video 51 -
- Video 52 -
- Video 53 -
- Video 54 -
- Video 55 -
- Video 56 -
- Video 57 -
- Video 58 -

Get User Media Code Along!

- - -

- -

Speech Detection

Document

- 0 - KM/H -

Document

- 0 - KM/H -

👀👀👀Follow Along Nav

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est explicabo unde natus necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!

Aspernatur sapiente quae sint soluta modi, atque praesentium laborum pariatur earum quaerat cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.

Cum ipsam quod, incidunt sit ex tempore placeat maxime corrupti possimus veritatis ipsum fugit recusandae est doloremque? Hic, quibusdam, nulla.

Esse quibusdam, ad, ducimus cupiditate nulla, quae magni odit totam ut consequatur eveniet sunt quam provident sapiente dicta neque quod.

Aliquam dicta sequi culpa fugiat consequuntur pariatur optio ad minima, maxime odio, distinctio magni impedit tempore enim repellendus repudiandae quas!

👀👀👀Follow Along Nav

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est explicabo unde natus necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!

Aspernatur sapiente quae sint soluta modi, atque praesentium laborum pariatur earum quaerat cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.

Cum ipsam quod, incidunt sit ex tempore placeat maxime corrupti possimus veritatis ipsum fugit recusandae est doloremque? Hic, quibusdam, nulla.

Esse quibusdam, ad, ducimus cupiditate nulla, quae magni odit totam ut consequatur eveniet sunt quam provident sapiente dicta neque quod.

Aliquam dicta sequi culpa fugiat consequuntur pariatur optio ad minima, maxime odio, distinctio magni impedit tempore enim repellendus repudiandae quas!

Speech Synthesis

- -

The Voiceinator 5000

- - - - Rate: - - - Pitch: - - - - - - -

Speech Synthesis

- -

The Voiceinator 5000

- - - - Rate: - - - Pitch: - - - - - - -

Document

A story about getting lost.

Sticky Nav

A story about getting lost.

- -

- - - -

- -

Understanding JavaScript's Capture

Follow Along Nav

Cool

- -

- About Me -
-
- -
Wes Bos sure does love web development. He teaches things like JavaScript, CSS and BBQ. Wait. BBQ isn't part of web development. It should be though!
-
-
-
- Courses -
- - RFB - React For Beginners -
- - ES6 - ES6 For Everyone -
- - STPU - Sublime Text Power User -
- - WTF - What The Flexbox?! -
- - LRX - Learn Redux -
- - CLPU - Command Line Power User -
- - MMD - Mastering Markdown -
-
- Other Links -
- Twiter
- Facebook
- Blog
- Course Catalog
-

Follow Along Nav

Cool

- -

- About Me -
-
- -
Wes Bos sure does love web development. He teaches things like JavaScript, CSS and BBQ. Wait. BBQ isn't part of web development. It should be though!
-
-
-
- Courses -
- - RFB - React For Beginners -
- - ES6 - ES6 For Everyone -
- - STPU - Sublime Text Power User -
- - WTF - What The Flexbox?! -
- - LRX - Learn Redux -
- - CLPU - Command Line Power User -
- - MMD - Mastering Markdown -
-
- Other Links -
- Twiter
- Facebook
- Blog
- Course Catalog
-

Click and Drag

Video Speed Scrubber

1×

Video Speed Scrubber

1×

Countdown Timer

- - - - - - -

Whack A Mole!

Whack-a-mole! 0

Whack A Mole!

Whack-a-mole! 0

Date: Mon, 31 Jul 2017 12:25:43 -0400 Subject: [PATCH 03/26] Number 4 Done! --- 04 - Array Cardio Day 1/index-START.html | 105 +++++++++++++++++++++++ 1 file changed, 105 insertions(+) create mode 100644 04 - Array Cardio Day 1/index-START.html diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html new file mode 100644 index 0000000000..24a2b697f6 --- /dev/null +++ b/04 - Array Cardio Day 1/index-START.html @@ -0,0 +1,105 @@ + + + + + Array Cardio 💪 + + +

Psst: have a look at the JavaScript Console 💁

+ + + From d85afa23dfa349f6f82981b46015d8fee8bd95ed Mon Sep 17 00:00:00 2001 From: ShimmiChristo Date: Tue, 1 Aug 2017 09:09:10 -0400 Subject: [PATCH 04/26] #5 Done! --- 05 - Flex Panel Gallery/index-START.html | 146 +++++++++++++++++++++++ 1 file changed, 146 insertions(+) create mode 100644 05 - Flex Panel Gallery/index-START.html diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html new file mode 100644 index 0000000000..f791a2c397 --- /dev/null +++ b/05 - Flex Panel Gallery/index-START.html @@ -0,0 +1,146 @@ + + + + + Flex Panels 💪 + + + + + + +

Hey

Let's

Dance

Give

Take

Receive

Experience

Today

Give

All

You can

Life

Motion

+ + + + + + + From db3b4c76ffc6a01af7d44f3551cc5c8b5a343ac3 Mon Sep 17 00:00:00 2001 From: ShimmiChristo Date: Wed, 2 Aug 2017 08:50:10 -0400 Subject: [PATCH 05/26] #6 Done! --- 06 - Type Ahead/index-START.html | 60 ++++++++++++++++++++++ 06 - Type Ahead/style.css | 87 ++++++++++++++++++++++++++++++++ 2 files changed, 147 insertions(+) create mode 100644 06 - Type Ahead/index-START.html create mode 100644 06 - Type Ahead/style.css diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html new file mode 100644 index 0000000000..4e70860ab1 --- /dev/null +++ b/06 - Type Ahead/index-START.html @@ -0,0 +1,60 @@ + + + + + Type Ahead 👀 + + + + + + + + diff --git a/06 - Type Ahead/style.css b/06 - Type Ahead/style.css new file mode 100644 index 0000000000..36dc55f30e --- /dev/null +++ b/06 - Type Ahead/style.css @@ -0,0 +1,87 @@ + 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; + } + + + .details { + text-align: center; + font-size: 15px; + } + + .hl { + background:#ffc600; + } + + .love { + text-align: center; + } + + a { + color:black; + background:rgba(0,0,0,0.1); + text-decoration: none; + } From d2fa11154821b9ae6d6e699ddf04d3f5d1c39c76 Mon Sep 17 00:00:00 2001 From: ShimmiChristo Date: Tue, 8 Aug 2017 10:57:19 -0400 Subject: [PATCH 06/26] #7 Done! --- 07 - Array Cardio Day 2/index-START.html | 71 ++++++++++++++++++++++++ 1 file changed, 71 insertions(+) create mode 100644 07 - Array Cardio Day 2/index-START.html diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html new file mode 100644 index 0000000000..eea9bcb8a1 --- /dev/null +++ b/07 - Array Cardio Day 2/index-START.html @@ -0,0 +1,71 @@ + + + + + Array Cardio 💪💪 + + +

Psst: have a look at the JavaScript Console 💁

+ + + From ce5ac405309f4ad4adf31802b053d66cb9e45ebd Mon Sep 17 00:00:00 2001 From: ShimmiChristo Date: Thu, 10 Aug 2017 14:16:49 -0400 Subject: [PATCH 07/26] Number 8 Donezo. --- 08 - Fun with HTML5 Canvas/index-START.html | 80 +++++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 08 - Fun with HTML5 Canvas/index-START.html diff --git a/08 - Fun with HTML5 Canvas/index-START.html b/08 - Fun with HTML5 Canvas/index-START.html new file mode 100644 index 0000000000..02e424a1b7 --- /dev/null +++ b/08 - Fun with HTML5 Canvas/index-START.html @@ -0,0 +1,80 @@ + + + + + HTML5 Canvas + + +

+ + + + + + From 8c462ab7fe7256915462a117e243a76c087bda69 Mon Sep 17 00:00:00 2001 From: ShimmiChristo Date: Tue, 15 Aug 2017 08:36:50 -0400 Subject: [PATCH 08/26] Niner is done --- 09 - Dev Tools Domination/index-START.html | 72 ++++++++++++++++++++++ 1 file changed, 72 insertions(+) create mode 100644 09 - Dev Tools Domination/index-START.html diff --git a/09 - Dev Tools Domination/index-START.html b/09 - Dev Tools Domination/index-START.html new file mode 100644 index 0000000000..4c7b3a93b3 --- /dev/null +++ b/09 - Dev Tools Domination/index-START.html @@ -0,0 +1,72 @@ + + + + + Console Tricks! + + + +

On click, change the color

+ + + + From 3c27a87447bbd2f88cfbb6cd6af501291fba2255 Mon Sep 17 00:00:00 2001 From: ShimmiChristo Date: Fri, 18 Aug 2017 10:07:12 -0400 Subject: [PATCH 09/26] Number 10. Done. --- .../index-START.html | 136 ++++++++++++++++++ 1 file changed, 136 insertions(+) create mode 100644 10 - Hold Shift and Check Checkboxes/index-START.html diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index-START.html new file mode 100644 index 0000000000..d79e9e25a0 --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/index-START.html @@ -0,0 +1,136 @@ + + + + + Document + + + + +

+ +

This is an inbox layout.

+ +

Check one item

+ +

Hold down your Shift key

+ +

Check a lower item

+ +

Everything inbetween should also be set to checked

+ +

Try do it with out any libraries

+ +

Just regular JavaScript

+ +

Good Luck!

+ +

Don't forget to tweet your result!

+ + + + From f463ef6acf6cae01e1aa2db9eed1c1403eb43572 Mon Sep 17 00:00:00 2001 From: ShimmiChristo Date: Wed, 30 Aug 2017 17:18:51 -0400 Subject: [PATCH 10/26] #11. Done. --- 11 - Custom Video Player/index.html | 27 ++++++ 11 - Custom Video Player/scripts.js | 63 ++++++++++++ 11 - Custom Video Player/style.css | 145 ++++++++++++++++++++++++++++ 3 files changed, 235 insertions(+) create mode 100644 11 - Custom Video Player/index.html create mode 100644 11 - Custom Video Player/scripts.js create mode 100644 11 - Custom Video Player/style.css diff --git a/11 - Custom Video Player/index.html b/11 - Custom Video Player/index.html new file mode 100644 index 0000000000..fe2b55b394 --- /dev/null +++ b/11 - Custom Video Player/index.html @@ -0,0 +1,27 @@ + + + + + HTML Video Player + + + + +

+ +

+ + + + + +

+ + + + diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js new file mode 100644 index 0000000000..50d458adf9 --- /dev/null +++ b/11 - Custom Video Player/scripts.js @@ -0,0 +1,63 @@ +// Get out 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 our functions +function togglePlay() { + if (video.paused) { + video.play(); + } else { + video.pause(); + } + // const method = video.paused ? 'play' : 'pause'; + // video[method](); +} +function updateButton() { + // const icon = this.paused ? '►' : '❚ ❚' + // toggle.textContent = icon; + if (video.paused) { + toggle.textContent = '►'; + } else { + toggle.textContent = '❚❚'; + } +} +function skip() { + // console.log(this.dataset.skip); + video.currentTime += parseFloat(this.dataset.skip); +} +function handleRangeUpdate() { + 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 listeners +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', handleRangeUpdate)); +ranges.forEach(range => range.addEventListener('mousemove', handleRangeUpdate)); + +let mousedown = false; +progress.addEventListener('click', scrub); +progress.addEventListener('mousemove', (e) => mousedown && scrub(e)); +progress.addEventListener('mousedown', () => mousedown = true); +progress.addEventListener('mouseup', () => mousedown = false); diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css new file mode 100644 index 0000000000..c07581c1c0 --- /dev/null +++ b/11 - Custom Video Player/style.css @@ -0,0 +1,145 @@ +html { + box-sizing: border-box; +} + +*, *:before, *:after { + box-sizing: inherit; +} + +body { + 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; +} + +.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 { + 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; + -webkit-appearance: none; + margin-top: -3.5px; + box-shadow:0 0 2px rgba(0,0,0,0.2); +} +input[type=range]:focus::-wefbkit-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; +} From 67e040982c460edd7ff5a31186f09133a6951e6b Mon Sep 17 00:00:00 2001 From: ShimmiChristo Date: Thu, 31 Aug 2017 10:18:47 -0400 Subject: [PATCH 11/26] #12 is done. --- 12 - Key Sequence Detection/index-START.html | 32 ++++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 12 - Key Sequence Detection/index-START.html diff --git a/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html new file mode 100644 index 0000000000..0afc9cb9e6 --- /dev/null +++ b/12 - Key Sequence Detection/index-START.html @@ -0,0 +1,32 @@ + + + + + Key Detection + + + + + + From 50dcd0215d694a78273218e157f8953b9aa63864 Mon Sep 17 00:00:00 2001 From: ShimmiChristo Date: Mon, 11 Sep 2017 15:48:34 -0400 Subject: [PATCH 12/26] Number 13 --- 13 - Slide in on Scroll/index-START.html | 141 +++++++++++++++++++++++ 1 file changed, 141 insertions(+) create mode 100644 13 - Slide in on Scroll/index-START.html diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html new file mode 100644 index 0000000000..5994eee098 --- /dev/null +++ b/13 - Slide in on Scroll/index-START.html @@ -0,0 +1,141 @@ + + + + + Document + + + +

+ +

Slide in on Scroll

+ +

Adipisicing elit. Tempore tempora rerum..

+ +

+ + +

+ +

+ + + + +

+ + + + + + + From e0993462b69a90ca91441f6d652474cb1145db9d Mon Sep 17 00:00:00 2001 From: ShimmiChristo Date: Tue, 12 Sep 2017 10:17:09 -0400 Subject: [PATCH 13/26] Comment changes to #13 --- 13 - Slide in on Scroll/index-START.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index-START.html index 5994eee098..5410180143 100644 --- a/13 - Slide in on Scroll/index-START.html +++ b/13 - Slide in on Scroll/index-START.html @@ -66,7 +66,9 @@

Slide in on Scroll

sliderImages.forEach( sliderImage => { //half way through the image const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2; + // console.log(slideInAt); // bottom of the image + // offsetTop gives the distance from the top of the image to the top of the window const imageBottom = sliderImage.offsetTop + sliderImage.height; const isHalfShown = slideInAt > sliderImage.offsetTop; const isNotScrolledPast = window.scrollY < imageBottom; From 7995cc08fce1627c27b1a12141ccfa75ab5287c0 Mon Sep 17 00:00:00 2001 From: ShimmiChristo Date: Tue, 12 Sep 2017 15:37:46 -0400 Subject: [PATCH 14/26] #14 is done --- .../index-START.html | 111 ++++++++++++++++++ 1 file changed, 111 insertions(+) create mode 100644 14 - JavaScript References VS Copying/index-START.html diff --git a/14 - JavaScript References VS Copying/index-START.html b/14 - JavaScript References VS Copying/index-START.html new file mode 100644 index 0000000000..dc6a2145f2 --- /dev/null +++ b/14 - JavaScript References VS Copying/index-START.html @@ -0,0 +1,111 @@ + + + + + JS Reference VS Copy + + + + + + + From c0e36c4bb6a71e56313864666493db5b606f7e00 Mon Sep 17 00:00:00 2001 From: ShimmiChristo Date: Mon, 18 Sep 2017 18:31:33 -0400 Subject: [PATCH 15/26] #15 Done --- 15 - LocalStorage/index-START.html | 83 ++++++++++++++++++++++++++++++ 15 - LocalStorage/style.css | 78 ++++++++++++++++++++++++++++ 2 files changed, 161 insertions(+) create mode 100644 15 - LocalStorage/index-START.html create mode 100644 15 - LocalStorage/style.css diff --git a/15 - LocalStorage/index-START.html b/15 - LocalStorage/index-START.html new file mode 100644 index 0000000000..69baa6f1c5 --- /dev/null +++ b/15 - LocalStorage/index-START.html @@ -0,0 +1,83 @@ + + + + + LocalStorage + + + + + + + +

LOCAL TAPAS

Loading Tapas...

+ +

+ + + + + + + diff --git a/15 - LocalStorage/style.css b/15 - LocalStorage/style.css new file mode 100644 index 0000000000..ea5bab179c --- /dev/null +++ b/15 - LocalStorage/style.css @@ -0,0 +1,78 @@ + + 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; } + + 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); + } + + h2 { + text-align: center; + margin: 0; + font-weight: 200; + } + + .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 label { + flex:1; + cursor: pointer; + + } + + .plates input { + display: none; + } + + .plates input + label:before { + content: '⬜️'; + margin-right: 10px; + } + + .plates input:checked + label:before { + content: '🌮'; + } + + .add-items { + margin-top: 20px; + } + + .add-items input { + padding:10px; + outline:0; + border:1px solid rgba(0,0,0,0.1); + } From c9470aba6e8acc85895b7df021b149332a237fc8 Mon Sep 17 00:00:00 2001 From: ShimmiChristo Date: Tue, 19 Sep 2017 14:54:31 -0400 Subject: [PATCH 16/26] #16 done. Mouse move effect. --- 16 - Mouse Move Shadow/index-start.html | 74 +++++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 16 - Mouse Move Shadow/index-start.html diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html new file mode 100644 index 0000000000..2052b8bd7a --- /dev/null +++ b/16 - Mouse Move Shadow/index-start.html @@ -0,0 +1,74 @@ + + + + + Mouse Shadow + + + +

🔥WOAH!

+ + + + + + From 50c3514be5d7c20e3e3c312c426f808060ff8e44 Mon Sep 17 00:00:00 2001 From: shimmiChristo Date: Thu, 21 Sep 2017 17:18:21 -0400 Subject: [PATCH 17/26] #Number 17 done. --- 17 - Sort Without Articles/index-START.html | 75 +++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 17 - Sort Without Articles/index-START.html diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index-START.html new file mode 100644 index 0000000000..2e2b2604dc --- /dev/null +++ b/17 - Sort Without Articles/index-START.html @@ -0,0 +1,75 @@ + + + + + Sort Without Articles + + + + + +

+ + + + + From ea49cc780c7ce32a8dba2387effe56a78446afa9 Mon Sep 17 00:00:00 2001 From: shimmiChristo Date: Mon, 25 Sep 2017 20:47:23 -0400 Subject: [PATCH 18/26] #18 is donezo. --- .../index-START.html | 219 ++++++++++++++++++ 1 file changed, 219 insertions(+) create mode 100644 18 - Adding Up Times with Reduce/index-START.html diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index-START.html new file mode 100644 index 0000000000..fabbf27a87 --- /dev/null +++ b/18 - Adding Up Times with Reduce/index-START.html @@ -0,0 +1,219 @@ + + + + + Videos + + +

+ Video 1 +
+ Video 2 +
+ Video 3 +
+ Video 4 +
+ Video 5 +
+ Video 6 +
+ Video 7 +
+ Video 8 +
+ Video 9 +
+ Video 10 +
+ Video 11 +
+ Video 12 +
+ Video 13 +
+ Video 14 +
+ Video 15 +
+ Video 16 +
+ Video 17 +
+ Video 18 +
+ Video 19 +
+ Video 20 +
+ Video 21 +
+ Video 22 +
+ Video 23 +
+ Video 24 +
+ Video 25 +
+ Video 26 +
+ Video 27 +
+ Video 28 +
+ Video 29 +
+ Video 30 +
+ Video 31 +
+ Video 32 +
+ Video 33 +
+ Video 34 +
+ Video 35 +
+ Video 36 +
+ Video 37 +
+ Video 38 +
+ Video 39 +
+ Video 40 +
+ Video 41 +
+ Video 42 +
+ Video 43 +
+ Video 44 +
+ Video 45 +
+ Video 46 +
+ Video 47 +
+ Video 48 +
+ Video 49 +
+ Video 50 +
+ Video 51 +
+ Video 52 +
+ Video 53 +
+ Video 54 +
+ Video 55 +
+ Video 56 +
+ Video 57 +
+ Video 58 +

Date: Thu, 28 Dec 2017 08:32:50 -0500 Subject: [PATCH 19/26] #22 is done --- .../index-START.html | 53 +++++++++++++++++++ 1 file changed, 53 insertions(+) create mode 100644 22 - Follow Along Link Highlighter/index-START.html diff --git a/22 - Follow Along Link Highlighter/index-START.html b/22 - Follow Along Link Highlighter/index-START.html new file mode 100644 index 0000000000..b8999559eb --- /dev/null +++ b/22 - Follow Along Link Highlighter/index-START.html @@ -0,0 +1,53 @@ + + + + + 👀👀👀Follow Along Nav + + + + + + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est explicabo unde natus necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!

Aspernatur sapiente quae sint soluta modi, atque praesentium laborum pariatur earum quaerat cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.

Cum ipsam quod, incidunt sit ex tempore placeat maxime corrupti possimus veritatis ipsum fugit recusandae est doloremque? Hic, quibusdam, nulla.

Esse quibusdam, ad, ducimus cupiditate nulla, quae magni odit totam ut consequatur eveniet sunt quam provident sapiente dicta neque quod.

Aliquam dicta sequi culpa fugiat consequuntur pariatur optio ad minima, maxime odio, distinctio magni impedit tempore enim repellendus repudiandae quas!

+ + + + + From 9aa190dbf2641790cd04fe6ae15e3bb28fff9bc2 Mon Sep 17 00:00:00 2001 From: shimmiChristo Date: Fri, 29 Dec 2017 08:15:50 -0500 Subject: [PATCH 20/26] #24 is done --- 24 - Sticky Nav/index-START.html | 77 ++++++++++++++++++++++++ 24 - Sticky Nav/style-START.css | 100 +++++++++++++++++++++++++++++++ 2 files changed, 177 insertions(+) create mode 100644 24 - Sticky Nav/index-START.html create mode 100644 24 - Sticky Nav/style-START.css diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html new file mode 100644 index 0000000000..c2511dd245 --- /dev/null +++ b/24 - Sticky Nav/index-START.html @@ -0,0 +1,77 @@ + + + + + Sticky Nav + + + + +

A story about getting lost.

+ + + +

+ +

+ + + +

+ +

+ + + + + diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css new file mode 100644 index 0000000000..b551473357 --- /dev/null +++ b/24 - Sticky Nav/style-START.css @@ -0,0 +1,100 @@ +html { + box-sizing: border-box; + background:#eeeeee; + font-family:'helvetica neue'; + font-size: 20px; + font-weight: 200; +} +body { + margin: 0; +} +*, *:before, *:after { + box-sizing: inherit; +} + +.site-wrap { + max-width: 700px; + margin: 70px auto; + background:white; + padding:40px; + text-align: justify; + box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05); + transform: scale(0.98); + transition: transform 0.5s; +} + +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; + justify-content: center; +} + +h1 { + color:white; + font-size: 7vw; + text-shadow: 3px 4px 0 rgba(0,0,0,0.2) +} + +nav { + background:black; + top:0; + width: 100%; + transition:all 0.5s; + position: relative; + z-index: 1; +} + +body.fixed-nav nav { + position: fixed; + box-shadow:0 5px 0 rgba(0,0,0,0.1); +} + +nav ul { + margin: 0; + padding:0; + list-style: none; + display:flex; +} + +nav li { + flex:1; + text-align: center; + display: flex; + justify-content: center; + align-items: center; +} + +li.logo { + max-width:0; + overflow: hidden; + background: white; + transition: all 0.5s; + font-weight: 600; + font-size: 30px; +} + +li.logo a { + color:black; +} + +.fixed-nav li.logo { + max-width:500px; +} + +nav a { + text-decoration: none; + padding:20px; + display: inline-block; + color:white; + transition:all 0.2s; + text-transform: uppercase; +} From 8d67f1371458e5162882d737121fb52081e9b31e Mon Sep 17 00:00:00 2001 From: shimmiChristo Date: Sun, 31 Dec 2017 08:53:39 -0500 Subject: [PATCH 21/26] 25 is done --- .../index-START.html | 64 +++++++++++++++++++ 1 file changed, 64 insertions(+) create mode 100644 25 - Event Capture, Propagation, Bubbling and Once/index-START.html diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html new file mode 100644 index 0000000000..ce75cc3398 --- /dev/null +++ b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html @@ -0,0 +1,64 @@ + + + + + Understanding JavaScript's Capture + + + +

+ + + + + + + From 4e445fe99f34329be8017e2a21e5911bcfe01f2c Mon Sep 17 00:00:00 2001 From: shimmiChristo Date: Mon, 1 Jan 2018 09:54:54 -0500 Subject: [PATCH 22/26] 26 is done. HAPPY NEW YEAR! --- 26 - Stripe Follow Along Nav/index-START.html | 250 ++++++++++++++++++ 1 file changed, 250 insertions(+) create mode 100644 26 - Stripe Follow Along Nav/index-START.html diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html new file mode 100644 index 0000000000..6f279b5276 --- /dev/null +++ b/26 - Stripe Follow Along Nav/index-START.html @@ -0,0 +1,250 @@ + + + + + Follow Along Nav + + +

Cool

+ +

+ About Me +
+
+ +
Wes Bos sure does love web development. He teaches things like JavaScript, CSS and BBQ. Wait. BBQ isn't part of web development. It should be though!
+
+
+
+ Courses +
- + RFB + React For Beginners +
- + ES6 + ES6 For Everyone +
- + STPU + Sublime Text Power User +
- + WTF + What The Flexbox?! +
- + LRX + Learn Redux +
- + CLPU + Command Line Power User +
- + MMD + Mastering Markdown +
+
+ Other Links +
- Twiter
- Facebook
- Blog
- Course Catalog
+

+ + + + + + + From 529b95f891bc7f27e07bd145fff44cf6fa7e7379 Mon Sep 17 00:00:00 2001 From: shimmiChristo Date: Tue, 2 Jan 2018 08:32:52 -0500 Subject: [PATCH 23/26] #27 --- 27 - Click and Drag/index-START.html | 78 ++++++++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 27 - Click and Drag/index-START.html diff --git a/27 - Click and Drag/index-START.html b/27 - Click and Drag/index-START.html new file mode 100644 index 0000000000..fc9b9113bb --- /dev/null +++ b/27 - Click and Drag/index-START.html @@ -0,0 +1,78 @@ + + + + + Click and Drag + + + +

+ + + + + From d5550b97f83af58f4415cbb748390dcd98318616 Mon Sep 17 00:00:00 2001 From: shimmiChristo Date: Wed, 3 Jan 2018 08:22:16 -0500 Subject: [PATCH 24/26] #28 --- 28 - Video Speed Controller/index-START.html | 41 ++++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 28 - Video Speed Controller/index-START.html diff --git a/28 - Video Speed Controller/index-START.html b/28 - Video Speed Controller/index-START.html new file mode 100644 index 0000000000..e682a417e7 --- /dev/null +++ b/28 - Video Speed Controller/index-START.html @@ -0,0 +1,41 @@ + + + + + Video Speed Scrubber + + + + +

1×

+ + + + From 86458bdba1cbcd632798cb9e2a3f1a64a588a46f Mon Sep 17 00:00:00 2001 From: shimmiChristo Date: Sat, 6 Jan 2018 09:59:19 -0500 Subject: [PATCH 25/26] #29 timer is done --- 29 - Countdown Timer/index.html | 29 ++++++++++ 29 - Countdown Timer/scripts-START.js | 61 ++++++++++++++++++++ 29 - Countdown Timer/style.css | 82 +++++++++++++++++++++++++++ 3 files changed, 172 insertions(+) create mode 100644 29 - Countdown Timer/index.html create mode 100644 29 - Countdown Timer/scripts-START.js create mode 100644 29 - Countdown Timer/style.css diff --git a/29 - Countdown Timer/index.html b/29 - Countdown Timer/index.html new file mode 100644 index 0000000000..d54f447dd9 --- /dev/null +++ b/29 - Countdown Timer/index.html @@ -0,0 +1,29 @@ + + + + + Countdown Timer + + + + +

+ + + + + + +

+ + + + diff --git a/29 - Countdown Timer/scripts-START.js b/29 - Countdown Timer/scripts-START.js new file mode 100644 index 0000000000..b24b43614a --- /dev/null +++ b/29 - Countdown Timer/scripts-START.js @@ -0,0 +1,61 @@ +let countdown; +const timerDisplay = document.querySelector('.display__time-left'); +const endTime = document.querySelector('.display__end-time'); +const buttons = document.querySelectorAll('[data-time]'); + + + +function timer(seconds) { + //clear any existing timers + clearInterval(countdown); + + const now = Date.now(); + const then = now + seconds * 1000; + displayTimeLeft(seconds); + displayEndTime(then); + + countdown = setInterval(() => { + const secondsLeft = Math.round((then - Date.now()) / 1000); + // check if we should stop it! + if(secondsLeft < 0) { + clearInterval(countdown); + return; + } + // display it + displayTimeLeft(secondsLeft); + }, 1000); +} + +function displayTimeLeft(seconds) { + const minutes = Math.floor(seconds / 60); + const remainderSeconds = seconds % 60; + // const display = `${minutes}:${remainderSeconds}`; + const display = `${minutes}:${remainderSeconds < 10 ? '0' : '' }${remainderSeconds}`; + document.title = display; + timerDisplay.textContent = display; + // console.log({minutes, remainderSeconds}); +} + +function displayEndTime(timestamp) { + const end = new Date(timestamp); + const hour = end.getHours(); + const adjustedHour = hour > 12 ? hour - 12 : hour; + const minutes = end.getMinutes(); + endTime.textContent = `Be Back at ${adjustedHour}:${minutes < 10 ? '0' : '' }${minutes}`; +} + +function startTimer() { + // gives a string of the time. need to parse to make a real number + // console.log(this.dataset.time); + const seconds = parseInt(this.dataset.time); + timer(seconds); +} + +buttons.forEach(button => button.addEventListener('click', startTimer)); +document.customForm.addEventListener('submit', function(e) { + e.preventDefault(); + const mins = this.minutes.value; + timer(mins * 60); + this.reset(); + +}); diff --git a/29 - Countdown Timer/style.css b/29 - Countdown Timer/style.css new file mode 100644 index 0000000000..f240799477 --- /dev/null +++ b/29 - Countdown Timer/style.css @@ -0,0 +1,82 @@ +html { + box-sizing: border-box; + font-size: 10px; + background: #8E24AA; + background: linear-gradient(45deg, #42a5f5 0%,#478ed1 50%,#0d47a1 100%); +} + +*, *:before, *:after { + box-sizing: inherit; +} + +body { + margin:0; + text-align: center; + font-family: 'Inconsolata', monospace; +} + +.display__time-left { + font-weight: 100; + font-size: 20rem; + margin: 0; + color:white; + text-shadow:4px 4px 0 rgba(0,0,0,0.05); +} + +.timer { + display:flex; + min-height: 100vh; + flex-direction:column; +} + +.timer__controls { + display: flex; +} + +.timer__controls > * { + flex:1; +} + +.timer__controls form { + flex:1; + display:flex; +} + +.timer__controls input { + flex:1; + border:0; + padding:2rem; +} + +.timer__button { + background:none; + border:0; + cursor: pointer; + 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; + font-family: 'Inconsolata', monospace; +} + +.timer__button:hover, +.timer__button:focus { + background:rgba(0,0,0,0.2); + outline:0; +} + +.display { + flex:1; + display:flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.display__end-time { + font-size: 4rem; + color:white; +} From 1d2c3bb6324273445344c63e0d4448047a086569 Mon Sep 17 00:00:00 2001 From: shimmiChristo Date: Sun, 7 Jan 2018 09:55:03 -0500 Subject: [PATCH 26/26] #30 is done --- 30 - Whack A Mole/index-START.html | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 30 - Whack A Mole/index-START.html diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html new file mode 100644 index 0000000000..e69de29bb2