Table of Contents
Introduction:
In the digital realm, user interaction is paramount for website success. Modern rating box provide a seamless way for users to share feedback. This guide explores crafting a contemporary modern rating box using HTML, CSS, and JavaScript, enhancing user engagement and website effectiveness.
Modern rating box offer streamlined feedback mechanisms, fostering transparent communication between users and providers. By structuring HTML, refining aesthetics with CSS, and adding functionality via JavaScript, users can easily express sentiments, fostering a vibrant online community.
Mastering modern rating box creation empowers websites to elevate user experiences. Through intuitive feedback mechanisms, website owners can gauge satisfaction, optimize services, and foster growth, creating immersive digital experiences that resonate with users.
Join Our Telegram Channel to Download the Project Source Code: Click Here
Steps to Create Modern Rating Box:
Please follow this Step-by-Step Guide to Create and Setup the Modern Rating Box using HTML, CSS and JavaScript —
Set Up the Project: Start by creating a new folder for your project, name it as you prefer. Inside this folder, create three files: index.html, style.css, and script.js. This step lays the foundation for your Modern Rating Box.
Step 1: HTML Structure
In the index.html file, structure the basic layout of the modern rating box. You can copy the provided HTML code and paste it into your HTML file. The primary elements include a main container, a front side for user input, and a hidden back side to display the result.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rating option</title>
</head>
<body>
<main>
<div class="rating-card">
<div class="rating-card__front">
<div class="rating-card__img">
<img src="https://rvs-interactive-rating-component.vercel.app/images/icon-star.svg" alt="">
</div>
<div class="rating-card__content">
<h2>How did we do?</h2>
<p>Please let us know how we did with your support request. All feedback is appreciated to help us improve our offering!</p>
</div>
<div class="rating-card__ratings">
<button>1</button>
<button>2</button>
<button>3</button>
<button>4</button>
<button>5</button>
</div>
<button class="rating-card__btn">submit</button>
</div>
<div class="rating-card__back">
<div class="rating-card__img">
<img src="https://rvs-interactive-rating-component.vercel.app/images/illustration-thank-you.svg" alt="">
</div>
<div class="rating-card__result">
You selected <span class="rating-card__result--value">4</span> out of 5
</div>
<div class="rating-card__content">
<h1>Thank you!</h1>
<p>We appreciate you taking the time to give a rating. If you ever need more support, don't hesitate to get in touch!</p>
</div>
</div>
</div>
</main>
</body>
</html>Step 2: Styling with CSS
Next, add styles to your modern rating box using CSS. Copy the CSS code provided and paste it into your style.css file to give the rating box a modern and visually appealing appearance.
@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@400;700&display=swap');
:root {
--orange: hsl(25, 97%, 53%);
--white: hsl(0, 0%, 100%);
--light-grey: hsl(217, 12%, 63%);
--medium-grey: hsl(216, 12%, 54%);
--dark-blue: hsl(213, 19%, 18%);
--very-dark-blue: hsl(216, 12%, 8%);
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Overpass', sans-serif;
width: 100%;
height: 100vh;
background: var(--very-dark-blue);
}
main {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.rating-card {
width: 350px;
display: flex;
flex-direction: column;
background: var(--dark-blue);
border-radius: 20px;
padding: 40px 30px;
}
.rating-card .rating-card__front, .rating-card .rating-card__back {
display: flex;
flex-direction: column;
row-gap: 20px;
}
.rating-card .rating-card__front .rating-card__img {
width: 50px;
height: 50px;
background: #3e454dc5;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.rating-card .rating-card__front .rating-card__content h2, .rating-card .rating-card__back .rating-card__content h1 {
color: var(--white);
font-size: 26px;
font-weight: 500;
}
.rating-card .rating-card__front .rating-card__content p, .rating-card .rating-card__back .rating-card__content p {
color: var(--light-grey);
line-height: 20px;
margin-top: 12px;
}
.rating-card .rating-card__front .rating-card__ratings {
display: flex;
justify-content: space-between;
}
.rating-card .rating-card__front .rating-card__ratings button {
background: #3e454dc5;
border-radius: 50%;
outline: none;
border: 0;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
color: var(--medium-grey);
font-size: 18px;
font-weight: 600;
cursor: pointer;
transition: all 300ms linear;
}
.rating-card .rating-card__front .rating-card__ratings button:hover {
background: var(--light-grey);
color: white;
}
.rating-card .rating-card__front .rating-card__ratings button:active, .rating-card .rating-card__front .rating-card__ratings button.active {
background: var(--orange);
color: white;
}
.rating-card .rating-card__front .rating-card__btn {
background: var(--orange);
cursor: pointer;
outline: none;
border: 0;
padding: 15px;
color: var(--white);
text-transform: uppercase;
font-size: 16px;
letter-spacing: 4px;
font-weight: 600;
border-radius: 25px;
transition: all 300ms linear;
}
.rating-card .rating-card__front .rating-card__btn:hover {
color: var(--orange);
background: white;
}
.rating-card .rating-card__back {
display: none;
align-items: center;
row-gap: 30px;
}
.rating-card .rating-card__back .rating-card__img {
display: flex;
justify-content: center;
}
.rating-card .rating-card__back .rating-card__result {
text-align: center;
background: #3e454dc5;
display: inline-block;
padding: 10px 25px;
border-radius: 25px;
width: fit-content;
color: var(--orange);
}
.rating-card .rating-card__back .rating-card__content h1, .rating-card .rating-card__back .rating-card__content p {
text-align: center;
}Step 3: Adding Interactivity with JavaScript
Finally, add JavaScript functionality to make the modern rating box interactive. Copy the JavaScript code provided and paste it into your script.js file. This code allows users to select a rating and submit their feedback.
var feedbackScore = 0;
let allBtn = document.querySelectorAll(".rating-card__ratings button");
let submitBtn = document.querySelector(".rating-card__btn");
let frontPart = document.querySelector(".rating-card__front");
let backPart = document.querySelector(".rating-card__back");
allBtn.forEach(btn => {
btn.addEventListener("click", function() {
feedbackScore = this.innerText;
allBtn.forEach(button => {
button.classList.remove("active");
});
this.classList.add("active");
})
});
submitBtn.addEventListener("click", function() {
frontPart.style.display = "none";
backPart.querySelector(".rating-card__result--value").innerText = feedbackScore;
backPart.style.display = "flex";
})Conclusion:
By following these three simple steps, you’ll have successfully implemented a Modern Rating Box on your website. Users can now express their feedback easily, enhancing the interactivity of your platform. Feel free to customize the styles and extend the functionality based on your project’s needs.
Remember, coding is not just about creating functional projects; it’s about exploring, experimenting, and embracing the joy of building something interactive from scratch.
Experiment with the provided code, make it your own, and enjoy the process of creating an engaging user experience with the Modern Rating Box. Happy coding!
Join Our Telegram Channel to Download the Project Source Code: Click Here
For your convenience, the total source code of this “Modern Rating Box” project instructional practice is accessible for download by clicking the Download Code button.
Note: Keep in mind that the way to dominate coding is practice. To enhance your skills in JavaScript, HTML & CSS, we recommend recreating other useful website elements such as Custom Button, Reviews Card, Contact Page, Navigation, Login Forms, etc.
More Categories:
Blog • Cards • Fun Project • Game • Hamburger Menu • Login / Signup • Navbar • Testimony / Reviews • To-Do List
