{"id":22864446,"url":"https://github.com/shovanch/js30","last_synced_at":"2026-03-19T23:51:44.507Z","repository":{"id":115165937,"uuid":"119857331","full_name":"shovanch/JS30","owner":"shovanch","description":"🔥 Projects for Javascript30","archived":false,"fork":false,"pushed_at":"2018-02-20T09:15:39.000Z","size":1014,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-20T01:05:31.696Z","etag":null,"topics":["javascript30"],"latest_commit_sha":null,"homepage":"","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/shovanch.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":"2018-02-01T15:50:45.000Z","updated_at":"2023-03-07T14:22:11.000Z","dependencies_parsed_at":null,"dependency_job_id":"520478c4-0724-4aa7-8ba0-671a77a8b2b3","html_url":"https://github.com/shovanch/JS30","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/shovanch/JS30","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shovanch%2FJS30","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shovanch%2FJS30/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shovanch%2FJS30/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shovanch%2FJS30/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shovanch","download_url":"https://codeload.github.com/shovanch/JS30/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shovanch%2FJS30/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29151649,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T02:39:25.012Z","status":"ssl_error","status_checked_at":"2026-02-06T02:37:22.784Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["javascript30"],"created_at":"2024-12-13T11:27:53.484Z","updated_at":"2026-02-06T05:04:33.411Z","avatar_url":"https://github.com/shovanch.png","language":"HTML","readme":"# Javascript30\n\n### Projects for Javascript30 by [Wes Bos](https://twitter.com/wesbos)\n\n* **[1. JS Drum kit](https://shovanch.com/JS30/01%20-%20JS%20Drum%20Kit/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/01%20-%20JS%20Drum%20Kit/README.md)_**\n\n  **_Lessons:_** Data-attributes, how to select elements with data-attributes, using audio element and manipulating it with various methods in JS, transition end event, how to add eventlistener to a nodelist of elements.\n\n* **[2. JS and CSS clock](https://shovanch.com/JS30/02%20-%20JS%20and%20CSS%20Clock/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/02%20-%20JS%20and%20CSS%20Clock/README.md)_**\n\n  **_Lessons:_** Manipulating the CSS transform properties based on calculated JS variables, executing a function continuosly after a set period of time using `setInterval()` method, Using the `Date()` object, transform-origin property.\n\n* **[3. CSS Variables with JS](https://shovanch.com/JS30/03%20-%20CSS%20Variables/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/03%20-CSS%20Variables/README.md)_**\n\n  **_Lessons:_** Using CSS variales, updating the variables using JS, mousemove event, accessing the CSS variables using documentElement property and setProperty method, dataset property\n\n* **[4. Working with Array methods 1](https://shovanch.com/JS30/04%20-%20Array%20Cardio%20Day%201/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/04%20-%20Array%20Cardio%20Day%201/README.md)_**\n\n  **_Lessons:_** Using array.prototype methods =\u003e filter, sort, map, reduce. Changing a nodelist of items into an array using i) `Array.from()` ii) [..nodelist] spread operator\n\n* **[5. Flex Panel Gallery](https://shovanch.com/JS30/05%20-%20Flex%20Panel%20Gallery/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/05%20-%20Flex%20Panel%20Gallery/README.md)_**\n\n  **_Lessons:_** Moving element in and out view with translate property. Triggering an event after a transition event has finished its work.\n\n* **[6. Fetch API type ahead](https://shovanch.com/JS30/06%20-%20Type%20Ahead/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/06%20-%20Type%20Ahead/README.md)_**\n\n  **_Lessons:_** How to use Fetch API, Using RegExp to filter user input value from an array of data and inserting the result into the DOM.\n\n* **[7. Working with Array methods 2](https://shovanch.com/JS30/07%20-%20Array%20Cardio%20Day%202/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/07%20-%20Array%20Cardio%20Day%202/README.md)_**\n\n  **_Lessons:_** Using array methods : `.some()` , `.every()`, `.find()`, `.findIndex()`\n\n* **[8. Fun with HTML5 Canvas](https://shovanch.com/JS30/08%20-%20Fun%20with%20HTML5%20Canvas/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/08%20-%20Fun%20with%20HTML5%20Canvas/README.md)_**\n\n  **_Lessons:_** How to use HTML5 canvas, context and various methods related to it (`strokeStyle, lineTo, moveTo` etc...), How to draw on the canvas on mousedown, changing the color hue and linewidth with strokes\n\n* **[9. Useful Devtools tricks](https://shovanch.com/JS30/09%20-%20Dev%20Tools%20Domination/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/09%20-%20Dev%20Tools%20Domination/README.md)_**\n\n  **_Lessons:_** Cool devtools commands like `console.assert()` to perform basic tests, `console.dir()` to get detailed info about an element, `console.time()` to view runtime of a task, `console.group()` to group similar infos\n\n* **[10. Hold shift and check multiple checkboxes](https://shovanch.com/JS30/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/10%20-%20Hold%20Shift%20and%20Check%20Checkboxes/README.md)_**\n\n  **_Lessons:_** How to fire events only a certain key is pressed, using flag variables to set flip checkboxes\n\n* **[11. Custom Video Player](https://shovanch.com/JS30/11%20-%20Custom%20Video%20Player/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/11%20-%20Custom%20Video%20Player/README.md)_**\n\n  **_Lessons:_** Using HTML5 video element and its various methods and properties, using mousedown flag variable to implement drag and update functionality, updating progress bar with JS and `flex-basis` property,\n\n* **[12. Key Sequence Detection](https://shovanch.com/JS30/12%20-%20Key%20Sequence%20Detection/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/12%20-%20Key%20Sequence%20Detection/README.md)_**\n\n  **_Lessons:_** Getting key from keyup event and storing in an array, maintaining an array length using `.splice()`.\n\n* **[13. Slide in on scroll](https://shovanch.com/JS30/13%20-%20Slide%20in%20on%20Scroll/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/13%20-%20Slide%20in%20on%20Scroll/README.md)_**\n\n  **_Lessons:_**\n\n* **[14. JS Reference VS Copying](https://shovanch.com/JS30/14%20-%20JavaScript%20References%20VS%20Copying/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/14%20-%20JavaScript%20References%20VS%20Copying/README.md)_**\n\n  **_Lessons:_**\n\n* **[15. Using LocalStorage](https://shovanch.com/JS30/15%20-%20LocalStorage/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/15%20-%20LocalStorage/README.md)_**\n\n  **_Lessons:_**\n\n* **[16. Mouse move shadow](https://shovanch.com/JS30/16%20-%20Mouse%20Move%20Shadow/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/16%20-%20Mouse%20Move%20Shadow/README.md)_**\n\n  **_Lessons:_**\n\n* **[17. Sort without articles](https://shovanch.com/JS30/17%20-%20Sort%20Without%20Articles/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/17%20-%20Sort%20Without%20Articles/README.md)_**\n\n  **_Lessons:_**\n\n* **[18. Adding up times with Reduce](https://shovanch.com/JS30/18%20-%20Adding%20Up%20Times%20with%20Reduce/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/18%20-%20Adding%20Up%20Times%20with%20Reduce/README.md)_**\n\n  **_Lessons:_**\n\n* **[19. Webcam Fun](https://shovanch.com/JS30/19%20-%20Webcam%20Fun/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/19%20-%20Webcam%20Fun/README.md)_**\n\n  **_Lessons:_**\n\n* **[20. Speech Detection](https://shovanch.com/JS30/20%20-%20Speech%20Detection/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/20%20-%20Speech%20Detection/README.md)_**\n\n  **_Lessons:_**\n\n* **[21. Geo Location](https://shovanch.com/JS30/21%20-%20Geolocation/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/21%20-%20Geolocation/README.md)_**\n\n  **_Lessons:_**\n\n* **[22. Follow Along Link Highlighter](https://shovanch.com/JS30/22%20-%20Follow%20Along%20Link%20Highlighter/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/22%20-%20Follow%20Along%20Link%20Highlighter/README.md)_**\n\n  **_Lessons:_**\n\n* **[23. Speech Synthesis](https://shovanch.com/JS30/23%20-%20Speech%20Synthesis/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/23%20-%20Speech%20Synthesis/README.md)_**\n\n  **_Lessons:_**\n\n* **[24. Sticky Nav](https://shovanch.com/JS30/24%20-%20Sticky%20Nav/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/24%20-%20Sticky%20Nav/README.md)_**\n\n  **_Lessons:_**\n\n* **[25. Event Capture, Propagation and Bubbling](https://shovanch.com/JS30/25%20-%20Event%20Capture,%20Propagation,%20Bubbling%20and%20Once/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/25%20-%20Event%20Capture,%20Propagation,%20Bubbling%20and%20Once/README.md)_**\n\n  **_Lessons:_**\n\n* **[26. Stripe Follow Along Nav](https://shovanch.com/JS30/26%20-%20Stripe%20Follow%20Along%20Nav/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/26%20-%20Stripe%20Follow%20Along%20Nav/README.md)_**\n\n  **_Lessons:_**\n\n* **[27. Click and Drag](https://shovanch.com/JS30/27%20-%20Click%20and%20Drag/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/27%20-%20Click%20and%20Drag/README.md)_**\n\n  **_Lessons:_**\n\n* **[28. Video Speed Controller](https://shovanch.com/JS30/28%20-%20Video%20Speed%20Controller/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/28%20-%20Video%20Speed%20Controller/README.md)_**\n\n  **_Lessons:_**\n\n* **[29. Countdown Timer](https://shovanch.com/JS30/29%20-%20Countdown%20Timer/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/29%20-%20Countdown%20Timer/README.md)_**\n\n  **_Lessons:_**\n\n* **[30. Whack a Mole](https://shovanch.com/JS30/30%20-%20Whack%20A%20Mole/)** → **_[Notes](https://github.com/shovanch/JS30/blob/master/30%20-%20Whack%20A%20Mole/README.md)_**\n\n  **_Lessons:_**\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshovanch%2Fjs30","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshovanch%2Fjs30","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshovanch%2Fjs30/lists"}