Introduction

Good morning, good afternoon, good evening, no matter where you're coming from. Hope y'all are doing well. Welcome back Yeah, let's go turn up. Welcome back everybody. Good to see y'all Glad to have you back Whoo Alrighty folks Versatile three wait till you hear eight Rari paper plate. Let's go folks day three of JavaScript turn up What's going on everybody? Glad you're in here. Glad you're in here. Let's get some folks in here. We got a, we got a good question today. You know, we always like to start off with our questions of the day. And our question of the day today is, would you rather be an extra, like in a really good, like Oscar worthy film or would you rather be like the main character or have a like a really big part in a like a terrible movie extra in a really good like Oscar worthy movie or like like big part in like just a horrible trash movie oh this one's this one's split I'm seeing I've seen a lot of extra and then it goes a lot of main. I don't know You should be in the background of like that that big movie or you could be the The the leading role or the big part in the bad movie, right? I don't know. I think I'm gonna go with I Was I was actually the I was leaning towards extra But I think I'm gonna go with big part in a bad movie, right?

Big part in a bad movie. And the reason why is because like, I would love just to be able to like, share that. Like just to be, this is like a meme amongst my friends. Right? Like I think I would get more enjoyment out of that instead of being like, oh look, I was in the background for a second. You know, maybe, who knows? Maybe I'm an actor at heart, I don't know. Still got a lot, it's pretty split. I'm surprised, yeah. Cool, alrighty folks. Thanks for getting in here. Glad you're here. Welcome back. As we always, let's start off with some questions. Let's get some questions as folks get in here.

Let's get some questions as folks get in here. Always like to give folks a few minutes to get in here. I know you're running from work or the kids or whatever you're doing. Welcome. Pepsi or coke coke absolutely all day long like why it's not even a question There is a there's like a joke that people used to do And I did it one time at a restaurant when when the waiter comes over and they say like hey, would you like? What would you like to drink and you say like, oh, I love like a diet coke and they go Oh, I don't I don't have coke. How about Pepsi? No one ever says like absolutely not how dare right and so Some people are like this. It was like a meme for a while. People were like, absolutely not. Like, no way. Like, what are you talking about? I'll take water, right? The good old days when I was a kid. Yeah, the interesting thing is the, the like, I think those handily think Taco Bell is like propping up Pepsi.

I think if Taco Bell got rid of Pepsi, It would just go to shambles the the what was the the Baja blast that saved Pepsi Other questions folks other questions that are not Pepsi coke related It's just a flame war between Pepsi and Coke right now. Dominoes are dominoes, definitely dominoes. What do you do in your Pomodoro breaks? I do what everything I tell you to do. I get up, I do a quick stretch. I do a specific back stretch that I've shared because that's the only that's that's what starts to hurt. The longer I sit down is like my hands my wrist and my like like my mid the upper back so I get my stretch in Sometimes I cuddle a dog or two. I grab some more water if I need more water and then I come back But I also I stare out the window Like there's definitely people near me that are like why is that I always staring in the in the window Yeah, you ever use standing desk yeah, I mean this the desk I'm on right now is a standing desk I actually even have like a treadmill that goes underneath of it that I use every once in a while. That's really fun All righty folks Freelancing class good question Tuesday so next class is our freelancing class. I'm super excited So yeah, a lot of folks have been asking questions about freelancing. They started telling folks about freelancing. They're starting to get some leads So yeah, next class is our freelancing class. Definitely, hands down, one of my favorite classes. You absolutely do not want to miss Tuesday's class. It's a lot of fun.

And let's get you some money, y'all. Get you some money, y'all. All right. Thank you for the questions. And Kelly with the hydration, cheers to you. Thank you very much. We're gonna see hydration's gonna be a theme this evening. Hydration's gonna be a theme this evening. Alright folks. We're doing it all over again. We're doing it again. We're gonna, we're gonna, we're gonna loop the beat and do it again. So you're like Leon, this agenda looks exactly like the agenda from last class and the astute ones among us would be correct. This is the exact, exact agenda from last class. Guess what?

It's the same examples. Thank you. It's, It's it's the same examples. It's the same code. Cause what did I ask you to do? I asked you to go ahead, delete it and then redo it. So guess what we're going to do? We're going to get our spaced repetition in. We're going to delete everything. We're going to redo it. And this is great for every level here, right? I don't care if nothing clicked and I don't care if everything clicked. Loop the beat. Do it again. Come back, make the neural connection stick When you have time to delete everything and do it, see how fast you can do it.

See how good your recall is. Push in that moment, all right? We're doing it all over again. So ask good questions. When things don't make sense, ask those questions again. We're gonna redo it again, all right? So if you kind of last Tuesday's class was a little panic-inducing, that's all right. We're here to enjoy a rollercoaster ride, to play with some Legos, and we're gonna play with them again, right? The interesting thing is we are at a point in your learning journey where it's not about understanding the raw concepts, right? It's not about understanding, like even though we're talking about the big four, the variables, the conditionals, the functions loops, even though we're talking about them, we're not really there at the point where we're breaking them down and really understanding those components. We're literally just trying to see stuff and play with stuff and interact with things so that when we actually do tackle those subjects for real, it's not your first time seeing them. That's the whole point of this and last class is you just see stuff in action. If you've never actually seen JavaScript, it's a fool's errand to jump in and have a complete understanding of conditionals, loops, functions. It does nothing for you. You haven't seen it in action.

So today and Tuesday is about seeing stuff, playing with stuff, breaking stuff. I don't care if you don't understand query selector or add event listener, we're not there yet. Your idea is to see, oh, there are all these blocks that can come together. Let me play with those blocks, right? That's the goal. So many folks wanna run right into an academic understanding of JavaScript and it doesn't work for a lot of folks. So let's play, let's build, let's break, let's see how fast you can redo these challenges if you already have everything clicking for you. And for folks where you're still kind of picking up the logs, but it's not syncing, that's what tonight's for. So this is hopefully for everyone, for folks that are feeling like things aren't clicking, and for folks that feel like things are really clicking, this is a lot of value for both of you. So even though we're redoing everything, it's how fast can you go through the things? What can you recall? What do you remember from last time delete it all do it again? Cool Before we jump into class um from the From the very beginning course I ever did online So for those that don't know the 100 devs history I posted on reddit Oh, what is it now? Almost it's definitely over a year almost two years like a year and a half year and a half ago and I had a intro class. It was just going to be like a five week class, right?

I just wanted to see if I could do this thing online. And so there are some folks that are still with us from that original five week journey. A lot of them are mods now, but there are still a lot of folks around from that five week journey. That five week journey turned into the first iteration of a hundred devs. And then we're here in the second cohort. But from that very first cohort, That that smaller five-week course we had folks from Ukraine Right from there from the very beginning. There were folks from Ukraine. So tonight My thoughts my feelings my prayers everything I can send your way goes out to y'all If you are on discord and there's a way that I can help or that this community can help please reach out. We're here So I just wanted to say before we jump in tonight You've been a part of this community from the beginning. We're here for you. Let us know how we can help All righty We're gonna go ahead. Yeah, please be safe We've posted some resources Chris one of our mods posted some resources in the general channel If there's things we can do to help or assist or spread things. Let us know. Oh All righty We also have a lot of folks from Canada that are originally from Ukraine so I know that a lot of your friends, your families are in it right now, so all my love to you, hope everyone's safe, hope everyone's doing well. Alrighty.

Tonight, we're running it back. We're talking about programming, JS basics, we are going through all the previous examples, we're gonna see everything again, we're looping the beat, we're doing it all again. All right. Talked through some questions. I want to jump right into it. It's a lot of stuff to get into. And we're going to add functions on at the end. Right? We're going to add functions on to the end. Right? So if everything is feeling good, we're going to keep pushing and we're going to add this next of the big four. The functions. And so I'm really excited to get these functions locked down. We've seen functions. We've played with functions, but now we get to actually use them and understand them We're gonna talk about arguments parameters all that fun stuff, and then you're gonna have some homework to get into Alrighty checking in if you haven't checked in please please do Go ahead and you do exclamation point check in here in chat also always in the following materials channel also always on The go live message or if you just follow me on Twitter you go ahead and do that cool Now, something really, really important that I've brought up before, but I need to bring it up again because it keeps happening, okay?

I am never, ever, ever going to text you. I don't text my friends. I'm definitely like not, like, I don't text, right? I'm not gonna text y'all. Right? I'm not gonna text you. You're never gonna get a text from me. It's just not gonna happen. I don't text. It's just not, I just don't do it. I'd rather call people. But I'm never gonna text you and I'm never gonna call you. You're never gonna get a call from me, ever. Ever, ever, ever. Never gonna get a text from me.

You're never gonna get a call from me. You're never going to get an email from me that is not also posted on discord. You're never going to get an email from me that's outside of the newsletter. There's never going to be like an email where I'm talking directly to you and only you. Right? It's always going to be a generic newsletter that's going out. So I'm never going to text you. I'm never going to call you. I'm never gonna send you an email outside the newsletter. I'm never gonna DM you on Twitter. Like I'm not gonna reach out to you. Maybe if you DM me, I respond to you, but I'm not gonna ever reach out to you on Twitter. I'm never gonna DM you on Discord. Please don't DM me on Discord. I don't check them.

Modmail, AskLeonChannel, right? So I'm never gonna text you. I'm never gonna call you. I'm never gonna email you outside the newsletter, hashtag newsletter, by the way. I'm never gonna go out of my way to DM you on Twitter. I'm not going to DM you on Discord and I'm never ever going to ask you for money. Ever. Because there's like this same scam that's been going on for like a year now where somebody texts someone and they're like, Hey, do you got a minute? Right? They say, Hey, do you got a minute? And then it's like some weird jumble mess where they want you to send gift cards. I'm never going to text you. And if I text you, I'm not gonna be rude about it. That's the thing that gets me the most about this like scam is they're just they're just rude Like I would never be that rude if I was gonna text someone I'm not gonna like text you and then say hold on. I need a I need a minute Like I like it just no like first like do better like scammer do better.

Like i'm never gonna be rude Right, like get out of here Um, but i'm never gonna text you i'm never gonna call you i'm never gonna email you i'm never going to dm you i'm never gonna discord dmu and I'm never ever gonna ask you for money. So I just need to put that out there because there's always people that are sending like fake emails with my name on them, fake Twitter accounts, a bunch of stuff. We have a really big community. Don't get scammed. Grandma doesn't need gift cards. I'm not stuck somewhere, I don't need your help. I'm not gonna call you if I do need that help, okay? Okay, so please be careful in these streets. I love you all, I just ain't texting y'all, all right? So be careful, don't get got, don't give money, don't buy gift cards for people, like this doesn't make sense. And if you get a message from me and they're rude, just know that that's not me, I would not do that. All right folks, be careful in these streets, I just need to put that out there, don't get got. And also if you're scamming, do better. Like these are like, they're like, they're dumb scams. Be better.

Come on. Have pride in yourself. All right. Anyway. Speaking of friends, speaking of friends, we have the study communities that have been formed. Folks that filled out the original two forms have been added. Folks that were late to filling out the forms or something funky happened. you've had the chance to fill out the additional form. So as the moderation team has time, we'll go through that list and add folks, but it's gonna be a while. We need a little bit of a break before we can kind of keep chugging through that. We won't be adding more folks to them if you haven't filled out the forms. And I just wanted to say like, it's just an extra space for you to hang out, right? Just an extra space for you to interact with folks. It's not something that like you're missing out on a quintessential experience. It's just a smaller place to hang out to get to know folks.

And so we're gonna have a networking night in a week's time, so not this upcoming week, but the following week and Kind of similar how we do a remote. We're gonna try using a different platform And we're going to have like a really fun networking night where we're gonna network between all the different study communities so I know a lot of folks have been trying to Think about ways that they can that they can kind of join the study communities Puzzle a thank you for the raid. Hope you're doing well. Thanks for bringing the crew by Thank you so much, I hope you're doing well What were y'all up to were y'all working on? Or doing Welcome welcome Thanks for the raid So for folks that are new to around these parts, we're running a free 30-week software engineering bootcamp. And so this is class 14 of that bootcamp. We're getting into some fun JavaScript tonight. Hope your stream went well. What were you up to? Cool. So, study communities, networking night, not this upcoming week, the week after, right? And so, just let you know that's gonna happen. A lot of folks have been asking, especially in the location-based channels, right? In the location-based channels, folks have been asking, hey, I'm in this very specific area, how do I connect with folks? Create a thread.

We turn threads back on in the study communities in the location channels. So if you are in a specific location channel, but you wanna talk to folks that are, I think somebody asked about Minneapolis today, right just create a thread for Minneapolis inside of your location channel Be careful. Like if you create like outside discords and you leave people to that discord that does violate our rules We will we will kind of ban you like we're just gonna be real about that Yeah Yeah, so please use the threads don't lead people to unmoderated spaces. That's one of our biggest rules ATX Yeah, we're coming for you. Yeah, and for folks that haven't been added yet, that's okay, we're gonna work through that list as we can. Cool. Alrighty, folks. Submitting work, there's nothing to submit tonight. All right, nothing to submit tonight. Please make sure that you are still doing the work. You're doing the reading. You're doing the task, right? All right. We're doing the tasks. Make sure you finish up those tasks because next week I'm gonna ask you to submit proof of those tasks, right?

