Vanilla Javascript 30 days Challenge


Repo collecting all the excercices/challenges from Wes Bos "30 Day Vanilla JS Coding Challenge".

Goal of this series of challenges is to get rid of every possible overhead given by libraries and framemorks and use only "pure" vanilla JavaScript.


All the excercise have been developed to specifically work on desktop or large screens, they are not meant to be viewed on mobile devices.

Day 1 - Drum Kit >>

Simple drum kit that can be played on the keaboard.


Replay button that plays back the last sequence of keyboard/drum strokes, with correct timing between each stroke.

Day 2 - Clock >>

Clock with hands showing the current time.


Show digital clock with current time and allow the user to choose from different timezones (default, Jakarta, Rome, Melbourne, New York).

Day 3 - CSS Variables >>

Explore CSS variables and how to change them through JS.

Day 4 - Array Cardio Part1 >>

Modify and extract data from arrays using .map(), .reduce(), .filter(), .sort().

Day 5 - Flex Gallery >>

Create an interactive image gallery using flxebox.

Modify and extract data from arrays using .map(), .reduce(), .filter(), .sort().

Day 6 - Ajax and Search Filter >>

Use fetch() to get a list of 1000 cities in the US and add a search by City or State funcionality.

Day 7 - Array Cardio part2 >>

Modify and extract data from arrays using .some(), .every(), .find(), .findIndex().

Day 8 - Canvas painting >>

Use HTML5 Canvas to create a fun painting brush to use with the mouse.

Day 9 - Console methods >>

A long list of not so well-known console methods and related usage. Bonus included!

Day11 - Shift multiple selection >>

Allow multiple selection of checkboxes while holding the shift-key down.

Day12 - Key sequence detection >>

Detect the correct input of the Konami code on the keyboard.

Day13 - Slide in on scroll >>

Show images on scroll down.

Day15 - LocalStorage and Event delegation >>

Write down all the presents you need to buy this Christmas and check them out once done.

The list of gifts and their status will persist after refreshing the page.

Day16 - Shadow on mouse move FX >>

Dynamic shadow effect following the mouse movement.

Day17 - Array sort >>

Simple array sort, sorting a list of bands names without considering the articles at the beginning.

Day18 - Using reduce to add up time >>

Use map and reduce on multiple elements on the page to extract the video duration, add it together and find out the total in the format HH:MM:SS.

Day22 - Links Highlighter >>

Highlight links on hover with a nice animation effect.

Day23 - Speech Synthesizer >>

Speech Synthesizer turning text into speech, using HTML5 speechSynthesis API. Change rate, text, pitch and language!

Day24 - Sticky Nav >>

Sticky navigator that starts at the bottom of the header and becomes sticky after scrolling, with Logo slide-in animation.

Day26 - Follow along dropdown >>

Navigator with dropdowns with smooth onhover animation, moving from one to the other.

Day27 - Click-and-drag to scroll >>

Smooth click&drag effect. Experimenting with 3D perspective.

Day28 - Video Speed Controller >>

Hover on the speed controller bar to change the video speed in real time.


Change the speed of the video using three methods: hover on speed bar, mouse wheel, left and right keyboard keys.

Day29 - Countdown Clock >>

Manage your time with this useful countdown clock. Add predefined chunk of times to your countdown or add custom amounts. Don't ever be late again!

Day30 - Whack-a-mole! >>

Play against the moles and hit as many as you can! You have 10 seconds!