00:00:00
Hi, this is a six plus hour JavaScript review. We cover everything from what is programming all the way through functions, variables, loops, conditionals, APIs, objects, all the goods that you need to be ready to move into backend web development using Node. My name is Leon. I run a 30 week free software engineering bootcamp where you can go from zero experience to all the skills that you need to get a job. We've had hundreds of folks get jobs. And most recently our current cohort has brought in over a half a million dollars in client work already. So if you're interested in learning how to code, you're interested in joining community is 33,000 plus strong on Discord where you can get your questions answered. You can learn for free and ultimately get a job as a software engineer. You found the right spot. All righty folks, we're gonna jump

00:01:00
right into the beginnings of programming. We're gonna go into the basics, the big four of JavaScript. We're gonna take our breaks at the top of each hour. So if you need to take a break, that's okay, but know that we'll take breaks at the top of every hour. Cool. Alrighty folks, a computer will do what you tell it to do. A computer will do what you tell it to do. A program is simply what, chat? What's a program? What's a program? Yeah, a program instead of instructions that you write to tell a computer what to do, right? It's just a set of instructions. Therefore, programming is the task of writing

00:02:00
those instructions in a language that the computer can actually understand. Now, we're all learning a language together called JavaScript, but the computer really can't understand JavaScript. It has to be broken down into something that the computer can actually understand. And so next week, we're actually going to see how that breaking down happens and how JavaScript is able to actually run on our computers. Cool. So let's start off with this idea of a simple circuit, okay? Simple circuit, I'm gonna have a wire that connects to a battery. This battery is then connected back to the light bulb, and with this circuit on and complete, the light bulb would turn on. Now, what I want to do is I want to introduce,

00:03:00
I want to introduce a switch to this circuit. I have my battery and here is my switch. Techie, we are, this is not a class, this is our review. So we're doing a full JavaScript review. Everything that we've covered in JavaScript up to this point, we're doing as part of a review. Our office hours and reviews are always on Twitch for 60 days immediately. Cool. All right. So here we have a circuit with a simple switch. The switch is open. So is the light bulb on, is the light bulb shining at this moment?

00:04:00
Circuit's not complete, so light bulb's not on. So, let's go ahead and close the switch. And now that the switch is closed, the light bulb comes on. Nice. So, if I wanted to represent this switch, What's an easy way for me to represent this switch? How can I talk about this switch? Yeah, I can talk about is on and off, or open and close, right? So on or off, or open and close. However that on and off, right? Right, that on or off, or open or close, that's too long to type. I want something simple. What I'm gonna say is if the circuit is off or open, I'm gonna say zero. And if

00:05:00
the circuit is closed, all right, if the circuit is closed, I'm gonna say one. So right now I can represent this circuit as what? What can I do to represent this circuit at the moment? Yeah, this is one. Since right now, right? Since right now this circuit is closed and it is on, I can represent this with the number one. All right, now let's go ahead and add a little bit more complexity here. Let's have two switches. Boom. Boom. There we go. How can I represent this circuit?

00:06:00
Yeah, zero, zero, nice. If these are both open, I can say zero, zero. Nice. How about if I close the switches? Now what are we at? We're at one, one, nice. And how could I describe, like when I say this circuit right here, when I say one, one, that's actually a fancy word for saying this one blank, this one are closed. When I say one, one, that's a fancy way of saying what? Yeah, it's a fancy way of saying and, right? And so, very, very quickly, we can start to see, all right, if we combine some of these very simple notions, right? Multiple open and closed circuits, we can start to build up to some very, very simple logic. Now, this is like a very simplified

00:07:00
example. There's more detail to be had here. But the idea is that from just representing these on or off values, right? Whether or not our circuits are open or closed, we can start to build up to some very simple, right? Some very simple logic. And then from this logic, right? From this logic, we can start to build up a rudimentary language. We can then add some memory. We can add some arithmetic logic. We can start to add all these kind of simple pieces together and build up a computer that can listen to the instructions we give it, right? And so the idea here is that we have these lovely little bits of logic that we can start to use to build up into more and more complex ideas. Now, in the past we've talked about Independence Day as

00:08:00
a true story. Why is Independence Day a true story? Yeah, binary upload boom. So if you, if you, if you missed our class or if you, if you have never watched the legendary film Independence Day, what we have is aliens come. And when the aliens come, we actually had a spaceship in Roswell that like turns on. So we know like this proximity and maybe communications is tied to power in some way, shape, or form, because when the motherships come, the ship that we have gets powered and we're trying to nuke the ships. Nothing's working. The shields keep blocking our nukes. And so Jeff Goldblum saves the world by doing what?

00:09:00
Yeah, they they upload a virus and the virus brings down the shields long enough for us to nuke the the the aliens out of orbit, so How can we write a computer virus in a language that we probably don't understand, right? I don't think the aliens were using JavaScript. Maybe they were, right? But the aliens were using some language that we had to reverse engineer. And so Jeff Goldblum, to save the world, took that language, reversed engineered it all the way down to the zeros and ones. the ons are off, we are assuming that on and off is a universal constant, right? Like the idea that something can be on or something can be off, and we can build up the simple logic from those on and off values. And from this simple logic, we can start to build a language that

00:10:00
works with these alien ships. And so Jeff Goldblum reverse engineered all the way down to the zeros and ones, built up a virus that we then injected into the alien mothership. We know that the alien mothership is constantly communicating with all the other ships because when the ship showed up our ship and Roswell turned on So that virus on the mothership got infecting all the other ships around the world. Their shields came down. We nuked them America Spoiler alert, right? And so we're able to realize that, all right, this idea of on and off values, building up to more complex logic. Well, that may one day help us stop an alien invasion, but it also forms this beginning idea that, hey, we can, from these base ideas

00:11:00
to this base logic, we can build all the way up to a language that then we as humans can use and understand. And so the language that we use throughout this course is JavaScript. It is a language that can run both not only in the front end the code that runs in our browsers, but also the backend, the code that runs on our servers. And so we can learn one language that can help us build full stack web applications and that can be broken down into something that the computer can understand. So, since we are trying to get jobs as quickly as possible, we use JavaScript so we don't have to do that context switching. Sometimes, if you learn another language, not only do you need to know JavaScript to work in the browser, but you also need Ruby or Python on the back end. Well, we kind of stop that. We go straight to JavaScript. We say, all right, JavaScript on the front end, back end, and it's going to help us get into jobs as quickly as possible. Cool.

00:12:00
Now, when we're writing JavaScript, JavaScript has a specific syntax, a spelling or grammar rules that we have to follow when we're writing that language. We're going to see a lot of special characters They might not use on a regular basis semicolons brackets Parentheses quotation marks and other unique characters that come up over and over again So I like to show that syntax real quick This is the inspector. It's gonna put up an inspector. I'm just gonna put up my console and For most of you will have seen these already. We've worked with these a lot, but it's just helpful to review them So, less than and greater than are our carats, that are kind of the arrows. We have our dot for dot notation. We have our square brackets, which we use a lot with arrays, or even accessing objects, which we'll see a little bit later.

00:13:00
We have our curly braces, our figure brackets. We have our question marks for ternaries. We have our double forward slash to comment stuff out. We have our colons, which we'll see happen a lot, specifically with the ternaries as well. Semi-colons, what used to be used at the end of each line, but not really super used anymore. We got our single quotes, our double quotes. We also have, if we kind of go up above the quotes, we have double pipe character for, Or that's typically above your enter key. So we would say or We have hyphen for subtraction. We have our parentheses We have our asterisk for multiplication We have our double ampersand for and We have our percent sign for modulus, which is how we get a remainder We have our dollar sign which we call bling which we're using with things like

00:14:00
template literals We have our octothorpes, we have our bangs, so we don't really call them exclamation points, we call them bangs, and bang in JavaScript typically represents not, so you can say like not equal. We have our plus sign for addition, our equal sign for assignment, it's an assignment operator when it's just one, and then when it's two or three, it's a what? Well, let's see if people can remember this before we get to reviewing it. One equal sign is an assignment operator, but two or three is what? Yeah, comparison. Exactly. Nice. I love it. Cool. Um, what else we got? We got ticks and I think that's about it. So there's so many other little characters that might come up too, but just wanted to show those again. And so over today, we'll see most of these put into action. And so if you never used them before, that's okay. We'll see them when they come up,

00:15:00
but I like to show these because you're gonna notice that all those keys are on the accessory of like on the peripheral of your keyboard, which means even if you're like elite gamer and you, you, you, you, you game every day, you're on your key mouse and keyboard every day, you're still not hitting those outside keys. That's a lot of flexion. It's a lot of tension. It's a lot of things that you're doing. Repetitive stress to your hands, please. When we take our breaks at the top of the hour, give your hands that rest, right? Give your hands that stretch, run them in any warm water. Follow the guidelines of Dr. Levi, the fitness doctor. You can find that on Discord. They have a whole video on how to like take care of your hands. Please take care of your hands. Cool. All right. In the spirit of taking the break at the top of the hour, being respectful to our hands, that's what we're gonna do. When we come back, we're jumping into the first

00:16:00
of the big four, which are variables. All right, folks, let's go ahead and take our break. Five minutes on the clock. When we come back, we're gonna talk about variables and jump in the big four. We're gonna start writing some JavaScript code. I'm excited to have you. I'm glad we're here for the super review. Let's get it. you you

00:17:00
Right, there are scenarios where you might use state case or some other casing. You'll see that I'll use camel casings throughout all of my code. It's in my HTML, it's in my CSS, it's in my JavaScript, right? I just got the camel, the humpstart, the caps are at some, exactly. But I feel like for most of the program, you should probably stick to camel casing because that's what you'll see me do the most. But once you join a company or a different team, they might use a different type of casing

00:18:00
and you'll switch to that, whatever it may be. So no right or wrong way. I just think camel casing is helpful, helps you across HTML, CSS and JavaScript. And so whatever you pick, just be consistent with it. Now, we have this way of storing stuff into memory, right? We have these data buckets, but what can actually go in these buckets? Well, we can put strings in there or pieces of text. And in JavaScript, there's a few ways to create pieces of text. You can have text surrounded by double quotes, single quotes, and what else? So what's the last way that we can create a string? We've all seen double quotes and single quotes before. What else? Yeah, ticks. We can use back ticks. And so that's how we can get into things like template literals, template strings. We have to use back ticks. So the trick when dealing with strings is that whatever you use on the outside,

00:19:00
you can't use on the inside. So you can have single quotes on the outside and double quotes on the inside or double quotes on the outside and single quotes on the inside, but you can't mix and match because that's where your string would end. So if we were to go ahead and kind of mimic this, this, they purchased it. Let me go ahead and open up my console here. Let me say, they purchased it. So the first way they had it is with single quotes, they purchased it, right? Single quotes on the outside, double quotes on the inside, perfectly fine. However, if we did double quotes on the outside day You can see that right away It's trying to create two strings right the string end it right here It didn't it wasn't able to see that. Oh you wanted this to be quoted What it does see is like oh, this is where the first

00:20:00
string ends Here's where another string is created. And then what is JavaScript gonna try and look up purchased as? What is it going to try and read purchased as here? Yeah, it's going to try and read it as a variable. So we can do something special though. There's one way you can get around this and this is with escaping. So we put this lovely forward slash, sorry, this lovely backslash in front of our quotes on the inside. And when we hit enter, you can see that we still have the they purchased it. It works because we have escaped the double quotes, right? We escaped the double quotes. So remember, whatever you use on the inside, you can't use on the outside unless you escape them. Cool. We can also put numbers into

00:21:00
our data buckets or our variables. There are a couple different types of numbers that we would have in JavaScript. First, we'll talk about integers, which are kind of like our whole numbers. There's also floated values, which are numbers with decimal places. You can have signed numbers, both positive and negative, and you can have signed numbers on both your integers and your floated values. And we can do basic arithmetic with the values that get put into these variables. So the numbers that we have access to we can do basic arithmetic with those numbers addition with the plus sign subtraction with the hyphen Multiplication with our asterisk division with our forward slash and if you want the remainder you can use modulus So 10 mod 6 would give us what chat and mod 6 would give us what? Yeah, give us 4 exactly would give us 4 nice

00:22:00
because six goes into 10 one time, there's four left over, it's the remainder. All right, in today's materials, if you need the materials, remember you gotta join our discord, agree to the rules, and in the follow along materials channel, you'll get all the starter code for today. So if you go ahead and grab that file, if you haven't already, you'll notice that there is a variable fun time folder here. I'm gonna open up variable fun time in my VS code. You'll notice that I just opened the entire folder, right? I just opened the entire folder in my VS code. And I'm just gonna kind of go into each individual folder throughout the day. So we have this variable fun time, which has some easy variable assignments, some medium, and then a more difficult one. Let's go ahead and put, let's say five minutes on the clock here. Five minutes on the clock. We'll see how far we can get in those five minutes. Then we're going to go over it together.

00:23:00
Remember today's review. So this is your first time joining us That's okay. If you if these are a little bit difficult, give it your best and then we're gonna go over it together Remember, it's we get more out of analysis than we do often trying to solve All right, five minutes on the clock. You got this dig deep boom Variable fun time is the folder Can we do discounted hydration today? Uh, no, because y'all are getting too many channel points. It's too wild in these streets. Uh, where can you download this from? It's on our discord, follow along materials channel, exclamation point discord if you're on discord yet.

00:24:00
Hi Luan, that's on your end. Yeah, it's on your end, unfortunately. I got this folks dig deep Pull over it together.

00:25:00
Will Office Bowers be a VOD? Everything is always a VOD here on Twitch for 60 days. Automagically you can always come back. I've been trying to do much better with YouTube. So pretty much every the next day, everything will be on YouTube. We do have a one day delay due to being partnered on Twitch. So I try to get on YouTube the next day. The wonderful thing about watching on youtube is that my youtube channel is not monetized at all So you can watch the full however long this goes without ads Yeah Vanessa do exclamation point slides and it'll give you the link to the slides for today

00:26:00
Make sure you agree to the rules first or else you won't see the channels. Bro dang, I think I actually did it. Hey, congrats, bro. Awesome. Conso for straight A. Taco, you probably didn't agree to the rules then.

00:27:00
My Anki sessions every day take about one to two hours, is that too much? I think it depends on where you're at. I think if you're still actively adding cards, one to two hours can be hit. I'm really I really shoot for like half an hour to half an hour to an hour But every person's different and how much review they want to do If you feel like you're still getting a lot of value out of it, then sure keep it up But if you don't feel like you're getting as much value you can definitely Reduce your cart like your deck size so that you have less to review J Thunder rule. Oh, hey, thank you for the five get the subs. We're doing well. Thank you for being here Okay. Derek, this is the variable fun time folder. Hey Jason Derulo. Can I restart my Anki algorithm so I can start from the beginning? You can, you can just create a new study deck and that'll do it from the beginning for you.

00:28:00
All righty, folks, come on back, come on back. Let's try doing this together. I've been so focused on what I still have to learn that I forgot how far we've come. Made a super simple custom link tree for my husband's business and he was so impressed texting it to everybody. That's awesome. I think that's really important. You got to realize that if you've been with us since the beginning, you have some tremendous phenomenal skills that you can be put into practice right now. I love that. It's huge. Cool. All right, folks, let's take a look at this together. All right. Create a variable and assign it a number. So let's just go ahead and create a variable called num. Let

00:29:00
num equal, I'm gonna say like 15. 15, create a variable and assign a number. So we've created our variable or declared our variable here, assigned it the value of 15. Nice. Minus 10 from that number. So it's gonna do num equals num minus 10. What are some other things we could do to subtract 10? I did num equals num minus 10. What else could I have done? Yeah, I could have also done minus equals, so I could do num minus equals 10. That would have also worked. Cool. It's up to you which way you want to go. A little bit more readable. All right, so we did num equals num minus 10. Print that number to the console. So whenever I see print to the console in JavaScript, what do I mean by that, chat?

00:30:00
Yeah, console log, nice. console.log, and we're just going to throw in num. If we were to open this in the browser, we'd be able to see that console log come through. So if we go to my index.html here, what I'm going to look for, before I even try and open this, what am I looking for to make sure that my JavaScript will run? What am I looking for to make sure that my JavaScript will run? Yeah, I'm looking at that source, the script. So I have the script type JavaScript source equals JavaScript slash main JS. And so if we look, my main JS is inside of a JavaScript folder. So this route looks correct, like this is a correct source here. So if I was to go ahead and open this in my browser and open up the inspector, and we looked at this lovely console, boom, we can see five being logged to the console and

00:31:00
that looks good to me. Alrighty, let's keep pushing here. Create a variable that holds a value from the input. Add 25 to that number, alert the number. All right, so how can we get the value out of an input? Out of an input. but not like an alert prompt or anything like that out of an input that's already in the DOM. Yeah, we can use our query selector with the value. So, let's go ahead and say, let num from input equal, and then we're gonna do our document.

00:32:00
.querySelector, and we're gonna grab it from the input. So I'm just gonna say input, and I want the value out of that input. So let's go take a look real quick. Let's make sure there's only one input on the page. There's only one input on the page. If I want it to be more specific, to be more specific, let's say we don't know if anybody else in our team is going to add more inputs, what could we use? Dance, dance, revolution. Exactly. We can grab this ID here if we want it. Let's go back. Instead of it just being the input, we can do dance, dance, revolution. Beautiful. And what am I missing here? What am I missing here? There's something I'm missing right here. Yeah, I need the Octothorpe because it's an ID. Great. That's gonna say, hey, go into the DOM or the document, find

00:33:00
something that has the ID of Dance Dance Revolution, and then get the value out of it. And so when I say the document, that's often something very tricky for folks to understand. What's happening when you're seeing something in your browser is that you have received an HTML file a CSS file, maybe some JavaScript files, and your browser reads all those files and makes a rendering that you see in your browser. So it's not an exact copy of your HTML. It's not an exact copy of your CSS. It's kind of like a painter that's looking at its beautiful model and then paints that model, right? You would never say that the painting is the model. It is a rendering of the model. So the beautiful thing here is when we're in the browser, the browser reads the HTML file, it reads the CSS file and paints a drawing or

00:34:00
paints a render. Well, JavaScript can come along and get access to that render. And so when I say document, I'm saying, hey, give me access to that rendering of the HTML and CSS. Look inside that rendering for something that has the idea of Dance Dance Revolution and give me the value that it has. Right, give me the value that it has. And so I think this is one of the most tricky bits when folks are first learning JavaScript is that they'll look at this, they'll go to like their inspector, they'll look in the elements, and they look at this and they think that this is the HTML. This is not the HTML. What is this chat? What is this here? This is the Dom is that rendering right like if if grandma was gonna make some soup right grandma has a recipe Or famous famous

00:35:00
tofu soup, it's tofu water and Salt and so we're making grandma's famous tofu soup, right? And then I have a jerk of a cousin that comes along and throws a tomato into the soup. Does grandma's recipe like, like automatically update, right? Like, do we see like grandma, that's really dark. Like grandma from the beyond like updates the recipe to include the tomato. No right? Like this is just the rendering of the recipe. This is just the rendering of the recipe. We could dump out this soup and then paint a new

00:36:00
rendering right? We could just read the instructions again, right? We could just read the instructions again and rebuild the soup. It's the same thing with what we're seeing in the browser. We read the HTML, we read the CSS and we built our soup, our rendering of the recipe, our rendering of those files. And JavaScript is our what? JavaScript is our what? JavaScript is our jerk of a cousin that can come along and throw the tomato into the mix. Our jerk of a cousin could make this red. Our jerk of a cousin can like remove this. Our jerk of a cousin could like put something in the input, right? But as soon as we refresh the page, all of that stuff goes away and we reread the recipe. We reread the html

00:37:00
reread the css and build what we see so javascript can always manipulate the dom But the dom is the rendering that we have from the beginning Cool All right, so we got the the value or the number from the input What's the thing that we know that we should always do when we're trying to get numbers? when we're trying to get numbers, specifically when we're trying to get numbers from the DOM, what's something that we should always do? Yeah, make sure that we actually have a number, exactly. So I'm gonna wrap this in a number and I'm gonna make sure that we actually have a number. And so I wrapped this document.querySelector Dance Dance Revolution, which I am a beast at, by the way, when do we got to do a DDR stream? I don't think it's the value out. And then I'm going to make sure that

00:38:00
that value is actually a number. That's all it's going to do is make sure we actually have a number, right? Folkman said proof. Let's just say Max steps when the Saints go marching in is not for the faint of heart. All right. So now we know that we've gotten the value out of the input. We know that it's a number. I feel a little bit more confident adding to that now that I know we have a number. So I'm gonna do num from input plus equals 25. I like this a little bit better because I know that I'm dealing with a number here. You Charlie's been holding DDR dance-offs. Are you talking about?

00:39:00
Oh, yeah, like I'm moist critical, right? I Think it was him and I feel what their name is Emeril. We're doing it Moist got some moves. I saw the I saw the I saw the moves that they they know what they're doing They were hitting it, they knew what they were doing. I thought it was capped, but nah, boy showed up and put in the work. All right, we got 25, we added 25 to the number we got from the input and we wanna alert this number. Alert num from input, beautiful. What if the number is non-numerical, then we're screwed. But it's something we could definitely could control for, but this is just kind of, this is just for us to review the concepts,

00:40:00
you know? But yeah, this lovely thing is assuming that we're dealing with good faith here. All right. Alert from num from input. Let's go ahead and save this. Let's go back. Let's refresh. Let's see if we get a value 25. Wait a minute. Why did it alert 25 right away? Why did it, why, what? Why did it alert 25? Cause we told it to, but 25, we're supposed to add 25, the number from the input. Yeah, it's not waiting for anything, right? It's not waiting for anything. So this, this alert, right? And this value from the input, this happens on page load. It's not inside of like a click event. It's not inside something that would wait. So what

00:41:00
we're doing is we're grabbing the value from the input, which is nothing. And then we're adding 25 to nothing. That's why we see 25 be alerted, right? because the input didn't have a value on page load. Our user wasn't fast enough to put something in so we could add 25s to it. So normally we would wanna put these like inside of like, say like a click event or something like that to where we would only get the value out of the input after we have clicked. Already. Uh, so all of the reviews and our Sundays are always for VODs on, uh, always as VODs on Twitch for 60 days, you know, depends on how we're doing on YouTube. If I put it on YouTube or not, YouTube, super finicky. I'm trying it out. I really like we're getting so many new folks from YouTube is

00:42:00
definitely something I want to figure out. I don't really get YouTube and our contents really not YouTube friendly since we do it like since since we spend like a lot of time like Talking at the beginning of each class like people like a YouTube video you get like right into the meat That's not what we do. Right? And so YouTube is pretty hard to grow on but we're getting a lot of folks from YouTube So I'm trying to figure it out and trying to figure out like how we can do better there You see me making like all these like silly thumbnails and stuff like that just I want to see what works what doesn't works I'm trying like really click baity stuff. I'm trying like normal stuff. So you're just gonna see me while out on YouTube for a little while, while I figure it out. But we're literally getting like hundreds of new folks from YouTube. So that's been really cool to see. So as always, all of our classes go up on YouTube. And if you wanna, if you really wanna like support a hundred devs right now, like where we're getting most of our folks is from YouTube, give the YouTube videos a thumbs up, Let them play right let

00:43:00
them play keep that that retention up. Yeah Cool Yeah, we could break them up into smaller chunks We could like remove all the all the fluff But I really do want like for me like it wasn't like YouTube was never like a thing that like I was focusing on I've just seen that it's helped a lot of people like find us and so it's like alright I still want the full classes on YouTube like I'll never kind of like I'll never like edit out stuff It'll always be the full class The only thing I edit right now is the like beginning where it's just like starting Because I do want it to be a place for folks to come and if they miss class they're going to catch up crew So yeah, it's trying to find the balance. I'm gonna start mixing in content. That's not just class stuff. Yeah Kiku Kiko said the YouTube algorithm blessed you. Hey, there we go. No. Yeah, and YouTube, the other big

00:44:00
benefit of YouTube is that I haven't monetized the channel, so there's no ads. So I know a lot of folks that are catching up on Twitch, these are three hour plus classes, their reviews are really long, that's a lot of ad time, so you can always watch on YouTube without ads. Cool. Will you put class on all the fans? I hope so. All right. So we did our easy. We got the number from the input. We added 25 to it. We alerted it in different ghosts. Hey, thank you for the 10 gifted subs. Thank you for being here. Hope you're doing well. That's Wild, thank you so much. I appreciate you. Hey, thank you so much, Different. Hope you're doing well. I don't think we're gonna be able to have our mod call

00:45:00
today so I'm glad you're here, glad to get a chance to see you. All right, last bit here. We had this hard bit. Let's look at this hard bit. Create a variable that holds the H1. So let's go ahead and create a variable that holds the h1, const h1 equals, I'm gonna say document.querySelector h1, right? So this is a variable that is holding h1. The cool thing is that we can have variables that hold our DOM elements, which is really helpful, especially if you're doing stuff like a lot, like if you're targeting the same elements over and over again, you can actually just go ahead and grab the element and store it in a variable. So now whenever I want the h1, I can just say h1. All right. Add an event listener to the element that console logs the sum of the two previous variables. So I think to me that seems like I want to go ahead and add an event listener

00:46:00
to the thing that we just created. So the h1. So I'll do h1.addEventListener. When I say it's going to be a click, then I want to run the function jam on it. Beautiful. Let's go ahead and create our function, jam on it. And actually let's name it appropriately. Add to, we'll call it add to and add to, cool. And we're gonna console log the sum of the two previous variables. Just gonna go ahead and console.log and I believe it was num plus num from input, cool. I like that. Let's go and see if this works as it is, and then we might change it up a little bit. All right, so there's our alert. We look at our console. We had the original five

00:47:00
that was console logged, and now we should see another console log when we click on the H1. First try, all right, looks good. All right, we added 25 and five, so that should give us 30. it worked on click, but what I want to do now is I want to get the value out of the input as part of the click event. Wow, how confusing this part used to be. Thanks, Leon. Hey, glad you're here, Mango. Glad to hear that. Yeah, cool. Let's go back, let's take a look. What I want to do is I want everything inside of this event listener now. So I'm going to get the value from the input and I'm going to add 25 to it. Copy. Boom. Let's add 25 to it. Boom.

