JS
100
Projects.com
HomeAbout
All Projects
JS
100

Projects

.com

Elevate your web development skills with our comprehensive collection of 100+ interactive JavaScript projects. From beginner-friendly tutorials to advanced challenges.

100+
Projects
75K+
Developers
Free
Forever

Quick Links

HomeAll ProjectsAboutContact

Connect

GitHub
View source code
Buy me a coffee
Support the project

© 2025 100 JS Projects. Crafted with ❤️ for developers worldwide.

PrivacyTermsCookiesContact
Project Details

Social Media Selector MenuHTML, CSS & JavaScript Project

Social Media Selector Menu project preview

Project Description

We'll create a social media selector menu that displays social media text and icons. As we click on the menu, we'll see a list of social media, and each will have a hovering effect. When we click on an icon, such as Facebook or YouTube, the social media text will change accordingly. The icons will also rotate as we open or close the menu. Finally, clicking on any icon will make the menu disappear. We'll learn how to toggle classes and change the appearance of the website using these methods. This project is ideal for those who want to enhance their CSS and JavaScript skills while creating an attractive social media menu.

Technologies Used

HTML5CSS3JavaScript

Live Demo

Experience the project in action with our interactive live demo.

View Live Demo

Source Code

Explore the complete source code and learn how it's built.

View on GitHub
Related Projects

Explore Similar Projects

Continue your learning journey with these handpicked projects that share similar concepts and technologies

Pomodoro Timer project preview

Pomodoro Timer

The objective of this project is to design a Pomodoro timer that features a countdown clock and three functional buttons, namely start, stop, and reset. Upon clicking the start button, the timer will commence counting down from 25 minutes. Should one desire to halt the countdown, the stop button can be pressed. The countdown can be resumed by hitting the start button, and by clicking on the reset button, the timer will reset to 25 mins again. An alert will notify the user when the timer reaches zero. This Pomodoro timer is an ideal tool for individuals seeking to focus on a task for a set amount of time, followed by a break. By implementing this technique, productivity and time management skills can be improved. To create this timer, one must initially grasp the principles of CSS for styling purposes. Next, event listeners will be added to the buttons using JavaScript. Finally, a timer will be established using the SetInterval function in JavaScript.

HTMLCSSJavaScript
View Project
Age Calculator project preview

Age Calculator

In this project, we are going to create an age calculator. As you can see from the final version of the project, we have a container here with the title age calculator with an input of a date. If we click on the date input, we can choose the date of our birthday. For example, if we choose a date in in 2022 and if we click now on Calculate Age, you can see the age is calculated based on this date and saying your age is 21 years old.

HTMLCSSJavaScript
View Project
Rock Paper Scissors Game project preview
Popular

Rock Paper Scissors Game

In this project, we create a rock, paper, and scissors game. The computer will also choose a random option, and the results will be displayed. You can win, lose, or tie. Scores are tracked at the bottom. We'll use HTML for structure, CSS for a modern look, and JavaScript to generate the computer's choice and compare the results. This game is an interactive way to test your luck and strategy against a computer opponent.

HTMLCSSJavaScript
View Project
View All Projects