Introduction

Let's go. Good morning. Good afternoon. Good evening. No matter where you're coming from hope you all are doing. Well, welcome back everybody. Whoo That music was a vibe today the the song before we came live I don't know. They switched it up Harris Heller switching it up on us, but I liked it. It was good. Yeah, we go it What's going on everybody? Welcome. Welcome Glad you are here Excited to build some dope stuff tonight tonight. We're getting data from NASA and bending it to our will We are learning about local storage and some of the secrets behind Wordle. And then we are diving in and building a whole card game together, utilizing APIs the whole way through. So lots of fun, lots of stuff to get into, lots of work with APIs.

We're gonna see them in real time. We're gonna build stuff with them. We're gonna mold stuff with them. We're gonna see a lot of really cool stuff. So excited to hear. Hope you're ready to get your fingers on the keyboard to build a little bit the C Api is like start to be useful. And so lots of fun stuff to get into. Oh I'm excited. It feels like a good day. I Love card games me too. Me too. I play a lot of card games Welcome everybody. All right, you know how we do. I I always like to start off with some questions. And so the questions today for the question of the day is Where's your favorite TV show growing up Melody dev a coming through it's in time for class with 129 folks a welcome everybody Glad you're here Melody, what were you working on?

And why are you not on the stream team yet? Were you working on? We ought to I Forgot I asked the question before you rate it So I'm like, what were you all up to and everybody's saying spongebob spongebob like oh, yeah working on spongebob. That's great Glad you're here. Thanks for swinging by Well, we got a lot of good one and an Eddie doctor who sailor moon Dragonball Flintstones Rugrats Rock goes modern life. Whoo. You should turtles Doctor who? Wow These are some good ones Pokemon, of course Good times, Digimon, I don't know about that. Goosebumps, love goosebumps. Goosebumps up there high for me. I think there was like a wave where you were like into like goosebumps. Are you afraid of the dark? Ghost Rider, if you were a PBS kid like myself. Ooh, there's a lot of good ones. All right, folks, I see y'all.

What was my favorite? Hmm. I really like PBS shows because that's all I was allowed to watch. Ghost Raiders up there for sure. Arthur, when I was younger, was pretty, pretty dope. Actually, Arthur was dope like when I was in high school because I would get home late and it was it was it was the last two shows. It was Arthur and then Dragon Tales before the news started. So I watched me a little bit too much Arthur later in my later in my years. Doug was always up there to the old-school like Saturday cartoon like the Disney block on on if you're in Philly channel 6 that was like recess and all those cyberchase all cyberchase was a was a and wish but I think wishbones out there I think wishbones probably my favorite yeah wishbone whispering was up there for sure and zoom oh I want nothing more to be a A person on zoom All right, I like this one cat dog was out there to you Cat dog is when our magic school bus. I think that might be it. I think it's magic school bus. Yep. Magic school bus Hold on one second right back I went to a flea market recently and they had all the old school magic school bus games human body, animals, solar system, yeah. Watch out, what a flex, right? What am I talking about?

Anyway, they had them for a dollar, so I got them all. I was like, that's my childhood right there. That's what I always wanted to play whenever I was in school because my school had them all. Oh, do you have a CD drive? I actually do have a CD drive. Don't ask me why. Some of us sail the high seas more than others. That's all I got to say. Gargoyles, that was a good one too. All right. Thank you for letting me know what your favorite TV shows were. Any coding related questions before we get started this evening, folks? This is a fun one. I like seeing everybody's answers. Thank you for showing me what you're into.

Darkwing Duck, oh, that's such a good one. So I got a job, but I couldn't believe it until today when I got the laptop. It's funny. As some people say that my question, what is your advice on working as a software developer? Um, what you do in the first three months you can coast on for the next year. So get in there and go hard in those first three months. Uh, one of the first things you need to do is talk to your manager and ask what does success look like three months? Well, one month, three months, six months, nine months in a year from now. Right. Have that conversation. Like if I do these things, you will consider my time here successful. When you're done having that conversation, send them an email, thanking them for their time and listing all the things that you just agreed to. Right. That way, when they try to pay a fast one on you in three months and they're like, Oh, well, you didn't do this. You're like, well, when we talked, you said this was the goal and I hit that goal.

Right. So make sure you understand what success looks like in your role Spend time building relationships and friends with folks on your team and not just your team But kind of all the the tangential teams maybe talk to the designers maybe talk to More other product members as well. So get to know folks get to know folks even outside your team build those relationships No Those relationships actually Help you as you go deeper in working at that company and know what success looks like and go hard for those first three months get there early, stay late, or log on early, log off late. Just for those first three months to set that impression because then you can kind of, I don't know, skirt skirt a little bit and still hold on to that rep. So yeah, go hard in the first three months, make sure you build good relationships, make sure you know what success looks like and don't be afraid to ask questions. Cool. How do we code the API to loop through the array? Well, that's part of the push work. So that's not due yet. All you do is you get that array back. If you're talking about like the cocktail database, you get the array back, and then you can set up a loop to move through it. Now, if you just do a for loop, the problem with that is that you are going to just kind of get to the end and just show that in the DOM. So there's something else you can use, like a set interval or some other things that will only move at a certain period of time. So if you're trying to do like a carousel, look up set interval, and maybe that's a good place to start. Is there a channel on Discord for the Ketchup Crew?

Yeah, of course. Once you agree to the rules and join 100 devs, you have to click the emojis to join. You'll see a Ketchup Crew channel. Use the counter? Sure, perfectly fine to use a counter as well. Should we build our own carousel or use a plugin? Build your own, because it's really not that, it's really nothing that you need from a plugin if you just set it up based off, because you already have all the data and everything. It's just showing it at a certain interval. Cool. Jerky, happy birthday. Let's see if this still works. Oh, happy birthday. Alright folks, thank you for getting your questions in. I always like to give the folks a few seconds to get in here that are kind of running from work. So let's jump into it.

We got a lot of fun stuff. So we're gonna talk a little bit about 100 devs. Then we're gonna quickly review very, very, very, very, very quickly, some basic review, arrays, objects. Then we're gonna jump right into working with basic APIs, utilizing NASA's API to get some data back. Then we're going to learn more about other APIs, not just web APIs, but maybe even some other APIs like local storage. We're going to see how Wordle actually stores their data. We're going to see it live in the browser. And then we're going to wrap up by building a card game together using an API. So really fun to get into it. Let's jump in. All right, if you haven't checked in yet, go ahead and do exclamation point check-in. That gives you the link to today's tweet. I remember just typing in check-in doesn't actually do anything It just gives you the link So if you already saw the link on discord or on Twitter, you can just always like and retweet that Remember check-ins help grow the community But it's also when we get to the end and you you need the support or things that we're gonna provide at the end We're making sure that folks that get that support where the folks that we're checking in and we're here for class All right I'm gonna keep saying it and actually I actually like that this is the same character or same person because the checking in shows you that you are not alone, that there are thousands of people here that are learning right alongside of you that are that are going through the same experience that you are going through. And I think that's an amazing, amazing thing. I think trying to learn how to code on your own is a super hard endeavor, but when you're doing it by yourself, it's even harder.

So if you've been part of this community, thank you. If you've been part of it, but just haven't participated, get on Discord, ask questions, get the help that you deserve because you're not alone going through this. And as we go through this process, especially when we get the APIs and we're starting to build more and more stuff, you got to realize that you're probably feeling some things and the things that you're feeling, Maybe others are feeling them too. So I always like to point out our channels, like the struggle bus channel. I like to point out even the celebrations channel too, that you can see that there are highs and lows to this process. We're firmly in the trough of sorrow and, uh, you're not alone going through it. So definitely use discord, not only for just like help, but also to commiserate or to celebrate as you kind of go through the highs and lows of the trough of sorrow. Cool. Also, remember health first, please, right? Health first, please. If you need to take some time for your mental health, take it. If you need to miss a class because you have to take care of yourself, do it. We always will have the catch up crew. You can always catch the body. You can always come ask your questions on Discord.

Remember this is a marathon, not a sprint. Especially as we start getting deeper into it, start getting deeper into it, you're gonna start putting more and more stress on your body, more stress on your hands, more stress on your eyes, It's more stress on your shoulders. And so do the things that you need to do to take care of yourself, please. We still got a long way to go, folks. Still a long way to go. All right, no networking until May. You're supposed to be taking this month to build, right? We're taking some time off the networking, not to chill a little bit, but to be actually be able to put time into building these API projects. Whenever we do something in class, we start something in class, the expectation is that you build on it, that you make your own, that you tweak it, that you modify it, that you play with it, that you get in the muck as you're in the trough and you play, right? And so the idea is that you really wanna take this time to play with your code, to break it, to come out of it. You're gonna learn so much more from playing and breaking and building than you will from just sitting here and listening to me talk, right? You gotta get your fingers on the keyboard. You gotta put in that time to play with the code and to break it and bend it to your will and do the things that you want it to do, yeah. Do you think there'll be a break during this cohort? Yeah, we'll probably gonna plan a break in a little bit.

I think once we get to back end, we'll probably have like a break between like really starting back end and getting into it, but we'll play it by ear and see how people are feeling. Speaking of break, this weekend we won't have any office hours because of the Easter holiday and some other holidays that are happening across that period too. We got Passover and all that fun stuff. So we will have class on Thursday, but then no office hours on Sunday. Cool. Cool. Client deadline, May 3rd. I think that is a holiday as well. So if your holiday falls on May 3rd, then your deadline would be the 5th, yeah. Yeah, it is on Monday, right, yeah. But then like the second run of it, I think is May 3rd, right? And so if that holiday falls on May 3rd, I think it does, then your deadline will just be the 5th. But deadline, 3rd, unless you, actually, let's make it the 5th for everyone. We'll just make it the 5th for everyone. Oh May 6 equals doctor strange movie leon can't make it on the 6th Uh client alternatives You can uh do grassroots volunteering All right grassroots volunteering or you can contribute to free Software right so free software or grassroots volunteering.

Um It's up to you which one you choose if you're not able to get a paid client. Remember, paid client, best thing you can do, these two are a close second, but really shoot for that paid client, unless you can't, then you have these two options available to you. If you haven't yet, if you haven't yet started Code Wars, you're behind. So make sure you're starting to do your Code Wars daily. The reason why we're taking a break from some of these other things is that you can be doing a Code Wars every single day. If you wanna join our clan, the clan is this full string here. It's not just the Octothorpe 100 devs, it's the full thing that's highlighted right now with the leonnoel .com slash Twitch, that way more folks can find us. When you join the clan, you get to see some of your fellow 100 devs and kind of have a little bit more community on that Code Wars platform. We're gonna start doing some fun stuff for folks That are participating in the clan So we're gonna be doing like discord colors and VIP here on Twitch and some other cool stuff And so yeah Make sure that you are using the correct clan that way you can get some Participate in some of those perks and raffles and fun stuff that we'll be doing later on We're gonna be looking not only for the folks that are at the top, but also the folks that are improving the most from month to month Cool Alrighty. Programming. We're going to jump right into it folks. We got a lot to cover today. I don't think this will be an end early day. We got a lot of stuff to build and so we're going to jump right into it. I'm at six Q and still so far from the top 100, well, you got to remember there, there are folks that have been participating in that clan from 2020, right.

Or it's early 2021. Right. And so we have folks that have been going hard for over a year that aren't just part of this cohort, but have been part of other, the previous cohort, or that are kind of mentors That have used the clan as well Hey trade your grid here that Already let's get into it aiming for top ten. I think that's a worthy goal. I wish you luck go for it Already programming what the heck is a program chat? What is a program, please? What is a program coming for Sean? I don't know. Good luck with that It's a set of instructions. Nice. Set of instructions that we write to tell a computer what to do. And therefore the act of programming is writing those instructions. Nice. The language we use to write and share those instructions is JavaScript. That is a human readable language that is then broken down into something that the computer can actually understand.

All right, so we're gonna jump right into the thick of it. We're gonna skip our variables, our conditionals, all that fun stuff and get right to loops. Chat, what the heck is a loop? What are loops? A way to repeat some instructions, exactly. Loops enable us to repeat an action or an instruction a certain number of times. We've seen so many loops now. We've seen four, wild. we saw maybe do Lyle once, we saw four each. We're gonna be seeing some of the more advanced one with arrays like map and all that fun stuff. So it just enables us to do some actions some number of times. Most common loop that we started off was a for loop where we have our increment, we have our end condition and we have how much we increment per each turn or each run of the loop. And then we can do whatever we want inside those curly braces. So this would console log one, two, three, four but we would never see five because we would never be able to meet this condition because five is not less than five, it is equal to five. Arrays, chat, what are arrays?

