Introduction

Good morning, good afternoon, good evening, no matter where you are, hope you all are doing well. Welcome back. We online, we online took us a minute, but we online let's go. We ain't outside. We online what's going on everybody? Thanks for hanging on class isn't canceled we're back in the building way online third try The I was a dum-dum Stream labs updated. I was like, ah, all right. I'll let the stream labs update go through. No problem Nothing checked on my settings checked everything looked good and then went to go live So everything was good until I went to go live. Once I went live, it was like, Oh, you need a new graphics driver. So then I had to go get the new graphics driver. And that was some, some fun stuff, but we're back. We're online. We're ready to continue the best week ever. Thank you for being here.

I think I should probably send out another, like we're actually live message. Let's go ahead and make sure we actually, uh, let folks know that we're here. I'm gonna do that real quick Looks like we're looking good. Everyone can hear it looks like we're doing good. All right, let's send out one more message Actually, I live all right, there we go. We're actually live cool. There you go Maybe maybe that got some of the riff-raff out. Maybe it's just the cool kids left Alrighty folks, welcome back. Hey, we had a couple people come in. Hello, it's Rufio. Hey, thank you for the raid. I appreciate it. Thanks for coming through. Lee, 1097, hey, thank you for the raid. Thanks for bringing some folks through.

Alright folks, we gotta finish up the best week ever. And you know what we like to do, we always like to start off with some lovely questions. And so the question of the day was what was your best? What was your favorite part of the best week ever? That's today's question. What was your favorite part of the best week ever? We had a lot of stuff folks. There's a lot of things that happened. We uh, we had Not one but two new members of the stream team. Hello. It's Rufio mine wolf joining the stream team We had Nick's a wonderful talk the first Friday with friends session We had a sponsored stream by Microsoft. This is kind of wild. Just saying this all out loud. We held our place down on our place throughout the four days. It was that's a lot.

It's a lot. I've seen a lot of our places. I love it. I love it. I feel like our place was the winner. That's where we came together as a community to fight off the void. Oh, glad you're all here. Hope you had some fun during the best week ever. We're not done yet. We got a few more raffles to do today We have some other fun things to do new merch. So a lot of fun stuff to get to this evening tonight should be Trying to get this because we kind of we kind of lost some time in the beginning so we'll try and recover some of that time and If everything goes well, we'll be able to get through our objects just some light review, some things we've already seen before, and then jump into these APIs. Tonight, we're going to play with three APIs, the dog CEO API that we started with last class, and that Mindwolf was using on their stream. Get some of that recall in, get some of that practice in. Then we're going to be using a cocktail database API to get some drinks and some cool stuff going on the screen. And then if we have some time left over, we'll play around a little bit with the NASA's APIs and we'll set up the homework for your weekend, which is to start building some cool stuff with actual APIs.

This is where it starts to get real fun for me, folks. I think this is where you have enough skills to be dangerous. You can start getting data from other places and starting to use, combine that to build really neat stuff. So I'm hoping after tonight's class, you feel like you're ready to start messing around with some APIs, start pulling some data from some other places, start combining it and ways to build the things that you want to build. So super excited. Let's get into this. Let's wrap up this best week ever with a banger, folks. Don't worry, we got some lovely raffles to get through. We got some other fun stuff to get to, but let's jump into it. If you haven't gone ahead and checked in, please go ahead and check in for us. Exclamation point, check in does nothing. It just gives you the link. You have to go to Twitter and do the liking and the retweeting. I always appreciate when you do that. It helps more folks find our lovely, lovely community.

And, uh, since, since we, we weren't actually live for a little while, I think we need some folks to realize that we're actually back online and live. So I appreciate it, uh, for, uh, for doing the legs and the retweets. It always helps. All right. Remember we had some, some, some, some breathing room this month, some breathing room this month, no networking until may client deadline got pushed to May 3rd, so if you are kind of been struggling to get that client, you got a little bit more time to get it, and we're chilling the networking just for a month to give us some time to focus on building, right? Tonight, your homework is to build, to build some real projects with some real data, with some real APIs, and so you need a little bit of time to be able to focus on those things. Cool, we also had this idea of client alternatives, right? So if for some reason you're not able to seek out a paid client, there are two things that we could do instead. I'm talking to my first real potential client, didn't think it would get one. Hey, congrats, Kismet got my deposit, congrats. That's huge, yeah, I think I have my client so excited. Hey, that's what I love to hear, yeah. It's been really cool to see on the celebration channel. if you're getting clients come on now if you're getting clients posting the celebrations channel come on now folks you got you got to celebrate the wins so many folks are getting clients and I see it on Twitter I'm like what are you doing getting the celebrations channel I want to hear that you won we need that that place to be lit so when you get a client posting celebrations channel Oh, he's Louise. Got a paid client and I just did one for charity.

Nice. Fine alternatives. You can remember you can volunteer for a grassroots org. So if for some reason you're not able to get a paid client, some folks have visa issues, things like that. You can volunteer for a grassroots organization, But you still do the full process. You still have a client. You still you still have a contract. You still have a proposal I just got my first $7,000 client what that's wild congrats. That's huge Political season is upon us. Yeah, that's true a lot of grassroots orgs gonna be kind of Turning up the steam and so great time to find one of those orgs to work with You can also contribute to free software, open-source software, Shrimp Fest. $1,500 client, that's wild. All right, if you got a client, put that you got a client in chat. And if you're feeling real spicy, put the amount. If you got a client, just say client. And if you feel spicy, put it.

25K client, get out of here, that's wild. Two clients, 200, got a client, got a client, got a client, got a client, got a client, got a client, 700, 1500. Holy smokes. Look at this folks. What? Hold on. What? Bro What We don't get got we go get holy smokes What Wow. Wow. Wow. Wow. Wow. Wow. That's huge. That's huge.

Wow. Super proud of all y'all. I didn't think we'd get that many that quickly. That's pretty wild. Wow, you broke me for a second. Damn. We out here, we online, folks. I don't know what else to say. Damn, look at us go. Look at us go. Let's go. Damn. Damn. All right, well, I got to stop myself from crying for a second we're doing good. All right, no water works yet That's wild folks Congratulations, everyone that got the client and congratulations.

Everybody's still pushing. They'll trying to get the job done. That's wild Already folks. Oh Well, a lot of you don't need the alternatives, but they're here volunteer for a grassroots org Or contribute their free software because we talked about this on Tuesday, the idea that a lot of stuff can be assuaged or smoothed over when you have a paid client, and that's why it's so important. Why it's so important. Cool. That's wild. Congrats, everyone. Also, YouTube, we're almost caught up. The Git and GitHub class just went up on YouTube today. You'll see Tuesday's class. I'm gonna edit it. I'm gonna edit it as much as I can, and I'm probably gonna make it unlisted. So Tuesday's class will get edited and probably be unlisted. If I can remove the names, I will do it.

So I'm not making a promise yet, but I'm gonna try and get it because a lot of folks have asked for it. But if I can edit it in a way that I think makes it look good, we'll make an unlisted video. Otherwise, we are caught up on YouTube. So people are also posting they got jobs already. This is just wild. Give me a moment, folks. Damn. Cool. Other than that, YouTube should be caught up. This, you know what, fuck it. I said, what was my favorite part of the best week ever? It was just right now. It was this right now was the part, The best part of the best week ever so many of you got clients already. That's real money. What?

Ted talks to a thank you for the gifted subs. Thank you for being here And amy loose smiles. Hey, thank you for the hydration cheers to you This really is the best we get exactly indifferent this really is the best week ever holy smokes All right, folks, YouTube's caught up. I try to post as soon as I can. Remember, we always have a delay because Twitch, part of our partnership agreements, we can't post right away. So I know a lot of folks do like to catch up on YouTube. It's I don't monetize the YouTube, so there's no ads there. So if you've been like watching the VODs here on Twitch, you're probably gonna have a way better experience on YouTube just because it there's no ads. So if you're if you feel like you need to catch up on some of the videos probably use YouTube instead of the instead of the VODs and Yeah Leon being stunned that his method works. I know it works, but it's also a whole different thing to see like a Hundred plus people show out that they've gotten paid clients in like a wine and go That's that's pretty wild Also, a lot of you don't actually type in chat coming after you. So I know there's even way, way more. Uh, so that that's pretty funny. Cool. Best week ever. All right.

Merch. So many folks want it merged. So we, we got some merge options. It's not open yet. You, you, you, you wild folks. It's not open yet. So many folks went at merch I gave you a couple days heads up And so there's a couple big pieces that'll go back up. It's not live yet. There's a couple big pieces that'll go live And Let's see Boom there we go Oh, is the verge go down already? I think it went down already. Oh boy. I don't know if I can even show it. It won't even let me show it. All right. So there was a couple of things I'll explain.

I'll draw it for you. I'll draw you. What maybe I can show you this page. I don't think there's anything here. I'll do, I guess I can take screenshots on my end. Let's see. Boom. All right, so it was the same as last time. We had the OG 100 dev software engineering shirt and in both kind of the kind of like normal cut and then kind of like the more rounded cut. And then we had three new items that were in limited stock. And I literally don't think it can like load fast enough. It was wild. So I'll pull it up here. Here are the other ones that are not loading for some reason. We had, uh, we had a, a very, very, very exclusive 100 dev shirt, just to see how the print worked.

We had the, our place, the, our place, uh, lovely, uh, pixel t-shirt and then, uh, stickers as well. Cause I wanted there to be like a way cheaper option as well for folks that wanted it. Uh, so if it all sells out, we'll do another run. Um, but I always want to do like limited stuff whenever we do launch it. Uh, but yeah, it looks like merch went down real quick. I literally opened it while I was talking. Okay, here we go. Here we go. Oh, cool. Cool. We're we're good. We're good. We're good. All right. So merch should be up now.

Uh, you can see, uh, the stuff that's, that's still here. Super limited quantities. And, uh, there's the lovely limited edition stickers from our time and our place. We have our limited edition, our place t-shirt, the 100 devs, and this is Source Sans Pro, which is my favorite font, plus the 100 folks asked for it. It's a little bit of an inside joke because I always use Source Sans Pro for everything. If you know, you know. The OG search for folks that wanted them. And then we have the lovely OnlyFans match fanny pack. Everything here is at cost. There is literally no profit on any of this stuff. As cheap as they will let me sell it is what I sell it to you all. There's no profit to be made on any of this stuff except for the fanny pack, because I find it hilarious to charge full price for it. So all of these, all of these are zero, like no profit on them at all. And then the fanny pack is the max they would let me sell it for. I sell it for max because it gives you the only fan match and I can't sell my body for that cheap.

