Introduction

Good morning, good afternoon, good evening, no matter where you're coming from, hope you all are doing well. Hey, we had some of the silent yo's early, you know, started off right. What's going on? Everybody. Everyone's doing well. Hey, welcome. Welcome. Welcome. Alrighty, we got some bangers tonight, folks. We got a lot of review, a lot of practice. I have some amazing folks here with me helping do some maintenance, and so if you hear some bangs or bobs, that's what's going on. But glad you all are here. Indifferent, yo, thank you for the 10 gifted subs. That's wild. Thank you so much for being here.

I appreciate that. Hey, welcome everybody. Get in here. I hope you're doing well. Hope your, what was it a day or two ago before we learned about freelancing? So many folks on Twitter were sharing that they're already talking to clients. Some folks have already gotten clients. That's wild to me. Uh, but I hope you had some fun last Tuesday, lots of review and practice this evening. Tonight is all about getting our hands on the keyboard, typing out lots of code. Some things are gonna be easy, some things are gonna be hard. We're gonna review it all together. And then as always, afterwards, I'll send you a zip with all of my solutions so you can work through them on your own as well. So we're gonna get into it tonight. And let's, I wanna keep it real for a second here.

What? indifferent. Hey, thank you so much. I appreciate the gifted subs again. That's wild. Trying to what that's wild. We're literally live. The train don't stop. Thank you ghost. I appreciate you. That's wild. Hey, thank you for the gift of subs. I appreciate you. Uh, for those that don't know in different, they, they, they go off on discord, helping so many of folks that are lost in the sauce going on the struggle bus, the other ones that, that get them off the struggle bus time and time again, uh, when you're in that celebrations channel and you see folks thanking the community and difference always on that list because they really do the most and help out so many folks here. So I appreciate the gift of cells, but I appreciate you being here.

I appreciate all the work you put in to make 100 devs what it is. What's going on? It's weird, folks, it's weird. Today was not a good day for me. These past 24 hours were rough, but coming live, getting the yells in, seeing everyone here, seeing all the support, I love seeing y'all. Thank you for being here. We got a lot of fun stuff to do tonight. Tonight is a lot of review, a lot of fingers on keyboard, and I think after this class, after this class, things start to click a little bit. We're not gonna go as far as to say things will start to make 100% sense, but I really like this class for folks that are fully on the struggle bus, where you're starting, we're three classes into JavaScript. Remember that, three classes into JavaScript. That's kind of wild, right? We're three classes into JavaScript, script and this class I think is enough practice to start wrapping your brain around some ideas. So I'm hoping that you're ready. I'm hoping that you're excited and I know that if we work through these together things will slowly start to click and then over the coming weeks things will start to click. We have a lot of stuff coming in that's going to help and push but tonight about practice global a thank you for the gift of subs.

I appreciate you. It feels like we're a month deep. Exactly, we're three classes in the JavaScript. That is so wild to me, the fact that you all are picking up on things, taking things, making them your own. It's always wonderful to see. I love when folks share it on Discord. I see you sharing on Twitter. It blows my mind how quickly you're able to take things and make it your own and not even that, just willing to see people play. That's the biggest thing for me. I love being able to see folks that are willing to leave the the the imposter syndrome at the door to get in there to play to build to break to have things go hilariously wrong and in the end maybe make something original so for those that haven't made it to that place yet i hope that after these couple next couple classes you start to feel a little bit more at ease and you feel comfortable to play because in that playing is where most of your learning will come it's the building it's the breaking It's the having the fun where it will come through so tonight we have lots of hands on keyboard practice But have fun with it. It's a lot. There's gonna be some things that are easy some things that are hard But please please please have fun with the stuff this evening All right We always like to start off with some questions And so the question of the day Question of the day. Would you rather to be able to see your own future? or everyone's future but your own? So yours or others?

Let me see yours or others in the chat, please. Yours or others? Ooh, this is like 50-50. You know what, we need to do polls. We should be doing polls instead of just throwing in chat. That'd be, that'd probably be way better. I'll figure that out for next class. Others, others, I think others are edging it out. You know what, I feel like, I feel like I could do more good knowing others, but I could sleep a lot better with my own. Oh, that's a hard one. I'm going to go others for now. Others for now. It might change. I might've said something different last time. I'm going to go others for now.

Become the prophecy exactly. Would you sleep better though? Exactly. That's the real question. I'm going to say others. Maybe, maybe me knowing my own be too much in life would, uh, be fabulously turned upside down. So let's, let's go with others. All right. We always like to get some questions as folks are showing up. So other questions for me, we're going to kind of answer a few questions and then we'll get started. Always like to give folks a chance to get in here running from work. Yeah. Question. How do you keep two Twitter profiles separate? Mine keep cross pollinating.

Uh, I don't know. I don't have two separate profiles. I'm a big proponent of having one even like being professional and just not while and on Twitter Some folks like the while on Twitter that maybe then you have to create a separate account But I don't know I kind of treat Twitter a little bit more professionally than I think some folks would but I'm also not the best At Twitter. I really look the folks like Sam to see like what's possible, but I think one account is just easier When do we start the coding challenges next week? So we wanted to, we kind of slowed down a little bit. We did an extra review class. And so I didn't want to overwhelm the folks just that we're kind of getting the gears turning with JavaScript. So next week is going to be a little bit of an odd week. We're doing a lot of networking and coming together as a community. So next week will be time for the coding challenges. People are like, slow down. No, no, no. We got an extra, we got an extra review class in. That's all I'm saying there. Oh, indifferent started the poll.

I love it. There you go. Thank you. So I wanted to just take a little bit of a breather. I wanted to get some more practice in tonight and then we'll start the challenges. I'd rather do challenges together. And then next week, Since it'll be less formal class next week, it'll be good to have those challenges every day. So there's something to push yourself while we might not necessarily be physically like in class. Yeah. Cool. I'm having my own personal challenge, I feel you. I had a discussion with my girlfriend about the difference between junior and entry level but a hard time expressing it. Why is junior not okay but entry level is there is a weird connotation when you throw around the word junior. It's a word that's used to pay people less to diminish their capabilities and their ability as a software engineer. So I don't like the negative connotation that comes with junior.

I don't refer to any of my students as junior. It's not something I would ever throw out there. I think there is a weird kind of power complex when you start throwing out that word. And so for me, I think entry level is the more appropriate term for folks that are software engineers. We're not saying you're less than, you're a software engineer, but you're at the beginning of your career. To me, that's a way better phrasing. And it might be semantics for some folks, but for me, I think there's a really heavy bias when you throw around the junior word that I don't like and we don't have to use it. So why use it? Yeah Yeah Do we get spring break? Well funny thing is last time this cohort we had like a two-week break after this class So we're not doing that break that we did last cohort, but next week is going to be more Um more things that will be more community focused. So we're going to have networking nights We're going to have like working together nights and so it'll be not necessarily 100% class, but more coming together as a community. And you'll notice that there is a lot of homework. That homework is not due next Tuesday. It's due the Tuesday after, right? So you have like a whole week where we're not doing formal class, but more networking, more getting to know each other, more supporting each other.

And then you have these readings and challenges that you'll be doing Kind of either a little bit later in class time or on your own and then we come back together and we go hard Right, so that's the idea. So a little bit slower of a week next week Cool Alrighty, let's talk about some stuff folks tonight. We're gonna talk a little bit more about next week We're gonna review some pseudocode Variables conditionals functions lots of fingers on keyboard practice with each of these So we're going to review variables and then do practice problems with variables. We're going to review conditionals, do practice problems with conditionals, right? Then we're going to do functions and then we're going to review functions with practice problems. I got you tub. Um, then once we got all of our review in, we're feeling comfortable, we're feeling confident, then we'll do loops. I'm good. All right. Before we do that, we got to talk about some stuff tonight. So please if you haven't already Check in you can always do exclamation point check in here in chat But if you're following me on Twitter, you would always see the tweet If you look at the following materials channel or the going live notification you have the check-in as well Today five-hour class not today five-hour class, but on Sunday, I feel like Sunday's class might go five hours So Sunday, we're doing our normal office hours, but there's so much stuff that I want to cover where I want to do a few layouts. I want to incorporate JavaScript into those layouts. I want to talk a little bit more about freelancing. And so that Sunday might be more of a review class. And so there might be a lot of, we might go like four or five hours.

Yeah, so if you feel like you want more review after tonight, come by on Sunday, we'll get that review in. Cool. Alrighty. Why don't we just teach them express Dab come on now, not today, not today Dab. All right. Thank you for checking in submitting work. There was no like hard requirements for work this week. I just wanted to see what you add it to your JavaScript. So if you played with stuff, if you added stuff, if you broke stuff, I want to see your broken code. I want to see the thing that you tried to do, but it didn't work out. You cried a little. I want you to submit that right? Like I want you to I want you to I want you to show me the stuff that that you worked on Right. So if you are a baddie in real bad code, I want to see it, right? If you if you extended it you add it on to it you made it different you made your own share that too So nothing formal but I just want to see what the things you worked on The prompt for the homework was to delete everything type it redo it delete everything type it redo it delete everything type it, redo it, boy, I wish I had loops, and then make it your own.

And so I hope that you did do that. You have to play with the code, folks. If you're sitting there saying, you know what, this JavaScript isn't clicking, and you haven't done the deleting, retyping, until it's in your brain, and you don't need to look at the examples anymore, there's a reason why you're feeling that way. You have to get that repetition in. If you have the privilege of time, please use it to do that repetition. All right, I want to start off the next few minutes here with, with a poem I shared it in the, in the, uh, all along materials channel today, but it's a, it's a, it's a really important poem and I think it's something that I need all of you to have in your brain right now as we go into these next couple of weeks, right? So give me a second. I'm going to, I'm going to read it. I'm going to read it. It's this is, this is poetry night folks. It's a quick one. Give me, give me the, give me a few seconds to go through it. Thinking if you think you be in, you are, if you think you dare not, you don't, if you'd like to win, but you think you can't, you almost certain you won't. That's huge. That's huge.

If you'd like to win, but you think you can't, it's almost certain you won't. If you think you'll lose, you're lost. We're out in the world, we find success begins with a fellow's will. It's all in the state of mind. I can't explain that anymore. We talked about Dr. Thomas, right? Winners win, losers lose the state of mind. You got to get past the imposter syndrome. You got to get past the fear, the doubt, the thing that's in your brain telling you you can't do this. You got to get to the other side and say, you know what? I'm a baddie. I write bad code. I'm going to have fun, I'm going to play with this, and then through that exploration, that playing, things start to click. All right.

If you think you are outclassed, you are. That's why we don't use the word junior. If you think, if you got to think high to rise, you got to be sure of yourself before you can ever win a prize. You've got to be sure of yourself before you can ever win a prize. You've got to be sure of yourself before you can ever win a prize. You got to be sure of yourself, folks. Don't think about the things that you don't know. Don't think about the tasks that are ahead of you. Don't think about all the JavaScript that's to come, right? Have a belief in yourself that as things come, you will work through them. You have the skills. You've learned how to learn, right? You have your active recall. You have your spaced repetition. you have these things that you can use at your disposal.

My biggest strength as an engineer is not the things that I know. My biggest strength as an engineer is knowing that I can figure stuff out. That's it. I know that if given enough time, I have a belief in myself that I will figure stuff out. You need to cultivate that belief in yourself. And if you're here, you can do it. Cool. Life's battles don't always go to the stronger or faster man, but sooner or late, the man who wins is the man who thinks he can. So pronouns aside there, you got to think that you can do it. I don't know how to explain this any, any other better way. You got to just believe in yourself that you'll get there. We're on class. We're 15 classes in. 15 nights that you've given me to learn this material. Think about how far you've gone in those 15 nights.

It's wild. The things that you now know, the HTML, the CSS, the JavaScript, even if it's not perfect, the fact that you sat down, you invested your time to learn this stuff, and some things are sticking, that's amazing. it is most folks don't put in this work they don't give themselves the benefit of the time the benefit of believing and thinking that they can but the sooner you let that sink in the more things will start to click the sooner you'll be able to wow yourself on a very day-to-day basis I sit down I write and I go, holy shit, I just did that. Like I didn't know I was capable. I can't tell you how often that happens, but I know I can figure stuff out. You're gonna surprise yourself the more you put into it. Cool. So I wanted to start off with that because there's a couple of things that we need to just lay out there before we get on tonight. I know it'd give me a little bit more room to rant, but you gotta realize that JavaScript should not make sense yet. It just, it just shouldn't make sense yet. You're three classes in, it's a brand new language, a brand new language. If you were three classes into learning Spanish and you've never spoken Spanish in your life or three classes in the Japanese, never spoke Japanese in your life, you would not be freaking out saying that you're lost, that things don't make sense, it just doesn't make sense, like it just, it just, it's just not it just doesn't compute like I don't understand right that that feeling right like it's yes things seem difficult seeing things seem hard but you got to believe that was time you'll figure it out right so it shouldn't make sense yet we're not there one of the things that you're seeing hopefully is that we're learning just enough to be dangerous right a lot of these concepts stack and and there's no way that you can stack without having a few blocks to play with at first. You're not gonna have all the Legos, you're not gonna have all the blocks, but you have enough to start building bigger and bigger things, right? And it's really hard when it comes to web development to think in the bigger picture when you don't know what the building blocks are. So we cover a little bit of HTML, we cover a little bit of CSS, we cover a little bit of JavaScript so you can get an overview, you and then we grind, we put in the work, we put in the hours, we make sure that all those things start to click, right?

And so you can't put that pressure on yourself to say, you know what, I'm not 100% there. You're not supposed to be 100% there. JavaScript, 100% should not make sense yet. It's just too early. We're three classes in, people spend their whole careers on this, right? Cool. How about this? You should still struggle with CSS. You should. You should still struggle with CSS. CSS should not, not make sense. All right? People say, or somebody drilling, no, that's your brain making these connections. That's the people going to work in your brain. You hear the connections being made?