Are loops exclusive to arrays? No, we have while and for loops that have nothing to do with arrays too. So those are the ones we learned first, right? And then we saw that, oh, arrays come with some other methods that are also like loops or are loops. Yeah, arrays are toasters. Don't say you haven't learned anything, folks. You now know that arrays are toasters. Can we just stop and think about this for a second? If you know what a variable is, what a function is, what an array is, what an object is, like, come on now, seriously. Like, think just a couple weeks ago. Just think a couple weeks ago. You were just going through life, not knowing about variables, not knowing about conditionals, not knowing about Smurfs, not knowing about arrays, objects, APIs, like come on. I think folks kind of get, they start getting in the weeds a little bit with APIs and they forget all the wonderful stuff that you've learned so far. It's pretty wild. Kudos to you.

All right, but yeah, they're toasters. What a sad life it was, exactly. Life had no meaning. Yep, exactly. All right. Arrays are a data structure that enables us to store, right, an ordered collection. I say ordered collection because each slot in our toaster has an index and those index start counting at zero. We can create an array using literal notation. We also now know how to create an array using a what. We know how to create an array using literal notation like we see here, just using the square brackets, but what's another way that we can create an array? Yeah, we can use an array constructor, and that's gonna enable us to create an array as well. Cool. When we declare our arrays, we can assign them using literal notation values already inside of that array. We can access elements in the array using index. Remember those indexes start at zero.

So we can use the indexes to grab elements out of the array, and we're starting to see why this can be useful when we start dealing with our APIs, because we're getting those JSON objects back. And as we peel open the JSON objects, we're seeing inside those JSON objects arrays. And so you're still going to need to understand how to use those square brackets to get individual elements, right? Individual elements out of the array. Beautiful. Not only can we get stuff out of the array, we can put stuff into the array using the index, and we have a bunch of properties and methods that come with arrays. One of them is the length property, which will tell you how many elements are inside of your array. If you're new around these parts, we're going really fast because this is something that we spent a lot of time already covering. So if you're new here and you want to join our free 30-week software engineering bootcamp, definitely go ahead and click exclamation. We'll type in exclamation point 100 devs. It'll give you everything you need to know about joining and then join our discord, exclamation point discord, agree to the rules, click the emojis and then join 100 devs, and you'll get access to a bunch of other stuff, including the catch-up crew where you can catch up. A lot of this, review. We'd like to get our spaced repetition in, beautiful. We saw with arrays, we had some methods that enable us to iterate through the array. So our for each runs once for each element on the array.

We like to call it a goblin that goes and grabs the element and the index for each time that it runs. And so wherever I see X, it would be the element. Wherever I saw I would be the index. And I would be able to see this for each run four times because there are four elements in this array. Cool. All right, chat, what are objects? What's the difference between foreach and map? Map returns a new array. Objects are everything! Exactly, they are everything, aren't they? Yeah, they are collections of variables and functions. A collection of variables and functions, exactly. We call those variables properties and we call those functions methods. So they are a collection of variables and functions, but when you're dealing with an object, we call those variables properties and we call those functions methods. Nice.

I like to think of a physical object when I'm thinking of objects. So I like to think of a stopwatch using dot notation. I can add properties and the methods. We can tell this is a property because I set it equal to a value that's not a function. We can tell that tell time is a method because we set it equal to something that is a function. Cool. What if we want to make a lot of objects? We could use dot notation and type out our objects. We want to make a lot of objects. What will we need? Yeah, we would need a constructor and If we didn't have a constructor, what else was something else that we can use? What if we wanted to put a little sugar on our constructors? What could we use? A class, exactly. Remember, we got classes with the newer versions of JavaScript and we can use them.

Cool. So we talked about factories or these constructors. So the constructors are simply functions that help us spit out objects. So we can see all of the properties that we put on this object that comes out of the make car constructor. and we also see the methods of hunk and lock that would enable us to have methods that come with the objects that come out of this make car constructor. By just a quick glance, how can I tell that this function is a constructor? You're having Uber drive in Chicago and picked up somebody that was in the last cohort? That's wild. Oh, that's pretty cool. Yeah, we can tell it has a capital letter. Remember that capital letter doesn't do anything. That capital letter just lets us know that it is a constructor. Cool. Here you can see that we are creating a new object. What's the special keyword that actually enables us to create the object though?

If make car is just a function, what's the thing that's enabling us to create the object? Yeah, we got this new keyword. Exactly we got this new keyword and so when we have the new keyword combined with a constructor then it was a spit out an object that object would have a make a model a color a doors property and a honk and lock method I can lock there we go cool we also know that when elements are looking for when we're looking for properties on an object, where does it check first? Where does it check first when we're looking for properties? Yeah, it checks itself first. It looks at itself first and says, hey, do I have this property? And then if it doesn't have it, it goes up to its what? Check yourself. Goes up to what? Yeah, it's constructor prototype. And if the constructor prototype doesn't have it, it keeps going up the prototype chain until it hits grandma or the global object prototype. And then from that global object prototype, we can grab stuff and bring it all the way back down the chain. I really like this example of we created a Tesla Roadster and we saw on the last constructor, there was no Bluetooth property. So if I had created thousands or millions of Teslas, all right, none of them would have had Bluetooth. Well, I can put Bluetooth on the constructor prototype and now every single car that was made from that constructor, whether it was made in the past or the future, now has access to Bluetooth because the Teslas will always check themselves.

When they don't have it, they'll go up to the prototype. and since the prototype has it, they have that source of properties. You can think of it as like a fallback source of properties and methods. Boom. Alrighty. We're able to do something like this, where we say doors.toString, but we can see that Tesla does not have a toString method. Where the heck does, Where the heck does two string come from? Yeah, it's coming from the global object prototype. The Tesla checks itself does not have two string. Goes to the constructor prototype, doesn't have two string. It goes up the prototype chain until it gets to the global object prototype. Since the global object prototype has that two string method, well then guess what? that Tesla has the two string method. Beautiful. All right.

Somebody asked a really good question. Why? Why don't we just put, why not just come back here and say, this.Bluetooth equals true. Why not just go back and do that? If I did that, if I updated the constructor, right? If I updated the constructor, would all of the past objects have Bluetooth? No, none of the past objects would have Bluetooth. This would only fix new objects that are coming out of the constructor, right? So if I knew ahead of time, maybe. But we also talked about this thing that I think is a little advanced. We're not there yet. We don't have to be there yet. But there's this idea that every single car that came out of this constructor would now have its own version of Bluetooth. And so if we created millions and millions of cars, these are millions and millions of cars that have their own version of Bluetooth. Whereas if we had just put Bluetooth on the constructor, there's only one and every object could inherit from it.

So maybe we start getting into like memory issues, where if we have millions that have their own copy versus just sharing a copy, right? Then we might start getting into some optimization things that we'll get to later in our journey together. So yeah, once we know about object-oriented programming, we better understand inheritance and things like that, we might be able to save some memory. We might be able to save some space in that way. All right, we also saw that there was some syntactical sugar that we could put on our constructors to bring them in line with a lot of other languages. And so with the newer versions of JavaScript, we got the class syntax. It is still constructors under the hood, but they look a lot prettier. So here we have our class of MakeCar. We have our constructor inside of it. And then we have our methods as their kind of own function looking elements there. And so this is the new syntax for how we do our constructors, but with their classes. And when we start adopting this class-based syntax, it's gonna make some of our object oriented stuff a little bit easier to grasp and understand. And I think it just looks a little bit better. But know that underneath the hood, still, still prototypes underneath the hood, still prototypal inheritance underneath the hood. That's also another thing, it's prototypal, not prototypical inheritance, prototypal inheritance.

Cool. Alrighty, let's get our fingers on the keyboard, please. All right, let's get our fingers on the keyboard, please. In today's starter code, if you need the starter code, go to our Discord, agree to the rules, look at the follow along materials channel, The zip file is there for you in that zip file. We have the objects netflix tv shows File folder objects netflix tv shows and in the js file. It says create a netflix tv show class with a constructor that makes netflix tv shows with four properties and three methods. So I want a class, not a regular constructor function. I want you to use the class-based syntax to make a new Netflix TV show class so we can spit out Netflix shows. Netflix is on the terrace spitting out so many new shows recently. We were all blessed with Love is Blind, and then we are blessed with The Elimination. And so we want to be able to help Netflix spit out more wonderful crap television so that I can enjoy myself. All right, let's go ahead, I'm gonna put, let's see, I think three minutes on the clock, four minutes on the clock is okay for this one. Ah, three minutes, we'll do three minutes. You can take a peek at the other slides, all right? You can take a peek at the slides.

Ooh, the finale is tomorrow for the ultimatum? If you need to see that class syntax, here you go. But you are making me a Netflix class, please. Can we use class? Yes, I want you to use class for this one. You got this. Space cowboy, give yourself a refresh. This is the Netflix TV show folder stream beats by Harris Heller pitch black Welcome, Chelsea. me. I think so yeah I could call let's make sure we're still on the stream beats yeah I think I think they mix up the order every once in a while of stuff they always leave like the first two songs the same but I think just to get some plays on their other songs. I wonder if like, um, Spotify encourages plays on new music. I don't know what it was, I'm sorry. Yeah, there's a whole new album called Cherry Soda that it was from Got some Dunzo's, that's good to see. Superman no home. Hey, thank you for five gifted subs.

Appreciate you. Thank you for here. Appreciate you. All right, folks, let's look at this together. All right, so let's help out Netflix here. They need our help. Create a Netflix TV show class that makes Netflix TV shows. We're gonna make a class called make Netflix TV shows, and then you You really have to fight the urge to do what? You really have to fight the urge to do what right here? I always mess up sometimes when I'm doing this. Yeah, you gotta fight the urge to do the parentheses. A lot of folks add the parentheses and they get into trouble because this is a class, not a constructor. We go straight to our curly braces. All right, now we have our constructor and then our constructor can have those parentheses. And in that constructor, we have to go ahead and set up our parameters.

So what are some properties that we're gonna have? Why is your chat so active because we've had amazing people Genre title Rating Episodes I like that. Alright, so let's do Let's do title Title, genre, and what were some of the ones you all said? I think rating is a good one. And then number of episodes. So number of episodes, nice, cool. Let's go and set up our properties. This.title equals title. this.genre equals genre. This.rating equals rating. And this.numOfEpisodes equals numOfEpisodes. Beautiful. Now, what are these doing? This.title, this.genre, this.rating, this.numOfEpisodes. What are those actually doing?

Oh, I like binge-ability, that's a good one. Yeah, those are the, those are actually put in the work. Those are the ones that are binding the properties to the object that comes out of this class. And so the objects that come out of this class will have a title, a genre, a rating, a number of episodes because of the lovely this keyword here. It's referring to itself, exactly. Now this title over here, this genre over here, this rating over here, this number of episode over here, Those are just what, those are just what? Those are just parameters, exactly. Why no commas? You don't need them with the class syntax. You don't need them. Cool. All right, so those are our actual constructor here. Now, it asks us to do three methods. So what are some methods that our MakeNetflixTVShows class should have? Play, play, stop, rewind, skip intro, okay, I like that, add to list, save the playlist, I like that.

So save the list. We'll do that. So let's go ahead and do a play. And so our play doesn't need the function keyword. You just say play. And then we'll just kind of console log playing. And then we'll have a stop. And we'll just say console log a stopping. Beautiful. And then we'll do a last one, which was saved to list. You have like the list of shows you want to watch. And so you can just console log and say, all right, saved to lists. All right. Somebody give me their favorite Netflix show. Your favorite Netflix show, please.

Has to be Netflix, no HBO Max stuff. Ozark, Blacklist, Bridgerton, The Office. Oh, is that still on there? Lupin, Lupin is such a good show. Such a good show. You know, Bridgerton is the number one watched show. I think it's either number one or number two watched of all time on Netflix. That blew my mind. I had no idea it was like that popular. Cool, we can do Bridgerton then. It seems like so many people are into it. So let's do that. So let's go ahead and let Bridgerton equal new, and then it's a make Netflix TV show. And we got to pass in our parameter. So the title is Bridgerton.

Bridgerton is basically 1800 British gossip girl. It is. All right. So we've got Bridgerton is the title genre. Is it romance? Is it technically romance? Romance, right? Period romance, okay, period romance, or is it drama, is it romance or is it drama? I don't know. It's a drama. We're going to say, period, romantic, drama, because we can do whatever the fuck we want. All right. So we're over here like Netflix is going to use this. We got to get it right. We're we're, we don't get this right.