Cool. All righty, so that that's merch more folks asked for it if it sells out we'll do another run and maybe a month or so Maybe it'll be like a monthly thing But I really folks a lot of folks asked for the the our place So I made the stickers and the t-shirt because I think that was a really fun experience. So Merch is up. I can hear the the things coming in and so we're gonna we're probably gonna chill those sounds There we go. And one of these days we're going to do our own merch. And so there is the shipping is more than a sticker. Sorry. I don't know how much shipping is on the sticker. We will, in the future, do our own merch where I'll take stock ahead of time because I want way bigger sizes and some smaller sizes as well. So this is kind of like the testing ground to see what works and then we will continue from there. So everyone asked for it. You got it. Merch is in here. I'll let you all kind of Panic through that and then like I said, maybe like a every other month thing We'll do more merch some limited edition stuff and some of the OG stuff. The hoodies were all out The hoodies were all out.

And so like the hoodie the quality that we really liked They did not have them like in stock right now. And so we'll bring the hoodies back Hopefully like the next merch drop because I know a lot of people want them. It's just that the quality one that we really liked they didn't, they just didn't have them right now. So next time they're back in stock, we'll do another one. Yeah. Yeah. Massive shout out to Octo Shrimpy who designed the Our Place version. Yep. So the logo that we actually placed in Our Place was done by Octo Shrimpy. Thank you for pasting that. And that's the design we actually put in Our Place. So octo shrimpy, I got a shirt coming your way. So octo shrimpy. We got one coming your way Just uh, send me a mod mail, please Cool All right Yeah, I think a lot of folks are going to get caught at the payment stage because some of this stuff was limited quantities Alrighty This is the best week ever, but it's the best week ever because quite a few folks have helped us get here along the way. I really want to do something bigger, but there are some thank yous I would like to say today.

This best week ever has honestly been the best week ever. Seeing everyone come through to come support the new members of the stream team, to come to our first Friday with friends in huge numbers. We literally locked down the top of the software and game development category. Like we just lock it down. Hello Rufio had number one on the science and game dev category the entire time. Minewolf, number one on the science and sorry, software and game development category the whole time. We lock it down, right? We had 700 plus people come to our first Friday with friends. This is wild. This community is a massive and it's amazing, and I think it needs to be said that it doesn't happen this way like an accident, right? It's the hard work of everyone that's here, it's the hard work of all the folks that show up time and time again, that come to class, that type in class, that show up on Discord, it's because of y'all. And behind the scenes, there are a lot of folks that actually help make this run really smoothly. So I want to take a second to say some thank-yous and then I want to start maybe like highlighting a person every week Because I just don't think folks realize that it's not just me that there's a lot of folks behind the scenes Making this all happen. So I want to thank the mods real quick. So blah Cat emotion.

I'm gonna use like your discord names. I don't know if you know if you want to use the other names So blah cat emotion div Kerr and different ghosts Jennifer Chris Miriam and Kieran, thank you. I call them Memphis. Thank you so much to all the mods. I don't think you realize how much stuff they do on a day-to-day basis. Answering questions all throughout Discord, filtering out weird messages, making sure the community is upholding to a great community to be a part of, making sure our rules get enforced. it doesn't run well without our lovely, lovely mods. So thank you, thank you, thank you. Each one of these mods has something that makes them amazing and makes them make this kind of go smoothly. So I'm gonna take a second just to say an individual thing for each one, and then I will, like I said, do something bigger as we kind of go throughout the weeks. Blah, right off the rip. Any of the big improvements you've seen on Discord or part of the community has been their hard work. If you're in a study community, it's because of their hard work. If you, if you are seeing any of the newer stuff we're doing to try and bring people together, that's all Blah, that's not me, that's Blah. So Blah has an amazing ability to work not only with the folks going through the cohort, but our alumni, bring people together, build community.

And then they're also creating content to like what so thank you blah Cat emotion shows up when we need them the most is always there to kind of lift folks spirits and some of the channels that we have that are newer and Always appreciate their their help here here on Twitch as well one time actually putting it into Putting it into a moat only mode giving me a small Small heart attack as I didn't realize what was happening and bringing it back but Really do one of the most positive people I've ever interacted with that brings joy to this community and untold ways indifferent ghosts I don't like come on now so many folks are getting jobs because of the help and different has given folks the the the attention the the helping look at code, the being a sounding board for so many questions. Every time I go into the Ask Leon channel, Indifference is there going to battle and answering so many questions for the community. And so I would be swamped, swamped without Indifference hard work. So thank you, Indifference Ghosts. OCC is the most articulate person I have ever come across. They, they, we will have somebody that will send a mod mail where I am absolutely stumped on how I'm going to respond to this person. And then I like refresh and OCC Jennifer has written out a beautiful reply that like makes the person seen and heard and answers their question in a way that I just probably wouldn't be able to do. Chris is in a similar vein in the channels where the questions are the hardest, Chris is in there, making sure that they're pulling in resources, making sure people have a good direction and, um, I would not be able to answer the amount of questions I answer without Chris jumping in there and, and pulling everything together specifically in the AskLeon channel. DIVKR, DIVKR makes the server run. I don't think folks see this a lot, but the server runs because of DIVKR. All these little things that would slip by my mind, they see, they bring up, and they help us work to fix it. They're always answering questions. They keep a pulse on everything. I actually don't know how they are in so many channels, but Divker is able to cut just like the, just the overseer. And whenever something's going down, they're the first to see it.

They bring it to our mod chat. We're able to handle it. So, so many things that would have been distractions to the community. So many things that would have been things that we don't just want here that we want to fix and solve has come because of their hard work. Miriam, uh, is, is, is someone that brings a lot of joy to Twitch. They're the person I see the most on Twitch out of anyone else, just kind of answering questions, being here and then showing up in a different time zone, which leads us also, I'm going to call them Memphis. I've always called them Memphis, uh, Kieran Memphis, uh, we're a global community. And the bulk of our folks that are on the mod team are not in a different time zone, but Miriam and Memphis are, and they show up. And when Memphis shows up, it's always the most warm, kind response that you could ever possibly think of. Always saying hello, Making sure that folks feel welcome and so I I just the the community would not have been shaped the way it was shaped without Memphis showing up to To be welcoming kind of folks, especially when well everyone else is asleep There's some other folks too that I want to mention just quickly telescope sees they're technically a mod, but they lead our project team and and they actually helped us build some really beautiful things that we're going to hopefully bring to y'all very soon. So I went to throw it out there and then we have two other mods that were our OGs that I just want to throw it out there. Alyssa, Okayla, they held it down for the longest time for us. And like I said, there's so many folks that I want to thank. There's so many folks that make this community run and be able to do the things that we do. So this is just to start, I really do want to give praise to a lot more folks to the stream team, the folks that put themselves out there for others to benefit others for everyone that shows up, all the folks that are, that are mentors and helpers on the channel.

Thank you. Thank you. Thank you. Thank you. Um, but I needed to end the best week ever by throwing at least some of those praises out because this community is an amazing community. It's helped so many folks learn how to code. It's helped so many folks get jobs. It's helped so many people get clients that we just saw today. Like my mind is blown and it doesn't happen without it being intentional. Without it not being an accident. And so these folks give up their nights, their weekends, their days to make sure that this continues to go on. So I want to say a huge thank you to everyone. And then also a huge thank you to you. We're a big community now. A big community.

thousands of people, our Discord is almost at 30,000 people. That's huge. When I look at the reach that 100 devs has on Twitter, we're seeing over a million in organic reach. That's a million eyeballs that are seeing the stuff that you are working on. That blows my mind. And so are we outside? We outside, but we online too. We online, right? And so thank you to everyone that takes some time to help others That takes some time to improve the community to make it better than when you joined that doesn't go unnoticed And so thank you. Thank you. Thank you Cool. All right, we got that out the system. I Like I said, I want to be able to Highlight some more folks as we go throughout the weeks, but we couldn't we couldn't get through the best week ever without saying those things Alrighty, tonight we're going through objects. We are going through APIs. We're gonna have some fun.

We're gonna build some things. We're gonna get a little bit of review in and then we're gonna go deep playing with the APIs so that we feel comfortable so that for homework we can build some apps with these APIs. Alrighty. Uh, people are, oh yeah, this is actually something that I wanted. This is actually something to bring up because we got through the good stuff. Uh, people are starting to talk about people not showing up for coffee chats. I don't think it's a hundred devs. I really don't. I think the folks that are here that are showing up that are part of this community wouldn't do that to people. But when your hashtag has a million people that see it in seven days a Million people that see it in seven days. I Don't I don't think it's us. I really don't I think that if you're on Twitter and You're using the hundred devs hashtag. You got to realize that there's a million people that just saw That hashtag in seven days So I don't know what to say more on that. I think the real community is honestly on discord. I love, I think Twitter has its place, but, uh, come to discord.

That's where the most people hang out. You don't have to worry about the riff raff that are out there. And, uh, if you are a person that's scheduling coffee chats, please show the fuck up or just let the person know that you're not going to show up. But I think we've talked about this enough to where I honestly don't think anyone that is here would actually do that anymore. And so, um, yeah, that's what happens when you're on an open platform. People use the a hundred devs hashtag as though they're using some other hashtag, like a hundred days of code. It's okay. Um, just know that it's not just us anymore. We're big. We outside we online. What can I say? Bring them the discord. If you see folks that want to be helpful, you see folks that, that want to support the community, bring them to discord. But that that's where they're gonna interact with the most folks. That's where they can be the most help in our help channels Yeah Might not just be Twitter Yeah, we had a million eyeballs on that hashtag in Seven days a million in seven days.

That's wild. That's so wild But uh, so with all the good that that comes with that so many folks coming and joining our community Joining our discord. Our discord has grown by 10,000 in what like a month and a half like yeah, come on now You got we got to take the good with the bad and so I definitely feel bad for folks that Open up public calendars on the internet for random people to sign up but it. Kind of hard. Change the number. Maybe, maybe that's how we really end. Alrighty. So tonight let's start with a little bit of review and then once we get through a little bit of review, we'll take our top of the hour break. Alrighty. Programming, chat, what's a program? It's a set of instructions, exactly. It's a set of instructions that we write to tell a computer what to do. And therefore the act of programming is writing those instructions in a language that the computer can understand the language that we write that the computer can eventually understand is javascript and we're starting to get into the you're starting to get into the groove with javascript folks we're starting to see some of the uh the the realness of it we're starting to see we're moving from just patterns to maybe understanding what's happening when we look at our code when we used to see like document dot query selector dot value we didn't know that value was a property and query reselector could be a method and document was an object, right? But now we can start to see what's happening underneath the hood a little bit as we start to go deeper. And part of that is getting comfortable with objects.

