ssitvit · Avdhesh-Varshney · Aug 10, 2023
diff --git a/index.html b/index.html
@@ -523,6 +523,13 @@ <h3 class="card__heading">Astromania</h3>
           <h3 class="card__heading">Netflix Clone</h3>
         </div>
       </a>
+      <a class="card" href="projects/Playable-Piano/index.html">
+        <div class="card__background" style="background-image: url(projects/Playable-Piano/Playable-Piano.png); background-size: cover;"></div>
+        <div class="card__content">
+          <p class="card__category">Tool</p>
+          <h3 class="card__heading">Playable Piano</h3>
+        </div>
+      </a>
 
     </div>
   </section>

diff --git a/projects/Playable-Piano/Playable-Piano.png b/projects/Playable-Piano/Playable-Piano.png
diff --git a/projects/Playable-Piano/README.md b/projects/Playable-Piano/README.md
@@ -0,0 +1,33 @@
+# **PLAYABLE PIANO**
+
+---
+
+## **Description 📃** 
+- This project made by using HTML, CSS and JS.
+- This project is a beginner friendly and helpful who are new to frontend technology.
+- Piano project is responsive even for the mobile devices.
+- Press the buttons from the keyboard or just click on the keys of piano will show the effect of pressing and producing respective buttons sound.
+
+<br>
+
+## **Tech Stack 🎮**
+
+- HTML
+- CSS
+- JS
+
+<br>
+
+## **Screenshot 📸**
+
+![image](https://github.com/ssitvit/Code-Canvas/assets/114330097/b5b8a393-be1c-4186-a124-6e853488e404)
+
+<br>
+
+## **Creator 👦**
+
+[Avdhesh Varshney](https://github.com/Avdhesh-Varshney)
+
+<br>
+
+### Happy Coding !
diff --git a/projects/Playable-Piano/favicon.ico b/projects/Playable-Piano/favicon.ico
diff --git a/projects/Playable-Piano/index.html b/projects/Playable-Piano/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+	<!-- Logo of the website -->
+	<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
+
+	<!-- Title of the project -->
+	<title>PLAYABLE PIANO</title>
+
+	<!-- Stylesheet of the project -->
+	<link rel="stylesheet" href="./style.css">
+
+	<!-- Main javascript file of the project -->
+	<script src="./script.js" defer></script>
+</head>
+
+<body>
+	<!-- Main container of the project -->
+	<div class="wrapper">
+		<header>
+			<h1>PLAYABLE PIANO</h1>
+			<!-- Volume controls for the user -->
+			<div class="column volume-slider">
+				<span>Volume</span>
+				<input type="range" min="0" max="1" value="0.5" step="any">
+			</div>
+
+			<div class="column keys-checkbox">
+				<span>Show Keys</span>
+				<input type="checkbox" checked>
+			</div>
+		</header>
+
+		<!-- Piano board -->
+		<ul class="piano-keys">
+			<!-- Piano keys -->
+			<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>
+		</ul>
+	</div>
+
+</body>
+
+</html>
diff --git a/projects/Playable-Piano/script.js b/projects/Playable-Piano/script.js
@@ -0,0 +1,46 @@
+// Declaring global variables
+const pianoKeys = document.querySelectorAll(".piano-keys .key");
+const volumeSlider = document.querySelector(".volume-slider input");
+const keysCheckbox = document.querySelector(".keys-checkbox input");
+
+// Initialising variables
+let allKeys = [];
+let audio = new Audio();
+
+// function play the tunes of the different buttons on click
+const playTune = (key) => {
+    // Audio controls
+    audio.src = `./tunes/${key}.wav`;
+    audio.play();
+    const clickedKey = document.querySelector(`[data-key="${key}"]`);
+    clickedKey.classList.add("active");
+    setTimeout(() => {
+        clickedKey.classList.remove("active");
+    }, 150);
+}
+
+// Mouse click functioning
+pianoKeys.forEach(key => {
+    allKeys.push(key.dataset.key);
+    key.addEventListener("click", () => playTune(key.dataset.key));
+});
+
+// function to hide the keys labels
+const showHideKeys = () => {
+    pianoKeys.forEach(key => key.classList.toggle("hide"));
+}
+
+// Keyboard buttons press functioning
+const pressedKey = (e) => {
+    if (allKeys.includes(e.key)) playTune(e.key);
+}
+
+// function to control the volume of the game
+const handleVolume = (e) => {
+    audio.volume = e.target.value;
+}
+
+// Adding functioning to the different variables
+keysCheckbox.addEventListener("click", showHideKeys);
+volumeSlider.addEventListener("input", handleVolume);
+document.addEventListener("keydown", pressedKey);
diff --git a/projects/Playable-Piano/style.css b/projects/Playable-Piano/style.css
@@ -0,0 +1,197 @@
+/* Default settings */
+@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-image: linear-gradient( 109.6deg, rgba(156,252,248,1) 11.2%, rgba(110,123,251,1) 91.1% );
+}
+
+/* Main heading of the game */
+.wrapper {
+	padding: 35px 40px;
+	border-radius: 20px;
+	background: #000080;
+}
+
+.wrapper header {
+	display: flex;
+	color: #B2B2B2;
+	align-items: center;
+	justify-content: space-between;
+}
+
+header h1 {
+	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;
+}
+
+/* Styling the volume slider */
+.volume-slider input {
+	accent-color: #fff;
+}
+
+/* Adding styling into the checkbox button */
+.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;
+}
+
+/* CSS styling of the piano keys */
+.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, #000080);
+}
+
+.piano-keys .black.active {
+	box-shadow: inset -5px -10px 10px rgba(255, 255, 255, 0.1);
+	background: linear-gradient(to bottom, #000080, #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;
+}
+
+/* Responsiveness for the tablet sized devices */
+@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;
+	}
+}
+
+/* Responsiveness for the mobile devices */
+@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;
+	}
+}
diff --git a/projects/Playable-Piano/tunes/;.wav b/projects/Playable-Piano/tunes/;.wav
diff --git a/projects/Playable-Piano/tunes/a.wav b/projects/Playable-Piano/tunes/a.wav
diff --git a/projects/Playable-Piano/tunes/d.wav b/projects/Playable-Piano/tunes/d.wav
diff --git a/projects/Playable-Piano/tunes/e.wav b/projects/Playable-Piano/tunes/e.wav
diff --git a/projects/Playable-Piano/tunes/f.wav b/projects/Playable-Piano/tunes/f.wav
diff --git a/projects/Playable-Piano/tunes/g.wav b/projects/Playable-Piano/tunes/g.wav
diff --git a/projects/Playable-Piano/tunes/h.wav b/projects/Playable-Piano/tunes/h.wav
diff --git a/projects/Playable-Piano/tunes/j.wav b/projects/Playable-Piano/tunes/j.wav
diff --git a/projects/Playable-Piano/tunes/k.wav b/projects/Playable-Piano/tunes/k.wav
diff --git a/projects/Playable-Piano/tunes/l.wav b/projects/Playable-Piano/tunes/l.wav
diff --git a/projects/Playable-Piano/tunes/o.wav b/projects/Playable-Piano/tunes/o.wav
diff --git a/projects/Playable-Piano/tunes/p.wav b/projects/Playable-Piano/tunes/p.wav
diff --git a/projects/Playable-Piano/tunes/s.wav b/projects/Playable-Piano/tunes/s.wav
diff --git a/projects/Playable-Piano/tunes/t.wav b/projects/Playable-Piano/tunes/t.wav
diff --git a/projects/Playable-Piano/tunes/u.wav b/projects/Playable-Piano/tunes/u.wav
diff --git a/projects/Playable-Piano/tunes/w.wav b/projects/Playable-Piano/tunes/w.wav
diff --git a/projects/Playable-Piano/tunes/y.wav b/projects/Playable-Piano/tunes/y.wav