Skip to content

Instantly share code, notes, and snippets.

Forked from ruleb/
Last active Apr 22, 2021
What would you like to do?
Countdown. REVISED EDITION!!!!

Countdown. REVISED EDITION!!!!

This is a fork of ruleb's count down that rended one of the else ifs unreachable in his code. Even though he was notified by menny people he never fixed his code so i took it on to... fix 1 line of code. This Fork may expand if i have the time to re-learn coffie and see if any outher code is broken.

The rest of this readme and the html code and scss is still the orginal by ruleb.


Simple Dashing widget to countdown until a certain moment. Flashes the widget when finished.


To use this widget, copy countdown.html,, and countdown.scss into the /widgets/countdown directory.

To include the widget in a dashboard, add the following snippet to the dashboard layout file:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-view="Countdown" data-title="GOAL_DISPLAY_NAME" data-end="26-Apr-2013 18:00:00"></div>


class Dashing.Countdown extends Dashing.Widget
ready: ->
setInterval(@startCountdown, 500)
startCountdown: =>
current_timestamp = Math.round(new Date().getTime()/1000)
end_timestamp = Math.round( Date.parse($(@node).find(".more-info").html())/1000 )
seconds_until_end = end_timestamp - current_timestamp
if seconds_until_end < 0
@set('timeleft', "TIME UP!")
for i in [0..100] by 1
$(@node).fadeTo('fast', 0).fadeTo('fast', 1.0)
d = Math.floor(seconds_until_end/86400)
h = Math.floor((seconds_until_end-(d*86400))/3600)
m = Math.floor((seconds_until_end-(d*86400)-(h*3600))/60)
s = seconds_until_end-(d*86400)-(h*3600)-(m*60)
if d >0
dayname = 'day'
if d > 1
dayname = 'days'
@set('timeleft', d + " "+dayname+" " + @formatTime(h) + ":" + @formatTime(m) + ":" + @formatTime(s))
@set('timeleft', @formatTime(h) + ":" + @formatTime(m) + ":" + @formatTime(s))
formatTime: (i) ->
if i < 10 then "0" + i else i
<h2 data-bind="title"></h2>
<h1 data-bind="timeleft" class="countdown-time"></h1>
<p class="before-more-info">ends on:</p>
<p class="more-info" data-bind="end"></p>
// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color: #dc5945;
// ----------------------------------------------------------------------------
// Widget-clock styles
// ----------------------------------------------------------------------------
.widget-countdown {
background-color: $background-color;
h2 { font-size: 2em;}
h1 { font-size: 2em;}
.countdown-time {
margin-top: 10px;
color: gold;
.before-more-info {
font-size: 15px;
position: absolute;
bottom: 52px;
left: 0;
right: 0;

This comment has been minimized.

Copy link

@ghost ghost commented Apr 17, 2015

Hi ioangogo,

What do I need to remove to get rid of the time after the date please (ends on date and time)?

Also, when you expand the number of rows this widget is on to make space for the large text such as "Next Release", the "ends on:" text is either cramped or it shifts to the very bottom of the widget.

Cheers Mark


This comment has been minimized.

Copy link

@DazLamas DazLamas commented Aug 25, 2016

Hey ioangogo! Nice job, I'd want to use your widget at my project, but it shows the following error:

captura de pantalla 2016-08-25 a las 10 59 20

Any idea? I've copied html, scss and coffee files at my widget's folder and include the snippet at the layout... what am I missing?



This comment has been minimized.

Copy link

@d11-acummins d11-acummins commented Aug 26, 2020

Current versions of Firefox can't parse the end timestamp date correctly, so always show "TIME UP". Replacing the hypens in the date with spaces fixes the issue, and appears to maintain compatibility. Change the end_timestamp definition to the following:

end_timestamp = Math.round( Date.parse($(@node).find(".more-info").html().replace(/-/g, " ")) / 1000 )
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment