Supercharge your GitHub profile with 30 cool JavaScript projects

The Coding Mermaid ๐Ÿงœโ€โ™€๏ธ - Jan 29 - - Dev Community

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.

flex javascript

๐Ÿ“… 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

๐Ÿ“… 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

๐Ÿ“… 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

Buy Me a Coffee at ko-fi.com

. . . . . . . . . . . . . . . . . . . . .