Responsive Feedback Form with Star Rating using HTML, CSS & JavaScript

Responsive Feedback Form with Star Rating using HTML, CSS & JavaScript

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.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-1/css/all.min.css"> <link rel="stylesheet" href="./style.css"> <title>Star rating feedback || learningrobo</title> </head> <body> <div class="card four"> <div class="card-header"> <p class="title">Give feedback about Html course !</p> </div> <div class="card-body"> <div class="stars"> <i class="fas fa-star" id="one"></i> <i class="fas fa-star" id="two"></i> <i class="fas fa-star" id="three"></i> <i class="fas fa-star" id="four"></i> <i class="fas fa-star" id="five"></i> </div> <textarea rows="10" placeholder="Please, leave a message"></textarea> <button class="cta">Provide feedback</button><br> <div class="credit">Made with <span style="color:tomato">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </div> <div class="card-footer"> <a href="#">Maybe later</a> </div> </div> <script src="script.js"></script> </body> </html>
CSS provides style to an HTML page. To make the page attractive and responsive create a CSS file with the name style.css and remember that you have to make a file with a .css 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;
  }
JavaScript makes the page work functionally. At last, create a JavaScript file with the name of script.js, and remember that you've got to make a file with a .js extension.


const stars = document.querySelectorAll('.stars i');
const card = document.querySelector('.card');

stars.forEach(function(star) {
    star.addEventListener('mouseover', function() {
        card.className = `card ${this.id}`
    })
});
We hope you would like this Responsive Feedback Form with Star Rating using HTML, CSS & JavaScript. Thank you for reading our blog.

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

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome