Manipulating Values Exercise

[00:00:00]
>> Richard Feldman: Great, let's dive into the exercise. So we're gonna work, again we're building up this same homepage that we've been building up in the previous exercise. Now we're gonna add something to the right that's got a list of popular tags. So we're gonna use list.map to iterate over a list of tags and actually display in the right hand side there a list of whatever tags there are.

[00:00:24]
So let's hop over here. Hey, the terminal came up this time, great. [LAUGH] And go into part2. So once again, we see the same kind of stuff that we did before. There is a new directory down there called source. So typically speaking, when you do your Elm programs, it's not normal to put all your files in the top level.

[00:00:43]
Usually you put them in a sub directory and usually that sub directory is called source. So compared to the previous one, I've moved us a little bit closer to the way things are done in normal Applications. Contents of source, we have only one file, main.elm, so all I did was move it into there.

[00:00:59]
However, that does mean that we're going to run the build a little bit differently than we did last time. So if I open up the readme here, notice that now instead of elm make Main.elm, it's elm make src/Main.elm. Otherwise, everything else is the same as before. So let's go back here, and compile that, okay?

[00:01:23]
And also worth noting that previously, we had, in the browser, had,
>> Richard Feldman: The part one index.html up there in the location bar. We do need to open a different index.html for part two. It's gonna be different for the part one index.html. So you can see over here we have the same header as we did before but now we have this popular tabs thing over there on the right.

[00:01:48]
So et's take a look at the code that we're going to be working on to actually populate that thing. Because right now, popular tags is looking kind of sad with no actual popular tags yet. All right, so here we have the same module structure as before, the same imports as before.

[00:02:04]
Again, not quite gonna cover that yet. We now have a function called viewTags, and it takes as an argument a list of tags. And we have a let expression inside. So we have it TODO for what we're gonna do in there. Then we also have a viewTag function, which ultimately viewTags is going to end up calling.

[00:02:22]
And finally we have our main, just like before, which has another let expression for the tags. Currently these are hardcoded, but in the future we will move them into something that we actually get from the server. And then finally, we have a third TODO down here. So there are a grand total of three TODO's.

[00:02:38]
First up we have inside viewTags, then we have one another one inside viewTag, and finally we have one inside of main.