JS Drum Kit

From 55fd6bc188ffcbdb41f37aadbec9af2116f6b558 Mon Sep 17 00:00:00 2001 From: Eric Booker Date: Sat, 10 Dec 2016 09:04:55 -0800 Subject: [PATCH] Complete first 3 exersizes --- 01 - JavaScript Drum Kit/index-START.html | 66 ---------------- .../index-FINISHED.html | 0 .../index.html | 24 +++--- .../sounds/boom.wav | Bin .../sounds/clap.wav | Bin .../sounds/hihat.wav | Bin .../sounds/kick.wav | Bin .../sounds/openhat.wav | Bin .../sounds/ride.wav | Bin .../sounds/snare.wav | Bin .../sounds/tink.wav | Bin .../sounds/tom.wav | Bin .../style.css | 3 +- 02 - JS + CSS Clock/index-START.html | 73 ------------------ .../index-FINISHED.html | 0 .../index.html | 42 +++++----- .../index-FINISHED.html | 0 .../index.html | 44 ++++++++++- 18 files changed, 78 insertions(+), 174 deletions(-) delete mode 100644 01 - JavaScript Drum Kit/index-START.html rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum KitP_completed}/index-FINISHED.html (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum KitP_completed}/index.html (81%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum KitP_completed}/sounds/boom.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum KitP_completed}/sounds/clap.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum KitP_completed}/sounds/hihat.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum KitP_completed}/sounds/kick.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum KitP_completed}/sounds/openhat.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum KitP_completed}/sounds/ride.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum KitP_completed}/sounds/snare.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum KitP_completed}/sounds/tink.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum KitP_completed}/sounds/tom.wav (100%) rename {01 - JavaScript Drum Kit => 01 - JavaScript Drum KitP_completed}/style.css (94%) delete mode 100644 02 - JS + CSS Clock/index-START.html rename {02 - JS + CSS Clock => 02 - JS + CSS Clock_completed}/index-FINISHED.html (100%) rename {02 - JS + CSS Clock => 02 - JS + CSS Clock_completed}/index.html (61%) rename {03 - CSS Variables => 03 - CSS Variables_completed}/index-FINISHED.html (100%) rename 03 - CSS Variables/index-START.html => 03 - CSS Variables_completed/index.html (54%) 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 @@ - - - - - JS Drum Kit - - - - - -

- 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-FINISHED.html b/01 - JavaScript Drum KitP_completed/index-FINISHED.html similarity index 100% rename from 01 - JavaScript Drum Kit/index-FINISHED.html rename to 01 - JavaScript Drum KitP_completed/index-FINISHED.html diff --git a/01 - JavaScript Drum Kit/index.html b/01 - JavaScript Drum KitP_completed/index.html similarity index 81% rename from 01 - JavaScript Drum Kit/index.html rename to 01 - JavaScript Drum KitP_completed/index.html index 246639f990..f5d8b60fe2 100644 --- a/01 - JavaScript Drum Kit/index.html +++ b/01 - JavaScript Drum KitP_completed/index.html @@ -1,4 +1,4 @@ - + @@ -58,26 +58,28 @@

