Drum Kit
![](01 - JavaScript Drum Kit/assets/project.png)
A drum kit with 9 variations to cheer up your mood. Works with mouse click or keyboard click
JS Clock
![](02 - CSS + JS Clock/assets/project.png)
A clock which displays seconds, minutes and hours in analogue form using JavaScript
Variables
![](03 - Playing with CSS Variables and JS/assets/project.png)
Exercise to show CSS variables can be updated using JavaScript.
JS array 1
![](04 - Array Cardio Day 1/assets/project.png)
Exercise to learn more about JS array methos like map, reduce, filter, sort.
Flex Panel
![](05 - Flex Panel Gallery/assets/project.png)
A flex panel gallery is a super cool image gallery that uses CSS flexbox to make it interactive.
Cities Search
![](06 - Type Ahead/assets/project.png)
Lets users search for cities or states in India, and it suggests matching results as the user types.
JS array 2
![](07 - Array Cardio Day 2/assets/project.png)
Exercise to learn more about JS array methos like some, every, find, findIndex.
HTML Canvas
![](08 - Fun with HTML5 Canvas/assets/project.png)
Having fun with Canvas
Mailbox Select
![](10 - Hold Shift and Check Checkboxes/assets/project.png)
Select multiple mails using Shift click.
Custom Video Player
![](11 - Custom Video Player/assets/project.png)
Custom video controls and video player.
Key Sequence Detection
![](12 - Key Sequence Detection/assets/project.png)
Some magic things go on when you hit the secret key.
Slide in on Scroll
![](13 - Slide in on Scroll/assets/project.png)
Scroll to view sliding images.
Save notes
![](15 - LocalStorage/assets/project.png)
Save anything to localStorage.
Mouse Shadow
![](16 - Mouse Move Shadow/assets/project.png)
Move your mouse to move the shadow.
Sorting Challenge
![](17 - Sort Without Articles/assets/project.png)
Sort the list ignoring the article at the beginning.
Adding up Times
![](18 - Adding Up Times with Reduce/assets/project.png)
Add all times in the playlist and display it.
webcam fun
![](19 - Webcam Fun/assets/project.png)
have some fun with your webcam and download photos.
Geolocation
![](21 - Geolocation/assets/project.png)
Check your speeeeeeeeeeed and the direction you're heading in life.
follow along
![](22 - Follow Along Link Highlighter/assets/project.png)
Some smoodh transitions on hovering the links.