Start
30 Day Challenge

Use plain Vanilla JavaScript to build something on each day.
01
Drum Kit

Use Audio Tag and Keyboard Events to play the sounds.
02
Clock

Use setInterval Function and CSS transform to simulate a clock.
03
CSS Variables

Use setProperty Function to play with CSS Cariables.
05
Flex Panel Gallery

Use Flex Layout and Transitionend event to create animation.
06
City Filter

Use Fetch and Array Filter to find the match cites.
08
Rainbow Canvas

Use Canvas Tag and Mouse Events to draw.
10
Multi-Select

Use checkBox and shiftKey to simulate multiple selection.
11
Video Control

Use Video Tag to play, pause, skip, adjust volume/speed/fullscreen to the video.
13
Images Slide-in

Use Scroll Event
and Element Vertical Position
to create the slide-in animation.

16
Mouse Shadow

Use Mouse Event
and Element Position
to add dynamic shadow effect.
20
Speech Detection

Use SpeechRecognition
and Result Event
to detect and write the speech.
23
Speech Synthesis

Use SpeechSynthesisUtterance
to generate speech from text.
24
Sticky Nav Bar

Use CSS Fixed Position
to create a smooth sticky navigation bar.
26
Follow Along Focus

Use Mouse Events
and CSS classes
to animate a follow along dropdown background.
27
Click and Drag

Use Mouse Events
and Element scrollLeft Property
to acheive a horizontal drag scroll.
29
Cowndown Timer

Use setInterval Function
and Date Object
to create a custom timer.
30
Whrack A Mole

Use Math.random Function
and setTimeout Function
to peep on random time and random hole.

JavaScript 30

This is a coding challenge given by the amazing WesBos. The course can be found here.

My demo excludes excercises that are not presentable. You can find all my solutions on GitHub.