F#
HTML
Result
Hosted on
Try WebSharper
<
>
namespace Samples open WebSharper open WebSharper.JavaScript open WebSharper.UI open WebSharper.UI.Client open WebSharper.UI.Html [<JavaScript>] module TeaTimer = let Main = // Two views to control the time left. When timeStart >= timeStop, the timer is not running. let timeStart = Var.Create <| System.DateTime(1970,1,1) let timeStop = Var.Create <| System.DateTime(1970,1,1) let msDelta () = let delta = timeStop.Value - timeStart.Value (delta.TotalSeconds - System.Math.Floor(delta.TotalSeconds)) * 1000. |> int |> System.Math.Abs // When the timer is running update timeStart to Now time, and reschedule. // If timer is at zero play alarm and do not reschedule let rec tick () = if timeStart.Value < timeStop.Value then do timeStart.Value <- System.DateTime.Now do JS.SetTimeout tick (msDelta()) |> ignore else do (JS.Document.GetElementById("alarm") |> As<HTMLAudioElement>).Play() // Adds y seconds to timer and schedules the tick coroutine if needed. let addSeconds y = fun () -> if timeStart.Value >= timeStop.Value then let x = System.DateTime.Now do timeStart.Value <- x do timeStop.Value <- x.AddSeconds(y) do JS.SetTimeout tick (msDelta()) |> ignore else do timeStop.Value <- timeStop.Value.AddSeconds(y) // Computes the string value of the time remaining on the timer. // automatically updated whenever timeStart or timeStop are modified. let timeDisplay = timeStop.View |> ( timeStart.View |> View.Map2 ( fun x y -> System.Math.Max((y - x).TotalSeconds |> int,0).ToString () ) ) let style = [Attr.Style "height" "2cm"; Attr.Style "width" "3cm"] // Webpage content. Note the type-safe html constructors. div [] [ Doc.Button "5" style (addSeconds 5.) Doc.Button "15" style (addSeconds 15.) Doc.Button "30" style (addSeconds 30.) Doc.Button "45" style (addSeconds 45.) Doc.Button "60" style (addSeconds 60.) hr [] [] // textView here makes the html here dynamically update when timeDisplay does. div [attr.``class`` "jumbotron";] [h1 [] [textView timeDisplay]] audio [attr.id "alarm"; attr.src "https://www.w3schools.com/html/horse.mp3"; attr.cite "W3Schools"] [] ] |> Doc.RunById "main"
<html> <head> <title>Tea Timer</title> </head> <body> <div id="main"></div> <!--[BODY]--> </body> </html>