Introduction

Good morning, good afternoon, good evening, no matter where you come from, hope you all are doing well. I always forget that the hair is what I can't do. I can't do the whip. You know, I try, but it's splattering everywhere. What's going on everybody? Welcome back. Hope you all had a wonderful, wonderful Thursday. And I'm glad you're here with us now. Let's go. Look at everybody, let's go. All right, tonight's a good night. We got two really cool apps that we're gonna build out. We're gonna get a little review in first. We always like to get our spaced repetition in. We're gonna talk about maybe our break next week.

What, what is that, huh? What what's going on? We're going to talk about that then we're going to use our API knowledge to build out two really cool apps One we're gonna build a tool that folks that play Dungeons and Dragons can use To help look up stuff and to help them with their campaigns Then we're gonna review a little bit of local storage and once we have a little bit of review of the local storage We're gonna build a tracker app. We're gonna build a tracker app where we can use the open library API to look up ISBNs of actual books, keep them stored locally on our machines, and then have users be able to come back, see all the books that they've read, and be able to see that kept over time. Our apps no longer disappear on refresh. We're starting to build all these little pieces together so we can start building real apps that real users could use that actually have value that people can come back to time and time again. and I'm ready, folks. Hey, thank you, everybody, for the hype. Yo, G-Mac, thank you for the five gifts of subs. I appreciate that. And Fox, hey, thank you for the raid. Thanks for bringing everybody over. And Izraj, we'll get you that Pokemon card later today. Hey, all right, happy Thursday, everyone. Glad you're here.

Let's get into it. You know how we like to start. Questions. You got questions. I got answers. The question of the day, however, question of the day is what should our next emote be? We have all these extra emote slots that we're not using that we should probably start using. What do you think our next emote should be? Bob by never boom a smurf. Ooh Just get just get the MCA by dominoes and just go for it Lee hun winks and now send nudes got me in trouble a Barbara Oakley amount. Oh a flexesaurus. Oh, I love the flexesaurus. That's a good idea flexesaurus automagically Now blah blah hates automatically. I can't do that there Code weenie. All right.

I see a toaster. All right. All right Goblin, we got some good ones. These are these are good These are good I had banging them out bangers only. Well, that's a good one, too. All right. I'm taking notes folks. I'm taking notes Oh, i'm a baddie Just i'm a baddie. Oh, that'd be so good to use another chance All right, I'm a Tina twerk, I'm making notes. I'm gonna write them down. We're gonna work on it. We're gonna get these new emotes coming in. A zebra emote, a zebra emote. Yeah, that'd be a good one. Beyonce rollercoaster.

All right, I got you, these are good. All right, now, any questions before we jump into, I always like to give folks just a few seconds to get here. If you're new, welcome, we're running a free 30-week software engineering bootcamp where we take folks from having never coded before to employable I don't know if you've seen a celebrations channel recently folks the number of folks that are getting clients Some folks already getting jobs. It's wild. I Can't believe I lost 50k last class. Hey, I'm sorry you live by the YOLO you die by the YOLO. It's only one way How do I handle fetch of data with another fetch You can actually nest your fetches. It gets really ugly, but you can nest them. That's the easiest way to do it. Eventually you can assign stuff to variables and then eventually we'll use async await which solves a lot of these problems. So like the easiest thing you can do is just nest your fetches. It feels bad, but it works. And then as we get further along, we'll learn tools that stop that from having to happen. I haven't watched the other API classes. Can I follow along with this one?

It's gonna be a little tough. You can definitely try. You'll definitely pick up some things because we always do review. And then you can maybe apply those things to your other classes, the other ones as you catch up. Yeah, yeah, we'll get through async await. We'll get through promises and all that fun stuff. Yeah, then it makes this. So we wanna be able to use APIs, play with APIs, be able to take stuff, put it in the DOM. And we're almost there. We almost have everything we need to be able to build real apps with these APIs. There's like two more things we're going to learn today that enable us to like append stuff a little bit more readily into the DOM. And then the other thing we have to learn is like how to keep it in the DOM so that if our users refresh the page or go away and come back, the stuff is still there. Once we have that, we can go wild. And so I'm excited. Yeah, definitely MindWolf, if you haven't watched their streams as well, definitely doing a lot of API review.

So if you feel a little behind with the APIs, definitely check out their VODs, they go really in depth. Really excited to have them on the stream team because I know it's helping a lot of folks. Cool. Do people write all the API data by hand? Somebody's gotta do it, right? A lot of times it's a lot of work to build out all the data that's in an API. You might not be doing it by hand. You might have like a, like a form or like you might build a tool that helps build out all the data, but it has to be entered in somehow. It's not magic, right? And so, yeah, it is a lot of work to build out some of these APIs. Like when we were looking at that Pokemon API, I don't even want to know how long it took to just like get all the data in one place. And like, I'm sure there are like places like Bulbapedia and stuff that have kept track of it for a long time. But if you just had to start today and collect all of it, Mm-mm, too long. A lot of people these days will do, they'll split out tasks like that on Mechanical Turk. And you can have people from like all over just like do one and you have like 10,000 people doing it and then you can build them out quicker.

Cool. Alrighty, folks. Let's jump into it. Let's get into it. We got some stuff we gotta talk about today and then we're gonna get more into our APIs. All right, we are going to do a little bit of review. We're gonna build two new API projects. We're gonna play with local storage, and then we're gonna talk about the homework. If you haven't already, please go ahead and check in. Zema said, how do I mark attendance? You can click that little link to Twitter there, because when folks type in the exclamation point check-in, that brings up the tweet. Just go to that tweet, like it, retweet it. It helps the community grow. It also makes sure that I know that you were here. So when we get towards the end of program, we have a lot of stuff that's just gonna be for folks that have been here, that have been working through the program.

And so we need to make sure that you've been here. So the check-in is your attendance and also helps folks find us. Cool. Now remember, just typing in check-in doesn't do anything. You have to go to the tweet and do it there. Can I delete something I pushed to GitHub? Yeah, you can delete the repo if you would like, But know that there are lots of bots and stuff that once you push some things, it's it's there forever. Yeah Mm-hmm Cool All right, remember no networking no networking until May We have all of all of April to focus in on some of the things we're gonna focus in on no networking until May client deadline is now the Fifth, oh, I got to turn my demo pro. There we go. It's now the fifth, I forgot to update it. Because we have a major holiday on the third. Yeah, cool. Just got a client today. Congrats, Angel Cakes, that's amazing. Congratulations.

Woo. I remember if you, for some reason, are not able to get a paid client, Meaning that you're not like allowed to get a paid client. Some folks have visa circumstances or things like that. Remember, they're all two alternatives. You can volunteer for a grassroots organization. You go through the same process. You still get a contract. You still get a proposal done. You just have an amazing reference at the end instead of money. You can also contribute to free software. There's this first timers only, which is a great place to start. Find communities that want to be helped. But dude said, is this a bootcamp or just random lessons? It's a bootcamp. Do exclamation point, well, it's an agency with a training program.

And so go ahead and do exclamation point 100 devs and you can learn everything you want to know about the program. Sorry, Passion. Alrighty. If you haven't joined the Code Wars clan, you're missing out. When we come back who the perks the perks that some folks are gonna get from being in the clan We come back we got some we got some good stuff here All right Remember if you're joining the clan, it's the whole portion this whole thing. It's not just 100 devs Submitting work, we had a lot of work that was due today. And so I want you to go ahead and make sure you submit your work. You don't have to do it right now, but you can, if you haven't done it before class, make sure you get it done after class. There's a form, the form is asking for your, your kind of some of the bigger projects that we've worked on the past couple of weeks and the three API pieces that you're supposed to do by today. So go ahead and submit if you haven't already. And if not, if you haven't finished, if you weren't able to get it done, well, now you have some more time. You have some more time because no class next week. So a lot of folks have been asking for a break. A lot of folks have just been saying like, you know what, I'm just there. I'm hanging on just a little bit, right?

I'm hanging on just a little bit And I just need a little bit more time to either get caught up or to take a breather And so next week we will not have any class So there will be no like me covering new topics. We won't have anything that you would miss Okay, so next week no class. We start Sunday. So Sunday is a holiday So we won't have office hours on Sunday. We won't have class on Tuesday, and we won't have class on Thursday Cool, now it's up to you how you want to use this break. Some folks will use this break as an actual break. Your brain might be churning a little too much these past couple weeks, right? And so some folks might actually take a full break, be weary of that. This is where we lose people. When we do breaks is where we lose a large portion of folks that just never come back. OK, so if you are doing a break, know that we come back in a week, not this Sunday, the next Sunday. And we keep pushing forward. All right. Now, the interesting thing here is that we're taking the break Tuesday, Thursday, so you can take a full break if you need it. A lot of folks, however, will take this break to get caught up.

Right. A lot of folks will take this next Tuesday and Thursday that class time to get caught up and to fill in the gaps that they need to fill up. So I always like to say that a break may not really be a break. It's up to you. And just because we're on a break doesn't mean there aren't some expectations of each other, right? Just because we're on a break doesn't mean that we just run out and do whatever the heck we want, right? And so on the break, there will be a couple of things that I'm going to be asking of you if you don't need if you need that if you need that week to mentally unwind and not think about code that's great but I think a lot of folks need the break to just catch up and reinforce the things that they learned without having the expectation of being live for class. So if that's you we're going to have two work together nights, right? So next Tuesday and next Thursday we are going to have work together nights. So it won't be any class, but we're going to break up the Remo into different floors, right? We're going to break up the Remo into different floors, and so one floor might be part of the catch-up crew and trying to catch up. One floor might be folks that are struggling with APIs, want to work on APIs together. We're going to make it so that you can find your people to work with, maybe you want to work with your study community to get stuff done, but we're going to hold Tuesday and Thursday as work together night. So if you feel like you want to come and work with some other 100 devs, you want to get to know some folks, you want to get some networking in, come to those work together nights, Tuesday, Thursday, but know that there is no expectation of class. There is some work though.

And there's, there's three stratifications of work. Some folks need to catch up and so I hope you take this week, this break to catch up. If you feel like things are going at a good clip, you just want to reinforce the things that you've learned, I want you to work through this Intro .js course. It's by Codecademy. It really does like hold your hand through a lot of the material. Just a way to get all those little things back in. It's a full course. It's like a, it's like a 30 hour course. Get through as much as you can. I really do like it to reinforce. We got got, you did get got. We, we, I really do like folks to work through it. And maybe you don't take the week, the whole week to work through it, but make sure that it's on your, your, your list to get through. Yeah. Has anyone gotten a job yet?

We've got a lot of jobs already. Yeah, we've got a lot. A hundred plus from last cohort and this cohort's already taken off its wild. Did we already do this? Yes, you might've done some of it, might've done some of it, but now you're doing all of it, cool. Would you say to do this course or work on Odin Project? Definitely this course, yeah. This is just more like handheld-y. It is just something to get a little bit more practice in, a little bit more syntax practice, right? So I think this is a definitely good thing to go through, especially if you didn't finish it already. Don't pay for it. Go up until where they make you start paying. That's it. Yeah. Cool.

And then the last thing that I need you to work on is this professional checklist. This professional checklist, we need to start getting all of our stuff together to get ready for the hunt. Right? the hunt is going to be a lot of work. And we want to make sure that you have all your stuff pulled together so that we can go into that process with ease, different, hey, what's up? So after this week, when we come back, we're doing object oriented programming, and then we're moving right into the backend. And as soon as we hit the backend, we also start the hunt. And so, this week, while you have more time, especially if you've already finished the JS course, I need you to work on this professional checklist. And so, let me pull it up real quick. All right, I need you to look at this checklist. And there's a lot of stuff that's on here. and there's a form that I'm gonna ask you to submit when you're done. And so there are some tools to install. Grammarly, which is just gonna help you with grammar as you're typing. Buffer, which will just help you stay engaged social media wise as you go into the hunt.

