Transcript from the "Handling the Response" Lesson
[00:00:00]
>> Brian Holt: So here in the index.html, I have a doggos class right there. It's empty div, nothing's in it. What I wanna do is every time someone requests a dog, I want to append an image to it, okay? So what I'm gonna do here in Doggos.js, here inside of the .then, we can get rid of that console down there.
[00:00:23]
I'm gonna say const img = document, and there's a thing here called createElement that we haven't typically used yet. But as you might imagine, this creates a brand new IMG tag, right? It hasn't attached to the DOM yet, so we'll do that here in a second, but it actually creates a new element.
[00:00:43]
So we're gonna say create a new IMG, okay? And I'm gonna say image.src = data.message, right?
>> Brian Holt: And I'm gonna say image.alt, the alt text that's gonna be on it is gonna be Cute doggo.
>> Brian Holt: Then what I'm gonna say here is, I'm gonna say document getElement by,
[00:01:17]
>> Brian Holt: What did I do up there? QuerySelecter rather, querySelector.doggos, okay? And then here I'm gonna say .appendChild.
>> Brian Holt: img.
>> Brian Holt: Or you could put this on the same line if you want to.
>> Brian Holt: That's up to you.
>> Brian Holt: So line 8 here, I created a new IMG tag, right?
[00:01:56]
It doesn't exist yet on the DOM, I'm creating it programatically with JavaScript. I'm setting that image tags source to whatever message I get back from the API and sending the alt text to cute doggo. And then I'm appending that to inside of the doggos HTML tag that I already have.
[00:02:17]
That's what does, is it just takes that element and it just tags on to the end whatever you put in there, right?
>> Brian Holt: Make sense?
>> Brian Holt: So now if you save and refresh this, hopefully you should start seeing some dog pictures comeback from the API. And every time that you refresh the page you should see a new one.
[00:02:42]
>> Brian Holt: [LAUGH] I guess that dog's famous. Dog has more trophies than I do. So again, you might image, rather than requesting data from dog.co, you might be requesting tweets, right? And showing the latest tweets about your favorite sports team, or politics, or something like that.
>> Brian Holt: And this is where you do all the processing or whatever you want to do with that data.
[00:03:15]
>> Brian Holt: So this is cool, but,
>> Brian Holt: What if you wanna add a lot a dog pictures, cuz what's better than one dog picture is definitely two dog pictures? So what I'm gonna do here is I'm gonna go into the index.html, and I'm going to add another button.
>> Brian Holt: And I'm just gonna say here at the top button.add-doggo or something like that, and we are gonna put an add-doggo button.
[00:03:50]
>> Brian Holt: Okay, save that.
>> Brian Holt: What I'm gonna do here is I'm actually going to put all of this inside of a function. So I'm actually gonna just call this function addDoggo.
>> Brian Holt: And I'm just gonna cut all of this and move it into there. Or if you're using VS Code you can just hold Alt and I can just hit up and down and it will move it up and down in my code, which is kind of nice.
[00:04:27]
>> Brian Holt: And now I have this function, addDoggo, that I can call as many times as I want.
>> Brian Holt: And then here at the bottom I'm just gonna add an event listener document.addEventListener
>> Brian Holt: Sorry, not document, but rather querySelector.add-doggo,
>> Brian Holt: .addEventlistener.
>> Brian Holt: And whenever someone clicks, I'm just gonna call addDoggo.
[00:05:08]
>> Brian Holt: Now, if you want you can just literally move this function right here and put it right there. Either works, right?
>> Brian Holt: So now hopefully it won't load one on initial load, right, because we never called addDoggo yet. But if I click addDoggo,
>> Brian Holt: You can see this one's quite large.
[00:05:34]
But if I click it again, you can see there that it keeps adding things to API. If I click it a bunch of times there's lots of dogs that come through. Does that .then thing make sense to you? It's like here I want you to do something that's gonna take some time.
[00:05:51]
And then you call .then, it's like okay, after that's completed and come back, right, then do this other thing. This takes time, right? The processing of the data requires the browser to go through and do a bunch of complicated parsing and such. It's like go do that in the background and then once you've finished, come back and tell me about it, and that's what the .then is.
[00:06:12]
It's like, do this, then do this, then do this, then do this, then do this. And you can keep doing that indefinitely as well.