Introduction

Oh, oh, oh, it keeps going a. Good morning, good afternoon, good evening, no matter where you're coming from. Hope you all are doing well. Welcome back, folks. We're back for day two in that JS up again. Hope you all are doing well. Welcome back. Welcome back. Welcome back. Get in here. Get in here. Ah, tonight's the night. I love tonight. Tonight we get to build more stuff. We get to play around with some new things.

And so be a lot of fun lots of practice lots of examples Super excited for you to come back for JavaScript class to class to folks You're right. We've only had one class of JavaScript so far. This is class to welcome back everybody. Hey What's going on get in get in get in get in? Already so we're jumping right into it tonight. We got a lot of cool stuff to get into You always know we like to start off with questions. I'm gonna start off with questions this evening. Then we're gonna get into it Global crisis. Hey, thank you for the five gifted subs Such a good name Starting off with a global crisis. I appreciate it. Thank you so much Deep fried penguin. Hey, thank you for if I get the subs as well. Oh y'all y'all popping off. Hey Welcome in everybody hope y'all doing well. For those that are new or might just be joining us for the first time, welcome I'm Leon running a free 30 week software engineering boot camp going from zero to employed.

We're doing good. Do we get spring break? We'll talk about it. So last cohort. Last cohort we had the holidays in between and so we started a little bit later right We start a little bit later, so we'll probably have some sort of break coming up, but we haven't said anything in stone yet. Just a little bit more time for you to work on projects. So once we get a little bit deeper into JavaScript and we're feeling good, a little bit of time to like actually build something more substantial. Hey, all right. You know, like we like to do, we always start off with some questions. The question of the day is what did you do for yourself this weekend? Part of your homework was to do something good for yourself, kind for yourself, Nice for yourself, which y'all do. Taco Bell, eight waffles, I love it. All of these are food related. All right. Garden went to Vegas.

What new coffee maker? OK. Hey, Domino's, hey, let's go turn up. I need I need like a I need like a air horn. I can't believe I don't have this, but somebody went to Domino's. All right, cool. Got some new games we're playing on the on the PlayStation's made some muffins Napped I'll take it Miriam the dragon that hey, thank you for the five get the subs. Hope you're doing well. Hope you're feeling better. Welcome back Pokemon no code in all caps cool. I love it Took the day off. Okay, went shopping, saw Granny A, turn up. Played a disc golf tourney. I watch an unhealthy amount of disc golf on YouTube. I've never played disc golf in my life.

I just like watching it on YouTube. I don't know why, I think that's a little weird, but I've watched a lot of it. Nespresso machine, okay, living a good life. All right, folks, you actually did some stuff. I asked y'all to do something nice for yourself, and it looks like we might have actually done some nice things for ourself. I love it. LASIK, that's awesome. Hope you're doing well. Hope you don't stare at the screens too much. Can you do that? Can you get LASIK and then like next day be here like staring at a screen for three hours? Be careful, don't stretch your eyes out. You can always join the catch up crew for a day, catch the VOD here on Twitch, short, of course, you always upload the videos to YouTube. You got a job. Hey, where would you dig at a job?

Shout out to you. I got to, I got to put your, uh, your message in the slides. I'll get to get you on Thursday. Congrats. That's huge. So happy for you. Alrighty, folks. You got a lot of questions in. Glad y'all are here. Glad day one of JavaScript didn't scare you back. You came back, right? You came back, you're ready to get some. So let's get some tonight. All right. Tonight we don't get, we are, we are talking about imposter syndrome.

It's something that most of you are going to experience. It's something that's going to sit deep within you for a while. And so I want to make sure we talk about it from the beginning. So we're going to start off with imposter syndrome. We're going to talk about the basics of programming. We're gonna cover the basics of JavaScript that we covered last class. So if last class variables didn't work for you, if conditionals didn't work for you, don't worry, we're going over all that stuff again. We're gonna look at the two things from the end of class that we didn't get a chance to get to, that angry parent simulator and the temperature converter. So we're gonna start off with those. Then we're gonna spend some time talking and going deeper with our pseudocode, getting a chance to talk through the temperature converter, not with code but with this idea of a skill that's going to help us for the rest of our careers and help us write really good code going forward. We're going to learn about functions. We're going to add on to the big four. Remember I said the big four are variables, conditionals, functions, and loops. Well guess what? We're adding functions into the mix.

We got variables and a little bit of conditionals last time. So we're going to see those the next one of the big four and then we're to talk through some of the homework. So a lot to get into tonight, a lot of fun stuff. I love this. I love this point in the bootcamp. I love this point in the bootcamp because we can actually start to build real stuff. So we're gonna keep that playful spirit tonight. We're gonna build. We're gonna see stuff from different angles. We're gonna start getting you more comfortable with the syntax and we're gonna take it easy and work our way into JavaScript. So I'm glad you're here. Glad you're ready to carry some boats and logs, It's ready to put in some work, so let's get to it. All right. If you have not checked in, please do so. You can always do !checkin here in chat, or if you're just following me on Twitter, you can just retweet the tweet and like it please, or always in the following materials are the go live message.

So I know chat gets full with the check in, which I love to see, but know that you can always just kind of do it early if you want to as well. Alrighty, so go ahead and check in. Uh, this is my, my Magnus, a Magnus opus, my, my, the, the culmination of years of hard work. Uh, this is, uh, this is a long time coming. It's something I've worked very, very hard for. And, uh, when I was on Twitter and I was, I was looking on the right hand side where it shows you the relevant folks, we did it. We really did that thing. Folks look at us go. We got the relevant people, yourself, yes sir, and a Domino's pizza together. So thank you for checking in and making my dreams come true. This wouldn't have happened without you. Submitting homework. So I asked you last class to take what we did and play with it, right? Take what you did and like we did together and break it, add to it, make it different, make it your own, play with it. So if you did that, right?

If you did it, if you didn't, it's okay. If you did that, I would love to see what you built, right? A lot of people have been throwing on Twitter. I love it. Throw it on Twitter at me. I would love to see the things that you build coming out of this class, right? So for folks that worked on it, played with it, it, broke it, rebuilt it, right? Right. What I want is this is me. Does this mean this is your last time streaming? Yeah, we've peaked. This is it. This is peak right here, folks. You're seeing it live for those that broke it, play with it, built it. I would love to see what you did.

Throw it in a code pen for me. Right. Throw it in a code pen for me. Show me the, at least the, the extra numbers you add it. Show me the, um, extra bits and bobs that I asked you the extra color. Right. And if you took it even further than that, I love to see it. So go ahead, throw the code that you did into a code pen and submit the URL for me, cool. Now, some folks have been sharing the things that they did between now and last class and it's been amazing. Is Glitch okay? Of course, Glitch is okay, Repl.it's okay, whatever those works. We just take them down if we pick one. So whatever you wanna use is fine with me. Cuzzy, thank you for the hydration, cheers to you. Got a lovely hot coffee today All right, yeah, so some folks have been sharing what they did on Twitter and I just want to show some of those I think they're really cool So I started this one here This is a Mario Kart version of the background picker You can go ahead and kind of select the different characters and they show up.

That's wild. I love it Another one I saw was the weather changer. So you could change the weather from sunny to rainy, to windy, to snowy, which was pretty dope, right? So taking the YouTube background picker and making it your own. There was a Mortal Kombat one as well. Yeah, Mortal Kombat one as well, which is pretty neat. I'm gonna share all the links. I'm going to share all the links on discord afterwards, and so go ahead and like these for me folks. I've retweeted most of them, but go ahead and like them too. It's really cool to see what people are building. This was the Mortal Kombat one. This was a nail polish picker, which was really cool. I love it. You pick the different nail polishes and the nail changes. And then this other one was pick your favorite starters, right, for Pokemon.

So I thought these were pretty dope. And so that's what I want to see folks right when I when I say hey Take the homework Right take the homework and make it your own Right make it your own play with it break it change things tweak it That's what i'm saying make it your own the way that you learn how to code is by doing Right a lot of folks we we saw that code for the first time Right, the truth is you didn't need to understand anything that was happening in that code base to add another smurf or to add another event listener. You had. You didn't need to know anything that was happening in that code to make one more thing happen, right? I don't care if you knew the syntax. It's just playing with Legos. So in the beginning you gotta write some bad code, right? You gotta be a bad. You gotta write some bad code and treat it like Lego blocks. See how things come together. Break stuff, make it a little bit more than what you have. Right. And so as we start getting into the homework, that's what I'm looking for this idea where you're gonna take it Make it your own because there's a lot of you here, right? There's a lot of you here and what we don't want in the end are thousands of Portfolios that look the same Right, we don't want thousands of portfolios that look the same and so make sure All right, make sure you're making them your own. Pick something you're excited about, something you're passionate about, something that is just cool to you, and infuse those into the projects that you do.

If you do that, you're gonna have a way more personal portfolio, and you're gonna have some things that help you stand out against others. Where can we find assets like those? That's my biggest hurdle. I'm sure most folks are just using Google, like Google Images. images. Yeah, it's a fine line when you're doing stuff, but if it's not for commercial use, you're not probably going to get that. But I'm not a lawyer, don't take this advice at all. Yeah, there are other sites that have GIFs too, like Giphy is a really popular one, GIFcat, stuff like that. The cool thing too is on Google images, you can actually do a Google image search and then there's like a setting that says like copyright free, right? copyright free and like you can find more resources like that too. But yeah, have some fun with it. Alrighty, so thank you for submitting your work. I want to talk about something really important tonight. And the thing I want to talk about is imposter syndrome. Now, I just showed a bunch of really cool examples of folks that took the homework and made it their own.

Right. And when I do this, there are some people that immediately start to panic. Right. They start to freak out and they start to say, wait a minute, are these people further along than me? Are these people, did they know more than I know? Is, is all the stuff that I know invalid or did I, did I, did I even, was I even there last class? Right? And so this idea of imposter syndrome shows up in a lot of different ways. It can be when you're looking around at others and you feel a little bit worse about the things that you're doing. It shows up a lot when you're maybe on the job and you go, do I really know the stuff that I, that I claim to know? Or when you get assigned a really hard project and it doesn't doesn't really go your way like wait Did I just do this for all this amount of time right there? There's these like feelings that come up this this this Like this thing in the back of your brain telling you that you're not good enough or that you can't do the things that you think you can do and The really hard thing to tell you is that for a lot of folks it never goes away it just doesn't. So you learn how to kind of deal with it and to adjust a little bit. For me, I still have it. In my brain, there's something that tells me I don't know how to code.

I don't know what it is, but there's something in my brain that tells me that I don't know how to code. I know I know how to code, right? I've built amazing projects for lots of amazing clients. Like I teach, like I've helped hundreds, thousands of people learn how to code, right? I know I know how to code, But there's something in my brain that tells me I don't that this is all this is all a scam. This is all Like a Facade and the the green screens gonna come crashing down and people are gonna figure out that I don't know how to code and it's All gonna be over Right, I don't know how to get that feeling out of my brain. And if I have it, I know a lot of you have it too. Right, because I've been doing this shit for 10 years. Right? And so I really need you to know that you're not alone when you start to feel these things or start to hear these thoughts in your brain, right? Imposter syndrome is very real and it's something that affects a lot of people specifically in tech, right? Because when you're learning to code, people think that, and it's not true. People think that if you know how to code more or better, that you tie it to like your intelligence, you tie it to like your smarts, right? Smart people can code. That's all cap.

It's just not really like, like, yes, it probably helps, but it's, it's, it's learning Lego blocks and how they come together effectively, right? I wouldn't look at some kid building Legos and go, wow, they're way smarter than me because they could put Legos together. It's not, it's not. It's just, it's just, they spent more time with it. They had different privileges you going into it and you can't let these things weigh on you, right? Because it'll stop you from getting what you want. And so we've, we've used this example of being on a roller coaster, right? We're all Beyonce on a roller coaster, right? And we're going down the hill. Like we're going down the hill. We're almost ready to crash into the trough of sorrow. Like we're on the bottom, right? We're on one roller coaster. We're all flying down. And some of us are on this roller coaster looking at the person three or four carts ahead of us and going, how?

How are they ahead of us on this roller coaster, right? Like how are they three or four carts further down into the trough of sorrow and it just doesn't make sense We're all on the same roller coaster together, right? Some folks got here a little bit earlier Right, some folks paid for the fucking fast pass Right, but we're still all on the same roller coaster. We're all gonna get to the same place eventually You can't be mad that there's a person three or four carts ahead of you and going damn. I'll never get there You're hurtling into the abyss and you're mad that somebody's gonna get there a couple classes before you It just doesn't make sense We're all on the same roller coaster. We're all gonna get there. Eventually you can't be looking at The person three or four carts ahead of you going damn. How are they doing it? They're not doing anything They're just on the same freaking roller coaster. You are they got there half an hour earlier So what I need you to do as you're going through Right as you're going through this experience. Don't look at the person a few carts ahead of you on the roller coaster It makes no sense. Look at yourself Where were you different a class ago? Where were you different a week ago? Where were you different? A month ago, and where are you going to be a year from now?

