package-lock.json

 {
-  "name": "elm-calculator",
+  "name": "elm-starter",
   "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,

package.json

@@ -11,4 +11,4 @@
   "devDependencies": {
     "elm-live": "^4.0.1"
   }
-}
\ No newline at end of file
+}

src/Main.elm

 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

style.css

+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