From 814964e972d80c33f38594d153894591104bcaa5 Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Fri, 9 Dec 2016 09:36:19 +0000 Subject: [PATCH 01/32] Start day 1 --- 01 - JavaScript Drum Kit/index-START.html | 66 ----------------------- 01 - JavaScript Drum Kit/index.html | 19 +------ 2 files changed, 1 insertion(+), 84 deletions(-) delete mode 100644 01 - JavaScript Drum Kit/index-START.html diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html deleted file mode 100644 index 4070d32767..0000000000 --- a/01 - JavaScript Drum Kit/index-START.html +++ /dev/null @@ -1,66 +0,0 @@ - - - - - Codestin Search App - - - - - -
-
- 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.html b/01 - JavaScript Drum Kit/index.html index a18f2bc2ca..4070d32767 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -59,25 +59,8 @@ + From 0dacd44c9d0dd60de0c31be253df10cbdb8c1389 Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Fri, 9 Dec 2016 09:54:37 +0000 Subject: [PATCH 02/32] Day 1 progress --- 01 - JavaScript Drum Kit/index.html | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html index 4070d32767..299f210e07 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -59,6 +59,17 @@ From 74150f622423b780818ffea60b22c548cf357c16 Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Fri, 9 Dec 2016 10:00:49 +0000 Subject: [PATCH 03/32] Day 1 done? MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Button stays highlighted for duration of drum. Different to Wes’ version --- 01 - JavaScript Drum Kit/index.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html index 299f210e07..adae4eab35 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -63,9 +63,11 @@ const button = document.querySelector(`div[data-key="${key}"]`); const sound = document.querySelector(`audio[data-key="${key}"]`); - button.classList.add('playing'); + if (!button) return; + + sound.addEventListener('play', () => button.classList.add('playing')); + sound.addEventListener('ended', () => button.classList.remove('playing')); sound.play(); - button.classList.remove('playing'); } window.addEventListener('keypress', e => playDrum(e.keyCode)); From f00799608edc8008369909eb2c7b6ca6635a730f Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Fri, 9 Dec 2016 10:39:31 +0000 Subject: [PATCH 04/32] Interrupt and play sound from start --- 01 - JavaScript Drum Kit/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html index adae4eab35..69cdf49191 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -65,6 +65,7 @@ if (!button) return; + sound.currentTime = 0; sound.addEventListener('play', () => button.classList.add('playing')); sound.addEventListener('ended', () => button.classList.remove('playing')); sound.play(); From 1c1b1133d8faa5b1af304c67f21d69e2f771bf74 Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Fri, 9 Dec 2016 10:56:39 +0000 Subject: [PATCH 05/32] Tidy up event listeners --- 01 - JavaScript Drum Kit/index.html | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum Kit/index.html index 69cdf49191..6268374d61 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum Kit/index.html @@ -65,12 +65,20 @@ if (!button) return; + button.classList.add('playing'); + sound.currentTime = 0; - sound.addEventListener('play', () => button.classList.add('playing')); - sound.addEventListener('ended', () => button.classList.remove('playing')); sound.play(); } +const sounds = document.querySelectorAll('audio'); +sounds.forEach(sound => { + sound.addEventListener('ended', () => { + const button = document.querySelector(`div[data-key="${sound.dataset.key}"]`); + button.classList.remove('playing'); + }); +}); + window.addEventListener('keypress', e => playDrum(e.keyCode)); From 4328965c98bf8077f24f10ad6e043371bbd558c8 Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Thu, 15 Dec 2016 16:38:55 +0000 Subject: [PATCH 06/32] Start day 2 --- 02 - JS + CSS Clock/index.html | 29 +++-------------------------- 1 file changed, 3 insertions(+), 26 deletions(-) diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html index 36c420f534..259280d228 100644 --- a/02 - JS + CSS Clock/index.html +++ b/02 - JS + CSS Clock/index.html @@ -61,36 +61,13 @@ background:black; position: absolute; top:50%; - transform-origin: 100%; - transform: rotate(90deg); - transition: all 0.05s; - transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); } - - + From 96f4907c03b6a11dd7f962af2b872e50e5cd39bb Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Thu, 15 Dec 2016 16:53:38 +0000 Subject: [PATCH 07/32] Complete day 2 --- 02 - JS + CSS Clock/index.html | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html index 259280d228..d49008f821 100644 --- a/02 - JS + CSS Clock/index.html +++ b/02 - JS + CSS Clock/index.html @@ -53,6 +53,7 @@ width: 100%; height: 100%; transform: translateY(-3px); /* account for the height of the clock hands */ + transform: rotate(90deg); } .hand { @@ -61,13 +62,34 @@ background:black; position: absolute; top:50%; + transform-origin: 100%; } From 8400a9cefb5b5c6d69a39b7b11808d9ae6f72a68 Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Fri, 16 Dec 2016 14:38:06 +0000 Subject: [PATCH 08/32] Start day 3 --- 03 - CSS Variables/index.html | 59 +++++++++++++++++++++++++++++++++++ 1 file changed, 59 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..bf0f33e3ba --- /dev/null +++ b/03 - CSS Variables/index.html @@ -0,0 +1,59 @@ + + + + + Codestin Search App + + +