That's it, that's what's happening, right? You should still struggle with CSS. us. No one, no one expects you to have mastered CSS to be able to do beautiful layouts from scratch. No, you just haven't had enough time yet. But why, why spend all your time worrying about not being good at CSS when you could be investing your time and continuing your learning journey, knowing that as we get to bigger things, you'll come back and reinforce those concepts. I think, I think that's what I need you to see, right? You should still struggle with choosing HTML tags. There's hundreds of them. I don't know if there's hundreds of them. There's probably around a hundred of them, right? Right? There's probably around a hundred. There's just too many. We haven't, you haven't had, I love this.

So the primogen said the best thing you can do to become a better engineer is time in the saddle, like time actually writing code, building stuff. You haven't had enough time in the saddle to see everything, right? That's a beautiful line. So you can't put that pressure on yourself to say, you know what, I don't know all the HTML tags. You haven't built enough stuff to know all the HTML tags. And then where I need you to think is that it's completely normal, right? It's completely normal, right? It's completely normal to feel like you don't understand all the JavaScript. It's completely normal to still be struggling with CSS. It's completely normal to not know all the HTML tags. Even the folks that are flexing on Twitter with the projects that they've done, there's still huge gaps they don't know, right? Like it's, it's, it's not, it's not going to click in just the 15 classes that we had, but what I need you to realize, right? What I need you to realize is that you can and will be able to get there and do this. I have seen hundreds of folks get jobs as a software engineer. I've taught thousands of folks to learn how to code I've seen folks from every walk of life with every struggle that you can possibly think of the folks that make it Managed their frustration.

They were consistent It took care of themselves and that taking care of yourself The taking care of yourself is not just the hydration. It's not the taking the breaks It's not the letting your eyes focus on something that's far away. It's not doing dr Levi, the fitness doctor's exercises. It's letting yourself believe that you're going to eventually get to the promised land. That's the taking care of yourself, giving yourself the belief that with more time and more effort, I'll get there, right? That's the taking care of yourself that you need to be putting into practice right now. No more, I'm lost. You're not lost. If you're on a journey, which is gonna take you a little bit longer to get to the promised land, all right? No more, things aren't clicking. No, you just haven't had enough time in the saddle. All right? It's not a you thing, it's a time thing. So give yourself the time, believe in yourself that when you put in the effort, you'll get there and you will. Now the thing that came up last class was Leon.

All this stuff, JavaScript doesn't make sense. CSS doesn't make sense. HTML doesn't make sense. How do you expect me to freelance? Freelancing is the best thing you can do if your JavaScript doesn't make sense, your CSS doesn't make sense, your HTML doesn't make sense. Freelancing is literally the best thing you can do because when there's money on the line, when there's a client that's expecting value, Oh, you're gonna learn today You're gonna learn today There's nothing more Encouraging to get your butt to put in the effort to understand then when there's money Accountability and that there's somebody breathing down your neck to get it done You're gonna learn guess what the JavaScript is gonna start clicking the CSS is gonna start clicking the HTML is gonna start clicking right? Cause it has to. That's why we start freelancing. Cause it has to. And guess what? I showed you that freelancing isn't building beautiful stuff from scratch. You're using templates. Every single person here knows how to edit some HTML. You hear the connections being built in your brain, right? Everyone here knows how to change a little bit of CSS.

That's why we did what we did. We covered just enough HTML to be able to go into templates and be dangerous, to add their company name, to change their logo. Then we covered just enough CSS to change the colors to match their logo. Then we covered just enough JavaScript so that if they need something to be clicked on or to make a form, you can do it because you have the ability to. You know enough to be dangerous. Freelancing is what's gonna set you free and really help things to solidify. You learn when you build projects. You don't learn in this class. You don't learn from the homework. You learn by building. The class and the homework is to set you up with just enough so that when you throw yourself into projects, you're not completely lost in the ocean. Right? That's it. That's why we do the things we do. That's why we move so quickly from HTML.

We move so quickly from CSS. We move so quickly into JavaScript. It's because you're learning is gonna be in the projects and I got to get you to the project as quickly as possible You're a software engineer don't ever let anyone tell you otherwise if you've written code you're a fucking software engineer We'll stop put in the time put in the effort and you'll get to where you want to go And don't believe me go look at that celebrations channel that Celebrations channels been popping off folks getting jobs left and right That's gonna be you with more time in the saddle Manage your frustration be consistent and take care of yourself. Not just physically but mentally you can do this All right We got some, uh, some unfortunate stuff to talk about before we get into class. I know there's a little bit, a little bit more time than I like to spend before getting into, into the actual topics this evening. Um, but it's really important that I, that I bring this up. Um, thanks, Dev. Um, I'm never going to text you, call you, email you outside of the newsletter, DM you on Discord or Twitter, I'm never gonna ask you for money. Scammers be scamming, they're using the, my name, the 100 devs hashtag, just be careful, folks. Just be careful. I'm not gonna ask you to send me Amazon gift cards, like just use some common sense. And if you ever have questions, send us a mod mail on Discord. I really appreciate when you share like the scams that are happening, that way I can warn other folks that they're happening. Please let us know in a mod mail on Discord and I literally answer every single question in the Ask Leon channel. So if you ever have doubts about something, just ask me in the Ask Leon channel and you'll see that it's me responding, right?

So don't run out to do something, confirm in the Ask Leon channel first, But I'm never gonna reach out to you on text call email newsletter I'm not gonna DM you for stuff or anything like that. Okay, be careful ever 100 debts no Wait, you're telling me you didn't want me to buy you Elden Ring and send it to your address. No, please. Nope People are scamming for Domino's gift cards. Yeah, it's not me. Sorry folks. All right, we go get exactly All right, well I dedicate time to answer freelancing questions. Yeah, we're gonna do, like this Sunday's gonna be the most. We're gonna do a lot this Sunday and then I think we're gonna have another, we're gonna have like another freelancing session where we'll answer the rest of the questions and stuff like that, yeah, cool. All right, the next thing, and I don't even wanna have to, Like this is so, so dumb. Um, and this has just been so weird to have to deal with. So, uh, let me start off by saying this, please don't ever leave a hundred devs and like, give someone hate or grief or it's just, it's just like, that's not what we're about. Right. It's just not what we're about. So please don't listen to this.

And I feel like you have to do something. That's not what I'm saying. Please don't, I just need folks to know that they don't get got. Okay, so there are no other 100 devs classes. There are no other 100 devs teachers other than myself yet. Okay, yet. What happened a couple, a couple, I don't know why, like in the past 24 hours is we have a lot of new folks that find us, right? And a lot of new folks don't know how to get started it, or even when classes are happening. So they'll reach out to me on, I get hundreds of emails a day, dozens of DMS a day, and I try and answer as many of them as I can, but for some reason I started getting messages saying, Hey, Leon, I'm new. Should I attend Saturday's class? And I'm, and I'm like, what Saturday's class, I don't know what that is. Then I got another one, Hey, Leon, should I attend Saturday or Monday's class? And I'm like, I, I don't know what the fuck you're talking about. I wouldn't say that to them, but I don't know. And I kind of was just like, all right, maybe, maybe language barrier or something.

And I kind of just moved on. And then a lot of you started sending me DMS and mod mail that there were people saying that they were running a hundred devs classes, there is no other class. There is no other 100 devs teachers. Be careful, all right? Be careful, okay? There was somebody that was saying that they're running 100 devs classes. A lot of folks got confused. They're not, I've never heard of that person. They've never even sent me a message, right? And so I'm not gonna say their full name, but Eric, I have no idea who they are. I don't know what they're doing. I just had a lot of people reach out that were kind of confused. And so please, when you see this stuff, right? Don't, don't, don't feed into it, right? Don't feed into it, right?

Don't support these folks. You know that there's something weird happening, right? Don't, don't feed into it. Don't support these folks. It just makes it really hard to do what we do and to get people into the right places, to get them the help that they need, right? So please, when you see it, don't send hate, no negativity, but just don't engage. I looked into it and now they're starting some other coding bootcamp. It's weird, it's kind of disgusting. They baited and switched a bunch of folks to get them to sign up from 100 devs and now they're doing something else. So please, don't do it. It just caused so much headache. So please be careful, be safe in these streets. There is no class on Saturday or Monday. And if you're going to those things, why? Just leave a hundred devs.

You're making it way harder for other folks to join the community and get the help that they need. All right, so please be careful. Now, I don't want to end with that negative thing because there are so many amazing people that give up their time, right? That give up their time to support you all, to answer your questions, to give you different perspectives than I can give, right? I've been doing this for a long time. We need other folks, right? We need other folks that can show you what it's like to be a beginner for the first time. And so last cohort, we had amazing people that stepped up to that plate. We had folks like Dab who's in chat right now that would stream hours and hours a week, just answering your questions and working with others. We have OCC, our fearless mod, uh, that would stream their perspective, right? That would take time to get help to help. And so we have amazing folks that are there to support that are streaming that you can go to and get help with. And then we have so many amazing folks on discord, right? I wanted to shout out Mayan Wolf. They've been popping off on discord, doing so many classes, covering topics in depth.

The videos are amazing, right? Like, and they're doing it for the community by the community, right? Like they've been here since the beginning and they're helping, right? We have 30 plus alumni mentors that re-signed up to join the affinity study communities, to start running smaller individualized catch -up classes and to start running individual time where you can get more help and work through problems together, right? So we have all these people that are doing amazing things that are trying to support you. We don't need our energy going to folks that are scamming. So please be careful, keep your wits about you. That hashtag is not anything we have control over. or just be careful. Cool. And I didn't want to have to say like, normally I let all this weird stuff slide, but when I have people reaching out to me, asking like, should I go to these classes? And I'm like, I have no idea what they're talking about. I feel like I have to say something, which is weird. Cool. So with that being said, with that being said, I would love for more folks to join the stream team.

We're always looking for folks that want to stream, that want to share their perspective, that want to work through class stuff, that want to share how they're going through the practice problems and things like that. So if you think you got what it takes, which is just maybe a microphone and a computer, right? And you want to share your perspective and you would like a hundred devs folks to swing on by, fill out this form. We, this upcoming week, we're doing a lot of networking. We are onboarding a lot of mentors that want to start helping you, and we're going to be kicking off this thing called Mentor Mondays, where we're bringing folks and helping them skill up to be helpful to the community. And one of those sessions that I'll be leaning is like how to stream and how to help others while you're streaming. So if it's something you're interested in, you would want to help others while streaming, go ahead and fill out the form, and then I'll send you some information about those meetings. Last cohort, the stream team did amazing things. There's no way that I can help everyone or share different perspectives or have the energy to push everyone at all these different time zones and things like that. So the stream team came together and really did help a lot of folks. And so I would love to see that to continue to grow with this cohort. I think we have a lot of really talented folks, a lot of folks with patience that could do really great things. And I would love to see you try. Cool. Do we have to be super advanced to be on the stream team?

Absolutely not. In fact, it's preferable if you're just in the muck with folks, right? It's so beautiful to see folks struggle. Like it really is. To see folks struggle and to figure it out together with the rest of a hundred your devs, there's nothing better than that. So don't think that you need to come out of the gate swinging. Don't feel like you have to be a super elite coder. No, it's almost preferable that you're just as lost in the sauce as everyone else and you come together to work through it. Cool. So, uh, is this the folks we see going discord going live? Yeah. So folks that are in the stream team, we can actually see when they go live. So you get messages from me when I go live, but folks that are a part of the stream team, they can also send out those messages. We only send out one message. We don't spam you or anything like that.

So it's cool that if you follow the stream team channel, you can see when folks go live as well. No, cool. Alrighty. How do we join? There's this form here. Uh, you can go ahead and click on the slides exclamation point slides if you ever need the slides Uh, i'll drop it in chat as well There we go Park sniffer said anyone else hearing construction noises. That's all the neural connections being built in your brain I love the stream, but I don't have the time. That's okay. That's okay It's for folks that that want to one of the beautiful things too about streaming is that you get so much help A lot of the folks that stream they they just have regulars that are like senior engineers that help them with their projects And so yeah, it's a cool thing to do. I Would love in the future that every single the day of the week. There was a hundred devs member that was live That we could all just go support get help from and so that's that's one of my like visions for the future. I would love If you could help me make that real Alrighty One more thing we have to talk about before we actually get started with class and I know this has been like 45 minutes of ranting leon, but it's necessary please Be kind I I don't realize that I have to say this But if you can't be kind, you have no place here at 100 devs, you just don't. I wish you would leave, I really do. That's being kind to yourself, it's being kind to others, it's being kind on Discord, it's being kind on Twitter. We have folks that sign up to share their experience, to give us the details, the goods, things that you'll never see anywhere else, actual contracts, actual proposals.

Be considerate. Don't test their sites. Don't spam weird stuff in their forums. Don't reach out to their clients. Don't be weird. Be kind, be considerate. Realize that they're actual humans behind the screen. and if we don't treat these people well, if we don't mess with their, if we mess with their stuff, nobody else is gonna wanna share either. So please, be kind, rewind, if you like Blockbuster. It's not me that's getting mad. You hear, the people up top are getting mad too, right? So please, when folks share stuff and we share it live, I know there's 4,000 of us, but don't be a jerk don't blast their forms. Don't don't be weird Be kind or just leave We don't need you here. We really just don't Cool Now let's end with a little a little uh, a little bit of a little bit of a celebration so So, I said last class, the best clip will get a special color on Discord. You're talking about the ultimate flex?