00:48:00
Let's put that in here. All right. I'm just going to comment out these other lines up here just so that they don't run still. Boom, boom, save it. So now our original num up here should still be five. And then down here we should be able to get the value from the input, add 25 to it, and then console log it. So we know that the original num is always gonna be five. So let's put 10 into the input. That should be 10 plus 25 should be 35 plus five, which is 40. So this is working. Let's refresh. Let's put in 10. Let's click up. None from input is not defined. All right, let's take a look. Let's look at this error. None from input is not defined. Main.js line 18. Let's take a look. Ah, what does this mean? Why am

00:49:00
I getting an error? It says none from input is not defined. because it's not defined yet due to that scope, right? It is out of scope. Num from input is now defined, but inside this function, but it would only exist inside of that function. So up here, we need to comment this out because we no longer are declaring number from input at this, in this like global scope, right? So it only exists here. That value did not hoist out of this scope to where the global would have had access to it. Therefore, num from input was undefined. And since that alert was trying to run on page load, we're gonna get that error. Let's go ahead and try again. Refresh, all right, that error's gone. Let's put

00:50:00
in 10 and click on click me, beautiful 40. Second try. You cannot hoist sled. Yeah, of course. Not what we were saying though. You sure you could again? Absolutely. How do I get the browser to open this? So you can just open the HTML file inside of your browser. So you can literally drag your HTML file to that browser and it would open. We have it so that when we right click, we can, when we right click on our HTML file, we have it so we can open it in the browser. But if you're brand new, you've never kind of worked through this, I would definitely work through our first JavaScript class because we go in detail how to do a lot of this stuff now.

00:51:00
But if you want, you can just drag that HTML file to the browser, or you can have the open in browser plugin like we have. So I have this lovely plugin, which is called Open in Browser by Tech ER. So we click this little, like these little boxes here on VS Code, you can search for Open in Browser, and then that'll just give you the ability to right-click on your HTML files and open in the browser. These will be posted on Discord? Absolutely. So all my solutions always go up on Discord. So when we're done today, we'll see it all go up on Discord as well. I dragged the file into this window and it closed the stream. That's pretty funny. Are we ready to use prettier yet? Um, I think that you if you want it to

00:52:00
you could you'll notice that I I have prettier but I don't use it while I'm teaching and I don't really recommend it when you first first start out But I think we're at the point now where if you wanted to You could start using prettier which will help make your code a little bit cleaner it helps with all the little things that help your code look better and all the little best practices, but it does it automatically. And so when my students are first starting out, I really don't like them to use plugins or things that help them do stuff until they get comfortable with it. And so if you're just writing JavaScript, feel free to use it now. I wouldn't have it on while we're doing Node yet again, so you just get used to it on your own and then turn it back on. So yeah, you can do it. I think it just, in the beginning, can be confusing for my students, or they're not really, they're not learning it by themselves. And then the problem is that, the reason why this is a problem is because, I've had students go into technical interviews, they're not allowed to use their VS code,

00:53:00
they have to use something like Coderpad, or heaven forbid, like a Google Doc. They don't have those tools, and they're not used to having to type things out manually, and they get into trouble. And so that's why I like you to do stuff the harder way, or the more manual way first. Get comfortable with it and then introduce things to make your lives easier as we get further along. Cool. All right, folks. Like I said, all these solutions will always be on Discord afterwards. So if you missed a piece, you need to look at something, don't worry, you can grab it after. Cool. Let's keep pushing folks. All right. We eventually want to make decisions, right? Right? We eventually want to make decisions in our code. We want to do stuff. If something

00:54:00
is true, we want to do something. If something's false, we want to do something else. And so to make those decisions, we have to understand about comparison. We have to understand about comparison. And so in JavaScript, we can compare stuff. We can compare numbers to numbers. We can also do things like strings to strings. And so here you're seeing me trying to compare nine to nine, which would be true, seven to three, which would be false, but string hello does equal string hello, and that is true. And so to figure out this comparison, And we have to understand that there are kind of three different things that we're looking at When we are using one equal sign that one equal sign has a very specific name it is a what? One equal sign in javascript is always a what?

00:55:00
Yeah, it's always an assignment operator. Whenever you see one equal sign, you are trying to assign something to something else. So here I am trying to assign the letter X to be equal to the value of three, or sorry, I'm trying to assign X to be the value of three. Whenever we have two or three equal signs, we're looking at comparison Right, we're looking at Comparison and so with two equal signs, we're just looking for what with two equal signs. We're just looking for what? Value exactly and when we have three equal signs, we're looking for value and what Type, exactly, I didn't see who said it, but somebody said, this is making me realize I have to review this stuff.

00:56:00
Exactly, that's why we do it. It's what we do these review classes. We're getting in our spaced repetition. We're seeing this stuff that we've all seen before. That's why we're here. I love it. Cool, value and type. All right, so two equal signs is value. Three equal signs is value and type. So here we can see, all right, Does three equal eight in value? No, right? Two equal signs is just value, that's false. Now, this one right here is the weird one where we're saying, does number three equal string three? Well, what's the first thing we have to compare? Since there's three equal signs, we're gonna look at something first and then something second. The first thing we're gonna look at is what? Value right same thing. We're gonna look at value. So does number three equal string three in value? Welcome

00:57:00
grog It does Number three and string three are the same value. They're both three, right? They're both three However with three cosines, we're also looking at type this number three equals string three and type. No One is a number and the other is a string. So this is a false statement. Number three does not equal string three in both value and type. Cool. Down here, three equals, does number three equal number three in value and type? Yes, they're both the value of three. They are both the type of number. Cool. Where can I find this picture in the slides? You do exclamation point slides if you need the slides. Cool. Then there's some other like trickier ones that we saw. We saw the not equal, right? Whenever we have the bang, we're saying not equal. So does three not equal eight? That is a true statement.

00:58:00
Three does not equal eight. That is true. And then this is the tricky one right here. This is the really tricky one. So I'm going to type it out here. Does number three not equal string three in both number and type, sorry, value and type? Does number three not equal string three in both value and type? And this is a true statement because the number three does not equal string three in both value and type. They both have the same value, but they do not have the same type. So it is not equal in both value and type. True statement. All right. Number three is not equal in both value and type. That is a true statement. So true, exactly. Tricky, tricky.

00:59:00
All right. And then we down here, we have our comparisons, right? Is 3 greater than 8? No. Is 3 less than 8? Yes. Is 3 greater than or equal to 8? No. Is 3 less than or equal to 8? Yes. So one of the things I always ask folks to do is to Go back and play through this slide Change X to 8 Change it to a different number play with it Make sure each one of these things can work and remember you can always test inside of your inspector So if you go to console, you can then type in any of these, like three equals eight, right? And it'll give you the false back. So you can definitely come back to this slide, you can throw in different numbers, and you can practice your true and false statement. Cool. Now, we have all of this comparison stuff,

01:00:00
so we can actually do conditionals, right? And so conditionals enable us to make decisions. And so if whatever is inside the parentheses is true, we will do what is inside of the curly braces. And so here we can show you the full chain that you can have as well. You can have ifs, else ifs, and then a singular else. you can have as many else ifs as you would like. And the reason why we have these chains is that we can see, all right, if what is inside the if is true, we will do what's inside the curly braces and then we stop. But if what is inside these parentheses is false, we will look at the else if. If what is inside the parentheses is true, then we do what's inside the curly braces and we stop. And we could have as many else's as we like.

01:01:00
So we could check our if, and our else if. Our else if, our else if, our else if, our else if, our else if, our else if. Our else if, our else if, our else if, our, ever, ever. Our else if our else if our else if our. Hey, does this work? Our else if our, our else if our else if our else if our. Hey, does this work? Our else if our, our else if our else if our else if our. All right. Crispy nugget. Yeah, we got to get the collab going so we can have our if. and then we can have as many else ifs as we want. As soon as one thing is true, we stop.

01:02:00
Then, this is why we're here for eight hours, exactly. And then if everything in this chain was false, right? If everything in this chain was false, well then the else automatically runs. Right it just runs. It doesn't need to check anything. It just runs Cool So let's take a look at this. Let's take a look at an example here. We have cots pizza equals dominoes now Why? Why why is pizza here const What does this const thing mean Yeah, because it's never going to change. We're not going to reassign it. It can't be reassigned. Can't stop, won't stop Rockefeller records.

01:03:00
I came to get down. I came to get down. My pizza choice will always be dominoes. It's not going to change. So I use const. Cool. All right. So here we have our conditional logic set up. We're going to check to see if pizza equals Papa John's. Fuck no, so since it's not Papa John's we will move on to the else if alright since Pizza does equal dominoes. We wind up console logging all aboard the train to flavor town and then we're done All right, we're done. We stop you never make it to the else. But what if What if we were a noob and we spelled dominoes wrong? What if up here we had spelled it with an E? All right, we spelled it with an E. What would be printed to the console in this case?

01:04:00
Yeah, what are you even doing with your life would show up, right? Because dominoes with an E, this would be a false statement. Dominoes with an E. This would be a false statement. So the else would automatically run. Doesn't need to check anything. And we would get what are you even doing with your life? Print it to the console. Nice. And Jeffrey said, which is what I ask myself every day. Ain't that the truth? I'll talk, I'm not going to frame it in the way that you did, but as code academy, a good, a good compliment to this course, yeah, we actually assign it for homework. So part of your homework was to do all the free stuff. I don't ever recommend anything that's paid. You don't have to spend any money to learn this stuff. And the

01:05:00
trap that a lot of folks fall into is they feel like if they pay for something, they get more value out of it when it's just not true. What you do get is a dopamine rush that tells you since I paid for something that means I'm accomplishing things when it's just not True, but don't pay for anything Codecademy has some amazing free stuff that you can use We've actually assigned it for homework, but that goes for any other thing. But like I said always go deep not wide I'm gonna give you the things I want you to learn with Not because I'm like randomly picking them out of the air, but because I've seen it help thousands of students learn I've already fucked up. I've been doing this for 10 years already fucked up I've assigned stuff that didn't work, stuff that didn't help in the long run, things that were, that were bad. Uh, you don't have to experience that. I'm only going to give you bangers. And so use the things that I, that I give you go deep, not wide, and you'll be well-served towards the end. Cool. All right.

01:06:00
What's the danger of assignment versus comparison. Also, shout out to all my old students that I fucked up with. Thank you for paving the way for us to have bangers only. And I appreciate y'all, y'all real ones. Yeah, the danger of assignment versus comparison is one equal sign versus two or three. If inside of one of your conditionals, you accidentally use just one equal sign, that will always be assignment and you'll run into a truthy statement. So where this could evaluate to be true, even though you were trying to do comparison. So be careful. One is assignment, the other is comparison, right? And if you get those mixed up, you can run into some issues.

01:07:00
All right. We can also have multiple conditions that we're checking at one time. So if in this case, your name is Leon and your status equals ballin, well, then you would give a lovely Wink at the camera. Beautiful. This is a double condition where both the left hand side and the right hand side must be true. All right, as long as both are true, then you get that lovely wink at the camera for free. Exactly. That wink was for free out that like no, no, come on, no charge here. Uh, and then you could also have an or, and so we'll see that the, and is the double ampersand,

01:08:00
right? And then the, or is the double pipe character, right? So in this case, only one has to be true. So if the day is Saturday, which is not true, or the day is Sunday, which is true, then we get the weekend. Can you show us a ternary real quick? Sure. So ternary is a, is a fancy conditional basically. And so we can in here inside the console, we can do some sort of statement, right? Like is two greater than one, right? If it's true, then we'll say math is real. And if it's not true, we'll say, I've been, I've been spending too much time on YouTube.

01:09:00
There we go. Cool. All right. So here's a ternary, right? We evaluate what happens before the question mark and it'll either evaluate to true or false and so if it evaluates the true we do the thing on the left-hand side of the colon so we got math is real because two is greater than one but if that had evaluated to false then we would have done what was on the right-hand side of the colon now you don't need to worry about ternaries for right now probably the main place that you'll use ternaries is when you're solving your code wars and when you're doing stuff in line. But for right now, conditionals are fine. Don't worry. All right, so we want to practice our conditionals, but we are at the top of the hour, remember,

01:10:00
we're here for a long time. We're here for a long time, not just a good time. And so we're gonna go ahead and put five minutes on the clock. We're gonna take our break. If you're able, please get up, move around, hydrate. Let your hands rest, give a quick little stretch, and I'll see you all in five. All righty. Let's go ahead and we're gonna move on to the next assignment, which is the age checker. right, right, the age checker. So let's go ahead and take a look. I'm gonna go ahead and close this one we were just working on. There is a lovely age checker here folder. I'm gonna open up that JavaScript file and there's a bunch of conditionals I want you to write out. So, if they're under the age of 16, tell them they cannot drive. They're under 18, tell them they can't hate from outside the club because they can't, and tell them they can hate from out to the cloaks.

01:11:00
They can't even get in. If they're under 21, tell them they cannot drink. If they're 25, tell them they can't rent cars affordably. So I want conditionals that check the age, right? That check the age and then we'll tell them these different things based on the age. And if you want, you can take the code that we just did to accomplish the harder section. I'm gonna go ahead and put five minutes on the clock here. Go ahead do your best to build out this big conditional and we'll go over it together. You got this Console logs are fine. Yeah console logs are fine here Out off to all the subs today, I really appreciate it a lot of primers spinning all that Jeff Bezos's bucks Jack Tree, Darth Wolf, Taco Meat, Indifferent, Shabbos, iFord, Lexingame, Remember the Human, Tekken Climb,

01:12:00
Hot Quiz, Jason Derulo, Michael The Learner, Stig Stack, Earthy Jade, Shontendo, Curtis Learn, Project Kevin, Vladimir, Poppy Frank, Silky Smooth, Andred, Riz Beans, Quirky the cactus gopher. Hello. Hey, hello. And hey, I hope you're still here. Good to see you. Thank you for this, though, Cala. David Coase, 21. Why levy all dark and coding? Hey, thank you for the demos. Elbow grease. Hey, thank you. Get out of here. Christophe said I was in a 12k bootcamp and they were using my curriculum. I wouldn't be surprised. It's all out there for free. I know somebody's going to start using it.

01:13:00
Hey, Roy. Glad to hear that. That's why I say it. Yeah. Mandalorian, you can't post links in chat. Share it with me in the Ask Leon channel. We're going to get the APIs later today. You can use APIs to build a news tracking website probably

01:14:00
Hey, no worries, Dave. Thank you. Thanks for being here. All right, folks, we got two minutes we're gonna go over this together. I'm gonna go over local storage today. We can maybe touch on it when we get the APIs. I don't think I actually have it planned in the slides for today,

01:15:00
but if it's something folks wanna go over, I'm open to it. We'll get to the end if there's any bigger things that we didn't cover that folks want to take a peek at, we can definitely do that. Grim, you're just checking to see how old they are. So I have a variable that holds their age. And if that value is less than 16, You're gonna have a conditional. It says they can't drive Are you gonna hit up Slido again today? Yeah, so if you use the Slido you can throw your questions in there I think when we come back from our longer break, I'll take a few minutes to go through the top Slido questions. Yeah Kimmy said done and shocked. Hey, I love it I love doing these reviews for folks that have been with us for a while and they come back in there They're crushing it a little bit. I love it

01:16:00
Just confirming, are there plans to do more cohorts after this one? There are no plans to do another cohort after this one yet, because we're just halfway through this one. You can always join this one though, you can always join the catch-up crew. But yeah, we haven't made any decisions for the future yet. All right, folks, come on back. Any advice for devs chasing the DevOps stream? Go watch mastermind streams. Mastermind does like similar to what we do, kind of like a free experience, free boot camp online, but they cover more DevOps stuff. So they're also a great, great person, great instructor. Definitely go watch them. All right, folks, come on back. Let's take a look at this together. All right. So

01:17:00
what we want to do is we want to go ahead and build just a conditional here that's going to check their age. Let's go ahead and just start with our conditional. So let's just go ahead and build it out here. I'm just gonna come down here. If, and we're gonna say age is less than 16. We are going to console, console.log. And we're gonna grab this thing here. They cannot drive, boom. They cannot drive. All right, next we need an else if. So else if, oh that was, else if, there we go. We have our else if, and then inside this else if, we're going to say if age is less than 18, and then we'll do our lovely console log. And

01:18:00
inside this console log, we'll say, they can't hate from outside the club because they can't even get in. Let me copy that into here. Boom. All right. We're noticing here that this string, we're noticing that this string right here is causing us some trouble. What can we do to not run into this trouble? Yeah, we need to escape it. We can go ahead and escape. Boom, boom, there we go, awesome. Someone said we need something that covers 17. This will cover 17 though, because if they're 17, right, they won't see this, they will see this one here, right? They'll see the below. So we're covering even the gaps, because those gaps are still less than that number,

01:19:00
right? So if they had put in 17, this wouldn't be true. You'd move on to this one, right? So you don't need the and, cool. All right, let's go ahead and do another else if. I'm just gonna copy this one, make this a little bit easier here. I definitely do recommend always typing these out just to get used to the syntax. So we're gonna say less than 21, and we're going to say if they're less than 21, they cannot drink. They can not drink. Beautiful. Let's do our next else if here under 25. And if they're under 25, they can not rent cars affordably. Then if they are under 30,

01:20:00
tell them they cannot rent fancy fancy cars, can not rent fancy cars affordably. And then if they are, I always mess this up. If they are over 30, right? So if they're over 30, tell them that there's nothing left to look forward to. Let's just go and do an else. And then say console log, nothing left to look forward to. Which we all know is a lie, we all know it's a lie, once you're over 30, once you hit 35, renting fancier cars with cheaper insurance becomes a thing, you can run for president, right, you can run for president in the US, and you can always learn how to code, right, so there we go, we got fancy car rentals, learning how to code and becoming president, and you know what, they kind of all fit in the same thing, because you learn

01:21:00
how to code, You get the money to rent the fancy cars and then you use the money to bankroll your presidency So really this is a boot camp on how to become president Cool all right When you make it as president I want to be secretary of education, okay, you remember me come back like Leon secretary education you got this All right, so we got all of our conditionals here. I feel pretty good with it. We have our ifs, we have our else ifs, we have our else. We did have this harder, which was to set up an event listener. And so let's do that real quick. Let's just do the event listener way. Do the event listener way here. I wanna click over the

01:22:00
H1. So, document.querySelector, and we're going to select the H1, then we're going to say addEventListener. We're going to do click. We're going to call a function called checkAge. Then we're going to have our function that's going to checkAge. CheckAge. Beautiful. And the very first thing is we're going to get the value from the input. So we're going to say let age equal, and we're going to go to the document.querySelector, and we're going to go to the input, and we're going to grab the value, and we're going to make sure that this value, we're going to make sure that this value is a number. We're going to wrap it in a number, just like we did with the last one. Huh, imagine doing something before and then doing it again. Huh, interesting. All right, so we set up our click

01:23:00
event on the H1. We're gonna call the check age function. We're gonna grab the age out of the input, and then we can just yoink our conditional from up here. Yoink. Boom. Save it up. Super reviews are the best. I feel big brain today. Hey, I love that. All right, let's save this and see what we have going on. Use the inspect. Oh, we didn't open it. We open it from the HTML file. Boom, open in the browser. Let's open up the console. No errors. Let's go ahead and do 27. Check. They cannot rent a fancy cars affordably. First try. All right, I think this is pretty good. I think we got everything we need here. I'm gonna take a look at the code again. We have

01:24:00
the event listener we had from the exact same, exact same event listener and function setup that we had from the previous example. We're selecting the H1. When we click on it, we're running a function called check age. Here's a lovely function for check age. The first thing we do is get the value out of the input and store it in the variable age. And then we have all of our conditional logic that tells us what gets printed to the console. Cool, questions while we're here. Remember, I always share all of my code on Discord after these reviews, so you don't have to be panically typing up everything if you miss something or you didn't get to the push work, I'll always share the solution afterwards. The instruction said put it in a paragraph. Let me see if I, I don't read too well. All right, put the result of the conditional in the paragraph, okay. So we can do that. So let's go ahead and grab the paragraph. Let's look.

01:25:00
It's just a paragraph. There's only one. So let's go ahead and say const p equals document.querySelector p. So now The dom element is stored in my variable p. And so now I can just come down here and I'm just gonna go ahead and change all of these to p equals. All right, p.innerText equals. There we go. So now what that should do instead of console logging, it should put text inside the paragraph for each one of these. And I forgot my

01:26:00
parenthesis at the end, so I'll jump to the end here. Or actually, let's do it this way. Boom, boom. I don't have gaps here. Okay. There we go, cool. All right, let's see if this works. Zulay, welcome. All right, let's go ahead and take a look, see if this works, and then we'll go over how I did it. 27 again, check. All right, second try. All right, they cannot rent fancy cars affordably. It's working, it's being put in the paragraph into the DOM. And so what I did is I put the document.querySelectorP into a variable called p. Why did I do that? Why did I put this into a variable called p?

01:27:00
Just to keep our code a little bit more dry, exactly. So I don't have to constantly be typing document.querySelectorP, document.querySelectorP, document.querySelectorP, right? And then on Macs, I can just hold down command and wherever I click, I get a cursor, right? So I get a lovely cursor wherever I click and then I can just start typing there. So I just hold down command. On your machine, it'll be slightly different if you're on like Windows or you can do Linux. But for me, it's just command, I hold down and I click and then I can delete, type, do whatever I want. Yeah, alt on Windows, there you go. Cool, and so now I set it up to use intertext on all of these. There are other things that we could have done, and text content. There's like all these other ways to do it, but intertext is just easy. We did that. Cool. Alrighty. I think we're good on this one. Let's keep it moving, folks.

01:28:00
Yeah, the console got removed because it said to place it in the paragraph. I forgot to read that part. So we got rid of our console logs and we just used the, yeah. All right. Why didn't I put inner text inside of the variable? I like to be able to see what's happening in my code. And so I can quickly realize that, Oh, I'm putting text inside of whatever the paragraph is. Oh, so even if there was a way to put like inner, like if we could put inner text up here, like if we wanted to, I still like to have this so I can see what's actually happening in my code a little bit, but I'm putting text inside the paragraph. This is still readable to me. Yeah. I could create like a variable with like P in text, but it's

01:29:00
still a little, this seems just more readable to me. Yeah. Yeah. We could do a switch to, yeah. I could definitely do a switch case here, but this is practicing our conditionals, yeah. What color theme do you use in VS Code? I use a theme specifically for folks that are colorblind. I am not colorblind, but quite a few of the folks that are a part of 100 Devs are, and so I use a theme specifically for that. Oh And it locks with the raid a hope you're doing well, thanks for the raid I was the stream today We all up to I Saw the the the Sigma grind was in full force today How are we all up to we all up to were you working on

01:30:00
Welcome welcome Raiders So welcome. Welcome back I was I was kind of hoping that you would still be live when we were done today Because Sundays are typically days that we can catch you with a raid So I appreciate the raid coming this way dream was good Sigma game dev. Hey, I love it Um, so yeah, today we are doing a JavaScript review class, so we're going through every single thing that we've ever touched on JavaScript all the way from how to pro like what a program is to variables, conditionals, loops, functions, everything we've ever touched JavaScript wise, all the way up to like how to actually interview. So if you have any interest in JavaScript and maybe you've touched some JavaScript in the past, but you want some review, that's what we're up to today, taking it slow and join ourselves at asking a lot of questions. And so, yeah, good to see you all. I always appreciate when you swing by, uh, as I I've always said, I'm, I'm, I'm always lurking, always lurking. Uh, it's definitely my favorite

01:31:00
channel to have on while I'm working. I get inspired to like do and write code. Uh, so let me go, let's do ahead and do a shout out this. Cause I think most of us know the glory of your stream, but we have a lot of new folks recently. So if you haven't given them a follow, uh, please please give them a follow Definitely one of the best places to to hang out on twitch specifically if you're kind of just coding All right, you want to get some get some work done. You don't want to be by yourself Definitely hang out in that channel Shut up command didn't work. Hold on. Let's see i'm just gonna type it out There we go boom All right, if you haven't given them a follow, please go give them a follow. Hey, cool. Please go give them a follow if you haven't. It really is one of the best places to be on,

01:32:00
on Twitch, honestly. And you'll always see me lurking in there. Cool. All right. Uh, will we touch on APIs today? Yeah, we're going through everything today. So we're, we're learning the basics again. and we're reviewing the basics, the big four variables, functions, loops, conditionals. Then we're gonna move on to our arrays and objects. Once we get the objects, we're touching APIs. Once we get through APIs, we're going to move into kind of the stuff that we talked about last week in terms of interview prep, how to do car, how to do prep, how to do everything we need to be ready to go into the hunt. Woo. Take plenty of breaks. You know how we do Melody. We're taking our breaks at the top of every hour. We're gonna take our time. When we hit the three hour mark, we're gonna take our 10 minute break so folks can grab some food, do a little bit longer of a stretch. All right. You ever do leak code questions? We do. So

01:33:00
we do Code Wars every day. Literally, if you're part of 100 devs, you do a Code Wars every day. And then as we get closer to the hunt and we're actually getting to the point where we're actually interviewing, I have a 50 day plan that I worked through last cohort where we did a coding challenge every day and we built up all the principles we would need to carry on to do larger and larger, harder and harder, more algorithmically demanding practice problems. So we'll do Code Wars, we'll do our 50 day plan to go from kind of like zero to knowing everything about, I don't know, hash maps and complexity and all that fun stuff. And then we'll start introducing LeetCodes as well. Cool. All right, folks, welcome. Welcome, Raiders. Glad to hear that you had a good stream. If you want to review any JavaScript, hang out with us. That's what we're doing today. All right. So we just went through our conditional review. Let's jump back into the slides.

