I'm building a browser game to help musicians to train their ear. A short melody will be played, you click piano keys to try and repeat the melody, and it scores you on accuracy. Each correct round adds another note to the melody. My first coding project on any of Hack Club's events.
Started styling the game with CSS– I decided to go for a warm, paper-like aesthetic featuring a cream background, serif heading, and monospace labels for stats.
Learned CSS custom properties (variables) for colours/fonts so I didn’t need to repeat hex codes everywhere. I ran into a couple of bugs– all of them were typos (accidental spaces here and there).
I’ll also think of adding a stave in.
Today, I got the basic HTML structure done: the header, score/round/note-count display, the status message, piano container, and the answer/submit/clear controls. I spent way too much time debugging tags.
Next, I plan on designing the interface with CSS and wiring up sound with Tone.js.