Well, that is the color on Discord. We have a beautiful, bright yellow, right? The color of dreams that only one person has right now. And so, if you make a clip and we pick the clip as the best clip from the stream, you get a beautiful color on Discord to stand out, to flex, everyone's gonna see you. It shows up on the categories on the right hand side above pretty much everyone else. You will be one of the fanciest folks on Discord. And so last class, we had a winner. And the winner is Nicholas1985. they had an amazing clip of I just giggled way too long. Blah shared it with me too. We were giggling as well. Like they, they, they, it was a funny clip. Now your clips, they can be funny. They can be educational. That's up to you.

We'll be going with both. So we'll pick some educational ones. We'll pick some funny ones. And so if you have the best clip, be mindful that the clip you might need to, you know, get, get the sweet spot if you want it to be good, right? Timing counts. And so each stream after each stream, I'll post a thread or we might use slido so folks can upvote them I'll share a place for you to share your clips and then the best one will get the color on discord So nicholas, I hope you get the flex on discord with the color It looks beautiful. It's yellow by the way, beautiful yellow Let us see the clip if you click on the uh, the link it'll take you to the clip. Um I don't know if I can let you all hear it. I'd have to do something weird for you all to be able to hear it. But the clip is a funny one when we talk about the smell and it's just perfectly timed. So go in and click on the link if you want to see it. I'll figure out how to set up so that you can hear them and maybe we'll share them each class. Cool. All right, folks. I'll share a place on Discord after each class.

All right. Next, before we jump into our review, we gotta talk about what's next. Like I said, next week is going to be a little odd. We're gonna have a lot of networking, a lot of getting to hang out with each other, to build, and you have a lot of homework. After that, we're gonna start to pick up the pace a little bit when it comes time to class time, so these classes will start to be a little less review, a little bit more going deeper with topics, just as we get comfortable with JavaScript, because we're going to stay with JavaScript for a while, right? So just know that that's coming next week is all about networking, getting together, or like getting times to feel good with the topics that were covered. And then we're going to start pushing. I'm going to start pushing, going deeper with some more JavaScript stuff. As we get through next week, things like your networking become a priority. Daily coding challenges come a priority. So please get mentally ready. Next week's a good week, and then we're gonna start to try and oomph it up a little bit, just a little bit. Cool. Let's jump right into it, folks. We got a lot to review today.

Golden rule, separation of concerns. We keep our content in our HTML, our style in our CSS, and our behavior in our JavaScript. Why? Organization, exactly. Beautiful. Oh, we talked about IDs and classes. If you're new, we're going through this really fast. We have tons of other classes on YouTube where we go into these topics in detail. IDs enable us to target one thing and only one thing. Classes enable us to target multiple elements at the same time. So we get the ability to target one thing or multiple things. And when it comes to JavaScript, we use them a lot. Cool. Programming. Programming.

Remember, computer will do what you tell it to do. And so a program is simply a set of instructions that you write to tell a computer what to do. And therefore the act of programming is simply writing those instructions. What language are we using to write our instructions folks? We have another way of writing instructions too. Yes, JavaScript is the answer. We have another way of writing instructions. What's the other way that we could write instructions that we all know how to do right now? Hmm. Yeah, pseudocode, exactly. We can always write our instructions in just plain language and then later on come back and find the bits and bobs, the pieces that we need. So when you're sitting down to solve a coding challenge and you don't know what code to use, start with your pseudocode. Try and explain what you want to have happen, right? Talk to a duck, talk to a bob, figure out what you want to have happen and don't worry about the syntax right away. Oh, why is Independence Day a true story?

Why is Independence Day a true story? Yeah, Bob, there we go. Binary upload boom, right? The aliens attacked, Jeff Goldblum saved the world by writing a computer program that affected the alien mothership. all their shields went down, we nuked them America. All right, that's a true story because even though it was an alien language, we could reverse engineer it, break it all the way down to the machine code, all the way to the binary, on and off are probably a universal constant. We could build it back up to simple logic from that simple logic up to something that the machines can understand all the way back up to a language that we can affect the alien mothership with. Beautiful. So the beauty of writing JavaScript is that we don't have to worry about breaking it all the way down to something that a computer can understand. Things in the background handle that for us. And as we get deeper into the cohort, we'll learn about what's actually happening in the background that's taking our JavaScript and making it so that the computer can understand it. But for right now, we don't have to focus on that. We're just worried about communicating our ideas and understand what the heck's going on. I don't know if you can hear that already. All right.

Variables totally sign. All right. I was just jamming out. No worries. Uh, variables, what are variables chat? What are variables in here? But we felt that I love it. They're data buckets, exactly. Variables are a way for us to tell our program to use something later on. It's an entity that we use to store a value and then we can use that value later on. Beautiful. Now, variables, we have two steps. We have the declaration and the assignment, right? We have the declaration and the assignment. with the declaration step, we can create that bucket in memory that we can eventually put stuff into.

Assignment is the step of putting stuff into that bucket. So here we see declaration and assignment at the same time. Beautiful. When we're typing out our variables, I like to use a convention called camel case, right? And that camel case is where the first word is lowercase and every other word is capitalized. It's up to you what type of convention you use, just be consistent. Alrighty, we talked about two major kinds of data so far. What types of data have we talked about so far, folks? Yeah, strings and numbers, great. We've actually seen one other one though, too. We've talked about strings and numbers. We've seen one other in passing Anybody know? Yeah booleans exactly like true or false values Wonderful. Now the quirk about strings is whatever a quote you use on the outside You can't use on the inside unless you what? You can't use the same quotes on the outside as you do on the inside unless you do what to those quotes Yeah, you escaped them exactly One second, folks.

All right. Alright, welcome back folks. Sorry. No, no, that wasn't Bob. It wasn't Bob. No, the maintenance person when I was just leaving, they had just fixed our air con and so I was just saying Thank you and trying to give them fruit, but they didn't want any of my fruit. Oh We got a hydrate, thank you for the hydration Uzi thank you for the hydration Cheers to you All righty Alrighty, let's get into it. So I didn't see the responses here. I just wanna make sure we got it. We can have the same quotes on the outside versus the inside, but we can't have the same quotes on the inside as we have on the outside unless we do what? Escape them, exactly. Wonderful, all right. So far we've also seen numbers. Remember numbers can be integer values or floated values. We can have signed values, positive or negative.

And then we can also do a arithmetic. Plus for addition, hyphen for subtraction, multiply, asterisk for multiplication, four slash for division and percent for modulus. Leon, my food came, can we pause the lecture? Hold on, all right. Let's everybody take a pause real quick. Major's food just got here. Let's go ahead and stop. We're gonna take our break. When we come back from break, we are going to work through variable fun time together. So when we come back from break, we're going to work through some code. We're gonna actually put variables in the practice. So if you're having trouble with variables, when we come back from break, we're gonna get lots of hands on keyboard practice. Major, enjoy your food. Let's put five minutes on the timer There we go, all right five minutes on the clock we come back we're getting right into writing some code folks Thank you, I will run run the ad so folks don't have to get stuck with them while we're while we're teaching So five minutes on timer if you're new here, please get up hydrate stretch If you're able let your eyes focus on something that's far away, and then we'll be back together in a quick five minutes I'm gonna run three minutes of ads. So take your break.

See you soon No two minutes on the timer let's bump it hold on There we go seven minute timer folks enjoy In a bit I'm not used to this extra timer. How do I feel about recruiters? Some of them are worth their weight in gold and some of them aren't. Yeah. I found an article mentioning MDM might be going paid. That's wild. No, I think they're like one of the best open source projects. What do you feel about people getting ISAs or boot camps offering them? I thought we got rid of indentured servitude a long time ago The thing is with the ISA they don't actually care about the investment of the student the people that did the biggest ISA's were Bucketing the ISA's and then selling them to management consulting for like management firms not consulting management firms And then like packaging them as like one like debt obligation I say is an income service agreement or income share agreement or income share agreement where like you you you go through a boot camp With no money down, but then you owe them a big part of your check afterwards There's just so many free ways to learn how to code that it doesn't really make a lot of sense You have the Odin project you have free code camp you have us there's so many other boot camps too that are like online now Too so just seems odd And some folks will make the argument, well, I want like personalized attention and like job placement, but none of those bootcamps actually do that. Once you like talk to people that actually went through them. It's odd. It is Jason, it is. Dragon, I love recursion. I think it's, once you, once you figure it out, it's kind of spiffy. What level in Code Wars should we be good enough to feel comfortable for technical interviews?

I think once you can reliably do a six every once in a while, you you're past the point of where you should have been starting to apply. Remember half the folks that applied, half the folks that got jobs didn't have technical interviews at all. I needed those two minutes. Hey, I'm glad. Thanks and different. I got Got two job offers and accepted one of them. Hey, congrats. Did the transition at 30 from Ireland. Congrats, that's huge. Oh, what's a six? I didn't know what people were talking about. I was like, Drake, is Drake here? No, a six. So in Code Wars, which are like coding challenges, there's levels and they liken them to like levels. Like if you were like doing martial arts And so there's different like belts basically.

And the easiest ones are the ones that everyone starts with are eight. And then you go from eights all the way down to ones. And then there's like master levels. And so I think most folks that can get to like doing all the eight sevens and reliably like do sixes are like super ready to start interviewing. They already have enough skills to interview. All right, folks, welcome back. Hope you had a good break. Major, hope you got your food. Let's get into it. We have this variable fun time. So let's go ahead. You have this JS file here. And inside the JS file for variable fun time, there are a couple different things for us to do. So there's something is on the easier side, which is creating a variable and assigning it. We have some medium and then we have some hard so get as far through these as you can and then we're going to go Over each of them together.

So i'm gonna put Five minutes on the timer here get as far in with these five minutes as you can And then we'll go over them together cool, how about it Oh Again a glad you glad you're here TK Well, you're in the right spot. We got lots of practice tonight So try these practice problems and we're gonna go over them together if you're really stuck on them You don't know what to do hang out chill hydrate We'll go over them together and try to push yourself to understand as we go over them This is the variable fun time files, variable fun time. And for folks that are new, if you need the materials, you gotta join our discord, agree to the rules. Once you agree to the rules, you'll see all the channels open up. Well, you gotta join a hundred devs and then you'll see all the channels open up. There's a follow along materials channel that has the starter code for today. If you still have a gray name on discord, it means you haven't joined a hundred devs. Go ahead and do that You'll see all the other channels open up for you 51 ttv, uh, yeah some folks they they like to To to do the homework as soon as sorry the classwork as soon as it's posted. Don't don't let that get you They're they're doing the most Love me some ddr I missed the hydrate. No, I got uzi's hydrate I got Uzi, there's no other ones today. When do we need a semicolon? You don't really need them as much anymore with the newer versions of JavaScript. You can do exclamation point, semicolon, and then you can read an article on why and all the details. Favorite DDR song? When the Saints Go Marching In.

By far. I can I can I could probably just stand up and do it without needing to hear or see the song How many channel plays for you to do DDR? I don't I don't know there's enough that that's only fans content for sure Hold the h1 just means I want you to put whatever's in the h1 in like a variable All right, two minutes folks How much time in subbing to one mil, I'm not sure I'd be good to figure it out MDN plus is what was being mentioned earlier. I haven't heard of that yet. I have to look it up after class. Got some folks finishing, got some duns coming in at a reasonable time. Good to see. Two bites said I'm in tears. I can't believe I'm done. I know JSA. Let's Go turn up Maribel GG Maribel, thank you so much for hydration. Here's to you Monty give us a refresh sometimes that gets rid of the the stuttering for you Catch you done for the first time with the time limit love to see it struggling with this one. Don't worry. We're going to go over everything together. What system do you recommend for online ordering for restaurants depends on what they need Like setting them up with like Uber Eats could be a way as well, you know There is also a platform something 24, which is really popular a little while back Already folks come on through come on through All right, let's go over this together.

Let's chill the music. All right. So close, hey. Feel hyped, I love to see it. Chow now, exactly. One of our 100 devs alumni is at Chow Now now. So let's throw Chow Now up. They hire 100 devs folks. So yeah, I think Chow Now would be good for restaurants. I like that. Cool. All right, create a variable and assign it a number. Let's go ahead and create a variable and assign it a number. And we see we're going to do some stuff to that number. So if we know that we're going to do some stuff to that number, should we use let or const, chat?

Let or const? Yeah, we're going to use let. If we know that we weren't going to ever make changes to it, we weren't going to reassign it, we could use const, but we definitely know we're going to reassign this one, so we'll use let. And then if we're using numbers, is what do we think is a good variable name? Yeah, like num or number would be a good variable name. Let's go ahead and set number to one. So we created a variable and we assigned it the value of one. Now we're gonna minus 10 from that number. So let's do 10. We can do num equals num minus 10. That's a way of doing it, right? We could have just done the number minus 10. Remember, right now it's one minus 10. So what do we get here? What would we expect?

Negative nine, exactly. And so the last step here is print that number to the console. So whenever we talk about printing to the console, we mean a console log. And so we're gonna go ahead and just put num in here. Now, can I blow your mind just for a brief second here? I don't know if people have noticed this yet. Let's see if this works first, and then I'm gonna come back and blow your mind. All right, let's see if this works. All right, I'm gonna open up the HTML file in the browser, and I'm gonna open up my inspector, go to my console, and we can see negative nine in the console, right? We did it right. We did one minus 10, which gave us negative nine, right? Now, when I look at this console log, this is what enabled me to put that value into the console. If we just look at this right here, ignore the console part. We just look at this right here. What does that look like?