01:34:00
All of our materials are on our Discord, exclamation point Discord. When you join, there's a follow along materials channel. You can grab everything that we're doing today. If you just want the slides, You can do excavation point slides here in chat and have full access to the slides that we're moving through. Are promises coming in these next week's class? Yeah, we're gonna do promises, async, await, all that fun stuff this week. And then node. So node and async this week. All right. We have the third of the big four. We've done variables, we've done conditionals. Now it's time to do functions chat. What are functions? Hmm What are functions? Where the party at Yeah, there's sets of instructions there's sets of instructions

01:35:00
So functions are simple sets of instructions. They're meant to be reusable Once we get into like big brain territory, we will go ahead and have functions that really just perform one action. And they really do form the basic building blocks of our programs. So our functions kind of break down to two key pieces. We have the function declaration, and then we have the function call. So similar to how we had declaring of our variables, we can declare our functions as well. And all that means is that we have a space in memory. And when we declare a function, we create a space in memory for that function, where all those instructions exist. And then when we call the function, we're saying use that function that was stored in memory. Now, when we call a function,

01:36:00
we have the ability to pass in arguments and arguments can be passed into our functions and they get passed into buckets called parameters. You can think of parameters just as like our variables that only exist inside of this function. Now, why go through this step? Why should we have arguments and parameters and why should we be able to pass in values into a function? Like why is that such like a key part of functions? Functions. Mike, you get it right off the jump exactly. Reusability, right? Reusability and we want to be able to reuse our functions over and over again. We want to be able to pass new information into the functions that we can use that data with those functions. It's all about reusability. Exactly well. So here I have a very simple function. I have a function declaration called yell, and

01:37:00
I have a function call, and you can see that I am calling the function. What lets you know that I'm trying to run the function? No! I gotta disable that key. Man, we've done a lot already. This is wild. I'm just like, I'm just ripping through those. I'm like, dang, we did all that already. All right, we still got plenty more to go. I got, I got, I did. All right, so here I have a very simple function. I have my function call. And how can I tell that I'm actually trying to run the function? What gives it away? Yeah, exactly. The parentheses. The parentheses are how we know that we're actually calling the function, exactly. And

01:38:00
so here we have hello, which is our argument that we're passing in. Whenever you see a function call, the way I remember it is I'm calling the function to argue. I'm gonna call my mom to argue. I have a very healthy relationship with my mother, but we're gonna use this as an example. We call the function and we pass in our argument. So here I am calling the function yell, and I am passing in my argument of hello So this hello, it's passed into the function wherever I see word. It's actually Hello from the other side All right now We could read we could reuse this function. We can call it again. We can do yell And we could pass in Another word, goodbye. Now, goodbye would fall into word, where we see word, it's going to alert goodbye. So we can see this reusability

01:39:00
of our functions because we can pass in different arguments each time. Cool. We can also have a function that takes in multiple arguments. It takes in multiple arguments. So here you can see I'm taking in the argument of hello, the argument of goodbye. Hello falls into word, goodbye falls into other word. I'm able to alert hello, I'm able to alert goodbye. Cool, let's take a look at some practice here called simple functions. Let's go ahead, let's open up our code. I'm gonna close the code that we were just working on. We're looking for the simple functions folder. So here we go, simple functions. Got some lovely JS. I'm gonna have the HTML file, that way I can just open it up. All right, we got some stuff here. We're gonna create some functions that are working with numbers. We got some slightly harder ones and we got a

01:40:00
hard one. So I'm gonna put, let's see, put five minutes on the clock. Let's do a little bit more, let's do a little bit more. Let's do seven minutes on the clock. Boom. This is the simple functions, simple functions, simple functions. All right, seven minutes on the clock, get as far as you can go, as fast as you can go, and we're gonna go over it all together. Remember, you don't have to listen to these sweet, sweet jams. I always leave the timer up so you know they come back. I like to answer questions while people are going through it. You can always just mute me. And then when you see the timer run out, come on back.

01:41:00
This is the simple functions folder. No way Togo, no way. Quotient is the result of the vision.

01:42:00
Let me explain a little bit more about variable scope within a function. So functions that are declared in that function can only exist inside that function. That's it. If you declare a function inside that function, it only exists there. doesn't exist anywhere else unless you spit it out or turn it somehow um yeah what would you suggest for someone new to coding uh join 100 devs i heard it's a pretty great program i can do exclamation point 100 devs here in chat uh it'll show you everything you need to do to sign up you will go ahead and uh join our discord and there's a wonderful catch-up crew there, it'll help you get caught up.

01:43:00
If you don't like my face, there's also free code camp, Odin project, whatever you don't pay for anything. You can learn all this stuff for free. How long do you assume it takes us to have a solid grasp on TypeScript after finishing our course material. Um, not that long to understand the basics, maybe like a, like a weekend, honestly, and then putting it into practice a couple of weeks or so. Um, I don't think it's important for you to get a job. Yeah. I don't think I don't really teach it. If I thought you needed to get a job, I would teach it. Um, but it's just, it's a nice to have maybe, but there's so many other

01:44:00
things you could focus on that'll actually help you get a job. That's not one of them. Weeks that I knew nothing about coding in January when I started 100 devs and now I've deployed two websites for paid freelancing clients Hey, I love to hear that. That's awesome Melfi it's our discord so you can do exclamation point discord Hotline, that's dope, yeah, glad you found us that way.

01:45:00
What's your favorite song you play at the beginning of every YouTube video? I actually forget the name of it. It is like royalty free music that's part of stream deck. somebody's posted the name of the video on discord i have the song on discord i forget what it's called though oh we got some dunzo's coming in would you teach me how to code from the beginning if i pay for it no If you pay me money, then I don't teach you, but if you come for free, then I teach you. That's how it works

01:46:00
around these parts. Everything is free. It'll always be free. None of my content will ever be behind a paywall. Education should be free. Education should be free. So all my educational material that has helped hundreds of people get jobs, thousands of people learn how to code is completely free on YouTube. We have a discord 30,000 plus strong that could help you learn how to code That want to answer your questions that want to see you be successful. And so all that's for free Best deal ever Someone suggested that you should go on cameo that'd be hilarious

01:47:00
I think there are plenty of ways to get rich that don't exploit folks that need education. just saying there are other ways to make money people trying to better their lives I don't think they need to be exploited for me to make money all righty folks come on back come on back All right, let's take a look at this together. A lot of little bits here, let's take a peek. All right, so we are gonna move through the easy, the medium, and then maybe we'll take a look at the hard as well. So this is the simple functions. Let's go ahead and work through it together. All right, create

01:48:00
a function, all right. Create a function that subtracts two numbers and alerts the difference. Function sub two and alert, right? Just trying to make my function names a little bit more readable, understandable what's actually happening. I know I'm gonna take in two numbers. I'm gonna call that num one and num two, but these are just parameter names. It could be anything I want. It could be robot and unicorn that would work exactly the same. There's nothing special about calling this num one or num two, just the name. I could have called it robot and unicorn and would have worked exactly the same. All right, create a function that subtracts two numbers and alerts the difference. I'm gonna say let difference equal num one minus num two. Now, could I have done this inside of the alert? Yes, but I like the readability of then having the alert that has the word difference in it. I could have just like doing this and put it directly in the alert and save the line of code, but sometimes I like readability over

01:49:00
kind of terseness. All right, there we go. We have our sub alert and it doesn't ask us to actually call it, but I'm gonna call it just to make sure it's working. So sub to an alert, let's pass in 10 and seven, 10 and seven, and let's see if this works. Great, we see three being alerted to the browser here. So we know that that worked because 10, 10 minus three, sorry, 10 minus seven would give us three. So we know that this is working. I'm just gonna go ahead and comment this out so it doesn't keep running. Cool. Yeah, alerts a difference. Yeah, so it did say to alert, not return or anything like that. All right, create a function that divides three numbers and

01:50:00
console logs the quotient. The quotient is the result of division. So let's go ahead and create a function here called divide three and log. And we're now gonna pass in three numbers. I'm gonna do N1, N2, N3. Once again, we can make them whatever we wanna make them. And then we wanna console log the quotient. So I'm gonna do it all in one line this time instead of doing it like the variable and then console logging the variable. Let's go ahead and do console.log. And then we're just gonna do our n1 divided by n2 divided by n3. Cool. So that's gonna give us the quotient and we've console logged it. Let's go ahead and run this just to see if it works. Divide three and the log. Let's do something easy. Let's do like 12 or three. So 12 divided by four should give us three,

01:51:00
three divided by three should give us one. So if this works, we should see one in the console. Let's go back, let's take a look. Let's open up the inspector here. Let's open up the console. Let's refresh. And we got one for string. All right, nice. I've named my functions quick maps. All right, cool. We have our first two functions done and dusted. Let's go ahead and comment this one out so it doesn't run again. Create a function that multiplies three numbers and returns the product. All right, function multi three and return. And we know we're going to take in three numbers. So I'm going to pass in robot unicorn attack.

01:52:00
There we go. Robot unicorn attack. And we're going to multiply three numbers and return the product. So let's go ahead and do let product equal robot times unicorn times attack. And then we want to return the product. Cool. Let's go ahead and call our function here. Multi three. And so let's go ahead and do two, three, five. So two times three would be six, Six times five should give us 30. And what would happen if we just ran this as is right now? What happened if we just ran this as is?

01:53:00
Yeah, it would just kind of like poof into thin air. We wouldn't actually ever see anything. We wouldn't actually see anything because what would happen is two would get passed into robot, three would get passed into unicorn, five would get passed into attack. We wind up doing two times three times five, which would make product 30. We would return product, and remember the return goes to wherever the function So it was as though this does not exist. And we had 30 returned right there, but then poof, it would disappear. We didn't do anything with that 30. So one thing we could do is we could set it equal to a variable and then console log that variable. We could just wrap this in a console log. We could wrap it in an alert. Let's do the variable way first. So let's go and do let, let returned

01:54:00
and then we can go ahead and console log that. I said we could have done the console log all on the same thing as well, but a little bit more readable here. Cool. So now we should call the function. We know it's going to return the product. So this is going to disappear and it's going to be holding like 30, right? When we call it. And then we could console log that 30. So we know that return gets spit out to wherever the function was called, which is down here. So let's go ahead and, well, we already called it. So here's where we called the function. It'll run, it'll spit out the product to wherever it was. Then we'll console log it. So let's go ahead and save this. Go back to our console log, 30 first try. Right, we see here, we got 30. So let's just walk through what happens here again. So two gets passed into robot, three gets passed in the unicorn, five gets passed into attack. We wind up

01:55:00
with two times three times five, which is the same thing as 30. We're gonna return 30. It's returned to where it was called. So basically we imagine this is no longer here and it's just the value of 30. Now returned value equals 30 and we wind up console logging that return value, which is 30, boom. Do we just use that to see what the outcome is in the console for debugging? Exactly, yeah. It's just so we can see what's actually happening. A lot of times we might be using this function in conjunction with another function so that we need to return the values that the other function can use it. But for now we're just showing it that like we can console log it and get that value. Why wouldn't you use parentheses around robot and unicorn? You mean here? You could, PEMDAS is in effect, you can use parentheses whenever you're doing maths, but there's

01:56:00
no order of operations things I'm concerned about here, so I don't have parentheses around it. Yours has three lines of code, I can do it in one. Flexosaurus, let's go! you

01:57:00
I can wrap this in a console log if we wanted to. But we're not there yet. We'll see arrow functions soon. All right, let's look at this medium. All right, create a function that takes in three numbers. Let's create a function that takes in three, three numbers, add the first two numbers and return the remainder of dividing the sum of the first two numbers by, what? Come on, we've been doing this for three hours. All right, come on, give me a second here. All right, create a function that

01:58:00
takes in three numbers, add the first two numbers and return the remainder of dividing the sum of the first two numbers just by the third number. All right, so we're gonna add the first, divide the third. Beautiful. You gotta turn my Code Wars brain on. I feel disrespected here. Me too. All right. Let's create a function, sum and divide. Cool. We're gonna take in three numbers. I'm gonna call n1, n2, n3. and we're going to return the remainder. So we're gonna need, whenever you see return the remainder, what are we gonna need? Return the remainder, what are we gonna need? Modulus, exactly. So let's go to return n1 plus n2, N2

01:59:00
modulus N3. Yeah. Yep, so we're gonna add the first two and return the remainder of dividing the third. Wanna do it on one line? It's gonna do const sum and divide equals. We're gonna do A, B, C. Or I'm just gonna do A plus B modulus B. Because we have, why don't I need the return keyword here? Why don't I need the return keyword? Yeah, implicit return, exactly. When you use an error function,

02:00:00
there's an implicit return, meaning that anything that's on the right-hand side of this arrow gets returned implicitly, meaning you don't need to put the return on there. Cool. Nice. All right, let's get to the hard one, shall we? We do the hard one, let's see. Create a function that takes in four numbers. Multiply the first two numbers. If the product is greater than 100, add the sum of the last two numbers and console log the value. If the product is less than 100, subtract the difference of the last two numbers and console log the value. If the product is 100, multiply the first two numbers together and alert the remainder of dividing the fourth number. All right. Let's try this. Function. Fuck around. And math out. Cool. All right. Here we go. So we have our function and we're going to

02:01:00
take in four numbers. So it's going to take in our four numbers and one and two and three and four. Cool. And we are going to multiply the first two numbers. So let prod short for product equal and one times and two. If the product is great, let's just, I don't, I don't have to be, I don't have to be cool here, type out product. If product is greater than 100. So if product is greater than 100, sum the last two numbers and console log the value. Add the sum of the last two numbers and console log the value. So we'll go ahead and do a console log where we'll do product plus N3 plus 100. and four. Yeah, so take whatever the product was, sum the last two

02:02:00
numbers. Well, we can just add both of the numbers and that'd be the same thing as sum and console.log the value. If the product is less than 100, so we'll do an else if product is less than 100, we will subtract the difference of the last two numbers and console.log the value. Let's go ahead and do console.log product minus N3 minus N4. Yeah, subtract the difference of the last two numbers and console.log the value. And if it's not greater than 100 or less than 100, the only thing it can be is 100, but the product is 100. Multiply the first three numbers together and alert the remainder of dividing the fourth number. So alert, and then inside this alert, we're gonna do n1 times n2 times

02:03:00
n3. And then we're gonna get with the remainder by doing modulus and four. That's all inside the alert. Cool. Next best, it's all fun and games until you accidentally let your meme code push production. Let me tell you. So it's funny, like I, I, I, um, like these are just examples, so I'll like curse and stuff, but when you're on the job, please don't ever, please don't ever like put stupid stuff in your code because you're going to forget about it. You're going to accidentally push it and whoever's doing like your code review, if you have code review is going to see all your silly stuff. Uh, I once, I once, I, I once rejected a PR because this was in, this was, this was,

02:04:00
this was in the bottom. It was just a comment that said, this is in the bottom of their code. I don't know why this made me so funny. It's like this is like this is like their struggle through it. Like I don't I don't get it. I don't get it I think I got it. They're mine This is the best I literally was crying as I read this Yeah All right, I think this is close enough I think this is good like I think this follows everything let's try it out So we can do one that we know will be less than a hundred. So this, this case should be two

02:05:00
times three is six. And so since it's less than a hundred, we should do six. I mean, we should do it the other way. Let's do it this way. Let's do five, four, three, two. Well, so five times four should be 20. Since 20 is less than 100, we'd expect it to subtract three, which would be 17 minus two, which would give us 15. So we expect 15 to be console log. Let's save this. So let's go back around. Boom, we got 15. Nice, that looks good. Our test case passed. Let's do another one. Let's go ahead and do, um, 100. So we should be 100 times four should be 400 plus three plus two should be, uh, 405.

02:06:00
Cool. Yep. 405 that works. and then exactly a hundred let's do a hundred and one and then and this should be zero right because one times a hundred it would be 100 times three, it would be 300. And then modulus two, two will go into 150 times with zero left over. So we should see an alert of zero. Go ahead, refresh, first try. Let's go, more problem. Alright folks, so we got through the easy, the medium, and the hard. Next

02:07:00
up, we are going to dive into talking about pseudocode, and then we're going to hit up our loops. But since we're at the top of the hour, we're going to take our break. Since we're three hours in, we're going to take a slightly longer break this time. So if you're able get up move around walk around hydrate also grab some food. We're gonna be in for a long haul folks We're just getting to loops. We still got after loops. We have to get through arrays objects APIs Classes OOP and all the hunt goodness. So we're just getting warmed up here folks. Let's put 10 minutes on the clock Do what you got to do walk the dogs kiss some babies, and I'll see you in 10 minutes. All right, let's take a look at this one together. So I wanted to write some pseudocode first, right? So I want to convert a value from Celsius to Fahrenheit. So I want to convert a value from Celsius to Fahrenheit. What's the first thing I

02:08:00
actually need? Or something that like I actually need. Yeah, I need that, I need that value, right? I need the value. Let's go ahead and get the value first. So I would need to get like the value, need the value in Celsius, beautiful. Once I have the value in Celsius, then what do I need to do? Thank you, Neko. Yeah, we need to convert it. Convert Celsius to Fahrenheit. And then once we've converted it, what's the last thing we need to do? We got our initial Celsius value, converted Celsius to Fahrenheit. What's the last thing I need to do? Like show it, right? Yeah, like log it, return it, show it, cry. Show the value. I'm just gonna say show the value.

02:09:00
Cool. Those are kind of our three big things we have to do. So we have like a set of instructions. What do we use to hold our sets of instructions? Like, what is the thing we've learned about so far today? Yeah, functions. All right, so we're gonna have a function, C to F, and I'm just gonna keep my pseudocode inside of here. And so the very first thing I need is to get the value. So, I'm going to kind of get the value. I'm going to call it like temp. I'm going to set it equal to document dot query selector input. And we're going to get the value out of it. We also know we want this to be a number. So, I'm going to make sure that we're always dealing with a number. And notice

02:10:00
the pattern. We've seen this two or three times already tonight. And so, if you didn't know how to do it, you could have at least said, all right, how do I get, how do I get a value? How do I get a number? And then you could have looked at your past examples, like, oh, that's how I can get it. So you write the pseudocode. You can go back and look through your other examples. You can look through Stack Overflow, things like that to find how you're going to do it. All right, now we got the value in Celsius. How do we convert our temperature from Celsius to Fahrenheit? What did y'all find to convert the temperature? Temp equals what? temp times 1.8 plus 32. Cool. I'm gonna trust you on that one. All right. So now we've converted it. And the last thing we want to do is show the value. So do we have a place where we want to show it? Do we have like anything set up here in our HTML? Let's see. I don't have anything in my HTML. Let's go ahead and set up some stuff in our HTML. I want like a place

02:11:00
to, first we need the input, right? We need the input. and then we need a place to like actually put the value. So I'm just gonna go ahead and put an input in here. And I wanna put like an H2. That's where we're gonna put the value. And we're gonna have an H1 that says click me. Cool. All right, there we go. We got our input, our click me, and our H2. So we're gonna show the value. So let's just go ahead and grab the document, dot query selector. Let's put the H2 there. And let's put inside of it, whatever temp is equal to at the moment. Cool. So we're gonna get the value out of the input. We're going to convert it. And we're gonna put the value inside of the H2. Now, there's one problem with

02:12:00
this. And that's that, what's the problem? We've seen this problem before. Let's, hey, I appreciate that. It only runs once, we haven't actually called it. And this is gonna happen on page load. Like it would get this number on page load. If we were just to call it, it would run. We're not actually doing it in response to anything. So let's, let's go ahead and just make this like an actually a click event. Yeah, make sure it's actually like a click event. So let's go ahead and do document.querySelector. Let's target the H1. We're gonna add our event listener. Notice how we've seen this earlier today. Look, we're building patterns, folks. Look at us go. C to F. Awesome. So now this will only run on click. Well, it'll give us some time to grab the value go to the input to convert it and then put it into the DOM. Let's go ahead

02:13:00
and save this. Let's see if it runs. I'm gonna open this in the browser. Cool. A Celsius value, let's do 100. That would be 212 in Fahrenheit. First try. I know it's tiny, so we get bigger. Woo-hoo. All right, so we got 100. and then let's go ahead and try zero should be 32. First try, let's go, cool. All right, so in our HTML, we added the input, the H1, the H2, our main JS, we have it set up so that we have our event listener. We have our function where we got the value, we converted it and we show the value. We wrote decent pseudo code. So even if you forgot how to get a value out, how to get a value, you could have maybe gone back to our previous code or Stack Overflow or Discord. Always go to Discord probably first. Convert C to F, right? We're gonna convert the value. We had to Google that,

02:14:00
and then we just figured out how to show the value. If we forgot how to put something into the DOM, we could've went to Discord, Google, things like that. Cool. Welcome, Micro. Glad you got us live. Alrighty. Cool, so we got through our pseudocode. We got through our temperature converter. Let's keep the trainer rolling folks All right. Now most important question of the day. What is the best TV show of all time? All right mods Need you to start timing people out here. I'm seeing some some wild suggestions here We know the answer. There's only one good answer here. Everyone else is going to get timed out. It's going to give me a minute here. I'm going to start timing these people out. One second. Here we go. There we go. All right. The answer, obviously a bachelor. Cool.

02:15:00
Since we all agree, let's go ahead and take a look at some bachelor themed coding challenges. All right. Let's take a look. Let's close these two solutions. If you're just joining us, if you want the materials, you can join our Discord, exclamation point, Discord. agree to the rules, you'll see a follow along materials channel. We're going to get all these materials that we're working through today. Look at all this gold right here, folks. Go ahead and get those materials. And so let's go ahead and take a look at Bachelor Code. You can see that there are three separate assignments in here. We're going to start with the first one together. I'm going to open up that JS file. I'm going to open up that index.html file. I'm going to open this index.html file in the browser. And here we go. Cool. And here I'm just thinking everyone really loves the bachelor here. That's funny. All right. So here we go. We have we have three

02:16:00
contestants on Juan Pablo season of the bachelor. We all know that Juan Pablo season of the bachelor was obviously one of the most controversial seasons of the bachelor mainly because Juan Pablo at the end did not propose to Nikki but instead decided to give her the final rose and say hey we can kind of keep this thing going but I ain't proposing shook the whole bachelor nation it was definitely up there on best seasons of the bachelor and so what we want to do is when you click on final rose I want Claire and unfortunately the second love of my life, Charlene, to go away, right? And so we have, click on final rose, Claire goes away, unfortunately, Charlene goes away, and we're gonna be left with just Nikki, who is the one that received the final rose, okay? Cool. So,

02:17:00
click on final rose, Claire disappears, unfortunately, Charlene disappears, and just leave Nicky. Let's take a look at this code. You look, we have some code that's already here. All you have to do is kind of fill in the blanks here to make it work. All right, let's go ahead. I'm gonna put just like a quick two minutes for this one. Two minutes on the clock. Open up the code, give it the old 100 devs try. and after two minutes, we're gonna go over it together. Nikki is in the middle, the pediatric nurse, yes. Nikki's a pediatric nurse, that's the blue top. Click final rows, only Nikki's left. All right, go ahead, two minutes on the clock. You got this, dig deep. We're gonna go over it together.

02:18:00
Followed how far we came and felt like we learned this ages ago. This is the one where the dunzo can probably happen quickly, that's alright. First time I beat the clock, hey, get in here. Shout out to all the new folks that are joining us today. I love when I could see the first time chatting. That's pretty cool. I wish there was like a way to have it for like the entire first stream. Like I hope like just like the first stream you get like a special box the whole time. Be cool.

02:19:00
Nikki was supposed to remain DevD Nikki, so not clear if Charlene Nikki remains. Hey, welcome, jumping in mid-cohort is totally fine, so we got the catch-up crew for you to join. When you agree to the rules and click the emojis on Discord, you'll find the new catch-up crew. Join that, get some help as you start through. Good day to join us, it's all review. Glad you're here. Hey, sorry to hear that Jasmine. On to better ones. Come on through. Come on through.

02:20:00
Let's go over this together. All right. So we want, when we click on final rows, for this function to run. So we're gonna get rid of this insert code here. And we know with our event listener that this should be called hide. So when we click on final rows, we should call the function hide. And what we wanna do is we wanna be able to hide both Claire and Charlene's photo. So if we look at Claire and Charlene's photo, we can see that Claire had the ID of Claire and Charlene had the ID of Charlene. So we can remove Claire, we can remove Charlene by hiding those two IDs. Yeah, cool. Let's go ahead, we can target Claire using Octothorpe Claire, that'll target the ID of Claire, that image. And we can do the same thing for Charlene.

02:21:00
Octothorpe, Charlene, right? And there we go. If we were to click on hide, it would hide both of them. I can't bear myself to do that. So we're gonna just comment out this line here. Let's go ahead and see if this works. All right, let's refresh. And we click on final rows, three, two, one, boom. Claire disappeared because we removed, we did the, if we go back to look at the code, we did the display none on Claire. So we actually changed the CSS that's being bound to the rendering of Claire's photo to none We go ahead and take a look at it We go ahead and take a look at it. We refresh. Let's open up the inspector And if we look at Claire But keep your eye on Claire here that's highlighted and let's click the final rows And we'll notice that Claire now has like this inline style As this inline style that's display none. That's why Claire

02:22:00
is not there JavaScript has manipulated the DOM It's literally gone into this rendering and put the display none. So that Claire's photo does not show up Right Cool Can we use get element by D you can I'm using query selector just because I can use it everywhere. And we're eventually going to use query selector, query selector all. There are things like speed considerations that can come into play. But for now, we're just using the thing that's the most flexible. Tell someone here, Mo, glad you're with us today. Cool. Yeah. So we're able to manipulate the DOM directly with JavaScript. We went ahead and put style display goes none. And this also kind of shows us why we don't ever do what. This is a really strong a strong example of why we never do one thing in particular There's one thing that we talked about way at the beginning

02:23:00
Right, it's not the way at the beginning about never doing Yeah Yeah, exactly we would never want to do inline styles right inline styles, right You never want to do inline styles. And we're seeing right now, if we have inline styles, it can kind of override everything. And the only way we could override this would be to have over a thousand points of specificity in our CSS, which no normal kind of developer would do. So yeah, we're messing with the DOM directly. We're putting inline styles and that's how these things are taking effect. Beautiful. All right. Let's go take a look at the number two. Going to close this, going to close this. Now let's go ahead and take a look at this JavaScript and this HTML file. If we look, there is a lot to be filled in on this JavaScript file. And

