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

 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: 
75: 
76: 
77: 
namespace Pit

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)
    let [<Js>] tag name attributes =
        let el = document.CreateElement(name)
        for (name,value) in attributes do
            el.SetAttribute(name,value)
        el

    let [<Js>] display = tag "input" ["type","text";"value","0"]
    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>] total () = calculate ()          

    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"; "=", total; "+", operator add]]               

    [<DomEntryPoint>]    
    let [<Js>] main() =                                                                                              
        let table = (tag "table" [] |> DomTable.Of)  
        let td = tag "td" ["colspan","4"]
        td.AppendChild display
        let tr = tag "tr" []
        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>
namespace Pit
module Calculator

from Pit
val el : 'a
val name : 'a
val value : 'a
val tag : name:'a -> attributes:seq<'b * 'c> -> 'd

Full name: Pit.Calculator.tag
val attributes : seq<'a * 'b>
val display : obj

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 value : 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 total : unit -> unit

Full name: Pit.Calculator.total
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
val main : unit -> 'a

Full name: Pit.Calculator.main
val table : obj
val td : obj
val tr : obj
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 : obj
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 : 'a

More information

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