This is a repo to learn the fundamentals of Elm Programming Language.
elm init
- The elm.json file decribes your project.
- It lists all of the packages you depend on, so it will say the particular version of elm/core and elm/html that you are using.
- It makes builds reproducible.
- The src/ is where all of your Elm files live.
- Always start with a file called
src/Main.elm
.
elm reactor
- You can go to http://localhost:8000 and browse through all the files in your project.
- If you navigate to the .elm files, it will compile them for you.
You can also navigate to the src folder and run the command elm make Main.elm. After that you can run the elm reactor command.
elm make Main.elm
So the first program is Hello World! To create this program simply navigate to the src folder and create a new file named Main.elm. Inside the Main.elm file, copy the follwing code.
module Main exposing (main)
import Html exposing (text)
main =
text "Hello World!"
- So we have created a function called main that contains datatype text. And the text is "Hello World!".
- You can then go ahead and compile it as discussed above.
In this tutorial, we create a program that creates a HTML Div and add text to it. We also create a function to add two parameters.
The code is as shown below.
module Main exposing (main)
import Browser
import Html exposing (text, div)
add a b =
a + b
init =
{value = 0}
view model =
div [] [text "My Second Elm Program"]
update model =
model
main =
Browser.sandbox
{
init = init,
view = view,
update = update
}
We can also generate a JavaScript code and save it in .js file.
elm make Main.elm --output output.js
Lets explain the following code line by line.
module Main exposing (..) -- Line 1
import Browser -- Line 2
import Html exposing (text, div) -- Line 3
-- Function to add two numbers
add a b = -- Line 4
a + b -- Line 5
init = -- Line 6
{value = 0} -- Line 7
view model = -- Line 8
div [] [text "How Elm Works"] -- Line 9
update model = -- Line 10
model -- Line 11
main = -- Line 12
Browser.sandbox -- Line 13
{ -- Line 14
init = init, -- Line 15
view = view, -- Line 16
update = update -- Line 17
} -- Line 18
- Line 1
- This is a module declaration containing the name of the module and exposing indicates that all the functions in this module can be used by other modules.
- Line 2 and 3
- Imports modules which contains UI components (Browser and Html). They are necessary for rendering some content on a webpage.
- Line 4 and 5
- Comments in an elm begins with --.
- Specify function add and specify two parameters a and b.
- It adds the parameters and returns the sum.
- Line 6 and 7
- Sets initial value of the model.
- Line 8 and 9
- Takes the model as its first parameter. It returns a div tag which takes two parameters. The first is the list of attributes while the second is list of contents that go inside the div.
- Line 10 and 11
- The update function also takes the model as its first parameter. It should return the updated value of the model.
- Line 12 to 18
- This is the main method. It calls the Browser.sandbox() which takes a record having three properties:
init - the initial model.
view - function that renders the model on the screen.
update - function that update the model when something changes.
- This is the main method. It calls the Browser.sandbox() which takes a record having three properties:
In the above example, the text that displays on the screen is a hardcoded text passed in to the view.
But since the view takes the model as a parameter hence we would like to display the model rather than a hardcoded value.
To achieve that we would need to replace the text with a model.value
.
And since model.value
is a number whereas text attribute of the dic tag expects a string, we would use fromInt() function.
view model =
div [] [text (fromInt model.value)]
We would therefore need to import the fromInt() function from String module.
import String exposing (fromInt)
The next step is to apply what we have discussed in the Rendering a model section above.
module Main exposing (main)
import Browser
import Html exposing (text, div)
import String exposing (fromInt)
add a b =
a + b
init =
{value = 99,
name = "Morris"}
view model =
div [] [text (fromInt model.value)]
update model =
model
main =
Browser.sandbox
{
init = init,
view = view,
update = update
}
In this case you have to import the necessary functions from Html module. These functions include button and input functions.
You can also add add a ClickHandler to the button by importing onClick() function from Html.Events and then add the onClick parameter to the button function. This is as shown below.
Step 1 - Import onClick() from Html.Events
import Html.Events exposing (onClick)
Step 2 - Add onClick as first parameter to the button.
button [onClick Add] [text "Add"]
Step 3 - Create a message. This is anything that can be done and affects the model.
type Messages =
Add
Step 4 - Update the model using the update function.
update msg model =
case msg of
Add ->
model
Step 5 - Logging messages
- Import Debug
import Debug exposing (log)
- In the update function, write a code to log some messages enclosed in a
let... in
block.
update msg model =
let
logmessage = log "here" "Button Clicked"
logmessage2 = log "model" model
in
case msg of
Add ->
model