We already created
Main module for our application. Let’s add some style to application text along with our first photo. This post is part of the functional language series, and it is based on a remarkable book Programming Elm Build Safe and Maintainable Front-End Applications by Jeremy Fairbank.
Working On Virtual DOM Tree
For now, our Picshare application has only text Picshare. We will expand it with an image and image caption text. Remember that beside
Picshare.elm file, we have
main.css that are needed to have a working function in the Browser.
Do steps 1. to 4. as instructed in the image above.
-- Is a comment for your help.
picshare git:(master) ✗ elm make src/Picshare.elm --output picshare.js
index.html in Browser:
Let’s add img by following comments in the source file by following steps from 1. to 8.:
And our first photo (do not forget to compile):
cssmakes your application pretty
- How to modify Virtual DOM
maincan only have one root element
- Do not miss the closing
]while expanding Virtual DOM!