Oh man. People are going to go to watch their shows. All right. We got our. Alright, let's go. Rating has to be, it's always 99%. They're they're never they're never they're they're never they're never comfortable enough to say a hundred percent. It's always 99 There's gotta leave that little that little room, right? and then Maybe I'm just weird and nothing can ever give me a hundred percent and the number of episodes. How many episodes does Bridgerton have? We do use Bridgerton gifts a lot because that's the newsletter gift is from Bridgerton 16 8 and 8 beautiful All right, so let's go ahead and save this and let's open it in the browser. Let's open up our inspector or our console. It didn't load the image, that's okay. Bridgerton, and when we ask for Bridgerton back, we can see, right, we can see, we can see that it has a title, a genre, a number of episodes, and a rating. Beautiful.

Well done, everybody. Cool. All right, so we built out our lovely object, or sorry, our lovely class that spits out lovely Netflix TV show objects. And let's go ahead and start moving into APIs. Let's actually take objects and do cool stuff with them. Did we just make a Bridgerton API? Not yet, we could, we didn't yet. Maybe that'd be one of our first API projects. Yes, what are APIs, chat, what are APIs? I see some people do it saying it simple interface for some complex action. What is your favorite interface that enables you to do something complex? Let's see what you got. What's your favorite interface to do something complex? Cell phone. You press a button, you call someone anywhere in the world.

That's a pretty dope interface. shower, you turn a handle and you get fresh clean water that spills all over your body. I like that car wheel. You turn it to the left and a massive car. There's like there's an engine that's turning and gears are moving and then it goes to the left. That's wild. Toilet handle, exactly. You press it and magically your waste leaves your, your house and it goes somewhere else where you don't have to think about it, a vending machine. You press a button and you get a lovely candy bar or a diet Coke coming through. Yeah. So these are all interfaces that enable some complex action to happen. That's all an API is, is a simple interface that enables some complex action to happen. And the cool thing is the APIs we're using are using some bit of code as the interface. So it's a URL or it's something that we have access to that's simple as an interface, but then there's a lot of stuff that's going on in the background. So we're going to use web URLs tonight where we are using them as our interface to get data back from servers.

We're going to get data back from NASA. We're going to get some card data back from another API. We're going to get some APIs, some code back from a Pokemon API, so we're going to get all this data back from APIs and our interface is a URL. We're also going to see another API that is local storage where we get a special interface that's just a method and then it does something really complex for us. So there are not only like remote kind of browser based, so they're not only URLs or web APIs, but there are APIs all across the plane that we're gonna be using as we're programming. Local APIs, remote APIs, all this fun stuff that we're gonna get to. So APIs are a ball of fun. We're gonna get into them. All right, so simple interface for some complex action. The first interface I like to think about is a menu at a restaurant. The menu is a simple interface. I point to my noodle soup and then I say noodle soup please. And then in the kitchen all this magic happens. The beautiful broth is poured. The scallions are chopped.

The tofu has been pulled out of the marinade. The noodles are blanched and it all comes together in this beautiful bowl. and then it comes out and is put on my table. So I said, send nudes, and they went into the kitchen, made my noodles, and boom, came through. Absolutely an API, okay? Please don't. I didn't think about that. I shouldn't have said that. Don't send me anything. I don't wanna see you. I meant noodles. I meant noodles. Send me photos of your noodles, please. Damn. nothing.

Send me photos of your pho soup. That's what I want. There you go. If you ever if you ever if you're ever eating a nice bowl of pho I want you to think of me and send me a photo of your bowl of soup please. That's the only photos that I want. Do I need to ban myself? I don't know. Maybe I think I need to time myself out. You know what? We're going to do that. I'm going to time myself out. We'll be back in five minutes. Let's take our break. We all need the timeout Let's put five minutes on the clock This one it was getting good when we come back we're gonna use API's to get some data from NASA We are going to use API's to understand how wordle works We're gonna use APIs to build a card game. So five minutes on the clock if you're new here We like to think of this as a marathon on a sprint.

We like to be healthy Please get up move around hydrate if you are able and I'll see you all in five minutes I'm gonna run some ads. You actually have to take a break. See you soon everybody Somebody added two minutes to the timer. Cormus Corma source egg. Let's add two minutes. It's a little bit longer of a break. I'm just going to start it. There you go. Beautiful 7 minutes on the timer. Enjoy your longer break folks. I run some ads. See you in 6 minutes 40 seconds folks. You You Yep, we're on break for another minute, 30 seconds. Cleaver, that's why we use templates. Are we doing raffles?

We're doing the Pokemon ones at the end of this stream Pokemon card ones cuz I got to get the sense. I'm mailing out all the merch and stuff like that soon I want to just do all the cards at the same time What would your Pokemon team be if you were to be a gym leader Probably grass like a grass team Either that or psychic Yeah So I'm feeling better they are feeling better We just they're like on a very special diet right now. So Well, we'll see how that helps them. But yeah, they've some of the symptoms they've been have have gone away pretty quickly on the diet Sweater status so when we do the next drop we'll look at, we'll do with other sweaters. I had a pretty interesting merch company reach out that has like way higher quality merch. And so I'm talking with them right now getting some quality samples, but I think they'll be able to do some of the things I haven't been able to do with our current provider. And so I'm really excited to do like a better, like not better, but like a bigger merch drop with some of the pieces that I really want to do that I just haven't been able to do. So open maybe like end of the month. I want to do merch like a monthly thing Yeah, like monthly would be a good idea. Alright folks. Come on back. Come on back Leon I made I made ramen. Where did where do I where do I send it? Put it in general and just at me at me in general Come on back folks. Come on back Hey, yeah.

Send me a, send me a, uh, a message. Happy to chat. Alrighty. I accidentally ordered four stickers, only one at one and they all got canceled. Yeah. I think, I think the stream labs just can't handle like a big flood of merch. I think it's like good if you're not like trying to do drops, like we just want people like that are just grabbing a t-shirt here or there. But I think they're not really good at handling like that flood of people. Cool. Alrighty. So, the APIs we've been using so far, right? So the provider I use can't do pre-orders. Yeah, they can't do pre-orders. So that's why I'm looking at other providers to make it a little bit easier. Yeah.

Cool, all righty. So we were talking about APIs being a simple interface for some complex action. We talked about a menu. The first kind of APIs we've been using are just web APIs. This idea where our app that we're building can make a request, a server hears that request. There's some code that's running on it that hears that request and it responds with some information. And so there can be a lot of stuff that a server could respond with. It could respond with HTML. It could respond with XML. There's like other formats of data that it could send. And it could also send JSON, which when we parse it, it's just like a regular old object. Emily guard, hey, thank you for the tier three. That's wild, thank you for being here. All right, so what we've been using so far is we've been making requests to a server. That server here is the request.

And then it responds with that lovely, lovely JSON object that we can use on our end. And so the very first thing we did was make this kind of dog CEO API. Jason Derulo. Hey, thank you for the five tickets at subs. Appreciate you. Thank you for being here. All right. So we do use this first fetch where we went and got right. Exactly. Just like Beetlejuice say Jason three times and Jason Derulo appears. We use this dog CEO API to go ahead and get a random image of dogs. And then we were able to like console log the images that we got back. We would have put them into the dom. And so we're going to use this kind of as our template moving forward. This idea that we can make a fetch, we can get some data.

And then we got to spend some time looking at the data we get back and kind of play with it and be able to build what we want it to build. So we saw with the cocktail database, that we could also utilize query parameters. And these query parameters enable us to ask for specific stuff back from the server. It's still a URL, but we often can put these property kind of value looking values here where we have kind of like a term or a key and then a value, right? We could start seeing more of our APIs asking for more and more of these key value pairs so that we can request more and more specific stuff from the server. So we have our normal URL, then we have our question mark, and everything that comes after the question mark is a key value pair that are the query parameters. Does anyone know how to do multiple query parameters at the same time? Like how do we separate multiple query parameters at the same time? Yeah, we use an ampersand. So we could do s equals margarita and drink type equals five or whatever it is that we can read in documentation, but when we put the ampersand after, nice. Is it better to use async await? We're gonna get the async await. We're gonna build up to that, yeah. All right, so let's go ahead and see if we can get some NASA photos going. And so what I wanna do is I've given you a template.

And so I'm gonna open up that template. If you're new here, exclamation point discord agree to the rules and then you'll see the following materials channel everything we need to build Today, so we're going to use this api template. I'm going to open up the html I'm going to open up the javascript And in it is just a basic simple api And I have this set up just to make sure that it's working to make sure that our template is good So i'm going to go ahead and open this in the browser And i'm going to go ahead and inspect I'm gonna go to the console and let's see what we got to do here. When we click on the button, it grabs the value out of the input, plugs that value into the URL, and then makes our fetch. So let's see if this works. Let's just plug in, let's say ditto. Boom, and we got our data back from the Pokemon API. And so I just like to have this as my default template. It kind of has all the really big things that I might use as I start kind of digging into other APIs. We have the ability to have a click event that calls our function. Our function gets the value out of the input. In this case, it was ditto. it plugs that value into the URL and then it makes the fetch with it. So I'm just going to use this as my template to kind of go moving forward. And it's pretty cool.

Like this Pokemon API really does work. Look at all this cool stuff that you have that you can dig into, an abilities array, a game index array, held items array, location area encounters. There's so much stuff in this API And kudos to whoever built this out. Cause I had to probably take a lot of time. I made this project last weekend. Dope. Make sure you're doing all lowercase. Yeah. Yeah. Make sure you're typing all lowercase. If you type capital letter, you're going to get an error. So we get an error. How do we fix it? How can we fix this? If we did, we did capital D.

I know it's hard to see. We did capital D and it didn't work. Yeah, we could just go in here and we could do two lowercase. Beautiful. Now, no matter what we enter in, it should work. So if we do uppercase D, ditto, boom, still works. because we still get everything and it fixes that error that we got. Cool. Why don't you need a template literal syntax for choice? Their URL is a little bit different. They don't really have like the query parameters. If we want it, we could do it with the query parameters if we just want it to be consistent. So we could change this to ticks, right? And instead of it being plus choice, we could do our bling and that should work all the same. So now we're using our template literal.

We have our tick that opens, our tick that closes, and we're plugging in choice. And so if we go and refresh and we do ditto, boom, still works all the same. How can we make submit on enter? You have to change the event to submit. But when you do that, you also have to prevent the default behavior, which is the form submitting. So I think it's just easier when you're testing to just have it on click, and then eventually you can do on submit or on a specific key press if you want. You can do all that fun stuff. Cool. Cool. Alrighty, so we got our template set up. What I want to do is I want to use NASA's APIs. So NASA gives us a lot of really easy to use APIs that can do something really cool. I wore my LibrePlanet space shirt today specifically because I knew we were dealing with NASA's data. And so the cool thing about NASA's API is that there's so many different APIs you can use, But to use NASA's APIs, you have to get a key. And the cool thing about NASA's API keys is they don't really check anything.

They just, you can just keep creating new ones. And so, sorry NASA, I'm gonna do Bob Bobberson. I'm gonna do Bob Bobberson at Bobbity.com. and when you sign up, they just give you a key. And so you don't actually have to use an email address. Don't spam NASA, give them a real email address. I just have to be able to create quick ones because we might have some assholes that are watching the stream today. All right, so the cool thing about this is it gives you the API key already a part of the URL. So I'm just gonna go ahead and grab, right? I was gonna go ahead and grab that URL and I'm using something called postman and I really like this because what postman enables you to do is just come in. Yeah, I just hacked NASA What it post enables you to do is it is it was you do like quickly test APIs? And so a lot of times if I don't want to have if I don't have a template open or I don't have I don't have like my setup going. I can just use Postman. I can plug in the URL and I can hit send and you can see I'm getting some data back from NASA already. So you can see I'm getting the date back, which is today's date.

I'm getting this explanation back. I'm getting an image URL. I'm getting an image type, media type. I'm getting all this stuff, right? And so it was pretty easy. Yeah, I just created an account and I was able to get not only the direct link to the picture of the day API, but I was also able to get my key. And so you'll notice that I have the question mark followed by API key equals, and then the key that NASA gave me. The reason why we have keys is that way NASA can limit the amount of requests that you are making, right? And so if NASA was to see me making millions of requests, if NASA was to see me making millions of requests, it could stop me from making new requests and I would have to create a new account. Postman is completely free. I like to use it just to quickly test APIs. So you're gonna see me testing with Postman a lot, but then eventually I'm just gonna plug it into my actual template here. So I'm gonna go ahead and plug in the URL. And that's it for right now. I'm just gonna see if I get any data back using my template.

