100JSProjects
ProjectsExplore all projects
100JS_WORKSPACE/Build · Learn · Repeat
100JSProjects

Practical HTML, CSS, and JavaScript projects designed to help you turn concepts into real skills—one build at a time.

01Explore

./All projects./About./Contact./Privacy

02Resources

./GitHub repository./Support the project

© 2026 100 JS Projects. Built for developers.

TermsCookiesContact
JS// Project Details

Feedback UIHTML, CSS & JavaScript Project

HTML5CSS3JavaScript
PROJECT_PREVIEW
Feedback UI project preview
Live preview availableReady
README.mdProject overview

Project Description

In this project, we're creating a UI that allows users to give feedback by selecting from three ratings: unhappy, neutral, and satisfied, each with a hovering effect. Upon selecting a rating, it becomes active and changes background color. If the user refreshes the page, they can choose another rating, and the feedback section updates accordingly. To create this UI, we'll install the project with its design, add a background color, and create a container with a box shadow. Using JavaScript, we'll add and remove a class to activate a rating and add an event listener to the "send review" button, triggering a function that displays the inner text of each rating in the feedback section.

Technologies Used

HTML5CSS3JavaScript
Preview

Live Demo

Experience the project in action with our interactive live demo.

View Live Demo
Repository

Source Code

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

View on GitHub
JS// Related Projects

Keep Building with Similar Projects

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

Pomodoro Timer project preview
HTMLCSSJavaScript

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.

View project
Recipe Book App project preview
HTMLCSSJavaScript

Recipe Book App

In this project, we're developing a recipe book application that features a variety of recipes obtained through a free recipe API. We need an API key to access this API. Each time the page is refreshed, a new set of recipes with distinct ingredients will be displayed. Additionally, a link is provided to access the recipe website.

View project
Weight Converter project preview
HTMLCSSJavaScript

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.

View project
{ }View All Projects