Live click counter using javascript?

Question

I have a bar graph on my website that counts how many times a user clicks either 1,2,3,4, or 5 stars, given by the following code:

function enlargeStars(x) {
  if(x === 0) { return; }
  starId = "star" + x;
  document.getElementById(starId).style.width = "60px";
  enlargeStars(x-1);
}
 function shrinkStars(x) {
   if(x === 0) { return; }
   starId = "star" + x;
   document.getElementById(starId).style.width = "50px";
   shrinkStars(x-1);
 }

let fiveStarCounter = parseInt(document.getElementById("c5").innerHTML);
let star5 = document.getElementById("star5");
star5.onclick = () => {
  fiveStarCounter++;
  document.getElementById("c5").innerHTML = fiveStarCounter;
  updateBars();
}

let fourStarCounter = parseInt(document.getElementById("c4").innerHTML);
let star4 = document.getElementById("star4");
star4.onclick = () => {
  fourStarCounter++;
  document.getElementById("c4").innerHTML = fourStarCounter;
  updateBars();
}

let threeStarCounter = parseInt(document.getElementById("c3").innerHTML);
let star3 = document.getElementById("star3");
star3.onclick = () => {
  threeStarCounter++;
  document.getElementById("c3").innerHTML = threeStarCounter;
  updateBars();
}

let twoStarCounter = parseInt(document.getElementById("c2").innerHTML);
let star2 = document.getElementById("star2");
star2.onclick = () => {
  twoStarCounter++;
  document.getElementById("c2").innerHTML = twoStarCounter;
  updateBars();
}

let oneStarCounter = parseInt(document.getElementById("c1").innerHTML);
let star1 = document.getElementById("star1");
star1.onclick = () => {
  oneStarCounter++;
  document.getElementById("c1").innerHTML = oneStarCounter;
  updateBars();
}

function updateBars() {
  let total = fiveStarCounter+fourStarCounter+threeStarCounter+twoStarCounter+oneStarCounter;
  let bar1height = Math.round((oneStarCounter/total)*100);
  document.getElementById("bar1").style.height = bar1height+"%";
  let bar2height = Math.round((twoStarCounter/total)*100);
  document.getElementById("bar2").style.height = bar2height+"%";
  let bar3height = Math.round((threeStarCounter/total)*100);
  document.getElementById("bar3").style.height = bar3height+"%";
  let bar4height = Math.round((fourStarCounter/total)*100);
  document.getElementById("bar4").style.height = bar4height+"%";
  let bar5height = Math.round((fiveStarCounter/total)*100);
  document.getElementById("bar5").style.height = bar5height+"%";
}

.ratings-container {
  /*background-color: red;*/
  font-family: tahoma;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left: 50px;
}

.graph-container {
  /*background-color: blue;*/
}

.graph {
  border-left: 2px solid black;
  border-bottom: 2px solid black;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 300px;
  width: 66%;
}

.graph div {
  width: 12%;
  height: 1px;
  background-color: black;
}

.counters {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 66%;
}

.label-container {
  width: 64%;
  background-color: green;
}

#fivestar {
  float: left;
  /*display: inline;*/
}

#onestar {
  float: right;
  /*display: inline;*/
}

.star-container {
  width: 66%;
  /*background-color: blue;*/
  margin-top: 100px;
  font-size: 0;
}

.star {
  width: 50px;
  height: auto;
  cursor: pointer;
}

<div class="ratings-container">
    <h3>RATE YOUR STAY</h3>
    <div class="graph-container">
      <div class="graph">
        <div id="bar5"></div>
        <div id="bar4"></div>
        <div id="bar3"></div>
        <div id="bar2"></div>
        <div id="bar1"></div>
      </div>
      <div class="counters">
        <h3 id="c5">0</h3>
        <h3 id="c4">0</h3>
        <h3 id="c3">0</h3>
        <h3 id="c2">0</h3>
        <h3 id="c1">0</h3>
      </div>
      <div class="label-container">
        <h2 id="fivestar">5 star</h2>
        <h2 id="onestar">1 star</h2>
      </div>
    </div>
     <div class="star-container">
      <img onmouseout="shrinkStars(1)" onmouseover="enlargeStars(1)" class="star" id="star1" src="./star.jpg">
      <img onmouseout="shrinkStars(2)" onmouseover="enlargeStars(2)" class="star" id="star2" src="./star.jpg">
      <img onmouseout="shrinkStars(3)" onmouseover="enlargeStars(3)" class="star" id="star3" src="./star.jpg">
      <img onmouseout="shrinkStars(4)" onmouseover="enlargeStars(4)" class="star" id="star4" src="./star.jpg">
      <img onmouseout="shrinkStars(5)" onmouseover="enlargeStars(5)" class="star" id="star5" src="./star.jpg">
    </div>
  </div>

So each time a star is clicked, the relevant bar's count is updated. The counts are summed, and the percentage for each bar is calculated by barXcount/total, and is given this percentage as a height. However, the counters for each bar refresh each time a user opens the page. How can I make these counters 'live'?

The counter is live for individual client or summarized of all client? — Chaska
– Chaska, Commented Oct 9, 2018 at 4:21

codingsplash · Accepted Answer · 2018-10-09 04:25:58Z

If you want to preserve the data so that it is displayed when the user revists the page, then you need to store that data somewhere. HTML 5 gives us access to the webstorage API through which you can store data in the clients machine. For example,

function updateBars() {
  let total = fiveStarCounter + fourStarCounter + threeStarCounter + twoStarCounter + oneStarCounter;
  localStorage.setItem("total", total);


  let bar1height = Math.round((oneStarCounter / total) * 100);
  document.getElementById("bar1").style.height = bar1height + "%";
  localStorage.setItem("bar1", bar1height + "%");

  //replicate for other bars

}

//call this function on page load
function onPageLoad() {
  var total = localStorage.getItem("total");
  if (total != null) {
    document.getElementById("bar1").style.height = localStorage.getItem("bar1");
  }

  //replicate this for other bars

}

Here we are setting the value in localStorage whenever the data is calculated. On page load, we retrieve the data from the localStorage and display it on the screen. You can read more about it here: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Collectives™ on Stack Overflow

Live click counter using javascript?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related