{"id":22345665,"url":"https://github.com/gerhynes/javascript-drum-kit","last_synced_at":"2025-08-30T17:08:45.387Z","repository":{"id":106045512,"uuid":"105576326","full_name":"gerhynes/javascript-drum-kit","owner":"gerhynes","description":"A JavaScript drum kit to practice my vanilla JavaScript. Made for Wes Bos' JavaScript 30 course. ","archived":false,"fork":false,"pushed_at":"2018-01-23T21:59:39.000Z","size":915,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-26T10:23:25.851Z","etag":null,"topics":["javascript","javascript30","vanilla-javascript"],"latest_commit_sha":null,"homepage":"https://gk-hynes.github.io/javascript-drum-kit/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gerhynes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-10-02T19:32:56.000Z","updated_at":"2023-04-11T15:21:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"17329249-ebd3-4a2c-92ff-09601370d9b7","html_url":"https://github.com/gerhynes/javascript-drum-kit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gerhynes/javascript-drum-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fjavascript-drum-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fjavascript-drum-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fjavascript-drum-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fjavascript-drum-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gerhynes","download_url":"https://codeload.github.com/gerhynes/javascript-drum-kit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gerhynes%2Fjavascript-drum-kit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272878320,"owners_count":25008336,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-30T02:00:09.474Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","javascript30","vanilla-javascript"],"created_at":"2024-12-04T09:18:21.706Z","updated_at":"2025-08-30T17:08:45.369Z","avatar_url":"https://github.com/gerhynes.png","language":"HTML","readme":"# [JavaScript Drum Kit](https://gk-hynes.github.io/javascript-drum-kit/)\n\nA drum kit built using vanilla JavaScript. Built for Wes Bos' [JavaScript 30](https://javascript30.com/) course.\n\n[![JavaScript drum kit screenshot](https://res.cloudinary.com/gerhynes/image/upload/v1516744698/Screenshot-2018-1-23_JS_Drum_Kit_ta1tii.png)](https://gk-hynes.github.io/javascript-drum-kit/)\n\n## Notes\n\nEach key has a unique keycode.\n\nData attributes let you add new non-standard attributes, such as `data-key`.\n\nAdd an event listener to the keys to listen for keydown.\n\nUse `audio[data-key=\"${e.keyCode}\"]` and `audio.play()` to play each key's specific audio.\n\nIf you call `.play()` on an element that is already playing, it won't play again. So use `audio.currentTime = 0` to rewind it to the start.\n\nWhen a key is clicked on a `playing` class is added using `key.classList.add('playing')`. This scales up the key and adds a border and box shadow.\n\nInstead of using `SetTimeout()` to remove the class, use a transitionend event. You cannot listen on all the elements in a NodeList so use `forEach()` to add an eventListener to each of them.\n\nInstead of attaching a function directly to the key, use a separate function `playSound()` which you call upon keydown.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerhynes%2Fjavascript-drum-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgerhynes%2Fjavascript-drum-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgerhynes%2Fjavascript-drum-kit/lists"}