And we need to get comfortable with objects because one of the main paradigms we're going to use going forward to help us bring structure and organization to our code is something called object-oriented programming, right, object-oriented programming. And so to get there, we have to feel really comfortable with objects. And so we're going to have quite a few, quite a few classes on getting through APIs, because with APIs, we can play with our objects. And then once we're feeling really comfortable, we'll introduce object-oriented programming, we'll get comfortable with this really important coding paradigm, and then we'll move on to the back end. We do have to do something important. Thank you for mentioning it in chat. We haven't done the newsletter raffle yet. The newsletter raffle yet. And so I'm just gonna go ahead and grab all these Twitch names. It's a lot, remember folks it pays to open the newsletter, if you're not on the newsletter !newsletter, follow that link, sign up for the newsletter, so many folks have won t-shirts and amazing raffles from the newsletter, so for those that opened up the newsletter and and filled out the secret form that was in the newsletter today. This one's for you. I see folks trying to fill it out now. You know what, you're in here. If you filled it out right now, you're good still. All right, so let me pull this name picker here.

All right, we had 1,500 people that entered it when I meant, before I mentioned it, 1,500 people that entered it before I mentioned it. Remember it pays to open the newsletter, folks. Sometimes there's a secret raffle in there. Sometimes they're not. I don't know you gotta open it you gotta see also all the goods come in the newsletter first so many raffle bots in chat nah they're not raffle bots they're just really eager people all righty patty d9 patty d9 congrats on your t-shirt I will send you a whisper here on Twitch. Everyone that won raffles up until today you should have received a whisper from me on Twitch and for folks that had even older ones that were mod mails you should have received a message from me already. If for whatever reason you won something and you have not heard from me send a mod mail please but you should have heard from me already. PattyD I'll get to you after stream. Cool. Awesome, and like I said, we got a couple other raffles today too, folks, and we're gonna get to our top of the hour break in just a second. So like I said, we're building up to this idea of using objects, right, of using objects. And what are objects? We still got project winners and things like that to announce as well, yeah. What are objects? Everything, exactly.

More specifically though, we know that everything in JavaScript really boils down to objects, but what are they? They are collections of variables and functions. I like that. But they're collections of variables and functions, but when these variables and the functions are tied to an object, what do we call them? What do we call them? Yeah, we call them properties and methods. So if you know what a variable is, and you know what a method is, sorry, if you know what a function is, you know what a variable is, you know what a function is, and you combine them into one thing, you're dealing with objects, right? An object can have a bunch of variables, a bunch of methods that are tied to it, but we call them properties and methods. All right. Now, I like to think of objects when it comes to physical objects. And so what I would love for us to do is to take our break. And then when we come back, we're gonna think through some physical objects. We're gonna think through how to build out a constructor again. We're gonna see all the things that we got into with objects beforehand. We're gonna do that.

We're gonna take a break. We'll come back. We'll start with our physical objects. and then our goal is to get to building a constructor together today and then moving on to APIs. All right, folks, let's go ahead and bring up a five minute timer. Remember, don't DM me, DMing me won't get to me. If you want something and you haven't heard from me, a mod mail, please, not DM mod mail. All righty folks, put in five minutes on the timer here. All righty. If you're able to, please get up, move around, hydrate, and I will see you in five. Well now we added two minutes to the timer. So let's uh, when this gets to four i'll change it to six And i'll run some ads as well More R-Place shirts, maybe, we probably got to do another drop, right? All right, I'm going to change this to six minutes, then we're going to run some ads And I'll take my break as well Boom all right folks see in six minutes two minutes was added to the timer And run some ads Boom in a bit You Bob was on strike Bob was on strike so Simba unfortunately just had a procedure and so he's like completely out of it he's home but he's completely out of it and so I was just I was laying with him and I forgot to put Bob up. He's doing all right. Yeah.

All right folks, welcome back. Let's get into it. All righty, so we had two questions. How do I submit the homework? No homework to submit tonight. No homework to submit tonight. Oh, Scotty from Strange Parts raided and we were on a break. Get out of here. Strange Parts, hey, thank you for the raid. Hope you are doing well, hope your stream went well. Hope you're feeling better too. Hey, no worries, thank you for being here. Thanks for the raid. Welcome, welcome. Yeah, we had a lot of folks that really enjoyed coming and hanging out with you the other day and seeing you, I hope you finish the, the, the wood rack that you were working on, but, uh, thanks for stopping by Raiders.

Thanks for the raid. Hope your stream went well. Alrighty. See, this is the best week ever. So we're, we're, we're wrapping up the best week ever. And so come on now. Strange Parts is hands down. I'm going to, I'm going to say when I'm Like, definitely my favorite YouTube channel. Like, heads down, my favorite YouTube channel. I've watched all your videos, like, way too many times. So I appreciate you coming by, thank you for bringing the crew, and hopefully we can stop by your way again soon. Thanks for the raid. Alrighty, so we had two questions that I saw as I came back. Let me see if I can actually, Oh yeah, let me see if I can put the YouTube channel in. Let's see, let me pull it up real quick.

Here we go. Boom, I'll put it in chat. If you haven't, definitely subscribe. Some of the best videos on YouTube, hands down. Cool, all righty. We had two questions that I noticed as we were coming back. One was homework, nothing to submit for the homework. You had to do it, but I don't need you to submit anything for it. And going forward, almost all of our homework will be submitted on GitHub. So if you haven't watched the GitHub course or the class that we did that was sponsored by Microsoft, make sure you catch that video on YouTube, make sure you watch it, that way you feel a little bit more comfortable with Git and GitHub, and then next week we're gonna walk through submitting the actual homework on Git and GitHub. Yeah. So the idea here is that you will eventually stop using the Google Forms and weird stuff like that, and we'll submit all of our work on using Git and submitting it on GitHub. and so if you haven't caught up with that class yet, please make sure you do. Maybe rewatch it just so that you feel more comfortable with it. Practice pushing up some stuff to GitHub, and then we'll start using that to submit for class again.

Cool. The other question, the other question I saw is, what are some practical uses of objects? And so we're gonna see that today. One of the beautiful things about objects is that they're used all throughout JavaScript. Whenever you're trying to build anything, you're gonna be using it in a series of a bunch of objects, right? And so we're gonna eventually get to a way of thinking about anything that we're building that's gonna be in an object-oriented approach, right? So right now it doesn't have to be something that's like a wild connection that you have in your brain yet. We're still kind of gathering all of our tools. And once we have all of our tools, we're gonna use these tools to not only build stuff, but to kind of think about our code in a very specific way. And so, yeah, it seems a little weird. We're building cars and Tony Hawk pro skaters and other weird stuff. But eventually we have all these tools and we understand the mechanics behind them. And then we can kind of change how we build going forward. So that's the goal. And so it really is just a collection of properties and methods of these kind of functions and variables, but whenever we're building anything, we can think about those things in terms of a collection of variables and functions.

So whether it is a board game or a even kind of like building out some of the core functionality of our web applications, it's all gonna come down to objects at the end of the day. So give me a little little faith to get there. We need a little bit more tools in our tool belt I don't like jumping straight to that because I think it's too hard to take it all in in one go But we're building up to it. We'll get there Cool for now. Let's worry about like what an individual object is right when an individual object is and that individual object we can think by starting off of just a physical object and so So the object that we've talked a lot about during class is just a stopwatch. A stopwatch is great because it does have a really strong collection of properties and methods. What are some properties of the stopwatch we have on screen? Yeah, color property, a brand property, a shape property, a material type property. That's a cool one. We haven't talked about that one before. A weight property, that'd be a cool one. A model property, even like a minute, seconds and milliseconds property, right? And so notice that we're all talking about the properties and then all these properties have values. So we have the color property that would be the value of black. We have the shape property that would have the value of round.

We would have the brand property that would have the value of AccuSplit. We would have the model property, which would be the value of ProSurvivor. We would have the minutes property, which would have the value of three. So we have all these properties and their associated values that make up this one object, but this object also has functions or methods, actions that it can do. What are the methods that are tied to this very physical stopwatch object? Yeah, we can kind of see some of the big ones right there start and stop and split and reset Right all these things that the stopwatch can do the actions it can take right that start that stop the mode the split the reset We can we can utilize all those things to to make our object be able to do stuff, right? And so whenever we're thinking about any object, it can be a stopwatch, it can be a car, there are gonna be properties and methods that we can tie to it. And that's gonna keep carrying on through our code as well. We're gonna start to see these things today when we get to our APIs. Our APIs are gonna have these properties that we can use and start to build with them. And so we'll get more and more kind of usefulness out of this as time goes on. All right. How have I created a stopwatch on this line right here? I created a stopwatch object using what type of notation here? Yeah, literal notation.

Uh, when we're, we're literally creating the object because we've used the curly braces directly. Now, I've added the very first property to my object here using what type of notation? Yeah, dot notation, exactly. So, I've literally created an object on this line, and then I added a current time property that had the value of 12, and then I added a tell time property, right? a tell time property that, sorry, not a tell time property, a tell time method. How can I tell that this is a method? Yeah, it's assigned to a function. So I can see that this is a property because it's set equal to any other data structure that we've learned. And we can tell that this is a method because it's set to a function. Beautiful. And we see that this function is very simple. It takes in a value and then it will say the current time is that value using a template literal. And then down here, we are calling that tellTime method. And how can I tell that I am calling the tellTime method? How can I tell that I'm calling this tellTime method?

Yeah, the parentheses, exactly. I can see that there are parentheses and I can see that I'm passing in an argument that is using the current time property of the stopwatch object. So I'm literally passing in 12 here, right? I'm literally passing in 12, all right? Passing in 12. And so we can go ahead and say that this is kind of just the number 12 there because stopwatch current time was 12. So we passed in 12, we passed it as a parameter, and we wind up seeing the current time is 12 printed to the console. Beautiful. Alrighty. All right, we had this let's code of objects lost galaxy. So let's go ahead and take a look at it real quick. And we created a dog object before. Let's chat, what's a different object that we could create? Not not not a dog we've already created a dog. What's another object that we could create?

Pizza I like pizza pizza's a good one So let's change this to create a pizza object that has four properties and three methods And I don't want you to use a constructor Wait, is it just it's just coming through the notification is just coming through strange parts. Thank you again for the raid Thank you for bringing your crew over here. Thank you for all the content you put out. I love it. All right. So this is in the objects lost galaxy folder. And if you need the materials, maybe you're new, maybe you came here with a raid, you can get all of our materials on discord. So if you do exclamation point discord, you agree to our rules, there's a follow along materials channel that has all the materials that we're gonna be using, including our APIs today. So you definitely want the materials if you're going to be hanging around for a little while longer. So I'm going to put just like like. Three minutes, three minutes on the clock here. Even if you've got this down, Pat, really try and build this out. Go go for the win here. Three minutes on the clock. You got this.

You're creating a pizza object that has four properties and three methods. Yeah, you got to agree to the rules and then you'll see a follow along materials channel that has all the materials in it for today. Yeah it said dog we already did dog though so let's swap it to pizza This is review Alright folks, two minutes and we're going to go over it together. Don't worry. What does pizza do exactly? Ooh, I like that. Pizza toppings as an array. I think that's a cool idea. I I Was charged a couple times. Yeah, they'll sort it out. The stream labs handles it pretty well I'm sure that eventually it'll it'll clear if not hit up stream labs. They're pretty good about supporting the folks My drink I'm drinking some some coffee today. Just some instant coffee All right, 45 seconds and we'll go over it together. Instant sacrilege. Sometimes it's all, that's all you got time for is a long day.