What is that? What if I just highlight it? It's a function call Exactly. It's a function call Remember that that's that's calling a function called log now. Did we did we create a function called log? No, that's built into JavaScript so technically this is a method that we'll get to later on But the cool thing is that you've been using these functions. You might not even know that they were functions And so if log is a function, what does that make num right now? What is num on line seven? It's an argument, exactly, it's an argument. It's the thing that we're passing into that log function. So as we kind of go deeper, we're gonna start to see these patterns show up over and over and over again. So even though we're using console logs, we're still using the stuff that we learned when it came time to write functions. All right, create a variable that holds a value from the input. Create a variable that holds a value from the input. So, if we wanna create a variable that holds a value from the input, what should we call it?

What's a good variable for a variable that holds from the input? Yeah, input it val. So let's go ahead and do let input it val. and we'll set it equal, right? We'll set it equal to the value that was in the inputs. Let's go and see what the input name was. All right. Our input ID is Dance Dance Revolution. So let's go ahead and just copy that, right? And I'm gonna go in here and say, all right, let's go to the document, right? Remember, we're always gonna go look at this DOM, the rendering of our HTML and CSS. That's where we're gonna go and grab the things that we want to target. We're gonna use query selector, right? Query selector is gonna enable us to look at that DOM and grab the bits that we want. And the bits that we want is whatever has the ID of Dance Dance Revolution, right?

Now, once we have Dance Dance Revolution, how do we get the value out of it? Yeah, value, exactly. We'll do that value, wonderful. What this should do is it should get the value out of the input, right? And store it in the variable of input it val. Great, let's add 25 to this number. So we're going to do input it, Val equals input it, Val plus 25. What did I do wrong? Spelling exactly. Look, the variable name is input at Val. And I just did input Val. So we got to be careful. You gotta make sure you don't have typos. We could have also done this a little bit differently. Some other folks may have done this, like input it, val, plus equals 25.

It's also a same way of doing it. It's just a slightly different syntax to add 25, right? And then the last thing we wanna do is alert that number. So let's go ahead and alert the number, alert. And we're gonna pass in input it, val. Alert is a what? Alert is a what? It's a function, but it's built in, right? It's built in. We didn't create a function called alert, it was built in. So it's technically a method. Method's just like a, for now, a method is a function tied to an object, or in this case, functions that are just like built in. So technically it's a function, but also technically it's a method. For right now, we haven't gotten to objects yet, So we're just going to call them functions for now, but we didn't create it. It was something that was built into JavaScript that we got to use.

And this right here is not technically a function. It's a function call, right? It's a function call, right? And so that means we're passing in a value and that value is our argument. Cool. I know we're doing a little extra here with the alerts, but I think it's something cool to see that, like, wait a minute, with just the base stuff that you've already learned, and you can start to see the patterns that build up throughout JavaScript. Cool. All right, let's see if this works. Let's refresh. All right, we see 25. All right, we see 25 in the alert. So it's working for now because there's nothing in, there is nothing in the input. But we're gonna see something, right? We're gonna see something in a second. The 25 is showing up, right?

25 is showing up. So it's kind of working. Let's keep pushing here. All right. Why is it an argument and not a parameter? Because we're calling the function. If we were to create a function called alert, right? Right, then whatever was there would be the parameter, right? And then we could use that parameter inside the function. Right, but it's not a function declaration, it's a function call. We're calling the function alert. And so when you call a function, you're passing in the arguments, right? Now somewhere deep in JavaScript, right? Somewhere deep in JavaScript is a function called alert that we didn't write, somebody else wrote, and that's why we're able to use it. That's why we're able to call it.

Same thing with the log and console log. We didn't write, somebody else wrote it, and we can still call those functions even though we didn't write them. Cool. Last one here. Yeah, so Ox said, so when calling a function, it's called an argument. Exactly. Remember, we call mom to argue. So whenever you're calling a function, it's an argument. But when you're doing the declaration, it's a parameter. Exactly. Call mom to argue, right? Call mom to argue. Whenever you're calling a function, it's an argument. Beautiful. All right, hard.

Create a variable that holds the H1. All right. So let's go ahead and create a variable. We'll go ahead and say, I don't think we're gonna ever like reassign something that's holding the H1, so we'll just say const, and we're gonna call it H1, right? And then, well, we'll say H1 from the DOM, H1 DOM or H1 holder, I like holder, H1 holder, there we go, cool, H1 holder. And so we're gonna go to the DOM, go to the document, use our query selector, and if we look at the H1, There's no ID or anything, so we don't need to worry about like an ID or a class here. There's only one H1 on the page, probably will only be one H1 on the page unless they know about the new sections and the sections having their own H1s. But for now, we don't have to worry about that. We don't have to use an ID or a class. We can just use the tag inside of QuerySelector. And now, H1 holder is holding the H1, right? Is holding the H1. And the beautiful thing now is that we can reuse this over and over and over again without having to retype this out every single time. So now when we get to the event listener, add an event listener so that the element that console logs the sum of the two previous variables. Interesting.

What I want to do, add an event listener, like a Smurf that's going to listen for a click, right? Add an event listener, the element that console belongs the sum of the two previous variables. So I am going to create an event listener, H1 holder. So I'm gonna say, when you click on the H1, all right, I'm going to go ahead and say add event listener and I'm gonna say a click. So when they click on the H1, I wanna run a function called sum. All right, there we go. So when I click on the H1, run the function sum. Now, do we have a function called sum yet? No. Somebody said, don't you need a button to click? No, we can actually click on anything that's in the DOM. So anything is clickable with JavaScript. If you're like after school special, anything's clickable with JavaScript, right? And so we're just going to click on the H1, right? There we go.

So H1 holder is holding our H1. And so I'm going to add my Smurf or my click event to that H1 holder, right? And when I hear that click, when that Smurf hears the click, we want to run that function sum, but we don't have it yet. So let's go ahead and create the function. function sum, and we are going to console log the sum of the two previous variables. So the two previous variables were num and inputted value. Let's try this. Let's console log num plus inputted value. If we look, we had the original variable num that's holding negative nine. And then we have this inputted value that's holding plus 25. And then down here, we're adding a smurf that's gonna click on our h1, right? On our h1, and we set up a simple sum, right? Let's go ahead and when we click on the H1, run this function called sum. Here's the function called sum. We're gonna console.log num plus input at value.

So let's save this. Let's play with it. Let's see if it actually works. Let's save. Go back to the browser here. Let's refresh. We have our alert, which is still there. And then nothing. Nothing. Why nothing? Nothing happened, there's nothing in the console log. I saved, I refresh, nothing in the console log. Yeah, I got a click. Remember, we put this function, this function only runs when there's a click. So we got a click, let's go ahead and click.

There we go. Negative 925, wait a minute, negative 925. What the heck just happened? Yeah, chat's got it. It concatenated. What the heck do I mean by saying it concatenated? Yeah, it's a string right now. Now if we look, look at it even at the colors. The number is like this nice purple, but the strings are this white color. So what happened is it took that negative nine and it exactly, it smushed the 25 together. Negative nine smushed the 25 together. Now we got negative 925 as a string, right? So let's go back and see if we can figure out where this happened. All right, start off with one, one equals one minus 10. So we know that num, so one minus 10, this is negative nine.

Num becomes negative nine and we console log negative nine. Then we go and get the value out of the input and we add that value to 25. Wait a minute, was there ever a value in the input? Like if we look, we grab the value out of the input and we added it to 25. There was never anything in that value. So what it actually is, is an empty string. Since there was no value, it was an empty string. And so what actually happens on this line is we grab the value, but it's an empty string. And then inputted value is actually empty string. And so what we wind up doing is 25 plus empty string. What happens when you add a number to an empty string? What happens? It became a string. It turned it into a string, exactly. it became a string.

And so that oddness happened, and that's why down here, we're not dealing with number 25, we're dealing with string number 25. Like down here, we're actually dealing with this, right? And if we took num, we're actually at negative nine. So when we do negative nine plus string 25, we wind up with negative 925. So we need to figure out a way to get around this JavaScript weirdness. When people say JavaScript is weird, this is one of the things that they're talking about, right? So we can go back, let's clean up our examples here. All right, this input value we know is going to be a string. So we can do something here. We can go ahead and wrap this in number. You might've seen this from the reading. You might've heard of parseInt. You might've heard of parseFloat. You might've seen number, right? These are all ways of getting a number value out of a string.

Let's go ahead and save this. Let's go back and see what we get now. All right. Let's click. Boom. Now we're getting the 16. Right? Now we're getting the 16. Right? The negative 9 plus 25. Right? Because down here, we're using this number to pull the value, the number value out of the string. All right, and now we're dealing with two numbers so we can do our addition. Could you also add arguments to the sum function? You could if you wanted to, but not as we have it set up.

Because right now we don't have any parameters set up for it and we don't really pass arguments within the event listener. We can, but it's weird. Cool. Could you get it to do a character turn as well as a click? Yeah, with an actual form, you can set it up to do key presses. You can set it up for submit. So there's all these different events that you could use that are not just clicks. Yeah, there's exactly, and there's a bunch of ways to do this. You can go about this in different ways, but this is a good walkthrough. So we saw a couple of different things here. We saw variables, creating them, subtracting, adding to them. We saw the ability to set up an event listener. We saw the ability to call a function and we learned about concatenation and how it can mess up our math. It'd be the same C to light. It'd be the same thing, but par sent instead of number.

Same deal. Scaler said, it's not taking the value of the input. True. When does it get the value out of the input? Let's look at this. Let's think through this real quick before we move on. All right, we click on the H1 holder, which is the H1, right? And then we run this function. When the heck did it actually get the value out of the input? When did it get the value out of the input? Yeah, on page load. As soon as the page load line loaded, line 10 ran. So it got the value out of the input when the input was just sitting there being empty. This input is not inside of our function, right? It's not inside of our function, so it's running on page load.

We could do something, let's comment this out. Let's take this value here, let's bring it down here. All right, let's bring it down here. And now, right, now it'll get the value out of the input only once we've clicked on the H1, right? So instead of it being up here and running instantly, right? What do I mean by page load? Ready, three, two, one, refresh, that's page load. As soon as I hit refresh, the page loaded, right? And before, since our getting the value of the input was just out there, it wasn't inside the click event or anything like that, it was getting it as soon as the page loaded, right? So now, let's go ahead and put a value in here. We know that the other value is negative nine, So let's make this nine and click and we get zero, right? We know that since the num was negative nine and the value that we put in the input was nine, we should get zero, right? And so let's go ahead and try something else. Let's put in 19 and we should get 10, right? Boom, we got 10.

And now the cool thing is we can reuse this over and over again. We can keep putting in new numbers and we don't have to just wait for it on page load. Why does it ignore the 25 now? Because we commented it out. We commented it out. Can we put the some functions content directly in the event listener? Yeah, you could. There's a way to put an anonymous function up here so that it's all just inside the event listener, but that makes it a little bit harder to read. And so that's why I've separated out the function from the event listener. That makes it a little bit harder to read. Do we still need number now? I like to leave number here because whenever I'm dealing with inputs, I like to what we call sanitize my inputs. I don't want there ever to be like strings or guessing. So I'll just leave number for now. And that way I know that I'm always dealing with numbers.

Right? I don't have to worry about if there's a string or not. Right? You can just do it. Cool, all right, let's keep pushing folks. And as always, I'll always share my solutions after class. All right. JS is so weird. I agree, there's some quirks to it, but the quirks can be really freeing once you know them. You got a hydrate from DreamWorkBaby. Hey, thank you so much. Cheers to you. All righty, let's keep pushing folks. We talked about making decisions, right? And when we make decisions, we're trying to evaluate if the value inside the parentheses is true or not.

If the value is true, we do what is inside of the curly braces, right? Now to make decisions, is we have to understand how we compare stuff in JavaScript. Not only can we compare numbers, we can also compare things like strings to each other. And we can do things like having our logical operators where we can say, all right, with two equal signs, chat, what am I looking at? With two equal signs, I'm comparing what? Value, exactly. and with three equal signs, I'm comparing what? Value and type, exactly. So one equal sign is always assignment, like you're creating a variable. Two, you're comparing just the type. Sorry, yeah, the value. And then three is the value and type. One is assignment, not comparison. Two is value. Three is value and type.

So, we have this really weird one right here. We have this really weird one right here, right? Where we have x equals three. We know that x is number three. So my question to you, does number three equal string three in value and type? No, they're equal in value. they're both three, but one is a number and one is a string. Beautiful. Now, once we can do these comparisons, we can introduce our conditional syntax. We can have an if. If what is inside the if is true, we do what's inside those curly braces and we stop. If not, we move on to the else if and see if that is true. If it's true, we stop, right? Then if the if and the else ifs are not working, we can always have an else that just automatically runs, right? It doesn't need to check anything, it'll just run.

And the beautiful thing is you can have as many else ifs as you would like. Oh, some folks got bingo, exclamation point bingo made by dab is on the stream team and cross. Cool. Here's our example that we always like to use. Pizza equals dominoes. So does pizza equal Pompa jobs? No, that's false. It'll never be true. Pizza does equal dominoes. So that is true, which means we do it inside these curly braces all aboard the train, the Flavortown, and does the else ever run? Does the else ever run here? Yeah. Why are you talking down Papa John's because they suck? The only negativity we're allowed on this stream is negativity towards Papa John's. All right.

What's the danger of assignment versus comparison? Yeah, if you're inside a conditional and you use one equal sign by accident, it won't evaluate true or false. It's just going to be true because the reassignment is true. That's another JavaScript quirk. So be careful when you're doing your conditionals, always make sure you're using two or three equal signs. Remember, you can do multiple conditions. So in this condition, both of these must be true. Name must equal Leon, and status must equal Bolin. If both of these are actually true, get a lovely wink at the camera, and then we come back to class. You can also have multiple conditions that are or, right? where just one of them has to be true. So is the day Saturday or is the day Sunday? As long as one of these is true, you're all good. All right, let's go ahead. We're gonna build out an age checker.

