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!
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.
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.
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.
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.
Play with CSS Variables using JS and HTML input controls such as range and color picker.
Prints on console friendly tables with data manipulated by using Array methods such as filter, map, sort, reduce.
Click on each panel to enlarge and slide new words into it. It uses Flexbox and transitions.
A search input that displays results from a fetched JSON file and it uses Regular Expressions to filter and format them.
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.
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.
See console. Usage of different console methods for data presentation, grouping, counting, timing and also interpolation of variables.
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.
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.
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!
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.
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.
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.
A nice shadow effect! CSS shadow moves according to mouse direction using simple math calc.
It uses Regular Expression and replace, trim, sort methods to print a Band list sorted alphabetically but ignoring articles.
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.
You can play with RGB color of your webcam using range controls and take photos.
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.
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.
Choose one of synthetic voices from a dropdown list, set the pitch and rate, write something and have fun!
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](./25 - Event Capture, Propagation, Bubbling and Once/ "view")
Understanding everything about event capture.
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.
Just click and drag to move a slider of items. It handles mouse events and scrolling.
Click and drag on controller sidebar to adjust playback speed rate.
That's it. A countdown timer you can set up from a few choices or just input a desirable amount of time.
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.