That's what you need to focus on. Not, not where somebody else is on the roller coaster. It makes no sense, but you got to look at yourself. Where am I at on the roller coaster? Am I being my best Beyonce possible? Am I enjoying the ride or am I the person that's like in line mad that somebody bought the fast pass? Right. right so tonight I want to do something that if you watch the video right if you watch the video dr. Thomas has a saying in there that says I don't care about your reality I want you to dream all right so I don't care about your reality I want you to dream tonight I don't care about your reality I want you to leave your reality at the door, right? I don't care about that tonight. Tonight I want you to dream. So I don't care about the pain of last class. I don't care how much you struggled to understand the syntax. I don't care how inflamed your imposter syndrome is right now, because you saw some other projects and you're mad at somebody that's a few cards ahead of you on a rollercoaster. I don't want any of that.

You're gonna leave all that at the door tonight and we're gonna dream a little bit. All right, we're gonna dream a little bit tonight. And so tonight, if you didn't finish the JS from last class, you leave that at the door. If you didn't finish your homework, you leave that at the door. Any of those feelings of saying, I'm not ready, I can't do this, I don't understand, that's your reality, I don't want that tonight, you leave that at the door. so when I click this next slide we leave our reality at the door we're opening up the idea that we're gonna dream together we're gonna play together we're gonna break stuff together we're going to have fun and when I go to this next slide that reality slips away and we're here to learn some JavaScript you ready All right, golden rule, separation of concerns. We're gonna leave the content in our HTML. We're gonna leave the style in our CSS and that behavior and interaction goes into our JavaScript. Why, why, why do we need this? Yeah, organization, exactly. Our code is getting a little bit more complex now. Marty Cats, hey, thank you for the five gifted subs. I appreciate you. Thank you for being here. Right?

Our code's getting a little bit more complicated now. We're gonna have bigger files. We're gonna have bigger things we have to keep track of. We're manipulating the DOM and all that cool stuff and we need to keep ourselves organized for ourselves and our team. So this golden rule helps us stay organized. Beautiful. We saw IDs in classes when we were learning HTML and CSS, but last class, when we first dipped our toes into the JavaScript pool, we saw that IDs can be really helpful now, right? They saw that they can be really helpful now. When we put an ID on something, this enables us to target it with our JavaScript, right? I don't really use, right? I don't really use IDs when I'm writing my HTML or CSS, But when it comes to JavaScript, I can latch onto those IDs to target that element so that I can listen for clicks, so I can do stuff to it, so I can put stuff in it, take stuff out of it, right? And so these IDs are gonna become really helpful for us when we are in JavaScript. Same thing for classes. Remember IDs, you can only target one element, classes you can target multiple elements, right? And yes, you can target a class.

You can target all the things with the class at the same time. I think we'll actually see that on one of the examples tonight, right? So you can target classes, you can target really cool stuff that just aren't the IDs. And so you're gonna see them come a little bit more when it comes to our JavaScript. The cool thing about being able to target classes since you asked is that you can bind Smurfs to a lot of stuff at one time. So what if you want like the same Smurf on a bunch of different stuff, right? Well, there's a way, right? All right, there is a way that we can loop through everything that has a class and put a Smurf on it, right? So we're not at loops yet, but there's a way where we can loop through and put a Smurf on every single thing. And so by using that class, we can listen for similar types of clicks, pretty neat. Cool. Talk about programming. All right, we're gonna talk about programming tonight. Programming comes down to one very simple thing. A computer will do what you tell it to do, right?

That's it. A computer will do what you tell it to do. Now it'll do it a lot faster. It'll do it a lot quicker than we could probably do it on our own, but it'll do what we tell it to do. Now, a program is simply a set of instructions that you write to tell a computer what to do, right? So last class, we all wrote programs. Our programs were simple sets of instructions and those instructions told our computer what to do. We were able to change background colors. We were able to do things based off of the instructions that we wrote, right? And so that leads us to the idea of programming. Programming is simply writing those instructions in a language that the computer can understand. Why am I saying in a language that the computer can understand? Why do I bring that up? Writing is instructions in a language a computer can understand. Why do I say that?

Yeah, I love it like JavaScript is for humans. Exactly. JavaScript is for humans, right? JavaScript is the language that we're writing so that we understand what's happening in our code, right? So that when we hand it off to another developer, they understand what's happening in that code, right? But our computers really don't understand JavaScript. That JavaScript has to be broken down into something that the computer can actually really understand, right? And so we talked about Independence Day and we talked about Independence Day being a true story, right, a true story. Why is Independence Day a true story? We have a saying around these parts. Why is Independence Day a true story? Bub exactly. Yeah, binary upload boom. In Independence Day, Jeff Goldblum saves the world by writing a computer virus that infects an alien mothership. The shields go down on all the other ships.

We nuked the crap out of those ships, saved the world, America, right? And so it's a true story because that's actually what would happen. Jeff Goldblum didn't understand the alien language, but they were able to break that alien language all the way down into simple logic, maybe all the way down to the binary, the equivalence of on and off, right? We hope that even if aliens are far, far out in the world, right? That physics is universal. Math is universal. The idea of on and off is universal, so we can take anything and break it down further and further Closer to the code that the machine or the computer can actually understand and then build our way back up right, so Independence Day is a true story Because we would be able to take that ailing language break it all the way down into something the computer could understand And bring it all the way back up. We call that binary upload boom Now, since we're talking about this higher level language, this JavaScript that's meant for us to be human readable, and some of you are like, Leon, it didn't look human readable to me. Trust me, it could get way worse. Did anybody watch the Game Boy video? Anybody watch that Game Boy video? Yeah, that gets wild, right? So I shared that video so you could see the stuff that we don't have to do. Like we don't, we're not, nope, next you cut. I ain't, that ain't for me.

I'm not about to get in there and do that kind of stuff. It was cool, but I'll keep my ad event listener. I'll keep my document, I'll keep my dot value, right? Because that's a little wild. And so JavaScript is a human-readable language just so that we can read and understand. And then it gets broken down into that really wild stuff that was in that video. Now, JavaScript has a specific syntax. There's gonna be lots of new words, terms, punctuations, odd stuff that at first glance might cause you to have a panic attack. And I don't say that lightly. I really do mean that. Some students look at JavaScript, they freak out and they click X and they never come back. Okay? And so I say that because I want to let you know that that's okay. If the very first time, last class, we looked at JavaScript, right? And you kind of lost a little bit, That's okay, right?

Here's the thing. I need you to do though. Oh calamity pixie. Thank you for hydration. Cheers to you I'm like here's here's what you need to do and they're like, oh, sorry. I just need to drink something real quick Here's what you need to do You need to play more You need to play more You have to understand that the syntax is not gonna make sense It just won't. For some folks, they come to programming with different mental models than others, and when they look at it at first, it just doesn't make sense. But what you have to do is type it out, play with it, break it, delete it, do it again. Type it out, play with it, break it, delete it, do it again. Play with it, break it, delete it, do it again. and you do that over and over again. And if you did that for the code that we ran into last week, you would start to notice some patterns. And early on, learning the code is simply pattern recognition. You won't really know what's happening under the hood until we get further on. So you're gonna see some things, the document, you're gonna see the query selector, and you're not gonna know that query selector is a method built in the JavaScript.

It doesn't matter that you know the terminology or what's happening underneath of it, you just have to know that when I use that thing, I can grab stuff, right? And so you play, you break, you delete, and you do it again, right? And you play, you break, you do it again. And if you do this enough, you start to notice the little patterns and you at least have some syntax in your brain so that as you start to do more complicated stuff, you have a place to do it. You've already done it, right? And you might add some of that to your Anki. You might add some of the things that you're running into that you start to notice, oh, this is how I do a Smurf or an event listener. Add that to Anki. Oh, here's how I get a value out of an input. Let's add that to Anki. Oh, here's how I put something back into the DOM. Let me add that to Anki, right? And over time, we will build up to more and more complicated things. And over time, we'll break down and digest exactly what is happening, right? But in the beginning, you're trying to pattern recognize.

Don't also put on top of you this idea that you have to understand everything. You can't, you won't, it's too much. I see some folks that go really deep trying to really understand all the things that an ad event listener could do. That's a little too much in the beginning. Play with it, break it. You're better off trying to build something than you are doom scrolling on the MDN for four hours. I'd rather you build stuff at this stage, right? Build stuff at this stage, then going super, super into trying to understand all the technical bits and bobs. It's just too much. Cool. Let's talk about variables. I feel like Leon was looking over my shoulder while I was working on this. I've done this for a little while. I've done this for a little while, but yeah, please, you gotta be playful with yourself. You're one class into JavaScript.

You're one class. You're one class into JavaScript. If you're saying to yourself, I can't do this, I can't do this, I'll never do it. What are you talking about? You're one class in and it wasn't even a full class. There was other stuff we were doing. You're three hours in. You're three hours in. If you understand anything in those three hours, you're you're so far ahead of every single other person has ever tried to do this. Please don't be upset at yourself that after one class, less than three hours of instruction, you're not, I'm not a JavaScript master. Like I can't do it. Leave that reality at the door. Come play with me. We're here to dream folks. We're here to dream.

It's okay. If you're trying to learn Japanese after one class, you wouldn't be freaking out. I can't do this. I'll never do this. No, you'd be dreaming about going to Tokyo, So speaking with folks, having good time, eating good food, right? Do the same thing when you're learning how to code. Be kind to yourself. You're one class in. Some folks bought the fast pass. It's okay if you don't have it. You're gonna take your time, you're gonna play, you're gonna dream. And from those dreams, we'll build amazing stuff. All right, let's talk about variables. what are her variables how much is the fast path that's that's the that's Leon premium All right, what are variables? I see people throwing it in chat, right?

This is the fast pass. Exactly. This is the fast pass. You are going to be running laps around folks that are not in this course. Right? You're going to be running laps around folks that are not in this course. Folks that are coming out of other bootcamps, laps. All right, you're gonna be on the roller coaster having a good time. They're in the parking lot They're not even in the they're not even in yet. They're in the parking lot looking at people in that roller coaster going damn They're having a great time Right. Don't compare yourself to folks in the parking lot. They're just seeing the the roller coaster. Goodbye. They're not even in the park yet cool All right variables people are saying data buckets Variables are a way we can tell our program to remember stuff to use later on. Right?

That's all it is. It's a thing we use to store a value for later on. The other boot camps are Little Caesar, exactly. Right? It's a way for us to create a bucket, put something in, and then at any time in the future we want the thing out of the bucket, we can take it out. And there are two key steps when it comes to using variables. The first step is declaration. The second step is assignment. So if we have memory, if we have memory, right? So let's put a little memory box here. Beautiful. Oh, that's clean. All right, let's say we have some memory, right? We have some memory. The first step is the declaration.

So I'm gonna go ahead and create a space in memory called age. All right, called age. Now, if I tried to use age somewhere else in my code, what would I get? Would I get an error if I tried to use age somewhere in my code, what would happen? Let's take a look at it, let's actually do it together. Let's open up the inspector here, go to console. Let's go ahead and say let age, right? And then let's ask for age. Now, we're not really getting like a pretty big error, but we're getting undefined. What does that mean? What does undefined mean? Let's ask for dog. Dog, not document, I want to type out dog, there we go. Uncaught reference error, dog is not defined. Okay, so we saw here that we declared age.

We created that space in memory, but with dog with two Gs, we didn't actually ever create that space in memory. So we got two different bits of information here. When we declared it, but never gave it a value, you, we get undefined, right? But if we never even declare it, we get this error saying, hey, it doesn't even exist in memory. There's nothing in memory called dog with two Gs, right? And so when we look, let's type this out again. On this first pass, we do let age. We create a space in memory called age. Now, if we ever ask for age, it's going to say it's undefined. Like it exists. We know what bucket you're talking about. There's just nothing inside of it, right? We have a bucket called age. There's just nothing inside of it. It is an empty bucket, exactly.

So if we ask for that bucket, if we ask for age somewhere else in our code base, it's just gonna say undefined, right? Right, it's gonna say undefined. Like we know what you're talking about. There's just nothing in that bucket. The second step, the assignment, is where we put a value into that bucket, right? So when we do the assignment, we put 25 into the bucket. Now, right, right, I can JS in the console. Yeah, you can JS in the console. Now, if I ask for age at any point in time, I'm gonna get 25. So if I ask for age, if I wanna throw it into a string, If I want to alert it, if I want to console log it, if I want to do anything with that age, it'll now be 25. And it'll stay 25 until what? It'll stay 25 until what? Yeah, until it's reassigned, exactly. Until it's reassigned. When it's reassigned, we take this value, right?

We take this value and we can do whatever we want with it. So we could say age equals age plus five, right? If I did, I just realized I'm behind myself. Hold on, let's go over here. I could do age equals age plus five. What would I now be reassigning age to be? Yeah, it'd be 30, right? Age was 25. Now we do 25 plus five, and that gives us 30. So now age is 30, and whatever was in that space in memory is now 30, boom. I love it. Cool. Whenever I'm creating my variables, I will use camel case, right? I'll use camel case. My first word will be lowercase.

Every other word will be capitalized, right? And we can't put spaces. Why can't we put spaces? Yeah, what, what exactly some folks are saying it might be multiple variables. Exactly. If we, if we use spaces, we might run into some problems where it's trying to find other things like of or apples. And it's like trying to see if they exist. Right. So you would run into like, if we had a space here, we would declare a space in memory called number, right? But then like, is it trying to call a function? Is it trying to call, like trying to find of, is it trying to find apples, right? So spaces can get us into trouble. You can actually declare multiple things at the same time by using commas. You could do like let dog comma cat. Cat, I don't know, bird, right?

