A 30 Days Javascript Challenge following #Javascript30 by @wesbos.
- Pure JS
- No Frameworks
- No Compilers
- No Boilerplate
- No Libraries.
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 :
Day-2 🔗
Title : Clock
Description : Update CSS elements using JS to rotate clock hands.
Files: HTML JS
References :
Day-3 🔗
Title : Playing with CSS
Description : Changing image properties by playing with different params.
Files: HTML JS
References :
Day-4 🔗
Title : Array Cardio - I
Description : Playing with arrays in JS.
Files: HTML JS
References :
Day-5 🔗
Title : Flex Gallery
Description : Update CSS flex behaviour with JS.
Files: HTML JS
References :
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 :
Day-8 🔗
Title : Draw on Canvas
Description : Canvas to draw the masterpiece.
Files: HTML JS
References :
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 :
Day-11 🔗
Title : Custom Video Player
Description : Redefining Video Controls handled using JS.
Files: HTML JS
References :
Day-12 🔗
Title : Konami Code
Description : Detecting user input words and the magic happens.
Files: HTML JS
References :
Day-13 🔗
Title : Slide in on Scroll
Description : Image effect based on Scroll.
Files: HTML JS
References :
Day-14 🔗
Title : References VS Copying
Description : Playing with JS datatypes.
Files: HTML JS
References :
Day-15 🔗
Title : LocalStorage
Description : Playing with local storage.
Files: HTML JS
References :
Day-16 🔗
Title : Mouse Shadow
Description : Effect based on mouse position.
Files: HTML JS
References :
Day-17 🔗
Title : Sort Without Articles
Description : Sorting list.
Files: HTML JS
References :
Day-18 🔗
Title : Adding Up Times with Reduce
Description : Simple time addition using map-reduce.
Files: HTML JS
References :
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 :
Day-22 🔗
Title : Follow Along Nav
Description : Tracking mouse.
Files: HTML JS
References :
Day-23 🔗
Title : Speech Synthesis
Description : Text to Speech.
Files: HTML JS
References :
Day-24 🔗
Title : Sticky Nav
Description : Fancy navbar.
Files: HTML JS
References :
Day-25 🔗
Title : Understanding JavaScript's Capture
Description : Understand the displayed layout.
Files: HTML JS
References :
Day-26 🔗
Title : Follow Along Nav
Description : Fancy navbar menu.
Files: HTML JS
References :
Day-27 🔗
Title : Click and Drag
Description : Visualiser.
Files: HTML JS
References :
Day-28 🔗
Title : Video Speed Scrubber
Description : Playing with playback Speed.
Files: HTML JS
References :
Day-29 🔗
Title : Countdown Timer
Description : Utility Tool to take a break from work.
Files: HTML JS
References :
Day-30 🔗
Title : Whack A Mole!
Description : Samll Fun Game.
Files: HTML JS
References :