I know that it's still gonna grab choice and I don't care because I'm not using it, but I just wanna see if I can get back anything from NASA while using my template. All right, let's refresh. Let's click get Pokemon. And boom, we're still getting data from NASA, right? We are getting the date, we're getting the explanation, we're getting the URL, we're getting the media type. And so all this cool stuff that we're getting back from NASA. So what I wanna do is I wanna look at NASA's API real quick. And I wanna look at the picture of the day documentation. And if we look, it actually shows you all of the query parameters that you can use. One that we need is the API key, but we can also do a lot of other stuff. It looks like we can request a specific date. We can probably get like a range from a certain number of dates, a certain number with count. So the cool thing is like, there's more stuff that we can get from NASA based on what they expose through their API. Now, NASA has so much data, right? But they're only giving us a small sliver of it through this API and there are some parameters we have to give it to even get that, right?

And so what I wanna do is I wanna be able to build just a quick app where we take this data from NASA and we just kind of like enable users to enter in a date and see the picture of the day from that date. Cool. So let's go ahead and take a look. We have it working. and we know we're getting some data back. Let's look at that data in the console here. We can see that there is a explanation and an image URL. So what I want is I wanna be able to show the image and the explanation on my page. So let's go ahead and I'm gonna go to my HTML here. I'm going to change this from which Pokemon to picture of the day. And I'm just gonna leave the input fine alone and I'm gonna say get media, get media. And we'll just leave the Pokemon here for now and we will change the H3 to be where we put the, where we put the explanation. I have no idea how to spell explanation. Cool. So we'll put the explanation there.

NASA rules. We'll put that in the H2. Cool. All right. So I have my lovely H1 with picture of the day. I have my input and my button. And I have a place where I'm gonna put the image and the explanation. Cool. All right. So we already have the data. We can see that the data has an explanation and an HD URL property. Let's try using those. Let's go ahead and select in our document.querySelector. Let's grab the, let's grab the image. And what are we gonna change about the image?

What are we gonna change about the image? Yeah, we're going to change the source of the image and we're going to set it to be equal to data dot I believe is hdurl. Is that what it was? Yeah, hdurl is the property that we need to set it to and then explanation. Copy it. I'm going to come back here. I was going to change my html2 while we're here because I don't know if I spelled it right. Cool. And what I'm going to do is I'm going to go into my, I'm going to do another document query selector as well. Document.querySelector. And I'm going to select the H3. And I'm just going to put some text in it. So I'm going to use inner text. And I'm going to set that equal to data.explanation. So if this is working, if this is working, I should be able to get the image from NASA and put it into my site.

And I should be able to get the explanation from NASA and put it into my site. Let's go ahead and save. Let's go back. Let's refresh. And let's click the get media button. Ooh. So there's the photo. There's the explanation. First try. Hey, let's go. Turn up. We're getting data from NASA. What it's fucking cool. I don't care what you say. That's that's freaking cool We're all up in NASA's mainframe first try That's really cool and so we're getting this lovely photo back We got this lovely Explanation and I want to I want to take it to the the next level though I want to take it to the next level.

I want to be able to enter in any date, any date and get the photo from that date. So let's try that. Let's take a look. First, let's take a look at our HTML. What should I change this input to if I want a date? Man, we're helping Netflix today. We're helping NASA today. We're just helping any company that starts with an N. We got you. We can just change it to date, right? Boop. Date, let's save it. Let's go back and take a look. Cool, now we get this lovely date picker. And let's console log it real quick.

Let's just see what date gives us back. So we have choice. I'm gonna take console. I'm gonna take two lowercase off of it because we might not always need it. I'm just gonna console log choice real quick just to see what happens, just to see what we're getting back. Ideally, we're grabbing the value from that date input, but let's see what we get when we console log it. All right. I actually didn't select anything. Let me refresh. Let me select today's date, Click the button, great. So we do get a date and it is in the format of year hyphen month hyphen day. So let's go ahead and take a look at NASA and look at their documentation. This is probably one of the most important things you have to do is when you are using an API, you are following their rules. they're gonna show you exactly how they want you to send the requests so that they can give you the data that you want. And so if we look, we can see, oh, there is a query parameter for date and it expects it to be in the year, month, day.

So it looks good. We can just probably take that value right out of the input and set it as a key be on our request to NASA. On our request to NASA shout out magic school bus solar system for getting me hype on this when I was like five, uh, cause this is like, this is blowing my mind just a little bit, just a little bit. We're getting data from, there is a telescope that took this photo. NASA then archived the photo, and now I'm like, NASA, give me this photo, and they're sending it to me, and I can request all these different photos. I don't know, that's pretty cool to me. All right, let's take a look. It's just a query parameter, so let's go back to our URL, And on this URL, we already have a query parameter that is API key, right? We see API key equals. How do I add another query parameter? We said that there was something we had to put in between so that we could have multiple query parameters. Yeah, the ampersand. So I'm just gonna do ampersand. And then I'm gonna plug in date equals because that's the key. It said the key was date, so I'm gonna say date equals.

and then I'm just gonna plug in whatever we got from the date input. So that's choice. So if this works, I will have used the base URL, the picture of the day URL. I will have plugged in my API key and I will have plugged in the date. Cool. Let's save this. Let's make sure today's date works. We already know that that, um, date was working for us before. So we're just going to use today's date. Boom. It works. Let's go. Right. We, we got the photo and the explanation. Let's try a different date.

Let's try yesterday. Let's go. This is so cool. Look at this. Is that the space station going past the sun? What? Yeah, there's the space station visible only at night, slowly drifting across the night skies, it orbits Earth. Beautiful. Let's pick a different date. Tie fighter, it does look like a tie fighter, right? Let's pick a different date. Let's go to a different year. 2021, July 15th. Sometimes it takes a little while, you can see that we got it over here and then boom look at this beautiful photo, wow, a nebula, a star cloud it said, a silhouette against It's a crowded star field along the tail of a constellation Scorpius. Wow, that's pretty cool.

All right, so we're able to get all this data back. And all we did to be able to pick a certain date, let's just kind of step through where we're at. All right, let's start through how we got here. We have a lovely input that we changed to a date input. and we have a button that we're clicking. We have a place where we're putting our image and we have a place where we're putting our explanation. Cool. And then when we look in here, we have our event listener that's listening for a click on that button. When it hears the click, it fires this get fetch function. And the very first thing this get fetch function does is it grabs that date from the date input and stores it in the variable choice. We're console logging it just so we can see it and make sure that we actually grabbed the date, which we saw we were grabbing the date. And then I built out my URL. So the base URL was the picture of the day. How did I know to include my API key query and my date query? How did I know to add those two, those two, um, keys, those two key value pairs?

I read the NASA told me what NASA was like, Leon, you gotta use the date. If you want the date and NASA was like, you gotta use the API key. If you want some data from us, it was in the doc, right? It was in the docs. So if we look in the documentation, it gives it to us here. It says, all right, here's the date. Um, and this is what it should be formatted as. Like it's given us that information. And a lot of times the hard part of using APIs is like understanding what the heck is going on in the documentation. So remember how I told you how reading is really important. and we got to get better at reading because sometimes there's only gonna be some dusty documentation that's not coming from NASA it's not some net this is this is NASA engineer documentation right this is NASA engineer documentation it's not always gonna be some NASA engineers right in the documentation right and so that's why the reading becomes so important and getting used to it and getting used to reading technical stuff. And as much as folks hate eloquent JavaScript, I think it serves an important thing to get your brain used to reading dry, dusty, technical reading, because that's all it's going to be at the end of the day is we, some person that wrote some docs, you're gonna have to figure out and know how to use them. Difficult to say eloquent JS needs more love. I think so too. I think it's very hard.

I think it's one of the, it's not like a great first thing to go through, but it really does get you good at reading technical stuff. Also write your own docs. Exactly. When you build that, when you start pushing your stuff to GitHub, you better have some good documentation on that GitHub. Cool. All right. So we got our code. We have it working. we were able to grab the date. We were able to plug that into our URL. We were able to make the request and we were able to put it into the DOM. I have found something interesting though. Let me show you what I found that was interesting. Let's go ahead, let's go back to our site and let's plug in February 3rd of 2021 and let's get media. Womp, womp, womp.

We got an error. Ask me how I found this error last time. This error happened live last time we ran this class. So I was like, oh, let's try it. because this class happened on February 4th of last year. And I was like, let's see what yesterday looked like. And it didn't work. Why didn't it work? Yeah, it's a video. If we look and we look at the media type, we can see that the media type is a video. And so there's some some some foolery afoot because NASA might not always send a photo They might send a video And so we have to be able to control for this It's aliens Yeah, so now I'm gonna figure out how to control for this What are some ways that we could control for this? Like how could how could we make this work? It's not Tom Fuller, it's NASA Fuller, exactly. Yeah, we could use a conditional. Let's do a conditional.

And we could check the media type before we do what we need to do. And so if we wanna play a video, we might also need something in our HTML that could accept that video. And so I'm just gonna put an iframe down here. And an iframe is just something that we can embed a video into. There are video tags now that are built in that are native to HTML5. We're just gonna use an iframe because it's easier for right now because they're gonna give us, I think like a YouTube video, and it's gonna be easier just to embed that into the iframe. Cool. All right, so we know that's where our videos are gonna go. So let's save this. Nothing will be in there to default. If we get a video, we can show it in there. So before we just run in and append an image to the DOM, we can probably put a conditional in here. Let's go ahead and do it a conditional. And what we wanna check is the media type. And let's see what it was.

So it's media underscore type, and it could be a video and it could also be a what? What was the other thing it could be? Let's take a look. Let's just use today's date because we know that it was actually photo. All right, so it can either be a video or an image. So it's image, not like photo or something like that. So it's image. I thought it might be like IMG or something, but it is the full word image, cool. Let's go in here. Let's do media underscore type. if it equals image. Why won't this work? Why won't media type equal image work? Nightbot's popping off. Yeah.

Yeah, it's because it's tied to the data object. Wait a minute, why is Nightbot stopping everyone? Oh, I think maybe it's, yeah. When you paste code snippets, you're sometimes pasting links. So be careful, because Nightbot's gonna time you out. Interesting. Yeah, it's just code. Yeah, so it's looking for the data, right? Media type is not a thing. It's only a thing because it's part of the data object, right? It's the object that we got back from NASA. So this object that we get back from NASA, I almost said NASA, this object we get back from NASA is a media type property, but it's on the object that came back. And right now, right now, But you can see that that object has the name of data. So we're gonna do data.mediaType. Beautiful.

All right, so data.mediaType equals image. If it is an image, then we can just go ahead and do this. Boom. And then we can do else if, we can do else if data.mediaType equals, it was video, right? It was just video. There's just video, right? Cool, yeah, video. And then we can just do this in here. We'll just kind of copy this. Boink. Boom. And we'll say iframe. And I think source is still the same property on iframe. Yeah, so the iframes have a source property as well. And it'll just be the HD URL.

Was it called HD URL when it was the video? let's see. Oh no, it's just called a URL. So it's not hdurl, it's just URL. So we got to go back and change that one to just be URL. So if it's a video, it's not data hdurl, it's just URL. Cool. We're still leave our explanation outside the conditional. Let's save this. And let's plug in today's date. Boom, we got the photo showing up. And then let's go ahead and try the date that we know that was the video, which is February 3rd, 2021. The day she lived in infamy. Boom. Um, and down here we got our photo, our, our, our, our lovely I frame with the video.

So it worked. I'm, I'm blocking it, but the videos there, um, you can play it. It'll play found on the moon. It's behind me. Um, but the image didn't go away. Why didn't the image go away? Why didn't the image go away? Also, we should probably move the iframe above the explanation. I think that makes more sense. Because it's two different things. We didn't change the source on the image, right? So the image stays there. So one thing we could do is we could set the source and the source on the image and the source of the iframe frame to like null right or display block and then display it when we see it but that's a little extra for right now let's just save this let's refresh let's pick the date we know that doesn't work not the second the third beautiful we got the the video coming in and we got the explanation So it's working Well, I'll leave the hiding and showing right I'll leave the hiding and showing to you if you want to get rid of this image Traves touchdown a thank you for the five get this up. So if you're doing well, thank you for being here Is the t-chip hundred devs merch mine? No, that's fake There are there are people that are like scamming like a hundred devs merch, which I find hilarious But yeah, there's no there's no red bubble.