So let's go to the age checker code. And we have HTML and some JavaScript. And here we go. Create a conditional that checks their age. If they are under 16, tell them they cannot drive. Under 18, they can't hate from outside the club because they can't even get in. Under 21, tell them they can't drink. Under 25, tell them they can't rent cars affordably. Under 30, tell them they cannot rent fancy cars affordably. And if over 30, tell them there's nothing left, nothing left to look forward to. Okay. All right, so let's put five minutes on the clock. Five minutes on the clock. Well, sorry, in the US you can still become president. Right, come on now.

All right, five minutes on the clock. And there is a harder section for folks that wanna push. Five minutes on the clock, you got this, have at it. Starter code is in the follow along materials channel on our discord exclamation point, uh, discord, if you need it. Just to be fair, I'm over 30. This, this is my personal reflections, not something I'm putting out on the world. All right, folks, you got this dig deep. I'm over 30 hundred doesn't give me something to look forward to. Let's go. Hey, I love that If Chris said it's also a JavaScript exercise not life advice I just said true When will you switch from CS go to Valorant never morning flow Oh, no idea even how to begin. Look at the conditional from the slides. You could literally just copy and paste the conditional from the slides and get started. Replace Papa John's and pizza with an age. You got this folks, dig deep. And don't worry, we'll go over it all together.

Will you consider playing Elden Ring in the future? I've never really got into those types of games before, like the Dark Souls and stuff like that. What backend skills do we need before a coding interview? I feel like most folks open up most opportunity by being able to build a full stack app. So once you have one of those underneath your belt, it opens up a wide range of jobs and makes your interview process easier Separate codes are one big if else statement. Yeah go for a big alpha. It's a if else statement How many else this can we have yet is really unlimited. Eventually there's other things like case statements, which makes it a little bit easier, but now go wild. Are we going to learn data structures and algorithms? Of course, but much later on. When it comes time to actually start interviewing, we'll get into all that stuff. Millie made added two minutes to the timer, folks. So when we get down to one minute, we'll change this to three. Can you explain one more time the difference between a parameter and an argument? An argument is what you pass in when you're trying to tell the function to run.

And the parameters are what are set up when you're declaring the function. So like you have like the function and you type it out and you say, this is what the function is going to do. All the stuff that's inside the actual function and what you tell it to do, those are parameters. When you tell it to run, you pass an argument. Remember, you call your mom to argue. All right, whoop, I gotta change this to three minutes. There we go. Millie put an extra two minutes on the timer. He writes, did the bucket analogy help so much to explain parameters? What if we get a freelance client that requests a mobile app, leave room, both in time and money. You'll eventually know how to use react native to build apps. You could do that to build mobile apps, or you can bring someone on that could help you with the mobile app build. Steph, hey, thank you for the hydration, cheers to you. Kalib, go ahead. You can mute the stream while you're working on this stuff.

Yeah, leave the timer up so you can come back to it. You'll see the timer go off. There's two different sets of slides. There's live slides, which you can't control. And then the regular deck, what you can. Oh yeah, I messed up. If under over 30, I don't know what that means. If over 30, there you go. You can see I was copying and pasting. Actually we can leave it if under over 30. It's an actual interesting thing to think about. Maybe you could do exclamation point slides. Hey Kachi, congrats. Newton, I think most folks do. All right, folks, let's get into this.

All righty, let's go through it together. All right, let's start off with the under 16. We're gonna start off with an if, and we're gonna say, all right, well, actually we need like a variable for age. Let's start with age first. So let's do let age equal, and we'll just start off with 17 so we can see some things at first. All right, so if age is what? If age is what? How can we type this out? I'm proud I got this. Hey, you should be. Yeah, if age is less than 16, there we go. If age is less than 16, boom. All right, so if age is less than 16, we can go ahead and do our console log and our console log should tell them they cannot drive. There you go. They cannot drive.

Let's go ahead, let's put it in here. Boom, they cannot drive. Now, we don't do an if again, we can do an else if. Else if, there we go. And this time we'll say age is less than 18, right? Because we said if under 18, right? So if under 18, tell them They can't hate from outside the club because they can't even get in exactly true words and never been spoken Let's go ahead and do the log There we go Let's put in they can't even hate from outside the club. They can't even get in. Oh, but we run into an issue here I'm trying to say i'm trying to type this out, but uh, I run into an issue What issue did I just run into? If we look, we can see like it kind of changes color here. It's the text editor yelling. Yeah, I use single quotes on the outside. So I can't do the contraction on the inside unless I was to escape. There we go. I'm gonna escape them.

It'll also use double quotes on the outside. That would have worked too. But I like to keep my quotes consistent and I'll just escape the contractions inside. Beautiful. And let's do one more else if before we take a look and make sure things are working. Remember, you always want to try stuff before you get too deep. Let's go ahead and do age is less than, let me say 21. And if that is true, we can go ahead and do our console log. And we'll paste in, they cannot drink. There we go. Beautiful. Copy. Let's put it in here. Beautiful. They cannot drink.

All right, so let's save this and see what we get coming up in the console first. Let's do the index.html. I'm just gonna open this in the browser. Beautiful, let's open up our inspector. And when we look at the console, we can see they can't even hate from outside the club because they can't get in. If we ask for age, we can see that our age is 17, right? So that makes sense. At 17, were they under 16? Nope. All right, were they under 18? Yep, and so this becomes Thank you different right so this becomes All right, this becomes true 17 is less than 18. So since this is true We console log they can't even hate from outside the club because they can't get in and then this else if never runs Just doesn't run Right? And so some folks are saying like, why not just do a bunch of ifs? Well, each if is evaluated separately, right? So if we did an if, so if we, give me a little bit of freedom here for a second.

If we did this, well now, each of these ifs are gonna run separately. Let's save this and see what happens. Let's refresh, three, two, one. All right, now we're seeing they can't hate from outside the club because they can't even get in, and we're seeing they cannot drink, right? The reason being, is 17 less than 18? Yes. Is 17 less than 21? Yes, right? So if we wanted it to actually stop at this first true statement, we have to do else ifs. If we do individual ifs, it's going to evaluate all of these because it's still technically true. 17 is less than 18. 17 is less than 21. But when you use the else ifs, it stops at the first true statement. Cool. Let's bring that back.

Beautiful. All right, let's keep tacking these on here. We can do our next else if. And I'm just gonna set up a couple else ifs here just so that we can, we need one, two, three more. All right, so let's just copy, let's do at least two more. Boom, boom, all right. So if age is less than 25, and we're gonna say in that case, they cannot rent cars affordably. It's true, if you're under 25, it's hard to rent cars affordably. Cool. And then if you're under 30, it's hard to rent fancy cars affordably. It won't give you the insurance. Cool. And then we're saying if under over 30. Hmm. It's a weird statement.

If under over 30 when I say if under over To me that just means as long as it's not equal to 30 All right, like as long as it's under right or over But not equal. So let's let's try that. Let's do if age is less than 30 Or or ages over 30, right? So that would completely ignore 30, right? It'd say like, hey, if you're less than 30 or over 30, or we don't even need the or statement, right? Like we can just say, all right, since this is less than 30 and this is over 30, right? There's no way that it could be 30, right? So let's go ahead and say There's nothing left to look forward to and different saved us There is stuff to look forward to if you're over 30 you got 100 devs to look forward to Maybe talking about All right Let's save this and let's change age to 30 Let's save it. Let's go back. And what do we expect to happen? What do we expect to happen here Let's refresh. Nothing happened. Why is nothing happening? Nothing happens, right? Because if age is 30, none of these statements are true.

It's not less than 30, it is 30. And it's not greater than 30, it is 30. So what if we wanted this last one to include 30? What could we do? What could we do to include 30? Yeah, we do less than or equal to, right? Less than or equal to 32. We're gonna say there's nothing left to look forward to, which is a lie, right? Lie. We got 100 devs. There we go. Let's save it. Let's see what we get. Boom, there we go. Now it's including that 30.

Beautiful. All righty, let's keep it moving folks. Keep it moving. We got a lot of practice to get through before loops All right chat. What's the best TV show of all time? Mods get ready with the hammer All right, bachelor. Thank you to 2013 Toyota Prius. Thank you. I'm leading off the User Dave sometimes Nice, it is the bachelor. Wonderful. Now, what the heck are functions? Y'all were all over the bachelor. What the heck are functions? You were all quick with the bachelor. You're like, but what are functions?

Instructions, exactly. Yes, that makes me so happy. Instructions, functions are just sets of instructions. Wonderful. Remember, functions are simple set of instructions. They ideally are reusable, right? The idea, the reason why we put our code into functions is that we can reuse that function over and over again without having to retype out all of those instructions. Typically, we'll eventually get to a best practice where they really do one thing and one thing really well, but we're not there yet. Your functions can be bloated in the beginning. And people often refer to them as the building blocks of your program. Now remember, when it comes to functions, there are two very specific things. We have the function declaration, where we're putting those sets of instructions into memory so that we can reuse them over and over and over again. And then we have the call, which is telling those functions to run. So in my brain, there is a function called a clap. I know how to clap right I I don't I I know that it's my two hands coming together to make a sound that function is declared and in memory in my brain now if I want it to happen it's always there right I'm always walking around right that function is always in memory I just don't have to use it right I I don't have to use it until I want it.

And so down here, I'm gonna call the function clap, right? I'm gonna call a function clap, boom. I just clapped, I called the function. I'm gonna call it again, I'm gonna call it again, and again, and again, and again, and again, and again, and again, and again, again, again, again, again, right? The idea is that I can put a set of instructions into my brain, take right hand, take left hand, bring them together with speed, right? All of those instructions are part of the clapping function, and I can reuse it over and over and over and over again. Cool. Now, when we are calling our functions, we have the ability to pass values in, right? We have the ability to pass. Fast things in. Junior51ttv said, can we pause for five minutes? I gotta go walk my pet goldfish. I'll be right back. Let me finish this little bit right here and then we'll go let you walk your pet goldfish, all right? So let's finish this and then we'll take our break to walk the goldfish.

I got you, don't worry. All right. So here we have a function call. We're trying to tell this function here to run. Do your thing, right? All right, do your thing, all right, do your thing. And so what I'm gonna do here is I'm gonna pass in the string of hello, all right? What do we call this string? An argument, yes, remember, this is a call. So we call mom to argue, we're passing an argument. and this argument falls into the bucket we set up here called word, right? It's a bucket that we call word, right? And so hello falls into that bucket of word. And wherever I see word, wherever I see word, it's now hello. And a lot of folks get confused on this.

They're like Leon, why the heck do we need these parameters or these buckets? Well, it makes your functions reusable. Each time you call your mom to yell, you might yell something different. You might yell hello. You might yell goodbye. And by having these arguments and parameters, it enables us to change up what we yell each time. It was just to change up what we pass into our functions each time, right? Crick, it could be, yeah. All right. Let's look, stop yelling at your mom. I don't yell at my mom, trust me. Next, here we have the same function yell, but now this function has two what? This function has two what? Yeah, it has two parameters. and now it has two things that can be held and be used anywhere inside this function.

So the very first one I'm passing in is hello. So hello is gonna fall into the bucket of word. Wherever I see word, now it is hello. I'm gonna pass in goodbye as an argument. Goodbye gets passed into the bucket of other word. wherever I see other word, it is now goodbye, right? And the beauty of this is that we could change these to be different values. We could say more and hot pockets, right? And so now the first more will be passed into word. And the first thing we would alert would be more. And then the second thing we could pass in would be hot pockets. And so then the second we would say is hot pockets. Now this first alert would yell more and the second alert would yell hot pockets. All right. And so the beauty of having these arguments and these parameters is that it gives you the ability to pass stuff into your functions and to recall those functions over and over and over again.

Cool, all right, we got a really good exercise when we come back. So when we come back, we're gonna practice our functions. If functions are tripping you up, we're gonna get lots of practice with them, and then we are going to get into our loop. So let's go ahead and put five minutes on the timer here. You can go walk your goldfish. Please if you're new here, remember we like to be in this for a long time not a short time Let's go ahead and if you're able to get up move around hydrate and we'll be back in five You You 30 seconds left folks That was Simba that was Simba you seen Moshi and you seen Simba so far Scarlet or violet whatever one the least people buy always buy the one that people don't buy the most of Sorry to hear about your goldfish 51 People are a nickel. I'm sorry. They'll come back soon All righty folks, let's get into this, let's chill the music. We got some simple functions to work through together. So let's go ahead and open up our simple functions code. You'll notice that there are some harders that we're not going through. That's some homework for you. Go ahead and try the harders on your own. We'll go over them during office hours So some of the harder is not going to get to all of them Try them on your own try and push through it and then we'll go over them at office hours cool, all right, so let's go ahead and open up the Simple functions work We got easy medium and hard try and get through as many as you can and then we'll go over them together Functions here, folks. Five minutes on the clock.

You got this. Dig deep. This is simple functions. You got it. Now remember, we've done a lot of this already tonight. So you can go back and take some stuff. Don't think this has to come from memory or come from your brain, go grab it from somewhere else and put it in. What's a quotient? It's the result of division. This is the Simple Functions folder. How can you divide through numbers, you just keep on dividing. Remainder is modulus, yep. You Got this don't the easy love to hear it love to hear The repetition of all this all day today a love the air That's fair, Kagano, that's all right. I keep the repetition up. Watch the repetition more, it gets a little easier.

Should these be returned or console logged? It depends on, there's instructions with each of them. So some of them ask for alerts, some ask for console logs, some ask for returns. Each one's different. Yeah, Fox, I'm leaving the hards for office hours. I don't understand how to start a function without clicking on something. just create the function without the event listener. And then you'll call it like we saw in the slides previous. CSS gives me more sorrow than JavaScript, me too. I find JavaScript to me easier than CSS. I think CSS is just so much stuff to memorize and I have to look up more. JavaScript eventually is just, there's like the four things, functions, variables, conditions, loops. Once those kind of stick in, you're kind of set. Takes a little while, a little easier said than done, but CSS is definitely the thing that gives me more pain. Do we need to use semicolons on each line?

