JavaScript30

About

A 30 Days Javascript Challenge following #Javascript30 by @wesbos.

• Pure JS
• No Frameworks
• No Compilers
• No Boilerplate
• No Libraries.

30 Days of Code

Note: Original Commits from Jan 16, 2020 to Feb 14, 2020.

Day-1 🔗

Title : Instrumental
Description : Detecting key pressed and performing related action assigned to it.
Files: HTML JS
References :

• querySelector()
• classList
• if..else
• keydown()
• setTimeout()
• addEventListener()

Day-2 🔗

Title : Clock
Description : Update CSS elements using JS to rotate clock hands.
Files: HTML JS
References :

• Date()
• Style transform Property
• setInterval()

Day-3 🔗

Title : Playing with CSS
Description : Changing image properties by playing with different params.
Files: HTML JS
References :

• querySelectorAll()
• forEach()
• setProperty()
• DOMContentLoaded

Day-4 🔗

Title : Array Cardio - I
Description : Playing with arrays in JS.
Files: HTML JS
References :

• console
• const
• arrays in JS
• filter()
• map()
• reduce()
• sort()
• split()

Day-5 🔗

Title : Flex Gallery
Description : Update CSS flex behaviour with JS.
Files: HTML JS
References :

• length
• classList
• events

Day-6 🔗

Title : Search it with JS
Description : Dynamica Search results
Files: HTML JS
References :

• fetch()
• then()
• json()
• Object.entries()
• RegExp()
• match()
• push()
• replace()
• join()
• innerHTML
• change
• keyup

Day-7 🔗

Title : Array Cardio - II
Description : Playing with arrays in JS.
Files: HTML JS
References :

• console.log()
• console.table()
• some()
• every()
• find()
• findIndex()
• slice()
• splice()

Day-8 🔗

Title : Draw on Canvas
Description : Canvas to draw the masterpiece.
Files: HTML JS
References :

• canvas
• getContext()
• beginPath()
• moveTo()
• lineTo()
• stroke()

Day-9 🔗

Title : Console Tricks!
Description : Playing with Javascript inbuilt functions.
Files: HTML JS
References :

• console.clear()
• console.log()
• console.warn()
• console.error()
• console.info()
• console.assert()
• console.dir()
• console.groupCollapsed()
• console.groupEnd()
• console.count()
• console.time()
• console.timeEnd()

Day-10 🔗

Title : Shift to Check Multiple Checkboxes
Description : Handling pressed key and mouse event.
Files: HTML JS
References :

• KeyboardEvent.shiftKey
• checked

Day-11 🔗

Title : Custom Video Player
Description : Redefining Video Controls handled using JS.
Files: HTML JS
References :

• click
• play
• pause
• timeupdate
• mousemove
• mousedown
• mouseup

Day-12 🔗

Title : Konami Code
Description : Detecting user input words and the magic happens.
Files: HTML JS
References :

• cornify
• includes
• try..catch

Day-13 🔗

Title : Slide in on Scroll
Description : Image effect based on Scroll.
Files: HTML JS
References :

• window
• scroll
• scrollY
• innerHeight

Day-14 🔗

Title : References VS Copying
Description : Playing with JS datatypes.
Files: HTML JS
References :

• let
• concat
• Spread (...)
• Object
• Object.assign()
• JSON
• JSON.parse()
• JSON.stringify

Day-15 🔗

Title : LocalStorage
Description : Playing with local storage.
Files: HTML JS
References :

• submit
• localStorage
• getItem()
• setItem()
• reset()
• matches()
• return

Day-16 🔗

Title : Mouse Shadow
Description : Effect based on mouse position.
Files: HTML JS
References :

• offsetLeft
• offsetTop
• Math
• round()

Day-17 🔗

Title : Sort Without Articles
Description : Sorting list.
Files: HTML JS
References :

• getElementsByClassName()
• trim()

Day-18 🔗

Title : Adding Up Times with Reduce
Description : Simple time addition using map-reduce.
Files: HTML JS
References :

• var
• Conditional (ternary) operator '?'
• floor()
• parentNode

Day-19 🔗

Title : Webcam Fun
Description : Lets play with camera and colour.
Files: HTML JS
References :

• navigator
• mediaDevices
• getUserMedia()
• drawImage()
• putImageData()
• toDataURL()
• setAttribute()
• insertBefore()
• canplay

Day-20 🔗

Title : Speech Detection
Description : Speech to Text.
Files: HTML JS
References :

• SpeechRecognition
• webkitSpeechRecognition
• recognition.start()
• recognition.interimResults
• createElement()
• appendChild()
• end

Day-21 🔗

Title : Geolocation
Description : Getting current location and speed.
Files: HTML JS
References :

• navigator.geolocation
• watchPosition()
• speed
• heading
• latitude
• longitude

Day-22 🔗

Title : Follow Along Nav
Description : Tracking mouse.
Files: HTML JS
References :

• mouseenter
• scrollX
• getBoundingClientRect()

Day-23 🔗

Title : Speech Synthesis
Description : Text to Speech.
Files: HTML JS
References :

• SpeechSynthesisUtterance()
• speak()

Day-24 🔗

Title : Sticky Nav
Description : Fancy navbar.
Files: HTML JS
References :

• classList.add()
• classList.remove()

Day-25 🔗

Title : Understanding JavaScript's Capture
Description : Understand the displayed layout.
Files: HTML JS
References :

• addEventListener - capture
• addEventListener - once
• stopPropagation()

Day-26 🔗

Title : Follow Along Nav
Description : Fancy navbar menu.
Files: HTML JS
References :

• mouseleave

Day-27 🔗

Title : Click and Drag
Description : Visualiser.
Files: HTML JS
References :

• pageX

Day-28 🔗

Title : Video Speed Scrubber
Description : Playing with playback Speed.
Files: HTML JS
References :

• pageY
• offsetTop
• offsetHeight
• toFixed()

Day-29 🔗

Title : Countdown Timer
Description : Utility Tool to take a break from work.
Files: HTML JS
References :

• clearInterval()
• Date.now()
• getHours()
• getMinutes()
• preventDefault()

Day-30 🔗

Title : Whack A Mole!
Description : Samll Fun Game.
Files: HTML JS
References :

• random()
• event.isTrusted