-
Notifications
You must be signed in to change notification settings - Fork 2
/
View.elm
91 lines (83 loc) · 2.55 KB
/
View.elm
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
module View exposing (..)
import String as String
import Html exposing (Html, text, div, button)
import Html.App as App
import Html.Attributes exposing (style)
import Html.Events exposing (onClick)
import Model exposing (Msg (Number, Op, Answer),
Operation (Addition, Subtraction, Multiplication, Division, ParensOpen, ParensClose, None, ClearLast, Calculate, Dot, Clear),
Model)
-- STYLES
centerStyle : List (String, String)
centerStyle =
[ ("display", "flex"),
("align-items", "center"),
("justify-content", "center"),
("height", "100vh")]
alignTextRight : List (String, String)
alignTextRight =
[ ("text-align", "right")]
btnStyle : List (String, String)
btnStyle =
[ ("width", "50px"),
("height", "50px"),
("border", "1px solid transparent"),
("border-color", "#AAA"),
("margin", "2px"),
("text-align", "center"),
("border-radius", "2px"),
("cursor", "pointer"),
("background-color", "#FFF"),
("user-select", "none"),
("-webkit-user-select", "none"),
("-moz-user-select", "none"),
("-ms-user-select", "none")]
-- VIEWS
msgToString: Msg -> String
msgToString msg =
case msg of
Number n -> toString n
Answer n -> toString n
Op o ->
case o of
Addition -> "+"
Subtraction -> "-"
Multiplication -> "*"
Division -> "/"
ParensOpen -> "("
ParensClose -> ")"
_ -> ""
listToString: List Msg -> String
listToString list =
list
|> List.reverse
|> List.map msgToString
|> String.join " "
calcBtn: String -> Msg -> Html Msg
calcBtn string msg =
button [onClick msg, style btnStyle] [text string]
view: Model -> Html Msg
view model =
div [style centerStyle] [
div [] [
div [style alignTextRight] [text (listToString model.list)],
div [] [calcBtn "(" (Op ParensOpen),
calcBtn ")" (Op ParensClose),
calcBtn "C" (Op Clear),
calcBtn "CE" (Op ClearLast)],
div [] [calcBtn "7" (Number 7),
calcBtn "8" (Number 8),
calcBtn "9" (Number 9),
calcBtn "/" (Op Division)],
div [] [calcBtn "4" (Number 4),
calcBtn "5" (Number 5),
calcBtn "6" (Number 6),
calcBtn "*" (Op Multiplication)],
div [] [calcBtn "1" (Number 1),
calcBtn "2" (Number 2),
calcBtn "3" (Number 3),
calcBtn "-" (Op Subtraction)],
div [] [calcBtn "0" (Number 0),
calcBtn "." (Op None),
calcBtn "=" (Op Calculate),
calcBtn "+" (Op Addition)]]]