I drink coffee at this time of day, I'm up forever. There's one beautiful thing about being bipolar and taking medicine that knocks you out. It doesn't matter what I do as long as I take my meds. I'm out The best part of ADHD coffees has no power at night, so that's it's actually interesting Coffee ain't got nothing on Sarah quill. Exactly Alright folks. Come on back Let's go over this together. I always like the joke one of the the very first time I got put on. Um I don't like it's not a joke. It's just a story Uh the very first time I got put on adh medicate adhd adhd medication I took it And I took the best nap of my life Like I took my adhd medication. I was ready to like get shit done and I just took the best nap I've ever had in my whole entire life. And I found that that's like a pretty common thing. Like if you, if folks that have certain types of attention issues, they take the Adderall or whatever, and it just helps them like get good sleep. So the complete opposite of what I was expecting. But it was good. Took a glorious nap your first day?

Hey, I love to hear it, blah, exactly. All right, let's create this pizza object, so we're going to use literal notation to create it. So we'll say let pizza equal, and then we have our curly braces, beautiful. Now what are some properties that our pizza could have? size, toppings, and crust. So let's go ahead and do pizza.size equals large. Cool. Pizza.toppings equals, and we can use an array here. That was a really good suggestion to use an array. OK, so I'm going to do spinach. And I'm going to do. Uhm, onion. And I'm going to do. Hmm, jalapenos. Yeah, we'll stop there.

We're banana peppers, but I could do banana peppers too. You can never spell banana and then peppers there we go cool all right, so we got our size we got our toppings what's something else we could do Pepper Cheney's now I can tell I can tell you're not dominoes gang when you say pepper Cheney's that's some Papa John's bullshit Crust, we said crust, exactly. Crust, what type of crust do y'all like? You say thin crust, you're wrong. Stuffed, hell yeah. There you go, stuffed crust. So that's four properties, we need one more property. One more property. Sauce. Heavy sauce always heavy on the sauce Heavy on the sauce for sure Cool. Oh, we got to add garlic to you. We forgot garlic on the topping. That's the best topping There we go, beautiful, all right, so we got our four properties and we need three methods As somebody said excellently in chat, what can pizza do? That's a good one The made it Delivery time it's part of the pizza I say console dot log calculating Pizza dot Burn mouth Oh, yeah, buddy There you go, all right, and what's the last one? Let's see, what's one more we can do I have no idea how to spell Frisbee.

There we go. Frisbee equals, and we're just going to say console log, yeet. There we go. Nice. All right, here we go. We got our pizza with four properties, three methods. They're looking beautiful. We got a size topping crust and sauce property and estimate delivery time, burn mouth and Frisbee function. Um, now if I wanted to create another pizza, what would I have to do? You Copy and paste exactly if I want to make a whole other pizza Okay, all right Hmm Hmm All right, so now we're pizza to Pizza to and now we can change it up small People got mad with the banana peppers or remove the banana peppers. A lot of people said thin crust I don't know where how your mama raised you but in crust I guess and then heavy All right, so New York crust is not thin crust, right, like New York style is not thin, is that correct? Like to me, New York is foldable, but not thin. I think thin is like something new that chain like chain Restaurants made up to like serve you less food I love a good foldable slice, but I think thin is different All right So what all this all this humming and hawing was if I wanted to create another object I would literally have to like copy and paste, right? Did I not copy and paste? What?

There we go. Not only did I have to copy and paste and change everything, if I wanted to keep making more pizzas, I would keep copying and pasting over and over and over again, right? And each time I copy and paste it, I'm taking up more memory and this code is not very what? This code ain't what? Code ain't dry. We online, we can't be writing dry, we can't be writing wet code anymore. We online, can't be writing wet code. It's just not dry. So how can we solve this problem of wanting to create a lot of pizzas? Like Domino's comes through, they're like Leon pull up, we need you to make a bunch of pizzas. What can we create that'll enable us to make a bunch of pizzas? A constructor, exactly, a constructor. It's a pizza machine, right? It's a constructor. The constructor will enable us to make as many pizzas as we would like.

And so we saw this idea of a constructor already. We tied it to the idea of wanting to make a bunch of cars coming out of a car factory, but we could do the same thing for any type of object, whether we want it to be a pizza or a car factory. So let's go ahead and keep that pizza machine in the back of our brain, because we're going to build a constructor that is for our pizza. So let's keep that pizza machine in the back of our brain. When we get to building a constructor, we will use the pizza to build our constructor. But let's look at the constructor syntax first, and then we'll build our constructor together. Here we have a constructor to make a car. The idea is that I can write my constructor once. I can write my constructor once, and then I can make as many cars as I want. Eventually I'm gonna make my own constructor for my pizza. That way I can make as many pizzas as I would like. Now, somebody asked like, why? Like why? Well, one is that we don't have to keep rewriting code over and over again, but eventually we also get to unlock some secrets of JavaScript. That prototypal inheritance that we've talked about in the past, when you're using your constructors you get access to that.

We get eventually access to things like the prototype chain so we can write exactly more modular code, that we can write code that takes up less memory, we can write code that's more efficient, but to get there, we got to understand what a constructor is and then eventually what the prototype is. So let's start with this idea of wanting to create a bunch of cars from this lovely car constructor. You can see here that I am creating a function and that function starts with a capital letter. What the heck does that capital letter mean? Yeah, it's a constructor. It doesn't give it any special powers or abilities. It just says, hey, the function that's about to follow is a constructor. When you use it with this new keyword, you can get a what? When you use the constructor with the new keyword, you can get a what? Yeah, you can get an object. An instance of that object, yeah. You can get an object. You get a car, you get a car, you get a car. Maybe, if 100 devs turns into a million devs, maybe we're raffling cars and not T-shirts. We can dream, can't we?

All right. So here we have this idea that we're gonna create a new object from this make car constructor right this make car constructor we could go ahead and we can create as many cars as we want from this constructor but instead of having to copy and paste all of these lines every single time we wanted to create a new object we only have to do new and then call the constructor, new and call the constructor. And so we can turn making a hundred cars into a hundred lines instead of a hundred times this many lines of code, right? Cool. So when we go ahead and we use this constructor, notice that we've passed in for what? What are these called? For what? Yeah, we're passing in four arguments, and those arguments are gonna be placed into the parameters of the constructor. So Honda finds its way into car make. Civic finds its way into car model. Silver finds its way into car color. And four finds its way into number of doors. So wherever I see car make, it's now actually Honda. Wherever I see car model, it is Civic. Wherever it is car color, it is now silver.

And wherever it is number of doors, it is now four. Okay? Also, the object that's coming out of it, right? The object that's coming out of it also gets this honk method, beep beep, fucker. It also gets this lock method, locked. And the cool thing is, whenever you see this.doors, what is this referring to? What is this referring to? Yeah, the object itself. So how many doors would this object that we just created have? If we ask for this doors, how many are we getting? Yeah, we're getting four. We passed in four, number of doors was four. So this.doors is four. Remember, this is referring to the object itself. Cool.

Now, if we wanted to create a whole new car, well, guess what? We don't have to sit here and type all this crap out again. We can go ahead and just call the constructor again. Don't forget our new keyword, and we can pass in all these values again. out will come out of this car, what will come out of this constructor will be a car that has the following properties. It'll have a make property, a model property, a color property, a doors property, and two methods, honk and lock. So let's go and take a look at this. I'm gonna grab this real quick and I'm gonna put it in my terminal. My console, sorry. And now that constructor function is in memory. And I can go ahead and let's just grab the Roadster line. Boom, let's grab it. Yoink. Beep, boop. There we go.

So now we have created a Tesla Roadster and if we ask for it, we can see that it has a color property of red, a doors property of two, a honk method. How can I tell that honk is a method here? How can I tell that honk is a method here? Yeah, I can see that it's like the parentheses and if I open it, like the F parentheses, let me know that it's a function that's there. Same thing for lock is let me know there's a function there so it's a method that's tied to an object. We can say there's a make property of Tesla and a model property of Roadster. I can even ask for these things. I could say like teslaroadster.make and get Tesla back. Now there's one other really cool thing. I can see what about this Tesla Roadster when I asked for all the information that was stored in memory about this Tesla Roadster, what's something that I noticed about where it came from? What can you see where it came from? Yeah, we can see the constructor the factory that it came out of and we can see that it's coming from the make car factory right? We can see that this is a an object that comes from the MakeCarFactory. Any car that I create out of this constructor, we will be able to see that it comes from the MakeCarConstructor. And since it comes, all of these objects come from the MakeCarConstructor, what's a cool thing that they all share.

What do you what is any car that comes out of this constructor share? Oh, oh, oh, people will be watching the videos back, people will be doing the homework. Yeah, they get grandma, they get the prototype right. Remember. The object can always check itself for properties and methods, but if it does not have that property and method, it can go up the prototype chain, the inheritance chain to find those properties and methods. And once the object is done checking itself, where's the first place it looks to find those other properties and methods? Where's the first place it goes? Yeah, it goes to the mama constructor, exactly. It goes out to the constructor function. It checks itself, then it checks the constructor function, and eventually it can go all the way up the prototype chain until it gets to the what? Until it gets to the what? I need to make that, like, I need to like, oh, that's such a good project idea. Would it be an amazing project, like when I do this, It does like the more, you know across the stream. That's I can do that. I can detect this hand.

I can detect my hand Using Microsoft's cognitive API's there are a wonderful set of API's that enable you to Use machine learning at your fingertips without having to be a machine learning practitioner, so maybe maybe that's something we'll work on All right, so yeah, we would check the object itself, right? And then we could check the object itself and then we could look at the constructors prototype, see if there's anything there. If not, we keep going up the chain and you hear me referencing grandma because that's kind of how it really works. Let's say I didn't have a car. I could ask my mom for a car. If she didn't have a car, she could ask grandma for a car. And if grandma has the car, well, guess what? I get to use those properties and use that car. It's the same thing with our objects when it comes to JavaScript. All righty. One of the things we noticed is that if we ask for our Roadster, like let's look, if we go ahead and do Tesla Roadster, I think it's still a memory, yep. If we go ahead and do like teslaroadster .bluetooth, we can see that we get undefined. We can see that the Tesla Roadster does not have Bluetooth. And so what we can do is we can actually update the make car prototype. So make car prototype Bluetooth.

Now, I can do this, and the next time I ask for Tesla Roadster Bluetooth, I get true. What did the Tesla Roadster check first? Because now when I do TeslaRoadster.Bluetooth, I'm getting true. What did it check first? It checked itself first. It did not have Bluetooth. So then it checked the prototype. And since we just gave the prototype true, when we asked TeslaRoadster.Bluetooth, it returned true. It didn't have it itself, right? It didn't have it itself. so it went up to the prototype. I could do this though. Now where did it get true from? Itself, I added Bluetooth to the object itself. So when Tesla Roadster went and checked Bluetooth, right?