There's no teespring. The only time we do merch is live here on stream Yeah Yeah, we're gonna be doing more our place merch because I know a lot of folks want that So we're gonna do like more stickers and more shirts and stuff like that Well, all right, so it's working. We're getting images. We're getting videos now from NASA And I think a way you could take this a little bit further would be to like clear out the images and iframes on Each load just so it looks a little bit better. You can also make this look way better You can make this look way better. Like right now. It's kind of just like plopped onto the page Like we're throwing it right into the DOM And so that's something you might want to think through is like, alright, how can I make this look good make this your own if you look if you look on and NASA's API website, they got so many other APIs as well, right? So many other APIs. They got an asteroid near earth object web service. They got so many cool stuff that you can just play around with and get different photos and different data back. And so if you're looking for some places to get some URLs or some APIs for your assignments, where you have to build the three, This might be the one though to look at Well Well done everybody All righty Let's do all right. We got a little bit of time. So let's jump into our next one All right, so like I said, always make these your own. We did it together. If you need to, I'm gonna zip this and you'll have access to it after stream.

Come with this, break it, play with it, make it do something a little bit different and then that way you can add it to your portfolio eventually. So there's gonna be a hundred NASA API photo ones but there's probably some way for you to tweak this to make it your own. Cool. Alrighty, let's talk about something called local storage. So local storage is something that's pretty interesting. It is an API, right? It is an API that gives us a simple interface to do something very complex. And so the thing that it does that enables us to do something that's very complex is it gives us just like a simple method that we can use that enables us to store stuff on our users' computers across browser sessions. And so with local storage, we can store data across browser sessions. So what the heck does this mean? That means that we could build an app and that user could come to our app, do something, and then a week later come back to our app and still be able to pick up where they left off. We could be able to store data on their machine that we can use later. And we don't have access to databases or anything like that yet. So local storage is a great way to have some persistence, some things that stick around even if they leave the browser and come back. And so this is gonna be really cool because once we know about local storage, we can start to build apps that are a little bit more real, right?

The big thing right now with all of our JavaScript apps is that there's one like fatal flaw. What's the fatal flaw of our JavaScript apps? Yep, we refresh and poof, everything goes away. We're not at the backend yet. We're not ready to start using databases yet, but we can have kind of our own local storage where we put information that we can use later on. And so with local storage, there's some really cool things that you can do, but I wanna show it to you real quick. I wanna show you how it works. So I'm gonna go to Wordle. And so Wordle is a game that the New York Times bought recently. And it's a mild addiction that I have. I play Wordle every day. I have a pretty big streak going. I'm pretty good. I can normally get most of them in three and three. Sometimes I got to do four, right?

And so I see a lot of people saying do or audio. Nah, that's not a good first word. The, the, your brain fills in vowels way easier than it fills in consonants. And so you got, you got to go consonants first, right? And so I'm going to spoil this one. I've already done this one and I play on my phone, and not on my browser. So I'm gonna show you. So first word, crane, right? We got the R, we got the A, not in the right spot. We can then do split, good follow-up. We got the L, but nothing else. And this one was royal. I think I got this on four today, not three though. And so it was royal. Cool.

Now, I leave Wordle. Let me close out Wordle, and let me come back. Let me do that. Wordle. Let me come back to Wordle. And look, my statistics are still there. My games are still there. I refresh, it's still there. But I didn't create an account. I didn't create an account. I'm not signed in. How is, how is the New York Times figuring out what my statistics are, whether I played or not? And they're actually using something called local storage. So, if you play in your browser, be very, very careful what we're about to do, because it will clear your streak and there's no way to get it back. I'm back.

Gaunchy Pazzo, hey, thank you for the raid. Thanks for bringing the crew along. Hope you're doing well. What were y'all up to? What were y'all doing today? Welcome, raiders. We are in the middle of playing with some APIs, both web APIs, and now we're looking at local storage. And we're looking at how Wordle uses local storage because what we just saw is that when we refresh our statistics still show up, but we don't have an account. We don't have anything where we're like logged in or anything like that. So how do we actually, how does this keep like coming back up? That's what we're looking at. For folks that are new, we are running a 30 week software engineering bootcamp where you can go from and have no coding ability to employed. And this is tonight we're working on APIs and looking at some other fun stuff. So we just got data back from NASA. Sounds baller, right?

So we built this like quick app where we can put in a date. So if we put in today's date, we can get the photo of the day back from NASA. We can get an explanation of that photo from NASA. So it's pretty cool. All right, let's look at Wordle real quick. But disclaimer, if you fuck with this stuff, like your street could disappear. All right, so I'm gonna go to inspect and I'm gonna go to application here in the inspector. And if you notice, we now have in this application area, local storage, and you're gonna see that there's local storage for New York Times website for Wordle. And so if I click on this, I'm gonna see a bunch of stuff that New York Times is storing locally on my machine in regards to Wordle, right? And so the cool thing is I can actually see all that data here. I would be able to see my streak, I would be able to see all that stuff that's being stored on my machine directly here. Is it an object? Yeah, it's exactly like an object. It's kind of like they have their own little object here with a bunch of properties and values that they can store stuff into, cool. Now, the interesting thing is if I go back to the console, I can do something reckless.

Don't do this if you care about your Wordle. So I can do local storage and I can say clear and clear is a method on that local storage. And when I run it and I refresh my Wordle, rip, we can see that it goes away. our statistics are gone, our statistics are gone, and we're back to where we were. And so if we go back to the application, we look at the local storage, we can see that it's very different now. There's less values here, right? There's less values here. There's not the history that we had before. And when we refresh, we don't have our statistics anymore, and it looks like we haven't played this game yet. And so this is cool because local storage enables us to store things directly and across sessions. So the beautiful thing is that we can build an app, keep track of what's happening in the app, and as long as our users don't clear their local storage, we can keep track of their wins, their losses, lots of really cool, fun stuff. All right, there's also session storage. Anybody know the difference between local storage and session storage? I can trick my friends into thinking I get Wordle first try every single time, exactly. Yeah, session storage is just for that session.

Meaning once you close your browser, it's gone. It's never, it's not coming back. Local storage persists across sessions. So meaning even if you like close your browser and come back, you will be able to access the same storage. Yep, session is gone once you close the browser exactly. And so that's the cool thing. Like if you play like Wordle, like I do like on my phone, if I close my browser and come back, I still have everything. Cool, so let's take a look at the three big things we have to do to make local storage work and then we're gonna come back and build an app after our break with local storage. So let's go ahead and take a look at the slides real quick. With local storage, we have a couple methods at our disposal. We have the ability to set an item into storage. So let's actually take a look at this. We can set an item, we can get an item out of storage, and then we can remove an item from storage if we want, and we can clear all the things in local storage. And there are plenty of other things that we can do, but those are kind of like the big four. So let's try these in order together.

And with my inspector, I'm gonna go to my console, and I'm gonna do local storage dot set item. And I'm gonna say my key is best friend and the value is gonna be Bob, right? And now if I go and I go to my application, I look at my local storage, you'll see since I'm on slides.com, you'll see that for slides.com, it thinks that I have, Well, I do have something there for local storage, a key of best friend and a value of Bob. And so now the cool thing is we can see that that key value pair is stored in local storage on this application. And if I go back to my console, I can even do stuff like I can get it. So I can do local storage dot get item, and I can ask for a best friend. And you can see I get Bob back, right? And so I can get Bob back from it. I can even update it if I wanted to. I could do the kind of same set item again, but do Bob Bobberson, right? And now when I say get item, I get the Bob Bobberson back. And the cool thing is I could refresh my page and come back and it's still there, right? It's still there. I could close my browser and come back. It's still there.

It's still there until we remove the item. And so I can do local storage, remove item. I can say best friend. And now if I try to get my item, you can see that I have a null value, but I'm getting back like that best friend is no longer in a local storage. That doesn't feel good. So let's go ahead and set best friend back to Bob Bobberson. Let's just double check that it's there. Best friend. I'm getting Bob Bobberson back. Looks good. And then the last thing I can do is we just to confirm that it's in the application here in the local storage. We can see that best friend is Bob Bobberson here in the local storage. Before we take a break, let's go to go to console. And let's clear it. So local storage.

and when we do it, it clears out all of our local storage. And when we go back to the application, boom, you can see there are no key value pairs. So the beautiful thing here is now we have the ability to store stuff over the long haul, meaning that we don't have to worry about page refreshes. We don't have to worry about if our user closes their browser and comes back. If they come back to our application, we can store stuff that brings them back to exactly where they were. It's for the site. When would you use this? I just showed you when you would use it. Wordle uses this to store your statistics and your streak without needing to store it like on their own database. It's all stored locally on your machine Where is it actually stored that's a really interesting question It depends on your operating system your browser and a bunch of other stuff, but basically you can think of Somewhere on your hard drive this or your SSD or whatever is this local storage? Some implementations I believe are like a low-budget like sequel implementation where it's kind of like the browsers running it and storing into it. But you can just imagine that the browser has memory on your disk, right? Your Chrome or Firefox or whatever has memory on your computer, and it takes up a portion of that memory for local storage. Would you use it for when a user is filling out a long form? I think that's a really cool idea for local storage.

So they accidentally hit refresh, it's not just all lost, that could be a cool idea. What if you closed the window, you'd be fine. As long as you came back to this site, it would come back and you'd be fine. That's the beauty of local storage. If you close your browser session, you can come back and it's still there. Session storage, however, once you close the browser, it's gone. Cool. Alrighty, let's go ahead. Dev journey, it does, yeah. All right, let's go ahead and take our break. When we come back from our break, we're going to actually put this into practice and build a really simple app that enables us to keep track of history using local storage. And then we're gonna move on to building a game with APIs. Cool. All right, folks, let me bring in the timer up. Five minutes on the clock.

Thank you for the raid. Thank you for bringing your folks through. If you're new here, we like to take breaks at the top of the hour. If you're able, get up, move around, hydrate, let your eyes relax on something that's not the screen. What if you close the tab instead of the browser? Same thing. Yep, same thing. Cool. All right, folks, good luck. Gonna run some ads. You actually have to take a break. I'll see you in five. Welcome Gerald. All right, folks, welcome back, welcome back, all righty, let's get back into this, let's build a little app with some local storage, shall we? Come on back, folks.

All right. What I wanna do is I wanna put this local storage into action, and what I wanna build is just a really simple app. The whole app, what I want it to be able to do is when we click a button, I want it to keep a score that goes up by one. That's all. Agent Thazo A, thank you for the hydration. Cheers to you. I want to click a button. When we click that button, I want it just to add one. Right? Just add one. And then I want it to be able to be like local storage, where we can come back, we can close the window, We can come back and it still works What's today's tea today's tea is? The organic chai from Tazo actually like it's a good one Already I saw somebody mentioning the the coding boot camps that the university's put on Most of them are put on by a company that just uses the name of the university and then has a really shitty boot camp Uh, you pay a lot of money, uh, and they're not good. Like there are so many other paid bootcamps that are like decent. Those are not one of them. It's somebody said, at least those, you get one-on-one mentorship.

You, you, you don't, you get a Slack channel that nobody responds to your messages. Uh, I think a lot of folks, if you really looked into like the support you get in these bootcamps, you're way better off, like finding a discord community, that's not even a hundred devs, like just finding a rando like programmers hangout or something like that. Compared to the support you'll get in some of those bootcamps, it's pretty wild. Yeah, it's pretty wild. And post-program support, they kind of just dip on you for a lot of them. Yeah, it's not really a thing. So be careful, don't get got in these streets. Gotta do your research. If you're here, especially, We had a couple of raids today. 100 devs might not be for you. That's okay. You don't like my face? Beautiful. There are so many other communities where you can learn how to code for free. And if you decide a paid bootcamp is for you, know the main, as someone that's taught bootcamps for 10 years, know that the main thing you're getting is that you paid money to show up.

And for a lot of folks, that might be worth the cost because they don't want to lose out on the money they paid to show up. but do not trust your bootcamp to help you get a job. It is on you to network, to build your network so that you can get a job in the end because a lot of them won't help you. They'll connect you with a few folks and then disappear because they've already packaged your debt and sold it to somebody else. They don't actually care. So that's my word of advice. Be careful, talk to real alumni, I talk to folks that actually graduated, go on LinkedIn, see what their actual class numbers are doing, but just do your research, be careful. All right, let's build this app, a local bot score button. A local bot score button. So we have in the starter code I've given you today, a lovely local storage bot score button template. I'm gonna start with that. In it, I don't have anything. And in my HTML, I don't really have anything. And so what I want in my HTML is a button that I can click and just a place that I think I'll probably eventually put the score. I'm gonna get rid of this image, we don't need it.

