From 0d69b0569d58d6bd84297d8ba0a8402fc8f9a483 Mon Sep 17 00:00:00 2001 From: Sergey Royz Date: Fri, 25 Oct 2019 14:25:28 +0300 Subject: [PATCH 01/18] 01 --- .../{index-START.html => index.html} | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) rename 01 - JavaScript Drum Kit/{index-START.html => index.html} (76%) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index.html similarity index 76% rename from 01 - JavaScript Drum Kit/index-START.html rename to 01 - JavaScript Drum Kit/index.html index 4070d32767..973da4ace0 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index.html @@ -58,6 +58,25 @@ From 9dc1c3d45f34b681f538f5224d43b9541eaebbc3 Mon Sep 17 00:00:00 2001 From: Sergey Royz Date: Mon, 28 Oct 2019 11:23:18 +0100 Subject: [PATCH 02/18] 02 --- .../{index-START.html => index.html} | 28 ++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) rename 02 - JS and CSS Clock/{index-START.html => index.html} (59%) diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index.html similarity index 59% rename from 02 - JS and CSS Clock/index-START.html rename to 02 - JS and CSS Clock/index.html index 12f721b183..87eb82b577 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index.html @@ -61,13 +61,39 @@ height: 6px; background: black; position: absolute; - top: 50%; + top: 50%; + transform-origin: 100%; + transform: rotate(90deg); + transition: all 0.1s; + transition-timing-function: cubic-bezier(0, 2.24, 0.58, 1); } From 2ed636ed770eea034b06ce9118e6484c811ed672 Mon Sep 17 00:00:00 2001 From: Sergey Royz Date: Fri, 1 Nov 2019 10:00:15 +0100 Subject: [PATCH 03/18] 03 --- .../{index-START.html => index.html} | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) rename 03 - CSS Variables/{index-START.html => index.html} (64%) diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index.html similarity index 64% rename from 03 - CSS Variables/index-START.html rename to 03 - CSS Variables/index.html index 6b9b539c09..cbd505f2cc 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index.html @@ -21,6 +21,17 @@

Update CSS Variables with JS

