# Count down timer

**URL:** <https://community.tulip.co/t/count-down-timer/7661>\
**Category:** Developer\
**Tags:** custom-widgets\
**Created:** [February 24, 2023, 7:14am UTC](https://community.tulip.co/t/count-down-timer/7661 "2023-02-24T07:14:22Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![abeer.garman](https://avatars.discourse-cdn.com/v4/letter/a/e9a140/32.png) [@abeer.garman](https://community.tulip.co/u/abeer.garman)\
**Post date:** [February 24, 2023, 7:14am UTC](https://community.tulip.co/t/count-down-timer/7661/1 "2023-02-24T07:14:22Z")

</div>

Hello ! I coded a timer custom widget , the problem is when ever I change the step the timer reset and stop , I want the timer to be visible for the user and the user also can set the amount of time and be able to pause it ,stop it and If the user did not stop it it will continue counting.  
The timer that already with Tulip does not stop when it reach Zero , is there any solution for that !

---

<div class="post-metadata">

**Author:** ![thorsten.langner](https://avatars.discourse-cdn.com/v4/letter/t/4bbf92/32.png) [@thorsten.langner](https://community.tulip.co/u/thorsten.langner)\
**Post date:** [February 27, 2023, 12:44pm UTC](https://community.tulip.co/t/count-down-timer/7661/2 "2023-02-27T12:44:11Z")

</div>

Hi @abeer.garman,  
did you try putting your Widget to the Base Layout of the app?  
On steps where you dont want so see the Timer (but want it to still count) you can drag it out of the viewport.

I’m curious if that would work…

---

<div class="post-metadata">

**Author:** ![John](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tulip.co/john/32/4971_2.png) [@John](https://community.tulip.co/u/John)\
**Post date:** [February 27, 2023, 5:07pm UTC](https://community.tulip.co/t/count-down-timer/7661/3 "2023-02-27T17:07:05Z")

</div>

@abeer.garman, in addition to @thorsten.langner’s suggestion to put the widget on the base layout, if you’re comfortable sharing the code someone may be able to help you debug

---

<div class="post-metadata">

**Author:** ![abeer.garman](https://avatars.discourse-cdn.com/v4/letter/a/e9a140/32.png) [@abeer.garman](https://community.tulip.co/u/abeer.garman)\
**Post date:** [February 27, 2023, 6:34pm UTC](https://community.tulip.co/t/count-down-timer/7661/4 "2023-02-27T18:34:10Z")

</div>

Hmm , but the time value is from inside the widget , and all the other options

---

<div class="post-metadata">

**Author:** ![abeer.garman](https://avatars.discourse-cdn.com/v4/letter/a/e9a140/32.png) [@abeer.garman](https://community.tulip.co/u/abeer.garman)\
**Post date:** [February 27, 2023, 6:35pm UTC](https://community.tulip.co/t/count-down-timer/7661/5 "2023-02-27T18:35:39Z")

</div>

```auto
const startBtn = document.getElementById('start');
const pauseBtn = document.getElementById('pause');
const stopBtn = document.getElementById('stop');
const timerValue = document.getElementById('timerValue');
const thresholdValue = document.getElementById('thresholdValue');
 

const countdownContainer = document.getElementById('countdown');
const hours = document.getElementById('hours');
const mins = document.getElementById('mins');
const secs = document.getElementById('secs');
 
let THRESHOLD = 0;
 

let COUNTDOWN = 0;
let startTime = 0;
let timeElapsed = 0; // keep track of time elapsed before pause
let timerFn = null;
 

stopBtn.onclick = function(e) {
    e.preventDefault();
    stopTimer();
}
 

startBtn.onclick = function(e) {
    e.preventDefault();
 
   
    COUNTDOWN = parseInt(timerValue.value);
    THRESHOLD = parseInt(thresholdValue.value);
    if (COUNTDOWN > 0) {
        startTime = Math.ceil(Date.now() / 1000) - timeElapsed; // subtract time elapsed before pause
        timerFn = setInterval(updateTimer, 1000);
    }
}

pauseBtn.onclick = function(e) {
    e.preventDefault();
    pauseTimer();
}
 
function stopTimer() {
    clearInterval(timerFn);
    timeElapsed = 0; // reset time elapsed
    setThreshold();
    timerFn = null;
}

function pauseTimer() {
    clearInterval(timerFn);
    timeElapsed = Math.ceil(Date.now() / 1000) - startTime; // calculate time elapsed before pause
    setThreshold();
    timerFn = null;
}
 
function setThreshold(status) {
    if (status) {
        countdownContainer.classList.add("threshold");
    } else {
        countdownContainer.classList.remove("threshold");
    }
}

function updateTimer() {
  const current = Math.ceil(Date.now() / 1000);
 
  const remaining = COUNTDOWN - current + startTime;
  const timerValues = getTimeValues(remaining);
 
  // ... WITH LEADING 0's
  hours.innerHTML = ('00' + timerValues.hours).substr(-2);
  mins.innerHTML = ('00' + timerValues.mins).substr(-2);
  secs.innerHTML = ('00' + timerValues.secs).substr(-2);
 
  if (remaining <= THRESHOLD) {
      setThreshold(true);
  }
  // CHECK FOR TIMEOUT
  if (remaining <= 0) {
    fireEvent('TIMES UP');
    stopTimer();
  }
}
 
// SECONDS TO TIME VALUES H:M:S
function getTimeValues(referenceTime) {
  const hours = parseInt(referenceTime / 3600);
  const mins = parseInt((referenceTime - hours * 3600) / 60);
  const secs = referenceTime - hours * 3600 - mins * 60;
 
  return {hours, mins, secs};
}

```

this is the code I used for the timer, any suggestion will be more than welcomed !

---

<div class="post-metadata">

**Author:** ![mglidden](https://sea2.discourse-cdn.com/flex020/user_avatar/community.tulip.co/mglidden/32/3894_2.png) [@mglidden](https://community.tulip.co/u/mglidden)\
**Post date:** [February 27, 2023, 7:39pm UTC](https://community.tulip.co/t/count-down-timer/7661/6 "2023-02-27T19:39:36Z")

</div>

@abeer.garman Local variables in a custom widget (eg startTime, endTime) are reset whenever the widget has to be re-rendered, which includes navigating between steps. It would also get reset if the page was refreshed, or the user closed and re-opened the player.

Take a look at how the [Stopwatch widget in our library](https://tulip.co/library/apps/stopwatch-widget-unit-test/) works – we save the current time elapsed in the “Duration” variable so it persists across refreshes.