diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html index 246639f990..92224e7ecf 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -4,6 +4,7 @@ JS Drum Kit + @@ -58,26 +59,31 @@ + diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html index 1c777557da..52265fdc18 100644 --- a/02 - JS + CSS Clock/index.html +++ b/02 - JS + CSS Clock/index.html @@ -3,6 +3,7 @@ JS + CSS Clock + @@ -61,36 +62,37 @@ background:black; position: absolute; top:50%; - transform-origin: 100%; - transform: rotate(90deg); + transform-origin: right; transition: all 0.05s; - transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); + transition-timing-function: cubic-bezier(0.41, 2.72, 0.83, 0.74); + } + .second-hand { + height: 2px; + } + .hour-hand { + width: 30%; + right: 50%; } - - + diff --git a/03 - CSS Variables/index.html b/03 - CSS Variables/index.html new file mode 100644 index 0000000000..b0f37c2c3f --- /dev/null +++ b/03 - CSS Variables/index.html @@ -0,0 +1,85 @@ + + + + + Scoped CSS Variables and JS + + + +

Update CSS Variables with JS

+ +
+ + + + + + + + +
+ + + + + + + + + diff --git a/04 - Array Cardio Day 1/index.html b/04 - Array Cardio Day 1/index.html new file mode 100644 index 0000000000..d8f1b1762e --- /dev/null +++ b/04 - Array Cardio Day 1/index.html @@ -0,0 +1,84 @@ + + + + + Array Cardio 💪 + + + + + + diff --git a/05 - Flex Panel Gallery/index.html b/05 - Flex Panel Gallery/index.html new file mode 100644 index 0000000000..1b041baf2b --- /dev/null +++ b/05 - Flex Panel Gallery/index.html @@ -0,0 +1,153 @@ + + + + + Flex Panels 💪 + + + + + + + +
+
+

Hey

+

Let's

+

Dance

+
+
+

Give

+

Take

+

Receive

+
+
+

Experience

+

It

+

Today

+
+
+

Give

+

All

+

You can

+
+
+

Life

+

In

+

Motion

+
+
+ + + + + + + diff --git a/06 - Type Ahead/index.html b/06 - Type Ahead/index.html new file mode 100644 index 0000000000..8b46623e8b --- /dev/null +++ b/06 - Type Ahead/index.html @@ -0,0 +1,54 @@ + + + + + Type Ahead 👀 + + + + + +
+ + +
+ + + diff --git a/08 - Fun with HTML5 Canvas/index.html b/08 - Fun with HTML5 Canvas/index.html new file mode 100644 index 0000000000..adf45cabbe --- /dev/null +++ b/08 - Fun with HTML5 Canvas/index.html @@ -0,0 +1,69 @@ + + + + + HTML5 Canvas + + + + + + + + + diff --git a/10 - Hold Shift and Check Checkboxes/index.html b/10 - Hold Shift and Check Checkboxes/index.html new file mode 100644 index 0000000000..55bb8dc5a3 --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/index.html @@ -0,0 +1,139 @@ + + + + + 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 index fe2b55b394..16d9c9d0cf 100644 --- a/11 - Custom Video Player/index.html +++ b/11 - Custom Video Player/index.html @@ -19,6 +19,7 @@ + diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js index e69de29bb2..2c65aac849 100644 --- a/11 - Custom Video Player/scripts.js +++ b/11 - Custom Video Player/scripts.js @@ -0,0 +1,68 @@ +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'); +const fullscreen = player.querySelector('.fullscreen'); + +// play/pause +function toggleVideo() { + if (video.paused) { + video.play(); + } else { + video.pause(); + } +} +video.addEventListener('click', toggleVideo); +toggle.addEventListener('click', toggleVideo); + +function updateButton() { + if (video.paused) { + toggle.innerHTML = '🎭'; + } else { + toggle.innerHTML = '✋'; + } +} +updateButton(); +video.addEventListener('pause', updateButton); +video.addEventListener('play', updateButton); + +// skip buttons +function skip() { + video.currentTime += parseFloat(this.dataset.skip); +} +skipButtons.forEach(e => e.addEventListener('click', skip)); + +// progress bar +function handleProgress() { + const pct = video.currentTime / video.duration; + progressBar.style.flexBasis = (pct * 100).toString() + '%'; +} +video.addEventListener('timeupdate', handleProgress); + +let scrollOn = false; +function scrubTo(e) { + if (scrollOn) { + const pct = e.offsetX / progress.offsetWidth; + video.currentTime = pct * video.duration; + } +} +progress.addEventListener('mousedown', () => { scrollOn = true; }); +progress.addEventListener('mouseup', () => { scrollOn = false; }); +progress.addEventListener('mouseout', () => { scrollOn = false; }); +progress.addEventListener('mousemove', scrubTo); +progress.addEventListener('click', scrubTo); + +// range slider (volume & speed) +function rangeUpdate() { + video[this.name] = this.value; +} +ranges.forEach(e => e.addEventListener('change', rangeUpdate)); + +// fullscreen +function toggleFullscreen() { + video.classList.toggle('player__video__fullscreen'); +} +fullscreen.addEventListener('click', toggleFullscreen); \ No newline at end of file diff --git a/11 - Custom Video Player/style.css b/11 - Custom Video Player/style.css index c07581c1c0..29f2193f1d 100644 --- a/11 - Custom Video Player/style.css +++ b/11 - Custom Video Player/style.css @@ -30,6 +30,14 @@ body { width: 100%; } +.player__video__fullscreen { + position: fixed; right: 0; bottom: 0; + min-width: 100%; min-height: 100%; + width: auto; height: auto; z-index: -100; + background: url(polina.jpg) no-repeat; + background-size: cover; +} + .player__button { background:none; border:0;