From f61dc84b973b076586848ed99eb864afbd8cc9ff Mon Sep 17 00:00:00 2001 From: Sergey Royz Date: Fri, 15 Nov 2019 16:39:13 +0300 Subject: [PATCH 04/18] 04 --- .../{index-START.html => index.html} | 33 ++++++++++++++++++- 1 file changed, 32 insertions(+), 1 deletion(-) rename 04 - Array Cardio Day 1/{index-START.html => index.html} (68%) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index.html similarity index 68% rename from 04 - Array Cardio Day 1/index-START.html rename to 04 - Array Cardio Day 1/index.html index eec0ffc31d..a2897464ad 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index.html @@ -31,28 +31,59 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const fifteen = inventors.filter(i => i.year > 1500 && i.year < 1600); + console.table(fifteen); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + const names = inventors.map(i => `${i.first} ${i.last}`); + console.log(names); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const bsorted = inventors.sort((a, b) => a.year > b.year ? 1 : -1); + console.table(bsorted); // Array.prototype.reduce() // 4. How many years did all the inventors live? + const totalYears = inventors.reduce((total, i) => total + (i.passed - i.year), 0); + console.log(totalYears); // 5. Sort the inventors by years lived + const lsorted = inventors.sort((a, b) => { + const aLast = a.passed - a.year; + const bLast = b.passed - b.year; + return aLast > bLast ? 1 : -1; + }); + console.table(lsorted); + // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris + // const links = Array.from(document.querySelector('.mw-category').querySelectorAll('a')); + // const deBoulevards = links.map(i => i.textContent).filter(name => name.indexOf('de') > 0); // 7. sort Exercise // Sort the people alphabetically by last name + const sortedPeople = people.sort((a, b) => { + const [af, al] = a.split(', '); + const [bf, bl] = b.split(', '); + return al > bl ? 1 : -1; + }); + console.log(sortedPeople); // 8. Reduce Exercise // Sum up the instances of each of these - const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; + const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck', 'pookie pookie' ]; + const freq = data.reduce((acc, item) => { + if (!acc[item]) { + acc[item] = 0; + } + acc[item]++; + return acc; + }, {}); + console.log(freq); From 7717bfa522f22220b2df7f2343b818b6c8430de4 Mon Sep 17 00:00:00 2001 From: Sergey Royz Date: Mon, 9 Dec 2019 13:49:34 +0100 Subject: [PATCH 05/18] 05 --- .../{index-START.html => index.html} | 31 +++++++++++++++++++ 1 file changed, 31 insertions(+) rename 05 - Flex Panel Gallery/{index-START.html => index.html} (74%) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index.html similarity index 74% rename from 05 - Flex Panel Gallery/index-START.html rename to 05 - Flex Panel Gallery/index.html index 71d1c26f00..da05c66387 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index.html @@ -26,6 +26,7 @@ .panels { min-height: 100vh; overflow: hidden; + display: flex; } .panel { @@ -43,6 +44,11 @@ font-size: 20px; background-size: cover; background-position: center; + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); } @@ -56,8 +62,17 @@ margin: 0; width: 100%; transition: transform 0.5s; + flex: 1 0 auto; + justify-content: center; + align-items: center; + display: flex; } + .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; @@ -71,6 +86,7 @@ .panel.open { font-size: 40px; + flex: 5; } @@ -105,6 +121,21 @@ From 3dd43467f3fa69a380927b2056ac43b7634e8cfc Mon Sep 17 00:00:00 2001 From: Sergey Royz Date: Sat, 14 Dec 2019 11:04:50 +0100 Subject: [PATCH 06/18] 06 --- 06 - Type Ahead/index-START.html | 22 ------------ 06 - Type Ahead/index.html | 62 ++++++++++++++++++++++++++++++++ 2 files changed, 62 insertions(+), 22 deletions(-) delete mode 100644 06 - Type Ahead/index-START.html create mode 100644 06 - Type Ahead/index.html diff --git a/06 - Type Ahead/index-START.html b/06 - Type Ahead/index-START.html deleted file mode 100644 index 109c90fb36..0000000000 --- a/06 - Type Ahead/index-START.html +++ /dev/null @@ -1,22 +0,0 @@ - - - - - Type Ahead 👀 - - - - -
- -
    -
  • Filter for a city
  • -
  • or a state
  • -
-
- - - diff --git a/06 - Type Ahead/index.html b/06 - Type Ahead/index.html new file mode 100644 index 0000000000..2b6ce3a0e7 --- /dev/null +++ b/06 - Type Ahead/index.html @@ -0,0 +1,62 @@ + + + + + Type Ahead 👀 + + + + +
+ +
    +
  • Filter for a city
  • +
  • or a state
  • +