And now you've declared three things into memory, but we don't have to jump ahead too much on that. I just wanted to show you that to you. So camel casing is the one I like because I can reuse camel casing, right? I can reuse camel casing across my HTML. I can use it across my CSS and I can use it on my JavaScript, right? So you're gonna see me use camel casing. If you don't wanna use camel casing, that's okay. just be consistent in whatever you do use, right? Some companies are going to, some companies are going to have different things that they want you to do, and that'll work. Closed captioning should be working. It's turned on. I can see that it's listening to me. Make sure you actually click the icon. Yeah, yeah, it's working, yeah. Give it a refresh if you need it, and then click the little icon, but it's on.

I can see that it's working. Cool, all righty. Now, we talked about two different kinds of types, right? We said that there's gonna be lots of different kinds of variables. We talked about two different types of like variables hold data, right? We're putting data into those buckets. And we said that there's two kinds of data we've talked about so far. We call these types. What are the two things that we've talked about so far? Yeah, numbers and strings, exactly. So let's revisit those numbers in string. All right, strings are pieces of text. They are gonna be surrounded by either double quotes, single quotes, or ticks, which we'll see a little bit later today. Now, what's the thing that we have to keep in mind when we're wrapping our strings in quotes? What thing do we have to keep in mind?

What's the thing that could get us into trouble? yeah consistency is good but also yeah this idea is that whatever you use on the inside like whatever you use on the inside you got to be careful not to use on the outside or the same other way around right like whatever you use on the outside be careful not to use it on the inside if you use the same stuff on the outside and on the inside you're going to have your string stop at that inside quote and then there's going to be some stuff that the the program just doesn't recognize. So you want to make sure that your quotes on the outside are different than the quotes on the inside or what could you do? Yeah, I could escape them, right? We could go ahead and do the, let's say this was double quotes, right? And so we have double quotes on the outside. We have double quotes on the outside. We have double quotes on the inside. this would break unless we escaped our characters. When we do that lovely backslash, JavaScript doesn't read the backslash, it just says, that quote's good to go, don't stop the string. More come out, we're gonna see the template literal in a little bit later tonight, yeah. What does it mean to escape? It just means that you are not going to run into trouble using the same on the inside as on the outside. Basically you're telling it to ignore it. So escaping is the same as like ignore it, don't end the string.

Cool. Talked about numbers. There are actually two different kinds of numbers. We have integers, which are whole numbers and floated values, which are numbers with decimal places. So you're gonna hear people say, refer to numbers as integer values or floated values, and when they say floated they just mean it has a decimal place. We also can have signed numbers, meaning that numbers can be positive and negative in JavaScript. You'll see that. And then we have basic arithmetic, and so with our arithmetic you will use the plus sign for addition, you'll use the hyphen for subtraction, You'll use the asterisk for multiplication. You'll use the forward sign Sorry, the forward slash for division and then we have this lovely Modulus not a percent. It's a modest. What does modulus do for us? Yeah, it gives us the remainder So remainder is like you divide a number in and whatever is left over is what you get as a result of modulus so if we did 10 mod two, what are we getting? We did 10 mod two chat, what are we doing? What are we getting back? Yeah, we're getting zero, right?

We're getting zero, because two went into 10 five times and there's nothing left over, so we get zero. How about 10 mod four? What do we get with 10 mod four? Yeah, we'd get two exactly because four Would go into ten two times which is eight And we'd have two left over well about one more and Mod six what we get Yeah, we have four right because six goes into ten one time there's four left over beautiful All right, what can modules be really helpful for really early on? Like we said, there's like a use case where modules could be helpful for us. When would we use modules early on? What could it help us with? Yeah, even and odd, exactly, right? If we take any number and modulus two, and we get zero, we know that it's an even number, right? Eight mod two would give us zero, six mod two would give us zero, four mod two would give us zero. So anytime you get the zero back, you would know that it's even. If you ever had any kind of remainder, you would know that it is odd. So we can use this modules early on to do things like even and odd, which is pretty helpful. Some folks are saying you could help with primes. Yeah, I could probably help with primes too.

Yeah. Alrighty. Now, that's variables. We talked about variables as buckets that can hold a value for use later on. That's one of the big four. The second of the big four are conditionals. Conditionals enable us to do something if a statement is true. So if a statement is true, we would do what's inside of the curly braces, right? Now to utilize conditionals well, we actually have to know how to do comparison. We need to figure out if something is true or false, right? So in this case, I think our age is at 30 right now because we did 25 plus five. So if we used age here as a variable, and it's equal to 30, what would inside the parentheses evaluate to? What would this evaluate to in the end? What does that evaluate to? It's a weird thing to say, what does it evaluate to?

Yeah, it evaluates the true, right? 30 is indeed greater than 18, and so that is a true statement. What happens inside the parentheses is that this is the same thing as saying true. And if the statement is true, you do what's inside the curly braces. So we would see in the console log, you are an adult, right? You are an adult, right? So if, right, if we want to do more in-depth conditionals, right? If we want to be able to do things and do things only in certain scenarios, we have to get better at understanding comparison. Are things true or false? And so let's break down comparison together. We know JavaScript is a little funky when it comes to comparison because we can compare not only numbers, we can also like compare strings to each other. JavaScript is a little loose like that. Cool. Now, here we have the example that we skirted at last class, right? We only did a few of them and then we moved on.

So whenever you see a variable, let's say there's let here, whenever you see one equal sign, what is that always going to be in JavaScript land? What is the one equal sign always gonna be? Yeah, it's always going to be assignment, right? We had memory, right, we had memory, and we created a new space in memory called x, and then we assigned that space in memory the value of three. So anytime I wanna use x right now until I reassign it, it is the value of three. All right, so let's look at this first one. I'm gonna look at x. Need to use X X right now is what chat X is what right now? X is 3 right now great When I see two equal signs Right. I'm notice right here. I have two equal signs down here. I have three when I have two equal signs What am I talking about? What am I comparing? Yeah, it's just value. One equal sign has nothing to do with comparison.

That is assignment. Two equal signs is just value. Are the values the same? So in this case, is three equal to eight? No, three and eight are two completely different values. That is a false statement. All right, next one. is three equal to string three. But now, when we have three equal signs, we're not only looking at value, we are also looking at type. So, is number three equal to string three in value? In value, let's do value first. Yes, number three and string three are the same value. They're both three. However, with three equal signs, we also care about type. Is number three equal to string three in type?

No, one is a number, one is a string. That makes this a false statement. Next one. All right, let's do the next one. Three, does number three equal number three in value? Yes, right, number three equals number three in value. Now, does number three equal number three in type? I hope so, yeah, yes, right, yes, right? Three is equal to three in value and type. Cool. Now let's start doing the trickier ones. Let's start doing the trickier ones. Does three not equal eight in value? When it's the exclamation point, that means not. That means not.

So we're saying not equal. And it's just one equal sign, right? So that means that we're saying not equal in value. So does 3 not equal 8 in value? Yeah, that's a true statement. Yes 3 does not equal 8 in value 1 is 3 1 is 8 beautiful Now this is where people run away and cry right here. You ready for this one? 3 Does 3 sorry number 3 not equal string 3 in value? and That's a true statement. Number three does not equal string three in value and type. It's equal in value, but not in type. So since it is not equal in value and type, that is a true statement. It is not equal in value and type. You see that the bang equal equals, that's value and type, right? So number three is not equal to string three in value and type, right?

It's just value. That is a true statement. Don't worry about that one. It just breaks people's brains. I don't know why. I had to come back to that one like four or five times before it actually clicked. Yeah. Yeah. So don't let that one break your brain a little bit, right? You're gonna see it a lot. We're gonna bring it up in real world scenarios. But what we're saying here is that three doesn't equal string three. Like number three does not equal string three in both value and type. So that's a true statement, right? It doesn't equal it, right?

It's like the same thing as saying like, like zebra doesn't equal duck. Yeah, of course zebra doesn't equal duck. They're different things. Well, the number and the string are different things. So that is a true statement. Cool. Next one, does number three not equal number three in value and type? Does number three not equal number three in value and type? It does, number three does equal number three in value and type right they're both numbers they both have the same value so this is a false statement right they are both equal in value and type so this is a false statement all right last four here is three greater than eight no No. All right. No. The exclamation point means not. That's what we were saying, not. It's not x, x is the variable here. Well, three is not greater than eight, so that's false.

Is three less than eight? Yes. Yep, three is less than eight, beautiful. Is three greater than or equal to eight? No, three is not greater than or equal to eight. Is three less than or equal to eight? Yeah, three is less than or equal to eight. Cool, all right. Now, if these two broke your brain, that's okay. I had to look at this like three or four times myself before I started to click. Rewatch this part of the VOD, come back to it, change up X to be a different number. I want everyone to come back to this. regardless of it clicked or not, I want you to come back to this as part of your homework, right, and change X to eight, right? Change X to eight, right? Go through it again.

And the cool thing is, y'all could have been cheating this whole time. Right, you could have been cheating this whole time. Open up your inspector, go to your console, right? And then just do let x equal three, right? And then you can do like, hey, does x not equal eight? And it'll give you the answers right there, right? Use your console as a place to execute your JavaScript for now, right? All the things that you're thinking about, you can come in here and just play with. You can throw them in there, see if it's true, false, play with a lot of other stuff in here too. Yep, cool. All righty. We're gonna come back. We're going to look through more conditional syntax, and then we are going to see this conditional syntax in play in our class weekend or boring day. We're gonna review that last piece. We wanted to make sure that it worked with any casing, lowercase, uppercase, and so we're gonna go over that together.

We're going to go through more conditional logic together, but before that, we have to take a break. If you're new around here, we like to be healthy. We like to take our, our, our, our idea of going through a bootcamp as a marathon, not a sprint. And so if you're able to get up, walk around, please look at something that's not your screen for at least 20 seconds, look out something that's far in the distance. If you can write, let your eyes focus on something else, grab some water, hydrate, right? and we'll be back in five. If you're watching us on YouTube, hey, go ahead and give us a like, please. Subscribe if you haven't already. Helps us out, helps more folks find the bootcamp and not have to pay tens of thousands of dollars to get the same material. Alrighty, folks, five minutes. See you then. You Oh, I was saying, thanks for the engagement, hashtag no clothes. Give Bob clothes was pretty funny Merry Mouse. Hey, thank you for the five gifted subs You're doing well You're being here So many folks ordering dominoes right now I saw But I like to see You know how I do, J.R., you know how I do. Was it my birthday?

It was somebody in chat. Blank on the name. There you go. A miracle. There you go. It's a miracles birthday. So I swapped over to the birthday screen there. They're spending their birthday with us If Domino's wants to make you CEO, what would you do? I have a 10-point plan To get Domino's everywhere Domino's has one of the best tech teams actually They have like like a really good strong like engineering team It's done a lot of stuff like I joke around about dominoes, but I'm not joking around dominoes Like they they have like a really strong tech team They've innovated in a lot of really cool ways like pizza tracker like pizza trackers like revolutionary They had pizza tracker before any of these other companies had ways of like tracking Like if your food was on the way or done yet, like we look at like uber and you realize like that started with dominoes Right like better routing and all this stuff is like dominoes has serious tech behind them and they've led the way And so yeah, we like that. We like to talk about it, but they have one of the best tech teams out there Get Bob a domino shirt. Hey if dominoes sent me a shirt He wear it all the time. They would have free advertising for the rest of the rest of our days here Just saying They have a patent on the Domino's tracker, that's funny, that's pretty cool. I mean it makes sense. All right folks. Come on back Come on back Hope you had a good break Alrighty cool.

Just chill the music All right, so we looked at our conditional, right? We looked at, we know how to do comparison. We know how to do greater than, less than, equals, not equals, beautiful. So let's actually start applying this to our conditionals. Right? And so the way a conditional works is if whatever is inside the parentheses evaluates the true, then we do what is inside the curly braces. All right, so if we look at it here, not only is it if, right? But there's also else ifs and else's. So ifs are the first thing to run. And if for any reason, what was inside the parentheses is false, then we move on to the else if. And you can actually have as many else ifs as you want, right? So you'll go if, if it's false, you move on to the else if, right? If it's, if it's false, you'll move on to the next else if, the next else if, the next else if, You have as many as you want. And then if you want, you don't have to have it, but you can have an else, right? You don't have to have it, it doesn't have to, it has to always be there.

But if you have an else and everything above it, right? Everything else above it was false, then the else automatically runs, right? It just automatically runs. It doesn't need to check anything, it just runs. Where would someone use a ton of LSIFs? So there are actually things in JavaScript that make conditional syntax easier, switches and things like that. But we saw some good examples. We wanted to figure out what day of the week it was, right? We could use a conditional. You wanna figure out your horoscope, you could use a conditional, right? There's a lot of times where you have to make decisions based on information that's coming in, right? Rock, paper, scissors, all these things, right? There are times you have to make decisions, right? Based off of stuff that's coming in, and that's what you use the conditional for. Jonas, hey, thank you for the tier three.

I appreciate that. Cool. Let's take a look at a real one here. So, we saw const pizza. What does const mean again? We kind of hinted at this last class. What does const mean again? Const pizza. What does that mean? Yeah, it's a variable that will not be reassigned, right? It's a variable that will not be reassigned. You can't reassign it, right? And so since our pizza choices will never change, we make pizza a const because it will always be dominoes. All right, now we look at this conditional and we say, does pizza equal Papa John's? No, it never will be, right?

