Output text in a browser using the text function in Elm

Install the Elm Platform command-line tools

Write functions and Type Signatures in Elm

Store key-value pairs using Records in Elm

Sequencing Data With Lists in Elm

Render HTML in the browser using the Html module in Elm

Reuse Functions Through Type Variables in Elm

Create Apps Using the Elm Application Architecture

Discover New Packages Using the Elm Package Index

Start Using Elm to Build Web Applications

A record is a set of key-value pairs, similar to objects in Javascript. Record fields can be accessed through dot-notation, or special access functions. Records are fully type-checked and can be described by type aliases.

[00:00] Let's make a new record. Type "dog" right here, and then an equals sign. Now, there's a formatting convention in Elm where we start a record with a curly brace, we end it with a curly brace, and they should on the same line.

[00:13] The first key in the record goes on the same line as the first curly brace. In this case, let's put in the name of the dog, Spock. Now I put a leading comma. This is just the general Elm style. Then we can put our next field, age.

[00:27] Let's give him an age of three years old. Here's our first record. Now, let's print out one of these fields. Get rid of this string, and we're going to type dog.name. Now, let's load it up in the browser. Spock, there we go.

[00:40] We've accessed the name field on the dog record. Elm supports another way of accessing fields. Let's take a look at what that looks like, .name, dog. I've taken the .name off the end, and I've put it before as a function.

[00:51] When I write something like this, with a dot at the beginning, Elm knows to generate a small function that takes a record, and looks for a field with that name on the function. Let's save the file and see if it works. It does. Now, let's try rendering Spock's age instead of his name.

[01:05] It looks like we got a compiler error. The pipe is expecting the right argument to be a string, but it's a number. That's because text expects just a string, and the age field is taking an int. We can fix that by throwing right in here toString, which is a global function in Elm that takes any value, and turns it into a string.

[01:24] Let's check that out. It works. Now, let's make a function for rendering our dog to a string. Let's call it "renderDog," and we'll start out with a type definition here. I want to take a dog, and return a string. The problem is, I don't know how to represent the dog as a type yet.

[01:37] That's because we haven't given it a type. Up here at the top, above dog, we'll type type alias dog equals. Type alias means that I'm giving a new name to a type. Records can be types all in themselves. Right here, the first field, I'm going to type name.

[01:56] Then, I'll give it a type, which is string. Then, I'll type age, and I'll give it a type, which is int. Now, I can refer to this type, which is a record, with the name dog. Down here in renderDog, I can type dog, string. I'm going to take a dog, and return a string.

[02:12] Then, I'll give the definition for the function right here. renderDog dog equals, and we could do dog.name plus-plus, comma, plus-plus dog.age. Now, let's use that function instead of this function, renderDog, dog. Looks like we got a compiler error.

[02:29] The type annotation is saying that renderDog takes a dog, and returns a string. That dog should have a field called age, which is an int. It's inferring that the age field is actually a string. That's because we've used it incorrectly right here.

[02:42] We're trying to add an int, which is dog.age, onto a couple of strings. First, we've got to convert this to a string, which we can do by adding toString in front of dog.age. Let's try it again. It works. Here, we've defined a new record called dog.

[02:56] We've given it a couple of fields of different types. We've accessed those fields down here inside of the renderDog function, and we've made a new type alias so that we can refer to this record in type signatures.

Course

Start Using Elm to Build Web Applications

Store key-value pairs using Records in Elm

Share this video with your friends