3 people like it.

Simple JS Calculator

Simple calculator application for adding numbers, compiles to JavaScript via Pit (v0.1) (http://pitfw.posterous.com). Run: http://trelford.com/PitCalculatorApp.htm

Calculator sample

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57: 
58: 
59: 
60: 
61: 
62: 
63: 
64: 
65: 
66: 
67: 
68: 
69: 
70: 
71: 
72: 
73: 
74: 

open Pit
open Pit.Dom

module Calculator =

    let [<Js>] (?) (el:DomElement) name = el.GetAttribute(name)
    let [<Js>] (?<-) (el:DomElement) name value = el.SetAttribute(name,value)
    type DomAttribute = { Name:string; Value:obj }
    let [<Js>] (@=) name (value:'a) = { Name=name; Value=box value }
    let [<Js>] tag name (attributes:DomAttribute list) =
        let el = document.CreateElement(name)
        for a in attributes do el.SetAttribute(a.Name,a.Value.ToString())
        el

    let [<Js>] display =
        tag "input" ["type"@="text";"value"@=0;"style"@="text-align:right"]
    let [<Js>] mutable operation : (int -> int) option = None
    let [<Js>] mutable append = false

    let [<Js>] enter s =
        s, fun () ->
            let value = display?value
            if append then display?value <- value + s
            else display?value <- s; append <- true

    let [<Js>] calculate () =
        let value = int display?value
        operation |> Option.iter (fun op ->
            let newValue = op value
            display?value <- newValue.ToString() 
        )
        operation <- None

    let [<Js>] operator op () =
        calculate ()
        append <- false
        let value = display?value |> int
        operation <- op value |> Some
   
    let [<Js>] add = (+) 
    let [<Js>] sub = (-)
    let [<Js>] mul = (*)
    let [<Js>] div = (/)

    let [<Js>] buttons =
        [[enter "7"; enter "8"; enter "9"; "/", operator div]
         [enter "4"; enter "5"; enter "6"; "*", operator mul]
         [enter "1"; enter "2"; enter "3"; "-", operator sub]
         [enter "00"; enter "0"; "=", calculate; "+", operator add]]

    [<DomEntryPoint>]
    let [<Js>] main() =
        let table = (tag "table" [] |> DomTable.Of)  
        let tr = tag "tr" []
        let td = tag "td" ["colspan"@="4"]
        td.AppendChild display
        tr.AppendChild td 
        table.AppendChild tr 
        buttons |> List.iter (fun row ->
            let tr = tag "tr" [] 
            row |> List.iter (fun (text,action) ->
                let td = tag "td" []
                let input = 
                    tag "input" ["type"@="button";"value"@=text;"style"@="width:32px"]
                input |> Event.click |> Event.add (fun _ -> action ())
                td.AppendChild input
                tr.AppendChild td
            )
            table.AppendChild tr
        )
        let div = document.GetElementById "calculator"
        div.AppendChild table

// Note: add this div to body of project's HTML page: <div id="calculator"></div>
module Calculator

from Pit
type JsAttribute = ReflectedDefinitionAttribute

Full name: Pit.Snippet.JsAttribute
val el : DomElement
Multiple items
type DomElement =
  inherit DomObject
  new : unit -> DomElement
  member AppendChild : value:DomElement -> unit
  member GetAttribute : name:string -> string
  member SetAttribute : name:string * value:string -> unit

Full name: Pit.Snippet.DomElement

--------------------
new : unit -> DomElement
val name : string
member DomElement.GetAttribute : name:string -> string
val value : string
member DomElement.SetAttribute : name:string * value:string -> unit
type DomAttribute =
  {Name: string;
   Value: obj;}

Full name: Pit.Calculator.DomAttribute
DomAttribute.Name: string
Multiple items
val string : value:'T -> string

Full name: Microsoft.FSharp.Core.Operators.string

--------------------
type string = System.String

Full name: Microsoft.FSharp.Core.string
DomAttribute.Value: obj
type obj = System.Object

Full name: Microsoft.FSharp.Core.obj
val value : 'a
val box : value:'T -> obj

Full name: Microsoft.FSharp.Core.Operators.box
val tag : name:string -> attributes:DomAttribute list -> DomElement

Full name: Pit.Calculator.tag
val attributes : DomAttribute list
type 'T list = List<'T>

Full name: Microsoft.FSharp.Collections.list<_>
val document : DomDocument

Full name: Pit.Snippet.document
member DomDocument.CreateElement : name:string -> DomElement
val a : DomAttribute
System.Object.ToString() : string
val display : DomElement

Full name: Pit.Calculator.display
val mutable operation : (int -> int) option

Full name: Pit.Calculator.operation
Multiple items
val int : value:'T -> int (requires member op_Explicit)

Full name: Microsoft.FSharp.Core.Operators.int

--------------------
type int = int32

Full name: Microsoft.FSharp.Core.int

--------------------
type int<'Measure> = int

Full name: Microsoft.FSharp.Core.int<_>
type 'T option = Option<'T>

Full name: Microsoft.FSharp.Core.option<_>
union case Option.None: Option<'T>
val mutable append : bool

Full name: Pit.Calculator.append
val enter : s:string -> string * (unit -> unit)

Full name: Pit.Calculator.enter
val s : string
val calculate : unit -> unit

Full name: Pit.Calculator.calculate
val value : int
module Option

from Microsoft.FSharp.Core
val iter : action:('T -> unit) -> option:'T option -> unit

Full name: Microsoft.FSharp.Core.Option.iter
val op : (int -> int)
val newValue : int
System.Int32.ToString() : string
System.Int32.ToString(provider: System.IFormatProvider) : string
System.Int32.ToString(format: string) : string
System.Int32.ToString(format: string, provider: System.IFormatProvider) : string
val operator : op:(int -> int -> int) -> unit -> unit

Full name: Pit.Calculator.operator
val op : (int -> int -> int)
union case Option.Some: Value: 'T -> Option<'T>
val add : (int -> int -> int)

Full name: Pit.Calculator.add
val sub : (int -> int -> int)

Full name: Pit.Calculator.sub
val mul : (int -> int -> int)

Full name: Pit.Calculator.mul
val div : (int -> int -> int)

Full name: Pit.Calculator.div
val buttons : (string * (unit -> unit)) list list

Full name: Pit.Calculator.buttons
Multiple items
type DomEntryPoint =
  inherit Attribute
  new : unit -> DomEntryPoint

Full name: Pit.Snippet.DomEntryPoint

--------------------
new : unit -> DomEntryPoint
val main : unit -> unit

Full name: Pit.Calculator.main
val table : DomTable
type DomTable =
  inherit DomElement
  private new : unit -> DomTable
  static member Of : table:DomElement -> DomTable

Full name: Pit.Snippet.DomTable
static member DomTable.Of : table:DomElement -> DomTable
val tr : DomElement
val td : DomElement
member DomElement.AppendChild : value:DomElement -> unit
Multiple items
module List

from Microsoft.FSharp.Collections

--------------------
type List<'T> =
  | ( [] )
  | ( :: ) of Head: 'T * Tail: 'T list
  interface IEnumerable
  interface IEnumerable<'T>
  member Head : 'T
  member IsEmpty : bool
  member Item : index:int -> 'T with get
  member Length : int
  member Tail : 'T list
  static member Cons : head:'T * tail:'T list -> 'T list
  static member Empty : 'T list

Full name: Microsoft.FSharp.Collections.List<_>
val iter : action:('T -> unit) -> list:'T list -> unit

Full name: Microsoft.FSharp.Collections.List.iter
val row : (string * (unit -> unit)) list
val text : string
val action : (unit -> unit)
val input : DomElement
Multiple items
module Event

from Microsoft.FSharp.Control

--------------------
type Event<'T> =
  new : unit -> Event<'T>
  member Trigger : arg:'T -> unit
  member Publish : IEvent<'T>

Full name: Microsoft.FSharp.Control.Event<_>

--------------------
type Event<'Delegate,'Args (requires delegate and 'Delegate :> Delegate)> =
  new : unit -> Event<'Delegate,'Args>
  member Trigger : sender:obj * args:'Args -> unit
  member Publish : IEvent<'Delegate,'Args>

Full name: Microsoft.FSharp.Control.Event<_,_>

--------------------
new : unit -> Event<'T>

--------------------
new : unit -> Event<'Delegate,'Args>
val add : callback:('T -> unit) -> sourceEvent:IEvent<'Del,'T> -> unit (requires delegate and 'Del :> System.Delegate)

Full name: Microsoft.FSharp.Control.Event.add
val div : DomElement
member DomDocument.GetElementById : name:string -> DomElement

More information

Link:http://fssnip.net/93
Posted:13 years ago
Author:Phillip Trelford
Tags: js , pit

This web site is created using F# and Suave web server. It is hosted on Azure and the source code is on GitHub. Contributions are welcome!

The first version of fssnip.net has been created by @tomaspetricek back in 2010. This web site is a new, open-source and contribution-friendly version.