A grid you click to program beats, with a playhead that loops through it.
Instead of typing 8 buttons in HTML, make them with JavaScript. A JavaScript counting loop looks like this: for (let i = 0; i < 8; i++) { … } (like Python's for i in range(8):).
Inside the loop: const step = document.createElement("button"); makes a button, step.className = "step"; gives it the step style, and grid.appendChild(step); puts it on the page.
Also save each one with steps.push(step); (that's Python's .append).
💡 Who uses this? Drum machines, apps like GarageBand, and every video game run on a clock: tick, update what's on screen, make a sound, repeat. Game and audio programmers write loops like this one.
index.html is what's on the page, style.css is how it looks, app.js is what it does (the frontend), and server.py is your Python backend. It keeps running between requests, and anything in the store dictionary is saved even after a reload.
rb.play("kick")Play one drum right now. rb.play("snare", 2) plays two quick hits.rb.playBeat({ kick: [1, 5], snare: [3, 7] })Loop a whole beat, like the course's drum commands. [3, 2] means beat 3 with 2 hits. Add a tempo: rb.playBeat(beat, 120).rb.stop()Stop the beat.await rb.server({ action: "save" })Send a request to your server.py's handle(request) and wait for its answer.rb.saveBeat({ kick: [1, 5] })Open a beat in RockBlocks, in a new tab.rb.msPerBeat(120)How many milliseconds one beat lasts at that tempo — handy for setInterval.Drums: crash, ride, openhat, hihat, hightom, tom, lowtom, rimshot, snare, kick
console.log() and your server's print() show up here.