CODEWITHSUNDEEP
javascripthtml
Basil Moses
Basil Moses

Reputation: 57

CountUp to a Specified number without reset

I am trying to create a Countup counter Starting from 1 to 10000 and i do not want it to reset when user refreshes the page or cancels the page. The Counter should start from 1 for every user that visits the page and keep running in background till it gets to 10000 even if the page is closed. I have written the page below which;

  1. Starts from the specified number for every new visitor
  2. Saves the progress and does not reset when page is refreshed, however It does not keep counting when page is closed and starts from the last progress when user closes the tab and comes back later. My code is
function countUp() {
  var countEl = document.querySelector('.counter');
  var countBar = document.querySelector('.progress-bar');
  var x = parseInt(localStorage.getItem('lastCount')) - 1 || 1;
  var y = countEl.dataset.to;
  var z = countBar.dataset.to;
  
  function addNum() {
    countEl.innerHTML = x;
  x += 1;
  if (x > y && x > z) {
    clearInterval(timer);
  }
  localStorage.setItem('lastCount', x);
  
}
  
  var timer = window.setInterval(addNum, 1000);
  localStorage.setItem("addNum", counter);
  
  toggleBtn.addEventListener('click', function(){
    countUp();
    toggleBtn.classList.add('hidden');
  });
}
countUp();</script>

<body onload=countUp();>
  <div class="counter" data-from="0" data-to="10000000"></div>
  <div class="progress-bar"  data-from="0" data-to="10000000"></div>

</body>

Upvotes: 0

Views: 332

Answers (3)

Van Wilder
Van Wilder

Reputation: 486

What you want here is not possible just from the client-side code, there is no way for 2 different machines to share that information at all.

Here's the thing though, you can do this with a backend where the database gets updated every time a new IP hits the server. Note with this approach, a user here is one system and not different browsers or sessions.

To update this real-time for someone who is already on the website, run a timer and call an API that specifically gives you the count. Therefore the page gets updated frequently. You can also do this with react-query as it comes with inbuilt functions to do all this.

Upvotes: 0

Will
Will

Reputation: 3241

It's difficult to show an example on StackOverflow because it doesn't let you fiddle with localStorage but, it sounds like you want something like:

  1. When a user visits the page check localStorage for a timestamp.
  2. If timestamp exists, go to step 4
  3. Timestamp doesn't exist so get the current timestamp and stash it in localStorage.
  4. Get the current timestamp. Subtract the timestamp from before. If over 10,000, stop, you're done.
  5. Display difference calculated in step 4.
  6. Start a 1 second timer, when time is up, go to step 4.

Something along those lines should work even if they refresh the page and since you are calculating from the original timestamp it will "count" in the background even if the page is closed.

window.addEventListener("DOMContentLoaded", () => {
  const start = localStorage.getItem("timestamp") || Date.now();
  localStorage.setItem("timestamp", start);

  function tick() {
    const now = Date.now();
    const seconds = Math.floor((now - start) / 1000);
    const display = document.getElementById("display");
    if (seconds > 10000) return display.innerHTML = "We're done";
    display.innerHTML = seconds;
    setTimeout(tick, 1000);
  }

  tick();
});
<div id="display"></div>

Upvotes: 1

Carel
Carel

Reputation: 47

So, client-side code can't normally execute when a client-side javascript page is closed.

What you could do, however, is calculate where the timer should be then next time it is loaded.

For example, in your addNum() function, you could in addition to the last count, also store the current date (and time).

function addNum() {
    countEl.innerHTML = x;
  x += 1;
  if (x > y && x > z) {
    clearInterval(timer);
  }
  localStorage.setItem('lastCount', x);
  localStorage.setItem('lastDate', new Date());      
}

Then, when your code starts, you can retrieve lastDate, and then subtract the current Date() from it. Then use that to add the difference to your counter.

function countUp() {
  let storedCount = parseInt(localStorage.getItem('lastCount'));
  let storedDate = Date.parse(localStorage.getItem('lastDate'));
  let now = new Date()
  let diffSeconds = (now.getTime() - storedDate.getTime()) / 1000;
  let storedCount += diffSeconds;

  var countEl = document.querySelector('.counter');
  var countBar = document.querySelector('.progress-bar');
  var x = storedCount  - 1 || 1;
  var y = countEl.dataset.to;
  var z = countBar.dataset.to;
  
}

I'm sure there are some more changes required to make it work with your code, but the idea is to store the current time so that when the page is closed and reopened, you can 'adjust' the count to catch up to what it should be.

Upvotes: 0

Related Questions