So I'm not asking for it tonight because I know some folks are still on the reading, but make sure you're doing the task at the end of the reading and I'm gonna ask for you to submit those next week. But tonight, nothing to submit. Make sure you're still getting the reading in. Make sure you're still getting done the repetition in and we're gonna add on to that homework this evening well One of the Common complaints we've been getting is that at some point storing stream Folks that don't have a sub The ad start playing and they can't hear me Or new folks that join us they they get ads and they have to wait through the ads before they can join the stream So I don't really have a hundred percent control over when ads run. I'm not running ads. It's kind of a twitch thing Um, but apparently if I run ads and I think we tried this last cohort too if I run ads Um during our breaks that would stop ads from running Running, uh during the stream. So when we take our breaks and we're like walking away for five minutes I'm gonna run three minutes of ads Not because I want to run ads. It's just so that folks that don't have a sub or a gifted sub don't get ads if they're not using some other means. Okay? So make sure to put that out there. So I think that solves it because you should be like getting up, walking away. I'm never saying anything anyway. And so when we take our break, I'm going to run the ads. That way folks that are here and don't have that privilege just don't have to sit through ads and they can hear us. Cool.

Dabble, hey, thank you for the gifted subs. I appreciate you. Thank you for being here. All right. Coffee chats. I got a bone to pick with some of y'all, honestly. Something I wanna bring up. Look, when somebody goes out of their way to set up a coffee chat with you, please show up. Don't ghost them. At least send them an email or a message saying, hey, I can't make the coffee chat. Don't be disrespectful. Don't be rude. Like that, people are taking time out of their day to meet with you. They schedule some time with you. Show up like we've had some folks come to me and say hey Leon.

I set up a bunch of chats with Some some folks from 100 devs and they didn't show up So not only you ruining it for yourself, but you're also ruining it for everyone else in 100 devs So, please if you know, you can't show up the coffee chats. Don't book them Don't reach out the folks and when you do have a coffee chat, it's okay If you're going to miss it, but you gotta let people know you got to send them an email You got to send them a message, right? Don't be rude, don't be disrespectful and realize that you're ruining it for a lot of other folks, not just yourself, okay? So please make sure if you're doing these coffee chats, you're reaching out to folks that set up time to talk to us. We have so many wonderful folks that have been setting up calendars specifically to help folks from 100 devs, right? Specifically to help folks that are in 100 devs. setting up hundreds of chats really, show up. I'm gonna say if this keeps happening, this will definitely be put into our rules and will lead to a ban. Like we just can't have it. Show up to your chats or at least let people know. It's just something that really looks bad. So please don't make us look bad. All right, cool. Next thing. We're, we're two classes into JavaScript folks, two classes, two, I need everyone to take a second, take a deep breath, take another deep breath, let it go, you're two classes is in the JavaScript.

It should not make sense. It should not be clicking. You are learning a brand new language. You should have a handle on a few words, but really have no idea how to put those words together. Think about if you are learning a brand new like spoken language. If you were two classes in, you would know some vocabulary, but you probably wouldn't know a lot of grammar. Like you're not gonna know how to like put the words together. You're gonna be able to recognize, oh, that's an event listener. I don't know how it works with the other stuff or that's how I grab something from the DOM but I don't know how it works with the other things, right? We're here to play with some Legos, right? We're here to play with some Legos. You're two classes in. You can't put that pressure on yourself. You can't put that woe is me into your head. You can't let the imposter syndrome creep in.

We talked about imposter syndrome for like an hour last class. You can't let that creep in. You're two classes in. For some folks, JavaScript clicks very quickly. And for some folks, it takes a little bit of time. but that's how everything goes in engineering. Some topics come quick, some topics come slow. And just because JavaScript is not coming quick to you doesn't mean other topics won't. Every single time I teach, there are folks that get certain topics faster and some that take a little bit longer. It's just due to the mental models that we already have in our brains, right? And so you can't be mad at the person that's on the same roller coaster that's a few carts ahead. Take your time, take some deep breaths, take some of that anxiety and imposter syndrome off of your shoulders, right? It will work, it will click, it will happen for you, but this is not the week. This is not the week for most of the folks. And another thing too, is you have to be willing to play, right, be willing to play.

One of the coolest things that I've been seeing on Twitter and on Discord, it's just folks that are playing, right? That are being like, what if I change this background? What if I make this click event do something else? So don't be afraid to play, don't be afraid to try and change things, to break stuff. And when things don't go your way, get on Discord, get in the JavaScript help or the homework help and ask questions. Why does my click event not work, right? The thing that I want well, I like the one thing I just don't want you to do is When other folks are sharing things they put a lot of hard work into right? That should not be something that makes you upset about yourself, right? That's not something should that should make you feel bad about yourself because somebody else had a good project so far You have no idea of their background their experience their previous mental models the things that enable them to learn that material, or how much time they had to play, how many times they deleted, redid, broke, didn't work, did work, right? You have no idea. You have no idea the privileges they have or the privilege of time that they have. You can't look at what other people are doing and compare that to yourself. We're all on the same roller coaster. We're just in different spots. Right?

And so look at yourself. Can you do something more than you could do last class? Can you do something more than the class before? Are you progressing? Are you putting in the work? Right? Are you putting in the work? Are you deleting, redoing? Have you done that? Have you deleted and redone it five, six, seven, 10 times till you don't have to look at it anymore? Because that was the homework. That's what I asked you to do. Right, did you do that? Because if you haven't done that, then you don't have room yet to feel bad. Right?

You have to make sure that you don't, if you still have to look at the code to type it out, you haven't done the homework yet. And that's a good thing. That's a great thing. I love when people come to me and say, Leon, I didn't do, I didn't put in the work. Great. Cause you could put in the work and get there. Right? You got some room to improve. Exactly. So put in the work, give yourself some time. And if you did put in the work and things aren't clicking, that's okay. You don't discord ask questions thing will come with time and guess what we're gonna do it all again tonight We're gonna get our space repetition in I Preach space space repetition and then we do space repetition because it works I don't care where you're out on the roller coaster. You can all benefit from space repetition Right letting those neural connections really solidify right really locking things down pushing yourself to see if you can recall And so when somebody else posted something on Twitter, that's an amazing project, congratulate them and know that you'll get there soon if you're not there yet, but you have to put in the work. Impostor syndrome has no room for these next couple of weeks. It just, there's just no space for it.

Don't allow your brain to have space for that because you're two classes in. You would Never ever put that stress on yourself if you are learning another another language Right if you were learning japanese or or spanish for the first time You would never you would never say to yourself after two classes I'm mad that other people can speak more than I can it just does it's just not it's not it's not fair It's not fair to yourself You got this it will click give yourself time put in the work ask tons of questions one of my favorite things I loved when we um When we rated Splashly, Splashly said something really impactful that I think helped a lot of folks. And they said the number one mistake that they made early on was what? Anybody remember what they said the number one mistake they made early on was? Exactly. They didn't ask enough questions. You gotta get over that mental hurdle that stops you from asking questions, right? And when I say mental hurdles, I don't, I'm not trying to alienate folks that have issues that prevent them from asking questions. That's not what I'm saying. If you do have that, please, find folks that can help with those specific issues. But for the folks that don't have those, you gotta be able to break through that barrier that says I shouldn't ask questions, right? It's such a common theme for new students to JavaScript, right? It's such a common theme for new folks to coding to not ask questions. Because when you ask questions, some folks feel, and I'm using this term, like they feel not smart. Right?

When they feel like they have to ask questions, they feel like for some reason they're not smart. Yeah, the smartest folks ask the most questions. Right? The most brilliant people I've ever met are the people that sit there and ask question after question after question. I've been around some smart motherfuckers. I taught at Harvard, I taught at MIT, I've been around some brilliant ass people and the most brilliant people I've ever encountered asked so many questions. They didn't let that thing in the back of their brain tell them, right, that they shouldn't ask. They didn't care. They wanted to understand and the only way to understand a lot of new topics is to ask questions and to get better at the questions that you ask. Asking questions is a skill, right? And you get better at it the more you do it. Eventually, you'll be able to ask questions that laser in on the problem that you're having and things click that much quicker. But it's a skill you have to build up. So give yourself some grace. Give yourself some breathing room.

Things will come with time if you put in the work and realize the biggest thing you have to do right now is ask questions. Cool. All right Now tonight Night The hydration is cheaper folks Hydration tonight is only 3 000 channel points. That's a that's that's 66 off folks and so I think I set it up that we can do one hydration every 10 minutes and so Mike crow soft thank you for the hydration. Only one person can do it every 10 minutes, but the hydration is out of discount. Is that an all-time low folks? Okay. So is this bait? I'm just trying to get people away from the from the from the only fans, right? So tonight I want you to hydrate with me. We're doing review. We're looping through everything again. We're doing everything again. It's going to be a lot of the same material. It's gonna be a lot of the same talking a lot of the same thing.

So I want us to go through this Review this this repetition in a healthy manner. We're gonna take some of the stress off our plate We're gonna hydrate together And so if you're able What I want you to do right now is to go get something to hydrate with if you're able I want you just I'm gonna stop talking I'm gonna give you a minute to go get some water or some something and every single time I hydrate I want y'all to hydrate Right, but I take we're gonna take this as a nice smooth pace We're gonna do this together. And so if you don't already have your hydration, I'm gonna give you a minute to go get your hydration Bring up my timer here take your minute I won't move on. Go ahead. Go get your water. Go get something. We're gonna hydrate together tonight Never I get a hydrate you get a hydrate Yeah, we code together you hydrate together exactly dicker If you're able please I'm gonna order the two liter from Domino's real quick a This coffee count yes, I'm drinking tonight Got 30 seconds left, please. Yes. You, the person that is able to get out that can go get some hydration that is not getting hydration. Yes. You get up, please go get hydration. Come back. You got 20 seconds. Tequila counts. Tara, welcome back.

Mint tea. Nice. Raspberry lemonade, everybody spam and chat what you got. But what do you, what, what are you using for hydration folks? Arizona green tea. I had that in a minute at the, at the, the, the water gangs in here. All right. I see y'all. Tea for a little go. I was lagging on my eight cups. This helps a get in here or not. All right, cool. Oh, everybody's got some good hydration. Let's do this thing. Remember the hydration can go off every 10 minutes.

So let's do it. Cool, jump into it. Golden rule, separation of concerns. We keep our content in our HTML, our style in our CSS, our behavior interaction, our JavaScript. Why? Why do we do this? Yes, organization, lovely. For the organization. Now, as we start to add more languages, more stuff to our projects, it becomes even more critical to keep things separate. We technically could put our HTML, our CSS and JavaScript all in one file, but it wouldn't help us stay organized. It wouldn't help us work well together. Somebody asked me in the Ask Leon channel, will we get practice with Agile and working in teams? Hell yes. As we get further into the program, we do more and more team projects. You're going to be paired up with folks in groups to work on code as though you're at a real organization And so you need to start practicing that organization now so that when you're in those team projects, you're not acting a hot mess cool We talked about IDs and classes and we're starting to see them come into into play We saw IDs as a way to start grabbing individual things from the Dom or putting things back into individual places into the Dom, the ideas start to go hard, right?

Like they really do help us when it comes to JavaScript. We also saw a little hint at classes. What did we use classes to do? What did we use classes that was pretty cool last class? What did it enable us to do? Yeah, it enabled us to use a class name to add some CSS or remove some CSS. So we could add a class and we could add some CSS. We could remove a class and get rid of some CSS. We can even toggle those classes on and off. So we were used to using our classes just for style, but now we can use JavaScript to turn those styles on and off, which is really cool. We also saw the ability to select multiple objects exactly multiple things from the Dom that we then went and put event listeners on so we saw the ability to like to add and remove classes, but we also saw the ability to like target everything with that class that we could do things like add event listeners to all of our stuff pretty dope. Cool programming. Let's talk about it. to keep Charlene exactly a computer will do what you tell it to do right that's it the end of the day computer will do what you tell it to do so a program what's a program folks what's a program get active today this is review come on get your fingers typing all right get into it get in the game I know you're a that's okay. Drink some of your water, get the fingers going, be participatory.

All right. Yeah, it's just instructions. A program is just a set of instructions you write that tell the computer what to do, right? Just a set of instructions. The act of programming is writing those instructions in a language that the computer can understand. At a base level, Like at the machine, like at the metal level, do our computers understand JavaScript? I got like a very low level, like at the metal level, do our computers understand JavaScript? Nah, they don't. They don't. So JavaScript, right? JavaScript is the language that we use to communicate our ideas. I want to add stuff. I want to remove stuff. I want to add some numbers. I want to remove some numbers like all the things that we that we were able to like see in our code Right the things that we're able to talk about All right That's what JavaScript helps us with and we see this come out and play and it reminds us of why Independence Day is a true story.

Why is Independence Day a true story chat? But bub bub I see a lot of bubs Yeah binary upload boom It's this idea that even though the alien ships were using some sort of alien language, we could break it all the way down to like simple logic, to simple logic, maybe all the way down to binary, on and off. We're assuming that on and off is a universal constant, right? And then from those universal constants, we could build all the way back up to a language that can infect the alien mother ships, bring the shields down and we save the world. Cool. I have said, what did she say? Why are we learning the computer language and not the computer understanding our language? Seems backwards. Your computer is more processors than me. Exactly. Maybe one day. Alrighty. So that leads us to JavaScript. A language that we can all understand. And a lot of people are like, Leon, I don't understand it yet.