And I'm just gonna put a button. And I'm gonna say another one because I want it to be another one. So another one. And here's where we'll put our score. I'm just gonna put score in here for now. Cool. And then what I'm gonna do is I'm just gonna go to my API template and I'm just gonna copy the JavaScript that I have here. Just gonna copy it. No need to type all that from scratch. We have a lot of the key pieces here that we can reuse. And so I'm just gonna take that from the API template and we're good to start there. All right, so if the user can click a button, we know that we need a what? Should we trust 100 devs? No, please don't trust anyone that tries to tell you about jobs on the internet. Do your research, even on me.

Go to our celebrations channel, talk to our alumni, and I'll be the first person to tell you getting a job is not easy. It has nothing to do with your coding ability and everything to do with how much effort you put into networking and And building those relationships to help you get a job. So yeah, don't don't even trust me Please seriously because I don't want you to get got and I try my best to bring folks to talk to you That didn't have the the the hunky-dory Everything was roses experience heck even people I direct you to didn't get jobs, right? They might've got a side thing or something like that, but I want you to see that it's not a clear path and there's ups and downs and it is a long trough of sorrow. I do believe if you put in the work, you build your network, you can overcome some of the barriers you have and lean into some of your privilege, you can go ahead and get that job. But you gotta realize that nothing's a guaranteed thing. And so even in 100 devs. So we know that if we want to click a button, we need a click event, right? We need a click event. And so here we have our click event. It looks like it'll work cause we have a button. We have our fetch. What I want to be able to do is when I click that button, I don't need any of this like API stuff for right now. So I'm just gonna delete this. When I click this button, I want to like add another one.

I'm gonna call this add another one. There we go. So when I click this button, I wanna add another one. And so what I need to do is I need to add one to a value that is in local storage. How do I at least, how do I set up a value in local storage? What do I need to set up to actually have a value in local storage? Thank you. Add another one. What do I need? Yeah, I need to set item. So I can go ahead and set item to zero. So let's go ahead and say local storage.setitem, and we're gonna say, we're gonna call it count, and we're gonna say set it equal to one. Beautiful. What would be the problem of having this set item inside of our function? What would be the problem of keeping this here?

Yeah, every single time this function got called, we would reset local storage count back to one. And so let's pull this out of here. Let's just do it on page load. So since it's gonna do it on page load, I'm just gonna put it up here and actually says to a bot score. So we're gonna change this from count to bot score. And I think on page load, I actually don't want it to be at one. Let's make it zero. So when the page loads, we set the bot score to zero. Cool, so now we at least have a score that is in local storage. Now, when we click the button, I want to add one to it. How can I add one to this value? What could I do? Yeah, I need to do exactly. Get item so I can get the value, then add one to it, and then reset the item to that new value. So let's go ahead and say bot score equals local storage dot get item.

And what item do I want? I want the bot score. So what this should do is if there is a bot score in local storage, it's gonna give me that value and store it in bot score. And we're just gonna call this bot score val. Like the value of bot score. So what I'm gonna do is I'm gonna do bot score val plus equals one. And now that I've added one to bot score, what I wanna do is I wanna set the bot score to that new value. So local storage, local storage dot set item. I'm gonna set the bot score. And what am I gonna set bot score to? What am I gonna set bot score to? Yeah, the bot score val. All right, let's see it. So on page load, we set bot score to zero. Now we have our event listener, where each time we click the button, it runs add another one.

The first thing we do is get the value out of local storage and store it in this variable. Then we add one to the variable, right? And then once we've added one, we reset that score to be the new value, which is whatever it was, plus one. So let's save it and see what we got so far. Let's go ahead and open this in the browser. All right, let's open up the inspector. And I'm gonna open up the local storage, application, local storage. And we actually have some old stuff in here. So let me go ahead and just do a clear real quick. Cool, so that's cleared. And then let's just, let's go ahead and look at the local storage. Let's refresh it. All right, so we can see, when I refresh, we can see that that bot score is set equal to zero. Is there anyone planning on starting this course from the start still? Yeah, we have plenty of folks join every day.

Join the Discord, join the catch up crew. All right, so on page load, we set the bot score to zero. Cool, now let's try clicking the button. Another one. Wait a minute Another one. Wait a minute Another one another one another one Get it another one you get it now another one You got got you came to get he got got another one another one Another one, all right, what's happening here? What's happening here? Another one. Ready, ready, wait for it. Another one, cool. So it is concatenating, exactly. What do we know about, what does that maybe tell us? Because we put a number in here, we added a number to it, what does that tell us about the stuff that's coming out of local storage? Yeah, it's stringy, right? It's probably a string.

So let's wrap this in number just to make sure that we are always dealing, make sure that we're always dealing with numbers here. So let's save that. Let's go back, let's refresh. And that's also something interesting that we just saw there. Let's go ahead and click add another one. Another one, another one. Boom, there we go. Now we're actually going up. However, there's something weird that's happening. Did y'all spot the weirdness? I really do come up with a joke and then build a whole lecture around it. That's what happens. Just so you know my process. This another one was literally what I thought of and then I built a whole lecture around it. Same thing with Dylon.

Y'all thought this was a coding bootcamp. This is just my really weird form of like, stand up. I built that dialogue example. That was the first thing in my mind. And I built the whole lecture around it. So, you know, I split the hot fire. Uh, there's something weird happening here. Ready? Look, hold on. Refresh with me. Pay attention. Refresh boom back to zero. Wait a minute. Leon, you, you told me, you told me. that the whole point of local storage is that you can refresh the page and come back.

That when you're using local storage, you can close the browser window and come back and it's supposed to be the same. Why is it resetting on page refresh? Let's go ahead and take a look. Let's see if we can figure out why that is. Why, why is this always going back to zero on page refresh because we told it to exactly exactly princess a computer does what we tell it to do and on line three we said hey on page load set bot score to zero so every single time we refresh this gets set back to zero it doesn't matter what happens inside of our function our event listener because this was telling it to set to zero on page refresh. So we need a conditional. We need to check and see if bot score is there. If bot score is there, we don't want to do anything. But if it's not there, we want we want to do this code. So let's go ahead and just make a conditional, if, and we can say like local storage, get item, bot score. We actually saw what happens, what happens if I try to get an item that is not in local storage? What do I get back? Leon's entire motivation for teaching us is so that we can get his weird jokes, exactly. Yeah, we get back null, and null is what type of value? Null is what type of value?

Yeah, it's falsy, exactly, it's falsy. And so since it's falsy, we know that if we ask for get item back, and there's nothing there, well, it'll be false, right? And so what we wanna say is, all right, If it's not false, right? So if we don't get a false value back, like if it's not null or not false, right? If it's not falsie, if it's true, right? If there's something in there, we will get a true value, right? We're saying not false. Then we can just go ahead and do this line. So now we're saying not false. Is there another way we could do it though? Now we're saying not false. Is there another way we could do it? Yeah, let's try it. Let's see what happens. I'm a baddie.

I write bad code. All right, let's refresh. Let's go ahead and do another one. Another one. Going up, going up, going up, going up, going up, going up. Let's refresh. Aha, look at us go. Look at us go. I'm clicking that refresh like a, look at me go. Oh, I'm clicking on the wrong spot. There we go. On the refresh. Clicking refresh like it's wild. And look, bot score is staying the same. I can come back.

Boom. 12. Let me let me close it. We're in wordle. Let's open this back up again Mm-hmm open in browser. Let's go to that application. Let's look at that local storage Uh-huh, oh look at that bot score there right back to where we were another one look at us go First try Ah, another one, cool. All right, so that's the beauty of local storage. And the cool thing is local storage is a simple interface that does something really complex. We only have to learn about get, set and clear. And then we have this whole place where we can store stuff, right? That we can come back to, our apps can be persistent. They can have values so that as users come back, They can have incremental stuff. Beautiful. I love it.

Do you ever run out of local storage? I guess theoretically you could, cause you'll run out of computer storage. I actually don't know the limitations on how much you can put into local storage. Bring up the code real quick, just so we can see, we have our conditional that checks to see if there is a bot score. If there's not a bot score, we set it to zero. Basically we're just saying, is there a bot score? If not, let's set it. Basically this only runs on the very first page load. That's it. Five megabytes, Archer? That's not a lot. Excuse me. Five megabytes per browser. Interesting. I wonder if there's a way to boost it.

Cool. Alrighty. So, we have our lovely local storage. People are saying, what are cookies? Cookies are kind of similar. We'll get to them eventually. We're going to get to them eventually, but they're kind of similar. They're storing a little bit of information on our machines that folks can use and access later on Local storage is cooler because it's kind of like dealing with objects, right? It's kind of just like dealing with objects And so if you can deal with objects you're used to using APIs you can work with local storage and you've got to know get item set item Remove item and clear and that's it. You can use it beautiful. All right, let's actually see if we can build a card game. And I think the push for the card game is to get it working, but then maybe to store some information about that card game in your browser so that users can come back and keep playing the same game. So I'm gonna go ahead and advance the slides a little bit. We are going to build a card game. So let's go ahead.

I'm just gonna clean up a little bit here. I'm gonna close these out. Let's go ahead and open up the card. Well, actually, what I'm gonna do is I'm just gonna make a copy of my API template. So that's what I'm gonna do. I'm just gonna copy my API template and rename it card game. So API template, duplicate, and I am going to call it card game. All right, so now I have just a copy of my template and inside of it, I am gonna have my index.html and I'm going to have my main.js, cool. All right, so we have all of our NASA stuff in here. We have all of our NASA stuff in here, nothing too, too wild. And so what I want to do is I want to build a card game called war. And so the way that war is played is that you are playing against someone else and you both draw cards, right? We both draw cards. And what we want to do is compare those cards. The person with the higher card wins.

So if I drew a six and you drew a seven, you would win. If I drew a 10 and you drew an eight, I would win. If we drew the same number or card, we declare war and we put up three cards and then flip a fourth one. the person that wins that fourth flip takes all the cards. And so the cool thing that happens is each time that you play, whoever wins takes the two cards or in the case of war, all eight cards. And so the cool thing is that eventually you win by having all of the cards. And so I wanna see if there's a way to build a game like war using cards, but there's a lot of stuff that I don't want to have to code. I don't have to code like cards, a deck, removing cards from a deck, all that stuff that would make like coding this take a little bit more time. We could. But what if there was a way for us to get like a deck of cards and? Yeah, just play the game using that deck of cards. That's what I'm going to do. I am going to use an API called the Deck of Cards API. It is literally deckofcardsapi.com. And the cool thing is, if you go to deckofcardsapi.com, I'm gonna put it in chat.

You can see that you can get a deck of cards. You can draw cards from the deck and actually look it already says two at a time so we could build our our war game Right by by using this We can reshuffle the cards we can do a bunch of stuff So let's just see if we can actually get something from the deck of cards API. I'm just gonna grab This this link I'm gonna go to postman the test Like I said, I love postman because I don't have to actually set up anything I don't have to set up anything. I don't have to worry about my template being set up or anything. I'm just gonna paste it in, click send, and boom, I'm getting some responses back. And it gives me a deck ID that I can use. And once I have a deck ID, I can start to do some fun stuff with that deck. So let's go ahead and take a look back at the API. Once I have a deck ID, right, once I have a deck ID, I can use that ID to draw cards, right? So my first request, I got a deck ID, and then with that deck ID, I can draw cards. Let me try that. Let me see if I can draw cards. So I'm just gonna copy this API URL. I'm gonna go to my Postman. I'm gonna paste it in.

I'm gonna grab the deck ID from the first request I got. Let's plug it in. And let's see what we got. Beautiful. All right, so we can see on my very first result, I got two cards back. I got a four of clubs and a three of spades. So the four of clubs would have won if we were playing war. And the really cool thing is that you can see how many cards are remaining. So a deck of cards is 52 cards. I drew two cards, so I still have 50 cards left. So if we were going to build this from scratch on our own, we would have to code all of that logic, right? Not only we'd have to like code out all the cards, find all the photos for the cards, find all the suits and things like that. We'd also have to code all the logic for drawing cards. We'd have to draw all the logic for like keeping track of how many cards are left in the deck. But by using an API, like the deck of cards API, I don't have to worry about any of that.

