done

kunjgit · Jun 13, 2024 · 207db81 · 207db81
1 parent a1593f4
commit 207db81
Show file tree

Hide file tree

Showing 21 changed files with 277 additions and 0 deletions.
diff --git a/Games/keySymphony/index1.html b/Games/keySymphony/index1.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>KeySymphony</title>
+    <link rel="stylesheet" href="style1.css">
+    <script src="index1.js" defer></script>
+</head>
+<body>
+    <div class="wrapper">
+        <header>
+            <h2>
+                KeySymphony
+            </h2>
+            <div class="column sound">
+                <span>Sound</span><input type="range">
+            </div>
+
+            <div class="column keys-checkbox">
+                <span>Show Keys</span><input type="checkbox" checked>
+            </div>
+        </header>
+        <ul class="Piano">
+            <li class="key white" data-key="a"><span>a</span></li>
+            <li class="key black" data-key="w"><span>w</span></li>
+            <li class="key white" data-key="s"><span>s</span></li>
+            <li class="key black" data-key="e"><span>e</span></li>
+            <li class="key white" data-key="d"><span>d</span></li>
+            <li class="key white" data-key="f"><span>f</span></li>
+            <li class="key black" data-key="t"><span>t</span></li>
+            <li class="key white" data-key="g"><span>g</span></li>
+            <li class="key black" data-key="y"><span>y</span></li>
+            <li class="key white" data-key="h"><span>h</span></li>
+            <li class="key black" data-key="u"><span>u</span></li>
+            <li class="key white" data-key="j"><span>j</span></li>
+            <li class="key white" data-key="k"><span>k</span></li>
+            <li class="key black" data-key="o"><span>o</span></li>
+            <li class="key white" data-key="l"><span>l</span></li>
+            <li class="key black" data-key="p"><span>p</span></li>
+            <li class="key white" data-key=";"><span>;</span></li>
+            <!-- <li class="key black"data-key="c"><span>c</span></li> -->
+        </ul>
+    </div>
+</body>
+</html>
diff --git a/Games/keySymphony/index1.js b/Games/keySymphony/index1.js
@@ -0,0 +1,43 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const pianoKeys = document.querySelectorAll(".Piano .key"),
+        volumeSlider = document.querySelector(".sound input"),
+        keyCheckbox = document.querySelector(".keys-checkbox input");
+
+    let allKeys = [],
+        audio = new Audio();
+
+    const playTune = (key) => {
+        audio.src = `tunes/${key}.wav`;
+        audio.play();
+
+        const clickedKey = document.querySelector(`[data-key="${key}"]`);
+        if (clickedKey) {
+            clickedKey.classList.add("active");
+            setTimeout(() => {
+                clickedKey.classList.remove("active");
+            }, 160);
+        }
+    };
+
+    const handleVolume = (e) => {
+        audio.volume = e.target.value / 100;
+    };
+
+    const showHideKeys = () => {
+        pianoKeys.forEach(key => key.classList.toggle("hide"));
+    };
+
+    pianoKeys.forEach(key => {
+        allKeys.push(key.dataset.key);
+        // Calling playTune function with passing data-key value as an argument
+        key.addEventListener("click", () => playTune(key.dataset.key));
+    });
+
+    const pressedKey = (e) => {
+        if (allKeys.includes(e.key)) playTune(e.key);
+    };
+
+    keyCheckbox.addEventListener("click", showHideKeys);
+    volumeSlider.addEventListener("input", handleVolume);
+    document.addEventListener("keydown", pressedKey);
+});
diff --git a/Games/keySymphony/style1.css b/Games/keySymphony/style1.css
@@ -0,0 +1,186 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&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-color: rgb(207, 232, 255);
+}
+.wrapper{
+    border-radius: 20px;
+    width:795px;
+    background-color: black;
+    padding: 32px 40px;
+
+}
+.wrapper header{
+    color: rgb(255, 255, 222);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    justify-content: space-between;
+}
+header h2{
+    font-size:35px;
+}
+header .column{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+header .column span{
+    font-weight: 420;
+    font-size: 18px;
+    margin-right:15px;
+}
+.sound input{
+    accent-color: #c3c018;
+}
+.keys-checkbox input{
+    height:35px ;
+    width:65px;
+    cursor:pointer;
+    border-radius:30px ;
+    background: #118df3;
+    appearance: none;
+    outline:none;
+    position: relative;
+}
+.keys-checkbox input::before{
+    content: "";
+    border-radius: inherit;
+    position: absolute;
+    background-color: rgb(137, 239, 217);
+    width: 25px;
+    height: 25px;
+    top:50%;
+    left: 5px;
+    transform: translateY(-50%);
+    transition: all 0.2s ease;
+}
+.keys-checkbox input:checked::before{
+    left:35px;
+    background-color: antiquewhite;
+}
+.Piano{
+    display: flex;
+    margin-top: 40px;
+    /* padding: 20px 10px; */
+    justify-content: center;
+    list-style: none;
+}
+.Piano .key{
+    list-style:none;
+    /* color: rgb(143, 130, 112); */
+    text-transform: uppercase;
+    cursor: pointer;
+    user-select: none;
+    position: relative;
+}
+.Piano .white{
+    width:80px;
+    height:230px;
+    border: 1px solid black;
+    background: linear-gradient(#fff 96%,#eee 4%);
+    border-radius: 9px;
+
+}
+.Piano .white:active{
+    box-shadow:inset -5px 5px 20px rgba(0,0,0,0.2);
+    background-color: linear-gradient(to bottom, #fff 0%, #eee 100%);
+}
+.Piano .black{
+    width:44px;
+    height:140px;
+    /* border: 1px solid black; */
+    background: linear-gradient(#333 ,#000 );
+    border-radius: 0 0 5px 5px;
+    z-index: 2;
+    margin: 0 -22px 0 -22px;
+}
+.Piano .black:active{
+    box-shadow:inset -5px -10px 10px rgba(255,255,255,0.2);
+    background-color: linear-gradient(to bottom, #000 , #434343);
+}
+.Piano span{
+    position: absolute;
+    bottom: 20px;
+    width: 100%;
+    font-size: 1.15rem;
+    text-align: center;
+}
+.Piano .key span {
+    position: absolute;
+    bottom: 20px;
+    width: 100%;
+    color: #A2A2A2;
+    font-size: 1.13rem;
+    text-align: center;
+  }
+  .Piano .key.hide span {
+    display: none;
+  }
+  .Piano .black span {
+    bottom: 13px;
+    color: #888888;
+  }
+.Piano .key{
+    list-style: none;
+    color: rgba(174, 174, 174, 0.856);
+}
+.Piano .key.hide span {
+    display: none;
+  }
+  .Piano .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;
+    }
+    .sound input {
+      max-width: 100px;
+    }
+    .Piano {
+      margin-top: 20px;
+    }
+    .Piano .key:where(:nth-child(9), :nth-child(10)) {
+      display: none;
+    }
+    .Piano .black {
+      height: 100px;
+      width: 40px;
+      margin: 0 -20px 0 -20px;
+    }
+    .Piano .white {
+      height: 180px;
+      width: 60px;
+    }
+  }
+  @media screen and (max-width: 615px) {
+    .Piano .key:nth-child(13),
+    .Piano .key:nth-child(14),
+    .Piano .key:nth-child(15),
+    .Piano .key:nth-child(16),
+    .Piano .key :nth-child(17) {
+      display: none;
+    }
+    .Piano .white {
+      width: 50px;
+    }
+  }
diff --git a/Games/keySymphony/tunes/;.wav b/Games/keySymphony/tunes/;.wav
diff --git a/Games/keySymphony/tunes/a.wav b/Games/keySymphony/tunes/a.wav
diff --git a/Games/keySymphony/tunes/d.wav b/Games/keySymphony/tunes/d.wav
diff --git a/Games/keySymphony/tunes/e.wav b/Games/keySymphony/tunes/e.wav
diff --git a/Games/keySymphony/tunes/f.wav b/Games/keySymphony/tunes/f.wav
diff --git a/Games/keySymphony/tunes/g.wav b/Games/keySymphony/tunes/g.wav
diff --git a/Games/keySymphony/tunes/h.wav b/Games/keySymphony/tunes/h.wav
diff --git a/Games/keySymphony/tunes/j.wav b/Games/keySymphony/tunes/j.wav
diff --git a/Games/keySymphony/tunes/k.wav b/Games/keySymphony/tunes/k.wav
diff --git a/Games/keySymphony/tunes/l.wav b/Games/keySymphony/tunes/l.wav
diff --git a/Games/keySymphony/tunes/o.wav b/Games/keySymphony/tunes/o.wav
diff --git a/Games/keySymphony/tunes/p.wav b/Games/keySymphony/tunes/p.wav
diff --git a/Games/keySymphony/tunes/s.wav b/Games/keySymphony/tunes/s.wav
diff --git a/Games/keySymphony/tunes/t.wav b/Games/keySymphony/tunes/t.wav
diff --git a/Games/keySymphony/tunes/u.wav b/Games/keySymphony/tunes/u.wav
diff --git a/Games/keySymphony/tunes/w.wav b/Games/keySymphony/tunes/w.wav
diff --git a/Games/keySymphony/tunes/y.wav b/Games/keySymphony/tunes/y.wav
diff --git a/README.md b/README.md
@@ -354,6 +354,8 @@ This repository also provides one such platforms where contributers come over an
 | [Block_Ninja] (https://github.com/kunjgit/GameZone/tree/main/Games/Block_Ninja) | 
 | [Disney_Trivia](https://github.com/manmita/GameZone/tree/Disney_Trivia/Games/Disney_Trivia)|
 |[Harmony_Mixer](https://github.com/kunjgit/GameZone/tree/main/Games/Harmony_Mixer)|
+|[KeySymphony](https://github.com/kunjgit/GameZone/tree/main/Games/KeySymphony)|
+
 
 
  </center>