12 Hour Clock for Dashing

README.md

Dashing - 12 Hour Clock

This widget displays the current time as a 12-hour clock.

Installation:

Open a shell and run this command from the root of your dashing project:

dashing install 6e2f80b4812c5b9474f3

Usage:

Place the code below in one of your dashboard files.

<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
  <div data-view="TwelveHourClock"></div>
</li>

screenshot.png

twelve_hour_clock.coffee

class Dashing.TwelveHourClock extends Dashing.Widget

  ready: ->
    setInterval(@startTime, 1000)

  startTime: =>
    today    = new Date()
    hours    = @getHours(today.getHours())
    minutes  = @formatTime(today.getMinutes())
    meridiem = @getMeridiem(today.getHours())
    @set('time', hours + ":" + minutes + " " + meridiem)
    @set('date', today.toDateString())

  getHours: (i) ->
    ((i + 11) %% 12) + 1

  getMeridiem: (i) ->
    if i < 12 then "AM" else "PM"

  formatTime: (i) ->
    if i < 10 then "0" + i else i

twelve_hour_clock.html

<h1 data-bind="date"></h1>
<h2 data-bind="time"></h2>

twelve_hour_clock.scss

// ----------------------------------------------------------------------------
// Sass declarations
// ----------------------------------------------------------------------------
$background-color:  #dc5945;

// ----------------------------------------------------------------------------
// Widget-clock styles
// ----------------------------------------------------------------------------
.widget-twelve-hour-clock {
  background-color: $background-color;
}

Virus