diff --git a/index.html b/index.html index 1517bd0..8e4b8ad 100644 --- a/index.html +++ b/index.html @@ -115,10 +115,10 @@

Quiz


- -

Whack A mole

+ +

Hangman

-
+
@@ -147,6 +147,12 @@

Stone-Paper-Scissor


+
+ +

Playable Piano

+ +
+
+ + +
+
+

FUN FUSION

+
+ Volume +
+
+ Show Keys +
+
+ +
+ + + \ No newline at end of file diff --git a/piano/script.js b/piano/script.js new file mode 100644 index 0000000..6857a1d --- /dev/null +++ b/piano/script.js @@ -0,0 +1,41 @@ +const pianoKeys = document.querySelectorAll(".piano-keys .key"), +volumeSlider = document.querySelector(".volume-slider input"), +keysCheckbox = document.querySelector(".keys-checkbox input"); + +let allKeys = [], +audio = new Audio(`tunes/a.wav`); // by default, audio src is "a" tune + +const playTune = (key) => { + audio.src = `tunes/${key}.wav`; // passing audio src based on key pressed  + audio.play(); // playing audio + + const clickedKey = document.querySelector(`[data-key="${key}"]`); // getting clicked key element + clickedKey.classList.add("active"); // adding active class to the clicked key element + setTimeout(() => { // removing active class after 150 ms from the clicked key element + clickedKey.classList.remove("active"); + }, 150); +} + +pianoKeys.forEach(key => { + allKeys.push(key.dataset.key); // adding data-key value to the allKeys array + // calling playTune function with passing data-key value as an argument + key.addEventListener("click", () => playTune(key.dataset.key)); +}); + +const handleVolume = (e) => { + audio.volume = e.target.value; // passing the range slider value as an audio volume +} + +const showHideKeys = () => { + // toggling hide class from each key on the checkbox click + pianoKeys.forEach(key => key.classList.toggle("hide")); +} + +const pressedKey = (e) => { + // if the pressed key is in the allKeys array, only call the playTune function + if(allKeys.includes(e.key)) playTune(e.key); +} + +keysCheckbox.addEventListener("click", showHideKeys); +volumeSlider.addEventListener("input", handleVolume); +document.addEventListener("keydown", pressedKey); \ No newline at end of file diff --git a/piano/style.css b/piano/style.css new file mode 100644 index 0000000..011ecb9 --- /dev/null +++ b/piano/style.css @@ -0,0 +1,161 @@ +/* Import Google font - Poppins */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} +body { + display: flex; + align-items: center; + justify-content: center; + min-height: 100vh; + background: #ee9905; +} +.wrapper { + padding: 35px 40px; + border-radius: 20px; + background: #141414; +} +.wrapper header { + display: flex; + color: #B2B2B2; + align-items: center; + justify-content: space-between; +} +header h2 { + font-size: 1.6rem; +} +header .column { + display: flex; + align-items: center; +} +header span { + font-weight: 500; + margin-right: 15px; + font-size: 1.19rem; +} +header input { + outline: none; + border-radius: 30px; +} +.volume-slider input { + accent-color: #fff; +} +.keys-checkbox input { + height: 30px; + width: 60px; + cursor: pointer; + appearance: none; + position: relative; + background: #4B4B4B +} +.keys-checkbox input::before { + content: ""; + position: absolute; + top: 50%; + left: 5px; + width: 20px; + height: 20px; + border-radius: 50%; + background: #8c8c8c; + transform: translateY(-50%); + transition: all 0.3s ease; +} +.keys-checkbox input:checked::before { + left: 35px; + background: #fff; +} +.piano-keys { + display: flex; + list-style: none; + margin-top: 40px; +} +.piano-keys .key { + cursor: pointer; + user-select: none; + position: relative; + text-transform: uppercase; +} +.piano-keys .black { + z-index: 2; + width: 44px; + height: 140px; + margin: 0 -22px 0 -22px; + border-radius: 0 0 5px 5px; + background: linear-gradient(#333, #000); +} +.piano-keys .black.active { + box-shadow: inset -5px -10px 10px rgba(255,255,255,0.1); + background:linear-gradient(to bottom, #000, #434343); +} +.piano-keys .white { + height: 230px; + width: 70px; + border-radius: 8px; + border: 1px solid #000; + background: linear-gradient(#fff 96%, #eee 4%); +} +.piano-keys .white.active { + box-shadow: inset -5px 5px 20px rgba(0,0,0,0.2); + background:linear-gradient(to bottom, #fff 0%, #eee 100%); +} +.piano-keys .key span { + position: absolute; + bottom: 20px; + width: 100%; + color: #A2A2A2; + font-size: 1.13rem; + text-align: center; +} +.piano-keys .key.hide span { + display: none; +} +.piano-keys .black span { + bottom: 13px; + color: #888888; +} + +@media screen and (max-width: 815px) { + .wrapper { + padding: 25px; + } + header { + flex-direction: column; + } + header :where(h2, .column) { + margin-bottom: 13px; + } + .volume-slider input { + max-width: 100px; + } + .piano-keys { + margin-top: 20px; + } + .piano-keys .key:where(:nth-child(9), :nth-child(10)) { + display: none; + } + .piano-keys .black { + height: 100px; + width: 40px; + margin: 0 -20px 0 -20px; + } + .piano-keys .white { + height: 180px; + width: 60px; + } +} + +@media screen and (max-width: 615px) { + .piano-keys .key:nth-child(13), + .piano-keys .key:nth-child(14), + .piano-keys .key:nth-child(15), + .piano-keys .key:nth-child(16), + .piano-keys .key :nth-child(17) { + display: none; + } + .piano-keys .white { + width: 50px; + } +} \ No newline at end of file diff --git a/piano/tunes/;.wav b/piano/tunes/;.wav new file mode 100644 index 0000000..a71fe4e Binary files /dev/null and b/piano/tunes/;.wav differ diff --git a/piano/tunes/a.wav b/piano/tunes/a.wav new file mode 100644 index 0000000..fa6e07a Binary files /dev/null and b/piano/tunes/a.wav differ diff --git a/piano/tunes/d.wav b/piano/tunes/d.wav new file mode 100644 index 0000000..7377899 Binary files /dev/null and b/piano/tunes/d.wav differ diff --git a/piano/tunes/e.wav b/piano/tunes/e.wav new file mode 100644 index 0000000..1325049 Binary files /dev/null and b/piano/tunes/e.wav differ diff --git a/piano/tunes/f.wav b/piano/tunes/f.wav new file mode 100644 index 0000000..31aa67b Binary files /dev/null and b/piano/tunes/f.wav differ diff --git a/piano/tunes/g.wav b/piano/tunes/g.wav new file mode 100644 index 0000000..bd0e58c Binary files /dev/null and b/piano/tunes/g.wav differ diff --git a/piano/tunes/h.wav b/piano/tunes/h.wav new file mode 100644 index 0000000..921b7d5 Binary files /dev/null and b/piano/tunes/h.wav differ diff --git a/piano/tunes/img.png b/piano/tunes/img.png new file mode 100644 index 0000000..f7b653c Binary files /dev/null and b/piano/tunes/img.png differ diff --git a/piano/tunes/j.wav b/piano/tunes/j.wav new file mode 100644 index 0000000..747367f Binary files /dev/null and b/piano/tunes/j.wav differ diff --git a/piano/tunes/k.wav b/piano/tunes/k.wav new file mode 100644 index 0000000..52598b1 Binary files /dev/null and b/piano/tunes/k.wav differ diff --git a/piano/tunes/l.wav b/piano/tunes/l.wav new file mode 100644 index 0000000..95baa0b Binary files /dev/null and b/piano/tunes/l.wav differ diff --git a/piano/tunes/o.wav b/piano/tunes/o.wav new file mode 100644 index 0000000..853e92d Binary files /dev/null and b/piano/tunes/o.wav differ diff --git a/piano/tunes/p.wav b/piano/tunes/p.wav new file mode 100644 index 0000000..d97f784 Binary files /dev/null and b/piano/tunes/p.wav differ diff --git a/piano/tunes/s.wav b/piano/tunes/s.wav new file mode 100644 index 0000000..4d53816 Binary files /dev/null and b/piano/tunes/s.wav differ diff --git a/piano/tunes/t.wav b/piano/tunes/t.wav new file mode 100644 index 0000000..1e50ef5 Binary files /dev/null and b/piano/tunes/t.wav differ diff --git a/piano/tunes/u.wav b/piano/tunes/u.wav new file mode 100644 index 0000000..505f00e Binary files /dev/null and b/piano/tunes/u.wav differ diff --git a/piano/tunes/w.wav b/piano/tunes/w.wav new file mode 100644 index 0000000..2a160b5 Binary files /dev/null and b/piano/tunes/w.wav differ diff --git a/piano/tunes/y.wav b/piano/tunes/y.wav new file mode 100644 index 0000000..e4caa70 Binary files /dev/null and b/piano/tunes/y.wav differ