...
 
Commits (1)
{
"name": "elm-calculator",
"name": "elm-starter",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
......
......@@ -11,4 +11,4 @@
"devDependencies": {
"elm-live": "^4.0.1"
}
}
\ No newline at end of file
}
module Main exposing (main)
import Browser
import Html exposing (Html, h1, text)
import Html exposing (Html, button, div, h1, text)
import Html.Attributes exposing (class)
-- MODEL
type alias Model =
......@@ -17,6 +22,10 @@ type Msg
= NoOp
-- UPDATE
update : Msg -> Model -> Model
update msg model =
case msg of
......@@ -24,10 +33,106 @@ update msg model =
model
-- VIEW
type Color
= Yellow
| Gray
| White
colorToString : Color -> String
colorToString color =
case color of
Yellow ->
"bg-yellow"
Gray ->
"bg-gray"
White ->
"bg-white"
type Size
= Single
| Double
| Triple
sizeToString : Size -> String
sizeToString size =
case size of
Single ->
"single"
Double ->
"double"
Triple ->
"triple"
cell : Size -> Color -> String -> Html Msg
cell size color content =
button
[ class <|
String.join " " <|
[ "cell", sizeToString size, colorToString color ]
]
[ text content ]
section : Html Msg
section =
div [ class "section" ]
[ cell Single Gray "←"
, cell Single Gray "C"
, cell Single Gray "CE"
, cell Single Yellow "÷"
, cell Single White "7"
, cell Single White "8"
, cell Single White "9"
, cell Single Yellow "×"
, cell Single White "4"
, cell Single White "5"
, cell Single White "6"
, cell Single Yellow "-"
, cell Single White "1"
, cell Single White "2"
, cell Single White "3"
, cell Single Yellow "+"
, cell Single White "0"
, cell Single White "."
, cell Double Yellow "Enter"
]
inputBox : Float -> Html Msg
inputBox num =
div
[ class "input-box"
]
[ text <| String.fromFloat num
]
view : Model -> Html Msg
view model =
h1 []
[ text "Hello Elm!" ]
div []
[ h1 [ class "h1" ] [ text "RPN Calculator" ]
, div
[ class "calculator" ]
[ inputBox 78.9
, section
]
]
-- PROGRAM
main : Program () Model Msg
......
html,
body {
font-family: sans-serif;
font-style: sans-serif;
font-family: 'Montserrat', sans-serif;
}
.h1 {
width: 100%;
text-align: center;
padding-top: 3em;
font-style: italic;
}
.bg-white {
background-color: #fff;
}
.bg-gray {
background-color: #ebebeb;
}
.bg-yellow {
background-color: #ffd90b;
}
.calculator {
max-width: 25em;
margin: auto;
}
.input-box {
text-align: right;
padding: 12px;
border: 1px solid rgba(0, 0, 0, .3);
border-bottom: none;
}
.section {
height: 250px;
border-bottom: 1px solid rgba(0, 0, 0, .3);
border-right: 1px solid rgba(0, 0, 0, .3);
display: flex;
flex-wrap: wrap;
}
.cell {
padding: 0;
margin: 0;
border: none;
height: 50px;
text-align: center;
font-size: 1.6em;
transition: 100ms;
border-left: 1px solid #c8c8c8;
border-top: 1px solid #c8c8c8;
border-radius: 0;
}
.cell:hover {
filter: brightness(90%);
cursor: pointer;
}
.single {
width: 25%;
}
.double {
width: 50%;
}
.triple {
width: 75%;
}
.error {
background-color: rgba(255, 176, 145, 0.712);
color: rgb(105, 30, 0);
}
\ No newline at end of file