JS30projects
It’s just 30 small VANILLA JS projects I’ve done for some learning and practice of skills and also showcase them.
No Frameworks × No Compilers × No Libraries × No Boilerplate.
They are fun and quite creative! I followed a 30-days challenge coding made by Wes Bros.
If you are interested on doing the same, check his website out!
What have I practiced or learned?
TL;DR In a few words: Webcam API, Speech Detection and Synthesis API, HTML5 audio and video API controls, CSS tricks, JS ES6+, DOM Manipulation, Regular Expressions, HTML Canvas and so on.
Let’s cut to the chase right way!
Following below I present a short description for each project and link each one with my own solutions. I may have done a little bit more work than asked on a few of them.
They are HTML files and can be viewed directly in the browser. So, use the Devtools of your favourite browser for checking the code and any output they may produce in the console.
Check it out!
JS Drum Kit
It renders a keyboard that plays different sounds which works like a drum by pressing a set of keys. Here it uses HTML data attribute to map and match keys with their respective audio and event listener to play/stop sounds and CSS transitions.
CSS + JS CLOCK
A digital and analog clock made with CSS and JS. There are manipulation of CSS transform, transition, rotation and JS date type and HTML text content.
Scoped CSS Variables and JS
Play with CSS Variables using JS and HTML input controls such as range and color picker.
Array Cardio Day 1
Prints on console friendly tables with data manipulated by using Array methods such as filter, map, sort, reduce.
Flex Panel Gallery
Click on each panel to enlarge and slide new words into it. It uses Flexbox and transitions.
Type Ahead
A search input that displays results from a fetched JSON file and it uses Regular Expressions to filter and format them.
Array Cardio Day 2
See console in this one too. There is more array manipulation using methods such as some, every, find and findIndex. I use 3 different ways to delete one element from an array.
Fun with HTML5 Canvas
Click and drag mouse to draw lines that enlarge and change color. There are Canvas methods for drawing, some mouse event listeners to handle and CSS color manipulation using HSL attribute and, of course, Javascript.
DevTools Domination
See console. Usage of different console methods for data presentation, grouping, counting, timing and also interpolation of variables.
Hold shift and Check Checkboxes
Check a list item and then hold shift and check another one either below or above it and everything between should also be set to checked. No libraries, just vanilla JS.
Custom video player
It replaces browser video player controls by a Custom one. HTML5 video methods are used to build out functions for each custom control which is hooked up with an event listener.
Key Sequence Detection
See console. Here each pressed key shows it up on console and also it is added up to an array. Then, it’ll be checked if it matches with a four-digit secret code. Yeah, there is a Secret Code that makes something secret, huh?! Would like to find out what it does? Don’t tell anybody that I told you, but you can see what is the secret code on the source code. Enjoy!
Slide In on Scroll
Images slide in on page scroll when half of their occupied space is shown. It uses CSS transform and transition, simple math calculation with scroll and offsets, setTimeout and toggle CSS class.
Javascript References VS Copying
See console. Learn about difference between working with references and copies on arrays and objects. It presents ways of copying them, even Deep Clone of objects without using any library like lodash.
LocalStorage
It’s a list of order items you can add a plate (or really anything) you want. It stores items on LocalStorage. Learn how to set and get values.
Mouse Move Shadow
A nice shadow effect! CSS shadow moves according to mouse direction using simple math calc.
Sort without articles
It uses Regular Expression and replace, trim, sort methods to print a Band list sorted alphabetically but ignoring articles.
Adding up Times with reduce
See console. There is a list of video duration times and it uses map and reduce methods to get the total duration of the entire video list.
Webcam Fun
You can play with RGB color of your webcam using range controls and take photos.
Speech detection
It uses SpeechRecognition API to collect voice data from your computer mic and displays the transcript on the page while you speak and if it recognizes you saying ‘clima’ then responds ‘Obtendo clima!’ on console.
Follow along link highlighter
A fancy highlight effect. It uses event listener on ‘mouseenter’ to highlight links by translating a span element on the same coordinates and with same size.
Speech Synthesis
Choose one of synthetic voices from a dropdown list, set the pitch and rate, write something and have fun!
Sticky nav
Yes, one can stick any element using CSS ‘position: sticky’ on scroll albeit here it uses JS to get a navbar fixed at the top of page while scrolling AND allow more stuffs to happen at the same time like sliding a logo into navbar from the left and out. Cool, huh?
Event Capture, Propagation, Bubbling and Once
Understanding everything about event capture.
Stripe follow along nav
Such a cool dropdown menu effect. It’s quite similar to the ‘follow along link highlighter’ but instead you get dialog ballons that changes shape to fit their content.
Click and drag
Just click and drag to move a slider of items. It handles mouse events and scrolling.
Video speed controller
Click and drag on controller sidebar to adjust playback speed rate.
Countdown timer
That’s it. A countdown timer you can set up from a few choices or just input a desirable amount of time.
Whack a Mole
You know this game, right? If don’t, just get a hammer and smash your computer… I mean, a mole! And forget the hammer, just use your mouse and try clicking at the mole to score a hit! In this project there is Math.random to handle what hole and time a mole appears, and avoid cheaters to score without making real mouse clicks by checking the event attribute isTrusted.
That’s all, folks! I hope you enjoyed all of them and learned something from their code. If you would like to try making them yourself, don’t forget to check Wes Bros 30-days challenge coding.