02:24:00
if we open the HTML file here, we want you to be able to choose who the next bachelorette should have been. Clearly the next bachelorette should have been Charlene. Unfortunately, they brought Andy to be the next bachelorette. It was a hot mess of a season, But it did lead to Nick season, which was probably one of the best bachelor seasons in my opinion It was pretty good. I was even in the best. It was definitely pretty good So if we had to have Andy as a bachelorette to get Nick as a bachelor down the line, I'm okay with that Cool. So here I want you to be able to pick who you thought the next bachelorette should have been So if you wanted Andy when you click on Andy, it should show their photo when you click again It should disappear when it Claire when you click on Claire to show Claire's photo when you click again and it should disappear. And we click on Charlene, it should show their photo. If you click it again, it should disappear. You get to choose who the next batch should have been. So make these click events work, make sure it's hiding and showing their image, and you're gonna have, let's see, how many minutes do we have for this one? Let's go ahead and do three minutes on this one.

02:25:00
Three minutes on this one, and then we're gonna go over it together. All right, you got this. Dig in, get the 100 devs to try, get as far as you can, and we'll go over it soon. My favorite joke from the first cohort was, we manipulate the dom like Juan Pablo manipulates hearts that's so good that's so good everyone says that about nick i have to watch that season yeah it was a it was pretty decent season

02:26:00
It works for Andy, but not the other two. Make sure you didn't reuse Andy throughout all of the functions. Couldn't you add the IDs in the HTML file? I mean, this is practice, right? This is for us to get and practice and to do different things as examples. None of this is production level code. This is all examples so that you can see how different things work in JavaScript. Hey, that's awesome Talon, congrats.

02:27:00
Everything is production level code if you have no code review, isn't that the truth? Hands are honestly lost here. Well, Hey, this is, this is meant to be a review. Remember we have full three hour long classes on each of these topics. We're condensing what was, I don't know, 10, 12 classes into one Sunday. You can definitely go back, join the catch up crew, walk through each of these classes at a much slower clip. T3K, no plans yet for another cohort, you can always join our catch up crew though. Exclamation point 100 devs will give you everything you need to know about the bootcamp and how to catch up.

02:28:00
David, yes, I would recommend going back to each class and joining the catchup crew on Discord. Yep, Panzer said I would recommend starting at the beginning and not joining the catch-up crew. All right, folks. Come on back. Let's take a look at this together. That was just a bop. I

02:29:00
All right, I got to stop myself, nothing like a little chair dance to keep it going. How many channel points for a pop lock session? Y'all ain't ready for that. The internet would explode. All right, let's take a look at this. We have something that we actually saw a little bit earlier today, which is where we put our DOM elements into variables. So here you can see I have the document.querySelector Andy, and I stored that in the variable Andy. And so now whenever I want to reuse this document.querySelector, I don't have to type it over and over and over again. Right? Just gonna save me some time. All right. Here we have the event listener for when we click on Andi Next. If we look, there's three pieces of text, Andi Next, Claire Next, Charlene Next, and there's

02:30:00
three images. And so we want our click events to be tied to these bits of text. So Andi Next, Claire Next, Charlene Next. So let's fill that in. So when they click on Andi Next, it should fire the function called andy next like we want this function down here to fire when they click on clear next i want the function called clear next to fire cool and when they click on charlene next i want this function charlene next to the fire. All right, so let's go ahead and pop that in. CharleneNext, cool. So AndyNext, ClaireNext, CharleneNext, looking good. All of our functions would now fire. And so let's look at this first function here for AndyNext. So I clicked on the bit of text for Andy. And what I wanna do is I want to add a certain class to Claire, add a certain class to

02:31:00
Charlene, and toggle a certain class on Andy. Let's take a look at the HTML real quick. Why are none of the images showing up by default? In the other examples, they were there, right? The other examples, they were there, but why are the images not showing up right now? Yeah, if we look, they all have this class of hidden. So let's go and take a look at our CSS and see if that class does anything. Aha, all right. So there's this class of hidden in our CSS, which is doing the display none. So if I want these images to show, I have to remove this class and if I want to hide them, I have to add this class. And that's exactly what we're doing in our JavaScript here. We're saying, hey, when I click on Andy, the only image that should be shown is Andy. So hide Claire, hide Charlene

02:32:00
and make Andy visible. So I'm going to add the hidden class to Claire. I'm going to add the hidden class to Charlene and I'm going to add the hidden class. I'm going to toggle the hidden class on Andy. So we're just kind of using the same classes. So classless add literally adds a class and toggle is the same thing as a light switch. If the lights are on and you hit the button, lights go off. If the lights are off and you hit the button, lights come on, right? So you're toggling it on and off. Cool, now you're saying isn't added by default. Well, remember, we don't know if we're switching from Claire to Andy or from Andy to Claire or anything like that. So what we wanna do is it doesn't matter where we're coming from. We're just gonna hide Claire and Charlene no matter what. It doesn't care. I don't care if Claire was clicked before.

02:33:00
I don't care if Charlene was clicked before. As long as I don't click on Andy, I'm gonna hide everything and then just show or toggle Andy. And the reason why we do this is is because a computer will do what we tell it to do. The computer doesn't know that we were just showing Claire or that we were just showing Charlene. It only knows what we tell it to do. And so I'm gonna tell it to do the same thing every time, which is if I'm clicking on Andy, hide Claire, hide Charlene. I don't care if they're visible or not, just hide them anyway and then toggle Andy. Yeah. Cool. So let's go ahead and save this and we should have Andy working. We have to comment this out because it might not like these like broke ones. Let's go ahead and save this. Refresh. All right. There we go. We got Andy toggling. Andy, Andy, Andy. I saw some folks saying, is anyone from Atlanta today? Andy was a associate district attorney for Atlanta. So this was your associate

02:34:00
district attorney for a while. All right, there we go. So we got Andy showing. Claire and Charlene are not working yet. All right, Baron Charlene are not working yet. So let's go ahead and fill in the rest here. We know the trick now that all of these are gonna need the hidden class. So I'm just gonna go ahead and put hidden on all of these at one time. Just using that command we talked about earlier with the hidden. Boom. There we go, now they all have hidden. And now I have to go ahead and add hidden to Andy. and Charlene since I'm in Claire, right? And then I can toggle hidden on Claire. Same thing down here. I'm gonna add hidden to Andy and I'm gonna add hidden to Claire and I'm just gonna toggle hidden on Charlene.

02:35:00
Well now it should work for all of them. Awesome, so Andy, hide and show, Claire, hide and show, Charlene, hide and show. If we click on Andy, but then we go to Charlene, what do we expect? If Andy's up and I click on Charlene, what do I expect to have happen? Andy's up, I'm gonna click on Charlene, what do we expect to have happen? Yeah, we're gonna tell Andy to hide and then toggle Charlene. That's how we get Charlene. Now, did my program, like did my computer know that Andy was visible? Like when I clicked, when I went from Andy to Charlene,

02:36:00
did my program know that Andy was visible? No, it didn't know. Remember, computer only do what you tell it to do. It had no idea that Andy was visible. It just knows that when I click Charlene, I hide Andy every time, I hide Claire every time. Did I have to hide Claire when I click on Charlene? Did I have to hide Claire when I clicked on Charlene? No, I mean, I did it. I didn't have to. And so that's the whole point here. The whole point here is that we are going through and we're not doing conditional logic. We could do conditional logic and say like, if Claire is visible, then hide Claire, or we could just always hide Claire, always hide Andy whenever we're clicking on Charlene. So there's ways that we could have done it conditionally. And there could be this ways where we're like, oh, we're just gonna take advantage of the fact that I don't

02:37:00
care. It's gonna hide them all regardless of the state and then show Sharlene. Cool. All right, let's do this last one together. On this last one, number three, let's go ahead and open up the index.html and the JavaScript file. Go ahead and open this in the browser. And what I want to have happen here is we know that who got the final rose, This is a very important question. Who got the final rose in Juan Pablo's season of The Bachelor? Nikki, exactly. Nikki got the rose in Juan Pablo's season of The Bachelor. So, when I click on Claire, I want it to alert wrong. And then when I click on Nikki, I want it to show their photo, okay? So, we look, we can see that we have two things that we can click on.

02:38:00
Claire and Nikki. We can see that both Claire and Nikki have the class of contestant, but only have one that has rows, right? So Claire has the class of contestant, Nikki has the class of contestant, but only one has the class of rows. And that's what we're gonna look for. If they have the class of rows, we know they got the final rows and we can show their photo. Otherwise we should alert wrong. And we look at our JavaScripts here. We're going to go ahead and set up an event listener for every single, event listener from every single clickable thing. We're gonna put an event listener on everything that's clickable, aka the Claire and Nikki. And then we're gonna check to see if it has that certain class. All right, let's put another three minutes on the clock for this one. Go at it. We'll go over it together. We'll explain everything. And then we're gonna move on, folks. We got some other wonderful things to get to. All right, three minutes on the clock. You got this dig in

02:39:00
FLS we'll get to that when we go over it together Class is a dot kangaroo Oh Real sweet googly moogly's that got it done, ayy I love it.

02:40:00
Done so glad you showed up for this review, ayy I'm glad you showed up for the review too. Hey, it's heard glad you found us too. We've got some Dunzo's coming in quick. We'll go over this one. We'll take our break and then we're moving into a raise folks moving into a raise. Insert code is where you're supposed to insert code. It's just my way of saying, like, hey, put your code here.

02:41:00
Yes, exactly. Pumpkin. I mean toasters. I Need a good tea to drink while coding any suggestions I'm a big fan of Tazos right now Pretty much all their tea lines are pretty good for me play something with a little bit of caffeine good taste I like the the vanilla chai. It's kind of my go-to. I'm drinking a little bit of coffee today though All right, folks,

02:42:00
come on back. Come on back Rubio's is supposed to be like the best tea for like, uh, like health wise. Yeah All right, folks, come on back All right, take a look at this last one we're gonna take our break and then move on into our next wonderful topic today All right, so we want to be able to grab all the contestants. And so, so far we've seen query selector, but query selector only grabs the first one, right? Right, only grabs the first one. Query selector all enables us to look at everything that has a specific value. So let's go ahead and grab all of them that have the class of contestant, right, contestant. And so if we look at Contestant, we can see that there are two things that have the class of Contestant. And so QuerySelectorAll is gonna return something kind of unique.

02:43:00
Anybody know what QuerySelectorAll returns? What would QuerySelectorAll give us here? Look at us go, yeah. It returns a node list. which is kind of like an array, but not really. It doesn't have all the stuff that arrays have. And so that's what we're going to do here. We're going to get the query selector all, which is going to give us a list of every single thing that has that class. But if we want to be able to do like array type stuff on it, we can use this array from. And what this is going to do is it's going to give us an array from this lovely node list that we have here. Right? So we're going to take this node list and kind of get all, get an array from it. And now that we have an array from it, we can use array stuff like for each, right? Right? Like for each.

02:44:00
And so what we're going to do now is what for each is we're going to loop through each element that we have. And we're going to go ahead and set up an event listener on each of those elements. So we're going to call check for rows. So let's put in here, check for rows. And so all this is, is a fancy way of grabbing everything that had the class of contestant and giving them all the same event listener, we went through and put a Smurf on each one of those contestants that was listening for the click and now no matter if we click Nikki or if we click Claire, there is now the same event listener on each of them. Cool. All right. Now, now that we have our event

02:45:00
listener working, right? Now that we have our event listener working, we can go ahead and click on either of the contestants. And so whatever we click on is gonna become the click target. Right? Whatever we click on is gonna become the click target. So if I clicked on the first contestant, that would be this Claire. Or if I clicked on the second one, it would be this Nikki. And so when I click on it, I wanna see if it contains the class of what. I want to see if we could, right? Want to see if it contains the what? Yeah, let me see if it has the class of rows. Why don't I need a dot here, but I needed a dot here?

02:46:00
Like here I needed a dot, but here I don't. What's the difference? Yeah, we've already said classless. So we already know that we're looking for a class. So we don't need to put a dot here because we're already expecting a class. Up here, query selector all can look for anything. And so we need to tell that we're looking for the class of contestant up here. Great. Now we're looking to see, hey, the thing we just clicked on, does it have the class of Rose? Because if it does, then we know that we've clicked on Nikki. let's go ahead and toggle hidden, right? Nikki still has the hidden class. If we come down here and look, Nikki has the hidden class. And so we want to go ahead and toggle the hidden class on Nikki, right? And that'll make Nikki show when we click on their name because they have the class of Rose. And if we click on something that does not have the class of Rose, AKA if we click on Claire, then we should see the alert of

02:47:00
wrong. Because if we look Claire does not have the class of Rose, so we should get a wrong We had this open already, let's go ahead and refresh Claire wrong Nikki their image first try You Cool, all right folks, looking good. Remember, I'll always share all the code after class. So after we're done today, you'll get all of the code that I'm working through. Cool. All right, we take a break, we're gonna do loops and then we're gonna do arrays. So we're

02:48:00
at the top of the hour. So it's gonna take our five minute break. We've been real good. Exactly. All right, let's go Let's go through loops This is engagement. Exactly. You're all like engagement got him So we're gonna talk about loops we're gonna talk about loops we're gonna talk about loops we're gonna talk about loops We're gonna talk about loops. We're gonna talk about loops. We're gonna talk about loops. We're gonna talk about loops We're gonna talk about loops. We're gonna talk about loops and talk about loops Hey, does this work loops we're gonna talk about loops We're gonna talk about loops and talk about loop our else if our else if our else if our else We're gonna talk about loops. We're gonna talk about loops and talk about loop. Hey, does this work? It was at this moment that he knew he fucked up Loops we're gonna talk about loops. We're gonna talk about loops and talk about loop. Hey, does this work? Hey, does this work? Hey, does this work? Hey, does this work our else if our else if our else if our else Loops, we're gonna talk about

02:49:00
Loops, we're gonna talk about Loops, we're gonna talk about Loops It was at this moment that he knew, he fucked up loops. We're gonna talk about Loops. We're gonna talk about loops. We're gonna talk about loops. Hey, does this work? Hey, does this work? Hey, does this work? Hey, does this work loops? We're gonna talk about loops. We're gonna talk about loops and talk about loop Uh, come on, hey, we're four hours in I get to have a little fun I get to have I get to have a little fun You gotta give me something 10 hours later, it's just loops on loops on loops. All right, let's get into it folks. Loops are a way that we can repeat some action over and over

02:50:00
again. There are three main kinds of loops that we saw in JavaScript for while and do while and each one kind of just determines like how you start and stop the loop. There are also other loops we saw when we got the things like arrays for each, which we just saw, map, reduce, all of these things are also loops as well. So we'll cover loops and we're going to see them again, even when we get to arrays. All right. So the first loop we're going to look at is the for loop. And you always kind of see this like pretty overwhelming bit of information. initial expression, condition expression, increment expression. All that really means is, hey, we're going to set up a counter. We're going to say how long the loop's going to run. Like, when is it going to stop? And what happens to that counter after each iteration of the loop, right? Each iteration of the loop, right? And so here

02:51:00
we have this idea of console logging I with each loop. And if we were to let this run the loop is starting off at 1 So the very first thing we would see printed to the console would be 1 Then we're gonna add 1 to the I and then we're gonna check to see if we're still good So 1 plus 1 be 2 is 2 less than 5 since that is good We go ahead and console log I again, which now it's at 2 Then we're going to add one to I, which means we're at three is three less than five. That is true. Then we console log I again, which is three. Then we add one to I, which means we're at four is four less than five. Yes, that is true. We go ahead and console log I, which is four. Then we add one to I and is five less than five. No, that is not a true statement. So we stop and the only thing that would be printed to the console was

02:52:00
one two, three four beautiful All right, let's take a look at the 21 savage loop you're gonna put this for loop in to practice Freckled signs. Hey coming through with the raid. Hey, I appreciate you for bringing the crew by hope you're doing well. Ah I think we've only done we've only been able to make one raid happen the freckled science But an amazing channel amazing group of folks definitely want to hang out over there Does a bunch of open science does a bunch of butterfly collecting a lot of really fun stuff a really cool stream to catch and They stream typically later at night. And so typically right after our stream is over like a half an hour later They start streaming and so if you're ever like, you know what i'm staying on twitch boom you

02:53:00
pop over to their channel You have a lot of fun. Uh, definitely Uh, one of my favorite channels here on twitch and they they we used to be in the same category But now we stream in different categories So we don't we don't we don't get to see them as much but if you haven't definitely give them a follow, please Let me see if I can spam it in chat here All right, i'm gonna grab it real quick one second hold on Boom. There we go. I'm gonna throw it in chat here. Boom, boom, boom, boom. If you haven't given them a follow, please, please give them a follow. You're messing up if you don't give them a follow. Definitely one of my favorite channels to hang out and definitely like after stream I'm probably still on Twitch hanging out in their stream. So definitely give them a follow. Thank you for bringing the raid over. Hope you've been doing well. Hope your Stream went well, hope y'all had some fun. The butterflies are real.

02:54:00
They are, they're beautiful too. Wait, we're not in science and tech anymore? We're not on science and tech anymore. I miss science and tech. So science and tech is where we started out and now we are on software and game development. And back in the day, we used to get clapped by the ducks. And so now I don't get to see the ducks anymore. And that, that makes me upset, but there always used to be ducks that sat at the, at the top of our, at the top of our, at the top of our channel. And so we don't get to see the ducks anymore, but we got our own like science. We got our own channel, but I miss being with all the other folks in science and technology. So there's, there's a relic of some of the old guard of which freckled science is one of them. Yeah, there's a stream of like these ducks and they always used to like they're just always live. They would always have like 400,

02:55:00
500 people just like watching ducks walk around. I don't know. Different different strokes for different folks, I guess. All right, let's let's look at this. Already folks, let's get in here. So let's take a look at this code for folks that came up with the raid. We were in the middle of a full JavaScript review. So we run a free 30 week software engineering boot camp. Everything you need to go from having never coded before to actually getting employed as a software engineer. And so we are taking today to just review everything JavaScript that we've talked about so far. We're four hours in. Who knows how much longer we're going to go? We just talked about loops. So we got to talk about arrays, objects, object-oriented programming, APIs, and then how to interview. So we got a lot of stuff still left on the docket. So glad you're here with us. All right. So let's go ahead and take a look at

02:56:00
this Savage loop. It's in the materials for today. If you want it to follow along with the materials, they're on our Discord, exclamation point Discord, agree to the rules. You'll see a follow on the materials channel and you'll get all of this heat right here that we're working through today. All right, let's look for our surf savage the 21st. We have a JavaScript file and there's a little prompt here. I want you to go ahead and create a function that has a loop that prints 21 times to the console and then call that function. Bonus if you can make it print 21 times to the DOM. Cool. So let's go ahead and bring that up here. And bring the timer up. Let's do, let's do four minutes on this one. Four minutes on this timer. Go ahead. Use a for loop. If you can do the bonus, do the bonus. And we're going to go over

02:57:00
it together. You got this. Give it the old a hundred devs try as far as you can. Can I print Dylan? Of course. Can't wait until that duck Pokemon comes out. Yeah. I don't know. Starters. It's for violet. Don't look too impressive to me. I mean, they look cute, but I don't know. Are you kidding? I love me the weed cat. I guess. I think the starters look okay, but they're

02:58:00
not going to give us the national decks again. That's going to be upsetting. I just don't believe in them anymore. We should have more info dropping soon. They always like they they used to throughout all the main series up until sword and shield. They always drop new info like mid May like like tomorrow if they kept the old the old schedule like tomorrow they'll drop more info about the two new games Violet and Scarlet but with sword and shield they waited until June so I'm hoping they do in May and maybe this week we'll get some good info if not we'll have more in in June I just want them to get online, right? They could just get online, right? I'd be over the moon. Give me like good online

02:59:00
where I can like actually battle folks, add them to my friends list and. A national decks and like I'm good. like a flower full decks can't believe I'm actually done a congrats minute 30 left to get in here Favorite VS Code plugin. I don't really like, I don't really use plugins. That's all my plugins. Probably prettier. Probably about it. All natural.

03:00:00
Now, Pokemon X and Y had the best online. You can literally just be playing and you see all these people from like Japan and France playing. If anybody looked cool, you could like click on their avatar, you could ask to like trade with them. You could ask to battle with them. And then the cool thing is like if you have like a really good battle and like they did something cool, you could, you could work them all the way up to your friends list and actually talk to them while you're battling. So I made friends from Japan. I made friends from France, like people all over the world that I was like battling and playing with. And it just turned what was a normal single player experience into what felt like a real like world with like real people in it that you could really battle and that like just blew my mind and i've been chasing that ever since and it's just gotten worse and worse

03:01:00
hey really needed this review i know i had no idea hey i'm glad it's working for you All right, folks, come on back, come on back. All right, let's look at this together. Chill the music. All right. Create a function that has a loop that prints 21, 21 times to the console and then call that function. All right, function, sir, savage, the 21st and it's gonna have a loop that prints 21 times to the console. Let's go and create our for loop. Let i equal 1 while i is less than or equal to 21 and we'll do i++ and we're gonna console.log

03:02:00
i, oh sorry, console.log 21. Beautiful, so that'll console log it 21 times to the console. Let's go ahead and call this. Let's save it, and let's make sure that this actually works. Open in the browser. Let's open up the inspector. Console, boom, we got 21, 21 times to the console. 21, 21, 21. I thought you're gonna let co-pilot generate it, nah. All right, cool. We got 21, 21 times to the console, but there was a bonus here. Bonus if you can make it print 21, 21 times to the DOM. To the DOM. All right, so let's come out our console log here. And do we have anything in the DOM where we can put it? Yeah, we have this ID savage says. So let's go ahead and target that, document.querySelector,

03:03:00
and we'll go ahead and do the id of savage says, and we're gonna put inside of that 21, great. So now we should put 21 into the DOM, 21 times, we're gonna see something that's gonna happen here. So let's pay attention. So we're going to loop through, This should run 21 times. We should put 21 into the DOM, 21 times. Let's save this. Let's go back. Let's refresh. All right. So we did get 21 in the DOM. It does say 21 here, but why doesn't it say 21, 21 times? What happened? What's going on? Yeah, for no college robotics, just overrode it. We just

03:04:00
overrode it 21 times, right? We just put it 21 times back into the dom. So it worked, did it 21 times, but we didn't get to see it. What we want to do is we want to concatenate it, right? All right, so let's go ahead and do plus equals 21. And I'm gonna put a little space that they're separated. And now what's gonna happen is each time this runs, we're gonna add 21 to the DOM. So it's gonna keep concatenating in the DOM. And if we refresh, boom, there we go. We got 21, 21 times to the DOM. Wrap it with the space in the front, boom. There we go, we got 21, 21 times into the DOM. We got some space between it and looks like we're doing good. Second try. All right, let's take a look at the code real quick. Simple for loop, we did it the console way first. Now we're concatenating in the DOM the second way.

03:05:00
Cool. All right, let's keep moving folks. Alrighty, we also have a while loop. And so while loops are a little bit different, we do our increment outside of the loop. So here we're setting up count as our increment. We have our end condition as part of the loop, and then we are incrementing our count here each time. Now, if I, for some reason, forgot to have my count go up by one, right? Go up by one. What might we run into here with this project? What might we run into here? Yeah, we could run into an infinite loop, meaning that our loop would keep running and until our browser ran out of memory and our computer

03:06:00
crashed, Chrome kind of stops that from happening these days. but back in the day, you could have infinite loops that would literally crash your browser and crash your computer. And so, yeah, we gotta be careful when we're doing, especially while loops, that we make sure that our end condition can actually be met, right? And that we actually have an increment that's happening so we don't run into an infinite loop. Just finished a C++ project, do you only do JS? Yes, we are here to learn how to get jobs. And so the fastest way to a job right now is full stack JavaScript, so that's why we teach it. Cool. All right, let's go ahead and take a look at another loop. The, oh, sorry, let's take a look at some review here and move into the bring it on. So let's go to bring it on code here. I'm gonna close this SirSavage21st code and we should have a bring it on. Here we go, bring it on is the name of the folder. We got index.html, we got a JavaScript file here And we got review of all of the big four that we just covered. There's

03:07:00
some variable review There's some function review. There's some conditional review and there's some loop review. Let's put eight minutes on the clock Eight minutes on the clock you at the old 100 devs try Try and get as far into this as you can and we're gonna go over it all together All right, you ready? Let's do this You got this this is the bring it on it's review everything we did so far eight minutes on the clock Daddy's home a thank you for the hydration Cheers to you This is the bring it on, yep.

03:08:00
So it means to go folks you got this How can we make our commented lines wrapped the next night instead of the whole comment on the line. It's called Word Wrap. It is a setting in VS Code, Word

03:09:00
Wrap. So if you open up your settings and you look for Word Wrap, you can turn it on, or Soft Wrap. Option Z on Mac, Alt Z on Windows. There you go. 120 days of Anki and Code War

03:10:00
Streak. That's wild. Congratulations, WebDev. What's the difference between word wrap and whitespace? Word wrapping is like what you see here where like see how we get to the end of the line instead of me having to continue to scroll to the right, it wraps to the new line. That's word wrapping. Whitespace is just what you see here, like literally the spacing. I don't know if you're memeing or not, Chronic, but we're not using any frameworks right now. Cover basics of JavaScript, then we move into the basics of Node, use Express to build out our APIs. And then, yeah, we build out full stack web applications and we add a little bit of React done at the end.

03:11:00
What do I mean by subtracts for numbers? Yeah, create a function that takes in four numbers and subtracts them all from each other and then alert the difference. So yeah, subtracting from each other. Anthony from Kidder. Hey, thank you for the raid. Hope you're doing well. Thanks for the raid. What are we all up to? Anthony from Kidder. I don't think I've seen your stream before. or what were y'all working on or doing or having fun. We are right now doing a full JavaScript review. So

