javascript_30Days_Challenge

Javascript 30 days challenge

• Day 1 : Creating a Drum Kit
• Day 2 : Creating a Clock
• Day 3 : CSS variables with JS
• Day 4 : Array cardio 1
• Day 5 : Flex Panel
• Day 6 : Ajax Type ahead
• Day 7 : Array cardio 2
• Day 8 : HTML5 canvas
• Day 9 : Dev Tools
• Day 10 : Hold Shift and check checkboxes
• Day 11 : Custom Video player
• Day 12 : Key sequence detection
• Day 13 : Slide in on scroll
• Day 14 : JS references VS Copying
• Day 15 : LocalStorage
• Day 16 : Mouse Move Shadow
• Day 17 : Sort without Articles
• Day 18 : Adding up times with Reduce
• Day 19 : Webcam fun ;)
• Day 20 : Speech detection
• Day 21 : Geolocation
• Day 22 : Follow along link highlighter
• Day 23 : Speech synthesis
• Day 24 : Sticky nav
• [] Day 25 : Event capture, propagation, bubbling and once
• [] Day 26 : Stripe follow along nav
• [] Day 27 : Click and Drag
• [] Day 28 : Video speed controller
• [] Day 29 : Countdown timer
• [] Day 30 : Whack a Mole

Day 1 : Creating a drum kit on a static web page

When you are pushing on a key from your keyboard, a sound is being played.

Day 2 : Creating a clock using CSS and JS

A clock is ticking time

Day 3 : Creating an image which could be modified with Javascript

When you are moving / selecting value, the image is modified according to.

Day 4 : Working with filter(), map(), sort() as well as reduce() methods

Playing with methods into browser's console

Day 5 : Creating a CSS panel

Playing with div and CSS to get an interactive landing page

Day 6 : Creating a cities' searchable library

Using a JSON and JS to create a page on which a word searched gets suggestions while typing it on a text box

Day 7 : Working with some(), every(), find(), findIndex() in array

Playing with method's into browser's console (Redux method inside)

Day 8 : Creating a canvas which draws when mouse is clicked down

Day 9 : Playing with console tricks

Dealing with console tips

Day 10 : Playing with checkboxes

Creating a list which is clickable

Day 11 : Creating an HTML5 video player

Dealing with all video players options

Day 12 : Creating a KONAMI CODE like

When a code is found "greg" a unicorn appears on screen

Day 13 : Make appear / desappear images when scrolling

When scrolling, images appear / desappear depending on its window's position

Day 14 : Dealing with reference vs copy in JS

Working with several ways to copy an array / object when we don't want a reference on it

Day 15 : Creating a persisting list of items which can be checked / unchecked

An empty array is created. When adding an item, it is added to the array which persist even after browser refresh. Items can be checked / unchecked.

Day 16 : Creating CSS text shadow mouse move effet

When moving mouse cursor, text shadow is dynamically changing

Day 17 : Sorting names without articles

Looking to sort array's elements without articles (a, an, the) to get sorting relevant.

Day 18 : Array into time

Day 19 : Creating a Photo Booth with webcam

Day 20 : Creating a voice speech recognition

Webkit coded in french. When speaking the browser type the words down. Each pause in the speech is represented by a new paragraph

Day 21 : Creating a compass with accelerometer

If user allow geolocation, fetch datas to get speed as well as direction

Day 22 : Creating a follow along highlighter

Highlight links when mouse overring

Day 23 : Creating a speech analysis

![screenshot] ()

Day 24 : Creating a sticky navbar when window reach a certain point of the window