It never will be. And so since this is false, we go to our else if, right? Now in this case, does pizza equal dominoes? Yes, our variable of pizza is equal to dominoes. So since this is true, we do what's inside the curly braces and in the console we would see all aboard the train to Flavortown. Now, does our else ever run? No, it will never run because we had a true statement here So the else never got a chance to run now Papa John's been doing some stuff on Thursday. I'm launching my campaign To defeat Papa John's that's all I'm gonna say, so I'm gonna say for right now I'm gonna say come back Thursday if you want to participate in the campaign to beat Papa John's I see a lot of people saying finally I'm right there with you I'm excited yes Thursday you go to war I'm coming for you but I don't want to I don't want to say too much I want to say too much come back Thursday Okay, all righty. I say that there is a, there's a danger, right? There's a danger, right? There's a danger of assignment versus comparison. What does that mean? What does that mean? How could I get in trouble? Oh yeah, it's the one equal sign versus two or three.

If I ever use one equal sign, like if I'm in here and I used one equal sign instead of two or three, that would try and do reassignment, right? You always have to have two or three equal signs when you're trying to compare stuff. So if you accidentally ever just do one equal sign inside of your ifs or else ifs, you're gonna actually reassign your variable right there. And so that's something you can run into Because that actually might wind up being a truthy or truthful statement, right? So even though you're trying to do comparison you did one it'll be reassignment and you're going to run into some issues So be careful when you're using your else ifs and your ifs make sure using two or three equal signs One will always be assignment or reassignment Cool We can do multiple conditions, right? We can check for for two things at the same time So if your name is Leon and your status equals ballin, you have to do what's inside the curly braces, right? And so we would go to big can here and give you a wink. And then we go back. It's like, got you. Got another wink. Let me put our glasses back on. We go back to the curly. There we go, all right? Because name was Leon, and status equals Bollin, and so since both of those are true statements, remember, when you have the ampersand, the double ampersand, right, it means and. Both cases must be true, and since both cases are true, you get a wink at the camera.

All right, there you go. You can clip it if you wanna keep it for longer. All righty, we saw and, but we could also do or, right? You got that. Somebody in all caps said stop, I'm blushing. All right, you can go ahead and blush. All right, or, right? You can do one or the other, right? With Anne, both cases have to be true. Only fan sneak peek, exactly. So I'm telling you, the content you're missing out on by not getting to a million channel points is wild. I can't wait. I've been thinking about angles and outfits and I looked at inflatable hot tubs, like I'm ready. I just need one of y'all to hit the million channel points. That's all I need, but you gotta do it.

All right. I got better lighting, like I'm ready, I'm ready. All right. We saw and, which was for both must be true, right? But, or just one has to be true. So I can say day equals Saturday or day equals Sunday. As long as one of those was true, then we would do it's the weekend. Cool. Let's go ahead and take a look at this class weekend or boring day. We did most of the code together, but there was one really important thing that I wanted us to do, which was make it work with uppercase and lowercase letters. Let's take a look. So if you need the starter code for today, you can find all the starter code in our In our discord you can do exclamation point discord here in chat We on Noel comm slash discord you agree to the rules and then you'll see a follow-along materials channel Where you can always download the material also just as another reminder We had a lot of new folks join the discord recently you have to not only agree to rules But you also want to make sure you've clicked on the emojis in the join 100 devs channel if you don't click those emojis you don't get access to all the 100 devs content So make sure you click on those you get access to all the channels alright So I think I missed a five for Yonis a Yonis. Thank you for the five get the subs. I appreciate that. Thank you for being here cool Truly gifted a sub tonight, but thank you for gifting this up the night, but I wonder if that was random or if you did that on purpose If it was random, I feel bad for the person that didn't get it.

But if you did it, that's pretty funny. Nightbot's a bot that runs in chat that does all the commands. All right. So we're gonna look at this class weekend or boring. I'm gonna open up the HTML. I'm gonna open up the JavaScript. And here we have the normal code that we had already. So I'm gonna open this in the browser. And I'm going to be a little bit bigger. And so we can put in the day of the week. So let's put in Tuesday. All right. And check it. Oh no. Oh no.

Let's inspect. Oh, it's console logging. We didn't put in the dom yet. So you can see it. You can see that we have class. All right. We have, we have class. You see that I keep clicking it and it keeps going up. All right. If I, however, put in Tuesday, I get boring. That's not right. It's not boring. We got class tonight. And it's because the capital T is not the same as the lower case T. And so I asked you to fix that as part of the homework.

So let's take a look at our code. Let's see what's going on and let's see if we can fix this. All right. If we looked, we saw that we had two things here. We had our lovely input, right? Where we're putting the day of the week and we can see that it has the ID of day. And we also have the button that we're clicking on that has the ID of check, right? It's important, we're gonna use these IDs so we can place our event listeners and also grab stuff out of that input. So the input has the ID of day and the button has the ID of check. Let's look at our javascript All right document That means we're going to go look at the rendering of the html and the css Right. We're going to go look remember when we when we when we open up our browser Right when we open up our browser and we see all the stuff that we see That's not actually our HTML. It's not actually our CSS. It's the rendering of that HTML and CSS. And the cool thing about this rendering, this DOM is that what can mess with it? What can mess with this rendering?

JavaScript, exactly. JavaScript can come in here and do whatever the heck it wants to this render, right? But as soon as I refresh, what happens? As soon as I refresh, what happens? Boop, it all goes away. When we do the refresh, we reread our HTML, we reread our CSS, we repaint this picture that we call the DOM, and then JavaScript can come in and mess with it again. Cool. So, if we look here, we're saying, hey, go to that DOM thing, and in it, find something that has the ID of check. What had the ID of check? What had the ID of check? Yeah, the button that we're gonna click on had that ID, right? If we look, button has the ID of check, great. And so what we're doing is we are looking, right, we're looking in that render for the thing that had the idea of check and then we're putting a what on it. What are we putting on it? What are we putting on that button?

What are we putting on there? Putting a smurf, exactly. Putting a little smurf on that button. Little smurf is sitting on that button. Right, a little Smurf is sitting on that button, and it's waiting for a click. It's waiting, it's waiting, it's waiting, and we know that it's waiting for a click because we said add event listener, click. We could have given it some other things to listen for. We could have told it to, right, We could have told it to listen for a mouse enter. We could have told it to listen for a double click. We could have told it to listen for a mouse leave, right? But we told it, hey Smurf, listen for a click. And when you hear a click, what set of instructions do you want us to run? Like what do you want JavaScript to do? What do you want the computer to do? What set of instructions?

Why do they call it a Smurf? I made it up is they don't please don't think Smurfs are built into JavaScript It's just an example. I give there's no Smurfs built into JavaScript I just like to call them Smurfs because I it's easier for me to sit there and think that there I don't know why It's easier for me to sit there and think that there are like little Smurfs sitting on all my buttons waiting to be clicked So I just makes it work in my brain better. All right, so when it hears the click When it hears the click We got the check. Uh-oh, hype train. Thank you for the hype train, folks. I appreciate y'all. Thank you for all the, spending off of all of Jeff Bezos' hard-earned money. Whenever I see Jeff Bezos on a yacht, I'm like, I'm getting a piece of that. So thank you for the Twitch primes. When you have prime, you can sub for free. So I appreciate you spending all of Bezos' money. Makes me feel a bit better. All right. So we got this check.

We're listening for the click. and when we hear the check, when we hear the click, we run the set of instructions called check. So here are the set of instructions with the name of check. These two are tied, right? We're tied, right? Cool, now, I heard the click, I run check. The very first thing I do is I go back to that DOM, The rendering right I find something that has the idea of day What had the idea of day? Somebody said do functions run if you don't put them in an event listener You always have to tell functions to run they won't run by themselves You can either call the function and we're gonna learn more about functions soon and you can either like tell them to run, right? Or you can put them in an event list and then they'll run when you hear the event. We're gonna cover more about functions later today and next class for sure. So you gotta tell them to run. They just don't magically run by themselves. You'll call Hebrew people calling that like invoke them or run them. Yeah, we'll get there though. Cool.

Yeah, it was the input. The input had the idea of day. If we look input as the idea of day, beautiful. So we went into that DOM thingy, the rendering, we found the input. And what do you think value does? It says the value, what do you think that does? What does that help us with? Value. Yeah, it helps us get the value out of the input. So whatever was in that input is now pulled out. Now, normally I would take the value out and poof, it would disappear into the ether, right? Like I would grab the value and poof, it would disappear. Why does the value not poof and disappear into the ether? Why didn't we grab it and then immediately lose it? Yeah, hey, turn up, look at us go, woo!

Bing, bong, yeah! Because we're assigning it today. Right, we're assigning it to day. So whatever was in that input, right, is now sitting, right, is now sitting inside the variable called day, right? So whatever was in that input is now in our bucket called day, right? So we had a bucket called day, and if in my input I had Tuesday, right? If in my input I had Tuesday and I clicked, I got the value out of that input, I stored it in the day bucket, that means sitting inside of day would be string Tuesday. Right? We got the value out of the input, right? We got the value out of the input and we stored it in the bucket called day. Where does value come from? It's built into JavaScript. Dot value is built into JavaScript. Add event listener, query selector, all these things are built into JavaScript so that we don't have to figure out how to do them ourselves. Imagine if you had to figure out how to listen for clicks in the browser, right?

This is what addEventListener is doing. Imagine if you had to code that from scratch. Imagine if you had to write the code to like peer into the DOM. Imagine if you had to write the code that enabled you to pull stuff out of inputs. It would just take forever, right? So one of the reasons why we use JavaScript is so much of this stuff has already been done for us. We sit on top of the shoulders of giants that have gone through the muck to build all this stuff out for us. And that's why it's a little bit higher level. It's a higher level language. A lot of this stuff has already been written for us so that we don't have to, right? That's the beauty of JavaScript. And so in the beginning, we talked about this idea of I'm lost. I don't get what's going on. Well, it's because you didn't learn these words yet. Right.

And there's no way you could have known these words until we go over them. Right. And so the idea being here is that when we use JavaScript, we get a lot of stuff that's built in. And early on, one of the, probably the biggest things that you're going to have trouble with is saying, Hmm, what is built in right. And what is not built in like what is built in and what is not built in. and that's one of the hardest things kind of early on. That's why I asked you to play, right? So I asked you to take this, break it, rebuild it, delete it, do it over and over and over again, right? The MDN has a list of all the built-in stuff, but we're gonna see it together over and over again, right? This is class two. We're gonna have 10, 15, 20 more classes on JavaScript, right, and we're gonna see these pieces over and over again, But you have to do your part you have to play you have to delete it all and type it all back out You have to delete it all and then delete it all again All right, and so you got to make sure you keep playing you keep doing right and as you do that You'll start to realize huh? That's what I could change and I couldn't change this or actually I know that that that's something I wrote and that's not something that comes into JavaScript But you have to be willing to type it all out, delete that whole thing, type it all out again, delete it, do that whole thing over and over again. It's the only way it sticks. Cause there's so many new words, so many new bits of terminology that you can't be expected to just like see it and get it. You gotta play with it.

Cool. So we got the value of Tuesday out of the input. All right, so now inside of day we are holding Tuesday. So does day equal Tuesday? Yeah, day equals Tuesday in this instance. And so since this is an or, we don't even really need to check the other side, right? We already know when it's or only one has to be true, right? Like this side had to be true or this side had to be true. But since we already know something is true, we can go ahead and console log you have class, right? Now the problem is if we change this to uppercase Tuesday, it won't work, right? We've pulled Tuesday out of the input. We stored it in our variable of day, right? And now when we go and compare day to lowercase Tuesday, they are different. Day right now is the same thing as uppercase Tuesday. And so uppercase Tuesday is not equal to lowercase Tuesday.

Right? So how do we make sure that we don't have to worry about casing and run into the problem that we're running into right now? Oh, yeah, we could do this to lower case, a boom. To lower case, beautiful. Let's try it out now. Let's save it, let's refresh. Great, it's saying you have class, right? You have class. it noticed that even though the T was capitalized, we can do lowercase T as well, we still get you have class, right? And so what this right here, this to lower class is something that is built into JavaScript to take all your letters and make them lowercase. You didn't have to code it. You could have coded it, right? You could have coded a function or a set of instructions that took your word and made all the letters lowercase, but it is built in to JavaScript. Eventually we're gonna call these things like methods or functions that are built in, right? But right now, to lowercase is saying, hey, whatever you got out of this document, right?

Whatever the value was, make it all lowercase, right? No matter what we got out of the value, it is now all lowercase, right? And then we can do our comparison. Is it Tuesday or Thursday? Is it Saturday or Sunday? And if it's not Tuesday, Thursday, Saturday or Sunday, we get boring. Now a lot of people are saying, Leon, why const? Will day ever be reassigned? Here's a really, this is like, this is like a next level question here. Will day ever be reassigned? Nope, that's what we were saying, Leon, but if I keep rerunning the function, it's gonna be, day can be different things. It could be Tuesday, it could be Saturday, but look, that's inside this function though. Every single time you click, you're running these sets of instructions again. There are different versions of the same thing. So this day never gets reassigned.