03:12:00
we run a free 30-week software engineering bootcamp that takes you everywhere from having never touched code before to everything you need to be employed. And we're getting ready to move into backend. And so if we're moving to back and we're doing a full JavaScript review, we're four and a half hours into it. We're still not even close to being done. And right now we're doing a review because we just reviewed the big four. We did variables, functions, loops, conditionals. That's what they're working on right now. That's why we got three minutes left on the timer. And then we're going to move on to array. Let's see. Doing a solid JS and React comparison. It's been fun. That's dope. What did you find when you were working with solid JS and React? What was the what was the result of the comparison?

03:13:00
That's awesome and different I know that that's cool. Yeah Two minutes left, folks, and we're going to go over it together as far as you can, and then we're going to go over it together. That's awesome. Hey, thank you, Anthony. I appreciate that. About to set up a raid, then we get folks coming back your way. If you're helping out on Discord, you gotta get folks raiding your way. That'd be dope. Got some Dunzos coming in. Love to see it, love to see it.

03:14:00
More performant, dope. It's awesome. I haven't touched it before. I haven't played with it. If we keep going with me another extended break, yeah, we'll probably do like, probably like another five and then a 10, like we'll do five, 10, five, 10, five, 10 for the rest of the night. Can you make a guess of how much longer we're going to go until? I have no idea. It depends on how many questions you have because remember I also said like once we get through this I want to take some time to answer some of the The slido questions and then we're gonna move into a raise objects OOP Then prep and all the interview stuff. So yeah, we still got some time

03:15:00
ahead of us Last one went nine hours. I don't think we'll hit nine. Maybe maybe like seven seven and a half. It's really hard to to guess these ones. It really does come down to how much questions y'all are asking. But kudos to y'all for putting in five hours on a Sunday so far. That's wild. Gofrio5a, thank you for the gift of subs. Thank you for being here. I appreciate that. Thank you Thank you so much. Seven and a half Leon time is nine. I like that, that's funny. All right, let's go over this together, folks. Go over it together, then we're gonna do some Slido questions and then we're gonna probably take a break and then move into arrays. All right, variables. Create a variable and console log

03:16:00
the value. Cool, all right. All right, let num equal five. And let's go ahead and console.log, oh, beautiful. Create a variable, add 10 to it, and alert the value. All right, let other num equal 15. Add 10 to it, so other num plus equals 10. and alert other num. Beautiful. All right. I think that gets our variables. We've got a console log happening. We've got an alert happening. I'm just going to comment these out. So if we run our functions, we don't see this stuff, but it looks good to me. Functions. Create a function that subtracts four numbers

03:17:00
and alerts the difference. Let's create a function, sub four and alert. Cool, now we're gonna have four numbers. We're gonna do N1, N2, N3, N4. And like we talked about earlier, nothing special about those parameter names. We could have called that robot unicorn attack zebra and it would have all been the exact same thing. But we're gonna go ahead and alert the difference. So let's just go ahead and put our alert straight in here and do n1 minus n2 minus n3 minus n4. Beautiful. So we would subtract all the numbers that would give us the difference and we're already in our alert. Cool, I'm not gonna bother calling these ones because we've already did a lot of these similar ones today. Create a function that divides one number by another and returns the remainder. As soon as you see returns the remainder, what are we looking for? Returns the remainder, what are we looking for? Modulus, exactly. So let's go and create that function.

03:18:00
Return remainder. And let's go ahead and return. And we know that we're gonna take in two numbers. Let's do robot unicorn. And we can just return robot modulus unicorn. Cool. Oh, we had a function divides one number by the other and returns the remainder. We have the modules to give us that remainder. Robot modules unicorn would work here. All right, let's look at these conditionals. Create a function that adds two numbers and if the sum is greater than 50, alert Jumanji. All right, function add two and alert. Cool, we're gonna take in two numbers. So let's do num one, num two, or in this case, um, rhino, zebra, and then let's go ahead and create

03:19:00
a sum. Let's sum equal rhino plus zebra. And if let's say if sum is greater than 50, we should alert. Jumanji, beautiful. All right, alert two, we took in rhino and zebra, we added rhino and zebra to get the sum, if sum is greater than 50, alert Jumanji, that's what we did, let's go. All right, create a function that multiplies three numbers and if the product is visible by three, alert Zebra. Create a function that multiplies three numbers and if the product is visible by three, alert Zebra. All right. Function, multi, three, and check.

03:20:00
Cool. So, we're going to take in three numbers, and one, and two, and three. we're going to get a product so let product equal n1 times n2 times n3 and if that product is divisible by 3 how can I check to see if the product is divisible by 3 Yeah, we can do that modulus, right? So if we divide, if we use the modulus, divide a number by three and we don't get a remainder. If we get zero back, we know that that number is divisible by three, right? So we can do product mod three. And if that equals zero, then we know that whatever product was, was indeed divisible by three. Because if it wasn't divisible by three,

03:21:00
we would have gotten some other number besides zero, like one, two, doesn't matter. Cool, all right, so if there's no remainder, I'm sorry, if the remainder is zero, then we know it was divisible by three, and so we can go ahead and alert Zebra. Zerg, Zerg rush, Zebra, there we go. All right, alert Zebra, beautiful. All right, let's keep pushing here. Here we got one more here. Loops, the loop, the loops. Create a function that takes in a word and a number. All right. Create a function that takes in a word and a number. Console.log the word X times where X was the number passed in. All right, so let's create a function here. Loop word X times. We're gonna take in a

03:22:00
word and a number. And we're going to console log the word X times, where X was the number passed in. Let's go ahead and do four. Let I equal one, while I is less than or equal to none. We're gonna go ahead and have I go up by one each time. And then we are going to console log word. So if this works right, we'll console log word once for each time. And so we'll start off at one, we'll go up until we hit the num that was passed in. And so if we passed in five, we should see that the word console log five times. Beautiful. All right. Well done, everybody. Well done. Let's go ahead and why start at one instead of zero? Well, I'm not using I as like an index or anything like

03:23:00
that. And so, um, since I know I'm not using it as like an index or anything, I can just start with one instead of zero. If I knew I was going to be using this, like with a raise and I needed that I to be like an index value, since our index has started zero, then I would start at zero, we could do it if you wanted to. We could start off at zero and just, um, right. While it's less than numb, that'd be the same thing. It'd work just the same. Cool. We ain't nowhere near done yet. We still got a lot of stuff to go through. All right, let's save this one up. Let's go ahead and get back to the slides here. We're going to move into arrays. Before we move through arrays, I want to take some time to go through some Slido questions here. Maybe like, let's say like five minutes or so, 10 minutes or so Slido questions, and then we're going to take our break. Cause when we take a break, we're gonna come back from arrays. We'll do arrays, we'll do objects, And then

03:24:00
we'll do APIs and then we'll do OOP. And then we will wrap up with like how to do the hunt. First question. Should we remove our current non-related dev job since COVID on our LinkedIn profile and replace it with dev freelancing? No, you don't have to do that. As long as you have your agency experience or your freelance experience on your resume as well. Like you want that on there. My LinkedIn is private because my former boss stalks people online and tries to sabotage them. Should I risk it for the biscuit and make it public anyway? Never do anything that's gonna bring yourself harm or something that could adversely affect your process. Remember, all this stuff I asked you to do is about opening as many doors as possible. Not everyone has the privilege of opening certain doors. And so if opening one of those doors would put you in a bad spot, don't do it.

03:25:00
What do you say to someone who has fallen off the wagon and has fallen behind difficult life stuff happen But I know I'm not the only one so I feel I feel guilty There's no such thing as falling off the wagon or falling behind Because we have the ketchup crew you can definitely do this whole program at your own pace we don't all have the same privilege of time or energy or This might not be the right time for you to go through program But the beautiful thing is that we have so many other folks that are in the exact same spot that are going through the ketchup Crew at their own pace. And so while there definitely are always perks to being live You can get the bulk of the experience by going through the ketchup crew with yourself And so give yourself some time give yourself a little bit of grace and then get back to it All right, get back into the ketchup crew keep plugging away But yeah, if you need to take time you need to recharge and come back. That's okay That's the beauty of this being also a free program, right? Like If you're doing a paid program either either do it or you don't and you lose

03:26:00
your money Here says this is completely free. You can take you have the luxury of some of that time if you need to take it But we're all in the same roller coaster some of us are just a little bit further back, that's all right Something about a dev finder. I haven't used it. I don't know what that is. Can our networking from now on be based solely on our hit list? We're close to doing that. We're close to point where we're ready to like start the hunt seriously. So you're, you're, you're, I wouldn't put the pressure on yourself to be doing hit list networking yet just because we're not there. We haven't started the back end yet. You haven't started your hundred hours project yet. So the, the hit list focused networking

03:27:00
comes a little bit further in the process when, if you started to convert these, these folks into actual leads, like folks actually giving you interviews, you're ready for those interviews, but we're not a hundred percent ready yet to start actually interviewing. So it would be a waste if you networked your way into those roles and they weren't ready to kind of go with that process. So we kind of wait just a little bit longer for at least focused networking. Leon, how do you make time to do 100 devs work and live your life? Thank you for what you do. I don't go into my days like an accident. My entire week is scheduled. My entire month is scheduled. If it's not on my Google calendar, it does not happen. I also have a wonderful wife that is also doing their PhD and working extremely hard. And so, um, it's really great when you have a partner that's grinding as much as you are. And, uh, yeah, so it works out well, but I always schedule time for

03:28:00
personal stuff. I make sure that I have a few, a few afternoons, uh, uh, a week that are, that are fun time date night with with the wife like like you gotta schedule rest and relaxation just as much as you schedule your your working hours and then I really do work a lot so but I also I'm one of the weird people that like to work um yeah like a good Saturday is like relaxing and then at night like getting some work done I don't know. I'm weird. MongoDB versus SQL. I see SQL being highly regretted by other developers. Yeah, really elaborate on the use of these and why we might need one versus the other. We're not there yet. We're going to learn MongoDB first, and then we're going to learn a little bit of Postgres as well. So we'll learn both. And the reason why I like MongoDB is because if you know objects, you know how to use MongoDB. That's it. That's why I teach it.

03:29:00
It's just super easy to go from having understood objects in the JavaScript and like basic APIs to using a database. Now, there are certain scenarios where MongoDB is better than SQL and some scenarios where SQL is better than MongoDB. When we get to that in class, we'll have actually a whole video that breaks down the differences, what's better for what, but there are scenarios where MongoDB can be better. There's definitely a lot more scenarios where SQL can be better, but we're going to learn a little bit of both. So that whenever you join the job, whatever they're using, you can pick up pretty quickly. Yeah. I've had bad, I've had bad social skills and struggle networking into a job. Do you have any tips for good conversation and being likable beyond the class book? It's how to win friends and influence people. If you've not read that book, you must read it. You you can practice. So when we do our networking nights, you have to show up, you have to jump

03:30:00
around from table to table and just be upfront. Hey, I really need to work on this stuff. Will somebody work on it with me? Post on discord that you want to practice this stuff and people will join you as well. We literally have people that practice networking and practice like the, like the behavioral interviews every single day on discord last cohort. There are a group of people that did like code wars every day and coding challenges every day. There's also a group that like practice social skills and interviewing skills every day. You have to read how to win friends and influence people. You have to have the questions and the answers memorized on the bank. Like that, that's your baseline. And then everything else is practice from there on. Can we please see real life examples of when to use which loop syntax? Um, no, I mean, they're just different tools. You use them when you need them. If you, if you, you will find yourself in a situation where you need one versus the other. You'll probably use for loops most of the time,

03:31:00
and that's okay. If there's ever a scenario where that's not working or not doing what you need, then you'll use something else, but they're just tools on your tool belt. You don't need to, you don't like, you'll know when to use it. Um, because one won't be able to do what you need it to do. So yeah, don't, don't worry. Don't stress about like knowing when to use them in the right scenario. These are all different tools on your tool belt. And sometimes you're going to see a nail and be like, oh, I need to use a hammer. And sometimes you're going to see a screw and know you're going to need a screwdriver, right? And so it's about finding scenarios where you need them. Don't stress out about having to know all of the different possibilities. Just know that they exist. And if you need them, use them. All right, let's see here. Can we please go over how to set up local storage? I think once we get through APIs, we can look at it, but it's really just

03:32:00
the three commands that we did in the slides. There's really nothing else to it. So if you watch the local storage class, just review those slides in that class. It's really just the four commands, like add it, remove it, set, like that's it. There's nothing more to local storage than that. 100 devs Minecraft server. We used to have a Minecraft server. We ran it for a while. The problem was that like Minecraft is not free. And so I don't like having like things that are not free. And so I sunset at the Minecraft server because there was no free version of Minecraft. That's why we've been working on the CS go server because no matter who you are, like no matter like if you have like a toaster or for a computer, it'll work and it's free. So yeah, we have the CSGO server coming.

03:33:00
Let's do a few more of these Fido questions, then we'll take our break and when we come back, we're moving into arrays, folks. The engineers in my area mostly don't have Twitter, but I found a lot on LinkedIn would be a bad idea to connect with them there instead. You can reach out to them on LinkedIn. You'd have to send like a really nice message explaining why you're reaching out to them. It's definitely a lot easier and a little bit more organic to reach out with them on Twitter. So I would keep trying for folks local to your Twitter or local to the biggest city near your locality. And if there's nobody, like if you live in a really small town that's really far away from a big city, you should probably be looking for remote positions anyway. And so you should go the remote route instead of the local route. Cool.

03:34:00
Are there any live networking and live team project nights for the Ketchup Crew? Yeah, I mean, so even if you're part of the Ketchup Crew, you're still welcome to join our project nights. We have them mostly during class time, because that's when the bulk of people are available, but we'll do some over the weekend and stuff like that. But you can always create a thread in the catch up crew and ask if people are aware you're at and if they wanna work on those projects together. So we'll have some off hours project nights that other folks can join, but also don't be afraid to kind of just put out into the catch up crew channel that you wanna do that stuff together. Factor, hey, thank you for the gift of subs. Thank you for being here. All

03:35:00
right, let's see. I'm in the catch up crew starting to work on my portfolio. What do you recommend to put in there? If my HTML, CSS were created as baddies, you need to clean it up. Like it's okay to be like a baddie on the weekends, you know, but sometimes we gotta, we gotta not be so sloppy and clean things up. And so I would say you wanna definitely take the salon website and what was the other big one that we did? The salon and the restaurant website, clean those up and those should be the first two things your portfolio until we get to the more meatier projects specifically on the backend. Are we targeting mid-level roles instead of entry? I thought I remembered at the beginning of the cohort that mid-level has less applicants. I

03:36:00
think anything below senior is fair game, but we did even have folks last year that were brand new to coding that got senior roles. It's all a game to be played. If you play it well, you're gonna realize you have more opportunity than folks that have no idea how to play this game at all. So I don't think limiting yourself is a good place to start. We're gonna be serious about the rules we think we can apply to. Anything below senior I think is fair game. And remember, we're networking our way in. So a lot of times, even if the position's not a right fit, if you network your way in, then they might have other roles that are better fits for you. The whole point is we're talking to real living, breathing human beings that actually like us because we did the process right, so they're gonna be more accommodating than just clicking apply. Once we get a job, is a master's in CS worth it? If your company's paying for education, sure. If the

03:37:00
company ever says we'll pay for your bachelor's, we'll pay for your master's, Hell yeah, take it, who cares, it's free, right? But if they're not paying for it, then probably not. There are some like pretty cool things that are happening now in that space though. Like Georgia Tech has the fully online masters, which is pretty affordable. You build decent projects. And it's the same degree as they're like on campus. And I believe that's a top five CS school. So there are some like alternatives that are cropping up, But my voice in education is always if somebody's paying for it. Hell, yeah, otherwise the debt's probably not worth it How can I craft my story if my story is legitimately all over the place I haven't lived a very

03:38:00
linear life just pick the threads that you care to hold onto. So if you haven't had a very linear life, that's okay. You can omit things. You don't have to say everything that happened in your story. You can jump, you can have gaps. As long as the transition from one to the other sounds natural, nobody's really gonna ever dig to figure out like why. And so a lot of people stress about having gaps, but my students that craft their story right don't have to worry about that. And so it's okay to omit things and just have a naturally flowing story with the things that you want to share. That's okay. You can make that work too. Regarding resume, if we have a degree in a related field, aka data science, do we have it on the side or actually have a section discussing it in detail? I think education, like if you're following the template, where we have education is a good place to keep it on the template. No matter what you have, it should just go there. This

03:39:00
next question is definitely trolling. Instead of using Anki, I've been writing old-fashioned note cards. Does this still count as us doing Anki? Hell no. It was at this moment that he knew he fucked up. Old note cards or taking notes in general is the biggest waste of time you could ever ever ever do. The reason why Anki works is because there's an algorithm behind it that shows you the cards when you need to see them. If you're just writing flashcards, you're not actually using spaced repetition. It's just really hard to, as a human, know when you need to see certain stuff. And taking notes just doesn't work either. It's something that we use that feels like we're learning. It feels good. We feel like we're being active. We feel like we're being participatory, but it's actually really low cognitive effort. And we're not actually contributing to our learning. Yeah.

03:40:00
Cool. Can you speak about what we say to a hundred devs and interviews? A hundred devs is an agency that has a training program. That's it. You can say when you're talking in interviews, you don't really bring up a 100 devs, you say at my last opportunity and my last experience, if they dig, then you say, Oh, a hundred devs is an agency that has a training program. If they dig, you say, Oh yeah, I went through the training program and they say, Oh, what did you do there? Well, I worked with a lot of clients and they say, Oh, what kind of clients? Let me talk about the client that you worked with. So you remember everyone here has to get a paid client or a volunteer client or contribute to free software. And so if they dig, dig, dig, dig, you say, Oh, well, this is the client I worked this is the project I build, or this is the person I volunteered with, here's what I build, or here's the free software project you can see here are my commits, here's what I built, and that's it. But a lot of folks won't bring it up, they'll just say my last opportunity, my last experience, and most recruiters don't care, they're just trying to check some boxes and get you to the nerds. But we'll

03:41:00
practice that a lot as we kind of continue. All right, I think we got through a big chunk of this Lido, so pretty good the ones that we went through, let's go ahead and take our five minute break. And when we're done, our five minute break, we'll come back. We're gonna move into arrays and objects and then APIs. We got a lot of fun stuff left, folks. So let's go ahead and put five minutes on the clock here. All right, let's talk about arrays, folks. Let's talk about arrays. All right, what are arrays, chat? What are arrays? Toasters. Toasters. Exactly. They are toasters, magical Bill Gates toasters. And so I like to think about toasters when I think of a raise. Like I thought I was doing good in life until

03:42:00
I found out about Bill Gates toaster, right? So my toaster is pretty, pretty cool. It's a, it's a four slot toaster, right? Upgraded recently, four slot toaster. You can do bagels. You can do bread that turns it into toast. All the bells and whistles, normal toaster. So one element that holds four things. So one thing that holds four different things. And I can really put whatever the heck I want inside of that toaster. However, one day I was hanging out at Bill Gates house and I decided to like, you know, I was in their kitchen and I was like, what do they have in the freezer? They had like the fancy toaster strudels, not like the toaster strudels that norm, like normal folks can buy the toaster strudels that like get flown in from like the Netherlands and like are like really fancy. And so I was like, I got to have myself some of these fancy toaster strudel. I wasn't just going to do one or two. I was like, I'm going to fill up all four of the slots. And so I put the four toaster strudels in and then like right in front of my

03:43:00
eyes, like a new slot opened up. So I was like, wait a minute, there was four slots with the four fancy toaster strudels. And as I filled it up, the fifth slot magically appeared. So I'm like, wait a minute. I went back to the freezer. I got another toaster strudel. I put it in the slot and then another slot appeared. And then I realized that Bill Gates toaster magically creates a new slot every single time we fill it up. And so it's still one toaster, but it's holding all these different elements. And the cool thing is it could be not just toaster strudels, but bagels and toast and pizza rolls and hot pockets, like Bill Gates toaster took everything. So one element that held a bunch of other things, but still one entity. And so that's what I think about when I think about arrays, It's not my normal toaster, but Bill Gates toaster. Melody Dev, hey, thank you for the five to get the subs. Hope you're doing

03:44:00
well. Thank you for being here. So how many toaster strudels did you end up with? I got to around eight or nine and then they didn't have any more in their freezer. And I was thoroughly convinced in magic at that point forward. So yeah, I stopped around nine. All right, so arrays are really a data structure used to hold other things. and those other things that we're holding are in an ordered collection. Now, something really interesting about an array is that that ordered collection, we start counting at zero. We call that zero indexing, meaning that the first slot in the toaster is not number one, it is the zeroth slot on that toaster. You do zero, one, two, three, and so on. Now, the cool thing is once you get arrays, You also get all these other methods that work with the arrays for each map reduce all these wonderful things That you're putting into practice as you're doing

03:45:00
your code wars every day And there are multiple ways to create arrays. We can use both constructors literal notation and we'll see both so Here is the constructor way of creating an array But for when we're kind of working through stuff today, we'll probably just use literal notation meaning that we are literally creating an array using square brackets. Cool. Now, when we declare an array, we can declare it just like as an empty array like we see here. We can also declare it with stuff inside. So here you can see I'm assigning it the value of zebra boolean of true number 21. So any of the other data structures that we've learned about so far can go inside of arrays, including other arrays, including objects, anything that we can think about can go into our arrays. Nice. Now, the interesting thing about arrays is that we have to talk about elements and indexes, right? Elements and indexes. So here we can see four elements, New York City,

03:46:00
LA, Sydney, and London. However, if we're talking about the first element, we're talking about New York, but if we're talking about the zeroth index, we're also talking about New York. We gotta be careful of the difference between the word element and the word index. So New York is at the zeroth index, even though it is the first element in our array. Cool. Now, if we look at this lovely toaster here, what is the element at the second index? Yeah, Sydney, Sydney is the element at the second index. What element is at the first index?

03:47:00
Nice, LA. And what element is at the fourth index? What element is at the fourth index? Undefined, exactly. There is no fourth index. We have zero, one, two, three, but four would give us undefined because it doesn't exist yet. Nice, undefined. All right, now, not only can we use the index to add stuff to the array, we can also use the index to get stuff out of the array. So here we can see, all right, the zero index would give us zebra. The first index would give us undefined because there's nothing there. The second index would give us the Boolean of true. And the third index would give us the number of 21. So we can get stuff out of the array using the index.

03:48:00
We can also put stuff into the array using the index. So here I'm going to fill up that empty space with Bob. And so if we were to then console log the array again, we'd see that Bob is now part of the array and it doesn't have to be empty to put stuff in there. You can actually override any slot in the toaster by using its index. Another tricky thing to keep in mind is that you can overwrite whole arrays by assigning an array to a different array. So here I have an array called cars that has cars in it, nums, which has nums in it. If I do cars equals nums and I console log cars, well now I'm console logging all my numbers. So be careful, you can overwrite your whole array. All right. Arrays also come with a bunch of properties and methods. If you don't know what properties and methods are, don't worry, we're going to get to that when we get to objects. But length is a property here. And length will tell you how many elements are in your array. And

03:49:00
so it'll take a look at how many elements in your array and it'll give you the number of them back. So we look at this array here, we look at this array here. Once we have four slots, or sorry, four elements in this array. So if we took the length of new array, then we would get four. Well, new array.length gives us four. All right, let's look at some code here to practice this. We're gonna look at in paradise after paradise. In paradise after paradise is gonna pull that up Review in paradise after paradise If you're new and you need the materials for today They're on our discord exclamation point discord agreed to the rules and then in the following materials channel You'll see everything that we're using for today Cool. All right, here it is. Create a function that

03:50:00
takes in an array. If the first number is less than the last number alert high, if the first number is greater than the last number alert by, and if they're equal alert, we close in an hour. So you have to take in an array and then use the indexes to compare the numbers inside of the array. Let's put three minutes on the clock here. Three minutes. Get spicy with the time here a little bit. Three minutes and we're gonna go over it together. All right? So go ahead, give it the good old 100 devs try and then we're gonna go over it together. Give me the full function. Give me the wonderful alerts and then we're gonna go over it together. You got this.

03:51:00
How do I get VS code to fit my screen so I don't have to do multiple comments? So it's called wrapping or soft wrapping. And so you can go into your settings and turn it on. There's also a keyboard command depending on what operating system you're on. So if you're on Windows, it's Alt Z on Macs. I believe it's option Z or command Z, something like that. Not command Z, option Z, maybe. Option Z on Mac. Or you can just turn this, you can toggle the setting in the settings menu and view this code. Okay. Music just decided to stop. We hit the end of the playlist. What was that?

03:52:00
Online. It's funky, too. Okay, all right Spotify, I know we've been streaming for a while but we're still here. We're still online, we're still alive. Oh man, I wanted the funky stuff. Come on now.

03:53:00
Oh. I'm getting got by the playlist we are Don't words wrap automatically now it's it's the text editor does it for you. You might have already had yours turned on. All right, folks, come on back. Let's take a look at this together.

03:54:00
All right, create a function that takes in an array. All right, function is gonna take in an array. We're gonna look at the first number, the last number. I was gonna call this compare array. And we're gonna take in an array. So I'm just gonna use ARR short for array. And we're gonna do a conditional. if the first number is less than the last number. So we can do array. And how can I get the first number in an array? Zero, nice. Nice, that's always gonna give us the first number. And we're gonna say, if the first number is less than the last number. So less than, and how can I get the last number? What should the what should be the value inside of my square brackets me to get the last number?

03:55:00
Yeah length minus one Some of you your python is showing Length minus one. All right, so if we have the array dot length Uh that would tell us how many elements are left in the array And why would we have to do minus one? Where does that come from? Congrats, ALC. Yeah, because we start off at zero, exactly. Exact alt. We start off at zero. And so since we start off at zero, if there are four elements in the array, well, that means we're off by one. So we'd want to actually grab the number three. So four minus one would give us three. That would give us the last element in the array because our indexes start at zero and not one. All right, rate.length minus one, we give us the last element we can compare.

