30 Day Vanilla JS Coding Challenge by Wes Bos
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
Day1 - Drum Kit
Day10 - HTML5 custom video player
Day11 - Shift multiple selection
Day12 - Key sequence detection
Day13 - Slide in on scroll
Day15 - LocalStorage and Event delegation
Day16 - Shadow on mouse move FX
Day17 - Array sort
Day18 - Using reduce to add up time
Day2 - Clock
Day22 - Links Highlighter
Day23 - Speech Synthesizer
Day24 - Sticky Nav
Day26 - Follow along dropdown
Day27 - Click-and-drag to scroll
Day28 - Video Speed Controller
Day29 - Countdown Clock
Day3 - CSS variables
Day30 - Whack-a-mole!
Day4 - Array Cardio part1
Day5 - Flex gallery
Day6 - Ajax and Search filtering
Day7 - Array Cardio part2
Day8 - Canvas painting
Day9 - console methods


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.

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.

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!

Day 11 - HTML5 custom video player >>

Play, pause, toggle fullscreen, change speed and volume and skip 10 seconds ahead or back. Everything with the native HTML5 browser video api.

Day 12 - Konami Code key sequence detector >>

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

Day 13 - Slide in on scroll >>

Show images on scroll down.

Day 15 - 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.

Day 16 - Shadow on mouse move FX >>

Dynamic shadow effect following the mouse movement.

Day 17 - Array sort >>

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

Day 18 - 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.

Day 22 - Links Highlighter >>

Highlight links on hover with a nice animation effect.

Day 23 - Speech Synthesizer >>

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

Day 24 - Sticky Nav >>

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

Day 26 - Follow along dropdown >>

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

Day 27 - Click-and-drag to scroll >>

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

[Day 28 - Video Speed Controller >>](https://www.nicolaferracin.com/projects/javascript30/Day28 - Video Speed Controller/index.html)

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.

[Day 29 - Countdown Clock >>](https://www.nicolaferracin.com/projects/javascript30/Day29 - Countdown Clock/index.html)

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!

[Day 30 - Whack-a-mole! >>](https://www.nicolaferracin.com/projects/javascript30/Day30 - Whack-a-mole!/index.html)

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