So just have them signed up for. I want you to start thinking about your blurb, like why folks would hire you over someone else. All right, why would somebody hire someone else? And then I want you to make sure that you have your portfolio, your resume, your LinkedIn, your AngelList, your GitHub, your Twitter, your cover letter, your cover email, and you're gonna notice, right, you're gonna notice that there are examples for each thing. Cool. Did they make grammar, do you have to pay for Grammarly now? Like even you can't even use the basic version anymore. I Just use the free version. Don't ever pay for anything. I'm never gonna ask you to Pay for anything Yeah free works, yeah, yeah, thank you. All right. Cool. Cool. Yeah, there's totally a free version That's just a browser extension that you have In your that you can put on like Chrome and it just works Well, so this is a checklist. I want you to get through the the checklist and I want this done by by Tuesday, April 26th.

A lot of this stuff you already have or have been thinking through, so it's just about time to kind of pull this all together. So, we're taking a break. Break means no class. Up to you how you wanna use this time. If you honestly need a full week off, take it. But you better be back here on Sunday. not this Sunday, next Sunday. If you want to use this break as a way to catch up, please use it. I really recommend, I really recommend this JS course, right? And then if you take the rest of the week, I want you to work on your professional checklist. I think if you can get through those three tasks will be in a really good spot going into the back end. So take your time, catch up, work through the course, work on your professional stuff. Still do your code wars, still get your networking in and come to our work together nights, but no actual class time. Cool. Sunday, April 24th, Git Bowl.

So on the 24th, right? The 24th, I want you to come back and we're going to work a lot on Git, GitHub, getting our work on GitHub. We're going to spend a lot of time that Sunday kind of just drilling all the things that we need to be ready for like the next half of course. So come back on Sunday, April 24th. We're going to do a lot of Git work, a lot of GitHub work. We're also going to spend a lot of time with APIs as well. Looking at some of the bigger errors that folks get with APIs, we're gonna spend some time troubleshooting cores errors, all those fun things. So this week, it's up to you how you spend your week. Some folks are gonna take a full week off. If you take a full week off, I expect you to be here on Sunday the 24th because I need you to be here to get back those gears going. Some folks might take the week to catch up. They might not have class, They might take advantage of not having the class time. They might dial down their networking. Well, we don't have any networking, sorry, for April. They might dial down their code wars just for the week, right?

To catch up, invest your time to catch up. Some folks are going to work on this course. And everyone, hopefully, that week or that weekend will get through the professional checklist. Cool. Sunday, 24th, Git Bowl, lots of GitHub stuff. and a lot of the more tricky stuff with APIs just to get all that stuff out the way. And then when we come back that week, we jump right into the fun stuff of object-oriented and then back in, because we're almost halfway through the course, folks. Git bull will always be the normal time we start on Sunday, which is 1 p.m. Eastern time. Cool. Taking this week to go harder? Hey, that's up to you. Like I said folks can take this week to to push to catch up whatever you need I want you to have this time and I don't want you to feel a certain way about using that time the way you want To use it. Uh, we're taking this space for folks to be able to use the time to their own advantage Alrighty Let's get into it folks. We got a lot of stuff to get into this night, we have, well, wherever you're coming from, day, morning, so we're gonna do a little bit of light review and then we'll probably jump right into our first assignment, all righty.

Another super review soon, probably when we get all the way through to the end of basic JavaScript, we'll do a longer review again. I don't know if we'll go a full nine hours, but I'm feeling like a five hour is definitely in our future. Cool. All righty, folks. Let's get into it. A program is what, chat? What's a program? Beautiful. A set of instructions. And therefore, the act of writing those instructions we call programming. When we write those instructions in a language which the computer understands, we call it programming. The language we use to write our instructions thus far is JavaScript. It's a beautiful human readable language. We can communicate our ideas to each other and that JavaScript can then be broken all the way down into something the computer can understand. Wonderful.

Chat, what are loops? What are loops? Yeah, repeating a set of instructions or repeating a set of actions multiple times so we can repeat an action some number of times. We've seen a lot of loops so far. We've seen four, while, we've seen things tied to arrays like for each, a lot of fun ways to loop through our content, a lot of ways to loop through and do multiple actions repeatedly. Beautiful. With our for loop, we had our setting up of our counter. We said when the loop would end, and we would increment by this amount each time. Remember, you can also, don't have to increment just by plus one. You can increment by plus five if you wanted to. Plus equals five if you wanted to. You can de-increment. You can do whatever the heck you want in there, and it just enables you to do this set of instructions that many times. In this one, we know that it would print one, two, three, 4 but never print 5 Because 5 would be less than 5 and like I said if you're if you're new here, we're going through this pretty fast This is all review. You can definitely join our discord exclamation point discord agree to the rules You'll see all of our past classes all the past stuff you would need We also have a wonderful catch-up crew where you can catch up and go at your own pace to the material All right chat.

What are arrays? Yes. Yes, they are Bill Gates toasters. How do you think Bill Gates? How many toasters do you think Bill Gates has? Throw in chat. How many toasters do you think Bill Gates has? How many houses do you think they have? How many toasters are in those houses? And You know what? I bet you Bill Gates doesn't know how many toasters they have. That's a fun question. All right, they are toasters. And what do we mean by toasters? We mean one thing that can hold a bunch of other things, right?

We use it as an ordered collection of stuff. And when I say an order collection of stuff, I mean that those things that are inside the containing thing, well, they are numbered starting with zero, right? So we have our index that starts counting at zero, and we go from zero until we run out of slots where things are being placed. We can create arrays in two ways using a constructor or using literal notation. We see literal notation here with the square brackets. we can, when we declare our array and assign it a value, we can already assign it with values in it. And then we have to remember the values that are inside of our array. We start the indexing at zero. So if we want the zero index out of our array, this one would give us New York. And if we wanted London, we would use the third index. Beautiful. Not only can we put stuff in, we can get stuff out using the index. So here I'm getting the values out by using the index. This is really helpful, Really helpful when we get to our APIs because the APIs often give us back content that has arrays in it and arrays with objects in it, right? And we have to pull those objects out of those arrays.

So we had to get comfortable with these arrays so that when we move to APIs, we know how to deal with the content we're getting back. All right, we can not only get stuff out, we can put stuff in, which is really helpful. and we can always use properties like length to get us to tell us how many elements are in an actual array. We can also iterate through arrays. We've seen foreach, which helps us iterate through arrays. You're going to see foreach today. When we get data back from an API, we're going to use that foreach to loop through all the data we're getting back and use each piece. And eventually we're going to use those pieces and append them to the DOM. Cool. Oh, chat, what are objects? We're blazing tonight. What are objects, chat? They're everything, everything. That'd be a good emote, too. An everything emote.

I think that's what we got for that on the list. Yeah, they're a collection of variables and functions. Collection of variables and functions, exactly. And so when we talk about those variables and functions that are tied to an object, we give them a slightly new name. We call those variables properties and we call those functions methods. And when we think about objects, we can actually think of a physical object. I like to start with a stopwatch and we can imagine all the properties that a stopwatch might have. the current time property, the color property, the shape property, might also have some methods like tell the time or start or stop. Cool. If you want to pull something specific from an object that itself is inside of an array, are there nesting indexes? Well, you would have to use the index of the array to grab the object, and then once you have the object, you can use it just like a regular old object. We're actually going to see that today, Matt. We're going to see that in a little bit. Will we learn how to build APIs? Absolutely.

So we're learning how to use them and consume them so that we can start building them. And you're going to realize that a lot of the things that we do first in backend development are really just building out APIs. Cool. Right here, I'm adding properties and methods using what kind of notation? Yeah, .notation, lovely. All right, let's get into it. Chat, what are APIs? What's an API? Yeah, okay, I see some of you, okay. Simple interface for some complex action. I love it simple interface or some complex action What are some interfaces that you use that enable a complex action to happen? What are so what are so what are what are what are some what are some simple interfaces that you have a remote nice? power button own buttons Key fob that's a good one VCR get out of here. Well those VCR tapes are going wild right now price-wise Toilet flush, lightsaber on, exactly. Stove, okay, nice.

These are all really simple interfaces that do something complex. When we turn the knob on our stove, you gotta think about all the stuff that has to happen. This natural gas that comes through, it's ignited by an igniter and it forms a big flame. Where did the gas come from? You don't know, all these complex things happen and just when you turn a knob. Key fob, think about all the stuff that has to happen for your doors to lock. That key fob has to send a signal, the car has to receive the signal, has to know what to do with the signal, has to know that it's your signal, has to know to then trigger some electronics that move and lock the car. All that complex stuff happens because you have a simple interface that is a button on a key fob. I love it. The one that we used that got me into some trouble last class is that I love to think of an API as a menu at a restaurant. I have my menu, I point to my noodle soup and I say noodle soup please and then something complex happens in the kitchen. There is a combination of broth and rice noodles and vegetables and tofu that all gets put together in a beautiful bowl. I don't know how they're dicing, I don't know how long they're cooking, I don't know what's been put in water or what. And then it all comes out in a beautiful bowl, right? A beautiful bowl that I get to enjoy.

So a very simple interface that was a menu that led to some really complex action that provided a beautiful bowl of soup. Had a coffee chat today with someone that's building APIs. That's dope. Alrighty. So, the APIs we've been using so far have mainly been web APIs, meaning that we have an interface that enables us to make a request to a server. That server hears the request. There's some code that's set up to gather all the stuff it needs to respond to that request, and then it responds. And so far, the data we've been getting back from most of our APIs has been JSON, but we're actually gonna see today that APIs can really send whatever the heck they want. One of the APIs that we're going to use first really tries to send like HTML. And you have to give it a very specific query parameter to get that actual JSON data back. And so we've been using web APIs that give us a URL as the interface. That URL enables us to make a request. The server hears the request and responds with some stuff. And ideally we're getting some JSON data back, some objects back that we can use. Beautiful.

All right. We saw for right now, fetches are how we are making our API requests. Eventually we'll get to async away and promises and all that good stuff. We understand that these are really our promises if you've read ahead. And so we'll get there. I like for you to play around and enjoy APIs and then we'll slowly peel away the onion and you'll understand how it works under the hood. All right, we also saw that when we were using the fetch, we could pass in query parameters with our URLs. And the query parameters are just a way of getting a little bit more specific when requesting data from a server. So with query parameters, I can say, hey, don't just give me any cocktail, give me data on margaritas or whiskey or other things that we were passed in, right? And so the query parameters really do give us a lot of flexibility on this interface, right? This interface is just a URL, but we can think of these query parameters as like the what on our remotes. You can think of these query parameters as like the what on our remotes. Yeah, they're like the buttons on our remote. We use Margarita here and the TV turns on. We use Whiskey and it switches to Hulu.

We type in Gin and it switched to Netflix, right? Like we can think of those just query parameters like extra buttons on our interface that enables us to get different data back. Wonderful, wonderful. Is a question mark mandatory in all situations? It depends on how the server is expecting your interface to come through. Most of the time you're gonna see that you will have a base URL that the API has provided you. And then they're gonna give you a bunch of key value pairs that you can append to the URL to get specific data back, right? And so the way you start those key value pairs is with the question mark, and then you do key value pairs for each different thing you're appending to that URL, each key that you're asking for. So we see like S here for search. We saw what sum we had to put like an API key, with some we're going to see today that we can add more and more robust things to our URLs. Now there are some URLs that don't use the query parameters but instead just have forward slashes and then specific information you put after the slash. And so we're going to see both types today. We're going to see types that just have the forward slash and we're going to see some that that have the query parameters. It really comes down to reading the documentation. Yep.

The documentation is gonna tell you how the interface, like what they're expecting for you to do to get that data back. If you're having core errors, I see folks kind of bringing that up, use different APIs for now and then come back on the 24th. We're gonna spend a lot of time working through and troubleshooting course errors. But for now, it's just not worth it to struggle with them. Just find different APIs. Each server can respond in different ways. And sometimes there are protections that are put in place to help stop like your files on your machine from like having access to the internet. And that can lead down to a whole different rabbit hole. So we're gonna save that for when we come back on the 24th. But for now, just choose a different API. And a lot of times folks are forgetting like the S, always copy and paste the URL directly. Yeah. And always just try your URLs in Postman first. Right? Yep.

