From 7f8c5f5c1fea4f35e9e6d60764f165615f40ab77 Mon Sep 17 00:00:00 2001 From: Saru Subaschandran Date: Sat, 24 Nov 2018 15:48:07 +0100 Subject: [PATCH 1/2] add makes sound when pressing selected keys --- 01 - JavaScript Drum Kit/index-START.html | 114 ++++++++++------------ 1 file changed, 54 insertions(+), 60 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..029c078d10 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -1,66 +1,60 @@ - - - JS Drum Kit - - - - - -
-
- A - clap -
-
- S - hihat -
-
- D - kick -
-
- F - openhat -
-
- G - boom -
-
- H - ride + + + JS Drum Kit + + + +
+
+ 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 987fe0e9217cd706d5288b26e9f52698b1aafaee Mon Sep 17 00:00:00 2001 From: Saru Subaschandran Date: Tue, 27 Nov 2018 13:09:00 +0100 Subject: [PATCH 2/2] prettier formating --- 01 - JavaScript Drum Kit/index-START.html | 12 ++- 01 - JavaScript Drum Kit/style.css | 17 ++-- 02 - JS and CSS Clock/index-START.html | 108 ++++++++++------------ 3 files changed, 70 insertions(+), 67 deletions(-) diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 029c078d10..93027352a9 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -53,8 +53,18 @@ if (!audio) return; // stop the function from running all together audio.currentTime = 0; // rewind to the start audio.play(); - console.log(key); + key.classList.add("playing"); }); + + function removeTransition(e) { + if (e.propertyName !== "transform") return; // skip it if it's not a transform + console.log(e.propertyName); + } + + const keys = document.querySelectorAll(".key"); + keys.forEach(key => + key.addEventListener("transitionend", removeTransition) + ); diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum Kit/style.css index 0673a8752a..1ac90eb0f5 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum Kit/style.css @@ -4,7 +4,8 @@ html { background-size: cover; } -body,html { +body, +html { margin: 0; padding: 0; font-family: sans-serif; @@ -19,17 +20,17 @@ body,html { } .key { - border: .4rem solid black; - border-radius: .5rem; + border: 0.4rem solid black; + border-radius: 0.5rem; margin: 1rem; font-size: 1.5rem; - padding: 1rem .5rem; - transition: all .07s ease; + padding: 1rem 0.5rem; + transition: all 0.07s ease; width: 10rem; text-align: center; color: white; - background: rgba(0,0,0,0.4); - text-shadow: 0 0 .5rem black; + background: rgba(0, 0, 0, 0.4); + text-shadow: 0 0 0.5rem black; } .playing { @@ -46,6 +47,6 @@ kbd { .sound { font-size: 1.2rem; text-transform: uppercase; - letter-spacing: .1rem; + letter-spacing: 0.1rem; color: #ffc600; } diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html index 7cbf5f6ba6..ef88de29c3 100644 --- a/02 - JS and CSS Clock/index-START.html +++ b/02 - JS and CSS Clock/index-START.html @@ -1,12 +1,10 @@ - - - JS + CSS Clock - - - - + + + JS + CSS Clock + +
@@ -15,60 +13,54 @@
+ + .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); + } - - + +