JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="container">

<div class="rate_container">
<div class="rate_title">
Rating
</div>
<div class="rate">
<span id="rate1">6</span>/10</div>Fees
<div class="bar_bg"><div class="bar" id="bar1"></div></div>
<div class="rate">
<span id="rate2">7</span>/10</div>Rates
<div class="bar_bg"><div class="bar" id="bar2"></div></div>
<div class="rate">
<span id="rate3">3</span>/10</div>Service
<div class="bar_bg"><div class="bar" id="bar3"></div></div>
<div class="rate">
<span id="rate4">5</span>/10</div>Overall Rating
<div class="bar_bg"><div class="bar" id="bar4"></div></div>
</div>

</div>

CSS

.rate_container {font-family:arial;font-size:14px;padding:10px 10px 0 10px;border:1px solid #999;}
.rate_title {font-weight:bold;font-size:16px;margin:0 0 10px 0;color:green;}
.rate {float:right;}
.bar_bg {background-color:#ccc;margin:4px 0 0 0;}
.bar {height:10px;margin:0 0 10px 0;}
#bar1, #bar2, #bar3 {background-color:yellow;}
#bar4 {background-color:green;}

JavaScript

var rate1 = document.getElementById("rate1").innerHTML;
var rate2 = document.getElementById("rate2").innerHTML;
var rate3 = document.getElementById("rate3").innerHTML;
var rate4 = document.getElementById("rate4").innerHTML;

var r1 = parseInt(rate1, 10);
var r2 = parseInt(rate2, 10);
var r3 = parseInt(rate3, 10);

var rat1 = (r1*10);
var rat2 = (r2*10);
var rat3 = (r3*10);

document.getElementById("bar1").style.width = rat1 + "%";
document.getElementById("bar2").style.width = rat2 + "%";
document.getElementById("bar3").style.width = rat3 + "%";

var added = (r1 + r2) + r3;
var percent = (added / 30) * 100;
var total = (percent / 10);

document.getElementById("bar4").style.width = percent + "%";
document.getElementById("rate4").innerHTML = total.toFixed(1);