- A - clap -

- S - hihat -

- D - kick -

- F - openhat -

- G - boom -

- H - ride -

- J - snare +

+ A + clap +

+ S + hihat +

+ D + kick +

+ F + openhat +

+ G + boom +

+ H + ride +

+ J + snare +

+ K + tom +

+ L + tink +

- K - tom -

- L - tink -

+ + + function removeTransition(e) { + if (e.propertyName !== 'transform') return; + + this.classList.remove('playing'); + } + + const keys = document.querySelectorAll('.key'); + keys.forEach(key => key.addEventListener('transitionend', removeTransition)); + + xwindow.addEventListener('keydown', playSound); + - + + \ No newline at end of file From 79884113b5f18e8f07c9b645b938e21d7d4cf5f9 Mon Sep 17 00:00:00 2001 From: Michal Slepko Date: Tue, 19 Mar 2019 21:25:52 +0000 Subject: [PATCH 02/30] JavaScript 30 - Day 2 --- 02 - JS and CSS Clock/index-START.html | 135 ++++++++++++++----------- 1 file changed, 78 insertions(+), 57 deletions(-) diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 7cbf5f6ba6..5190a7afae 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -1,74 +1,95 @@ + - - JS + CSS Clock + + JS + CSS Clock +

- - .clock { - width: 30rem; - height: 30rem; - border: 20px solid white; - border-radius: 50%; - margin: 50px auto; - position: relative; - padding: 2rem; - box-shadow: - 0 0 0 4px rgba(0,0,0,0.1), - inset 0 0 0 3px #EFEFEF, - inset 0 0 10px black, - 0 0 10px rgba(0,0,0,0.2); - } + + setInterval(setDate, 1000); + - + + \ No newline at end of file From 3c9a17438435bfa5a904ce9fe98d636e1c9fbb6c Mon Sep 17 00:00:00 2001 From: Michal Slepko Date: Wed, 20 Mar 2019 21:37:11 +0000 Subject: [PATCH 03/30] JavaScript 30 - Day 3 --- 03 - CSS Variables/index-START.html | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html index 6b9b539c09..7bd900df54 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables/index-START.html @@ -21,11 +21,26 @@

Update CSS Variables with JS

From a6e93f447e434bf610950231a734c4d4e4ffa5e7 Mon Sep 17 00:00:00 2001 From: Michal Slepko Date: Thu, 21 Mar 2019 21:54:55 +0000 Subject: [PATCH 04/30] JavaScript 30 - Day 4 --- 04 - Array Cardio Day 1/index-START.html | 52 +++++++++++++++++++++++- 1 file changed, 50 insertions(+), 2 deletions(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index eec0ffc31d..9097962f44 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -31,29 +31,77 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const fifteen_l = inventors.filter(function(inventor) { + return inventor.year >= 1500 && inventor.year < 1600 + }); + + const fifteen = inventors.filter(inventor => (inventor.year >= 1500 && inventor.year < 1600)); + + console.table(fifteen); // Array.prototype.map() // 2. Give us an array of the inventors' first and last names + const fullNames = inventors.map(inventor => `${inventor.first} ${inventor.last}`); + + console.log(fullNames); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const ordered = inventors.sort((a, b) => a.year > b.year ? 1 : -1); + + console.table(ordered); // Array.prototype.reduce() // 4. How many years did all the inventors live? + const totalYears = inventors.reduce((total, inventor) => { + return total + (inventor.passed - inventor.year) + }, 0); + + console.log(totalYears); // 5. Sort the inventors by years lived + const oldest = inventors.sort((a, b) => { + const last = a.passed - a.year; + const next = b.passed - b.year; + return last > next ? -1 : 1; + }); + + console.table(oldest); // 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 category = document.querySelector('.mw-category'); + const links = Array.from(category.querySelectorAll('a')); + //const links = [...category.querySelectorAll('a')]; // ES6 spread + const de = links + .map(link => link.textContent) + .filter(streetName => streetName.includes('de')); + */ // 7. sort Exercise // Sort the people alphabetically by last name + const alpha = people.sort((lastOne, nextOne) => { + const [aLast, aFirst] = lastOne.split(', '); + const [bLast, bFirst] = nextOne.split(', '); + return aLast > bLast ? 1 : -1; + }); + + console.log(alpha); // 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 transportation = data.reduce((obj, item) => { + if(!obj[item]) { + obj[item] = 0; + } + obj[item]++; + return obj; + }, {}); // start with empty object + + console.log(transportation); + From 8aeaa1779a5c46d2054bdd4670c2a5923923cc02 Mon Sep 17 00:00:00 2001 From: Michal Slepko Date: Sat, 23 Mar 2019 00:01:44 +0000 Subject: [PATCH 05/30] JavaScript 30 - Day 5 --- 05 - Flex Panel Gallery/index-START.html | 37 ++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/05 - Flex Panel Gallery/index-START.html b/05 - Flex Panel Gallery/index-START.html index 71d1c26f00..246f81ded3 100644 --- a/05 - Flex Panel Gallery/index-START.html +++ b/05 - Flex Panel Gallery/index-START.html @@ -26,9 +26,15 @@ .panels { min-height: 100vh; overflow: hidden; + display: flex; } .panel { + flex: 1; + justify-content: center; + align-items: center; + display: flex; + flex-direction: column; background: #6B0F9C; box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1); color: white; @@ -56,6 +62,24 @@ 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 > *:last-child { + transform: translateY(100%); + } + + .panel.open-active > *:first-child { + transform: translateY(0); + } + .panel.open-active > *:last-child { + transform: translateY(0); } .panel p { @@ -71,6 +95,7 @@ .panel.open { font-size: 40px; + flex: 5; } @@ -105,7 +130,19 @@

The Voiceinator 5000

Date: Mon, 22 Apr 2019 22:46:13 +0100 Subject: [PATCH 24/30] JavaScript 30 - Day 24 --- 24 - Sticky Nav/index-START.html | 14 +++++++++++++- 24 - Sticky Nav/style-START.css | 13 +++++++++++++ 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/24 - Sticky Nav/index-START.html b/24 - Sticky Nav/index-START.html index e7bc67e9a5..b0f3911889 100644 --- a/24 - Sticky Nav/index-START.html +++ b/24 - Sticky Nav/index-START.html @@ -54,7 +54,19 @@

A story about getting lost.

diff --git a/24 - Sticky Nav/style-START.css b/24 - Sticky Nav/style-START.css index b83b9c01ae..5b27cb2832 100644 --- a/24 - Sticky Nav/style-START.css +++ b/24 - Sticky Nav/style-START.css @@ -25,6 +25,10 @@ body { transition: transform 0.5s; } +.fixed-nav .site-wrap { + transform: scale(1); +} + header { text-align: center; height: 50vh; @@ -50,6 +54,11 @@ nav { z-index: 1; } +.fixed-nav nav { + position: fixed; + box-shadow: 0 5px rbga(0, 0, 0, 0.1); +} + nav ul { margin: 0; padding:0; @@ -74,6 +83,10 @@ li.logo { font-size: 30px; } +.fixed-nav li.logo { + max-width: 500px; +} + li.logo a { color: black; } From 53dc07c0c610c633aaac0cdd778c75e3b7b0d0a7 Mon Sep 17 00:00:00 2001 From: Michal Slepko Date: Mon, 22 Apr 2019 22:57:21 +0100 Subject: [PATCH 25/30] JavaScript 30 - Day 25 --- .../index-START.html | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html index 7bd5931e01..207c040a44 100644 --- a/25 - Event Capture, Propagation, Bubbling and Once/index-START.html +++ b/25 - Event Capture, Propagation, Bubbling and Once/index-START.html @@ -42,7 +42,17 @@ From 1493ddd75f907324bacd875c4745b1f533c0ee8f Mon Sep 17 00:00:00 2001 From: Michal Slepko Date: Wed, 24 Apr 2019 22:12:21 +0100 Subject: [PATCH 26/30] JavaScript 30 - Day 26 --- 26 - Stripe Follow Along Nav/index-START.html | 34 ++++++++++++++++++- 1 file changed, 33 insertions(+), 1 deletion(-) diff --git a/26 - Stripe Follow Along Nav/index-START.html b/26 - Stripe Follow Along Nav/index-START.html index 608d0a6716..6d77f7c22a 100644 --- a/26 - Stripe Follow Along Nav/index-START.html +++ b/26 - Stripe Follow Along Nav/index-START.html @@ -218,8 +218,40 @@

Cool

.button[href*=facebook] { background: #3B5998; } .button[href*=courses] { background: #ffc600; } - From 7a862bad67c202bae2fc476937a219e8bdd44336 Mon Sep 17 00:00:00 2001 From: Michal Slepko Date: Wed, 24 Apr 2019 22:26:46 +0100 Subject: [PATCH 27/30] JavaScript 30 - Day 27 --- 27 - Click and Drag/index-START.html | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/27 - Click and Drag/index-START.html b/27 - Click and Drag/index-START.html index b8609315f7..c47549ac6f 100644 --- a/27 - Click and Drag/index-START.html +++ b/27 - Click and Drag/index-START.html @@ -35,6 +35,32 @@ From da28f170d4df5924bf70737b9160c695456f2eb7 Mon Sep 17 00:00:00 2001 From: Michal Slepko Date: Thu, 25 Apr 2019 22:56:45 +0100 Subject: [PATCH 28/30] JavaScript 30 - Day 28 --- 28 - Video Speed Controller/index-START.html | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/28 - Video Speed Controller/index-START.html b/28 - Video Speed Controller/index-START.html index 8bd536b18b..b6e0813c5d 100644 --- a/28 - Video Speed Controller/index-START.html +++ b/28 - Video Speed Controller/index-START.html @@ -15,6 +15,23 @@ From 1d113cedd9c2fc633ff5da807382dd48593aefd8 Mon Sep 17 00:00:00 2001 From: Michal Slepko Date: Fri, 26 Apr 2019 22:41:33 +0100 Subject: [PATCH 29/30] JavaScript 30 - Day 29 --- 29 - Countdown Timer/scripts-START.js | 50 +++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/29 - Countdown Timer/scripts-START.js b/29 - Countdown Timer/scripts-START.js index e69de29bb2..bbec314d6a 100644 --- a/29 - Countdown Timer/scripts-START.js +++ b/29 - Countdown Timer/scripts-START.js @@ -0,0 +1,50 @@ +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) { + clearInterval(countdown); + const now = Date.now(); + const then = now + seconds * 1000; + displayEndTime(then); + displayTimeLeft(seconds); + + countdown = setInterval(() => { + const secondsLeft = Math.round((then - Date.now()) / 1000); + if (secondsLeft < 0) { + clearInterval(countdown); + return; + } + displayTimeLeft(secondsLeft); + }, 1000); +} + +function displayTimeLeft(seconds) { + const minutes = Math.floor(seconds / 60); + const remainderSeconds = seconds % 60; + const display = `${minutes}:${remainderSeconds < 10 ? '0' : ''}${remainderSeconds}`; + + timerDisplay.textContent = display; + document.title = display; +} + +function displayEndTime(timestamp) { + const end = new Date(timestamp); + const hours = end.getHours(); + const minutes = end.getMinutes(); + endTime.textContent = `Be back at ${hours > 12 ? hours - 12 : hour}:${minutes < 10 ? '0' : ''}${minutes}`; +} + +function startTimer() { + 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 = parseInt(this.minutes.value); + timer(mins * 60); + this.reset(); +}); \ No newline at end of file From 25989d1d8d1ca9f4079d2712f7cbb348e591fb2f Mon Sep 17 00:00:00 2001 From: Michal Slepko Date: Wed, 1 May 2019 22:45:00 +0100 Subject: [PATCH 30/30] JavaScript 30 - Day 30 --- 30 - Whack A Mole/index-START.html | 50 ++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/30 - Whack A Mole/index-START.html b/30 - Whack A Mole/index-START.html index 2014ff458c..64c12a6d6f 100644 --- a/30 - Whack A Mole/index-START.html +++ b/30 - Whack A Mole/index-START.html @@ -36,6 +36,56 @@

Whack-a-mole! 0