you just assign it for the first time whenever you click. I know it's a little, it's a little lot. It's a little, it's a little too much for right now, but there's the day is not really being reassigned. It's just that you're running this set of instructions again, right? It's just that you're rerunning the sets of instructions over and over again. You're not really reassigning something. You're just reassigning those. You're just redoing those sets of instructions. Yeah, like resets, it runs again. Yeah, cool. All righty. I'm good about this one. Keep pushing. Keep pushing. Yeah, some folks are throwing out this word scope.

We'll get the scope later on. Be why I came across it in your reading. Yeah. Yeah. Ooh, we got a posture check. Daddy's home 420. Thank you for the posture check. That's it, right? I got a foot rest now, so I gotta make sure I'm in my foot rest. Back's in the right spot. Thank you. Appreciate you. All right. Let's move on. Angry parent simulator.

I'm about to show you a whole lot of code. Don't run away. I'm gonna show you a lot of code. All right, let's take a look at this Angry Parent Simulator. All right, I'm gonna close all this stuff up. I'm gonna open up the Angry Parent Simulator. I'm gonna open up the JavaScript, and I'm gonna open it in the browser just to see it. I thought Leon said pasta check. Show me your pasta. Is it angel hair? Is that linguine? Pasta check. All righty, let's put a name here. Let's put Bob's name in here. Bob, Bobber, Bobbity, Bobson, cool.

So Bob, Bobber, Bobbity, Bobson is Bob's name. And so let's go ahead and yell. And we see Bob, Bobber, Bobbity, Bobson, right? So this is, I knew when my friend was in trouble growing up. I knew when like we when we really like when we like When we like me when we really fucked up like when we like really fucked up this is how I knew right when Parents weren't just using their middle name, but they were using their Christian name to like It was over your cut. I was going home. I was gonna see him for a couple weeks. So This is an this is an ode to how you know you've done messed up when parents are calling not only your middle name, but also your given name. So let's go ahead and look through how we could do this. So what we are doing here is we're putting a first middle, last middle, and last name into different inputs. And when I click yell, I'm pulling a value from each of those inputs that is then being put into the DOM. All right. You thought his name was Robert? No, his name's not Robert, his name's Bob. Cool.

And so what we're gonna have to do is we have to figure out, all right, how do I get something out of here, here, here, here, and then how do I put that into the DOM? All right, that's what we're gonna look at. Now, I'm gonna show you a couple different ways that this could be done. And so this is this is meant for us to see stuff what I'm trying to do is I'm trying to give you Lots of example code that you can then come back and sample Right, you can come back and sample this bits of code the way I did stuff to use in your projects going forward Different Lego pieces that you can actually use. All right, if we look here are all of our inputs Our first input has the idea of first name. Our second input has the idea of first middle. Our third has the idea of last middle. And then the last name has the idea of last name. And so we have all of these inputs that all have their own IDs that we can use to pull the value out. To pull the value out. Cool. We also have the button with the ID of yell, right? So the button with the ID of yell is the thing that we're gonna actually click, right? We're gonna actually click that button. We're gonna pull all the stuff out of the inputs, right?

And then we're going to place all that stuff into the H2. That's the goal, right? Pull all the stuff out of it. We already saw how to get stuff out of the input. We're gonna pull all this stuff out of all the different inputs, right? All the different inputs and then put it back into the DOM. Let's take a look at that. All right, I have my event listener. I have my Smurf that is set up. My Smurf is set up to listen for a click on the yell button, right? So when I click on the button that has the idea of yell, I'm going to run these sets of instructions, right? So if we look, here's my function called run, or my set of instructions that I am going to run. And so what I'm going to do is I'm going to grab the names out of every input, right? I'm gonna grab the names out of every input. So here I am grabbing the name out of the first input and I am setting it equal to the variable called fname.

Then I'm gonna grab the value out of the second input and store it in the variable fmidname. Same thing for the third and the same thing for the last. I'm just going through and pulling the values out of the inputs and storing them in my buckets or my variables, right? So if I did this right, right? If I did this right, I should now have four variables holding each of the names. The last thing I have to do, right? The last thing I have to do is put those names Into the DOM. So here's a new way of doing it. I'm gonna actually comment out this new way for a second I want to show you the old way Here's the old way of taking each of those names and putting them into the DOM, right? So here if we look we're saying alright go to the DOM Find the thing that has the idea of place TL. If we look, this H2 has the idea of place TL. This is where I'm gonna put this stuff, right? Cool. And what am I gonna put in it? I'm gonna put some text inside of it.

That's what intertext stands for. Intertext means I'm gonna put some text inside of it. So some text is gonna go inside that H2, and then I'm gonna put all the variables, right? I'm gonna put all the variables into that H2. Some folks are saying, what's the difference between inner text and inner HTML? Well, text is just text. Inner HTML means you can put like actual HTML elements. You can put like LIs and anchor tags and spans, anything you want in there, but we're just doing text. So here we go. I'm gonna take the first name and then we're doing what's called concatenation. Concatenation. What do you think I mean by concatenation? What do you think I mean by concatenating? What am I doing when I'm concatenating? I'm not saying cat nation.

I'm not saying meow, concatenating. Yeah, you're putting it all together into one big string. Like you're just adding everything together. It comes together as one big string. And then that big string is what we're putting into the DOM. And so if you look, we take the name and then we add empty quotes. Then we take the other name and we add empty quotes, empty quotes, the other name, empty quotes. What am I doing there? Why am I putting empty quotes in? Yeah, I'm adding spaces. I want a space between each name. Like if I look, I don't want it to be like Bob Barber. I want it to have spaces in between. So that's what the concatenation does. is that's why I'm concatenating an empty space, right?

I'm concatenating empty spaces, so I have spaces between this whole string that's going into my H2. So that's the old way of doing it. But now we have something called template literals or template strings, which have kind of changed the game a little bit, right? So same thing, we're gonna go into the DOM. We're gonna find the thing that has the idea of place to yell. We're gonna put some text inside of it, but look, we start off with tics, right? We start off with tics, and then we have some fancy stuff inside those tics. Now tics are a new way of doing quotes, basically. You don't know where a tic is. A tic is on the tilde key. So like right there above your tab, you have a key that has a tilde on it, and then the tick is on that one right there for you. That's how you do ticks. Right? On my Kinesis, my tick is at a very different place. There we have a tick, right?

So the tick opens and the tick closes. Now, the cool thing is, the cool thing is, right, you can now plug in variables using this new syntax. if you're inside of a tick, you can use this syntax. The bling curly braces with the variable inside. And so now we can plug in all of our variables with the spaces already there. And this gets turned into one string. So instead of having to do all these plus signs, adding empty spaces, is we start our string and close the string with a tick, and then we can use this newer template literal syntax, this bling with the curly braces to plug in our variable names. Pretty sweet. Yeah. Template literal, exactly, yeah. And so it's just a fancier way of doing it, but the cool thing is you don't have to do all these plus signs. Any white space you put in is there, right? So you have the spaces, you don't have to worry about it. So you're gonna come across this sometimes. You're gonna come across this a lot in older codebases too.

Why the bling curly braces? That's just the syntax. That's the decision they chose for inserting a variable into the template string. That's all. Cool. All right, so this is all fine and good, but I want to show you something else. I have some other cool code here. I'm just going to comment out our code up here real quick. We're not going to spend too much time on this. I want to just show you something. I think it's pretty neat. I'm going to uncomment this code down here. I'm going to save it. And I'm going to show you what this does now. All right, hold on.

All right. Let's go back. Refresh. Bob, Bobber, Bobbity, Bobson. I'm going to yell. I hear it. Bop over bopity bop son. All right, that was fire, I'm not gonna lie. Really proud of myself for that one. All right. So the cool thing is we use some code, right? That I found off the internets to do speech synthesis. So built in to the browser now is this ability to do speech synthesis. And so what I was able to do is I was able to grab this speech synthesis stuff and plug in my code to make it spit hot bars, right? And now the cool thing is, the question I have to ask you, if I was to like delete all this, do you think I could type this out?

Like if I was just to delete this, do you think I could type this and this line out? No, absolutely not. I do not have this memorized. This is not anything in my brain. I was just like, I want to do this very specific thing. I Googled it and saw, oh, it's built into the browsers nowadays. It's a newer thing that's built in that I can use, but I don't have this memorized. This is not something that's in my brain. If I was to delete this, I would have no idea how to start. I would have to go back, find it on the MDN, and then use it, right? And so you're going to push yourself, right? You're going to push yourself so I said you didn't Anki it now I didn't Anki it because I don't expect to really ever use this. This was for a very specific project. I was building a app for or something very specific. There's a game called Overwatch that I play and I noticed that I couldn't find a way for folks that may be deaf to like, to, to, to know that something was about to happen in the game, right?

In the game, there are these sounds that you hear, and if you hear the sound, you're about to get shot in the face. Right? So if you hear it, it's high noon, you're about to get shot in the face, right? It's like somebody's special move. Um, there are all these like sounds that before you do your special move, uh, the sounds play and I couldn't like figure out how to like turn it on. And so I was like an accessibility feature for it. So I was like, wait, let me see if I could build something that could listen for those sounds, right? And then like flash a color on the screen. And it worked, right? It worked. And so I was able to use this speech synthesis to not only say stuff, but to also listen for stuff. And it was just an idea that popped in my brain and I was able to do it, right? And so as you start to learn code, right? As you start to learn more, you're gonna be able to just like Google stuff. And this took me like three seconds, right?

to be like, oh, there's speech synthesis and I can make it say stuff. Can I also make it listen? Right? And so you'll notice there's nothing really new here. I set up the speech synthesis. I'm saying, hey, like browser, I have this speech synthesis set up. And then I just have my normal click event. I'm getting all my stuff from the DOM, just like normal. Right? Except I put it into a variable, right? Instead of, I have all my stuff in a variable, right? It's in a variable. And instead of just plugging that variable into the DOM, I also pass that variable into this speech synthesis stuff. And that's what makes it say it. So I didn't code this, I just Googled it, copied those three lines of code, and boom, it's over, right?

It works. Now, if I was to delete this, I would have no idea what the heck's going on. And I say this, and I mentioned this, because you have to free yourself, right? From this idea that like JavaScript developers have all this stuff memorized and like we can code it all from scratch. No, we're gonna use the MDN. We're gonna Google it when we have to. We're gonna copy and paste the pieces that we need and we make it work. We get the job done, right? But it's not something, I'm just not sitting here like for like 10 hours a day like this. Just clicky-clack, got it, yep, hack mainframe, yep, carry the five, yep, uh-huh, cool, we're doing good, we're doing good, yep, okay. It's not that for 10 hours, right? It's not that. Here's what toting looks like for 10 hours a day. Hmm. I wonder if someone has, nevermind coffee break.

I'll go play with my dog for a few minutes. I'll be back. Then you come back and it's like, hmm, Hmm, I wonder if I could make my computer talk. Okay, let's figure that out. Hey Bob, you know how to make the computer talk? No, all right, cool. Let's go over here, Google make browser talk. Oh, use JavaScript to make your browser speak. that sounds dope. How can I make my web browser speak programmatically? Let's start over there. Oh, speech synthesis speak. Hmm. Too much text. Is there anybody that's done it already?

Okay, utterance, here you go, that works. So it looks like I can use this and this and that should work. So I would copy that, copy that, and paste it in. Maybe it works, maybe it doesn't. Well, I didn't really like it. Let's go back and look at that blog post real quick. Oh, okay, they're using the same thing. New, speak. Okay, we can just copy that. Let me paste it in and let me see if it works. That right there, folks. Is programming welcome. That's it, that's what I that's what that's what I do, like like 90% of my day is just that. I wonder if I can do it. Let me see if somebody else has done it.

Let me ask other folks that may have done it in the past, right? It's not sitting there like no. Sometimes you get flow. Sometimes you do get into a flow state, right? you are figuring out, but it's a lot of trying to solve problems that have probably already been solved just in different contexts, right? And so a lot early on is about like recognizing different building blocks, different Legos and putting these different Legos together, right? It has nothing to do with like being good at JavaScript. Like I like I'm building I'm really not reinventing the wheel very often, right? It's very rare that I'm like reinvent the wheel. I'm really doing something. I'm putting different building blocks together. I'm gluing a lot of different things together. I get really good at the glue in the building, but it's rare that I have to like really code something custom. I do maybe 10% of my time, right? But I'm putting different things together, and so we're really good Lego players.

is where we're putting different pieces together. And so in the beginning, you don't have to stress yourself out being like, I don't understand how I would code this from scratch. You're not going to specifically in the beginning, you're gonna take pieces and put them together. And what you have to be good at is finding those pieces. And so what I have done, and what we're gonna see as we move into the next project is over these last few examples, I've given you all the pieces or the building blocks that you need. And now it's your job to take those building blocks and arrange them in the way that solves your problem. And all we're going to be doing over the next couple weeks is adding more blocks that we can use. We got a long yellow one. We got a short red one. We got a four by eight. Like we're going to have all these different pieces that you're gonna have to be able to think through and put together. But that's our job in the beginning. We're just playing with Legos. And that's why I really do emphasize like you should be having fun with this. Like it should be something that like you're not letting the anxiety get to you.