And what you're seeing me use right now, I said is Postman, postman.co. And the reason why I use Postman is because very quickly you could see that I was able to jump in, right? I was able to jump in. I was able to test some API routes. I was able to take like values from one route and sorry, one URL and like use it in a different one. And I wasn't actually having to like write JavaScript. And so postman just makes it way easier to test your APIs to make sure everything's working and to get a rough idea of like if it's going to work well before you jump in and start writing the code. So I use postman pretty much all the time. Like I always have it like open and I test a lot of stuff in it right now. It's just kind of like APIs, but eventually you're going to be testing a whole segment of your app using postman. So really a big fan. Cool. All right, so let's think through this. We're going to need the ability to get a deck, and then once we have a deck, we need a way of showing the cards to the user, and then showing who won. So let's try it.

Let's go ahead, I'm gonna go into my HTML real quick, And I'm going to get rid of this, this stuff that's in here right now. And I'm going to put, um, I'm going to put an H1 that just says like war, um, card game, I was going to say card game, card game, and then I'm going to have an H2 or player two, and I'm going to have an image for player two, and then And then I'm going to have a, sorry, player, player, player two, player one. I'm going to have another H2 or a player two. And then I'm going to have another image. So these are just places where I'm going to put the cards. I'm just going to call this image player one. And I'm going to call this image the ID of player two. So the idea here is I'm just, I'm just creating a place to put the actual cards. So if I get the cards, I have a place to like show them. That's all. Player one, player two. I'm just going to put an R in here. I'm going to say card and card. I'm going to say playing card actually. It's a little more descriptive.

Playing card, playing card and playing card. Cool. All right. So very simple. We have just our player one, our player two, our cards. That's it. Let's, let's add a button that the user can click to like actually make the cards, like the card game play. I'm just going to say button, uh, deal two cards. So that way we can actually deal out the two cards that play the game. We'll click on that to do it. All right. So let's go back to our main JS. and the very first thing I need is to get the deck ID. We saw in Postman that this only works if I get a deck ID and then once I have that ID, I can use it to draw cards. Should we code along?

Probably not. I think this is one where you kind of just think through it and kind of talk me through it and ask some questions as you need it. Cool. Bells of Alba A, thank you for the five gift of subs. Thank you for being here. Cool. Thank you so much. Yeah, coding along is a lot on this one. All right, so I know that I need to get a deck ID and then once I have the deck ID, I can use that to get my two cards. So let's go ahead and set up getting the deck ID. So I'm gonna go here. Let's set up a fetch. I'm gonna take, I'm gonna do a fetch outside of, I'm gonna do a fetch outside of my click event because I'm gonna want that click event to be the drawing of the cards. I'm gonna say, I'm gonna say, I'm gonna call this draw two and I'm gonna change this to draw two. All right, draw two, draw two.

And then I'm going to have a fetch up here that just grabs the deck ID for me. And in fact, I'm just going to have a variable called deck ID. And I'm just going to set it equal to empty quotes for now. And then I'm going to do my fetch. And so let's go ahead and grab that URL. The cool thing about Postman is you can just grab the URL that you were using in Postman. Oh, that's actually cool. Like you can actually pass how many decks you want. So if you wanted this to be like a hundred deck game of war, we could just change that one number there, which would be pretty cool. All right, so let's go ahead and grab that. Let's plug this in as the URL. And we should get a deck. Let's clear all this crap out of here. And let's see if this works in giving us a deck of cards. So I saved it.

If this works, we should console.log data and we should see that we have a deck. 100 decks, exactly. Let's go to open this in the browser. Let's go ahead and open up the inspector. Let's go to console and we can see that we got an object. So great. We have a deck and something interesting happens. If we refresh, each time we refresh, what's happening? Each time we refresh, something's happening. We're getting a new deck each time. Wait a minute. What if there was some way from homework for homework to make sure that you're always using the same deck? Hmm. What if there is a way to do that? What if we could like say, I don't know get a deck ID and then maybe like store it and like maybe there's like something like local storage That we could store it into and then that way even if they came back to this app later on They're not getting a new deck Maybe that's for homework All right, so right now we're getting a new deck each time and that's actually probably pretty good That way, I don't have to worry about people grabbing my deck, right?

So, we're gonna get a new deck each time. And then, once I get that deck, let's go ahead. What is it called? It is deck ID, deck ID, right? Deck ID, deck underscore ID. So, we can go ahead and do something like this. So we can say deck ID equals data.deck underscore ID. And let's see. Rofiato A, thank you for the hydration, cheers to you. And the cool thing is that deck ID is a what? It's a what? It is an empty string now, but it's a global variable. And so like, when you look up like bad things to do in JavaScript, global variable is like literally the first thing that says not to do, but I'm a baddie, I write bad code. So right now I have a deck ID that's a global variable, and I'm just gonna put my deck ID into that global variable. And the reason I'm gonna do that is cause I know down here in draw two, I'm gonna use that deck ID.

So I want on page load to get a deck and then down here, I'm gonna use that deck ID, right? And so just to make sure I don't have any like weird scoping issues, I'm just making it a global variable. I'm a bad, I write bad code, cool. So, are there plenty of ways to get around the ECOD? But this is 25 minutes left in class, Leon. All right, so we now have the ability to get a deck. We saw that it's working. We're storing that deck ID in our variable deck ID. Let's see if we can draw our two cards. So we have our draw two. And instead of doing any of this stuff here, don't need any of this, we need a URL. So let's go and go back to Postman and grab our second URL. So here's the second URL that came from the API, right? From the API. Big Tina energy, exactly.

And here it is. That's the URL that we were using that we got from the deck of cards API itself, right? I just tested it in Postman, so I know it works. And I'm gonna and come back to my code, buy NASA, and let's plug in this deck. But instead of it hard coding a deck ID here, since this is a template string, I can use my bling and I can plug in what here? What can I plug in here? I can plug in deck ID, exactly. So now the cool thing that happens is on page load, this fetch runs. It goes and gets me a deck of cards. We store the ID for that deck in a global variable. Whenever we click our button, it can use the ID that we got on page load to go ahead and draw two cards. Let's see if we get any data back. Let's eat all this stuff from NASA. Let's see if we get any data back when we click the button. So let's come back here.

Let's refresh. So we got a deck of cards. And then if we deal the cards, woo-hoo! You can see that we got two cards. So, I was actually really excited. You can see that we have two cards. We have an array of cards. The first card is an Ace of Diamonds and the second card is a King of Spades. So if we dig into this a little bit deeper, we can see that each card has an image and a suit and a value. Let's see if we can get these cards showing up in the DOM. So we know that we get an object back that has a cards property, but cards is an array. So we can use cards zero and cards one to get the first and second cards. Let's try that. Document.querySelector. And our image had the idea of player one.

And we're gonna change the source to be equal to data. Was it cards or card? Cards, yep, square bracket zero dot, what was it? Image, cool, because we got the data back. It had a cards property that was an array. We're gonna grab the first card out of that array and grab the image property. And then we're gonna do the same thing, the same thing for the other card. We'll do a YOLO at the end, we'll do a YOLO at the end. I think we're building up to some YOLOs here. So let's go ahead and this would be one, right? So this is going to grab the first card and the second card from the draw. So let's go ahead and save this. Let's see what we got. Let's see what we got. I'm going to refresh.

I got me a new deck of cards. I deal two cards and the first card showed up. That's cool. Let's check. Oh, rip. I forgot to say player two. Here's call chat. If we look, remember, our images have the ID of player one and player two. I don't know about y'all. Y'all, I was pulling aces. Y'all were pulling threes and stuff. All right, let's go ahead and save. Let's make sure this is working and then we'll step through it. Refresh, so we got a new deck. I'm gonna deal two cards.

We get a deuce and a jack, a six and an eight, a king and an ace. Yo, player one is getting wrecked, destroyed. Player two, player one is not one yet. Destroyed. Ooh, that would be war. We would have to like put up three cards and then flip another one. Cool. So right now we can see that, and it's also pretty cool. You can see how many cards are left in the deck. That looks pretty neat. Right now we're not doing any comparison to see who won. Right? We're not seeing who won yet. So let's see if we can build out the who won. Let's just take a second to see where we're at.

We have a fetch on page load that grabs the deck and stores the ID in our global variable deck ID. Then down here on the click of the button, we're using that deck ID to draw cards from our deck. Right? We're drawing cards from our deck. And all we're doing right now is grabbing the images from the two cards that are drawn and placing them into the DOM. Let's go ahead and, let's go ahead and see if we can do a little bit of comparison here. Let's go ahead, do we have a place where we can put this? Let's see. Let's put a place like, We can put, let's do like an H3 here. And I don't like the capitalization, put an H3 here and let's do it like result. We'll just say result for now, and this is where we're gonna put the result of who won or not, cool. So let's see, these cards, do they have value? They do. We can see that there is, let's open it up. There is a value.

Ooh, however, that's gonna be a problem. Anybody see the problem that I'm looking at? Anybody see that problem? They're not all numbers. the ace, the king, the queen are all gonna need numbers if we're gonna make this work. So let's do the first thing. Let's just, let's see if we can figure out who won the way it is now, and then we'll control for this edge case. let's go ahead and say, we're gonna get the value from each card. So let's get the values. I'm gonna say let player one value equal, and it's gonna be that data.cards zero, and then what was, how do I get the value off of it? Value, so it's just dot value. Beautiful. And then we'll set up another variable, let player two val equal data.cards1.value. Cool. So now we have the value from both the cards.

Let's just do a quick conditional. Let's do if player one.value equals data.cards1.value. vowel is greater than player two vowel. Greater. Player two vowel. Then we'll just for now, actually let's put it into the DOM. Document.querySelector. Let's do h3. We're gonna say innerText equals player one wins, right? And then we can do else if, and we can say player one val is less than player two val. And we're just gonna do the same thing we did here, except player two wins. Boom. And then the last one is if they're not less than or greater than, then the only thing that else could be would be to say war. We'll do that h3 and we'll put some text in there. I'll say time for war.

Cool. Beautiful. All right. You know what? Something is pretty interesting. Let's just see if it works and see if it's doing anything. I know, hopefully we get some like numbered cards and it works. So let's see. Let's refresh. We got a new deck. deal two cards, ace king, player two wins. That makes no sense, that's not true. Let's get two numbers, let's see. There we go, player one does win, cause six is less than 10. Oh no, that's not working.

This should, player one should be winning. Uh, no, that's what, uh, no player. One should have won this. Interesting. Let's check, let's see what's happening because player one should have definitely won that one. Let's look at the cards. Oh, what are all the values chat? Can you see what the values are? They're strings. If only we saw something earlier today that would help us fix this. If only. What could we use to fix this? Yeah, number, nice. Let's look at number. And wrap these in number.

All right, let's see if we got it working now. Let's refresh we got a new deck draw two cards. We're gonna draw until we don't have face cards All right So player two should win this one right because five is greater than four. So player two should win and that's what it says Player one should win All right, cool, so it works when they're numbered cars What number cards when they're numbered cards? Uh this works All right, so the cool thing is, maybe we can convert all the cards to a numerical value. So I think I can do that pretty easily. And I'm gonna see what the kings look like. Is it all caps or not? Yeah, it's all capital letters. So what we can do is we can just create a little helper function. and our little helper function can just convert it to a number. So let's call it function convert to num. And we're gonna take in a value and this is gonna be a conditional. We can even probably do a switch here, but just taking a conditional, we're gonna say if val equals ace, Ace, then we'll return, so let's say 10, jacks are 11, queens are 12, kings are 13, and aces are 14. So we'll just return 14.

Queen, else if, else if, cool, else if, cool. And so we'll just kind of keep it going. We'll say if val equals king, all caps, right? Remember it came in all caps. If val equals queen, cool. and if Val equals Jack, cool. And then we're gonna have an else here as well, which will just be return Val, cool. So if it's already a number, if it's not an Ace, a King, a Queen, or a Jack, we should just return that number. So we'll return here 13, We'll return 12, we'll return 11. And so if it's not a ace, king, queen, or jack, whatever value we passed in, we'll just return the value. Cool. Are there jokers? That's a good question, Divker. I don't think so, because it was a 52 card deck. So I don't think they would put jokers in a 52 card deck But that might be something we'd have to control for that could be a little bug that pops up if we're we don't know All right, let's take a look So now we have this little helper function that'll convert any value we pass into a number Or at least give us the number and so instead of Doing this comparison here I am going to I'm going to do this.

I am going to wrap this in convert to value. That's what we called our function? What do we call it? Convert to num, sorry. Convert to num. Cool. And so what this will do is I'm gonna call this, oh, did I spell it wrong too? I forgot the T. All right, so what I'm gonna do is instead of just immediately comparing the values, every value I get from the card is gonna be passed into this convert to num function. So if I got an ace back here, this ace will get passed in, val will equal ace, and we'll return 14. So it's as though this value here would become 14. One thing I'm noticing is that we should probably have number on this, that we're always returning a number because those values could be the string of the number. Cool. I'm gonna wrap this one and convert to num as well. Let's see if it works, and then I'll walk through how it works.