+
+ + + From 4db7cfe03cc54ec930f979e5dea7178be04c8c4b Mon Sep 17 00:00:00 2001 From: Sergey Royz Date: Tue, 17 Dec 2019 19:04:14 +0100 Subject: [PATCH 07/18] 07 --- .../{index-START.html => index.html} | 13 +++++++++++++ 1 file changed, 13 insertions(+) rename 07 - Array Cardio Day 2/{index-START.html => index.html} (68%) diff --git a/07 - Array Cardio Day 2/index-START.html b/07 - Array Cardio Day 2/index.html similarity index 68% rename from 07 - Array Cardio Day 2/index-START.html rename to 07 - Array Cardio Day 2/index.html index 969566ff78..9bbd5cb141 100644 --- a/07 - Array Cardio Day 2/index-START.html +++ b/07 - Array Cardio Day 2/index.html @@ -26,12 +26,25 @@ // Some and Every Checks // Array.prototype.some() // is at least one person 19 or older? + const isAdult = people.some(p => (new Date()).getFullYear() - p.year >= 19); + console.log({isAdult}); + + const allAdults = people.every(p => (new Date()).getFullYear() - p.year >= 19); + console.log({allAdults}); // Array.prototype.every() // is everyone 19 or older? // Array.prototype.find() // Find is like filter, but instead returns just the one you are looking for // find the comment with the ID of 823423 + const specificId = comments.find(c => c.id === 823423); + console.log({specificId}); + const index = comments.findIndex(comment => comment.id === 823423); + const newComments = [ + ...comments.slice(0, index), + ...comments.slice(index + 1), + ]; + console.table(newComments); // Array.prototype.findIndex() // Find the comment with this ID // delete the comment with the ID of 823423 From 1db71f6ace0dadf34041b68d54c9e9e55b485cf2 Mon Sep 17 00:00:00 2001 From: Sergey Royz Date: Tue, 7 Jan 2020 10:27:36 +0100 Subject: [PATCH 08/18] 08 --- 08 - Fun with HTML5 Canvas/index-START.html | 19 ------ 08 - Fun with HTML5 Canvas/index.html | 75 +++++++++++++++++++++ 2 files changed, 75 insertions(+), 19 deletions(-) delete mode 100644 08 - Fun with HTML5 Canvas/index-START.html create mode 100644 08 - Fun with HTML5 Canvas/index.html 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 9da9b5b3c5..0000000000 --- a/08 - Fun with HTML5 Canvas/index-START.html +++ /dev/null @@ -1,19 +0,0 @@ - - - - - HTML5 Canvas - - - - - - - - - diff --git a/08 - Fun with HTML5 Canvas/index.html b/08 - Fun with HTML5 Canvas/index.html new file mode 100644 index 0000000000..50368edee6 --- /dev/null +++ b/08 - Fun with HTML5 Canvas/index.html @@ -0,0 +1,75 @@ + + + + + HTML5 Canvas + + + + + + + + + + + From fa12f7bebf686c621a32de9476316f6a1c6f2971 Mon Sep 17 00:00:00 2001 From: Sergey Royz Date: Mon, 13 Jan 2020 21:01:18 +0100 Subject: [PATCH 09/18] 10 --- .../{index-START.html => index.html} | 26 ++++++++++++++++++- 1 file changed, 25 insertions(+), 1 deletion(-) rename 10 - Hold Shift and Check Checkboxes/{index-START.html => index.html} (80%) diff --git a/10 - Hold Shift and Check Checkboxes/index-START.html b/10 - Hold Shift and Check Checkboxes/index.html similarity index 80% rename from 10 - Hold Shift and Check Checkboxes/index-START.html rename to 10 - Hold Shift and Check Checkboxes/index.html index 4fd2936ddc..aae08ce4ac 100644 --- a/10 - Hold Shift and Check Checkboxes/index-START.html +++ b/10 - Hold Shift and Check Checkboxes/index.html @@ -95,7 +95,31 @@ - From d51fc8c9a4638d04108a6f4e5fcc0525fe8ebabb Mon Sep 17 00:00:00 2001 From: Sergey Royz Date: Mon, 20 Jan 2020 10:33:29 +0100 Subject: [PATCH 10/18] 10 & 11 --- 11 - Custom Video Player/scripts.js | 55 ++++++++++++++++++++ 12 - Key Sequence Detection/index-START.html | 12 ----- 12 - Key Sequence Detection/index.html | 25 +++++++++ 3 files changed, 80 insertions(+), 12 deletions(-) delete mode 100644 12 - Key Sequence Detection/index-START.html create mode 100644 12 - Key Sequence Detection/index.html diff --git a/11 - Custom Video Player/scripts.js b/11 - Custom Video Player/scripts.js index e69de29bb2..4656b218a7 100644 --- a/11 - Custom Video Player/scripts.js +++ b/11 - Custom Video Player/scripts.js @@ -0,0 +1,55 @@ +/* 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 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/12 - Key Sequence Detection/index-START.html b/12 - Key Sequence Detection/index-START.html deleted file mode 100644 index dc53c4e9e1..0000000000 --- a/12 - Key Sequence Detection/index-START.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - Key Detection - - - - - - diff --git a/12 - Key Sequence Detection/index.html b/12 - Key Sequence Detection/index.html new file mode 100644 index 0000000000..a4da1db68d --- /dev/null +++ b/12 - Key Sequence Detection/index.html @@ -0,0 +1,25 @@ + + + + + Key Detection + + + + + + From ac6489ab0dc357c7504afcbba847ca017dfadc42 Mon Sep 17 00:00:00 2001 From: Sergey Royz Date: Thu, 30 Jan 2020 10:36:58 +0100 Subject: [PATCH 11/18] 13 --- .../{index-START.html => index.html} | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) rename 13 - Slide in on Scroll/{index-START.html => index.html} (95%) diff --git a/13 - Slide in on Scroll/index-START.html b/13 - Slide in on Scroll/index.html similarity index 95% rename from 13 - Slide in on Scroll/index-START.html rename to 13 - Slide in on Scroll/index.html index ad2f0e580a..d1bc2faab5 100644 --- a/13 - Slide in on Scroll/index-START.html +++ b/13 - Slide in on Scroll/index.html @@ -58,6 +58,26 @@

