In this project, we're creating a keyboard. I love this project because at first glance it seems easy, but there are some more complicated steps involved.
You can use as many (or as few) tools, libraries, and frameworks as you'd like. If you're trying to learn something new, this would be a great way to push yourself.
Users should be able to:
See the keyboard centered on the page
Whenever a user hovers over a specific key it will change colors
White keys will change to yellow #ffd200
Black keys will change to pink #f40082
When a user clicks on a specific key, it will play an audio clip.
The audio clips are numbered, but I did not specifically number the keys. You can pick which key should be associated with each audio file.
If a user clicks on one key, then immediately clicks on a second key. The 2 files should both play. Meaning, clicking on one key will not stop an existing audio file from playing.
Getting Started
To get started, download the zip file. This includes all the project assets you need to get started: HTML, CSS, images, and fonts.
Take a look around. Look at the project's Figma file. This is a great way to see how the pieces and parts should look within the browser.
Open the project's README.md file. It has additional information on how the project is structured.
Customize your project/file architecture to your liking.
Happy coding!
Once you're finished, share your work using #adventofjs
Taking your Project to the Next Level
Use a framework like React, Vue, or Svelte. Or, if you're feeling particularly adventurous, try writing everything in Vanilla JavaScript.
Take a step back and try writing the HTML and CSS for this project yourself. Start with the provided Figma file. If you get stuck, consider purchasing the Advent of CSS solutions, where Amy explains exactly how to build this.
When the timer is completed, play the alert sound. (Audio file included)
FAQs
Can I use libraries/frameworks on these projects?
Of course! We're providing the vanilla HTML and CSS, but you can use whatever tools and frameworks you'd like.
Oh no! I'm stuck!
Check out the Learn Build Teach Discord. We have a specific channel set up, just for the Advent of JavaScript.