I know this is a lot. All right, let's save this, let's go ahead and run it. Deal two cards, we got a new deck, deal two cards. Queen and six, player one wins, let's go. Jack and 10, player one wins, let's go. Seven and four, player one wins, let's go. Player two wins with the ace, all right, let's go. Oh, first try. Weezy said, everyone take a moment to appreciate that we can somewhat understand the wall of code versus four months ago. Hell yeah. If you're paying attention to any of this, imagine trying to pay attention to this a couple of weeks ago. All right. Let's take a look. Let's make sure we understand what's happening here. Jason Derulo.

Hey, thank you for the five gifted subs again. and I appreciate you. Thank you for being here. And thank you everyone for all the subs today. It was a lot today. I appreciate you all spending Jeff Bezos' bucks and using the primes and all that fun stuff. Thank you. All right, let's take a look. We have our very first fetch that happens on page load. We get the deck ID, which we store in a global variable. Well, we're gonna need this deck ID, right? I think so too, legendary learning is fun. We're gonna need this deck ID so that we can make another request to draw two cards from the deck that we got. All right, let's see. We click the button and that's gonna enable us to draw two cards.

We're gonna use this URL to draw two cards. We're plugging in our deck ID. And then what we're going to do is we're going to get the response back from drawing two cards from our deck as long as we don't refresh the page, we're going to keep drawing from the same deck. We put the first image that comes back with the two cards into the DOM, we put the second image of the card that comes back into the DOM, and then we create this little helper function that takes the values because the values were strings. and our little helper function converts ace, kings, queens, and jacks to a number value and converts any of the string numbers to an actual number, right? And then the only thing we have left to do is compare those numbers to see if the player won one or player two won, or if they're ready for war. Pretty neat. All right, let's do Pokemon cards, and then we're gonna do a YOLO. Pokemon cards and then a YOLO. So let's go ahead and take a look, and then we'll talk about the homeworks. All right, so we have quite a few Pokemon cards to get in today, and then we're gonna do a YOLO. So here are the Pokemon cards that are still available. And let's see. Let's go ahead and I am going to set up a quick math.seal. We're gonna do a math.random.

And we're gonna times that by the number of cards as we have left, which are 64. So we'll do 64 times 64. If it winds up being one, two, or three, you get the top tier card. One, two, or three, you get the top tier card. We have quite a few folks that did the Pokemon card redemption. And so we're gonna start with Andreslof. Andreslof, this card is for you. So let me go ahead and I'm just gonna, I'm just gonna copy these names real quick Cause I'm going to need those so I can send out the cards. Uh, I'm going to be sending out all the cards, uh, along with all the other merch stuff we're doing. I'm hoping to take some of the time this weekend that we have for me to be able to go ahead and do all that. So Andrew sloth, this is your, this is for you. Three, two, one, 18. Let's see what the heck 18 is. 18 is the double colorless energy, but it's the league promo version. That's actually a pretty cool card.

So I'm just going to go ahead and copy that real quick. Boom. And we're going to put that on my list here just so I know who got it. And then I actually have to delete this because there's no doubles there. So I'm going to delete this row. All right. Next one up is Yobi. Oh, Yobi. This one's coming up for you, Yobi. So let's go ahead and draw it again Three two one 62 all right, let's see. What's that 62? 62 is sage's training. Oh, no, sorry Oh in Seiko, this was the death of one of my I actually don't I pronounce this This is the death of one of my decks. I got rolled by this so hard when I was playing competitive Alright, I'm gonna delete this Let's go into Yobi And we're going to do a YOLO. All right.

Elvelino, Elvelino, this one's for you. Elvelino, this one's for you. Oh, we need to build an API for this. Exactly. Actually, somebody did that last class. Somebody last class built me an API to do this. I just don't remember the URL. Someone really did do that last class. They built an API for me that looked at it. And I just, I forget the URL. Seven, hell of a no, seven. Let's see. Seven is, ooh, Kingdra Prime. That's a fire card. All right, Kingdra Prime coming your way.

Got just a few more here, folks. Then we're gonna do a YOLO. Then we'll do a nice raid. Get some more channel points so you can get cool stuff like these Pokemon cards. All right, we got four more to do here. One more. All right, 64, and this was for fire, repeat, fire, repeat. There is no 64 anymore. So you know what? We'll make that a re-roll. Since there's no more 64, because I forgot I deleted two, you lucked out because you were at the bottom. Fire, repeat, since there's no 64, we'll redo it because that would have been a bad card. So let's go ahead and change it. Well, not bad card, just a lower end card. All right, let's re-roll 62, 25.

Fire repeat, that is, ooh, the Jirachi Unleashed. Beautiful, coming your way. And I'm gonna go ahead and delete this because I only have one of those. Cool, which means this has to change to 61. and this is for Irvacet, Irvacet. This is for you. 55, so that is a lovely Persian coming your way. And we'll go ahead and delete this one. Cool. Two more here, folks, and then we're gonna do a YOLO. You don't wanna miss the YOLO. They get these sweet, sweet channel points. Now I'll talk about the homework And then we'll wrap up with a raid all right woven this one's for you woven this one's for you We're at 60 now 51 That's a professor juniper I got three of those that's good that's a juniper coming your way woven And for folks that get the Pokemon cards, I'm gonna reach out to you by a whisper here on twitch I'm gonna ask for your address and we're gonna get that coming your way I know some folks want some Pokemon cards earlier like a month or so ago Those are gonna go out with this big shipment of stuff going out. And then the last one I think is today They think they just redeemed that it's blind devotion. This one's for you blind devotion 39 with the 39 We have a Snivy coming your way nice and delete this one cuz I only have one of those Beautiful already Lovely let's do a YOLO Let's do a YOLO They get rid of the Kingdra I Didn't let's get rid of the Kingdra Beautiful, all right, there we go.

We got rid of all of them, wonderful, thank you. Let's do a YOLO. So the way the YOLO works, time to lose all my points again, hopefully not. You saw the code, folks. Hopefully there's no bugs in the code. Hopefully you had enough time to take a gander at the code to see if there were any bugs. We're gonna YOLO if player one wins or player two wins. If player one wins, you win your points. if player two wins you win your points but folks here is the game this evening if we land on war i'm gonna cancel i'm gonna cancel it everyone gets their points back and then you have to yolo double the points So if we get war, you have to put up 10, you put up 20, you put up a thousand, you put up 2000. I'm going to look through, I'm going to pull up the spreadsheets, going to be up in the spreadsheets and be like, who didn't double ban, ban, ban, didn't double ban, didn't double ban, ban, ban, ban, ban, didn't double ban because you don't have to play. You don't have to play. You don't. But if you want to play today, here are the rules. You pick player one or player two. We get war, you have to double your bet.

All right, let me go ahead and set it up. Let's go ahead and we'll refresh the page. We'll get a fresh deck, fresh set of cards. Player one or player two, send up the YOLO. All right, start a prediction, start a prediction, player one or player two. Mission period, one minute. Who will win? All right. Set up prediction is started. Got it. All right, prediction is open. Who will win? Player one, player two? Player one, player two? Player one or player two?

I don't know why people are doing exclamation point YOLO. It's going to be 2 million channel points on each side. Wow. 1.2. 2 mil. Wow. We're definitely, we're, we're 4 million channel points on the line here, folks for a million channel points. That's absolutely wild. Wow. Oh, four million. We're at five million channel points. Five million channel points on the line, folks. Five million, can you believe it? Five million channel points on the line. All right.

Let's see if we can do it. All right, you ready for this? Five million channel points on the line. All right, let's refresh. We got a new deck. We're going to deal two cards. Player one wins. Oh no, you didn't see me do it. Player one won. You can see it in the history. I didn't touch it, player 1-1, ringed! Player 1-1, I don't know who bet the points, it doesn't matter to me, but player 1-1, there's no way to make this right. Can I cancel it? Player 1-1, player 1-1, let's see, how do I choose it, alright. All right, I feel I need to delete this bet and do it again.

I do, I don't think folks saw it. I don't want folks to be cheated. I think I have to, I think I have to delete it. Yeah, I think I have to delete it. Psych! Oh, you don't trust me by now. If you don't trust me by now. Player 1 won. I don't know how to do this fairly. I don't know if I should delete it and redo it or if player one wins Think we got it. I think the only fair way to do this Is to delete it because folks didn't see it. I know player one you want your points. I feel you But I feel like we need to redo it So I'm gonna delete it. I Apologize should have been little Leon. I don't want to be any any shenanigans I don't do any shenanigans.

Can I do a poll? Let's do a poll. New poll. Should I redo? Yes. No. All right, let's start a poll. Hmm. Wrong one. Should I redo? This is, this is for all of it. I wouldn't cheat y'all. player one, one. So let's see, let's see what, let's see what the community decides. The democracy in, in action.

So the interesting thing here is that it had to be more people, right? All right. Alright, no redo. The ones won it by over 100 votes. The no's won it by over 100 votes. So player one really did win. I would feel really shitty if I had to delete it from the the player one winners. So player one did win, the community's decided, I'm gonna confirm it, player one wins. Boom. I think that's fair, I think they deserved it, they did win. Now, we can do one more. If you wanna do one more, this is like really, This is getting me into some trouble territory. Give me some trouble territory. Let's do another one. Let's do another one.

Let's see the details on this one though. Can I see the details over here? Over five million points. Over five million channel points. We're up for swings there. All right. Let's go ahead. I'm going to set up another one. It'll be on. We're going to do. We're going to refresh new deck. Refresh new deck. All right, start a prediction. Who will win? Player one, player two, one minute to get in and then we'll do a raid.

All right, one minute to get in here. I can't be doing too many more of these YOLOs. Can't be doing too many more of these YOLOs. I'm going to refresh, new deck, and then pick two cards. All right, we got a million plus on each side. Whoa, y'all, what a bunch of degenerates. I thought this one's gonna be like way less I thought it's gonna be like way less this is what you're here for screw learning the code we're here for the yolo's this is wild wild what i thought it'd be like half yeah we're over five mil again this is for another five million channel points what what another five million channel points They're up on the line, folks. Uh, let's go ahead and refresh. So it's gonna be a new deck and then we are going to draw two cards. All right. Here's the refresh little Leon. You can see me. There you go. I'm good. Live.

All right. Refresh new deck, draw two cards. Three, two, one player to want it player to want it. I hope he didn't switch it up player to light it. Let's go All right. Let's confirm the prediction here Choose outcome Player two wins complete complete prediction Beautiful. All right There's a few things for homework. Due Thursday, due Thursday, you have an assignment that says to create three small apps using three APIs. So I gave you a list of public APIs you could use, but any API is fair game. Meaning that you can just Google for certain APIs. You now have the ability to use a bunch of them. And so part of your homework for Thursday is to build some simple apps using some simple APIs. Google, share APIs that you find that are fun. Look up APIs that might be tied to your interest and try building. Also for homework, I want you to try playing around with this game.

We've done a lot here. Break it apart. Try and make it do something different. Try and get war to work, right? Right now, war doesn't work. It's just the greater than or less than, right? So there's lots of things you could do here. Once you have the cards working, you could build whatever you want. You could maybe build poker, you could build blackjack. And so there's a real ability to take this deck of cards API and build something really cool as the beginning project for your portfolio, right? I think there's a lot of stuff here that if you just tweaked it and made it your own, right? Tweak it and made it your own, that you could wind up with some really dope portfolio projects. So hope you had some fun today. I hope you enjoyed working through some of these APIs. Come back on Thursday.

We're gonna do more stuff like this, just building, seeing how things work, testing out new tools, and then we'll go into the holiday weekend. So let's go ahead and do a lovely raid. I really appreciate everyone that sticks around for the raids. It's really nice to like spread some love and positivity with the end of the evening. Also, remember, you get those sweet, sweet, sweet channel points. And so, let's go ahead and do a raid. Since we started off with the, let's see, what have we been to in a while? Cool. All right, let's go to Polarin. We haven't been over there in a little while. Let's send them some love. If you haven't given them a follow, please give them a follow. And I will see you all again on Thursday. Signing off the raid. Boom, we're heading over.

Have a good night everybody. Hope you had some fun. Hope you learned some stuff. Build, break, make it your own. And I'll see you all on Thursday. Peace everyone, let's raid.

End of Transcript