Supercharge your GitHub profile with 30 cool JavaScript projects

Finished your course and now what?🤔

You are in the job interview process and would like to have more projects to show on your GitHub?

Then I leave you here the awesome 30 Day Vanilla JS Coding Challenge by Wes Bos

Projects that you will build:

📅 Day 1: JavaScript Drum Kit

Build a drum kit using JavaScript and HTML5 audio.

📅 Day 2: CSS + JS Clock

Build a CSS and JavaScript clock that shows the current time.

📅 Day 3: Playing with CSS Variables and JS

Explore CSS variables and how you can use them with JavaScript.

📅 Day 4: Array Cardio Day 1

Practice your array skills by solving an array-related challenge.

📅 Day 5: Flex Panels Image Gallery
Create an image gallery using Flexbox and JavaScript.

📅 Day 6: Ajax Type Ahead

Build a type-ahead search feature using Ajax and JavaScript.

📅 Day 7: Array Cardio Day 2

Continue practicing your array skills by solving another array-related challenge.

📅 Day 8: Fun with HTML5 Canvas

Learn how to use HTML5 Canvas to create a simple drawing app.

📅 Day 9: 14 Must Know Dev Tools Tricks

Discover 14 essential developer tools tricks that can save you a lot of time.

📅 Day 10: Hold Shift to Check Multiple Checkboxes

Enable the "Hold Shift to Check Multiple Checkboxes" feature using JavaScript.

📅 Day 11: Custom HTML5 Video Player

Build a custom HTML5 video player with various features.

📅 Day 12: Key Sequence Detection (KONAMI CODE)

Detect key sequences using JavaScript, including the Konami Code.

📅 Day 13: Slide In on Scroll

Make elements slide in smoothly as the user scrolls down the page.

📅 Day 14: Object and Arrays - Reference VS Copy

Learn the difference between reference and copy when working with objects and arrays.

📅 Day 15: LocalStorage and Event Delegation

Store data in LocalStorage and learn about event delegation.

📅 Day 16: CSS Text Shadow Mouse Move Effect

Create a CSS text shadow that follows the mouse as it moves across the page.

📅 Day 17: Sorting Band Names without articles

Sort an array of band names, removing articles like "a" and "the".

📅 Day 18: Tally String Times with Reduce

Count the occurrences of each letter in a string using the reduce() method.

📅 Day 19: Unreal Webcam Fun

Use the webcam to create fun effects, such as a mirror effect.

📅 Day 20: Native Speech Recognition

Use the native speech recognition API to recognize speech and convert it to text.

📅 Day 21: Geolocation based Speedometer and Compass

Create a speedometer and compass based on the user's geolocation data.

📅 Day 22: Follow Along Links

Create a page with links that smoothly follow the user's mouse as they move.

📅 Day 23: Speech Synthesis
Learn how to make a speech synthesis app that converts a written text to digital voice.

📅 Day 24: Sticky Nav
Create a sticky navigation bar that stays fixed at the top of the page as the user scrolls down.

📅 Day 25: Event Capture, Propagation, Bubbling and Once
Understand the different event flow mechanisms, including capture, propagation, bubbling and once.

📅 Day 26: Strip follow along Dropdown
Create a follow-along dropdown

📅 Day 27: Click and drag to scroll
Implement drag-to-scroll functionality that allows users to scroll through a page by dragging their mouse.

📅 Day 28: Video Speed Controller UI
Build a video speed controller that allows users to adjust the playback speed of a video.

📅 Day 29: Countdown Clock

Create a countdown clock that displays a timer and indicates how much time is left until a specific event occurs.

📅 Day 30: Whack a Mole Game
Have fun developing a simple whack-a-mole game while getting familiar with setTimeout.

---

If you liked my post, please consider to Buy me a coffee ❤️
I will be truly happy to continue posting with your support

Comments

[Anglebert Ish]

cool