Update CSS Variables with JS

+ +
+ + + + + + + + +
+ + + + + + + + + From af8404caa69a8007f90b9faa410af6c046263ae8 Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Fri, 16 Dec 2016 14:43:54 +0000 Subject: [PATCH 09/32] Day 3 copied because it's boring --- 03 - CSS Variables/index.html | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/03 - CSS Variables/index.html b/03 - CSS Variables/index.html index bf0f33e3ba..9401d7b339 100644 --- a/03 - CSS Variables/index.html +++ b/03 - CSS Variables/index.html @@ -21,6 +21,21 @@

Update CSS Variables with JS

+ From 537b56a542e446acc5532a3fb3fdc8ca9d63dfd6 Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Mon, 19 Dec 2016 10:24:07 +0000 Subject: [PATCH 10/32] Complete day 4 --- 04 - Array Cardio Day 1/index.html | 82 ++++++++++++++++++++++++++++++ 1 file changed, 82 insertions(+) create mode 100644 04 - Array Cardio Day 1/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..fc993811e2 --- /dev/null +++ b/04 - Array Cardio Day 1/index.html @@ -0,0 +1,82 @@ + + + + + Codestin Search App + + + + + From c010a292c1b7511b41653cf0c1755f898f3e8580 Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Mon, 19 Dec 2016 10:24:39 +0000 Subject: [PATCH 11/32] Start day 5 --- 05 - Flex Panel Gallery/index.html | 116 +++++++++++++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 05 - Flex Panel Gallery/index.html diff --git a/05 - Flex Panel Gallery/index.html b/05 - Flex Panel Gallery/index.html new file mode 100644 index 0000000000..e1d643ad5c --- /dev/null +++ b/05 - Flex Panel Gallery/index.html @@ -0,0 +1,116 @@ + + + + + Codestin Search App + + + + + + +
+
+

Hey

+

Let's

+

Dance

+
+
+

Give

+

Take

+

Receive

+
+
+

Experience

+

It

+

Today

+
+
+

Give

+

All

+

You can

+
+
+

Life

+

In

+

Motion