That's OK, you'll get there, right? It's a language that's human readable, right? Something that we can share amongst each other, look at it and have a good idea of what's happening in that program. So eventually, exactly. Alrighty, now, one of the harder things in the beginning is that JavaScript has its own syntax. It's the spelling and grammar rules. It's the way that we write out this programming language. and the syntax has a lot of stuff that makes it hard at first. You're seeing all these new special characters, right? You're seeing ticks and bangs and blings and curly braces and all this stuff that we don't really ever use in like day-to-day, just like writing normal stuff. And so that syntax can, can make the learning process all the more difficult. And so that's why we spend a lot of time working on these examples together, because I want you to be able to see all these different pieces. I don't need you to understand the pieces. I just need to see you to see the building blocks that when we do do a deeper dive into stuff, it's not your first time seeing it. That's why I give you the reading.

That's why I give you some videos. That's why we do things over and over again. I just don't want you to show up and it's the first time you've ever seen JavaScript, right? By now you should have watched the goats video, Brad Traversi's video on JavaScript. You should have read two to four chapters of the JS way. You should have had last class. Look, it's momentum. The ball is rolling. It shouldn't be the first time you see stuff. And it's not the first time you see stuff from different angles, right? The reason why I give you so many other resources is because sometimes you need to hear it in a different way or seen in a different way for it to click, right? I hey someone hydrate it. Yo turn up. All right, everybody able hydrate. Thank you someone.

Cheers. Cheers everyone. Get the hydration in. We're hydrating together tonight. Well done. Well done All right. Salud. There we go cool So We have this idea right that we We're going to build over time These building blocks, but it's a it's a process you have to see things multiple times from different angles One of the things I do One of the things I do really early on is whenever something that doesn't make sense, I ask questions. I ask people questions, and while I'm waiting for people to respond to my questions, I try and look at different materials. I'll look at a video, I'll look at some reading, I'll try it in a different way, I'll try playing with it, right? Of course, Digimon. Yeah, of course. I'll try doing it from different angles. So that's why I try to give you some different angles just to help things click in a little bit different way. Okay?

All right, chat, what are variables? Fancy boss coder, it's this course, that's what it is. Buckets, exactly. There are buckets that we can store data in. What type of data have we seen so far? What type of data types have we seen so far? Buckets hold our data, but what kind of data have we seen so far? Chef curry with the shot. I'm sorry, Chef curry with the pot. Steph Curry with the shot. There you go. Yeah, we saw strings and numbers. Rings and numbers so far and maybe yeah, some people are throwing out booleans we so we've talked about true and false, right? Yeah, we saw we saw some strings. We saw some numbers so far.

These are the different things that we can store in our variables so far. Variables are just a way we can tell our program to remember to use something later on the entity we use to store those values we call a variable All right Now there are two steps that you can follow when you're creating variables and actually we're gonna see this come up again Little homage as we get close closer to functions will be the end of class tonight will be some new stuff with functions Can variables equal functions? They can, they can. And we're gonna see that a little bit later. All right, so we have two steps. Our computer has some lovely memory. Beautiful, we got some lovely memory. And there's two steps. The declaration, chat, what does the declaration step do? Yeah, it creates the space in memory. The declaration creates that space. So in our memory is now a space called age. At this point, after running this line of code, does that space have any value? Does that space have any value in it? No.

So a good question is, if we were to ask for age right now, what would we get back? Like if we asked for age, what would we get back? Yeah, we would get undefined, right? We'd get undefined. The program, like JavaScript knows that there is a space in memory called age. It can just see that there's nothing inside of it. So we would get undefined back if we tried to use it. We wouldn't get like a big error that would like break everything. It would just say, hey, the space you're talking about, there's no, there's nothing in it, right? There's nothing in it. But when we get to the second line here, this lovely assignment stage, this is where we can put that value into that bucket, into that space in memory, right? And so we can go ahead and put 25 in that bucket. Now if we ever ask for age, right if we ever ask for age We're gonna get 25 now because 25 is stored in that space in memory All right, and it will get 25 back until what happens there's something that could happen that would make it so that we don't get 25 anymore what could happen Yeah, we could eventually reassign age right we can go ahead and do age plus equals 10, all right? Now age is gonna have 10 added to it. So now age would be 35.

This is a fancier way of saying something like age equals age plus 10, all right? These are both the same. They're just different ways of doing the same thing. Cool, let's play with this a little bit. Let's just see this real quick before we move on. Let's go ahead and use the console here. Let's go ahead and let a dog age equal four. All right, so on this line I did what two things? What two things did I just do here? What two things did I just do here? Yeah, I declared and I assigned. What's the keyword that let me know that I was doing declaration? Yeah, it's let. What are some other keywords that can help us declare variables? Yeah, we got let, const, and var.

We haven't really seen var yet. We will see it when we get to something called scope, right? When we get the scope, we'll see Var. Var still kinda has a place, right? But it's different now. Everything changed when we got to ES6+, the newer versions of the JavaScript specification or the ECMAScript specification. We'll go deeper on that in a bit. Cool. All right, if I wanted to add six to dog years, I could do a couple things, or dog age, I mean. I could do dog age equals, could do dog age equals dog age plus six, right? And if I ask for dog age, you can see that I get 10 now. I could also do dog age plus equals, and I could do, let's do five, right? And now if we ask for dog age, we get 15, right? So there's just different ways of adding, right? We saw the ability to do the value plus a value, the plus equals.

The cool thing is you can do like asterisk equals for multiplication, minus equals for subtraction. All of them kind of work there. And then there's one other one that people will see a lot, which is a dog age plus plus, right? And plus plus dog age. Interesting. Can anybody catch the difference between the plus plus at the end, or the plus plus at the beginning? Hmm. Some folks are getting got. It didn't add two, that's not what happened. It didn't add two. Yeah. So something happened. When you have plus plus at the end, right? The way you can think about it is that this line executes and then it adds one. So it did the line, right?

It did the line and then it executed the addition. So that's why we see 15. At this point, DogAge actually was, right? DogAge actually was 16. It just, it did the console log before it did the addition. The line executes and then the addition happens. With this, the addition happens and then the line executes. So you're like, what the heck? Let me show you. Let's see what DogAge is right now. We're at 17, all right? All right, let's go ahead and alert dog age plus plus. You ready? What do we think is gonna show up in the alert? What do we think is gonna show up in the alert?

Well, I'm seeing 18, I'm seeing 19, I'm seeing 17. I have all over the place. All right, let's do it. Three, two, one. 17. Excuse me? What? Hold on. Excuse me. That alert says so I know it's really tiny, but that alert says 17. Let's let's go back and look. It said 17 in the alert. But let's ask what dog Dog ages again, wait, dog ages 18. Why the heck did it alert 17 if it was actually 18? Well, what happened is the alert happened before the increment happened, right?

The alert was faster than the increment, right? So we got the alert of 17 and then it added one, right? So whenever you do plus plus none of that line of code is gonna execute and then the addition is going to happen If we do it the other way I'm sorry, I was gonna I was gonna cheat a dog ages alert. We do it the other way plus plus dog age What do you think we'll get in the alert now What do you think is gonna happen? What are we gonna get in the alert? Yeah, all right, I think folks got it now. Let's try it. Ready, three, two, one. 19, exactly. We were at 18, we did plus plus dog age. It did the incrementation, right? Did the incrementation and then the alert happened. So just be careful. If you're going to use the plus plus syntax, right? If you're gonna use the plus plus syntax, Just know right just know the way it's going to execute You do minus minus you can yeah Well boost this Boost this three with the hydration cheers to you everyone hydrate come on.

This is a difficult topic everyone hydrate with me real quick If you don't get this what should you do if this doesn't make sense to you, what do you all need to do? What do you got to do I'll play with it exactly you got to get in here you got to get in the Muck, you gotta go in here and be like, all right, dog age, is that 19? All right, what happens if I do plus plus? Dog age, what should it be? All right, it went up by one. All right, that made sense, right? You gotta come in, you gotta play with it. You gotta break it, you gotta do it for yourself, right? A lot of this stuff, I'm gonna show you cool things, right? I'm gonna show you cool things and in the moment There's there a lot of things that are not going to be like zoop zapped into your brain a lot of these cool things I'm showing you is that you can come back and be like, alright Leon showed this thing. It didn't click How can I play with it? How can I break it? And if you get stumped you ask questions on discord Right. This is gonna happen over and over and over and over again If learning the code was easy everyone be a software engineer making good money But this is it you're in the trough of sorrow. They're gonna be things that just don't click in your brain I can't tell you how many things I have learned that for a full week did not make any sense Just straight up full weeks of me having no idea why did the thing that it did or why it should do the thing that it did or or how I could do it, right?

And so in the moment, you gotta be able to come back. Gotta come back and play with it. You gotta come back and be like, all right, plus plus on here, plus plus on that, and come back to it, right? You can always come back and rewatch the video. You can do the same exact examples I do. You can have the video up on one side, you can have your console up on the other, you can do it exactly at the same time. You have to play with it. I'm gonna show you stuff. That's not gonna make sense in the moment. It's up to you. Your job is to come back and play with it cool Folks are saying why would we ever not use plus plus because maybe sometimes you want the line to execute before the addition happens Right. Sometimes you want that that that odd behavior You'll see it Keep pushing. CamelCase is a variable connection, variable convention that I like to use, meaning that my first word is lowercase, right, is lowercase, and then every other word is uppercase, right? All my ID's name, my class names, everything will be in a CamelCase. So all my examples will be CamelCase.

I recommend that you use CamelCase, but it's up to you if you want to. Whatever you do use, be consistent. All right. Let's power through the two different types of data, and then we're gonna take our break. Two types of data, and then we'll take our break. All right, we've seen two different types of data so far. We saw our strings, which are pieces of text. Remember with strings if we use the double quotes on the outside What can't we use on the inside very specific question if we use double quotes on the outside? What can't we use on the inside? Yeah, we have double quotes on the outside you can't use double quotes on the inside unless we do what Unless we do what? Yeah, unless we escape them, exactly. We can escape them with the backslash and we'll be good. Same thing, you can't have single quotes on the outside. You can't have single quotes on the inside unless you escape them with the backslash. Cool.

We also saw numbers and in JavaScript, you can have two different kinds of numbers. You can have integer values, which are like our whole numbers and we can have our floated values, which are numbers with decimal places. We can also have signed numbers. So positive and negative, and we can do arithmetic addition, subtraction, multiplication, division, modulus, modulus gives us the what? Yeah, it gives us the remainder. Exactly. Nice. Cool. So once we know our arithmetic, we can start making decisions, right? And these decisions all come down to the ability to evaluate a true or false statement. So to understand if something is true or false, we have to be able to do comparison, right? So in JavaScript, it's a little funky. We can compare not only numbers to numbers, but also strings to strings. and there are three different types of equal signs. One equal sign is always what, chat?

We're gonna take a break in a few seconds here. One equal sign is always what? Assignment, exactly. And then two equal signs is comparison of what? Two equal signs is comparison of what? Value, exactly. and three equal signs is value and type. Like, is it the same value? Is like three equal to three? And then type, are they both numbers? Are they both strings? All right, beautiful. And once we understand this comparison, we can actually start to include this in our conditional syntax. Cool. Let's pause here.

Let's take our five minute break. If you're new around these parts, every top of the hour, we like to take a five minute break to be healthy, to stretch, to move around. If you are able get up add some more liquids to your hydration station, and we'll be back in Five you're watching us on YouTube go ahead and give us a thumbs up go ahead hit that notification bell Go ahead and give us a subscribe and we'll be back in five I'm gonna pull up the timer here Yeah, if you're if you're watching on YouTube, please please Take the breaks to don't just speed through the break like please take the break All right Five minutes on the clock remember I'm gonna run ads that you're like forced to take the break and so that folks don't get ads during stream All right. Peace in five You Yeah, wait until everybody comes back for the hydration. Imagine the secrets Bob knows. Why and how did you get your Manchester United scarf? I had that for forever. I had that scar for 14 15 years now. Yeah Will there be another tea spill soon? Yeah, we're gonna start doing more the tea spills. I basically kind of want to have Like a Twitter space or something similar once a week So I've been kind of like starting to book those with folks. And so I think maybe like next week and the week after is when we'll kind of start. So we'll have a lot of alumni coming through. We'll have lots of special guests coming through. And so we're going to be doing at least one a week.

And so we're going to pick it up. A lot of folks got a lot of value out of the last one. So we're going to pick up the pace a little bit with those. Cool folks, come on back, come on back. Rockin' Roy, Cinnamon Male. All right, folks, come on back. When do we start coding challenges? Next week, next week. Hey, Veggie, don't worry. All righty, all right, everybody's back. If you're able, please go ahead and hydrate with us. Uzi1088 with the hydration, cheers to you. Thank you so much. I did, would it? I did, and I'll keep saying it.