03:56:00
Is the first less than the last? And if it is, we want to alert high. Else if, let's see, if the first number is greater than the last number, so we'll kind of do the same thing, but we're gonna put the greater than in here. Cool. Now the first one is greater than the last one. We want to alert by. Cool. If it's not greater than or less than the only thing that it can be is equal. We can just do an else and we can alert. We close in an hour. Cool. There we go. We got our comparison. Let's just test it. Let's make sure it works. Let's do compare array. We're going to pass in an array. Let's pass in 1, 2, 3,

03:57:00
4, 5. In this case, we know that the first value is less than the last value. So we should expect it to alert high. Let's go ahead and open this in the browser. First try. Nice. Let's go ahead and flip flop it. Let's go ahead and do a five and one. And then let's also run it to where we have five and five, right? Five and five. So we We should see by, and then we close in an hour. Let's refresh this. By, we close in an hour. First try. Nope. Cool. So we got our comparison function working. We're able to use the values out of the array. Alrighty. Got it right. Hey, congrats. That's huge.

03:58:00
Why did you have to write r before array.length? Because we are accessing the array here. This stuff right here is going to be a number, basically. So if we look, there is five elements in our array. So array.length is actually five. We do five minus one, which gives us four. and then array four is gonna access the fourth index in the array. That's zero, one, two, three, four. That would give us the number one, right? So all that's happening inside the square brackets to give us a number, then we're using that number to access the array. That's why.

03:59:00
This is brand new to you that, hey, this is gonna be rough. If this is your first time seeing a raise, remember, this is something that we spent two, three classes on condensed into one quick review. So we make sure if you're still part of the ketchup crew that you go back, you watch this, you spend more time with it. If things aren't clicking, that's totally okay. Cool. All right, let's keep pushing folks. All right, let's talk about iterating through our arrays. All right, let's talk about iterating through our arrays. So here we have an array of best colors, green, blue, yellow, and black. And then I just have a regular old for loop here where I'm looping through and using I as my index to grab colors out of this array. And so if we were to actually run this, So what we're gonna see

04:00:00
is the very first time that this loops runs, I is zero. And so we're gonna wind up console logging what here the very first time. Green, exactly, because if I is zero, and we're gonna go ahead and grab the element that's in the zeroth index of best colors. So best colors, zero index, that is green. The green will be console logged first. Then we're gonna add one to I, and so now I is one. Is one less than best colors dot length? Best colors dot length is one, two, three, four, so best colors dot length is four. So is one less than four? Yes. So we're going to console log best colors one, which is

04:01:00
going to give us blue. And it would be two, which would give us yellow. And then it'll be three, which will give us black. And then it'll be at four. And since four is not less than four, it is the same, we stop. And so that's how we can console log all the colors in this array. We'll see green, then blue, then yellow, then black. Beautiful. I miss all the Power Ranger stuff. Me too, kangaroo, me too. All right. Also, built into arrays are methods that we can use that do the iteration as well, right? That can do the iteration as well. So here, I'm using foreach, which is a method built into arrays that enables us to loop through each element in the array, grabbing the element and the index as we loop through. I like to think of it as a goblin that is going and grabbing the element and the index every single time for each runs. Now,

04:02:00
just because the goblin is going and grabbing that stuff doesn't mean you actually need to use it. So the very first time for each runs, the goblin is gonna go ahead and grab green, zero, and actually the whole array. And so what we're going to do is we're going to pass green into x. We're going to pass 0 into i and we actually don't have a parameter for the array so nothing happens with it. And what we're going to want to do is this console logging x. This is the very first time this runs what gets console logged? Green, right? Green is going to get shown because the goblin went and grabbed green, 0 and the array and we only had a bucket for green and 0 the next time that this runs the goblin grabs blue and 1 so X is blue I Is 1 and we console log blue the console

04:03:00
and the goblin runs again. It grabs yellow and 2 It passes in yellow. So we console log yellow and we don't do anything with the number 2 We're done. Goblin runs for the last time, grabs black. And three, we don't actually do anything with three, but we do console log black. And so we see black printed to the console. So we had an original kind of for loop when we learned about loops that we could use here, where we had to keep our own count. We have to use that count as an index, or we can use the methods that are built into arrays to iterate through the elements that are in the array. Beautiful. All right, let's talk about some other methods that are built into arrays. Other things are gonna make our lives a little bit easier, maybe we'll have to do things with arrays that we don't have to code on our own. So here are a list of the best wrappers of 2020. On that list

04:04:00
was 6ix9ine, Polo G, and then actually 6ix9ine again, okay? And what we wanted to do is we wanted to shift 6-9 off of that list. And so when you shift, what you actually do is you remove something off the front of the array, right? You move something off the front of the array. So here we have shifted, right? We have shifted and we have lost 6-9 on the front, right? And so now if we were to console log best wrappers 2020, we'd have Polo G and 69 on the end. Cool. If we were to pop, that does the same thing as shift, but on the end. So shift removes something from the front, pop removes something from the back. And so with pop, we're gonna remove 69 off the end. The cool thing is whenever you pop, you can actually store in a variable if you want it to, but you are messing with the array,

04:05:00
meaning that you are literally removing it from the array. So when we console log best wrappers 2020 right now, we are left with polo g because we shift it 69 off the front we pop 69 off the back and we're just left with polo g Awesome So now let's say we wanted to add some wrappers to the best wrappers of 2020 What we're going to do here is we're going to use unshift And what unshift does is it takes something and puts it on the front of your array. So here I've unshifted Dylon onto the front of best wrappers 2020. And so if we look at best wrappers 2020, we have Dylon on the front and still having Polo G. So shift removes something off the front, pop removes something off the end, unshift puts something onto the front, and we have the same thing for the back, which is push. So, I'm going to push Dylon onto the back and now we have Dylon, Polo

04:06:00
G and Dylon on the end as well. So shift off the front, pop off the back, unshift put on the front and push put on the back. And so now we have Dylon, Polo G, Dylon in the best wrappers of 2020. And we're gonna use one other, one other method here, right? One other method here, and that's map. What's special about map? What does map do? What is special about map? It creates a new array, exactly. It creates a new array. It's a loop that grabs the element in the index and then creates a new array. I saw somebody saying, I can't understand map, I can't understand map.

04:07:00
Remember, we talked about in the beginning, a baby doesn't sit in the corner crying that they're never gonna learn how to walk. You gotta take that negative self-talk out your head. You can't let that show on your shoulders. It's not that you can't, it's that you have to put a little bit more work to get there, right? Just like a baby has to get up and fall, get up and fall. It's the same thing with learning how to code. We can't let those things creep into our brain that says you can't do it. Of course you can do it. Thousands and millions of other people have learned how to code. They've been in the exact same spot where they felt like they couldn't learn something and they do. It's just like a baby learns how to walk, you will learn how to use map. Cool. So map is a loop just like for each and it's going to, all right, it's gonna loop through, grab each element, but it's gonna create a new array. So we have a new array called best wrappers of all time. And so let's just put that array up here. We're gonna map through best wrappers of 2020.

04:08:00
And so the very first time we move through best wrappers of 2020, we grab Dylon, We pass it into X, and did we do anything with X? Did we do anything with X inside this map? Like look inside this map, did we do anything with X? No, we didn't, we didn't even use X. What's the only thing that this map does? The only thing that this map does is it returns a Dylon. That's it. It doesn't matter what, it does not matter what was in this best wrappers 2020 array, it's only gonna return Dylon. And how many times is map going to run? How many times is map going to run? Three times, exactly. Because if we look, map is running on best wrappers 2020, and there's three elements

04:09:00
inside of that array. So we know that map is going to run three times and the only thing that this map does is returns Dylon, right? This is an implicit return because it's an arrow function. And so best wrappers of all time is the new array that we are creating. And it just doesn't matter what was in best wrappers 2020, it's gonna return Dylon each time. The best wrappers of each of all time gets Dylon, then Dylon, and then Dylon, right? That map ran three times. It really didn't care what was in there because it only returns Dylon each time. And now best wrappers of all time has three Dylons in it. Right? Then we're going to unshift the Dylon, which is putting a Dylon onto the front. we are going to push a Dylon onto the back. And then if we were to console log best wrappers of

04:10:00
all time, we would have Dylon, Dylon, Dylon, Dylon, and Dylon. Cause they spit the hot fire. Cool. Thank you, thank you Thick, I appreciate that. When can map be used? Map can be used whenever you want to create a new array. So map will run once for each element in the array. it'll grab the element and the index. And instead of messing with the old array, it just puts your results into a new array. Alrighty, let's keep pushing here. Let's look at winter games, winter games.

04:11:00
All right, let's close this one up. Let's look at winter games here. Review, Winter Games is the name of the folder. There's a JavaScript file in here. Create a function that takes in an array of numbers. Return a new array containing every even number from the original array. Now there's a bonus. Let's say this is a bonus. Let's say this is a bonus. Do not use map or filter. Create a function that takes an array of numbers, return a new array containing every even number from the original array, and bonus if you can do it without map or a filter. Exactly, JM, we do need to create a variable or else it just goes nowhere. Exactly, it would just poof into thin air.

04:12:00
Cool, all right folks, let's do five minutes on the clock for this one. Take your five minutes, And then we're going to go over it together as far as you can give it the old 100 devs try And we're going to go over it together Why would you map over an array instead of having just make a new one because it already does that for you I feel caught up already that swamp like I can't take but no more no more Leah I'm caught up.

04:13:00
Ah, yeah, glad that makes sense, Jam. Got some dunzo's okay. I'm in the ketchup crew. This is where we're around where I left off. Do you recommend I leave here, maybe visit the VODs later and continue watching? Hey, I would keep watching. Get your first pass here. That way when you actually go

04:14:00
through the material at your own pace, it might trigger some recalling, some spaced repetition. Angry with the Dunzo, nice. Dun can't believe it. Yep, all the old lessons are on YouTube, yep, exclamation point YouTube. Can we review this with a bonus? It just makes it easier, honestly, because we don't have to create a new array. Should we do prep for these? Not while we're kind of doing the review class, but if you had like, this is like a code

04:15:00
wars question. Absolutely. You should use prep. We don't have enough time to do prep. Honestly. Prep should take around 15 minutes. When you're prepping an actual, like coding question at 10 to 15 minutes. It's a new struggle using prep for codewars, yeah, a little bit of extra work.

04:16:00
A little over a minute left, then we're going to go over it together and then we'll take our 10 minute break and then come back to objects. Let's go. What are you going to do when you're done tonight? Rivia said I got some new Game Boy Advance games. I got the analog pocket pro or sorry the analog pocket. So I got a bunch of like old Game Boy Advance games that I got And I got to put new batteries in them. So I think I'm gonna replace the batteries on them That's what I'll do and then plan out my week Advance Wars is up there at my favorite Pokemon a favorite Game

04:17:00
Boy Advance games to it's an amazing game All right, folks, let's come back through it. Are you into vintage games? Game Boy was like my main console growing up. So I'm getting back into like Game Boy and Game Boy Advance games right now. They're also easier for me to get into. I don't really, I don't have super amounts of like free time. And so, um, I really like game boy, like the analog pocket. I can just like pause the game where I'm at, put it to the side and pick it back up. If I'm like traveling somewhere or waiting, I can just like resume my game. So that's been really pretty cool. So I've been into that for a little while. All right, folks, let's take a look at this. All right.

04:18:00
Create a function that takes in an array of numbers. Let's start there. Function, takes an array of numbers. Only evens is what we'll call this one. And we know we're gonna take in an array of numbers. Return a new array containing every even number. So if I can't use map and I have to return an array of every even number, then I might as well go ahead and create a new array. let only evens equal, and it'll just be an empty array. And then what I can do is I can kind of just like loop through my array, array.forEach, and I can loop through each number. And if it's an even number, I can like push it to the array, right? So if it's even, I can push it to the array. Okay, so let's say I wanted to go ahead and create a 4-H here. So with 4-H, I can pop off the

04:19:00
element and the index, but do I really need the index here or can I just use the element? I just need the element, right? Let's just do the element. And I can go ahead and I can kind of do my curly braces here. And so now I'm going to grab the element each time. How can I tell if it is, if it is an even number? How can I tell if it's an even number? Yeah, we can use the mod restrict that we saw earlier tonight. So let's do another if here. We can do if E, whoop, If e mod two equals zero, we know it's even. And if it's even, what do we want to do? If it's even, what do we want to do?

04:20:00
We want to push it. So we would do only evens dot push, and we would push whatever the element currently is. And so that would go ahead and push an even number into our only evens. And then the last thing we need to do is return our new array. So we'll return only evens. I'm gonna name this function, so I do only evens finder. There we go. Cool, so we return only evens. And so if we were to call this again, let's call this only evens finder. And we were to pass in an array of one, two, three, four, five, six. We should get an array that has two, four, six inside of it, but not 135. And right now, since this is a return, this would poof into thin air and disappear. So I'm going to wrap this in a console log. Cool. All right. Let's save this and see if it works. And then we'll come back and see how

04:21:00
we did it. All right. Open up the HTML file. Open in the browser. Let's look at the inspector. Look at the console. And we have an array in the console, it's a good sign. And we can see that there's two, four, six. So it definitely worked, right? We only have, we have an array of numbers. It's just the even numbers, two, four, and six, which is exactly what we expected. So first try, let's take a look at this. It was to not use map or filter. So that's why I didn't use map or filter in this. And we created an array, just an empty array. I looped through the array that we passed into the function and I grabbed every number. So E here is just each element. I think maybe a better variable here would have been like num, just because it is a number each time. So I like num a little bit better here. And so I know I'm gonna grab the first num. So the very first time that this runs,

04:22:00
num is one, one mod two is not zero, so that doesn't work. Next time this runs, it's two. So two mod two does equal zero. And so we would push whatever num is, which is two. And so two went into our array. And so now our only evens array has the number two in it. Then three into num, three mod two does not equal zero. So we skip it. Then four, four mod two does equal zero. So then we would push four into the array. So now our array has two and four in it. And we're gonna do five. Remember, we see num is five, five mon two does not equal zero, so we skip it. Then the very last time this runs, num is six, six mon two does equal zero. We push six into our array, wind up with two, four, six sitting in that array. Then we return only evens, which is two, four, six. So it's as though this right here became the array of two,

04:23:00
four, six, and that's what got console logged, beautiful. Now, we could do this with map or filter. It's the same thing, but instead of having this array here, Instead of having this array here, we could just maybe swap this to, let's just say return. All right, let's get the return away from here. And then we just change this into a map. Right? And it still works. All right, it still works because now, map is gonna return a what? Map is gonna return

04:24:00
a what? but we would get rid of like this conditional. We would just do mod two equals zero, right? And then we could just return it or maybe filter here would probably be best. All right, we could filter it out. Cool. So let's keep the for loop here for now, for folks that are trying to do it. And this is one that, practice it, right? Practice it. Go ahead and try doing the other ways, and then if you get stuck, ask on Discord. But yeah, this is a pretty good example of kind of combining

04:25:00
everything that we've done so far in terms of knowing how to loop using foreach, knowing how to push, knowing how to use the conditional logic that we've seen so far, using modulus again, and passing an array into a function, understanding that we're returning an array, and so it would just return and poof into the ether, and so we can console log it to actually see it. Boom. All right, let's go ahead and take our break. We just got through our arrays. When we come back, we're moving into objects. And so I promised we'd take a 10 minute break this time. Let's take 10 minutes. If you're able to, please get up, move around, hydrate. You gotta get some light stretching in if possible. If you're kind of, if you are been paying attention in this whole time. Let your eyes focus on something that's not your screens, please. You get some light hand stretches in and let's put 10 minutes on the clock here. Chat,

04:26:00
what are objects? Everything. Interesting. Hmm. Try to get a little bit of milk, delicious. Everything well in JavaScript, everything. Yeah. But a collection of variables and functions, exactly a collection of variables and functions. However, when these variables are tied to our objects, we call them properties, what up, Kuber? And whenever the functions are tied to our objects, we call them methods. So they're just collections of variables and functions. We call them properties and methods. And in JavaScript, objects do the heavy lifting. All right, now, when we first start thinking about objects,

04:27:00
I really do like to think of like a physical object. And so I was to start off with a stopwatch. What are some of the attributes or properties of this stopwatch? And be careful, not their values, but the attributes or properties of this stopwatch in chat. Color is a good one. Brand, shape. Size. Model is a good one. Texture, oh, okay. All right, I like that, yeah. So we have a shape property of round, a color property of black, a brand property of AccuSplit, a model of Pro Survivor, a, ooh, I gotta show you something. Hold on, give me one second. One second. Verb.

04:28:00
Hold on. So y'all know I love my reality television. That's what I do. If I'm not coding, I'm not teaching, I'm watching trash television. but one series I really love that me and my wife watch is called Survivor and so y'all know I wear buffs constantly it's pretty much always in my hair so my wife got me this lovely this lovely buff Oh, I feel merch coming soon, I feel merch, I feel merch,

04:29:00
I feel merch a tingling, wearing as a tank top, that's what the blip account is for, the OnlyFans is for, yeah, so, since since we, since Survivor made me think of this. So yeah, there we go. Still waiting on 100 dev speedos. If we could, I would. All right. So we talked about some of the properties of it, shape, color, brand, model, even like minutes, seconds, milliseconds here. And then the, what are some behaviors or methods that are tied to this object. Pause the chat. Start, stop.

04:30:00
Mode, yep. Beep. Reset, nice. So there's some things that this stopwatch object it can do some of its behaviors or methods. So we see properties and methods tied to a real object. Well, when we create objects in JavaScript, we can also give them these properties and methods. So here I've created a stopwatch using literal notation. We'll see a constructor and class way of creating objects, but this is a constructor using regular old literal syntax, meaning I'm literally creating an object. And then I am giving it a current time property using what kind of notation? What type of notation am I using here to give it a current time property? Yeah, dot notation. And down here I'm using dot notation again to give it a method of tell time.

04:31:00
Now how do I know that this is a property, current time, and tell time is a method? What's the difference here? Why am I calling this a method and this a property? Yeah, one is a function, right? So when it's tied to a function, that's how we know it is a method. And down here, I'm calling the tell time method and I'm passing in stopwatch.currentTime as a property. So stopwatch.currentTime is actually 12. So I'm passing in 12 here, and then 12 is going in as the property, and so, sorry, as the parameter, so the current time is 12. And so we can use both the method and the property that we set on the object. Nice. Now, let's go ahead and open up the objects, listen

04:32:00
to your heart, please. Objects, listen to your heart. I'm gonna close this one, And we're going to go to objects, listen to your heart. There's a JavaScript file in here. JavaScript file in here. I want you to go ahead and create a stopwatch that has four properties and three methods. We're going to put two minutes on the clock for this one. This is one that we've done a lot. Using dot notation and literal object notation, no constructors or classes yet. Two minutes on the clock, go as fast as you can. stopwatch object four properties, three methods. You got this.

04:33:00
Yep, savored. Just get into objects now going strong How can I get this whole file if you go to our discord exclamation point discord Agree to the rules and there's a follow along materials channel that has the zip that has all of these files

04:34:00
How do you put objects in a database? We'll get to back end development soon and we'll be using MongoDB. So if you don't understand objects, you can use MongoDB to put your stuff into a database for sure the points not accumulating on sundays no you get channel points whenever we're live Oh, glad, hope the install went well. Stop watch that smell equals new. I love it. All right, folks, let's come together and do this one real quick. All right, let's go ahead and create the stopwatch using literal notation. So let stopwatch equal and we'll use the curly braces. Boom. We just literally created a stopwatch object. Let's

04:35:00
give it four properties. Stopwatch.color equals black. Stopwatch.shape equals round. I do double quotes here. I like single quotes. What about that single quotes life these days? All right, round, stopwatch dot, here's some of the ones we saw. Brand, I set it equal to Nike, and stopwatch dot, I like that one, it was smell, that was funny. New. All right, and then let's do some methods here. Let's do stopwatch dot start. which equals a function and we're going to make that function console.log

04:36:00
run great stopwatch dot stop that's going to be a function and we're just gonna tell it to console log, stop running. That's right, we're gonna leave it that way. And then stopwatch, what's, give me one more method. What's the last method? Give me another method here. You have a start, a stop, what's the last method I should use here? Let me give you some ideas here in chat. Alarm, morph, all right, morph. And we're gonna set that equal to a function and it's just gonna console log. It's morphin time. Cool, all right. So now we got our four, we got our four

04:37:00
properties, our three methods. If we were to open this in the browser, we should be able to access the stop, I gotta change that photo. We got to go ahead and do, we look for stopwatch. We can see that there is a stopwatch object that we created, right? If we ask for stopwatch.brand, we get Nike back. If we do stopwatch.start, we would just get the function back. If I want the function to run, what do I need? If I want the method to run, what do I need? Listen to your heart rate, it was pretty bad. We need the parentheses. All right, so if we hit that, ready? Three, two, one, let's hit it. Run.

04:38:00
All right, that method worked really well. Cool. All right, here we go. So our stopwatch looks good. We had four properties. We had three methods. And it looks like we're doing all right here. All right. Let's keep it moving. All right. What if we wanted to make a lot of objects? So if we wanted to make like a lot of objects, not like just one or two, like if we look at this, if we were using this type of notation, like this literal notation, and we were adding properties and methods. If we want to create another object, what do we have to do right now without knowing anything else? What would we do if we want to create a whole new object? Yeah, we would have to like copy and paste all of this, change it to like stopwatch two for all of these. And it would just, that code would not be what? The code would

04:39:00
not be what? It'd be really, really, yeah, it would not be dry at all because we're literally copying and pasting. What we want to do is we want to have something that can spit out a bunch of objects for us. So in the real world, we have like factories. So let's say we went to create a bunch of car objects. We could have a factory that spits out all of these cars. And so at first we're going to use constructors so we can spit out a bunch of objects. and then we're gonna put a little syntactical sugar on top and get classes. So let's take a look at this. Here is a constructor function. And what a constructor function enables us to do is to spit out objects. So it is a function whose job is to help us create objects, right? So if we look here, we have this lovely function and it starts off with a capital letter.

04:40:00
Does this capital letter do anything special to this function? Nope. Exactly Evan, it is just a convention. The capital is just a convention so that you and I both know that this is a constructor. And then inside the constructor, we have some really important bits. We have the this and all of these things that follow after the dots. What this is doing is making an object that has that property. Whatever object comes out of this make car constructor is going to have a property of make, a property of model, a property of color, a property of doors, a method of honk, and a method of lock. simply by being created by this constructor, we get these different properties and these different methods, and they're bound to

04:41:00
the object that is being spit out because of the this keyword. If we didn't have the this keyword, we couldn't create an object that has those properties and methods. So down here, we're gonna go ahead and use the new keyword along with our constructor, and we're gonna pass in the different values. So if we go ahead and we create a new Honda Civic We can go ahead and create Honda Civic equals new using the make car function. We're gonna pass in Honda Honda goes into car make Civic Goes in the car model Silver goes in the car color and four goes into number of doors so we wind up having right what we wind up having is is car make equaling Honda, our model equaling Civic, number of car color equals silver, number of doors equals four, and it also has these honk

04:42:00
and lock methods. So if we were to run this, like if we just put this into the inspector here, blink, zip, and I was to ask back for Honda Civic, we would see that Honda Civic is an object that came from the make car constructor. And we can see that it has a color property, a doors property, a make and model properties, but it also has two methods, hunk and lock. Cool. We can also take a look at the Tesla Roadster. If we ask for the Tesla Roadster back, we can see that it too is a car made from the make car constructor, but we can see that it's, that its values are different. The color is red. The make is Tesla. The model is Roadster. The doors is two instead of four, but it still has the same honk and lock methods as the others. Cool.

04:43:00
Put doggo on the camera, they're running around. All right. Now we talked about this other really, they ran, they ran into the other room, Russell would disappeared. if we notice something very interesting is that all of the cars that came out of our make car constructor right all of these cars we forgot to give them Bluetooth right we forgot to give them a Bluetooth right oh y'all y'all want the Dog, dog attacks. Let's see, hold on. Can I do, can I do community goals still?

04:44:00
Let's see. Channel points. Add a new community challenge. Simba on cam for Five seconds the mountain cam for five seconds goal amount One million channel points There you go We have a new community challenge that has just started This is if you want Simba on cam for five

04:45:00
seconds, the million channel points. Now back to our regularly scheduled programming already. I'm too busy to watch this now, but I wanted to come in and say that you're all about baddies and I'm proud of you all. I can't wait to watch this later. Hey, jazzy pants. I appreciate that coming in here and encouraging folks that have been here for hours. Hey, I appreciate that All right So we have these lovely constructors that are spitting out objects, however, we noticed when we made our Civic and our Roadster that they didn't have Bluetooth. And if I go ahead and I open up the inspector again, and I asked for Honda Civic,

04:46:00
I can see I get it back. If I ask for Tesla Roadster, I get it back. But if I ask for Tesla Roadster.Bluetooth, you can see that it's undefined. Like it doesn't have Bluetooth. Now, I could, if I wanted to, give Bluetooth just to the Tesla Roadster, right? Like if I was to go ahead and do Bluetooth equals true, well now the Tesla Roadster has Bluetooth. And if we were to look at its properties, we can see that now it has a Bluetooth property of true. But what if I wanted to have every single car that ever came out of our constructor have Bluetooth. Right? Right? What if I wanted to have every single, right, every single car

04:47:00
that came out of this constructor to have Bluetooth? What would I need to do? I would need, I would need to go to grandma, exactly. So what would I need to do? I need to go to grandma. And so what I could do is I could put something on what we call the prototype. So the way I think about this is, let's say I don't have a car. Since I don't have a car, I could ask my mom if they have a car. If my mom doesn't have a car, My mom could ask their mom my grandma for a car and their grandma has a car Well, I got a car right and so it's the same thing here with our objects Objects always check themselves before they wreck themselves meaning they're gonna look at themselves first right now Tesla Roadster has Bluetooth because we gave it Bluetooth. However Honda Civic doesn't

