https://github.com/carevicm/javascript-drum_lesson

Javascript DOM - Drum Lesson
https://github.com/carevicm/javascript-drum_lesson

animation css3 dom dom-manipulation html5 images javascript javascript-game sound

Last synced: 15 days ago
JSON representation

Javascript DOM - Drum Lesson

• Host: GitHub
• URL: https://github.com/carevicm/javascript-drum_lesson
• Owner: carevicm
• Created: 2023-09-24T03:27:29.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2023-09-25T05:39:47.000Z (about 1 year ago)
• Last Synced: 2023-09-25T15:58:39.422Z (about 1 year ago)
• Topics: animation, css3, dom, dom-manipulation, html5, images, javascript, javascript-game, sound
• Language: JavaScript
• Homepage: https://carevicm.github.io/JavaScript-Drum_Lesson/
• Size: 354 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Drum Kit 🥁

Description

Drum Kit is an interactive web application that allows users to play different drum sounds either by clicking on the buttons displayed on the screen or pressing specific keys on the keyboard. 

It provides a simple and intuitive interface for users to simulate drum beats using just their web browser.

Features

Interactive UI: The web application provides visually appealing buttons that represent different drum components.

Keyboard Integration: Users can play drum sounds not just by clicking the buttons but also by pressing the corresponding keys on their keyboard.

Dynamic Feedback: Provides real-time visual feedback when a drum button is pressed or a key is hit.

Responsive Design: The design adjusts and looks great on both desktop and mobile devices.

Technologies Used

HTML: Structures the main content of the web page.

CSS: Used for styling the web page, providing visual feedback, and ensuring the app looks great on all devices.

JavaScript: Powers the main functionality of the web application, handling button clicks and keyboard events to play corresponding drum sounds.

External Libraries & Resources

Google Fonts: The website uses the "Arvo" font family from Google Fonts to provide a unique look and feel.

Audio Files: The sounds for the different drum components are stored as .mp3 files and are played using the Audio object in JavaScript.

How To Use

Open the Web Application: Navigate to the Drum Kit website.

Play Using Mouse: Click on the drum buttons displayed on the screen to play the corresponding drum sound.

Play Using Keyboard: Press the keys w, a, s, d, j, k, or l on your keyboard to play the respective drum sounds.