Alrighty, cheers to you. Let's get back into it. How many programming languages do you know? All of them, because I know how to program. It's just a matter of Googling a few more things. All right, that's the brilliance. Like once you, and now how many languages do I know well? Is a very different, is a very different question. But I'm good with my pseudocode, I'm good with my Googling, I can figure most stuff out. I know my big four, my functions, my loops, conditionals. All right, my variables, cool. Oh, let's get into it. All right, we're talking about this conditional syntax, like the ability to, right, right? The ability to make decisions. And so if a condition is true, we do what is inside the curly braces.

We are a while and about drinking too much water. Alrighty, so here we have the three different things you will see in a conditional block. You will see an if to start off the conditional block. You will have an else if if the if was not true. You can have as many else if, I tried to say else if and if at the same time and it came out that way. You can have an if, you can have an else if, and then you can have an else, all right? And so the idea here is that you can have as many else ifs as you want. So you can go to if, to else if, to else if, to else if, to else if, and then you can fully stop. You do not need to have an else. An else is just if you want something by default to happen, an else will never have a condition. One of the common mistakes I see is people will do an if and else if, and then they'll put like parentheses after the else. No, you'll never have anything after that. It just automatically runs if everything above it was false. So our tried and true example here, const pizza equals dominoes. We're using const because our pizza choice will never change.

It will always be dominoes, right? Even though they ain't showing us no love on Twitter. We got them more engagement on Twitter than they've had in like the past couple months No, love No, love. All right, so our pizza choice is a const. All right, a piece of chalk piece of choice is a const They'll always be Domino's it's not gonna be reassigned right? It's not gonna be reassigned. All right Now Now, does pizza equal Papa John's? No, it doesn't, does not equal Papa John's. In fact, I promised you we'd talk about Papa John's today, but world events, I don't think it's fair to do what we said we were gonna do. So for now, the thing that I am heated about Is that, let's see, hold on one second here. Let me open up a new window here. I didn't put it in the slides. It's definitely gonna be there on Tuesday, but hold on one second. Disgusting. Look at them.

Disgusting look at them look at them look at them only 10k likes Only pathetic exactly only 10k likes I know That we can destroy their likes I know that when everyone goes to tiktok.com Learn with leon And we start posting our short form content. We're gonna blow those legs out the water. So Starting next week Starting next week. I'm gonna be uploading a lot of short form content on tik-tok and on YouTube shorts a lot of things that folks ask like questions in the ask Leon channel that I feel like need to be Turned into like smaller videos that I can give sort of advice on and so we're gonna go ahead and and and We're gonna start posting our short form content and we're gonna we're gonna blow our legs out the water Papa John's is still be at ten point four after the first week, right after the first week We got them it's over they cut they done. All right, so just know short form contents coming Here's the link if you want it. Go ahead and give me a follow right now. All next week I'm posting good short form content and I'm on a mission. I'm on a mission. I'm on a mission. I'm on a mission. I'm coming for their likes. I'm coming for their likes. Coming for their likes. Coming for their likes. The content will be on TikTok, and it'll be on YouTube Shorts.

Coming for them. That's all I'm gonna say for now. I'm gonna say for now. Coming for them. All right. Now, what is the danger of assignment versus comparison? What is the danger between assignment and comparison? First try? Yeah, okay, first try, yeah, okay. Oh, we're gonna get Papa John's on the first try. I get what you're saying, exactly, on the first try. One equal sign will always be reassignment. One equal sign will always be reassignment. Two and three equal signs will always be comparison. If you accidentally just use one equal sign in your ifs or your else ifs, you're gonna wind up in reassignment and probably a true statement even though you didn't want it to be true.

So be careful when doing comparison, two or three equal signs, two for value, three for value and type, then one for assignment. Remember, you can have multiple conditions. So if your name is Leon and your status equals Balan, then you get a wink. Beautiful. Oh, also, we're going to talk about this on Tuesday, but on Twitch, you can clip beautiful moments like we just had, right? You can clip beautiful moments like we just had, and you can actually upvote, you can actually upvote the clips. And what I'm going to do is I'm going to be looking at a lot of those clips and we're turning those into like our YouTube shorts and things like that. So I think after each class, I'm going to have like a thread where you can put your clips in and. Whoever has the best clip that we use on our short form content, uh, you'll get like a special role on discord. So we'll have one for each class, but only one person, each class can get it and we'll pick the best clip and you'll get a special role in, in a discord, which I think would be pretty cool. Cool. So feel free to clip. Right? Yeah. You don't have a clip.

Don't worry about it. You can find out after class. Cool. We can see multiple conditions where you Chuck would Chuck a, thank you for the, uh, for the five gifted subs. Are you trying to like ask people to do the, like, like the woodchuck saying, is that like your thing, like a gimmick account? That's pretty cool. If it is, thank you for the five gifted subs. Thank you for being here Well, so we have we have and where both of them have to be true All right. Wait, thanks to why double it's just the syntax of JavaScript. You have to use the both right you do the both and Both of them have to be true and if both of them true you do is inside the curly braces Then we have or the double pipe character, right? and the double pipe character means only one has to be true. If it's Saturday, you stop and you do what's inside the curly braces. If Saturday wasn't true, then we would look at the other side and as long as that's true, you do what's inside of the curly braces. Now, we have another hydration. Amy Lou smiles, hey, thank you so much.

Cheers to you. Everybody, let's hydrate, please. Ah, cheers to you. Alrighty, we had our class weekend or boring day. Let's go ahead and open up that starter code. If you're new around here and you need the starter code, it's always on our Discord, exclamation point, Discord, right, right, do the exclamation point, Discord, and that'll get you to our Discord community. Once you agree to the rules, we have a follow along with Serial's channel where you can download all the starter code. All righty, let's go ahead and look at the class weekend are boring and we have it already filled out. We have the ability, let's go ahead and open this in the browser. Right, we can go ahead and say what day it is. So we can say Tuesday and inspect. And when we click on Tuesday, we get boring. However, if we change it to lowercase T, we have class. So there was something missing in our code, right? That would enable it to work with all capitalization.

So do some quick space repetition here, some quick recall. how can we change this code to work, right? To work with any capitalization. Chat's got it, it's two lowercase, exactly. So let's take a few seconds to walk through this code and add the two lowercase. Alrighty. In our HTML, and if we look in the DOM here, we have our input and we have the button in that we are going to actually click on. We can even look in the elements here and see that the form, the input has the idea of day. So we're gonna have to target that day to get the value out. And we're gonna have to look at this button, right? To click on. So what I wanna be able to do is to listen for a click on that button that has the idea of check, grab the value out of the input, make sure that it's all lower case, and then do my comparison. Let's take a peek. We've done just that. We looked in the DOM.

Remember, the rendering of that HTML and the CSS, right? It doesn't really matter which way you go. It's to go into the DOM, to look at the rendering of the HTML and CSS. Remember, the DOM is not your files. It's not your HTML. It's not your CSS, right? It's the rendering of the HTML and CSS, right? So that's what the DOM is, right? It's the rendering. So we're gonna look at that rendering. We're gonna grab the thing. We're gonna grab the thing that has the ID of check. So if we go and look, right? If we go and look, we can see that this button has the ID of check. So when I say document.querySelector, right?

All right, when I say document.querySelector, I'm saying look at this. This is not, chat, is this my HTML right here? Is this my HTML? No, it's the rendering. It looks like my HTML, but it's not. It's the rendering of my HTML. It's the document object now, it's the DOM. It's the thing that we can go in and manipulate. If I go in and manipulate this painting, this rendering, my actual files don't get touched. As soon as I refresh, we reread those files and repaint what we see here. So the cool thing is when I say document.querySelector, I'm telling it to go into the DOM and find the thing in there that has the ID of check. Right? So if we look, go into that DOM, find the thing that has the ID of check, and then add an event listener. What the heck is an event listener? What is an event listener?

It's a smurf, exactly. Event listener is something that's sitting on that element in the DOM, waiting for you to click. Waiting for you to click. and when it hears you click, it's gonna run a certain set of instructions called check, right? When it hears that click, it runs a certain set of instructions called check, and we can see here, here are our set of instructions with the name of check. First thing we're gonna do is we're gonna go back to that DOM. We're gonna find the thing that has the ID of day. Chat, what had the ID of day? What had the idea of day? Yeah, the input had the idea of day. So what we're doing is we're looking at that input and we're taking whatever value is in it. So whatever value is in that input, we have pulled it out, right? And normally it would just like poof into thin air, right? We pulled the value, right? You can pull the value out and then we would poof in the thin air, but it didn't evaporate in the thin air because we did what with it?

What do we do with that value that we got out of the input? What do we do with it? Yeah, we assigned it. We assigned it to day, right? The variable of day is now holding that value. we had a space in memory, we had a space in memory called day, and we put something in there, Tuesday, Wednesday, Thursday, Friday, we put something in there, right? We assign it that value, right? Before we were doing stuff really simple, like we were just doing like, all right, day equals Tuesday, right? We were just assigning it in the moment. but now we see the behavior and interaction that can happen. We can get that value out of the input, right? We get that value of the input and put it into our variable. Cool. Now the other thing is here is that we want to make sure that our value is all lower case. And the reason we make sure that it's all lower case is because if we look at our comparisons, Tuesday and Thursday and Saturday and Sunday they are all lower case.

And so what we wanna do is we just wanna go ahead and go here and say to lower case, right? Now, does it matter what's put inside, right? Does it matter what's put inside of that input? It'll be lower case, it'll turn lower case, right? And so now we're gonna get the value out of the input. We're gonna make sure that it's lowercase and then we can do our normal comparisons. If the user types in, like if we were to save this and we were to go back and the user was to type in capital S Saturday, right? If the user was typing capital S Saturday, what just happened when they hit check, right? What happens when they click check is that we've gone, the event listener fires, we run the set of instructions that starts with check. This right here, this document, querySelectorDayValue is actually right now Saturday, and then the toLowerCase takes that Saturday and makes it lower case. Then this Saturday is what is put in the variable of day. So anywhere I look at day now, it's no longer day. wherever I see day, it's no longer day. It is now lowercase Saturday. Right?

We use that variable everywhere, right? We use that variable everywhere so we don't have to constantly rewrite and do it over again, right? Right? And so now we can go through, since day was everywhere, right? Since day was everywhere now we can do our comparison. Does Saturday equal Tuesday? No Does Saturday equal Thursday? No So now we go to our else if Does Saturday equal Saturday? Yes We finally have a true statement. We stop here We console log. It's the weekend And then we're done All right, so if we were to go back and look in the console, we would see there, it is the weekend if we let it run. All right, that's where the console is. But we use variables that we can compare stuff everywhere. That's why that day is all these different locations. Cool.

What about the or? It's just that you can say, Because remember there are two different days that we could have class and there are two different days that could be the weekend Just because it's Saturday, right doesn't mean that it shouldn't be the weekend. It's either or so That's why the double pipe characters there for the or All right, let's move on folks Angry parent simulator, angry parent simulator. Let's take a peek at it. All right, we open this in the browser. We have the ability to enter in three names, Bob, Bobber, Boppity, Bobson, right? We click on yell, boom, we see Bob, Bobber, Boppity, Bobson pop on up. Anna Abel a everyone if you're able to go ahead and let's go ahead and hydrate. Cheers to you Nice rushing Thank you. Cheers to you We also had a stretch oh We did have a stretch right? Let's see Egg for dinner. Thank you for the stretch So we're gonna go ahead and stretch if you're able, please get up and stretch and I am going to Be right back. I'm going to stretch. It's not that kind of stream You know what you got to do if you want that kind of stream Oh, yeah And we're back, we're back. Alrighty, so we entered in three different values and we clicked on yell and we saw those values.

Without even looking at the code, what do we know is happening? If we were to think through some pseudo code, what's happening here? If we were to think through some pseudocode, what do we think's happening here? Like to get this effect to happen, what did we need to do? Well, we need to be able to click, right? So if we can click, we know that there's a what? If we can click, we know there's a what? There's definitely a Smurf or an event listener that's listening for that click. and when that click happens, what did we have to do? We heard that click, what did we have to do? Yeah, we had to get the value out of each input, right? We had to get the value out of each input, and then we had to take each of those values and put them into the DOM. We've seen this stuff already. We've seen the event listener. We've seen the ability to get stuff from the DOM.

The only thing that's slightly new here is the ability to put it into the DOM, right? So let's go and take a look at our code. We can see that each of the inputs has its own ID. That's how we're gonna target them, right? And then we have the button that we're gonna click on that has the idea of yell. And then we have the place to put stuff, which has the idea of place to yell. All right. Let's go ahead and take a look. We have our event listener that we said should be there. Right, so when we click on those boxes, we know to run the set of instructions called run. Right, we have the set of instructions called run. And so here are the set of instructions for run. We're gonna go ahead and get the value out of each input. We just saw this, we just saw this in the last example. We get the value out of each input.

We store them into variables, right? We store them into variables. That way they don't poof and disappear. So we can reuse them later on in our program, right? If we really wanted to, right? If we really wanted to, we could do this. Let me comment this line out here. If we wanted to, we could do something like really, Really, really not good looking. This is like writing some bad, bad code. We could do this. We could go ahead and do yoink. Put that there. We can go ahead and do yoink. Put that there. We go ahead and grab this here.