04:48:00
have Bluetooth right if the Honda Civic checks itself, it doesn't have Bluetooth So what the Honda Civic is going to do is it's going to go to its parent and its parent right now Its parent is what what is the parent of the Honda Civic? It's maker exactly the make car constructor exactly the Civic came out of the make car constructor so Honda Civic checks itself. Do I have Bluetooth? No. So then it goes up to the parent, which is the constructor. And it says, hey, do you have Bluetooth? No. And then it goes all the way up to the global object prototype, which is grandma. See if anything has Bluetooth. Since all these things struck out, then it just defaults to saying, you know what? I don't have Bluetooth. But what we can do, just like if we wanted to add Bluetooth to all of our cars,

04:49:00
back in the day, we used to have to do like a recall where all the cars would have to come back into the shop. We would add Bluetooth to them. We can think of it now as like over the air updates. Like we can update all of our cars at one time by extending the constructors prototype. So we can go ahead and do make car.prototype.Bluetooth equal true. Now, when I asked for HondaCivic.Bluetooth, I get true. And so what happened here? Let's think about it. Honda Civic checked itself. Did Honda Civic have a Bluetooth property? Like did itself have a Bluetooth property? Sympathy, hey, thank you for the raid. Hope you're doing well. Thank you for coming through. Hope you're streaming well. What were y'all up to? No, so right now we're in the middle of explaining prototypal

04:50:00
inheritance in JavaScript. If you don't know what we do, we do a free 30 week software engineering bootcamp, everything from having never touched code to everything you need to be employable. We do it all free and all live here on Twitch. We are underway with a seven, we're almost seven hours into our review class on just JavaScript, getting us ready to move into back-end web development with Node this upcoming week. So you joined us in a, in a, in a, in a doozy of a day, but glad you're here. Thank you for stopping by Raiders. With the hope your stream went well, hope everything's going well with you. All right. So since we added Bluetooth to our make car prototype, Honda Civic is going to check itself, like the object itself for Bluetooth. And does object itself like does Honda Civic have Bluetooth like does itself have Bluetooth?

04:51:00
No Honda Civic does not have Bluetooth. So it goes up the prototype chain It goes up the prototype chain, too right, goes up the prototype chain to its parent. And since we just added Bluetooth on the parent, well, now Honda Civic has Bluetooth. Dion A, welcome. Now it has Bluetooth, right? And so we are able to go up the prototype chain to look for these fallback sources of properties and methods. But now here's something tricky. We got to remember what we just did not too long ago. Tesla Roadster, when it checked itself, did it have Bluetooth?

04:52:00
No, it, well, sorry, sorry. Tesla Roadster, it did. Tesla Roadster already has Bluetooth. Let's look at these. Hold on, let's look at these. All right, let's look at these. Let's look at these. Ready, let's look. So let's look at Honda Civic. Is there a Bluetooth property on Honda Civic here at all? No. But when we look at Tesla Roadster, we gotta remember that on Tesla Roadster, we gave it its own Bluetooth property not that long ago. So Tesla Roadster has its own Bluetooth property, right? It has its own Bluetooth property. And so Tesla roaster checks itself, sees that it has Bluetooth and stops there. That's it. It's over. It's done. Right. Cause we added it earlier. Honda civic, however, checks itself. Doesn't see anything

04:53:00
and has to go up the prototype chain to get it. Right. So it's different. It's different. Tesla roaster already has it. Cause we added it one off. But Honda Civic is using that prototype chain to get it from the make car constructor Timothy you created a steam page You can't post links in chat, but if you go ahead and send me a whisper with it I'll spam it in our chat. Can we wish list it already? Like is that what you mean by the page like we can wish list it. That'd be cool Whisper me the thing and I'll spam it in chat if you're still here. All right. Is this inheritance? Yeah, this is how inheritance is handled, right? This is how it's handled in JavaScript. Even when we move on to classes, right? Even when we move on the classes, it's still this prototype underneath the hood. Let's look at something else interesting here.

04:54:00
So we know that there's a doors property on these. select teslaroadster.doors is two. Let's do something interesting. Let's do teslaroadster.doors.toString. So we can see that we were able to call a toString method on teslaroadster, right? We were able to call a toString method on teslaroadster. If we look at teslaroadster, does it have a toString method? No, did the make car constructor have a two string method? Did the make car constructor have a two string method? No, so whose house did we have to go all the way up to? We didn't have

04:55:00
it, our parent didn't have it, who do we have to go to? We had to go all the way to grandma's exactly. And in this case, the grandma is the global object prototype. So global object prototype. I'm sure it'll pop up on the MDN. Let's just do MDN here. There we go. So if we look at the global object prototypes, like all this stuff that's built in, in JavaScript, If we look, there's two string right here. So if we look, there's two string. So Tesla Roadster didn't have two string. The make car constructor didn't have two string. So we went all the way up to grandma's house, which in this case is the global object prototype. And then we had access to two string. Right? And

04:56:00
so since grandma has two string, We go all the way back down the prototype chain and our Tesla Roadster is able to use it Our Honda Civic is able to use it. They all get access to these fallback sources of properties and methods And so this is the beginnings of how inheritance is handled in JavaScript We definitely spend way more time on this in our individual classes way more time than we can spend during in just the review But that's the basics of it. And then we're gonna see And when we get to OOP, how we can utilize this mechanism to do our inheritance. But the idea here is that this is the basis of it. Cool. All right, let's go ahead and take a look at the objects street fighter work, please. So if you go ahead in the materials, if you're new from the raid and wanna join us on Discord, exclamation point Discord, If you agree to the rules, you'll see a follow along materials channel.

04:57:00
And when you go into that channel, you'll see the zip for today, which has all of our starter code. So objects, Street Fighter. I want you to please create a Street Fighter constructor that makes a fighting game character with four properties and three methods. So fighting game constructor, fighting game character with four properties and three methods. Let's put three minutes on the clock for this one. Because we got to do the constructor this time three minutes on the clock Give it your best 100 devs try and then we're going to go over it together. You got this go go deep

04:58:00
Will Async, Await, and Promise be part of the Subaru? No, because we haven't gotten to them in class yet. That'll be our class on Tuesday, and then Thursday's Node. Minute 30 left, folks.

04:59:00
Am I connected to an external display? Yeah, I have three monitors, my laptop screen and an iPad. Yeah, it's pretty beefy setup. up. Definitely not needed though. Are they gaming monitors? Yeah, I have one gaming monitor. that's a 4k uh 160 sorry the 4k 160 hertz monitor

05:00:00
another 4k and then just like a really crappy 1080p monitor but i don't pay for any of my stuff this is all pd funds Every bit of tech I have, I have not paid for it. I know I game on PC, so I can switch from my whole setup. I have three buttons I press and it switches from Mac to PC. I press three buttons and it all goes from PC to Mac with my entire screens and everything. All right, folks, come on back, come on back.

05:01:00
All right, let's create a Street Fighter constructor that makes a fighting game characters with four properties and three methods. So function, let's call it street fighter. And let's go ahead. And what are some properties that we want our street fighter to have? What are some properties? KVM life, exactly. Name. Let's see, name, health, speed, that's cool, and special move. There we go, all right, so let's set this up. this dot name equals

05:02:00
name this dot health equals health this dot speed equals speed and uh this dot special move equals special move cool How about some, uh, some methods here. What are some methods? Throw. I like that. this.throw equals function this.console.log cool what else taunt this

05:03:00
.taunt equals function Go ahead and do a console log. Let's use a template string here. You can't handle my, and then we're gonna throw in using a template string here. Special move. We wanna make sure we tie it to the special move that this object has, so this.specialMove. That's gonna give us the special move that whatever the object comes out of has. Cool, and one last one here. Fatality I don't Street Fighter folks you know what screw it but make some nerds mad right now get over here get

05:04:00
over here cool all right And let's go ahead and create, let's go ahead and create one of these Street Fighter objects. Let's say let Chun-Li equal new Street Fighter. we're gonna pass in name Chun-Li health 100 speed definitely 100 special move we looked this up last time what's the kick thing called again what's the kick thing called again. We looked this up last time. Spinning bird kick. There's like a fancier name for it though. Spinning

05:05:00
bird kick. All right. There we go. Cool. All right. And so We can save all this. Let's go ahead and open this in the browser. And let's go ahead and use the inspector console. Let's ask for Chun-Li back. And we can see that they are a Street Fighter character with a fatality method, a health property, a name, a special move, a speed, a taunt, and a throne. Let's go ahead and do Chun-Li.taunt. and you can't handle my spinning bird kick twirling avian foot punch already cool we got our constructor review in it's gonna chill the music here and with the newer versions of JavaScript

05:06:00
however when we got to ES6 and forward we got some syntactical sugar that went top of our constructors called classes. And so a lot of other languages have classes built into them. We added this sugar on top of our actual constructors to make it easier for folks that were joining us, make it easier for folks that were joining us. Hold on one second. Moshi's like, you've been streaming for too long.

05:07:00
All right, so we added this lovely syntactical sugar on top of our constructors to make it easier for folks coming from other languages, but underneath the hood it's still prototypal inheritance. Underneath the hood, it's still prototypal inheritance. Nothing's really changed. It's still the same deal. So the syntax is a little bit different, right? We use this class with the make car. We include our constructor inside of it. And then our methods don't require that this keyword, they're bound automatically. Cool. That sound is 20K, 20,000, 20,000. Chattel points for that sound, that's wild. All right. Let's go ahead, where are we at?

05:08:00
All right, we're pretty close to the top of the hour. Let's go ahead and take a look at our APIs and we're gonna take a break very soon. Actually, let's take a break a little bit early. Let's put five minutes on the clock. Five minutes on the clock. We will take our break. If you're able, please get up, move around, to hydrate when we come back from break. We're going to dive into API's welcome back. Welcome back. Let's get into this home stretch. How long have we been going for? Almost seven hours. Exactly. Let's go turn up. Hold on. 10 second warning. 10 second warning. Five seconds, four, three, two, one.

05:09:00
Hey, does this work? or else if, or else if, or else if, or else if. All right, everybody, let's

05:10:00
get into it. Boy, we've covered a lot so far, folks, a lot so far tonight in our seven hours of being live. So we, so far, let's recap. We started off with the basics of JavaScript. What is programming? what the heck is a program all the way from fundamentals like basic logic building up to basic logic gates to building out to a language that we can understand that is javascript we covered the big four the variables the functions the loops the conditionals we added arrays and objects on top and now we're getting to apis folks we're gonna get the apis we're gonna do a little OOP. We're gonna talk about the hunt. Feeling good, I'm feeling good. All right, not chat. What are APIs? What are APIs? Hey, a simple interface

05:11:00
for a complex action. Let's go. Just a simple interface for a complex action. That's all it is. Simple interface for a complex action. So let's think about a TV. I got a TV in front of me. I want to turn the TV off that's in front of me. All right. I want to turn off the TV that's in front of me. What can I do? What's the most primal thing I could do to turn off that television? I could smash the crap out of it. I could rip it off the wall, throw it on the ground, boom, TV is turned off. I could rip the power cord out the back, boom, turned off. Now is that the best way to turn off our televisions? Probably not. There's probably some better ways

05:12:00
to turn off our televisions. and apparently a lot of times televisions come with a remote and that remote has an interface and on that interface is a button that I can press to turn off my television. But think about all the complex stuff that has to happen when I press that button, right? The button press triggers an IR sensor. The IR sensor received by the television. Television has all this circuitry inside that hears that request, figures out what it needs to do, turns off the television, right? It's just an interface. The interface in this case is the remote that enables us to do some complex action. I also like to think of a menu at a restaurant. It's starting to lose my voice a little bit tonight. I think I'm gonna need to get some noodle soup after this. And so I'm thinking of some pho, right? So I'm gonna go to my favorite pho restaurant. when I sit down, they're going to give me a menu.

05:13:00
And from that menu, I can choose something and some complex action is going to happen in the kitchen. Right? Some complex action is going to happen in the kitchen. Now, do I know what's happening? Do I know how they're chopping the onions? Do I know how they're preparing the tofu? Do I know how much water they're using to make the noodles? Do I know how they're combining? I don't. I just say vegan pho and out comes a delicious bowl of soup. The thing that's happening in the interface, like the interface is the menu, but what's happening, that complex action, I have no control over, right? I just use my interface and a delicious bowl of soup comes my way. Deewa Vara Prasad. Hey, thank you for the hydration. Cheers to you. Mm-hmm, thank you. So the idea

05:14:00
here is that we have these interfaces that we can use, and when we use the interface, something complex happens. Just like I can look at the menu, point to Vegan Pho, and then all of these complex stuff happens in the kitchen, and I get a delicious bowl of soup back. Well, when we're using web APIs, a very similar thing is happening. We are making a request, that request is going to a server, and that server is responding with some information. And so just like I said, vegan pho, that request goes to the kitchen and I get a bowl of soup back, we are gonna use URLs as our interface. So instead of a menu or a remote, we're gonna use URLs. We can make requests to those URLs, which is where a server will hear that request. The server will do what it has to do to generate the response, and then it's gonna respond back to us. And typically, instead of sending us a bowl of soup as much as we would want, we're typically going to get an object back or a JavaScript object notation back.

05:15:00
And once we get that object back, we can parse it and play with it and make it do the things that we want to do with it. So APIs, simple interface that does something complex. The web APIs that we're using, instead of it being a menu or remote, it's a URL. We make a request to that URL, we get a response as JSON or objects back. So here is a quick example. We have this lovely fetch where we make a request to the dog CEO API, and then we get some data back. Let's go ahead and try this real quick. I'm gonna up my inspector here. Boom. And you can see that I got a lovely message back that includes a lovely dog photo and a status of success. Yeah, so I was able to use this URL to make a request. The server heard my request and sent a response. All this complex stuff had to happen on the server that I don't care

05:16:00
about, have no control over. They had to like hear my request. They had to go to the database to get a photo. They had to put together the object and then send it my way. And then what I was able to do was make sure I was dealing with JSON or an object basically. and then I was able to console log the response they sent me. That response got sent through data and I console logged the whole thing. So I was able to make a request to a URL, that server did a bunch of stuff on its end, sent me a response, and I'm able to use that response to do some cool stuff. And so let's go ahead and open up the dog photos starter code. The dog photos starter code here, and go ahead and close these two that we were working on before. Dog photos. Let's go ahead and open up objects and dog photos Main.js here. I'm gonna open up the HTML while I'm here as well beautiful All right so the prompt is get a dog

05:17:00
photo from the dog CEO API and Place the photo in the DOM cool let's go ahead and I'm gonna put three minutes on the clock for this one, three minutes on the clock. You're basically copying and pasting and then trying to get the return into the DOM. So go ahead and try it, three minutes, and we're gonna go over it together. You got this. Is this considered scraping? No, because we are making a request and they are giving us a response. Scraping would be like when you go to their site and you grab everything on your own. They've set this up so that when you press the button on your remote or you order off the menu, you get this stuff back. So it's not scraping because we're literally making the request to them and they're giving us data back scraping. You do it on your own. You don't they don't actually give you anything.

05:18:00
Can we set up servers with our own APIs? Oh boy, are you going to have a lot of fun this upcoming next two weeks. That's what we're going to do first is build our own API so that people can make a request to our servers and get data back. Remember, you can just use the example from the slides here. Let's go ahead and copy that. Start if you're having trouble starting. All you got to do point, yoink it.

05:19:00
Minute 20 left you got this push push push So we're building a Power Rangers API. We could real easy. We'll see people think the back end is this really big hard thing to do now. We're gonna make it easy I know it sounds like a big big thing to say, but it really is pretty pretty Pretty fun Think once you get to the back end It becomes a lot fun because you can you can build whatever the heck you want like having that power to build whatever you want is intoxicating

05:20:00
Mikey with the dunzo Super promotes the coding rocks. I agree. What's your favorite punk band? That's hard. I mean like right now like I mentioned last class or two class ago like right now. I'm really into idols. If you consider them like new punk, I mean, I grew up on Sex Pistols, but that's kind of generic. But yeah, I mean, I don't care. I like what I like. Sex Pistols was always my favorite growing up All right folks come on let's go ahead and do this Favorite concert you ever attended. Oh,

05:21:00
that's an interesting question. Uh There's a Wiz Khalifa concert. It was lit. It was like real lit. I was probably one of my favorite concert experiences that, and when I got to see five iron frenzy live, like that was like, uh, I was a spiritual moment in a basement. Yeah. Yeah. So I think most of it was definitely Wiz Khalifa and then like favorite, at like transcended reality was, yeah, Five Iron Frenzy in a basement in Boston, Cambridge. All right, let's go ahead and take a look at this together. I'm just gonna copy this while we're here, yoink. All right, get a photo from the dog CEO API and place the photo into the DOM. All right, so now we have our fetch. Our fetch is how we like press the button on

05:22:00
the remote. It's how we make the request, like pointing to the item on the menu, right? We're gonna make our fetch. That's gonna make the request to the server. The server will hear our request and hopefully responds with some information. Whatever they respond with, we're gonna parse as though it was JSON or JavaScript object notation. And then whatever they send us back will be passed into data. The very first thing I wanna do is just console log the data and see if we're getting anything back, right? See if we're getting anything back. Yep, no, this is the wrong one. Hold on, let me open up the right file. All right, here we go. Let's open this in the browser. Let's see if we're getting anything back first. All right, we did get an object back, which is great. We can see that it has a message property and a status property. And the message property, right? The message

05:23:00
property is actually an image. I know we can't see it. There we go. Is actually an image. So what I want to do is I want to be able to just grab the message so I can just grab the image. So let's go back here. And instead of console logging data, I'm going to use the message property here and do dot message. and do .message. All right, let's save this. Let's refresh. All right, now we're just getting the image, which is nice. Right, now we're getting just the image back, and just the image back. And now I can use that to my advantage. If I want, I can use that to be put into the DOM, because we want to place the photo into the DOM. Let's go ahead and take a look here. We do have an image already in the DOM. So let's go ahead and put the source for this image as whatever came

05:24:00
back from data.message. Let's go ahead and do that here in the JavaScript. So let's target the image, document.querySelector, and let's go ahead and do image, and then let's change the source of the image to whatever came back from the API, or whatever is in data.message. Cool. So that should grab the URL that we got back and plug it in as the source on the image that we already have in the DOM. And if we come back and refresh, daw, look at the little, the little doggo. Daw. Daw, he's a cutie patootie. Look at that. Daw. Oh Oh So

05:25:00
pretty oh my gosh, it's a pretty dog Turvurin I've never heard of that type of dog before, Turvurin, Turvurin, cool, really pretty, right? Wow. All right. So it's working. We're able to, each time we refresh, each time we refresh the page, right? Each time we refresh the page, we're making a new fetch. That request is going all the way to the dog CEO API. they're hearing our request and they're responding with a JSON object. We're able to parse through that JSON object, get what we want out of it, and use it to update our DOM with an image source. And that's why we're able to see the image in the DOM.

05:26:00
Cool. All righty Let's keep it moving folks. I'm gonna close some of these cuz we got a lot of tabs open Look at all these tabs we had open. Oh We've been putting it on work. Let's go turn up All right, we cut it some dog photos Now there's also like another step that we can take this which is where are the URL that we're passing Sometimes we're going to want to pass some extra bits of information along to the API provider, right? So with the dog CEO, it's dog CEO API. We just made a generic request like, Hey, we hit that one URL, give us something back. But with something like the cocktail database, we can ask for specific stuff back. So here I'm saying, Hey, I'm going to pass in a query parameter called S

05:27:00
with a the value of margarita. And so this is short for search. It's gonna enable us to get just margarita drinks back. And so the cool thing here is that a lot of times we're gonna have like a base URL. And then after the base URL, you're gonna put a question mark and then all your key value pairs, your query parameter value pairs. So S is the query parameter and then margarita is the value. So you could do S equals margarita. And then if you want to chain multiple query parameters, right, if you want to chain multiple query parameters, what do we put in between each query parameter value pair? How do we keep adding multiple query parameters? Yeah, we add an ampersand, just one though, just one. And so we could have S equals Margarita and day equals Saturday, right? Whatever they tell us to do, right? We'd have to read the documentation to know what query parameters they

05:28:00
accept. But once we know what query parameters they accept, we can build out our URLs so we can get those specific drinks back. All right. So let's take a look at this one real quick. Let's use this real quick here. We're gonna just grab this URL just so we can see. Yoink. I'm just going to go back to our dog CEO API here. We're going to put this up here and I'm just going to copy this just so that we have a clean one sitting here. And then I'm going to have the one that we're going to mess with here. All right. So instead of hard coding the URL here, I'm just going to use our variable from up top URL. And the cool thing is we can see that, all right, here's our question mark, which means everything that follows afterwards is a key value pair. So here we're saying S equals margarita. We can change this to be whatever the heck we want, because it accepts a lot of different drinks. I think we

05:29:00
saw whiskey was one. I think we saw that gin was one, a bunch of different stuff. And each time we do this, we're going to be able to get a different type of drink back. So let me get rid of the specialized stuff we have here. Let's just console log data and see what we are getting back when we hit the cocktail database. And the cool thing if you're working with this database that there is like non-alcoholic drinks too. So if you want that, you can use the non-alcoholic version as well. All right. So let's go ahead and go to our site here. Let's refresh. Bye-bye to this beautiful dog. And you can see that we are getting drinks back from the API. This always blows. Do you see how Fast this is it just blows my mind like this request Left my computer Went through a VPN from the VPN all the way to their server their server heard my request Generate the response responded to this Responded back to the VPN all the way to my computer and

05:30:00
then back here and it was like like a second Not even this blows my mind that this is how the internet works and it's so fast Right like this had to go to somebody else's server. I had to go to somebody else's server and back Right like that that just blows my mind every single time. I work with this. I'm just like what? Cool All right, so we got some stuff back we got some drinks back I got some drinks back and We can see that there is a drinks property, but that drinks property is a what? The drinks property is a what? It's an array. And then in that array, there are objects. And then in those objects, there are properties. So I just want to get the drink photo. Let's kind of do the same thing we just did, but this time instead of being cute dogs, it'll be pictures of drinks. So strdrinkthumb

05:31:00
is inside the drinks objects that are inside the drinks array. So what we can do here is we know that we're gonna get some data back and we know that there is a drinks property and that drinks property is an array. So I want the first object out of that array. So what should my index be if I want the first object out of that array? I'm not sponsored by NordVPN, Although hey Hit me up baby, come on make that deal come through I got you Do you not realize that we have 1500 people here on a Sunday for seven hours Pretty sure we'd use some VPNs This is all sponsored by Raid Shadow Legends, exactly.

05:32:00
I can't wait to get a Raid Shadow Legends sponsorship. I'm going to spam the crap out of it. That's all. It's going to be like all over the stream, like it's just going to be everywhere. I can't wait. Nah, I really don't like, I've turned down a lot of sponsorships. Like a lot of people want to sponsor the stream. I turn them down because if it ain't free, I don't really want to mention it So I turned down a lot of ones that weren't like acts like actually free. I Don't know. Maybe I'll sell it one of these days. But yeah, I don't like I don't like sharing stuff. That's not free So the reason why Microsoft has been so amazing to partner with is because they make so much of their stuff completely free So I really like that. That was pretty cool. Same thing with hash. No, they make it free Yeah, cool. All right, data.drinks.

05:33:00
We saw that drinks was an array. We saw there was a bunch of objects. I want the first object out of that array. And then we're gonna grab that. Let's do that. Let's just see if we get the object from doing this first. All right, let's refresh. Boom, we got the object here. So we got the first object that was in that drinks array. And then if we're looking at this object, we can see that there's a drink thumb, strdrinkthumb. Let's see if we can just grab that. So .strdrinkthumb. Cool, let's save this. Of course, bumpy. I love that there's people that come in and are like, this is still going? Like what? Yes,

05:34:00
it is. Let's go. Let's go. We in here. We online. We outside. All right. So now we're getting just the drink back. Well, just the image of the drink back, which is good. Let's go ahead and plug that into the DOM. So document.querySelector. Let's grab the image and let's set the source equal to this data.drinks.straDrinkThumb. Here we go, yeah. So data.drinks.straDrinkThumb, so that should be able to give us that drink. Let's go ahead and refresh. Boom. There we go. We're putting it into the dom. Look at us go. Woo. Look at that drink. Tasty. Beautiful. Alrighty. Let's keep it pushing folks. Got through some basic arrays. We made fetch

05:35:00
happen. But why do we use objects? Why do we need constructors? Why do we need classes? Like why do we need all this stuff? So we talked about objects, we learned how to use them, we're even using them when it comes to APIs, but why use objects at all? Like, what does this help us do? Ooh, I see a lot of really good reasons. Teamwork with others, organization of your code, better structure, easier to make changes, more reusable, all these things are really, really important. Teamwork, really important. Exactly. So let's talk a little bit about why. Last repetition. Hey, all right. All right. We've been paying attention to these past couple of classes. I like to see that. All right. So what if there was a system?

05:36:00
Nay, a paradigm. Nay, a set of rules that we all agreed upon To structure our code and this structure made it easier to add new stuff It made it easier to read through it was already coded Made it so that we were not afraid to make changes late at night Well, this is always your warning gonna see at the bottom of the slides What if there's a system a paradigm set of rules or agreed away structure to do it well

05:37:00
All right, object-oriented programming is that system that will make it so that we can add new stuff easier, make it read through what was already coded, enable it so that we're not afraid to make changes. Let's talk about it. These things that we're going to cover very briefly, we spent what, three or four classes three classes going through fully. So we're gonna go through this just as a point of review, but we literally have three classes on each of these really important four pillars of OOP. So we're gonna cover the review, but know that we've covered this across like three classes. So if you don't know what OOP is, you never used it, you wanna see some actual examples with like real

05:38:00
things that you could actually use it with, watch those classes, and then we're gonna be putting them back in the practice as we come back next week, because all this stuff actually becomes really handy dandy when we get to the back end. Cool. All righty. So we have this idea, right, that what if we wanted to fuse our data and our functionality into one object? Well, that's where encapsulation comes into play. the idea of encapsulation is to store all your functions and the data that they work on into one object. So far, a lot of the code that we saw today, very procedural, kind of our variables are all over the place, our functions are all over the place. We're not really sure if the functions are working on that data or if they're using some other type of data. Well, we can bring all of our variables and all of our functions into one spot. And when we do that, we are using