Make sure you have your S for HTTPS and try them in Postman first. That's how I can move through a lot of APIs to find which ones I like. Cause a lot of APIs that are out there, they're no longer supported. They've been down for a year. You have no idea. And so I think one of the hardest parts of using APIs is like finding the APIs that are actually useful Yeah Cool All right, let's keep pushing Alrighty, so the first project I want to work on tonight is I want to be able to use this lovely D and D API. So if you click on the link on the slides, it'll take you to the API, right? And I'll put it in chat as well, just so we have it. Cool. So the link is in the slides, but it's also there in chat. This D&D API returns everything that you would want about anything in the fifth edition. So there's a lot of really cool stuff that you can get back. It pretty much has everything. And so for those who don't know what Dungeons & Dragons is, it's a tabletop role-playing game. It's where you can have really cool adventures that you probably couldn't have in real life.

And there's a lot of kind of things you have to know to exist in the world or there's all these different kinds of monsters and spells and stuff like that. And so it's actually kind of non-trivial to keep it all in your brain. And so a lot of people will sit down and they'll have like books with them or they'll have cards with them or things that will help them remember everything. And so what I want to build is an app that enables us just to like look up stuff and then I want you to run with it, right? And so we're going to use this API, and the first thing I want to do is just see how the API works, see what we can get back from it, and then go from there to build maybe a little simple app with it before we take our first break. So here is the base URL. It's this dnd5eapi.co slash API is the base. And you can see that they give you some example, some examples. There's a full documentation that goes through like everything that there is. And so, like I said, a lot of times documentation can get wild, but there's so much here, so much here. Yeah, so much here. But we're just gonna use their first example that they gave us, which is the spells of acid arrow. And so I'm going to go to my I'm just going to clear out I was testing before class I want my postman and on postman I always just click plus and it just gives you a new way to make a request. And so if we go ahead and paste in the base URL that's good and then they also gave us kind of some like the next thing to look for. And it was spells slash asset arrow.

So this is kind of one of those APIs where they're not using query parameters, right? It's kind of just the way the URL is formatted. For now we're just following along. I'll give you some time to work on this yourself. Yeah, so follow along for now. And then I'm going to prompt you to do something. I just want to show you Postman, how I first kind of like look at APIs. I think one of the things folks struggle with in the beginning is like, Leon, what would you do if you just found an API and you wanna see if it like works or does the things or see what it has, right? And so for me, I'm gonna show you my process of how I like actually figure stuff out. And so for me, I would go to the site, it's linked in the slides and I put it in chat already, but I'm gonna grab the base and then I'm gonna type in spells asset arrow in Postman. So spells, asset, oop, spells, slash, asset, arrow, cool. And now that it's in my postman, I can click send and we can see all this stuff that comes back, right? All this stuff that comes back. I can see that I get kind of the name of the spell, I get a description, a shimmering green arrow streaks towards the target within range and burst into a spray of acid, right? And so I'm able to go ahead and see all the stuff that comes with it.

We can see range, we can see casting, all this fun stuff. We can even see things like classes and subclasses. And so I think it's pretty neat, all the stuff that's coming back with this API. And so what I want to do is be able to, now that I know this API works, I want to do something simple. I just want to be able to get some data back to start. And what I think I want to do is I want to be able to have my user enter in a spell, and I want to see the subclasses that can use that spell. All right, so I want to be able to enter in a spell, and then I want to be able to see the subclasses that use that spell. So what I'm gonna do is we have in today's materials, if you're new and you need the materials, you can do exclamation point discord, join our discord. Once you agree to the rules, you'll see a follow on materials channel and that'll have all of our starter code. So today I have starter code and you see I have this lovely dnd folder and in it I have a main.js and an index.html. In the index.html, we have an input, we have a button, and we have a place to put some stuff. Right, a place to put some stuff. Dnd streams, we've talked about it. We have a lot of folks that play dnd in 100 devs. I'd be down, I'd be down to do, to be fun, to do some fun.

Alrighty. So, we have this like nice little starter code. I'm just gonna open this in the browser just so we have it open. And what I wanna have happen is I want the user to be able to enter in a spell, and I eventually wanna see the subclasses that can use the spell. You can see the subclasses down here right beside my head. I want them to go in there. And so what I would love for you to do is I want you to take, we're gonna put some time on the clock here. I want you to get this API working. You got the starter template here. I want you to get it so that you're getting some data back. I want you to get it so you can get these subclasses, right? And if you want to really kind of go to the next level, get these subclasses showing up in the DOM. We're gonna put some time on the clock. Your goal is to get this API working, read the documentation, use Postman, play around with the starter code that we have here, get data coming back from the API, and start getting stuff into the DOM. You can hard code it at first, do what you want to do.

We're gonna put some time on the clock. So when you play D&D, your character can have a class, like the things that it can do, or like what type of character it is. But one thing that happened is that what if you had like 2 people that wanted to be a wizard, right? What if you wanted 2 people that wanted to be a wizard? A wizard can go down a lot of different paths in life, right? You could have like a wizard that goes and does good, you could have a wizard that goes and does bad. And so these subclasses in the 5th edition are kind of like journeys that your character can go on. And then when you're playing with other wizards, it's easier to kind of keep track of like who does what. and all the wizards don't have all the same stuff, right? And they don't all do the same thing. And so the subclasses just bring a little bit more spice or seasoning to the game. And so you're, yeah, schools of magic, stuff like that. Yeah, one went to one school of magic, the other wizard went to the other school of magic. And so when you look up these spells, you're gonna see like the class that can use it, but also like these subclasses are gonna come up as well. So I'm gonna put some time on the clock here.

Let's go ahead and put maybe timer. Let's put five minutes on the clock. I want you to get as far into this as you can, getting that subclass coming in and then trying to get the subclass into the DOM. And then I'm gonna show you some cool stuff about how to get multiple elements into the DOM using a loop. So five minutes on the clock, you got this. Dig deep. And then we're going to go over it together. Dega, we really haven't gotten the promises yet. For now, just use APIs. We'll get the promises later on. I am not feeling the newer stream beats there we go that's what I need in my life What you have to do is actually at the top of the file, fetch some data using the DND API and place the subclasses in the UL. That's what we're trying to do. All right, Jordash, welcome. Subclass, subclass. We're using that spells API.

We're getting some data back from the spells API. And what we want is if we look, there are these subclasses. That's what we're trying to get into the DOM. Bodega, it's passed through a promise chain. So it's basically, you can imagine like a function calling a function and passing stuff along as it does it. Use the spells that they give you in the documentation. You don't have to know anything about D&D to do this because they already give it to you in the docs. Use the one that we just tried together. Links are always in the slides. Man with milk, congrats. See delay. I always check my links in Postman first because sometimes I just want to make sure that my code isn't the thing that's causing the problem. So I use postman to test every time Use postman so much as I was making an animal crossing thing. That's awesome Ooh, got some folks coming in, done, nice. Turn it left, and then we're going to go over it together.

Can you walk through Postman? Sure, I can show you how I used it, but I just click the plus sign and plug in my link. That's that's pretty much it. Yeah. Sometimes if you're using certain clients, you have to like download something to your computer, but it'll prompt you to do that. And you also don't have to use Postman. Coding, the links are always in the slides. You don't need the links from me. They're in the slides. Use the slides. All right, folks, come on back, come on back. All righty. Let's take a look at this together. All right, folks, I'm always going to put the links in the slides. I see so many folks that couldn't find the link.

All you need to do in the slides, click right here. These blue ones are links, right? Always click these. These are always gonna be links for whenever I need you to do an API, right? So boom, that's gonna be the link. When we do the next one over here, boom, that's gonna be the link. Cool, all righty. So what I wanna do is I wanna use this API and I don't have to know anything about this API, what it does. I just want to see what comes back, right? I want to see what I get back when I use their example. Right? And so they've always been links. Yeah, they have been. Yeah. But I'll always, always, I'll always tell you where to get it, right?

I said a couple of times, it's in the slides. God, I gotta hear it. I'm telling you, I'm telling you. It's going to be in the slides. All right, now, I'm gonna take this link, right? I'm gonna take this link and I'm gonna use it with Postman. Postman, there's a lot going on, but you do have to like log in and they're gonna ask you to like download something to your computer so that it can make requests. You can, there's so much stuff in here, but I just go to my workspace. That's it. And then there's this plus sign. I click the plus sign and I can plug in the URLs. And so this one was the base URL. And then I saw that the rest of the URL was spells asset arrow. And so I can go ahead and plug in asset arrow arrow, and I can test it by clicking send. And I can see nothing came back.

So I saw that I got an error. Why did I get an error? I put the wrong link, right? I didn't use the full link. So if we go back, we can see that is spells asset arrow. so I like using Postman just because I can catch these things before I'm in my actual code because once I'm in my actual code the question I always have in the back of my mind is is it their link that's not working or is it my code that's not working and so Postman just enables me to kind of check these things really quickly. I use it pretty much all the time. I always have it open when I'm working with APIs and that's what I do. Cool. So now I have a link that's working and I'm going to go back to the code that we have here. We can see that this link is already in here and we're using the same setup that we've been using for the API template that we've used for all the APIs that we've seen and so far we have a button, we have a button that gets clicked. And when it gets clicked, it runs this set of instructions called get fetch. And in this get fetch, we can see that I can grab the choice, right? I can grab the value that was in my input and I'm plugging that into my spells. And so if this is to work, we should be able to just console log our data and it should work just like the example did in Postman.

So I'm gonna save this. I'm gonna open this in my browser. I'm gonna open up my inspector and in this console, I'm gonna type in the same thing that they gave me to try, which is asset arrow. So asset-arrow, I'm gonna click Get Spelled Data, and boom, we got our lovely object coming through, right? And so we can see that it's working. We're getting data back from the Dungeons & Dragons API here and we can even see the stuff that we care about down here, these subclasses. What kind of data does subclasses give? What kind of data is stored in that subclass? Yeah, it's an array. It's an array of objects. So where this gets a little bit more difficult is we're gonna need to work with this array. We're gonna be able to grab the array, grab the objects out of the array, get the data that we care about out of those objects, and then append it all to the DOM. So there's a lot to be done there to kind of start working with this data, get it showing into the DOM. I'm gonna walk through this one more time and then we're gonna take our break and when we come back from the break, we're gonna start actually doing it. So we can see that we have our input and our button and we have like this place where we wanna put the sub classes.

We look at our JavaScripts, we have our event listener is listening for the click on that button. When it hears the click on the button, it runs the get fetch function. We can see that we're grabbing the value out of the input. In this example, it is the asset arrow that we put in there. And then we plug that asset arrow into our URL using our query string, sorry, our template literal here. And then when we make our fetch, we use that string that now includes asset arrow. We got the data back, we were able to see the data, we console logged the data, and that's why we were able to see it in the console. Cool. We're gonna take our break, we're at the top of the hour. If you're new here, at the top of every hour, we take a break. It's clicking, Leon, woo! That's what I like to hear, Alabama boy. It's click, hopefully we do this a lot more times. It takes a little while, right? Takes a little while, but we'll get there.

And so we're gonna take our break because we're at the top of the hour. If you're able, please get up, move around, hydrate, let your eyes relax on something that's not the screen. If you can't move from where you are, maybe do some light hand stretches if you're able, and we'll be back in five. When we come back, we're gonna start digging into this data we got back from the API. We're gonna start seeing if we can play with that array, see if we can peel into those objects, and we're gonna see for the first time really how to loop through that array and append every single thing that we got to the Dom. Alrighty, folks. All righty, I'm gonna start the timer. See you in five. Gonna run some ads, so you have to take the break. Be back soon. Archer, Dr. Levi, the fitness doctor. I recommend their stretches. You You You You Ready folks, come on back, come on back. All righty, let's take a look at this together.