No. You can also do exclamation point or bang semicolon here in chat and it'll give you an article on why. Boo-boo-mobile, different folks, different things, right? I have some students that CSS really makes sense to them, and then some folks, JavaScript really makes sense to them. You're going to see different things come to you in different ways. That's why it's always so sad to see folks struggle with one thing when there's so much more stuff to come that they might be really good at, right? So many folks give up before they get to back end and the back ends the thing that they're great at right or could be Great at but they got hung up on the CSS and that's the thing that led them astray So give yourself the shot to have the things click at different speeds What if nothing makes sense it will Have you done your repetition? Have you done your Anki have you done your your active recall you put in all the things that we talked about in terms of learning I feel like a genius. Me too, when the code makes sense. All right, let's go over this together, folks. Come on back. All righty. First one here. Create a function that subtracts two numbers and alerts the difference. All right, so let's go ahead and create our function.

And what do we think is a good function name? Subtracts two numbers, sub two nums and alert. All right, there we go. This function is gonna subtract two numbers and then alert. So sub two nums and alert. Now we know we're taking in two numbers, so we need two parameters. I'm going to call it n1 and n2. I could have called it anything I wanted. I could have called it zebra and unicorn. It does not matter. But since they're numbers, I'm going to call them n1, n2. All right. Subtracts the two numbers and alerts the difference. So we'll set up our alert And we'll do N1 minus, whoop, minus N2. There we go.

Beautiful. Now, will this run? Will this function run, chat? Nope. Why won't it run? Yeah, I haven't called it yet. So let's go ahead and call it. Sub to nums and alert. And let's pass in 50 and 30. There we go. We're gonna sub to nums and alert. We're passing in 50 and 30. We would expect 20. Let's go ahead and save. Let's open this in the browser.

There we go. We see 20 has been alerted, because we called it. Let's also just have our inspector open because we're gonna console log some stuff too, right? All right, so this worked. Go back and take a look. We have our function declaration. It has two parameters, n1 and n2. We could have called those parameters whatever the heck we wanted, and then we called the function so that it would run. Let's call it again. Let's call it with a different set of numbers. Let's go ahead and call, let's pass in 100, it and let's pass in 33. There you go, 33, 133. All right, let's go ahead and save it. Let's go ahead and refresh. We get the first alert that has 20 and the second alert, which is 67.

Beautiful. Alrighty. Let's go ahead and I'm gonna comment these two calls out. Why would I comment these calls out? What if we want to let the user pick the numbers? Well, you'd have to set up an event listener or you just set up inputs and then maybe click something so that you can pull The values out of the input and then you'd have to pass them into the function as arguments Yeah, I'm gonna comment them out. So they're not gonna run. We don't to keep seeing the alerts over and over again Exactly. All right, create a function divides three numbers and console logs the quotient. All right function Divides three nums and logs. And we know we're going to take in three parameters, right? We're going to do three parameters. So we're going to do zebra, forest, and unicorn. Now these aren't parameters I would normally use, but I just want to show you what that could look like. All right, divides three numbers and console logs the quotient.

So let's go ahead and do our console log. And we're going to divide these three. Zebra divided by forest, divided by unicorn. Beautiful. That division will come through. We'll have zebra, forest, and unicorn. All right. And then let's go ahead and call it, because it won't run until we call it. The device three numbers and logs, and let's go ahead and pass in, what's a good one? Let's do 12, four and three. Yeah, let's do that. 12, four, three. All right, so let's go ahead and save this. And then let's go ahead and look at our console log when we run it. I'm gonna refresh three, two, one.

There we go. And we have one being printed, right? Being printed to the console here. And the reason why, we have zebra divided by forest, divided by unicorn. So if we actually do all this here, 12 goes into zebra. Wherever I see zebra, it's actually 12. Four goes into forest. Wherever I see forest, it's actually four. and then three goes into unicorn. Whenever I see unicorn, it's actually three. The 12 divided by four is three, three divided by three is one. And that's why we see one in the console. Beautiful. Create a function that multiplies three numbers and alerts, sorry, product and returns the product. Interesting.

All right, let's do this. So function multiply three nums, right? And return. And then I'm going to give these better parameter names this time. Num one, num two, and num three. Beautiful. And then we're gonna return num one, and then we're gonna do multiply, so that's the asterisk, by num two, multiply num three. Beautiful. So let's go ahead and call this. Multiply three nums and return, and we're gonna pass in, Let's just go ahead and pass in two, three, four, or let's do a little bit better. Let's do five, 10, two. Why no parentheses? Well, return is something different. If we looked, log was a function. Alert was a function.

It needed those parentheses. Return's a little bit different. It's not technically a function here. all return is is a keyword that tells it to spit, to spit it out, right? To spit it out. So where does it return? It returns this value to wherever it was called. So here it's being called. That's where it'll be returned to, right? That's where it'll be returned to. So let's comment out this line here so we don't see the console log. I don't want us to get confused. I was gonna save this. Let's refresh. And we don't see anything.

We don't see anything. Because the return doesn't print it to the console. The return doesn't alert it, right? All the return did was spit that value right back here where it was called. So if we passed in five, 10, two, we know that that is a hundred. So we returned a hundred here and then poof, if it evaporated into the ether, right? It just disappeared. So what we could do is we could store this in a variable and say like let product equal, right? And then we could do whatever the heck we wanted with product. Let's alert it. So let's save it and let's see what we get. Boom. We get that alert for a hundred. All right. Now let's see.

Let's walk through it together. Here is the call. Here's our function call. Five, it's passed into num one and gets passed into num two. Two gets passed into num three. We wind up doing five times 10 times two, which we know is a hundred and it's returned. So this 100, it's returned to where it was called. So this 100, it's passed back right here. So it's as though we deleted this and plugged in a hundred. Right? So now product, product is equal to that hundred. That's the beauty of the return. and the return just sends it to wherever it was called, right? And now I can use product whenever I want. I can use product later on, I can alert it, I can console log, I can do whatever the heck I want with it later on, right?

And I think a lot of people get confused as like, why would we return stuff? Well, what if this was money? Let's create another function, right? Let's create another function called turn into money. Turn into money, right? And so what we're gonna do is we're going to, let's do this here. Notice a little bit of advance, so don't worry, this is kind of a little tricky here. Doing this off the cuff just to show some stuff. We'll have way better examples of this in the future. And then let's alert. dollar sign plus product. I'm human, thank you for the hydration. Cheers to you. And let's go ahead and save this and let's run turn into money. All right, let's save it.

Let's see what the heck happens here. Boom. We can see that there's a dollar sign 100 now. Dollar sign, right? 100 now. All right, so let's go back and take a look at what happened here. Like I said, this is tricky. We'll have better examples of this in the future. All right. We ran turn into money. That's the function we called. All right, so let's look. Here's that function turn into money, right? Now, the very first thing that this does is it calls another function, right? It calls another function.

Lua, bun, me. Thank you for the posture check. I needed that. Hold on one second. Posture right. Thank you. I appreciate that. All right. So the very first thing it does is it calls the multiply three nums We know that num one is five num two is ten num three is two and so we wind up this resulting in a hundred and this a hundred Gets returned Where it was called The product is now equal to a hundred and then what we do is we alert it the dollar sign plus product Right now the beautiful thing here is we've separated the function that does the multiplication from the function that does the conversion to money and The beautiful thing now is we can start to have these separate functions that handle different pieces of logic We could have a function that's doing the math and then a function that's doing the conversion to money and the cool thing is eventually we could turn this into a parameter and an argument. So we could change it from dollar signs to euros or pounds or I don't know, lira back in the day, right? So you can pass in all these different things. And so the return is something that we might not feel super comfortable right now, but it's really powerful because it enables us to then have these different functions that are each doing different pieces of logic and we can pass the values around. We can return the values to different places, right? We can spit them out of functions into different areas, right? So that's the beauty of having return in different functions, right?

This enables us to spit stuff out of one and pass it into a different one. But like I said, I just want to do this off the cuff because somebody asked, what better examples of this in the future? All right, we got a medium one here and then we're going to move on. So, create a function that takes in three numbers, add the first two numbers and return the remainder of dividing the sum of the first two numbers by the third number. Oh boy. All right. Takes in three numbers, add the first two numbers and return the remainder of dividing the sum of the first two numbers by the third number. here. Oh, oh boy. This is some, some quick maths. All right. Let's take a look at this. I'm going to call this function, add two and divide, right? We're going to add two numbers. Then we're going to divide them or technically it's not.

Yeah. We'll say divide, but it's really modulus. Right? All right. So let's go ahead and create our parameters and one n1, n2, n3. And what are we going to do? We need to return. So we're going to use our return statement here. Return. And then we want to add the first two numbers together, and then divide and return the remainder. So as soon as you see remainder, what do we know we need to do? Yeah, we need to do modulus. And so let's add the first two numbers, n1 plus N2, and then do the remainder with N3. There's a problem that we're gonna run into here though. There's a problem we're gonna run into though.

Yeah, order of operations, don't panic. PEMDAS, BEMDAS, whatever you call it, please excuse my dear Aunt Sally, it actually is still in play in JavaScript. So order of operations matters here. And so the parentheses would actually happen first. So what I'm gonna do is I'm gonna wrap the addition in parentheses, just to make sure we do that first, right? So as it says, add the first two numbers and then return the remainder, right? So I'm gonna make sure these first two numbers get added first, right? And then we'll do the modulus. Cool. Oh, math, Leon, you said no math. There, my middle school math teacher would be so proud I'm using this. Exactly, we're bringing it back. Cool, let's go ahead and call this function, add to and divide, and let's pass in some values. Let's do three, three, and two. So if this was to work, we should see three going to N1, three going to N2, two going to three.

And so we wind up with is three plus three modulus two. And so what should we wind up with folks? What should we wind up with? Yeah, we should wind up with zero. but will we be able to see this zero anywhere? We got to see the zero. Remember it was returned. So it was spit out to where it was called, but we haven't done anything with it. So let's console log it. Cool. Let's console log it. Let's save it and let's see if we can, I'm gonna comment this stuff out up here. just to make sure we're not running into anything weird. All right, let's go ahead and run it. Beautiful, we got that zero.

First try. Nice. Modulus is just the remainder. Alrighty folks, let's keep pushing. Hopefully the review is helping a little bit, seeing these things a little bit. Try the hard on your own. The wording is definitely rough on the hard ones. It's meant to make you have to think through some pseudocode before you get to the actual meat and potatoes there. Alrighty, let's keep pushing. Loops, I promise you we get to loops today. I like to do a lot of review, but I always like to give something new at the end, right? So we're gonna talk about loops. What the heck are loops? Will we be doing more reviews together? Absolutely.

In fact, this Sunday, we're doing reviews. We're gonna be reviewing HTML, CSS, JavaScript, all the stuff we covered tonight, reviewing it, right? So come back on Sunday if you wanna do more review. All right, what are loops? My nightmare, no. Loops are a way of repeating an action some number of times, right? So with a loop, you can take an action and repeat it a certain number of times over and over and over again, right? There are three main kinds of loops in JavaScript. There are more than three, but there are three like big ones, for, while, and do while. And each different type of loop just offers a slightly different way to determine like when you start and stop the loop, right? And so loops can be a lot of fun. They can also be a little dangerous, right? So with a loop, since you're repeating something over and over again, there is a chance that you don't ever stop the loop. There is a chance that you might break some things. So we're gonna take a look at loops together and then we're gonna talk about how they can be a little dangerous.

Now, I promise I won't do something that I do with all my students in MeetSpace. In Meetspace, one of my favorite things to do is to have all my students run a loop that doesn't end. And before Chrome put in blockers, their computers would just crash, right? Eventually the loop just keeps going, going, going. You use up more and more and more RAM and then lights out. Computer turns off, shuts down and crashes. I won't do that to y'all because we're live, but it's something that you have to be aware of and keep that in the back of your mind. All right, the first loop we're gonna look at is a for loop. And when you look up the documentation for a for loop, it's kind of scary. There's an initial expression, a condition expression, and an increment expression. What the heck does that mean? All that means is where does the loop start? When does the loop stop? And how much do we go up by or down by or how do we increment each time? So are we going up by one?

Maybe we're going down by one, right? And so when you look at it at first, it's a little tricky, but let's look at an actual for loop together. All right, here we go. We have a for loop. If we were to run this for loop, let me go ahead and run this for loop for you in the console here. Let me copy it. Let me open up my inspector and let's run it. Three, two, one, beautiful. You can see that I printed one to the console, two to the console, three to the console, and then four, but there was no five. So let's talk about why. All right, here is our increment. Sorry, here is our variable that we're gonna use for incrementing. It is just a counter, right? It's just the counters. The thing we're gonna use to keep track of how many times our loop has run, right?

Now, I is typically short for increment. Anybody have an idea why we might use I for our iteration counter or our incremented value? why would we use I and not like the word iteration or increment? Because back in the day it would take up too much space. Remember, our variables are being stored in memory, right? And so if your memory was very limited, you're not gonna write out these big long words that have to be stored into memory. You're gonna keep it short and sweet and concise in just one letter, right? So that kind of carries in, some folks still have that, but it's just easy to have it short and sweet, right? Cool. So we're gonna start off our count at one, right? We set up a variable for our count and we're gonna start it off at one. You'll see sometimes people start with zero, that's up to you. And we're gonna go until this count is no longer less than five. So this is our start. This is our end.