Yoink. Put that here. Yoink. Go ahead and grab this, right? and put this here. This does the same thing. It does the same thing. We're gonna go ahead, right? We're gonna go ahead. We're gonna go ahead, and we're going to grab the value out of the first input, add a space, grab the value from the second input, add a space, add a space, grab the value from the second input, add a space, or the value from the last input, right? It works, we're bad, he's writing bad code, it's cool, but it's not readable, right, it's not readable. It's so much more readable when we do, when we go ahead on each line, we grab the value and we assign it to a variable. The variables just make our lives so much more easy, right? we can go ahead and just use the variables if we want. Right?

Now, this is the older way of doing it where we would concatenate, we would add all the strings together, all the inputs together with spaces in between. But we got to the new with ES6, or the newest versions of JavaScript, where we got these template strings. And the template strings are a little scary when you first see them, but basically instead of doing a string like normal, you start your string with a tick and you end it with a tick. And then you can plug in variables with all the whitespace that you care about by using the bling and the curly braces. So the bling and curly braces are just a way of saying, hey, I'm plugging this variable in. And then we have a space that I'm plugging this variable in. Then we have a space I'm plugging this variable in and then a space I'm plugging this variable in and it's just a newer Syntax that stops us from having to do all that nasty like Spaces and pluses and all that wild stuff Yeah Yeah, it's well supported now Cool. All right We did see last class the the synthesizer stuff that's there if you want to have some fun with it Definitely come back to it if you want to play around with that. Well, keep it moving folks Pseudocode, what the heck is pseudocode? Chat, what is pseudocode? Talking to ducks, exactly. Yeah, it's just writing out your process in plain language. Instead of writing syntax, we talked a lot about syntax tonight. We're seeing document, query selector, add event listener, functions, curly braces, parentheses. All of that is the syntax that gets in the way of actually programming or thinking through the logic of what we want to have happen in our programs, right?

So pseudocode is the plain language, right? The plain language that we see when it comes time to write code. Oh, sorry, this is something I have to bring up. I forgot to bring it up earlier today when we were talking about the study communities and now we're talking about language So it came to my brain this is like a really I don't like to have to do this, but we kind of have to and so as we add the study communities of different regions There is going to be the temptation to speak in your native language on discord and here on twitch please don't. Please use English on our Discord and in Twitch chat. I know it sucks to say that, but we just don't have the moderation ability to moderate every language that's out there, right? And so for easing my life and our moderators lives, please use English so that we can actually moderate the community and not. So all the folks that are like joking and like putting different languages in right now, it's going to, we're going to tie me out. Right. Uh, so the idea here is that we, we have to do it so that we can actually keep the community safe and make sure, um, that we can moderate effectively. Yeah. All right. Thank you. Difficult. I talk Philly exactly.

Yeah. Thank you. All right. pseudocode, plain language that we're going to use, right? Plain language that we're going to use to level out our code to talk through the logic, right? Talk through the logic and not have to get held up by the syntax. Cool. All right, let's take a look at a temperature converter. I'm going to close this here, close this here, boom, all righty, cool. So, temperature converter. What do we have to do to convert temperature? What do we have to do if we want to convert a temperature? What do we gotta do? If we want to convert a temperature, what do we need to do? Yeah, we need a temperature, right?

We need a temperature. We need some sort of conversion of that temperature. and then we need the ability to show that temperature to our users. So what I would like for you to do is I'm going to put four minutes on the clock. I would like for you to write out your pseudocode and then attempt to code out this solution. Now, this is something you've already seen before. This is something that you can go ahead and take pieces from the rest of our examples that we've already done. All right, so give yourself some grace. Write out your pseudocode. If all you can get to is your pseudocode, that's great. Write your pseudocode and then write your actual code. We did this on Tuesday, y'all are just catching on. I told you we're redoing everything. We are literally redoing everything. Cool, so go ahead, if you know how to do it, I need you to actually do this recall.

And if you do know how to do it, try and do both ways. Like if you're like, I'm going to absolutely smash this, push yourself. When you know you know how to rock something, push yourself, right? Do it the other way. Do both ways. Cool. Four minutes on the clock. If all you can do is your pseudocode, that's okay. Do your pseudocode and then try and code this out as quickly as you can. Four minutes. Go for it. You got this Did last class catch up this morning, so you gotta freshen your mind a that's good to hear Some of you are going to sit here and not do this, you're going to get got, I'm going to catch up to you. No matter if you think this is a slam dunk or really hard, you need to push yourself and do it. Apps that have been building email templates all day, We set up a react to email template creator using customer IO, but still a pain in the butt. Oh Go out and be well, I hate building email templates.

That's like one of the worst things to do Mr. T you got to keep keep going for it. I keep pushing you're in your car kick a good on you Remy said I spent so much time doing this this week I have the conversion rate stuck in my head Mikey Dubster did two different ways of kind of doing the same thing with the newer version of JavaScript. We got the query selector, which gives you more flexibility, but some people see it as a sacrifice in speed, but we'll get there eventually. Right now we're just playing with Legos. We'll go deeper with everything later on I All right, folks, a minute 10 left. Got some folks coming in done, that's cool. First time silver. Hey, congrats 30 seconds I Morning happy tree My computer first had a pseudocode out loud, that's what I'm talking about. That's what I'm talking about You ain't gonna get got I love it. I Love that the hustle All right, folks, come on back, come on back. Let's look at this together. Chill the music here. First ready? Oh, first, juggling biohazards.

Thank you for the hydration. Cheers to you. Everyone, if you're able to, please let's go ahead and hydrate. Nice. Cool. Let's write out our pseudocode. First, our pseudocode here would be, all right, get value out of input, convert the value, and then like show the value, value to user, cool. and maybe we only do this on click. So only on click. And so I'm gonna start off with trying to grab an event listener. So I'm gonna go to the Angry Parents Simulator and look at that JavaScript. All right, here's an event listener. Yoink. Got my event listener. I'm gonna set up the set of instructions that are gonna run.

Actually, I'm not gonna type it out. I'm just gonna copy and paste it. I wanna show you that you don't have to even know what the Legos are doing just to grab the Legos. Cool? Boom. Let's take the stuff out of here that we don't need. Let's bring in our pseudocode. You're like, Leon, you're going through this fast. It's like, yeah, we've done this one already. I'm gonna go through a little faster. I hate how I know how to do this, but on a timer, I freeze up. That's a pretty common response. It's the reason why we do so many time challenges because a lot of your interviews are gonna be time challenges. And so we gotta get comfortable with it first, right? So that's why we do a lot of them timed.

Just to kind of get through the achiness. All right, so we're gonna grab a value out of the input, which is what we're doing right here. Convert the value. So I'm just gonna say like temp equals temp plus five, right, but actually I don't know how to do this yet. Let's take this one step at a time. All right, cool. I got my event listener and I think I have an idea of what I want to have happen. So I got my event listener, but right now it's tied to the button that has the ID of what? The button that has the ID of what would call this to run. Yeah, the button has the idea of yell. If we look at our HTML, is there a button at all? No, there's no button, there's no input. So let's make sure we grab our button and our input first. I'm just gonna go to the parent simulator and just grab all three of these. Copy, come back to our HTML, the temperature converter, Paste it in.

We only need one input, so I'm gonna get rid of all the other ones. And I think we'll just leave everything else the same. Yell and place to yell. Good spot. Let's, I'm just gonna keep everything the way it is. I'm gonna keep everything the way it is. And then we'll just make sure we pay attention to it here. All right, so we're going to listen for a click on the thing that has the ID of yell. And if we look, we now have the idea of yell. So our event listener should work. Like our event listener should work. How do I, right? How do I, how could I test to see if this is working? Like how could I, before I even go any deeper into my code, how could I test to see that this is working? Yeah, I could console log or I could alert exactly.

So let's just put a console log in here. Hello, Twitch. Cool, beautiful. All right, so I just wanna see if this is working, right? I'm gonna go ahead, I'm gonna open this in my browser. Let me open up my inspector here. It's as bigger so that y'all can see it. Console, first name, Bob, click on yell. All right, we can see that the event listener is working. It didn't matter if I even had anything in here. Like it doesn't matter, we're not there yet. Right, I'm just checking to make sure my event listener is working. Right, it's working. I put the console log in there. I can see the console log count going up.

I know that it works. Please get into the habit of doing this. I see a lot of people that when they have these projects or these assignments, they code everything out from beginning to end, and then they test. What are we doing right now? What are we doing right now? We said we were doing something very, very specific right now. So we're doing something very specific. We're playing, exactly, we're playing. So play with your code. Do one thing, see if it works. Try another thing, see if that works. Break, figure it out, right? Like we're just playing with our code get into the habit of playing testing trying to understand Don't try and do something from beginning to end and not test because if you had So many lines of code and you get all these errors. You don't know where they came from, right? So don't wait to the end to start testing to see if stuff works to see if things are breaking Right, you want to make sure that you do your pseudocode and then you go step by step Into the habit of testing and then breaking playing and it'll just save you a lot of time in the end When you you messed up one thing at the very beginning and that's the thing that's gonna cause you the trouble in the end Cool.

All right SBS VN. Thank you for the hydration. Cheers to you everyone if you're able to let's go ahead and get some hydration on here All right, so we know that our event listener is working. We know that our instructions are running. We have the hello Twitch that's popping up. Let's get the value out of the input. So our input has the idea first name, right? And if we look, we're grabbing the thing that has the idea first name. We're grabbing the value out of it. KensoDev, hey, thank you for the 500 subs. I appreciate you, thank you for being here. Thank you. We have the query selector. We're grabbing the value out and we're storing an F name. Now, does this variable have to be called something else?

Can it just stay fName? I don't know why I find that funny. Can it stay fName? Yeah, it can. It could stay fName. It could say whatever we want. We can call this zebra. Zebra magic. There we go. We can call it zebra magic pencil. It doesn't matter what we call it. Some people think that your variable names have to be a specific thing. They don't have to be. Just, you typically want to name stuff appropriately, right? Like if you're following some clean code practices, you want your variables to be the thing that they are, right?

And so we could call it Zebra Magic Pencil, but we want to make sure that we call it temp, or T, or something along those lines that we know we're talking about temperature, but the variable name doesn't actually matter. You can call it whatever the heck you want. Alksar A, thank you for the five gifted subs. I appreciate you. Thank you so much. And thank you everyone else for subbing today and all of the prime spending all of Jeff Bezos's bucks. I appreciate y'all. Thank you Sorry, thank you. Thank you for being here All right So we can call this whatever we want. I'm just going to call it pumpkin for now just so folks understand Maybe whatever the heck you want pumpkin Now the thing we're going to get into is that we want to convert this value We want to reassign a new value And so if we want to reassign a new value want to convert it from one value to another what problem are we gonna run into? Yeah, right now it's const, which means that pumpkin should not be changed. So we're gonna make sure that we don't start with const, we're gonna start with let, so that we can reassign it, we can change it. All right, so we have let pumpkin equal the value. And now that we have the value inside of pumpkin, right? Like we're grabbing the value out of the input, but we're storing in pumpkin.

What do we have to do for pumpkin to turn it from Celsius to Fahrenheit? What do we got to do to pumpkin? Yeah, times nine divided by five, plus, what is it, 32? There you go, cool. So that'll do the conversion for us. And now the last thing we have to do is put it to where the user can see it. So let's go back to Angry Parents Simulator and see if we can find how to do that. Ah, here we go. Document query selector placed to yell, enter text, let's copy it. Let's plug it in here. And we're just gonna plug in pumpkin. Cool. Right? Now, none of this was new, right? None of this was new things that we did.

It was just all the stuff that we took from other places and used here. Now, I'm copying and pasting for the sake of time, but you shouldn't copy and paste this. You should type it out. You should get used to typing these things out so that it sticks in your brain. You get used to all the special characters, right? In the beginning, type things out. Later on, you can speed up your process. You can copy and paste. In the beginning, get used to all these different characters, All these different things, right? Teach, you can, it's PEMDAS or BEMDAS if you're from like the UK. So the typical order of operations works when you're doing math and stuff like that. Cool, cool. All right, so let's just break this down one more time before we move on. We have our event listener. We're listening for a click on something that has the ID of yell.

when we hear that click we run the set of instructions called run and the first thing we do is we print to the console hello twitch so this is working we would see hello twitch in the console the next thing we do is we get the value out of the input and store it in our variable of pumpkin right and then we have our conversion math for reassigning pumpkin to some other value. Right and then we take that value of pumpkin and we plug it back into the DOM so we can see it. Right we plug it back in so we can see it. So let's go ahead and save it. It's saved let's go ahead and refresh and see if it's working. Let's go ahead and put in a zero. Great we got 32 and we also got the console log so we can see it's working too. And then let's go ahead and do 100. We should get to 12. Beautiful, it's working. First try. Actually, I guess this is the second try because we did it on Tuesday. Alrighty, cool. Next, we're gonna move on to our lovely bachelor code, and then we're gonna wrap up with covering functions in depth. We got some cool practice problems, just with functions.

