Codestin Search App

- A - clap -

- S - hihat -

- D - kick -

- F - openhat -

- G - boom -

- H - ride + + + Codestin Search App + + + +

+ A + clap +

+ S + hihat +

+ D + kick +

+ F + openhat +

+ G + boom +

+ H + ride +

+ J + snare +

+ K + tom +

+ L + tink +

- J - snare -

- K - tom -

- L - tink -

- -

- - +

- + + From 379a0d17f3d077e60a1cc0915bd79259c97e1593 Mon Sep 17 00:00:00 2001 From: Bruno Dulcetti Date: Wed, 14 Jul 2021 21:25:17 -0300 Subject: [PATCH 02/19] refactor: create allKeys and allSounds vars --- 01 - JavaScript Drum Kit/index-START.html | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 40cb8e7c87..3f657d91f6 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -57,12 +57,8 @@ From eef5c020c8412e8f9a77f1a13072c7306ee8a232 Mon Sep 17 00:00:00 2001 From: Bruno Dulcetti Date: Wed, 14 Jul 2021 21:26:50 -0300 Subject: [PATCH 03/19] feat: transform vars in arrays --- 01 - JavaScript Drum Kit/index-START.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 3f657d91f6..b288ea388e 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -59,6 +59,8 @@ ((win, doc) => { let allKeys = doc.querySelectorAll(".key"); let allSounds = doc.querySelectorAll("audio"); + allKeys = [...allKeys]; + allSounds = [...allSounds]; })(window, document); From 2bc86a629e7c7dfa712f86ccd82e41e74d31028b Mon Sep 17 00:00:00 2001 From: Bruno Dulcetti Date: Wed, 14 Jul 2021 21:27:26 -0300 Subject: [PATCH 04/19] feat: create audios --- 01 - JavaScript Drum Kit/index-START.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index b288ea388e..4b5a8e6657 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -61,6 +61,9 @@ let allSounds = doc.querySelectorAll("audio"); allKeys = [...allKeys]; allSounds = [...allSounds]; + const audios = allKeys.map((sound) => + sound.getAttribute("data-key") + ); })(window, document); From e4cd49ce1a482cd19ce6d64d895d1a32e1f06135 Mon Sep 17 00:00:00 2001 From: Bruno Dulcetti Date: Wed, 14 Jul 2021 21:28:09 -0300 Subject: [PATCH 05/19] feat: add function of buttons pressed --- 01 - JavaScript Drum Kit/index-START.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4b5a8e6657..2cca4e77f6 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -64,6 +64,14 @@ const audios = allKeys.map((sound) => sound.getAttribute("data-key") ); + + function pressButton(keyEvent) { + const keyCode = keyEvent.keyCode; + const selectedAudio = allSounds.find((key) => { + return key.getAttribute('data-key') == keyCode; + }); + selectedAudio && selectedAudio.play(); + } })(window, document); From 5e50d894bb2419feb5c784884e9c55cf3595b443 Mon Sep 17 00:00:00 2001 From: Bruno Dulcetti Date: Wed, 14 Jul 2021 21:28:28 -0300 Subject: [PATCH 06/19] feat: add listener for buttons --- 01 - JavaScript Drum Kit/index-START.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 2cca4e77f6..ad73be0016 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -65,6 +65,8 @@ sound.getAttribute("data-key") ); + document.addEventListener('keyup', pressButton, false); + function pressButton(keyEvent) { const keyCode = keyEvent.keyCode; const selectedAudio = allSounds.find((key) => { From 2ad112ff9586df0f77bea6e5a46714683384f5e7 Mon Sep 17 00:00:00 2001 From: Bruno Dulcetti Date: Wed, 14 Jul 2021 21:43:59 -0300 Subject: [PATCH 07/19] feat: add selectedKeys on event --- 01 - JavaScript Drum Kit/index-START.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index ad73be0016..b613eaf005 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -69,10 +69,12 @@ function pressButton(keyEvent) { const keyCode = keyEvent.keyCode; - const selectedAudio = allSounds.find((key) => { + const selectedAudio = allSounds.find((audio) => { + return audio.getAttribute('data-key') == keyCode; + }); + const selectedKeys = allKeys.find((key) => { return key.getAttribute('data-key') == keyCode; }); - selectedAudio && selectedAudio.play(); } })(window, document); From e60152422caa98f1c04e34e3c80668200ef2d85f Mon Sep 17 00:00:00 2001 From: Bruno Dulcetti Date: Wed, 14 Jul 2021 21:44:42 -0300 Subject: [PATCH 08/19] feat: add method to play audio --- 01 - JavaScript Drum Kit/index-START.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index b613eaf005..6747686cfb 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -76,6 +76,11 @@ return key.getAttribute('data-key') == keyCode; }); } + + function playAudio(audio, key) { + audio.play(); + toggleButton(key); + } })(window, document); From ee446338c78311dca25d96b91d4a0d62f43bbeac Mon Sep 17 00:00:00 2001 From: Bruno Dulcetti Date: Wed, 14 Jul 2021 21:45:11 -0300 Subject: [PATCH 09/19] feat: add method to change classname of buttons --- 01 - JavaScript Drum Kit/index-START.html | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 6747686cfb..6aee50786e 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -81,6 +81,13 @@ audio.play(); toggleButton(key); } + + function toggleButton(button) { + button.classList.add('playing'); + setTimeout(() => { + button.classList.remove('playing'); + }, 50); + } })(window, document); From 30646bd7b90b752e670c1393879bb1ab26d52e56 Mon Sep 17 00:00:00 2001 From: Bruno Dulcetti Date: Wed, 14 Jul 2021 21:46:06 -0300 Subject: [PATCH 10/19] feat: if letter exist, execute methods --- 01 - JavaScript Drum Kit/index-START.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 6aee50786e..1f08716e99 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -75,6 +75,10 @@ const selectedKeys = allKeys.find((key) => { return key.getAttribute('data-key') == keyCode; }); + + if (selectedAudio && selectedKeys) { + playAudio(selectedAudio, selectedKeys); + } } function playAudio(audio, key) { From d22e50aa3f0c4f9604f03f2d0072752f79606483 Mon Sep 17 00:00:00 2001 From: Bruno Dulcetti Date: Wed, 14 Jul 2021 21:49:53 -0300 Subject: [PATCH 11/19] feat: change currentTime to 0 on playAudio method --- 01 - JavaScript Drum Kit/index-START.html | 1 + 1 file changed, 1 insertion(+) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 1f08716e99..414e2c891f 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -82,6 +82,7 @@ } function playAudio(audio, key) { + audio.currentTime = 0; audio.play(); toggleButton(key); } From e89d528684f76097947a5aa9711d0a17d33fdb77 Mon Sep 17 00:00:00 2001 From: Bruno Dulcetti Date: Thu, 15 Jul 2021 20:26:57 -0300 Subject: [PATCH 12/19] feat: create initial vars --- 02 - JS and CSS Clock/index-START.html | 113 ++++++++++++------------- 1 file changed, 55 insertions(+), 58 deletions(-) diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 7a6d27d5bd..f72ca16ef2 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -1,12 +1,10 @@ - - - Codestin Search App - - - - + + + Codestin Search App + +

