A Digital Clock built with Elm 0.17

DigitalClock.elm

module DigitalClock exposing (clock)


import Html exposing (Html)
import Html.Attributes as HA exposing (style)
import Html.App as App
import Svg exposing (..)
import Svg.Attributes exposing (..)
import Color exposing (rgb)
import Date as D exposing (..)
import Time as T exposing (..)


main =
  App.program
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    }


-- MODEL


type alias Model = T.Time


init : (Model, Cmd Msg)
init =
  (0, Cmd.none)


-- UPDATE


type Msg
  = Tick T.Time


update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Tick time ->
      (time, Cmd.none)


-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
  T.every T.second Tick


-- VIEW


view : Model -> Html Msg
view model =
  clock model


-- LEADING ZERO


leadingZero t = 
  if t < 10 then
    "0" ++ (toString t)
  else
    toString t


-- RETURN CURRENT TIME FORMATTED


currentTime t =
  let date' = fromTime t
      hour' = leadingZero (D.hour date')
      minute' = leadingZero (D.minute date')
      second' = leadingZero (D.second date')
      now = hour' ++ ":" ++ minute' ++ ":" ++ second'
  in
    now


-- GENERATE `<text>` WITH STYLES


prettifyText string =
  text' [ HA.style [ ("fill", "rgb(221, 250, 219)")
                   , ("fontSize", "40px")
                   , ("fontFamily", "Orbitron")
                   ]
        , x "100"
        , y "65"
        , textAnchor "middle"
        ] [ text string ]


-- RECT STYLE


rectStyle = 
  [ width "200"
  , height "100"
  , fill "rgb(27, 188, 155)"
  , stroke "rgb(27, 163, 156)"
  , strokeWidth "10" ]


-- GENERATE THE CLOCK


clock t =
  svg
    [ width "200", height "100", viewBox "0 0 200 100" ]
    [ rect rectStyle []
    , prettifyText (currentTime t)]