How to make a simple rating system in HTML & CSS?-CodePudding

I want to make a simple rating system for my website, so when the user clicks "Yes" it will display a green message with "Thanks", and if the user clicks "No", then it will display a red message with "Sorry to hear that.".

I've been trying to make this work for a while now, and can't seem to figure it out, can someone help me with this? Also, how can I make it so the messages appear only when the user clicks them, not hovers over them?

Here's my code:

.rating {
  background: #0084FF;
  color: #fff;
  padding: 20px;
  width: 60%;
  margin: auto;
  margin-top: 20px;
}

.rating a {
  color: #fff;
}

.thanks {
display: none;
background: green;
color: #fff;
padding: 20px;
margin: 0px;
}

.sorry {
  display: none;
  background: red;
  color: #fff;
  padding: 20px;
  margin: 0px;
}

.yes:hover #thanks {
display: block;
}

.no:hover #sorry {
  display: block;
}

<div class="rating" id="rating">
        Was This Helpful? &nbsp;&nbsp;&nbsp;&nbsp; <a href="#rating" class="yes" id="yes">Yes</a> &nbsp;&nbsp; <a href="#rating" class="no" id="no">No</a>
    
        <div class="thanks" id="thanks">
            Thank You!
        </div>
        <div class="sorry" id="sorry">
            We're sorry to hear that!
        </div>
    </div>

CodePudding user response：

You may use the :target pseudo-class to show one or the other

.rating {
  background: #0084FF;
  color: #fff;
  padding: 20px;
  width: 60%;
  margin: auto;
  margin-top: 20px;
}

.rating a {
  color: #fff;
}

.thanks {
display: none;
background: green;
color: #fff;
padding: 20px;
margin: 0px;
}

.sorry {
  display: none;
  background: red;
  color: #fff;
  padding: 20px;
  margin: 0px;
}

#thanks:target {
display: block;
}

#sorry:target {
  display: block;
}

<div class="rating" id="rating">
        Was This Helpful? &nbsp;&nbsp;&nbsp;&nbsp; <a href="#thanks" class="yes" id="yes">Yes</a> &nbsp;&nbsp; <a href="#sorry" class="no" id="no">No</a>
    
        <div class="thanks" id="thanks">
            Thank You!
        </div>
        <div class="sorry" id="sorry">
            We're sorry to hear that!
        </div>
    </div>

CodePudding user response：

You might have to store the value of how many people have answered 'yes' and how many 'no' (in a SQL Database) if possible

Then, you can compare both the values.

To return average you could check this this

Reccomended Links : Design: https://www.jqueryscript.net/blog/best-rating-systems.html Javascript: https://dev.to/leonardoschmittk/how-to-make-a-star-rating-with-js-36d3

CodePudding user response：

For that you need to add JavaScript or jQuery it's your choice.

Here is Full Example

var yes = document.getElementById('yes');
var no = document.getElementById('no');

yes.addEventListener("click", function(){
  document.getElementById('rating').style.background = 'green';
  document.getElementById('thanks').style.display = 'block';
  document.getElementById('sorry').style.display = 'none';
});

no.addEventListener("click", function(){
  document.getElementById('rating').style.background = 'red';
  document.getElementById('sorry').style.display = 'block';
  document.getElementById('thanks').style.display = 'none';
});

.rating {
  background: #0084FF;
  color: #fff;
  padding: 20px;
  width: 60%;
  margin: auto;
  margin-top: 20px;
}

.rating a {
  color: #fff;
}

.thanks {
display: none;
background: green;
color: #fff;
padding: 20px;
margin: 0px;
}

.sorry {
  display: none;
  background: red;
  color: #fff;
  padding: 20px;
  margin: 0px;
}

.yes:hover #thanks {
display: block;
}

.no:hover #sorry {
  display: block;
}

<div class="rating" id="rating">
        Was This Helpful? &nbsp;&nbsp;&nbsp;&nbsp; <a href="#rating" class="yes" id="yes">Yes</a> &nbsp;&nbsp; <a href="#rating" class="no" id="no">No</a>
    
        <div class="thanks" id="thanks">
            Thank You!
        </div>
        <div class="sorry" id="sorry">
            We're sorry to hear that!
        </div>
    </div>