Render HTML in the browser using the Html module in Elm
Elm provides a declarative way to produce DOM elements and react to DOM events, similar to HTML. Learn how to get Web content on the screen by writing functions that take in data and return Elm’s version of HTML.
[00:00] Let's make a new function here called "renderShips." The goal is to take this data, a bunch of spaceship data, and instead of just spitting out raw text in the browser, I want to actually insert real HTML. Before we actually do that, though, we're going to have to adjust our imports.
[00:13] Right now, we're just importing the text function from HTML. Delete that, and put in two dots instead so that we can import everything from HTML into our modules namespace. Also, we're going to want to import Html.Attributes so that we have access to things like style, for example.
[00:28] Back down to renderShips. This is going to take in a list of ships, and we're going to return a div. Div is a function that comes from the HTML library. It takes two arguments, which are two lists. The first is a list of HTML attributes, and the second is a list of other pieces of HTML.
[00:44] That is the pattern that the whole Elm HTML library uses, so it's good to learn. First thing we want to do is give this div an attribute of style, which takes a list of tuples. A tuple is expressed by these parentheses right here, and a comma inside the parentheses.
[01:00] A tuple is a fixed-length grouping of data, and the data can be different types, unlike a normal list. In this case, we want a tuple of two strings. On the left here, I'm going to type the name of my style, font-family, and on the right of the comma, I'm going to type in the special font name, -apple-system.
[01:15] That value just comes with CSS, and it'll know to use my Apple system font. Let's also give this another style rule by inserting a comma, and putting in another tuple, and typing in padding. Then a comma, and then 1M.
[01:28] Now, let's add some HTML children. First thing I want to do is add an H1. It has no attributes, but it's going to have some children, which are text, ships. Remember, we've got to use the text function whenever we want to render a string.
[01:41] In this case, we need to turn this string into a piece of HTML that we can pass as a child to H1. Next, let's drop in a UL with no attributes. For the children, instead of passing in a normal list, I'm going to call a new function by mapping over a list of data, list.map.
[01:56] Then we'll call a function, renderShip, which doesn't exist yet, and then, we'll pass in ships as the data. Up here, let's make that new function, renderShip, which takes in a ship, and will return an LI with no attributes.
[02:09] It does have some children. That first child is going to be text, ship.name. Second child is going to be text, and then a string-comma-space. Then, let's put in bold, so we'll put in a B tag with no attributes, but some children.
[02:23] Text to string, since the cost of the ship is an int, ship.cost. Now down here at the bottom, we can rid of all the stuff that we had there already. We can just call the function we made, renderShips, and pass in the ships data to it.
[02:38] There we go. We've got some nicely formatted HTML, an H1, and a list with information in it. What we did is we made a function called "renderShips," passed in the ships data. We called a function from Elm called div, which takes in two lists, one of attributes, and one of children.
[02:52] We passed in some attributes for style, and then as children, we passed in an H1. We called the function to generate an unordered list, but instead of passing in an explicit list of children, we mapped over the ships data and generated a list of HTML by calling the function, renderShip.
[03:06] Inside of renderShip, we did some nesting of tags right here, B inside of an LI, and we rendered out to the browser some nice text.