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

Amine Pics GeneratorHTML, CSS & JavaScript Project

Amine Pics Generator project preview

Project Description

Our project involves building an anime picture generator that enables users to fetch a random anime picture and its name. The final version of the project features a button that retrieves data from an API, presenting a random anime picture and its name when clicked. Whenever the 'Get anime' button is clicked, we observe a loading effect first, followed by a new picture with a random name. Throughout the project, we will master the use of APIs to fetch data using the try and catch method. We will learn how to apply a loading effect to the page while waiting for data to load. Furthermore, we will develop our CSS skills by designing a beautiful UI, including the background color of the page.

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

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
New

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
Weight Converter project preview
New

Weight Converter

Let's create a weight converter project that converts pounds to kilograms. The webpage features an input field where users can enter a weight in pounds, and the webpage automatically displays the equivalent weight in kilograms. After 10 seconds, the result is removed, and the input field is emptied using the 'set time out' method. We've also incorporated an error handling feature to handle negative input numbers. If the user enters a negative number, the webpage displays an error message, "Please enter a valid number." We'll learn how to handle error situations and remove the error message after two seconds using an event listener for the input field. The event listener will call a function that performs the desired actions.

HTMLCSSJavaScript
View Project
View All Projects