Supercharge your GitHub profile with 30 cool JavaScript projects
Tags: webdev, javascript, beginners, tutorial
Published: 2024-01-29 15:41:17

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 ](https://javascript30.com/)

## 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.


![flex javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wje4eooqtz7wy415mba9.png)

**📅 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.


![javascript text animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1bcnbnpff9wg6cyd4kv7.png)

**📅 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 


![Click and drag to scroll](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6v8mujwdyvvcpap3k1i.png)

**📅 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.
<hr/>

If you liked my post, please consider to Buy me a coffee ❤️
I will be truly happy to continue posting with your support
<br/><a href='https://ko-fi.com/R6R8D4H75' target='_blank'><img height='36' style='border:0px;height:36px;' src='https://cdn.ko-fi.com/cdn/kofi3.png?v=3' border='0' alt='Buy Me a Coffee at ko-fi.com' /></a><br/>