JavaScript Programming - Full Course

Aug 15, 2023

JavaScript Programming - Full Course

Learn JavaScript from scratch by solving over a hundred different coding challenges. Go here for the interactive browser version: https://scrimba.com/learn/learnjavasc…

⭐️ Code ⭐️
Two versions:
🔗 Interactive version: https://scrimba.com/learn/learnjavasc…
🔗 GitHub repo: https://github.com/scrimba/learn-java…

✏️ Created by Per Harald Borgen. Per on Twitter: https://twitter.com/perborgen

00:00 Intro
03:41 Passenger counter app
04:39 Setting up file
07:42 Create variable
12:27 Mathematical operations
16:16 Reassigning \u0026 incrementing
19:23 Adding button
21:41 onclick event listener
25:10 Using functions to write less code
28:48 First function
29:34 Function that logs sum
32:25 Function that increments
34:23 Increment on clicks
36:35 Display count
41:53 Document Object Model
43:47 Display count w/ innerText
44:30 Create save button
46:40 What is string?
48:16 First string variable
52:00 Log greeting to console
53:18 Strings vs. Numbers
Render welcome message
Improve message w/ string concatenation
Use plus equal for count
Create save feature
Debugging online
Set count to 0
Recap
Variables practice
Concatenate strings
Incrementing \u0026 decrementing
Strings \u0026 numbers
Rendering error message
Calculator challenge

Build Blackjack Game
1:31:27 Build Blackjack game
1:32:27 Add firstCard, secondCard, \u0026 sum
1:33:23 If…else conditionals
1:39:08 if…else statement
1:42:05 if/else…if/else statement
1:45:28 if…else statement for our game
1:47:32 hasBlackJack variable
1:49:38 isAlive variable
1:51:27 Practice boolean conditions
1:54:55 Add message variable
1:58:20 Link stylesheet
2:00:56 Add basic styling
2:05:19 Make start button work
2:11:13 Display message
2:13:48 Display sum
2:19:36 Display cards
2:21:34 New card button
2:25:16 Add to sum when newCard is clicked
2:28:36 Rename startGame function
2:30:52 Solving our cards problem w/ array
2:34:12 Arrays intro
2:39:30 Array indexes
2:43:50 Arrays w/ multiple data types
2:46:12 Adding \u0026 removing items from arrays
2:50:35 Creating cards array
2:51:43 Push new card to array
2:53:05 Counting
2:57:10 Loops
3:00:37 For loops \u0026 arrays
3:04:23 First array-based for loop
3:05:55 For loops, arrays, \u0026 DOM
3:08:55 Use loop to render cards
3:11:16 Avoid hard-coding values
3:12:51 Returning values
3:17:54 Use function to set card values
3:21:05 Generating random numbers w/ Math.random()
3:25:24 Math.random() * 6
3:27:11 Flooring number w/ Math.floor()
3:28:40 Create dice
3:30:23 Completing dice function
3:33:04 Make getRandomCard() work
3:36:00 getRandomNumber function
3:39:06 Assign values in startGame function
3:41:52 Card feature is broken
3:42:54 Logical AND operator
3:46:39 Logical operators
3:48:47 logical OR operator
3:51:52 Only trigger newCard() if you’re allowed to
Object sneak peek
Objects
Create first object
Store player data
Methods on object
Recap
Objects \u0026 functions
if else
Loops \u0026 arrays
push, pop, unshift, shift challenge
Logical operators
Rock papers scissors
Sorting fruits

Build Chrome Extension
4:33:54 Build Chrome Extension
4:38:30 Add button \u0026 input tag
4:40:06 Style button \u0026 input tag
4:47:28 Make input button work w/ onclick
4:48:49 Refactor to addEventListener
4:51:11 addEventListener()
4:52:58 Refactoring
4:54:25 Create myLeads array \u0026 inputEl
4:56:49 Using let \u0026 const
5:00:11 Push to myLeads array
5:01:24 Push value from input field
5:03:56 Use for loop to log out leads
5:05:38 Create unordered list
5:07:39 Render leads in unordered list
5:11:22 How to render li elements w/ innerHTML
5:13:01 innerHTML
5:14:34 More innerHTML practice
5:16:26 Render li elements w/ innerHTML
5:17:37 Use createElement() \u0026 append() instead of innerHTML
5:21:16 Improving performance of our app
5:24:37 Create render function
5:26:40 Clear input field
5:28:47 Add a tag
5:35:53 Template strings
5:35:54 Write template string
5:36:28 Make template string more dynamic
5:37:12 Template strings on multiple lines
5:41:03 Refactor app to use template string
5:42:19 Style list
5:46:13 Preparing deployment
Deploying Chrome Extension
What is localStorage?
First localStorage
Storing arrays in localStorage
Save leads
Get leads
Truthy \u0026 falsy values
Guess expression: truthy or falsy?
Checking localStorage before rendering
Style delete button
Make delete button work
How function parameters can improve our code
Write function parameter
Functions w/ multiple params
Numbers as function params
Arguments vs Params
Arrays as params
Refactor renderLeads() to use parameter
Create tabBtn
Save tab url
Get current tab
Use Chrome API to get tab
Deploy final version
Recap
Practice
Outro

Content

0.07 -> This is a complete JavaScript course taught by the founder of Scrimba.com.

4.77 -> it is a great place to start your JavaScript journey.

7.51 -> Hi there freeCodeCampers, and welcome to this fun and practical introduction to JavaScript.

13.44 -> In this course, you are going to solve over 100 different coding challenges, you can do

18.76 -> that in two ways, either by cloning the GitHub repository, and then solving it locally on

23.55 -> your computer. Or you can head over to scrim block comm where there's an interactive version

28.39 -> of this course, so that you can solve the challenges directly in your browser up to

33.079 -> you what you want to do. Links are, of course, provided below. Now, there's no JavaScript

38.6 -> prerequisites for this course. But I do assume that you know, a little bit of HTML and CSS

43.36 -> as we're going to build a few projects that needs some HTML and CSS. But if you don't

48.98 -> care about that, you can skip those challenges if you want, no worries, whatever the reason

53.579 -> is that this course is actually a part we larger front end developer career path, which

58.41 -> we have a screen bar, which takes people from zero to hireable, as front end developers.

63.269 -> And of course, then HTML and CSS are also part of that. Now, if you have feedback for

69.13 -> me, feel free to reach out to me on twitter at Pierre borgan. And if you liked this video,

73.86 -> please give it a LIKE, I'd really appreciate that. And with that, good luck. Hey, good

81.75 -> old buddy, old pal, and welcome to learn JavaScript eight practical introduction. I am so excited

89.729 -> about teaching you this course. And who am I? Well, my name is Pierre. I'm the CEO of

93.97 -> scribble. And I'm also a front end developer who's taught a bunch of courses and over 100,000

98.509 -> students have enrolled in these courses, when I'm not coding My hobby is to take photography's

104.27 -> of myself posing in front of a fast course. But more about that later. What do I mean

110.299 -> by this mean? A Practical introduction? Well, it means that you will write the code, I'm

114.88 -> not going to write the code for you. I'm just going to show you how to do it after you've

118.369 -> given it a shot first, because the only way to learn how to code is to write a lot of

123.89 -> code. A clever man once said that, however, there are many ways to write code. There's

128.77 -> the old, boring, theoretical, I met school way of learning to code. And then there's

133.53 -> the much more fun way of learning to code where you actually build stuff from the get

137.61 -> go. And that's what you're going to do, we are going to start by building a subway passenger

142.67 -> counter so that you can count people on the subway in case that's one of your interests.

146.9 -> For me, it actually was frippery or it was my full time job when I was 19. So back in

151.67 -> the days, I would actually need the suction, then we are going to move on with a game the

156.5 -> blackjack game, oh, I just love gambling. So this is going to be so much fun. And then

162.57 -> at the end, we're going to be a bit more serious and build a tool for salespeople, namely,

167.45 -> a so called lead tracker. And what's so insane about this lead tracker is that it will be

173.28 -> a Chrome extension that will deploy to Chrome so that you can use it out in the wild or

178.57 -> send it off to a salesperson who might need such a tool, because it solves one of the

183.42 -> biggest problems salespeople have, which is to browse the web and collect and gather leads

189.2 -> that they later can reach out to. So when you have completed these three apps, you will

194.31 -> have the ultimate superpower in today's world, which is the power of knowing JavaScript is

200.12 -> a very low percentage of people in today's world who know JavaScript. So you will no

205.19 -> longer be like everyone else at that point. I am so ready to start this course. I hope

211.23 -> you are too. So let's just jump into it. You're very first exposure to JavaScript will come

220.07 -> through building a passenger counter app. Now you might ask yourself, Well, why on earth?

225.06 -> Should we build a passenger counter app? And what's the point of that? Well, you'd be surprised.

230.62 -> Because when I was 19, right around this time, my full time job was to count people who entered

235.091 -> the subway. So every day I would stand outside in the cold and be like, Oh, so there's 123456

242.24 -> people and bring the subway this morning, How interesting. And that I would bring up

246.12 -> my pen and paper and note down the number six, which at times was really cold. So it

251.23 -> would have been so much better if I had a little people counter app on my Nokia phone

255.82 -> so that I could just tap these buttons while having the phone in my pocket. But this was

260.43 -> long before I learned to code. So instead, we are going to build this passenger counter

264.53 -> app together so that you will learn the basics of JavaScript and so that you are prepared

269.75 -> in case you one time in the future have to stand outside in the cold counting people

274.54 -> who enter the subway.

279.18 -> Welcome to this lesson where we are going to take a look at the setup for our people

282.5 -> counter app. Here you can see we have a basic HTML structure which probably looks familiar

288.22 -> to you can see we have the HTML tag the head tag and inside of the body, we only have two

293.52 -> elements, the h1 and h2. That is the title up here and our counter element will To have

300.22 -> some styling in our index dot CSS, you can check it out here, this is just very basic

305.23 -> styling that we're not going to go through because you want to get into the JavaScript

308.38 -> as soon as possible. So the first thing we're going to do actually, is to simply inside

313.46 -> of our body tag, create a so called script tag, like that looks just like any other HTML

320.75 -> time, it just says script. Inside of here, we can actually write JavaScript. So inside

326.65 -> of this time, I'm going to write a pretty long JavaScript expression that you probably

330.37 -> find a little bit frightening. But don't worry about that you're not meant to really understand

334.39 -> it. In this lesson, I just want to demonstrate that this works. So I'm going to start by

338.34 -> writing documents, that refers to the HTML document itself. And then I'll do dot get

344.78 -> element, I ID and then open and close parentheses. Then inside of the parentheses, I'm going

353.34 -> to copy the ID of our h2 element. So here, we're saying, hey, HTML document, I

359.74 -> want to get

360.74 -> an element and I want to get it by its ID, and the ID, is this count out? So what do

366.28 -> you think we get as a reply? Well, we grab ahold of this element right here. And then

370.77 -> we can do dot inner text, set that equal to, for example, five, find out run this code,

379.03 -> you'll see that boom, we have changed the text on the inside of the h2 element, this

385.03 -> one right here, from zero to five, using JavaScript, and that opens up a whole world of opportunities,

392.53 -> it essentially gives us the power to breathe life into our application and turn it into

397.84 -> a real world product that solves problems for people. That's why this is so cool to

403.24 -> learn. However, we are not going to write our JavaScript this way. Here, it's kind of

407.93 -> an amateurish way to do it. But we rather want to do is create an index.js file like

413.21 -> that. Here is our index.js file, it's currently empty. What I'm going to do is copy this line

419.83 -> here, then paste it into the index.js file.

424.889 -> And now

425.889 -> out, add an attribute to my script tag called SRC, which is short for source. And then inside

434.66 -> of here, I'm just going to write index dot j. s, we are in the HTML file, and the JavaScript

439.97 -> file is in the same folder. So I don't need to navigate into any folder or typing a complicated

444.639 -> path here, stripe the name of the file. If we now run this code, again, you can see that

449.471 -> yes, it still works. So now we have a proper setup for our app, and we are ready to get

455.51 -> started building our people counter. Let's move on. So today is actually a really important

464.93 -> day in your life, because you're going to create your first lines of JavaScript. And

468.98 -> that is just such a powerful thing to do. Because you take the first step into a world

475.15 -> of opportunities with different shapes your life. So in a year, you might want to celebrate

479.8 -> this day as the anniversary the day you met JavaScript and changed your life for the better.

486.169 -> Anyway, you're going to write it's not this long one right here, it's a little bit too

490.96 -> difficult. At the moment, I'm actually going to add a double slash in front of it like

494.81 -> that. And you can see that grayed out, it means the JavaScript will ignore this, since

499.84 -> this is now a code comment, not real code. So if we run the code here in the browser,

506.121 -> we can see that now we are not modifying the h2 tag anymore. So we are ready here down

513.01 -> at line three to write our first lines of code. Now, let's think a little bit. What

518.19 -> do we need actually, to build this subway passenger counter app? Well, the first thing

523.33 -> we need is some way to store the count. And that's a natural job for JavaScript, because

529.47 -> it's kind of like the data we need to store. And when you need to store data, you need

533.44 -> to create so called variables to store the data in, and I'm now going to create a variable

538.5 -> called count. And the way we do that is we write let count equal zero. Now we have a

546.22 -> variable called count. And that holds a tiny piece of data, namely, the number zero. And

550.07 -> the way you can read this in English, it's actually let count be zero. So really natural.

558.53 -> And let's actually try and verify that actually, our count variable does indeed equal zero,

564 -> we can do that by using a tool that every single developer uses every single day. It's

568.91 -> called console dot log, then open and close parentheses. And inside of these parentheses,

574.82 -> you can put almost whatever you want. And in our case, we are going to put this count

579.76 -> variable here. We now run the code. You can see that down in the console. At the bottom,

585.2 -> we printed out the number zero, and the console is something that the browser provides us

590.23 -> with. It's there mainly for debugging purposes for checking our code, like we're doing here,

595.66 -> verifying that actually yeah, I want to take a look at at count on and print that out to

599.45 -> the controller. See my own eyes that it is what I think it is. And indeed it was. And

605.19 -> this console you see here is Rambus implementation of the console. If you want to check out the

609.66 -> real world console in the Chrome browser, you can, for example, head over to google.com,

613.88 -> or any page basically, and then right click and choose the inspect option, you click that,

620 -> it'll open up this tool called developer tools, shows you a bunch of HTML. As for now, we're

626.07 -> not going to worry about that, instead, just click on the console option, that'll open

630.57 -> up a blank console, where you actually in addition to printing out stuff, which we did

634.93 -> down here in the script console, can write JavaScript as well. So if you want to write

639.529 -> let count equals five, and then hit enter, then write console, log and then pass in count

644.99 -> in the parentheses, and then hit enter, you'll see that it'll log out five as well. So the

650.25 -> console is available to you in all browsers. And it's a tool that developers use every

654.21 -> single day. So I'm really happy that you've learned about it this early on. Now I actually

659.24 -> have a challenge for you, I want you to do two things. First, you're going to create

663.92 -> a variable called my H and then set its value to your H, and then log the my h variable

671.31 -> to the console. So go ahead and do this right now. And then I will show you how to do it

675.59 -> as well, when you come back. Okay, hopefully, that went well, let's do it together, let

685.7 -> my age, I happen to be 35 at the moment, then console, log out my age, I'll do console dot

692.58 -> log, open and close parentheses, my age, we run this code. Now we are printing out both

700.41 -> account and also my age. So we have verified that our variables indeed work as expected.

707.79 -> Before we move on, there's one thing I want to show you. And that is to take this line

711.7 -> console logging of my age, and place

713.78 -> it above the my age variable declaration. So now we try to console up my age before

719.8 -> we define it, since JavaScript starts reading at the top and works its way downwards. So

725.68 -> what do you think then will happen if I now remove these other console logs, and only

729.99 -> keep the My Aged console log?

732.11 -> Let's take a guess.

733.839 -> Well, what happens is that we get a reference error cannot access my age before initialization.

741.59 -> So JavaScript actually understands what we're trying to do. And we're actually referencing

745.61 -> your value before it has been initialized. And that simply doesn't work. So now that

751.36 -> you are aware of that, let's move on. Okay, so let's return back to our count variable,

759.86 -> learn some more advanced concepts, which is that you can actually use JavaScript kind

763.93 -> of as a calculator. So instead of just writing left count equals five, you can do let count

769.93 -> equals five plus seven, for example. And when you run that code, you will see 12 in the

774.61 -> console, you can do minus, of course, that'll result in minus two in the control or given

779.7 -> divide, that'll be 0.71, a bunch of numbers after that. And of course, multiply gives

785.36 -> us 35. So there's a lot of mathematical operations built into JavaScript. And you're not gonna

790.24 -> learn about all of them now, because now instead of just hard coding raw numbers, let's try

795.501 -> to use variables here instead. Because oftentimes, you won't see this kind of operation, you'll

800.08 -> normally see numbers represented as variables in real world code bases. So removing this

806.36 -> right here, for example, let first batch equals five. So this was the batch of people that

816.08 -> first enter the subway wagon, and instead of hard coding five here yet again, we're

820.24 -> just going to do count equals first box. Well, what do you think will be logged out here,

825.58 -> then?

826.58 -> quite correctly, it's five. Because first matches five count is set to the same as five.

832.43 -> And perhaps there was another batch as well let second max group of people that entered

838.31 -> just before the doors closed, maybe that was seven people, well, then we can do. count

845.22 -> equals first batch plus second batch. Yes, this works well. So this is a much more common

850.48 -> thing to see in JavaScript that a variable is set to the value of, for example, two other

855.399 -> variables added together. Now, I want to comment out this, like that, if you're wondering how

860.41 -> I did that magic have the alt multiple lines at once, I did simply command plus k plus

866.88 -> C, or replacing this with Ctrl if you're on a Windows machine, because what I want to

872.33 -> do now I want to gather this code up here. And then I want to give you eight three parts

878.12 -> challenge, where you are going to convert your age into dog years. So first, create

883.89 -> two variables my age and human dog ratio, that is the ratio between human ears and dog

890.149 -> ears. And for the sake of simplicity, we're going to say that one human year is about

894.649 -> seven dog years. Now the calculation is actually a little bit more complicated than that, but

899.25 -> that's not bad. And then the important thing here is learning. So set, then the human dog

903.589 -> ratio to seven, then multiply the two variables together and store the result in my dog age.

911.29 -> Finally, log my dog age to the console, this is great practice, it's important to build

916.54 -> up your muscle memory. So go ahead and do this right now. And then return back to the

920.26 -> screencast, when you want to see how I solved that as well. Okay, hopefully that went well.

929.3 -> Now let's do it together, remove the consoles, we can get some more space here. And we'll

934.579 -> start with my H, which still is 35. And we'll do a human dog ratio. And that should be seven.

945.09 -> Finally, the my dog age should be my age, multiplied with human dog ratio. Let's verify

955.24 -> that this works by logging out my dogs in the court, and yes, we can see in the console,

962.079 -> we get 245 my god, I would be an old dog if I was really god. I'm human actually. So let's

971.45 -> move on. Okay, so let's return back to our count example. Now you've learned how to initialize

981.01 -> a variable and even how to do mathematical operations on it both with hard coded numbers

985.67 -> and with other variables if we need that. And that's all great. However, up until now,

991 -> we've just been working on the initialization or the so called assignment of the variable.

996.67 -> What if you want to reassign it or in plain English, if you want to change the variable?

1002.14 -> Well, then you can do that, for example, down here on line five, just to count equals three.

1006.97 -> And if we now run the code, you can see that we log out three as opposed to five, because

1011.74 -> JavaScript starts from the top and runs down and uses the latest value it can find for

1017.26 -> any variable defined with the let keyword. Now there are other types of variables that

1022.67 -> you can't reassign like this, but we'll get to that later. As for now, we're just going

1027.009 -> to work with the let. And you can do this as many times as you want. If I want to change

1031.769 -> it even further down down to one, you can see now that JavaScript is only taking into

1036.039 -> account the line seven reassignment of the count variable. So this is all good. But it

1041.709 -> doesn't really help us if we want to increment our people entered count with one every time

1047.039 -> we for example, click a button, what we then want to do is something like count as one,

1051.94 -> because we want to take the current count, keep track of how many we've counted up until

1056.32 -> now and then just increment with one. The way to do that is actually by simply doing

1062.029 -> like this. This might look a little bit weird, since we have count on both sides of the equal

1068.85 -> mark. And probably you've learned at school that the left and right hand side of the equal

1073.789 -> Mark should be completely equal in mathematics. That's not how it works in JavaScript. Here

1079.86 -> we are assigning this variable to take on this value. First, you want to calculate the

1085.039 -> value and the value is this point five plus one will then count now will be equal to six.

1093.49 -> Let's run this code and see that it works. Yes. And let's say we want it to incremented

1098.629 -> by two, then we do two and now it's seven because five plus two is seven, do the same

1105.909 -> thing again. This time we can increment This was 10. Now we're at 17. And minus that was

1112.22 -> two again, and then we're down at 15. I think you get the point. Now I have a challenge

1117.59 -> for you. Okay, so you are to create a variable

1120.999 -> bonus points. So this could, for example, be a game where your bonus points goes up

1124.82 -> and down. And I want you to initialize it as 50 and then increase it to 100, decrease

1130.34 -> it down to 25. And then finally increase it up to 70 again, and you're to use the same

1135.289 -> technique that we use here with account where you reassign the variable to the old value

1140.989 -> of the variable and then adding or subtracting the value. And I want you to console log the

1146.289 -> value after each step. So go ahead and do this right now. And then I will show you the

1150.619 -> solution as well.

1154.009 -> Okay, hopefully this went well. Let's do this together. We'll start with let bonus points

1163.269 -> be 15. So logging it out. And then we're going to do bonus points equals bonus points. 50

1171.869 -> because we want to get to 100. Again, I'm soloing it Next up, bonus points equals bonus

1177.909 -> points, minus 75 because we want to get down to 25 logging it out again. Finally, bonus

1186.049 -> points equals bonus points. Now we need to increase it with 45 to get to 70. Let's comment

1194.18 -> out this code up here and run the code bring up the console and yes 50 125 70 Great job.

1201.799 -> Let's move on. Okay, now you know enough JavaScript for us to move on to the HTML and build the

1211.649 -> interface for our app. And it's not a lot of interface, it's to begin with just a button.

1219.509 -> And later down the line, we're going to create another button. But it has to be written.

1224.19 -> And you are going to do that. So I want you to follow these instructions, you're to create

1228.69 -> an increment button that has the text of the button with the ID of increment dash btn.

1236.08 -> So go ahead and do this right now.

1237.95 -> Okay,

1238.95 -> hopefully that went well. Now, let's do together. But then I'll create the closing tag inside

1248.85 -> of here. All right, increment cowritten. counter, I think increment is more of a technically

1254.46 -> descriptive words. So let's use an ID increment dash btn. Like that, if we run this code,

1264.07 -> you will see yes, we indeed have this button. And that is already styled How convenient.

1268.99 -> Let's check out the CSS for that we have a general styling for buttons, which are reused

1274.759 -> across both of our buttons. This is their using the button selector, and then our increment

1279.22 -> button. And our Save button has a specific background, each of them their dark red and

1284.509 -> dark green. Great job doing this. Now the question is, how do we make this button interactive,

1289.94 -> because right now, nothing happens if I click it? Well, in the next lecture, we'll go through

1295.47 -> exactly how to do that. Okay, so now we're going to put the different pieces in this

1304.559 -> puzzle together, and also add a whole new piece. And in order to free up some space

1309.35 -> in our JavaScript file error, let's just remove this previous exercise and actually write

1313.869 -> out in pseudocode, the procedures that we need to do in order to make this work. So

1319.129 -> first, know that we need to store the count somewhere. And we know that we want to initialize

1323.34 -> it as zero. And then as I said in the previous lesson, we need to kind of listen for clicks

1328.889 -> on this button here. When it's clicked, we need to increment our count. Then finally,

1335.58 -> which we aren't going to do just yet. But I just want to write that procedure out as

1338.639 -> well, Joe, do you know what to expect? We need to change the count del, this paragraph

1346.34 -> right here in the HTML reflect the new count. So we know how to initialize the count to

1354.6 -> zero. And we know how to increment the count variable. So to achieve these first three

1359.44 -> needs to do this task that is listening for clicks on the increment button. And that can

1363.95 -> be done in a multitude of ways. The easiest one is simply in the HTML,

1369.869 -> defining an on click event listener, you simply write on click equals, and then something

1376.659 -> in between quotes. So this is an attribute and the HTML, just like the ID is an attribute

1383.2 -> as well.

1384.34 -> Inside of here, you write the function that you want to be triggered when the button is

1389.11 -> clicked. So I'm gonna write, increment, and open and close parentheses. Now, that probably

1395.229 -> looks really weird for you. And that's totally okay, if you're confused by what's going on

1399.529 -> here. Because we've seen nothing of the word increment in our JavaScript yet, so rightfully

1404.15 -> so we need to create that function. I'll do that down here. And I'll use the keyword function,

1409.98 -> then the name, increment, open, close parentheses, and then open and close square brackets. So

1416.929 -> pretty funky syntax right there. And the first time you type them, it feels weird, but over

1422.13 -> time, it becomes second nature. What you write inside of these curly brackets is the so called

1427.619 -> body of the function. And that piece of code that is in the body will be executed, every

1433.44 -> time this function is called, are invoked as the same thing. So just to see it in action,

1440.379 -> right console log button was clicked like that. If we run the code, and I click the

1448.269 -> button, you can see that in the console, we see the button was clicked, if I do it again,

1452.559 -> and again and again and again. So every single time the button is clicked, this piece of

1457.519 -> code runs, and it runs because we in the HTML are saying, JavaScript, when this button is

1463.12 -> clicked on the on click event, I want you to run a function called increment. And that's

1471.599 -> what's happening here. And then JavaScript is like, Yeah, for sure, sits ready and listens

1477.09 -> for that specific click event. And JavaScript can do that it pays attention to what the

1481.19 -> user does on the screen. And when it sees someone clicking on this button, it fires

1486.129 -> off this piece of code. This was probably a lot of information to parse in one go. So

1492.659 -> before we move on, and continue on turning our pseudocode into real JavaScript, let's

1498.37 -> take a closer look at functions over The next few castes so that you get rights and functions

1502.45 -> as well, and build up your understanding and muscle memory.

1507.269 -> Okay, so let's pretend that we are building a race card game. So here I have some comments,

1516.479 -> which are meant as pseudocode for the functionalities of the game. And the only real functional

1520.899 -> part of it is these five console logs, which are counting down from five to one. So we

1526.07 -> start the game by setting up the race. And then we do 54321. If I run the code, you can

1531.62 -> see that is log to the console. That means that it's go players are to start racing,

1536.909 -> and they will be running the race, and then they're racist finished and a winner is declared.

1542.1 -> And then of course, we are getting ready for a new race. However, with the current knowledge

1548.049 -> we have about JavaScript, the way we would count down for a new race would have to be

1552.509 -> to copy all of these lines and paste them in down here. So that now when we run it,

1558.21 -> we get 54321, printed two times to the console. However, this isn't good. Anytime you see

1565.109 -> this kinds of repetitions in your code, you should try to think is there any way we can

1570.029 -> extract this into a function, that is exactly what we are going to do, we are going to refactor

1576.21 -> this so that it instead uses a function. Another word for function could be command. So we

1581.84 -> are asking JavaScript to kind of remember a command so that we can use it later on as

1586.69 -> well. And that command can be as comprehensive as you want. In our case, it's going to be

1591.82 -> to countdown from five to one. So let's just do this to see it in action to create a function,

1596.539 -> as I talked about in the previous cast, we use the function keyword, and then the name

1601.7 -> of the function, I'm going to call this function count down, then open and close parentheses,

1608.119 -> then open and close curly brackets. And all of the action happens inside of the curly

1613.69 -> brackets. So I'm going to break that into a new line. And I'm going to copy all of these

1618.299 -> console logs, and then paste them inside here, like that. And here, I'm tabbing it out, just

1625.21 -> to highlight that this code is inside of that function. This is not something JavaScript

1631.049 -> cares about to make our code easy to read for humans. So now I have declared our function.

1636.389 -> However, if we remove this on here, and now try to run the code, nothing happens. Because

1643.559 -> it is only been declared, it hasn't been what we call invoked, or also called as this code

1651.059 -> inside of here will only run if we call the function. So if JavaScript was a dog, and

1657.27 -> we've taught our dog to roll around, then in order to get our dog to actually roll around,

1662.679 -> we have to say, roll around. Same thing here, we have taught JavaScript to countdown, but

1668.239 -> in order for it to actually do the counting, we have to say, countdown. And to do that,

1674.33 -> like this writing countdown with opening close parentheses. Now you can see when I run the

1681.25 -> code, it indeed does the counting. But if I comment this out, it does nothing. So what

1687.259 -> I'm going to do now is I'm going to take this countdown, and I'm going to put it all the

1690.87 -> way here at the top. And then I'm going to call it when we are ready to start the first

1695.24 -> race, and then also call it when we are ready to start the second race. Now if I run the

1701.83 -> code, you can see that we indeed count down two times before the first race and before

1706.69 -> the second race. And this is much better than typing out all five console logs, both here

1712.85 -> on line 11 and on line 19. So we have compressed our code a lot. So with this knowledge fresh

1719.669 -> in mind, let's move on to the next cast where you are to write your first function. Okay,

1729.799 -> now it's your turn, you are going to create a function that logs out the number 42 to

1734.98 -> the console. And you can decide the name of the function. And when you've done that, make

1739.84 -> sure you call or invoke the function as well to go ahead and do this right now. Okay, let's

1749.59 -> do this. I call it my logger. Opening closed brackets. And then inside of the body, do

1758.299 -> console dot log 42. Now we decode my logger, like that, we run the code. And yes, you can

1767.13 -> see we are logging 42 to the console. Great job. Okay, time for a new challenge. So in

1777.369 -> our race car game, we have certain laps, and of course we track how much time our players

1782.609 -> use to race through the laps. And here we have three lap times in the variable lap one

1787.5 -> lap two and lap three. And the thing is, if you create a function down here on line six,

1792.399 -> it will be able to access these three variables from within the function. So what I want you

1797.529 -> to do now is create a function that simply logs out the sum of all the three laps, so

1803.119 -> that'll be the total racing time

1804.82 -> for a player. So you decide what name you want to get it, just write that function that

1809.94 -> logs out the total lap time, and then run the function as well. Okay, hopefully that

1819.5 -> went, well, let's do this function. I'm gonna call this function, log laptime, open and

1827.249 -> close parentheses. Here, I can either first create a variable, let total time for example,

1835.95 -> lap one plus lap, two plus lap, three, and then console, log out total lap time, like

1844.141 -> that. And then log lifetime, invoke the function down here on line 11. If we now run the code,

1851.149 -> we can see yes, we are logging out 203. This is one way of doing it. Alternatively, I could

1856.469 -> have skipped creating this variable in here. And simply added the variables inside of the

1864.549 -> console log that will give me as you can see the exact same result. Now, the reason I wanted

1870.089 -> to create this variable here, though, is to just show you one thing, just that while this

1876.83 -> function could access these variables, from the so called global scope, the outer scope,

1884.059 -> which is not on the inside of the function, but on the outside of it, this doesn't work

1889.19 -> the other way around. If I now let's try to console log total time, from the outer scope.

1897.369 -> If we run this gets a total time is not defined. That is because when you define a let variable

1903.799 -> inside of this scope, it only exists inside of this block of code. This is the scope in

1911.029 -> which the function lives. And that's why we call let variables block scoped. So that might

1916.719 -> be a little bit confusing, that the lap could go from the outside of the function and to

1921.999 -> the inside of the function. But total time couldn't go from the inside of the function

1927.609 -> to the outside of the function. Don't worry too much about this JavaScript will tell you

1932.69 -> when something isn't defined, and you can be sure that you will miss step a times. But

1937.259 -> that's just a part of the process. Let's now move on to the next challenge. Okay, so now

1946.21 -> we have to combine some of the things you've learned up until now, in order to build this

1950.899 -> lap counter feature, because in our racing game, we want to keep track of how many laps

1956.409 -> a player has completed. So I've created this variable called laps completed, and initialize

1961.889 -> it to zero. So what I want you to do now is create a function that increments the laps

1967.779 -> completed variable with one, every time you run the function, then I want you to run or

1973.509 -> call or invoke or whatever you want to call it, this function three times, so that on

1979.989 -> line nine, here, the value that's logged out, will be three. Now, if you're wondering how

1985.359 -> to increment a variable in JavaScript, just look back if you cast because we did that

1991.169 -> previously. So now we have to combine that knowledge with your freshly acquired knowledge

1995.58 -> about writing functions to go ahead and give this your best try right now. Okay, hopefully

2005.429 -> that went well. If not, no worries, let's do this together. So that you get to see how

2010.08 -> we do it. function. And I'm going to call this function, increment lock like that. Open

2016.899 -> and close parentheses, then open and close curly brackets. And here after increment this

2021.909 -> variable, just as we did a few casts ago, by doing laps completed, equals the old value

2028.679 -> of laps completed. Last one like that, right now run, increment last one time, you'll see

2036.32 -> that we're logging out one, good stuff, let's invoke it three times. There, we can see we

2044.539 -> are logging out three to the console. So great job doing this. If you didn't manage it, just

2050.96 -> go back and try again, now that you've seen my solution, because it's really important

2055.05 -> that you actually write the code here, so that you build up that important muscle memory.

2060.79 -> Okay, we're back at the subway counter app. And as you can see, I've deleted the increment

2068.45 -> function, because I want you to write it instead, it's much better than me writing everything.

2072.59 -> You want to do it as a part of turning these first three lines of pseudocode into real

2078.83 -> code. So you're going to initialize the counter zero, you're going to listen for clicks on

2082.98 -> the increment button. And thus you have to create that function that's triggered when

2087.32 -> the increment button is clicked, and then you are going to increment the count. Matter,

2091.58 -> find a little challenge here and that is to log it out after the count variable has been

2096.85 -> incremented. So go ahead and do this right now. And then afterwards, of course, showing

2100.51 -> you the solution as well.

2104.02 -> Okay, hopefully that went well, let's do this together, we'll do function increment, open

2112.91 -> and close parentheses, open and close curly brackets. And we have the button, let's verify

2118.38 -> that it works. Good thing to do after every single step. So that you know, at some point

2123.79 -> get a bug, you will have a better understanding of where it happens is you know which steps

2127.81 -> you were able to get to without triggering any bugs. So I'll do clicked, run the code,

2134.81 -> click the button, the Yes, that works. Okay, not wanting to increment the count. So we're

2139.98 -> going to do that inside here. And of course, then we need the count initialized to begin

2144.3 -> with. So count equals zero. Here, as you remember, it's just as we're simply going to do what

2150.22 -> we did up with line four, we'll do equals count, plus, now, finally, console, log count.

2158.83 -> I'm going to remove this and run the code, hit increment. Yes, we see one, and two, and

2166.68 -> three, and four. Nice. So then we have done these three parks, remove this helper code

2174.86 -> right here, we have the final part left. And we can finally start understanding what this

2180.98 -> weird piece of code here on line one that we worked with, in the very beginning of the

2185.47 -> course, actually means. Let's do that in the next lecture. Okay, so we are ready to add

2196.61 -> the final piece of the puzzle, just to change the count L. That is the age to buy care,

2203.7 -> which currently has zero. So that reflects the new counts. And the view count is down

2209.66 -> here, which we are logging out. So we have to do something down here at line nine. And

2214.25 -> what we're going to do is take this line right here, which has just been lying here in the

2218.15 -> background all along. Now, in order to properly understand this expression, I think we should

2224 -> break it into two, take the first part where we're actually asking for the HTML element.

2229.94 -> The second part, we're actually modifying the HTML element. So starting with the first

2234.89 -> part, I'm going to store this in a variable called count L, like that, and do document

2242.07 -> get element by ID, close parentheses, passing in count, l. Exact string right here. Notice

2254.15 -> that we're using different naming convention here in the JavaScript. This is called camel

2260.02 -> case like that, where you capitalize the first letter of the second word, but not the first

2266.51 -> letter of the first word. This is how you want to write JavaScript variables. It's a

2270.39 -> very normal convention. Also, if we were to try to use the same convention, as we've been

2275.2 -> using in our HTML and CSS, JavaScript would actually tell us Ah, you can't do that. Because

2280.31 -> IE, we are getting a red line under this character, which is Java scripts way of complaining to

2285 -> us because it's not a valid variable name when you stash. So we got to remove it like

2290.41 -> that. Now, it's always what do you think we should do now now that we've taken one step

2295.61 -> into the unknown? Well, of course, we're going to use our good old friend console lock, because

2300.38 -> we have to verify at every single step that we're actually on track. We haven't introduced

2304.15 -> any bugs. So I'll do console dot log, and logging out, count out. And if we bring up

2310.73 -> the console, we see actually, we're getting what looks like an HTML element in the console.

2316.3 -> That's pretty interesting. Now, it's actually not a real HTML element. It's more of a representation.

2321.79 -> It's a model of an HTML element. And it gives us a lot of other opportunities to change

2326.76 -> it using JavaScript as well. But for now, it's perfectly fine to think of this as just

2331.16 -> yeah, that is the element that we are seeing right here. It's a JavaScript representation

2337.27 -> of that element. Because remember, we said, Hey, HTML document, why don't you get me the

2342.59 -> element that has the ID of count l? And the HTML, I was like, yeah, sure, just take it.

2350.64 -> And then you stored that in the count variable. And now you, as a JavaScript developer, have

2355.76 -> control over this element, and you can manipulate it, which is exactly what we're going to do

2360.15 -> down here at line 14. Because now we're going to move on to the second part of this big

2364.71 -> expression, which is modifying the element itself, dot inner text equals five, or in

2369.8 -> our case, how would we write this? Well, we've turned this big thing here into this variable.

2377.04 -> So we'll use this variable dot enter text, that is enter text like that equals, and we're

2385.731 -> not going to set it to five because I wouldn't make any sense. What are we going to set it

2389.36 -> to think a second about that? Neither is the count, because we know from console logging

2395.79 -> earlier on that the count does indeed increment correctly. And now we're just saying that

2399.99 -> Won't be enter text

2401.47 -> is the text on the inside of the tags, we want it to be the count, we'll run the code,

2409.36 -> hit the increment button. And yes, it works. Now we are incrementing, we are counting people

2414.88 -> really good job of reaching this point, your JavaScript skills are starting to become dangerous,

2419.62 -> as you now know how to create interactive apps. Now, before we move on, there's one

2424.89 -> thing I want to mention, which is that this get element by ID here. And this dot log,

2432.74 -> both are functions in the same way, our increment function is a function. Now they are hooked

2438.18 -> on to the document object and the console object. But that's just new ones. They're

2443.12 -> still functions or methods as we call functions that are hooked on to so called objects. If

2449.39 -> that sounds confusing, it's because it should be at this point, because you haven't learned

2453.5 -> about the objects yet. And methods on objects. But don't worry about that. Just think of

2458.29 -> them as functions. Actually, the thing we've been doing here of adding something in between

2464.22 -> the parentheses of the function when we are calling it is called to pass in arguments,

2469.99 -> which means that we are giving the function some data to work with like here, we're specifying

2475.2 -> the ID of the element we want to grab. Otherwise, if we didn't do that, this function will just

2480.41 -> be running in the wild and not know what to look for. Likewise, in this dot log here,

2486.29 -> we're passing in which variable we want to log to the console. If we didn't do this,

2490.92 -> the log function wouldn't know what to log. So speaking in analogies, if the function

2495.83 -> is a CEF, that are to cook a meal for you, then the arguments you pass in are the ingredients

2501.74 -> that chef uses to cook that meal. So hopefully, that made everything a bit more clear. Let's

2507.65 -> clean up this code and move on. Now, before we move on, I want to talk a little bit about

2515.99 -> what we're doing here where we're saying documents dot get element by ID, because you'll often

2521.37 -> hear developers refer to this technique as working with the DOM. And that's one of those

2527.61 -> three letter acronyms in web development. sounds super complicated. And I was really

2533.2 -> confused about this when I was learning to code. And I want you to avoid that confusion.

2537.89 -> So let's just unpack this expression. It's short for a document object model. That sounds

2543.24 -> really fancy. However, it's actually just how you use JavaScript to modify a website.

2549.05 -> It's just that the people naming this wanted to give it a really abstract name. But if

2554.45 -> we look at each of the words separately, the name actually does make sense. Let's do that

2558.72 -> starting with a document. Why that? Well, that's because what you're interacting with

2562.63 -> an HTML document object? Well, that's because the document keyword in JavaScript is of the

2570.12 -> data type object, meaning they've taken the HTML document and shoved it into a JavaScript

2575.32 -> object. Of course, that's a little bit of a simplification, but that's the essence.

2579.69 -> So this word document of the data type object. Now, you haven't learned about objects yet,

2585.75 -> though, you're going to do that a little bit later. Finally, there's Model Model is basically

2591.19 -> a representation or a model ation, kind of like, you know, there's a real Saturn five

2596.44 -> rocket that NASA built. And then there's the Lego model. And that's how it is here as well.

2602.14 -> There's the real HTML element, which you've written in your dot html file, then there's

2607.1 -> the JavaScript model, the representation you have over this element in JavaScript. So don't

2613.46 -> be frightened when people talk about the DOM, just in your head to translate it to how to

2618.12 -> use JavaScript to modify websites. With that out of the way, let's move on with the coding.

2628.41 -> Or actually, before we move on, I have to say I fooled you a little bit. Because the

2633.71 -> problem with the previous lecture was that I wrote the code. And that's just wrong, you

2638.04 -> are going to write the code. That's how you learn. So I've removed the two lines of code

2642.82 -> that I wrote, namely, grabbing the counter element and storing it in a count l variable.

2648.69 -> And also setting the count else enter text through the count. So just do that. And if

2653.97 -> you struggle, just go back and look at my solution. It's no need for me to write this

2657.99 -> out for you yet again, just go ahead and give it your best shot and refer to that if you

2662.89 -> need help. And I will see you in the next lecture. Okay, it's time for you to build

2672.1 -> some muscle memory, because you are going to create a Save button and a save function.

2676.94 -> You're going to start with a function. Here's the instructions create a function called

2680.84 -> save logs out the count when it's called. We're going to modify this to do some other

2686.31 -> stuff afterwards. But that's for now I wanted to just log out the count.

2690.11 -> Secondly, in the HTML, you are going to create the Save button. You're gonna set the ID as

2695.81 -> save btn and have it call the Save function when that is clicked. So, go ahead and do

2701.59 -> this right now and then return back to the screencast when you want to see my solution.

2706.63 -> Okay, hopefully that went well, let's do this function save, open and close parentheses,

2718.19 -> then the body of the function will console log account. If we want to check that this

2724.76 -> actually works. Now we can call the same function, run the code there, we can see yes, that the

2729.01 -> account is indeed locked out as a consequence of us calling the function here on line 15.

2733.78 -> Okay, let's remove that. Going over to the HTML, we're going to create the Save button,

2739.6 -> and we do open button tag, then I'll just close it right away. Alright, the save in

2746.09 -> between the tags and give it the ID of saved up BTM. Now we can actually run it to see

2752.58 -> that renders. Yes, it indeed does. But nothing happens when we click it. And that's because

2757.53 -> we have to do on click, we want to run the Save function. Here, we have to invoke it

2764.28 -> with the opening close parentheses, otherwise, it won't call the function. So we're running

2769.45 -> the code and hitting save, yes, there we are logging out zero, because of this line. Now

2775.69 -> we can increment a couple of times and see Oh, now we're logging out six, pretty nice.

2782.25 -> Now we're starting to get somewhere, it's only a matter of saving the count to the website

2787.66 -> as well and rendering it out under the buttons. But before that, there are some new concepts

2792.31 -> you need to learn. So I'll see you in the next test. Okay, so now it's time for us to

2801.24 -> build this little functionality here, which allows us to save the number of people who

2806.01 -> have entered into the subway at each of the departures. However, this requires you to

2811.82 -> work with this full paragraph, which actually includes both numbers, which you can see but

2816.94 -> also like regular text, previous entries and some symbols as well. And once you move away

2822 -> from just straight out numbers in JavaScript, you're moving into the land of so called strings.

2827.76 -> And strings is a data type in JavaScript. And in case you're wondering, yes, numbers

2832.78 -> is also a data type. And if you think the word string is a little bit weird, well, you

2837.4 -> can also think of this as just text, the strings you work with in JavaScript are normally meant

2841.95 -> to be text that the user reads on the page. Now, we have been working with text here before

2846.87 -> and we've hard coded in some text here and there in the HTML. And actually, as far as

2851.3 -> HTML knows, everything is strings doesn't even know about numbers, HTML can do calculations

2857.12 -> for you. So when I'm talking about strings and numbers, I'm talking about it in the context

2861.59 -> of JavaScript. And even though you've probably not even aware of it, you've actually written

2866.1 -> the string already appear on line one, you've wrapped the count dash l inside of two quotes.

2873.54 -> And that is how you create a string in JavaScript. But you've had far from enough practice to

2878.81 -> start working with strings in our people counter app. So in the next lesson, we're going to

2883.43 -> go over the basics of it. And then we're going to solve some challenges so that we build

2887.23 -> up that muscle memory and make you capable of using strings in our app. I'll see you

2891.96 -> there. So strings are used all over the place and software, let's say that you, for example,

2901.61 -> are building an app where people can authenticate, well, then most likely, you have to store

2906.76 -> some kind of username for your users, that would most likely be stored as a screen, for

2912.66 -> example, Pear, wrapped in double quotes, then this string, just like we did with numbers

2919.2 -> will be stored in a variable. So let user name equals pair. Now we can console log out

2927.561 -> username, get pair logged to the console. Now, one thing I want to mention is that I'm

2935.52 -> using double quotes here to create this string. I could use single quotes instead, if I want

2941.82 -> to, you can see that works. However, I cannot start with a single quote and end with a double

2946.9 -> quote. As you can see, now, our editor tells us that this syntax is off. And if we try

2953.29 -> to run the code, we are getting a syntax error. So you got to stick with one or the other.

2958.64 -> And I usually use double quotes, but that's just a matter of preference. If you prefer

2962.46 -> single quotes, go ahead. Now I want to give you a challenge. Here you are to create a

2968.9 -> variable message that stores the string, you have three new notifications. Go ahead and

2975.37 -> do that right now. Okay, hopefully, that went well. Let's do this message equals

2989.67 -> this string right here. Now what we want to do here is combine this string with this string

2996.97 -> because this string right here is probably the result have us checking in the database

3001.77 -> and seeing that, oh, there's three new notifications that Pierre hasn't seen. So render out this

3007.9 -> ring right here. And then of course, we need to combine it with the name. So what we want

3012.76 -> to do is message plus username like that, when we add a plus here, we so called concatenate

3021.06 -> the two strings together. So let's have a look at what happens when we run the code

3024.24 -> becomes a slightly ugly string, we have three new notifications pair with no space in between

3031.27 -> the strings, so it kind of becomes like, this isn't really what we wanted. What we then

3038.07 -> also can do is add a third string in between here, which includes a comma and a space.

3043.95 -> Now if we run it, you have three new notifications pair. And maybe we even want to add a exclamation

3050.97 -> mark at the end like that. As you can see, when we use the plus for strings, simply concatenate

3058.16 -> the characters together. Okay, now I have a new challenge for you. You are to create

3064.93 -> a variable message to user that contains the message we have locked. By that I mean the

3071.03 -> entire message in here, this should be a new variable. And then afterwards, I would log

3077.86 -> it out just to make sure that you have configured the message to user in the correct way. Why

3082.98 -> don't do this right now. Okay, to do this, you do left message to user equals message

3095.19 -> plus, comma space, plus username, plus, exclamation mark. Now, we can replace all of this with

3107.29 -> message to user and running the code again, we get the exact same string, which is just

3113.61 -> what we want it. Great job.

3118.04 -> Okay, time for another talent, you have to create two variables, name and greeting. And

3126.17 -> the main variable should store your name. And the greeting should store for example,

3130.47 -> Hi, my name is. And then you are to create a third variable, my greeting that concatenates

3135.98 -> the two strings. And finally, log the my greeting variable to the console. So this is just to

3141.57 -> give you some muscle memory. We had to do this right now. Okay, let's do this. I'll

3151.2 -> do left knee equals pair, Harold, Oregon, then let greeting. Hi, my name is and then

3161.12 -> a space at the end. And then finally, let my greeting equals reading last name Ben.

3169.35 -> To see how this went. We do console log my greeting. running the code? Yes, we get Hi,

3177.74 -> my name is Pierre Harold Bergen. Now, notice that here, I added the space inside of one

3185.03 -> of the strings as opposed to doing something like that. Forever being that would work the

3192.32 -> exact same way. So great job solving this challenge.

3196.3 -> Let's move on. Okay, now let's mix it up a little bit. And say

3203.94 -> that my name isn't pure Harold Bergen. It's actually 42. a strange name. But anyway, what

3209.01 -> do you think will happen when we have one number and one string? What will the result

3212.89 -> be? Let's do it. Actually, Hi, my name is 42. So the 42 here has actually been turned

3218.69 -> into string, and has been added into like this. And that's kind of what happens in a

3224.31 -> wrestling game between a string and a number, and the string always wins. Now this was a

3229.34 -> little bit of a weird example. So let's take one that's a bit more interesting. Let's try

3233.28 -> let points equals four. And then let's say bonus points. This is some kind of game that

3241.39 -> is 10. Lead total points equals points plus bonus points, total points. Now, what do you

3251.4 -> think we'll log out here? I'm going to comment out this one right here. Take two seconds

3257.18 -> to think about what the result will be. Okay, let's run this. The result is 410. That is

3264.95 -> weird, because perhaps you expect them 14. No, as I said, the string always wins. So

3271.08 -> when we see four plus 10, which is the values of these variables, the form will be turned

3277.24 -> into a string. And the result when you concatenate two strings, it's just very easy to see by

3282.11 -> just removing this fluff in between them. 410 if the numbers one, the wrestling game

3288.41 -> will be like this, it would indeed log out 14, but it didn't. So I'm gonna give you a

3295.22 -> couple of challenges here. What do you think these four console logs will log out? Take

3299.119 -> a minute to think about That potentially write your solutions in a code comment either above

3304.43 -> or perhaps even after each of the lines and then return back to the screencast. And then

3309.07 -> we'll have a look at it together.

3314.16 -> Okay, here we have a number and a number. So this will end up as a number as well, four

3320.01 -> plus five is nine. As far as I can remember, your a string plus a string, even though they

3325.82 -> are number characters inside of the strings, that doesn't matter. JavaScript still sees

3329.51 -> this as a string, and the result will be a string of 24. Here, a wrestling match between

3334.5 -> a string and a number. Sadly, the number always loses. So this will be history one. Finally,

3341.47 -> again, wrestling match between a number and a string, the result is always at the string

3346.32 -> when so this will be 100 100. Like that, let's run the code. Yes. You also can see from the

3353.16 -> console, the way the scribble console highlights the difference between numbers and strings.

3356.87 -> As with the color, the strings are white, whereas the numbers are blue. So great job,

3362.54 -> let's move on. Okay, it's time for a challenge. This time, you are going to create a feature

3371.24 -> that we already have unscramble, because on the dashboard, we welcome our users by saying

3375.5 -> welcome by compare Harold Morgan. That's a normal thing a lot of apps do. So it makes

3379.6 -> sense to try to implement it. And we want to do it is through grabbing a hold of this

3384.88 -> paragraph here, which I've given an ID of welcome dash L. That is the first part of

3389.7 -> the challenge, you're going to store that paragraph in a variable called welcome URL

3394.22 -> using this camel case convention. And then you are to create two variables name and greeting

3400.23 -> that contains your name, and the greeting we want to render on the page. In our case,

3404.78 -> that is Welcome back. Finally, you are going to render the entire welcome message using

3409.82 -> welcome l dot inner text. So go ahead and give this one a shot. And then I will show

3414.86 -> you the solution when you return back to this cast.

3419.75 -> Okay, let's do this. We'll start by grabbing the welcome l paragraph. Let welcome L equals

3429.45 -> document dot get element by ID passing in the ID we have here. Like that. Now we need

3437.99 -> to create the two variables let name my name is pair Harold, Oregon. Let greeting. Welcome

3447.661 -> back. And finally rendering it out. I just done by doing welcome l doc. enter text equals

3459.36 -> greeting plus name. Now if we run this, we can see we are rendering out Welcome back

3465.38 -> to pair Harold Oregon. But there's no space between welcome back and my name that can

3470.35 -> easily be resolved by just adding a space after Welcome back. Or we could of course

3474.69 -> hard coded in in between these two variables when we concatenated the string as well. But

3479.76 -> that doesn't really matter that much in this case. So let's just stick with this and move

3483.75 -> on to the next lesson.

3486.77 -> Okay, now there's one more thing you want to do. Because Personally, I think this welcome

3494.93 -> message could be a little bit more lively and fun. And what would help there is to add

3499.25 -> an emoji, for example, this emoji right here, that would look pretty nice. So I want you

3503.74 -> to add that to the welcome element enter text. However, there's a catch. You are not allowed

3510.19 -> to modify the code over line nine, you have to write it below. So the question is, how

3515.68 -> can you add this emoji to the end here in the browser by simply writing more code not

3522.83 -> by modifying any of the existing code. And to give you a hint, you need to remember back

3528.369 -> what you did. When you increment the numbers, this technique here, you can do the same thing

3533.84 -> with welcome l dot enter text. So go ahead and give this a shot. Okay, hopefully that

3543.48 -> went well. If not, no worries, we'll do this together. We're simply going to do here is

3549.369 -> instead of using count going to use welcome l dot enter text instead of the one, we're

3554.43 -> going to use an emoji. So here we'll do welcome l dot enter. Text equals the old welcome.

3564.13 -> Else, enter text, plus this new movie right here. And an emoji is just a string. Like

3572.43 -> all other characters, it's just rendered out a little bit fancy. So if we run this to see

3576.79 -> yes, we indeed get the emoji at the end. Now, before we leave, I want to teach you a little

3582.38 -> trick. Because this line here is pretty clunky writing the welcome l dot inner text twice.

3588.91 -> It's not something you'll see out in the wild because there's a shorter version of writing

3593.41 -> this and that is simply using the plus equal operator. What it does, it takes The current

3601.02 -> value you have, and then adds this one after it fits the exact same thing that you were

3605.76 -> doing here. timbit weird. This plus equal sign here was trying remember that it simply

3611.65 -> takes what you have here and adds this to it. So that after this line, I'll come down

3617.18 -> to enter text consists of the entire thing here. Okay, with that in mind, let's go back

3623.48 -> to our passenger counter app. Okay, just a minor thing, before we start using strings

3631.75 -> in our app, I want you to use the plus equals technique instead of this slightly longer

3636.9 -> count equals count plus one technique. Go ahead and do that. Okay, hopefully, that went

3646 -> well, by simply doing like this count plus equals one, run the code. Yes, it works. Let's

3654.09 -> move on. Okay, so now you're going to solve a super cool challenge, you're going to take

3661.42 -> everything you've learned about JavaScript up until now and use it to create this save

3666.82 -> feature can see it says previous entries, and then four 511, with dashes that separate

3673.11 -> them. And these are, of course, added every time you hit the Save button. Now, there's

3677.98 -> a dash after the three numbers as well. Don't worry about that, it might look a little bit

3682.94 -> weird, but it's the easiest way to do this. And we want to do it the easiest way. Now

3686.76 -> that you were building stuff like this first time around, we don't worry about details,

3690.71 -> make it work first, then make it better. That's my philosophy. So we're just going to make

3694.89 -> this work. Okay. So your three challenges are listed as comments here in the JavaScript

3700.81 -> and the HTML, I'm going to write the paragraph for you so that you have something to work

3705.95 -> with. So this is a p tag should say previous. And Chris, like that, and I'm going to give

3713.65 -> it an ID equals save dash l for save element, then you're going to grab the Save element

3720.13 -> paragraph and store it in a variable called save L. And then in the Save function, which

3725.29 -> is triggered when the Save button is clicked on, you are going to create a variable that

3729.51 -> contains both account, that is the number and the dash separator. It'll look something

3735.51 -> like this, like 12 space dash space. And then you are to render this newly created variable

3742.16 -> into the Save element using enter text. However, you must make sure that you don't delete the

3748.32 -> existing content from the same old paragraph. Because you do want to concatenate the string,

3753.19 -> not wipe it out entirely and replace the paragraph with the latest entry. So you've got to remember

3758.98 -> your plus equal, luckily, you know how to use plus equals and that might be helpful

3763.12 -> in this situation. Finally, one thing I want to mention is that you might struggle a little

3767.58 -> bit with the spaces here and it might end up slightly different than what you can see

3771.69 -> here. And that is perfectly okay. Don't worry about that. The next cast actually we are

3776.02 -> going to do some searching online to figure out if there are some alternative methods

3780.92 -> we can do this on, which will help us keep these spaces. That's a critical part of web

3785.97 -> development, searching for solutions

3787.72 -> online. So I've left a little gotcha for you here. So we get a nice little problem to solve

3792.05 -> using Google and some online docs in the next guest. Don't worry about that. Just go ahead

3797.25 -> and give this your best shot. And if you need help just revert to the screencast. And I

3801.6 -> will show you the solution as well. Okay, hopefully this went well. If not, no worries,

3811.69 -> let's do it together. We are going to do let's save our Adobe document dot get element by

3818.77 -> ID. And we are going to get the Save bash l like that. Always I like to console log,

3826.13 -> just to see that I have the correct element fetched. Let's run this code and he is bringing

3831.98 -> up the console, we see that we have grabbed the correct element, then we can move on.

3836.71 -> First create a variable that contains both the account and the dash separator. So what

3842.17 -> are we going to call this variable? I intentionally didn't give you a name for it because I wanted

3846.51 -> you to think what could be a suitable name for this string. And there's no right or wrong

3851.29 -> answer. But one thing you could call it would be count string or count str. Like that. So

3856.81 -> it is the count. But we've turned it into a string. So count string, kind of make sense.

3862.93 -> And the value of it will be count applause. And then the string, a lot of space, a dash

3868.57 -> and a space or right three, render the variable using enter text. Okay, let's do it down here.

3875.58 -> We'll do save l dot txt and then you might have been tempted to do equal count r but

3883.43 -> that won't work. Let's just try it. run the code, we increment we'd save boom, then we

3889.06 -> suddenly remove the previous entries. txt. We will clear that out of course because we

3894.04 -> set all the intertext to be just this count string. That doesn't work we have to take

3899.07 -> into account what was there Previously as well. So we add plus equals like that increment

3904.37 -> increment increment save. Yes, that works far right. So it works really well actually.

3911.74 -> However, this dash in there is gone, as is our space here in the paragraph. And that

3918.64 -> is a bit weird, because we want to keep those spaces. However, it's also a great opportunity

3923.47 -> to do some searching online in order to solve this problem, which is a critical skill for

3928.05 -> any developers, namely, finding answers online. We'll do that in the next cast. Okay, so we

3939.32 -> have this little problem here, which is that our spaces aren't working in the way we want

3943.421 -> them to work. Basically, this space here gets lost on the way somewhere, I don't know where

3949.65 -> but it happens. How do we go about figuring out what's wrong? Well, looking at these two

3955.24 -> lines, which is where we deal with this save element, paragraph, you think what would be

3960.119 -> a suspect which tool that we're using would be a good suspect? And I'm gonna point to

3965.87 -> this one right here. Because I happen to know that that is actually the guilty one, the

3970.46 -> inner text, and say, you'd guessed that as well. How do you go about finding another

3976.02 -> tool that doesn't work this way? Well, one thing you can do, is you can right enter text

3981.19 -> alternative. And then MDN, put that into Google and see what it returns. MDN is short for

3988.57 -> Mozilla developer networks. And it's a great resource. So if we do that, type that into

3994.14 -> Google, you can see the very first result is node text content. Okay, that's interesting.

4000.4 -> Let's click into that. There, we land on an interface, we're going to get very familiar

4005.36 -> with the MDN web docs that says node dot txt content. Don't worry about this note here,

4011.84 -> it's kind of fancy way of saying HTML element, sort of not entirely, but just translated

4017.41 -> to HTML element right now, and you'll be good, then you can read the text content property

4022.44 -> of the HTML element represents the text content of the element, okay. Seems pretty useful

4028.94 -> to me. And then we can scroll a little bit down. And then you see they've actually listed

4033.26 -> up the differences between inner text and text content. Here, if we scan through this,

4039.46 -> you can see that inner text only shows human readable elements. And yet again, enter text

4044.97 -> is aware of styling, and won't return the text of hidden elements. Okay, so it seems

4050.49 -> to be that the inner text somehow struggles a little bit to return things that are hidden

4056.39 -> or not human readable. And like, yeah, space is certainly not not human readable as a character.

4062.93 -> So maybe we can just change it then to dot text content that said, let's try that. Text,

4070.36 -> content. Code, increment, increment increment, save, oh, oh, yes, indeed, now we get the

4079.73 -> spaces. And one thing I want to highlight here is that

4084.28 -> while the Mozilla web docs is a great resource, it's very comprehensive, the language you'll

4089.08 -> see in these kinds of documentation sites is often very technical. That's why I kind

4093.13 -> of skimmed through and found some hints of human readable and hidden, and I kind of didn't

4097.96 -> worry too much about going into depth. And I think you as well should think when you

4102.259 -> see a page like this, don't feel that you need to understand everything. And for the

4107.069 -> love of God, don't try to learn the code by just reading documentation. Some people say

4111.71 -> that's a good idea, I think it's a terrible idea. You want to slowly learn how to get

4115.929 -> comfortable reading documentation. But you also want to ignore all of the complex stuff

4120.099 -> that it's very often wrapped within. And there are other sites as well, that explained things

4124.239 -> in various degrees of difficulty. For example, there's also something called w three schools,

4128.529 -> which is very good there, Stack Overflow, and many more. And you're going to see more

4132.179 -> of this as you progress in the course as we're going to come back to this debugging concepts

4136.599 -> later on as well. But just for now, we've just had a little sneak peek on the Mozilla

4140.839 -> Developer Network. And actually, it's kind of trash talking the dot inner text here and

4145.299 -> saying that it's also computationally expensive. So me, I've gotten enough hints that I actually

4151.109 -> want to use dot text content instead of enter text. I'm going to change this up here as

4156.46 -> well.

4157.7 -> Like that,

4160.009 -> it still works great. Now our app is almost complete, there's only one more thing we need

4165.38 -> to do. And we'll do that in the next guest. Okay, so now we are going to put the final

4173.68 -> pieces in our puzzle, because we need to fix the fact that if I increment this, and then

4179.079 -> hit save, and then the subway leaves the station, and I'm going to count a new group of people

4184.239 -> then with the current solution, we'll be counting further on from six like 789. And that's not

4190.009 -> what we want. We want this one to be set back to zero every time we hit save. And to do

4195.31 -> this, you need to write two lines of code. And at this point, I want to just throw you

4199.23 -> into the deep end of the pool and see how you swim, if I'm not going to give you any

4203.559 -> hints or write any pseudocode, or tell you where you're going to write these two lines,

4208.13 -> now you really have to think and think for yourself, what do you need to do here in order

4212.059 -> to make this work. And feel free to hack a little bit on it to try a solution, run the

4216.159 -> code, see how it works, console, log out the values, just hack away at it and give it your

4220.519 -> best shot. And if you don't manage to do it, no worries at all, because I will show you

4224.73 -> how to do it again, of course, when you return back to the screencast. So then you can just

4228.88 -> try to do it again, after you've seen my solution. Anyway, enough talk, jump into the code here

4233.599 -> and give this a shot. Okay, now let's solve this together. So what we need to do is write

4244.58 -> a couple of lines in this save function, because this is where the magic should happen, because

4248.989 -> it's when we hit the Save button that we want this value to be set back to zero. And how

4254.77 -> do we set this element to be zero? Well, it is the count element, which we've worked with

4260.63 -> previously. and setting it to zero. We know how to do that we can do count l dot constant

4266.739 -> and set that equal to zero like that. By rerun the code, increment the increment the increment,

4272.86 -> increment it save, and yes, it's now zero. But if I now try to hit the increment again,

4278.48 -> you'll see Oh, five. That's weird. Why is that? That's because we have indeed set the

4285.079 -> text content of the count element to zero. So this is true right here. But in the JavaScript,

4292.65 -> we're still keeping track of the count. And that count has been incremented, this point

4297.489 -> five times. So what we needed to do here, when we set the text content to zero is to

4304.05 -> also set the count back to zero as well, because JavaScript remembers what we've done previously,

4310.05 -> unless we refresh the entire browser, even though JavaScript can see that, yeah, you're

4313.979 -> setting the text content of this element here to zero, it still keeps track of the count

4318.619 -> here. And JavaScript can't deduct that, since you want to set this here to zero. You also

4323.579 -> want this to zero, no, you got to give JavaScript very specific instructions. So you need to

4328.479 -> do here, count equals zero as well. Now, if we run the code, bam, bam, bam, save, it's

4335.55 -> at zero. And yes, we indeed start at zero again. So great job reaching this far. So

4349.38 -> you have built your very first Javascript app from scratch, congratulations, that is

4354.86 -> a huge accomplishment, that's all give yourself a pat on the back, you have really learned

4359.679 -> a lot in this section. And to prove that you are actually going to do a little recap. So

4364.23 -> you get to see in front of you, all of the new concepts you've shoved into your brain

4368.739 -> at this point. So we started out with the script tag, if you remember, we had it here

4373.25 -> in the index dot HTML file, and we wrote our JavaScript internally, in this file. However,

4379.53 -> we realized that that wasn't the way we want it to go. So we instead pointed this script

4384.34 -> tag to a source, namely the index.js file so that we could write our JavaScript there

4388.969 -> instead. Then we moved on quickly and learned about variables, namely the left variable,

4394.89 -> and we set its value to a number, which brings us to your very first data type numbers, you

4400.19 -> learned how to work with numbers, do mathematical operations, and even increment numbers here

4404.949 -> on line six, and also reassign the count variable to zero, here on line 14. So a lot of work

4412.239 -> with numbers in this up. But you also learned about strings, which was your second data

4416.769 -> type, here, you added a string to build the same feature. And also you console log out

4421.76 -> a few strings along the way with code that we have deleted now, so I added the list console

4426.01 -> log here to remind you about it. Because that is a truly important concept in developing

4430.429 -> and you will use it throughout your entire career. Also, another thing you will use constantly

4435.409 -> as a developer is functions. You learned how to create functions like this increment and

4440.199 -> save function, and also how to call them aka invoke them from the HTML file here on the

4446.949 -> button clicks. And that brings us to the next concept which you learned a ton about, which

4451.98 -> is the DOM or the Document Object Model, or what I like to call it,

4456.3 -> how to use JavaScript to change the website. So we interact with with the DOM at several

4462.079 -> places. For example, up here we we did document dot get element by ID, that's one you're going

4467.619 -> to get very familiar with. Throughout this module, we passed in the ID as a string. So

4473.849 -> the JavaScript was able to head into the HTML and fetch out the content you told it to look

4479.88 -> for. And another way we interacted with the DOM was through the inner text property. We

4485.4 -> use that here instead of text content, but then we googled our way to the Mozilla Developer

4491.29 -> Network, realize that actually, next content is a better solution. So we learned about

4497.28 -> that and oh my god, this is a lot of concepts to learn. totally understand if you're a little

4502.13 -> bit overwhelmed. And if you feel that you are on thin ice on a few of these concepts,

4507.04 -> that's totally okay, we are going to repeat all of these things over and over again throughout

4511.489 -> the module. But don't worry about that. Actually, we are going to jump directly into a section

4517.07 -> where you are going to get assignments that test you for the skills just to give you that

4521.619 -> repetition and muscle memory you need in order to make these concepts become second nature.

4526.409 -> So let's go ahead and get some repetition. And then once we've done with that, we'll

4530.71 -> move on to our next big project, the blackjack app, which is going to be so much fun to build.

4537.139 -> So I can't wait to see you there. For now, let's jump into a few quick fire challenges.

4544.69 -> Okay, in this challenge, you're going to repeat variables. So first, you're going to create

4552.429 -> two variables, first name and last name. And obviously, I want you to set their values

4557.349 -> to your first name and your last name. And then concatenate the two variables into a

4563.579 -> third variable called full name so that you have your full name. Finally, log full name

4568.789 -> out to the console, go ahead and give this a shot right now. And then I will show you

4573.099 -> my solution when you return back to this screencast.

4578.389 -> Okay, let's do this. I'll do first name equals here. And then I'll do let last name equals

4589.729 -> Morgan like that. Then we need to concatenate the two together, let name equals first name,

4599.76 -> plus last name, like that. Finally, I want to log it to the console. Console dot log,

4607.349 -> full name. Now I can run the code. And as you can see, we're logging here borgen to

4613.05 -> the console. But there's no space in between the two names. So I could achieve this in

4618.869 -> a multitude of ways, either by adding a space here, now it's better or adding a space before

4626.59 -> Morgan. Still good. However, neither of these are optimal, since I want the first name and

4632.63 -> last name to be the name and the name only not an extra space. So what I'll do instead

4638.13 -> is in between here, add an extra space like that. running the code, there we go. Now,

4645.729 -> first name and last name, contain only the characters of my name, but we still get the

4650.429 -> space by adding this third string here, when we create full name. So no matter how you

4656.32 -> did it, great job, let's move on. In this challenge, you are going to create a function

4665.099 -> that logs out Hi there, Linda, when called. And you have to use the name and the greeting

4671.239 -> variable inside of the body of your function. And also there's a comma and an exclamation

4675.809 -> mark, you also have to include so that you get this exact string log to the console.

4681.01 -> So go ahead and solve this one. And then I will show you the solution afterwards as well.

4687.309 -> Okay, let's do this create a function, I'll call it greet Linda like that. Here, we are

4695.84 -> going to console log, first the greeting, we're going to have to plus the comma and

4701.239 -> the space, and then plus again, then the name and then plus again. And then the exclamation

4707.219 -> mark like that final step to check our code, we need to run it greet Linda like that, running

4714.01 -> the code. And there we see this exact string in the console. Great job. In this challenge,

4724.51 -> you are going to practice your incrementing and decrementing skills. So let's say that

4729.17 -> you are building a game and the player is collecting points, which currently are at

4733.26 -> three and you need to create two functions one which is called add three points, and

4738.15 -> one which is called remove one point and of course then have these add and remove they're

4742.929 -> given points from or to the my points variable. So remove one point should decrease my points

4750.05 -> with one add three points should add three points to the my points variable. And your

4756.599 -> job is to create those two functions and then call them however many times you need to call

4761.579 -> them in order for this line down here to log out the number 10. So you are going to write

4768.2 -> your code in between here, you can add as many lines as you want. That when you eventually

4773.46 -> run the code, my points should be 10. And you should only have changed my points via

4780.3 -> calling these two functions a number of times. So go ahead and give this one your best shot

4785.96 -> and then I of course will show you the solution afterwards as well. Okay, hopefully that went

4795.42 -> well. Let's do it together. We'll do function add three points. what that'll do is take

4802.11 -> my points and plus equal three. function, remove one point. And that should do my points

4814.969 -> minus equal one like that. Okay, now we have them, which means that we just need to call

4821.26 -> them a couple of times, we are at three, and we need to get it up to 10. What I will do

4825.719 -> then is I'll first do adds three points, call that three times, because then we'll go up

4832.329 -> to 12. My calculation is correct. From this. Yes, we are indeed logging 12. That means

4842.849 -> that we can remove 1.2 times that should get us to 10. Yes, we are logging out Tim. So

4851.849 -> we have solved the challenge. Great job. Okay, it's time for some strings and numbers repetition,

4862.309 -> you're going to add a bunch of strings and numbers together and try to predict what the

4865.909 -> result is. So here, after each one of these lines, I've added two slashes, that means

4871.53 -> that you can write your prediction, try to go through all these, and then run the code

4876.57 -> and see how you get it. And then I will give it a shot afterwards as well. Good luck.

4884.929 -> Okay, starting on the number two is a string plus a number, we know that JavaScript then

4891.94 -> turns both of these into strings. So it becomes 22. Here, 11 plus seven, that's just two numbers,

4900.219 -> we get 18. And as a number this time and not as a string, six plus five, you might be fooled

4906.969 -> to think that JavaScript would treat this as a number calculation since the number is

4911.281 -> first But no, actually, the string wins, and it becomes 65. Likewise, with this one, here,

4919.199 -> it's very natural to think that what you want to do is add these two points together so

4923.469 -> that it's my points is 14. But no, since you have a string here, everything will be turned

4927.989 -> into a string. And the result will be my points, colon 59, two plus two, that's for just a

4936.06 -> number. And finally, two strings, of course, becomes a string 1114. Like that. Let's run

4942.659 -> this. And indeed, all of my predictions were correct. That was good. Otherwise, I would

4948.67 -> lose all my integrity. So I'm really happy about that. Let's move on. Okay, let's imagine

4957.03 -> that you are working on an ecommerce website. And this website sells shoes. So here you

4961.94 -> can see a Nike shoe with a purchase button. The HTML is located here, of course, with

4967.449 -> an image tag the paragraph for the Nike shoe, the button, but then there's also an empty

4973.86 -> error paragraph. And this is pretty common, because in case there's an error going happening,

4978.8 -> for example, the purchase didn't go through or some kind of bug costly operation to fail,

4983.789 -> or whatever it is, we want to render something inside of this paragraph. So that is your

4989.139 -> job. In this challenge, you are going to set up the JavaScript so that when the user clicks

4993.499 -> on the purchase button, you are to render out something went wrong, please try again,

4998.269 -> in the paragraph that has the ID of error. That's, of course, this one. And the button

5003.659 -> they will click is of course, that one, you can see there is some CSS here, but you're

5008.579 -> not going to worry about that, because this challenge is all about the JavaScript. And

5013.659 -> of course, also hooking up the onclick event listener on this button, you should know how

5018.969 -> to do that by now. And you should also know how to render text inside of a paragraph.

5024.32 -> So go ahead and give this one a shot. And then of course, I will show you the solution

5027.489 -> afterwards as well. So there are two parts to this challenge. First, there's registering

5036.489 -> that the user clicks on the button, and then there is rendering out the text in the DOM.

5042.09 -> So let's take First things first the button. So I'll head over to the button and do an

5047.13 -> on click event listener. And here we need to specify which function we want to run.

5052.699 -> We haven't written any function yet. So let's do that. We'll do a function. I'll call it

5057.75 -> Curtis, because that's what the user is trying to do. Open and close curly brackets. Now

5063.289 -> I can take this function and specify that when the user clicks the button, we want to

5068.909 -> call this function. Good stuff. Let's just console log out. Button clicked. On this code,

5078.349 -> try to click the button

5079.349 -> and yes, we are rendering out button clicked good. The next step is to grab a hold of the

5084.78 -> paragraph that we are going to render text inside of. So we'll do

5089.139 -> let

5090.139 -> error paragraph and do document dot get element by ID. I think in or like that. Again, we

5101.11 -> can do console log, just to verify that we have grabbed a hold of the right paragraph,

5106.159 -> we run the code and bring up the console. And yes, we can see that we have the paragraph.

5111.84 -> Then inside of the purchase function, this is where we want to trigger the rendering

5116.479 -> of the error text, other error paragraph dot text content equals this string right here.

5126.84 -> Now, if we rerun the code, click the purchase button. Yes, something went wrong, please

5133.409 -> try again. And as you can see, it's rendered out in red text, which is very common, because

5137.329 -> we want to grab the users attention and tell them that something wrong has happened. And

5141.579 -> that is, of course, something we have specified in the CSS. But this challenge is not about

5146.239 -> CSS, it was about JavaScript. So great job of solving this, let's move on. Okay, in this

5154.499 -> challenge, you're going to create a very basic calculator. As you can see, in the browser,

5159.65 -> here, I've set up the UI for you. Here, we have two buttons, here we have the numbers,

5165.469 -> eight, and two. And then there's four buttons, add, subtract, divide and multiply. If I try

5170.69 -> to click one of these, now, nothing happens. What do you then of course want to happen

5174.11 -> is that, for example, if you hit subtract, you're to take eight minus two, which is six,

5179.349 -> and then render that out in the sum here, so that it'll say some colon six. Taking a

5185.51 -> look at the HTML, we can see that the numbers at the top number one L and num, two L, that's

5191.949 -> the eight and two are simply spans However, they are empty. So how can we have competent

5198.269 -> them when they are rendered? Well, that is because I'm doing that in the JavaScript,

5202.79 -> first defining two let variables num one and m two, and setting them to eight and two,

5208.229 -> and then doing document, get element by ID fetching out num, one L and num, two L, and

5214.739 -> setting each of their text contents to num, one and number two, and that's why we're rendering

5220.699 -> out these numbers moving on to the buttons, you can see that they are very simple. Only

5226.551 -> the tag and the text, I have not created the event listeners, because that's your job.

5231.28 -> And then finally, the span with the ID of some L is where you are going to render out

5236.59 -> the result of the calculation. So summing this up, you are to create four functions

5241.559 -> here in the JavaScript file, add, subtract, divide and multiply. And then you need to

5246.199 -> call the correct function when the user clicks on one of the buttons. So obviously, when

5250.999 -> the user clicks the Add button, you are to call the add function and vice versa with

5255 -> all the others, then inside of the function, you are to perform the given calculation.

5259.98 -> So in odd, you need to add num one a num two together, and subtract, you will take num

5265.06 -> one minus num two and divide, and so on. Finally, render the result of the calculation in the

5271.57 -> paragraph that has the ID of some element. So go ahead and give this one a shot. And

5276.63 -> then of course, return back to the screencast when you want to see my solution.

5282.77 -> Okay, let's do this. I'm going to start by creating here an on click event handler and

5293.479 -> call this function add because when the user clicks the Add button, we want to invoke a

5297.57 -> function which ought to be named up. And then we need to create the functional function

5302.19 -> ad. Here, what do we want to do? First, we just want to check that it works. And the

5312.44 -> code ad Yes, we are logging out now then we need to grab ahold of the some paragraph.

5319.44 -> So I'll do let some L equals document, get element by ID. The ID is some dash l like

5330.34 -> that. Here, I'm just going to see if it works by doing some l dot txt equals num one plus

5340.679 -> num two. rerunning the code. And yes, there we can see, we're rendering out 10 however,

5349.179 -> we wanted to render out some colon equals 10. So let's try adding some colon, plus num

5356.881 -> one plus num two, running record hitting add. And now we have come into a situation where

5363.769 -> actually, JavaScript is turning all of our three values into strings. As you remember,

5369.729 -> when you add strings and numbers together, they're all turned into strings. What we need

5374.599 -> to do here is first perform the calculation and then concatenate that with the screen.

5380.38 -> So we'll do let result equals number one plus number two, because here we're only adding

5385.369 -> numbers together and JavaScript will treat them as numbers and thus perform a mathematical

5390.329 -> calculation and not a string concatenation. So then we can replace this expression here

5395.829 -> with result. rerunning the code, clicking add, add Yes, there we go. Great stuff. Now,

5404.9 -> I'm a little bit lazy. So I'm just going to copy this, paste it in, and do sub tract and

5412.21 -> simply replace this with a minus, add the on click equals sub drags like that running

5422.11 -> the code, quaking, subtract, six, brilliant. Now we'll just copy paste again divide should

5434.219 -> get this use the division symbol and multiply should use the multiplication symbol. Now

5443.239 -> we only need to add the last two event handlers vide is the name of that function. Bass hair

5455.34 -> and multiply is the name of the final function, running the code trying to add it was 10 brilliant,

5462.739 -> subtract give sex, that's correct divide rightfully gives four and multiply 16 we have made a

5468.599 -> calculator. Good job, you have all reason to be proud of yourself now. And if you didn't

5473.639 -> manage to do this one, if you found that a bit too hard. Now that you've seen the solution,

5477.01 -> just go back and try it again. That's great practice and gives you the muscle memory you

5481.05 -> need. And when you're ready, I'll see you in the next cast. He and welcome to building

5489.659 -> blackjack. I'm so excited about this one because you are going to learn JavaScript while building

5494.92 -> one of the most iconic casino games ever. Here is a sneak peek of the app we are going

5499.8 -> to build. And while it's not a full blown blackjack app, of course, it does share a

5504.63 -> lot of the functionalities with blackjack apps you can play on online casinos. Speaking

5508.81 -> of that, that's actually a huge market, people spend over $20 billion per year gambling on

5515.679 -> online casinos. And personally, I love playing poker and blackjack. I think my life actually

5521.099 -> peaked when I want 100 euros on a casino in Prague in 2016 made me feel like such a gangster,

5527.369 -> we spent the rest of the weekend squatting in front of fast cars, like this Mercedes,

5532.539 -> this Hummer, this BMW and this Bentley. So vital this section, of course, is to make

5538.15 -> you feel as cool as I did in 2016. And with that out of the way, let's just get started.

5546.579 -> Okay, so we're going to kick this off with a challenge, you are going to create two variables,

5554.57 -> the first card and the second card, then you're going to set their values to a random number

5558.809 -> between two and 11. So that's the values you can draw from the deck of cards in blackjack.

5564.42 -> Secondly, you are going to create a variable sum and set it to the sum of the two cards.

5570.119 -> So go ahead and do this right now. Okay, let's do this. Start with the first card, we're

5581.01 -> gonna set it to six, and the second card after nine, then the sum, of course, equals first

5589.55 -> card. last card. Let console log out the sun, run the code. And yes, indeed, we get 15.

5599.26 -> Great job. Let's move on. Okay, so we are ready to build the logic of our blackjack

5607.659 -> game. Now let's have a look at how blackjack works before we try to formulate this in JavaScript.

5612.969 -> So the point of the blackjack is to get a hand that sums up to exactly 21. And if you

5618.059 -> don't get 21, at least you want to get as close to 21 as possible, but never above 21.

5624.02 -> Because if so you're out of the game. So here are three scenarios, one where you have two

5628.53 -> cards on your hand, that's your starting hand, and they amount to 15. So you're still in

5632.909 -> the game, no big reason to either cry or celebrate. And then there's the other case where you

5637.369 -> have a king and an ace. And since the ACE here equals 11, and the king equals 10. You've

5643.84 -> got blackjack. So Woohoo. And the third scenario, we started out with a 10 and a six. And then

5649.65 -> you asked for new card, but then you ended up at 22. So you're over 21. And sadly, you've

5655.28 -> lost your money. So now the question is, how do we translate these things into JavaScript?

5661.579 -> Sadly, JavaScript isn't as smart as you are who can understand this, but just hearing

5665.57 -> me talk about it. JavaScript is kind of stupid. And it needs you to describe the logic 100%

5671.179 -> correct. So let's just do that. So you get to see it in action. We start off with writing

5676.659 -> if and then open and close parentheses. And then it's the sum of our cards that we're

5682.34 -> going to check to say if sum is less than 21, just like we were doing here. So this

5689.239 -> crocodile mouth is something you might recognize from your maths class at school. And it kind

5693.55 -> of makes sense because here on the right hand side, you can see that's where the gap between

5696.739 -> the teeth of the alligator is the largest verse at the left hand side here, the gap

5701.679 -> between the teeth is the smallest. So small value here, large value here. If this condition

5707.749 -> is true, meaning that sum is less than 21. Well, then we add two curly brackets and tell

5713.689 -> JavaScript that we want to execute the piece of code inside of those curly brackets. So

5717.9 -> we'll do console log, do you want to roll a new card, since that's what you can do in

5727.42 -> this scenario, you are still in the game. And you can draw another card if you want

5730.651 -> to. But there are cases where this isn't true. And we need to account for those as well.

5735.329 -> We do that by writing, else F, an open and close parentheses, and here we write some

5741.939 -> equal equal equal 21. This is else if sum equals 21, then we want this code to be executed.

5753.67 -> This triple equal operator is different. From this one right here. Here, we are saying that

5758.559 -> we want the sum to become first card plus second card. But here we're asking is the

5763.55 -> sum strictly equal to 21? You say strictly equal when you see three equal marks, and

5769.69 -> don't worry about why it's three and not necessarily two. We're going to get back to that later.

5774.65 -> For now on just use three equal marks. When you write elsif statements, we are checking

5779.07 -> if a variable is exactly some kind of value. So if the sum is 21, what is the case? Well,

5785.46 -> who the player has blackjack folder for log? You've got, like back like that. And then

5797.01 -> the third scenario, we'll do else if yet again, some. What do you think we'll use here, of

5803.739 -> course, we'll use this one right here. Because if the sum is larger than 21, then the user

5808.389 -> has lost, some is greater than 21, open and closed, curly brackets, console log, you're

5816.26 -> out of the game. I got lucky, let's have these emojis as well. There we go. Now, one little

5824.979 -> thing I want you to notice here is that here, I have to use double quotes to wrap this,

5831.159 -> as I'm using single quotes to create this you've and your words, because if I was using

5837.429 -> single quotes here, it would be completely off because JavaScript would have thought

5842.53 -> that I was intending to close off this string right here, when I'm not intending that I

5847.459 -> was just writing you've instead of you have. So just a little digression there. Now let's

5852.59 -> run this code and see how it works. We'll hit run. And yes. Do you want to draw a new

5857.499 -> card? We triggered this, which seems correct, since I'm plus six is 15. And that is indeed

5862.57 -> less than 21.

5863.57 -> Let's try to do n and 11. So this is blackjack? Yes. JavaScript triggered line eight, which

5871.809 -> is what we wanted. And finally, let's say that we got 17. On the first two cards, and

5877.77 -> we really wanted a new card, we wanted to take the times, but we bombed out by getting

5881.6 -> six, if so are some would be 23. And what do you think will happen? Yes, this line of

5887.449 -> code should be run, I'm gonna run the code, and boom, you're out of the game. Now a final

5892.459 -> thing I want to tell you about before we move on is that could actually skip all of this

5897.57 -> code if we wanted to do like that. Because if some it's not less than 21. And it's not

5904.78 -> exactly 21, either, meaning we've jumped to the third clause in our if else clause, then

5910.28 -> it must be over 21 mean, there's no other alternative in the entire universe. So there's

5916.38 -> no point specifying that some here should be over 21. For this block of code to be executed,

5924.079 -> meaning we can just skip it. So do we have if sum is less than 21, execute this if sum

5930.269 -> is exactly 21. execute that and In all other cases, execute this, this will work as you

5936.79 -> see by running the code in the exact same way. Okay, now that you know that, let's move

5942.059 -> on.

5950.489 -> Now it is your turn to write an if else statement, you're to check if a person is old enough

5955.88 -> to enter the nightclub, which has a lower age limit at 21. And then you are to log a

5961.709 -> suitable message to the console in both cases. And by that I mean if the user is less than

5966.849 -> 21, or if the user is 21, or older. So I've defined the age variable here and also written

5973.269 -> pseudocode. If less than 21, then a suitable message would be for example, you cannot enter

5978.099 -> the club else meaning all other cases because if they're not less than 21, it has to be

5983.829 -> 21 or above, then you have to log something like welcome. Go ahead and give this a shot.

5989.17 -> And if you have forgotten how to write in a false statement, just go back and rewatch

5993.289 -> the previous lesson. And notice here that I don't have an else if statement in between

5998.749 -> here. I only have the first If and the final else, not the elsif, which we had in the previous

6005.849 -> lesson, and that is because I want you to think for yourself and try to figure out,

6009.709 -> well, how do you write this with only an IF and an else and not the if else in between,

6015.059 -> let's give it a shot. And I will show you the solution as well when you return back

6018.849 -> to the screencast.

6022.719 -> Okay, hopefully that went well, let's do this. If less than 21 we have to do age is less.

6032.489 -> Remember this alligator mouth here, and 21 like that, this means the person is maximum

6040.289 -> 20 years old, then we are to do following well, console dot log, you cannot enter the

6050.579 -> club, and then we simply do else. Then we open close curly brackets. and here we can

6058.55 -> console log allcom. running the code we get welcome not correct. Trying to lower the age

6066.699 -> to 20 we get you cannot enter the club. Now a final thing I want to point out is that

6072.46 -> you could also solve this by using another comparison operator, which is the less than

6078.01 -> or equal to that means a slightly different thing though, because it checks that this

6083.42 -> value is less than or equal to 21. So if we take this back to 21, and run it can see we

6092.389 -> get you cannot enter the club, which obviously is wrong, they should be able to enter the

6096.659 -> club at this point. So if we're using the smaller than or equal to operator, we have

6101.559 -> to use 20. Because then we include 20, that is an upper range that is inclusive of that

6107.979 -> number. So now it works. Whether you prefer using less than or equal to or just the less

6115.86 -> than is up to you, you just need to keep in mind all that changes the entire expression.

6119.86 -> With that, let's move on. Let's practice if else statements a bit more, because in Norway,

6128.53 -> we have this super cool tradition where when you reach 100 years old, you get a personal

6134.119 -> birthday card from the king. This is the king King Harold, the fifth of Norway. And in this

6138.579 -> challenge, we are going to code the logic for this. So here it is in pseudocode. If

6145.749 -> less than 100. And here I'm talking about the age variable, of course, then you are

6150.67 -> to log something like not illegible to the console. Else. If the age variable is exactly

6156.119 -> 100, you're to log something like here is your birthday card from the king. And else

6161.159 -> In all other cases, meaning they're over 100 years old, you get not illegible, you have

6166.05 -> already gotten one because if they're 105 years old, they got their birthday card from

6170.34 -> the king five years ago. Okay, go ahead and give this one a shot. And then I will show

6175.19 -> you the solution afterwards as well.

6179.75 -> Okay, let's do this. If age is less than 100, we'll console log, not likable. And then we

6193.429 -> have to do the else if and specify the condition. Age is exactly 100. When we console log, here

6202.239 -> is your birthday card from the cake. And else In all other cases, the person is over 100

6208.03 -> years old, they have already gotten their card, the previous birthday, so not electrical,

6215.77 -> let's run the code. Yes 100, you are getting the card at 45. You are not legible. At 145.

6225.9 -> You are not illegible either. Finally, before you leave, let's take a closer look at this

6231.34 -> triple equals here because it might seem like a little bit of an overkill to have three

6235.469 -> equal signs after each other. And that is a valid point, you could use two. If we run

6241.8 -> the code, it still works with 145. And actually with 100 as well, it would still work, you

6248.13 -> are getting your birthday card. However, the thing with two equals so called the double

6252.59 -> equals is that it's a little less strict. So let's say that you by mistake asked in

6258.03 -> a string here as well, which has the same value of 100. But it's a string and not a

6263.01 -> number. If we run the code, you can see it still works. However, with the triple equals

6268.92 -> running the code, then it doesn't work. Now it says not illegible, even though 100 is

6273.929 -> here as a number and 100 is here as a string. So double equals ignores the fact that this

6280.639 -> is a string. And this is a number basically converts this into a number if it's a number

6286.659 -> on the left hand side as well, so that this entire thing would be true. However, that's

6292.26 -> not what we want. We actually want to be strict in our code, which is why I would recommend

6297.03 -> you to only use triple equals ignore double equals, this forces you, as a developer to

6302.889 -> be a bit more mindful about how you are checking your conditionals, you need to make sure that

6307.719 -> if you're starting out with a number up here, you're also comparing it with a number down

6311.79 -> in the conditional. But that's just good practice being thoughtful as to what kind of data type

6317.86 -> you are using in your code. Just stick with triple equals, and you'll be just fine. With

6323.969 -> that, let's move on. Okay, so now we're back at our blackjack game. And you might have

6332.059 -> noticed that we've lost the code that we previously had. Well, that's the point of scrim, but

6336.4 -> you are going to write the code, not me. So I want you to rewrite the conditional that

6341.309 -> I created previously. But with a slightly different take, you have to follow the logic

6346.409 -> that I lay out in the pseudocode here. So you have to use in the first if clause, the

6352.249 -> less than or equal to operator, so you have to set it to less than or equal to 20. And

6357.44 -> then in the elsif clause, you can use the strictly equal to check if the sum is exactly

6362.88 -> 21. And finally, you're going to use the else clause and not an else F on the third conditional,

6368.36 -> which I did previously. So go ahead and do this. And if you can't do it, or want to see

6372.889 -> my solution just returned back to this screencast. And I will show you how to do it as well.

6380.36 -> Good luck.

6382.92 -> Okay, let's do this. First, there's the if sum is less than or equal to 20, then we are

6392.43 -> console, logging out this string right here. And then we do else if the same as we did

6400.28 -> last time, some triple equals 21. That's the blackjack case. And here, I'm lazy. So I'll

6407.82 -> just copy paste this one. And then this one in here. And then finally, Mark doing elsif.

6415.739 -> And checking for the condition, just doing the else all other cases, and then pasting

6421.79 -> in this, you are out of the game, string like that. Good stuff. Let's run the code. And

6428.03 -> yes, we have 17 here, and we rightfully so logged out. Do you want to draw new harder?

6434.38 -> Good stuff. If we try to hit one more time? with another 10? We are out of the game? Good

6441.51 -> stuff? And how about for blackjack? Oh, great job. Let's move on.

6447.979 -> Okay, so our game is coming along really nicely here. However, there's a big problem. And

6457.51 -> that is, let's say that you are playing this game and you get blackjack. So you get a 10

6461.9 -> and an ace and boom, you've got back back down here at line 13. You of course want to

6467.34 -> cash out your money and get the pot on the table. However, at this point down on line

6471.699 -> 13 JavaScript has no way of knowing which console log it logged out. It doesn't remember

6477.84 -> that. So what we need to do then is introduce a new variable that keeps track of this state,

6483.729 -> you can call it the state of the game, like has the user gotten blackjack? Or maybe house

6488.33 -> the user last, or whatever it is. So what we then want to do is for the scenario, have

6494.209 -> a variable that reflects whether or not the player has blackjack. And when I say whether

6499.51 -> or not yes or no, is there a data type in JavaScript that you think might be suitable

6504.64 -> for describing such a state? If you guessed a Boolean, a true or false, it is correct.

6510.539 -> So what we'll do sudo, let pass backtrack like that. And set that initial value of course

6517.71 -> defaults because default, you don't have blackjack, then here inside of the if clause that describes

6527.05 -> the blackjack case, we're simply going to reassign the Hass blackjack value to true

6533.969 -> instead. Now down at line 16. If we log this out, has blackjack value and then run this

6542.3 -> code, boom, you can see that we're both logging out on line nine, and we have persisted the

6549.179 -> state. So the line 16, for example, can start writing the code for taking the cash that's

6553.809 -> on the table that now is rightfully yours, and then deposited into your account. So now

6558.71 -> we have an app that keeps track of the data of the state in a much more sensible way.

6563.919 -> I want you of course to write this kind of logic yourself. So in the next cast, I'm going

6568.3 -> to give you another challenge so that we can keep track of even more of the state of this

6573.32 -> game.

6574.32 -> I'll see you there.

6576.179 -> Okay, so now it's your turn, and you are going to make the state of our game a little bit

6583.119 -> more robust, because at this point, we're only tracking if the player actually gets

6588.28 -> blackjack. If the player busts out and gets 22 or more, we're not tracking it. And obviously

6593.809 -> we have to do that. So I want you to create a variable called s alive and start by assigning

6599.829 -> it to And then you're going to flip that value to false inside of the appropriate code block.

6606.079 -> So there's three code blocks, the if block, the elsif, block, and the else block. And

6612.25 -> you of course, then have to pick the correct code block, and then write that line of code

6616.82 -> that flips the value to false. And finally logging out to check that you're doing everything

6621.01 -> correctly. So good luck, go ahead and do this. And then I will show you the solution afterwards

6625.26 -> as well. Okay, let's do this. starting up here, we're going to create a loop variable

6634.67 -> called s alive and assign that to true, because when you're starting out, the player is still

6640.84 -> alive. And at which point is the player no longer alive, meaning out of the game? Well,

6646.4 -> that's obviously here in the else block, because that's the case if the sum is 22 or more.

6650.999 -> So here, we'll do this alive equals false. And then finally, we'll console log is alive

6659.209 -> like that. We got true, because actually, we have blackjack, and rightfully so, player

6664.61 -> is not dead. How about if we pretend that we add a third card here, really stupid idea

6670.559 -> because there was card after you've gotten blackjack, but let's just pretend that run

6675.38 -> the code, and boom, false, no longer alive. Great job solving this challenge. Let's keep

6681.099 -> up the pace and move on.

6687.619 -> Now that you've learned about Booleans, let's take a look back at the conditional you wrote,

6692.849 -> because one thing you probably didn't think too much about when you wrote your conditionals

6697.919 -> is that the expressions inside of the parentheses would be translated by JavaScript eventually

6704.639 -> into a Boolean. So it would be either true or false. That's always the case with expressions

6713.76 -> passed into conditionals. Because here we are comparing two numbers, and one of them

6719.209 -> are either larger than the other, or they are two equal numbers. So the claim you come

6724.159 -> with has to be either true or false. Let's try to play this out using an example. For

6730.059 -> example, when you've gotten two cards, a 10, and an 11, meaning you have blackjack, in

6734.789 -> that case, some will be 21. And the claim you come with inside of the first if statement,

6740.409 -> obviously, that is a lie. Meaning it gets evaluated to false. In the second condition,

6748.059 -> though, you're saying that sum is equal to 21. And we know we are going to translate

6752.619 -> the sum into 21. Because that's what it is. So here, you're saying 21, triple equals 21?

6759.719 -> Well, yes, that is a true statements. So that becomes the true Boolean. And here, you can

6766.82 -> read through it. If false, well, then we're going to skip the body of this statement.

6771.38 -> Else. If true, yes, we like true, then we are going to execute that piece of code. So

6776.979 -> this is essentially what happens when you run the code with specific values for these

6782.869 -> variables. rewinding it back. What I want to do now is stress test your comparison and

6790.32 -> Boolean skills. So I'm going to paste in a bunch of console logs here, and then comment

6797.119 -> out our blackjack game. Now your job is to look at each of these expressions, and predict

6804.309 -> whether true or false is logged to the console. So write either true or false after these

6810.749 -> two slashes on each of the lines from one to seven. And then of course, when you've

6815.09 -> given it a shot, run the code and see how it went. And then I will do the same thing

6818.8 -> afterwards as well. Go ahead and do this right now.

6824.57 -> Okay, let's do this. First, Fort cripple equals three. Obviously, that's wrong. gonna log

6834.739 -> out false. Five is greater than two. That is true. And 12 is greater than 12. No. 12

6844.039 -> is not greater than 12. It's exactly the same. So this will be a false statement. We is less

6850.34 -> than zero. Again, that's also false. Three is larger than or equal to three. Yes, that

6858.409 -> will be a true statement. Because it's not larger than but it is equal to. So 11 is less

6867.82 -> or equal to 11. Again, it's not less than 11. But it is equal to 11. So it's true. And

6875.57 -> three is less or equal to two, no three is actually larger than two, meaning that this

6880.439 -> is going to be false. So this is my prediction. Let's run the code. Bring up the console.

6887.219 -> And yes, I was right. Very good. Let's move on. Welcome back, my friend. I hope you are

6897.919 -> ready for a new challenge because that is Exactly what I have in store for you. Now,

6901.889 -> actually, it's a three part challenge, because you are going to make our program a little

6906.169 -> bit more robust in the sense that it might be that these console logs here that we're

6911.489 -> just throwing out into the void log into the console and forgetting all about can be used

6916.249 -> later on down the line, or that we have some reason to want to keep track of them maybe

6920.36 -> want to render it out at multiple locations in the app, maybe there's some notification,

6925.169 -> and there's text, there's a log of messages you've gotten. Maybe we want to repeat it,

6929.789 -> I don't know, there's tons of reasons for keeping this data. Very few reasons for just

6934.659 -> logging it out. Want to keep it in a variable, just like we've done here, with the house

6939.519 -> blackjack, and it's alive. So your three part challenge is to first declare a variable called

6945.86 -> message, and then assign its value to an empty string. And then you are going to reassign

6950.829 -> the message variable to the string, we're logging out, notice here and I'm using some

6954.869 -> fancy words like I'm seeing the clear instead of creative variable, I'm seeing a sign instead

6960.05 -> of set its value. That's because I think you now we're ready to hear some of these fancy

6963.78 -> JavaScript words. Because there are subtle differences between these words, like here,

6967.8 -> we are actually declaring the variable. And then we are assigning it when we set the value

6973.831 -> to true. This is, after all call to the assignment operator in JavaScript, and then naturally,

6979.729 -> so when we change a variable or assign it yet, again, we re assign it. So I just want

6986.439 -> to use the correct terminology here. But I think it's important that you don't get put

6991.04 -> off by all of these words, and think that you have to remember them all you do not,

6995.15 -> it's perfectly fine to talk about this, using your own words, create change, set the value,

7001.3 -> whatever, I just want you to also be exposed to these technically correct ways of expressing

7006.73 -> it. Anyway, enough talk, as I said, step two, you are going to reassign the message variable

7012.82 -> to the string that we're logging out. So I don't want any more console logs inside of

7017.439 -> these three code blocks. Because the only code block is the one you're going to create

7022.32 -> in part three of the challenge when you are going to log out the message variable. So

7026.73 -> go ahead and give this your best shot and then return back to this screencast when you

7030.34 -> want to see my solution.

7034.389 -> Okay, hopefully that went well. If not, no worries, let's do this together. First, we'll

7042.929 -> start by declaring this let variable, we'll call it message. And we'll set it to an empty

7048.669 -> string. Then on line 1113, and 16, we need to replace the console. log with a message

7056.169 -> equals like that, and also remove this, close parentheses, do the same thing here, move

7061.929 -> this one, and the close parentheses and then write message equals, finally, here as well.

7069.88 -> And then we are ready to log it out. Down here at line 21. While log out the message,

7075.8 -> run the code. And as you can see, we're logging you are out of the game. That is correct,

7080.07 -> because we have this really stupid move where we got blackjack, but we asked for new card

7084.949 -> to remove this, run the code. Yes, you have blackjack, again with for example, 14. And

7091.139 -> yes, I can now grow a new card. So great job reaching this far. Let's move on. Okay, now

7102.3 -> it's time to fix our biggest flaw in our blackjack game, which is that it has no user interface.

7107.01 -> If we want this to be a hugely successful online blackjack game, it has to use HTML

7112.489 -> and CSS so that users can play it via a browser. And I've actually set up the basics for you.

7118.541 -> Here, you can see an HTML file with a head and a body. And then inside of the body, we

7124.28 -> have an h1 with text blackshark. And also, we are linking to the JavaScript file here

7128.749 -> on line eight. And as you can see, if we bring up the mini browser, this just renders out

7133.479 -> the h1 tag. So your job now is to link this HTML file to the CSS file. You can see I've

7141.269 -> created just one CSS rule in this file. And it will be applied, changing the color of

7146.659 -> the title when you manage to add a link to the CSS file here on line five. So I almost

7153.01 -> every single time have to search on Google for how to link to CSS from HTML, I end up

7158.019 -> at something like this. So I want you to do the same thing. And one tip would be to find

7163.729 -> this w three schools right here, as they often pop up on Google and contain the necessary

7168.519 -> information. So go ahead and figure this out on your own, and then I will show you the

7172.929 -> solution afterwards as well. Okay, hopefully, you nailed that one. If not, no worries, let's

7182.999 -> first check out Google. Then if we click into the W three school site, you'll see the following.

7189.199 -> And it tells us that there are three ways to insert CSS external, internal and inline.

7193.76 -> And we are using an external CSS file. So we want to scroll down to external CSS. If

7199.199 -> we do that, we see The code here and the line we're looking for is this one, Link REL equals

7203.849 -> stylesheet href equals my style dot CSS. Okay, good. Let's do link rel, and that is short

7212.789 -> for it relation. So what is the relation between this HTML file and the current file, you're

7218.239 -> going to point two now while it is that the file you are pointing to, say stylesheet,

7222.55 -> because as you remember, CSS is short for Cascading Style Sheets. And then it is the

7227.61 -> href, which in our case is index dot CSS, we are in the same directory. So we don't

7234.159 -> need to navigate into a folder or anything like that will just write index dot CSS. And

7239.09 -> the href attribute is something you should be familiar with by now as that's also what

7243.539 -> we use when we are creating links. Now let's run this code boom, you can see the color

7248.659 -> has changed, meaning we are indeed importing this stylesheet. Great. Okay, now it's time

7258.469 -> for you to style this app. Because as you can see, it looks kind of bad. I've added

7263.53 -> a few more paragraphs here, as you can see one, which says want to play around and has

7267.86 -> an ID of message shell, and then just two other paragraphs that will display the cards

7272.199 -> and some eventually, your job now is to take this HTML and make it look like this. If we

7278.63 -> head into the index dot CSS file, you can see it says complete the CSS styling according

7283.039 -> to the provided the sign in here I've created two new selectors for you the body and the

7288.979 -> message. Oh, and the thing is, you can create this entire design by only using these two

7294.989 -> selectors. So that's why I have them here for you. I've also added a table dot png,

7299.63 -> inside of an images folder. That is for the zero background that we are using here. And

7305.13 -> you've learned all about how to do this styling in previous modules of the career path. So

7309.11 -> if you struggle, you can go back and rewatch some of those lectures if you want. Now, before

7313.97 -> you start solving this challenge, I'm going to add the font family for you. Because we're

7318.979 -> using the treble Shea font here. And you haven't really learned how to do that. So I'm going

7322.769 -> to do it for you. We do font family up in the body. And here I specify treble Shea.

7329.32 -> And as you noticed, what happened now was that the editor

7332.11 -> gave me a bunch of other fonts as well. And this is called a font stack. And the reason

7337.869 -> we use font stacks, because if your operating system doesn't have treble Shea ms installed,

7343.84 -> well, then your browser can't show that font, unless you've also imported it from Google

7348.38 -> fonts, for example, or included in your project, neither of which we have done right now. So

7353.65 -> if your operating system can show Trevor Shea ms, then we're telling it to look for new

7358.55 -> CSS Unicode, then, if you don't have that, either, we'll look for Lucy around they and

7362.889 -> so on, and so on. So it's kind of ensures that at least we'll find a somewhat similar

7367.219 -> file as it moves downwards in the stack. And at least find a sans serif font here, which

7372.239 -> is our final choice. But let's start with fonts there, I don't want to get deeper into

7376.639 -> it. Now we have the crib sheet font visible and hopefully it's visible on your end as

7381.38 -> well, because crochet is one of those fonts that are so called web safe, meaning that

7386.019 -> almost all operating systems have them installed, so it's safe to use. Now, I want you to take

7392.13 -> a look at this design and add whatever CSS you need to the body and the message shell

7398.11 -> so that you turn this boring page into what looks much more like a real blackjack game

7403.36 -> to go ahead and do this right now. Okay, hopefully that went well. I'm gonna start with the background

7413.249 -> image. So I'm gonna write a background image, then fetch this table up PNG here, I can do

7419.739 -> URL open and close parentheses, then navigate into the images folder, grab ahold of the

7425.38 -> table dot png, like that. Now we can see we have the nice background. However, if I drag

7432.169 -> this wide, I can see that some point we reached the end of the image and CSS adds the image

7438.39 -> yet again, after that, we get this ugly looking line we should don't want, we instead want

7443.769 -> to use the background size property and set that to cover. Now no matter how wide you

7449.139 -> make it, these image still covers the full width. Okay, next step is to center this text

7456.38 -> and make it white. So we can do text align center to center everything and polar white

7466.939 -> like that. So with this, we are turning everything into right, except for the atrium, which you

7473.87 -> can see it here we have specifically specified that the atrium should be colored goldenrod

7479.309 -> and that overwrites the color right on the body element. Next up, you see here the text

7486.439 -> is a bit bolder, so we want to do that as well. We want to do font, weight, bold like

7491.63 -> that.

7493.85 -> Starting to look good.

7495.329 -> There's just one final thing to start you can see the message element which is The message

7500.51 -> for the user is an italic. Here, it's still just normal. So in the message l will do font

7507.28 -> style and set back to italic. Like that. There we have a nice looking blackjack game. So

7514.82 -> with that, let's move on. Okay, so now we need to enable our user to click a button

7523.949 -> to play the game. And we're going to do this through a challenge. Of course, I'm really

7528.32 -> excited about this one, because it includes both HTML, CSS, and JavaScript. So this is

7534.269 -> the first time where you'll use all three languages to solve a problem. And the reason

7540.21 -> this is so cool, is because this is how it works. In real life, when you get a job as

7543.989 -> a professional developer, you'll juggle between HTML, CSS, and JavaScript all the time. And

7549.729 -> this is an opportunity to start practicing exactly that. So it's a three part challenge,

7555.55 -> starting here in the HTML, where you are going to create a button that says start game, and

7561.949 -> it should call a start game function when it's clicked. So obviously, then you also

7566.669 -> need to create that start game function, you'll do that in the index dot j s. Here we are

7571.71 -> to create the start getting friction, and move the conditional below line 11 to 20 knots,

7578.189 -> these lines into the body of the function so that this code is run when the button is

7584.26 -> clicked. And then finally, you have to make the button look good for the user, you are

7589.03 -> going to style it according to the provided design. And that is exactly here, you can

7594.119 -> see the Start button. So just click to open this slide whenever you need to take another

7598.449 -> look at it. I'm doing this translating a design into CSS is something the front end developers

7604.07 -> do every single day. So it's great practice, I've given you three values for properties

7609.55 -> here is the color of the text that should have this hex value, the width should be 150

7615.199 -> pixels, and the background should be golden Rob, same as the text color on the A Tron.

7621.229 -> This is a big one. So I can totally understand if you'll struggle a bit going through this

7625.36 -> one, but give it your best shot, and then return to this screencast when you want to

7629.519 -> see my solution. Good luck. Okay, hopefully that went well. Now, let's do this. Here,

7641.999 -> we'll do like up opening tag, and then I'll do the closing tag as well. And inside All

7648.739 -> right, start game like that. Let's run the colon looks not particularly good, but it's

7655.19 -> at least there and it's actually centered. The reason for that is because here on the

7660.689 -> body, we are centering all of our texts, and that also centers the button. Next up, we

7667.139 -> need to call the start game function when it's clicked. And if you remember how that

7672.09 -> was, then you'd write on click equals, and then the start game with open close parentheses

7680.079 -> inside of a screen right here. So when the button is clicked, we're going to call or

7683.579 -> invoke the start game function, then we need to create that function. And if you remember

7689.939 -> how to do that, it is through the function keyword function, start game, open and close

7695.909 -> parentheses and then curly brackets for the body on the function. Inside of here, we are

7701.539 -> going to take this code, copy it, paste it in, I'm going to give it a tab so that it

7706.66 -> looks better like that, and remove the empty lines. Now we have this let's rerun the code

7713.849 -> and see if it works. Yes. Previously, we got this console log just by refreshing the page.

7719.9 -> But that doesn't happen. Now I have to actually click the Start game. Then we run this then

7725.4 -> we console out the message. Great job. Now let's move on to the CSS. Okay, this is how

7730.599 -> we want it to look. Let's take the first three provided the sign hints and see how close

7735.559 -> we get just by implementing them. next color. Notice the color property that hardly see

7744.829 -> it since the text is so thin, but that's okay. For now. Let's just set the width with 150

7750.869 -> pixels like that. Okay, looks a little bit better. And the background should be golden

7758.169 -> Rob. Okay, so looking a little bit better. Not quite this design here. As you can see,

7765.229 -> it has some space above and below the text, versus this one is much more cramped. Let's

7771.071 -> add that. And if you remember from the CSS section, you could add that space by using

7775.94 -> the padding. That's padding top and padding bottom. Five pixels. looks about right. padding.

7785.719 -> Five pixels there as well. Yeah, not too bad. However, as I mentioned, this text is really

7791.57 -> thin. And here it's much thicker. So let's actually do font weight. bold. Yes. About

7800.409 -> looks much better. Now, the next thing I want to fix is the border around the button. Because

7806.409 -> you can see it's totally clean here and has no border. But the default styling that our

7811.19 -> browser provides has this little border. So we want to do border, none. Okay? Now it's

7818.439 -> actually pretty similar or almost identical, but only one thing separates them. And that

7824.432 -> is that you can see the edges are sharp on this one, where's the edges are a bit rounder

7830.84 -> on our provided the site. So that is the border, radius. And pretty subtle. So I'm going to

7839.05 -> try to pixels. And yes, that looks as far as I can see, identical. So this was a huge

7846.849 -> challenge. And you had to context switch between HTML, CSS, and JavaScript. So be really proud

7852.639 -> of yourself for reaching this far. If you struggled, and didn't really manage to get

7856.909 -> to the finish line on your own, I think you should just go back and try it again. Now

7861.059 -> that you've seen my solution, that's a great thing to do to reinforce what you've just

7865.15 -> learned, whatever you do, I will see you in the next lesson.

7869.419 -> Okay, so now our player can click the Start game button like this. However, we're only

7878.459 -> logging out the message. Obviously, we don't want to do that, we want to display that info

7883.349 -> on the page, along with, of course, information about the cards and the sum. But starting

7888.52 -> with the message, I want you to solve a two part challenge. First, you are going to store

7893.619 -> the message l paragraph, that is this one right here in a variable called message l

7901.209 -> using the camel case naming convention. And then you're going to display the message using

7907.51 -> message l dot txt content, then, of course, you can remove the console log right here,

7912.53 -> since we don't need it anymore, as the message will pop up here in our app instead. So go

7917.64 -> ahead and give this a shot and return back to me when you want to see my solution.

7924.07 -> Okay, so the way to do this is, if you remember, first by creating a variable with length message,

7934.439 -> l, and then using the document keyword, dot get element by I Li passing in the ID, which

7943.979 -> we can see from the HTML and just copy from there actually paste them in here. That's

7951.73 -> always Ctrl logging to see that we are on the right track running this code. And yes,

7958.76 -> there we can see we are logging out to that element. Now it's just a matter of deleting

7963.989 -> this line being messaged l dot text content. And what we want to set the text content to.

7972.15 -> We want to set it to message like that. If we now run the code, hit the start game button.

7978.489 -> Yes, there we go. Do you want to draw a new card? Great job. Now there's one thing I want

7983.5 -> to do before we round off, that is actually to remove these emojis because when they are

7988.31 -> italicized, they don't look that good. And while that isn't the most complicated thing

7993.059 -> to fix, it's not something I think you should learn. Right now, I want to keep up the pace.

7997.539 -> And also when we see this text here rendered on the page. It's kind of our dealer speaking

8001.76 -> to us in metallic text. And I don't think our dealer should show that much emotion.

8006.21 -> So it makes sense to remove these modules like this. And also maybe make it a bit more

8011.88 -> neutral dealers will just tell us that we have blackjack on shout out. Whoo. So makes

8017.09 -> more sense on your card. Yeah, looks good. If we get blackjack. Yeah, I think that looks

8022.86 -> good. So with that, let's move on. Okay, so let's make our game a little bit more useful,

8032.329 -> because now you can click the Start game button. And indeed, we get the message from the dealer.

8036.369 -> But we have no idea what are some cards are, so we obviously need to render that out. And

8041.829 -> we're going to start with the some though it's a three part challenge where you first

8045.769 -> have to head into the HTML. And there give the some paragraph that is this one, an ID

8052.059 -> of some dash L, then you are to store the sum paragraph in a variable called sum l like

8058.949 -> this in camel case, finally render the sum out. So here I'm talking about the actual

8064.739 -> numeric sum on the page using this format, so some colon and then the given some you

8071.969 -> have up here. So here you have to keep this text which is already in the DOM intact, but

8079.84 -> we have done that before. So hopefully you'll manage it. If not, no worries, you can just

8083.999 -> revert back to this screencast and I will show you how to do it as well. Go ahead and

8088.409 -> give this your best shot right now. Okay, let's do this. First, we'll give this an ID

8099.499 -> of Some bash L, moving over to the JavaScript will do let some l with the camel case this

8108.789 -> time, do document, get element by ID open and close parentheses and the quotes passing

8117.489 -> in the ID that we just added to the HTML element, some bash L. Now, just to be certain, let's

8124.709 -> just console log the sum L, from the code. Yes, indeed, we are grabbing the element.

8132.19 -> And then we need to render out the string of some, and then the actual sum, which in

8138.63 -> this case is 14, from this variable up here, into the element itself. And the way I'll

8145.07 -> do that is I'll use some L, and then text content, which you should see in a few times

8151.05 -> by now, and set that equal true, not only the sum, because if we do that, let's rerun

8158.389 -> the code and stop the game, then we simply just clear out the existing text verse, we

8163.229 -> want to keep the sum there. And we can do that in multiple ways. But we all do it is

8168.389 -> simply just write some colon space, and then plus here. So let me just reconstruct

8175.789 -> the default text as well, in addition to the sum, I think this is a nice way of doing it.

8181.11 -> If we run the code, stop the game. Yes, there we go. Now, before we move on, I want to teach

8187.449 -> you about a another way of grabbing elements from the DOM. Because we've used to get element

8193.38 -> by ID a few times now. So I'm assuming you're comfortable with this technique, and are ready

8197.94 -> to learn another one. And that is something called the query selector. And to learn that,

8203.65 -> but comment out this one, and copy it to a new line where we can change it. And here,

8210.421 -> instead of get element by ID, we'll do a query selector like that. Since this is a more dynamic

8218.051 -> method, we have to be a bit more specific in the value we pass into it. So here, we

8223.65 -> actually have to pass in a hashtag in front of the summer to tell the query selector,

8228.301 -> that it's actually the element with the ID of some URL that we're looking for. Because

8234.13 -> unlike the get element by ID, we're not specifying that it's an ID. In the method name, it's

8240.6 -> just called query selector, which is kind of a broader expression. So query, that's

8245.98 -> another word for question. And selector that refers to CSS selectors. So we're kind of

8251.63 -> asking for an element by its selector. And then we specify the given selector inside

8257.29 -> of the parentheses. So here, if we run this start gate, the exact same thing happens.

8263.38 -> Now if you've forgotten what a CSS selector is, we can head over to the CSS, and it's

8268.11 -> these guys right here, the body, that's just selecting the body element, this one. And

8275.041 -> then there's the id selector right here, you can see we are using the hashtag, grab the

8280.04 -> message L, because this paragraph has an ID of message dash L. Likewise, some has an ID

8288.4 -> as well. So we're using the hashtag, to tell query selector that this sum dash l comes

8294.61 -> in the form of an ID. Now, this means that we could change this to a class instead. However,

8304 -> then we also have to change this hashtag and replace it with a dot. Hopefully, you remember

8308.46 -> that the way to select CSS classes is by using the.we. Run this, it still works. And actually,

8316.6 -> we could even pass in just the element name as well, we could do body right here. However,

8322.42 -> it would break our hop since we're now Okay, just clearing out the entire body when we

8330.041 -> are running this piece of code down here on line 11, because now somehow actually refers

8335.55 -> to this entire body. So as you probably understand queries lecture is very powerful. And you

8342.76 -> will see it used in a lot of tutorials here on schema master right now, I just wanted

8347.461 -> to show it to you so that you are prepared once you see it in other tutorials and out

8351.59 -> in the wild. In the near future, I am going to stick with the document dot get element

8358.04 -> by ID as not just a job for us. And it's also a very simple method to understand. So I'd

8364.09 -> like to avoid the added complexity of jumping between get element by ID and query selector

8369.46 -> if we can. Without let's just move on. Okay, let's continue building that muscle memory

8379.5 -> of yours you are going to do almost the exact same thing as you did with the sum. But this

8384.03 -> time with the cards because obviously when you start the game you can see or some now

8388 -> but you can't see your cards that has to be fixed. So it's the same three part challenge

8393.25 -> starting in the HTML where you are to give the cards paragraph, an ID of card cell, then

8398.75 -> in the JavaScript, you are stored the cards paragraph in a variable called card cell with

8403.42 -> camel case, and then finally rendered out in this format right here. So go ahead and

8409.54 -> do this right now. And then I will show you how I will do it when you revert back to the

8413.8 -> screencast as well. Okay, let's do this first, giving this an ID of

8426.19 -> cartel.

8427.641 -> Then storing the card paragraph in a variable called also cartel, let cards l in camel case,

8435.73 -> this time, document dot get element by ID, passing in cards, bash shell like that. Now,

8445.17 -> I'm just going to jump straight to this line here and do cards l dot text content equals

8453.63 -> constructing the entire contents of the paragraph this time, so we're clearing out the text

8458.4 -> that's already there and replacing it with a new cards column. This will be actually

8465.79 -> cleared out and replaced using JavaScript, then plus the first card and then have to

8472.83 -> add a space between the first card and the second card. And then the second card like

8479.25 -> that. If I run this code, start the game. And there we go, we have both of the cards

8485.45 -> rendered out. Great job. Let's move on. So our game really starts taking shape. Now we

8496.48 -> hit the start game button, and we get the message the cards in the sun. However, the

8500.67 -> critical part of blackjack is the ability to draw a new card from the deck. So we need

8504.71 -> to start building that feature. And we are going to first begin with creating the new

8509.811 -> card button, as you can see on the slide here. So in this three part challenge, you are going

8513.899 -> to first head into the HTML and create that new card button, then make it run a new card

8519.601 -> function when it's clicked, and then in the JavaScript, you have to create that new card

8524.84 -> function. And for now, it should just log out drawing a new card from the deck. Then

8530.42 -> in the CSS, you need to make sure that when these two buttons are rendered out vertically,

8536.18 -> like this, so above each other, you'll need to make sure that this small space between

8541.23 -> them is added because it won't be added by default. Now, if you enlarge this browser,

8546.171 -> make it wider, they will render out besides each other. But you are not to worry about

8550.64 -> that layout. So make sure that you keep this browser window a little bit narrow so that

8555.36 -> the are rendered out under each other. And then make sure that you get this little gap

8560.061 -> here. So this is again, a very holistic challenge. You're to write JavaScript, HTML, and CSS

8568.71 -> just like it is out in the real world. So go ahead and give this your best shot right

8573.33 -> now. Okay,

8579.68 -> hopefully that went well. If not, no worries, let's do this together. In the HTML, we are

8586.011 -> starting with the button opening closing tag, new card like that, I'll just render it out.

8594.65 -> Oh, there we got it actually got them beside each other, we want them vertically

8599.4 -> like this. So there, we can already see that we are missing in the gap, but that we want

8604.841 -> it. That's the CSS or the challenge. Let's continue on with the HTML and get that wrapped

8609.84 -> up. We'll do on click equals and then run this new card function which we haven't created

8617.2 -> yet, which we are going to create right now down here. function, new card open and close

8624.01 -> parentheses. And then the curly brackets for the body of the function inside here, logging

8629.54 -> out this string got provided in the comment like that, I will run this code hit new card.

8637.95 -> And indeed, we are logging it out. Now final step is to add this gap right here, we need

8643.58 -> to head into the CSS. And there are multiple ways to do this. One way is to just say that

8649.08 -> we want any button to have a little bit of margin below them. So this is about four pixels.

8654.9 -> So we can do

8657.47 -> margin bottom four pixels like that there we see that our button works. Alternatively,

8665.34 -> let's say that we in some case, end up with a situation where something comes too close

8668.851 -> to the button on the top side of it. Well, maybe we need some margin on top of it as

8673.311 -> well. We find now add margin bottom and margin top four pixels here, margin top four pixels,

8680.21 -> what you'll see is that the gap here became twice as wide because it has the top margin

8685.12 -> that pushes it down, and also the start game button that uses its margin bottom to get

8689.78 -> the gap even larger. So what we then instead can do is take two pixels on each now we have

8698.05 -> something that looks very much like this. We have created our buttons so that they always

8702.411 -> have some space below and above themselves. I think that makes a lot of sense as buttons

8707.93 -> usually want a little bit of space around them. With that, let's move on.

8714.75 -> Okay, let's make our new card function a bit more useful, because now it's just rendering

8721.78 -> out the string for people wanting to do is to actually draw a new card, and then add

8727.45 -> that new card to the sum, and then rerun the code that is inside of the start game function

8733.12 -> so that the sum is added to the page. And actually later down the line, we also want

8737.88 -> to show the new part of course, but as for now, we're just going to worry about the sum.

8742.66 -> So this is a three part challenge where you are to first create a card variable. And we're

8748.74 -> still just working with hard coded card variables, you're just going to coat it to a number between

8753.68 -> two and 11, then we are going to add this new card to the sum variable. And the sum

8759.821 -> variable as the one up here, of course, which currently is the first card plus the second

8763.92 -> card. And in this case, it will be plus the third card as well as you need to plus equal

8769.3 -> the sum variable. And then finally, you are going to just call the start game function.

8774.771 -> Because what does the start game function actually do? Well, first, it renders out the

8779.381 -> two cards. In our case, now we'll have added the third card. So this will still be wrong.

8785.15 -> But line 13 will render out actually the new sum, because at this point, some will have

8790.55 -> changed since we will have modified it down here. And then it'll show the message based

8796.19 -> upon the new updated some. Actually, it seems that we can use this start game function even

8801.84 -> after we've drawn a new card. And thus, we're going to rename it a bit later. But for now,

8806.4 -> let's just keep it how it is. and your job is just to call the start game function here

8809.97 -> on line 33. So go ahead and give this challenge your best shot. And then I will show you the

8815.44 -> solution as well afterwards. Okay, let's do this. So, let card here we'll set that to

8827.3 -> a random number between two and 11. I'll do seven, and then we're going to add the new

8831.851 -> card to the sum variable. If you remember how we add numbers to an existing variable,

8836.69 -> it's via the plus equal operator. So we'll do some plus equal card, and then we'll call

8841.771 -> start in. So again, like that, let's rerun the code first to start game. Okay, do you

8849.271 -> want to draw a new card, I happen to want to do that. So I'll hit new card, and boom,

8852.83 -> I drew the seven card, which then made the sum reach 21, which then again, made our dealer

8857.601 -> tell us that we got blackjack. So that is exactly what we want. Now, let's see what

8862.59 -> happens if we instead of a seven, got an eight. For now, rerun the entire code, start game

8868.55 -> and then hit new card, bam, then we're out of the game since we have some equals 22.

8874.09 -> And if we got a six instead, rerun the code start game your card, then we still get the

8879.3 -> Do you want to draw a new card text since we're still below 21. Now I can actually hit

8884.46 -> the new card yet again. And then we are out of the game. Now we're at 26. So this works

8889.59 -> for multiple cards. Of course, it's only the sum that's reflected right now, not the card.

8894.26 -> So we'll have to fix that in a bit. But for now, let's just move on and first fix this

8898.84 -> little problem. That's the start game function name doesn't really make sense anymore. Since

8904.311 -> we're calling start game here at a point where the game has already started so semantically,

8909.03 -> it doesn't really add up. So let's move on to the next cast. So the problem now is that

8919.73 -> the start game function is triggered both when we hit the start game button, which makes

8923.96 -> a lot of sense, but also when we click the new card button, because even though the new

8930 -> card button triggers the new card function, which is this one right here, that function

8936.03 -> itself calls start game as well. And while this makes sense, because we want to run this

8942.28 -> code, the fact that start game still is called start game doesn't really make sense. Because

8947.431 -> if another developer comes in here and looks at that code, he'll be like, Why are restarting

8952.75 -> the game all over again, when clicking a new card that doesn't semantically add up. So

8957.75 -> what we want to do here is actually just change the name of the start game function, for example,

8963.091 -> to render game, because that's essentially what we're doing, we're rendering out the

8967.83 -> current state of the game. So we can do render game, just rename this one. And this one does

8973.24 -> that. So far, so good. But then the problem becomes that we're actually calling start

8978.36 -> game here. And we could do a render game like this. But actually, I want to keep this stock

8984.78 -> game function intact. Because down the line, there might be some other things you want

8988.79 -> to do in this game initialization function. So I want you now to create a function that

8994.89 -> uses the name, start game and then just calls or invokes render game. That's all it should

8999.92 -> To show that this start game button will work, because now I can see it doesn't work. When

9005.79 -> I click it, we're actually getting a reference error saying that start game is not defined,

9010.351 -> because we're trying to call a function that no longer exists. So go ahead and create the

9015.561 -> start game function here on line 12. And make it just call this render game function right

9020.44 -> here, go ahead

9021.44 -> and do this right now. Okay, hopefully that went well, the way to do it is through function,

9032.51 -> and then start game, open and close parentheses, open close curly brackets, and inside here

9039.01 -> just called render game like that. let's rerun the project, hit start game, and yes, now

9046.72 -> it works again. Great job. Okay, so now we need to fix up with the rendering of the carts.

9056.04 -> Because if I hit start game, and I get the two cards out and then hit new card, indeed

9060.58 -> are some increases, but our cards paragraph are displaying only two of the three cards

9065.44 -> we've pulled from the deck, because we have a 10 and a four, and a six, whereas we're

9070.5 -> only showing the 10 and the four in the browser, because that is hard coded here to only do

9076.41 -> that, no matter how many cards we pulled from the back, this line 16 will always just render

9082.21 -> out the first card and the second card. So this line here in pseudocode says render out

9089.32 -> first card and second card. But what we instead need is something that says render out all

9098.63 -> the cards we have, regardless of how many cards if we have five cards to render out

9104.5 -> five cards, if we have two cards that should render out two cards. But that's not possible

9108.8 -> with the current implementation. And what we need is a central way of storing all of

9113.19 -> our cards, we need to store all of our cards in one variable, regardless of how many cards

9118.46 -> it is. And the way to do this is actually to use what's called an array, which is essentially

9123.73 -> a list of items. And I'm going to create an array here, and it's totally okay, if you

9129.17 -> now feel confused, I just want to give you a little sneak peek at it, before we take

9133.101 -> a deep dive and give you some practice on it. I'm gonna do let cards equals and then

9138.08 -> open and close square brackets. That's the notation for creating a race and inside of

9143.59 -> these square brackets, I'm going to paste the first card, and then a comma, and then

9149.09 -> the second card. So this is now a cards array that includes both cards ordered by the first

9155.87 -> card first and the second card Second, you can call this an ordered list of items. Now

9163.79 -> we're down at what's line 18 now and replace the first card by referring to the array instead.

9171.851 -> And doing open and close square bracket and zero. Don't worry about that you understand

9177.42 -> that in a minute. Let's just now do the same things for the second card will be cards open

9182.55 -> and closed square brackets, and one. This is referring to this one right here. And one

9191.9 -> is referring to this item right here. And that is because arrays are so called zero

9197.21 -> indexed, they start at zero and one. And if we add a third card here, that would be index

9204.5 -> number two, but we don't have a third card. So let's remove that. Now even though you

9210.431 -> might feel a little bit confused, now let's just run the code, hit the start game and

9215.22 -> see yes, that still works. So this way of doing it was the exact same as what we had

9220.28 -> previously, when you just hard coded in first card and second card like this. Now this opens

9224.87 -> the possibility later down the line to render out all of our cards in a dynamic way inside

9231.591 -> of the cards element regardless of how many cards we have inside of our carts array. So

9236.812 -> almost a lot of information. Now we're going to take a step back, work with race, get your

9241.58 -> hands dirty, so don't worry, if you didn't quite understand this as you will surely do

9246.01 -> that after the next few lessons.

9250.751 -> Okay, so arrays are ordered lists of items. However, that's a little bit abstract. So

9259.601 -> let's instead look at a real world product and see if we can recognize any components

9264.43 -> that most likely use a race as a data structure. So here we have a LinkedIn profile. This is

9270.671 -> Justin, he's a previous scribus student. And looking at this, there's immediately multiple

9275.69 -> components that most likely use arrays to render stuff out. You can see here on the

9280.501 -> right hand side, there are some promotions actually three of them, and that's basically

9284.8 -> a list of items. And while their order might be a little bit random, they still have a

9289.58 -> specific order. Likewise, with the people also viewed here, that's a list of four people.

9295.92 -> Let's also scroll a bit down. Here we can see even in the main section There's this

9300.67 -> component that says featured that is featured posts. And that's basically just a list of

9305.96 -> items. So LinkedIn probably uses an array to describe this data in JavaScript. So actually,

9312.57 -> let's just create that array, let featured posts like that then equals opening closed

9320.771 -> brackets. The first one was actually just in sharing the Netflix clone he built through

9326.03 -> a course here on scramble, and he actually deployed it as well. So he's going above and

9329.561 -> beyond to check out my Netflix, clone like that. The second one is actually a link just

9337.811 -> in the shared to source code, he's pushed to GitHub, which is also a great thing to

9341.99 -> do, if you want to attract employers. So here's code for my projects. Simplifying, of course,

9352.061 -> the data here because there are multiple parks have this there's an image, there's text,

9357.15 -> there's comments, and so forth. But as for now, we're just simplifying it into streets.

9361.58 -> The third item here is actually just in sharing the portfolio he has built through a scrim,

9365.8 -> of course as well. So I've relaunched my portfolio like that, there, we have an array with three

9374.771 -> items. This line is pretty long. So sometimes you'll see an array formatted like this, as

9381.09 -> it makes it easier to see that it is indeed three items. And a key thing to observe here

9386.76 -> is that we add commas after the items, but not after the final item. So only between

9393.3 -> items, basically. So going back to LinkedIn, there are tons of components here, that's

9399.96 -> probably utilizes a race, for example, the work experience as a list of previous jobs,

9406.25 -> or licenses and certifications. So that's a list of licenses, you can see the front

9410.73 -> end path right here, and skills and endorsements. So a ton of examples. Now what I want you

9416.95 -> to do is to create an array that lists your experience, or education, or licenses or skills,

9424.11 -> or something similar you are to choose what you want this array to contain. But try to

9428.53 -> think how can you best describe your either experience education skills, or whatever in

9433.41 -> a way that would make your LinkedIn profile look tempting for recruiters as that's a smart

9439.24 -> thing to think a little bit about already, even though you're very early in your coding

9443.14 -> journey. So go ahead and do that. And remember that the items should just be strings, just

9448.421 -> as I've done up here,

9450.13 -> go ahead and do this right now. Okay, hopefully, that went well. Now, I'm going to do that

9459.45 -> as well. So I'll do let and then experience.

9461.59 -> That's what I want to create my array about my work experience. And I'm currently the

9466.521 -> CEO app scrim ba. Before that, I was a front end developer at sometta. That's a Oslo based

9475.09 -> company for seafreight analytics. And also, as you probably remember, from our subway

9479.57 -> counter app, I worked as a people counter out in the cold, a company called Knorr stock.

9486.03 -> So that is my experience. Now, before you move on to the next cast, I want to highlight

9492.09 -> the importance of actually being able to describe your background and your skills in a good

9497.12 -> way on LinkedIn, just in here, the person behind the LinkedIn profile we looked at,

9501.41 -> he actually lost his job in the petroleum industry due to the coronavirus pandemic.

9506.12 -> And less than one year later, he now works as a professional software developer. And

9510.42 -> as I said, he did that mostly through scrim Ba, and was a super engaged student at our

9515.46 -> discord channel. And what's so cool about how he did it is that he sent out over 100

9520.22 -> job applications without getting much luck, then went into optimizing his LinkedIn. And

9526.53 -> then suddenly, he got two job offers. And the job he got actually came through a recruiter

9532.061 -> that found his LinkedIn profile as a result of keyword searches. Actually, he ended up

9538.32 -> tweaking his LinkedIn profile so that he attracted the right recruiter who got him an amazing

9543.65 -> job as a developer. So I wanted to share this with you. And if you click on this image,

9549.07 -> you'll be taken to the page for the podcast interview with did with Justin, so that you

9554.11 -> can listen to his story if you want to. For example, when you're riding the bus or out

9558.09 -> walking or cleaning or whatever, I don't want you to interrupt the course and listen to

9562.551 -> this. Instead of coding. It's more important that you code. But you can keep it in mind

9567.21 -> for next time that you have half an hour or something. Because I think you'll learn a

9570.74 -> ton about Justin who at the age of 33 did his career shift. So with that little plug

9576.3 -> out of the way less

9582.971 -> important thing to know about race is that they are so called zero indexed. And that

9588.301 -> means that you want to grab the first item of the array, you do it through using the

9593.59 -> zero index, not the first index. And let me show you what that means in practice beats

9599.771 -> posts. That's our rate. And I want to grab the first item, the checkout mine Netflix

9606.07 -> clone. I'll do that through open and close square brackets, and then passing in the number

9611.001 -> zero right now console, log this. And we run the code, you can see yes, that we are indeed

9617.74 -> logging out that string. So this isn't entirely intuitive since we as humans normally start

9623.411 -> counting at one. But in the race, you start counting at zero. So if this is the zeroeth

9630.771 -> index, which index does this item have? Take a guess? Well, it has the index of two, even

9639.141 -> though it is the third item, I run the code. Now see that passing into logs out, I've just

9646.16 -> relaunched my portfolio. So here is the zero index. This is the first and here is the second.

9654.14 -> Now, with this in mind, I want you to practice this. So you are to take my experience array

9660.09 -> here and log out the following to the console. And in this order. So we are to start with

9667.65 -> the front end developer in this net, and then the people counter and then CEO, what scramble.

9672.34 -> So first, this one, then this one, and then the first one. So you have to write three

9677.86 -> console logs, and place them in order here, starting from line 18. So that I'm sure that

9684.55 -> you actually understand the concept of a race being zero index, I'm going to comment out

9689.28 -> this one right here, so it doesn't disturb you. Now go ahead and solve this challenge.

9694.98 -> Okay, hopefully, that went well. Let's do this together. We're going to do console log,

9706.511 -> I want the front end developer at sonet. Ah, that is not the first but the second item.

9713.01 -> And in terms of indexes, it's the zeros and then the first index, so then I need to do

9718.8 -> variance. Okay, copy this one, paste it in again. Now I'm going to log out the third

9726.42 -> item, which is the second index. So that is experience. And finally, I'm going to log

9733.97 -> out this item right here that has the index of zero. If I run this code, you can see in

9739.771 -> the console that we are indeed logging out the items in this order. Now, before we move

9745.17 -> on, I'm going to confuse you a little bit. Because let's actually delete all of this,

9751.37 -> this, remove the console and just go back to this featured posts. If I now do featured

9758.271 -> posts, dot length, then console dot log this out, which number do you think we'll see printed

9767.88 -> to the console? Take a guess? Well, the answer is three. And that might be a little bit confusing,

9774.38 -> because I've just taught you that arrays are zero index. So the first is zero, the second

9779.69 -> is 1/3 is two. So it would be natural to believe that the dot length property of this feature

9785.051 -> posts is two because the final index is two. But whereas indexes are zero indexed, the

9793.51 -> length is not zero indexed, we count the length of an array in just the same way you would

9799.05 -> count anything in life, which is starting at the number one. So that also means that

9804.55 -> the length property of an array is always one larger than the final index. So this is

9810.64 -> one of those things that are a little bit unintuitive and confusing when learning JavaScript.

9815.13 -> And you probably will mix it up a couple of times. That's not a problem, just trust me

9819.271 -> when I say that, eventually, this will become second nature for you. So let's move on. Okay,

9831.54 -> up until now, or erase have either included only strings, or only numbers, whatever, they're

9839.001 -> not limited to that actually put any data type you want into an array, and you can mix

9844.021 -> as much as you want. So you can think of an erase as kind of a composition of multiple

9849.36 -> data types and their values. So this is why arrays are what we call a composite data type.

9855.75 -> You can say it's composed by its items if you needed to make semantically sense.

9860.75 -> And you'll often hear this also referred to as complex data types, that is erase and also

9865.94 -> for example, objects, which you're going to learn about later. They stand in contrast

9870.42 -> to the primitive data types you have worked with, up until now. The three primitives you

9876.11 -> have learned are strings, numbers, and billions because they are more primitive than arrays.

9882.311 -> They're not composed of many other data types, which are race off an hour. So one analogy

9887.78 -> you can use is that the primitive data types are the Lego blocks versus the array, the

9894.59 -> composite data types. It's kind of like the full Lego model. For example, after you've

9898.53 -> built a little house with your Lego blocks. But anyway, you shouldn't worry too much about

9903.4 -> this. If you find it a little bit abstract and complex, as a developer, you don't go

9907.08 -> around thinking about Oh, is this a primitive data type or a complex data type, it just

9912.04 -> becomes second nature and you don't even think about it. So you shouldn't be put off by this,

9916.96 -> even though it's a little bit theoretical. Instead, I think you should just practice,

9922.15 -> I want you to create an array that describes yourself and use all the three primitive data

9927.71 -> types that you've learned so far. So it should contain your name, which is a string, your

9931.96 -> age, which is a number, and whether or not you like pizza, which should be a Boolean.

9936.8 -> So go ahead and do this right now.

9939.2 -> Okay, hopefully, that went well. Now, let's do it together, I'm gonna create an array

9949.14 -> called pair. And my name is pair, Harold Morgan, I am 35 years old. And I do happen to like

9957.96 -> pizza. And I especially like pizza with pineapple. It's the best though I know that a lot of

9964.55 -> you don't agree with me. So let's not get into a discussion about that, let's just move

9968.23 -> on with the course. One of the most common operations you'll perform on a race is adding

9977.35 -> items to the end of it. That's, for example, what you're going to do in our blackjack game,

9981.95 -> where you start with two cards, and then you want to draw a new card that'll naturally

9986.01 -> then be put at the end of the array, for example, six. However, the way to do that is not through

9991.67 -> actually changing it by rapidly, which I did. Now, you use a method, which is called push,

9997.08 -> which allows you to well push things into the array. So you do carts dot push, and then

10005.5 -> open and close parentheses, and inside of these parentheses, you place whatever you

10009.591 -> want to push. So for example, six, if we now saw log the cards underneath our push operation,

10018.14 -> you can see we have added six to the array. So this here is actually called eight method,

10023.851 -> which is just a fancy way of saying a function on an object. And you haven't really learned

10028.5 -> about objects yet. So don't worry about if you think this sounds a little bit abstract,

10032.34 -> but this operation here is pretty similar as the console dot log, and then passing in,

10038.601 -> for example, hello, do you think we have the first object cards or console, that we have

10044.84 -> the methods to either log or push, then we have whatever we pass into these methods when

10051.93 -> we call them. So this hair cards push is conceptually very similar to what you've been doing

10057.021 -> all along.

10058.17 -> Let's now make sure that you build muscle memory on this by solving a challenge. So

10065.54 -> I want you to imagine that you're building a chat application, for example, the one I

10069.48 -> showed you here on LinkedIn, and the data structure we'll use is, of course, a race.

10074.28 -> And we'll pretend that each of these messages is an item in the array. So when someone types

10080.08 -> in a new message, and since it, well, you want to push that new message to the array.

10084.78 -> So here you are to push the new message variable, that's this one down here, into the messages

10090.92 -> array. That's this one here. And then you are to log out the array to just verify that

10096.7 -> you actually succeeded in pushing the item. Go ahead and do that right now. And then I

10101.58 -> will show you the solution afterwards as well.

10105.49 -> Okay, hopefully, that went well. Now, let's do this, Lw messages dot push, and inside

10115.921 -> of the parentheses will pass in a new message like that referring to the variable and not

10121.65 -> the hard coded value, which we did up here when we passed in six. So a little bit different,

10126.61 -> but still the same concept. Now, let's console dot log messages, and then run this code.

10134.21 -> If we bring up the console, we have pushed the new message to the array, because we're

10139.25 -> logging out the array with same here at the end. Now, a little mini challenge before you

10145.86 -> leave, let's say that you want to regret sending this message, same here. And you want it to

10151.88 -> remove it from the messages to rate. How can you do that? If you haven't learned this yet,

10158.301 -> this is a golden opportunity for you to google it out and try to figure out how can you remove

10163.55 -> the last item in an array? So just see if you can find the answer on Google and then

10168.641 -> try to remove the last item of the messages array here on line 18. Go ahead and do that

10174.811 -> right now.

10178.37 -> Okay, maybe that's worked, maybe not, if not, no worries at all. This is just a bonus. What

10186.561 -> you do is do messages, dot pop, and then open and close parentheses. Now. If we log the

10197.38 -> messages again, and then run the code to open up the console, you see, we are logging two

10204.47 -> versions of this array, one from line 15, where the same hair string is included as

10211.01 -> the last item. And once again from line 19, where the array is back to how it originally

10218.01 -> was like this. So pop is kind of the opposite of push, and not as commonly used. But I just

10226.25 -> wanted to give you a sneak peek at it as you might come across it here and there in your

10230.17 -> development journey. With that, let's move on. Okay, now it's time for some repetition,

10239.25 -> you are going to do the exact same thing as I did before we had our little arrays deep

10243.59 -> dive. So you're first going to create a new array of cards that contain the first card

10248.88 -> and the second card. And then in the render game, you are going to change line 18 so that

10254.161 -> it refers to the cards array when rendering them out. So not referring to first card and

10259.841 -> second card this way, but doing it via our freshly created cards array. So go ahead and

10265.21 -> do this right now. Okay, let's do this together. First, we'll do let carts equals opening closed

10277.22 -> square brackets, and then we'll set the first card as the first item in the array and the

10282.1 -> second card as the second item. And as you hopefully remember, we can now refer to these

10288.17 -> values by doing cards, zero, cards, one like that. We'll run the code kickstart game, and

10296.96 -> yes, indeed it works. Great job. Let's move on. Now that we have the first card and the

10306.62 -> second card in the cards array, you'll have to of course, add the new card to the cards

10311.3 -> array. So quick little challenge. After this card has been created, and it has been added

10316.73 -> to the sum, we also need to push the card to the cards array. So go ahead and do this

10322.76 -> right now. Alright, the way to do this is by writing cards, dot, push, open, close parentheses,

10335.391 -> and then pass in the newly created card, like that. And in order to verify that this actually

10341.44 -> works, we can on the next line console, log out the cards array like that, let's run this

10348.99 -> again, start game, hit new card. And there we can see in the console. Now the cards array

10354.91 -> has been logged out with all the three cards, 10, four, and six. So we still aren't rendering

10360.92 -> out the third card though. And to achieve that, you have to learn how to count in JavaScript,

10366.711 -> or Strictly speaking, you have to learn how to write for loops. So over the next few casts,

10371.57 -> we are going to take a deep dive into four loops, and then later return back to the blackjack

10376.46 -> game so that we can fix it up. Let's move on. Okay, so now you're going to learn how

10388.1 -> to count with JavaScript. That might sound really silly. I mean, counting is so easy

10392.59 -> if you ask a human to count. For example, if you say pair count to 10, I would go Yeah,

10398.71 -> sure. 1-234-567-8910. However, JavaScript is like that annoying person who then replies

10403.28 -> and said, well, where exactly do you want me to start counting? by counting to 10? Do

10408.54 -> you mean, including 10? Or should I stop before 10? And also, should I count every single

10414.15 -> number? Or do you want me to, for example, only count the odd numbers are the even numbers

10417.94 -> or whatever. So JavaScript is really like that annoying person that takes everything

10423.15 -> you say 100% literal. So when you ask JavaScript to count, you have to be super specific, we

10430 -> need to specify where we start counting where the finish line is, and what the step size

10434.9 -> S here, I've already written the code for you. So let's just dissect it. We start with

10441.3 -> the for keyword. And that's because this is a so called for loop. But don't worry about

10446.34 -> that. Let's now look at the things that are inside of the parentheses here. Here, you

10451.391 -> can see our starting condition, let's count equals one. So we're going to start our count

10456.41 -> at one. Then we have a semi colon. And then we specify our finish condition where it says

10462.99 -> count is less than 11. So we want count to always be less than 11. So maximum 10. In

10470.721 -> other words, we're never going to count over this number. And finally, the step size is

10477 -> that for

10478 -> each counting, you're going to increment with one. So count plus equals one. Now these three

10484.51 -> conditions together describe to JavaScript how many times we want to run the code inside

10490.74 -> of the curly brackets and what the value of count will be at every single iteration. So

10498.24 -> here we are going to run this code 10 times and the variable count will change its value

10504.38 -> in every single iteration starting at one and going up to 10. Jumping one number at

10510.83 -> a time. So we will count to them. Let's run this code. And there you can see in the console,

10516.61 -> we get the numbers from one and up to 10. If we now changed this here to true, what

10522.78 -> do you think will happen? Well, then we get 13579. Because we still start at one, we're

10529.34 -> going to end before 11. So maximum 10. And we're going to jump with two. So in the first

10536.311 -> iteration, count equals to one. It's what we said we wanted to start with. But then

10541.07 -> in the second iteration, we've told JavaScript that we want to increase by two every single

10546.16 -> time. So then it's three, and then it's five, and then it's seven, and then it's nine. And

10550.66 -> then at the last iteration, it's like, okay, now I'm going to be 11. But that doesn't work.

10556.69 -> that violates our finish condition here. So JavaScript stops the loop before that happens,

10564.311 -> and then continues on with whatever it has to do underneath the loop. So let's take this

10570.29 -> back to one. Can you modify this one, so that it count from one to 20? How would you do

10577.96 -> that? Hopefully, you identified that what you want to change is the finish condition

10585.47 -> and set that to less than 21. We run this because he in the console that we're logging

10591.78 -> out one to 20. Now, how would we change this, if we want to count from 10 to 20, go ahead

10599.16 -> and try that

10600.16 -> right now.

10602.311 -> Okay, hopefully, you figured out that it is the starting condition you want to modify,

10610.13 -> you're going to write 10 here. So that starts at 10 ends before 21 counts one at a time

10618 -> we run the code is he we get from 10 to 20, logged out to the console. So hopefully, you've

10623.28 -> gained a little bit of intuition on this. Now, let's move on to the next cast. Okay,

10632.48 -> let's first walk through how to create a loop from scratch. And then I want you to create

10637.3 -> your own loop or at least try according to the specifications here on line three, and

10641.68 -> four. But to begin with, we'll create a loop loop count from zero to five. So to do that

10647.6 -> will be for opening close parentheses, and then inside of the parentheses, we have to

10651.91 -> define our starting point, our finish line and how big our steps will be. This is done

10657.66 -> through a counter variable. So we could do let count equals zero and then semicolon to

10664.4 -> end the starting statement. Because zero is where we want to start with or worse count

10670.64 -> is a very semantically good word for this variable. A common convention in JavaScript

10676.07 -> is to use the letter I instead, I could have named it whatever we want. And you can use

10681.97 -> count if you think that's easier, but I'm gonna use it from now on. Then there's the

10686.94 -> finish line, which we also need to define, we want to count to five, so I should be less

10693.48 -> than six, and then semi colon again. So this finds that I should always be less than six.

10700.24 -> And obviously then the last point where it will stop when counting upwards is five. And

10705.48 -> then finally, we have to define how big our steps should be. Now I'm going to do i plus

10711.271 -> equals one. Here, we don't have to use a semicolon to end because this is the last condition.

10718.86 -> Actually, I can space it out a little bit, we follow the same structure for all of our

10724.3 -> conditions. And then the opening close square brackets for the body of our for loop. Then

10729.95 -> inside of here, we'll do console dot log. Hi from the code, omega t 012345. Good. Okay,

10739.5 -> now that you've seen this, I want you to try to create a for loop that count from 10, up

10745.72 -> to 100 in steps of 10. So it should count 10 2030 4050 and so on, including 100. And

10754.41 -> I want you to use console log, as I am doing here to log out the count at each step of

10759.091 -> the iteration. So go ahead and do this

10761.35 -> right now.

10762.61 -> Okay, hopefully that went well. If not, no worries, let's do this together. Blue for

10773.771 -> let in here. You might wonder if while we've already used the I variable, can we reuse

10779.05 -> it down here? And the answer is yes. AI is only defined inside of the curly brackets

10785.1 -> of the for loop when you do it like this. So outside of it. For example, down here at

10789.48 -> line eight. JavaScript won't remember this I variable. So whatever you've configured

10794.4 -> it to mean up here inside of the curly brackets. doesn't affect whatever you set it We're down

10800.28 -> here. So we can do let i n equals 10. That's where we want to start, I should be this time

10806.23 -> less than not 100, because then we'll stop at 99 needs to be less than 101. Finally,

10812.9 -> I should not be plus equals one, oh should be plus equals 10. Because at each step in

10818.89 -> iteration, you want to increase I with 10. console log, I am going to comment this one

10826.811 -> out, run the code. And there we see 10 2030 4050, and so on all the way up to 100. So

10834.35 -> great job. Okay, now you're going to experience how powerful for loops are when combining

10843.971 -> them with a race, because let's say that we are building a china application like the

10848.29 -> one that LinkedIn has, which I showed you earlier. And these messages might just well

10852.92 -> be items in a race, let's just pretend that each of these messages are exactly that. And

10858.89 -> ignore all the metadata around the messages, like the time and the profile, picture, and

10864.101 -> name and stuff like that. And just pretend that we have the data structure, which contains

10867.68 -> a bunch of messages inside of an array. Basically, just what we have here, the exact same array

10872.25 -> we've worked with earlier as well. Now pretend that this is a console based array, so everything

10877.73 -> basically need to do is log out of these messages to the console. But in order to do that, we

10882.561 -> can't just console log out messages, because then we'll just get a long array. And that's

10888.82 -> not what we want, we want each of the messages on its own line, and not with the square bracket

10893.49 -> and stuff like that around. So the hard way to do this is by doing like this. It's one

10900.23 -> messages, two messages, we like to take the index from zero to three and log all of them

10907.271 -> out. There we go. Now we have what looks like a chart in the console. But this is a really

10914.08 -> bad way of doing it, we are repeating ourselves again and again. And that's a general anti

10919.391 -> pattern, there's something called dry for, don't repeat yourself, don't write more code

10927.23 -> than you need to, especially not if you're just repeating the same code. And also, this

10931.48 -> doesn't scale because ads now at the end of the array, and run the code, I'm not logging

10937.601 -> out the last one, I have to manually update my code. So what we instead want to do is

10943.34 -> combine this array with a for loop. Now let's comment out this. And write for let i equals

10953.87 -> zero semicolon. And then we want to buy to stop before it reaches five. Anyone I to increment

10963.66 -> by one, every single iteration. Now inside of this for loop, we log the value I see in

10972.45 -> the console that we get from zero to four. And that actually resembles quite a lot. What

10979.16 -> we did the hair, however, we've even added the index of the latest item as well. So how

10984.93 -> about we instead of just logging out, I simply do miss suggests open square brackets, close

10991.45 -> square brackets, use the eye as the index, and then run the code. And boom, there we

10998.87 -> go. We have all of the items logged out in order one after another brilliant. However,

11005.29 -> there's still a little problem here that if I add yet another message here, maybe an emoji

11011.04 -> and I run the code, the emoji isn't logged to the console. browser, change this to six

11016.46 -> again. So it's still not fully like dynamic. However, I have a trick, because how can I

11022.83 -> get a hold of the number six in a dynamic way? Well, you might remember that race has

11030.69 -> a property called length. And that will refer to the actual length of the array. If we use

11038.48 -> that we can be sure that our loop counts up to the final index all the way up to the end

11045.28 -> of the array. If we now run the code, yes, there we have all of our messages, regardless

11052.311 -> of how long the messages array is. So this was a lot of typing from my end, though. So

11057.85 -> let's move on to a challenge so that you get to practice this as well.

11062.461 -> Okay, so now let's return back to the example of having cards in an array like we have in

11070.211 -> our blackjack game. So here I've created an array that has three cards of the value seven,

11075.1 -> three, and nine. And I want you to create a for loop that logs out all of these cards

11080.23 -> to the console, however, not by hard coding, where the loop should stop counting, but using

11086.57 -> the cards dot length property. So go ahead and do this right now. And then I will of

11091.811 -> course show you the solution as well afterwards. Okay, oh This went well, let's do it before

11103.53 -> open close parentheses, and then let i equals zero, because we're going to start at zero.

11109.78 -> And next, I should be less than carts dot. And I should be increased with one at every

11118.39 -> except in that region. Oh, here for this last condition, I actually want to show you another

11124.13 -> trick, because what you can do here is actually do i plus plus, that'll do the exact same

11130.41 -> thing as this, it's just syntactical sugar and the JavaScript provides us with to make

11135.7 -> our code a little bit neater. So I plus plus increments I with one. So now we can do console

11143.521 -> log cards, and then passing in the I run the code. And there we can see seven, three, and

11150.521 -> nine printed to the console.

11153.24 -> Great job.

11156.5 -> Okay, this is so cool, because now you're going to combine what you've learned about

11161.51 -> arrays, and for loops with what you know about manipulating the DOM. So we're going to pull

11166.98 -> the strings together and have you render out this sentence inside of this greeting L. So

11173.12 -> you can see we have in our HTML, just an empty paragraph, which has the ID of greeting L,

11178.62 -> we have fetched that element from the HTML and stored it in this greeting l variable.

11183.561 -> And your job is to render the sentence that is the array here. So you're to render all

11189.01 -> of these items inside of the array in the greeting paragraph. And the way to do that

11194.64 -> is to use a for loop to loop through it and render each of them into the greeting l using

11200.55 -> dot text content. So a lot of stuff you have to keep track of here, but give it your best

11205.25 -> shot. And then I of course will show you the solution when you return back to the screencast.

11210.001 -> Okay, hopefully that was well. Now let's do this before, let i equals zero, because we

11220.951 -> want to start at the zeroeth index in our array, we'll do is less than sentence dot

11227.931 -> length. And then we do i plus plus, because we want to increment one time. Here, we need

11235.791 -> to grab a hold of the greeting L and then do text confidence. And here, you might have

11240.89 -> been tempted to do equal and open and close square brackets and passing in the index,

11246.73 -> that will just end up with rendering pair because first it renders Hello. And then it

11252.161 -> clears out all the text content and renders the second word, but then for every single

11257.32 -> time in this loop, it clears out all the text content, we end up with just the result after

11263.811 -> the last iteration. And that was the last word in the array. So what we have to do,

11268.03 -> we have to keep the previous content intact inside of the paragraph. And as you might

11273.14 -> remember, we do that with plus equals. So running the code again. Yes, now it works.

11278.55 -> Now though, I have a bonus challenge for you, which is the following. How do you keep the

11282.73 -> spaces between the words if I remove these spaces from the array? That is if I do like

11288.601 -> this, like this, like this and like this, and we render it out? Because we have no more

11295.521 -> spaces? It looks like one long, weird word. How can we on this line seven, modify it so

11300.811 -> that we get spaces between the words, go ahead and try that. Okay, what we will do is we'll

11311.23 -> simply, at the end here, add a plus, and concatenate our given item in the array with a space.

11320.98 -> So now we add a space after each of the words. If we're under this, you can see yes, we get

11326.95 -> now the sentence exactly how we want it. Great job. Let's move on. Okay, back at our blackjack

11338.53 -> game, it's time for you to create a for loop that renders out all the cards in the cards

11343.84 -> array instead of just the two first ones, which we are doing up here. So you are going

11348.9 -> to start your for loop down here at line 19. I'm going to help you out a little bit because

11354.061 -> we are going to keep this first setting of the text contents here. So we have the default

11360.31 -> text inside of the paragraph. And then you are going to render out the cards. After this

11366.71 -> text inside of the paragraph. Go ahead and create that for loop so that our blackjack

11371.25 -> game supports any number of cards inside of the cards array and will render all of them

11376.17 -> out regardless of how many it is to give it to a restaurant and returned back to me when

11381.141 -> you want to see my solution.

11382.73 -> Okay, hopefully that went well. If not, no worries, we'll do it together. We'll start

11392.351 -> with four and then open and close parentheses. Of course inside of the parentheses, we need

11397.13 -> to define that we want to start our increments At zero, and we want to stop it before it

11403.41 -> reaches the length of the cards array. How do we do that? Well by i is less than cards

11410.76 -> dot length, and then a semicolon. And we want to increment i, at every iteration, the body

11418.141 -> of the for loop with curly brackets here, we are going to plus equal on to this paragraph.

11424.69 -> So we'll do cards, l dot text content, plus equals, let's start by just adding the cards,

11432.601 -> and then passing in the current value of i our iterator, which will start at zero and

11438.96 -> to begin with, and before 201, and then run the code start game. And yes, it works. However,

11447.78 -> it looks like it says 104 here, because we haven't added a space between our numbers.

11453.86 -> So the way to do that is simply by concatenating. A space after been card. Now if we run it,

11461.351 -> start game, yes, we've got it. And if we hit new card, now we can see both the sum and

11467.23 -> the cards are now correct, according to the state of our game. Great job. Let's move on.

11474.53 -> Okay, so our blackjack game is actually turning out pretty good now, start the game and hit

11482.791 -> a new card 20, I can even hit yet another card, boom, I'm out of the game, it's it's

11488.35 -> almost fun to play, though, you'll get pretty tired of it's as you played multiple times,

11493.38 -> since you every single time get the exact same cards. So not exactly an exciting blackjack

11498.801 -> game. And of course, that is because we have hard coded the variables for our first card

11502.9 -> and second card here and also hard coded the value for our third and fourth and every proceeding

11508.641 -> card here on line 40 will always get 10 4666666, and so forth. So what we need to do is instead

11517.11 -> create a function, get random card that returns a random number. So that we instead of hard

11523.87 -> coding the number 10 up here on line one, we can do get random card and call that function.

11530.89 -> This function will then return a random card that the first card variable will be set to.

11536.021 -> And we can do the same with the second card. And also down here in the new card function,

11542.34 -> we can do get random card there as well. This way we'd get a functional backtracking. However,

11547.61 -> there's a few thing you haven't learned yet, which you need to learn in order to create

11551.45 -> this get random card function. So let's rewind a little bit here. Get back to the hard coded

11556.891 -> numbers. And over the next few casts, you're going to learn how to return values in functions,

11562.86 -> and also how to generate random numbers inside of a function. Let's go ahead and do exactly

11568.42 -> that. Okay, let's return back to our racing game example in order to learn about returning

11577.601 -> values and functions. So here we have two players who've raced through the game and

11582.07 -> player one got the time 102 and player two got the time 107. And our job is to create

11588.011 -> a function that returns the fastest race time. So in order to do that, we first have to do

11592.891 -> a function, I'm gonna call this get fastest base time, quite a long word, but at least

11600.32 -> it's the script. And inside of the body of the function, we have to first check which

11604.97 -> of these times were fastest. So we'll do an if statement and say, if player one time is

11611.45 -> less than player two time, well, then we are going to return player one time. Because if

11620.49 -> it's less than player two, then it's the fastest race time and we are going to return it. Now

11626.89 -> this return keyword here might now seem a bit weird. And you probably don't understand

11631.05 -> yet what it means. But don't worry about that right now. It'll be clear as we move on. And

11635.971 -> then we're going to do else if the next condition is if we are to was faster than player one

11640.9 -> is your time is less than player one time. So we are going to return player to time like

11650.86 -> that. Then an else f actually these two are equal. So none of these expressions evaluate

11659.54 -> to true. Well, then the fastest time as any players time because they have the exact same

11665.101 -> time could either return player one time or player two time it doesn't matter. I'm just

11669.601 -> going to return player one time. Okay. Now what we can do is we can do let us race I'm

11676.65 -> going to call this variable x. And now I'm going to define that declare that variable

11682.81 -> as the result of invoking this function. So I'm gonna do get asked disgrace time like

11690.54 -> that. Now, the value of fast race time will be whatever this function has returned. And

11698.53 -> if we console log So it's race time, we can see, we get 102. That's correct, because this

11707.09 -> function compared player one and player two, and rightfully recognize that player one was

11712.35 -> faster than player two, and thus returned player one time. What you might think now

11717.31 -> is, well, we're just console logging out the value here. What's the point? Why couldn't

11721.86 -> we just, instead of these returns, let's do console dot log, to do that directly inside

11728.78 -> of the function, do that first and run it and see, yes, we are now indeed, running this

11736.28 -> line six. Here, we're console, logging out the value.

11739.051 -> Briefly down here, try to see what is the value of fastest race at this point,

11745.78 -> and run the code, you can see that we're getting 102. First from this line, then we're getting

11750.93 -> undefined from line 16. Because now, the fastest race variable simply isn't defined because

11757.51 -> this function didn't return anything. And it's actually quite valuable to have stored

11762.32 -> the fastest race time inside of this value, as opposed to just having console log that

11767.21 -> out appear. Because now we can use this variable for something else. So let's like this, and

11774.771 -> return instead, move over and remove the parentheses as well. We're wondering how I got the cursor

11781.59 -> to be on multiple lines at the same time, it's a trick where you first select a word,

11787.03 -> and then do Command D. Or if you're not on a Mac, Ctrl C plus D, like the word Command

11794.51 -> D, one three times and now I have selected all of the return e works so that I can delete

11800.94 -> them or retype them. That was just a quick little tip. Now it's time for a challenge.

11807.6 -> So you are going to write a function that returns the total race time, then you are

11812.19 -> going to call or invoke the function and then store the return value in a new variable,

11816.99 -> you have to decide for yourself what you're going to call that variable. And what you're

11820.62 -> going to call this function. Then finally, you are going to log your variable out just

11824.54 -> to check that everything has worked. So go ahead and do this right now. Okay, hopefully

11834.23 -> this went well, let's do this. Okay, function get portal race, five. And the way to do that

11843.44 -> is simply to return layer one time plus layer two time, then we can create a new variable

11850.681 -> called Lex. total time equals get total race time. Now we can console log total time, thing

11863.051 -> like that, running the code. And indeed, we get 209 in the console, which sounds just

11868.44 -> about right. So great job, let's move on. Okay, it's time to take what you've learned

11878.48 -> about returning values and functions, and implement that technique into our app. This

11884.211 -> is a three part challenge. First, you're going to create a function get random card, that

11889.021 -> always returns the number five. And then you're going to use get random card to set the values

11894.75 -> of the first card and the second card, and then use it to set the value of the card variable

11900.84 -> down here in the new card function as well. So you are going to write your function, get

11905.781 -> random card here, starting on line 14. And now you might think, Well, that doesn't make

11911.19 -> sense. Because we have previously learned that if you define a variable down here on

11915.38 -> line 14, we can't use it up on line two, and three, that's at least how it is with variables

11921.07 -> you define using the let keyword. That is exactly right. But when you create functions

11926.53 -> in the way we do, there's an exception. So I want you to just try this and see if it

11930.98 -> works. And then I'm going to explain afterwards, why it works. Go ahead and give this your

11935.22 -> best shot, and then I will show you the solution as well afterwards.

11938.91 -> Okay, hopefully that went well. Now let's do this, we'll do function get random part

11950.42 -> like that. Then inside of the body of the function will simply return five, we need

11956.65 -> to use this pair app line to get random card and on line three, get random card. What's

11965.391 -> happening here is we're calling this function it will return five and thus second card and

11972.15 -> first card will be initialized with the value five, as will our part down here. If we do

11978.55 -> get random card and call it these two really important, otherwise it won't work but with

11984.49 -> them card will now have the value five. So let's run our blackjack game. Stop the game.

11991.21 -> Oh, we got two fives. Nah, yet another five. What's the chance? Obviously it is 100% at

11998.32 -> the moment, but that doesn't matter. Because we now have the setup for inside of this function,

12004.25 -> writing the logic for getting an actual random card back. So that's great. Finally, I promised

12010.13 -> to talk a little bit about the fact that we're creating the function down here on line 14,

12014.461 -> and then using it on line two, that seems to go against what we learned about variables

12018.67 -> early on. However, when you write functions like this, which is called function declarations,

12024.53 -> the function gets so called hoisted to the top, meaning that it's accessible even at

12029.46 -> line one, regardless of how far down you define the function, we could have written this function

12033.81 -> on line 10,000, it would still be accessible online one. Now there are other ways of creating

12039.95 -> functions don't give the function this extra benefit. But as for now, we're only going

12044.69 -> to write functions in this way. So don't worry about that. Because now you have another thing

12049.24 -> to worry about. And that is, how do we actually modify this get random function so that it

12054.57 -> actually returns a random card? So from the next lesson on, we are going to dive into

12059.87 -> exactly how to do that. I'll see

12062.04 -> you there.

12067 -> So I remember when I was learning this slightly clunky way of generating random numbers in

12071.91 -> JavaScript and thinking, Well, why do I really need to generate random numbers is that really

12077.04 -> such a common thing to do for developers? Actually, it is, of course, there's our use

12082.001 -> case where we're building a card game, obviously, we need to have some kind of randomness in

12086.23 -> which card you get. Otherwise it would be meaningless. But also imagine all games that

12090.51 -> use dices a dice is basically a physical randomness function with gives you a random number between

12096.25 -> one and six. But randomness is only important in these kind of casino ish games, I would

12100.98 -> say all computer games randomness plays some kind of role. For example, in this popular

12106.93 -> iPhone game crossy road where you are to cross a road as a duck without getting hit by a

12112.2 -> car. Surely, there's some randomness underneath here, which decides which cars appear on the

12116.931 -> road and when they appear, but it doesn't stop there with games. Actually, cybersecurity

12122.54 -> random numbers is a key component in order to authenticate yourself and generate keys

12127.23 -> as with in cryptocurrencies. So for example, Bitcoin uses random numbers as well. The random

12132.76 -> numbers plays a role in the crypto economy as well. And most importantly, we use random

12137.22 -> numbers in order to generate the suggested tweet text in our JavaScript Miss advent calendar.

12143.2 -> So you can understand random numbers are everywhere. And you need to learn the most basic way of

12149.601 -> generating that in JavaScript. And that is through something that we call the math object.

12155.561 -> That's something that's already provided to you in JavaScript or by the browser to be

12160.9 -> specific. And you can type math wherever you want, with a capital M, and then do dot random,

12167.851 -> and then open close parentheses so that you call this function or method. And don't worry,

12173.04 -> if you don't quite understand what's going on under the hood here, you're not meant to

12176.28 -> do that right now. All you're meant to know is that that will return a number to you,

12181.341 -> which is now stored in a variable called random number. And then I'm logging out this random

12186.35 -> number. What I want you to do now is pause this screencast and run this code a few times,

12192.38 -> so that you get to see a few of the values that our random number variables can take.

12196.96 -> And then try to ask, succinctly and specifically as possible, write your answer at what you

12203.09 -> think math dot random Deus, what does it return, try to formulate that and write it down, then

12209.76 -> return back to the screencast when you think you have the answer.

12218.44 -> So the way I would write this is that it generates a random number between zero and one, and

12229.21 -> the parentheses, not inclusive of one. So we generate a random number, including zero,

12235.84 -> and one, but not including one. So from 0.00000 to 0.99999999, kind of bunch of nines after

12245.28 -> that. So if we were to visualize this slightly, say that math dot random, gives you a number

12251.9 -> from 0.000. And the bunch of zeros after that I just didn't couldn't bother writing all

12257 -> of them to 0.99999999, basically a bunch of nines as well. That is the range you are given

12264.59 -> when you give JavaScript this command. So if we run this, you can see we get 0.68 and

12272.8 -> a bunch of numbers 0.95 and a bunch of numbers 0.88 0.001. Yeah, as you can see, we've already

12280.97 -> been almost very close to zero to very close to one. Now, before we go, there's one thing

12287.421 -> I need to point out, which is that the randomness here while it looks completely random for

12292.35 -> us humans, it's not truly random. There is some deterministic variables going on under

12298.63 -> the hood here and it's actually a Really hard problem and computer science to generate truly

12304.08 -> random numbers. But for our use cases, we're not going to worry about that. As far as we

12308.57 -> hear these numbers regenerate with math look random, or more than random enough for our

12313.46 -> use case, this is not a PhD in cybersecurity, but but rather getting you started with web

12318.93 -> development. So with that, let's move on. Okay, so now we know how to create a random

12328.46 -> number between zero and up to but not including one. However, it's not entirely clear how

12334.21 -> we utilize math dot random in order to create something useful, like, for example, a dice

12340.04 -> function. So let's take this one step at a time towards creating such a function. And

12345.4 -> the first step we're going to take is simply by multiplying math at random with six. Now

12352.61 -> I want you to do the same thing that you did previously, which is to pause the screencast,

12357.311 -> run this code a few times and see what we log to the console, and then answer the following

12362.72 -> question. Which range will a random number be now? So from which number to which other

12369.57 -> number? It used to be from zero to 0.99999? Now, it's something else, and you have to

12376.04 -> figure that out. So go ahead and do that right now. Okay, the answer is that it still starts

12386.511 -> at zero. Now goes all the way up to 5.99999. And a bunch of nines, I'm not going to type

12394.4 -> all of them. So if math dot random gave us a number from zero to 0.999, Math dot random

12401.15 -> times six will give us a number from zero, because zero times six is still zero to 5.999.

12409.41 -> Because zero or in a bunch of nines times six is not entirely six, but it's almost six.

12415.36 -> So it's five point a bunch of nines. So now we have kind of expanded our range, roughly

12420.271 -> speaking from being between zero and one to being between zero and six. We did that by

12426.26 -> multiplying it to the six. Let's move on to the next step. Okay, so now we need to learn

12435.19 -> another method on the math object. And that is math dot floor. Florida's s, a takes some

12442.43 -> input a number and then does something with that number. Return set filters, you can store

12447.45 -> that in a new variable, for example, like Florida number right here, that is the Florida

12452.21 -> version of this number. So I want you to pause the screencast, run this code a few times

12458.19 -> and answer the question, What does math floor do to positive numbers? And the reason I'm

12463.55 -> saying positive numbers is I don't want you to add negative numbers in here, because the

12467.8 -> mental model is slightly easier if you only think about positive numbers. And it's a bit

12471.67 -> easier to write a concise answer to it and my opinion. And finally, I've never used math

12476.23 -> floor on negative numbers anyway, it's usually used on positive numbers. So try this, feel

12482.021 -> free to add a few different numbers in here and run the code. And once you're ready, just

12486.06 -> type out your personal explanation. What do you think math floor does go ahead and do

12490.12 -> this right now. Now, the way I think of math floor is that it simply removes the decimals.

12501 -> If we run this, it returns three, we have 12.40, even 12.9999999. Still 12. Okay, so

12513.521 -> great job with that knowledge in mind.

12515.65 -> Let's move on to the next lesson. Okay, so just as a quick recap, math dot random gave

12525.1 -> us a number between zero and almost one. And math random times six, then gave us a number

12531.4 -> between zero and almost six. And now we are going to combine this with a math dot floor,

12537.18 -> which you learned in the previous lesson. I'm going to add it here. I'm going to write

12541.4 -> math dot floor and then wrap our entire previous expression inside the parentheses of math

12548.79 -> floor. Now, what I want you to do is run this code a few times, and then write down possible

12555.48 -> values. Random number now can hold. So there's a limited number of them and your job is to

12561.8 -> figure out exactly which wants to go ahead and do this right now.

12566.6 -> Okay,

12567.95 -> hopefully that went well. Now let's run this together. See, we got 44014025 Hmm. Okay,

12584.93 -> so it seems we are getting the numbers between zero and five. That actually makes a lot of

12590.34 -> sense because if we take this range here between zero and almost six and shove it into the

12596.43 -> math dot floor function, then it will basically remove All of the decimals and if we remove

12602.4 -> the decimals from this entire range, which numbers are we then left with? It's just the

12607.181 -> whole numbers from zero all the way up to five. So the right answer was 012345. Like

12615.15 -> that, okay, hopefully, you're still hanging on, let's move on to the final step of our

12620.12 -> dice function. Okay, now we are going to complete our dice feature, because we know that with

12629.38 -> this expression, currently get a whole number from zero to five. So the question then remains,

12634.99 -> how do we turn this range into rather a range between one and six, which is essentially

12640.8 -> the same as a dice, and I want you to try this for yourself. Try to modify the expression

12646.28 -> so that we get a range from one to six instead of zero to five. Go ahead and give that a

12651.17 -> shot right now. Okay, hopefully that went? Well. To understand what we need to do, we

12661.99 -> can compare each of the numbers here can see that first number here is one and the first

12667.591 -> number there is zero. And how do we go from zero to one, we add one. And the same goes

12673.37 -> for all of the numbers here of how to go from one to two, well, we add one, and from five

12677.92 -> to six, we add one. So basically, what we can do is just two plus one at the very end.

12683.621 -> And then if we run the code, you see we get to we get 6356 to one, yes, we indeed get

12693.58 -> the entire range of a dice. So really good job reaching this far. Now I only have one

12700.01 -> last challenge for you. Let's create a function called roll dice that returns a random number

12707.521 -> between one and six. So basically, you're going to take what we've done here, and wrap

12712.021 -> it into a function and then return the results. Go ahead and do that. Okay, to do this, I'll

12720.04 -> do function, roll dice, open and close parentheses, open and close brackets. And inside of here,

12728.32 -> I'm just going to copy this line straight in, and then return a random number like that.

12738.24 -> Now after you remove it from a pair, because up here on line two random number isn't even

12743.03 -> defined, so we can't log it out. Random number is now only defined inside of the role bytes

12748.521 -> function and the value of it gets returned. So if we console log, and inside of the parentheses,

12756.45 -> we call the roll dice function like that. Get, yes, a random number between one and

12765.771 -> six. Really good job reaching this far, this was complicated stuff. So if you feel a little

12770.85 -> bit shaky with this, that's totally okay. You can go back and rewatch it and retry all

12774.801 -> of the challenges if you want to. And then when you feel ready, we'll move on and use

12778.61 -> this knowledge to make our blackjack game much better. Okay, we're back at our blackjack

12786.56 -> game. And we are going to fix up this get random card function, but we'll do it step

12791.34 -> by step. So to begin with, I want you to make it return a random number between one and

12797.6 -> 13. So here, you can pretend that we are working with the regular values that a deck of cards

12803.23 -> usually has. So with the ACE being the one, the numbers from two to 10, of course being

12808.9 -> their respective numbers, then the jack being 11, Queen being 12, and King being 13. So

12815.21 -> from one to therapy like this, go ahead and give this your best shot. And then of course,

12821.301 -> I

12822.301 -> will show you how to do it afterwards as well. Okay, now let's do this. We know that if we

12832.16 -> do math dot random, we are going to generate a number between 0.000 and a bunch of decimals

12839.5 -> after that,

12840.971 -> until 0.999, and a bunch of lines after that as well. So the first thing we need to do

12846.41 -> in order to get this range to look more like this one is to multiply this entire thing

12852.1 -> with 13 0.000 times 13 is still 0.000 is still zero. And 0.999 times 13 is actually just

12863.37 -> 12.999. Or we have a bunch of nines after that as well. So we're getting to something

12868.48 -> remotely similar. It's just a matter of how many nines we have after the dots. But this

12873.48 -> is roughly the range we're working with with this expression right here. So we want to

12878.53 -> remove the decimals. And how do we do that? Well, if you remember from Previously, we

12883.311 -> can use the math dot floor function to wrap the entire thing inside of the parentheses

12889.551 -> of math dot floor. Now we take this expression here, this one and we n floor it which gives

12896.8 -> you like that and like that. So, zero to 12. That's what we're returning here. The question

12905.421 -> remains, how do we go from zero to 12? One to 13? Well, that's only a matter of adding

12910.69 -> a one to any given number. Let's do like that. That should return a number between one and

12916.4 -> 13. Let's try to start this game and pull a bunch of cards to see if we actually get

12920.71 -> the entire range. Seven for looking good so far. 10. Okay, 13. Yes, file a bunch of other

12927.88 -> numbers. getting way too many numbers here. Let's get that one. Yes, there we got it,

12932.811 -> a one. So we have the entire range from 13 to one. And then just about everything in

12937.9 -> between. This was not a normal blackjack round, but at least prove the point that this generates

12943.67 -> a random number between one and 13. So great job reaching this far. But of course, we have

12949.101 -> to modify it because in blackjack, we're not following the usual value sequence for cards,

12954.48 -> so we need to modify our function a little bit, but we'll do that in the next test. Now,

12962.48 -> we need to change our get random card function, because in blackjack, the jack, queen and

12967.32 -> king are all worth 10, and the ACE is worth 11. Or, strictly speaking, the ACE can be

12972.92 -> worth both one and 11, you get to choose as a player, what suits you best is the value

12978.69 -> you use. However, for the sake of simplicity, we are just going to treat the ACE as 11.

12984.021 -> In our case, as having a dual value for this card would add a lot of complexity to our

12989.11 -> game. And it's not something I want to focus on. It's rather something you can, for example,

12993.01 -> do as a stretch goal later if you want to modify the game at the end of this course.

12997.5 -> So for now, we're going to treat our ace as 11. So this means we need to modify our get

13002.64 -> random card function. If the number it returns is one, then we should change it to 11. And

13007.961 -> likewise, if the number of returns is either 1112, or 13, we should rather return 10. To

13014.11 -> go ahead and modify this function so that these exceptions are followed,

13020.61 -> you're going to have to define a variable that this random number is stored in and also

13027.58 -> has some kind of conditional that checks for these conditions, and returns the appropriate

13032.89 -> value. So go ahead and give this a shot. And then I will of course show you the solution

13036.99 -> afterwards as well.

13039.82 -> Okay, hopefully that went well. If not, no worries, we'll do it together. First, I'm

13047.92 -> going to instead of returning this directly, turn it into our random number dropped, then

13054.021 -> we need to write our conditional to account for these special cases, I'm going to start

13059.19 -> from the very top and check if a random number is more than 10, meaning that card is either

13065.271 -> the jack queen or the king. So if a random number is more than 10, what are we going

13072.641 -> to return then well, then we are going to return 10 because that is the value of the

13077.551 -> jack, queen and king, I'm going to do elsif. And now I'm going to count for the ACE itself.

13084.13 -> And for that I'm going to use the triple equals random number, triple equals one. And I'm

13091.351 -> going to return 11 then In all other cases, I can just do else like that no other cases,

13097.73 -> it must mean that we have drawn in row 23456789 or 10. If so, we're just going to return that

13105.26 -> value. So then we're just going to return the random number directly like that, let's

13111.17 -> run the code. Start game. Okay, five, five, I'm gonna hit the bunch of cards to see that

13116.851 -> we get the entire range. And indeed, it seems that we have a two here we have an 11 here

13121.171 -> and have almost every single word in between. I'm 100% sure that if we continue hitting

13126.48 -> the new card in the long run, we'll just get random numbers across our entire defined range.

13132.311 -> So great job, we're almost reaching the end of our blackjack game, you should really be

13136.57 -> proud of yourself for reaching this far, this is starting to get advanced. But there's even

13140.97 -> more to learn. So let's just keep up the pace and move on. Okay, there's one really weird

13149.03 -> thing with our blackjack game. And that's easily exposed. If we console log out to the

13153.84 -> cards here at line 12. And then refresh the page there we can see I got two and seven.

13159.88 -> And the reason that's weird is because I haven't even clicked the start game button, I kind

13163.62 -> of just entered the casino and the casino was already decided what cards I am to be

13168.271 -> dealt. That's fishy, we don't want that I want the cards to be generated as I click

13172.87 -> on the Start game button. So the first card and the second card should be generated inside

13178.01 -> of the start game function. And thus the cards and the sum also needs to be reassigned inside

13184.05 -> of the start game function. And also the is alive shouldn't be set to true by default.

13189.15 -> before I've even click the Start game button. I'm not alive. I'm not even playing the game.

13193.4 -> I'm going to use that as an example. Set it to false first, then inside of the start game

13198.46 -> function. I'm going to do is alive equals true. So now we have the correct starting

13205.43 -> state before I've entered the game appear in line six, and the correct value once I've

13210.34 -> started the game down on line 26. So what I want you to do is make it so that the same

13216.51 -> thing happens with cards rate because it should not be set here. And the first and second

13221.88 -> card shouldn't even be defined up here and the sum should be zero by default. This is

13228.182 -> how the state of the game is before I've started playing the game. Now, what you need to do

13233.55 -> down here at line 23, and 24 is generate two random numbers, then reassign the cards and

13240.141 -> the some variables so that the game can start. So you might find this a bit tricky, but do

13245.24 -> your best, there's no shame in trying and failing, because I will of course, also show

13249.92 -> you how to do it when you return back to this cast. Good luck. Okay, let's do this. We'll

13260.77 -> start by defining first card and second card. And they should be defined by running the

13265.66 -> get random card function, I don't give them we get random card function. Second card equals

13272.16 -> no card as well. Now we can set the parts array to first card, the second card, and

13281.4 -> the sum to first card, plus second card like that. And also actually get this console logged

13291.771 -> back in again. and rerun the browser you can see now it's empty. The casino hasn't decided

13297.97 -> which card slam to get very good. So it's start game and there I got my blackjack. Oh

13302.78 -> my god. That's amazing. And with that, I have nothing more to say. I'll see you in the next

13308.43 -> caste. The next thing I want to fix is our new card button because it's kind of broken.

13317.89 -> Let's see why. If I now start the game, and I get two cards, and I draw a third card and

13323.22 -> a fourth card and I'm out of the game. At this point, I shouldn't be able to draw more

13327.561 -> cards, but actually I am I can hit it and I got another 10. So I'm at 34 shouldn't be

13332.59 -> possible to get to that number in blackjack. So we need to stop it when the game is over.

13338.16 -> And also we refresh the browser able to I shouldn't be able to start with just one card

13343.26 -> either,

13344.26 -> but I actually can. So there's two conditions, we need to check both if I'm still in the

13349.08 -> game, basically if the is alive is true. And also I can't have blackjack either. Now this

13355.2 -> requires us to learn something called logical operators, which lets you combine multiple

13360.55 -> conditions inside of an if statement so that a piece of code should only be run if multiple

13365.62 -> conditions are satisfied. So let's take a little detour and learn about logical operators

13370.77 -> in the next casts.

13373.68 -> Okay, let's learn about logical operators. Here we have a little bit of boilerplate code,

13380.9 -> namely two variables and a function. And the imagine scenario here is a course platform

13386.23 -> much like scramble. And what we're trying to solve is to figure out whether or not a

13390.26 -> user should get a certificate, that is whether or not we should call this get certificate

13396.17 -> function. Because the deal is we only want to call this function if two conditions are

13401.2 -> true. And that is has completed course. In other words, the user has completed 100% of

13406.61 -> the course. And secondly, gives certificate that is whether or not this is the type of

13413.38 -> course it makes the user eligible for a certificate. Because you can imagine that very short courses

13418.78 -> doesn't give you a certificate to the course has to be of a certain size to reward you

13422.92 -> with a certificate. So what we need to do is figure out how we can check if both of

13429.37 -> these conditions are true, because then and only then do we want to call this generates

13434.91 -> certificate function, you could actually achieve this with the concepts you've learned so far,

13440.41 -> by simply nesting if statements. For example, you could do if has completed course, equals

13447.7 -> to true, and then add the body of the if statement. And then inside of the body, you could nest

13453.78 -> another if statement if gives certificate equals true potential. So you get two F's

13463.96 -> inside of each other and the inside of the inner if you do generate certificate. Now

13471.4 -> if we run this code, you can see yes, we are indeed generating the certificates. And if

13476.05 -> we flip one of them to false, we are not generating the certificate because here, this condition

13483.08 -> was not fulfilled. So neither of the code lines inside of the body was run. JavaScript

13489.08 -> just jumped over the entire if statement. However, this is a very clunky way of doing

13494.57 -> it a better way would be to actually remove the inner if statement. For now, let's just

13500.87 -> comment it out. And then inside of the parentheses here, we can add another condition by writing

13508.03 -> a double ampersand. And then the next condition gave us certificate equals true, we now move

13518.63 -> this line, this line and uncomment, this one, run this code, we see nothing happens because

13526.46 -> this condition here is false. And with the AND operator, both of the expressions before

13535.36 -> an after the operator need to evaluate to true for this entire expression to evaluate

13541.19 -> to true. So if we flip this to true, and run this, now it works. But it's much better to

13548.95 -> have it on one line. And a little extra thing we can do is actually omit the script equals

13555.95 -> true, because now, what was this and this evaluator? Well, it's simply true, and, and

13566.74 -> true and true equals false true. But as for now, in order to be explicit about the condition

13572.9 -> we are checking for, actually want to keep these cripple equals here as well. So one

13579.28 -> way to read this in plain English is, if this is true, and this is true, then run this code.

13590.36 -> Hopefully that makes sense, because in the next class, I'm going to give you a challenge,

13594.29 -> so that you get your hands dirty with this as well.

13598.55 -> Okay,

13600.85 -> let's continue on with our course platform example. So in this challenge, you are to

13605.48 -> imagine that you are writing the code that is to be run, after the student has struggled

13610.45 -> with the challenge for a little while, or maybe the student has clicked a button and

13614.7 -> signaled to the platform that that she is stuck. And the first one to check has the

13619.93 -> student solve the challenge she's trying to solve, and has the students enter, hence left,

13625.66 -> because if the student has any hints left, she can go and open those hints. But if she's

13629.66 -> used all of our hands, and she hasn't solved the challenge yet, then we are to run this

13635.5 -> show solution function and just show her the solution. Obviously, it just logs out a string,

13641.67 -> but you can imagine that it will show the solution. So your job is to create an if statement

13646.95 -> that checks that both variables are false. I mean, these two variables, and then if so,

13653.24 -> run the show solution function, go ahead and give this a shot. And then I will of course,

13658.08 -> show you the solution when you return back to the screencast. Okay, the way to solve

13667.17 -> this S, almost similar to what we did in the previous cast will be F and then open and

13672.561 -> close parentheses. And here we need to use a logical AND operator because we're going

13677.82 -> to check if both has solved the challenge. cripple equals false. And the double ampersand

13686.27 -> has hints left is also false. Then, if the user hasn't solved the challenge, and has

13696.62 -> no hints left, it's time to give her some slack and show this solution. So then will

13702.17 -> trigger show solution like that. Let's run the code. And indeed, this triggers the code

13709.04 -> because both of them are false. If we try to flip them to true, then the code is not

13715.04 -> triggered. We're not logging anything to the console, meaning that our logical operator

13719.81 -> that governs our if statement actually works. Great job. So now that you've learned the

13729.77 -> AND operator, let's take a look at it's close relative, Li OR operator. What does that do?

13736.49 -> Well, it allows you to check if either this condition is true, or this condition is true.

13743.23 -> And if so, the body of the if statement will be executed. So if you're in a situation where

13749.56 -> we only need one of two cases to be valid, well, then you want to use the OR operator.

13754.73 -> As for this example, it doesn't really make sense. It will now run since actually both

13759.65 -> of these are true. But if the gift certificate is false, it will also run. But that doesn't

13766.891 -> make any sense. Because if the course doesn't give any certificates at all, you're not supposed

13771.24 -> to generate any certificates regardless of the user having completed the course. So let's

13775.641 -> use another example. instead. Imagine here that you're building Netflix, and you've just

13781.07 -> launched this amazing new documentary, The fire festival. I don't know if you've seen

13785.431 -> this, but it's truly amazing about a guy who creates a festival that aims to be the celebrity

13791.011 -> Hot Shots festival of the world that just becomes a disaster. It's really good. After

13796.04 -> this has been launched. You probably want to recommend it to a ton of your users. And

13800.77 -> what you want to do is you want to check if the user likes documentaries. Or if the user

13805.8 -> like startups, they don't have to like both but definitely like one of these themes, then

13811.29 -> most likely, they will enjoy the fire festival documentary. So I want you now to try to use

13817.66 -> the or statement that is the two lines you can see here, you can copy them if you want,

13821.99 -> if you don't know how to get them from your keyboard, and you're going to use this to

13825.26 -> call recommend movie if either of the variables this the likes documentary, or like startups

13830.881 -> are true. I'm pushing you out on thin ice here, I haven't written a complete or statement

13836.31 -> for you, but it works in just the same way as the and statement. So I think you can do

13840.44 -> it if you just give it a shot. And if you don't, no worries, I will show you the solution

13844.3 -> afterwards as well. Okay, let's do this. Let likes documentaries. set that to true. And

13859.28 -> we'll do let likes startups to bathroo false for example. And if likes documentaries, if

13868.21 -> that is true. Or if likes startups, it's true. Well, then we want to recommend this movie

13878.17 -> like that. running the code, we can see we are recommending the movie, even though this

13884.59 -> one is false, flipping both of them to false. Now, if I run the code, nothing happens, because

13891.23 -> at least one of them needs to be true, this or this.

13895.04 -> And if we make both true and run the code, then of course, if both are true, then one

13902.57 -> or the other is also true. So that would satisfy the condition, great job doing this challenge.

13908.19 -> Let's keep up the pace and move on. Now, you are going to take what you've learned about

13916.18 -> the logical AND operator and modify this new card function, so that you only allow the

13922.3 -> player to get a new card if she is alive, and does not have blackjack. So those are

13929.91 -> the two conditions that need to be filled for you to actually run this code. So give

13935.34 -> this a shot. And I will of course show you the solution afterwards as well. Okay, so

13944.87 -> the way to do this is if open and close parentheses, and then actually just open the body of the

13952.311 -> conditional and paste in this code. And when are we going to run this code? Well, she has

13958.48 -> to be alive, we're going to do is alive. And then if that equals to true as the first condition.

13966.28 -> And the second condition, which we also want to be true, since we're using this logical

13971.61 -> AND operator should be that the house black jack should be equal to false like that. If

13980.23 -> it's alive is true, and has blackjack is false, then the dealer should be willing to give

13985.311 -> the player a new card. So let's try this we'll start the game 15 new card 25 you're out of

13992.061 -> the game, let's try to ask the dealer if we can please get one more card. Nothing happens.

13997.55 -> Works brilliant, really good job doing this challenge. Okay, so our blackjack game is

14006.74 -> almost complete, there's just a tiny little feature I would like to add as well. Because

14011.23 -> if you've ever played online blackjack, or poker, what you normally see as your own name,

14016.44 -> and your credits or your chips somewhere on the screen. So what I mean by that is something

14021.58 -> along the lines of this, like that, so you see your name and how many credits you have,

14028.16 -> or chips or whatever. And this is nice because then it's possible to later implement the

14032.18 -> concept of winning ever increasing your trips and of losing as you're betting or playing

14037.57 -> rounds for critical components of any blackjack game. However, I wouldn't want to hardcoded

14042.69 -> in the HTML like this, we of course, when I represent this data and our JavaScript,

14047.49 -> that gives us the ability to change it. Now I'm going to just show you how we could do

14051.48 -> this to begin with, by first giving this an idea of player dash L and removing the competence

14060.26 -> of it. Then in the JavaScript, we could do let play your name equals pair and let player

14071.76 -> chips equals 145 for example, and then we could grab the element, player L equals document

14081.81 -> dot get element by ID, passing in the ID we just created. And then do the player algo

14089.21 -> text content which you know by now, your name, colon and a space and then $1 sign and then

14097.95 -> plus the player chips like that. If we now run this, you can see yes that we render it

14104.05 -> in the exact same way. However, now we've come into a situation where two values that

14109.96 -> are inherently connected together, like the player and his chips, which currently live

14115.88 -> in two different variables, what would make more sense in this situation would be to somehow

14121.92 -> combine this into a single unity. And that is where so called objects come into play.

14128.38 -> That is another data type, which resembles a race a little bit. But they are also different

14133.33 -> in fundamental ways, but they are kind of also buckets where you store data. So in our

14138.72 -> case, we would perhaps want to create a player object in which we can store both the player's

14143.78 -> name and the chips. So I'm going to show you how to do this, you might feel a little bit

14148.74 -> confused as you see it. But over the next few casts, you're going to practice objects

14153.11 -> yourself. So what I'll do, right let player equals open close curly brackets. You've seen

14161.73 -> these before, they're used often in JavaScript. But when you see them in a context like this,

14166.63 -> after the assignment operator, they mean that we are creating an object. And inside of here,

14171.5 -> what I essentially want to do is add this data right here, however, you can see that

14178.15 -> something is wrong here with all these red lines. And that's because the syntax for creating

14183.54 -> items inside of our object is different from how we define variables. First of all, we

14189.79 -> don't use the let keyword dump of the names. And secondly, we replace the assignment with

14197.27 -> a colon. And thirdly, just as we have in a race, we separate the items with commerce,

14205.221 -> but we don't do that on the last item. Finally, here, it would make sense to omit the player

14211.96 -> as we've already used that name as the name of the entire object. So we can just rather

14218.011 -> do name and I'm not going to capitalize it and chips like that. Now we have taken our

14224.87 -> two variables and group them together in this little bucket which we are calling player

14230.22 -> and the way we now can refer to these

14233.1 -> Values pair. And 145 is by using the first the object name, player. And then the given

14239.57 -> key. Nice name. This is called a key, and its value. So name is the key and Paris the

14247.77 -> value. Also chips is a key, and 145 is a value. So to replace player chips with the reference

14254.4 -> to the trips inside of the player object, we will instead do player dot chips. If I

14261.65 -> run this code, and see we get the exact same result, you're probably a little bit confused

14267.03 -> now. So don't worry, if you think this was hard over the next few casts, you are going

14272.021 -> to practice objects for yourself, so that this becomes a second nature to you.

14277.15 -> Let's move on.

14279.91 -> One way to think of objects is that they give you the ability to store data in depth. And

14288.96 -> with that in mind, we'll know that objects are so called complex data types are also

14293.86 -> called composite data types. Because we use numbers, strings, Boolean, or even a race

14298.91 -> in order to compose objects, so they often store quite a lot of data. And they can even

14304.143 -> store objects within objects, that kind of nested data structure, it's not something

14308.51 -> you're going to think about now. For now, just think of it as key value pairs. And let's

14313.76 -> look this through the lens of a real world example. That's always easier. So here on

14319.061 -> screen Ba, we represent our courses as objects was here, you can see the CSS Grid course,

14324.46 -> actually, the very first course we launched back in the days, and it has a bunch of different

14329.05 -> data, for example, it has the title, the number of lessons, and the creator of the course,

14334.74 -> the length of the course and the level of it. So let's actually translate this course

14339.34 -> into JavaScript into how the data structure actually looks. So good. Let course equals

14345.13 -> open and closed curly brackets start with a title, like that title, colon, learn CSS

14352.55 -> Grid for free. Now we have one key value pair, title is the key. And the string here is the

14359.381 -> value, then the lessons that is natural to represent as a number. So it was 16 lessons,

14365.25 -> the creator, which again, is a string. But then we have the length, which while it says

14371.64 -> one hour here, that's actually not how we represent that data in our database in this

14376.521 -> in this object, break it down into minutes. So perhaps this course is actually 63 minutes.

14383.19 -> But as for the user interface, we don't go into detail that much, we round it to the

14387.521 -> closest hour. And finally, there's the level and here it says intermediate. That's also

14392.61 -> one of those cases where the data in the user interface differs slightly from the data in

14396.98 -> the database. So our levels are represented from zero to three, where zero is complete,

14403.22 -> noobs and three are in the advanced courses. So the intermediate course, you can see here,

14407.891 -> we type out intermediate here, if this value is set to two, now you don't have to worry

14412.65 -> about how our design. And what we say to the user differs from the underlying data. It's

14417.691 -> just something I wanted to give you a little heads up about, because it's very normal in

14421.53 -> real world code bases. It looks like we're kind of done here. But we're actually not

14426.51 -> because there's a lot more data for a course actually the North's represented here, for

14430.881 -> example, whether or not it's free or paid, that's a Boolean. So it's either true or false

14436.02 -> like that it's free true. And this course isn't free. And we also have tags for courses.

14441.41 -> And that's an array because we want to have the ability to add multiple tags to one course.

14447.57 -> So we need a complex data type here as well as the value of this tags key. So for example,

14452.81 -> this CSS Grid course has the tags, HTML, and CSS. So this is a very real world example

14460.38 -> of an object. Now, if we want to access any of these values here, for example, the length

14465.76 -> we do that through something we call the dot notation, worse dot length, like that. Console,

14473.96 -> log outfits and run the code, you can see that we log out 63. So course dot length gives

14479.92 -> us back 63. And you've used this dot notation quite a lot, actually, up until now, even

14485.44 -> though you probably haven't been aware of it, you have been using objects all along,

14489.71 -> like, what are we doing here? console dot log, what kind of data type Do you think the

14494.98 -> console is? Well, it's an object. And just to give you one more example, if let's say

14499.84 -> we want to log out this array here, well, then we simply do course, dot tags from the

14505.181 -> code. When we open the console, we can see that we are logging out and a radio because

14509.31 -> this entire array is the value that we get back when we ask for the tags. Now, one thing

14515.36 -> I want to point out before we move on that you can replace this start with an open square

14520.83 -> bracket, and then add a closing square bracket and then turn the key name into a string.

14527.101 -> This is called the bracket notation. If we run the code, we get the exact same thing

14531.69 -> back now, there There are reasons for why you sometimes want to use bracket notation.

14536.41 -> But we're not going to get into that right now. Because in the foreseeable future, you

14540.44 -> are not going to end up in a situation where you have to do that. So I'm just going to

14544.52 -> tell you now to use the dot notation. It's simpler. It's shorter, less code, read less

14550.09 -> code, right? It's very understandable. It's actually what most developers prefer to use

14554.15 -> if they get to truce. So now I've been talking for far too long. I want you to write code.

14559.41 -> Of course, this is grim. But that's what we're all about. So in the next cast, you are going

14563.141 -> to write your own object, I'll see you. One thing I like to do, if I'm bored is to search

14571.761 -> for epic places to live on Airbnb, for example, castles like this wish list I came across

14576.471 -> right here, which contains a bunch of more or less affordable castles to rent

14580.57 -> across Europe. So for example, this really neat looking castle right here only costs

14585.27 -> $190. I mean, that's what people pay for, like 10 square meters in a hotel room in central

14590.76 -> London. So pretty cool that you can rent a castle for that same price. But anyway, the

14594.9 -> point being that these listings here on Airbnb, most likely take advantage of the object data

14600.52 -> structure in order to store all of the data that they need to present to the user. So

14605.011 -> this can also be a great exercise for you. So that we can build up that object muscle

14608.94 -> memory of yours, I want you to basically create an object that represents an Airbnb Castile

14614.9 -> listing, it should contain at least one Boolean, one string, one number, and one array can

14621.01 -> contain a bunch more if you want to, if you want to go above and beyond forever, that's

14624.61 -> the minimum requirements. And at the end, I want you to log out at least two of the

14629.4 -> keys using the dot notation.

14631.37 -> So go ahead and do this right now. Okay, hopefully, that went well. Let's do this together. I'll

14641.761 -> do let hostel equals open and close brackets, we can use the title level like Chang and

14650.92 -> my thought like that. That's for the

14653.711 -> number, I think the price it's very natural to use price. $190. And what about the Boolean?

14660.4 -> Which components here naturally lend themselves well to using a boolean data type under the

14664.98 -> hood? Well, I think the fact that two of these are super hosts. And the third is not points

14669.851 -> to this being a suitable piece of data for the boolean data type. Because you're either

14674.7 -> a super host, or you're not. So yes, super host. This one happens to be true. And then

14681.34 -> finally, there's the array. What kind of data here? Would it make sense to place inside

14685.71 -> of an array?

14686.98 -> Well,

14687.98 -> it could be that these kind of bullet points here are arrays that are pulled out of the

14693.1 -> underlying data on are kind of the featured selling points that Airbnb wants to list out.

14698.2 -> Or, actually, you can see that there's multiple images here, if you see this carousel indicator,

14703.45 -> so the images it's very natural to have inside of an array. And also the reviews, that's

14708.73 -> definitely a list of many items. So doesn't matter what you choose. Or if you choose something

14713.53 -> completely different. The point is just that I wanted you to write an array inside of an

14717.15 -> object. So I'm gonna choose images like that, make that an array. And here we probably have

14723.37 -> URLs to the specific images, who it might be I am ri slash aspell, one dot png, empty

14731.66 -> slash Castile, two dot png, and so on and so on. I won't bother writing anymore. Now,

14739.47 -> let's log out to these using the dot notation, console log caspo dot price, assault log caspo.is

14751.41 -> Super host, we'll run this. And indeed, we print out 190 and truth to the console. Meaning

14760.71 -> we have completed the rate jobs holding this one. Let's move on.

14767.19 -> Okay, welcome back. Now it's your time to render out the players name and his or her

14774.06 -> chips on the page. So it's a four part challenge. First, you're to create a paragraph with an

14779.65 -> ID of player out. Then you're to move over to the JavaScript and create the player object

14785.6 -> here at the very top and you have to give it two keys name and chips. Then you are to

14790.98 -> move down to where you are grabbing elements from the DOM and then grab hold of the player

14795.9 -> l paragraph and store it in a variable called player L. Then you are to render the player's

14801.61 -> name and chips inside of playoff. So pretty big challenge. But you've seen me do it before

14807.89 -> and you've practice how to work with objects. So I think you're gonna nail this one. Give

14811.09 -> it your best shot and then I will show you how to do it as well afterwards. Okay, hopefully

14821.261 -> that went well. If not, no worries, let's do it together. First, we'll do a paragraph

14826.3 -> here. And we'll give it the ID of player Nashville like that. Nothing happens because It's moving

14835.131 -> over to the Java scripts we are to create the player object. Player equals closed curly

14842.21 -> brackets are to define its name, my case pair, use a comma to separate the items. And then

14850.21 -> ships. Let's say I have $200 in chips right now, three, grab a hold of the player l paragraph

14858.72 -> and store it in a variable called player L. Okay, we know how to do that. Let player L

14865.04 -> equals document dot get element by ID, passing in the player dash L, which is what we created

14875.27 -> right here. At this point, let's console log out player L. And indeed, we are fetching

14884.551 -> it from the DOM. Finally, we are to render the players name and tips inside of player

14889.93 -> L. We know how to do that as well. Player l dot text content equals, and here we have

14896.39 -> to concatenate the string and dig into the object to find the correct values. So we'll

14902.86 -> start with the player dot name is Frank, I have a colon and a space, and then the dollar

14910.391 -> sign in front of the tips. And then do plus again, play your dot chips. Now, this is all

14918.729 -> set up, let's run the project. And there we go. We have rendered great job solving this

14924.761 -> challenge.

14927.9 -> Now that you've learned about objects, I want to tell you about a specific coding pattern

14935.08 -> that we've actually been using quite a lot here that that we aren't going to implement

14939.15 -> from scratch ourselves in this module. But since we still are exposed to it, I want you

14944.01 -> to understand what's going on under the hood. And that pattern is to create functions inside

14949.26 -> of objects, something which we also call methods, because let's say that, for example, we create

14954.92 -> another key here, we'll just say, Hello, and then a colon, and then as the value will actually

14960.95 -> write a function like this, we won't give it a name, it'll just be an anonymous function.

14967.05 -> And inside will console log. So that's how the inner region. And now if we want to invoke

14973.95 -> this function, we'll do player dot say, Hello, and then open and close parentheses. If we

14981.24 -> run the code, now, you can see Indeed, we are logging heizung to the console. And now

14986.02 -> the reason I wanted to show this to you is because Don't you think this syntax looks

14991.02 -> a little bit familiar, like first a variable, and then a dot, and then a function that you're

14997.04 -> calling with the parentheses at the end. Because actually, that's the exact same thing we're

15002.92 -> doing here, when we're saying document dot get element by ID, and the parentheses. And

15008.79 -> here, we're also passing in a value, but it's essentially the same thing. And also here

15013.33 -> down at math dot random, also the same thing, math is an object, and random is a function

15020.87 -> on that object, also called a method. And even our girlfriend console dot log is the

15028.63 -> exact same thing, object with a method. So this is not something we are going to implement

15035.83 -> ourselves in this module. But I just wanted you to be aware of that. So that when I speak

15040.43 -> about methods, you know that they are simply functions that are attached to objects. So

15046.39 -> with that, let's move on.

15052.32 -> So you have built

15053.32 -> your very first JavaScript game congrats with that this is perhaps the first of many games,

15058.69 -> you're going to build perhaps the start of a career as a game developer, I don't know.

15063.42 -> Anyway, give yourself a pat on the back, you have learned a ton. And actually, let's do

15067.94 -> a little recap. So we remind yourself about all the awesome things you've learned throughout

15072.23 -> this section. One thing, which was key to our app, and it's key to basically every web

15077.21 -> app out there is the erase, we define a card array. And also when you reassign the array

15083.06 -> down in the start game function where you define it with items. And then all the way

15087.96 -> down at the new card button. You also pushed to the array, so you're starting to get some

15092.62 -> serious array skills. Also, we worked with objects up here we created our player object.

15099.62 -> And the object, as you remember, contains key value pairs. And it's also a data type

15104.16 -> that is used in basically every single web app out there. The third data type you learned

15110.59 -> was Booleans. Namely the true and false for the house blackjack and it's alive variables.

15116.99 -> we flipped them around. So we set is alive to true down here and has backtrack set to

15123.04 -> true down here and thus creating country state for our game. This brings us to the next important

15129.06 -> concept you learned what is the if else statements that are wrapped the Boolean and so many other

15135.12 -> things. This is key, you cannot build apps without these kinds of conditional statements.

15140.11 -> Both the if the else if and the else are absolutely key in any programming language. And in order

15147.53 -> to make these if else statements would work, we used comparison operators, that's the skies

15152.06 -> in here less than or equal to or triple equal, they helped us define the conditions as to

15157.84 -> when we wanted to render the blocks of code in the FL statement. Moving on, we also did

15164.38 -> logical operators, the AND operator, which check that both this condition and this condition

15171.64 -> was true in order for us to run this code in the block of the if statement. And something

15178.21 -> we also learned was the for loops. It was here in the render game function where we

15183.73 -> used the for loop to loop through our cards array and render out each of the cards, again,

15189.78 -> for loop is just one of those foundational things in programming, because so much of

15194.021 -> programming is evolved around looping through data and doing things based upon the data,

15199.561 -> whether that's rendering it out making calculations, sending it off from a server to a client,

15204.03 -> or just summing it together, for example, it doesn't matter. It's just something you'll

15207.86 -> do again and again. So I'm really happy that you've learned it as early as Now, another

15212.441 -> useful tool you've learned is the math object. That allowed us to create this get random

15217.99 -> card function by using math dot random, which gives us a number between zero and one and

15223.101 -> math dot floor, which basically floors the numbers to the nearest whole number moving

15228.08 -> downwards. And you build upon your further knowledge of functions and learned how to

15233.59 -> use return statements in functions. Because in this get random card, we had to return

15238.08 -> values. And that's something you didn't know before this section, there's still more things

15242.22 -> to learn about functions. So we'll definitely continue on with functions in the Chrome extension,

15246.641 -> we're going to build a bit later. But for now, just be proud about the fact that you've

15249.61 -> at least come to the point where you can return values in function, that's a big, important

15254.15 -> step. So with all of these things learned, I completely understand if you feel that you're

15259.31 -> a little bit on shaky ground here, and that all of these names basically just confuse

15263.49 -> you even more, I don't think you should worry about that, I would have never remembered

15267.13 -> the difference between comparison operators and logical operators. When I learned JavaScript,

15271.01 -> what they are called, doesn't really matter. The important thing is that you know how to

15275.46 -> compare two variables, for example, or that you know how to create a true or false variable,

15281.42 -> whether that you call them Boolean or true, false isn't something you should be too worried

15285.26 -> about right now. So even though this might look scary, try to not let it scare you just

15290.3 -> focus on coding as much as you can. Because over time, these concepts will mature in your

15294.94 -> mind and become second nature. And actually, on that note, you are going to get some practice

15300.09 -> right away. Because before we jump on to the final project and the Chrome extension, I'm

15305.021 -> going to throw a few challenges on you, just so that we're sure that you really understand

15309.729 -> these concepts, and that you build out that ever so important muscle memory. So let's

15314.07 -> go ahead

15315.07 -> and do that right now. Okay, in this challenge, you're going to practice objects and functions.

15324.12 -> So first, you are going to create a person object that contains three keys, name, age,

15329.59 -> and country. And the values of those keys should be set by using yourself as an example.

15335.31 -> So your name, your age and your country. And then you're to create a function called log

15340.15 -> data that uses this person object, it just grabs it from the global scope to then create

15346.02 -> a string in the following format pair is 35 years old lives in Norway, obviously, Pear

15352.91 -> 35, Norway, are pulled from the person object directly. Whereas the rest as a string that

15358.9 -> is hard coded inside of the function. Finally, call log data in order to verify that it works.

15365.01 -> So go ahead and do this right now. And then I will show you the solution as well when

15368.7 -> you return back.

15372.44 -> Okay, let's do this. We'll do let person equals open and closed curly brackets. Name, should

15383.729 -> we pair age 35 and nor right like that, and then the function log data like that. Here,

15397.68 -> we will console that log. This string and you can see the first value is actually pulled

15403.44 -> directly from person dot name. So we'll do person dot name, plus, and then S, then plus

15413.31 -> person dot age. That's less again, years old, and latest n plus person dot. Like that. Now

15428.271 -> the final step is to call the function log beta. run the code. And yes, we can see here

15435.4 -> is 35 years old and lives in Norway. Great job. Okay, now you are going to practice conditional

15445.59 -> statements. So that is the if elsif and Elsa statements. And the problem you're going to

15451.091 -> solve is a very common one for train companies or a bus service, which is that the price

15456.979 -> of the ticket is based upon the passengers age. For example, if the passenger is less

15462.979 -> than six years old, there's a free pass six to 17 gives a child discount 18 to 26 gives

15469.29 -> a student discount 27 and up to 66. That's the age range that pays the full price. And

15475.73 -> the people over 66 get get the senior citizen discount. So your job is then to create a

15481.62 -> conditional statement that accounts for all of these scenarios. And based upon the age

15486.631 -> variable up here logs out which discount the passenger will get. So go ahead and give this

15492.81 -> a shot and return back to me when you want to see my solution.

15498.69 -> Okay, let's do this. I'll start with the F. And if age is less than six, while then console

15510.49 -> log free. Else if the next condition is that age is less than 18. Because novolin practice

15522.979 -> mean from six to 17. here because it less than 18. Yeah, that's 17 and below, wherever

15528.511 -> we've already accounted for up until five. So the code here will be triggered from six

15536.14 -> to 17 console dot log. Oh, discount. Okay, next one elsif. Here we'll do age is less

15546.479 -> than 27. tall, large student discount, because this one kind of starts at 18, since this

15555.68 -> one stopped right before 18. And it should be up until including 26. That is in other

15560.851 -> words less than 27. Then we have the full price orders for people now left in the group

15569.75 -> who are less than 67. Or in other words, 266 console log full price. And finally, then

15581.29 -> we have the else we don't need to specify an IF because In all other cases, the passenger

15586.921 -> should get the senior citizen discounts like that. Let's run the code at 15. Yes, we're

15595.6 -> getting the child discount correct. At 55. We're getting the full price very good 75,

15603.311 -> we are getting the senior citizen discount. So it seems to be working for at least these

15607.56 -> three things scenarios. And I hope it works for the rest. So let's move on. Okay, it's

15615.79 -> time to practice your for loop skills and your geography skills. Because I've created

15621.2 -> this large countries array here, which contains the five largest countries in the world by

15625.84 -> population size. So it's China, India, USA, Indonesia and Pakistan. And what you're to

15631.57 -> do is to use a for loop to log out the following to the world. First a sentence the five largest

15637.46 -> countries in the world, and then each of the countries on a new line with a dash and a

15642.2 -> space in front of the country name. So you are to use a for loop and loop through this

15647.91 -> array here, you can simply hard code out all of the console logs that wouldn't serve any

15652.41 -> purpose. So try to remember how to use a for loop. If you can't remember it, you can look

15656.41 -> back at previous casts, as we certainly have gone through it. Or of course, I will also

15661.07 -> show you the solution afterwards as well. Okay, let's do this. I'll start with the for

15671.011 -> loop, because that's the meat of this challenge. For let i equals zero, we'll start at zero

15677.81 -> because as you remember, arrays are zero indexed, and we want to use the index in order to fetch

15683.31 -> out each of the items. So starting there and stopping before I reaches large countries

15692.41 -> dot length, length of list is five. So before it reaches five, that is four and indeed Pakistan

15700.02 -> is the fourth index. So that should be right. And we want to increment upwards. Like that.

15706.141 -> Here, we'll do console log, and in first the batch and the space like that concatenating

15714.13 -> this with large countries, passing in in the square brackets, the greater variable i and

15722.24 -> now let's run this code and bring up the console and indeed, it looks to be working. Now we

15728.19 -> only need to console log out the five largest countries in the world Like this, running

15735.27 -> the code, and yes, it works. Great job.

15740.77 -> Okay, now I need your help because I have messed up our large countries array. As you

15748.211 -> can see, in first place, I have Tuvalu and in fifth place I have Monaco. However, neither

15754.26 -> of those countries are large enough to deserve a spot in this large countries array. Actually,

15759.77 -> Tuvalu is a tiny island state far out in the Pacific Ocean with just over 10,000 inhabitants.

15766.37 -> And Monaco is a tiny state in Europe, that's smaller than Central Park in New York. So

15771.621 -> surely, it does not belong in this array. The first and fifth place belongs to China

15778.479 -> and Pakistan. So I need you to help me fix up this large country's rate so that China

15783.58 -> and Pakistan are added back into their respective places. And to solve this, you are going to

15789.22 -> use the fort following tools, first push and pop, which you've learned earlier in this

15794.5 -> course. And then their counterparts on shift and shift, which I haven't taught you about.

15800.681 -> But that is intentional, because I want you to Google how to use on shift and shift. And

15806.87 -> what I will disclose to you is that they are kind of a mirror image of push and pop, because

15813.34 -> whereas push and pop will work with the end of the array on shift and shift works with

15819.41 -> the beginning of the array. So pop will remove an item at the end, like this was push will

15827.27 -> push an item into the end like that. And likewise, shift will remove an item from the beginning

15834.85 -> of the array like this, and on shift will shove an item into the array at the start

15841.84 -> like that. So with that short explanation, and Google, you should be able to, I want

15847.08 -> you to try to solve this challenge. And of course, I will show you the solution when

15850.83 -> you return back to the screencast. Good luck.

15855.229 -> Okay, hopefully that went well. Let's do this. I'll start at the end. So I want to replace

15864.07 -> Monaco with Pakistan, then I'll do large countries.com in order to pop away Monaco, and then large

15875 -> countries push asking in Pakistan. Let's now console log large countries to see if this

15886.181 -> works. running the code, and yes, there we go. Now, to remove this first item here to

15894.46 -> follow, I'm going to have to use shift. And here I completely understand if you're confused

15899.14 -> as to why shift is the name shift. And ns shift is named on shift. It's about the two

15903.64 -> most intuitive method names in JavaScript in my opinion. And one way to think of this

15908.07 -> is that on shift is a longer word than shift. So on shift makes the array longer. Let's

15914.501 -> just us push is a longer word than pop. So push makes the array longer. Anyway, let's

15923.3 -> just do this large countries dot shift. Let's see if we've removed two volumes by running

15930.53 -> the code now. Yes, Tuvalu is gone. That means I need to do large countries.on shift and

15938.78 -> pass in China like that. running the code. Yes, we have fixed up the large countries

15946.3 -> array. Great job. Now it's time for a scary challenge because you are going to check every

15955.89 -> Friday the 13th. And if so you're going to log out this spooky face because as you might

15961.26 -> know, Friday the 13th is kind of a scary date if you've seen the Friday the 13th horror

15968.1 -> movies. So you have two variables date of month, which is meant to be from either one

15973.14 -> to 31 depending on which day of the month it is and then a weekday variable which is

15978.07 -> meant to be Friday or Tuesday or Wednesday or any of the days in the week. And if it

15983.87 -> is both Friday and the 13th and only if both of those conditions are satisfied you are

15989.53 -> to log out the spooky face. So just remind you, you have to use the logical AND operator

15995.32 -> which we learned is symbolized with these two ampersands. So go ahead and give this

16001.37 -> a shot right now.

16005.24 -> Okay, let's do this. We'll do if opening close parentheses and heroes day of MONTH critical

16015.1 -> equals 13 if it's the 13th day, and if it is the week they have triple equals Friday.

16026.44 -> Then we are going to log out the spooky emoji like that running the code Nothing happens

16033.771 -> because it's Friday the 31st. Flipping this around Friday the 13th. Yes, we are logging

16040.78 -> out the spooky face. And if we change this to Tuesday, nothing works out because this

16046.29 -> time, the first condition was satisfied it evaluated to true, but the second one was

16051.62 -> not satisfied. So it evaluated to false. And the AND operator requires that both the first

16059.2 -> and the second evaluates to true in order to execute the code in the body of the if

16065.23 -> statement. So, great job. Okay, now you're going to practice returning random numbers.

16073.91 -> And the problem you're to solve is the rock paper scissor game, if you try that, it's

16079.58 -> a game where two people truce with their hands, either a rock paper or a scissor. And the

16084.57 -> way it works is that the rock will beat the scissor, but the paper will wrap itself around

16090.57 -> the rock so that the rock loses. And if the matches between the scissor and the paper,

16095.27 -> the scissor will cut the paper into pieces. So if those rules were a bit confusing, don't

16100.27 -> worry about it. That's not the point here, your only job is actually to create a function

16105.18 -> that returns one of the random items in this array when it's called. So you need to work

16110.391 -> with math dot random in order to achieve this, go back and watch previous cast. If you've

16115.32 -> forgotten about that, or search for it on Google, that's even better. And finally, when

16119.09 -> you have coded up your solution and want to see mine, just revert back to this screencast.

16123.21 -> And I will, of course, show you how to do it as well.

16128.35 -> Okay, let's do this. We'll call the function get ham. And inside of it, first need to generate

16138.85 -> a random index that we're going to use in order to fetch out Rock paper or scissors.

16144.94 -> So we'll let random next like that, equals, first I'll just do math dot random like that.

16152.03 -> And then actually, I'm going to return a random

16155.17 -> index,

16157.37 -> and then debug along the way, just to be sure that I understand each step I'm taking. So

16162.96 -> here, I'll console log, the result of running the get hand function like that. So now if

16168.33 -> we run this, we're logging out 0.05, or 0.1, or 0.07, or 0.927. So a value between zero

16178.68 -> and one, not including one. So 0.99999 is the top value, okay? First, then what we need

16185.92 -> to do is multiply this with three. Now if we run it, you see that I'm getting a value

16192.57 -> between

16194.02 -> zero and 2.999990 2.999, is my current range. Now, the value I want is either 01 or a two.

16207.15 -> So I'm not too far from this. And the way I can get that is by stripping away the decimals

16213.19 -> by flooring it in other words, math dot floor, like that. You can do to zero to one, yes,

16224.71 -> now we are generating random numbers between zero and two. How can we use that to get back

16231.27 -> a random hand either rock paper scissor ladder, simply by doing hands, and then using the

16239.14 -> random index as the index. Now let's run this. We're getting scissor. We're getting paper,

16246.11 -> and we're getting rock. Brilliant, great job. Now I have a fun little challenge for you.

16255.99 -> Because you can see this fruits array here, which contains emoji fruits, basically, three

16260.979 -> apples and two oranges mixed together, you are going to take these fruits and sort them

16265.65 -> onto the apple shelf, or the orange shelf, the apple shelf is the one at the top here

16270.52 -> and the orange shelf is the one at the bottom. They are just simply divs, I've given a little

16275.82 -> bit of styling. So you are to create a function that when called puts the apples onto the

16281.9 -> apple shelf and the oranges onto the orange shelf. And you should use a for loop, a conditional

16288.69 -> statement and the text content property to achieve this. Now, one thing you might be

16294.641 -> wondering is how do you work with emojis in JavaScript, and actually, you can treat these

16299.47 -> as normal strings. It's just as if it said orange here instead of having the mot. So

16305.56 -> with that, I wish you good luck, and I'll see you later when I'll show you my solution.

16310.57 -> Okay, hopefully that went well. Let's do this function. I'm gonna call it short fruit like

16321.841 -> that. And then inside of the function, we first need to loop through all of the fruits

16327.729 -> for let i equals zero. I equals less than fruit, da Thanks. And I should be incremented

16336.88 -> upwards. Now inside of this, we need to check at every step in the iteration. are we dealing

16342.52 -> with an apple? Or are we dealing with an orange shell do if fruit I, that's the current fruit,

16350.37 -> triple equals, then I can just copy this apple here. If it's an apple, well, then we are

16357.48 -> going to do Apple shelf dot txt content. In here, we're not going to do just equal the

16367.69 -> apple, we're going to plus equal because we want to gather all of our apples here and

16372.25 -> not wipe them out every time we run this code, then, I'm going to do an else if fruit I triple

16380.86 -> equals this time an orange, well, then we are going to head over to the orange shelf

16388.209 -> and do text content plus equals the orange. Now, it would have worked perfectly fine if

16396.1 -> we just admitted this as well like that, because in our array, if it isn't an apple, we know

16402.471 -> that it's an orange. But we might be getting other erase which some of bananas in them

16406.971 -> as well. And if so we don't want to put any bananas in the orange shelf, we want to check

16411.439 -> explicitly that we are dealing with an orange before we put the fruit up on the shelf. So

16416.69 -> finally, we just need to sort fruit to run the code. Let's do that. And there we go.

16423.939 -> We got three apples and two oranges neatly sorted on both of the shelves.

16429.289 -> So great job. Hey, and welcome to this excellent where we are going to build the Chrome extension,

16437.82 -> which is just so freakin cool. Because Chrome extensions, if you haven't seen them are programs

16443.93 -> that can

16444.93 -> enhance your browser experience in Chrome. This is an example called honey. It's really

16450.25 -> brilliant. Because what it does is gather coupons from all over the web. And when you

16455.33 -> visit a page where you want to buy something, it gives you whatever coupons it can find

16459.539 -> online, so that you can save money and it was acquired by PayPal for $4 billion. So

16465.891 -> pulling Chrome extensions is huge, because I mean, everyone uses browsers and and surely

16471.439 -> what comes out of the box when you use Chrome surely hasn't thought of every single problem

16476.301 -> people might encounter when they are using browsers and browser extensions is our way

16481 -> as developers to build solutions around these problems. Here's another one, Grammarly. I

16485.811 -> use it all the time here. So when I write for so for so for example, when I write tweets,

16491.15 -> it sits on top of Chrome and checks my spelling because it has access to what I do on the

16495.77 -> page, and then suggests how I should improve my spelling and my writing in general. And

16500.73 -> this one right here is a lifesaver. It's motion. And it saves me hours every single day by

16506.6 -> stopping me right before I tried to enter for example, Facebook, and it does this with

16510.6 -> a ton of other distracting sites as well so that I can focus on what matters, like for

16514.43 -> example, creating courses on scrambler writing code or doing productive stuff. So, so cool.

16519.5 -> If you want to check out more extensions, you can head over to Chrome dot.google.com

16523.811 -> slash webstore. There, you can search through all of them. And also, if you want to open

16528.02 -> your extensions in Chrome, just click this puzzle icon in the top right corner and you

16532.119 -> will see all of your extensions. And here is the lead tracker. What's that? Well, that

16537.41 -> is the one we are going to build in this section. It is based on an insight I had when I worked

16542.41 -> as a developer in a company called Sen, which is a provider of price information for people

16547.75 -> who are shipping containers. Because what I saw there was that the sales team at that

16552.369 -> company spent countless hours tracking down leads or sourcing leads, as they also call

16557.681 -> it. And that is looking for people online who might be interested in your product. So

16561.85 -> what they do is like, browse through a bunch of pages and look at people and like no, this

16565.779 -> guy is probably not interested in our product. This will neither are Yes, here we have a

16569.811 -> potential customer, let's save this one to our system. Moving on, this person does not

16573.66 -> look like a potential customer. But this all of us. Yeah, and this one does as well. But

16577.361 -> this one does not look like a potential customer. So what they then had to do is take these

16581.699 -> three potential customers and store them somewhere so that they could reach out to them in the

16585.92 -> next face. And this is something that and this is something that basically every single

16589.98 -> sales representative does, because I mean, you need people to sell to, so you need to

16594.111 -> find them somewhere. So early Stryker will be a tool for these kinds of people. The way

16599.25 -> it works is that you visit a website, for example, a profile on LinkedIn, and then you

16603.631 -> open up the extensions, click on the lead striker. And there you can see, you get the

16608.301 -> ability to save input, that is any URL that you pass into this input field, or hit Save

16614.32 -> tab. If you hit Save tab or extension heads over to this tab grabs the URL and saves it

16620.641 -> in a list and then you can move on to another page for example, my LinkedIn page and then

16625.611 -> hit Save time again and boom there we have the URL to my profile. And then moving on.

16629.971 -> This is Syndra our CTO in screamer yet again, we Click Save tab, and his profile URL is

16635.561 -> saved. And this data is persistent. So I can close down the app or chrome, turn off your

16640.471 -> computer on when you come back, it's still there let you as a sales representative, and

16644.52 -> then grab these leads and do something else with it. So this is actually a pretty useful

16648.73 -> tool for sales representatives. And it's actually deployed in the browser so that you can use

16654.17 -> it in the real world. And the point with this is to give you the powers to do this to actually

16659.85 -> create Chrome extension that has value and also give you the skills you need to deploy

16665.381 -> it to someone's browser. So once you've learned this, I would really recommend you to look

16669.91 -> for opportunities. Look for problems you see out in the world, maybe there's a problem

16674.459 -> you have or, or someone you study with, or someone you work with, or just a problem someone

16678.961 -> tells you about when you come across problems people have, I want you to think, can I build

16683.881 -> a Chrome extension to help solve this problem, because if you can do that, you truly have

16688.859 -> a superpower. And that will manifest itself in opportunities that you will get throughout

16694.02 -> your career, if you're just willing to use that superpower, which JavaScript and web

16698.48 -> development is. So this was a long introduction, I hope you are as excited as me, let's just

16704.27 -> move on and build your very first Chrome extension. Okay, in this challenge, you are going to

16713.061 -> create the basic markup we need in order to start building our app. So you're to create

16718.91 -> an input element, which is of type text and has the ID of input to dash L. And then you're

16725.15 -> going to create a save input button. That is when the user will click in order to save

16729.209 -> the input, make sure to have the ID of input dash btn. And here, save input should be the

16735.48 -> text inside the button.

16737.631 -> So go ahead and do this right now. Okay, let's do this. I'll start with the inputs, and give

16748.869 -> the type of text and ID of input L. And the input element is a so called void or empty

16758.51 -> tag, it only has an opening tag. So you're not supposed to create closing tags, because

16763.99 -> you're not meant to write anything in between input tags. This user LED is meant to add

16769.869 -> the input. So this is how you create an input tag just mentioned, often called void or empty

16775.84 -> tags, or you'll also hear them referred to as self closing tax. Anyway, let's move on

16781.02 -> to the button. button. And it's not a void tag, it should have a closing tag and an opening

16788.25 -> tag. And in between, we are going to write save input and the ID and set here as input

16796.48 -> dot btn. We now run this code you can see yes, indeed, we have an input field and a

16803.44 -> button. Great job. Okay, now you're going to style our app according to this design.

16813.22 -> So in the CSS file, which is where you're going to work, you'll see that I've already

16817.53 -> styled the body tag a little bit. Specifically, I've cleared out the the margin, since browsers

16823.7 -> often add a default margin to the body tag, I had to set that to zero to neutralize that,

16829.5 -> because I don't want any margin on the body. However, I've set the padding to 10. Because

16833.65 -> I do want a little bit of padding. You can see here on the body element that there's

16837.76 -> some space between the edges and where our elements start. That is the padding that is

16842.8 -> provided. In here, I've also set a font of Arial, not as a web safe font, so that one

16849.442 -> should work without, for example, using Google fonts in our project as well. So just click

16855.4 -> on the slide here when you want to see the sign and click outside of the slide when you

16859.651 -> want to go back to the code. And I've also added a little helper text here, which is

16864.69 -> the hexadecimal code of the green color, which you can see on the button and on the borders

16869.88 -> of the input field. Now you can see on the bottom image here that I've added some text

16875.11 -> to the input field, the slightly bluish color in the background here, it's not something

16879.89 -> you are to configure, that's just default styling that is added by the browser. So you

16884.34 -> don't have to think about that. As far as you know, the background of the input element

16888.48 -> will be white. Now I'm going to get you started here with making the input element full width,

16894.73 -> because that's a little bit unintuitive. And I want to show it to you. Because as you can

16899.18 -> see here on the input element, when we enter text into it, we have a little gap between

16904.64 -> the text and the edge of it. However, in our app now that you will see that there is basically

16911.93 -> no gap. So we have to add a little bit of padding on the left side, let's say 10 pixels.

16918.65 -> And there you can see we got the gap. We want the same gap on the right hand side as well.

16922.84 -> So I'll do padding right of 10 pixels as well. Now we have that and you might wonder why

16928.73 -> I started there. It's a little bit weird, but let's say that we now want to provide

16931.64 -> the styling for me This input field to be full with, well, then I'll do with and then

16938.331 -> set it to 100%. That means take up all the available space I have inside of my container.

16946.06 -> And for the input field, the kind of container it lives inside of is the body type.

16952.34 -> So

16953.48 -> that means that 100% should make the input field take up the entire body, and the body

16958.11 -> has a little bit of padding as you know. So I would expect this to actually stop at the

16964.53 -> right 10 pixels before the end of our browser. But actually, it doesn't do that it continues

16968.91 -> on an actually goes past our browser, which is a little bit weird. The reason is that

16975.88 -> the true with this element now is 100% plus 10 pixels plus some pixels, because it includes

16985.93 -> the padding left and the padding write an ad stat on top of this width. So that's a

16991.26 -> problem. And it results in our input field being wider than our body tag. And we don't

16995.96 -> want that. So the trick I'll use to avoid that is something called box sizing. And here,

17003.14 -> I say they want you to size the box long its borders, the right border, box, and there

17010.771 -> you can see now, full width, includes the padding, as well as the 100% now takes into

17019.032 -> account the padding. And just make sure that the entire thing spans across the entire body

17025.41 -> tag, but not overflowing it. I wanted to show you that because it's not entirely intuitive.

17033.7 -> Now you have what you need. Your job is to use only these two selectors, the input and

17039.47 -> the button selector and make it look like the design you can see here on the slide.

17043.9 -> So go ahead and give that a shot right now. Okay, hopefully that went well. Now, let's

17053.23 -> do this together. I'm going to continue with our input elements, that's here, we'll see

17060.44 -> that it's very cramped above and below the text were written in the input field. So what

17065.63 -> I can do as padding, bottom of 10 pixels, and padding top, also of 10 pixels. Now we

17076.69 -> have something that looks much more like what we have here. Next up, we also need the color

17083.28 -> on the border. So we'll do border, one pixel solid, and then use its green color here,

17094.24 -> like that look good.

17096.82 -> Now, we can actually continue with the button. The first thing is the background color, which

17102.41 -> is green color background and use this green color again, like that. Okay, so the text

17112.41 -> is white color, right like that. There's also padding here as well, which we need to add,

17119.458 -> there's a little bit more padding on the left and right hand side, try padding top 10 pixels

17126.34 -> and padding, bottom of 10 pixels. And then padding left of 20 pixels. So yeah, starting

17134.691 -> to look good padding, right 20 pixels. Now, I actually want to clean up our code a little

17142.22 -> bit, because you can see we're using this very verbose way of writing padding spots

17146.15 -> here. And here. In the body, as you have learned previously, in this career path, you can use

17151.68 -> the shorthand. And if all of the top bottom left right are of the same value, we can just

17157.69 -> use padding, I can remove all of these and padding 10 pixels. Here, it's a little bit

17164.24 -> more complex, but the top and bottom are identical. And the left and right are identical, what

17169 -> we then can use as padding, and then 10 pixels for the top and bottom, and then 20 pixels

17175.52 -> for the left and right. So the first value kind of becomes to the y axis above and below

17181.05 -> and the second value becomes the x axis to the left and to the right. Move this. Now

17187.77 -> see, it looks identical as how we had it previously, but we've removed a ton of lines, which is

17193.05 -> good. Now, another thing on the button is that has these default borders. We don't want

17200.26 -> that according to our design. So we'll do border numb like that. Now it's really starting

17207.97 -> to look similar, but there's two things we want to both the text and we need a little

17212.22 -> gap between the input field and the button. So font weight to bold, yes. And the gap between

17223 -> the button and the input can be added to either of the elements. I'm going to add it to the

17227.5 -> input field, use a margin, bottom and set it For example, for pixels, there we go. Now

17237.02 -> we have something that looks pretty much like what we have. And it's also responsive. So

17243.69 -> we are ready to move on. Okay, now we are going to move from the CSS over to the JavaScript,

17254.55 -> because we have to make our input button work. And while you won't make it useful in this

17260.05 -> cast, you will at least have it log out button clicked when the user clicks it. So you know

17266.56 -> how to do this, you're going to have to modify both some HTML and write a function in the

17272.91 -> JavaScript file, to go ahead and do it so that when I click the Save button, the console

17278.16 -> will log out button clicked. And once you are done, return back to the screencast. And

17283.2 -> I will show you the solution as well. Good luck. Okay, hopefully, you remembered that.

17292.6 -> The way to do this is to create an on click handler on the button, there, you want to

17299.11 -> type in the name of the function that you want to trigger. Let's call this function,

17302 -> save lead, for example, open and close parentheses, then we'll head over to the index.js file

17309.28 -> and create that function, function, save lead, like that. And inside of it, we'll do console

17316.39 -> log. Like that, we'll run the code, click the button. And indeed, we are logging out

17324.77 -> button clicked. Great job.

17332 -> So while this way of writing event listeners, where we define a function and trigger it

17337.2 -> via the onClick attribute in the HTML works perfectly fine out in the wild will most likely

17342.94 -> see professional developers use a slightly different technique. So it's important that

17347.51 -> you learn that one as well. And the way we do that is by first grabbing a hold of the

17353.1 -> ID of the element, we want to hook an event listener onto. So I'll do let input btn equals

17361.08 -> document dot get element by ID, passing in the input batch btn. And then what I'll do

17369.84 -> is input btn dot add event listener like that, inside of the Add event listener function

17379.62 -> or method, which is also called, I'll first specify what kind of event I want to listen

17384.9 -> for. And here it is the click events, then I'll write a comma and do something which

17391.25 -> might look a little bit weird, because now we are going to define what are we going to

17394.98 -> do when someone clicks on this input button? Well, we are going to invoke a function. And

17400.5 -> in order to invoke that function, we first have to write it to the function, open and

17404.532 -> close parentheses and then the curly brackets and break it onto a new line. And inside of

17408.862 -> this function, we can write whatever code we want to be executed when the user clicks

17414.92 -> on this input button. So here, we'll do console dot log button clicked from an event listener,

17422.45 -> like that. And let's change this to button click from onClick attribute. Now, if we run

17429.292 -> this code, hit the button, you can see both this line and this line is executed. However,

17435.3 -> now we can actually remove this onclick event listener from our HTML. And some would say

17441.41 -> that this results in a cleaner separation of concerns where the HTML doesn't worry about

17446.75 -> any event listeners, that's all gathered in the JavaScript. So of course, then we should

17452.31 -> also remove the Save lead function. And we're left with this running the code, clicking

17458.05 -> the button and only this line triggers. So in the next cast, you are going to get some

17463.56 -> practice writing this type of event listeners. So let's dive into it.

17473.042 -> So in this challenge, you are going to practice writing event listeners using the technique

17477.64 -> you just learned. So it's a three part challenge, where you first are to grab the box from the

17482.47 -> DOM and store it in a variable. Here you can see the box, it's just a rectangle that says

17487.1 -> open the box, you can imagine that this is some kind of Easter egg on a ecommerce website,

17491.9 -> where if you open the box, you get a coupon or something like that. And as for HTML, it's

17496.61 -> just a very simple div with an ID of box. And of course, I've styled it a little bit

17501.62 -> in the CSS file, but we're not going to worry about that. So when you have grabbed the box

17506.208 -> from the DOM and stored it in a variable, you are to add a click event listener to it.

17510.79 -> And then finally, log out. I want to open the box when the box is clicked. So if you

17515.48 -> struggle to remember how to add an event listener, using JavaScript, you can go back and rewatch

17520.38 -> how I explained that Or even better, google it out, and you should find the solution as

17524.8 -> well. With that, go ahead and solve this challenge right now.

17529.17 -> Okay, hopefully that went well. Let's do this through let box equals document, get element

17541.52 -> by ID passing in box, and then add eventlistener. It's box dot add event listener, passing in

17551.362 -> first event we want to listen for that is the clinch. And then what do we want to trigger?

17558.34 -> when the user clicks? Well, it's this function right here. inside of it, we're going to console

17563.82 -> dot log, I want to open the box like that. Let's run the code. Click the box. And yes,

17572.99 -> it works. Great job. Okay, we are back at our lead tracking app. Now, of course, you

17583.69 -> are going to do what I showed you before you learned about addEventListener, which is to

17588.362 -> refactor our app, so that it uses the dot addEventListener. When you click on the Save

17593.28 -> input button, because this is crimbo, I am not supposed to write the code. So even though

17598.09 -> I've already done it, Now, it's your turn to go ahead and do this right now. Okay, hopefully,

17608.458 -> that went well. Now, I will quickly do it as well, we need to grab a hold of the button.

17614.16 -> I'm going to grab the ID here. And do let input btn equals document dot get element

17623.04 -> by ID passing in the ID. Now that we have that we can do input btn dot add event listener,

17632.692 -> we're going to listen for clicks. And the code we want to run. When users click the

17637.82 -> button is inside of the body of this function right here. So I'm going to copy this console

17644.3 -> log, paste it in there. x Now I can remove the Save lead function. And I can also remove

17651.458 -> the onClick attribute in the HTML. Like that, I'll rerun the code and click Save input.

17658.15 -> And indeed, it works. Great job. Let's move on. Now, we need to set up the infrastructure

17667.782 -> for being able to actually save the leads that we enter into our input field. And for

17673.32 -> that, we need two variables. First a my leads variable which should be assigned to an empty

17680.06 -> array. Secondly, the input l variable, which should be assigned to the text input field.

17686.52 -> With that I mean, the input field right here. So go ahead and create these two variables

17692.51 -> right now. Okay, the way to do this is let my leads equals an empty array like that.

17706.82 -> And for the infidel, you probably did let input L equals document, get element by ID

17715.458 -> passing in the input L. However, what I'm going to do is swap out this let with const.

17723.47 -> That's weird. Why am I doing that? You might wonder that is because modern JavaScript developers

17731.15 -> use both let and const to declare variables. And now I think it's about time that you learn

17737.78 -> both of these methods. So we're going to set the input data const and also

17743.53 -> the input btn.

17745.11 -> Now, the main difference between const and let is that cost cannot be reassigned. And

17753.73 -> the name kind of hints to that. It says const, which is short for constant. So whatever you

17759.761 -> assign it to, should be constant, meaning you can't reassign it. And if you don't remember

17765.78 -> what reassignment is, it's when you do input, for example, equals

17770.27 -> Hello.

17773.45 -> This won't work. If I run this code can actually see assignment to constant variable. I tried

17779.66 -> to assign the input L, whether it's a constant. So JavaScript is saying, Ah, not allowed.

17787.42 -> Now, you might ask, why do we need this? This seems to be something that just makes it more

17791.52 -> difficult for us to code because it gives us less freedom? Well, that is a very good

17796.372 -> question. So in the next cast, we'll dig into exactly that so that you properly understand

17801.59 -> why you want to use both let them const and actually get some practice using both of these

17806.35 -> variable types. Okay, let's say that we are back at our blackjack game, and we have two

17815.201 -> variables player name and credits. The first one is a const verse The second one is a let.

17820.702 -> Now, immediately upon seeing these two variables, a developer will understand that player name

17826.65 -> is not to be reassigned. However, this developer wouldn't only think that credits can be reassigned.

17833.11 -> Let's actually assume that credits are to be reassigned further down in the code. So

17838.02 -> the developer would expect something like credits equals credits minus 10, for example,

17844.1 -> and the reason for that is that developers often use the following to decide whether

17849.07 -> or not they should use const. Or let. So if possible, default to using const. If not,

17855.92 -> use let, if these two lines follow this methodology, it would mean that it simply wasn't possible

17862.14 -> to write credits as a const. Because there is going to be reassigned later down in the

17867.04 -> code. And thus, we skipped the default of const, and use left instead. And this is actually

17872.102 -> the biggest benefit with const. It gives us a way to quickly signalize to anyone who are

17877.27 -> reading the code, what we want to do with the variables. So in addition to expecting

17881.91 -> that something like this here would happen. The developer would also be very suspicious,

17886.47 -> if we saw something like that your name equals something else down here, because that would

17891.458 -> mean that the person writing this code mixed up their let and const, or perhaps didn't

17896.84 -> even understand it, as we know, this will give us an error. So with all of this knowledge,

17902.97 -> and following this methodology, I want you to do a challenge, which of the variables

17908.47 -> below should be changed from left to const? Here, the situation is an ecommerce shop,

17915.12 -> we have a base price, a discount, shipping cost and shipping time. At some point though,

17920.14 -> the details of the shipping changes, and then you calculate the full price. And finally

17924.75 -> notify the customer. So go ahead and change some of these variables to cost. And then

17930.05 -> I'll show you the solution afterwards as well. Okay, let's do this. I'm going to start down

17938.94 -> here on where things are reassigned, it's easy to see that these are reassignment, since

17943.94 -> we're starting a new line with just the variable name, not let in front of it. So here we are

17949.58 -> reassigning shipping cost and shipping time, meaning these two can be left. And this is

17954.85 -> a new variable. So actually, here's the end of our code and base price and discount, they

17961.24 -> haven't changed. So they could be const. And it says here, if possible, use const. So default

17966.8 -> to const. So then I'll do const and const. Like that. And the code works perfectly fine.

17972.89 -> I haven't broken anything. Is there anything else we can do? Yep, actually, it is. Here

17977.85 -> at full price, we see that this variable is only assigned once it's not reassigned further

17983.26 -> down, just used here in the console log, meaning that this one also should be a constant. So

17989.511 -> hopefully, you now understand why we want to use const. And let, and if it's still a

17993.92 -> bit confusing, don't worry about it, we're going to continue using these variables throughout

17997.75 -> this course. So eventually, it'll be completely natural for you to switch between these two

18003.17 -> variable types. With that, let's return back to our lead tracker app. Okay, we are back

18013.01 -> in our lead tracker app. And now we need to make sure that when the user hits the Save

18017.86 -> input button, a lead is pushed to the My leads array. For now, we're just going to use a

18023.531 -> hard coded lead. So www dot awesome lead.com, for example, and that value should be pushed

18030.51 -> to my array when the input button is clicked, go ahead and give this a shot right now. Okay,

18041.24 -> hopefully, what you did was to here inside of the body of this function, right, my leads

18048.958 -> dot push, and then pass in www dot awesome lead.com. Like that, if we now also console,

18059.37 -> log out the my leads array like that, we will actually verify that it works. I'll hit the

18065.57 -> Save input button. And there you can see, we now have one lead in the my leads array.

18070.512 -> If I hit it again, we have two and three and four. However, it's pretty useless, because

18076.44 -> we're just pushing the exact same thing to the array. So let's fix up that in the next

18081.61 -> cast. Okay, so now we are going to take whatever the user enters into the input field right

18090.55 -> here

18091.55 -> and push that value into the my leads array when the Save input button is clicked. So

18099.27 -> push the value from the input cell into the my leads array, instead of the hardcoded www

18105.69 -> dot awesome leads.com value right here. However, I haven't taught you how to actually get the

18112.19 -> value from the input URL. That is, for example, this www dot example value right here. So

18120.2 -> you need to Google that. And that's great practice because googling is, as you know,

18124.4 -> something professional developers do every single day. So here is what I recommend you

18130.21 -> to Google Play to find. For example, a stack overflow question and see if you can figure

18135.24 -> it out on your own. If you don't, no worries, I will solve this for you when you return

18139.66 -> back to this cast. So go ahead and do this right now. Okay, hopefully this went well,

18150.49 -> let's take a look at how we can find the answer to this by googling. So we'll take the get

18155.42 -> value from inputfield JavaScript, which is my suggested string and just paste it into

18159.97 -> Google. There, you can see we are getting a ton of results. The first one is the W three

18164.75 -> scrolls, I want to go to stack overflow.com. So I'll click here, we go into Stack Overflow.

18170.2 -> And in here, we can see the question being asked, it seems super relevant for us. And

18174.61 -> it's been viewed two and a half million times. So it's super relevant for a lot of other

18178.12 -> people as well. Let's scroll down a little bit to the answers because that's where the

18182.44 -> juice is. Here, we can see there are various methods to get an input textbox value directly.

18186.9 -> And here, method one, that's probably what you want. You can see document dot get element

18191.92 -> by ID passing in an ID and doing dot value. Oh, that's pretty handy. So how would we go

18198.54 -> about doing that? Well, we already have the document get element by ID. And we have stored

18203.94 -> that in the input l variable. So perhaps we simply can do input l dot value, then let's

18212.86 -> now refresh this and do www dot board lead.com. Save input. And yes, we can see in our console

18222.8 -> that we have pushed the value we entered into the input field leads through.com input, and

18230.52 -> that works as well. Great job, let's move on. Okay, now that we're able to take the

18240.28 -> input value, and push it into the Miley's array, so that we store our data, it's time

18246.19 -> to set the stage for going the other way around as well meaning rendering out deletes. And

18252.03 -> as you might remember, when you want to render all of the items of an array out, you first

18257.28 -> need to loop through that array and grab each of the items. And that's exactly what you're

18262.11 -> going to do in this challenge. Whoever to begin with, you are going to work with some

18266.78 -> dummy data just to make it a little bit easier for you. So I've pasted in three dummy leads

18271.68 -> in the my leads array here. So the down here starting on line 12, you can simply write

18277.33 -> out a for loop that logs out the items in the my leads array. Hopefully you remember

18284 -> how to do this. And if not, no worries, I will of course show you the solution afterwards

18288.61 -> as well. Go ahead and give this your best shot right now. Okay, hopefully this went

18298.49 -> well, let's do this, we'll do for let i equals zero, because we want to start at the zero

18305.32 -> index of the my leads array, I should be less than the length of the array. That's my lead

18312.14 -> start length, and we want to increment i upwards with one for each step. Then the inside of

18319.02 -> the body of the for loop, we'll simply console log out my leads using the i r iterator as

18327.78 -> the index. And I run this code you can see in the console, yes, we are indeed logging

18333.57 -> out all three of our dummy leads. Great job.

18341.2 -> Next up, we are going to transform this for loop from simply logging out the leads to

18345.86 -> actually rendering them out on the page. However, in order to do that, we have to actually create

18351.33 -> that unordered list where we are to render the leads out. So you are going to do that

18356.33 -> through a two parts challenge. The first part is to create the unordered list element, the

18362.41 -> UL with an ID of ul dash l that's for unordered list element. And then after you've done that,

18370.35 -> return back to the JavaScript, grab this unordered list and store it in a const variable that's

18376.18 -> called bolwell. Little bit of a weird name there. But of course, also short for unordered

18382.76 -> list element with the camelcase convention we're using in JavaScript. So once we've done

18389.92 -> that, we have set the stage for actually rendering the data out instead of just logging it so

18395.27 -> that we can do that in the following lessons. So go ahead and solve this two part challenge

18400.48 -> right now. Okay, hopefully, that went well. Let's do this together. Starting in the HTML,

18411.55 -> we need to create the unordered list ul and closing the tag, giving it an ID of ul dash

18418.31 -> l that if we run the cold, nothing happens in the browser because for the element is

18424.08 -> empty. So let's just move on to the next part. Here we are to create a const bullet ul l

18432.03 -> Send it to document dot get element by ID, passing in URL dash, e l like that.

18441.44 -> Now, just to make sure that we've done everything correctly, let's console log out this element

18447.82 -> from the code, and there we can see it is being logged to the console. Good job solving

18454.05 -> this one,

18455.05 -> let's move on. Now, you are going to render the leads out in the unordered list we just

18463.69 -> created using the dot text content property, which I've used in previous sections. So you

18469.89 -> are to replace the console log here with the rendering of each item into the unordered

18475.182 -> list. Now, what will happen here is that you'll simply render out plain text inside of an

18481.56 -> unordered list, for example, www.read.com. If we run this, this is how it will look.

18489.91 -> And as you hopefully know, this is not how we write list items inside of an unordered

18495.29 -> list. The way to do it originally is to use Li elements like that, run the code so that

18502.91 -> we get this dot thing link that it's a list item. However, for now, you are simply going

18510.432 -> to render out plain text inside of the unordered list. So we're kind of doing it wrong first,

18516.61 -> and then we'll fix it up later. So just go ahead and render all the leads as plain text

18523.24 -> inside of the unordered list using dot text content, even though that's not the correct

18528.51 -> way to do it. But I wanted to do that first because the most important thing is to make

18532.96 -> it work. And then we make it better. That's the philosophy here. So I'm going to rerun

18538.542 -> this page so that we don't have any leftovers from when we looked at the HTML. Now we just

18544.44 -> have an empty unordered list. Go ahead and do this right now. Okay, hopefully this went

18554.52 -> well. To do it, you do, you ll you'd grab ahold of the unordered list dot txt content.

18562.1 -> And here you might have been tempted to say equal my leads, and then the index. Let's

18568.72 -> see what happens if you try that it only renders out great lead, which is the final one. The

18575.09 -> reason for that is that at each step in the iteration of the for loop, cleared out the

18580.702 -> entire text and assigned to whatever lead you're looking at at that step in the iteration.

18585.94 -> So for a split second, the value of the text content was awesome lead for another split

18592.68 -> second, it was epic lead, and then finally, just cleared out yet again and sub two great

18596.58 -> lead. And that is what we are seeing in the browser. Now since the for loop then stopped,

18601.44 -> it had looped through the entire loop and then broke out of the loop. So what we rather

18607.942 -> need to do is plus equals something we also did in our poker game, if you remember that

18613.97 -> I don't take the previous value, and then concatenate it with the current lead we're

18619.99 -> looking at. So if we run this, you can see now we have all three leads render out, but

18626.6 -> it looks horrible, we want to add at least a space in between them. So if you remember

18632.28 -> that can do that with plus, and then a space. Now, it looks slightly better if we shrink

18639.49 -> in the screen actually break out on separate lines. But if we enlarge the screen, they

18644.101 -> are just render out in one line. So this is still the wrong way of doing it. Since we've

18649.25 -> just added plain text inside of the unordered list, we want to add list items. Now we at

18656.58 -> least know how to take the data in my leads and render it out on the page. And we also

18662.87 -> know how to take whatever the user inputs into the input field and push that value into

18669.57 -> the lead. So we kind of have a very simple implementation of each part of the app that

18674.76 -> we simply need to put together so that we at least have a working first version. So

18679.36 -> let's continue on. Okay, now we need to fix the fact that we are simply rendering out

18688.78 -> plain text strings like this, inside of the unordered list. That's that's not what we

18694.36 -> want, we want to wrap them in a list page, of course, like this. So in order to do that,

18703.97 -> let's first try to add, for example, an Li opening tag before the lead and an Li closing

18712.68 -> tag after the lead. Run this you can see Oh, we simply rendered out the HTML tags as plain

18719.33 -> strings. That's not what we want. We want our browser to parse this as HTML, so that

18724.43 -> it can really turn them into list items. And the way to do that actually, is simply replacing

18730.69 -> this text content property. with something called inner HTML, we do that and run the

18738.522 -> code in there. Now we have them as proper list items with these bullets that are included

18744.77 -> on the default styling of list items. So this means that the browser actually looked at

18751.57 -> this string right here and understood, okay, this is actually the starting of a list element,

18756.23 -> I'm going to avoid rendering that out as a plain string, and instead convert this entire

18760.44 -> thing to

18762.06 -> a list item. So this opens up a whole new world of manipulating the DOM, suddenly, you

18768.362 -> can create HTML elements with JavaScript. So let's take a closer look at inner HTML

18774.71 -> and give you some practice on how to use it. So to help you learn inner HTML, I have a

18783.82 -> really silly example for you here. Because let's say that you're working on an e commerce

18788.22 -> website, somehow, your colleague, the HTML developer, has forgotten to add the buy button

18794.19 -> inside of the div container, that is a crisis because your customers out can't buy your

18799.16 -> product. So you ask the JavaScript developer to have to do that instead. So you're going

18805.07 -> to use the dot inner HTML property, to render out a Buy button inside of the div container,

18812.792 -> you have to grab ahold of the div container first, and then use the innerHTML. And the

18818.022 -> text inside of the button should be by with an exclamation mark. So go ahead and give

18822.292 -> this your best shot right now. Okay, let's do this. So first, I'll look at the HTML,

18833.28 -> the ID of the container is indeed container. So I'll you start with const container equals

18840.48 -> document dot get element by ID passing in container. Notice we have that we can do container

18847.85 -> dot inner HTML equals, here, we'll create the button button by inside of the button,

18856.3 -> and then the button closing tag. If we run this, yes, we can see that we have a really

18862.11 -> neat button already styled because our CSS developer had indeed did their job. And so

18868.29 -> have you to give yourself a pat on the back for doing this. And let's move on. Okay, let's

18877.872 -> continue on with our e commerce website.

18880.52 -> Because let's say

18881.52 -> that you want to thank the user after he's made a purchase. That's that's a nice thing

18885.39 -> to do. So what we want to do is that when the user has clicked the button, we are to

18890.57 -> render a paragraph under the button, but still inside of the same container. So this container

18896.58 -> right here in which the button is rendered inside of and the paragraph should say thank

18901.88 -> you for buying. So I'm going to help you a little bit on the way here by creating an

18907.11 -> on click event listener inside of the button that will try to invoke a function called

18912.47 -> by when the button is clicked. So your job then is of course to create that by function

18918.48 -> and have it render a paragraph inside of this container using dot inner HTML so that the

18924.88 -> user is thanked. And one thing we don't want to remove the button, when you render this

18930.23 -> paragraph, it should be under the button. Go ahead and give this your best shot right

18935.02 -> now. Okay, let's do this. We'll do function by and then inside of the body of the function,

18946.35 -> we need to target the container yet again, container an inner HTML. However, if we try

18953.21 -> now to just render out a paragraph like this, and run the code, click the buy button, then

18960.122 -> we lost our button. Because here we just cleared out the inner HTML, and say we want whatever's

18966.27 -> inside of the container. Right now, we don't care about it, we want to set it equal to

18970.78 -> this paragraph in this paragraph only. What we instead have to do is use our good old

18975.56 -> friend plus equals for now, if we run this call, again, hit buy. And there we go. Thank

18980.74 -> you for buying neatly placed underneath the button. Great job. Okay, we are back at our

18989.25 -> Chrome extension app. And now your job is to do exactly what I did if you castable.

18993.14 -> And I replaced the text content with the inner HTML so that we could render the proper Li

18999.28 -> tags instead of just plain text inside of our unordered list. That is this element right

19005.33 -> here. So go ahead and use your freshly acquired knowledge about inner HTML to solve this challenge.

19013.44 -> Okay, hopefully that went well. The way to do it would be to first add a opening tag

19022.27 -> before our leads is rendered out with that with a double quote, and Li and then of course,

19028.362 -> eight plus out we already have this empty space previously. We don't need that anymore.

19033.67 -> But we do need a closing Li tag, if we now run this, because he Oh, it doesn't work?

19040.18 -> Well, that is because we're still using dot text content, we have to change it to inner

19045.78 -> HTML like that. running the code. There we go. Three list tags rendered out exactly how

19052.8 -> we want them.

19054.19 -> Let's move on.

19058.952 -> Now that you've finally managed to work with inner HTML, I'm going to be a little bit annoying

19064.86 -> and teach you an alternative way of solving this that doesn't use inner HTML. Because

19070.66 -> while I prefer to make a lot of the choices for you as to which technologies you should

19075.79 -> use to build apps, especially as a beginner, in this case, it makes sense that you learn

19081.25 -> it in two different ways, even though we're only going to proceed with one way in this

19086.6 -> app. And that is the dot innerHTML. But you will see this other method being used both

19092.57 -> in scribus, front end developer career path and out in the world. So I'm going to teach

19097.38 -> it to you. And the way to understand it is to break this line of code into three steps.

19103.192 -> Because let's have a look at what's actually happening here. So first, we are kind of creating

19108.17 -> the Li element. So create element, then we are setting the text content of that element.

19116.96 -> Finally, we are taking that expression, and kind of appending it to the unordered list.

19124.99 -> Because appending means to add something at the end of a document. So append to unordered

19132.54 -> list. So with this, we have the pseudocode for our solution. Let's now comment out the

19138.66 -> the original way of doing it, and then write out in YUI. So the first thing we need to

19143.363 -> do is create the element that is done by document dot create element. It looks almost like this

19154.5 -> document dot get element by ID here. However, now we are creating something not fetching.

19160.68 -> And what are we creating? Well, whatever we place inside of the parentheses, naturally,

19165.02 -> in our case, this would be an L II element. And this is how we specified we don't need

19171.89 -> to wrap it in these HTML tags symbols. Now we have created the list element. So we need

19178.01 -> to store it in a variable, I'm going to use const Li. And next up, we got to set the text

19184.35 -> content. So we'll do Li dot text content equals my leads I okay, final step appending it to

19196.16 -> the UL element? Well, then we'll do ul, oh, Alt, append, and what do you think will append?

19204.1 -> Well, Li Li, of course, we'll take this and pass them in there. Now, if I run this code,

19212.14 -> you can see it works. However, in my opinion, this is easier to understand intuitively than

19220.85 -> these three lines. Because here we get to see at least the HTML element in a more humanly

19226.94 -> readable way. But you will come across this method as well. So now what I want you to

19233.06 -> do is basically do the same thing as I did try to make this work with the new method.

19240.39 -> And with this line of code commented out. And if you need help, you can use this pseudocode

19244.66 -> to Google your way to the solution. Or you can of course, go back and watch how I did

19249.43 -> it. But after you've done it, I'm not going to go through it again. Because I've already

19252.79 -> done exactly that. This is just a little digression for you to get this practice of doing it another

19258.44 -> way. And then when you're done, we are going to return back to this dot innerHTML method

19263.69 -> here from the next cast, and work a little bit on the performance of our solution. So

19269.5 -> give this a shot right now. And then I'll see you in the next cast. Now it's time to

19278.04 -> improve the performance of our rendering by first creating a variable list items to hold

19284.19 -> all of the HTML, then concatenating, the HTML element onto that variable so that you after

19290.5 -> the loop has finished can render all of them in one go. So just to go through this, this

19295.35 -> is a three part challenge where you first create the empty variable, which we should

19299.51 -> call list items. And that should eventually hold all of the HTML for the list items. But

19305.2 -> to begin with, you're going to assign it to an empty string. And then inside of the for

19308.93 -> loop. Instead of manipulating the DOM every single time the loop runs in every iteration

19314.07 -> of the loop. We're going to rather add the item this one right here to the list items

19318.84 -> variable instead of using the innerHTML on the unordered list itself. And then finally,

19325.2 -> after the for loop has completed, then you can take the list items which not contain

19329.25 -> all of the HTML you need, then render it inside of the unordered list using inner HTML this

19334.81 -> way will make our code more performant. And faster. So go ahead and give this a shot right

19339.9 -> now.

19342.98 -> Okay, hopefully this went well. Now let's do this. First I'll start with the list items,

19350.542 -> I'm going to have to use a link for that one. But it's going to be reassigned as you know,

19356.12 -> for that we cannot use const. So to begin with, it should be an empty string like that.

19362.08 -> And here, we are going to add the items, these guys to the list items variable, instead of

19368.28 -> setting the innerHTML directly. So this is simply replacing this here with list items.

19375.67 -> Now after this code has been running three times one for each lead in our array, this

19381.31 -> list items variable should contain all of the HTML we need. So then we can render it

19385.31 -> out or doing well l dot enter HTML equals list items like that. Let's try this run the

19394.282 -> code. And as you can see, we get the exact same result, meaning that it works. If you're

19399.21 -> still a little bit confused of what's going on here, I would recommend you to for example,

19402.84 -> console, log out the value of list items so that you get to see what the value of that

19407.1 -> string is in every iteration throughout the loop. And once you feel you have a good grasp

19411.84 -> of this, we'll move on to the next lesson. If you find yourself struggling to remember

19417.09 -> as to whether or not the performance way was to do dot inner HTML inside of the loop or

19422.86 -> outside of the loop, you can remember this sentence DOM manipulation comes with a cost.

19428.708 -> And with that, you can ask well, if it comes with a cost is it best to manipulate the DOM,

19433.66 -> namely, using inner HTML three times inside of the for loop? Or is it best to just do

19438.46 -> it one time outside of the for loop? Well, if it has a cost, you'd prefer to do it one

19443.22 -> time than three times. So just remember that DOM manipulation has a cost and look at your

19448.942 -> code in the light of that. Finally, if you are a bit confused of what's really going

19453.458 -> on under the hood with this string that we are constructing by running through our loop,

19458.122 -> what you can do is log out list items down here, underlined 16, just to inspect how it

19463.97 -> looks in every iteration of the loop. So feel free to jump in and do that right now. And

19469.27 -> when you are ready, I will see you in the next lesson.

19474.98 -> Okay, now that we have many of the pieces of our app working, let's stitch them together

19482.82 -> so that when a user enters a lead and hits the Save input button, it'll actually be rendered

19487.28 -> out opposed to us having to actually add the dummy data from the get go hard coding it

19491.83 -> here on line one, so I'm going to remove these lines and your job is split into two. First

19498.12 -> you are to wrap the code below that is from line 13 to 17. And a render leads function

19503.44 -> and then you are to call the render leads function inside of the event handler for the

19508.66 -> button clicks. And I'm going to remove this console right here to make it a bit cleaner.

19512.4 -> We're just to talk through the logic here. And what will happen is that when the user

19516.05 -> adds something into the input field, and hits the same input, this epic lead, as you know,

19522.53 -> will be pushed to the My leads array. And then if we call the render leads, and have

19527.9 -> this wrapped inside of that render leads function, it should according to our plan, render out

19533.31 -> whatever items there are inside of the my leads rate, which would be much better than

19537.28 -> what we have now where simply I can hit the Save input as much as I want, but nothing

19541.48 -> happens, my lead just stays in the input field. Not good. So go ahead and try to knock this

19547.07 -> one out. Okay, hopefully that went well. Now, let's do this. All right function, render

19557.5 -> leads, and then the body of the function inside of that, I will copy this code and also tab

19565.09 -> it out so that it's easier to read like this looking good. And then we have to call the

19570.19 -> render leads function. We do that by doing render leads and adding the hope and close

19574.36 -> parentheses. Now if we run the code, www dot epic lead.com. Save it. Yes, it works. www

19582.97 -> dot awesome. leads.com, who actually works really good job. Now we have stitched together

19588.878 -> the various pieces of our app, we have what looks like a functional prototype, you should

19592.93 -> be really proud of yourself reaching this far to give yourself a pat on the back. And

19597.28 -> when you are ready. Let's move on. So while our app now works, it has a little bit of

19605.61 -> a usability issue, because if I now try to add a lead here, and hit save, you can see

19611.74 -> it is indeed saved, the buck still persists in the input field as well, most likely, we'd

19616.282 -> want to clear out this input field. So that is what I now want you to do here on line

19620.52 -> eight, clear out the input field, though I haven't told you how to do that. And that

19624.851 -> is intentional, because now I want you to Google it. And even better I want you to try

19628.83 -> to figure out on your own what you want to write into Google to try to solve this issue.

19633.3 -> I'm not going to give you the text you are to paste into Google this time, you just have

19637.151 -> to try and figure that out on your own and see if you can find the answer. Because that's

19640.56 -> a critical skill. As a developer, you will come across problems out in the wild every

19645.39 -> single day, and you won't have me there to tell you what to Google for you obviously

19648.81 -> have to learn how to think of a phrase to Google yourself. So go ahead and do that.

19652.64 -> Try to figure out how you can clear the input field, write the code, you think works, test

19656.67 -> it out. And then of course, return back to the screencast when you want to see my solution.

19663.53 -> Okay, hopefully that went well. If not, no worries, let's do this together. So I would,

19671.2 -> for example, Google clear input value with the JavaScript here, you can see we get a

19675.36 -> ton of results, I normally jump to the Stack Overflow question for let's click into that

19679.7 -> one can see HTML, how to clear input using JavaScript. So this user is using a slightly

19684.44 -> different technique than us with a function and something called a target. However, most

19688.74 -> of the time, I hardly even read this, I just quickly scroll down to the first answer to

19693.16 -> see if there's some kind of hint there as to what we are to do. And in here, you can

19697.19 -> almost ignore all of it, except for the line in the middle here that says target dot value

19702.04 -> equals an empty string. That's interesting, that looks like something we can use. So here,

19707.21 -> perhaps we can do input l dot value, and set that to an empty string input l value equals

19715.93 -> like that, from the code, we'll do the three.com. Save input. And indeed, it worked. So great

19723.378 -> job.

19724.378 -> Let's move on. Okay, now our job is to make our leads list clickable. Because as you can

19732.65 -> see here, on the Li item, or in the browser, this is just plain text, where we want it

19737.29 -> to be a link so that after a sales representative has gathered all of the leads, she can click

19743.11 -> and check them out again at a later stage if she wants to. So in order to do that, we

19748.01 -> need to map the lead in an anchor tag, that's the a tag inside of the list item. So you

19753.35 -> need to change this expression here so that my leads is also wrapped in an anchor tag.

19758.19 -> And then you need to use the href attribute to point to the specific URL, which is the

19763.17 -> same as the text you are rendering out. And I also wanted to make the link open in a new

19768.28 -> tab. And if you don't remember how to do that, it's super easy to forget, you'll just have

19772.281 -> to google it out and figure it out on your own. So go ahead and knock this one out, and

19777.208 -> then return back when you want to see my solution. Okay, hopefully that went well. If not, no

19786.862 -> worries, let's do this together. So we want the anchor tag on the inside of the Li tag.

19792.628 -> So I'm going to add in the same strings as we are creating the Li elements, an anchor

19796.878 -> element as well. So like that, and we'll set the href. Now, just to bits hashtag symbol

19805.79 -> right here, that I'm going to close the anchor tag on this side.

19809.19 -> If we run the code,

19811.24 -> or add some lead into the input and save it there, we indeed can see that we get the default

19815.5 -> link styling. So our link works. Now at this point, you might wonder well, why am I using

19819.98 -> single quotes for the value of the href? Why isn't it wrapped in double quotes, as you

19824.081 -> might have seen people do other places when writing HTML? Well, that is because here we're

19828.99 -> using the double quotes to tell a JavaScript that we're working with a string. And if we

19833.07 -> then use a double quotes here as well, then we're actually ending the string here, as

19837.7 -> opposed to ending it here. So this is a little bit complicated when you start having strings

19841.99 -> that need quotes inside them, then you have to use either single quotes on the inside

19845.87 -> and double quotes on the outside or the opposite. And now this actually becomes even more complex,

19850.62 -> because what we need to do is inside of here, replace this hashtag with the my leads, because

19855.67 -> it's going to point to that URL as well. How do we do that? Well, now we actually need

19860.31 -> to close off the string before the hashtag, because we're going to add a JavaScript variable.

19865.44 -> So then we will add the double quote, a plus sign, and then a plus again, and then a double

19871.98 -> quote, yet again, start this string right here, of course, then this hashtag now serves

19876.77 -> no purpose, it's just an invalid character in JavaScript, we need to replace that with

19880.82 -> the my leads. So you can remove this space right here. Now, if we actually console log

19887.38 -> out, list items, you run the code, and try to save an input as well again, then you can

19894.93 -> see we are getting an expression, which looks like valid HTML, one more thing we need to

19899.81 -> do is to make the link open in a new tab. And I told you to Google that, so let's just

19904.19 -> do that as well. And here, I will just google href, open in New Tab. And actually, Google

19908.86 -> is smart enough to just give us the answer at the top here. You can see it's pulled up

19913.04 -> from this rapid tables.com article. And here you can see in order to open a link in a new

19917.68 -> window or tab at Target equals underscore blank inside of the age doc. All right, well,

19923.74 -> I'll do target equals and kind of quotes Do we need to use now on the inside of the string?

19929.25 -> Well, we need to use single quotes, underscore blank Otherwise, we would have escaped out

19934.601 -> of the string again and into JavaScript land. And we don't want to do that this is just

19938.2 -> a string. And we don't need any JavaScript variables to express it. Now, one thing is

19942.52 -> that when you try to click these links in this grammar browser, even though you're using

19946 -> target blank, it won't work properly will open up a new tab, which just has a super

19950.68 -> weird URL, that's just a scrim Quirk. So don't worry about that, if you run this code from

19954.91 -> your local computer, this anchor tag will indeed work. And we now we have all of this.

19960.5 -> And it works for this string is really long. And great, in my opinion, it's a complicated

19968.13 -> expression. And I would like us to simplify it and avoid using these mix of single and

19973.88 -> double quotes and all of this plus signs. And maybe we also want to write this expression

19978.792 -> on multiple lines as you normally do in HTML. However, that won't work. As you can see,

19983.49 -> it breaks our entire code and syntax highlighting seen by the fact that the syntax highlighting

19988.1 -> is completely off at this point. So in the next cast, I'm going to teach you about template

19992.708 -> strings, which will solve exactly that. So just stay tuned, and I'll see you there. So

20000.91 -> in order to make this expression a lot simpler, we'll use what's called template strings.

20005.97 -> And to make it super clear for you the benefits of template strings, I'm actually going to

20010.458 -> comment out this current string, and then on a new line, create the template string

20015.3 -> so that you can compare the two. And the way you turn a normal string into template strings

20019.07 -> by replacing the quotes that wrap the string with backticks instead. So let's do that.

20025 -> And pay attention to what happens with the syntax highlighting of my leads and the plus

20030.42 -> operators. When we do that, I'm gonna do that. And that, as you can see, it all just became

20037.73 -> blue. So now, this is no longer a JavaScript expression. It's just a string. But we are

20042.78 -> of course going to fix that after we've looked at the first huge benefit with template strings,

20047.03 -> which is you can break it into multiple lines, something we couldn't do with a normal double

20052.69 -> quote string up here. So this gives us the opportunity to write our HTML looks like our

20057.772 -> HTML looks like in an HTML file like this. This is a much easier expression for us humans

20064.102 -> to parse than this one up here. So now we have that it's time to take these sections

20070.15 -> here, which previously rendered out the leads, but now just our plain strings, and simply

20074.53 -> delete them and replace them with $1, sign open or close curly brackets, then passing

20080.26 -> in whatever JavaScript expression we want inside there. This is how you kind of escape

20084.92 -> out of the string, and shove a JavaScript expression into the string my opinion, much

20089.99 -> easier than what we had here with the quote, the plus and the expression that another plus

20095.74 -> then a quote, simply replace all that

20098.74 -> with

20099.83 -> this.

20100.92 -> And now if you want to go even further, we can add the appearance of the anchor tag in

20105.43 -> a new line. So that we get this really nicely formatted expression looks just like it would

20111.26 -> write it in the HTML file. We now run this code. Save the input, it works just as it

20119.24 -> did previously. But now we have removed all of the ugly pluses. All of this wrestling,

20124.03 -> we had to do between single quotes and double quotes and make sure that we used each of

20128.29 -> them in proper order. Here, we can do whatever we want, we can even replace this here with

20133.202 -> a double quote and use single quotes. They're all that's not a good practice. This just

20138.05 -> shows the power of the template string. But now I've been writing code for far too long.

20143.06 -> The point here is that you should write the code. That's what scrim is all about. Go over

20147.28 -> the next few lessons, you are going to get your hands dirty with template strings. Now,

20155.19 -> you are going to practice template strings, or template literals. As people also call

20160.192 -> it, I prefer template strings though, as that's just an easier expression. Your job is to

20165.7 -> take this string, which is a concatenation of two hard coded strings and a variable and

20171.14 -> turn it into a template string. I'm console logging it down here on line eight so that

20177.14 -> you can see results. If we run it, you can see that it says hey James, how's it going?

20181.34 -> chairs pair? So go ahead and change this from a standard double quote string into a template

20186.73 -> string. And then of course, I will show you the solution when you are done. Okay, hopefully

20195.78 -> this went well. Let's do this. I'll start by simply replacing the first double quote

20201.69 -> with a backtick and the last double coat with a backticks then the entire thing is a string.

20206.97 -> So now if we run this, it'll say hey, plus recipient, how's it going? Obviously, not

20212.49 -> what we want. We want James to be logged out as well. So we can remove all of this clutter

20217.59 -> all of these plus in quotes and do dollar sign open close curly brackets, and then type

20224.36 -> in recipients run this. Yes, it's now a template string.

20229.56 -> Great job.

20231.9 -> Let's make our email variable even more dynamic, so that it also can take a sender value, which

20238.66 -> is the person sending the email. So you want to create a new variable and call it sender

20243.52 -> and set its value to your name, then in the email template string, you are to use your

20248.26 -> center variable instead of pair, you are going to replace this text with your variable, then

20254.7 -> just run the code and you will verify that it works through the console log. Good luck.

20263.11 -> Okay, let's do this, we'll create a const, call it sender. And I'll actually set it to

20269.252 -> my entire name here, Harold, we're getting so that we can see that it actually works.

20274.16 -> When we log it out scaping out of the string and do center like that, run this, yes, now

20280.95 -> we are logging out my entire name at the end of the string, great job. big benefit with

20289.05 -> template strings is that you can break them into multiple lines, which is really handy.

20293.75 -> For example, in our email case, here, you'd most likely want to write this on multiple

20297.61 -> lines, like have the hay in one line and have the text in one line and then the tears and

20303.08 -> the final line. And this is possible, unlike with regular strings, like we're using here

20308.16 -> for my name, prove that let's actually try to break this into another line. What you

20312.8 -> see here is that we get this red underlines, and the syntax highlighting has been completely

20318.16 -> broken. And if we try to run this, I'll see that we get a syntax error. So obviously,

20323.11 -> not something we can do, you have to get it back on one line. But for our template strings,

20327.65 -> it will work. And that is the challenge as well, I want you to break the email string

20331.75 -> into multiple lines, however you think it makes sense to do that. And then you are to

20335.958 -> run the code to see that it works. However, there's a gotcha here, which is that in the

20341.3 -> scramble console, you will only see one line, regardless of how many lines the string actually

20346.3 -> consists of. Here is an example where I've created this random string, which is on three

20350.83 -> different lines, you can see that in the grammar console, we're logging it out on a single

20354.97 -> line. Whereas in the dev tools, which I've opened here in the console that lives in the

20359.79 -> dev tools, yes, indeed logged out over three lines. So this is a quirk with the script

20365.28 -> console is not as robust as the chrome console, basically. So for this challenge, you will

20370.379 -> have to open up the original browser console in order to verify that you've done it correctly.

20375.52 -> And if you don't know how to open the developer tools, I will show you now when you're in

20379.83 -> the scrim, move your cursor up to the header area of the screen, then right click so that

20385.49 -> you open this menu, click on Inspect, that'll open up the developer tools, make sure you

20390.94 -> are on the console tab. Now, of course, this is how it works in Chrome, and I'm on a Mac

20396.45 -> computer myself. So if you are on a different operating system, and using a different browser,

20401.122 -> it might be slightly different ways of opening up the console. But it shouldn't be a problem.

20405.5 -> If so you just need to google it out how to open the console on Windows using Firefox,

20411.12 -> for example. So go ahead now break the email string into multiple lines logging out and

20417 -> then open the console and verify that you've done it correctly.

20422.53 -> Okay, hopefully that went well. The way to do this is super simple, you can just make

20429.35 -> this into a new line, let's enter a new line and can even do this. And sometimes I even

20434.16 -> like to format this as we're writing a function body or HTML so that I tab it out. So we see

20439.54 -> it like this. But you could do like this, if you wanted or you could do like this. I

20443.901 -> mean, the point here wasn't exactly formatted the way I would do it. The point was just

20448.17 -> to break it into new lines, run the code, see that in the programmer console is still

20453.35 -> just one line. Hopefully you saw that, when you log in and out the original console, it

20458.9 -> became multiple lines.

20460.69 -> Great job.

20462.78 -> Okay, we are back at our Chrome extension app. And now you are going to do the same

20468.53 -> thing I did before we went on our little tangent about template strings, which is to take this

20473.27 -> list items and turn the string here into a template string so that you can get rid of

20477.79 -> all of these pluses all of these double quotes and auto break it into multiple lines if you

20482.22 -> want to go ahead and do that right now. Okay, hopefully this one's well. Let's do it together

20491.93 -> by replacing the outer quotes with backticks. And then I'll just go ahead and break it into

20498.67 -> multiple lines to get better readability. Like that. Now I can easily see that it's

20503.61 -> a list item, which wraps an anchor tag on a new line. And here we still have these clunky

20511.128 -> plus signs. I'll remove all of those, wrap the JavaScript expression here, and the dollar

20518.06 -> sign and the brackets like that. Then really exact same thing here. Oh, like that. Even

20527.022 -> break this into yet another line. So now it looks much better. And if we run this It still

20533.33 -> works exactly how we want it to. So let's move on. Now let's take a little break from

20541.84 -> JavaScript and head over to our index dot CSS file, because I want you to style our

20547.12 -> list according to the provider design. And here is the provider design, you can see the

20552.2 -> links have the same color as the rest of our app, we don't have the bullet points, which

20556.872 -> you can see are here in the current example. So I want you to fix that. And the three selectors

20563.23 -> you are to use are the UL Li, and the anchor tag, and I've set them up for you. So you

20569.458 -> just have to write a few CSS properties and values inside of these. And then once you're

20574.2 -> done, return back to the screencast. Because then I also will show you my solution.

20581.31 -> Okay, let's do this. The first obvious thing is that our list in the design doesn't have

20589.4 -> these bullets. And the way to remove those are to do list style. And then none, as you

20596.61 -> can see, they are gone. Now is the space on the left hand side, namely the padding, which

20602.42 -> we have here, which you also want to eradicate through the padding left and set back to zero.

20608 -> All right, next up, the most obvious thing is the color of the anchor tags, it should

20614.05 -> be the green one we have already in our app. So let's fix that. We'll do this one right

20622.208 -> here and select the anchor tag color should be not Yes, pretty good. Let's compare the

20629.89 -> two Now, what I think is that we have some more spacing here, there's more spacing between

20635.81 -> the list items and also a little bit more spacing above the unordered list. So starting

20641.06 -> with the unordered list, I think we can give him margin top like 20 pixels slightly down.

20647.51 -> And for the Li elements, I think we can give them also a margin top, maybe then five pixels.

20653.37 -> Yeah, now they have a little bit more space in between them. So I think this looks pretty

20659.19 -> good. So this challenge is done. But before we move on, there's one thing I want to point

20664.79 -> out. And that is that we are using very broad selectors for our CSS, we're basically selecting

20670.76 -> any unordered list or any list item or any anchor tag on the page. And this comes with

20676.34 -> the consequence that if we, for example, want to add other anchor tags in our app that are

20681.872 -> outside of this list of leads, for example, let's say we added an anchor tag in the very

20687.4 -> top of our app, kind of like a navigation, if we run this and see says home and we add

20694.72 -> ultimately, it's in the same styling as ultimately, this might not be what we want. Oftentimes,

20701.93 -> anchor tags and links will look slightly different depending on the context they were shown in

20707.12 -> what we could do to solve this problem would be to down here, when we are flipping the

20712.3 -> color specify that we only want to do that if the anchor tag lives inside of a list item.

20719.08 -> And we'll solve that by doing l i and then a space and then the A. Now you can see the

20725.54 -> home link has the standard styling was the anchor tag in our list as our green styling.

20733.27 -> So this is a way of saying only target anchor tags that lives inside of list items. However,

20739.44 -> in this case, we can get away by just targeting our anchor tags. That's we're not planning

20745.08 -> to add any other anchor tags across the page. So we can remove our home tag. And then just

20754.458 -> target this list item in the easiest possible way, which is what we have here. So that's

20760.44 -> perfectly fine to do, as long as we're understanding the future possible consequences of doing

20766.1 -> that. And now I think we do that. So let's just move on. So even though we haven't completed

20776.38 -> our app, yet, there's still many features left to build, I want to go ahead and deploy

20780.34 -> it right away, because I just think it's so much fun to actually see your app out in the

20785.79 -> wild. And that gives me a ton of motivation to continue on, which is why I often like

20790.51 -> to deploy my projects early as possible. So in this cast, we're going to prepare our first

20795.72 -> deployment so that we in the next cast actually can do the deployment and try our app out

20801.26 -> in the Chrome browser. As you can see, on the left hand side here, I've added a couple

20805.39 -> of new files, namely the icon dot png, that's just a PNG image, which looks like this little

20812.12 -> icon right here really suitable for our app with this dollar sign as our sales representatives

20817.58 -> are to be reminded that this app will bring in more dollars for their Commission's so

20823.72 -> you'll see a manifest dot JSON file at the bottom here. And you might wonder, Well, what

20828.23 -> is JSON? I've never seen that before. And you're right. We haven't talked about that

20831.921 -> earlier. But don't worry, it's nothing dangerous. json is short for JavaScript Object Notation.

20838.96 -> And it's a way for us developers to store and send data. And it's often used when you,

20843.24 -> for example, want to send a piece of data from a server to a client that is to a browser.

20848.34 -> And in our case, we are using this manifest dot JSON file to configure our app and to

20854.05 -> provide metadata about it. So Google Chrome will read through this and look at the name.

20859.69 -> Oh, it's called leads tracker will then Google Chrome will give our app the name leads tracker,

20864.09 -> it will also see that the version is 1.0. So that the next time we deploy, and we change

20869.97 -> this to, for example, 1.10, no, that oh, we have updated our version. And that's information.

20875.17 -> That's definitely useful to note for Google Chrome. One thing you might wonder here is

20879.85 -> why these key value pairs as you can see, which you hopefully recognize from JavaScript

20885.38 -> objects,

20886.9 -> have keys that are wrapped in quotes, because if you remember from when we worked with JavaScript

20891.79 -> objects, previously, we didn't use quotes around our keys. That's something you have

20896.35 -> to do when writing JSON. So don't be tempted to think that this actually is a JavaScript

20901.75 -> object. Right now, it's not it's just plain text, but it's using the JavaScript Object

20907.23 -> Notation for it's mimicking JavaScript object. And you later learn how to turn a JSON object

20913.2 -> into a JavaScript object. If this is a little bit confusing, don't worry about it, it'll

20917.708 -> sort itself out. As we look more into this. Let's just move on and look at the two final

20923.18 -> key value pairs here, we have Manifest Version that's just telling Chrome, which version

20928.64 -> of this JSON file we are using, there used to be a version number one that people used,

20933.11 -> and then there was a version number two, but now we have a version number three. So that's

20937.51 -> version number three. And finally, there's the action. And that's kind of the meat of

20941.74 -> our application. It configures. What happens when the user clicks on our application from

20947.5 -> the Google Chrome extensions toolbar, let me show you that. Here, we have Twitter. And

20953.26 -> if I click on the extensions button up here, in the top right corner, this little puzzle

20958.61 -> piece, you can see it opens up all of my extensions. And when I click out, for example, Grammarly

20964.07 -> for Chrome, it opens up the grammerly extension. As you can see, it uses a little icon here

20969.86 -> as well. So in the action, the default icon that you provide, this icon, PNG here, which

20977.15 -> points to this image file we've provided, will pop up here besides this puzzle piece

20982.73 -> button, and also the default pop up the index dot HTML that we provide inside of our action.

20990.25 -> Well, it's our pop up. And in our case, it'll simply be the HTML we've been building all

20996.11 -> along. Now there's one thing we need to fix just that a Chrome extension will only be

21000.76 -> as wide as it needs to be. And Strictly speaking, our app doesn't need to be any wider than

21005.72 -> this, because that's the way our button needs. So we need to set a min width on the index

21010.8 -> dot CSS. And I'm just going to go ahead and do that min width of 400 pixels, for example.

21017.14 -> Now you can see, if we go below 400 pixels, our input field is now outside of the app.

21024.39 -> So Google, Chrome will understand that we don't want that we want our app to be like

21028.67 -> this, this is the minimum size. So now we finally have everything in place, your next

21034.33 -> step is to download this code. You do that by clicking on the Settings icon in the bottom

21040.43 -> right corner and download as a zip file, download the zipped folder, you can then open that

21046.68 -> zipped folder, for example, in your dev directory, call it whatever you want. Here, you can see

21052.54 -> all of the files that you recognize along with a readme file, which you can safely ignore

21056.55 -> or delete. That's up to you. And when you have that, we are ready to deploy our Chrome

21061.78 -> extension. So let's just move on to the next cast do exactly that.

21067 -> Okay, it is time to deploy our application. And I'm so excited about this, because I just

21075.59 -> love seeing products move out into the world and start solving problems for people. So

21080.97 -> let's just jump into this. The first thing you need to do is to head over to Chrome dash

21086.56 -> slash lash extensions, that'll bring up this UI you can see right here, which lists out

21092.08 -> all of your extensions. Now this address here is a little bit funky, so you can just copy

21097.112 -> it from the file right here and paste it into your address bar if you want to do that. And

21102.06 -> once you're there, I want you to trigger the developer mode on so just click up here in

21106.44 -> the top right corner. Then you'll see these three buttons appear load unpacked pack extension

21111.89 -> and update and you are going to load an unpacked extension. So click that button. That'll bring

21118.112 -> up the file chooser menu. There you are to navigate to the leads tracker folder that

21123.24 -> we downloaded from scrim button, the previous cast, choose that folder and hit select and

21128.08 -> once you've done that, boom, your lead tracker is now in the extensions interface and Actually,

21133.41 -> that's it. Now if we open up another tab, for example, I'll open up the LinkedIn profile

21138.72 -> of Frodo, one of the cofounders of scramble, and then I can click on the puzzle icon here

21143.59 -> in the top right corner, that will bring up all my extensions. And there we can see our

21147.99 -> lead tracker. That is just so cool to see the little icon here. And if we click, it

21152.91 -> brings up the user interface for our app. So that is amazing. Now I can, for example,

21158.15 -> right in the URL we're at at the moment and hit save input. And there it is saved to actually

21163.69 -> now we have something that you can take with you on every website you visit and save information.

21168.72 -> But Rob has a critical flaw. Because if I now close this app, if I click outside of

21175 -> our HTML file, and it closes automatically, and then want to open it up again, hmm, actually,

21180.89 -> our leads have been deleted, because that's just as if we were saving something to the

21186.93 -> input here. And then seeing it in the list, and then refreshing the page, and boom, it's

21191.87 -> gone again. So every time we open up our Chrome extension, it's a full refresh. So we need

21197.48 -> to learn how we can store data across each refresh. How do we do that? That's not something

21203.94 -> you've learned yet. But it's not that hard. So over the next few casts, I'm going to teach

21208.44 -> you exactly that. So that our app becomes truly useful for sales people who need to

21213.64 -> traverse the web and gather leads. So let's just move on and get that sorted out. So in

21222.53 -> order to fix our problem of storing leads across page refresh, let's actually open up

21228.44 -> a browser window and see if we can find a way to do this, by playing around with the

21233.31 -> developer tools to here I have wikipedia.org, we're going to right click, and then hit the

21238.4 -> inspect so that we open the developer tools. Here, we're starting out at the elements,

21243.6 -> so we see the HTML elements of the page. But where our action happens is over in the application

21249.942 -> tab, so I'm going to click that. And there you can see, we get a new list of fancy words

21254.54 -> here on the left hand side serviceworkers, storage, local storage cookies, some of these

21260.32 -> names you might have already heard before, and they're probably a bit scary. And to be

21263.601 -> honest, you don't need to know about any of them. At this point, what we want to look

21266.62 -> at is this one right here called local storage

21269.7 -> costs. When we click that, we can see it says wikipedia.org here, and if we click into that

21276 -> item as well, it opens up this table here on the right hand side where we have keys

21281.35 -> and values. And that's something you probably recognize from JavaScript objects, for example,

21286.44 -> or even the JSON notation. Here, you can see that Wikipedia has created three were looking

21291.49 -> keys and given them some values. So it seems as if Wikipedia is trying to store some value

21296.59 -> about me, because these values here in local storage will only be available for me, they

21301.76 -> are local to me, when I visit this domain, this data isn't shared by default with all

21307.89 -> other users to visit Wikipedia at this point. For example, you can see portal session ID

21312.36 -> somewhere long string, that's probably totally unique to me. But without getting into too

21316.81 -> many details here. What's important is that this is kind of like a local database that

21321.29 -> we can use. So let's try to do that. If we hit on the console tab, and open up the console,

21326.96 -> which you've previously seen, and then type in, for example, local storage dot clear and

21332.39 -> open and close parentheses to call that function, and then navigate back to the application

21337.6 -> tab, you can see that we have cleared out all of the key value pairs in our local storage.

21342.122 -> So we were able to interact with these values using JavaScript. Going back to the console,

21347.64 -> we can get again, for example, do local storage dot set item, and then pass in first my leads

21354.69 -> as a string, and then comma, and then I'm going to pass in the string of the URL that

21359.52 -> we visited previously, that is FLOTUS LinkedIn profile, and then hit enter. If we now go

21364.57 -> back to application, again, you can see that we have a key value pair in our local storage.

21369.85 -> The key is my leads. and the value is the URL to photos LinkedIn profiles. And what's

21375.06 -> so cool about this, if I now try to hit the refresh button, what you'll see is that yet

21380.7 -> again, Wikipedia adds back these three key value pairs, but the my leads key and its

21386.372 -> value persists. And that is exactly the feature, we're looking for persisting data cross age

21393.458 -> refresh. So with this in mind, let's move on and try to interact with the local storage

21398.958 -> from our index.js file in the next cast. So I'll see you there. So now we are going to

21408.58 -> use local storage in our app. And we do that the exact same way as we did it using the

21414.49 -> console on wikipedia.org. Whenever we're writing it in our JavaScript file, it means that we

21420.34 -> can simply use the local storage variable that's accessible in the so called global

21427.25 -> scope. So when you're running JavaScript in the browser, you have access to this variable

21432.1 -> wherever you are. We'll then do set item, open and close parentheses, and then we'll

21437.36 -> first write the name of our item, we'll call it my leads, then we'll specify the value,

21444.25 -> I'll just do, example lead.com. This is the key. And this is the value. If I now run this

21454.15 -> code, nothing seems to have happened. But if we actually delete this entire line, and

21459.34 -> even rerun the browser, again, so that we know that the only way to get ahold of that

21463.59 -> data would be if it has persisted in local storage. And then try to do exactly that by

21468.14 -> doing local storage dot

21470.22 -> get

21471.22 -> item passing in the name of our item, the key, and that was my leaks. And then we console

21478.7 -> log that out, running the code. Ah, there we go. Example e.com is logged to the console,

21485.69 -> because our browser remembers that we previously saved a lead under this name. And now we can

21490.97 -> get it by is pretty cool, it opens up so many possibilities. Now I want you to try this,

21497.122 -> you're going to solve a three part challenge. First, you are to save a key value pair in

21501.56 -> local storage in the exact same way as I did, and then you are to refresh the page and then

21506.202 -> get the value and log it out to the console. Finally, I want you to clear out the local

21511.36 -> storage as well. And as a little hint, I have added the three methods here to use down here,

21516.95 -> local storage dot set item, passing in key and value, get item passing in key and clear,

21523.49 -> which clears out the entire local storage. So you need to use all of these three. And

21528.39 -> one little gotcha before you take a stab at this, both the key and the value that you

21533.08 -> pass in here and here need to be strings. That's a limitation with local storage, meaning

21538.971 -> you can only store strings. So it is a very primitive database, but it's what we got.

21544.78 -> So give this your best shot, and then return back to the screencast if you want to see

21548.47 -> me do it

21549.47 -> yet again.

21550.55 -> Okay, let's do this. First, we do local storage dot set item, I'm gonna call this one mine

21561.03 -> name and set it to compare Harold, Oregon like that. I'm gonna run the code so that

21567.8 -> now hopefully this has been saved. Meaning I can actually comment that out because we

21572.36 -> don't need it anymore. Now I can do local storage dot get item, and then pass in my

21578.458 -> name like that. Actually, I'm going to score this and a variable called name, just a little

21585.29 -> bonus here, and then console log out the name, instead of just console logging out this expression.

21591.5 -> And we run this you see, yes, we are logging out my name. Good stuff. Let's move on to

21596.81 -> the final part of the challenge. I'm going to comment this out. And then I'm going to

21600.47 -> do local storage dot clear. Now if I run the code, apparently nothing has happened. But

21608.06 -> if we now comment these two lines again, and run it

21612.31 -> Oh, no.

21614.66 -> So my name no longer exists? Well, that's great, because that's exactly what we tried

21619.06 -> to do by clearing out local storage here on line 11. So as far as I can see, local storage

21624.47 -> really seems to do the job. Let's move on and learn how to use this properly with our

21629.15 -> my leads array through that it's implemented into our app gives us that ever so important

21634.3 -> persistence feature for our leads. Now there is one issue with storing our leads in local

21644.55 -> storage as an array. And that's something we'd be aware about. If we for example, were

21648.8 -> to head over to Mozilla developer docs to read a little bit about local storage. Here

21653.22 -> you can see the window dot local storage page. The reason it says window here is because

21658.708 -> local storage actually exists on this window object. But you can also use the local storage

21665.05 -> variable directly. And when writing code in general, I would say that less is more so

21670.33 -> that if I can write less code, I will do that. So that's why I'm omitting the window dot

21675.122 -> syntax. Anyway, here we can read that the local storage read only property of the window

21679.87 -> interface allows you to access a storage object for the documents origin Oh my God, that's

21685.111 -> just really complicated, in my view, especially for a beginner. So let's scroll a bit down

21689.64 -> and read about what it actually does down in the description. The keys in the value

21693.97 -> stored with local stores are always in the UTF 16. The Home Screen format, what the hell

21699.14 -> does that mean? I think UTF 16 domstring. That is some hardcore stuff. But we are not

21705.68 -> going to worry about all that the only thing that matters is string, we at least know what

21710.18 -> that is. And as you can see here, as with objects, integer keys are automatically converted

21715.09 -> to strings. Okay, so it seems like like actually, everything that is stored inside of local

21720.33 -> storage has to be strings. Well, that's a problem because we were expecting to store

21724.942 -> this array here. So how do we do this? Well, to get someone to explain this was in an easier

21729.958 -> way, I would just google out our problem store array. In local storage, and look for the

21735.07 -> first StackOverflow question, how do I store an array in local storage? Okay, that's our

21739.872 -> problem as well. And instead of fine reading the question, I just jumped to the answer

21744.32 -> immediately because I'm impatient. And there you can see a very straightforward explanation,

21748.56 -> local storage, only support strings, use JSON dot stringify and JSON dot parse. Okay, here

21755.628 -> we can see some code. And we recognize this local storage dot set item, and then passing

21760.67 -> in the key. And then instead of just passing in the value, which here should be the names

21765.378 -> array, they are doing JSON dot stringify. And passing in the names array in that, it

21771.48 -> seems as if this JSON dot stringify takes the array and turns it into a string. And

21776.24 -> likewise, on the other side, when they are to fetch data from local storage, they use

21781.09 -> local storage dot get item names, but then wrapping that entire expression into JSON

21786.97 -> dot parse. So that seems to go the other way around from string to array. Okay, so actually,

21793.81 -> let's just try this. Let's pretend that this is our array in local storage, we have one

21800.59 -> lead here. And as we read in local source, everything is strings. So we have to turn

21806.21 -> this into a string, and we can use that with the backticks. Like that. Now, this is a string.

21811.73 -> And the problem here would be that, let's say that we fetch this from local storage,

21816.16 -> and we want to push another leads to the array. And we try to do that with my leads dot push

21822.74 -> epically lead.com. From this, if we get an error, my leads dot push is not a function.

21831.62 -> That is because the push method doesn't exist on strings, it only exists as a method you

21837.25 -> can use on arrays. So what we then have to do first, here, we've gotten the data from

21841.81 -> local storage. Now we need to do what our friend over at StackOverflow did, which was

21847.14 -> to parse the entire thing. So we can do my leads, equals JSON dot parse, and then pass

21857.7 -> in my leads here. Now, after he push, log out my leads, I guess now we can see now what

21868.07 -> worked, how about if we want it to go the other way round, this here, where we're actually

21872.75 -> stratifying the array so that we can save it in local storage?

21878 -> Well, this will be this situation here. We do my leads equals JSON dot stringify. And

21886.99 -> then passing in my leads, we now run this code in the console, it kind of looks like

21892.61 -> every so maybe not the best example. But what we can do here is we can type of before my

21898.74 -> leads, then we'll ask JavaScript to tell us which type is this variable here. If we run

21904.628 -> this easy, we get string. So by using the so called JSON methods, mostly stringify.

21910.65 -> And the parse and passing in our data, we can flip back and forth between strings and

21916.26 -> arrays. And also obviously, if we used a JSON object like this with the curly brackets,

21922.59 -> it would turn it into a JavaScript object and the other way around, and that's actually

21926.51 -> a more common use case. But in our case, we have an array to work with, and it does the

21932.09 -> job perfectly well for a race as well. Okay, now it's your turn to practice. I'm going

21937.84 -> to turn this back into a string and give you a set of instructions. Okay, you are going

21946.06 -> to do these four steps. First, turn the my leads string into an array, then push a new

21953.41 -> value to that array. Then turn the array into a string again. And finally console, log the

21959.31 -> string using the type of that you just learned to verify that it's actually a string. So

21964.52 -> go ahead and give this a shot right now.

21968.4 -> Okay, hopefully this one's well let's do this. First, we'll do my leads equals a song based

21980.06 -> on parse passing in my leads not to turn it into a proper array again. Now that we have

21988.68 -> it as an array, we can do my lead stop, push it to calm Okay, we have to turn it into a

21997.52 -> string again, we do my leads, reassigning it to JSON string if I my leads. And finally,

22007.282 -> console, log out type of my leads from the code and we get string in our console, just

22016.65 -> as we wanted. We have gone from string to array back to string again. Great job. Now

22026.8 -> you are going to implement the first part of our local storage feature and that consists

22031.73 -> of saving The Maya leads array through local storage. So that should happen here on line

22037.25 -> 11. Right after you've pushed the new lead to the My leads array and cleared out the

22044.378 -> input field, then then we are ready to actually save it to local storage. And you have to

22049.31 -> remember to use the JSON dot stringify when saving it, even though the browser we're using

22054.64 -> might be kind to us and actually do this for us. If it notices that we haven't done it.

22059.48 -> We want to be explicit about this so that we remind ourselves that we know the difference

22063.73 -> between working with just plain text or a proper JavaScript array. So remember to do

22069.26 -> that. And once you've written your solution, you should run the code by filling out the

22074.112 -> input field and hitting the Save input button because this line at the bottom of the function

22079.07 -> will also be run, and that heads into local storage and get the item that is called my

22085.17 -> leads. So if your implementation has worked, this console log should log out whatever you've

22090.042 -> saved to local storage as well, because my leads is actually the key we want to use in

22096.06 -> order to save our array. So use this as the key. So go ahead and do this. And I will,

22102.07 -> of course, show you the solution when you return back to this cast.

22109.41 -> Okay, let's do this. First, we'll do local storage dot set item. And here, we first need

22119.18 -> to specify what key we want to save our item under. And that is, as I said, here, my leads.

22125.42 -> So we'll do my leads, and then a comma. And then what we actually want to save. Now you

22131.28 -> might have been tempted to simply do my leads like that grabbing the variable called my

22136.47 -> leads. But as I said, we need to use JSON stringify to turn this into a text string.

22142.99 -> So we'll do JSON dot stringify and wrap the array inside of the parentheses of the stringify

22153.792 -> method. There we have it, let's run the code. Try to add a lead, hit Save input. And there

22161.9 -> we go. As you can see, in the console, we are indeed logging out something that looks

22166.932 -> very much like an array with one item of awesome lead, which is exactly what we wanted. Great

22173.18 -> job. Let's move on. So now we are able to set items in local storage, aka we are saving

22182.7 -> leads to local storage. So that we can, for example, do awesome leave and epic leave and

22189.83 -> then see that yes, they are indeed logged out. Because we have fetched the item from

22195.28 -> local storage here. And actually, you can even open up the developer tools here on screen

22199.84 -> bar, and click down to see w zero.script.com. And there you will see my leads as the key

22207.3 -> and the values as well. And the reason it's c w zero.scrambler.com is because that's actually

22214.2 -> the domain for this mini browser under the hood, whatever that screen by magic, don't

22218.68 -> worry about that right now, just know that you can access it by choosing that domain.

22223.4 -> Now, there's one big problem here though, which is that if we now refresh this page,

22227.9 -> again, boom, our leads are gone. Or actually, they're not gone, they still exist down in

22232.53 -> local storage. However, we haven't written the code for heading into local storage, fetching

22237.98 -> out the leads, and then displaying them. When we are refreshing the entire page, we're actually

22242.362 -> not doing anything, we're just setting the my leads array to an empty array. And we're

22246.5 -> not even triggering the render leads. So there's multiple things we need to fix up here. But

22251.41 -> we're going to start small as usual, you are going to basically just try to get the leads

22256.27 -> from local storage, and then store that in a variable, which I would call leads from

22261.31 -> local storage, and then log out this variable. So now I'm going to close the console. And

22267.272 -> before you go, I want to remind you about the JSON dot parse method that you learned

22272.22 -> earlier, because you want to use that to parse the string you get from local storage so that

22277.92 -> you turn it back into an array, this might be a little bit difficult, but just give it

22281.61 -> your best shot and then I will show you how to do it as well. Okay, hopefully that went

22292.352 -> well. Let's do this. We're going to do more or less the exact same thing we're doing here

22295.958 -> to begin with, which is basically local storage dot get item passing in my leads, whether

22304.89 -> we need to parse this, so I'll do JSON dot parse, and then parentheses around this inner

22313.58 -> expression right here and then store this in a variable called leads from local storage

22321.69 -> like that. Now we can console log out leads from local storage. We run the code and you

22330.112 -> can see there we are logging out the array With the leads that we know that we had here

22336 -> in our local storage, if I now do local storage doc clear right above this line and run it,

22344.89 -> we get no. And now you're probably wondering, Well, what the hell does no mean. And as you

22349.69 -> learn in the next lesson, no is a so called falsie value that we developers use to signalize.

22356.52 -> emptiness. And here, the developers behind local storage. That is, the people over at

22361.78 -> Google who have implemented local storage into Chrome have made it so that it returns

22367.14 -> null. When we ask for a key that doesn't exist. And actually, this is the case for all browsers

22372.82 -> because they have followed the same specification. However, this means that we'll end up in a

22377.44 -> situation where this variable leads from local storage is either No, which as I said is a

22383.45 -> falsie value, or it is an array, which is a so called truthy value. So we're in a situation

22389.958 -> where we have to act upon a variable that is either truthy or falsy, just not the same

22395.94 -> as true and false. Meaning we have to dig deeper into what exactly truthy and falsy

22401.79 -> means. And we'll do that in the next lesson.

22408.282 -> Okay, so let's learn about truthy and falsy values. So let's say that we, for example,

22416.93 -> have a slot machine up. So we have a constant credit, that's how many credits you as a player

22423.75 -> have. And then we need to check if credit is more than zero, well, then you're allowed

22429.9 -> to play the slot machine. So we'll log out let's play with a slot machine emoji. And

22435.63 -> then else, this means that your credit isn't over zero. So that means that you have to

22440.82 -> be at zero, then we'll console log out. Sorry, you have no credits, like that. Now, if we

22451.128 -> run this one time, could see sorry, you have no credits, it's logged out. Because credits

22456.07 -> was zero, this would evaluate to false credits is not more than zero, meaning JavaScript

22463.35 -> would jump to the else clause. Wherever if we change this to 12, then this expression

22471.82 -> 12 greater than zero would evaluate to true and this block of code would be run. Now,

22480.57 -> JavaScript isn't really that strict about what you shove into the condition here. Actually,

22485.36 -> if we only shove them credit like that, and try to run this again, you can see that we

22491 -> are still logging out let's play. So even though this would be evaluated to 12, when

22495.9 -> it's shoved into a conditional statement, as this JavaScript will then again, translate

22501.692 -> 12 to true.

22504.34 -> Likewise, if

22506.11 -> credits zero, and we run the code, you can see, sorry, you have no credits is logged

22511.1 -> out, because this would be translated to zero first, and then JavaScript will say, Oh, no,

22517.74 -> that's a falsie value. So I'm going to translate that out to false. So where you before learned

22523.75 -> about true and false values, you now have to understand

22527.282 -> truthy

22529.74 -> and falsy values. Let's try another one. For example, YOLO, just a screen. What do you

22536.24 -> think that will be? When I run this code? What will be logged out? Just take a guess.

22541.49 -> Okay, let's run it, we can see let's play is log that. In other words, YOLO, or this

22548.8 -> string, right here is a truthy value, because JavaScript turns this into true in the condition.

22554.53 -> And as well if we pass in an array of random items from the code, that is also a truthy

22563.98 -> value. Okay, let's try another one. Let's do an empty string from the code. That's a

22571.93 -> falsie value, because it got translated into false, meaning this block of code didn't run

22578.001 -> JavaScript, jump to the next block the else clause and blocked out sorry, you have no

22583.03 -> credits. So let's go back to just adding credits here so that our a fellow makes sense. And

22589.95 -> then at this point, you might feel that truthy and falsy values is really complex, because

22595.27 -> how will you keep track of all of these truthy and falsy values? It seems like, there's a

22599.72 -> ton of things to remember. Luckily, though, it's not that hard. You essentially have to

22605.85 -> remember, these six values, they are the full c values in JavaScript,

22611.7 -> false,

22612.97 -> zero, an empty string, no undefined. And this weird thing right here non short for not a

22621.72 -> number, and out in the real world inside of conditionals. In most cases, you'll work with

22627.39 -> either false null or undefined. So actually, this non here is rarely ever Use, which is

22633.59 -> why I'm not going to talk anymore about it. Null and undefined though, deserves a little

22638.43 -> bit of time, because a lot of developers are confused about these two, and they mix them

22642.682 -> together. Now let's look at the similarities. First. They're both primitive data types than

22646.72 -> just like strings, numbers and Boolean. And they're also both ways to signalize emptiness.

22652.6 -> However, on high level, the core difference is that no, is how you as a developer signalize,

22661.07 -> emptiness, or it's undefined is how JavaScript signalizes emptiness. So you will use no as

22669.87 -> a developer, it's useful tool where it's undefined is something you'll be exposed to, because

22674.25 -> JavaScript will tell you from time to time that what you're looking for is undefined.

22678.76 -> Now let's see this through the lens of an example. That'll help us see the difference

22682.2 -> between the two. Like, you'll sometimes see developers and declare variables and assign

22687.07 -> them a small, let's say you are creating a live streaming app, and you have current viewers.

22693.35 -> And that's set to null meaning that no people are watching the live streams at the moment.

22697.33 -> However, a bit later, a few viewers might pop up when you might want to do viewers equals

22702.84 -> and then an array of Jane and next, like that, the reason this can be useful way of describing

22710.33 -> the situation in terms of how many people who are watching the stream is because you

22714.301 -> might want to act upon whether or not there are people in the stream. So if current viewers

22721.77 -> and you might want to do something, for example, notify the live streamers that people are

22725.67 -> watching. So go ahead and turn on your live stream. Let's all log we have viewers like

22732.23 -> that. Now this block of code will only fire if current viewers has been set to an array.

22739.798 -> So now can see it'll be logged out. And let's say you a bit later lose all of yours you

22745.4 -> set at the mall, run the code, nothing happens, because no is a falsie value, meaning that

22752.61 -> this will be false. worse. The array here is a truthy value. So when current viewers

22760.128 -> equals that array, except to drew this block of code is run. Now here you can see that

22767.11 -> null is a useful way of signalizing emptiness because an empty array wouldn't do the trick.

22773.43 -> If we run this code, you can see we are indeed logging this code because current viewers

22778.39 -> is an empty array, which then again evaluates to true. So it's better to use

22785.77 -> null here is how you as a developer can symbolize emptiness, and act upon whether or not a variable

22792.362 -> is empty. Let's now look at undefined and see how JavaScript uses that to signalize

22797.53 -> emptiness as well. And we can do that by simply removing everything except let current viewers,

22805.09 -> we now create a console log current viewers, which has been declared but not assigned to

22812.192 -> a value. When we run this, we'll get undefined for JavaScript tells us that this variable

22818.27 -> is undefined or kind of like empty. Likewise, if this, for example, was an object, and you

22825.02 -> tried to log out the key that doesn't exist random key using the dot syntax, you'd also

22832.272 -> get undefined. JavaScript tried to look for this, but it was completely empty. Here, if

22838.39 -> it is an array with one item, and you try to look for the item at index five, run this

22847 -> again, JavaScript says undefined. So this way, when you see either null or undefined

22852.87 -> in your code base, it should provide you with a hint as to whether this is JavaScript trying

22857.5 -> to symbolize emptiness, or if there's a developer who's written that code, and has tried to

22862.378 -> signalize emptiness. So that was a long walkthrough of the differences between null and undefined.

22867.67 -> There's more to it also, but I don't think we need to dig deeper than this. Let's wrap

22871.47 -> up this cast. And in the next one, I'm going to teach you a neat little trick to check

22876.49 -> if a value is truthy, or falsy, which you can use whenever you are in doubt. And then

22880.6 -> I'm going to stress test your truthy and falsy skills. So let's move on. If you ever wonder

22889.99 -> whether a value is truthy, or falsy, you can check it through writing Boolean, open and

22895.99 -> close parentheses and then pass in whatever value you want to check inside of those parentheses.

22901.51 -> Here we'll do Hello,

22904.51 -> that's a

22906.01 -> store this in a variable called True or false. Now console log, true or false. On the code,

22914.08 -> you can see that we get true meaning that Hello evaluates to true removing the content

22920.23 -> of the string running it again, we get false because as you hopefully remember, an empty

22924.88 -> string is a falsie value. Now with this in mind, you are going to do a set of challenges

22931.902 -> which I said in the previous casts So, here they are, it's six console logs. And inside

22937.26 -> of them, we are checking a bunch of values for their boolean value. So each of these

22942.94 -> lines will log out either true or false. And your job is to hear after these two flashes,

22949.34 -> right, either true or false, depending on what you think will be logged out. So go ahead

22954.23 -> and give this a shot right now.

22956.74 -> Okay, let's do this. So an empty string, as we remember, that is a falsie value. So this

22967.878 -> will log false. Here, I'm trying to trick you because zero is indeed a falsie value.

22974.22 -> But this is a string, which contains one character, it's not zero. so this will be true. Here.

22980.93 -> 100. That's a truthy number.

22984.16 -> No,

22985.16 -> hopefully, you remember it, the bad is a faulty value. So this will be false. And here, I'm

22989.98 -> also Frank, trickier, zero wrapped inside of an array, whilst zero is a falsie value.

22996.128 -> An array is a truthy value. So this will be true, here, minus 00 is a falsie value. And

23005.54 -> whether it's minus or plus zero, doesn't change that. So this should be false. Let's run the

23011.39 -> code. And we get false, true, true, false, true, false, correct. Now we'll return back

23018.67 -> to the Chrome extension. And you'll use these truthy and falsy skills in order to build

23023.98 -> a conditional for the leads we have stored or not stored in local storage. So let's move

23029.73 -> on. So now that we're able to check if we have any leads in our local storage, and if

23038.67 -> so, we parsed those leads so that we get him as a JavaScript array, we are ready to act

23044.74 -> upon whatever data we get here. And first lesson, look at what kind of data we can get.

23050.22 -> Because there's essentially two situations we need to account for. One is this one right

23055.24 -> here, where the my array and local stores gives us back some data, for example, this

23061.52 -> array right here, if so, we have something to work with, and we can render it out instantly.

23066.958 -> But then there's the other situation, which is the one right here where actually there's

23072.01 -> no data in the my leads key in local storage, and actually the key doesn't even exist. If

23077.26 -> so, we know that we get back Nall for that as a falsie value. And this is a truthy value.

23084.25 -> So then the question is, what are we going to do in these two cases? Well, if the value

23088.72 -> is no meaning that there's no leads stored in local storage, well, we're not going to

23092.782 -> do anything, because there's no point trying to render out any leads. If there's no leads

23096.9 -> that are saved there initially. So then we're just going to ignore it not do anything. But

23101.43 -> if we find a couple of leads, if we get an array back from this expression right here,

23106.73 -> then we need to first set my leads to whatever leads, we are returning back, and then call

23114.72 -> the render leads function, because the render leads function takes the leads in the my leads

23120 -> array, and renders them up. Because of course, that's what we want to do, we want to show

23124.39 -> the user whatever we found in local storage. So here is the challenge formulated, first

23131.208 -> check if leads from local storage is truthy, that's this variable right here. If so, set

23138.112 -> the mile leads variable, this one up here to its value. And by that I mean the value

23144.34 -> of this variable right here, the leads we have fetched out from local storage, and then

23149.24 -> call render leads. So this might be a little bit of a difficult challenge, but give it

23153.42 -> your best shot. And then I will show you the solution as well when you return back to the

23157 -> screencast.

23160.7 -> Okay, hopefully this one's Well, let's do this, we'll do if leads from local storage,

23171.08 -> that's actually everything we need to do. Because this evaluates to either true or false

23176.72 -> the expression. And if it's a true thing, this code will be run. If it's a falsie, then

23182.548 -> JavaScript will just jump over all of these lines and continue down here on line 16. So

23187.47 -> inside of here, we are first going to set my leads to this newly value we've just fetched

23192.628 -> out my leads equals leads from local storage. And then we're going to render leads like

23202.53 -> that. If we run this now, you can see nothing happens. That's because at this point, local

23210.22 -> storage is most likely No. Let's just log it out to verify that. Yes, we're indeed logging

23215.85 -> out No. What we then can do instead is actually add awesome lead and epic lead to our list.

23225.03 -> Now both of these should be saved in local storage. We should be in this situation right

23230.43 -> now. So if I refresh Yes, now we have persistent our leads across refresh, that is so cool.

23239.542 -> So give yourself a pat on the back, you should be so proud of yourself reaching this far,

23243.9 -> you're now working with a small database, basically. And that's a huge step towards

23247.78 -> becoming a professional developer. Now, we need to fix the fact that we can't delete

23256.9 -> our leads. Because obviously, that's a feature we need. Let's say that I'm a sales development

23261.69 -> representative. And I'm gathering leads like this, I have four leads at this point. And

23266.09 -> I want to go ahead and contact these people or maybe move this data over into a spreadsheet,

23270.4 -> for example, so that I again, can go out to the world wide web and churn through leads

23274.98 -> on LinkedIn and save them to my Chrome extension, well, then I obviously need to get rid of

23280.04 -> these existing leads, so that I get a clean slate to start with. But now that's not possible,

23285.01 -> I can refresh this as many times as I won't, it'll just continue to store my leads. So

23290.378 -> we need a delete button, I need something that looks like this. And that is what you

23295.17 -> are going to do in this challenge, you are going to style this delete button. And then

23299.47 -> later on, we're going to write the code for its functionality as well. But first, we have

23305.32 -> to create the button in the HTML. And I'm just going to do that for you. So like that,

23311.87 -> delete all. And as you can see, if we render this out, you can see that it's actually looking

23316.89 -> pretty good already. It has the default button styling that we have added in our CSS here.

23323.08 -> But we want it to be kind of the inverse of the Save input button, so that you properly

23328.01 -> see that it's something different. And in order to target that button, we need to give

23333.42 -> it an ID of delete dash btn like that. Now, before you start writing your code inside

23342.378 -> of the Delete btn selector right here, I am going to do one change on the button as a

23349.06 -> whole. Because actually, this button, which you can see in the slide has a slightly different

23355.96 -> styling than this one here. And that is that the border is actually not Mum, it's actually

23361.29 -> one pixel solid. And then the screen color. Like here, I can see both buttons got one

23370.64 -> pixel added to its border. If I remove this, you'll see that the buttons become slightly

23375.51 -> smaller, they shrink and slightly like that with zero. And they come a bit larger if I

23380.66 -> do one. And let's just try a different color here, red there, you'll clearly see it with

23387.29 -> one pixel. And with zero pixels, we want one pixels of the green color, because that's

23394.628 -> needed to get this green border around this delete all button. So now we are ready you

23402.03 -> are to style a button according to the provided design. And you're only going to apply the

23406.71 -> styles inside of this delete btn id selector. So go ahead and do this. And then of course,

23412.15 -> I will show you the solution as well, when you return back to the screencast. Okay, hopefully

23418.942 -> that went well. Let's start. The first obvious obvious thing is the background. It should

23426.32 -> be white, not green. So I'll do background. White, right. Okay. Now, we also seemingly

23433.97 -> lost the text. But that's not the case, it's just white, so it blends in with the background.

23439.34 -> So we need to change the color as well. And for that, we're going to use this green color

23444.61 -> up here and paste it in. And there we go. As easy as that. With that. Let's move on.

23454.16 -> Now we are going to make our delete all button actually work. So you'll do that through a

23459.39 -> three part challenge. Pretty big one, actually. But first, I'm going to give you a little

23464.06 -> mini challenge. And that is this leads from local storage here. Should that be defined

23469.52 -> as a lead? Or do you think we should change it to a const? Just look at what we're doing

23473.45 -> with it down here on line eight and line nine where we are using it and take your best guess

23477.74 -> as to whether we should change it or not. And the answer is that Yeah, actually, we

23484.55 -> do want to change this to a const because we're not reassigning it here. And if you

23489.17 -> remember from previously, it's a good practice to if you can use const then use cost because

23494.22 -> it enforces strictness throughout your code base when when another developer comes in

23498.44 -> here or you in two months and looks at this leads from local storage and see Oh, it's

23503.01 -> a constant, then I know that this will not be reassigned further down in the code. So

23507.681 -> that was just a little digression so that we got to clean up this little variable inconsistency

23513.02 -> here. Now let's move on to the major challenge. As I said, it's three part. First, you're

23519.01 -> going to grab a hold of the delete button and stored in a delete btn variable. Then

23524.35 -> you're going to listen for double clicks on the delete button. And if you don't know how

23528.82 -> to listen for double clicks, you should just Google it. Finally, when The button has been

23533.64 -> clicked that is double clicked, you should clear the local storage, you should clear

23538.99 -> out the Miley's variable, that is this one up here. And you should also clear out the

23544.35 -> DOM so that the user doesn't see any more leads on this unordered list. So a pretty

23551.17 -> big one, but give this one a shot. And return back to me when you want to see my solution.

23559.522 -> Okay, let's do this. I'll start up here, we'll define a const. With medium like that. You

23568.73 -> document dot get element by ID passing in delete btn. status, indeed, we had right here.

23580.97 -> Then, let's move on, we are going to listen for double clicks on the delete button. And

23586.14 -> how do we do that?

23587.692 -> Well,

23588.73 -> let's Google it. I think it's a good idea to Google add event listener and then just

23592.22 -> double click, because as you know, it's the Add event listener we are using. By doing

23598.18 -> this, we get the Mozilla developer docs as the first result, clicking into that, and

23603.761 -> I always scroll as fast as I can to the example I think it's a lot easier to learn from math

23608.27 -> rather from textual explanations. Here we can see card dot addEventListener DB l click

23614.56 -> Hmm, pretty nice. So simply leaks ETL the event listener, and V bl, click like that.

23626.98 -> Let's then also do the function. Now, let's just console log, double click like that.

23635.28 -> Well run the code. Double click on delete all

23638.51 -> and yes,

23639.51 -> it's worked. If I try a single click, nothing happens. But double click? Yes. Okay, good.

23646.81 -> Three, when clicked, clear, local storage, the my leads variable and the DOM. Okay, let's

23653.31 -> do this one by one. local storage, if you remember the way declare that was local storage

23659.72 -> dot clear. My leads? How do we clear that one? Well, we actually reassign it by doing

23667.64 -> my leads, and just setting it to an empty array, and then finally clearing out the DOM.

23673.75 -> How do we do that? Well, actually, the trick is to simply render out leads, which now are

23680.74 -> just an empty array. So we just trigger the render leads function, render leads like that.

23689.032 -> let's rerun this. And now try to double click on the delete all.

23694.39 -> Yes.

23695.43 -> Now we've removed everything in the DOM. And we have cleared the local storage, our array

23702.298 -> is empty, we have a working delete button, we can delete this console log here, great

23708.15 -> job during this challenge. Let's move on. Now that we have an app that actually works

23716.202 -> pretty well, we're going to do something we haven't done a lot throughout this course,

23720.708 -> which is to refactor our code, and not only refactor it based upon a current need, we're

23725.86 -> going to refactor it based upon a hypothetical future use case. So for this, we're not going

23732.15 -> to use the mini browser. So I'm just going to minimize that one. And actually, I'm also

23736.798 -> going to take this function render leads, and move it up here, right below this conditional,

23745.43 -> because it is the render leads function, we're mainly going to refactor. And the reason for

23749.76 -> that is the following. This function now currently has a very low degree of what we will call

23755.62 -> reusability. Because here, it is hard coded that whenever it's called, it's always going

23764.01 -> to look at the my leads variable, the one we've created up here, or global variable,

23770.02 -> and render out whatever exists in that array at that point in time. Now, let's say that

23776.81 -> we one time in the future, also have another array, for example, let all the leads, perhaps

23783.47 -> just a bunch of slightly unimportant leads that you've shoved into this array that you

23787.84 -> don't want to render out at any given time. But you want to perhaps have the opportunity

23791.772 -> to bring them up from time to time, if so, we would struggle to render them out. Because

23797.36 -> as I said, in our render leads function, we only care about to the My leads array. So

23803.23 -> what we can do instead is to make this function a bit more dynamic, and have it render out

23808.93 -> whatever array we tell it to render out. And the way we do that is to pass in a variable

23815.03 -> as a so called argument, when we call it we could take my leads here, and then pass it

23822.26 -> in like this in between the parentheses so that it would be possible for us to use it

23828.64 -> inside of the body of our function, but without referring to my leads. Directly like this.

23834.27 -> Now, let's just pause here for a minute before we rewrite the body of the function, just

23838.852 -> in case, this seems weird, because you might feel you're walking on thin ice here, but

23843.77 -> actually, you've been passing in arguments into functions, when you have called them

23848.29 -> for quite a while now. Because that is exactly what you're doing a pair, for example, the

23853.25 -> get element by ID function, which you are calling and giving it to the string of infidel,

23858.71 -> so that this function, when it does its magic, and walks through the HTML file, in the search

23865 -> of its of its element, knows, when it hits this point up, here it is, this is the element

23870.76 -> I'm looking for. Because pear told me, so when he wrote this cold told me that this

23875.32 -> is indeed the ID he wants. Haven't we done that? Well, the function would have been like

23880.75 -> blind to whatever it was looking for, wouldn't be able to recognize this element. But we

23886.612 -> did, of course, give it that value. And that is also what we're doing here. Now, we're

23893.94 -> telling render leads that we want you to render out this data right here, and then make this

23898.86 -> work, we also have to hear right, something like, leads inside of the parentheses here

23905.97 -> as well, the way this works is that when this function is called, with this data passed

23911.5 -> in this data, this array will become this variable here, which is accessible inside

23916.872 -> of the body of the function. So now, we can replace my leads

23921.91 -> with leads here, and we can replace it here. And here, at this point, the body of this

23929.74 -> function has no idea and no relation to this my leads global variable up here, it only

23936.49 -> cares about what you entered into the function, when you call it. And now what actually makes

23941.72 -> sense is to skip the usage of the word leads in the name of the function, because actually,

23948.03 -> the function at this point doesn't even know that it's rendering out leads, it could be

23951.9 -> rendering out a bunch of names of soccer teams, or a list of fruits, or whatever it is, it

23957.69 -> renders out whatever you pass into it. So actually, what we want to do is remove this

23962.01 -> leads here and simply call it render. Now, this, of course, requires us to do the same

23968.73 -> thing on the delete button. Here, we'll use the new name, render, and we have just cleared

23976.68 -> out the my leads array. So it's an empty array. So what we'll do is simply pass in my leads

23981.59 -> here as well. And finally, on the input button, when we add new leads, we have also modified

23987.41 -> my leads array. So we'll take that and paste it into the parentheses of the function invocation.

23993.94 -> And then, of course, use the updated name as well. So now, we have a function called

23999.83 -> render, which can take any array you give it and then render it out. So potentially,

24006.38 -> you could give it the old leads array as well. And it's a much more dynamic and reusable

24011.932 -> function. Let's try this. rerun the code, save awesome leads, epic lead, it works. And,

24022.04 -> yes, the delete button also works. And just as a final notice, it doesn't matter what

24028.57 -> we call this parameter here could have called it YOLO. If we wanted, however, that would

24034.6 -> require us to also change this to YOLO. This to YOLO and this to YOLO. We run the code

24042.64 -> lead, it works. And we can delete it, it works in the exact same way. However, we actually

24051.89 -> want to use semantically meaningful names. So let's use leads instead like that. You're

24059.193 -> probably a little bit confused right now. That's totally okay. Let's take a closer look

24063.81 -> at how to use arguments in functions over the next few casts. Okay, let's return back

24072.31 -> to the example of greeting our users, which we've looked at earlier in the course. So

24077.03 -> scrambled we have this welcome back pair Harold borgan text which is visible on the dashboard.

24082.09 -> And here I have the basic setup for such a feature using a function. Starting from the

24086.94 -> top of the file, you can see that we are heading into the DOM and fetching a welcome element.

24091.95 -> That is the HTML you can see right here, this paragraph, which is completely empty at the

24096.86 -> moment. And here in the greet user function, we take that welcome element, and we set its

24102.06 -> text content to welcome back pear, Harold borgan with an emoji at the end. If we run

24108.04 -> this, nothing happens, of course, because we also have to call the function greet user

24113 -> like that. Now if we run it, we can see that it is rendered out on the page. And this is

24118.91 -> a very typical use case for a function rendering out a specific thing. However, it's a really

24125.04 -> bad function because it can only render out this string right here. It can only run rob

24129.8 -> my name, which is pretty silly and it should actually Rather be called something like Greek

24134.77 -> pear. But that would just be stupid, we're going to use the Greek user name and rather

24139.84 -> modify the functions so that it can greet whoever enters the app. And the way to do

24144.39 -> that is to add a so called parameter to a function. And I can do that by writing a variable

24150.7 -> inside of the parentheses, of the function declaration. So here, for example, write name

24156.69 -> like that. Now, it is expected that we are to use this name variable inside of the body

24162.47 -> of the function. And indeed, we are going to do that we are going to replace this with

24168.84 -> a name like that. So now we are constructing this string using the first string, then the

24177.14 -> name variable, and then the final string. Now, if we run this code, you'll see welcome

24182.75 -> pack undefined. That is because name is now undefined. And can you take a guess at Why?

24188.16 -> Well, it is, because when we call the function, we haven't passed in any names. And our function

24195.27 -> expected us to do that. So here in between the parentheses, we'll simply type a name.

24200.99 -> Let's type here, for example, run the code. And now you can see welcome back up here.

24205.99 -> So here we are passing in a value into the function when we are invoking it, that value

24211.378 -> becomes the name variable inside of the body of the function. And this is then changed

24217.08 -> to pair on the flight when that is called.

24221.34 -> So now I have a challenge for you. You are to give the function a parameter, which you

24229.09 -> are to call greeting, that replaces the Welcome back. So it will always greet me, but the

24235.68 -> greeting itself can be Howdy, or Hello, or Nice to see you, or basically whatever, because

24241.3 -> you will define it as a parameter in the function. And then you of course, will call it with

24245.88 -> a value so that you verify for yourself that it actually works. Go ahead and give this

24250.31 -> a shot. Okay, hopefully, that went well, the way to do this is by doing a greeting here,

24261.94 -> and then removing this rather writing, rethink here and then a plus. Here, when we call it,

24269.07 -> we can do it and run the code. And then we can see how the pair Harold borgen. Great

24276.391 -> job. Let's move on. Okay, so our function is now pretty dynamic, since it can use whatever

24285.72 -> greeting value you want, you can kind of set the tone, however you want when calling the

24291.04 -> function, but we need to get back the same type of feature for the name as well. So the

24296.57 -> way we can do that is by adding a second parameter, because you can have as many parameters as

24302.33 -> you want. So actually, here, I can do name, and then replace this with a name like that.

24312.57 -> Now if we run this, you will see how the undefined again, because we have only given this function

24318.66 -> one argument when we call it, but actually it expects to both the greeting and the name.

24325.12 -> So here we have to do comma, and then famous, for example, we run the code now, you see

24331.17 -> how many dreams, now we have a really dynamic function here. So it's a pretty good function

24336.78 -> in my opinion. But there's one issue which is not related to parameters, but related

24342.128 -> to the code quality of the function body. Because as you can see, while it made sense

24347.1 -> to use double quotes for strings, when we started out, at this point, the expression

24352.081 -> has become a little bit clunky, we have three plus signs here. And we might even get more

24357.292 -> of them as we continue on improving this function. So at this point, it's time to refactor this

24362.708 -> expression into using template literals. So I want you to do that now. And then we are

24368.51 -> ready to add a third parameter to our function. So go ahead and change this into template

24373.18 -> literals right now. Okay, hopefully, that went well, the way to do it would be to add

24383.05 -> a template literal to begin with. And then once you end the string, then now we can remove

24388.18 -> all these clunky plus signs and boats. And here we have two variables, greeting and name,

24396.2 -> which we need to escape out from the string. So we'll do dollar sign, open curly bracket,

24402.24 -> closing curly bracket, dollar sign open, and close. Yes, this looks better, much more readable.

24410.52 -> If we run it again, you see, we get the exact same result. Great job. And your job now is

24416.45 -> to add the ability to choose the emoji as well, meaning you should be able to run the

24421.42 -> function and pass in a third parameter, which decides what kind of a Moji that will be rendered

24427.692 -> to the page. So go ahead and try that right now.

24432.952 -> Okay, the way to do it would be the same as we've done up until now, by adding a third

24441.64 -> parameter here. And then replacing this hardcode remotely with lots variable escaped out from

24450.64 -> the string, of course, Modi like that. And here, we'll need to also now add an emoji

24456.148 -> when we are calling the function. Let's try the fire one, run the code and nice, we now

24463.16 -> have a super dynamic function that we can use to create greetings of all sorts. And

24470.042 -> it's so much better than what we started out with. Let's move on. Okay, up until now, we've

24478.49 -> only passed in strings as arguments in our functions, whoever you can force pass in whatever

24484.1 -> data type you want, for example, numbers. And I want you to practice that now. So I'm

24488.78 -> going to give you a challenge where you are to use numbers and a function that you have

24493.62 -> written from scratch. So here, you have to combine what you've previously learned about

24497.43 -> functions and arguments. And see if you can connect the dots together. So you are going

24502.46 -> to create a function called add, that simply adds two numbers together and returns the

24508.25 -> sum. So down here, on line five, and six, I'm calling this function, and then and then

24513.74 -> logging it out. I'm doing that two times. And the first time, the number seven should

24518.78 -> be logged out. And the second time the number 111 should be logged out, because I've passed

24524.14 -> in three and four, the first time around, and nine and 102, the second time around.

24529.58 -> So these are basically your test cases. So go ahead and write this function here on line

24533.628 -> three, it should have two parameters, and should return the sum of those two parameters.

24539.45 -> And then afterwards, I will of course, show you the solution as well. Okay, hopefully,

24548.86 -> that went well. Let's do this function,

24552.542 -> ad,

24553.542 -> open, close parentheses, and then the square brackets, and inside of the parentheses, we

24558.41 -> need to define our two parameters. We'll call the first one, number one. And the second

24562.9 -> one, number two, I'm here, I'm just going to return num one plus num two like that.

24570.45 -> If we now run this, we can see in our console, we are logging out seven, and 11. Great job.

24577.628 -> Let's move on. Okay, up until now, you've heard me say the words parameter when I've

24585.42 -> talked about defining variables in between the parentheses when we declare a function.

24591.27 -> And I've also said arguments when we pass in values into the function when we invoke

24596.56 -> the function. And this is probably a little bit confusing, like, why am I using two different

24600.45 -> words, they're basically the same thing. And actually, to be honest, in my experience,

24605.01 -> most developers mix up the words parameter and arguments all the time. And that's totally

24610.202 -> okay. Even I actually, up until this point, I decided to actually explain the difference

24615.6 -> in this course, would mix the two up all the time, meaning mixing up these hair values

24620.86 -> that you pass in when you call the function and these variables that you define when you

24626.06 -> write the original function. So weight works is that these are parameters. And these are

24635.36 -> arguments. And in order to remember the difference between these two, I found a really cool comic

24640.72 -> on the web, which pictures two people arguing in a bar, and then a bouncer coming to say,

24646.01 -> Hey, take your argument outside. And that gives us the hint, arguments are created on

24653.03 -> the outside of the function, whereas parameters then naturally have to be on the inside of

24658.37 -> the function. So greeting a name, as you know, are only defined here on the inside of the

24664.08 -> function battalion. Jas, they come from kind of the outside of the function, the outer

24669.45 -> scope, this is perhaps even more clear, if we had a variable here, which was called pi,

24675.74 -> and we set it to it like that, and then we pass in PI here, surely this high variable

24684.128 -> is on the outside of the function, because in this case, that is this function lines

24691.14 -> two to four, this is on line seven, and line eight, so they are on the outside. Likewise,

24695.81 -> here num, one, num, two are the parameters, whereas three and four are the arguments.

24704.1 -> So with this, I want you to answer these four questions with either arguments or parameters.

24710.532 -> So the answer is one or the other. And you are to write that here after the question

24715.66 -> mark. So go ahead and do this right now.

24718.73 -> Okay, hopefully that went well. What are greeting and name, greeting and name well that is on

24730.208 -> the inside of the function, that means that they are per amateurs about how to you and

24735.4 -> James well, as we've talked about these live on the outside, when you're outside of the

24739.94 -> function, you are an argument. So they are arguments about number one and number two,

24746.44 -> okay, these are defined in the function declaration and live in the inside of the function, meaning

24752.94 -> the parameters three and four, are on the outside of this function here. So they are

24760.79 -> arguments like that. So from now on, whenever you wonder whether you should say, parameter

24766.23 -> or argument, just think about this epic cartoon created by type alias, and actually considered

24772.53 -> clicking on this link, so that you get to check out the blog post, which is really good.

24776.25 -> And then to be honest, you will probably meet a lot of professional developers who can't

24780.64 -> even remember this difference, but you will. So far, we've only passed in numbers and strings

24790.34 -> into functions that we've practiced with in this little mini section on function parameters.

24795.18 -> However, you can pass whatever variable you want, actually, into a function as its parameter.

24801.128 -> So now I want you to create a function, which is called get first, and it takes an array

24806.15 -> as its only parameter. That's why I'm writing it as arr. And this function, one called,

24812.872 -> should return the first item in the array. So I want you to create this function and

24817.87 -> make it return the first item. And then I want you to call it passing in an array as

24824.048 -> an argument so that you verify that it works. And you can do that by using for example,

24829.48 -> console log to verify it, I'm not going to give you any starter code here, you got to

24833.93 -> write the entire thing, because that helps you get the muscle memory. So go ahead and

24837.48 -> give this a shot right now.

24839.98 -> Okay, hopefully that went well. If not, no worries, let's do this. We'll do get first

24851.37 -> like that are and then the body of the function, then we need to take this our variable and

24857.958 -> return the first item, we do return our open and close square brackets and zero inside

24865.61 -> of it. Now we can do get first open parentheses and pass in an array. Let's say this was a

24871.48 -> blackjack games, we're passing in the values of my cards like that. If we run this, nothing

24879.93 -> seemingly will happen. Since we've only returned to this value, we haven't logged it out. Let's

24884.92 -> actually return it and store that value in a first card variable and then console log

24893.67 -> out first card, we run this first card is console log as 10. And that is indeed correct.

24900.13 -> Great job. We are back at our lead striker app. And now you are going to do what I did

24908.89 -> previously, which was to refactor the render leads function. So that it takes a parameter

24915.64 -> which I suggest uses call leads that it uses instead of the global my leads variable, this

24921.33 -> one right here. So hopefully you remember how I did this, or were able to wing it on

24925.45 -> your own. Anyway, please also remember to update all of the function invocations across

24930.5 -> the file as well, it is a good idea to update the name as well, but it's not strictly needed.

24935.5 -> So I'll leave it up to you to decide whether or not you want to do that. Just go ahead

24938.85 -> and give this a shot right now.

24944.02 -> Okay, hopefully this went well. Let's do this. So we are going to create this function so

24954.122 -> that it rather takes in a parameter here, which we're calling leads, instead referring

24960.31 -> to the global my leads variable, so then we simply need to replace my leads with what

24966.67 -> we've called our parameter like this in these three places. And that's it. I also want to

24972.34 -> remove leads from the name and then go up here, change the name and also pass in the

24979.63 -> my leads variable. Do the same thing here. And we've cleared out the my leads variable

24986.34 -> as in my leads, which now is just an empty array. And finally down here, pass in my leads

24994.42 -> like that. Let's run this to verify that it works. Save input, delete all Yes. Great job.

25003.28 -> Let's move on. In this challenge, we are going to set the stage for the Save tab button.

25011.75 -> I'm going to write the HTML for you first and then you are going to take over and do

25015.958 -> the JavaScript part of it. So a button like that it should be called save tab. run this.

25024.92 -> We can see that we get to the Save tab button and let's give it an ID of bash medium. Like

25032.821 -> that, now, you are first going to grab the Save tab button and then store it in a top

25039.08 -> btn variable. And then you are going to hook up an event listener with this button so that

25043.98 -> you listen for clicks. And when it's clicked, you are to log out my LinkedIn URL to the

25049.89 -> console. And the way you grab ahold of that LinkedIn URL is through navigating into this

25055.84 -> times array, it actually has an object as its only item. And that object has a key value

25062.37 -> pair of URL and the actual string value of the URL to my LinkedIn profile. So this might

25069.34 -> sound a little bit weird, but like, why am I forcing you to do all this complex stuff

25073.202 -> of navigating into this array and into this object and fetching out this value right here?

25077.92 -> Well, you'll understand this, when we implement this with the chrome API that actually gives

25082.78 -> us access to the current tab or on at any given point, because then we actually have

25087.95 -> to do such a navigation. So I'm just prepping you for that. So you have to remember how

25093.16 -> to work with arrays and objects, that's great to get some practice on. If you struggle,

25097.458 -> I will, of course, show you the solution as well afterwards. So go ahead now and just

25101.25 -> give this your best shot. Okay, hopefully this went well, let's do this, we'll create

25111.3 -> a const tombigbee sub btn and use document dot get element by ID, passing in tab dash

25119.07 -> btn. As that is the ID, we gave it over in the HTML Yes. Down here, we need to listen

25128.48 -> for button clicks on the car btn will do add event listener, first argument is clicked.

25136.46 -> Second is a function that will be run when the button is clicked. And here, let's console

25142.17 -> log out just this entire expression, when you are to navigate into complex expressions

25147.628 -> like this, so often a good idea to just take one step at a time and log out the results.

25153.26 -> Let's run this, hit the Save top and bring up the console. Okay, we can see now that

25158.9 -> we have our URL wrapped inside of both square brackets and curly brackets. One thing we

25164.651 -> at least need to do is navigate into the first item of this array right here. And how do

25170.702 -> we navigate into the first item, which also happens to be the only item? Well, we simply

25175.99 -> do square brackets zero for the zeroeth index. Let's run this it save time. And there we

25183.56 -> can see in our console, we're now just logging out an object. So this is an object with a

25187.708 -> key URL and the value which points to my LinkedIn profile. How do we get ahold of that value?

25193.78 -> Well, we use the dot notation dot URL like that. From the code again, it saved up and

25199.32 -> there we go, we have logged out my LinkedIn URL. Great job, let's move on. Next step is

25210.37 -> to actually save the URL instead of just logging it out. Because obviously, this doesn't do

25215.92 -> the trick for our app, we need to save it to local storage, we need to add it to the

25220.51 -> My leads array. And we also need to trigger a render so that the fictional leads here

25226.208 -> actually will be rendered on the page when the user hits the tab button. So to achieve

25232.02 -> this, you basically need to do more or less the same thing that you're doing inside of

25235.85 -> the input button. So hopefully, you've got this. If not, no worries, I will of course,

25240.71 -> show you the solution when you return back to this screencast.

25247.07 -> Okay, let's do this. So the first thing I want to do is push it to the My leads array.

25255 -> So we'll do my leads dot push, and then pass in this expression right here, like that.

25263.68 -> Let's comment out this one for now. Next up, we need to save the Maya leads array to local

25269.46 -> storage. Luckily, though, we know how to do this, that's the exact same line as we have

25274.208 -> down here. local storage dot set item, the my leads, which is the key should be set to

25281.82 -> stringified version of the my leads array. So let's just remember how this looks and

25287.2 -> rewrite it up here. Want to rewrite it because it's a little bit of a complex expression.

25291.94 -> So it's good to get that practice, local storage set item, which item Well, it's the my leads

25300.56 -> key, which is what it's called here, we are going to set it to the My leads value. However,

25307.7 -> we need to stringify this value first. So we'll do JSON dot string if I open parentheses,

25316.58 -> close parentheses, and a lot of spaces here so that you understand what happens. This

25321.84 -> is the array and this is the stringified version of that array. So the array turned into a

25327.4 -> string like this, I think okay, looking pretty good. Now First thing we need to do is actually

25334.73 -> trigger a rerender. Because we have pushed something to the My leads rate. Now we want

25339.141 -> to render it out with the render function and pass in my leads as the argument so that

25344.73 -> we actually get to see it on our page. I'll run this code, bring up the mini browser and

25350.98 -> hit the Save tab. And there you go, we got our URL render to the page, let's combine

25356.231 -> it with a lead as well, awesome lead. Yeah, there we go and delete all Oh, nice, it works.

25363.15 -> Really good job. So we now have a working dummy version of our tab button. However,

25372.52 -> it's kind of useless. Because if I hit the Save tab here, once, twice, three times, you

25377.37 -> can see we're just rendering out our hard coded tab URL, which we have here. What we

25383.59 -> of course, rather want to do as the following, we want to be able to open up our Chrome extension

25388.39 -> on any URL. And then when we hit the Save tab button, the extension should head over

25394.61 -> to the address bar here, grab a hold of this URL, and then boom, save it in our list of

25402.01 -> leads. So my question for you here is where in our code that is on which line, should

25408.89 -> we go ahead and try to talk with the chrome API to ask it for the current tab URL, just

25416.85 -> take a guess at where in this file, we need to do that? Well, the place we want to do

25422.58 -> it is right here, when the user has clicked on the tab button, and this function has been

25428.9 -> triggered. Here on line 20, we want to grab the URL of the current tab, basically what

25435.88 -> we are doing here, but we want to do it in the real world, not just using the made up

25440.208 -> hard coded array I've written up here on line 14. So then the question is all how do we

25445.458 -> ask the Chrome browser for this URL. And yet again, we will resort to Google

25451.83 -> will simply write

25453.25 -> Chrome extension get current tab, that gives us a bunch of results. And on first place,

25459.68 -> you can see the developer chrome.com. So the documentation, if we head into that, you will

25465.542 -> see Chrome, dots, tabs, okay, description, use the chrome dots tabs API to interact with

25471.85 -> the browser's tab system. Hmm. Sounds about right. If we scroll a bit down, we'll see

25476.702 -> manifest. So it turns out that we have to do some changes on our manifest file. Namely,

25481.56 -> we have to add this permissions and then fill in taps. Okay, that's fine, but not really

25486.87 -> what we're looking for, we're looking for the JavaScript code, in order to actually

25490.42 -> grab ahold of the tap URL itself. If we continue scrolling down, we get to this really discouraging

25496.77 -> list of a bunch of methods of this API. And this is so typical, when you're searching

25501.97 -> through documentation, it's very often difficult to find the answer as a beginner. So actually,

25507.07 -> what I would do is go back to the results we got on google.com. Because there we can

25513.07 -> find a Stack Overflow question that looks much more humanly understandable. How can

25518 -> I get the current tab URL for a Chrome extension? Okay, let's click into that one, we can see

25523.31 -> there's a person that has a problem that looks like ours. And that person is even provided

25527.67 -> some code of how they're trying to solve this today, Chrome dot tabs dot get selected. Let's

25532.272 -> scroll a bit down and find an answer because that's normally where we find a piece of code

25536.75 -> we can use. so here we can see just an FYI, for your info for people from Google. The

25542.84 -> method the original poster uses is deprecated. Okay, to get the tab, the user is viewing

25548.32 -> and only in the window, they are viewing us this chrome dot tabs that query, okay, and

25553.67 -> then we pass it in an object with some data. And we get this function with tabs and a lot

25560.58 -> of code. But actually, it looks very promising. So what I'll do then, is what all developers

25566.58 -> do almost every single day, which is to copy code directly from Stack Overflow, so I'll

25572.62 -> copy this and just paste it in here. Because this is where we want to talk with the chrome

25580.05 -> API. I'm gonna remove this comment. Now we suddenly have this hairy, strange looking

25587.11 -> code, which we haven't written, it's not comfortable. And we can also see that it's not following

25591.26 -> our conventions for writing code. For example, it uses semi colons, which we don't like.

25595.873 -> Like that. And it also uses the var keyword, which we don't use either. It's the old way

25602.16 -> of writing variables in JavaScript, we want to replace that with let or const. Now I'm

25607.57 -> just going to use let, as I'm not really sure what the point with these variables is, at

25611.952 -> this point, I just want to clean that up and storing them as select variables will definitely

25615.91 -> work. So let's just do that. However, now that we at least have the code according to

25620.62 -> our conventions, it's time to break this down and really understand it, and we'll do that

25625.628 -> in the next cast.

25628.65 -> Okay, now that we have this little snippet of code copied from Stack Overflow, it would

25635.298 -> be really tempting to actually try to run it and just console log out tabs at this point,

25641.84 -> for example, just to figure out what's going on here after this function is being triggered,

25646.2 -> it actually, if we try to do that, from this cold hit the Save tab, hmm, we'll see that

25652.95 -> we get an error cannot read property query of undefined. That's because chrome dot tabs,

25657.97 -> that's a so called API Application Programming Interface. Sounds really scary. I know. Don't

25663.751 -> worry about that. Now. Well, I wanted to say that is that this is an API that is only available

25668.19 -> to us, when we're running the code in the context of a Chrome extension like this, you

25673.59 -> can see here, now, we are running the code in the context of this scrim bar mini browser

25679.58 -> here, and we don't have access to the chrome dot tabs, meaning it's undefined as our error

25686.17 -> message is saying, because it's trying to read the property query of something that

25690.73 -> is undefined. So we actually just have to try to make sense of this code and try to

25696.32 -> configure it how we think it should be, and then deploy it to see if it works out in the

25701.04 -> wild. So what I'm going to do, I'll delete this console log tabs. And actually, I want

25707.441 -> to delete everything inside of this function, because we are going to figure out what we

25712.15 -> will do inside of this function on our own by looking back at Stack Overflow. And also,

25717.55 -> I actually want to comment out these lines of code, because while it's okay to copy it,

25724.02 -> to get it into the code base, I want to write it with you to break it down step by step

25727.73 -> so that you understand it properly. So with this in the background, let's rewrite it and

25733.67 -> see if we can make sense of it. So the first thing we write is Chrome, which is a variable

25738.27 -> that we will have access to when we are running the Chrome extension. And that is an object

25742.64 -> and that has eight tabs key and the tabs that is an object as well. And that object has

25748.06 -> a query method like that. So here, we're kind of saying, hey, Chrome, I want to grab ahold

25754.23 -> of your tabs, or more specifically, I want to query you for some of the tabs. Well, then

25759.85 -> which tabs is the next question? And we'll specify that inside of the query using an

25764.7 -> object begin with? I'm going to say, Well, I want the

25768.93 -> active

25769.93 -> tab I'm specifying active has to be true. And which tab is that? Well, if we look back

25776.56 -> at our slide here, you can see that in this situation, we have one browser window that

25781.94 -> has three tabs, but it's the LinkedIn tab that is the active one. So it will give us

25788.292 -> this tab. However, here, we can also say that we ought to specify current window to be true

25794.02 -> as well, which is a little bit weird. What does that mean? Well, imagine this case, if

25798.83 -> you actually had another browser window in the background. Well, the chrome API would

25803.86 -> know about this. So naturally, you'd have to specify Well, which one of the two windows

25808.58 -> are you looking for. And in this case, the active window is the one in the front right

25813.048 -> here. And that is where the LinkedIn tab is located, where we have our Chrome extension

25817.94 -> open. Also, we have to specify well, current window, so we need that to be true as well.

25825.79 -> So here we are calling the query method and passing in an object that describes which

25831.28 -> of the tabs we want. And then as we did up here, where we start with a specification,

25837.048 -> and then write a function, as the second argument, will do the exact same thing in the query

25844.2 -> function as well. We'll write function like that. And this function will be triggered

25852.25 -> when Chrome has found the tab we've told chrome to look for. And when chrome triggers this

25859.298 -> function, it'll give us a tabs variable like this. It's a parameter in this function. So

25865 -> now, we would get access to the tabs. And this console log would work if we were running

25870.14 -> this in the context of a Chrome extension. Let's now bring down the console. break this

25875.06 -> up a little bit? Because the question is here, what do we want to do inside of this function?

25880.06 -> Well, it's through this tabs keyword here that we will actually get a hold of the URL,

25886.55 -> the string in the address bar. So it's inside of here that we actually have to push to our

25891.91 -> my leads array, save to local storage and call the render function. So I'm actually

25897.73 -> going to copy this code and paste it in here, like that. And now the question is, well,

25906.7 -> what does this tabs variable include, how do we navigate to the URL value inside of

25912.23 -> this variable? Well, it just so happens to be that it's constructed in this exact way.

25918.46 -> And how did I know that? Well, because here on StackOverflow on our question, we could

25925.378 -> see that on the question below that a person got it to work by doing var tab equals tabs,

25932.35 -> zero Which is exactly what we're doing here. And then, on the next line, it did tab dot

25940.59 -> URL, which essentially is our dot URL here. So it turns out that this is the way to get

25948.122 -> ahold of the URL. But at this point, there's a little problem. Since we have defined tabs

25953.83 -> here, and also up here, these two variables will be in conflict with each other. And obviously,

25960.85 -> we don't need this hard coded variable anymore. We want to use whatever value we get directly

25966.16 -> from Chrome. So we can keep this and just leave this how it is. Now, let's clean up

25972.51 -> this a little bit. And then finally, head over to manifest dot Jason because we saw

25978.37 -> in the Chrome extensions documentation that we had to add the following to our manifest

25984.75 -> file. So permissions, and then that is an array. And here we specify tabs. So now we

25991.208 -> are telling chrome that we want to be able to work with the tabs in the Chrome extension,

25997.02 -> otherwise, this chrome tabs simply wouldn't work. So in the next class, we'll go ahead

26003.57 -> and deploy this so that we finally get to try our entire application out in the wild.

26013.11 -> So let's deploy the final version of our app. First, you of course, have to download the

26018.73 -> zip from this scrim. And you can do that by clicking on the Settings icon in the bottom

26022.89 -> right corner, and then download as a zip, which we did the last time around as well.

26027.82 -> And then make sure that you take these files and update the lead tracker folder that we

26033.878 -> also created in a previous cast. Or if you have been working locally alongside me, you

26038.532 -> of course, can skip this step. But

26041.03 -> what's important is that the same folder gets the new updated files, because then we head

26046.692 -> over to the chrome slash extensions page. There, we can see our lead tracker from previously,

26052 -> I'm going to hit detail so that we open up the page for our extension, and then you can

26056.83 -> hit update. By doing that, Chrome will grab ahold of the new files and update your extension.

26062.79 -> Once that's done, we can open up a new tab, for example, and head over to a lead we want

26068.101 -> to track here I've opened up scribus CTOs get a profile that's sindri. Let's say we

26073.7 -> want to track this URL as a lead. And then I'll hit the Chrome extension button. I'll

26078.66 -> choose my lead tracker. And here, I can try save tab and boom, our Chrome extension, headed

26085.05 -> over to a tab, grab the URL and displayed it for us. That's awesome. We can also try

26090.87 -> our input field by just passing in a random lead, hit the Save input. And there we go.

26096.04 -> It was placed here below the URL to Syndra skitter profile. So so far, so good. Let's

26101.48 -> open up a whole new tab now. For example, the answer LinkedIn profile, you probably

26106 -> recognize Leanne, from the scrim community as she's our community manager, let's open

26110.57 -> up the Chrome extension again, and try the Save tab button. Yes, it worked really good.

26116.64 -> Now, the final button to try is the delete all. And I'll hit that. And there you go,

26121.96 -> we have deleted all of our leads, this is so cool, we've now created a real world product

26128.458 -> that can give value to sales development representatives, or basically any person collecting leads online,

26135.39 -> which is an activity that people in almost all companies do. So we have really created

26140.2 -> something of value that you can share with the world. So your JavaScript skills are starting

26145.91 -> to become dangerous. congratula, congratulations, you have reached the end of the section and

26153.292 -> actually built your own browser extension. How cool is that you should be gutted and

26159.45 -> proud of yourself for achieving that. And just enjoy the fact that you've learned all

26163.798 -> of these awesome concepts that we now are going to recap. So what did we learn? Well,

26168.78 -> we started out with a const variable that is a critical part of JavaScript. And as you

26173.64 -> can see, once we learned it, we started using it much more than we used let for all of these

26178.48 -> DOM elements that we stored in variables, we use const, as we will not going to reassign

26183.91 -> these. And speaking of DOM, we learned a lot of new things about the document object model.

26189.25 -> First of all, mostly add event listener down here at line 14, we hooked up an event listener

26194.81 -> with the time button, for example, this gave us the benefit of not having to write the

26199.9 -> event listeners in our HTML, we controlled everything in the JavaScript file. And that

26204.67 -> also we learned about inner HTML, down here at line 33. We had to use this because the

26210.71 -> dot text content property didn't do the trick when we want to render out list items like

26217.15 -> this. And finally, we also learned input value, which is another part of working with a DOM.

26222.85 -> And that was down here when we fetched out the value which the user had entered into

26228.56 -> the input field. Another thing we did is take one more step into the world. Have a function.

26233.59 -> Namely, we learned about parameters, which is what we defined here, we defined a leads

26237.958 -> parameter in the render function. And that gave us the ability to use this variable inside

26243.36 -> the body of the function. And also, it required us to pass in the argument of my leads when

26248.9 -> we invoked this function. This is a crucial concept to understand if you are to make functions

26253.89 -> really reusable. So I'm really happy that we went through this.

26257.792 -> Next up, a super cool thing we also learned was template strings. Because that gave us

26263.64 -> the ability to write strings on multiple lines, which looks much better, it's easier for humans

26269.14 -> to parse. And also, we could use this dollar sign and square brackets in order to escape

26274.76 -> out of the string, instead of having to use these plus signs, which quickly became unmaintainable

26279.93 -> and confusing to work with. And then a super cool thing we learned was local storage here,

26285.718 -> we saved things in local storage, so that we could work across page refresh. This is

26290.878 -> kind of your first exposure to a database, a very simple database, of course, but still

26296.2 -> very much the same concept. That forced us also to learn about JSON, which is a very

26301.2 -> common way of storing data in web development, you will forced to deal with this, since you

26306.4 -> had to turn our array into a JSON array using JSON dot stringify. And also, we had to use

26312.878 -> JSON dot parse to go the other way around when we fetched a string from local storage.

26318.23 -> And that string just happened to be a JSON array. And we could parse it and turn it into

26322.73 -> a JavaScript array using the JSON dot parse, don't worry, if you are confused about JSON,

26328.78 -> parse and JSON stringify. It's totally okay to search for which one does what every single

26332.95 -> time you do it, I've done it again and again and again. But JSON is core. And one testament

26338.532 -> of that is the fact that you were exposed to JSON also in another way, namely, with

26342.33 -> the manifest dot JSON file, here, we have to configure our app. And I'm actually glad

26346.64 -> that the Chrome extension required this because you will see JSON in many different scenarios

26351 -> as you work as a web developer. Finally, one of the last things we looked into was objects

26356.23 -> in a race, namely, this tabs array here, where you actually had an array where it's first

26362.298 -> an only item was an object. So you had to first fetch out the zeroeth index, and then

26368.58 -> do dot URL to fetch out the URL value of that object. And this is very common objects shoved

26375.51 -> inside of a race. So it hopefully shouldn't scare you that much the next time you come

26379.862 -> across that. So look at this list, it is really comprehensive. Now let's do a little thought

26385.97 -> experiment, which might help you feel less overwhelmed of all the things you don't know

26390.41 -> anything about in web development and all these fancy words. Because let's say that

26394.58 -> you for two weeks ago, I asked a developer, like how do you create a Chrome extension,

26399.772 -> and then the developer arrogantly replied to you, well, it's not hard, you just add

26404.43 -> an event listener to a button, then fetch out the input dot value, take that value stored

26409.14 -> in an object and convert it to a JSON using JSON dot stringify, shoving it into local

26414.12 -> storage, no big deal, you can just fetch it out later and use JSON dot parse in order

26418.07 -> to get it back into a JavaScript array and then render it out in the function, shove

26421.95 -> it in as a parameter and just use a template string and innerHTML to displayed on the screen.

26426.32 -> I mean, both be yield, right? I mean, imagine getting such a reply, you'd probably feel

26432.69 -> that you would never ever learn all of this, because there's so many concepts you didn't

26437.792 -> understand. But actually, that reply from the developer is actually the exact thing

26443.26 -> we have done, and you have gone through it. So even though in and of themselves, these

26447.57 -> names sound scary, you know that if you follow the right course, you can learn them. And

26452.218 -> you don't have to be afraid of any of the concepts you have yet to learn. Because whilst

26456.112 -> they sound super fancy from the outside, like JSON, actually, they're not that complicated

26461.64 -> when you look into them. So try to just have that confidence in yourself that you know,

26466.14 -> you can learn complicated three letter acronyms that there are nothing to be afraid of, because

26471.56 -> that'll calm you down and serve you well as you progress on this journey into web development.

26477.14 -> With that, let's actually put your skills to the test. Now, because we need some more

26481.19 -> repetition on these things, you need tons of repetition, these things take a lot of

26484.78 -> time to really get into your muscle memory. And we'll start with that in the next section

26489.298 -> where you will do some quick challenges back to back. Let's move on. In this challenge,

26497.41 -> we are going to do some let and const repetitions because I've created this fictional game here,

26503.59 -> which has a player and opponent the name of the game, the points variable and the has

26509.26 -> one variable after it's been set up, the game is played down here at line nine and 10, the

26514.74 -> player gets some point and the has one variable is flipped. And then based upon this, we log

26520.11 -> out who the winner is in this conditional statement down here. Now if you try to run

26524.81 -> this code, you'll see that it actually doesn't work because I've mixed up a little bit in

26528.458 -> terms of using let and const. So you need to fix that. You need to go Through all variables

26533.99 -> and decide if they should be let or const. And then finally, I want you to change the

26538.968 -> console logs here from using double quotes to using template strings. So go ahead and

26544.692 -> do this right now.

26549.06 -> Okay, hopefully this went well, let's go through this. Now what I want to start with is actually

26557.06 -> by looking at which variables that are reassigned, and that is actually just the two ones down

26562.41 -> here points and has one, there's no reassignment below, and neither above, that's just the

26567.612 -> initial assignments. So that means that the points and has one are the ones that must

26573.13 -> be let variables because remember, let variables can be reassigned. const cannot. So we'll

26580.01 -> let and let these two need to be. So that means that these three variables pointing

26587.59 -> to the same value throughout our entire program, it will work perfectly fine with using let

26592.95 -> and if you prefer to that that's also okay. But it is a good practice to use const when

26598.26 -> you can to enforce a bit more strictness in the code and to hint to people who are potentially

26603.25 -> reading your code down the line that these variables won't be reassigned. So actually,

26608.17 -> I'm going to do that and use const for these three variables, now we can run the code.

26616.72 -> And yeah, we can see that it actually works. Paragraph 200 points and one the amazing fighter

26621.16 -> again, that comes from this string right here, which we want to turn into a template string.

26626.21 -> And the way we've got to do that is now wrap the entire tire expression in backticks. And

26632.85 -> here, we're starting off with a JavaScript variable. So we'll escape out of the string

26637.901 -> like

26639.34 -> that. Remove all of these plus and quotes, get again, dollar sign curly brackets. And

26649.94 -> then we also need the scaping here as well.

26657.31 -> Let's run the code works just as it did previously. But now we have this much more neatly packed

26663.292 -> expression, doing the same here that that, like that. And that's it great job doing this

26686.83 -> challenge. Let's move on. In this challenge, you are going to create a function that takes

26695.378 -> a single parameter, that should be an array, and then it logs out all the items of the

26701.22 -> array to the console. And I've created this My Courses array here so that you can test

26706.04 -> your function, go ahead and write this function starting here on line seven, and then return

26710.07 -> back to me when you want to see my solution.

26714.83 -> Okay, let's do this. We'll do a function, I'll call it log items like that. I'll name

26723.4 -> the parameter R. And then inside of the function, I need to write my for loop for i equals zero,

26729.77 -> i is less than r dot length, and i plus plus. And in the body of the for loop, we'll simply

26737.968 -> do console dot log R, I like that. Let's try to run the code, log items passing in my courses.

26747.4 -> And we get to learn CSS animations, UI design fundamentals and intro to clean code logged

26755.01 -> to the console. And these are all courses that you can take in the future when your

26759.53 -> web development skills are a little bit further down the line and you're ready to truly level

26763.56 -> up your design skills and your software craftsmanship. But enough of that for now, let's just move

26768.81 -> on. Okay, now we are going to verify that you actually know how to use local storage.

26777.272 -> So you're going to do three things. First, save a value to local storage. It could be

26782.25 -> any value, simple string and array that doesn't matter. Just choose whatever you want, and

26787.53 -> give it whatever key you want as well. Then I want you to delete that code and refresh

26793.14 -> the page. So you start with a clean slate again, because this highlights the power of

26798.28 -> local storage, the fact that you can come back fetch values from local storage and a

26802.98 -> context which is completely unrelated to the time when you saved to local storage. So your

26809.06 -> third step is to fetch the value from local storage and log it out. So go ahead and give

26815.03 -> this a shot right now.

26819.59 -> Okay, let's do this. First, we're going to do local storage dot set item. Open and close

26832.42 -> parentheses. And let's do my credit. This could, for example, be in an e commerce shop

26837.89 -> where you gifted credits to people who came to your website on a certain day and save

26842.79 -> that in their local storage. And maybe you got 100 credits. This time, I'll run the code

26849.06 -> seemingly and nothing happens. But let's hope it works. Because now I'm going to delete

26853.64 -> this. And also rerun the code. Again, I'm coming back on a later day. And now I want

26859.33 -> to do local storage dot get item, my credits like that. Let's store that in a variable.

26869.58 -> Mike credits, local search and then console, log out my credits as well. running the code.

26878.19 -> And yes, we are logging out 100, meaning that our local storage implementation works. So

26883.208 -> give yourself a pat on the back end, let's move on. In this challenge, we are going to

26891.14 -> repeat add eventlistener and how to fetch out values from objects that live inside of

26897.67 -> a race. So to three part challenge, first, you're to fetch the button from the DOM and

26903.9 -> store it in a variable. The button I'm talking about is this one right here, you can see

26907.95 -> it says log Jane's score, it's defined here in the HTML. So maybe you have to modify that

26914.85 -> as well to give it an ID, I don't know. And then once you have that button stored in a

26919.05 -> variable you are to use add event listener to listen for button clicks. And when the

26924.792 -> button is clicked, you are to log out Jane's score, and you got to do it via the data array.

26931.61 -> So you got to head into data, find Jane's object and log out to the value of her score.

26939.29 -> So go ahead and give this your best shot right now.

26944.958 -> Okay, let's do this. So first, we are to fetch the button. And as we saw, the button didn't

26953.35 -> have any IDs. So it will be hard to grab it out. give it an ID call it drain dash btn.

26960.35 -> Like that. And then I'll do const Jane btn equals document dot get element by ID passing

26970.31 -> in Jane dash btn. Okay, so far, so good. Now we need to use the Jane button to add an event

26977.85 -> listener onto it. What kind of events are we listening for? Well, it's click event.

26982.98 -> So that's the first argument and the second one is the function we want to trigger when

26988.41 -> the button is clicked. Let's verify that this works. clicked. I'll run the code. Click the

26997.02 -> button. And yes, indeed it works. Now we have to head into data and data is an array. So

27004.58 -> let's actually log it out first. Okay, so we got an array with two objects. How do we

27015.07 -> get the first object of those two? Well, we know that we can use the square bracket syntax

27020.81 -> and put in the index of the item we're looking for. So I'll put in zero, run the code, click

27026.99 -> the button. Yes, we're only logging out James objects, how do we get the value of 52. But

27032.79 -> we need to use the dot notation and use dot key or dot score. In our case, we run the

27040.208 -> code, log and boom, we are logging out Jane's score. So great job getting this far. Let's

27047.39 -> move on. Okay, now I have a really cool challenge for you because you are going to create a

27056 -> sentence generator. So it's this function right here. It's called a generate sentence.

27060.41 -> And it takes two parameters desc and R. What's that? Well, it is a description and an array,

27068.23 -> and it should return a string. Actually, it's a full sentence based upon the description

27073.56 -> you pass in and the array you pass in. And it's best understood through the lens of a

27078.792 -> couple of examples. If you pass in largest countries, as the description and the array

27085.128 -> China, India, USA as the array that is the second parameter, then function should return.

27091.542 -> The three largest countries are China, India, USA. Another example if you pass in best fruits

27098.35 -> as the description and apples bananas as the array, it should return. The two best fruits

27104.74 -> are apples bananas, so we actually have to construct the string, fetch out each of the

27110.32 -> items and also the length of the array. So a little bit tricky, but give it your best

27115.33 -> shot, use a for loop and also a template string to solve this, and if you're stuck or want

27120.5 -> to see my solution just returned back to the screencast and I will of course, show you

27124.52 -> how to do it.

27128.07 -> Okay, then let's do this. I'm going to first Start by creating this string right here.

27135.4 -> So let base string and I'm going to call it, we use a template string and the. And then

27144.128 -> here, we can't hard code the number as its dynamic based upon how big the array is. Because

27149.06 -> we're going to do our dot length. And then there's a space and then you other sign and

27156.968 -> curly brackets. And here we are to fill in the description, and then our, and the space.

27164.11 -> Now we have the bass string, what remains is simply adding each of the items to the

27169.458 -> end of this soldier for let i equals zero, i is less than our dot length incrementing

27178.78 -> upwards. And that will be base screen plus equals our men using our iterator value, saddle,

27188.04 -> fetch out the specific item. Also remembering to add a comma after each of the items. Now

27197.24 -> let's try this right sentence. Let's do highest mountains, do Mount Everest, and kaitou will

27211.18 -> store the result of this in a sentence. And of course, then hills will need to return

27216.73 -> the bass string, like that. And then finally, console, log out the sentence.

27225.372 -> Okay,

27228 -> not bad, we got the two highest mountains aren't Mount Everest, comma k two, comma.

27232.77 -> Okay, two things to fix here. First, we need a space after the comma like that. Good. Secondly,

27240.772 -> we don't want a comma after the final item in the array. How do we fix that? What we

27247.594 -> need to do is inside of the for loop, check if we are at the last item in the array. And

27254.06 -> what is the index of the last item in the array? Well, it is one less than r dot length.

27260.272 -> Let's do outside of the for loop promised last index equals r dot length minus one here,

27271.43 -> we'll do if i equals last index, then we are going to do like that, if else we are going

27291.24 -> to do like that. So what are we doing here, in this situation where I am passing in highest

27295.8 -> mountains and these two mountains, the first time of the iteration i equals zero, and last

27302.862 -> index equals one. So going through this for loop checks, S II equaled last index is zero

27310.458 -> equals one No, so we're not doing this, we're instead jumping to this point where we are

27316.628 -> adding the comma, but then the next time around both last index, and i equals to one. So JavaScript

27323.42 -> will run this piece of code instead. Let's try it to verify that it works. Yes, we've

27329.708 -> got it. So this was a challenging one, and required you to think a little bit out of

27333.7 -> the box. But that's how it is as a developer, so I hope it didn't scare you too much. If

27338.708 -> it did, just watch it over again. Try it again. Now that you've seen the solution, and that

27342.78 -> I will see you in the next cast. In this challenge, you are going to imagine that you are working

27350.862 -> for about the hippest company I've ever seen this one right here, the Brooklyn agency who

27356.51 -> currently consists of these super hip people right here, your job for this agency is to

27362.122 -> make their code a little bit more dynamic, because now you can see that they have simply

27366.62 -> hard coded out the three team images inside of this container. But that isn't a particularly

27372.53 -> good solution cost when they get a new employee, they would have to update the HTML. So it's

27377.79 -> actually much better to do this using JavaScript and create a function that renders out the

27383.17 -> three team images because that sets the stage for easily connecting this data with a database

27389.22 -> so that you can just update the database in order to change team if new people join or

27394.26 -> someone quits. So that is your challenge, creating a function that renders the three

27399.83 -> team images. And this function should be using a for loop, template strings plus equals and

27406.38 -> dot inner HTML. In order to solve the problem. Here I have provided you with an array that

27413.33 -> contains the paths to all of the images, you can see images slash hip one dot jpg, and

27420.06 -> hip two and hip three. And they are located over here in the images folder. And this is

27424.93 -> actually a very common situation where you get an array of paths which point to the data

27430.468 -> you need. So we could imagine that this for example, had come from the database when you

27434.708 -> render the page or something like that, right now, though, it's just hard coded into our

27438.28 -> JavaScript file. There is a little bit of CSS here as well. But But this challenge is

27442.85 -> not about CSS, it's about JavaScript. So we're just going to ignore that. Just make sure

27447.49 -> that the images use this class of team IMG, and you'll be just fine. So I'm going to comment

27455.29 -> out all of these images. Now we can see we cleared out to the container. And I'll leave

27461.92 -> the table to you go ahead and solve this challenge. Okay, hopefully this went well. Now, let's

27472.548 -> do it together, I'll start by grabbing the div with the ID of container because we know

27477.06 -> we need that one. Container equals document, get element by ID container like that. And

27487.48 -> then the function. I'll call it render images like that. And here, we need a for loop, since

27496.128 -> we are going to loop through this array. So I'll do for let i equals zero, I should be

27503.27 -> less than the length of the images array,

27506.27 -> like that. And we'll increment upwards. In here, we can use dot innerHTML directly, let's

27513.641 -> do that first and then refactor it a little bit after we've gotten it to work. So I'll

27518.28 -> do container dot inner HTML plus equals, at each step in the iteration, we need to add

27525.81 -> to the current inner HTML knobs just to clear it out using equals arrow

27532.37 -> mg. Class of table the class was team dash IMG. Okay, we'll do team last IMD. And the

27544.361 -> source should be

27546.56 -> each of these items right here, we'll use dollar sign curly brackets to escape out of

27554.362 -> the string and use imds passing in the current index, which starts at zero and add to meaning

27562.33 -> 012 perfectly suitable to use in order to fetch up items from this array, tossing the

27569.708 -> tag. Now the final step is to make sure that we run the function, which will do my render

27575.1 -> in progress like that will run the code and boom, there we go, we have rendered the images

27582.05 -> out. Brilliant. Now, let's refactor this code a little bit. Because Because there are two

27587.892 -> things I would fix up here, the first thing we're going to fix is the dot inner HTML in

27593.02 -> the inside of the for loop, because here we are interacting with the DOM three times one

27598.14 -> for each iteration of the loop. And that has a cost manipulating the DOM has a performance

27604.42 -> cost, it takes a little bit of time that we'd like to avoid if possible. Now, it doesn't

27608.81 -> really matter when we're only rendering out three items. So we as humans won't be able

27613.39 -> to notice the difference anyway. However, it's a good practice to do it the most performant

27618.14 -> way just to know how it's done, because it comes today, when you need to render out tons

27621.77 -> of things and manipulate the DOM quite a lot. So and then it actually might matter. So let's

27626.52 -> fix this, what we'll do is we'll simply create a variable up here, for example, images on

27634.102 -> set back to an empty string, then instead of manipulating the DOM three times down here,

27640 -> we'll simply concatenate this string onto this string. So we'll replace this entire

27646.92 -> thing with imgs. Dom loss equals this expression right here. And now after this for loop has

27655.06 -> completed, this variable contains all the three images. And it's time to do container

27661.451 -> dot inner HTML and set that equal to imds bomb like that. If we'll run the code and

27669.61 -> see that it works in the exact same way, just as we expected. So no visible change for us

27676.03 -> as humans, but we know that the performance under the hood is better, since we're not

27680.61 -> doing Dom manipulations again, and again, we're only doing it once. Okay, the final

27685.202 -> thing which is an auth attribute, because that is for accessibility purposes, so that

27691.921 -> people with for example, screen readers can understand what the images contain. and here

27696.07 -> we can do employee and the company like that. Now, we have solved this challenge, and we've

27705.208 -> made it even better than the previous solution, since we now also use an alt tag for accessibility

27711.07 -> purposes. So great job. So you have reached the end of this course. It's very well done.

27722.06 -> You should truly be proud of yourself. Now. Give yourself a pat on the back and just feel

27726.67 -> great about yourself because not many people get to the finish line they give up, but you're

27731.93 -> not a quitter. Even though this course is finished, you should by no means stop learning.

27737.27 -> So the real question is What now? What should you learn next. And the most important thing

27743.128 -> is that you continue building more stuff. That's how you learn. If you just build enough

27748.968 -> stuff, everything else will fall in place. But of course, let's be a bit more specific,

27753.51 -> there are still a lot of basic JavaScript concepts that we haven't gone through. And

27757.85 -> it's a great idea to continue expanding upon your basic JavaScript skills. And then when

27762.048 -> you've done that, you can move more into iOS six and beyond aka modern JavaScript. iOS

27767.86 -> six is short. For ACMA script, six, that was a legendary update to the JavaScript language

27772.378 -> in 2015. It's actually already five years old. But many of the modern patterns in JavaScript

27778.81 -> come from this update. And actually, you've learned several of them already, I just didn't

27783 -> bother telling you that they were part of the ESX specification. So you are totally

27787.02 -> ready to continue learning more about modern JavaScript. Another thing you definitely should

27792.34 -> learn is API's and Asynchronous JavaScript, because that opens up the world to you, you'll

27797.97 -> be able to have your applications talk with external services, third party API's, bring

27803.69 -> in data from wherever you want. And then of course, there is server side JavaScript, so

27808.44 -> that you can build full blown apps from start to finish. But this probably looks a little

27814.17 -> bit overwhelming. But don't worry, I have the solution for you, here at screen. But

27818.69 -> we have something called the front end developer career path. It's our flagship, it's the course

27823.85 -> we put the most effort into by far. And it'll take you to a higher level as a front end

27829.75 -> developer. So looking at the contents here, it goes all the way from learning basic HTML

27834.47 -> and CSS to getting hired.

27836.56 -> And actually, you can jump in here in Module Three, because the course you just took is

27840.83 -> a part of the career path as well. So if you like our style of teaching, with a lot of

27845.51 -> projects and challenges back to back, you can just jump into module three and continue

27850.39 -> on in the same pace. So I hope I will see you there and if not, best of luck with your

27855.532 -> continued JavaScript journey.

Source: https://www.youtube.com/watch?v=jS4aFq5-91M