Let's keep pushing. We got some data coming back. Some errors that folks are coming in, that folks were kind of saying that they were having, was a lot of folks forgot the hyphen, right? So a lot of folks when they typed in asset arrow, they forgot the hyphen as they typed it in and guess what without that arrow Probably not gonna work Right. So if you didn't put the hyphen, yeah, it's not gonna it's not gonna give you the data that you want Because that's what they're expecting we could figure out ways to clean that up. That'd be a good thing to do Right, you got ways to clean that up I'm gonna move this stuff up here above the the the image And put it up here just so we have it above the image because the image is taking up so much time, so much room. There we go. Cool. That was the hyphen. That was some of the things we could do. You could definitely clean it up. We could do some splits, some replacing. We could do some fun stuff, but for now just make sure you're actually typed out the correct string. And then the other thing that I saw some folks running into like Leon, I did it, but there was no data coming through. Well, you had to console log your data.

If you didn't set up the console log, then you wouldn't have seen anything in the console if it worked because there would have been nothing there. Make sure you had the console log there, or else you won't see any of the data come through when it does work. Cool. All right, so we have our console log, which means that this should be working. Let's put back in our asset hyphen arrow. Let's get spell data. And great, we have this lovely object. Okay, I got a console guy. Yeah, just telling myself the computer does exactly what I tell it to do and nothing less helped me with all this API stuff a lot. That's a really good thing to keep in mind. We're getting to the point now where if you don't tell it to console log it, it's not gonna console log it, right? So that's something that we kind of just glaze over and it's one of my favorite, like I love that. Like I love when I get those errors, because there are so many, there are those types of errors you're gonna run into, where I'm like, it didn't work because I didn't tell it to do work, right? I didn't tell it to do the work, so it didn't do it, right? We as humans, we jump.

We do 50,000 things at one time. Computer can't do it. You gotta tell it to do this, and then this, and then this, and it slows us down. Gives us a better pace of life, right? I love those errors, cool. All right, so we plugged in Acid Arrow. we got some data back and if we look the thing we care about is the subclasses and right now we see the subclasses is an array. Let's just do data.subclasses and see if we can get that array by itself. So data.subclasses let's save it and let's see what we get now. So I'm gonna refresh, pass it, arrow, boom, get spell data, and boom, we got this lovely array. And in the array, we can see two objects. We can see it has the name of lore, and the other one has the name of land. Are these actually subclasses? Are lore and land subclasses? I'm going to OG magic missile.

That's my, that's like the best. When new folks do the lost mines. Oh, that's such a good, good spell. Cool. They are? Okay, that's interesting. I'm not up on my subclasses. Cool. All right, so there's lore and land. And if we look, we can see that there's one at the zero index and one at the first index, and it's just the name property. And so I think I can just grab the name property if I grab the object out of the index. Like if we step back and think about this, what this is giving us, like what this data subclass is giving us is an array, and in that array are two objects. and I'm gonna want the object, and once I have the object, I can use all the properties that are inside of it, like dot name, et cetera, right? And so maybe I could hard code this right now. I could do subclasses zero, which would be that first object.

Remember subclasses is an array, and in that array are two objects, right? And so subclasses zero would give me this object. If I did it again, like if I console log this twice, subclasses one would give me the second object, right? It would give me the second object. So I can hard code this right now by doing zero and one. And if we looked, each of the objects It has an index, a name, and a URL. So I'm just gonna use the name. How do we know which object to use? By playing with it or reading the documentation. A lot of times you have no idea what these APIs are gonna return to you. So you gotta get in there. You gotta get in the muck. You gotta play with it. You gotta see, all right, what am I getting back? Is it the thing that I want, right?

Is it the thing that I want? Or do I have to do something else to get the data that I want? And that's kind of the tricky part with APIs in the beginning, is that like, if the documentation is trash, then you're gonna have a really hard time with that API. Cool. So I think we just use .name here. And that's what we're gonna use. I'm gonna use .name. And that's why being comfortable with your arrays and your objects is really important because that's the way we're gonna use data as we kind of continue on. All right, so let's see if we get lore and land by hard coding these. Let's refresh. Asset arrow again with the hyphen, let's not forget. Boom. All right, now we're getting lore and land, right? We could put these into the DOM right away, but if I just hard-coded this, if I just like hard-coded these into the DOM, what's the problem I'm gonna run into? Different spells, different answers.

Exactly. We might wind up with a spell that has more than two subclasses. Does anyone know a spell that has more than two subclasses? Is that how you spell missile? How do you spell missile? I'll use fireball if this doesn't work yeah I don't know how to spell I'm a baddie and I spell bad. No. Oh, well this is different. Lauren Fiend. Polymorph. Nah. Burning hands. Let's see. Still just two. Oh, you know what?

Oh, you know what, you know what we're not doing. This is this is this is it. This is the problem you run into when you hard code stuff because it's only the two things are still hard coded. Hold on. Hold on. Hold on. Let's get back to our code. The two things are still hard coded. I just did it in real just did in a real life. It was engagement, I swear. I was just here for that guy. I did because we weren't actually console logging all the data. So let's console data.subclasses. We weren't actually console logging it. So we were just console logging our hard-coded versions, but we weren't actually console logging all the subclasses.

So let's go back and try again. Let's refresh. Let's try burning hands. All right, they had two. So now we can at least see that there is two, right? I think they might all have to. Well polymorph had zero. That was a good one. Yeah. That was good. Polymorph had zero. Let's see. So we got an empty array. So if we were hard coding, that could be a problem. Fireball has three.

Let's try. Fireball. Oh, boom, now it's two. Hmm. So we're seeing at least some have zero, right? Some have zero, some have two, right? And there could be one that has beacon of hope. I trust Arasta, let's see. Beacon of hope. Let's see. Boom, there we go. And this one has three. Thank you, Arasi. This one has three. So if we had just hard-coded, if we had just hard-coded zero and one, we'd be missing out, right?

We'd be missing out on the third value. And we saw that play on real time. I got, I got, I hard-coded it, and I was like, why am I not seeing the third? Why am I not seeing the third? because I wasn't console logging all of them. So now we know that, now we know if we, why are these like tabs weird? That's bothering me. Now that when we go to put this into the DOM, we know that if we were to hard code them, we'd run into some trouble, right? We could just plug this stuff into the DOM and be done. But what I really wanna do is I wanna loop through the subclasses and append them to the DOM. And so in my HTML, I have an empty UL. What I want to do is I want to append, well, let's go back here for a second, hold on. What goes in ULs? It's been a while since we've touched some HTML and CSS. What goes in our, what goes in our URL?

All right. LIs go into our, into our URL, our list items. Cool. All right. We might need to do another super review for some of y'all. Man, let's get out of here. All right. So I want to be able to loop through all the subclasses. We know sometimes we get zero, sometimes we get two, sometimes we get three. So I want to be able to loop through them. And so I'm gonna, I'm gonna go down here And I already know that data.subclasses returns a what? Append means to like put something in or on. An array. So what method do we have, what method do we have that enables us to loop through an array? Yeah, forEach.

Why does it do that? I don't like that. For each, I'm just gonna type it out. Right, we get this lovely for each. And this for each will enable us to loop through the array. And so the very first thing I wanna do is I just wanna grab the first element, right, I just wanna grab that first element. and I just want to append it to the DOM, right? I just wanna take the element and I wanna, well, not append it, let's just put it in the console first. Let's just make sure that this is working. Cool, so if this is working, what we should see is each element printed to the console. I'm just gonna comment these out for now, right? We should see each of them, each of the like objects appended to the DOM. So let's go ahead and see if, I mean, sorry, put into the console. Let's see if this does anything. Let's save it.

Let's go back. Let's do, I'm just gonna copy beacon of hope. Let's refresh and type in beacon of hope. And all right, great. We just logged what? What did we log here? We logged all three what? Yeah, we logged all three objects. And so I use the EL short for element, but remember this is just a parameter. This could be anything. We could have called this robot and then console log robot and it would have worked just all the same. It's just a parameter. Since I know that I am looping through an array of objects, what do you think a good parameter name could be? Robo, yeah, like object or I don't like using the, like maybe object might be a protected word, but we can just do like obj, right? Short for object, obj short for object.

And then we don't actually wanna console log the objects. We want it to grab the what off of each of these objects. We could use subclass, that could be a good thing too. The name, so I'm gonna do object.name. Cool, let's save this, let's make sure this works, and then I'll walk through why it works. Refresh, beacon of hope, boom, we got our three subclasses that get printed to the console. And so this loop is just a generic for loop. What it is doing is it's running once for each object in the array. each time it runs, it's grabbing that object and pulling the name property off of it. So data.subclasses, when we did the beacon of, what was it? Beacon of hope. When we did the beacon of hope, that subclasses had an array that had three objects in it. For each ran the first time, grabbed that first object and then pulled the name property off of it. For each ran the second time, Grabbing the second object and grabbing the name off of it and then for each run the last and third and final time Grabbing that third object and grabbing the name off of it Right. So all this for each is doing is enabling us to loop through that array And grab each object that's in that array.

We can see that that array Had three objects in it and all we're doing is looping through grabbing each of those objects Right, right, grabbing each of those objects and grabbing the name property out of them. We can even look, we can see that each of them has a name property that we're grabbing. Name, name, name, beautiful. Now, instead of printing it to the console, I wanna put it into the DOM. I wanna put it into the DOM. And so what I'm going to do here is on this for each, I'm going to do my curly braces. And why do I need curly braces? What is curly braces going to enable me to do? Just multiple lines. Exactly. Multiple lines gives me like a block that I can put multiple lines in. So I want to keep the console log here because I think that might be helpful for us to see what's going on. But now what I want to do, is I wanna create an LI to go in my UL. I wanna put the subclass name into that LI and then I wanna append that LI to the DOM. So I'm gonna do a little pseudo code here.

Create an LI, add text to LI and then append the li to the ul. Cool. So these are some things you might have to look up if you've never done before. That's why we're gonna do them together. So we're gonna go ahead and create an li. So I'm gonna do const li, and I'm gonna set it equal to, anybody know how we can create an li? Anybody come across this yet? Anybody in my stream that saw this? Yeah, it's createElement. I think this is aptly named document.createElement. And we can tell it what type of element we wanna create. And in this case, it's an li. Boom, we've created an li. And the cool thing is we've stored this li that we've created in the variable called li. I love it.

This is where it gets fun, folks, right? All I told is I said, hey, create an element. In this case, I'm creating an LI and I'm storing it in the variable LI. So now wherever I use LI, that's the LI I just created. So now I can add text to this LI. Anybody know how to add text to the LI? Okay. Intertext is something that we've seen, but there's another way too. Let me show you, let me show you. So, li.textContent. So the content of the li. What do we set the content of the li to? What do we set the content of the LI to? What does it need to be? What content should go in our LI?

Oh shit, I figured out what it is. I remember what it was. Name is now a TLD. So when you do .name, it thinks that it's a URL and you are going to get auto-modded. So whenever it sees .name, it thinks that it's a URL that you're typing in. So you can't type in .name without getting auto-modded. But yes, we would say object.name. TLD is like the, you know, like .com, .org, .co, .io. Well, now .name is one of those. And so it'll think that you are trying to put URLs into chat. Yeah, top level domain, exactly. Cool. So we're gonna grab that object name that we've been grabbing, the ones that we've been console logging. we're gonna put that content inside the LI. And then the last thing I need to do is append that LI to the UL.

