From df78b2933bc4aad9dd4407d132cc51f3587010f2 Mon Sep 17 00:00:00 2001 From: anoff Date: Sat, 10 Dec 2016 21:12:07 +0100 Subject: [PATCH 1/8] #1 --- 01 - JavaScript Drum Kit/index.html | 36 +++++++++++++++++------------ 1 file changed, 21 insertions(+), 15 deletions(-) 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 @@ + From f3b773c4224ab1e0855ea8990be0b07bd000a3c1 Mon Sep 17 00:00:00 2001 From: anoff Date: Sat, 10 Dec 2016 21:41:11 +0100 Subject: [PATCH 2/8] #2 --- 02 - JS + CSS Clock/index.html | 48 ++++++++++++++++++---------------- 1 file changed, 25 insertions(+), 23 deletions(-) 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%; } - - + From 65f097dde188864d5d961a16b8bc90a624a84e39 Mon Sep 17 00:00:00 2001 From: anoff Date: Sat, 10 Dec 2016 22:05:25 +0100 Subject: [PATCH 3/8] #3 --- 03 - CSS Variables/index.html | 85 +++++++++++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 03 - CSS Variables/index.html 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

+ +
+ + + + + + + + +
+ + + + + + + + + From c635af00f460dca1e556580a679e5af0d34e0e56 Mon Sep 17 00:00:00 2001 From: anoff Date: Sat, 10 Dec 2016 23:23:55 +0100 Subject: [PATCH 4/8] #4, #5 --- 04 - Array Cardio Day 1/index.html | 84 ++++++++++++++++ 05 - Flex Panel Gallery/index.html | 153 +++++++++++++++++++++++++++++ 2 files changed, 237 insertions(+) create mode 100644 04 - Array Cardio Day 1/index.html create mode 100644 05 - Flex Panel Gallery/index.html 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

+
+
+ + + + + + + From a13ee9bedba78018bc1c1197496a091705386a9d Mon Sep 17 00:00:00 2001 From: anoff Date: Sat, 10 Dec 2016 23:50:27 +0100 Subject: [PATCH 5/8] #6 --- 06 - Type Ahead/index.html | 54 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 06 - Type Ahead/index.html 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 👀 + + + + + +
+ +
    +
  • Filter for a city
    • +
  • or a state
    • +
+
+ + + From 2c070e0c9a27193aeb768a36e6ccb119153ec259 Mon Sep 17 00:00:00 2001 From: anoff Date: Sun, 18 Dec 2016 22:06:50 +0100 Subject: [PATCH 6/8] #8 with addons --- 08 - Fun with HTML5 Canvas/index.html | 69 +++++++++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 08 - Fun with HTML5 Canvas/index.html 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 + + + + + + + + + From 9f6661adf7f6d07e4dafdd7759d8278a44e25e9a Mon Sep 17 00:00:00 2001 From: anoff Date: Thu, 22 Dec 2016 21:48:51 +0100 Subject: [PATCH 7/8] #10 --- .../index.html | 139 ++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100644 10 - Hold Shift and Check Checkboxes/index.html 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!

+
+
+ + + + From f60d85e131cd916d771c87963e2b5e8edcd9dc67 Mon Sep 17 00:00:00 2001 From: anoff Date: Tue, 10 Jan 2017 00:00:39 +0100 Subject: [PATCH 8/8] #11 --- 11 - Custom Video Player/index.html | 1 + 11 - Custom Video Player/scripts.js | 68 +++++++++++++++++++++++++++++ 11 - Custom Video Player/style.css | 8 ++++ 3 files changed, 77 insertions(+) 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;