Did it have Bluetooth? Yes, it did. That Tesla Roadster now had its Bluetooth. So did it have to go up the prototype? No, it just stopped. Let's create another car from the make car prototype. Let's go ahead and say, it's a cool car. I'm gonna give me a car. How does it get streamer brain? NSX, FRS, Tacoma. I saw a Rivian for the first time, it's pretty dope. Oh, R34 GTR. Prius, there we go, Prius. That's what I'm looking for. So we're gonna go ahead and do Toyota Prius.

Sometimes I just have fun. Toyota Prius equals new make car. And we have to pass in the four properties. So the four properties we have to pass in are the make so this is Toyota You know what makes a Prius cool People don't know what makes a Prius cool Is that you can leave the AC on all night long so you can like if you're gonna live out of a car Prius is the one to do it I was really into living in my van for a while. It's a story for another day, but I always wish I had air conditioning. Yeah, you can leave AC running the whole night because it uses the battery, not gas. And then the middle of the night, if the battery gets too low, the car will kick on just for a few minutes, pop off the batteries, and then AC starts blowing off the battery again. Toyota. And then car model. Prius. And then we wanted to go ahead and say car color. And we're gonna go ahead and say gray. And then we're gonna go ahead and say number of doors, four. Cool. So now, if I ask for Toyota Prius, and I ask for Bluetooth, you can see I'm gonna get true, but let's just get the object back first.

Toyota Prius, let's look at it. Does Toyota Prius itself have the Bluetooth object? Can we get 100 devs bumper sticker? I have a no bumper sticker policy. That's when you jump the shark as a community. Yeah, there's, there's no, there's no, there's no Bluetooth property on this Prius. Wait a minute, if you look at Tesla Roadster, it has a Bluetooth property. Why does the Tesla Roadster have a Bluetooth property of true, but the new Toyota Prius We may not have it Because you added it Leon Because I did I added it I added it directly to the the Tesla Roadster I used dot notation to add Bluetooth to the Tesla Roadster But we can see that doesn't change the constructor still any any car coming out of this constructor No longer doesn't have that Bluetooth property. So when I do Toyota Prius Bluetooth, where is it getting that Bluetooth property one more time? Yeah, it's getting it from the constructor's prototype. The Prius checked itself, it did not have Bluetooth. It went up to the prototype, sorry, it went up the prototype chain to the make car constructor. That make car constructor did have the Bluetooth property. So Toyota Prius has that property. How about if we do this though?

Prius.doors .toString. All right. Doors, we know Toyota Prius does have a doors property, and it was a property of four, right? And we wanted to go ahead and grab, we wanted to grab that doors that was a number, right? And turn it into a string. Did Toyota Prius have a toString method? Doesn't matter if it was already a string or not stay with me. No Toyota Prius did not have a two string method Did the make car constructors prototype have two string? Nah, so where the heck did it come from? It went all the way up the prototype chain exactly to the global object prototype grab two string off of there And it was able to use it. It went all the way back down the prototype chain, and since the global object prototype, the global object prototype, since it had it, we were able to use it. Nice. Thanks, Grandma. Alrighty, now. Let's go ahead and code our constructor.

I wanna open up, we have a set of, an objects constructor fun is the name of the folder. Objects constructor fun is the name of the folder. Objects constructor fun. I want you to create a constructor that has four properties and three methods, right? Four properties and three methods, and I want it to be our pizza constructor. So make a pizza constructor with four properties and three methods. We're gonna put three minutes on the clock. Do as far as you can go, and then we'll go over it together. Okay. Lori Field, this is class 26. Join the discord, join the catch-up crew. Never too late. All right, folks, three minutes on the clock, you got this, dig deep. We're building a constructor that has four properties and three methods. Ziggy they are there at the go to the follow-on materials channel.

They're there Did I label it wrong on discord? Let's see. Nah, it says 26. Welcome Nicky's glad you found us got quite a few folks from Columbia in the community Okay, 40 seconds left, folks. You got this, get as far as you can. Are objects common in front-end development? Yeah, they're common in front-end and back-end. We're gonna use them across our stack as we kind of continue on. Yeah, we'll see the class syntax in a few seconds. I like it too. Why is it called a stack? Stack is a pretty common term across programming, but also it just refers to all the things you need to get your job done. You have a bunch of these different tools that you throw in a stack, which is a data structure, but. All right, folks, come on back, come on back. Let's take a look at this together.

Alrighty, so we wanted to create a constructor with four properties and three lovely methods. And so let's go ahead and create our constructor. And I'm just gonna go ahead and say function and we're gonna call this a pizza machine. But what do I need to change about my function name here? What do I need to change about my function name here? Yeah, it needs a capital P. Remember that capital P doesn't really do anything. It just lets us know, right? Just between us, between me and you. That's a constructor. All right, cool. And we're going to have a couple different properties. Let's look what our original properties were. We had size, toppings, crust, and sauce. Remember that for me.

Size, toppings, crust, and sauce. Size, toppings, crust, and sauce. All right, there we go. So now I'm gonna go ahead and set up all of the properties and what keyword do I need to use so that the objects that come out of our pizza machine have those properties? What keyword do I need to use? Yeah, this. This.size, and I'm gonna set it equal to size. And I think a lot of times when I do this, people get kinda confused. This right here is creating the property on the object. Like when we look at our objects and they have the size property and it has some value, that comes from here, right? This.size is giving the actual object the property of size. However, this right here is just a what? On the right-hand side, it's just a what? Just a parameter. Is this the parameter?

Yeah, we could call it whatever the heck we want. what we could call it, Rainbow Unicorn. And it wouldn't matter, we just have to call it Rainbow Unicorn here. It's just common practice that this, that's binding the property to the object and the parameter are typically just the same. And so we'll just always kind of keep it the same. But I want you to make sure that you know that one is a parameter and one is actually binding that property to the object. Cool. So we'll do this.size equals size and we'll do the same thing. This.toppings equals toppings. And then we'll do this.crust equals crust and this.sauce equals sauce. Cool. All righty, next, we gotta go ahead and we gotta add our methods. So what were our methods that we had? Let's see. Estimate delivery time, burn mouth, and frisbee.

All right, so let's go ahead and create those. Cool. Let's go ahead and create those. So we'll go ahead and do our lovely this.estimatedDeliveryTime. And we'll set that equal to a function. And that function will be a console log. And we'll just say calculating for now. Calculating. Cool. Next one was burn mouth. This dot burn mouth equals a function and that function, we'll just say a console dot log, and we'll just put in there, there we go. And then we'll have the last one, this dot, I can't believe I keep forgetting it, frisbee, yeet. And we'll just go ahead and create this as a function, as a console dot log, that is yeets. Yes, there we go, cool. Alrighty, now let's go ahead and create a new pizza.

Let pizza equal, and we can go ahead, and what keyword do we need to create our first pizza? New and we can use our pizza machine we can pass in the size large Toppings we can pass in as an array. I'm just gonna say spinach and Garlic The go-to's as one might say and then we're gonna pass in crust Which will go Deep dish this time just to show Chicago some love And then sauce we're gonna go up for sauce Salt we're feeling for sauce We're saying Alfredo barbecue sounds kind of good though, I'm gonna say white sauce I don't know, do y'all have like white pizza where you come from? That's like, um, it's like a white sauce with like tomatoes and banana peppers on it. That's, that was always the best pizza. Yeah, it's not Alfredo though. It's not Alfredo sauce. That's something different. This is, this is like a really nice. Here from Philly, we have a place called Celebreeze. They have the best white pizza I've ever had in my life. Cool. All right, so we got a new pizza. Let's save this and let's go ahead and open it in the browser and see how we're doing. So let's open it in the browser.

Wrong browser. Boop. All right, here we go. Let's open up the inspector. And we should be able to see a pizza. Cool. Great, we can see that the pizza is an object that was made from the pizza machine constructor. We can see that it has a burn mouth function, a crust, an estimate delivery time method, a frisbee method, sorry, burn mouth was a method, sauce property of white, a size property of large, and a toppings property. That's an array, look at us go. Look at us using all of our different data structures. Look at us go. Alright, it's clicking alright, so I like to hear in a lot of that tonight. Oh, it's finally clicking. Hey, let's go turn up congrats. Thank you for hanging out for it to start clicking a little bit alright.

So we created our pizza. What if I wanted to? What have we forgotten on our constructor? What could we add to our constructor so that all of our pizzas had something? What could we do? What, what, what, what is our constructor missing? Cheese type. Ooh, big facts. So let's go ahead and do pizza machine. That prototype, that cheese, or Chez. Excuse me, how fancy you are. And let's go ahead and start by saying false. It must be true or false. That's what we'll do, we'll say true or false. Cool.

And so now if I ask for pizza dot Chez, we can see it's false. So did pizza itself have Chez? No, it had to go up to the pizza machine prototype to get that Chez and see that it was false. That's beautiful. Somebody asked during office hours, and I thought it was a really good question. So I wanna make sure we take a second to mention it while we're here. Eventually, not now, this is too advanced for right now, but eventually we can use this prototype to our advantage. Right now, let's say I'm Domino's. How many pizzas do you think Domino's makes a day? That's like a consulting interview. How many pizzas does Domino's make a day, do you think? Y'all getting wild all over here. Thousands, maybe a million, I don't know, I don't know. Let's just say, let's throw prices right rules out the window and let's say 100,000 pizzas a day. 100,000 pizzas a day.

And so if we were building a pizza machine and we made a hundred thousand pizzas and we gave each one the Frisbee method, how many, Google says 1.5 million pizzas a day, all right. All right so let's say 1.5 million pizzas and every single pizza that comes out of our constructor has that Frisbee yeet method. How many methods do we have stored in memory? If every pizza that came out of the constructor had a Frisbee method, how many Frisbee methods will we have in memory 1.5 million, because every single object that we created would have that method. If we look at pizza right now, we can see that it has its own Frisbee method. That Frisbee method's not coming from the prototype. That's the method that's on the Frisbee that came out of that constructor, right? It got it from the constructor, but it's not sitting on the constructor. The object has that itself, right? The object has that itself. That's just the name of where it came from. That's not actually the prototype. type, that pizza has its own Frisbee method. So we made 1.5 million pizzas. It's not inheriting that we just made 1.5 million pizzas that all had their own Frisbee method, which means we have 1.5 million Frisbee methods in memory.

What would have been a lot better for us to do if we knew we were gonna make millions of pizzas? It would have made a lot of sense for us to put it on the prototype, right? That way the, the pieces that got made weren't holding onto their own version. They could all share one version. And so we just lost, if we did that, if we put it on the prototype, we 1.5 million methods come out of memory and we can just use one that's on the prototype. So eventually we can start using these objects to do stuff that makes our code more efficient, that makes our code work a little bit faster or use a little less memory. But like I said, that's for the future. But I know some folks were thinking about that and it came up during office hours, so I wanted to mention it again. Why wouldn't you do that with every method? Maybe you do. Maybe we'll get there. Maybe we will do that. Cool. All right. Before we take our break, I wanna show something real quick.