Slide in on Scroll

}; } + const images = document.querySelectorAll('.slide-in'); + + + function scrollHandler(e) { + images.forEach(image => { + const slideInAt = (window.scrollY + window.innerHeight) - image.height / 2; + const imageBottom = image.offsetTop + image.height; + const isHalfShown = slideInAt > image.offsetTop; + const isNotScrolledPassed = window.scrollY < imageBottom; + if (isHalfShown && isNotScrolledPassed) { + image.classList.add('active'); + } else { + image.classList.remove('active'); + } + }) + + } + + window.addEventListener('scroll', debounce(scrollHandler)); + - - - - diff --git a/16 - Mouse Move Shadow/index.html b/16 - Mouse Move Shadow/index.html new file mode 100644 index 0000000000..08008b086b --- /dev/null +++ b/16 - Mouse Move Shadow/index.html @@ -0,0 +1,65 @@ + + + + + Mouse Shadow + + + +
+

🔥WOAH!

+
+ + + + + + From ae1736239d1114535312b838f6d0bde27525e49f Mon Sep 17 00:00:00 2001 From: Sergey Royz Date: Thu, 13 Feb 2020 07:55:11 +0100 Subject: [PATCH 14/18] 17 --- .../{index-START.html => index.html} | 10 ++++++++++ 1 file changed, 10 insertions(+) rename 17 - Sort Without Articles/{index-START.html => index.html} (80%) diff --git a/17 - Sort Without Articles/index-START.html b/17 - Sort Without Articles/index.html similarity index 80% rename from 17 - Sort Without Articles/index-START.html rename to 17 - Sort Without Articles/index.html index 2b6c9546e9..3e4aeb6626 100644 --- a/17 - Sort Without Articles/index-START.html +++ b/17 - Sort Without Articles/index.html @@ -48,6 +48,16 @@ From a4362547126268826a967cad3853d0e0ca4d2ed1 Mon Sep 17 00:00:00 2001 From: Sergey Royz Date: Mon, 17 Feb 2020 15:23:09 +0100 Subject: [PATCH 15/18] 18 --- .../{index-START.html => index.html} | 20 ++++++++++++++++++- 1 file changed, 19 insertions(+), 1 deletion(-) rename 18 - Adding Up Times with Reduce/{index-START.html => index.html} (84%) diff --git a/18 - Adding Up Times with Reduce/index-START.html b/18 - Adding Up Times with Reduce/index.html similarity index 84% rename from 18 - Adding Up Times with Reduce/index-START.html rename to 18 - Adding Up Times with Reduce/index.html index abdf4c91af..3aaf3a75a4 100644 --- a/18 - Adding Up Times with Reduce/index-START.html +++ b/18 - Adding Up Times with Reduce/index.html @@ -177,11 +177,29 @@
  • Video 57
  • -
  • +
  • Video 58
  • From 2db01224536dcc1af809993f0414797b151a77e8 Mon Sep 17 00:00:00 2001 From: Sergey Royz Date: Fri, 28 Feb 2020 20:10:21 +0100 Subject: [PATCH 16/18] 19 --- 19 - Webcam Fun/index.html | 1 + 19 - Webcam Fun/package-lock.json | 4046 +++++++++++++++++++++++++++++ 19 - Webcam Fun/scripts.js | 86 + 3 files changed, 4133 insertions(+) create mode 100644 19 - Webcam Fun/package-lock.json diff --git a/19 - Webcam Fun/index.html b/19 - Webcam Fun/index.html index d4ffc4dc2a..7536ca93ce 100755 --- a/19 - Webcam Fun/index.html +++ b/19 - Webcam Fun/index.html @@ -10,6 +10,7 @@
    +