dhairyagothi · dhairyagothi · Jan 18, 2025 · Jan 18, 2025 · Jan 18, 2025 · Jan 18, 2025
diff --git a/index.js b/index.js
@@ -165,7 +165,9 @@ function fillTable() {
         ["Day 94","Hangman Game","./public/HangmanGame/index.html"],
         ["Day 95","TodoList in React TS Tailwind","./public/TodoList-React-TS-Tailwind/index.html"],
       ["Day 96","HCL Color Generator","./public/HCL Color Generator/index.html"],
-      ["Day 97","Time Capsule","public/Time-Capsule/index.html"]
+      ["Day 97","Time Capsule","public/Time-Capsule/index.html"],
+         ["Day 98","Virtual Piano","./public/Virtual Piano/index.html"]
+
 
 
     ];

diff --git a/public/Virtual Piano/PianoNotes/key08.mp3 b/public/Virtual Piano/PianoNotes/key08.mp3
diff --git a/public/Virtual Piano/PianoNotes/key09.mp3 b/public/Virtual Piano/PianoNotes/key09.mp3
diff --git a/public/Virtual Piano/PianoNotes/key10.mp3 b/public/Virtual Piano/PianoNotes/key10.mp3
diff --git a/public/Virtual Piano/PianoNotes/key11.mp3 b/public/Virtual Piano/PianoNotes/key11.mp3
diff --git a/public/Virtual Piano/PianoNotes/key12.mp3 b/public/Virtual Piano/PianoNotes/key12.mp3
diff --git a/public/Virtual Piano/PianoNotes/key13.mp3 b/public/Virtual Piano/PianoNotes/key13.mp3
diff --git a/public/Virtual Piano/PianoNotes/key14.mp3 b/public/Virtual Piano/PianoNotes/key14.mp3
diff --git a/public/Virtual Piano/PianoNotes/key15.mp3 b/public/Virtual Piano/PianoNotes/key15.mp3
diff --git a/public/Virtual Piano/PianoNotes/key16.mp3 b/public/Virtual Piano/PianoNotes/key16.mp3
diff --git a/public/Virtual Piano/PianoNotes/key17.mp3 b/public/Virtual Piano/PianoNotes/key17.mp3
diff --git a/public/Virtual Piano/PianoNotes/key18.mp3 b/public/Virtual Piano/PianoNotes/key18.mp3
diff --git a/public/Virtual Piano/PianoNotes/key19.mp3 b/public/Virtual Piano/PianoNotes/key19.mp3
diff --git a/public/Virtual Piano/PianoNotes/key20.mp3 b/public/Virtual Piano/PianoNotes/key20.mp3
diff --git a/public/Virtual Piano/PianoNotes/key21.mp3 b/public/Virtual Piano/PianoNotes/key21.mp3
diff --git a/public/Virtual Piano/PianoNotes/key22.mp3 b/public/Virtual Piano/PianoNotes/key22.mp3
diff --git a/public/Virtual Piano/PianoNotes/key23.mp3 b/public/Virtual Piano/PianoNotes/key23.mp3
diff --git a/public/Virtual Piano/PianoNotes/key24.mp3 b/public/Virtual Piano/PianoNotes/key24.mp3
diff --git a/public/Virtual Piano/index.html b/public/Virtual Piano/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Virtual Piano</title>
+    <link rel="stylesheet" href="./style.css" />
+</head>
+<body>
+    <h1>Virtual Piano</h1>
+    <h2>Use your mouse to click on the keys or use your keyboard</h2>
+    <em>* Key starts from the C note</em>
+
+    <div class="piano">
+        <div class="keys">
+            <button class="key white" id="a">A</button>
+            <button class="key black" id="w">W</button>
+            <button class="key white" id="s">S</button>
+            <button class="key black" id="e">E</button>
+            <button class="key white" id="d">D</button>
+            <button class="key white" id="f">F</button>
+            <button class="key black" id="t">T</button>
+            <button class="key white" id="g">G</button>
+            <button class="key black" id="y">Y</button>
+            <button class="key white" id="h">H</button>
+            <button class="key black" id="u">U</button>
+            <button class="key white" id="j">J</button>
+            <button class="key white" id="k">K</button>
+            <button class="key black" id="o">O</button>
+            <button class="key white" id="l">L</button>
+            <button class="key black" id="p">P</button>
+            <button class="key white" id=";">;</button>
+        </div>
+    </div>
+
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+    <script src="./index.js"></script>
+
+</body>
+</html>
diff --git a/public/Virtual Piano/index.js b/public/Virtual Piano/index.js
@@ -0,0 +1,122 @@
+var numOfKeys = $(".key").length;
+
+for(var i=0; i<numOfKeys; i++) {
+    $(".key")[i].addEventListener("click", function() {
+        var keyInnerHTML = this.innerHTML;
+        playNote(keyInnerHTML);
+        pressAnimation(keyInnerHTML);
+    })
+}
+
+
+$(document).keydown(function(event) {
+    playNote(event.key);
+    pressAnimation(event.key);
+})
+
+function playNote(note) {
+
+    note = note.toUpperCase();
+
+    switch(note) {
+        case "A":
+            var A = new Audio("./PianoNotes/key08.mp3");
+            A.play();
+            break;
+
+        case "W":
+            var W = new Audio("./PianoNotes/key09.mp3");
+            W.play();
+            break;
+
+        case "S":
+            var S = new Audio("./PianoNotes/key10.mp3");
+            S.play();
+            break;
+
+        case "E":
+            var E = new Audio("./PianoNotes/key11.mp3");
+            E.play();
+            break;
+
+        case "D":
+            var D = new Audio("./PianoNotes/key12.mp3");
+            D.play();
+            break;
+
+        case "F":
+            var F = new Audio("./PianoNotes/key13.mp3");
+            F.play();
+            break;
+
+        case "T":
+            var T = new Audio("./PianoNotes/key14.mp3");
+            T.play();
+            break;
+
+        case "G":
+            var G = new Audio("./PianoNotes/key15.mp3");
+            G.play();
+            break;
+
+        case "Y":
+            var Y = new Audio("./PianoNotes/key16.mp3");
+            Y.play();
+            break;
+
+        case "H":
+            var H = new Audio("./PianoNotes/key17.mp3");
+            H.play();
+            break;
+
+        case "U":
+            var U = new Audio("./PianoNotes/key18.mp3");
+            U.play();
+            break;
+
+        case "J":
+            var J = new Audio("./PianoNotes/key19.mp3");
+            J.play();
+            break;
+
+        case "K":
+            var K = new Audio("./PianoNotes/key20.mp3");
+            K.play();
+            break;
+
+        case "O":
+            var O = new Audio("./PianoNotes/key21.mp3");
+            O.play();
+            break;
+
+        case "L":
+            var L = new Audio("./PianoNotes/key22.mp3");
+            L.play();
+            break;
+
+        case "P":
+            var P = new Audio("./PianoNotes/key23.mp3");
+            P.play();
+            break;
+
+        case ";":
+            var last = new Audio("./PianoNotes/key24.mp3");
+            last.play();
+            break;
+
+        default: console.log(note);
+    }
+}
+
+function pressAnimation(key) {
+
+    key = key.toLowerCase();
+
+    var inputKey = key === ";" ? "\\;" : key;
+
+    $("#" + inputKey).addClass("pressed");
+
+    setTimeout(function() {
+        $("#" + inputKey).removeClass("pressed");
+    }, 100);
+}
diff --git a/public/Virtual Piano/style.css b/public/Virtual Piano/style.css
@@ -0,0 +1,81 @@
+body {
+    text-align: center;
+    background-color: #877a74;
+}
+
+h1 {
+    font-size: 5rem;
+}
+
+.piano {
+    background-color: #49363b;
+    padding: 20px;
+    border-radius: 20px;
+}
+
+.keys {
+    width: 100%;
+    height: 300px;
+    position: relative;
+    margin: 50px auto; 
+}
+
+.key {
+    position: relative;
+    border-radius: 15px;
+}
+
+.white {
+    float: left;
+    width: 10%;
+    height: 100%;
+    background-color: #e5d8ce;
+    color: black;
+    font-weight: bolder;
+    font-size: larger;
+}
+
+.black {
+    position: absolute;
+    width: 6%;
+    height: 65%;
+    top: 0;
+    z-index: 1;
+    background-color: #241c1c;
+    color: whitesmoke;
+    font-weight: bolder;
+    font-size: larger;
+}
+
+#w {
+    left: 7%;
+}
+
+#e {
+    left: 17%;
+}
+
+#t {
+    left: 37%;
+}
+
+#y {
+    left: 47%;
+}
+
+#u {
+    left: 57%;
+}
+
+#o {
+    left: 77%;
+}
+
+#p {
+    left: 87%;
+}
+
+.pressed {
+    box-shadow: 0 3px 4px 0 #DBEDF3;
+    opacity: 0.5;
+}