You're just playing with Legos. You're playing with Legos while riding a roller coaster. Have some fucking fun with it. For real, right? Like you're on a roller coaster playing with Legos. Have some fun with it. Who cares if you have to start over again, rebuild a different Lego set, right? Have fun with it, build, break. Don't let the anxiety creep in. All right, so I want to stop here. We're going to take our break. When we come back from a break, we're going to talk about pseudocode, right? We're going to talk about how we can talk about those different pieces in plain language. We're not going to get technical. We're just going to talk about the things that we want to have happen in our programs, the order in which we want them to happen, right?

And we're going to talk about that pseudocode, And then we're gonna build a temperature converter together. So let's go ahead and take our break Please if you're able get up move around walk around stretch hydrate And we'll be back in five and put five minutes on the timer All right, see you soon I love that to J bag. They said hi. I love how chat is slow. She's everyone's on break. Exactly taking that break Shadow that's it. That's all you need. I don't need more than that Unless you have problems that require different tools, but that should be enough from pretty much everything GW now, we don't touch on jQuery. It's kind of not in vogue anymore. We can do all that cool stuff with just regular JavaScript these days. That's cool, Squiddy. My glasses do have a blue light filter. They do. I don't know how much it works. It's some conflicting stuff, but I like them.

True OCC. We'll use MongoDB exactly Backup pizza place get out of here. It's Domino's or bust baby. If Domino's is closed for some reason I'm just not eating pizza that day. Get out of here Bob came to life and offered you a helping hand in Anything that you need it. What would it be? I would love if Bob could walk the dogs every once in a while. I would be really helpful. Just be cool. If they got like more more walks, you know, and so if Bob could do it, that'd be great. All right, folks. Come on back. Come on back. Lots of fun stuff to get into. Alrighty, welcome back everyone.

All right, somebody said, what about semicolons? With the newer versions of JavaScript, you can omit them if you want to. You can actually do exclamation point semicolon, and you can read an article on it. Or we should start saying bang semicolon now, right? Oh. All right, folks, come on back, come on back. Let's go into this last bit together. Wait, can you hear stuff coming from my computer? Does that work? Hold on. No, all right, all right, cool, because I could hear I could hear the when the timer goes off. there's like a sound I could hear. I just think my headphones were really loud. It's funny. All right, let's talk about pseudocode folks.

Welcome back, welcome back. So pseudocode is what we're gonna use when we start trying to tackle problems. Right? So we're gonna use when we start trying to tackle problems. We're gonna approach our coding problems in plain language before we ever even think about syntax, right? Before we ever even think about syntax, right? And so whenever I approach a new challenge, a new coding problem, I think through what I'm going to do in plain language. Often I will talk to my duck about it. And if my duck is off doing duck things, I'll talk to Bob about it, right? And I literally say, I'll allow the steps I wanna do. And then often like once that idea solidifies, right? Once the idea solidifies, then I actually write it out. So I write out what I'm going to have happen in just plain English before I actually write out any code, any syntax. If you can learn to do this skill well, it will be one of the most impactful things on your career. Folks that write good pseudocode write good code.

And so you want to get better at this idea of thinking through any challenge. I don't care how small it is, you want to think through the steps in plain language before ever thinking about any code. Too many folks at this stage dive right into JavaScript. They get lost. They forget some syntax and then, all right, and so you want to, you want to have a clear direction before going into your code. You can still be a baddie and write bad code, but you need some direction Right to be a baddie, right? And so that's what pseudocode gives us it gives us direction This used to be one of my favorite classes to teach in person. So in person I Used to have my students Build a robot that would make peanut butter and jelly sandwiches except I was the robot and they had to write out pseudocode that would enable me to eat a sandwich. It's actually really hard. It's really difficult. I taught that class 40, 50 times and I only ever ate a sandwich twice and one of them, right, one of them cheated, right? So out of like 40 50 times I ran that class Holy I only ever ate a sandwich once legitimately because it's really hard. You got to think about hold on I'm gonna do something real quick ready Watch it. So I'm gonna get big here for you ready Think about everything that just had to happen for that to work, right? My left hand had to go reach out for the mug.

I had to pick up the mug. I had to go until it hit my lips. Then I had to tilt it. then the drink had to come out, I had to go into my mouth, I had to tilt my head back a little bit so I didn't die. But all those things, imagine if you had to write the code for that to work. Imagine if you had to break down all these things, because remember, a computer will do what you tell it to do. And so if you wanted a robot to do everything I just did, you would have to write the code to make it happen. And so I always used to make my students write out this code. We didn't write it in JavaScript syntax. We wrote it in pseudocode. And that would give them a lot of things. Like I was a robot that could see colors, shapes. They had to figure out how to do movement, things like that, right? And so it actually takes a really long time to break down all the steps it would take to build a peanut butter and jelly sandwich to get me to eat it and to not die. Everybody's like, how'd they cheat?

So one team cheated by using the stuff I just showed you in the Angry Parents Simulator, they wrote some code that said, using the speech synthesis or something similar to it back then, that said, well, first they figured out how to make me point. And I'm giving a little bit of my apologies. This is actually what happened, not something I would say without this happening. So they made me point at somebody on their team, and then they programmed me to say, make me a sandwich B word. And then that person got up, made the peanut butter and jelly sandwich, they put it in my mouth, they like made my head chew, and then they like tilted my head back and helped me swallow it without dying. So did they actually program a robot that made a peanut butter and jelly sandwich? No, but did they accomplish it? They did. And whenever I taught that class going forward, I had to give a disclaimer that you were not allowed to do that anymore. So it was brilliant, but it didn't solve the problem. It was a good loophole. That's how they cheated. Now for our pseudocode, I want to attempt to write some pseudocode for our temperature converter. So I'm going to open up the temperature converter first, and then we're going to take some time to think through some pseudocode. All right, so let me close this.

Let me open up temperature converter. Temperature converter, HTML, JavaScript. you'll notice that there's no JavaScript here, right? What I wanna be able to do, what I wanna be able to do is I wanna be able to enter in a value, right? Have that value be converted from Celsius to Fahrenheit. Right, and then I want to see that value in the DOM. Right, so that's what I want for a temperature converter. I want something that can convert a value from Celsius to Fahrenheit, okay? Now, I want you to take two minutes to think through the steps that have to happen for that conversion to happen, all right? So I want you to think through this pseudocode. Don't think in terms of JavaScript. Don't even think about in terms of like the math to make this happen, I just want you to think through the steps we're gonna have to do to get some value and convert it. Okay? All right, so I'm gonna put two minutes on the clock. I want you to think through your pseudocode and write out your pseudocode in your main.js here.

Put two minutes on the clock. Think through it and then we're going to go over it together. I want you to make a temperature converter, Celsius to Fahrenheit. What are the steps that you would need in just plain language that you would need to make this work? And then we're going to go over it together. Two minutes. Okay, take two minutes. The steps, I don't care about code. You don't have to code to do this. What are the steps you would need for any type of conversion to happen? Go to weather.com nice one panda WhispyTV, thank you for the engagement. Folks are done, that's all right. Jim this is class 13 that's why not class 12 wrong folder All right, give yourself about 35 more seconds and then we're going to come back and go over it together. That's pretty cool, Julie. A lot of folks coming in done, that's cool.

Have I met Dr. Thomas in person? No, I haven't yet. I would love to though. All right, folks, come on back. Let's look at this together. All right, let's think in plain language what would we need to have happen to turn Celsius into Fahrenheit, right? So let's say we have zero degrees Celsius. We want that to be 32 degrees Fahrenheit, right? That's the Celsius to Fahrenheit conversion. So if I want to turn something from Celsius to Fahrenheit, what's the first thing I need? If I want to turn something from Celsius to Fahrenheit, All right, what's the first thing I need? I need the value that's in Celsius, right? I need something in Celsius. Like I need the value that is in, let's see, Celsius, right?

I need the value that is in Celsius, right? If I don't have it in Celsius, I can't do anything, right? I need the value. is if I'm going to convert something from Celsius to Fahrenheit, I need something in Celsius, right? I think we don't, don't big brain it, right? Don't big brain it. Don't be like, oh, I got to get the input and then I take the value of it, but no. I'm going to convert something from Celsius to Fahrenheit. I need something in Celsius, great. So I need the value that is in Celsius. Once I have the value that's in Celsius, what do I need to do? I need to convert it, right? I need to convert it, convert from Celsius to Fahrenheit. Oh, sorry, spelled it wrong. There we go.

I needed to convert it from Celsius to Fahrenheit, right? All right, so I got the value that was in Celsius. I'm gonna convert the Celsius into Fahrenheit. And then once I have this new value that's in Fahrenheit, what do I do? What do I need to do? Yeah, I need to like show it, show it, boom, there we go. So I need to like get the value that's in Celsius. I need to convert it from Celsius to Fahrenheit and then I need to like show it Now the cool thing is we've done all of these steps already So if you go back and look at the examples we've done today and on Thursday of last week we have done each and every single one of these steps. So I'm gonna put five minutes on the timer And I want you to try and build out this actual conversion Five minutes on the timer, I want you to try it. Because remember, you're not coding, you're playing with Legos. Go and find the other Legos that enable you to pull something out, to get a value. Find the Lego that's gonna enable you to actually reassign a variable. Find the Lego that's gonna actually enable you to put it back into the DOM. See if you can go back and find those pieces and plug them in. You're not coding anything really from scratch.

You're gonna have to find the formula, but there's nothing really from scratch here. Go and find those pieces and plug them in. I'm gonna put five minutes on the clock here. And actually try and code this. Now, if you're saying, Leon, I have no idea what to do. How do I do this? Play with Legos. Go look at other Lego bricks. See if you can bring those Legos to this bit of code and see if you can do it. There's no wrong or right way to do this. You're just gonna go grab other Legos and use them. That's it. Try playing with Legos. There's nothing in the HTML exactly. You're gonna have to go get those Lego pieces as well.

You're gonna need an input. You're gonna need a button to click. You're gonna need a place to put it in the DOM. We've seen all those pieces already tonight. You got it. I believe in you. You can't be lost. You're on a roller coaster. You're in. You're exactly where you need to be. You're on the seat. You're strapped in. You're hurtling into the unknown. You're exactly where you need to be not lost. Play with some Legos on the way down.

This is a strange roller coaster, I agree. We're trying to do actual code now. We did our pseudocode, now let's try to do some actual code. Morning, happy tree. Aaliyah, sorry to hear that, but future you will be way happier. Musubi A. Glad to hear it. Is that a play on Musubi? Like the food? Musubi A? beans you're trying to do both you're going to try and find it and then put it in the Right spot. Yeah, okay. First I need an input, then I need a function to convert. Exactly. That's cool.

I love it. That's cool, bro. Dab, get out of here, dab. JavaScript's so hard, but it pays the bills, does it not? Does it not? Anything, what if Google Foo found us the code that already did it? I mean, in practice, that's a good idea, but when you're learning, Yeah, let's try and use the building blocks. We already have that's like that's like that You don't want to always go and get more bricks. You want to you want to play with the bricks that you already have, too? I can do this, but I need more time. That's okay. All right get where you can We're only going one way right now, Ivy, but if you want to take on that challenge, you can. I feel like I lost my bricks. Hey, sometimes when you're on a roller coaster, you drop a few of them. I assigned a variable.

No idea what to do now. Hey, it's a good start. What am I having for dinner? I don't know yet Domino's You get Buffalo nugs, there you go All right, folks. Come on back. You know, that's funny. Good JavaScript joke. All right, folks. Come on back. Let's take a look at this together. All right. Come on back. Come on back. All right, let's take a peek. All righty, so like I said, we're gonna go and get pieces from other stuff.

So let's do our, let's look at the Angry Parent Simulator. That's the Angry Parent Simulator. That's the thing we looked at most recently. Let's go ahead and take a look at that. I wanna look at the HTML first. All right, HTML has everything that I need here, right? Is there anything that I would need extra that's not already here in the Angry Parent Simulator? No, we got the form. We got the button and we got the place to put it. So I'm just gonna copy this And when I come to our temperature converter, I'm just gonna paste it Except I don't need all of them. I just need one, right? So I'm gonna give this the label of Celsius. So see. Yes. There we go.

And We'll give it the ID name of Celsius as well we give it the idea of cell and and I'm just gonna put in here Celsius value, cool. That's our form, right? We grabbed, make sure that Celsius, it's an input that has the ID of cell, right? ID of cell. And we have a button. I'm gonna change this button to, I'm gonna keep it yellow, who cares? And then I have H2, place the yellow. If the screen's blurry, that's that you gotta make sure that you use the right settings. Go ahead and do the quality settings. You can change it to what you want. You can also refresh sometimes that helps. Now, cool. All right, so now we've got everything we need. We got a place to put the Celsius value. We got the button to click that will help us with the conversion.

And I have a place to like put the converted value in. Cool. That's kind of all I'm gonna need for this to work because I'm going to need to get a value. I'm going to need to convert it and I'm going to need to show it. So I'm actually going to go back and look at the angry parent simulator again. I'm going to look at the JavaScript this time. And all right, here's what I need, right? Like I need this event listener. When I copy that, that's how I'm going to kick all this stuff off, right? And I'm going to need a function, but what am I trying to do here? I'm not trying to run, I'm not trying to run. I want to, this application is doing something, right? This application is doing something. Yeah, I'm converting, right? So maybe I'm going to call it convert, right?