Actually, let's take our break. When we come back from our break, we're going to look at quickly the class syntactical sugar, and then we're jumping into APIs, and we'll finish up class by playing with our APIs, working through our APIs. When we come back from our break, yeah, we'll do a raffle. So let's take five minutes on the clock. Cool. Go ahead and press play here. I'll see you in five minutes. If you're able, please get up, move around, hydrate. This last hour of class is gonna be great. We're gonna have a lot of fun with the APIs. We're gonna get a raffle in, but please, if you're able to, get up, move around, and I'll see you in five. I'll bring back Bob for you. And that's what you want. Thank you, Nor. All right, folks, come on back.

Come on back. All right. So, we saw the traditional constructor and with the newest versions of ES6+. When I say ES6+, what the heck do I mean? Yeah. So there is a specification for JavaScript, Kind of like the rules for how JavaScript should come together, kind of the guidelines for how JavaScript should come together. And that's called ECMAScript. And those kind of versions, or the versions of this, get updated every so often. And so in 2015, there were pretty big changes to this standard. And so we call anything that happened from like 2015 forward ES6 plus and what we mean is like all the big changes forward that happened and so one of those big changes where they added some Syntactical sugar to stuff to make JavaScript a little bit more digestible for folks coming from other languages, right and so One of the things they did is what we have on the screen here, which is a class books coming from other object-oriented to languages, we're very used to having classes, but prototypal inheritance is a little bit different. And so to make them feel comfortable, they gave them classes, which kind of obfuscate away the prototypal inheritance. It's still there, it's still underneath the hood. It's just a little bit, looks a little bit different so folks feel a little bit more comfortable. So going forward, we won't write our constructors using like the older syntax. You'll see me using the class-based syntax to do it.

and there's really only one real difference. That you kind of see it break down into two main sections, the constructor area and then your actual methods. So instead of doing like this.honk equals and then a function, you give the name and your parentheses and your curly braces like normal and that's the method. So this make car constructor has the constructor bit here just like normal and then our methods follow after. So it's very similar to the constructor that we're used to just a little bit of sugar to make a little bit different Somebody said who makes the changes? There are committees or like boards that make changes to these languages whether it is HTML CSS or JavaScript and you can actually like run for office for some of them, right? every so often people have to be like voted on to the to the to the teams and And so, it's a big deal if you get really into this stuff that you wanna help push the specification forward, and then there are people that are in charge of saying yes or no, and they all vote, kind of like a board for JavaScript, basically. So that's pretty cool. All right, let's do a raffle. It's not open yet. Let me go ahead and open it first. All righty. Not yet. All right. Not yet.

All right. There we go. You can do exclamation point raffle to get in. Exclamation point raffle to get in. This is where I learn with Leon swag let's do one a minute here just to give everybody a fair shot exclamation point raffle to get in you got this get in get in you too could be the lucky owner. The, the, the, the merch sells out folks. This might be the only way to get it. How are we doing with the store? Let's see if there's still anything in there. Nope. Merch sold out folks merch sold out. That's wild I love it As you get your merch you gotta you gotta rep it Throw it in the discord showing us that you got it tweet me All righty folks come on back All righty, let's go ahead and pick the winner. I'm gonna close the entries here. And I'm gonna pick the winner in three, two, one. Jasmine A, congrats on the win.

Jasmine A, congrats on the win. I will get a message your way here. You're gonna whisper for me here on Twitch. So keep an eye on your whispers and I'll reach out to you after stream. Cool. I'm gonna go ahead and complete this one. I'm gonna make my little note over here. Cool, well we're gonna do another raffle before we do our raid this evening, so still another chance to get a lovely, lovely 100 dev swag package. Cool, all right. APIs, what the heck are APIs? Chat, what the heck is an API? We haven't announced the project portfolio winners yet. We haven't done that yet. What are APIs? Oh, I see a lot of things over here.

Application programming interface. What's that mean? application programming interface. What? Huh? It's a simple interface for some complex action. Simple interface for a complex action. So, I have in front of me, I can't unplug it, I'll use a different. but let's use my lovely Pokemon Pikachu 2 who's currently mad at me. I have to shake him so he doesn't get mad. I have this lovely Pokemon Pikachu 2 and if I wanted to turn this off, what could I do? What's the most primal thing I could do to turn this off? I could smash it. I could just throw it on the ground. Sometimes Pikachu gets on my nerves.

I could just smash it, break it, and it would turn off. Maybe I could rip the battery out and it would turn off. But that's probably not what the makers of this want me to do. They probably want me to use the interface that they have given me and press the right button to turn this on and off. So we could have done something extreme, like smashed it or ripped the battery out, but the makers have kindly given me an interface. And that interface is the button to turn it on and off. So we can think of this turning on and off as a very complex action. There's a lot of stuff that has to happen for this to turn on, right? The button has to be pressed. Power has to fill capacitors. The power has to leave the capacitor, go to the LCD screen. That screen then needs to display the right pixels to see Pikachu in all of its glory. That is a very complex action. And turning it off is the same thing. We have to like power it down.

The power has to leave, the screen has to turn off. all these things have to happen for this to turn on and off. And I don't have to know how any of that works. I don't have to know what's happening from the power leaving the battery to powering the screen. I just press a button or I give it a shake and that's my interface to turn it on, right? That's my interface to turn it on. I see a lot of people throwing out abstraction. You're right, we're gonna get there, right? And so for me, I like to think about this in another way too. I had a simple interface that turned my Pikachu on and off, but I also like to think about a restaurant, a restaurant. When I sit down, the restaurant gives me a simple interface that enables something complex to happen in the kitchen. What is the simple interface that a restaurant gives me that enables me to have something complex happen in the kitchen? Yeah, a restaurant can give me a menu and I can select what I want off that menu. That menu is my interface. And when I select something off that menu, I can then have something complex happen in the kitchen.

And so when I select my, let's see, what do I want? Pizza, right? We're going with pizza. When I select my pizza off the menu, I don't actually know what's happening in the kitchen. I don't know how long they're stretching the dough for. I don't know exactly what's in the sauce. I don't know exactly what type of vegan cheese they're using. I don't know where the spinach came from, right? I don't know. I don't know what's happening in the kitchen. I don't know if they're washing their hands, exactly. I don't know what's happening in the kitchen. All I know is I had a simple interface, Something complex happened and then I have a delicious, delicious pizza, right? Same thing is happening when we use, right? When we use the APIs that we're about to use, but instead of it being a menu and the menu being an interface, the URL that we have is our interface.

Based on the URL that we use, we are making a request for some complex action to happen on a server, that action happens, and then the server responds with some information. So just like the menu enabled me to make a request for some food, a URL will enable me to make a request for some complex set of data or some sort of action that happens on a server and get a response. Now there are APIs that we can use from everywhere. We have web APIs that we're going to use tonight where we're worried about getting data from a server But there are apis built into our computers There's apis built into everything that you use because all an api is Is a simple interface for something complex you've been using interfaces all day long You might have used a light switch. You might have hit a key We have all these beautiful interfaces that we use all the time that enable us to do some complex actions cool Now, when we talk about an application programming interface, we're gonna start throwing out some of those more meaty terms, but let's save that for Tuesday. Let's just worry about what an interface is. In this case, our interface will be a URL. All right, it'll be a URL. We'll use that URL. That URL will enable us to make a request to some server, that server will hear our request and it's gonna do a bunch of stuff. It's gonna do a bunch of stuff. Once it's done doing that stuff, it's gonna respond. And the stuff it's gonna respond with is typically gonna be formatted in JSON. The APIs we're gonna be using tonight, the web APIs we're gonna be using tonight, will hear our request and respond with JSON or a JavaScript object, right? JavaScript object notation.

And so we're going to get this lovely object back. And so once we get this object back, we can do whatever the heck we want with it. We can pull different properties out. We can run the methods that it came with, but all we're doing is we're using an interface, which instead of it being a light switch or a button or a menu, it is a URL. The server hears our request. It has some code that's been written to hear that request, generate the response, and then respond with that JSON. The stuff that's sitting on the server that hears our request and generates the response, what kind of code is that? Yeah, that's backend code. A lot of the first backend code we're gonna write is to build our own API. Something that hears a request, knows how to generate a response, and then responds with that JSON object. So we're gonna use other people's APIs tonight, but one of the very first things we'll do in the backend is make our own APIs. And so I think that's pretty cool. All right. So here is a simple bit of syntax that enables us to access web APIs while using a URL. We plug in our URL or our interface and we're able to get some data back from a server.

So here I have a couple big pieces. We have this lovely fetch method. And you can kind of see we chain these other methods. The then, the then, the catch. Eventually we'll build up to what these are. These are promises. We don't have to worry about that yet. When we get the object oriented, we'll learn about promises, then we'll learn about async await, we'll learn about all these other wonderful things that we will learn down the line. But let's not worry about understanding what the heck a promise is. Let's not worry about wondering what the heck async await is. Let's just learn how to use an API and get some data and have some fun with it. Cool. So this fetch is what enables us to use our interface. I promise I won't worry exactly, enables us to use our interface, which is just the URL. And we're gonna get some data back.

And this very first line here says, hey, just treat whatever's coming back as JSON. So just treat it as like a big old object. And then whatever came back, we're gonna pass through this parameter of data. So whatever we get back from that server is gonna be passed into this parameter of data. So if I wanna see what's coming back from the server, one of the first things I'm going to do is just console log data. If something was to go wrong, our error will be printed to the console. So we don't have to worry about how this is working or what exactly it's doing tonight. That's not our goal. We'll have plenty of time where we break down this line by line by line. All's we gotta know that this is a pattern that we can use to make a request to a server and get some pretty cool data back. That's it, that's where I want your brain tonight. All right, we're gonna make fetch happen tonight and that's all we're doing. Know that we can plug in our different URLs and we can console log the data that comes back or use it however we want. What does REST stand for? It doesn't matter what it's what this would be because this is just a what res and data are just what?

They're just parameters, yeah, we could have called this robot we could have called this unicorn It really doesn't matter It just it just it's pretty standard for people to use res short for response Like the response you're getting back from the server and then people use all different types of parameters for whatever they want to call it But if you look, this is just a method, right? We can see that it has the parentheses. We're running it, right? Kind of like if we had like a map or a for each or other things that we've seen before, just parameters. Yeah, cool. This is out of your comfort zone. Nah, it shouldn't be because we're trusting in this idea that none of this matters except for two things. One, that this is where we plug in our URL. And two, this is where we see our response. That's all we're worried about tonight. All this other stuff is gravy. We'll get there down the line Jason Derulo a thank you for the gift that sows. Thank you for being here. Hope you're doing well Jason Derulo always shows up when we need the most Alrighty so So we looked at an original example, which was our dog photos example. So let's go ahead and take a look at this again.