And this is what happens to our count each time the loop runs. All right, so let's look at this. The very first time this runs, I is what? The very first time this runs, I is what? It is one, exactly. Remember, we started off at one. The very first time this runs, we are at one. Now, since the loop has done its first cycle, we're gonna add one to i. That's what the plus plus means. We're just gonna add one to i. So the very next time that this loop runs, right, the very next time this loop runs, what is i now? It's two, exactly. Then we're gonna add another value to i. So now the next time that this runs, it is three, right? Now, each time it runs, what we're doing is we're saying, hey, is I still less than five?

And when we did the check, we said, all right, is one less than five? Yup, and we did the check. Is two less than five? Yup, then is three less than five? Yup, thank you for the hype train, folks, all right? Now, after this is done, we run it again. We add another one to i, and now we're at four. Is four less than five? Yes, four is less than five, right? Four is less than five. So we see that four get printed to the console. Now, at the end of the cycle, we do another plus one. And we have to ask ourself, is five less than five? No Five is no longer less than five. So we're done.

We stop. That's it. We're done with our loop Right, we're done with our loop. Let's do that one more time the very first time we run I Is one so we see is one Less than five since that is true. We do the stuff inside the curly braces and we print one to the console Then when we're done we do that plus one, and we have to check again. Is two less than five? Since it is true, we do what's inside the curly braces and we put two, then three, then four. But then the hard part is that once we're doing five less than five, it no longer is true, so it doesn't run. Cool. What if I wanted five to show up? What if I wanted five to show up? Yeah, I could change this to less than or equal, exactly. I could change this to less than or equal, and then it would include five. Because we would get to the point where I is now five, and we'd say, hey, is five less than or equal to five? Yes, that would be true.

We would console log five, we would add one, and then we're at six. Is six less than or equal to five? No. We have to stop. All right, we would stop. Cool. Now, what if I started my count off? What if I did this? What if I do this? What if I changed my starting point to 10? Right, so i is equal to 10. Would this ever run? Would our loop ever run? No, because we would do our check. Is 10 less than five?

No, so it would never run. We would never see that loop happen. You gotta be careful what you start incrementing with. What if we started our counter off here with 10 and we did this? Look what I did there. Is 10 greater than five? Yes. So would this run? It would run, yeah. Will this ever not be true, right? So we start off with 10, we add one. Now we're at 11. Is 11 greater than five? Yes. Is 12 greater than five?

Yes. Is 13 greater than five. So this is what we call an infinite loop. It's always going to be true. So keep running over and over and over and over again until your computer runs out of memory and it crashes. So I like to tell y'all that I was a little shit growing up. Well, not me. This is somebody else. This was not me. This is, this is a friend. There's a friend, right? So one of the things, like when I was like four, not four, when I was in like fourth, fifth, sixth grade, I had a friend, right, that didn't know better, was a scumbag, right, didn't know better. And you could send people to websites that had infinite loops. And when they would open up the site, their computer would crash. The beautiful thing is that Chrome now stops this from happening, so you don't need to do that.

And then there's something that was really interesting. It used to happen if you had AOL 4 .0 If you just held down the spacebar, it would keep looping through whenever you sent an email Right. So this friend used to put a rock on their spacebar and It would just keep sending emails into the millions. They would go to school. They would come home They take the rock off and it'd be millions of emails sent to somebody and there was no way to delete emails in Batches back then so you had to like call AOL and I remember the year that that happened Because they had to change their name to like name plus the year that it happened Because they got banned so these loops can be dangerous They can be used for good the ability to do things over and over again but they can also be used for evil. And as newly knighted developers of the web, you must go out there and do good with your loops. So let's go ahead and do some good with our loops. We're going to look at one other loop real quick, and then we are going to get some practice. Actually, let's get some practice first. All right. So here, let's open up the 21 Savage loop. So we're at the 21 Savage loop. It's in the titles are Savage the 21st. All right. Create a function that has a loop that prints 21, 21 times to the console and then call that function.

So you're gonna literally take that for loop from the previous slide and make it print 21, 21 times to the console. 21, 21, 21. All right. And then if you wanna do a bonus, See if you can get that 21 into the DOM and not the console. Let me go ahead. I'm going to bring five minutes up on the timer here. No, let's do, let's do two minutes. Cause I want you to copy and paste. I literally want you to copy and paste for this one. That way we can, we can get to get there in time. All right. Two minutes on the clock. Fast as you can go. You got this. I didn't start the timer you got this We'll do the bonus together too.

Got some done's coming in. Okay. Okay. You can put the for loop inside of a function. Yep. Your computer froze. You might've done the infinite loop. So be careful. Glad to hear it, Trujo. Your first done, hey Kyle, that's awesome. I have my function, my loop, but I don't know how to get it to stop. It means that you have to have a good end condition. You'd have to close your Chrome tab for the infinite loop to stop. When I say print that doesn't mean logging it to the console. Yeah.

First try, good. All right, let's go ahead and do this together. Double it, I got your Pokemon card at the end. We'll do it at the end. All right. We got a Pokemon card redemption, we'll do it. We'll do it at the end, I got you. Remind me before we do our raid. All righty, create a function that has a loop and prints 21 times to the console. We're gonna call this savage 21 and it's gonna do our for loop. So let's put a for loop in here. The same thing that we saw from the slides. What are we gonna start our counter at? Let's just say let i equal one. We'll start counting at one.

and sometimes you might start it at zero, it's up to you. We could have called it whatever we want to, it doesn't have to be called I, it can be called zebra for all it matters, it doesn't matter, but it's just very common to see I, J, K, cool. All right, so let I equal 21, I equal one, and then we wanna do this while I is less than what? When I is less than what? Yeah, less than 22, right? Less than 22, let's see. I is less than 22. And then let's go ahead and do I plus plus. So we got our loop set up. We're gonna start counting at one. We're gonna go until I is less, well, as long as I is less than 22, we're gonna keep going. As soon as it hits 22, we're done. And we're gonna go up by one each time. And we said we wanted to put this in the console. So let's console log 21.

Beautiful. Let's save this. Let's open this in the console. Inspect. And let's go ahead and run. It's not running. Why didn't it run? Why didn't it run? It's not running. Yeah, I didn't call my function. Let's go ahead and call our function. It's the most common mistake people run into, so I'm gonna keep doing it. If that was 21, let's go ahead and run it now. Beautiful. We can see that it ran 21 times.

21, 21, 21, 21, 21, 21, 21, 21, 21, 21, 21, right? So the beautiful thing here is we started off counting at one. We went all the way up until it was 22. Once it was 22, it was no longer less than 22. So we stopped. And each time we did those revolutions, we printed 21 to the console. A lot, exactly. Cool. Now there was a bonus here. Make it print 21 times to the DOM. Let's try that. Do we have a place in our DOM to put it? We do. We have this H2 with the ID, right? but the ID of Savage says.

That's where we're gonna put it. So let's just copy that. And we're gonna use some of the code that we've seen before. So let's just go ahead and do document.querySelector. And we're gonna go ahead and do the ID of Savage. Just remember to use the Octothorpe for the ID. And what can we use to put something into the DOM? What have we seen before to put something into the DOM? Yeah, I see some folks already saying it. Intertext. Now that's something that you definitely seen in previous examples, something that should be in your Anki deck, something that you should have typed over and over and over again. So if you said to yourself, Leon, I don't know how to put something into the DOM, you gotta make sure it's in your Anki. You gotta make sure that you did that repetition because if you did that repetition, you would have known to remember intertext, right? Cool. All right, so intertext equals, and we're gonna just do 21.

Let's see what happens here. Let's save this. Let's see if it puts 21 into the DOM to refresh. It did. It put 21 into the DOM. I see it, but that's not what we wanted. 21 is there, but it's just once. Now the funny thing is it actually did this loop 21 times. It did put 21 into the DOM 21 times. We just didn't see it. It happened so quick, we didn't see it. It just did it 21 times, but the computer's way faster than we are. So it did it 21 times, but we just see the one 21, right? So what we wanna do is we wanna append it to the DOM. We wanna concatenate it.

So instead of just doing it equals, let's do plus equals, right? Let's do plus equal. We kept reassigning exactly. We kept overwriting it over and over and over again. and we weren't actually concatenating or putting them all in there. So now let's do plus equals. So it'll be whatever there is there already plus 21. So we'll just keep adding our 21s over and over and over again. And I want a little bit of space in between them. So I'm going to put a little space there. So now let's try it. Let's refresh. And there we go. We got our 21s 21 times to the DOM. Beautiful.

Did you say this concatenates it? Yeah, because what it's doing, if we can go and look in the elements, we can see that it literally put 21, 21 times into the DOM. 21, 21, 21, 21, 21, all right? All righty, let's keep pushing. Next thing we got here is that there are other kinds of loops. We're not there yet. Just know that there are different kinds of loops and the different kinds of loops have slightly different times when you'd use them based on like when you want to start and stop or how you're like determining your end condition. Don't worry. We're gonna get lots of practice with loops further on. Another common one is a while loop. You'll notice something very different about a while loop is that you're doing the increment inside of the curly braces And so don't worry about these too much right now. We're gonna get more practice with them later on I just always like to put a little disclaimer with the while loops Is that they're a little bit easier to get yourself into infinite loop territory. So be careful You're gonna see them in the reading. We're gonna do them together. Not tonight.

We're focused on four loops tonight. Cool All right. Let's move on to the next one We're gonna get through this and then one more example and then we'll do the Pokemon card and then we'll do our raid. All right, let's stop late night snacking. My biggest vice is late night snacking. So let's see if we can help me. So let's open up the stop snacking. And let's open this in the browser. All right, there we go. Oh, beautiful. So here's Stop Late Night Snacking app. You're gonna enter in how many snacks you have, right? How many snacks you have, and then you click for help, and it'll tell you to stop snacking that many times. All right, so put in how many snacks you have, then click for help, and it should tell you how many snacks you have. All right, so let's go ahead, put some time on the clock here.

We're going to go a little over tonight. What's uh, let's, let's put a, let's put just three minutes on the clock and then we'll go over it together just cause we're up against the time here a little bit, three minutes on the clock, and then we'll go over it together. You got this. It's a loop, the loop, you now know how to put stuff into the Dom. You just saw it if you can figure it out. You got to get a value out of an input. We got to pass that in to the number of loops. Give it the good old 100 devs try. Write out your pseudo code if you don't know how to do the actual code. We'll go over it together. You've seen all these pieces so far tonight. Don't let the hard question get you. You've seen each of these pieces tonight. Go back and look at the other examples if you need it All right, you saw how to get stuff out of an input tonight. You saw how to create a loop tonight What was the syntax for concatenating inner text?

Just plus equals, plus equals. So instead of just doing the equal, you do plus equals. Bastien, hey, welcome. The instructions are in the JS. So grab the number of stacks from the input and tell the user to stop that many times. See you Ben. I would nugget, I think so. It's a loop cause you have to tell them how to, You have to tell them to stop multiple times, but it's a loop. No Newton it is absolutely All right folks 43 seconds left you got this So many stops. Welcome Mori, glad you found us. All right, let's do this folks. Let's look at this together. All right, we're gonna kind of pull together a lot of little things that we've seen. First, we know that the user is gonna click on help. So let's set up our event listener, right?

Let's set up our event listener for the help. So we've seen event listeners a bunch of times now, you should have practiced them a bunch, should have rewritten them over and over again. So we know that our document.querySelector, and then the actual ID was help. That's the thing we're clicking on. So let's go ahead and throw our Octothorpe help in here. Beautiful, and then we need to add our event listener. I'm just letting the text editor help me here. We know we want it to be a click, and then we're gonna run a function called stop snacking. There we go, that's gonna be the name of our function. So now we have our event listener. We can click on help, and we can run the function stop snacking. So let's set up our function. Stop snacking, beautiful. And we know that we wanna, we want to do something multiple times, right? We wanna do something multiple times, right?

But we need to know how many times to do it. And we're gonna get that value from the input. So we've seen that before too. So let's go ahead and get the value out of the input. We might use const, because it's a value coming out of the input, but I don't know what we're gonna do with it yet. So let's do let, and let's say number of snacks. Actually, I like num better. Num of snacks, right? And we're gonna go into the DOM and get the value out of the input. So once again, document.querySelector, right? And let's look at what the input is. The input has no ID. There's nothing on it. So there's only one input, so we can actually just say input. Wasn't an idea, it wasn't a class, but there's only one input, so I'm just gonna grab the input, and we're gonna get the value out of the input.

Cool. We got the value out of the input. Now, just as a precaution, right? We know we're dealing with inputs, and sometimes when it comes to inputs, so we might wind up with what? Hey, Hyper. Might wind up with what? With inputs, we might wind up with strings. So just because we know we're gonna use this as a number, let's not play any games. We might not need to do it. Let's just make sure we wrap this in number. Let's make sure whatever comes out of that input is indeed treated as a number. So number of stacks, number of snacks will actually be a number. Beautiful. So now, if we want to do something over and over again, we need our what? We're gonna do something over and over again, we need what?

A loop. Beautiful. Notice how I do my loops. Hold on, let me clean that up for you. Let me do that again. For parentheses curly braces, and then I hit enter. I always do my parentheses. I always do my curly braces and then I go back. And the reason is I will forget them if I don't do it that way. So if you lose a parentheses or curly brace, you're gonna run into some trouble. So I always type it all the way out and then I come back and put it in. All right, we saw with our loop, we have to set up our counter. So let i equal and we can go ahead and just start counting at one just to make it easier. Eventually we'll start counting at zero, but not tonight. All right, let i equal one.

We're gonna say while i is less than what? Or sorry, less than or equal to what? We want this to loop once for each snack. Yeah, for a number of snacks, exactly. Beautiful. So here we have the idea that we're going to grab, We're going to grab the value out of the input. We're going to turn it into a number. Did y'all hear my stomach? That was wild. I don't know if the microphone picked that up. We're going to grab the number of snacks. I'm getting hungry. That's what happens when we go over. We're talking about snacks and we're going over time. I don't know.