So let's go ahead and take our break five minutes on the clock if you're able Please get up move around hydrate. Let your eyes Focus on something that is not your screen And we'll be back talent do exclamation point semi-colon. You can read more. All right, let's go and take a break I'm gonna run ads again during the break. I just so we don't see them during class for folks Five minutes on the clock And I will see you all in five Collective Nectar, if we get the, once we get the CSGO one up, um, we're going to do like TF2 and Source and like a bunch of other stuff that's smaller. Number I'll get you when we come back All righty folks, come on back, come on back, hope you had a good break. All right, let's chill the music. All right, welcome back everybody. We got we're gonna go through the bachelor code and then we are going to look at functions And then we'll talk about the homework and we'll wrap up class. Cool. All right. So in in chat What is the best TV show of all time? mods go ahead and prime the Prime the clicks here, please best television of all show of all time, please and chat Beautiful, thank you. I'm glad we all agree. The bachelor.

Wonderful. All right, so let's go ahead and take a look at all of our examples that are bachelor themed. All righty, one of our, one of the folks in the current cohort has a bachelor's podcast. I thought that was pretty dope Ping me again. I want to retweet it. I want to retweet the podcast All right, let's take a look at the bachelor code Here we go, all right, so if we open up the index dot HTML We're gonna see that there are three lovely contestants Claire Nikki and the other wonderful Charlene when you click the final rows I want, unfortunately, Charlene to go away and Claire to go away, only leaving Nikki, who did win the final rows of Juan Pablo's season of The Bachelor. So, let's go ahead. We've already done this, and it's fill in the blanks. I'm gonna put two minutes on the clock here, and then we're gonna go over it together. Cool, two minutes on the clock. Have at it. I think it's wild that we watch dating for fun. Yeah, it's kind of wild. Claire and Charlene should disappear. Those are those are the two that should disappear, Claire and Charlene.

Love is blind has been pretty good. It's had hands down one of the best reality television show moments of all time. Like probably has to be top three best moments to ever happen in reality television. It happens with Sean and Natalie, not going to say more because I don't want to spoil or anything but hands down one of the best moments in uh in trash television history is there a murder no all right folks 30 seconds left some folks think it's like a like an act like that like I like there's no way I'm into these shows at the level that I'm into like where I'm like writing blogs reading blogs fan fiction like no I am I'm really about this life I bring up I bring the heat to like people are throwing out random trash television shows. I'm like this moment and this episode of this season, like this is me. Okay. All right, folks. Come on back. Come on back. Let's look at this one together. Alrighty. So if we notice, the H1 has the idea of final rose. and then there are three images that we want to hide, or sorry, two images we want to hide, Claire and Charlene. So we look, we have our event listener. We can see that the name of the function or the sets of instructions is hide.

This is an easy replace. It's going to plop and hide. Nothing's really changed from the examples that we've seen before. And then down here, we know that we have to hide both Claire and then Charlene. So let's go ahead and put in Claire. And then unfortunately, Charlene. Beautiful. And so what's gonna happen here is we have our normal event listener, our normal Smurf. It hears the click on the H1 that has the idea of final rows. It runs a set of instructions, hide. We find the element that has the idea of Claire. and we change it CSS to display none. Let's actually look at this though. I want to actually see this in the DOM. Excuse me.

All right, let's inspect. Let's look at the body, the sections. All right, so here's Claire, Nikki, and Charlene. Watch what happens when I click on final rows. Nothing. How did I know nothing was going to happen? Right now I know it's going to click on final rows and I knew nothing was going to happen. How did I know? I did save, I did refresh. Did not refresh. But you could see that there was an error, right? There was an error there until I refreshed. So I knew this wasn't going to work because I saw the error and then I refreshed and the new code got rendered to the DOM and now there's no more error, right? And now it should work, let's see. There we go, clicked on final rows.

Claire goes away, Charlene goes away, but let's actually look and see what happens. Let me refresh here real quick. Let's look at the sections. All right, Claire and Nikki are here. Let me click on final rows, three, two, one. What happened? Look at the DOM. What happened in the DOM? What did we do? What did we do in the actual DOM? Yeah, we put like inline style. We literally put inline style that has at least a thousand points of specificity. And so that inline style is there because of the JavaScript. Like we literally said, hey, add display none inline, add display inline. And that's why they disappear because we literally change the inline CSS.

But as soon as we refresh, boom, that all goes away. That inline stuff that we put in there with JavaScript goes away. Remember, JavaScript can mess with the DOM. It can go in, it can put in inline style. It can do all that stuff to mess with the DOM. But as soon as we refresh, it goes away. Yeah. Cool. So let's look at that one more time. You can see here, nothing there. we click on final rows, boom. We use JavaScript to put that inline style and they both disappear. Cool. All right, let's keep pushing. Let's look at number two.

All right, this one was a little bit more difficult. So we're gonna put three minutes on the clock and then we're gonna go over it together. Three minutes on the clock, We'll go over this one together. KidNeptune, it doesn't matter because we're not messing with HTML or CSS. We're messing with the DOM that has already rendered the HTML and CSS. So we don't have to ever think about editing our CSS file or editing the HTML file because that's not what we're messing with with JavaScript. We're messing with the DOM with JavaScript. We're not actually ever touching those files. Yeah. So, cool. All right, three minutes on the clock. Let's see you get at this one. And we'll go over it together. IDs are unique, Fox. Makes it easier to target that thing and only that thing.

Dragging it could, depends. The goal in this one is to be able, sorry I forgot, I didn't actually, I'm going to pause the timer for a second. I forgot for the new one to explain what we have to do. This one, you should be able to click on Andy or Claire or Charlene and see their image, but the other images should disappear if they're already visible. So click, see the image, click, it should go away. If you click on Claire and Andy or Charlene was showing, those would disappear. Fill in the blanks. I've had it. Maybe we'll do the hydration when folks come back. We also do numbs as well, we'll do both. So, civil because the client will be able to do the manipulation as well. So it's not that you're never really using JavaScript to change HTML and CSS forever, right? Cause then you would just put those changes in HTML or CSS. Js is only there for when the user manipulates stuff or does something big shiny there is That's a way to do that, yes. Jam, yep, that's pretty typical.

We don't typically do stuff outside because you run into scoping issues. Yeah, yep, that would be true A minute left folks Dang stuff stuck from last time nice. Yeah, that's the reason why we're doing it. Yeah Why we're doing it a lot of Dunn's coming out like to see it We're gonna talk about freelancing on Tuesday, all right, manly Jones we're gonna go over it in 20 seconds anyway Mitch, if you wanted to hit enter on an event listener, it's the event to submit. So on submit would enable you to hit enter and submit the form. All right, folks, come on back. Come on back. Let's look at this one together. Oh The music All right. We had two hydrates that we missed. So everyone if you're able, please let's get our two rounds of hydration in Num, okay one. Thank you for the hydration and DB five five six B. Thank you for the hydration Cheers to both of y'all. Let's hydrate I'm gonna take two steps one for each Let's take a look at this. We had document query selector Andy and we stored that in a variable.

Why the heck did I store the DOM element in a variable? Why did I do this line here? Why did I do this? Yeah, I'm gonna use it later on So it gives me a little bit more drier code. It gives me a little bit more reusability. And you can see it in action down here. Right here, I'm just saying Andy, but I could, if I wanted to do the whole thing, I could take this, I could come down here and I could do the whole document query selector. And I could do that each and every single time. It's way more typing. It doesn't look as clean. So I just kind of declared my three variables here and assign them the value. And the cool thing here is that you can assign them the value of elements from the DOM, right? So if we look, the thing that has the idea of Andy, right, the thing that has the idea of Andy is the image of Andy, right? So it just makes it easy for me to talk about that image whenever I want to. It allows me to reuse it as much as I want to, right?

All right, so we have our event listeners here. We have a function called AndyNext, ClaireNext, and CharleneNext. The first thing we have to do is set up our event listeners to be correct. So AndyNext, beautiful. Then we have ClaireNext, cool. And then we have CharleneNext, cool. Cool. So you can see the function name of Andy next, Claire next, and Charlene next. Could have called these, could have called these whatever I wanted, right? But that's the name I chose for those sets of instructions. That's why they had to go into my event listener. Cool. Cool. Next, let's take a look. We have this first set of instructions Andy next so if we click on The text that has the idea of Andy next let's take a look All right.

Here we go. This h2 has the idea of Andy next it's the piece of text that says Andy If I click on that I run the set of instructions called Andy next So here's a set of instructions called Andy next and we do a couple different things here We look at Claire. Remember, Claire is the variable from line two, right? It's the variable from line two. We're looking for something that has the ID of Claire. So when I see Claire here, it means look for the thing that has the ID of Claire. If I look, all right, where's the thing that has the ID of Claire? It's the image. Great, all right. So I know, right? I know I'm talking about the image that has the ID of Claire. Let's go back and take a look. All right, so I've got the image that has the ID of Claire. Next I have class list. What does class list give me, chat?

What does class list give me? What does class list give me? Somebody knows what we're talking about, node list, yeah. Yeah, it gives you, for now we'll say a list, but eventually we'll call it something slightly different. A list of all the classes, right? It just says, all right, look at all the classes on Claire. Right? Look at all the classes on Claire. That's all it does. Look at all the classes on Claire. And then I want you to add a class to Claire. If I'm trying to select Andy next, what class do I want to add to Claire's classes? If we look, here we have the image with the idea of Claire. I want to add classes to it. What classes do I want to add if I'm trying to pick Andy next?

Yeah, I'm going to add the hidden class. Now, the odd thing is that already, right now, right? Right, right now, Claire already has the class hidden. Right? It doesn't really, it's not really going to do anything right now, but in the future, Claire might not have the class hidden, and we have to think about that. That's where pseudocode would come in really handy with this, right? Cool. Same thing with Charlene, it's also gonna be hidden. And then the same thing with Andy, it'll also be hidden, but this time, instead of adding hidden, so the only thing that these two lines will do is remove Claire and remove Charlene, right? That's the only thing these two lines will do is they will remove Claire, they will remove Charlene's image. That's all they can do. But when you toggle hidden, toggle's like a light switch, right? Right? It's like a light switch. If it has hidden, it's gonna remove it.

If it doesn't have hidden, it's going to add it, right? It doesn't matter, right? If it has it, it'll remove it. If it doesn't have it, it's like a light switch. If the light's on, you hit the switch, it goes off. If the light's off, you hit the switch, it goes on, right? Now, we don't have to use dots here because we're already talking about classes. We're not trying to select anything. We're not using query selector, right? We're not trying to select anything. We already know that we're dealing with classes, so we don't need the dot. we already told our code that it's a class already, right? You don't have to, right? So no dot here because you're already using the class. Very told it's a class and you're not actually selecting anything like query selector.

Well, let's save this. Let's go back, let's refresh. We know this won't work. Let's open up our inspector and see. I've refreshed, and how do I know this won't work? I can already see that there's an error here. You see this like red line. If I go to my console, I can see that there's an error. It's telling me that there's an error on line 16. So I know there's an error. I know I have to come back and fix my code before this would run. If I was doing this for real, I would comment out these two lines, Well, these two blocks of code, these two functions, right? I would comment them out and then go test, right? We already know that that's the problem. Actually, let's do it anyway.

Boom. Let's save it. Let's go back. Let's refresh. All right. No more error. We click on Andy. Beautiful. Andy's working on and off. No problem. All right. Go back. Let's uncomment these and fix them up. We had a hydration, Jag Tony. Hey, thank you for the hydration.

Cheers to you. Everyone, if you're able to, please hydrate with us. All right, let's finish this up real quick. We know we're trying to select Claire next. We're gonna hide Andy, and we're gonna hide Charlene. Right? And then Claire will be the one that'll be toggled. And all three of these will be hidden. and I know the ones down here will also be hidden, so let's just delete them all at the same time. And, oh, I spelled it wrong, hidden at the same time. Remember, you can click, if you hold down Command and click, you'll get your cursor at each place that you click, right? I think on Windows it's Control, each place you click you'll get it. Yeah, it speeds up a little bit. And then down here, Down here I can do a slightly different trick, which is command option and then down arrow. And so I don't have to actually use my mouse.

I'm just using the keyboard to do it. Cool. All right, now I'm gonna go ahead and say, we're Charlene next. We know we're gonna hide Claire and we know we're gonna hide Andy and then Charlene will be the one that is toggled. Cool. All right, let's make sure it all works Let's refresh Andy if I click on charlene, what should happen to andy if I click on charlene? What should happen to andy? I click on charlene. What should happen to andy? Poof gone charlene shows up All right, click on claire. Unfortunately charlene goes away claire shows up Click on Claire, goes away, right? Remember, you can still toggle on and off. And if we look at the elements, right? We go to the body, we look at the images, we can see that they all have the hidden class right now. Remember, in our CSS, right?

In our CSS, there's this hidden class that has display none, right? That's what we're adding. We're adding and removing that class. That's what making it go away and come back. All right, if we go back and look if we click on Charlene and it we pay attention over here And we click we'll see that toggle do its work. We toggle the hidden class goes away. We click again That class of hitting comes back right if We go ahead and look at Claire All right, let's click on Charlene first, right? I like this one too, because Charlene no longer has the hidden class. But if I click on Claire, ready? Three, two, one, the hidden goes away from Claire and it came back to Charlene, right? That's part of the toggling, right? If we look, if we looked at Claire's code, when Claire next was fired, Andy would get hidden, Charlene would get hidden, we just saw that, and Claire would toggle, right? That's what we said. We said, give hidden to both of these folks and then toggle Claire. So if we go back and look, and we're looking at Claire right now and Charlene.