And so all I'm gonna do is I'm gonna grab my UL, document.querySelector, UL, and anybody know how to append my LI to that UL? Yeah, appendChild. Somebody's like, how do folks know this? Well, they know it because they were hanging out with Mayan Wolf, part of the 100 dev stream team, and they went through something similar. All right, append child, and we're just going to append the Now, in this case, what is li here? What is li here? What is it? Yeah, it's a variable. And it's the variable that's holding the li that we created, the li that we put some text into, and now we should see that li be appended to the dom. All right, so here is my hand. Here is my hand and I am appending my Switch Pro Controller to it because I'm ready for Honda Civic. Let me show that again in real time. Here is my hand and I am appending my Switch Pro Controller for it. I'm taking y'all are taking this this week to to work to catch up Taking this week to grind I'm gonna come out a lean mean smash fighting machine. I'm ready for you All right.

Here's my hand I'm a pending Switch pro controller to it beautiful He's not even in chat good I don't need I don't need him getting any more channel points All right, I suck at smash. I'm gonna get rolled, but it's gonna be fun. All right, so we now have the ability to loop through all the subclasses. We're creating an li each loop. We're putting the content in the li and then we're appending that li to the ul. So if this works, what about Mario Kart? Oh, you don't want the smoke. You don't want the smoke. I could play blindfolded and still beat you. You don't want the smoke. CSGO, you don't want the smoke. I think it has to be a Switch game though, because that's like what I can probably get set up for stream, you know? All right, let's see if this worked. We're having too much fun. Let's see if this worked.

All right, beacon of hope. Boom. Woo, first try, let's look at this. Got the three subclasses showing up. Let's do asset arrow. Woo, two showed up. Oh, but we didn't do something. What should we, we have a new error that we're running into that would be like clearing it, right? We'd have to like clear all the LIs, right? I'll save that for your homework. I'll let you figure out how to remove stuff from the DOM if you want it to clear it out on each one. We could do something really, really simple. We could like refresh, but I'm gonna save that for your homework. Yeah, cool. But it's working.

Let's say beacon of hope. Boom. We're getting the things put in there. Let's refresh the page. Let's do asset arrow. So, boom, subclasses are going in there. Love it. Let's take a look at the code. Let's walk through how we did it. All right, let's take a look. Ooh, if you wanna see how to do it, you can go and watch mine's VOD where they walk through how to do it. There we go. That's how we get the engagement. Mine walked through how to remove the child. There you go.

All right, let's take a look. We have our click event, or when we click on the button, right? Where we click on the button. When we click on the button, it runs this get fetch. The very first thing get fetch does is we look at our input, we grab the value out of the input, right? We grab the value out of the input. Guys are welcome. Grab the value of the input. We store that value inside, sorry, store that value inside the choice variable. We plug that choice variable into our template string here. And then we use this whole string to make a fetch. We send that request to the dnd5e API and it sends us back this massive JSON object, right? This massive JSON object. And what we do first is we console log that massive amount of data we get back. And we saw that there was a subclass property.

That's what we wanted. That's where the goods were. So the first thing we did was just console log the data.subclasses so we could see it. And when we saw data.subclasses, we saw that it was an array and that array had multiple objects in it. So we said, hey, we can't just hard code this because what if there's zero? What if there's two? What if there's three different objects in that array? So what we decided to do was loop through each object in that array. So each time for each runs, it's grabbing one of those objects. And once we have the object, which we can do whatever we want with it. We can pull the name property off of it. We can do whatever the heck we want. So we got the object, and what we decided to do was create an LI. We put the name of the subclass in the LI, and then we appended that LI to our UL. Oh, we're having fun now, folks.

Look at this. This is wild. This is wild. This is wild. Append child is not a function. You did a lowercase C instead of a capital C, capital C. Okay. Cool. Or a lot of times folks will type in chat, what if we did like this very small tweak? Some of them I'm happy to do, but a lot of times I think you should just try it, right? Like if you wanted to see would something work with intertext, try it. Would intertext work here, right? Try it, take this code, break it, play with it. Try out these little things. That's what you learn so much from having those little epiphanies as you try and play and break and open and do things in your own way.

So the biggest thing I hope for is that when you have this, because I always share the solutions after class, when you have the solution, if there was like, why did Leon do it this way and not that way, that you go and try it. You break it, you see what happens, right? You gotta do that, that's how you're gonna make things learn, it's how you're not gonna forget stuff. It's part of that, it's the act of recalling the moment, but that exploration is what makes a phenomenal engineer. When they go, hmm, they don't just walk away, they figure it out, they go, all right, let me figure out how I can do this, that, and that. So definitely I try to cover some of them in class, but I would love if you all took that to heart and said, you know what, but I'm gonna try it as soon as we're done. Cool. I love it. For the first time, they said break it. I've been getting a whole lot more first tries. I love to hear it. Cool. We are making good time. Some folks asked to run it back one more time. So let's run it back one more time and we will move on to our next application.

All right, so we went to the D and D API, right? We went to the D and D API. They have so much stuff here. Look at all this documentation. You could be reading all this. look at all these different endpoints that they have, like all these different pieces of the API that you could use. But before going too deep into the sauce, we said, all right, here's the example that they give. So that's what I'm going to use. We first tried this example in Postman just to see if we got some data coming back. I like to use Postman in the beginning just so I don't have to set up my files. I don't have to worry about like, is my JavaScript, like I don't have to worry about any of that weird stuff. I just started in Postman, it was working. So I was like, all right, this is an API I could probably use. When you're first starting out, especially if you were trying to do the homework, right? If you were trying to do the homework, the hard part of like finding three APIs was just finding three APIs that worked and that you were excited about.

A lot of times, like if there's stuff that wasn't on that list that you didn't like, you could just Google like the thing you're interested in and API, and you'd be surprised how many APIs that are out there. Cool. All right. So I know that my time is not gonna be wasted. I know that this is working, right? I know that this is working. So what I wanna do is I want to go ahead and plug this into my API template. Everything that you saw here when we first started was part of the template. We had the normal input that we have, the normal button that we have, and I just added two things, like a place to put the, I added a UL, which is a place where I'm gonna put all of my subclasses in, cool. So first thing we have here is our event listener, our Smurf that is waiting for the click, right? It's waiting for the click on this button. Why don't we just get the value out of the input on page load, right? The first thing we do is once it hears that click, We get the value out of the input. Why did we wait for the click? Yeah, if we just did it, if we moved choice, right?

If we like moved this line here, like just out of the function, it would happen on page load and the user would never be able to type in their thing they were looking for fast enough. the page would always refresh before they could type in their stuff. And so we make sure it's inside the fetch. As soon as the user clicks the button, hopefully they've entered in something before they click the button. We'll grab the value out of the input and we're gonna plug it into the URL. Now, where the heck did I get the URL and where did the heck did I know to plug in the choice over here? Where did I get the URL and how did I know to plug choice there? Yeah, I read the docs. I read the documentation for this API. You have to read the docs. So many times, docs are gonna tell you exactly what you need to do, how to do it. And if you read the docs well, or get used to reading documentation, you can start to suss out like how it's gonna work, how it's gonna do what it's gonna do. So I read the docs. I got the URL from the docs. I plugged in the choice.

And the very first thing I did was just like console log. I always console log first. Don't go deep into building. Console log, make sure stuff is working. make sure that you understand what you're getting back. So I got back that big data, right? I got all that data back and I peered through and I saw, ah, there was a subclass property that I could use. And that subclass property, when I console logged, it showed me that there was an array and that array had some objects in it. So I knew that I was gonna have to loop through that array and grab each object. And once I grabbed that object, I was gonna grab the name out of it and put that in an LI and then put those LIs into the DOM. Now there's only one place we put LIs and that's a UL. And so, that's what I did down here. I know that data subclasses was an array. I used foreach to loop through that array. If there were two things in the array, this foreach was gonna run twice.

If there were three things in this array, it was gonna run three times. And if there was nothing in the array, it wouldn't run at all. And so, what I did is I said, all right, this is the parameter that's gonna hold the object. I console logged the name property on that object, which was all the subclass names. And then I did three important steps. I created an LI and I stored it in a variable called LI. Could have called it robot, could have called it unicorn, but since it's an LI, I called it an LI. Then I put the name in the LI. So now I just have like an LI that has some text inside of it. And then the last thing I did was take that LI and append it to the UL. All that did was put, if this was my UL, here comes my LI, boop. I appended the LI to my UL. Yep, Kimberly, the LI goes into the UL in the HTML. Cool. Yeah, HTML's not too wild here.

Just the UL that I added to the template. Alrighty, let's keep pushing, folks. This was good. Like, if you understand, like, come on. if you understand what the heck's going on here, like even if you can't do it from scratch, right? You're gonna have to rewatch this class. You're gonna have to put this stuff into your Anki deck. You're gonna have to play with it for a little while. But if you understand, like think about all this, like all this shit you have to know to understand if you're even close to understanding this, right? Like if you understand that, oh, I clicked the button in the DOM and when I clicked that button, I got a value out of an input. I plugged that value into my string using a template literal. You can use the bling syntax to do that. I then used that URL to make a fetch. That fetch got me some data back from a third-party server out there on the internet. That server sent me a bunch of data and I parsed through that data using dot notation.

I saw that there were some subclasses in there. I then looped through those subclasses because it was actually an array of objects. And I was able to loop through that array of objects. I pulled out each object. I got the name property of off of each of those objects. I created an LI. I plugged the name property into that LI. And then I appended that LI to the UL that was existing in the DOM. So when the user enters something, they actually see it. Like what? What? What? Come on now. If you're even like 50 % here, like even if you're just like, I get 50% of these words, you are in the 1% of all 1% of people on this world that has any idea what's doing this. Because you know how much work you got to put in to understand just about 50% of this?

You know how much work you gotta put in? Some blood, some sweat, some tears, some long nights. You gotta put in to understand this shit. This is why not everyone is a developer, right? It's hard fucking work. But you're showing up, you're putting in that work, and even if you understand 50% of this, you're so far beyond all the folks that come to me and say, Leon, I wanna learn how to code, what do I do? do this, and then I never hear from them again. Hundreds, thousands of people that send me that message, here's what you gotta do. They don't wanna put in the work, you're doing it. So I don't care if you're deep in the trough of sorrow, I don't care if you understand 25% of this, you have to understand how far ahead, leagues, miles ahead of folks that want this, but don't put in the work to get there. You've been showing up time and time again to put in the work, and if you keep doing it, if you keep showing up, you keep putting in the work, you keep going through the trough of sorrow, you make it to the other end. And so we got this break coming up. Use the break to your advantage, to do whatever you need to do, but whatever the fuck you do, don't stop. It's a marathon, not a sprint. I don't care if it takes an extra month, if it takes a little bit less, it doesn't matter.

You keep showing up, you keep putting in the work, you're going to get there and you're already miles, miles, miles ahead of all these other folks that say they want it, but they really don't. You owe you. Cool. Alrighty. So the really cool thing about, the really cool thing about this API is there's so much stuff here. There's so much stuff here. I really like this API because you could really build a bunch of stuff for a lot of different folks. If you want to help dungeon masters be able to look up spells quicker, or you could build that app. If you wanna be able to like show all the subclasses for every class in the fifth edition, you could do that, right? And so I like this one cause there's a lot of meat here and this is an API that could actually spit out some pretty good portfolio projects. And if nobody told you, a lot of software engineers are big nerds. And so you have a D&D app on your portfolio that gives you something to talk through with that nerd during your interview. And so yeah, if you don't play Dungeons and Dragons, it's cool throwing this on your portfolio cause it's gonna open up some conversation. It's gonna enable you to talk to that person. And yeah, so I like some of these, I like to call them nerd bait in your portfolio.

It just makes it a little bit easier to have conversations with folks. And you'd be surprised how much of a difference in the maker that can be when it comes time to getting a job. Talk about smelling good, exactly, Ford. All right. Do any of the nerds surf? You'd be surprised. Yeah, you'd be surprised, especially like in Cali. All right, let's keep pushing, folks. All right, we talked about last class about local storage. I love local storage. Local storage is what's gonna enable your apps to be real. for users to be able to come back over time, to actually be able to use your app. Like you could put an app just on Netlify, host it for free, but if you're using local storage, folks can actually use them. They can come back, stuff can persist. They can refresh the page and not everything disappears.

