Check out a free preview of the full Using JavaScript in Websites course

The "Dog App Exercise" Lesson is part of the full, Using JavaScript in Websites course featured in this preview video. Here's what you'd learn in this lesson:

Brian introduces the exercise, and shows how to construct an animation using CSS.

Preview
Close

Transcript from the "Dog App Exercise" Lesson

[00:00:01]
>> Brian Holt: This is gonna be your project, but I'm gonna help you get started today.
>> Speaker 2: Question on this.
>> Brian Holt: Sure.
>> Speaker 2: What is the Ajax then?
>> Brian Holt: The Ajax is the actual, it's like the Fetch part.
>> Speaker 2: Okay.
>> Brian Holt: When you are doing Fetch you are doing Ajax.

[00:00:16]
>> Speaker 2: Okay.
>> Brian Holt: So this is the newer way of doing it. There was an old way that was 9000 times more complicated. I have to copy and paste stuff every single time I had to do it. Fetch came out, maybe, it was probably was invented 8 years ago but we could really only use it like 4 or 5 years ago.

[00:00:35]
It made this like tons easier. Yeah, when you're doing Fetch your doing Ajax. So the next thing we're gonna be doing is I want you to, I wanna show you a little bit how to read API documentation because that's something inevitably you're gonna have to do if you're gonna be doing anything like this.

[00:00:57]
They're actually quite impressed with their documentation because it's not always this good. Here it says like, hey, if you request this it's gonna look something like this. And actually, this one, it literally shows you what it's gonna look like.
>> Brian Holt: So in fact, if you just copy and paste this, this little URL right here, you get all of these dogs back.

[00:01:29]
And some of them have breeds and sub breeds. For now, you can just go ahead and ignore the sub breeds. We're just gonna focus on the breeds, just like the overarching breeds.
>> Brian Holt: I don't think they even have harmonies on here. That's what Luna is. She's a harmonies and that's very important.

[00:01:47]
I feel like you need to know that. Anyway, so what we're gonna do here for the exercise,
>> Brian Holt: I want you to make something like that. And then up here is a drop down of all the various dog breeds that you're gonna have to get from the API.

[00:02:10]
And then whenever I select one of these like a Pomeranian, it'll change this to show you a little Pomeranian.
>> Brian Holt: Okay, so that dog doesn't look happy. [LAUGH] So I'm gonna show you a couple of things here. So one of the things I want you to work on cuz I think they are cool is notice that whenever I change this is a little dog spinner, right?

[00:02:38]
That's kinda cool, right? It's just an emoji that I have a CSS animation that just makes it rotate. That's all it is. So we're gonna show you a couple things. So you're able to do that.
>> Brian Holt: So we're gonna have you first request a list of all breeds from the API.

[00:03:03]
What you're gonna do is that's gonna give you back this, right, all of these various breeds.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now