Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
What's new
6
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Switch to GitLab Next
Sign in / Register
Toggle navigation
E
elm-calculator
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Locked Files
Issues
0
Issues
0
List
Boards
Labels
Service Desk
Milestones
Iterations
Merge Requests
0
Merge Requests
0
Requirements
Requirements
List
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Test Cases
Security & Compliance
Security & Compliance
Dependency List
License Compliance
Operations
Operations
Incidents
Environments
Packages & Registries
Packages & Registries
Package Registry
Container Registry
Analytics
Analytics
CI / CD
Code Review
Insights
Issue
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Ryan Frazier
elm-calculator
Compare Revisions
v0.1...v0.2
Source
v0.2
Select Git revision
...
Target
v0.1
Select Git revision
Compare
Commits (1)
Style and layout calculator
· b29f9135
Ryan Frazier
authored
Oct 08, 2019
Add flex-wrap to button container Clear border radius for buttons
b29f9135
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
184 additions
and
8 deletions
+184
-8
package-lock.json
package-lock.json
+1
-1
package.json
package.json
+1
-1
src/Main.elm
src/Main.elm
+108
-3
style.css
style.css
+74
-3
No files found.
package-lock.json
View file @
b29f9135
{
"name"
:
"elm-
calculato
r"
,
"name"
:
"elm-
starte
r"
,
"version"
:
"1.0.0"
,
"lockfileVersion"
:
1
,
"requires"
:
true
,
...
...
package.json
View file @
b29f9135
...
...
@@ -11,4 +11,4 @@
"devDependencies"
:
{
"
elm-live
"
:
"
^4.0.1
"
}
}
\ No newline at end of file
}
src/Main.elm
View file @
b29f9135
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
View file @
b29f9135
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