And so if you're talking about adding some stuff to the apps that you've already built, it's local storage. It's a game changer. It makes your apps real. You invest in building something, you add it, make it look good, and you add local storage, you might actually have users that come back over time to use your app, right? And so we're not talking like huge amounts of data. Yeah, it has a limit. We're not talking huge amounts of data, but look at Wordle. Wordle just stores the statistics, and Wordle became an internet sensation, right? People all around the world, every single day, playing the same game and it uses local storage. If Wordle can use local storage, you can use local storage. And then sold for millions of dollars, exactly. Every single person by the end of this cohort will be able to build Wordle very quickly. In fact, if you're with mine, well, they've already built it, right? And so by the end, you can definitely build Wordle. And if they if you if like you have the power to build an app that can be sold for millions of dollars That's pretty wild All right, let's talk about local storage real quick and then we'll take our break and then when we come back from our break We're going to build a cool app that uses local storage We're gonna see some some bits or bobs that we could start adding to our projects Everything that I've been showing over the last few classes is just so you can start to build real stuff If you can use APIs, you can build real stuff of real data.

If you can use local storage, you can build real stuff that persists. And so I really hope that you take all this stuff, right? And use it to build bigger apps. You don't have to wait for me to give you an assignment. If there's something cool that you want to build, try it. If you get stuck, come to one of our working together nights on Tuesday and Thursday next week, go to Discord and say like, I'm stuck on this, but like start building, start thinking of little things that you can build because that's where so much of your learning is gonna come from. All right, local storage. Local storage allows you to store data across browser sessions, right? And so the idea is that your user can close their browser, they can close their tab, come back and still have access to a small amount of data. There's a way that we can put stuff into local storage by saying set item. So we say local storage set item, We give it a name and we give it a sorry a key and a value and we put that key value into Right, right that key value into local storage We can also get values out of local storage So we can say hey get that item of best friend and it would give you the item. You don't need the Bob here That's a mistake. And then you could also remove an item from local storage So you have the ability to put stuff in, get stuff out, remove stuff, and you can even clear all the local storage if you would like. So what I want to build is a book tracker app. I want our users to be able to enter in a book that they have read and then it stores it in local storage.

So we're gonna use an API that looks up the ISBNs of books. It gives us the title of that book. And then we're gonna start storing those titles into local storage so that our users can keep coming back and have like their own version of say like, of like Goodreads or something like that. Cool, all right. We're close to the top of the hour. So let's go ahead and take our break. When you're around here, we put five minutes on the timer at the top of every hour to be healthy, to move around. If you're able to to let your eyes focus on something, it's not the screen to kiss some babies, walk some dogs. I'm going to put five minutes on the timer. I'll see you all in five minutes. I'm going to run some ads. You actually take a break. And I'll see you all in five. You You You You You All right, folks, come on back. Come on back.

We've got a lot of D&D players, huh? Yeah, this is a vibe. I'm feeling this. And it gave me the perfect fade, a turn up. All right, folks, let's go through this together. Let's talk about this app. Let's see, we're going to build a book tracker. Michael, the learner. Hey, to you as well. Alrighty. So I want to build a book tracker where the user can enter in an ISBN, like the numbers for each book, like the unique number for each book, I want to be able to then grab the title and then store that title in local storage so that whenever the user comes back, they can see all of the books that they have read over time. So that's the goal. And to do this, we're going to have to look at a new API. We're going to have to learn a little bit about kind of local storage and how that works, and we're going to kind of take it from there. Just to get started, I'm going to use this API.

You can click the API here in the link on the slides. Once again, you can click the link on the slides. Once again, you can click the link on the slides, and I'll also put it in chat. So here's the API. There you go. That's the API we're using today. And this API is a little funky in my mind. It works. I like it. I've used it, but there's a lot of different stuff here. And I think it's a good, it's a good example of how most APIs kind of shake out. Right? If we look, there's like you jump in, it's like the open library has three types of book APIs. The works API, the additions API, the ISBN API and the books API generic. Great.

All right. So works is a logical collection of similar additions. Oh boy. And so this is where it just kind of goes off the rails, right? Like, like you could scam VRA. Thank you for the five. Get the subs. I appreciate you. Thank you for being here. Thank you for to get the subs. That's a wild. Even to get the subs, everyone, a lot of folks using the prime today. Thank you for the prime subs. Appreciate it. Thank you for regular subs.

All right. If we look at this API, we have a lot of like, you got to kind of read it, right? You got to like scroll through and see what works, what doesn't work. And so a lot of times I'll be honest, when I find a new API, I kind of just like look until they give me an example. And then I just kind of grab that example and try it out. Right? And so I'm just, I see here that there's like a, there's a bunch of different like URLs and stuff like that. And you can kind of scroll for days to find it. And there's all this different stuff in here, but I'm just gonna grab some stuff and see if it works. And so I'm just gonna grab this first one. And I don't know, let's see what's here. Let's grab this, let's see if it works. I'm gonna go ahead and create a new kind of tab here. I'm gonna plug it in and see what I get. All right, so it actually works.

The link works. And we're getting some certain information back. Some folks are saying, what does curl mean? So curl is a command line utility. Remember how we talked about the terminal and how there are some programs that could run in the terminal? Well, curl is like that. It's like a fetch, but it works inside of the terminal, like through the command line. Yeah, it's like a way of making requests, exactly. Mm-hmm. All right, so that worked. I just grabbed the URL to see if it would work inside of Postman, and it works. I'm getting some stuff back. I'm getting the ISBN back. I'm getting some, I don't know what this LCCN thing is. So actually, I'm kind of curious.

If I just remove this LCCN, do I get anything different? Oh yeah, I just get it without that other data. So a lot of times I will take the URL and I'll just play with it a little bit to see what kind of data I get back, to see if it's working. But right now I don't see the title. I want the title. Like I wanna be able to pass in an ISBN in and get the title back. Robodame, thank you for the bits. So let's go ahead and go back to this documentation. And I've done this already. Like I already know what I'm looking for, but I want to show you like a realistic take of what I would do when I come to a new API. I don't really spend all the time reading, honestly. I just start taking URLs and like start like looking through it. And so I look for where they give examples. And if they give me an example, I can see like there's like a title in here. So maybe whatever URL they're using here would give me the title as well.

I'm just gonna grab this one. And I'm gonna go back. And I'm gonna plug it in. And I'm just gonna see what I get back. All right. I am getting some stuff back. I am getting number of pages. I'm getting covers. I do have the title here. I am getting the title from this one. Uh, so there is, there is a title in here somewhere. Um, and it looks like we have a lot of stuff on here. I don't know what this JSMCD stuff. I'm going to try removing that. I'm definitely going to keep the format JSON query parameter because I want the, um, I definitely want it to be in JSON.

Cool. If I get rid of that format thing, I don't get all the details. So the thing I just deleted seems to be kind of important. So I'm going to keep that there because when I have that there, I get all the details that I need. Cool. What happens if I remove the format.json? Let's see, I don't know. This is part of that play I talk about, right? Like I just play with it. I see what I get, what it does and what it doesn't do. And, oh, interesting. Do you see what it did here? I know it's a little small to see, but you can see that it sent like an object. It's like, it's like, it's like a variables now there. It's not, it's no longer like a, like a nice clean object.

It's like, it's like a variable that it gave me. Huh. That's interesting. Let's add it back. And when we add it back, we can see we just get like the raw object, which is way easier to work with probably. So yeah, so there's a lot of little things here. I think this could work. I think we would be able to plug in our ISBN and get some stuff happening. There are a lot of other like endpoints on here, like the URLs that are on here. I think some of them are easier. I actually think I wind up using a different one. And so I'm gonna leave it up to you to pick the endpoint that you use. But what I wanna do is I want you to make a copy of our API template. So we have the API template that's like, I believe it's set up as the Pokemon API. Yes, it is set up as the Pokemon API.

I want you to make a copy of your API template and I want you to get back a book title. I want you to be able to enter in an ISBN. So for folks that don't know an ISBN, on the back of books, there's often these numbers, the ISBN numbers. either use the ISBN they give you in the docs, like just like the, the generic one that they have, like right here, or grab a book that's near you and, and plug it in. So what I want you to do, I'm going to put some time on the, on the clock here. Use your starter templates, use the API template, get the title of the book coming back. Like I want you to console log the title of the book. they should be able to enter in the ISBN and get the title of the book back. So I'm gonna put some time on the clock for you to do that. And then we're gonna go through it together. And then once we've got that working, we're gonna dig deeper and start storing this stuff in local storage. All right. This is one of your three API apps, that's pretty dope. All right, let's go ahead. I'm gonna kind of just leave open.

I'm just gonna open up my API template here. I'm just gonna use this one the JavaScript when I close my D&D and I'm just gonna bring oh, it's the NASA one now, right? This is NASA So there's no longer the pack of Pokemon when it's NASA. This is even better. It's still the same stuff Go ahead and get the title coming back from this API It's up to you what route you use read it play with it You got which one you're gonna use and then get it working. Let's put five minutes on the clock here Five minutes, and then we're gonna go over it together. Go for it. How do I duplicate the folder? It depends on your operating system. You could just do, on mine, on macOS, it's just right-click duplicate. You could just copy and paste it, you know. Book 503 Axios better. We're not there yet though. Yeah, we'll get there. We're going to go to async await and then we'll get to Axios.

When I say endpoint ping pong, I just meant URL, like the URL. You get to choose what URL. If we look at the API, there's so many of these different URLs that you could use. Some of them are gonna give you the title data. Some of them are gonna not. So I'm gonna let you pick it. You got, and part of this is like reading the documentation and figuring out what URL you want. You wanna get back a title for when they enter in an ISBN, like the number of the book. Oh No, sorry to hear that multi Always Rams always Rams Better nail. Yeah, we're just trying to enter in an isbn number and get a title back. We're gonna go through it all together, too Minus that's dope. Thank you for sharing Um Well, this is always I always am playing. Um Stream beats by Harris Heller. This one is unwind and recharge Is there way to have multiple resolution on a single video, what do you what do you mean Kachi? multi-resolution in a single video.

I mean, like a lot of the big players like YouTube, you can change your resolution based on, it really comes down to having the highest resolution possible, and then the player being able to choose. Did me a little, hey, congrats. Got a lot of dunzos coming in, that's good to see. Don't worry, we're gonna go over it in about a minute and 30 seconds. Me too nugget me too Seven minutes. Yeah, if you can store it in a variable that can save you a lot of lookup time it's not really super speedy, but More so that your code will be drier Trying to get the, trying to get the title. Thank you for the gift of sub. I appreciate that. We just want to see the title. Yeah, we just want to see if we can get the title in the console. That's about it Do you have a suggestion for basic paid domain hosting me like just buying your domain buying your domain, I recommend Namecheap, where I want my domain, but you mean like hosting this? I just use Netlify for free. All right, folks, come back. Let's take a look at this together. Come on back.

Come on back. I'm feeling maybe I'm feeling maybe our first real end early. I'm feeling it. I think we I think we might we might do it. You know why when I first planned this lesson, I planned it because we had just made partner. We had just made partner on, uh, on Twitch when I last planned this session. So we've got a little, a little bit of room to play with here. It might be our first real end early headed into our break. And then into a holiday weekend. Woo. We'll see one hour later. Spring break. Alright, so we have all the NASA stuff in here. What I want to do is I want to find one of these URLs that like actually works. What URLs did you all wind up using that was easy to get the title?

I see all some folks like saying to use certain links or something like that. Which one did you use? Don't you don't maybe just don't put like the the full link because it'll get blocked out. the ISBN one. All right, so it looks like there was the works, the additions, the ISBN, and the books. It looks like folks are saying the ISBN one. So let's take a look. This is works, this is additions, this is ISBN. And all right, here's one of the links. Oh, and I guess this is just where the ISBN goes. It's just like the end of it. So let's try this and see if it works. I'm gonna plug it in and they just had the raw link, right? That was what it was. Yeah, raw link.