Well, notice that Charlene has hidden, Claire doesn't. That's why we can see Claire. But if I click on Charlene, we know that Claire is going to get hidden back and he's going to get hidden, even though it doesn't matter. And then Charlene should toggle, boom. when we saw that. Claire gets hidden back. Charlene removes the hidden, right? Because of the toggle. Beautiful. Alrighty. The class of hidden is already on each one. Why is it add? Because we're gonna do it every time. The thing here is we're still adding it. It just doesn't matter if it's already there, right?

You're still doing the same logic each time because we won't know. JavaScript doesn't know where it's at, right? JavaScript doesn't know where it's at. A computer only does what? A computer only does what we tell it to do. JavaScript's not sitting there thinking, hmm, does Claire already have hidden? Does Charlene already have hidden? No, we don't wanna have to introduce all that logic to have to guess or have state or know where we're at. It doesn't matter. We just wanna hide them if we're clicking on something else, right? So if we know we're gonna hide them regardless of where we're at, we just always tell it to hide because the computer will do what we tell it to do. We don't have to manage state or figure out where we're at or what's happening, right? We're just gonna tell it to do it every single time. So it kind of just doesn't matter. Cool, last one.

And then we're gonna look at functions. I'm really excited to jump into functions. Let's look at this last one and then we're gonna look at functions. All right, number three. Should wanna close all this stuff here. All righty, this one was a tricky one. I'm not gonna put a time wrap. I just wanna walk through it together and we'll go over this one together because I know this one was kind of tricky. Actually, quick minute. For folks that did what I asked them to do of deleting, retyping, deleting, retyping, deleting, retyping, here's your victory lap. A minute on the clock. Thank you for doing what I asked you to do. Go for it, figure it out, go for it. You already know, you should already know what to do. You already know what to do on this one.

That's why we're saying a minute and then I'm going to talk through actually how to do it. This is the victory lap for folks that did the homework. Don't know what to do, that's all right. We're going to go over it in 40 seconds. Our stream beats comes with some anger like it. If you're using query selector, you always use the quotes, nothing to guess about it. Just use the quotes. Cool. All right, folks, come on back on this one as quick as the victory lap. All right, let's show the music here. All right. Okay, I actually don't know if we did Jag Tony's hydration, just in case I missed it. Cheers to you, if you're able to hydrate, let's hydrate. Cool, I love it, there you go, Augie. All right, let's take a look at this one.

Let's open it in the browser first. Okay, what we have here is two contestants who you're able to click on. Excuse me. You can click on Claire, you can click on Nikki. If you click on Claire, I want an alert to pop up that says wrong. And if you click on Nikki, I want it to show her lovely photo, right? So click on Claire, it should show wrong with an alert and click on Nikki, it should show their lovely photo. Let's go ahead and figure out who won the final rose here. If we look The things we're clicking on they both have the class of contestant But only one of them has the class of Rose so we can actually use this to determine Which one we clicked on because if we clicked on something that has the class of Rose We know we've clicked on Nikki if we clicked on Claire and we checked for Rose. They wouldn't have that class Let's go and take a look We're doing something slightly different here. We're using something called query selector all. This enables us to select multiple elements at the same time. So I'm going to use the class of contestant. Right? The class of contestant.

If we look, both Claire and Nikki both have the class of contestant, right? So I'm able to use that class. And so I'm gonna say grab all the elements that have the class of contestant, right? And I'm storing it in the variable called contestants. Now, this line here is a very tricky line. It's just a bit of code that enables us to put an event listener on every single contestant that is in this variable, right? For those that read ahead a little bit, what is foreach? It's a what? Something we're gonna learn about next week. Foreach is a what? It's a loop, right? It's a method that gives us a loop, right? It's a loop. And so what we're gonna do is we're gonna loop through each contestant, right? We're gonna loop through each contestant, right?

and we are going to add an event listener to it. So in this case, we have our event listener, our event down here, our set of functions down here called checkForRows. Our event listener is gonna add a click to every contestant and each one of those clicks should trigger the checkForRows function down here. It should trigger the checkForRows function. Cool. Right, so where do you get all these smurfs? All right, so if we look at our check for rows, the cool thing we're doing here is we're passing something into this function. We're about to see arguments and parameters and some really cool stuff about how functions work in a few seconds. And so what we're saying here is, hey, we're passing the click into this function. Look at what the target of that click was. Like, what did the user actually click on? If the thing the user clicked on has a class that contains what, right? We know that we're looking for the class of Rose, right? So if the thing we clicked on has the class of Rose, we know that we've clicked on Nikki, right? Because if we look, only Nikki had the class of Rose.

All right, only Nikki had the class of Rose. So if we look at the thing that we clicked on and it had the class of Rose, we can go ahead and toggle the hidden class on Nikki. And then if the thing we clicked on didn't have the class of Rose, we know that we clicked on Claire, right? The only other option here is if both of these, right? If both of these now have the same event listener, right? If both of these now have the same event listener, there's only two options. Either the thing we clicked on has rows and it's Nicky, or it didn't have rows and we alert wrong. Come on now, we talked about that dot a bunch of times tonight, right? Talked about this being a way to select elements from the DOM, right? We're actually trying to find something in the DOM that's a class. Here, we've already said that this is a class, right? By using class list, we said this is already a class, so we don't need the dot. We don't need the dot there. We already said it's a class, and we're not actually selecting anything from the DOM. Cool.

All right, let's make sure this works, and then we'll move on. Refresh, I'm gonna click on Claire321. Wrong, so we know it works. and then if we click on Nikki, it should show their lovely image. Boom, there you go, lovely image. Alrighty. Alrighty, so that was our lovely bachelor code. Let's move on to our new topic this evening, which are functions. We're gonna do functions, about 20 minutes or so, and then we'll wrap up class with a lovely raid. All right chat. What are what are functions? Yeah Yeah Exactly functions are just sets of instructions just instructions Functions are simple sets of instructions. People often refer to as functions as like the building blocks of a program. I've been using the term Legos and blocks is kind of the extension of that, right? A function is the reusable blocks in our program that we can reuse over and over again.

Sets of instructions that we can reuse over and over, right? So for me, like in my brain, I have a set of instructions for how to clap, right? Like clap, right? There's a set of instructions in my brain that says like, take right hand, take left hand, bring them together at speed and you'll make a clap, right? And so the cool thing is I can call that function over and over and over again. I can clap, clap, clap, clap, clap, clap, clap, clap, clap, right? I can do it over and over and over again. And this is going to bring, right? This is going to bring a lot of reusability and dryness to our code, right? Let's actually take a look at something already. Let's go back to some of the code that we've already seen. Let's take a look at the second one here. Let's take a look at Andy next, right? Let's take a look at this. How many steps are there in this set of instructions?

How many steps are there in this set of instructions? Yeah, there are three things that are in the set of instructions. So what if I wanted to do all three of those things three times? What if I wanted to do all three of those things three times? Without functions, here's what it would look like. Without a function, if I wanted to do all three of these things three times, this is what it would look like. Boom, boom, boom, right? That's me doing those set of instructions three times. That starts to get messy. It starts to get out of hand, right? What we could do, however, is instead of having to retype all those instructions line by line, we could do Andy next and then just run that three times. Right? So we went from nine lines of code to three lines of code. And that's the beauty of what functions bring to the game is that instead of having to repeat ourselves over and over again, and our code base is getting exponentially large, we put all the instructions that we wanna have happen in one function, and then we can repeat that function as many times as we want, right? There are so many things that you do every day that are functions in your brain.

How to make coffee, how to turn on your computer. There are these things that we do all the time over and over again. And when we start writing code, we don't want to have to, right? We don't want to have to write out everything from scratch each time. By throwing our code into functions, we get reusability. The ability to write one line and get all those instructions, right? Cool. Let's take a look at that. Here is how we break down a function. Function has really two key steps to it, right, really two key steps. We have the declaration and we have the call. Now, we've heard of declaration before. What is declaration? Where have we heard declaration before? Where have we heard declaration before?

We did hear it in CSS, but let's stick to JavaScript. Where have we heard declaration before? Yeah, we declare our variables. And what do I mean by declaring my variables? What does that actually mean? What does declaring a variable actually mean? Yeah, we're putting it into memory, right? We have memory and in memory, we've seen declaring variables like let dog age, right? We've seen that before, where we'd create a space in memory called dog age, right? Well, functions are the exact same thing. Here is a function declaration, right? That has a name. And so what we're gonna do is we're gonna create a space in memory called name. Because the whole point of a function is to be able to do a set of instructions over and over and over again. So we actually need to store those instructions in memory.

Right? So that's why we call this a function declaration. Right? We're going to take these sets of instructions and put them into memory. So that way in the future, If we ever want to clap, we can just say clap, right? If in the future, we want to be able to make peanut butter and jelly, we can say, make peanut butter and jelly. We have all these sets of instructions that we can store into memory and then reuse whenever we want. And so the act of using a function or telling it to come from memory, right? To pull it out of memory and actually do it, that to follow those sets of instructions, we have to call it. Right? A function won't run unless it is called. Right? So we declare our functions, which puts them into memory so we can use them whenever we want, but they won't run until they are called. All right, we got a hydration. We got a couple here.

We got crisis and we got dev, instinct dev. Thank you so much for the hydration. Cheers to both of you. You're able to, let's hydrate. All right, one and two. All righty. So this idea of putting a set of instructions into memory and then running them, right, is how we're gonna do a lot of stuff in JavaScript. Here's an example of a function. Here's an example of a very simple function. we have now in memory a set of instructions called yell. And whenever I wanna yell, I can call that function. And I can call it over and over and over again. The beauty is I can put whatever I want inside this function and then reuse it over and over again. Now, when you are creating functions, there are two very important things to keep in mind. Remember, this is the thing that's going into memory, the set of instructions, right?

And this is the call, telling those set of instructions to run. Now, there are two pieces of information here that we haven't talked about yet. We have arguments and we have parameters. Whenever you call a function, you can pass stuff in. You can pass stuff in to the function. So I like to think of, I have a very healthy relationship with my mother, but I like to think of it this way. Whenever I call my mom, it's to argue, right? So whenever I'm calling my function, I pass in arguments. So whenever you're calling, whenever you're trying to get that function to run, you're passing in an argument. And so when I call my mom to argue, I pick a topic to argue about, right? We're gonna argue about ducks, right? Or the next time I call them, We're gonna argue about Pokemon or next time I call we're gonna argue about succulents, right? We have the ability to call that argument You had the ability to make these calls to pass in different arguments each time right, and so when you call a function you can pass in an argument and that argument gets passed into the function and And it really falls into a bucket that we call a parameter. Give me a second here, I know these, if you haven't done the reading yet, these are a little complicated to understand. Give me a second here.

We call the function, we pass in an argument, right? And that argument falls into a bucket that is our parameter. Parameters are like variables that only exist inside this function, right? So let's see what I'm talking about. It's kind of hard to see without looking at it. So here, this is a what? Chat, what is this here? What did I just circle? What is that? It's not just a function, it's a function what? Yeah, it's a function declaration. We now have in memory, we now have in memory a function called yell. Now I have in memory a function called yell, And then down here, what's this chat? What's that? It's a call exactly And I call my mom to what I call my mom to what Argue so what the heck is string?

Hello string. Hello is a what? Yeah, it's our argument. It's the thing that we're gonna argue about, right? And so that string hello falls into the what. What does this string hello fall into? We see word here. What the heck is word? Word is a what? Word is a parameter. Right now, wherever I see word inside of this function, it is actually what? But in this instance, word is what? Wherever I see word inside this function right now, word is actually what? Yeah, it's actually string hello, right? Because here is the function call.

I've passed in the argument of hello. That argument falls into the bucket that is word. Wherever I see word inside this function, it's now actually string below. And the reason why this is so helpful is because now I can reuse this function over and over and over again. And each time I call my mother to argue, we can argue about different things. We can yell about different stuff. I can yell hello, but I can also yell goodbye. I can also yell, I don't know. Something else I could yell. I don't yell at my mom. I can yell dominoes, right? We could pass in different stuff to yell. I could pass in I love you, right? I could yell I love you to my mom, right? So the cool thing is we wrote a function once, but we can reuse it over and over and over and over again by passing in different arguments, right?

By passing different arguments. So this gives us the ability to do sets of instructions over and over and over again, passing in slightly different changes, right? Right? And it adds a whole new world of flexibility to your code. Let's take a look at this. Let's do one together. And when they're simple, it's kind of like, hey, well, why did you have to do that? It's so simple. We're doing a one line function here, but eventually our functions will get longer, right? They'll do more. All right, so always put your parameter in here. So I'm gonna yell, thing five. It just doesn't matter what we call it, right? And then I'm gonna alert thing five. There we go.

Cool. So now we have a function called yell. We have a parameter called thing five, right? Let's go ahead and call yell. Let's yell hello. Great, you saw we get an alert that says hello. Let's go ahead and call yell again. I love you. Boom, now we get an alert that says I love you, right? Let's do another one. Let's yell. We need more dominoes, right? Now we're alerting we need more dominoes. So we wrote the function once, right? We wrote the function once, but we can call it as many times as we want.

