10 Basic JavaScript Projects in 1 Hour

This is a challenge/video from Florin Pop,

where he tries to make 10 basic javascript projects, that are essential(?) to any website, in an hour. And he succeeeds. I tried doing the same, but in my case, I ended up taking 2 hours :P

Hamburger Button/Menu

Hamburger Menu. An essential part of any modern website. When clicked, this button brings in a menu from the right side, with a smooth animation.

hamburger menu

Toast Notification

Toast Notifications notify the user of a system occurrence. The notifications should have a consistent location in each application. In this case, they appear from the bottom-right of the page.

popup

Auto Write Text

This is a cool animation that can work well with any kind of website. It gives the effect that a sentence is being typed when you visit the webpage.

popup

Popup (Modal)

Popups/Modals are everywhere. When a website asks you for your consent on saving cookies to when you click on the login button. This is little different, as in, it just has text, but a popup nonetheless.

a button that says 'open'

Heart Rain

This is just a silly little animation thingy. Might be useful, might not be. Depends on the type of website.

Hearts falling

Background Color Change

This background color changing button brings in a little different interactivity. I don't think it would be practical to have it in a real, professional website. But it's still cool.

a button that says 'Change Background'

Light/Dark Theme Toggle

Having both light and dark modes on your website is the norm these days. This is a basic theme toggle.

The Ideals of the Knights Radiant

Carousel

A carousel is something or a slideshow for cycling through an array of images. This is a basic representation of one.

A laptop on a table

Sound Board

Getting audio feedback when interacting with a website can look very good on a website. This Sound Board plays various sounds that instruments.

buttons representing different sounds

Zoom Effect

Zoom effect is essential these days for ecommerce websites - hovering on images and seeing them zoomed in. This is a basic representation of that.

mountain range with a river on its foot