Hello developers, today in this blog, you'll learn to create a Responsive Feedback Form with Star Rating using HTML, CSS & JavaScript.
A star rating is a rating card to give a rating or grade for the service provided by the company or for the product quality. It is a form of feedback from the client to the company or the product.
In this blog (Responsive Feedback Form with Star Rating), there is a heading or title to give feedback about the Html course! below the title, there are five stars, where you can give your rating and there is also a feedback box where you say your feedback or leave a message in that box, there is a button named as provide feedback where you can submit the feedback. At last the there is a text as maybe later, this says you that you can give your rating and feedback later.
The source code of this Responsive Feedback Form with Star Rating is given below, if you want the source code of this program, you can copy it. You can use this Responsive Feedback Form with Star Rating with your creativity and can take this project to the next level.
Responsive Feedback Form with Star Rating [Source Code]
To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Open-Sans', sans-serif;
letter-spacing: 0.6px;
color: #fbfbfc;
}
body {
min-height: 100vh;
background-color: #21D4FD;
background-image: linear-gradient(19deg, #21D4FD 0%, #B721FF 100%);
display: flex;
justify-content: center;
align-items: center;
}
.card {
background: linear-gradient(135deg, #474c62, #383c4d);
border-radius: 12px;
box-shadow: 4px 4px 25px rgba(0, 0, 0, 0.4);
overflow: hidden;
}
.card-header,
.card-footer {
background: linear-gradient(135deg, #3c4256, #313747);
text-align: center;
padding: 24px 32px;
}
.card-header {
font-size: 1.8em;
font-weight: bold;
}
.card-footer a {
text-decoration: none;
color: #d1d1d1;
}
.card-body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 32px 64px;
}
.stars {
margin-bottom: 40px;
}
.stars i {
font-size: 2.6em;
margin: 8px;
cursor: pointer;
color: #292f3d;
transition: color 0.5s;
}
.card.one .stars i:nth-child(-n+1) {
color: #ffcf87;
}
.card.two .stars i:nth-child(-n+2) {
color: #ffcf87;
}
.card.three .stars i:nth-child(-n+3) {
color: #ffcf87;
}
.card.four .stars i:nth-child(-n+4) {
color: #ffcf87;
}
.card.five .stars i:nth-child(-n+5) {
color: #ffcf87;
}
textarea {
width: 100%;
background-color: #323747;
border: none;
border-radius: 8px;
padding: 16px;
resize: none;
font-size: 1.4em;
outline: none;
}
button.cta {
width: 100%;
cursor: pointer;
outline: none;
border: none;
border-radius: 6px;
padding: 16px;
margin-top: 32px;
background: #21d4fd;
background-size: 300% 100%;
font-size: 1.4em;
transition: background-position 0.7s;
}
button.cta:hover {
background-position: 100% 0;
}
.credit a{
text-decoration: none;
color: #21D4FD;
}
const stars = document.querySelectorAll('.stars i');
const card = document.querySelector('.card');
stars.forEach(function(star) {
star.addEventListener('mouseover', function() {
card.className = `card ${this.id}`
})
});
If you face any problem in creating this Responsive Feedback Form with Star Rating using HTML, CSS & JavaScript, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
إرسال تعليق
Thank you
Learning robo team