+ + diff --git a/01 - JavaScript Drum Kit/sounds/boom.wav b/01 - JavaScript Drum KitP_completed/sounds/boom.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/boom.wav rename to 01 - JavaScript Drum KitP_completed/sounds/boom.wav diff --git a/01 - JavaScript Drum Kit/sounds/clap.wav b/01 - JavaScript Drum KitP_completed/sounds/clap.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/clap.wav rename to 01 - JavaScript Drum KitP_completed/sounds/clap.wav diff --git a/01 - JavaScript Drum Kit/sounds/hihat.wav b/01 - JavaScript Drum KitP_completed/sounds/hihat.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/hihat.wav rename to 01 - JavaScript Drum KitP_completed/sounds/hihat.wav diff --git a/01 - JavaScript Drum Kit/sounds/kick.wav b/01 - JavaScript Drum KitP_completed/sounds/kick.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/kick.wav rename to 01 - JavaScript Drum KitP_completed/sounds/kick.wav diff --git a/01 - JavaScript Drum Kit/sounds/openhat.wav b/01 - JavaScript Drum KitP_completed/sounds/openhat.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/openhat.wav rename to 01 - JavaScript Drum KitP_completed/sounds/openhat.wav diff --git a/01 - JavaScript Drum Kit/sounds/ride.wav b/01 - JavaScript Drum KitP_completed/sounds/ride.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/ride.wav rename to 01 - JavaScript Drum KitP_completed/sounds/ride.wav diff --git a/01 - JavaScript Drum Kit/sounds/snare.wav b/01 - JavaScript Drum KitP_completed/sounds/snare.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/snare.wav rename to 01 - JavaScript Drum KitP_completed/sounds/snare.wav diff --git a/01 - JavaScript Drum Kit/sounds/tink.wav b/01 - JavaScript Drum KitP_completed/sounds/tink.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/tink.wav rename to 01 - JavaScript Drum KitP_completed/sounds/tink.wav diff --git a/01 - JavaScript Drum Kit/sounds/tom.wav b/01 - JavaScript Drum KitP_completed/sounds/tom.wav similarity index 100% rename from 01 - JavaScript Drum Kit/sounds/tom.wav rename to 01 - JavaScript Drum KitP_completed/sounds/tom.wav diff --git a/01 - JavaScript Drum Kit/style.css b/01 - JavaScript Drum KitP_completed/style.css similarity index 94% rename from 01 - JavaScript Drum Kit/style.css rename to 01 - JavaScript Drum KitP_completed/style.css index 3e0a320b37..b83ead7057 100644 --- a/01 - JavaScript Drum Kit/style.css +++ b/01 - JavaScript Drum KitP_completed/style.css @@ -23,7 +23,7 @@ body,html { margin:1rem; font-size: 1.5rem; padding:1rem .5rem; - transition:all .07s; + transition:all .20s; width:100px; text-align: center; color:white; @@ -34,6 +34,7 @@ body,html { .playing { transform:scale(1.1); border-color:#ffc600; + border-radius: 10%; box-shadow: 0 0 10px #ffc600; } diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html deleted file mode 100644 index 2712384201..0000000000 --- a/02 - JS + CSS Clock/index-START.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - JS + CSS Clock - - - - -

- - - - - - - diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock_completed/index-FINISHED.html similarity index 100% rename from 02 - JS + CSS Clock/index-FINISHED.html rename to 02 - JS + CSS Clock_completed/index-FINISHED.html diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock_completed/index.html similarity index 61% rename from 02 - JS + CSS Clock/index.html rename to 02 - JS + CSS Clock_completed/index.html index 1c777557da..9d10eb0acf 100644 --- a/02 - JS + CSS Clock/index.html +++ b/02 - JS + CSS Clock_completed/index.html @@ -64,33 +64,35 @@ transform-origin: 100%; transform: rotate(90deg); transition: all 0.05s; - transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); + transition-timing-function: cubic-bezier(0.25, 0, 0.15, 1.01); } - - + diff --git a/03 - CSS Variables/index-FINISHED.html b/03 - CSS Variables_completed/index-FINISHED.html similarity index 100% rename from 03 - CSS Variables/index-FINISHED.html rename to 03 - CSS Variables_completed/index-FINISHED.html diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables_completed/index.html similarity index 54% rename from 03 - CSS Variables/index-START.html rename to 03 - CSS Variables_completed/index.html index bf0f33e3ba..25fc4a8513 100644 --- a/03 - CSS Variables/index-START.html +++ b/03 - CSS Variables_completed/index.html @@ -1,4 +1,4 @@ - + @@ -12,10 +12,10 @@

Update CSS Variables with JS

Blur: - + Base Color - +

@@ -26,6 +26,22 @@

Update CSS Variables with JS

misc styles, nothing to do with CSS variables */ + :root { + --base: #BADA55; + --spacing: 10px; + --blur: 0px; + } + + img { + padding: var(--spacing); + background: var(--base); + filter: blur(var(--blur)); + } + + .hl { + color: var(--base); + } + body { text-align: center; } @@ -53,7 +69,29 @@

Update CSS Variables with JS

+ + + + + + + + + + + +