Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 830 of the free egghead.io lessons, plus get Elm content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Just one more step!

Check your inbox for an email from us and click link to unlock your lesson.



Output text in a browser using the text function in Elm

2:23 Elm lesson by

This lesson shows a super simple, yet pleasant, look at the smallest Elm example. We will use the text function from the Html module to display text in a browser.


egghead.io comment guidelines

Avatar
egghead.io

This lesson shows a super simple, yet pleasant, look at the smallest Elm example. We will use the text function from the Html module to display text in a browser.

Avatar
Stephen

This fist lessons poses far more questions than it asks. OK so setup is the following lesson, but I must say, watching this first lesson does not provide me with any insight whatsoever to this course, to ELM or related. What was the point, and how this sets up one for an ELM course, is beyond me. The Narrative is fast, confusing, and not at all useful at this point. In fact, it puts me off the rest of the course. Needs some revision, don't know why it was provided on Egghead in its current form.

Avatar
Murphy

Thanks for the feedback, Stephen. We were thinking it'd be a little "get your feet wet" before jumping into the technicalities of setting up. But sounds like we could certainly improve on the execution.

In reply to Stephen

I'm going to make a new file here, and I'm going to call it main.elm. The very first thing I'll do is type the word "module" to make a new elm module, and then I'm going to type the same name of the file that we just made, module main. Then I'll type "exposing and ..," that just tells elm that everything inside this file will be exposed for import later.

We don't really need it right now, but it's required, so you can just type it in and forget it. I'll define anew value here at the top level called main. This value can either be a function or a constant, and elm uses this to know how to start your program.

Let's just pass in a string and see what happens. Hello. Save the file, and then over here on the right side, Elm's got a nifty little tool that comes with it, a dev server, and that's called Elm Reactor. You can see that it's listening on localhost:8000. Let's pop open Firefox here, and go to that address, localhost:8000.

You can see that it's got a list of files, and main.elm is here. I'm going to click on it and see that Elm compiles my project as I wait. Uh-oh, it looks like we've got some errors. The main value has an unsupported type. It needs HTML, SVG, or a program, and we gave it a string.

Let's actually pass in the HTML type, but in order to do that, we're going to have to get the HTML library downloaded. Let's stop Elm Reactor and type in "elmpackage install elm-lang/HTML." Hit enter, and it's going to ask you if that's OK and I'm going to say it is OK. Do I approve of this plan? Yes, I do, I always approve of this plan.

Now let's start Elm Reactor again, and now let' go back to our code and import HTML. Now we're going to expose a function from HTML called text. This function takes a string and converts it into an HTML nod, which is what main wanted. Let's go ahead and type text, that's how invoke a function in Elm.

Now we're going to pass it a parameter by putting in a space, and then putting in the string we want to pass to it. Let's modify this string to be a little bit more polite. Save the file and open up Firefox, reload, and there we go, we've got a string.

Here's what we did. We defined a new module, we exposed all of the values inside the module for import elsewhere. We imported the HTML library after installing it, and we exposed the function text.

Here we used the function text to convert a string into an HTML value and assigned that to the special main function. Then we saved our file and ran it with Elm Reactor, and got something beautiful in the browser.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?