05:39:00
encapsulation, and so it really is just the fusing of our data and our functionality together, and the reason why we want to do that is because it helps us kind of handle right, because it helps us to. Helps us to keep our code more organized. We know where to go. We know where to make changes. We know what to see and we don't have to worry about making. kind of just simple mistakes. It keeps our code drier. A lot of different things that we get from using just that pure bit of encapsulation. Now, what if we also, once we have our stuff encapsulated, right? We've fused our data and functionality into one location. What if we wanted a way to kind of reduce the complexity of our code to hide unnecessary details? What if we wanted to implement things or work on our code without thinking about all the hidden complexity

05:40:00
behind that code? When I get in my car to drive, I don't want to have to think about how the engine is mixing the fuel ratio. I don't want to have to think about my intercoolers doing the job. I don't want to think about all these things when I sit in my car to drive. Same thing when I'm writing code. I wanna know that that bit of code that the other engineers worked on is doing its own thing. I'm not going to fuck it up and I can just focus on the code that I wanna write. This makes it so that our code is in more smaller, more manageable pieces and enables us to really only do stuff once. Once I've done something, I know that the other engineers can use it. I can take advantage of their other stuff. If I'm building a new car, somebody has already worked on an engine. I don't have to manufacture or make a new engine. I can just use the engine that they built in my car. So that's abstraction, right? Abstraction is this idea of hiding out the complex or unnecessary details. It makes it so that our code is more manageable and reusable and makes it so we only have to do

05:41:00
stuff once. Boom. With abstraction, we hide the details. We show the essentials, making our code more simple, predictable, manageable. What if we want to create new objects based on old ones? Right? So we put all this time into encapsulating our data, abstracting our data. What if we want to start creating new objects based on our old ones? Well, if we could do that, we're going to eliminate a bunch of redundant code. We don't have to copy and paste. We don't have to retype everything out. That eliminating of the redundant code would lead us to inheritance. So we've encapsulated our code. We've abstracted away the details. We're able to make new objects based on old objects. And then the last thing is that, what if we wanted some code that automatically works with a bunch of different objects that we created, right? What if we could write code once and have that work with all the objects that we've created? We don't have to have messy

05:42:00
conditionals or switch cases. The loops that we write would work. Each time we create a new object, we don't have to go and update some other area of our code. Well, that idea of having a bit of code that works automatically with a bunch of other different objects instead of conditionals or switch cases, well, that's polymorphism. So these four pillars come together to make the basis of object-oriented programming. We went across these over at least three different classes it took us to get through all these four pillars. So this two second two minute overview is not indicative of what we learn It's just to get those ideas fresh in our head again, but please if you have not watched our OOP classes They are here on YouTube. If you're watching on YouTube Go just a few classes below in the playlist You'll see that we have some wonderful classes that break down each one of these with details with examples You'll be able to see it understand it This is a hard concept for you to understand.

05:43:00
A lot of other tutorials suck at explaining it. We tried our best. Cool. So encapsulation, the process of storing your functions or your methods with their associated data, AKA the properties into one object. But what was the reason? Why would we need a compilation? Why would we need encapsulation? Why do we need to actually do this? Well, when we encapsulate our content, our properties and our methods together into one object, it makes it easier to add new stuff, like we know where to go to add it. It makes it easier to read through the code because we're not worried if like that function is working with that data or that data is working with that function. Since it's all encapsulated in one place, it's easier to read through what's already coded. And it makes it so we're not afraid to make changes when we update one value to another. We know that all the functions are using that data and we don't have to go chasing anything throughout the rest of our page. Abstraction enables us to hide the details

05:44:00
and show the essentials. But why? Why? Why would we need abstraction? Well, it breaks our code down into smaller more manageable pieces of code. If I'm an engineer working on a car, I can focus on the buttons on the steering wheel and not have to worry about the engine or the wheels or anything else. I can just focus on the steering wheel. I can just focus on the buttons on the steering wheel and that's it. I can make changes and still sleep at night with abstraction meaning that if I update the button on the steering wheel, I'm not worried about what's happening on the engine or what the windows are doing or what the tires are doing. I'm able to have my code broken out into smaller, more manageable pieces of code. And I'm not going to lose sleep at night because I know that they are abstracted away from each other. Inheritance enables us to make classes from another class to share a set of properties

05:45:00
and methods. But why would we need inheritance? Why is this one of the four pillars of object-oriented programming? Well, it helps us eliminate redundant code. If I wanted to make another car, I don't have to copy and paste an engine, a tires, doors, windows. I can just inherit all of those properties from a car making class that we saw earlier today with the make car class. Wonderful. Polymorphism is a piece of code that automatically works with all the different objects that we are creating. The cornerstone of how we build our applications going forward will be with objects. So it makes sense of all the code that we're using can work with all of those objects. And so this polymorphism, like why, why would we need it? Well, helps you avoid a lot of else, if else statements in switch cases. A lot of times when we update objects, we might have to go and update other bits of our code to work with them. With polymorphism, we don't, all the objects that we create will work with the code that we've written elsewhere. So

05:46:00
we're not keeping track of multiple things and it really does help support the other pillars of. OOP makes your code more reusable, supports the other pillars. Boom. It's like a five minute overview of what took us nine hours. Remember that took us nine hours to get through. So please, OOP is still very fresh. It's something that we spend a lot of time going over. So go back through our classes on that if you haven't gone to it yet. All of our contents on YouTube completely free without, it's not monetized, so there's no ads at all. Woo! No ads, baby. Let's go. Alrighty. Let's see. I want to cover the stuff we covered for the hunt as well. We're gonna skip the building out of the class using OOP. We did that in class. I feel comfortable skipping that. And I wanna cover the things that we did

05:47:00
more recently when it comes to the hunt. I think we'll get through this hunt stuff and then I feel like we'll be good and I think that'll be our review. All right. With the MIRN stack, we'll be learning data structures. Yeah, we'll be doing data structures. So we'll be doing data structures as we get towards the end of the program when we do more hunt. Yeah, more hunt related content. Yep. Cool. All righty. Don't end early. There was no end time. There's no way for us to end early. We didn't have an end time for this. So there's no ending early.

05:48:00
All right, let's talk about this stuff for the hunt. All right, so checklist. If you haven't already, go ahead and grab the checklist. The link is here in the slides. The checklist has everything that you need to be doing to get your professional life in order, right? Your professional life in order. So there is literally a checklist that you can follow that gives you real examples, that gives you exactly what you need to do for your portfolio, your resume, your LinkedIn, your AngelList, your GitHub, your Twitter, your cover letter, your cover email, your resume. Everything is on here that you need to get your professional life in order. Please, you have to have this in order. You need these things marinating. So by the time you're ready for the hunt, you're ready to go. All right. If you ever need the checklist, you can always hear in chat, do exclamation point checklist, right? Exclamation

05:49:00
point checklist, and that will give you the checklist that you would need to make sure you've done all these things. But we've assigned it for homework like three or four times now. You should have it done by now. Cool. All right. We talked about this idea of everything that we do going forward in terms of the hunt is about passing a sniff test. As folks coming out of a training program or a bootcamp, we all have a smell. And that smell is what causes a lot of folks to not get past the first rounds of their interviews. It causes them to not even get to the nerds where we can wow them with our technical acumen and the project that we sunk hundreds of hours into. And so a lot of things we talked about last week and we'll continue to talk about, are opening as many doors as possible and helping us get past this initial sniff test so that we can show

05:50:00
off what we know how to do. Cool. One of the things that we can do that's very, very easy to help with this sniff test is that you should be pushing code every single day. That means you should be doing your code wars, adding it to a file on your local machine, and then pushing that solution up to GitHub. And you push it every day So we can get those delicious, delicious green squares that when recruiters look at your GitHub profile, when hiring managers or folks on the team that might be interested in hiring, you look at your GitHub and they go to ask, does this person code and they see that you have a green square every single day for the past year, they're gonna be like, oh, this person codes, they do, right? And so that helps you get past that initial sniff test every day. Push your code every day, get one of those delicious green squares. All right. Talked about the most important thing you'll probably do in your whole entire career. It is a hit list. For folks that are joining us, that are using this review as

05:51:00
your first kind of, your first start into the 100 devs ecosystem, right? If this is your first start, one thing you wanna do is you wanna make sure that we are being targeted with our job hunt. We do not click apply. ever, ever, ever, ever, ever. We do not ever, ever click apply. And so the way that we get our jobs is by networking and getting recommended into our positions. The cornerstone of getting that recommendation of getting the referral into these jobs is your hit list. With your hit list, you're going to use the sheet. You can do exclamation point sheet here in chat. You'll notice that we have a new tab called hit list and here you're going to find the companies which you would like to apply to that have open positions that

05:52:00
fit your skill set and experience you're going to add those companies with the open positions to your hit list and then you're going to find folks that work at those companies that you can actually talk to. We're talking about 60 networked recommended applications where we get recommended into 60 opportunities. That's what you're signing up for. Not one, not two, not five, not 10, not 20, not 30, not 40, not 50, 60, where you found an opportunity. You added it to your hit list and then you found the recruiter, the engineering manager, the folks on the team, you reached out to them, you found a living, breathing human that you can talk to, that you had a coffee chat with, that you eventually asked for the referral. Once you get these referrals from the hiring manager, the person on

05:53:00
the team, the recruiter, whatever it is, you get these referrals, and that counts as one of your 60 networked applications. Now, the reason we do 60 is because you're going to have 10 that go absolutely horrible. Another 40 that's going to be real, real mid, like just, just okay. And then about 10 that'll go well. And out of those 10, you'll get one to two offers. So 60 network where a living human breathing person you've talked to has your resume has brought you into the process results in one to two offers. Remember folks, I've helped hundreds of folks get jobs, helped thousands of people learn how to code. The reason why you see some folks that say, oh, I applied and I never got a job or I submitted 500 applications and never got a job is because they did it wrong. If

05:54:00
we're networking our way into 60 opportunities and only getting one or two offers, there's no other way to do this. There's just not. Now, one person here or there might get lucky. One person here or there, their first interview is the one that lands the deal. That's great. They don't have the data that I have. Of folks that have gone from bootcamp into jobs over the past five plus years, I've been the numbers, we're networking our way into 60. So we get a chance at one to two opportunities, which means that when we go into this process, we go into it like warriors. It's called the hunt for a reason. That means we're going to have 58 that don't go our way. And one, the two that unlock a beautiful career for the rest of your life. I'll take those odds. It sounds like a lot cause it is, but you're talking about a job that that pays well, is in demand, has high growth, is constantly rated as one of the happiest jobs to have.

05:55:00
That's what we're shooting for, folks. I don't feel ready. Well, get ready then. We got the hunt coming up. And just don't ever click apply. All right, eventually we're going to talk about our high value applications where we've networked our way into 60 of these applications and 30 of them are going to have custom resume, custom cover letters, a custom story about why you're the best thing to slice bread and why you'd be amazing fit for the team, and we're going to have 10 premium apps. So 10 of those 60 networked applications, once we get in, we're going to do a lot of extra stuff. We're going to do, uh, uh, custom stuff. We're going to do tweets, blog posts, small, simple one to two day projects to show that, Hey, we could hit the ground running on this

05:56:00
team. The things that you're looking for, I, we already know how to do. And so those are our premium apps. We haven't really covered those too much yet, but know that that's coming. Uh, the 60 that we will get recommended into 30 will be high value. 10 will be premium and 20 will just be kind of like fodder. We want to have our first 20 or so interviews as like a way to get comfortable. Right, right, as a way to get comfortable to have our vomit moments, sorry, I shouldn't say that, to have our, our moments where things just go wrong with the companies that we really don't care about. So we haven't talked about that part of the strategy yet, but know that that's coming. You also have your 100 hours project to be thinking about. A project that you're going to sink 100 hours into. Right? It's, I hope you're starting to realize that it's not an accident that our folks have gotten hundreds of jobs from 100 devs. The fact that we

05:57:00
live up to our namesake because we're doing the work that other people won't do. Not only can we crush coding challenges because we've been doing a code wars every day for months. Not only do we have real clients that have paid us real money, not only do we have projects that we sunk hundreds of hours into, not only do we have projects where we worked as teams, not only do we have beautiful portfolios, GitHubs, resumes, all this comes together and we're running circles around every other person that tries to do what we came to do and will do. Cool. Once you get past that sniff test, I feel bad for our competition, me too. I feel real bad for them, but I don't because

05:58:00
the paths there, they just don't want to do it. It's a hard path. It's a lot of work. It's a lot of work. All right. Once, once we get the interview, once we get past that sniff test, uh, there's some things we've got to realize there's a process here. And that process has a lot of different things that could happen. Each company is wildly different, right? Each company is wildly different, but we get recommended into our roles, which often helps us pass typically the first round, which is like a phone screen or a behavioral. Uh, if you do have a behavioral round, they're going to ask you the traditional interview questions. Uh, what are your greatest strengths or your greatest weaknesses? Those types of questions. Then you might have around where you're asked, just like technical questions where you're talking about tech, talk about code, you're talking about things that you might come across on the job. You might have a take-home, which is like a coding challenge that you do on your own. You might have a whiteboarding challenge where you're literally on a whiteboard or you're literally live coding in front of

05:59:00
some other engineers. You might have in-persons again, nowadays, where you like go into the office and you have a couple of coding challenges back to back to back. They might even have like a wine and dine interview where they know you want to, they want you on the team. And so they take out the dinner, et cetera, et cetera. And then you have the offer. Now it's, each company does this process differently, but these are kind of the stages that you can think about that you might encounter. Cool. Now we talked about this last week, but once you get recommended your goal, Your job in that moment is to know every single thing about their process. If you've gotten this far, you've gotten past the initial sniff test, got past the initial sniff test, you have a technical or behavioral coming up, you have to know every single thing about their process. You're gonna go hard in the paint. You're gonna go on Glassdoor, GitHub,

06:00:00
blind. You're going to go wild looking for every detail you can find about their company and how they do their interviews, and you're going to go in prepared. You're going to ask the interviewer, hey, what type of interview am I walking into? Is it behavioral? Is it technical? Should I expect to do a coding challenge? Oh, what kind of coding challenge? Is there anything I should prep and any specific data structures, algorithms that I should know? You're going to know every single thing about the interview that you're going into. Don't go into your interviews like an accident, don't do it. There's no need to. You should not ever be nervous going into interview going. I don't know what to expect. No, you have asked them what to expect. And you know, before you go in, what you're gonna do that day. And then on top of it, you went hard looking up on the internet, every single thing about their process. If you look at our class on Thursday, I showed you very simply how we found parts of different companies processes, right? That's what you gotta do. Imagine if you do it and you figured out somebody's going to hand you an 80k plus check.

06:01:00
Cool. Now you've gotten recommended in, you know, what type of interview you're going into, there are some specific ways to prep the bank is one of our keys to success at a hundred devs, right? The bank is our keys to success. With the bank, we have hundreds of questions that we are going to have memorized. Hundreds. Hundreds. I feel like I'm going to get there and not know enough, everyone does. Every company does everything so differently that we show up, right? we show up and we got to learn on the job. So that's why the most important thing that we do at 100 devs is not learning to code, it's learning how to learn.

06:02:00
So that way when we show up in the job we have to learn all this new crap we've already been doing it. We've been doing it for months and that's why we run circles around other entry-level engineers. Other entry-level engineers didn't have to learn stuff that we had to learn as quickly as we had to learn it at the pace we had to learn it. And so they never committed to learning a process getting better at their active recall, their space repetition, even if they went through a four year degree program, they kind of went through it in four years. They could have went through that whole program not actually knowing how to learn. Well, guess what? You know how to learn. And so when you show up on that job, you won't know everything. Nobody ever does. You got the best engineer in the world. They're going to show up and have to do the exact same thing as you read the documentation, talk to other engineers, look at the style guide. How do they want me to code here? And you spend all that time that you learned how to learn to learn on the job and ramp up. Every engineer has a ramp up period, typically three to six months. Do you believe that an associate degree is enough to get a software engineering job?

06:03:00
Yes. I've helped hundreds of folks with zero degrees. Folks that did not complete high school get jobs software engineers. So yeah, definitely doable. Cool. All right. So here are the questions that we prepare. There are 22 behavioral questions that we prepare. And with these 22 behavioral questions, we're prepared for every question that comes at us during an interview. Not because every question is on this list, But because there's enough material that if you prepare these, right, there's enough material if you prepare these that you can pull together The answer you need in the moment And so the reason why we prepare these and we spend every single day for months reviewing them in Anki Is that when we're in these interviews it comes out like butter? smooth smooth smooth molasses flows from our mouths. It sounds like we've been doing this for years, but

06:04:00
really we went hard in the paint with Anki. Cool. We also have hundreds of technical questions. They're going to help us fill in the gaps for the things that we were not able to cover during class. There are even questions that ask your interviewer bank is the way. Time and time again, I have students that come back to me and they say, Leon, thank you for making me do the bank. Thank you for showing me to do the bank because it was the thing that helped them get through their interviews last cohort We saw almost half of our folks that got jobs did not have technical coding challenges as part of their interview So their interviews were show me your projects show me your hundred hours project Talk to me about the clients that you worked with. Let me ask you some technical questions, and then we destroyed it in every sense of the game because we've been reading and studying and doing technical questions for months. They're all part of the bank.

06:05:00
So half's not hard but it's a lot. And the bank is part of that start. So please start the bank. Maybe not today because we've been going for a long time. We've been going for almost eight hours. So maybe today's not the day to start the bank, but tomorrow you must start the bank. You need to get your Anki going. You need to do it every single day or you are wasting your time with this process. Just stop. It's not worth putting yourself the next three or four months. If you're not going to do what it takes to actually get the job and the bank is part of it. Cool. We have behavioral questions and behavioral questions. We have a strategy to get through them called car cause action result Cause action result for every single behavioral question You're going to give the cause like

06:06:00
what actually happened the action that you took to solve that problem and the result Why are you the best engineer on earth because of the thing that you did? Why are you a better engineer because of the result that you took? This is not a time to be humble. You want to talk your talk, present yourself in a positive light. Even if you're giving away something bad that happened, you want to show why you're a phenomenal engineer because that bad thing happened. We'd like to use words when we're talking about the cause, like at my last company, at my last opportunity. There are a lot of things that you can do that snitch on yourself, that shoot yourself in the foot out the gate. Most interviewers doing behavioral questions don't care. They have a list of questions to get through to make sure that you can go talk to the nerds You don't have to give everything away You can you can give just a very surface level answer and they want to dig they will dig Most of the time people will not dig

06:07:00
Are we filling in answers for the behavioral questions in Anki to memorize? Yes, you want a car a cause-action result for every single word that you have hard memorized due to Anki Because what that does is it does enable you to improvise if you get questions that were not on that list How long should it take you to enter all 300 things I've had students do it in like like a month They just kind of look around like if they're doing a couple cards every single day Like that's like 10 cards a day, right? You do 10 cards a day, that's 300 per month. Yeah. You can take two months to do it and then that's five cards a day, right? But the problem is that you start now. Folks that wait too long to start, it's just too much. Because we have to do other stuff too to get ready for the job as well. All right. Action, the step that you took, it must be a positive action, right? No time to be humble during the hunt what

06:08:00
actions you take to solve that cause and it must be positive Stop talking down about yourself during interviews. It does nothing to be humble during an interview It does nothing to put yourself down during an interview You're not gonna put yourself down and they're magically gonna think that you're better because of it. No, stop it. Knock it off Number one thing I see when my students are interviewing is they don't have the positive affirmations about themselves They don't talk positively about themselves during an interview they feel like by by by shielding some of the negativity They might get by saying. Oh, yeah, I messed this up there and no Stand tall talk your talk present yourself in a positive light because that's gonna help you get past a sniff test and talking to the nerds Result, why are you better because of it? How are you the best thing since sliced bread because of what action you took to solve that cause?

06:09:00
Now, if you're like, Leon, I have a really hard time coming up with cause, action, result. Well, I did it live during stream. We picked a random question on Thursday and I did it live so you can watch that back. We're also going to do a car class on Friday. So this Friday, we're going to walk through a bunch of questions. I'm going to do it live off the dome. I'm not prepping them at all. I'm going to show, I'm going to talk that talk, right? And then we're going to bring folks up to do it as well. And we're going to have a lot of fun with it. So this Friday, we're going to do a car class. So if you're like, I'm having trouble formulating these car answers, I got you on Friday. Technical questions that are on the bank. We use EU, explanation, use, example, where we give an explanation about something. We say where we might use it. and we give an example. So the one we did on Thursday was a CSS sprite. So a CSS sprite, what it is, is it's one image that's made up of a bunch of smaller image. The reason why we use it is because it reduces the number of network requests we have to make, which can speed up our application. An example is all the images that

06:10:00
you see on Amazon, like their logo, all the little flourishes. That's actually one image that they're just showing you different pieces of. There's only one request to Amazon server to load. For behavioral questions, you follow car, cause, action, result, the technical questions that are on Banky, explanation, use example for each one, and then we have our technical white boarding. Will the car class on Friday be recorded? Probably not. Most of the Friday classes aren't being recorded because we bring people up live. Yeah. Should I just quit my job because I'm never participating in interactive classes? No. Don't quit your job. Bad idea. My back's starting to hurt. My neck's hurting. I've

06:11:00
been sitting a little weird nobody give me a posture check today. I blame y'all Too late Evan too late Thank you, but all right technical whiteboarding let's finish this up and then we're gonna will end with a raid You're all too late so I'm spending your subways to your channel points. I appreciate the posture check swamp. Alright, technical whiteboarding. We talked about the skills behind whiteboarding, but particularly when we get the coding challenges, we want to have prep in mind parameters, returns, example pseudocode. When you are doing your daily code wars, at least 10 minutes should be spent on prep. Yes, for every code wars, I don't care if it's an AQ, I don't care if it's a 7Q, you should be spending like 10 minutes on prep, talking through all the parameters.

06:12:00
All right, a number is coming in, will only be a number, will always be a number, will ever be anything that's not a number, will be positive, will be negative, will it be floated or a whole number, right? Talk through your parameters, talk through your returns. All right, when am I returning back to you? I'm returning to you a string, will ever not be a string? Will there ever be something that gets in the way of returning that string? Right? Examples, write out your test cases. Code Wars gives you your test cases, get used to either walking through them or writing your own, and then break down your program that you're going to write in terms of your pseudocode. We talked earlier today about our pseudocode, write out the step-by-step, the things you think you're going to do to solve the problem and then solve. When you were in an actual interview, you should be spending like almost 15 minutes on prep because remember coding challenges test more than whether or not you can solve the challenge I have had folks that have solved the coding challenges but don't get anywhere near close to an

06:13:00
offer because remember you're testing not only can you code but do I want to work with you for the next two years you could 360 slam dunk the question but if you didn't communicate and collaborate the whole time you might not get to the next round so remember prep is more about getting you ready to solve the problem, but also to start off that communication, that collaboration. When you get stuck, if you had walked through PrEP, the interviewer is probably going to help you. Most interviewers are there to help. They want to see you be successful in the interview. They want somebody else that can be writing code alongside with them. So they're not working late nights anymore. A lot of companies are, they tell their interviewers to give hints if the person is communicating. So PrEP is the foundation of our coding challenges. We should be practicing it with every challenge that we do that when we're in an interview It comes out smooth like butter and we're gonna have lots of nights where we practice this together. So We're doing car on Friday, but we're gonna do prep classes. We're gonna do EU class We're gonna do a lot of this stuff where you can see this

06:14:00
process get better at it I know a lot of the members of the stream team have been doing prep practice Make sure that you're watching that stream team channel Because a lot of them are alumni or folks that have gone through different portions of the program before You can be learning a lot in the stream team streams if there are parts of the process that you're uncomfortable with at the moment. Cool. All right. Remember, we got a lot of homework this weekend. A lot of things that are due, that are coming up. For homework, just to bring it up while we're here, because we have quite a few things. I want you to read the, this is old. I want you to read the async await on the MDN. We have a YouTube video to watch. I want you to type out all the examples that you see in that video. And then do on the 19th, you should have started prepping the bank already.

06:15:00
You should have completed your professional links. You should have read the modern JavaScript through dinosaurs. Just get through it. I know it's difficult reading. Same thing with the crash course, just get through it. That way we're prepared for node next week. Wireframe for your 100 hours project due Tuesday, right? Right? Due Tuesday. Found the video to be very heavy. Yeah, I'm gonna give you some stuff that's light. I'm gonna give you some stuff that's heavy. You gotta get comfortable moving through more dense material because once you're on the job, there's not gonna be a nice, pretty example of it. There's not gonna be like really well write out, really well thought out documentation. A lot of times you're in the stuck and you got to figure it out. So you're going to notice, I'm going to give you some stuff that a little bit more complicated. I think a little bit more heady, a little bit more academic, just to get you comfortable. Remember, the big thing we're learning here is how to learn, how to deal with stuff that's not spoon fed so that when we're on the job, we can do it. All right,

06:16:00
folks, let's go ahead and end with a lovely raid. As always we have to do raids because you get those sweet sweet channel points Let's give somebody some some love some some follows if you haven't followed them already All right, we made it eight hours strong folks eight hours strong Thank you for putting in the work. Thank you for putting in the work. Thank you for putting in the work. This is an experience.

06:17:00
I hope that you can take this time to review. I hope this kind of jog some things in your memory. I hope this helps you get ready for the next part of our journey, which is back end web development. I hope you get some rest tonight and I will see you all on Tuesday. Let's do a raid. We're gonna raid Techie Girl and let's go ahead and open that up, boom. All right, so hope you had a wonderful rest of your day. Hope you have a good rest of your Sunday I will see you all on Tuesday they get into our lovely a sink await to get into our lovely back end with node I can't believe how far we've come in just a few months together Have a wonderful rest of your day folks Really really appreciate y'all. Give me some of your Sunday eight hours to work through this stuff. Let's go Let's keep the love and

06:18:00
positivity going if you haven't given the follows yet. Let's go ahead and give it We're going over the techie girl. Alright, peace everybody. Oh grace your day Each YouTube