https://github.com/gupta-ji6/javascript30
Repo for managing JavaScript30 challenge by @wesbos, with some add-ons to challenges.
https://github.com/gupta-ji6/javascript30
hacktoberfest javascript javascript30 vanilla-javascript wesbos
Last synced: 5 months ago
JSON representation
Repo for managing JavaScript30 challenge by @wesbos, with some add-ons to challenges.
- Host: GitHub
- URL: https://github.com/gupta-ji6/javascript30
- Owner: gupta-ji6
- License: mit
- Created: 2019-12-03T17:16:59.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-03-02T08:56:18.000Z (about 2 years ago)
- Last Synced: 2023-03-04T09:17:59.843Z (about 2 years ago)
- Topics: hacktoberfest, javascript, javascript30, vanilla-javascript, wesbos
- Language: HTML
- Homepage: https://javascript30.ayushgupta.tech/
- Size: 4.01 MB
- Stars: 17
- Watchers: 2
- Forks: 3
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JavaScript 30 Challenge by WesBos
Participating in and completing 30 day [Vanilla JS challenge (#JavaScript30)](https://javascript30.com/) by [WesBos](https://wesbos.com/).
## Todo Challenges
- [x] 🥁 [JS Drum Kit](https://javascript30.ayushgupta.tech/01-JS-Drum-Kit/index.html)
- [x] 🕒 [JS and CSS Clock](https://javascript30.ayushgupta.tech/02-JS-CSS-Clock/index.html)
- [x] 🖼 [CSS Variables](https://javascript30.ayushgupta.tech/03-CSS-Variables/index.html)
- [x] 🕺🏻 [Array Cardio Day 1](https://javascript30.ayushgupta.tech/04-Array-Cardio-1/index.html)
- [x] 💪🏻 [Flex Panel Gallery](https://javascript30.ayushgupta.tech/04-Array-Cardio-1/index.html)
- [x] ⌨ [Type Ahead](https://javascript30.ayushgupta.tech/06-Type-Ahead/index.html)
- [x] 💃🏻 [Array Cardio Day 2](https://javascript30.ayushgupta.tech/07-Array-Cardio-2/index.html)
- [x] 🌈 [Fun with HTML5 Canvas](https://javascript30.ayushgupta.tech/08-HTML5-Canvas/index.html)
- [x] 🛠 [Dev Tools Domination](https://javascript30.ayushgupta.tech/09-Dev-Tools/index.html)
- [x] ✔ [Hold Shift and Check Checkboxes](https://javascript30.ayushgupta.tech/10-Multiple-Check-Shift/index.html)
- [x] 📽 [Custom Video Player](https://javascript30.ayushgupta.tech/11-Custom-Video-Player/index.html)
- [x] 🎊 [Key Sequence Detection](https://javascript30.ayushgupta.tech/12-Key-Sequence-Detection/index.html)
- [x] 🤜🏻 [Slide in on Scroll](https://javascript30.ayushgupta.tech/13-Slide-In-On-Scroll/index.html)
- [x] 📋 [JavaScript References vs Copying](https://javascript30.ayushgupta.tech/14-JS-Reference-Vs-Copy/index.html)
- [x] 🏪 [LocalStorage](https://javascript30.ayushgupta.tech/15-Localstorage/index.html)
- [x] 🐁 [Mouse Move Shadow](https://javascript30.ayushgupta.tech/16-Mousemove-Shadow/index.html)
- [x] 🗃 [Sort Without Articles](https://javascript30.ayushgupta.tech/17-Sort-Without-Articles/index.html)
- [x] ➕ [Adding Up Times with Reduce](https://javascript30.ayushgupta.tech/18-Add-Time-With-Reduce/index.html)
- [x] 📷 [Webcam Fun](https://javascript30.ayushgupta.tech/19-Webcam-Fun/index.html)
- [x] 🗣 [Speech Detection](https://javascript30.ayushgupta.tech/20-Speech-Recognition/index.html)
- [x] 📌 [Geolocation](https://javascript30.ayushgupta.tech/21-Geolocation/index.html)
- [x] 🔗 [Follow Along Link Highlighter](https://javascript30.ayushgupta.tech/22-Follow-Along-Link/index.html)
- [x] 💬 [Speech Synthesis](https://javascript30.ayushgupta.tech/23-Speech-Synthesis/index.html)
- [x] 🍡 [Sticky Nav](https://javascript30.ayushgupta.tech/24-Sticky-Nav/index.html)
- [x] 💭 [Event Capture, Propogation, Bubbling and Once](https://javascript30.ayushgupta.tech/25-EventCapture-Propogation-Bubbling/index.html)
- [x] 🏃🏻♂️ [Stripe Follow Along Nav](https://javascript30.ayushgupta.tech/26-Stripe-Nav/index.html)
- [x] 🎚 [Click and Drag](https://javascript30.ayushgupta.tech/27-Click-Drag-Scroll/index.html)
- [x] 📹 [Video Speed Controller](https://javascript30.ayushgupta.tech/28-Video-Speed-Controller/index.html)
- [x] ⏱ [Countdown Timer](https://javascript30.ayushgupta.tech/29-Countdown-Timer/index.html)
- [x] 🎮 [Whack A Mole](https://javascript30.ayushgupta.tech/30-Whack-A-Mole/index.html)
## Add-Ons
I have mentioned below the add-ons I added in some of the JavaScript30 projects for fun.
- ✨ * - All projects
Updated design of all projects because designing is therapeutic.
- 🥁 #1 - JS Drum Kit
Added touch & click event handling on keys
- 🕒 #2 - JS and CSS Clock
Changed size of clock hands & added a pivot in center
- 🖼 #3 - CSS Variables
Added border-radius controller
- 📽 #11 - Custom Video Player
Added FullScreen button
- 🎊 #12 - Key Sequence Detection
Added confetti options
- 🏪 #15 - LocalStorage
Added Check All, Uncheck All, Delete All buttons.
- 📷 #19 - Webcam fun
Added mirror image for video.
- 🎮 #30 - Whack A Mole
Notify user about game over.