My stomach's doing the most. We're going to grab the value out of the input. We're gonna make sure that it's a number and we're setting up our loops that we start off at one. We're gonna go until we reach the number of snacks that we have and we're gonna go up by one each time. So I plus plus, beautiful. So what we're gonna do each time this runs is we need to tell the user to stop. So let's go ahead and do our document.querySelector and where are we gonna put it? Let's look in here. Oh, we have this ID of stops, this H2 with the ID of stops. This is where we're gonna append our stops. So let's go ahead and grab the ID of stops. Cool. And then remember we saw to put something in, we use that inner text. Inner text equals, but we can't just do equals, we need to do what? Can't just do equals, that would just show one.

Just show one. Yeah, we gotta do plus equals. Plus equals, and we're just gonna say stop. Beautiful. Why do I put the space here? Why do I put the space there? Not needed, but why do I do it? The visual, exactly. It's ugly otherwise. It just makes it cleaner. It puts an actual space remember we're concatenating everything so it puts an actual space in that concatenation All right, so let's save this. Let's see if it works All right, I ain't got that many snacks let's say three got three snacks look for help Stop stop stop. Nice. All right five snacks Uh oh. I thought it was first try.

Let's see. We did 1, 2, 3, 4, 5, 6, 7, 8. Hold on. Let's do one snack. Uh oh. What are we doing? What are we doing? We just keep concatenating, Right the page hasn't refreshed so the Dom's not being rewritten right is there a way That we could reef that we could clear this out We don't the refresh the page is there a way that we could clear it out each time we click Let's let's think about it. Let's go back All right, so we clicked we grabbed the number from the input What I'm gonna do is I'm gonna go document dot query selector and I'm going to go to where we're going to put the stops and I'm going to change it to be empty. Right? I'm going to go to stops and whatever is in there, I'm going to make it empty and then we do our loop. So each time this runs, each time we click help, The first thing we're doing is getting the value out of the input, then turning stops to be empty, and then doing our loop to put the stops in there. So let's save this. Let's go back, let's refresh the page. And let's do three stops.

Stop, stop, stop. And then let's do one. I'm gonna click, and we just have one stop, right? Because what I did, right? What I did was I said, all right, here's the click event. Our Smurf heard the click. It ran the stop snacking function. We grabbed the value out of the input and we put whatever the heck was inside of that H2. We just set it to be empty. We set it to be empty, right? And then we did our loop, putting the stops in there. That's it. All right. All right. So now we can start to do some fun stuff, right?

Now we have the ability to listen for events. We have the ability to get stuff out of inputs. We have the ability to clear out stuff. We have the ability to put stuff into the DOM. This is where JavaScript gets to be a little bit fun, right? You can start doing stuff. And so I know we did a lot tonight. I know that there are a lot of things that are complicated and hard when it first comes to JavaScript, but we're going to keep working at it, right? We're going to keep working at it. We're going to keep getting lots of review. Sunday, come back Sunday. We're going to do more review on Sunday. Come back to class. We're going to do more review in class, and then we're going to keep picking up the pace, right? So we're going to keep it going, but you have to for homework.

You have to for homework. Go back through these examples. You have to redo them. You have to play with them. You have to break them. You got to have some fun with it, right? All right, let's take a look. Homework, there's two. There's two more things here. There's this bring it on assignment and this bring it on again. I would love for you to try bring it on and bring it on again before you come to office hours because we're going to go over them together and it's just way more practice. If we look at bring it on before we do the raid. All right, if we look at the bring it on. We have our variables, we have our functions, we have our conditionals, and then we got some loops down here. Right.

Right. I want you to practice these. You know what? Hmm. I'm going to go late. If you need to leave, please leave. If you're running, I know it. I know it's fuming, three hours is hard, but I'm feeling good right now. I feel like some things are clicking, so I'm gonna do it. If you need to leave, please leave, no qualms. You can always come back to the VOD. I'm gonna redo it again on Sunday anyway, but I'm gonna do it. So I'm gonna put, let's put three minutes on the clock here. Let's see how fast you can go through this, and then we're gonna go over it together. All right, let's do it for real.

I know this is rough that we went over. If you got to leave, please leave. No, no harm. No foul. Come back. Watch the VOD. Come on Sunday. We'll do it over again. Um, but let's, let's go. We're going to, we're going to go a little later. Five minutes. You got this. We're going to go over it and then we'll do our read. Uh, I'm going to do the, uh, this is, this is bring it on. This is bringing on is the one we're looking at right here.

Bring it on five minutes. Bring it on. You got this. You got to leave. No worries. Please leave. I know going over is rough, but, uh, I want this to click for some more folks. Got to go to bed. That's okay. And now I'm going over, take your time. You'll be in the Vaughn. Come on back. Yeah, the Pokemon card. Let me do the Pokemon card while we're, while folks are working. And then we go over it.

Alright. it. I get you, you got to go eat, go eat. My stomach's grumbling, too. Alright. All right. Double tether B. Double tether B, this is for your Pokemon card draw. Here are the cards that are possible. Whatever this results in is the card that you'll get. And then you have to send me a whisper here on Twitch, and I'll get the card to you. Takes me a little while to mail them out, but it'll come to you. So let's go and do this. Two, oh, that's so close, let's see. Card name you got to redo it.

That was so close. You know what screw it. I'm gonna give you the top one That's the first time we hit a two. You're gonna get the top one. You're getting the Lux right coming your way Congrats Always the one and two is I redo but it's been it's been a good class We're going over time you get the top rated card Lux right coming your way. Send me a send me a whisper It'll take me a little while to get them mailed out, but it's coming your way All right, minute 30, we're going to go over this together, folks, and then we'll get out here. Got this folks, keep digging, keep digging. You're going to see the new Batman. I'm not going to movie theaters yet, but I'll be seeing the new Batman. And then I feel like things aren't still clicking. Is that okay to feel like this? Absolutely. That's how we started off class, right? Like the idea is that this stuff takes somewhat longer, sometimes harder to click, but as long as you're putting in the work, right? You're doing your repetition.

You're doing everything that we asked you to do. It'll make sense eventually. You just gotta keep plugging along. We got tons more review to do. You know, we keep adding new topics. We'll always come back and review. Are the clips going to be sent to the same thread as last Tuesday? No, we're going to do a, I think we might actually do a Slido so folks can upvote them. That way, like the really good ones can get upvoted to the top, but I'll share the, I'll share the thread or whatever in the app, the postclass message. All right, folks, let's go over these together. Thanks for staying strong. No worries if you got a dip though. All right, let's look at these together. Alrighty, create a variable and console log the value. Easy, all right.

Let num equal 10, right? And then console log the value. Console.log num, beautiful. Next, create a variable, add 10 to it, alert the value. Let second num equal, I don't know, 20 and then add 10 to it. Second num equals second num plus 10 and then alert second num. Beautiful, right? We created one here, console logged it, created a new one, added 10 to it, alerted the value, beautiful. We're gonna go through these quick. Doing it, we're bringing it on again. All right, bringing it on, bringing it on again is the next one. All right, create a function that subtracts four numbers and alerts the difference. Function, sub, four, nums, and alert, beautiful. We're gonna need four what? Right?

We're gonna need four what? Four parameters. All right, let's do N1, N2, N3, N4, beautiful. And then we gotta subtract them and alert. All right, so let's throw it in the alert. Let's do N1 minus N2 minus N3 minus N4. All right, we haven't called this. Let's call it and make sure that it works. Let's go ahead and do sub for numbers and alert. And let's do five, four, three, two, one. And give us a negative. but let's go ahead and open this and run it. We have all of our alerts going. We got the original DVD release photo for Bring It On. Yes, all of these will be Bring It On themed going forwards.

You got Bring It On, Bring It On Again, all the way up to Worldwide Cheer Smack. We're coming for them all. Alrighty. We saw that we did five minus four, which is one minus three, which would get us to two. Uh, whatever we did the math. It did it for us. We saw the negative four show up beautiful. That's only four. Oh, sorry. I did five arguments here, right? Look, I did five arguments, right? But there's four parameters. So what do you think happened to this last argument? It can get passed in through a different way, but there's no bucket for it right here. There's no bucket for it.

So in this case, we just ignored it. Even though we passed in an extra one, we just ignored it. And so that's why we have negative four, right? Five minus four is one, one minus three is two, negative two, negative two minus two is negative four. That's why we saw the negative four alert. Beautiful. Create a function that divides one number by another and returns the remainder. As soon as we see remainder, what do we know we're doing? Modulus, exactly. So let's do a function, get the remainder, beautiful. We're gonna pass in two numbers, and then what do they want us to do? They want us to return. So we'll return n1, modulus n2. And remember, when we return stuff, it just poofs into thin air. So we could wrap this in a console log if we wanted to, or put it into a variable, whatever, just to store it.

But let's do it in a console log. And we'll do get the remainder, and we can pass in 12 and three. All right, we did 12 and three. what would we expect in the console? 12 and three, what do we expect in the console? Zero, exactly. So let's go ahead. Let's open up our console. Let's refresh. We got our alerts going. And then we see zero in the console. Nice, working. Conditionals. Create a function that adds two numbers that the sum is greater than 50. the alert Jumanji function.

Add to alert Jumanji, beautiful. We know we're taking in two parameters. You know, I know it's parameters. I still do my parentheses. I still do my curly braces and then I go back. So we'll say num one, num two. And then if we're gonna see if it's greater than 50, what do we need? Get out of here with the rock. There's only one Jumanji and you know it. I love the rock though. Just Jumanji is a really great movie. Conditional. Exactly. So we're going to say if N1 plus plus N2 is greater than 50, then we will alert Jumanji. Beautiful.

All right. So let's call it add to an alert Jumanji and let's put in two numbers, 50 and one. So we know that this is over 50 cause it's 50 and one 50 plus one would be 51, 51 would be over than 50. So we should see Jumanji alerted. 30. Boom. Negative four. Boom. Jumanji. All right. We're on fire. Let's go. Woo. Create a function that multiplies three numbers. And if the product divisible by three alert zebra, I'm on fire.

Let's do it. Function. Multiply three and divide by three. All right. C. All right, let's do multiply three and check. Check div by three. I'm getting wild with my names here. You don't have to get this serious. Three numbers. All right, so let's go and do N1, N2, N3. I'm getting excited. All right, let's go ahead and figure out the product first. Let product equal N1 times N2 times N3. And then we got to, we got to check.

We got to check to see if it's divisible by three. How could I check to see if it's divisible by three? You can see me getting hungry and hungrier. How can I check to see if it's divisible by three? We need another conditional and we can use modulus, right? We can use modulus in that conditional, beautiful. Beautiful. All right, let's do product modulus three. If it equals what? If it equals what? We know it's divisible by three. Yes, if it equals zero. Beautiful. We're flowing. I'm typing wrong.

If it equals zero, yes. And if it does equal zero, what do we gotta do? We gotta alert Zebra. Beautiful, there we go. So we're gonna take in three numbers, right? We're gonna multiply them all together. If when you use modulus, you get zero, you know that it is going in evenly. So if we did like three times, three times one, we would have nine, nine by three is zero. Stephanie, hey, thank you for the five kids of subs. I appreciate you, thank you for being here. If we get zero, we know that it went in evenly, right? Which means that there was no remainder, which means it is divisible. Cool, let's call this. Let's see it in action. Let's pass in that three, three, and one that we talked about.

Let's save it. All right, let's go back. Let's refresh. Should still see our Jumanji. There it is. And we got our Zebra. It's working. We're on fire, folks. Now, this one's a little tricky, right? We got the product from doing the multiplication up here, then we're doing the modulus of three, right? We want to see if it's equal to zero, because if it's equal to zero, that would be a true statement. We would know that it is indeed divisible by three, and we could alert Zebra. Yeah. Last one, last one, folks. Create a function that takes in a word and a number, console.log that word X times where X was the number passed in.

Got you. Function, log word X times. Beautiful. We're taking in a word and a number. Got it. If we're gonna log something multiple times, what do we need? What do we need? If we're gonna log something multiple times, what do we need? A loop, let's loop it. Let's set up our four, let i equal one, right? While i is less than or equal to num, then we're gonna do i++ each one, and then all we're gonna do inside of our for loop, console.log word. Beautiful. Let's pass it in. Let's go ahead and call it log word X times wonderful and let's pass in 21 times. Let's save it.

Let's go back. Let's refresh. We see our still got to agree to our zebra. Let's refresh 30, negative four, Jumanji, Zebra, and there's me telling you you're wonderful 21 times. Thank you for sticking through it. I know this is a lot. I know I went through it fast. First try. Now, come back to this. If you're hung up on the modules, if you're hung up on the loops, come back to this. Rewatch the VOD, the VOD's immediately available. come back and watch it, play with all this stuff. I want you to redo everything that's in this, bring it on. Redo it, delete it, retype it. Make sure you can do it without having to look at the code.

And then once you're feeling good, you understand all the pieces, bring it on again, right? Bring it on again, all right? So I know this was a long one. I know we got through a lot of material. Sorry, I went over a half an hour over Thank you for hanging out. Thank you for being wonderful. Thank you for being here. Let's set up a raid Let's spread some love and positivity So many amazing folks, let's go and see who's who's live How low is is is live let's go over to callow creations, let's say hello You haven't said hello to them before give them some follows Have a wonderful rest of your night. Have a wonderful Saturday and I will see you all back for the grind on Sunday. We're going to do a lot of review. Come through. If things are still not sticking, you're still a little stuck. That's all right. That's what Sunday is for. We come back to a wonderful week of networking.

Thank you for hanging out. Let's raid. you

End of Transcript