JS Drum Kit

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

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