granicz/index.html

## index.html
<html>
    <head>
        <title></title>
        <style>
            button {
                width: 48px;
                height: 36px;
                margin: 5px;
            }
            input[type="text"] {
                margin: 5px;
                width: 222px;
                padding: 5px;
                font-size: 18px;
            }
        </style>
    </head>
    <body>
        <div id="main"></div>
        <!--[BODY]-->
    </body>
</html>

## main.fs
namespace Samples

open WebSharper
open WebSharper.JavaScript
open WebSharper.Html.Client

[<JavaScript>]
module Calculator =

    let Main =
        let onum, num, op = ref 0., ref 0., ref None

        let display = Input [Attr.Type "Text"; Attr.Value "0"]

        let updateDisplay () = display.Value <- string !num

        let D n =
            num := 10. * !num + n
            updateDisplay ()

        let C () =
            num := 0.
            updateDisplay()

        let AC () =
            num  := 0.
            onum := 0.
            op   := None
            updateDisplay ()

        let N () =
            num := - !num
            updateDisplay ()

        let E () =
            match !op with
            | None ->
                ()
            | Some f ->
                num := f !onum !num
                op  := None
                updateDisplay ()

        let O o () =
            match !op with
            | None ->
                ()
            | Some f ->
                num := f !onum !num
                updateDisplay ()
            onum := !num
            num  := 0.
            op   := Some o

        let btn caption action =
            Button [Text caption]
            |>! OnClick (fun _ _ -> action ())

        let digit n =
            btn (string n) (fun () -> D n)

        let calculator =
            Div [
                display
                Br []
                Div [
                    digit 7.; digit 8.; digit 9.; btn "/" (O ( / ))
                    Br []
                    digit 4.; digit 5.; digit 6.; btn "*" (O ( * ))
                    Br []
                    digit 1.; digit 2.; digit 3.; btn "-" (O ( - ))
                    Br []
                    digit 0.; btn "C" C; btn "AC" AC; btn "+" (O ( + ));
                    Br []
                    btn "+/-" N; btn "=" E
                ]
            ]

        calculator.AppendTo "main"
	<html>
	<head>
	<title></title>
	<style>
	button {
	width: 48px;
	height: 36px;
	margin: 5px;
	}
	input[type="text"] {
	margin: 5px;
	width: 222px;
	padding: 5px;
	font-size: 18px;
	}
	</style>
	</head>
	<body>
	<div id="main"></div>
	<!--[BODY]-->
	</body>
	</html>
	namespace Samples

	open WebSharper
	open WebSharper.JavaScript
	open WebSharper.Html.Client

	[<JavaScript>]
	module Calculator =

	let Main =
	let onum, num, op = ref 0., ref 0., ref None

	let display = Input [Attr.Type "Text"; Attr.Value "0"]

	let updateDisplay () = display.Value <- string !num

	let D n =
	num := 10. * !num + n
	updateDisplay ()

	let C () =
	num := 0.
	updateDisplay()

	let AC () =
	num := 0.
	onum := 0.
	op := None
	updateDisplay ()

	let N () =
	num := - !num
	updateDisplay ()

	let E () =
	match !op with
	\| None ->
	()
	\| Some f ->
	num := f !onum !num
	op := None
	updateDisplay ()

	let O o () =
	match !op with
	\| None ->
	()
	\| Some f ->
	num := f !onum !num
	updateDisplay ()
	onum := !num
	num := 0.
	op := Some o

	let btn caption action =
	Button [Text caption]
	\|>! OnClick (fun _ _ -> action ())

	let digit n =
	btn (string n) (fun () -> D n)

	let calculator =
	Div [
	display
	Br []
	Div [
	digit 7.; digit 8.; digit 9.; btn "/" (O ( / ))
	Br []
	digit 4.; digit 5.; digit 6.; btn "" (O ( ))
	Br []
	digit 1.; digit 2.; digit 3.; btn "-" (O ( - ))
	Br []
	digit 0.; btn "C" C; btn "AC" AC; btn "+" (O ( + ));
	Br []
	btn "+/-" N; btn "=" E
	]
	]

	calculator.AppendTo "main"