We have this idea, if we go to the dog photos example, we have an HTML file and a JS file. And what I wanna be able to do is get a dog photo from the dog CEO API and place that photo into the DOM. If I look at my HTML file, I have an image, right, an image. I wanna be able to take the value I got from the dog CEO API and plug it into this image here. Now, we've done this once together very quickly in class last Tuesday. And then if you were with Mayan Wolf, Mayan Wolf went through this in way more detail than we're gonna get to, right? And so what I want you to do is, I want you to take three minutes. You're really gonna copy and paste. Copy and paste, see if you can get the value out of the object, and then see if you can plug it into the DOM. Cool? We're gonna put just a few minutes on the clock here. Let's put four minutes on the clock. I want you to go ahead, we want you to go ahead, grab the value, All right, grab the value, see if you can plug the photo into the DOM. Let's go ahead and I'll pull up the slide that has, you can see the code. We're gonna use the code that we have.

We already have the interface, which is the DogCEO API. I need you to go and get a response from the API and plug that photo into the DOM. Try it. You got three minutes, 30 seconds to make it happen. We already did this, try it again. Why does data have curly braces and res doesn't? because res is on one line using that implicit return. And then data is also an arrow function, but we want to be able to have multiple lines. So we have the curly braces. Cause we might not just do it all on one line. Actually, we've actually done this before in class. You're really just copying and pasting on this one. And then mine did it as well. Minewolf did it as well. So yes, you should be a little bit more comfortable with this.

And it's because that's just how it works. That's how they built it out. They built it out to handle those two specific things in that order. Rest is just a parameter, you can call it whatever you want, but it's short for response No way juice to go away faster Can we have a yolo maybe maybe I gotta be careful with the yellow folks are getting too close If I paid you would you eat Papa John's no pretty comfortable there's no amount of money but make me Papa John's The crafty sheep, thank you for the hydration Cheers to you What if they sponsored a class? Never. They would never be able to sponsor this stream. Your ads are Papa John ads. Hey, I can't hate the game, right? Can't hate the game. All we do is talk about pizza on this stream. It makes sense. All right. Let's go through and take a look at this together. I am going to copy and paste. Boom.

Copy. I have my fetch. Boom. I already have my URL in place. I already have my URL where my interface. Let's go ahead and save and see what we have working for us. Let's go ahead and open this in the browser. Let's open up our inspector, go to the console, and we can see we're getting an object. Great. We're getting an object. We see that that object has two what? Two what? Two properties, nice. Yeah, I have no control over the ads, so if you keep spamming ads, it does nothing for me. I can't help you, I'm sorry.

We run ads during the break, and normally that works for most folks, but sorry, nothing I can control there. Cool. Messages and status. We have two properties, right? We have two properties, message and status, and so it's part of one object, right? And so what I can do is I can grab either of these properties, right? So let's go ahead and take a look. If we look at our fetch, we can see that everything that's coming back from the server is gonna pass through this function. Yeah. Yeah, if you refresh and come back in, you get pre-roll ads. And so, yeah, I think that's just kind of one of the downsides of refreshing, unfortunately. Definitely, yeah, cool. So everything that comes back from this server, right? Everything that comes back from this request is gonna be passed through into this method and gonna be passed through data. So wherever I see data, right, wherever I see data, that's the response that has come back from the server.

And so you can actually see us console log, right? We console logged the response that came back. And since we console logged that response, right, since we console logged that response, we were able to see the object that came back from the dog CEO, right? He's so cute. He can't really stand up yet. So Simba got up off of his like mattress that's probably more expensive than my mattress and like stumbled closer to me and then kind of just laid on the carpet next to me. Cutie. He's been all right. He's good. All right. So we can see that we got the object back from the, we got the object back from the API. So what happened is if we were to draw this, we had my laptop, that request left my laptop, went to the dog CEO server, the dog CEO server heard that request and it did some stuff. Maybe it had to go to the database, maybe it has like a database of dog photos, like the code went and got the photo from the database or the link to the photo from the database and then it responded to my machine with that data. And that data was formatted as JSON. And so we were able to use that JSON object.

And what we did with it is we console logged it. And the cool thing is since it's just an object now, right? Once we know that it's an object, we can treat it like an object. We saw that it had two properties. So it had a message property and a status property. And we can see that this message property is just an image. So let's go ahead and just do data.message. Save it, come back, refresh. And now we're just getting that image URL. Now, before we use the image URL, I got to ask you a question. For the first year that I used this code to get data back from an API. Do you think I could code it from scratch? Like probably for like the first year I ever used this code. I was using it all the time, every day, every week. No, hell no, I had no idea what this meant or how it worked or what all these bits meant.

I just knew if I use this specific code, I can make a request to this URL and get my data back. Eventually, I learned more, right? I learned what promises were. I learned a single way. I learned all these other things, but for like literally the first year that I was working with, probably more than that, probably like first two years, I was using APIs. I had no idea what any of this crap meant or what was really happening underneath the hood. I just knew with my big brain that if I put it in the URL there, I got some stuff back and I could use it. That's it. So take that pressure off your shoulders right now. You don't need to know more than that. Makes requests, gets a response back. That's all we're doing right now. All right. So I am console logging that URL to the image, but let's actually use it. So document.querySelector, let's grab the image.

Grab the image and we are going to use the source. We're gonna change the source of that image. And we're just gonna set it equal to data.message. Cool. Let's save it. Let's see if we can get it to work. Let me move this over a little bit. Let's refresh. Oh Looks like So I used to have a dog named cheeky's and that looks that reminds me of cheeky's Although I would never would have been able to get a hat on her. I would never would have happened That's so cool. Let's refresh if we get a different dog back this time. Oh Yeah, no fluffers. So each time I refresh, I'm making a new what? Each time I refresh, I'm making a what? Yeah, I'm making a request to their server, and their server hears that request, and it responds with that lovely JSON that I can use.

I can take that object, right? I can take that object, I can pull the pieces out that I want, and I can use them to my advantage. So what I did is I went ahead and I grabbed the URL that they gave me. I saw that I was getting back a bunch of data. I'm able to parse through that data and grab the bits and bobs that I want. Cool. Now, if you wanna see this taken to the next level, You gotta go back and watch MineWolf's VOD. So MineWolf, if you're watching me live right now, you'll notice underneath my name, there should be like somewhere that says 100 devs. 100 devs is our stream team. You can see all the folks that are on the stream team. If you click on that, you'll see MineWolf. You can go directly to their channel and grab the VOD after class if you want. It's also linked in the follow along materials channel. Watch their VOD if you want to take this to the next level. Right?

They use this, add it so much more stuff to it, spent more time going through it. So you can see how you could use this to make even more, even bigger of a project. Cool. It's working. Hey, cool. Let's move on to our next one. So next, the next API I want to use, or the next interface I want to use is the cocktail database. And the cool thing about the cocktail database is that it gives us a lot of different interfaces that we can use To our advantage. So here we go. I Went to the cocktail DB comm that was a risky type And inside the cocktail database, you can see there's a bunch of these interfaces which are all just different URLs that I can use to get different data I can use to get different data back. So we're going to use this to get different drinks back from the database, just so that you know, there is a non-alcoholic version of this. So if you don't want to be dealing with alcoholic drinks, you can use the non-alcoholic version of this as well. Cool. So the first kind of URL that I see, or the first interface I see is the cocktaildatabase.com. and all this stuff, but at the very end, I have the question mark S equals margarita.

And so if I make it a little bit bigger so we can see it, we can see that it's question mark S margarita. And so what we're gonna notice, right? What we're gonna notice is that sometimes we have the interface, which is the URL, but sometimes we can add query parameters so that the server knows specifically what we want. All right. It shows the query parameters. It enables me to say, look, you know what? I don't want any specific kind of drink. I want a margarita back. And so we can use these query parameters to get certain stuff back from the server. Now, the server has to be coded to be listening for those query parameters. So this interface, this URL has been coded on their end and so that when it sees S equals, it only grabs stuff that's tied to whatever you put there. So let's go ahead and take a look and see if we can use this with what we've been using so far. So I have the shots, object shots folder, and that's where I'm going to start. So object shots, and what I want to be able to do is I want the user to be able to enter a cocktail and then get the name, photo, and instructions on how to make that cocktail. So the idea would be that the user could enter in a margarita and they would get back the name, the photo, and the instructions on how to make the margarita.

Okay? So I want folks to take a few minutes to try this on their own. Remember, you're just gonna take the fetch that we used, right, the fetch that we used. You're gonna use that fetch here. You're gonna use the new interface, the new URL, see what you get back. See if you can parse through what we got back. See if you can use it to your advantage. All right, so this is in the object shots. You want to be able to enter in a cocktail and get the name, the photo, the instructions and place them in the DOM. The URL itself is in the slides and you can use it. I'll leave the slides up so you can see it if you need to grab it. And then we're gonna put five minutes on the clock here and then we'll go over it together. I want you to try. Try, play with it, break it, see what comes back. Have some fun with it.

You Put the link in chat to Again, some cores errors, make sure you're using HTTPS, check that you don't have your VPN on, and then you're gonna have to Google how to get around it. Yeah, make sure you're using HTTPS. This is what we're doing. These just be able to enter in a cocktail, get the name, the photo, and the instructions and put them in the DOM. All right got this We talk with about api keys, yeah when we get there when we get there Why did the fetch get different dog images instead of a specific one? because they just returned a random one with each request. Glad to hear it, Stormtrooper. Gary, make sure you're using the right URL. Double check. We'll go through it together. Instructions are in the actual setup. You're just trying to get a drink back, that's all. A minute left and we'll go over it together 30 seconds and we'll do it together You get errors, you got to Google them. Errors are a good thing. Point you in the right direction.

No errors is when you got to get scared. All right, folks, let's go over this together. Come on back. All right, so we had our fetch that we had from the previous, the dog photos. Let's just grab this fetch and let's put it over here into the object shots. And we just need to change the URL out. So I gave you the URL on the slides. Let's try this URL first. If anything happens with it, make sure it works. If not, we'll grab the one directly from the site. Boom, let's save it. And I'm just gonna go ahead and open this in the browser. So open it in the browser. Let's open up the inspector. And we're getting a fail to load resource.

Error, file not found, undefined one. We go to our line five. We have an error here. We have an error. It told me on line five there is an error. What's the line five error? There's probably not a message property, right? That was specific to the dog CPO, the dog CEO API that I was using. Let's go ahead and save this. Let's go back and let's refresh again. We'll refresh. Great, awesome. We got a lovely drinks array back. And if we look at this drinks array, there's a lot of stuff in here. We got like this object.