@@ -15,60 +13,59 @@

+ + .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); + } - - + + From 541200607ecd172638aae61b02767a860a493f1e Mon Sep 17 00:00:00 2001 From: Bruno Dulcetti Date: Thu, 15 Jul 2021 20:54:57 -0300 Subject: [PATCH 13/19] feat: add ifee --- 02 - JS and CSS Clock/index-START.html | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index f72ca16ef2..b28f9ef643 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -62,10 +62,11 @@ From c4463b80e5ce54201b11b93cbc230acf598422ef Mon Sep 17 00:00:00 2001 From: Bruno Dulcetti Date: Thu, 15 Jul 2021 20:55:27 -0300 Subject: [PATCH 14/19] style: add styles for rotate positions --- 02 - JS and CSS Clock/index-START.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index b28f9ef643..3d8b3124b6 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -58,6 +58,10 @@ 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 f3be36b5140e0e4810b487001123b40318c35ed5 Mon Sep 17 00:00:00 2001 From: Bruno Dulcetti Date: Thu, 15 Jul 2021 21:01:11 -0300 Subject: [PATCH 15/19] feat: create setTime method and your vars --- 02 - JS and CSS Clock/index-START.html | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 3d8b3124b6..a99fbb01f3 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -70,6 +70,13 @@ const handHour = doc.querySelector(".hour-hand"); const handMinutes = doc.querySelector(".min-hand"); const handSeconds = doc.querySelector(".second-hand"); + + function setTime() { + const now = new Date(); + const hours = now.getHours(); + const minutes = now.getMinutes(); + const seconds = now.getSeconds(); + } })(window, document); From a876809fc9322e1a867511fb4a03025a00573c15 Mon Sep 17 00:00:00 2001 From: Bruno Dulcetti Date: Thu, 15 Jul 2021 21:02:23 -0300 Subject: [PATCH 16/19] feat: add degrees vars --- 02 - JS and CSS Clock/index-START.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index a99fbb01f3..f4d82ef924 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -76,6 +76,10 @@ const hours = now.getHours(); const minutes = now.getMinutes(); const seconds = now.getSeconds(); + + const hoursDegrees = (hours / 12) * 360 + (minutes / 60) * 30 + 90; + const minutesDegrees = (minutes / 60) * 360 + (seconds / 60) * 6 + 90; + const secondsDegrees = (seconds / 60) * 360 + 90; } })(window, document); From c60d0586d2af9ac342033ecf66064a96e6c2c516 Mon Sep 17 00:00:00 2001 From: Bruno Dulcetti Date: Thu, 15 Jul 2021 21:03:59 -0300 Subject: [PATCH 17/19] feat: add transform by JS for degrees --- 02 - JS and CSS Clock/index-START.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index f4d82ef924..a19355c337 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -80,6 +80,10 @@ const hoursDegrees = (hours / 12) * 360 + (minutes / 60) * 30 + 90; const minutesDegrees = (minutes / 60) * 360 + (seconds / 60) * 6 + 90; const secondsDegrees = (seconds / 60) * 360 + 90; + + handHour.style.transform = `rotate(${hoursDegrees}deg)`; + handMinutes.style.transform = `rotate(${minutesDegrees}deg)`; + handSeconds.style.transform = `rotate(${secondsDegrees}deg)`; } })(window, document); From 6aca8f335d998fed62feecb1bd6ae34d247a5c27 Mon Sep 17 00:00:00 2001 From: Bruno Dulcetti Date: Thu, 15 Jul 2021 21:04:18 -0300 Subject: [PATCH 18/19] feat: add interval and execution of setTime --- 02 - JS and CSS Clock/index-START.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index a19355c337..e031d71a21 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -85,6 +85,9 @@ handMinutes.style.transform = `rotate(${minutesDegrees}deg)`; handSeconds.style.transform = `rotate(${secondsDegrees}deg)`; } + + setInterval(setTime, 1000); + setTime(); })(window, document); From c1773539fe787f6545ec43ebea9ffe51cca133c4 Mon Sep 17 00:00:00 2001 From: Bruno Dulcetti Date: Thu, 15 Jul 2021 21:06:42 -0300 Subject: [PATCH 19/19] style: put the css properties in ascending ordering --- 02 - JS and CSS Clock/index-START.html | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index e031d71a21..6a2a778be7 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -32,36 +32,36 @@ } .clock { - width: 30rem; - height: 30rem; - border: 20px solid white; + border: 20px solid #fff; border-radius: 50%; + box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #efefef, + inset 0 0 10px #000, 0 0 10px rgba(0, 0, 0, 0.2); + height: 30rem; 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); + position: relative; + width: 30rem; } .clock-face { - position: relative; - width: 100%; height: 100%; + position: relative; transform: translateY( -3px ); /* account for the height of the clock hands */ + width: 100%; } .hand { - width: 50%; + background-color: #000; height: 6px; - background: black; position: absolute; top: 50%; - transform-origin: 100%; transform: rotate(90deg); + transform-origin: 100%; transition: all 0.05s; transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); + width: 50%; }