So instead of run, I'm going to call it convert. Just, I don't know, make it a little bit more easy to read. And then I need this run here, right? Like this run, I'm going to copy this, but I don't actually need all this stuff. So I'm going to paste it and I'm going to get rid of pretty much everything that's in here. All right, actually, let's just get rid of everything at first, right? So I just have that place for my function, right? I, it's just, it's just taken from what we've already seen, right? Since I'm calling it convert, what do I have to change? What do I have to change? If I'm calling it convert, what do I have to change? You gotta change the name. I gotta change this from run to convert, right? So that way they match, right? Because the name of the function should match the function that you're calling or running, right?

That's the link there. And so what we're gonna do is we're gonna listen for a click on yell. When we hear it, we're gonna run these sets of instructions. And the cool thing is we have our instructions here that came from our pseudocode that can kind of just like plop in and I'm not starting from scratch, right? Like I was going to follow my instructions that I got from my pseudocode. And so this is the beauty of pseudocode. Early on, your pseudocode can be turned into your comments. So these, remember, these are called comments. The computer won't read them. They're just there for you and other developers that you're working with. And so if you write good pseudocode, you wind up with good comments. Later on, we'll talk about like clean code and best practice and all that crap. But for now, I love comments in my code because it helps me stay on track on the things I said I was going to do. All right. I need the value that is in Celsius, right?

Right? I need the value that is in Celsius. So I need to get the value from the input. Have we seen a way to get a value out of an input before? Yeah, we've seen that like a dozen times already. Let's just grab one here. Yoink. Copy. All right, boom. Get the value out of an input. But our input is not first name. What was our input? Our input had the idea of cell. Oh, let's go back. Let's change this from first name to cell.

Beautiful. So now I'm getting the value out of cell and storing it in a variable called fname. What should I call this variable? What would be a better thing to call this variable? Temp, yeah, I like that. Like temp, short for temperature, right? All right, that's the temp that we got. So we got the value out of Celsius and we stored it in temp. What do we need to do with temp now? What do we need to do with temp now? Gotta do some quick math, right? We gotta convert the temperature from Celsius to Fahrenheit. We gotta do some math. So I'm just gonna do reassignment, right? I'm gonna set temp to be equal to, right?

Wait a minute. Can I do this? Can I reassign temp to be something else? Why not? Why can't I reassign it? Const. Let's change that to let and let's go, am I right? Let's go. All right, so temp, all right? All right, temp is now able to be reassigned because it's no longer const. So we're gonna do temp and we'll do our quick math. So we'll do temp equals temp. And I see some folks throwing in, I'm gonna trust y'all. Temp times nine divided by five. I don't even know this works, I'm just trusting y'all plus 32.

Great, that was the quick maths, all right? So we got the value out of the input. We converted the value from Celsius to Fahrenheit. What's the last thing we have to do? Oh, our pseudocode already says it. Show it. We've already seen how to put stuff into the DOM already. Let's go back. Let's look at Angry Parent Simulator. Intertext, document, placeDL, intertext equals. I'm gonna copy that. Boom. And instead of it just being equal to what? What am I gonna set this equal to? Temp yeah, that's our variable.

All right. Let's see if this wild thing works All right, let's make a little bit bigger All right our Celsius value let's do zero it yell Boom 32 that works. Nice. Let's do a hundred. That should be 112. I start to 12 Boom working first try Let's go, we're a team, I loved it, we're a team exactly. First try, all right, now, we're gonna walk through it and talk through all the things, but did I use anything that we had not seen before? We have seen every single bit of this already. First try, thank you, Zaku, thank you. We have seen every single bit of this, except for like the math, right? But like you could have just done anything you could have just added five to it to see if it works, right? Like if you didn't do this math The first thing you could have done is like just plus five Right, and then if you're if you're just adding five to numbers The only thing you'd have to come back and fix is the math So a lot of times if I know I'm gonna have to go and find something else. I'll just put a placeholder in And then come back and actually do the math later on or whatever else I need later on, right? So you didn't have to start with the exact conversion math. You could have just made something up for now to get the bulk of the problem working, and then just come back and fix it.

But everything I literally copy and paste it from other stuff that we've already done. I grabbed the form. I grabbed the button. I grabbed the H2, right? I grabbed my event listener. I grabbed my sets of instructions or my function. I grabbed how to get the value out of the DOM. I grabbed how to do reassignment. I grabbed how to put stuff back into the DOM. So you have all of these building blocks, right? We have all these building blocks, right? That if you commit to putting these blocks into memory and commit to playing with them, deleting them, recombining them in different ways, you can do a lot of really cool stuff already. But it starts with your pseudocode. Before you do any other homework that's coding related in this program, before you write any other programs, always write your pseudocode. This would have been way harder if we did not write any pseudocode.

I like to play a game with myself, right? I like to play a game every once in a while. If I'm bored, the game I play is pseudocode. I know it sounds silly, but it's true. When I was in the T, I would play pseudocode. I was like, what would I need to do, right? What would I need to do, right? To flip that book upside down and the person not realize it. And I would sit there and be like, all right, First, first, I gotta cause a distraction. Then, I gotta kick them in the shin, right? Like, and you just think through it, right? But that's the idea. The idea is that this pseudocode will change the game. Before you do any coding projects, please think through your pseudocode. Cool.

I'll say it one more time. I've shown you a lot of code. Showing you a lot of building blocks, lots of Legos. You have to, in between classes, in between getting your homework done, you have to play with the Legos. None of this will ever click. None of this will ever sink in unless you try to build stuff, right? We saw some amazing projects from folks that just said, I wonder if I could make a nail polish picker. I I wonder if I could right do a Mortal Kombat changer, right? It starts with a what-if it starts with the playing it starts with the having fun We are all on a roller coaster playing with Legos. Have some fun with it. And when you get stuck ask good questions on discord All right, good question discord. I don't understand how this event listener works. I I don't get why my event listeners not working Here's my code. Here's what I'm doing. It's not happening, right?

Play and if you get stuck ask questions All righty Really important question You'll get all my code at the end of and in the class, of course So I always share my solutions. So if you need the code, you'll get it. What is the best TV show of all time? Go ahead and throw your answers in chat. So far, you are all wrong. I'm seeing Lost, I'm seeing Euphoria, I'm seeing The Wire, I'm seeing Brooklyn Nine-Nine. Little Britain, that's a good one right there. Dragon Ball Z, Seinfeld, Fringe, no, wrong, wrong, wrong. Rick and Morty, wrong. How About Your Mother, wrong. community wrong, Snowpiercer wrong, Firefly wrong, all great shows, Breaking Bad wrong, Game of Thrones definitely wrong, South Park wrong, Futurama wrong, Succession wrong. All right, you're all kind of just steaming out here. The correct answer is The Bachelor. The best television of all time is hands down The Bachelor. Now, in honor of Bachelor Nation, hashtag Bachelor Nation, the rest of our examples this evening will all be Bachelors related in an attempt to sway you into following the best TV show of all time.

So let's go ahead and do some more code and I'm gonna ask you to open up the starter code that is labeled bachelor. So let's go ahead and I'm gonna close all this stuff that we were doing here, all this inferior code, and we're gonna open up bachelor code. So in a bachelor code, you're gonna see that there are three folders, right? We lost some viewers, it's all right. They'll come back soon enough, right? We have three different folders. The first folder, we're gonna open up and do that one first. So there's an index.html, there's a JavaScript file. So let's go ahead and open up this HTML file. And here you'll notice that we have contestants from Juan Pablo's season of The Bachelor. Now, Juan Pablo's season of The Bachelor is hands down one of the greatest, Runs of television ever made right it is hands-down the most controversial season of The Bachelor And it is the most controversial season of The Bachelor for one very particular reason anybody know why Juan Pablo season was one of the most controversial seasons not only of The Bachelor history, but of all Elvis all cinematic and television history of all time Some of you got it. It is one of the greatest runs of television of all time because in the end, he did not propose. He gave Nikki the rose and it was kind of like, we could still do this thing if you want, but we ain't getting married yet. It blew everyone's mind. It was, it was, it was, uh, it was the, the, the travesty of all travesties.

and it made for one of the greatest buildups of all television history. So here we have three contestants on Juan Pablo's season of The Bachelor. We have Claire, who kind of went on to become a bachelorette but had her own controversy because she like met her boo like first class and I mean first class, first episode and like didn't want to do the rest of the season. So that was interesting. Uh, Nikki, who ultimately won Juan Pablo season, a bachelor pediatric nurse, very interesting person, um, but didn't get the proposal. And then we have Charlene, uh, the second love of my life. My wife is aware of this. It's my wife. And then at Charlene, we're cool with it. It's okay. Uh, and so we had all these individuals that were on Juan Pablo season of the bachelor, right? but Nikki was the only one right was the only one that got the rose so what I want to happen right what I want to have happen is when you click on final rose I want Claire to go away and I unfortunately want Charlene to go away and I only want Nikki to be left, right, to be left on the page because she is the only one that got the final rose. So if we look at our code this evening, you will see that there are three images, one for Claire, one for Nikki, and one for Charlene. And in our JavaScript, we have some code for you to fill in. Where you see insert code, I need you to actually insert some code.

And what should happen is when you click final rose Claire goes away Unfortunately, Charlene goes away and we're left with just Nikki So I'm gonna put two quick minutes on the clock here and I want you to try your best two minutes And then we'll go over it together Alright have at it I didn't even open VS Code yet. I nominate Leon for the Badger. I think my wife would have an issue with it. We can try though, we'll see what happens. Nikki was the one in the middle the pediatric nurse. All right, folks, minute left, minute left, and we're going to go over it. Do you listen to Charlene's podcast? Of course. I mean, I listened, I was, I would follow their blog for the longest time until they kind of like stopped it. It was a great read. So Charlene used to recap all of bachelor nation stuff. Uh, it was always something I looked forward to a lot. 30 seconds left in a lot of Dunn's seeing a lot of first try nice All right folks, let's take a look at this together. All right, so when we click on the H1 that has the idea of final rows, We want Claire and Charlene to go away, but Nikki should stay. So we noticed that the H1 has the idea of final rows.

So what do we have to do here? This is an event listener. So what do we have to put in here? What goes in this insert code here? What goes in there? Yeah, the name of the set of instructions, the name of that function is called hide, right? We can see that it's called hide. but we wanna run hide when they click on that final rows. And the set of instructions has two things that it wants it to do. We want to style display none. So the cool thing here is that you can look at something in the DOM and then you can change its style, like the CSS, right? You can change the CSS to be display none. Remember, when you display none something, it removes it from the DOM, right? It's no longer in the DOM, you can't see it, it's not there, it's not taking up space. So if we look, Nikki, sorry, Nikki has an ID of Nikki, so we'll stay away from that, but ID of Claire and ID of Charlene should be all we need.

So if we go in, we say, all right, I want the ID of Claire, and then I want the ID of Charlene. All right, so what should happen now is when we click on the final rows, Claire should be set to display none, and Charlene should be set to display none. I can't bring myself to do it. Let's just comment that line out. And then let's go back. Let's refresh. Click on final rows. Boom. Claire went away. Right. Claire went away. But Nikki and Charlene stayed. Right. If we refresh, The DOM gets repainted, right? The DOM gets repainted, right?

You click on final rows, boom. Claire goes away, Nikki Charlene are left. Cool. And just for folks that need the code afterwards, I'll get rid of my comment. Alrighty. Let's take a look at the next one. All right, so bachelor code number two. I'm gonna open up the HTML again. I'm gonna open up the JavaScript again, and if we look and open this in the browser You have the choice Over who the next bachelorette should have been it was very clear that Charlene should have been the next bachelorette It didn't happen cleared technically got their chance later on and then Andy was the next bachelorette Um, assistant district attorney from Atlanta. Like it was, it was an okay season, but they, they made the wrong decision at the end, but they just, they just made like one of the worst picks in bachelor history, right? So what I want you to be able to do is to choose who the next bachelorette should have been. When you click on Andy, I want Andy's photo to show up, right? When you click on Claire, I want Claire's photo to show up. Right? You click on Charlene, which you should, you want Charlene's photo to show up.

So I want you to be able to pick who the next bachelorette should have been. If we notice, there's the text that we're clicking on, Andy next, Claire next, Charlene next are the IDs. And then there are the images down here that we can't see at the beginning. So what I want you to do is I want you to take a few minutes and see if you can get Andy's photo to show up, Claire's photo to show up, and Charlene's photo to show up when you click on them. I'm gonna go ahead and put another, I know it's gonna be quick, just two minutes, and we're gonna go over it together. So I don't want to switch you to finish it in two minutes, but go ahead and try. Remember, the goal is when you click on Andy, You see their photo you click on Claire. You see their photo. You click on Charlene. You see their photo Go ahead and give it a shot two minutes. We're gonna go over it together Zuma make sure you saved and that you refreshed No, Megan I was in in Andy season I was a fan of Nick And I think she made the wrong decision in the end of that season. Alrighty. What do you think about Lindsay a few years ago? So I I have trouble visualizing people's faces I'm blanking on their season I'll think of once I see a picture of them. I'll be able to put it to and to Are you why so I always wait until seasons are done before I watch any of them and I normally give them a little bit time.

I used to watch in the moment and kind of like be really into like the blogs and stuff like that but now I kind of wait until the end just for for time's sake. You watch Bachelor in Paradise? Bachelor in Paradise is the best version of The Bachelor. Although the little unknown Bachelor Winter Games was interesting but Bachelor in Paradise is the best. All right, folks, come on back, come on back. Let's take a look at this together. Alrighty, so we want to be able to click on these names, right? the Andy, the Claire, the Charlene, and see some photos. Why are there no photos when the page loads? Why can't I see the photos when the page loads? Yeah, if we look, look. All the images have a class of hidden. Where can I check to see more about this class of hidden? Where can I go to see this class of hidden? Yeah, let's take a look at the CSS.

