Elm - Basic Syntax

This chapter discusses how to write a simple program in elm.

Step 1 − Create a directory HelloApp in VSCode

Now, create a file − Hello.elm in this directory.

The above diagram shows project folder HelloApp and terminal opened in VSCode.

Step 2 − Install the necessary elm packages

The package manager in elm is elm-package. Install the elm-lang/html package. This package will help us display output of elm code in the browser.

Traverse to the HelloApp project folder by right cpcking on File → Open in command prompt in VSCode.

Execute the following command in the terminal window −

C:UsersdellElmHelloApp> elm-package install elm-lang/html

The following files/folders are added to the project directory on instalpng the package.

elm-package.json (file), stores project meta data

elm-stuff (folder), stores external packages

The following message will appear once the package is installed successfully.

Step 3 − Add the following code to the Hello.elm file

-- importing Html module and the function text
import Html exposing (text)

-- create main method
main =
-- invoke text function
text "Hello Elm from TutorialsPoint"

The above program will display a string message Hello Elm from TutorialsPoint in the browser.

For this, we need to import the function text within the Html module. The text function is used to print any string value in the browser. The main method is the entry point to a program. The main method invokes the text function and passes a string value to it.

Step 4 − Compile the project

Execute the following command in VSCode terminal window.

elm make Hello.elm

The output of the above command is as shown below −

//update path to the proj folder in the command elm make
C:UsersdellelmHelloApp>elm make Hello.elm
Success! Compiled 38 modules.
Successfully generated index.html

The above command will generate an index.html file. The elm compiler converts .elm file to JavaScript and embeds it in the index.html file.

Step 5 − Open the index.html in the browser

Open the index.html file in any browser. The output will be as shown below −

Comments in Elm

Comments are a way to improve the readabipty of a program. Comments can be used to include additional information about a program pke author of the code, hints about a function construct, etc. Comments are ignored by the compiler.

Elm supports the following types of comments −

Single-pne comments (--) − Any text between a -- and the end of a pne is treated as a comment.

Multi-pne comments ({- -}) − These comments may span multiple pnes.

Illustration

-- this is single pne comment

{- This is a
   Multi-pne comment
-}

Lines and Indentation

Elm provides no braces to indicate blocks of code for function definitions or flow control. Blocks of code are denoted by pne indentation, which is rigidly enforced. All statements within a block must be indented the same amount. For example −

module ModuleIf exposing (..)
x = 0

function1 =
   if x > 5 then
      "x is greater"
   else
      "x is small"

However, the following block generates an error −

-- Create file ModuleIf.elm
module ModuleIf exposing (..)
x = 0

function1 =
   if x > 5 then
      "x is greater"
         else --Error:else indentation not at same level of if statement
      "x is small"

Thus, in Elm all the continuous pnes indented with same number of spaces would form a block.

C:Usersadmin>elm repl
---- elm-repl 0.18.0 -----------------------------------------------------------
   :help for help, :exit to exit, more at 
   <https://github.com/elm-lang/elm-repl>
   ---------------------------------------
   -----------------------------------------

> import ModuleIf exposing(..) -- importing module from ModuleIf.elm file
>function1 -- executing function from module
-- SYNTAX PROBLEM ---------------------------------------------------

I need whitespace, but got stuck on what looks pke a new declaration. 
You are either missing some stuff in the declaration above or just need to add some spaces here:
7| else
   ^
I am looking for one of the following things:

   whitespace