Let's see. All right, we got something back, but look, it sent us back. What is it? It sent us back like HTML, right? It sent us back like HTML data. Is this like formatted already? Oh, yeah, it's it's all in here, but it's html interesting um, we before we used to do the um I swear when I pasted in and did it we had the and what was it? Uh format is like end format equals Json let's see if this does anything Nope still the html Let's go ahead and take a look at the docs and see if they give us anything to get the JSON data. All right, here we go. You may add .json to the end of your URL to request response in JSON instead of HTML. So this is one of those weird APIs where you can get HTML if you want it. If you want the JSON, we got to add that .json to the end. JSON, hello. All right, let's go ahead and just, the add format doesn't work for this endpoint, .json. Woo, look at this go, look at this go.

There's so much stuff in here. And so this is another reason why I really like Postman, right, like I'm able to play, I'm able to mess around and I don't have to worry about it being in my actual JavaScript file, like I can see everything that's in here. All right, let's see if we get what we want. Boom, title, Fantastic Mr. Fox, beautiful. I also have a book here that I want to test real quick to see if it works. I want to, we want this to work for a bunch of books, right? So I have my, my Spanish workbook here. So I'm going to plug in the ISBN of my Spanish workbook. 9781260463132. All right, let's see if this works. Hell yeah, there we go. You can see my Spanish book showing up. It has the title there if I need it. Cool, so it's working.

So it's working not only with the, with the value they gave me as the default, like the test value, but it's working with an actual book I have near me, so boom. Are you Anki-ing that book? Hell yeah, I'm Anki-ing that book. Anki was made to learn languages. Like that was like the original use for it. So if you're trying to learn a language, hell yeah, my Anki decks are gonna be plump. All right, now we know that this works. We know it works not only with the test ISBN, like the number of the book, but also with a book that I have next to me. So I feel pretty comfortable using this. I know I'm getting JSON back. Let's get this working. Let's just get this working and make sure that we can use it. So here we have our template, which is set up for NASA right now. I'm just gonna open this in the browser. And I'm gonna open up the inspector.

Before I start making changes, one thing I always like to do is just see if it works. Right? Like sometimes your templates don't, oh, that's so cool. Oh my gosh. It's got data back from NASA. That blows my mind. Like if I could go back and tell like six year old Leon, like one day Leon, You're gonna know how to write code that gets beautiful photos back from NASA. My mind would be blown. Look at that. That's beautiful so I Always just like to test my my template code to make sure it actually like works, right? Make sure it actually works. So now I know it's working The thing that we're probably have to change though is that this is now a date input so I want to change this back to a text input and and I'm probably just gonna leave everything as it is. And the only other thing I have to change is the endpoint, right? Like the URL. So let's go ahead and plug in the URL that we just tested in Postman, right?

We just tested this in Postman. We know that this URL works. So I'm not even gonna try and use a, like use my variable, like the choice variable, or like my template literal at all. I'm just gonna save it and see if it actually like does anything. So refresh, click the button, boom. I still have the media not supported, contact NASA immediately. I love it. Please don't contact NASA. All right, so it worked and we got the book back that I had entered, that looks good to me. What we can do now, I'm just going to get rid of all this stuff that's in here. That way we don't have to worry about like the NASA alerts or anything like that. I still have my data. Let's once again, let's just run this to make sure that it works. You know, I chopped some stuff out, still working. Now I wanna get to this part here.

I want this to be what the user enters. So I know I'm already inside of a template literal. How do I know that I'm inside of a template literal? How do I know I'm inside of a template literal the ticks exactly boom-boom choice We don't thought we could get this done in five minutes I do I do think some of you could get this done in five minutes, but it's never completed whenever we do assignments during class. It's never completed, it's get as far as you can. That's the point, as far as you can. All right. We got our choice plugged in. We should be able now to grab our choice. I'm just gonna go to Postman real quick and grab that number. Yoink. All right. Let's go to our site. I'm gonna refresh. Let me post in my number, don't need the JSON though.

And boom, all right, we're still getting the Spanish book. And I'm able to type in my own number and get it. Let's grab their default number and make sure that that works, the fantastic Mr. Fox. Boom, working, fantastic Mr. Fox. Let me just refresh so it's a little easier to see for everyone. Boom, I'm gonna paste in the default that they gave me. All right, I got it. In there is the title and it's fantastic Mr. Fox. So it's working. So we have the ability to have the user click a button. When they click the button, it gets the value out of the input. We're plugging that value into our open library API URL.

We're using the fetch to get that URL. Cool. All right. Okay, so what I want to do is I want to be able to start, I want to be able to keep a book tracker. So I want to be able to, each time the user enters in a book, to store that data in local storage. but what I want to do first is make sure, let me just make sure I can get the title. Let me make sure I can get the title first. Like that's, that's what we want to work up to. Let's get the title. Mm-hmm. Let's refresh. Let me grab this, this number again. And close these. All right, let me type in the fantastic Mr. Fox.

Great, I'm getting the title. Let's put this title in the DOM. All right, let's see what we got in our HTML. Let's move the H3 up here. Oh, we already had name. We can just put it in name, I guess. Let's put it in name. So we'll put it in the H2. So let's go ahead and target the document. We could do document.querySelector. We could target the h2, and we could put innerText equals, and we could do data.title. All right, let's make sure that we are taking this stuff and putting it into the DOM correctly. Let's, I'm just gonna grab the number before we refresh. All right, let's refresh. Let's plug in the number.

All right, cool. We got fantastic Mr. Fox showing up in the DOM. We still have it in our console log. It's looking good. Looking good. So right now, I am grabbing the title and I am putting it into the HTML. The problem, however, what would be the problem if I wanted to keep putting in multiple, multiple, multiple books? What if I wanted to put in multiple books? What would be the problem I would run into? Right now, it just kind of overwrites itself exactly. So let's not have it overwrite. Let's just kind of concatenate. Let's concatenate here. So how could I make this concatenate?

Yeah, plus equals, yeah, plus equals. So now it'll just concatenate each time. So let's save this. Let's go back and refresh. Here is Fantastic Mr. Fox. I'm gonna click it the first time, boom. If I was to then also do it again, you can see that we can keep kind of concatenating make a fantastic Mr. Fox. I could even grab the number from my book that I have next to me and plug that in. And there we go. Now it's concatenating that book as well. Right? Cool. So now we're able to put all of these books into the DOM.

We can now have like a nice list of books that we're putting into the DOM. Maybe we even make LIs and put LIs into the DOM, right? So we could do that now, but we have like the list of books. Now the problem with this list of books is what? What's the problem with this list of books? It looks ugly. No, the problem is, boop, and it all goes away, right? It all goes away. Yeah, we could work on formatting, right? We could, you know, like, we could like, we could put a little, a little, a little like space after it or something like that. We could put like, like commas or something like that. We could do a bunch of stuff, right? But the big problem right now is as soon as I put all this effort to enter in all my books, and then I hit refresh and it just goes away. No way. So what can we use?

What can we use to help solve this problem? Yeah, local storage. All right, let's try local storage. Let's look at our local storage to see if there's anything in it right now. Maybe I forgot to clear some old stuff. Let's see. Application, local storage. So we can see bot scores in their bot score from the other days in there, that's pretty neat. So there's still something in local storage. If I wanted to clear it, what could I do? What could I do to clear local storage? localstorage.clear, boom. All right, I cleared it. If I go back to application and we can see there's no key value pairs in local storage now. Cool.

So if I wanted to put my book title into local storage, what could I do? Let's say I wanna put title into local storage. What could I do? Yeah, set items, let's try that. Let's do local storage dot set item. We're gonna call it books, and we're gonna put into it data dot title. Data dot title, cool. Now we set the item to be data dot title. So, let's go back, let's refresh, and I grab their number here. And let's put it in, let's click the button, and cool. So now, not only do we have the text in the DOM, but we have the text in local storage. So if I refresh, if I refresh, right, we can see it's gone from the DOM, but it's not gone from local storage. That's pretty cool. So what should I do? Instead of putting data.title into the DOM, what should I put into the DOM?

Yeah, we could do get item, yeah. So instead of just using the title raw, we could do like the get item. So let's go and do local storage dot get item, and we're gonna get the books item. So I just wanted to make sure we could see it all in one line for a second. All right, we're gonna put, just like we had inner text before to put it in the H2, instead of it just being data.title, we're just gonna get the item books and use that to put it into the DOM. Cool. So let's go ahead and save this. Let's go ahead and refresh. And if it works, we'll go through and see why it works. All right, so let's go ahead and type in, let's just grab the Fantastic Mr. Fox number. Let's plug it in. Let's get Pokemon. Great. Fantastic Mr.

Fox is in local storage. We can see it in the DOM. And if I refresh, We get any errors, we get any errors? What happened? What happened? What happened? Look, I refreshed. I thought the whole point of putting it into local storage, but the whole point was that it would be there. I thought it would be there for me. All right, let's take a look. When do we actually put it into the DOM? Does it happen on page load? Is it up here on page load? No, it only happens when we click the button, right? The way we have it right now, It only gets put when we click the button.

So let's go back and take a look. I'm not even gonna put a number in here. Let's just click the button. All right, we updated it to be undefined. Let's go ahead and plug in the number. Boom, fantastic, Mr. Fox is getting plugged in there. Cool, let's refresh, let's try it again. Great, so now we got it where it puts it in once we click the button. Maybe we do it on page load as well. Let's just do it on page load And maybe we don't do plus equals anymore Maybe we just reset it. We reset it to whatever is in local storage. So whatever the heck is in local storage That's what we're going to set it to equal to and i'm going to do it on freaking page load as well I was going to copy this yoink Put it up here Save it and let's run the page again All right, can I see you, Mr. Fox? So now on page load, no matter how many times I refresh, see me refreshing, they see me refreshing, they hate in.

Right? It stays there, no matter what. Cool. We don't get got. I can also, right now, the way it's set up, I can just completely override books. And so if I just completely override what's in books, now it's complete Spanish step-by-step premium second edition. And no matter how many times I refresh, it keeps showing up, right? Like the user can come back, can come back, they could close it, they could come back, right? And it just stays there because it's not pulling from anything other than local storage. Cool. And that's not what we came here for, folks. It's a book tracker, right? It's a book tracker. I wanna track all my books, not one book. I wanna track all the books.

So let's go ahead and take a look. Let's make sure we understand what's happening right now. And then we're gonna take it a step further. All right, so we have on page load, we are grabbing whatever is in local storage under the key of books, right? Whatever is in books, we're gonna go ahead and plug it into the DOM. That's why when we refresh, right? That's why when we refresh, the book shows up in the DOM right away. Now, how the heck did we get something into, right? How did we get into the local storage? So, when we click our button, we run the getFetched method. We grab the number that the user has plugged in from the input. We plug that into our open library URL as a template string. And so this will be the URL that we will use to make our fetch. We go ahead and we make our fetch to the open library server. We get back our data.

And the very first thing we did was console log that data. All right, so we console log the data. and then we realized that once we console logged the data, we had the title property. And so what I did is I took that title and I set a key of books on local storage that had that title. So that's how we got Books Fantastic Mr. Fox. And now that there was a book in local storage, what I decided to do was make sure that I use that local storage to update the DOM. So whatever was in the books key, I plugged that into the DOM here. So I am setting the value into local storage and I am updating the DOM using local storage. I'm no longer just taking the raw data back from the API. I'm using local storage as my source of truth. All right. So now the problem is I don't wanna just keep replacing books, I want to have a list of books. A list of books, so what could I do? Arrays get messy inside of local storage.

