- ELM - Discussion
- ELM - Useful Resources
- ELM - Quick Guide
- ELM - Subscriptions
- ELM - Commands
- ELM - Messages
- ELM - Package Manager
- ELM - Architecture
- ELM - Error Handling
- ELM - Records
- ELM - Tuples
- ELM - List
- ELM - String
- ELM - Functions
- ELM - Loop
- ELM - Decision Making
- ELM - Operators
- ELM - Variables
- ELM - Data Types
- ELM - Basic Syntax
- ELM - Environment Setup
- ELM - Introduction
- ELM - Home
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
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.
![Create directory](/elm/images/create_directory.jpg)
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.
![package installed](/elm/images/package_installed.jpg)
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 −
![Open browser](/elm/images/open_browser.jpg)
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: whitespaceAdvertisements