README--initial-commit

LICENSE.txt

@@ -0,0 +1,24 @@
+(c) Copyright 2020 HackYourFutureBelgium
+
+
+Licensed under the MIT license:
+
+    http://www.opensource.org/licenses/mit-license.php
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,38 @@
+# Drum Kit
+
+A static web page for rhythmic expression built with only HTML, CSS & JavaScript.  This project uses .wav audio files and keypress events to turn the user's keyboard into a drum set.
+
+Try the live demo [right here](https://hackyourfuture.be/drum-kit), it looks something like this:
+
+[![drum kit screen shot](./images/screen-shot.png)](https://hackyourfuture.be/drum-kit)
+
+---
+
+## Notes
+
+Studying this project we learned about:
+
+* Dynamically setting classes
+* Using the `<audio>` tag and .wav assets
+* How the query selector can be used to easily interact with many elements
+* How milestones, labels & issues can help organize work ->
+  * user stories === milestones
+  * tasks === issues
+  * labels === what type of task it is
+
+We struggled with:
+
+* How to create the development strategy.  It was tricky to figure out that the `playHandler` can actually work without changing the `.played` class, once that was clear it was easier to create the _Keys Light Up_ user story.
+* We kept making mistakes with the `data-key` attributes and linking the wrong keys and sounds.
+* Merge Conflicts!  whoever invented these has no soul
+* Keeping track of all the branches and forks.  OMG, github is confusing
+
+These resources were very helpful:
+
+* [KeyBoard Event Values](https://css-tricks.com/snippets/javascript/javascript-keycodes/)
+* [gmlwjd9405/git-collaboration](https://github.com/gmlwjd9405/git-collaboration)
+* [GitHub Project Management](https://github.com/features/project-management)
+
+---
+
+> * Code refactored from [Wes Bos](https://github.com/wesbos/JavaScript30/tree/master/01%20-%20JavaScript%20Drum%20Kit)

development-strategy.md

@@ -0,0 +1,91 @@
+# Drum Kit: Development Strategy
+
+Building this site one step at a time
+
+---
+
+## 0. README
+
+* Write the `README.md`, including the final screen shot
+* Include a License
+* Include this `development.md` file
+
+---
+
+## 1. Setup
+
+* Create boilerplate index.html
+
+---
+
+## 2. User Story: Display Keyboard
+
+__A user can see which sound each key will make__
+
+### DOM:
+
+* Create one element per key in the drumset, with child elements to display the key name and sound it will make
+* Create a container for all of the key elements
+
+---
+
+## 3. User Story: Play Sounds
+
+__A user can press the displayed keys and hear the sound__
+
+### Assets:
+
+* Create a `/sounds` folder containing all of the .wav files
+
+### DOM:
+
+* Create audio tags with paths to the sound assets
+* Create script tags for the Handler & Listener
+* Create `data-key` attributes to link the key elements with the audio elements
+
+### Listeners:
+
+* Attach a `keyup` event to the window object.
+
+### Handlers:
+
+* Create a `playSound` event handler that checks to see if the pressed key has a linked audio sound. If it does, play the sound!
+
+---
+
+## 4. User Story: See Beauty
+
+__A user can use a well-styled page__
+
+### Assets:
+
+* Add the background image to  `/images`
+
+### Styles:
+
+* Require and apply the background image
+* Create styles for the keys
+
+### DOM:
+
+* Create a link tag to require the styles
+
+---
+
+## 5. User Story: Animate Keys
+
+__A user can know which keys are currently pressed__
+
+### Styles:
+
+* Create a class for keys that are currently pressed
+
+### Handlers:
+
+* Create a `removeTransition` handler to remove the `.played` class when a key is released
+* Update the `playHandler` to add the `.played` class when a key is pressed
+
+### Listeners:
+
+* Add a `transitionend` listener to each element with the `.key` class, with the `removeTransition` handler.
+