Let's just use strings for now, let's just use strings. What could I do? I could just concatenate. Yeah, I could just concatenate and update my storage with that concatenation. All right, so what I want to do is, instead of, instead of constantly resetting it like this, let me comment this out real quick. Let me create a variable. Let books equal, and what I'm going to do is I'm going to get anything that's already in local storage. So I'm going to get anything that's already in local storage under the key of books. So this would give me every single book that's already in storage. What would I want to add to those books? What would I want to add here? What would I want to add here? Yeah, the title of the book I just got back. So I can do a little concatenation here. Let's do plus, I'm just gonna put something in between just as a delimiter.

And then I'm gonna add data.title. So what this is going to do is when they click the button, I'm gonna get everything that's already in books. That's gonna give me the string, right? That's gonna give me the string. And then I am going to concatenate the new title. And so once I have that new title, So, what I will do is I will update my local storage. Like I'll set my local storage, but this time it'll just be books. So what the heck am I doing here? What am I doing here? Let's take a peek. So, if I grab all the books that are currently in local storage. Let's look. The only book that's in local storage right now, right, is Complete Spanish. So what I would be doing in this instance is grabbing the Complete Spanish, and then if I had looked up Fantastic Fox, I will be concatenating the colon and then the Fantastic Mr. Fox.

So now I have not only all the books that were already in local storage, I also have the new title as well. What up, True? And so we're gonna be able to concatenate them together. And then I take this whole new string. I take this whole new string and I put that into local storage. And then down here, all I do is I take that new value and I put it in the DOM. Let's see if this works. And there are a lot of things that are gonna help us down the line, stringify, parse, like if you know some more of these, like more advanced JSON tools, like there are better things we can be doing here, but I think this is kind of like stuff that we should at least be, yeah, at least be getting close to some stuff that we've seen before without pushing too far. All right, let's go back and take a look. All right, let's refresh. We got the complete Spanish step-by-step already in the DOM, so we're looking good. We see in our application, it's already complete Spanish is already in there. Let's grab the fantastic Mr. Fox. Let's grab that ISBN, let's plug it in.

Three, two, one. Oh, a problem. Let's go. First try. And let's try refreshing it. We refresh, it's still there. Nice. All right, it's looking good. Looking good. First try. First try. Thank you, Fox. So let's understand how this works. And then we're gonna solve one very important problem. We're gonna, there's a problem with this right now.

And it's not just me. I'm a problem, but there's also a problem with the code if we do something weird. So let's go ahead and take a look at it. Let's see if we can make sure that we understand how it works. All right. Let's see, HTML file is just our normal HTML file that we have for the API template. We got the button we're clicking on, the input where we're putting the ISBN numbers in, and then we're just putting everything into this H2 here. Yeah, cool. So if we look, we do something on page load. We actually take whatever is in local storage and we put it into the H2. So before anything happens on page load, we're saying, hey, whatever is stored in local storage underneath the key of books, put it in this H2. Right? Put it in this H2. All right. Now, we also have our event listener.

And so when we click that button, it runs the get fetch function, which is the normal function we've been using. We grab the value out of the input, which is the new ISBN number. We then plug that ISBN number into our URL using the template literal, right? And then we get our response back from the API. We can see that there is a title on the response that we got back. And so the tricky part here is we want to be able to update local storage, but we don't want to just completely wipe through everything that was already there. what we do is we take whatever was already in local storage and we add the new title to it. So we actually get whatever was in local storage and then we just add the new title to it and we store that in the books variable, right? So whatever was already in storage, we grab and then we add title to it. So if I already had in storage, magic school bus solar system, right? What I'm gonna do here is I am going to grab magic school bus solar system, and then I'm going to add magic school bus animals, and then that's what gets put into local storage. So the next time I asked for local storage, I get back both, right? And then the next time I entered in a new book, let's say I entered in Magic School Bus Human Body, right? I would get out of local storage, the human body, sorry, I would get in local storage, the solar system and animals that is already in there. and then I would add the human body, and then all three of these would get put, right, would get put into local storage.

And so I'm using the idea that I can get what's already in there, add something new, and then put that all back in. That's what I'm doing here, right? So I'm grabbing whatever books were already in there, adding and concatenating the new title, and then setting local storage to be the stuff that was previously in there plus the new one. Cool, and then the last thing I do is get that value out of storage and put it into the DOM. However, we have a problem. We have a problem. If you're showing duplicates, we got rid of that plus equals that was here, That was probably it right. We got a problem though, and it's not just me today What's what's the problem that we could run into? If we clear local storage we're gonna run into some issues, so let's go ahead and take a look Let's in the console just clear it local storage dot clear All right, we cleared local storage. And now if we were to refresh, there's nothing in local storage, right? So we don't get anything that shows up. That's at least good. And when we put in our ISBN, we have null in there at first. Right, we have like this null, right? We have this null that's in there.

Let's go ahead and try adding the other number as well. So it's still working. We can refresh, but that null is in there. Why the heck do we get that null? What do we think is happening there? Why is that null, right? Why is that null? We look on the very first time. Yeah, on the initial call, exactly. On the very first time that this runs, is there anything in local storage with the key of books? The very first time, if we cleared storage and the very first time this runs, would there be anything in local storage? Nah, there wouldn't be. So we actually already saw how to handle this last class. What can we use to handle this so that we don't have the null that bothers us? Yeah, we could have a conditional.

So let's do the conditional that we did last class. So we're gonna do if, right? And we're just gonna check, hey, does local storage.getitem books, right? If it's not, no, right, if it's not, no, right. If it's not, no, we're in a good spot. Right, we're in a good spot, so if it's not, no, if it's not, no, what do we mean? What does that mean? If it's not, no, what do we know? It has something, right, it has something. So could we just, if it has something, could we do this? Cool. So there's two things we have to do. We're gonna have this and we're gonna have an else, right? So one of them, one of them, we are going to do what we already have here. The other one, we are going to just set the local storage, right?

We're just gonna set the local storage. Let's just play here. Let's comment this out. Let's just play real quick. Let's go in here and let's just do this. Let's do local storage, set item. I'm going to set it to be books. And we're going to set it to data.title. Cool. Let's just save this. Let's see what happens. See what happens. Stay with me. All right. Local storage set item.

All right. Let's save it. Oops, sorry. Books. There we go. Books. Cool. Let's save it. Let's see what happens. Let's, let's, uh, we got to clear local storage first. All right. So I cleared my local storage. If I refresh, you see, there's nothing in local storage. Let's grab fantastic. Mr.

Fox let's plug in the title. Let's get our Pokemon and we saw fantastic Mr. Fox, but, um, let's check our application. We can see that it's in the DOM, right? So it worked. There was nothing in there, so we set it, right? We set it to be fantastic Mr. Fox, right? But, but, but we didn't put it into the DOM. So we need to go ahead and uncomment that part that puts it into the DOM. Either way, no matter if it's the if or the else, we wanna put it in the DOM, right? We want to put it in the DOM. So we're going to uncomment this part. We know that there's, we know that there now, we know that this first part works. So let's go ahead and grab our other part that we already had down here and plug it in.

Let's copy it. Let's just play and see if it works, right? Let's just play. And I'm going to uncomment it. All right, let's see what we're getting now. Let's save this. Let's save this. Let's go back. Let's refresh. We got a fantastic Mr. Fox in there already. Let's grab my Spanish book. Let's enter it. Woo, now we got the complete Spanish in there. We got the fantastic Mr.

Fox in there. If we refresh, everything's still there in the DOM. I'm refreshing, I'm refreshing. Let's clear local storage. Let's see if our original problem is still there. Local storage dot clear. Boom, we cleared it. If we refresh, nothing's in there. Let's put my Spanish book in. All right, it's working now. Even, even if we clear it, we don't have the, even if we clear it, we don't have the problem of that null anymore, right? Cool. We got rid of null. Let's go ahead and take a look and see what happens. When we get local storage get item books, right?

If there is nothing in there, what would we get? If there was nothing in the books key of local storage, what would we get? We would get null, right? We would get null, right? We would get null. And so what we want to say is, hey. We want to say, hey, let's get rid of the bang. Let's get rid of the bang and see what happens here. Let's get rid of the bang and see what happens. Let's go ahead and clear it. Let's try it again. Let me see it, play with it a little bit. Let's refresh, put it in, boom. We get the null again. All right, so we know we need that bang there, so let's think through it.

What are we saying here? We're saying if it's false, right, we're checking to see if it's falsy, right? If it's false, right, if it's false, we need to go ahead and put something into local storage, right, right, right, we need to go ahead and put something into local storage. If we have something that's null in there, we wanna go ahead and put it into local storage, right? Null by itself is a falsy value, right? It's a falsy value, right? And so we say not falsy, basically that's what we're saying. We're saying not falsy. We're making this true because our conditional only runs when it's true, right? So if there's no, we're going to go ahead and set it to be the first book, right? The first book. And then for every other iteration, this will now be false. The, after the very first time we put something into local storage, we don't need this if anymore and the else will run every single time. So this if is just handling the very first time when we have nothing inside of local storage Every other time we can just concatenate and add to local storage Cool Alrighty, so if we save all this up, we now have a beautiful book tracker where you can plug in all the ISBNs of your favorite books and and it will keep track of them. You can refresh and come back, and it will work as long as you don't clear out your local storage.

And so I know this is a simple idea. And yes, I know that we're doing ISBNs, which don't make any sense. But the idea here is that with these very simple tools, you can start building apps to have persistence. You can start plugging stuff into the DOM. You can start doing all these things that are real Apps and so come back and play specifically with these two apps that we've built tonight play with them Right Fox. Hey, thank you for the hydration. Cheers to you Because there are so many edge cases that we didn't think through right there are so many edge cases What if I like don't put anything in now I have undefined Fix it make it work with undefined, right? What if the book has a semicolon in it, right? There are so many like these weird edge cases that can come in with these problems. And so if you're looking for like, Leon, what do I, you keep saying to come and break and play. What do you want me to do? Well, first try solving some edge cases. Try changing it. Instead of getting the title, can you get something else, right? Try playing with it.

If you're having some trouble kind of, You understand when I'm doing it, but then when you go to do it yourself, that's always a case. You need to play with the code more You're going to have my full solutions on discord after class Delete everything type it again Get it working delete everything type it again Brooklyn, hey, thank you for the five get the subs. I appreciate that. Thank you for being here Thank you for uh being so active in chat tonight, too. I always appreciate it Cool So let's go back and talk about the next week before we end with a lovely braid. So we do not have office hours on Sunday due to the holiday. And then Tuesday and Thursday, we have a work together nights. So if you wanna come and work on some stuff together, work on APIs, if you're part of the catch up crew and you just wanna work with some other members of the catch up crew to get caught up, I'll be there hanging out. I'll be answering questions. I'll be jumping around tables just to say hello to folks and see how I can be of help But if you need those Tuesdays and Thursdays to get work done come to our work together nights So you can get help done, but we won't have actual class, right? We won't have actual class. It'll just be time to catch up and use it However, you need for some folks. They're gonna take that full week just to recharge But if you're ready to grind a little bit and you haven't finished the Codecademy JS course I highly recommend it and the reason why I recommend it is because it's gonna give you all the practice over all the little things that We've done over the past few weeks together and then make sure you get a start on your professional checklist These are all the things you're gonna need squared away before we get into the job hunt There's a lot here with really good examples so you can get started This next week or so So let's go ahead and set up the raid It's been wonderful having another class with you all. I hope you had some fun building. This is where it starts to get fun.

We're gonna get into OOP, and then we get into backend, and our apps get even more powerful. So let's go ahead, let's see who's live. All right. They haven't gone to VapeJuice yet. Are they still live? Let's see. All right, let's go over to VapeJuice Jordan. We're gonna go ahead, as always, please send them some love, give them some follows. I'll see you over there folks. Have a wonderful, wonderful week. Have a great weekend. I'll see you all next week if you come by to the work together sessions. Love to have you there. Please build, break, put together, have fun with the code and enjoy your time. See you all over there.

Let's raid. Peace YouTube.

End of Transcript