Our project involves creating a feedback section with emoji ratings using JavaScript and Font Awesome. The final version of this project will display an emoji and five stars on the screen. When we click on different stars, the color of the previous stars will change accordingly. We will achieve this functionality by using JavaScript to update the star ratings and change the emojis in real-time.
Create these three files, copy the code into each one, then open index.html with Live Server.
emoji-rating/ ├── index.html ├── style.css └── index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Emoji Rating</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css"
integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="feedback-container">
<div class="emoji-container">
<i class="far fa-angry fa-3x"></i>
<i class="far fa-frown fa-3x"></i>
<i class="far fa-meh fa-3x"></i>
<i class="far fa-smile fa-3x"></i>
<i class="far fa-laugh fa-3x"></i>
</div>
<div class="rating-container">
<i class="fas fa-star fa-2x active"></i>
<i class="fas fa-star fa-2x"></i>
<i class="fas fa-star fa-2x"></i>
<i class="fas fa-star fa-2x"></i>
<i class="fas fa-star fa-2x"></i>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
Continue your learning journey with these handpicked projects that share similar concepts and technologies
In this project, our aim is to build a modern tip calculator. The project's primary interface comprises a container labeled "Tip Calculator" with two input fields: one for the bill amount and the other for the tip percentage. The tip calculator has a modern design that is styled using CSS. We utilized JavaScript to obtain the values of the two input fields and calculate the total amount based on these values.
View project
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.
View project
Welcome to the Stopwatch Project! We will create a timer displayed at the top, along with three buttons - start, stop, and reset. Clicking the START button will begin the timer. The STOP button will pause the timer using a JavaScript method called SetInterval, which can be cleared using clearInterval. The RESET button will reset the timer to zero. If you click STOP and then START again, the timer will continue from the previously elapsed time. We'll start by installing CSS for the buttons' design and hover effects, then use JavaScript to get the browser time, manipulate the content, replace it with the calculated time, and provide the start, stop, and reset functionality.
View project