Render API Data to the DOM

[00:00:00]
>> Once we have our list of repos, they'll end up in this repos variable. And then we can turn that into markup. So I'm gonna just create a variable called markup, and we will use our repos, and I'm gonna map over each one. The formatting gets a little wonky on this, but just bear with me.

[00:00:22]
So I want each of these to be a list item. And I know that I'm kind of doing some goofy stuff with writing markup inside of templates, instead of creating HTML elements. I wanted this to be a quick example, so we're kinda taking some shortcuts here. And inside of it, we wanna link to each repo, so we will do a link to the HTML URL for the repo.

[00:00:52]
And then we're gonna display the repo name. And then let's also show the number of stars. So I'm gonna open up my emoji palette which is command CTRL + Space. Let's grab a star. You can judge me for my most use and then I'm gonna get the star-gazer underscore account.

[00:01:19]
And that gives us like each repo now has been transformed into one of these list items. And to make those into a single string, I'm just gonna join them on an empty string. By default, if you run joining with us commas, we don't want commas. So just using an empty string.

[00:01:42]
And then finally, I can get an object or we need to get an element that we can. Insert this into. Actually, before we write this part, let's go ahead and create that element so that we've got somewhere to attach it. So in our main in HTML, I'm going to create just another heading that said Recently Updated Code Projects.

[00:02:08]
And let's set this to be a Div and we'll give it an ID of content. And because we know we're gonna do some script stuff, I'm going to just show this. If we were gonna be really responsible and handle cases where JavaScript was disabled, we could wrap all of this and no script and not a note.

[00:02:34]
We're not going to do that here, because again, we're just trying to show the concepts, not build production apps. So once we've got this in here, if I run this again, I'll just run npx serve. We'll see that we've got recently updated code products or projects and it's showing loading.

[00:02:54]
So, let's go make that actually work. So we're gonna need to get this ID and insert that mark up or writing into it. So, start by saying const content = document.getelementbyId and the idea that we want to get is content, if I could spell it right. So now that we've got our content, we can just set the markup inside of it.

[00:03:18]
So I'm going to do content dot inner HTML. And I'm gonna set it to be a list. We'll put our markup inside and then we'll close our list. All that on the screen, so everybody can see it. So, to walk through this one more time, top to bottom, what we're doing is we've defined the function called list repos, it accepts a username and once we call this function, what'll happen it will load the repositories from GitHub for a given username, and store those in a variable called repos.

[00:03:56]
It'll also handle the case where something goes wrong where we get a rejected API request or anything like that. Once we have our repos, we map over each one and convert it into a string of markup just a list item for a bulleted list. And we store that value in markup.

[00:04:14]
We join each of those, created markup items into a single string. So now we've got one long string of list items that is stored in this markup variable. Then we find the content div. It's got an idea of content on it. And put our markup inside of it.

[00:04:32]
So we'll be showing a list. So what we haven't done yet is we haven't actually called this function. And for illustrative purposes, we're just gonna call it at the bottom. And I'm going to put in my GitHub username feel free to put in yours or someone else's this is a public API, so you can just query this.

[00:04:55]
So, now, after we've defined it, and this is something that is a preference of mine. But I always like to define things before I use them, so that it tends to help me when I'm reading a file to not see things that I have to like scroll at the bottom to figure out where they were declared.

[00:05:10]
So this is just my quirk, we could also put this up at the top if we want it. So, now that I have called this, we need to get it into our index.html. So back in our index, I'm going to write before the closing body tag at a script tag, but I wanna use it as a module so I'm just gonna signify that it's the Essex code.

[00:05:33]
And then, I'm going to set the source to be main.js. And that should be that.
>> Good catch everyone. Thank you. And now if I reload, we get a list of repos. This is kind of at its core. The simplest iteration of a jam stack app. What we've done is we've taken some markup some static assets, we have used JavaScript to hit a third party API.

[00:06:10]
And then we're getting that onto the screen. So we've got some kind of interactivity. If we wanted to, we could add like an input or something where you could put in someone else's username and get a new list whenever you updated that. That would get into some, I think that would just be a little too much for completely vanilla JavaScript without making this a much longer workshop.

[00:06:31]
So instead, we're going to call this good, and then we'll move on to our next section, which is going to be deploying the site, so let's get this thing up on the Internet. So what I will do here is get my terminal open again. And let's save our work.

[00:06:52]
And I'm gonna do get, let's add everything, let's check it, okay? So we've got our JavaScript file and our HTML file. I'm gonna commit and say, feature basic and we add script.