+
+
+ + + + + + + From 51f62b95945aa52575279a095f39ee391cc379fc Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Mon, 19 Dec 2016 10:45:59 +0000 Subject: [PATCH 12/32] Complete day 5 Actually followed the video this time! --- 05 - Flex Panel Gallery/index.html | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/05 - Flex Panel Gallery/index.html b/05 - Flex Panel Gallery/index.html index e1d643ad5c..683de6ffb3 100644 --- a/05 - Flex Panel Gallery/index.html +++ b/05 - Flex Panel Gallery/index.html @@ -24,6 +24,7 @@ .panels { min-height:100vh; overflow: hidden; + display: flex; } .panel { @@ -41,6 +42,11 @@ font-size: 20px; background-size:cover; background-position:center; + flex: 1; + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; } @@ -54,8 +60,17 @@ margin:0; width: 100%; transition:transform 0.5s; + flex: 1 0 auto; + display: flex; + justify-content: center; + align-items: center; } + .panel > *:first-child { transform: translateY(-100%); } + .panel.open-active > *:first-child { transform: translateY(0); } + .panel > *:last-child { transform: translateY(100%); } + .panel.open-active > *:last-child { transform: translateY(0); } + .panel p { text-transform: uppercase; font-family: 'Amatic SC', cursive; @@ -68,6 +83,7 @@ .panel.open { font-size:40px; + flex: 5; } .cta { @@ -107,7 +123,20 @@ From baea8e650aa445c3ed287c6a70f6bd3630463d13 Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Mon, 19 Dec 2016 22:50:35 +0000 Subject: [PATCH 13/32] Day 6 progress --- 06 - Type Ahead/index.html | 60 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 60 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..b60e35d259 --- /dev/null +++ b/06 - Type Ahead/index.html @@ -0,0 +1,60 @@ + + + + + Codestin Search App + + + + +
+ +
    +
  • Filter for a city
  • +
  • or a state
  • +
+
+ + + From 4e7eccb9bd805bb31fca75250ee24b6cbd449665 Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Mon, 19 Dec 2016 22:54:35 +0000 Subject: [PATCH 14/32] Brevity over readability? --- 06 - Type Ahead/index.html | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/06 - Type Ahead/index.html b/06 - Type Ahead/index.html index b60e35d259..dea8b1834e 100644 --- a/06 - Type Ahead/index.html +++ b/06 - Type Ahead/index.html @@ -40,19 +40,18 @@ }, []); } +const formatPopulation = population => parseInt(population).toLocaleString('en-GB'); + $('.search').oninput = input => { const filteredCities = filterCities(input.target.value); - const listContainer = $('.suggestions'); - const listItems = filteredCities.reduce((items, city) => { - const population = parseInt(city.population).toLocaleString('en-GB'); - return items += ` -
  • - ${city.city}, ${city.state} - ${population} -
  • ` - }, ''); - - listContainer.innerHTML = listItems; + + const listItems = filteredCities.reduce((items, city) => items += ` +
  • + ${city.city}, ${city.state} + ${formatPopulation(city.population)} +
  • `, ''); + + $('.suggestions').innerHTML = listItems; }; From 85a19a1288ea3c2872224d5e0a93ab97cb6ad875 Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Mon, 19 Dec 2016 23:09:09 +0000 Subject: [PATCH 15/32] Complete day 6 --- 06 - Type Ahead/index.html | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/06 - Type Ahead/index.html b/06 - Type Ahead/index.html index dea8b1834e..d6152fd01a 100644 --- a/06 - Type Ahead/index.html +++ b/06 - Type Ahead/index.html @@ -28,11 +28,11 @@ function filterCities(term) { return cities.reduce((result, city) => { - if (city.city.toLowerCase().includes(term)) { + if (city.city.toLowerCase().includes(term.toLowerCase())) { result.push(city); } - if (city.state.toLowerCase().includes(term)) { + if (city.state.toLowerCase().includes(term.toLowerCase())) { result.push(city); } @@ -43,11 +43,17 @@ const formatPopulation = population => parseInt(population).toLocaleString('en-GB'); $('.search').oninput = input => { - const filteredCities = filterCities(input.target.value); + const searchTerm = input.target.value; + const filteredCities = filterCities(searchTerm); + + const highlightTerm = result => { + const re = new RegExp(searchTerm, 'gi'); + return result.replace(re, `${searchTerm}`); + }; const listItems = filteredCities.reduce((items, city) => items += `
  • - ${city.city}, ${city.state} + ${highlightTerm(city.city)}, ${highlightTerm(city.state)} ${formatPopulation(city.population)}
  • `, ''); From e4a657d9d344b90021b6e41bd814f39946121a05 Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Mon, 19 Dec 2016 23:13:13 +0000 Subject: [PATCH 16/32] Tidy day 6 --- 06 - Type Ahead/index.html | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/06 - Type Ahead/index.html b/06 - Type Ahead/index.html index d6152fd01a..ce975399f3 100644 --- a/06 - Type Ahead/index.html +++ b/06 - Type Ahead/index.html @@ -40,24 +40,27 @@ }, []); } -const formatPopulation = population => parseInt(population).toLocaleString('en-GB'); - -$('.search').oninput = input => { - const searchTerm = input.target.value; - const filteredCities = filterCities(searchTerm); +function updateList(cities, searchTerm) { + const formatPopulation = population => parseInt(population).toLocaleString('en-GB'); const highlightTerm = result => { const re = new RegExp(searchTerm, 'gi'); return result.replace(re, `${searchTerm}`); }; - const listItems = filteredCities.reduce((items, city) => items += ` + $('.suggestions').innerHTML = cities.reduce((items, city) => items += `
  • ${highlightTerm(city.city)}, ${highlightTerm(city.state)} ${formatPopulation(city.population)}
  • `, ''); +} + + +$('.search').oninput = input => { + const searchTerm = input.target.value; + const filteredCities = filterCities(searchTerm); - $('.suggestions').innerHTML = listItems; + updateList(filteredCities, searchTerm); }; From e61741bff8670d5186daa026abc40a4d65b70472 Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Mon, 19 Dec 2016 23:18:12 +0000 Subject: [PATCH 17/32] Tidier day 6 --- 06 - Type Ahead/index.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/06 - Type Ahead/index.html b/06 - Type Ahead/index.html index ce975399f3..f73c7fa051 100644 --- a/06 - Type Ahead/index.html +++ b/06 - Type Ahead/index.html @@ -28,13 +28,14 @@ function filterCities(term) { return cities.reduce((result, city) => { - if (city.city.toLowerCase().includes(term.toLowerCase())) { - result.push(city); - } + const filterPlace = place => { + if (place.toLowerCase().includes(term.toLowerCase())) { + result.push(city); + } + }; - if (city.state.toLowerCase().includes(term.toLowerCase())) { - result.push(city); - } + filterPlace(city.city); + filterPlace(city.state); return result; }, []); @@ -55,7 +56,6 @@ `, ''); } - $('.search').oninput = input => { const searchTerm = input.target.value; const filteredCities = filterCities(searchTerm); From 681c817a9d2a32a639f087616ef1ab238f5616e6 Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Mon, 19 Dec 2016 23:24:12 +0000 Subject: [PATCH 18/32] Forgot about filter! --- 06 - Type Ahead/index.html | 15 ++------------- 1 file changed, 2 insertions(+), 13 deletions(-) diff --git a/06 - Type Ahead/index.html b/06 - Type Ahead/index.html index f73c7fa051..de7b054fd0 100644 --- a/06 - Type Ahead/index.html +++ b/06 - Type Ahead/index.html @@ -26,19 +26,8 @@ const $ = selector => document.querySelector(selector); function filterCities(term) { - return cities.reduce((result, city) => { - - const filterPlace = place => { - if (place.toLowerCase().includes(term.toLowerCase())) { - result.push(city); - } - }; - - filterPlace(city.city); - filterPlace(city.state); - - return result; - }, []); + const filterPlace = place => place.toLowerCase().includes(term.toLowerCase()); + return cities.filter(city => filterPlace(city.city) || filterPlace(city.state)); } function updateList(cities, searchTerm) { From f63c55951d95f98a07e886cc27492fb97462db3e Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Wed, 21 Dec 2016 15:42:15 +0000 Subject: [PATCH 19/32] Complete day 7 # Conflicts: # 01 - JavaScript Drum Kit/index.html # 02 - JS + CSS Clock/index.html --- 07 - Array Cardio Day 2/index-START.html | 40 +++-------------- 07 - Array Cardio Day 2/index.html | 57 ++++++++++++++++++++++++ 2 files changed, 64 insertions(+), 33 deletions(-) create mode 100644 07 - Array Cardio Day 2/index.html diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index-START.html index e39d35f79a..ff5e03efe0 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index-START.html @@ -2,9 +2,10 @@ - Codestin Search App + Codestin Search App +

    Psst: have a look at the JavaScript Console 💁

    - + \ No newline at end of file diff --git a/07 - Array Cardio Day 2/index.html b/07 - Array Cardio Day 2/index.html new file mode 100644 index 0000000000..17b3a6fe6c --- /dev/null +++ b/07 - Array Cardio Day 2/index.html @@ -0,0 +1,57 @@ + + + + + Codestin Search App + + +

    Psst: have a look at the JavaScript Console 💁

    + + + \ No newline at end of file From 29647221c10238dca42b421c3a869b06d1b40783 Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Fri, 23 Dec 2016 21:52:38 +0000 Subject: [PATCH 20/32] Complete day 8 --- 08 - Fun with HTML5 Canvas/index.html | 70 +++++++++++++++++++++++++++ 1 file changed, 70 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..06ef3f6c8c --- /dev/null +++ b/08 - Fun with HTML5 Canvas/index.html @@ -0,0 +1,70 @@ + + + + + Codestin Search App + + + + + + + + + From 5eea299b9f7c41d0b17449313119f43f6ab93d91 Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Fri, 23 Dec 2016 21:57:55 +0000 Subject: [PATCH 21/32] complete day 9 --- 09 - Dev Tools Domination/index.html | 89 ++++++++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 09 - Dev Tools Domination/index.html diff --git a/09 - Dev Tools Domination/index.html b/09 - Dev Tools Domination/index.html new file mode 100644 index 0000000000..432d32534b --- /dev/null +++ b/09 - Dev Tools Domination/index.html @@ -0,0 +1,89 @@ + + + + + Codestin Search App + + + +

    ×BREAK×DOWN×

    + + + + From ee92a25e6242671a3defcb9023119101ebeffe6a Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Fri, 23 Dec 2016 22:42:37 +0000 Subject: [PATCH 22/32] Complete day 10 --- .../index.html | 135 ++++++++++++++++++ 1 file changed, 135 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..d8bae3cc8d --- /dev/null +++ b/10 - Hold Shift and Check Checkboxes/index.html @@ -0,0 +1,135 @@ + + + + + Codestin Search App + + + + +
    +
    + +

    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 4d45d875d3b9ecd9b9282c85d79510004a9aed6b Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Mon, 26 Dec 2016 14:25:36 +0000 Subject: [PATCH 23/32] Got the gist of day 11 --- 11 - Custom Video Player/scripts.js | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js index e69de29bb2..e3e573f815 100644 --- a/11 - Custom Video Player/scripts.js +++ b/11 - Custom Video Player/scripts.js @@ -0,0 +1,27 @@ +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'); + +video.addEventListener('click', togglePlay); +video.addEventListener('play', updateButton); +video.addEventListener('pause', updateButton); +video.addEventListener('timeupdate', handleProgress); + +toggle.addEventListener('click', togglePlay); + +function togglePlay() { + video.paused ? video.play() : video.pause(); +} + +function updateButton() { + toggle.textContent = this.paused ? '►' : '❚ ❚'; +} + +function handleProgress() { + const percentProgress = this.currentTime / this.duration * 100; + progressBar.style.flexBasis = `${percentProgress}%`; +} \ No newline at end of file From 264add3f1f5dbf15fcb31fd895bfe79b7f1b148c Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Mon, 26 Dec 2016 14:40:50 +0000 Subject: [PATCH 24/32] Complete day 12 --- 12 - Key Sequence Detection/index.html | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 12 - Key Sequence Detection/index.html diff --git a/12 - Key Sequence Detection/index.html b/12 - Key Sequence Detection/index.html new file mode 100644 index 0000000000..2022ff4c20 --- /dev/null +++ b/12 - Key Sequence Detection/index.html @@ -0,0 +1,24 @@ + + + + + Codestin Search App + + + + + + From 4f2bbedcec60854ab140bf33ac43ea6b14cc47fa Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Mon, 26 Dec 2016 14:42:43 +0000 Subject: [PATCH 25/32] Don't hardcode string length --- 12 - Key Sequence Detection/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/12 - Key Sequence Detection/index.html b/12 - Key Sequence Detection/index.html index 2022ff4c20..d5c440f014 100644 --- a/12 - Key Sequence Detection/index.html +++ b/12 - Key Sequence Detection/index.html @@ -13,7 +13,7 @@ window.addEventListener('keypress', e => { input += e.key; - if (input.substr(-6) === code) { + if (input.substr(-code.length) === code) { input = ''; cornify_add(); } From 3a13c8d00101042e231bc84772218469980b7af6 Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Mon, 26 Dec 2016 18:35:43 +0000 Subject: [PATCH 26/32] Complete day 13 --- 13 - Slide in on Scroll/index.html | 140 +++++++++++++++++++++++++++++ 1 file changed, 140 insertions(+) create mode 100644 13 - Slide in on Scroll/index.html diff --git a/13 - Slide in on Scroll/index.html b/13 - Slide in on Scroll/index.html new file mode 100644 index 0000000000..9cf2fd5daa --- /dev/null +++ b/13 - Slide in on Scroll/index.html @@ -0,0 +1,140 @@ + + + + + Codestin Search App + + + +
    + +

    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. 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. 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.

    + + + +

    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.

    + + + +

    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.

    +

    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.

    + + + + +
    + + + + + + + \ No newline at end of file From e46f5e19b87b16ab5fdbb53b42ff706089bf2c37 Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Mon, 26 Dec 2016 18:37:51 +0000 Subject: [PATCH 27/32] Complete day 14 --- .../index.html | 99 +++++++++++++++++++ 1 file changed, 99 insertions(+) create mode 100644 14 - JavaScript References VS Copying/index.html diff --git a/14 - JavaScript References VS Copying/index.html b/14 - JavaScript References VS Copying/index.html new file mode 100644 index 0000000000..20f0732c4e --- /dev/null +++ b/14 - JavaScript References VS Copying/index.html @@ -0,0 +1,99 @@ + + + + + Codestin Search App + + + + + + + From 49010f6c55bec007f0aaff8d8b575eacf31b2a86 Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Tue, 27 Dec 2016 17:27:04 +0000 Subject: [PATCH 28/32] Complete day 15 --- 15 - LocalStorage/index.html | 84 ++++++++++++++++++++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 15 - LocalStorage/index.html diff --git a/15 - LocalStorage/index.html b/15 - LocalStorage/index.html new file mode 100644 index 0000000000..2be36711ff --- /dev/null +++ b/15 - LocalStorage/index.html @@ -0,0 +1,84 @@ + + + + + Codestin Search App + + + + + + + +
    +

    LOCAL TAPAS

    +

    +
      +
    • Loading Tapas...
    • +
    +
    + + +
    +
    + + + + + + + From 52ee034cd6abe2f351b946134b4832f9d15a3071 Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Thu, 29 Dec 2016 15:54:50 +0000 Subject: [PATCH 29/32] Update --- 16 - Mouse Move Shadow/index-finished.html | 63 ++++++++++++++++++++++ 16 - Mouse Move Shadow/index-start.html | 29 +--------- 2 files changed, 64 insertions(+), 28 deletions(-) create mode 100644 16 - Mouse Move Shadow/index-finished.html diff --git a/16 - Mouse Move Shadow/index-finished.html b/16 - Mouse Move Shadow/index-finished.html new file mode 100644 index 0000000000..53ac97d981 --- /dev/null +++ b/16 - Mouse Move Shadow/index-finished.html @@ -0,0 +1,63 @@ + + + + + Codestin Search App + + + +
    +

    🔥WOAH!

    +
    + + + + + + \ No newline at end of file diff --git a/16 - Mouse Move Shadow/index-start.html b/16 - Mouse Move Shadow/index-start.html index 4328eaf6ab..5f2287f102 100644 --- a/16 - Mouse Move Shadow/index-start.html +++ b/16 - Mouse Move Shadow/index-start.html @@ -24,7 +24,6 @@

    🔥WOAH!

    color:black; } - h1 { text-shadow: 10px 10px 0 rgba(0,0,0,1); font-size: 100px; @@ -32,32 +31,6 @@

    🔥WOAH!

    - + \ No newline at end of file From be4b205610fa768df274b982908f664395ffaee3 Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Sat, 7 Jan 2017 21:03:41 +0000 Subject: [PATCH 30/32] Complete day 16 --- 16 - Mouse Move Shadow/index.html | 62 +++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 16 - Mouse Move Shadow/index.html diff --git a/16 - Mouse Move Shadow/index.html b/16 - Mouse Move Shadow/index.html new file mode 100644 index 0000000000..cfe77527a0 --- /dev/null +++ b/16 - Mouse Move Shadow/index.html @@ -0,0 +1,62 @@ + + + + + Codestin Search App + + + +
    +

    🔥WOAH!

    +
    + + + + + + \ No newline at end of file From 0e69fbc253d41a7a354696b4eabcf6b9a16ff723 Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Sat, 7 Jan 2017 21:13:01 +0000 Subject: [PATCH 31/32] Complete day 17 --- 17 - Sort Without Articles/index.html | 58 +++++++++++++++++++++++++++ 1 file changed, 58 insertions(+) create mode 100644 17 - Sort Without Articles/index.html diff --git a/17 - Sort Without Articles/index.html b/17 - Sort Without Articles/index.html new file mode 100644 index 0000000000..ef9c83b817 --- /dev/null +++ b/17 - Sort Without Articles/index.html @@ -0,0 +1,58 @@ + + + + + Codestin Search App + + + + + +
      + + + + + From f80e9e9980b93ad22d34876752ada7994c940cf0 Mon Sep 17 00:00:00 2001 From: Graeme Tait Date: Sat, 7 Jan 2017 21:36:41 +0000 Subject: [PATCH 32/32] Complete day 18 --- 18 - Adding Up Times with Reduce/index.html | 203 ++++++++++++++++++++ 1 file changed, 203 insertions(+) create mode 100644 18 - Adding Up Times with Reduce/index.html diff --git a/18 - Adding Up Times with Reduce/index.html b/18 - Adding Up Times with Reduce/index.html new file mode 100644 index 0000000000..d2ff172d4b --- /dev/null +++ b/18 - Adding Up Times with Reduce/index.html @@ -0,0 +1,203 @@ + + + + + Codestin Search App + + +
        +
      • + 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 +
      • +
      + + +