Boom, all right. So in the CSS, we have this class of hidden, right? So it's this class, right? It's this class that is removing or doing the display none. So, if we got rid of the class, right? Right? If we got rid of the class, we should be able to see the photos. Right? If we look, we see that they all have hidden by default. So, if we are able to get rid of that class, then we should probably be able to see the photos. So, let's take a look. Let's look at Andy's first. So here I did something where variables, this is like the first time we get to see a variable be useful. So here I did document.querySelectorAndy. So I am looking at the HTML and I'm grabbing this image, right?

I'm selecting the image from the DOM. And I'm saying document.querySelectorAndy and I'm storing it in the variable Andy. Why the heck would I do that? Why would I like look in the DOM, find the image and store it as a variable? Why would I do that? Yeah, so I can reuse it over and over and over again without having to say document.querySelectorAndy, document.querySelectorAndy, document.querySelectorAndy, right? I can go down here and I can just say Andy, right? If I just say Andy down here, what I'm really saying is go into the document, find the image that has the idea of Andy, right? But I'm just storing it in this variable called Andy so that my code looks way cleaner down here, right? And we talked about kind of being dry, do not repeat yourself. And so this cuts down on me having to say document.querySelector over and over and over and over again and it's stored in the variable called Andy, right? All right, so let's click on Andy. So document.querySelector, andyNext, that's the text. Remember, if we look, here's the text of andyNext, right? So that's the text that we're clicking on.

So here's the text, we're gonna click on it. We have an event listener, and that event listener should call what function? What function should this call? What's the name of the function? Yeah, if we look, the name of the function is called andyNext. So we should type in Andy next. Beautiful. Andy next. All right. Now, when we click on the text and we run that function Andy next, we just clicked on Andy, what do we want to do to Claire? What do we want to do to Claire? If we're clicking on Andy, should Claire be visible? No. So how can we make sure that Claire is not visible? What class can we give them?

Yeah, we can add that hidden class. Right, we can add the hidden class. And the reason why we wanna make sure that we add the hidden class to Claire and make sure we wanna add it to Charlene is because we don't know if Claire or Charlene they're already visible, right? We could be somewhere else in our code where we had just clicked on Claire and Claire was visible, right? So we want to make sure if we're clicking on Andy, we want to be super clear that Claire is gone and Charlene is gone, right? But what do we want to make sure with Andy? What do we want to do with Andy? What are we going to toggle? What are we going to toggle? Hidden. So you're like, Leon, what the heck is all this mean? What does all this mean? Well, remember with JavaScript, we can mess with classes. We can add and remove classes. That means we can add and remove classes to that DOM, right?

We can add or remove classes to the DOM. And so here, what I'm saying is, A, find Claire, which is the image, right? remember the image, and give it the class of hidden, right? Add the class of hidden. Then find Charlene, the image of Charlene, right? And add the class of hidden, all right? Now toggle, what do you think toggle means? Toggle is the same thing as a light switch, right? If the light is on, right? If the light is on and you hit the switch, light goes off. If I hit the switch again, light comes on, right? So it toggles on and off, right? And so the cool thing here is if it already has hidden, it's going to remove it. If it doesn't have hidden, it's going to add it. That's what the toggle means, on and off.

Let's take a look. Let's save this and see where we're at. Come back, let's refresh. Let's click on Andy. Nothing happened. Oh, no Nothing happened. I refreshed Nothing happened. Let's go back. Let's take a look Did I do everything right? All right Andy next What am I missing? What am I missing oh You know what all? All this other stuff is probably giving us an issue because we haven't fixed it yet. Let's actually open up the inspector if we can see anything in here. Let's take a look. Go to the console.

Unexpected token on line 16. The inspector is saying, hey, there's an error that you have. Unexpected token line 16. You see main JS line 16. Let's go look at line 16. It does not like our code here, right? It doesn't like the code here. We haven't filled it in yet. So it's like, oh, there's errors, there's issues. So let's comment this out. And let's comment out these two things as well, right? So now it's just the code that we wrote, right? Now it's just the code that we've worked on so far. Let's go back, let's refresh. And now let's click on Andy.

Beautiful. Andy's photo comes. And if I click again, Andy's photo goes away. Let's look in the DOM and see what's happening. So here are the images, right? Here are the images, right? Look at Andy. Look right here. Right? Look specifically at this class. When I click on the text of Andy, when I click on Andy for the first time, what's gonna happen to that class? When I click on Andy, what's gonna happen to that class? Gonna toggle off, it's already there, so the toggle's gonna remove it. Boom, it's gone. So that hidden class is gone.

If the hidden class is gone, we can see the image. Now, if I click Andy again, what's gonna happen to that class? We're gonna add it back. So right, I'm gonna click three, two, one. Boom, we can see that hidden class come back. And as soon as that hidden class comes back, Andy's photo goes away, right? So what I have done is I have set up an event listener so that when I click, I'm either adding hidden or removing hidden. Now, the other thing here is that Claire and Charlene are also getting the class hidden, but does it matter? No, because they already have the class of hidden, right? If we look, we're saying give Claire hidden, we're saying give Charlene hidden, it just doesn't matter because they already have the class of hidden, right? But for Andy, we're toggling that on and off. Cool. All right, let's go ahead and do the next one for Claire. Actually, we're gonna do both of them at the same time. Let's go ahead and uncomment this.

We know that this should be ClaireNext. Cool, because that's the name of the Claire function down here. And this one is called CharleneNext, So we can fill in that event listener as well. Let's go ahead and do Charlene next. Beautiful. Charlene next. And then let's make sure that our functions are working well. So if we're clicking on Claire, Andy should be what? Andy should get what? What should Andy get if we're clicking on Claire? Yep. To get hidden. All right. And Charlene should get what as well. Same thing, right?

Charlene should get hidden. Beautiful. And then Andy, I'm sorry, Claire is the one that should be toggled. All right, so we'll toggle hidden there. That's what folks are saying, is there a way to make this drier? There is, but we're not there yet. All right, and the last one for Charlene, we'll do the same thing again. If we're clicking on Charlene, then Andy should go away. So we'll do the hidden here for Andy. And then we'll also do it on Claire. That should be hidden. And then the last thing we have to do is make sure that Charlene is the one that is getting the toggle. Now some folks are saying, hey Leon, why don't you need to do dot hidden? Like, since it's a class. Well, you've already told it that it's a class here.

So you don't need the dot inside of here. Cool. All right, let's save all this stuff And let's go to town. Let's go ahead and see what we got. All right, let's open up the DOM here so we can see these lovely images. You can see to start off, they all have hidden. And let's click on Charlene. All right, Charlene's lovely photo pops up. You can see that Charlene is now missing the class hidden. And here's the cool thing. If I go over and I click on Claire right away, boom. You can see that Charlene gets hidden, but Claire gets the toggle, right? Claire gets the toggle. And so the cool thing is you can jump now between each person, right? You can jump between each person and it'll hide if the other ones are already visible.

So if I go to Andy, I know that Claire and Charlene are gonna get hidden. Only Claire showing right now, but I'm gonna try and hide both and then show Andy. We also have the toggle, right? So we can toggle Andy away as well. All right. So we can do the toggle all day. We can then jump between different ones and know that as we jump to each person, the other ones will hide and we can still toggle on the people that we're at. Pretty nifty. All right. One more and then we'll end class. One more example, then we're gonna end class. Let's go ahead and take a look at number three. I'm gonna close all these here. Number three. All right, I'm gonna open this in the browser.

All right, so, chat. Let's make sure that we've all been paying attention. In Juan Pablo's season of The Bachelor, who ends up with the rose? Who has the final rose in Juan Pablo's season of The Bachelor? Wonderful Nikki is the one that has the rose. So what I want to have happen is if you click on Nikki, it should show her wonderful photo. And if you click on Claire, it should alert wrong. Right? So Nikki lovely photo, Claire wrong. And so let's go and take a look at this code. You can see that there are two contestants, one with Claire and one Nikki. You'll notice that only Nikki has the class of Rose, right? Both of them have the class of contestant, but only, thank you, MMB, but only Nikki has the class of Rose. So what I want you to do is to write some code that's going to enable only Nikki's photo to show and if they click on Claire to say wrong. I'm going to put two minutes on the clock.

We're going to go over it together and then we'll do a raid and end up class. All right, go ahead, two minutes, try it. Remember, you don't have to know anything that's happening in this code base. Just use the building blocks you've already seen. Don't get hung up on the syntax. Don't get hung up on new stuff being thrown at you. Do what you know how to do fix the things that you know how to fix Milk thank you for the hydration Cheers to you Got a minute left and change. Now I said boom 30k channel points baby steps to a milli in New York. I'm really wrong. I didn't in my sock. I know from these hops a Lot of dimes nice A lot of dimes. Okay. Okay. See you 30 seconds and then we're gonna go over together Sometimes the playlist just gets it right. All right, folks, come on, let's go over this one together and then we'll wrap up with a raid.

All right, let's look at this one. Alrighty, so we wanna be able to click on Clarency wrong, click on Nikki and see their lovely photo. So if we look there's some wild sauce going on in here, right? First we're saying document query selector all So we've only seen query selector so far right like we see query selector here What do you think query selector all enables us to do? Yeah It was just to grab all of them right everything that has a specific what we're just gonna use a class Let's go ahead and use the class contestants, right? We look, we have the class, oh, it's contestant, not, no S, contestant, right? Boom, let's just copy to make sure we spelled it right. Contestant, right? And so that's gonna enable us to grab all of the elements that have that class, right? Grab all the elements that have that class. Now here, we have some fancy pants code. Don't worry about this code for now. What this enables us to do is it enables us to put a smurf on every single thing that had the class of contestant, right? This fancy pants code just enables us to plop smurfs on every single thing that had that class, right? So if we're gonna put a smurf on, we're gonna make sure that whenever we click on any of those things that have that class, we're gonna run what function?

What function are we going to run? What function are we going to run? Cool check for rows exactly. Beautiful and so now if we just save this, what we have right now is we have selected everything that had the class contestant, which means that both Claire and Nikki are now selected because they both had the class contestant and with this line of code, we've made sure that both of them have this click event tied to it. They both have the same Smurf, same type of Smurf listening for that click. And so what we're gonna see is we're gonna say, hey, the thing that we just clicked on, right, that's what we're saying. The thing, click.target, the thing that we just clicked on, does it have the class of what? What are we looking for? The thing we just clicked on, Does it have the class of what? Rows, exactly. Looking for the class of rows. We're seeing if it has the class of rows. We've already said that we're looking for a class. So do we need the dot? No, we already said we're looking for a class.

So we're saying, hey, the thing, the click.target is the thing we just clicked on. Does it have the class of rows? If it does, we know that we've clicked on Nikki and we should toggle the hidden class, right? We should toggle the hidden class, right? We can see that Nikki by default has the class of hidden. So we should toggle that hidden class. And if it doesn't have the rows, we know that it's not Nikki, right? Right, we know it's not Nikki, so we should alert wrong. Let's go ahead and save it. All right, let's go ahead and save it. Let's see if it works. Clicked on Claire, we got the alert of wrong. Click on Nikki, we get our lovely photo. A lot of folks are saying, Leon, why don't you need the dot hidden here? Well, we don't because we've already, oops, sorry, we've already said that it's a class, class list.

We don't need the dot here because we already said that it's a class. Up here, there's nothing to say that we were talking about a class, so we needed the dot. All right, I know this is a lot, I know I threw a lot of code at you, but there's something I need you to do between now and next class, and that is what, what do I need you to do between now and next class? I need you exactly, I need you to play with it, we've talked about a lot of Lego bricks, There are a lot of Legos here on the table that I need you to play with break Try and understand how they come together try and put them together in different ways No, no There should be nothing in you that says I don't get this There's nothing to get about Legos. You're gonna try and play with them. You're gonna retype everything out. You're gonna delete it You're gonna retype you're gonna delete it redo it type it. You're gonna do it over and over again You're gonna play you're gonna break and move it around but you're playing you're trying to have fun Don't let any of that negative energy come on you. Don't let the imposter syndrome sneak in and get got. You're literally playing with Legos on a roller coaster. You should be having the time of your life. This has nothing to do with your aptitude or your ability to get this. This is class two of many, many, many, many more to come. So please have fun, play, break down, digest, try and get it to go different ways, upside down, around the corner, on the block, right? Do all these different pieces, right?

And try to bring them back together. All right, let's do a raid. I always like to end with some positivity, some love. Please give them some follows, right? I'm gonna hang out with them for a while. We've been there before. I don't think we've done it this cohort, but they're good people. Oh, let's go ahead. Oh, actually, before we do the raid, I just wanna talk a little bit about the homework. There's some more stuff for you to read for homework. Make sure you go ahead and read. This will be due next Tuesday. And please delete all the JavaScript. Do it again, play with it, break it, build it up. And then I'll see you all on Thursday.

So let's go ahead and set up the raid. And I will see you all over there. Have a wonderful rest of your night. It's been great hanging out with y'all. It's been fun going into JavaScript for the second night. Let's read.

End of Transcript