Let's see, we have an object that has a drinks property and that drinks property, right? That drinks property has an array inside of it. All right. Has an array inside of it. Let's go back and take a look. Oh, we also have this stuff down here, right? We don't need this anymore. Boom. So let's get rid of this. That'll probably get rid of the error too. And we can just see the object in there. Cool. So I got back an object and that object has a drinks property, and that drinks property is an array of objects. We see that, right? All the objects that are inside of that.

So let's just narrow this down a little bit. Let's just grab the drinks property and see what we get. So data.drinks. Cool. The data.drinks. And now we're just dealing with the array, right? We did, we saw that there was drinks in there. There was, there was an array in there, right? So we just had drinks to drill into it, to drill into it just a little bit. And now we're just dealing with the array. We can see that the array, it has a bunch of objects inside of it. How could I grab the first object out of this array? Okay. Index zero, yeah, let's try it. Drinks.

Index zero. Let's save it, let's see what we get. Remember, this is all about being playful, trying it, sometimes it works, sometimes it doesn't. And there we go, now we have just an individual, we have an individual object that came out of that array that came with that big old object. So all I did is I just drilled down, right? Let's delete it and go all the way back. Let's start with just data, just data. Let's start there. We can see that we got this object back and that object has a drinks property, which is an array. And if we look, it's an array of objects. So I can go drinks and then grab the first object using our array notation. So let's go ahead and do .drinks, square bracket zero is gonna grab the first drink out. Let's save this and refresh again. And so now I'm getting an individual drink. We can see that it is a margarita.

We see all this stuff about, Like all this stuff that came from the, uh, from the, the response. And so I like a few things here. I want, I want the drink name. Oh, here we go. Stra drink is probably the name of the drink. I'm going to want the thumbnail, like the picture of the drink. and then I want the instructions on how to make the drink. And I'm gonna wanna put them into the DOM. So let's go ahead and do that. Do we have anything in our HTML? Let's just check. Oh, we do. We have a place to put the name, we have a place to put the image, and we have a place to put the instructions. So we'll just target the H2, the image, and the H3. Cool.

H2, the image, and the H3, let's start there. So we can just do our normal document.querySelector and we're gonna target that H2 and we're gonna put inside of it whatever was in that first drink. So we know that it's data.drinks zero. Let's grab that to start. And then what was the name of the property for the drink name? I think it was just stridrink, right, stridrink. So we can just do stridrink. Let's copy that and do .stridrink. All right, let's save this. Let's see if we get anything popping up into the H2. All right, margarita is showing up in the H2 spot. All right, margarita showing up in the H2 spot. Nice, nice, cool. Let's go ahead and let's take a peek while we have the object up. Let's see.

StradrinkThumb is the name of the property that has the image in it. So let's go ahead and try using that. So I'm gonna do my document.querySelector. I think this is one of those ones where you're probably not trying to frantically copy along with me. Just pay attention to what we're doing so that we can kind of get there together. But with an image, I'm not using inner text. When am I gonna use the change in image? Yeah, source. And it's gonna be the same thing we have up here. the data drinks zero, but instead of it being stridrink, it was stridrink-thumb. So stridrink-thumb was the name of the property that was holding the image URL. So let's save this. Let's go back. Let's refresh. That's a massive image.

That's a really big image. Let's just do some quick CSS real quick. CSS, style.css, come down here. Oh, we already have something for the image. Let's go and do image. Let's just do with, I don't know. Well, let's not do with. Let's do height, 200 pixels. There we go. Height, 200 pixels. And that should just make sure that the image is smaller. Did I not save right? Let's refresh. There we go. Cool.

But now we have like the smaller image and the last bit was the instructions. Was the instructions. So let's see in here. Struh instructions is what it's called. Let's go ahead. Let's go back to our JavaScript. We're gonna target that H3, document that query selector. Let's target the H3. We'll use inner text again. Remember, inner text just enables us to put text inside the element. We're gonna grab the drinks again, but it's not gonna be strdrinkthumb. We just saw that it's strinstructions, and I don't trust myself to spell it right, so I'm just gonna copy it, and boom. And so this is a lot of like your early API work, where you are just kind of like looking at the object, at picking it apart, trying to get pieces out, playing with it. Sometimes it breaks, sometimes it's not. Sometimes you have to dig deeper, sometimes you have to go back up a level.

Let's save this, let's go back. Cool. So now we have a margarita with the photo and the instructions to make it. Let's go. I love it. Cool. But right now, this is hard-coded. This is hard-coded. This will only give me margaritas. I need a way of changing what this is so that I can get stuff that's not a margarita. So what I wanna do is inside this HTML, We have an input and a button. So what I want to do is I want to get the value out of the input and use that as part of my request. So we're not hard coding Margarita, right? How could I get the value out of the input when I press the button? What do I need?

We need an event listener. So let's go ahead and create an event listener. And there was nothing special about that, right? It was just button. Yeah, it's just a button. It doesn't even have an ID. There's only one button. So we can just use the button. So we can say, let's come up here, document.querySelector. We'll say button, and then we'll say addEventListener. We'll need the click, and then we'll call our function get drink. Cool. Let's go ahead and create a function called get drink. And what I'll do is I'll put the fetch inside of that function. And the reason why I need to put the fetch inside this function is because I eventually only want the fetch to run once I've gotten the value out of the, the value out of the input.

So let's, how do we get the value out of an input? We've seen this pattern before. Definitely should be in your Anki by now. Yeah, .value. So let's do document.querySelector, input.value. And we have to do what with it? Right now it would just like poof out of thin air. Use a template literal, I got you. It would just poof out of thin air. You gotta store it. So let's just call this like let drink equal. And that'll be the value that the user entered. And then we wanna plug it in here. So what we could do is we could use a template literal where I turn this into ticks. and instead of hard-coding margarita, we can put in our bling drink.

There we go. Try it, see if it'll be on one line. There you go. So now what's gonna happen is we will click our button. We'll grab the drink out of the input. And then instead of just having margarita hard-coded, it'll now be, it'll be whatever drink we pass in. Cool. Let's save this. Let's not get wild right off the gate. Let's use the thing we know already works. Let's grab the margarita and what tab is this in? There we go. And let's come back here, let's refresh. Notice how we're not getting anything by default anymore, right? Notice how we're not getting anything by default because we've now said, all right, we got to plug in what we want.

We're gonna click the button. First try. Let's go. Let's go. Let's go. First try. The training wheels are coming off. Just ripped my shirt. That's only fans content or else I would. Let's try a different type of drink. Let's try gin. Nothing makes you want to fight like Gin. All right, here we go. We got a gin fizz back with the image and the ingredients to make it. I'm a whiskey drinker though, so let's do whiskey.

Beautiful, we got a whiskey sour. All right, got a whiskey sour. And we get the image, we get the shake and ice. First try, and you can still see that we, you can still see that we have the, like the still the console logs are there. So you can see the console log that's coming through each time, but we're using the data a little bit differently now. So we click the button, which fires our function get drink. The first thing we do is get the value out of the input. And then we make our fetch like normal, except this URL, this interface that we're using, it has a query parameter that enables us to plug in the different drinks that we would want. Beautiful. Now we can get different drinks back. Now, there's a couple of things that I want you to work on because we're kind of at the end of our time tonight. There's some things I want you to work on for homework. One, this right now would have a hard time with having spaces in the drinks that we're asking for. Right? So if we ask for a drink that has a space in it, right now it might not work.

Well, actually we use a template literal, but try it out. See if you can make it work with names that have spaces in it. Now, the push homework is we know that when we make a request, right, if we console log, let's get rid of the drink zero because we don't want just the first one. Let's save this. Let's go back. Let's refresh. Let's put in gin. we can see that when we put in gin, we get 20 different drinks, right? We get 20 different drinks. And so what I want you to do is I want you to see if you could make it cycle through the drinks. That's the push homework. The push homework is to see if you can make it be like a carousel, right? a carousel of drinks and the non-push homework is try this without a template literal and see if you can get it working with things like a Moscow Mule, a drink that has a space in it. The template literals help you here, but if we didn't use a template literal, play with it. But really what I want you to do is just play with this, right?

Play with the code here, break it, see what you get back from the objects that are coming in, tear it apart, right? Make sure that you play with this stuff. APIs are meant to be played with. You're meant for stuff to break and to get on Discord and say, why am I getting this error? So please, as you are playing with this, come ask questions on Discord. Make sure everything is going the way you want it and then have fun with it. Make this app do something. We saw all, look at all this data that we have for each drink. There's no reason why you can't have other stuff showing up, different ingredients showing. Maybe, maybe yours is ingredients showing up, right? Yeah. Cool. Now, there's one other thing I want you to work on before homework. Eidel, hey, thank you for the stretch. Hold on, you know, we gotta, can't do this live.

Oh yeah. Oh, okay. Thank you for the stretch. All right, so the other bit of homework that we have tonight is instead of playing, just playing with the cocktail database, right? That's what I want you to play with. Make it different, do something to it, break it. You wanna push, see if you can get it to be a carousel. The other bit of homework is NASA has a bunch of wonderful APIs, right? NASA has a bunch of wonderful APIs. One of these APIs is the picture of the day. I want you to try and getting the NASA picture of the API, the NASA picture of the day API working. Can you get an image back from NASA and then we will take it a step further during our next class. Next class, we'll work with the NASA data to not only get photos back, but to get them back for specific dates at a specific time, right? So we can get them back and we'll be able to handle a bunch of edge cases. So your homework I want you to work on before next class is to play around with the cocktail database, try the different URLs, try the different endpoints, try these different pieces and play with it, have some fun with it.

and then try and get the NASA picture of the day API working. We have some other stuff here in the homework. Remember, I want you to play with the cocktail database, try getting the NASA API working, and then your homework that won't be due Tuesday, which will be due Thursday, is to build three really simple apps like we just did. I want you to try using some public APIs to build some simple apps. Just use the fetch that we did plug in a different URL and see what you get back Some of these API's in this public API list won't work They just they're just it's just an old list. So some of them will work some of them won't Make sure you're still doing your code wars daily. Make sure you're still doing your Anki daily and Thank you for the best week ever and We can't we can't We can't just end the best week ever like normal. We got to end the best week ever with a very special raid. And it is my absolute pleasure and privilege to raid. Hello, it's Rufio. One of my dreams, folks, is to always just raid folks that are part of the stream team. And so hello, Rufio is holding it down for us. We're going to go ahead and raid them tonight. If you haven't yet, please do me a favor. Give them a follow.

It's amazing to see somebody code from a different perspective. It's amazing to see them code through things that are not through my eyes. You will learn so much more about the things we're working on when you watch somebody else work through them, where you participate and help them work through the code as well. So we're going to go ahead and raid HelloDrufio. Have a wonderful rest of your evening. Have a wonderful weekend. again, good luck with the homework and I will see you all for office hours on Sunday. If any of this stuff is tripping you up, come to office hours. We're gonna have some fun playing with more APIs and we're back at it next week. More more API fun, bigger projects, better projects. I hope you're ready to have some fun. Peace everyone. Have a good night. Peace YouTube.

End of Transcript