From 5abf3afe998833a19457046b1a360be3a1dec737 Mon Sep 17 00:00:00 2001 From: John Padworski <128070765+jpadwor1@users.noreply.github.com> Date: Mon, 1 May 2023 09:08:33 -0700 Subject: [PATCH] Create drum-kit.md --- Projects/1-Beginner/drum-kit.md | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 Projects/1-Beginner/drum-kit.md diff --git a/Projects/1-Beginner/drum-kit.md b/Projects/1-Beginner/drum-kit.md new file mode 100644 index 00000000..e59a0063 --- /dev/null +++ b/Projects/1-Beginner/drum-kit.md @@ -0,0 +1,29 @@ +# Drum Kit + +**Tier:** 1- Beginner + +The Drum Kit is a simple web page with images of drums. When clicked the sound of the cooresponding drum is played. The drums are also linked to keyboard keys so the user can press keyboard keys and the cooresponding drum sound will play. + +- This application is a web-based drum simulator. + + +## User Stories + +- [ ] User can click each picture and hear a cooresponding drum sound. +- [ ] User can press designated keyboard keys and the cooresponding drum sound will be played. + +## Bonus features + +- [ ] Add additional drums, cymbals, or electronic sounds to enhance functionality. + +## Useful links and resources + +How to play audio in JS - https://www.w3schools.com/jsref/met_audio_play.asp + +## Example projects + +Below is the live site, source code and a screenshot to assist in design. Do not look at the live site or source code until the user stories are completed. +Source Code:https://github.com/jpadwor1/drum-kit +Live Site:https://jpadwor1.github.io/drum-kit/ +![image](https://user-images.githubusercontent.com/128070765/235483649-0d36f4d3-befa-4495-91ea-57f0a1578ce3.png) +