reusing those instructions over and over again. Thing five is just the made up parameter name. I can call my parameter whatever the heck I want. I called it thing five because that's the first thing I thought of, right? It just doesn't matter. You can call it whatever the heck you want. So here we have a function call, right? Here we have a function, let me click out of here. We have a function call with the argument of hello. That argument falls into the parameter of thing five. Wherever I see thing five inside of this function, it's now hello. Then I call it again. Now my argument is I love you, right? Right? Now it's called I love you.

And so now it falls into the parameter thing five and wherever I see thing five, I'm actually just saying I love you. And then I do it again, I call it again. Now my argument is we need more dominoes. That falls in the thing five. wherever I see thing five, it's actually, we need more dominoes, right? Now the cool thing is, you can actually have like as many parameters as you want. Let's go ahead and do function, yell something, and I'm gonna pass in, I don't know, Bob one and Bob two, just doesn't matter what we call them, right? All right, Bob one, Bob two, and I am going to alert. And this time I'm gonna pass in a template literal or a template string that we've talked about before. So let's go ahead and say, I, and then we'll pass in Bob one, after I, and then we'll pass in Bob two. Cool. We'll do our closing tick and there we go. So now I can alert i bob one after i bob two. All right. Let's go ahead and make sure this is actually declared and put into memory.

There we go. I can do yell something. And now I can pass in two arguments. I eat and swim. There we go. And we can see in the alert, I know it's tiny, but it says, I eat after I swim. Right. Let's call it again. I sleep and there we go. So I passed in sleep and go to class. Now we can see I sleep after I swim. after I go to class, right? We got to hydrate in here. Skylilypie says, hi, thank you for the hydration. Cheers to you.

All right, let's take a look at this. All right, eat and swim are both what, chat? Eat and swim are both what? Eat and swim are both what? Yeah, they're both arguments. All right, so this first argument of eat falls into the parameter of bob1. Wherever I see bob1, now it is the same thing as if I had said eat. Then our second argument of swim falls into the parameter of Bob two. Wherever I see Bob two, it's the same thing as having said swim. And that's why we saw I eat after I swim inside of our alert. Cool. Let's look at our next two arguments here. We called the function again, right? We called the function in again, and we passed in the first argument of sleep. Sleep falls into Bob one, wherever I see Bob one, it's actually now sleep.

And then I pass in my second argument of go to class that falls into Bob two, wherever I see Bob two, it's actually the same as saying go to class. And so we'll see, but when we call it this time, we see an alert that says, I sleep after I go to class. So chat one more time. What is this here? What is that? The function? What the function declaration call. Okay, cool. Function declaration. What are these? These are both what function? And what? Their function calls, nice. Both of these are, all four of these are what? Arguments, nice.

And both of these are what? Parameters, nice. Alrighty folks, let's go ahead. We're gonna do one assignment together. So we're gonna go a little over tonight. We're gonna do one assignment together and then another one will be due for homework. So let's go ahead and take a look. We have in our materials for tonight, simple functions. All right, so we have three things to do here in the JavaScript that says create a function that adds two numbers and alerts the sum, create a function that multiplies three numbers and console logs the product, right? And then create a function that divides two numbers and returns the, what is that called? The quotient, cool. All right, so we're gonna put five minutes on the clock. Actually, we're gonna do four minutes. We'll do five minutes on the clock. Five minutes on the clock.

Take your five minutes. We're going to go over it and then we'll end class. The quotient. Yeah. I always forget the result of division. Get out of here with the duns. Five minutes, push yourself if you're already done, push yourself, make it do wilder and wilder stuff. Hey Nick, how you doing? Everyone's pumped for Elden Ring Alright folks, you got this I know if this is your first time playing with functions it can be hard It's all right. You don't get it. We're gonna go over it together. Then we'll end with a nice raid Get those channel points Got this dig deep Glad I did the reading, yeah, it pays to do the reading folks! Some more oh snap it works. Hey, I'm glad some of it's working cool. I Wrote the code in my head.

Yes, you start your pseudocode, right? Thank you car has been doing you a solid that's awesome bad they're coming in useful All right, about half the time's through, we're going to take another two minutes, 30 Seconds, we're gonna go over them together and then we're gonna do a cool raid That's actually a pretty common Complaint like not knowing where to start The only way that you get more comfortable of knowing how to start is by doing it repetitious like doing in repetition Right doing it over and over again until you start to see and recognize the patterns You don't need to actually look like the biggest thing. I keep saying it. I don't know how to say it any louder any anymore Delete it do it again and do it again until you don't actually have to look at the other code You can just type it out It doesn't matter if you don't understand a single bit of what's happening Just by doing it until you don't need to look at the example means that you have those patterns in your brain So when things actually start to click you remember all the patterns and it comes together like a tidal wave So even if you have no idea what tech you're doing get that repetition in The caffeine he said yes, the bleep repeat has helped me a lot it does trust me it just works I don't know why it just works. We do know why it works right? The the space repetition is like a it's forced, right? For straight nice done for the first time, ayy I love to hear it alrighty folks got about a minute left Got some folks getting their first dunce tonight, I love it. Had to peek back into the functions reading, good, yeah! Make sure you use your resources. I love that Oh some folks coming in done it the buzzer here, I love it I didn't test it. Can I play elder ring now? Let's go over it All righty, I appreciate that comment about the bootcamp. All right, folks, let's take a look at this together. Go over it together and we'll do our raid. All right, let's chill the music here.

All righty, create a function that adds two numbers and alerts the sum. All right, let's create a function. We got to get used to our function syntax, right? Function keyword and the name of the function. So if we have a function that adds two numbers, what do you think we should name our function here? Some, or I like to be a little bit more descriptive. Add to nums, add to nums, right? Or even better, add to numbers, right? I like to be descriptive in my function names. Eventually we'll get to a concept called clean code and this is one of them. All right, function add two numbers. And if I'm gonna be adding two numbers together, what do I need two, I need two what? I need two what? Two parameters, nice. I'm gonna call it num one and num two.

Beautiful, num one, num two. and it wants to alert the sum. So let's go ahead and do an alert. And if we want to alert the sum, what do we got to do to our parameters? There's a couple of ways we can do this, right? We could just do num one plus num two. And that should work, right? Like we're going to add the two parameters together and alert them. So let's try it. Let's go ahead and call our function, add two nums, and let's pass in two numbers. Two and three. Cool. We have two and three here. If this works, this should call our function called add two numbers, right? And alert the sum.

Let's try it. Open this in the browser. And boom, we see that alert of five. All right, see the alert of five. First try. All right, we see the alert of five. Nice. So it worked. There's also some other ways to do this, right? Like we... There are some other ways to do this, right? We could do something like a variable like let sum equal num one plus num two. All right, we could do that here. Maybe make it a little bit more readable and then alert the sum. Or like this would also work, like both of these are ways of doing it.

You could do it directly in the alert, or you could set up a variable that does it, right? So it's kind of up to you. I think this might be a little bit more readable. We're not gonna ever reassign it, so maybe we can just call it const, right? So it's up to you. Like you could do it directly in the alert, or you could do a variable. I like this a little bit more. It's a little bit more readable, right? A little bit more readable. Let's do the next one here. Create a function that multiplies three numbers and console logs the product. So let's go ahead and create a function, function keyword. What's the name? What should we call this one? If we're multiplying three numbers, right?

All right, yeah, multiply, multiplies three numbers. That sounds pretty good to me. And then the, notice what I do here. I always like to like make sure my curly braces close and then I come back in and do my parameters. I feel like folks that stop and do the parameters, they often forget their curly braces. So you'll notice me do this all the time. I do my curly braces, I break them, and then I go back to do my parameters. Just in the beginning, so that you don't forget to close your color braces, which can be a problem for a lot of folks. So if I'm multiplying three numbers, I need three what? Need three what? Three parameters. All right. Zebra one, zebra two, zebra three. Does the parameter names matter? No, we don't have to call them num or anything like that.

Normally if we know they're gonna be numbers, we'd call them num or numbers, right? But it doesn't matter. We can call our parameters whatever the heck we want. Cool. And then console logs the product. So let's go ahead and create a product. Const product equals zebra one times zebra two times zebra three. That's the product, right? Result of multiplication. and then it wants it in a console log. So we'll console log product, cool. Now, we could have just put all three of these three directly in the console log and that would have worked as well, right? Right, right, that would have worked, right? Same thing, would have worked. All three, product, right?

Same thing, just a different way of doing it. And then, right now, if I save this, right, if I save this, and I go to my browser, I wanna see the console log. I go and I open up my console log. I refresh. I get an error. Num is not defined. Where am I getting num is not defined? Why do I have an error? Ah, see num is not a parameter. I forgot the two. All right, let's save it. Let's go back. I get the five from the original alert from the original problem, but I'm not seeing any multiplication. Why am I not seeing the result of any multiplication in my console? Let's look.

I might not seeing the result of any multiplication in my console. That prime, I think that was you. I hope you're doing well. I didn't call it. Let's call it. Cool. Let's pass in. Let's go ahead and pass in our three numbers here. Let's go ahead and pass in two, three, and four. All right, two, three, and four. Let's save it, let's go back. We have our alert from the original function call, and then we have 24. Did it work? Let's go back and take a look. Two times three is six, six times four is 24, Four, so it worked.

We have our call and our function declaration. We're in a good spot. All right, last one, and then we'll end and do a read. All righty, create a function that divides two numbers and returns the quotient. All righty. Create a function. What should we call this one? What should we call this one? Yeah, divides two numbers. Let's go ahead and create our parameters. I'm gonna call n1 and n2 for num1, num2, cool. And returns. What the heck is returning? What the heck is returning? I'll show you.

Here's return. And let's just do it straight in line here. N1 divided by n2. Cool. Returning spits out the answer to wherever the function is called, right? It just spits it out to wherever the function is called. It doesn't actually print it. It just spits it out to wherever it's called. So let's come down here, divides two numbers, and let's pass in two numbers. Let's pass in 12 and six. We'd expect two. Let's save it. Let's go back and refresh. All right, we get our original alert. We get our 24 from the second thing, but then we never actually see anything.

We don't see two anywhere. Why the heck don't we see two anywhere? I don't see two anywhere. I called it, it ran. Yeah, returning doesn't actually print it. So what happens when you return something? Let me show you. So we passed in 12, 12 goes in the end ones where we see end one it's 12, right? Then six gets passed in the end two where we see end two it's six. So we do 12 divided by six, which is two. And then we return two, we return two to where it was called. So it gets called here and it just, poof, evaporates in the thin air. I didn't save it. I didn't put it in a variable and I didn't console log it or return it. It just evaporated into thin air.

So let's go ahead and wrap this call in a console log. Right? Let's wrap it in a console log. Let's see what happens. Let's save it. Let's go back. Let's refresh. Boom, the original alert, the first console log, and then our console log of two, right? Return spits out the value to where it was called. Now, doesn't make a whole lot of sense right now. Why the heck would you return stuff? We're gonna see that in our class next Thursday. We're gonna eventually start chaining functions. We're gonna have one function that'll do the math, then one function that'll like turn it into like a number sign, add like a number sign to it. And we can have all these different functions that work with each other, that spit out stuff to each other, that pull in stuff from each other, right?

So for now, we saw kind of three different things. We saw the ability to like alert stuff, saw the ability to console log stuff, and we saw the ability to return stuff. And in our next couple of classes, we're gonna spend a lot more time with these functions. If you haven't done the reading, make sure you do the reading on functions so you can get more practice with this stuff. I'll of course share all my code from today on Discord after class. There is a bring it home, a bring it home challenge. If you look in the starter code from today, there's this bring it home practice. I want you to do this for homework, right? Make sure you do this for homework. I'm asking you to use variables, functions, conditionals, three of the big four that we've seen already. So this is this is your challenge for today and tomorrow. Make sure you do this for our homework, please then Please for the love of all that is in this world Comment out all your JS Type it all out again without looking Peek if you have to repeat Doing this process and so you don't need to look at your JavaScript anymore for all the examples that we've done for the bachelor code, for the temperature converter, for these three functions that we just did. Thank you for the engagement, right? Make sure that you are, everyone just gets got when I spell stuff wrong. I don't, like it's a me with this play, but people still like get up and ask about it.

I love it. Please make sure, I've asked you to do this three or four times because it really does truly, truly work. So please make sure you do it to bring the homework, To bring the home assignment make sure you do this process of deleting retyping deleting retyping play break Tweet out using the hundred devs hashtag any of the stuff that you take and make this extra you make it your own I want to see them. I want to retweet them. I want to see what you're building Remember, we're going up against Papa John's go ahead and follow me if you want. I'm gonna start releasing more short-form content on on YouTube and on TikTok and all that fun stuff. But for the rest of tonight, we have a lovely raid. I will see you all on Sunday. On Sunday, we are going to do more of this practice. We are going to practice more of these functions, this JavaScript if it was hard. We're also gonna look at some of our past layouts. So if you wanna look at some layouts together, come back on Sunday. If you want to do more of this, of this JavaScript stuff, like if it didn't make sense, that's okay. We're going to come back and do it again on Sunday. And then guess what?

We're going to do freelancing next week and we're going to do even more JavaScript review and practice. So plenty of time for this stuff to kind of sink in, for it to make sense. But for now let's get ready and raid. So as always give them some follows, spread some love, some positivity, good vibes, have a good rest of your night, and I will see you all on Sunday. Thanks for doing some JavaScript with me. Peace everyone. Let's raid.

End of Transcript