# Need Help with Making a Countdown Timer Display

**URL:** <https://discourse.nodered.org/t/need-help-with-making-a-countdown-timer-display/30387>\
**Category:** General\
**Created:** [20 July 2020 09:56 UTC](https://discourse.nodered.org/t/need-help-with-making-a-countdown-timer-display/30387 "2020-07-20T09:56:37Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![oncdastan](https://avatars.discourse-cdn.com/v4/letter/o/34f0e0/32.png) [@oncdastan](https://discourse.nodered.org/u/oncdastan)\
**Post date:** [20 July 2020 09:56 UTC](https://discourse.nodered.org/t/need-help-with-making-a-countdown-timer-display/30387/1 "2020-07-20T09:56:38Z")

</div>

Hi. I want to use a dropdown for users to select the time amount. Then, I want to display that on the UI, while it is counting down. I was thinking of after selecting a time amount from the menu, the user could press a button (or a switch, which looks better) to confirm that choice, and the timer would start to go down. I also think of using a buzzer to alert the user, when it is 00:00, and I think I can do this part alone. I need help with the rest.

---

<div class="post-metadata">

**Author:** ![kushan-athukorala](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kushan-athukorala/32/21830_2.png) [@kushan-athukorala](https://discourse.nodered.org/u/kushan-athukorala)\
**Post date:** [20 July 2020 10:50 UTC](https://discourse.nodered.org/t/need-help-with-making-a-countdown-timer-display/30387/2 "2020-07-20T10:50:16Z")

</div>

Did you look at nodered-dashboard?  
It has all the components you need to do this

Regards,  
Kushan

---

<div class="post-metadata">

**Author:** ![oncdastan](https://avatars.discourse-cdn.com/v4/letter/o/34f0e0/32.png) [@oncdastan](https://discourse.nodered.org/u/oncdastan)\
**Post date:** [20 July 2020 10:53 UTC](https://discourse.nodered.org/t/need-help-with-making-a-countdown-timer-display/30387/3 "2020-07-20T10:53:02Z")

</div>

Yes, I am using the dashboard. I don't know how to make this idea work. I tried to carry the payload until the "Time: ". I only see true or false there. It goes like this: Dropdown -\> Switch -\> Text. I also need to write a function somewhere to make it countdown and keep sending it to the Text. I don't know how to do that.

---

<div class="post-metadata">

**Author:** ![kushan-athukorala](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kushan-athukorala/32/21830_2.png) [@kushan-athukorala](https://discourse.nodered.org/u/kushan-athukorala)\
**Post date:** [20 July 2020 11:02 UTC](https://discourse.nodered.org/t/need-help-with-making-a-countdown-timer-display/30387/4 "2020-07-20T11:02:06Z")

</div>

Im not 100% clear on your use case though, you can use template node in the dashboard to have a custom javascript to do the count down.

---

<div class="post-metadata">

**Author:** ![oncdastan](https://avatars.discourse-cdn.com/v4/letter/o/34f0e0/32.png) [@oncdastan](https://discourse.nodered.org/u/oncdastan)\
**Post date:** [20 July 2020 11:07 UTC](https://discourse.nodered.org/t/need-help-with-making-a-countdown-timer-display/30387/5 "2020-07-20T11:07:15Z")

</div>

My use case goes like this:  
1- User picks the time from the dropdown.  
2- Clicks on the button to start the countdown. Countdown is being displayed on the UI. If the user picked the wrong one, or wanted to reset it, a second press on the same button (or switch) will do that.  
3- When it reaches 00:00, alarm goes on (I can do this part).

I have no idea how to do 1 and 2. Also, never used a template node before, and never coded javascript. By the way, I don't need days, just hour and minute. The time amounts I put there are: 15, 30, 45, and 60 minutes. Could you please guide me on doing this?

---

<div class="post-metadata">

**Author:** ![kushan-athukorala](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kushan-athukorala/32/21830_2.png) [@kushan-athukorala](https://discourse.nodered.org/u/kushan-athukorala)\
**Post date:** [20 July 2020 11:35 UTC](https://discourse.nodered.org/t/need-help-with-making-a-countdown-timer-display/30387/6 "2020-07-20T11:35:39Z")

</div>

Can you try out the flow with this node - [https://flows-new.nodered.org/node/node-red-contrib-countdown?.](https://flows-new.nodered.org/node/node-red-contrib-countdown?.) and dashboard drop-down and button

---

<div class="post-metadata">

**Author:** ![ristomatti](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ristomatti/32/5857_2.png) [@ristomatti](https://discourse.nodered.org/u/ristomatti)\
**Post date:** [20 July 2020 11:46 UTC](https://discourse.nodered.org/t/need-help-with-making-a-countdown-timer-display/30387/7 "2020-07-20T11:46:20Z")

</div>

I second @kushan-athukorala. I just did a quick test with the countdown contrib node and it could be a simple solution. The only issue left is to convert its output (seconds left in countdown) to a format you want to show on the dashboard. It would likely simplify things if you'd have the remaining time in just a label widget and not try to integrate the remaining time to the countdown time picker.

---

<div class="post-metadata">

**Author:** ![oncdastan](https://avatars.discourse-cdn.com/v4/letter/o/34f0e0/32.png) [@oncdastan](https://discourse.nodered.org/u/oncdastan)\
**Post date:** [20 July 2020 12:00 UTC](https://discourse.nodered.org/t/need-help-with-making-a-countdown-timer-display/30387/8 "2020-07-20T12:00:34Z")

</div>

How can I make the switch carry over the payload of dropdown to the countdown node?

Also, second press is going to reset it. So, should I do something like this?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/1/719a79c4a969dd4f41afa42c1c797fd5410efc3d.png)

---

<div class="post-metadata">

**Author:** ![kushan-athukorala](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kushan-athukorala/32/21830_2.png) [@kushan-athukorala](https://discourse.nodered.org/u/kushan-athukorala)\
**Post date:** [20 July 2020 12:06 UTC](https://discourse.nodered.org/t/need-help-with-making-a-countdown-timer-display/30387/9 "2020-07-20T12:06:59Z")

</div>

Use a change node to store the selected drop down value in flow context. and use another change node after the switch

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/3/a308744949245aadcc37cff3a124a995f1bed384.png)

---

<div class="post-metadata">

**Author:** ![oncdastan](https://avatars.discourse-cdn.com/v4/letter/o/34f0e0/32.png) [@oncdastan](https://discourse.nodered.org/u/oncdastan)\
**Post date:** [20 July 2020 12:07 UTC](https://discourse.nodered.org/t/need-help-with-making-a-countdown-timer-display/30387/10 "2020-07-20T12:07:45Z")

</div>

I am using another "value" in the flow. Can't I use something else?

---

<div class="post-metadata">

**Author:** ![kushan-athukorala](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kushan-athukorala/32/21830_2.png) [@kushan-athukorala](https://discourse.nodered.org/u/kushan-athukorala)\
**Post date:** [20 July 2020 12:10 UTC](https://discourse.nodered.org/t/need-help-with-making-a-countdown-timer-display/30387/12 "2020-07-20T12:10:24Z")

</div>

yes you can use any name 🙂

---

<div class="post-metadata">

**Author:** ![oncdastan](https://avatars.discourse-cdn.com/v4/letter/o/34f0e0/32.png) [@oncdastan](https://discourse.nodered.org/u/oncdastan)\
**Post date:** [20 July 2020 12:12 UTC](https://discourse.nodered.org/t/need-help-with-making-a-countdown-timer-display/30387/13 "2020-07-20T12:12:39Z")

</div>

Does this look okay?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/1/6185f2c6b2767aba8bd0516131ee5dae6272c64c.png)

What should I do on the switch's side? How should I configure the node? Also, any ideas what to write in that function? I have no idea if this is going to work like this. 2 inputs on the same dot. Also, I need help writing the function.

For "flow.time" to be correct, do I need to change anything in the dropdown?

---

<div class="post-metadata">

**Author:** ![kushan-athukorala](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kushan-athukorala/32/21830_2.png) [@kushan-athukorala](https://discourse.nodered.org/u/kushan-athukorala)\
**Post date:** [20 July 2020 12:15 UTC](https://discourse.nodered.org/t/need-help-with-making-a-countdown-timer-display/30387/14 "2020-07-20T12:15:43Z")

</div>

In switch side, it is other way around.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/a/bac30f4d888dc984d9873ad926dc03d95c5ad712.png)

---

<div class="post-metadata">

**Author:** ![oncdastan](https://avatars.discourse-cdn.com/v4/letter/o/34f0e0/32.png) [@oncdastan](https://discourse.nodered.org/u/oncdastan)\
**Post date:** [20 July 2020 12:17 UTC](https://discourse.nodered.org/t/need-help-with-making-a-countdown-timer-display/30387/15 "2020-07-20T12:17:19Z")

</div>

Are these connections correct?

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/5/f556c91410cc651301b173153e6ee65c58dcdccc.png)

---

<div class="post-metadata">

**Author:** ![kushan-athukorala](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kushan-athukorala/32/21830_2.png) [@kushan-athukorala](https://discourse.nodered.org/u/kushan-athukorala)\
**Post date:** [20 July 2020 12:18 UTC](https://discourse.nodered.org/t/need-help-with-making-a-countdown-timer-display/30387/16 "2020-07-20T12:18:22Z")

</div>

remove the connection between flow.time and function node.

---

<div class="post-metadata">

**Author:** ![oncdastan](https://avatars.discourse-cdn.com/v4/letter/o/34f0e0/32.png) [@oncdastan](https://discourse.nodered.org/u/oncdastan)\
**Post date:** [20 July 2020 12:19 UTC](https://discourse.nodered.org/t/need-help-with-making-a-countdown-timer-display/30387/17 "2020-07-20T12:19:52Z")

</div>

Which side? Drop down, or the switch side?

---

<div class="post-metadata">

**Author:** ![kushan-athukorala](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kushan-athukorala/32/21830_2.png) [@kushan-athukorala](https://discourse.nodered.org/u/kushan-athukorala)\
**Post date:** [20 July 2020 12:20 UTC](https://discourse.nodered.org/t/need-help-with-making-a-countdown-timer-display/30387/18 "2020-07-20T12:20:12Z")

</div>

dropdown side

---

<div class="post-metadata">

**Author:** ![oncdastan](https://avatars.discourse-cdn.com/v4/letter/o/34f0e0/32.png) [@oncdastan](https://discourse.nodered.org/u/oncdastan)\
**Post date:** [20 July 2020 12:23 UTC](https://discourse.nodered.org/t/need-help-with-making-a-countdown-timer-display/30387/19 "2020-07-20T12:23:24Z")

</div>

Since I put minutes in the dropdown, I should multiply the value with 60, in order to give seconds to the countdown. How can I do that?

---

<div class="post-metadata">

**Author:** ![kushan-athukorala](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kushan-athukorala/32/21830_2.png) [@kushan-athukorala](https://discourse.nodered.org/u/kushan-athukorala)\
**Post date:** [20 July 2020 12:27 UTC](https://discourse.nodered.org/t/need-help-with-making-a-countdown-timer-display/30387/20 "2020-07-20T12:27:29Z")

</div>

Use value and label fields in dropdown selectively.  
label 1 value 60a and likewise

---

<div class="post-metadata">

**Author:** ![oncdastan](https://avatars.discourse-cdn.com/v4/letter/o/34f0e0/32.png) [@oncdastan](https://discourse.nodered.org/u/oncdastan)\
**Post date:** [20 July 2020 12:40 UTC](https://discourse.nodered.org/t/need-help-with-making-a-countdown-timer-display/30387/21 "2020-07-20T12:40:16Z")

</div>

I did it like this:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/f/ef952cd53c05236a0c62c5aac4acab3b302b214b.png)

What should I write to the function? Do I even need a function now?

[Next page](https://discourse.nodered.org/t/need-help-with-making-a-countdown-timer-display/30387.md?page=2)