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.
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.
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).
Explore CSS variables and how to change them through JS.
Modify and extract data from arrays using .map(), .reduce(), .filter(), .sort()
Create an interactive image gallery using flxebox.
Use fetch() to get a list of 1000 cities in the US and add a search by City or State funcionality.
Modify and extract data from arrays using .some(), .every(), .find(), .findIndex()
Use HTML5 Canvas to create a fun painting brush to use with the mouse
A long list of not so well-known console methods and related usage. Bonus included!
Play, pause, toggle fullscreen, change speed and volume and skip 10 seconds ahead or back. Everything with the native HTML5 browser video api.
Detect the correct input of the Konami code on the keyboard.
Show images on scroll down.
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.
Dynamic shadow effect following the mouse movement.
Simple array sort, sorting a list of bands names without considering the articles at the beginning.
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.
Highlight links on hover with a nice animation effect.
Speech Synthesizer turning text into speech, using HTML5 speechSynthesis API. Change rate, text, pitch and language!
Sticky navigator that starts at the bottom of the header and becomes sticky after scrolling, with Logo slide-in animation.
Navigator with dropdowns with smooth onhover animation, moving from one to the other.
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!