TL;DR
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 index.html and 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.
Compile Elm to Javascript:
picshare git:(master) ✗ elm make src/Picshare.elm --output picshare.js
And open 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):
Remember
cssmakes your application prettycssgoes intoclassfunction- How to modify Virtual DOM
maincan only have one root element- Do not miss the closing
]while expanding Virtual DOM!
