-
Notifications
You must be signed in to change notification settings - Fork 190
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added Electronic drum kit Project (#915)
* Added electric drum kit website to vanilla JS basic folder * Update README.md * Update README.md
- Loading branch information
1 parent
6fd2a4a
commit 6d8db11
Showing
16 changed files
with
277 additions
and
2 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| <h1 align='center'><b>💥 Electronic Drum Kit 💥</b></h1> | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| <h3 align='center'>Tech Stack Used 🎮</h3> | ||
|
|
||
| <div align='center'> | ||
|
|
||
|  | ||
|  | ||
| <!--  --> | ||
|  | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| <!--  --> | ||
| </div> | ||
|
|
||
|
|
||
|  | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| ## :zap: Description 📃 | ||
|
|
||
| <div> | ||
| <p>Step into the rhythm of creativity with our Electronic Drum Kit! This immersive web application invites users to explore a vibrant array of sounds, allowing you to unleash your inner musician. With a user-friendly interface, simply tap the colorful keys or press the corresponding keyboard keys to create captivating beats. Whether you're a seasoned drummer or a curious beginner, this project offers an engaging way to experiment with sound and rhythm. Perfect for music enthusiasts, this electronic drum kit not only provides a fun and interactive experience but also serves as a foundation for further musical exploration. Get ready to jam and let your creativity flow!</p> | ||
| </div> | ||
|
|
||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| ## :zap: How to run it? 🕹️ | ||
|
|
||
| 1. **Fork** the repository [WebMasterLog](https://github.com/Avdhesh-Varshney/WebMasterLog) to your own GitHub account. | ||
| 2. **Clone** the forked repository to your local machine using the command: | ||
| ```bash | ||
| git clone https://github.com/your-username/WebMasterLog.git | ||
| ``` | ||
| 3. Navigate to the **vanilla-js** folder: | ||
| ```bash | ||
| cd WebMasterLog/vanilla-js/Electronic-Drum-Kit | ||
| ``` | ||
| 4. Open the **index.html** file with a live server. | ||
|
|
||
| Make sure to replace `your-username` with your actual GitHub username! | ||
|
|
||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| ## :zap: Screenshots 📸 | ||
|  | ||
|
|
||
|
|
||
|
|
||
| ## :zap: Working Video 📹 | ||
| <!-- directly add the link of video (If, possible) --> | ||
| https://github.com/user-attachments/assets/84080732-837d-4e2e-aff7-ac4d4990427d | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|  | ||
|
|
||
| <!-- -------------------------------------------------------------------------------------------------------------- --> | ||
|
|
||
| <h4 align='center'>Developed By <b><i>Jomana Tantawy</i></b> 👦</h4> | ||
| <p align='center'> | ||
| <a href='https://www.linkedin.com/in/jomana-tantawy-b516b0315'> | ||
| <img src='https://img.shields.io/badge/linkedin-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white' /> | ||
| </a> | ||
| <a href='https://github.com/JomanaMahmoud'> | ||
| <img src='https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white' /> | ||
| </a> | ||
| </p> | ||
|
|
||
| <h4 align='center'>Happy Coding 🧑💻</h4> | ||
|
|
||
| <h3 align="center">Show some ❤️ by 🌟 this repository!</h3> |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport content="width=device-width,initial-scale=1.0"> | ||
| <title>Electronic Drum Kit</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
| </head> | ||
|
|
||
| <body> | ||
|
|
||
| <header> | ||
| <button id="menuButton">Key Bindings</button> | ||
| <div id="menu" class="hidden"> | ||
| <p>A boom</p> | ||
| <p>S clap</p> | ||
| <p>D hihat</p> | ||
| <p>F kick</p> | ||
| <p>G openhat</p> | ||
| <p>H ride</p> | ||
| <p>J snare</p> | ||
| <p>K tink</p> | ||
| <p>L tom</p> | ||
| </div> | ||
| </header> | ||
| <h2>Electronic Drum Kit</h2> | ||
| <img src="Drum.jpg" width="38%" > | ||
| <div class="boxs"> | ||
| <button class="key" id="key1" data-sound="assets/boom.wav">A</button> | ||
| <button class="key" id="key2" data-sound="assets/clap.wav">S</button> | ||
| <button class="key" id="key3" data-sound="assets/hihat.wav">D</button> | ||
| <button class="key" id="key4" data-sound="assets/kick.wav">F</button> | ||
| <button class="key" id="key5" data-sound="assets/openhat.wav">G</button> | ||
| <button class="key" id="key6" data-sound="assets/ride.wav">H</button> | ||
| <button class="key" id="key7" data-sound="assets/snare.wav">J</button> | ||
| <button class="key" id="key8" data-sound="assets/tink.wav">K</button> | ||
| <button class="key" id="key9" data-sound="assets/tom.wav">L</button> | ||
| </div> | ||
| <script src="script.js"></script> | ||
| <footer> | ||
| <p>Developed by Jomana Tantawy</p> | ||
| </footer> | ||
| </body> | ||
| </html> |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| let keys = document.getElementsByClassName("key"); | ||
|
|
||
| for (let i = 0; i < keys.length; i++) { | ||
| keys[i].onclick = function() { | ||
| playSound(keys[i]); | ||
| }; | ||
| } | ||
|
|
||
| document.addEventListener('keydown', function(event) { | ||
| let keyPressed = event.key.toUpperCase(); | ||
| console.log("Key pressed: " + keyPressed); | ||
|
|
||
| for (let i = 0; i < keys.length; i++) { | ||
|
|
||
| if (keys[i].innerText === keyPressed) { | ||
| playSound(keys[i]); | ||
| } | ||
| } | ||
| }); | ||
|
|
||
|
|
||
| function playSound(key) { | ||
| let soundFile = key.getAttribute("data-sound"); | ||
| console.log("Playing sound for key: " + key.innerText); | ||
|
|
||
| if (soundFile) { | ||
| let sound = new Audio(soundFile); | ||
| sound.play(); | ||
| key.classList.add('pressed'); | ||
|
|
||
|
|
||
| setTimeout(() => { | ||
| key.classList.remove('pressed'); | ||
| }, 100); | ||
| } else { | ||
| console.log("Sound file not found for this key"); | ||
| } | ||
| } | ||
|
|
||
| document.getElementById("menuButton").addEventListener("click", function() { | ||
| const menu = document.getElementById("menu"); | ||
| menu.classList.toggle("hidden"); | ||
| menu.style.display = menu.style.display === 'none' ? 'block' : 'none'; | ||
| }); | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| *{ | ||
| margin: 0; | ||
| padding: 0; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| #menu { | ||
| border: 1px solid #ccc; | ||
| background-color: #f9f9f9; | ||
| padding: 10px; | ||
| position: absolute; | ||
| top: 50px; | ||
| right: 10px; | ||
| width: 200px; | ||
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); | ||
| } | ||
| body{ | ||
| background-color: #ffe9ec; | ||
| text-align: center; | ||
| margin: 0px; | ||
| } | ||
| body h2{ | ||
| padding-top: 0px; | ||
| font-size: 40px; | ||
| font-family:cursive; | ||
|
|
||
| } | ||
| .boxs{ | ||
| position: relative; | ||
| margin: 0px; | ||
| display: flex; | ||
| flex-direction: row; | ||
| flex-wrap: wrap; | ||
| justify-content: center; | ||
| } | ||
| .key { | ||
| background-color: white; | ||
| width: 70px; | ||
| height: 70px; | ||
| font-size: 35px; | ||
| font-family: monospace; | ||
| margin: 15px; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| border-radius: 10px; | ||
| border-color: black; | ||
| border-width: 2px; | ||
| border-style: solid; | ||
| cursor: pointer; | ||
| } | ||
| .key:hover{ | ||
| transform: scale(1.1); | ||
| } | ||
| .key.pressed{ | ||
| transform: scale(1.1); | ||
| } | ||
|
|
||
| footer { | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| position: absolute; | ||
| bottom: 2px; | ||
| width: 100%; | ||
| } | ||
| .hidden { | ||
| display: none; | ||
| } | ||
| header { | ||
| position: relative; | ||
| display:flex; | ||
| justify-content:end; | ||
| margin-right: 10px; | ||
| margin-top: 10px; | ||
| align-items:center; | ||
| margin-bottom: 0px; | ||
| } | ||
|
|
||
| #menuButton{ | ||
| background-color: white; | ||
| width: 150px; | ||
| height: 30px; | ||
| font-size: 20px; | ||
| font-family: monospace; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| border-radius: 10px; | ||
| border-color: black; | ||
| border-width: 2px; | ||
| border-style: solid; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| #menu p{ | ||
| font-size: 20px; | ||
| font-family: monospace; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters