YT YouTube2Text

YouTube2Text → Transcripts → YouTube transcript (EerdGm-ehJQ)

YouTube transcript (EerdGm-ehJQ) — Transcript

165,390 words · 25,999 segments · language en · Watch on YouTube

Open in transcriber Summarize with AI Download SRT/VTT

Full transcript

0:00welcome to the complete JavaScript
0:02course in this course we're going to
0:04learn how to build complex websites
0:06using JavaScript from a beginner to a
0:09professional level and by the end of
0:11this course we're going to build
0:14amazon.com so this is an interactive
0:17multi-page website where we can add
0:20products to our cart create an order and
0:24even track our
0:26order along the way we're also going to
0:29build some smaller projects like a rock
0:32paper scissors game a to-do list and a
0:36calculator now you don't need any
0:38previous coding or technical experience
0:41to follow along this course will cover
0:43everything that you need to learn
0:45JavaScript we're going to start from the
0:48very basics of JavaScript and we're
0:50going to build our way up step by step
0:53we're going to learn the major features
0:54of JavaScript and also how to use
0:57JavaScript together with other
0:59Technologies like HTML and
1:02CSS we're also going to learn more
1:05advanced features like objectoriented
1:08programming backend callbacks promises
1:12and async await and we'll use these
1:15features together to build a complex
1:18project which is the Amazon
1:20Project this will let you practice what
1:23you learn and deepen your
1:26understanding you can find the different
1:28lessons of this course course below the
1:30video
1:32here and
1:34here if you need to you can adjust the
1:37speed of the video
1:40here and after each lesson I'm going to
1:43give you a bunch of exercises that you
1:45can do on your own to practice the
1:47skills that we learned in total this
1:50course will have over
1:52250 exercises so with that said let's
1:56get started
2:04before we begin if something in this
2:06course is not working properly make sure
2:08to check the first comment below the
2:10video for a list of
2:18solutions I'm going to be doing this
2:20course on Windows but the steps are the
2:23same if you're using a Mac we're going
2:26to start from the very basics of
2:28JavaScript and build our way up step by
2:31step first of all what is Javascript
2:35JavaScript is a technology that we use
2:37to create websites a website is like
2:41youtube.com or
2:43amazon.com it's how we access YouTube
2:46and Amazon on our computer if we were
2:49using a phone we usually use an app but
2:53on our computer we use a
2:56website so there's actually three
2:58technologies that we use to create
3:00websites HTML CSS and JavaScript each of
3:06these Technologies has a specific
3:08purpose when creating a website HTML
3:12creates the content of a website it
3:14creates all the buttons the text and the
3:18images CSS changes the appearance of the
3:21website by adding CSS we can make our
3:25website look nice and finally JavaScript
3:28makes our website
3:30interactive so if we only have HTML and
3:34CSS and we click one of these buttons
3:37our website doesn't do anything but once
3:40we add JavaScript we can make our
3:42website do something when we click a
3:44button such as add a product to our cart
3:48or create an
3:50order so this course is focused on
3:54JavaScript if you want to learn HTML and
3:57CSS in more detail I have a full whole
4:00course just like this one that you can
4:02find in the video
4:03description let's get started with
4:06JavaScript the first thing we need to do
4:09is to install a piece of software called
4:11a web browser a web browser lets us view
4:15websites that we create in this course
4:17the most popular web browser for web
4:19development is Google Chrome so I
4:22recommend using that if you don't have
4:25Google Chrome you can open the default
4:27web browser on your computer for windows
4:30it's Microsoft Edge and for Mac it's
4:33Safari type in google.com at the top and
4:37press enter search for Google
4:41Chrome click the result and follow the
4:45instructions to download and install
4:48once we've installed Chrome we're ready
4:50to
4:51begin we're going to start by learning
4:54what exactly is Javascript and how does
4:57it work the easiest way to understand
5:00JavaScript is we're basically giving
5:02instructions to a computer and then the
5:05computer follows our
5:07instructions I find the best way to
5:09learn this is to jump in and give it a
5:11try so first let's open Google
5:17Chrome next we're going to click at the
5:20top
5:21here and type
5:24super
5:25simple
5:27dodev slj
5:30s- Basics and press
5:35enter and now we'll learn how to give
5:37our computer some instructions to follow
5:40to do that we're going to go to a blank
5:43area of the web page we're going to
5:46rightclick click
5:49inspect and then click the console
5:53tab now if your console doesn't show up
5:56at the bottom like this you can click
5:58these three dots here here and then
6:01select this
6:03icon okay so inside the console we can
6:07give some instructions for our computer
6:10let's learn our first instruction we're
6:13going to type here and we're going to
6:15type
6:17alert Open Bracket single quote hello
6:22single quote close bracket and
6:26semicolon make sure to type this out
6:28exactly as I have it here in JavaScript
6:31if you don't type things out correctly
6:33it won't work so this is an instruction
6:37to create a popup with the text hello
6:40inside to get the computer to follow our
6:43instruction we can just press
6:46enter and as you can see the computer
6:48does exactly what we tell it to do it
6:51creates a popup with a text hello
6:55inside now let's press
6:57okay and let's give another instruction
7:00to the computer so we're going to type
7:03here again and we're going to type alert
7:07again Open Bracket single quote but this
7:11time we're going to type a different
7:13message in the
7:14popup good job and single quote close
7:20bracket and
7:22semicolon so this is an instruction to
7:24create a popup again but this time with
7:27a text good job in inside the popup if
7:31we press
7:32enter the computer does exactly what we
7:35tell it to do and it creates a popup
7:37with the text good job inside and that's
7:41basically the main idea behind
7:43JavaScript we're giving instructions to
7:46a computer and then the computer follows
7:48our
7:49instructions so note that we can open
7:52and use this console on any website
7:55we're just using superimple dodev as an
7:58example
7:59let's press
8:01okay and we're going to learn some
8:03terminology or
8:07naming the instructions we give to our
8:10computer these instructions are called
8:13code when we press enter and the
8:15computer follows our instructions this
8:18is called running the code now there are
8:21many different languages we can use to
8:23write code called programming languages
8:27it's similar to how we have many human
8:29Lang languages that we can use to
8:31communicate some examples of programming
8:33languages are JavaScript Python and Java
8:38so here we're writing our code using the
8:41JavaScript programming language so we
8:44call this JavaScript
8:46code now that we understand the basic
8:49terminology let's look at some more
8:51examples of what we can do with
8:53JavaScript code another thing we can do
8:56is
8:57math let's go back to the console and
9:00type here and we're going to type 2 + 2
9:07so this is an instruction or code that
9:10tells the computer to do some math to
9:13calculate 2 + 2 when we press
9:17enter the computer follows our
9:19instruction or runs this code calculates
9:222+ 2 and gives us the result which is
9:26four let's do another example we're
9:29going to type 10 minus 3 and press enter
9:35to run this code again the computer does
9:38this math calculates the result and
9:41gives us seven so as you can see
9:44JavaScript can do many different things
9:47like create popups and do math let's
9:51look at one more example of what
9:52JavaScript can do we're going to go to
9:55the bottom and type out this code
10:02document.body do inner Capital
10:08HTML equals single quilt hello single
10:13quilt and
10:15semicolon make sure to write this out
10:17exactly as I have it here with the dots
10:20and the capital letters because
10:22JavaScript is case
10:24sensitive let's press enter to run this
10:27code what this code does is that it
10:30removes everything on the page and
10:32replaces it with the text hello in this
10:36example we use JavaScript to modify the
10:39web page modifying the web page is one
10:42of the most important features of
10:44JavaScript and we're going to be using
10:46this feature throughout this course and
10:49that's the basics of JavaScript we're
10:52giving instructions to a computer these
10:55instructions are called code and then
10:57the computer follows our instru
10:59instuctions this is called running the
11:02code and also don't worry about
11:04memorizing all this code you can find a
11:07copy of all the code that we write in
11:09this course in the video
11:14description now that we understand the
11:17basics of JavaScript let's learn more
11:19about the JavaScript language
11:22itself if we take a look at this code
11:26alert and hello you might be wondering
11:29ing what the brackets and the quote mean
11:33all of these characters have a special
11:35meaning in the language this is
11:37something called
11:38syntax syntax are the rules that we have
11:41to follow when using a programming
11:43language like JavaScript this is sort of
11:46like in English we also have rules that
11:49we follow called grammar the difference
11:52is that in English we don't have to
11:54follow the rules of grammar perfectly
11:57people can still understand us but in
12:00programming we have to follow the rules
12:02of syntax exactly otherwise the computer
12:05won't understand our code for example if
12:09we scroll down and we type this code
12:13alert Open Bracket quote hello quote
12:19close bracket and semicolon but this
12:22time we remove the first bracket and
12:25press
12:27enter it will give us a syntax error
12:30we're not following the rules of syntax
12:33so the computer doesn't understand this
12:36code now JavaScript has a lot of syntax
12:39rules and we can't learn them all at
12:41once right now instead we're going to
12:44learn the syntax rules one by one as we
12:47go through the course for now we'll just
12:50learn enough syntax to do the exercises
12:53at the end of this lesson what we need
12:56to know is that if we scroll up
13:00this part of the code tells a computer
13:02to create a popup the text between these
13:06quotes is the text inside the popup if
13:09we change this text we can change the
13:12text inside the popup same thing for
13:15this code down
13:17here if we change the text between the
13:20quotes it will change the text that
13:22appears on the page and that's all we
13:24need to know about JavaScript Syntax for
13:27now we'll learn exact ly what the other
13:30characters like the brackets quotes and
13:32semicolon mean later on in this course
13:36so in this lesson we learned that
13:38JavaScript is basically giving
13:40instructions to a computer we wrote our
13:44first few lines of JavaScript code we
13:47learned how to run our code using the
13:49console in our web browser and we
13:52learned about syntax which are the rules
13:55that we have to follow when writing our
13:57code
14:01thanks for watching this course so far
14:03if you want to support this channel you
14:05can check out the premium version of my
14:07courses just like this one where you can
14:09get a certificate of completion and a
14:11Better Learning platform if you're
14:14interested in extra videos from me more
14:16in-depth videos and behind the scenes
14:19content you can check out these links
14:22here you can also support the channel by
14:24liking the video subscribing and sharing
14:27this video with others
14:29thanks again and let's continue with the
14:33course here are some exercises you can
14:35try on your own to practice what we
14:38learned in this
14:40lesson you can find the solutions to
14:42these exercises in the video
14:52description now that we understand the
14:54basics of JavaScript we're going to
14:56learn about each feature of the language
14:59language in this lesson we're going to
15:01focus on numbers and math first we can
15:05close the console for
15:07now so I've actually prepared a project
15:10that we can use for this lesson to open
15:13this project we're going to go to our
15:15browser click up here and type
15:20super simple
15:23dodev SL
15:26projects SL Amazon
15:29and press
15:31enter so this is actually the final
15:34project we're going to create in this
15:36course this is an e-commerce website
15:40similar to Amazon where we can add
15:42products to our cart and then view our
15:45cart by clicking the top
15:48right and on this page we can see the
15:51products in our cart modify our cart and
15:55create an
15:56order for this lesson we're going to
15:59focus on this right section which
16:01calculates the cost of our cart
16:04including the cost of the products
16:07shipping and
16:09taxes this section is a great way to
16:12learn numbers and math in
16:15JavaScript first let's open the console
16:18again so we can write JavaScript code
16:21we're going to find a blank area of the
16:23web page rightclick click
16:27inspect and then click the
16:31console so we already saw some examples
16:34of math in the previous lesson for
16:37example we wrote the code 2 + 2 if we
16:43press
16:44enter the computer adds these two
16:47numbers and results in
16:49four we also did 10 minus 3 if we press
16:56enter the computer subtracts these two
16:59numbers and gives us
17:01seven in addition to adding and
17:04subtracting we can also multiply and
17:07divide to multiply we're going to type
17:1110 star 3 and press
17:16enter so star is the character for
17:19multiplying to divide we're going to
17:22type
17:2310
17:25slash2 and press enter
17:29so forward slash is the character for
17:32dividing now let's learn the syntax
17:35rules for numbers and math the Syntax
17:39for math is pretty straightforward in
17:41JavaScript we just write it out like
17:44normal math we can also do math with
17:47more than two numbers for example we can
17:51add two plus 2 and then plus another two
17:58if if we press enter the computer will
18:01add these three numbers together and
18:04result in six and finally JavaScript can
18:08handle decimal numbers like
18:122.2 plus
18:152.2 if we press enter it will calculate
18:19these decimal numbers and result in
18:234.4 now let's do some practical examples
18:27we're going to calculate the number
18:28numers here in our final project but
18:31first let's set up our cart so we have
18:34the same products in our cart so make
18:37sure in your cart you have two socks
18:42with free shipping and you have one
18:45basketball with
18:48$4.99 of shipping and nothing else in
18:51your cart if you need to you can modify
18:55your cart by clicking update or delete
18:58or or by going to the homepage by
19:00clicking in the top left and adding any
19:03products that you're
19:05missing once you have the same products
19:08as me in your cart and you have the same
19:11numbers on the right we're ready to
19:14begin let's start by calculating this
19:17number up here this is the cost of the
19:20products before shipping and taxes to
19:24calculate this number using JavaScript
19:27we're just going to add the cost of the
19:29products so in our console we're going
19:32to add the cost of the socks which is
19:35$10 and
19:3890 we have two of them so we're going to
19:42multiply this by
19:44two and then we're going to add the cost
19:47of the basketball so plus
19:53$20.95 if we press
19:55enter the computer will do this math
19:58calculation
19:59and give us this number and if we scroll
20:02to the top of our
20:04project you'll see that the number that
20:06we got matches what we have on the page
20:10so that's how we use JavaScript to
20:12calculate this number here let's do
20:15another example we're going to calculate
20:18this third number which is the cost of
20:21the products plus shipping feel free to
20:25pause the video if you want to try it
20:26yourself first otherwise we'll do it
20:30together let's go back to our
20:32console and we're going to add the cost
20:35of the products again which is
20:39$10.90 * 2 plus
20:46$20.95 but this time we're going to add
20:49the cost of shipping which is
20:53$4.99 so
20:564.99 and press and
20:59enter the computer will do this
21:02calculation and give us this number
21:05which matches what we see in the final
21:08project next we're going to learn a very
21:11important feature of math called the
21:14order of
21:15operations adding subtracting
21:18multiplying and dividing these are
21:21called operations and the characters in
21:24the middle are called
21:26operators now there's a certain order
21:29that we do these operations for example
21:32if we go back to our console and type
21:35the calculation 1 + 1 * 3 and press
21:43enter notice that it multiplies 1 * 3
21:47first which equals 3 and then adds 1
21:52which equals
21:534 notice that it does not add 1 + 1
21:58first
21:59which equal 2 and then 2 * 3 =
22:046 the way math normally works is that
22:07multiply and divide are done first add
22:11and subtract are done after this is
22:14called the order of operations and
22:17JavaScript follows the same rules
22:20multiply and divide are done first add
22:24and subtract are done after the order of
22:27operations is also called operator
22:30precedence in
22:32JavaScript one thing to note is that
22:35multiply and divide have the same
22:38priority so if we have both in a
22:40calculation it will calculate from left
22:43to right add and subtract also have the
22:47same priority if we have both in the
22:50calculation it will also calculate from
22:53left to right another feature of the
22:56order of operations is that we can use
22:59brackets to control which part of the
23:02calculation gets done first for example
23:06let's type out this calculation again 1
23:10+ 1 * 3 but this time we're going to add
23:17an Open
23:18Bracket and a Clos bracket around 1 + 1
23:24if we press
23:26enter now the calculation inside the
23:29brackets will be done first so it will
23:32add 1 + 1 = 2 and then 2 * 3 = 6 so when
23:40we use brackets JavaScript will always
23:43do the calculation inside the brackets
23:46first and then do the rest of the
23:49calculation brackets have the highest
23:51priority in the order of
23:54operations now let's learn the syntax
23:57rules for brackets
23:59so we just have to have a matching Open
24:02Bracket and close bracket so something
24:05like this doesn't work because we have
24:08two Open brackets and no Clos bracket we
24:12also need to have a complete calculation
24:15in the brackets so this also doesn't
24:18work because 1 + 1 multiply is not a
24:23complete
24:25calculation now let's do some practical
24:27examples using the order of
24:30operations first we're going to do some
24:33more setup in the final project so we're
24:36actually going to remove all the
24:38products in our
24:40cart and then once our cart is empty
24:43we'll go to the homepage by clicking the
24:46top
24:47left and this time we're going to add
24:50some new products so we'll add one
24:55basketball and two T-shirts
25:00now let's go back to our cart by
25:01clicking the top
25:05right we'll scroll down and we're going
25:08to calculate the numbers in this section
25:11again let's calculate this number at the
25:14top which is the cost of the products
25:17we'll go back to our
25:19console and add the cost of the
25:22basketball which is
25:26$20.95 Plus the cost of the
25:30t-shirts which is
25:34$799 and we have two of them so we'll
25:38multiply this by two if we press
25:42enter this will give us the number that
25:45we see in the final project here notice
25:49that in this calculation we're taking
25:52advantage of the order of
25:54operations even though multiply is
25:57written last
25:58we still multiply these two numbers
26:01first so we calculate the cost of two
26:04T-shirts first and then we add the cost
26:08of the basketball
26:10after okay now let's try something a
26:13little more difficult we're going to
26:15learn how to calculate this 10% tax here
26:19so how do we calculate 10% of something
26:22unfortunately we can't just multiply by
26:2510% in JavaScript instead
26:28we have to calculate the percent
26:30manually so how do we do that 1% is
26:35actually equal to 1 / 100 that's what
26:40percent means so 10% is equal to 10 /
26:46100 which equals
26:480.1 so to calculate 10% manually we just
26:53multiply this number by
26:550.1 so we'll type 30 3
27:006.93 multiplied by 10% or
27:050.1 if we press
27:07enter it will give us a number that is
27:10close to what we have in the final
27:12project it's the same amount of money
27:15but our number is more accurate than we
27:18need so later in this lesson we'll learn
27:21how to round this number down to exactly
27:24what we have on the web page for now
27:28let's do some more practice with the
27:30order of
27:31operations let's calculate the tax again
27:35except instead of using the final number
27:3836.9 3 Let's calculate this number
27:41individually like here so at the bottom
27:45we're going to add the cost of the
27:48basketball
27:5720.95% 2 and then multiply this by the
28:01tax percent time
28:050.1 and press
28:08enter unfortunately this number doesn't
28:11match what we got up here and that's
28:14because if we look at this calculation
28:17according to the order of operations
28:20multiply is done first so it will
28:23multiply these three numbers first and
28:25then add 20.95%
28:29after however this is not what we want
28:33we actually want to calculate this
28:35number first this is the cost of the
28:38products so how do we get the computer
28:40to calculate this first and then
28:43multiply by the tax percent
28:460.1 to do this we can use brackets to
28:49control which part of the calculation
28:52gets done first so let's create this
28:55calculation again 20
28:59.95 +
29:027.99 * 2 but this time we're going to
29:07add brackets around this part of the
29:10calculation to make sure that this gets
29:13calculated first and then at the end
29:17we'll multiply it by the tax percent
29:210.1 and now if we press
29:23enter we will get the same number that
29:26we had before
29:29so that's how we use math and the Order
29:31of Operations to calculate the numbers
29:34in this section of the final project so
29:38don't worry you don't have to be good at
29:40math to learn JavaScript this is just to
29:42show you how math Works in
29:45JavaScript in the rest of this lesson
29:48we're going to learn some more details
29:50about numbers and math the first detail
29:53we're going to learn is a weird behavior
29:56of math in JavaScript
29:58first we'll need to learn some
30:00terminology in programming whole numbers
30:04like 2 3 and 4 are called integers
30:08decimal numbers like
30:112.2 and 2.5 are called floating Point
30:15numbers or floats and unfortunately
30:19computers have a problem working with
30:22floats for example if we go back to our
30:25console and type the calculation
30:300.1 plus
30:330.2 and press
30:35enter it will give us this weird number
30:38here that's close to 0.3 but a little
30:42bit
30:43inaccurate so this problem is not
30:45specific to JavaScript many programming
30:48languages also have this problem the
30:51reason this happens is because of how
30:53computers store numbers I'll give a
30:56simplified explan
30:59computers can only store zeros and ones
31:02while humans can count from 0 to 9 so
31:06there's sort of a mismatch between our
31:08number systems for integers this is not
31:12a problem the computer can just use a
31:14bunch of zeros and ones to store it
31:18however for decimal numbers or floats
31:22sometimes the computer can't store the
31:24number properly for example here's how
31:27the computer computer tries to store
31:290.2 using only zeros and ones at the top
31:34is what the computer stores at the
31:37bottom is what this is equal to in human
31:40numbers we can see that the computer
31:42gets closer and closer to 0.2 but never
31:46actually reaches it and this is why we
31:49get these inaccuracies when calculating
31:52with floats because computers can't
31:55store some floats properly note that
31:58this doesn't happen with all floats for
32:01example computers can store
32:050.25 without any problems so these
32:08inaccuracies only happen with some
32:10floats but not all of them however when
32:14calculating money we definitely want to
32:17avoid any inaccuracies so let's learn
32:20how to do that first we're going to set
32:23up our cart again so make sure in your
32:26cart you have one basketball with free
32:29shipping and this time you have one
32:32t-shirt so we're going to click
32:35update change this to one and click
32:40save and this t-shirt also has free
32:44shipping now let's scroll up and we're
32:46going to calculate this number at the
32:49top again which is the cost of the
32:51products let's go into our
32:54console and we're going to add the cost
32:56of the basketball
33:00$20.95 plus the cost of the
33:04t-shirt which is
33:08$7.99 if we press
33:11enter calculating with these floats
33:14causes the inaccuracies that we saw
33:17earlier so how do we avoid this problem
33:20the best practice when calculating money
33:23is to calculate in cents instead of
33:26dollars so instead of
33:29$20.95 we're going to calculate
33:342,95 plus
33:38$7.99 notice we're not using floats
33:41anymore so we avoid the
33:44inaccuracies but now this number is in
33:46cents so we need to convert back to
33:49Dollars to do that we'll surround this
33:52calculation with brackets to make sure
33:56we calculate this first and then at the
33:58end we'll divide by 100 to convert back
34:04to dollars because there are 100 cents
34:07in each dollar if we press
34:11enter and scroll
34:13up that's how we get the exact number
34:16that we see on the page so remember in
34:20programming calculations with floats are
34:23sometimes inaccurate and when working
34:25with money the best practice is to do
34:28the calculation in cents and then
34:31convert back to dollars at the
34:34end the next detail we're going to learn
34:37is how to round a number in JavaScript
34:40rounding just means taking a number and
34:43moving it to the nearest integer to
34:46round a number we can use this
34:49code capital m
34:52math. round Open Bracket close bracket
34:57so make sure you use a capital M because
35:01JavaScript is case
35:03sensitive now between the brackets we
35:06can put a number that we want to round
35:09like
35:112.2 if we press enter it will round this
35:15number down to
35:17two if we do capital M math do round
35:23Open Bracket close bracket and between
35:26the brackets we put
35:282.8 and press
35:30enter it will round 2.8 up to three now
35:36let's do a practical example with
35:40math.round we're going to calculate the
35:42tax again but this time we're going to
35:45round the result to exactly this number
35:48on the page so first let's calculate the
35:52tax we'll go into our
35:55console and add the cost of the product
35:57products in cents so
36:012,95 for the
36:04basketball and plus the cost of the
36:07t-shirt which is
36:10$7.99 and we'll surround this in
36:12Brackets to make sure we calculate this
36:16first and then we're going to multiply
36:18this by the tax percent or
36:230.1 and finally we'll convert this back
36:26to dollars so let's surround this in
36:29Brackets as well to make sure we
36:32calculate this first and at the end
36:35we'll divide by 100 to convert back to
36:41dollars so notice here we can have
36:44brackets inside brackets in this
36:47situation JavaScript will calculate the
36:50inner brackets first and then the outer
36:53brackets and then everything else if we
36:56press enter
36:58here this gives us
37:012.89 which is close to the number on the
37:05page it's the same amount of money but
37:08our number is more accurate than we need
37:12so now let's learn how to use math.round
37:15to round this number to exactly
37:182.89 first let's create a copy of this
37:22calculation so we'll select it right
37:26click copy
37:29and down here right click and
37:34paste by the way if you paste in the
37:36console you might see this warning
37:39message to fix this you can type allow
37:45pasting and press enter and now you can
37:52paste so let's continue and we were
37:55trying to round 2.89 4 to exactly
38:022.89 so one thing we might try to do is
38:05to round this entire
38:08calculation however this will round 2.89
38:124 to 3 because it rounds to the nearest
38:16integer instead what we want to round is
38:20this number here so remember that this
38:23number is the result in cents which is
38:28289.50
38:30if we round this number it will round
38:33down to
38:36289 which is exactly
38:40$289 so to round this calculation at the
38:44front we'll type capital M
38:50math.round so we already have brackets
38:53around this so we don't need extra
38:56brackets so this this will round to
39:00289 and finally we'll convert this back
39:03to dollars at the End by dividing by 100
39:10if we press
39:11enter that's how we rounded this
39:13calculation to get the exact number on
39:16the
39:17page so to summarize we first calculate
39:20the result in cents and then we round
39:24this to the nearest scent and then at
39:27the end and we convert back to
39:29Dollars again don't worry you don't have
39:32to be good at math to learn JavaScript
39:35these examples are just for learning
39:38almost all the math we do in JavaScript
39:40is more simple than this I'll give you
39:43some exercises at the end of this lesson
39:46to help you get more practice the last
39:49thing we're going to learn in this
39:50lesson is how to use Google when you're
39:53learning to code so far I've been giving
39:56you different pieces pces of code like
39:59alert and
40:01math.round you might be wondering where
40:03do I find this code these pieces of code
40:07are features of JavaScript and I find
40:10this code by searching on Google so
40:13we're going to learn how to use Google
40:15to learn new features of JavaScript on
40:18our own let's go to our browser and
40:21create a new tab at the
40:24top and we'll click here and type
40:30google.com and press
40:33enter and we'll search in Google so the
40:37trick to searching in Google is to
40:39search for what we are trying to do for
40:42example if we want to round a number we
40:46would search for
40:49JavaScript how to round a
40:54number if we press enter
40:58sometimes you might get the code right
41:00away in the first result and sometimes
41:03you might have to go into the other
41:05results to find the code that you need
41:08in my example I see the code math.round
41:12in the first result so I can click into
41:15this result read about what this code
41:18does and also see some examples of how
41:21to use it one thing to keep in mind is
41:24that when you're searching in Google you
41:26might not understand understand all the
41:28code that you get in your results for
41:31example here there's a lot of code that
41:33we haven't learned yet and actually
41:36that's okay we just need to look for the
41:39pieces of code that look familiar to us
41:42like this part of the code we can then
41:45use this part of the code in our own
41:48code we don't have to understand every
41:50bit of code that we get from Google and
41:54don't worry as we move through this
41:56course we we will understand more and
41:58more of this code that we get from
42:01Google
42:02results these days we also have some
42:05artificial intelligence or AI tools that
42:08can help us search for code I'll provide
42:11links to some of these tools in the
42:13video
42:15description by the way to find the links
42:18mentioned in each lesson you can click
42:20here in the
42:26description and this page contains all
42:28the links mentioned in each
42:33lesson and that's the end of this lesson
42:36in this lesson we learned how to work
42:38with numbers and math we learned the
42:42order of operations and brackets we
42:45calculated the numbers in the final
42:47Amazon Project we learned that
42:50calculations using floats can be
42:52inaccurate and how to avoid this problem
42:54when working with money we learned how
42:57to round numbers using
42:59math.round and we learned how to search
43:02for code on our own here are some
43:05exercises to help you practice numbers
43:07and math
43:31in the previous lesson we learned how to
43:33work with numbers and math in this
43:36lesson we're going to learn how to work
43:38with text and we're going to create the
43:41text in this section of the final
43:43project first make sure you have the
43:46final project open and you're on the
43:48checkout page also make sure you have
43:51the console open on this page if not you
43:55can go to a blank area
43:58right click click
44:00inspect and then click the
44:04console now we're going to learn a
44:07feature of JavaScript called strings a
44:10string represents text let's go to our
44:14console and create our first string
44:17we're going to type single quote hello
44:21and single quote and press
44:25enter this is a string and it represents
44:29the text hello and we've actually seen
44:32this code before in the first lesson the
44:35first piece of code that we learned was
44:39alert Open Bracket single quote hello
44:44single quote close bracket and
44:47semicolon this code creates a popup on
44:50the page if we press
44:53enter it creates a popup now in inside
44:57these brackets we actually created a
45:00string this string is the text that
45:03appears in the popup so as you can see a
45:07string represents
45:09text let's press
45:11okay and now let's learn the syntax
45:14rules for strings to create a string we
45:17just write some text like hello and then
45:21surround this text with single quotes
45:24one at the beginning and one at the end
45:27we can also add strings together for
45:30example let's type the string
45:35sum plus the string
45:39text and press
45:42enter when we add two strings it
45:45combines the strings together into a
45:47bigger string and this makes sense we're
45:50adding two pieces of text together we
45:54can also add more than two strings at a
45:56time
45:57for example we can type the string
46:02sum plus the string
46:06more plus the string
46:11text if we press
46:13enter the computer will combine all
46:16three strings into one big string by the
46:20way this is called concatenation when we
46:24combine strings together now in in the
46:27previous lesson we learned about numbers
46:30numbers and strings are two different
46:33types of values in JavaScript they
46:36represent different things and we can
46:39actually check what type of value
46:41something is using this code type of and
46:47then space and then a value like the
46:50number two if we press
46:53enter type of will tell us that two
46:57is a number if we do type of quote hello
47:05quote and press enter it will tell us
47:09that hello is a
47:11string now what if we added a string and
47:14a number together for example let's type
47:18the string
47:21hello plus the number three and press
47:25enter
47:27so when we add a string and a number
47:31JavaScript will automatically convert
47:33this number into a string so this gets
47:37converted into the string hello plus the
47:41string
47:42three and then it combines them together
47:45into the string hello 3 this feature is
47:49called type coersion or automatic type
47:54conversion okay now that we understand
47:56understand the basics of strings let's
47:59do some practical examples we're going
48:02to use strings and numbers to create the
48:05text in this section of the project
48:08first make sure that in your cart you
48:11have one basketball with free shipping
48:15and you have one t-shirt also with free
48:19shipping and you have no other
48:22products let's scroll up and we'll start
48:26by creating this text in the top right
48:29so this is the cost of the products but
48:32this time we're going to have a dollar
48:34sign so instead of just a number this
48:37will be
48:38text so one thing we can do to create
48:41this text is just type out the string
48:44directly like quote doll
48:4928.94 and
48:51quote however let's actually calculate
48:54this number using math
48:57remember the advantage of JavaScript is
48:59that it's able to do
49:01calculations so instead of typing out
49:0528.94 we're just going to create the
49:08string Dollar Sign Plus and we're going
49:12to calculate this number using math so
49:16we're going to add the cost of the
49:18basketball which is
49:22$2.95
49:25plus the cost of of the t-shirt which is
49:31$7.99 if we press
49:33enter unfortunately this doesn't look
49:36right instead of doing math and adding
49:39these two numbers together it just sort
49:41of put the numbers one after another
49:44into the string so why is this happening
49:48JavaScript adds from left to right so
49:51the first step is to add these two
49:54values and as we learned if we add a
49:57string and a number JavaScript will
50:00automatically convert this number into a
50:03string so the result of this calculation
50:06will be the string doll
50:112.95 and
50:13quote the next step is to add
50:177.99 so it will add
50:227.99 and now we're adding again a string
50:25and a number
50:27so JavaScript will automatically convert
50:29this number into a string and combine
50:33them together that's why it puts
50:367.99 at the end of this string instead
50:39of doing
50:40math so what we actually want to do here
50:44is to add these two numbers first and
50:47then combine the total with the string
50:50so how do we do this the solution is
50:53that strings also follow the order of
50:57operations just like numbers and
51:00remember in the order of operations we
51:02can use brackets to control which part
51:05of a calculation gets done first so
51:09let's type this calculation out again
51:11the string Dollar Sign Plus 20.95%
51:26close bracket around this
51:29calculation this tells the computer to
51:32calculate this number first using math
51:35and then combine this result with the
51:38string after if we press
51:41enter now this is doing math and it
51:44solves our original problem
51:47unfortunately now we have another
51:49problem this math is inaccurate so
51:53remember from the previous lesson doing
51:55calculations with floats can sometimes
51:58cause
51:59inaccuracies and the best practice when
52:01calculating money is always calculate in
52:04cents and then convert back to dollars
52:07at the end so at the bottom here we're
52:11going to add the string
52:14Dollar Plus open bracket and instead of
52:20$20.95 we're going to add
52:242,95 Plus
52:28$7.99 and close bracket and then at the
52:32end we're going to convert this number
52:34back to Dollars by dividing by 100 if we
52:40press
52:42enter this will give us the text that we
52:44see in the final
52:46project again strings follow the same
52:50order of operations as numbers brackets
52:54are always calculated first multiply and
52:57divide are done next and add and
53:00subtract are done after so adding this
53:03result to the string is the last
53:08step now let's do a more complicated
53:11example let's use strings and numbers to
53:14create this entire line of text not just
53:18the dollar text to create this we're
53:21going to go from left to right let's go
53:24back in our console and we're going to
53:27start with the string
53:30items Open Bracket and here we could
53:34just type two and close bracket but
53:37let's actually calculate this number as
53:40well using math so this number is the
53:44quantity or the number of products in
53:46our cart let's go back to our console
53:50we're going to end the string here and
53:53we're going to add and we're going to
53:55calculate the quantity
53:57so we have one basketball plus one
54:01t-shirt again we run into the same
54:04problem as before this gets calculated
54:07first and results in a string and then
54:11it will just combine the one at the end
54:13of the string instead of doing math to
54:17solve this we're going to use brackets
54:19again so around the 1 + 1 we're going to
54:23add Open Bracket and close
54:26bracket this tells the computer to add
54:30the numbers first and then combine it
54:33with a
54:34string all right let's keep going from
54:37left to right we're going to add the
54:40rest of the string quote close bracket
54:44colon and let's just use a space to
54:47represent the space between these two so
54:50we'll type a space dollar sign and then
54:54we're going to calculate this number
54:56again and add it to the string so we'll
55:00end the string and then plus and we
55:04already did this calculation up here so
55:07we can select this and then
55:11rightclick
55:12copy and here right click and
55:17paste and press
55:20enter by the way if you paste in the
55:23console you might see this warning
55:25message
55:26to fix this you can type allow
55:32pasting and press
55:34enter and now you can
55:39paste and that's how we create this
55:42first line of text using strings and
55:45numbers we break up the string into
55:47Parts calculate the numbers and then add
55:51the parts back
55:52together all right now let's take these
55:55strings that we created Creed and do
55:57something with them let's create a popup
56:01and display this first line of text
56:03inside the popup we'll go back to our
56:06console and type the code for creating a
56:10popup
56:11alert Open Bracket close bracket
56:15semicolon and then inside the popup
56:18we're going to display this string so
56:21let's just make a copy of this code
56:24we'll select it right click
56:28copy and between the brackets right
56:31click and
56:34paste if we press
56:36enter the computer displays a popup with
56:39the first line of text of the final
56:41project
56:43inside so that's how we use strings to
56:46create the text in the final project and
56:48once we create the strings we can use
56:51them in other JavaScript
56:55code in in the rest of this lesson we're
56:57going to learn more details about
57:00strings in JavaScript there are actually
57:03three ways to create a string the first
57:06way is to use single quotes which we
57:09already learned for example we can type
57:13single quote hello and single quote and
57:17press
57:19enter the second way to create a string
57:22is to use double quotes for example
57:26double quote hello and double quote and
57:30press
57:32enter this creates the exact same string
57:35as single quotes so which one should we
57:38use to create a string single quotes or
57:42double quotes in JavaScript I recommend
57:45using single quotes by default they're a
57:48little easier to read and type there is
57:52one situation where double quotes might
57:54be useful and that is is if we have a
57:57single quote inside the string for
58:00example if we type the
58:03string I'm
58:06learning
58:09JavaScript and single quote and press
58:13enter this doesn't work because there's
58:15a single quote inside the string and
58:18this single quote will end the string
58:21early to solve this we can create the
58:24string using double quotes for example
58:28double quote I'm
58:31learning
58:33JavaScript and double quote and press
58:37enter so now this works because we
58:41created the string using double quotes
58:44the single quote no longer has a special
58:46meaning and it will no longer end the
58:48string early so this is a situation
58:52where double quotes might be useful
58:54otherwise we use single quotes by
58:57default now there's actually another
58:59solution to this problem other than
59:01using double quotes and that's by using
59:04an escape character so a character is
59:08one letter number or symbol in a piece
59:12of textt for example the text hello has
59:17five characters h e l l
59:22o a character can be a letter in number
59:26or also a symbol these are all
59:29considered
59:31characters now in addition to these
59:33characters we have a special set of
59:36characters we can also use in a string
59:39called Escape characters an escape
59:42character looks like this a backslash
59:46and then another character like single
59:49quote this combination actually counts
59:52as one character in a string this
59:55character creat creat a single quote
59:57that is just text it doesn't have a
1:00:00special meaning and it doesn't start or
1:00:02end strings for example we can create
1:00:07this string with single quotes again so
1:00:10single quote I and this time we'll use
1:00:14the Escape character back slash single
1:00:17quote and then M
1:00:21learning
1:00:23JavaScript and single quote and press
1:00:27enter and now this works because the
1:00:31Escape character back SL single quote
1:00:34creates a single quote that is just text
1:00:37it doesn't start or end the
1:00:39string another Escape character that's
1:00:42useful to know is back SL double quote
1:00:46this creates a double quote that is just
1:00:48text it doesn't start or end a
1:00:52string the last Escape character we'll
1:00:54learn in this lesson is back
1:00:58sln this is called the new line
1:01:01character this Escape character doesn't
1:01:04create the letter N anymore it creates a
1:01:07new line of text for example let's
1:01:11create a popup using
1:01:15alert Open Bracket close bracket and
1:01:18semicolon and then inside the brackets
1:01:21we're going to create a string sum and
1:01:25then back
1:01:26sln text and single quote if we press
1:01:32enter you'll notice that this Escape
1:01:35character created a new line of text in
1:01:39the popup and that's why we call this
1:01:41the new line character so that's how
1:01:44Escape characters work they are a set of
1:01:47special characters that start with back
1:01:49slash and we can use them in a
1:01:52string now let's press okay
1:01:56and we're going to learn the Third Way
1:01:58of creating a string in JavaScript which
1:02:01is using back ticks for example let's
1:02:04type in our console and we'll type
1:02:08backtick hello and backtick and press
1:02:13enter this creates the same string as
1:02:17single quotes and double quotes strings
1:02:20created with backx actually have a name
1:02:23we call these template strings and they
1:02:26have a name because they have some
1:02:28special features the first special
1:02:30feature of template strings is called
1:02:34interpolation interpolation lets us
1:02:36insert a value directly into a string
1:02:40for example let's say we want to create
1:02:43the first line of text in our project
1:02:46earlier in this lesson we created this
1:02:48text with concatenation which means we
1:02:51broke it up into parts and added them
1:02:54back together in interpolation gives us
1:02:57a much easier way to do this we'll go to
1:03:00our console and we'll create this text
1:03:03using a template string because
1:03:05interpolation is only a feature of
1:03:07template strings so we'll type backtick
1:03:12items Open Bracket close bracket and
1:03:16back tick and now between these brackets
1:03:19we want to insert the quantity or the
1:03:22number of products in our cart to insert
1:03:25this with interpolation we're going to
1:03:27type Dollar open curly bracket close
1:03:31curly bracket so this combination of
1:03:34characters allows us to insert values
1:03:37directly into the string between these
1:03:40curly brackets we can calculate the
1:03:42quantity which is one basketball plus
1:03:47one
1:03:48t-shirt this will add 1 + 1 which equals
1:03:522 and then insert it directly into the
1:03:55string
1:03:56let's keep going and create the rest of
1:03:59this line so we're going to type at the
1:04:02end a Colin space and dollar and now
1:04:07we're going to insert another value into
1:04:09the string which is the cost of the
1:04:12products to insert another value we're
1:04:15going to type Dollar open curly bracket
1:04:18close curly bracket again in between the
1:04:21curly brackets we're going to calculate
1:04:24the cost of the products
1:04:26which is
1:04:302,95
1:04:33plus
1:04:35$7.99 and we'll surround this in
1:04:38Brackets to make sure we calculate this
1:04:40first and at the end we're going to
1:04:43convert back to Dollars by dividing by
1:04:47100 if we press
1:04:50enter this creates the first line of
1:04:53text again in our final project
1:04:57if we compare this code which uses
1:04:59interpolation to our previous code which
1:05:02uses concatenation you can see that
1:05:05interpolation is a much cleaner way of
1:05:08inserting values into a string so
1:05:10interpolation is a recommended
1:05:13solution next template strings have
1:05:16another special feature called
1:05:18multi-line strings let's go to our
1:05:22console and we're going to type a
1:05:24backtick
1:05:26sum and then press
1:05:29enter and text and back tick notice that
1:05:35this string is on multiple lines so we
1:05:38call this a multi-line string and this
1:05:41feature is only available for template
1:05:44strings if we press
1:05:47enter you can see that the new line in
1:05:50the string just creates the new line
1:05:52Escape character that we learned earlier
1:05:55so that's the multi-line string feature
1:05:58of template strings we're going to use
1:06:00multi-line strings a lot later in this
1:06:03course but for now I just wanted to
1:06:06introduce you to this feature now you
1:06:08might be wondering again what should we
1:06:11use to create a string single quotes or
1:06:14template strings even though template
1:06:17strings have more features I find that
1:06:19most JavaScript code still uses single
1:06:22quotes by default so my personal
1:06:24recommendation is to use single quotes
1:06:27by default and if we need to insert a
1:06:30value into the string or type the string
1:06:33on multiple lines then use template
1:06:36strings and that's the end of this
1:06:38lesson in this lesson we learned about
1:06:42strings a string represents text we
1:06:46learned how to use strings and numbers
1:06:48to create the text in our final project
1:06:51we learned three different ways of
1:06:54creating a string single quotes double
1:06:56quotes and back ticks or template
1:06:59strings we learned about Escape
1:07:02characters and we learned two useful
1:07:04features of template strings
1:07:06interpolation and multi-line
1:07:09strings here are some exercises to help
1:07:12you practice working with strings
1:07:35so far in this course we've learned some
1:07:37basic features of JavaScript like
1:07:40numbers and strings in this lesson we're
1:07:44going to learn how to use HTML CSS and
1:07:48JavaScript together because as I
1:07:50mentioned at the beginning of this
1:07:52course we use all three Technologies to
1:07:55build build a full
1:07:57website HTML creates the content of a
1:08:00website like the buttons and the text
1:08:04CSS changes the appearance of the
1:08:07website and JavaScript makes the website
1:08:11interactive the first thing we're going
1:08:13to do is review the basics of HTML and
1:08:17CSS that we will need for the rest of
1:08:19this
1:08:20course now in order to write HTML and
1:08:24CSS code we need to install another
1:08:27piece of software called a code editor a
1:08:31code editor helps us write and organize
1:08:34our code the most popular code editor
1:08:37for web development is called vs code or
1:08:41Visual Studio code to install vs code
1:08:45you can go to google.com in your
1:08:49browser search for VSS
1:08:53code click the result
1:08:56and follow the instructions to download
1:08:58and
1:09:00install once we've installed VSS code
1:09:03we're ready to review the basics of HTML
1:09:06and
1:09:07CSS we'll start with
1:09:10HTML HTML stands for hyper text markup
1:09:15language and just like JavaScript HTML
1:09:18is also giving instructions to a
1:09:21computer now unlike JavaScript we can't
1:09:24use the console to write and run HTML
1:09:28code instead we write HTML code inside a
1:09:32file using our code editor let's do that
1:09:37right now we'll start by going to our
1:09:39desktop so I'm going to close my browser
1:09:42to go to my
1:09:44desktop and then we're going to create a
1:09:46new folder so we can right click new
1:09:52folder this folder is going to contain
1:09:55all the code that we write in this
1:09:57course let's name this folder JavaScript
1:10:03dasc next we're going to open this
1:10:06folder in our code editor so let's open
1:10:09vs
1:10:11code and then we'll click
1:10:14file open
1:10:17folder and find the folder that we just
1:10:20created for me it's on the
1:10:23desktop and it's this folder right right
1:10:25here so we're going to select the folder
1:10:28and then click select
1:10:32folder now we can close this startup
1:10:35message and we're going to create an
1:10:38HTML file we're going to click this icon
1:10:41to create a new
1:10:44file and we're going to name this file
1:10:48website do
1:10:50HTML and press
1:10:53enter ending the file name name with
1:10:56HTML tells a computer that this file
1:10:59contains HTML code rather than just
1:11:03text now let's review some basic HTML
1:11:07code we're going to type the code less
1:11:10than button greater than and we also
1:11:15need to type less than slash button
1:11:17greater than but our code editor might
1:11:20autocomplete this for us so this code
1:11:23tells a computer to create a button and
1:11:27inside the button we're going to have
1:11:29the text
1:11:32hello now let's save this file by
1:11:35clicking
1:11:36file
1:11:38save or by typing contrl s on Windows or
1:11:42command s on
1:11:45Mac now to run this HTML code we're
1:11:48going to open this file in our browser
1:11:52let's go back to our desktop
1:11:55we're going to open the folder that we
1:11:59created find the HTML file select it and
1:12:04then right click open with Google
1:12:10Chrome as you can see we have a website
1:12:13and we created a button with the text
1:12:16hello inside and if we look back at our
1:12:21code that's exactly what we told the
1:12:23computer to do
1:12:25so just like JavaScript HTML is also
1:12:29giving instructions to a
1:12:32computer let's review some more HTML
1:12:35code first I'm just going to rearrange
1:12:38my windows here so that it's easy to see
1:12:40the website side by
1:12:44side next we're going to click the end
1:12:48of the first line and press enter to
1:12:50create a new line and we're going to
1:12:52type the code less than P greater than
1:12:57and we also need to type less than SLP
1:13:00greater than so this code creates a
1:13:04paragraph and inside the paragraph we're
1:13:07going to put some text for example
1:13:11paragraph of text now let's save our
1:13:15file by typing contrl s on Windows or
1:13:18command s on
1:13:20Mac and to update our website to the new
1:13:23code we're going to go to our website
1:13:25and click refresh or typ controlr on
1:13:29Windows or command r on
1:13:33Mac and now you can see that the
1:13:35computer created a paragraph of text
1:13:39just like we told it to do and that's
1:13:42the basics of HTML the computer reads
1:13:45our code and then follows our
1:13:47instructions one by one first it creates
1:13:50a button and then it creates a paragraph
1:13:54of text
1:13:56now let's review the syntax rules for
1:14:00HTML each of these things that were
1:14:02displaying on a web page these are
1:14:04called HTML elements so a button is a
1:14:08type of HTML element and a paragraph is
1:14:11another type of HTML element to create
1:14:15an element we start with a less than
1:14:18symbol and then the element name like a
1:14:21button and then the greater than symbol
1:14:25so this whole thing is called an HTML
1:14:28tag this tells a computer to create a
1:14:32button
1:14:33element every HTML tag needs a matching
1:14:37tag the matching tag follows the same
1:14:40syntax except it has a slash in front of
1:14:43the element name so this is called the
1:14:47opening tag and this is called the
1:14:49closing tag you can think of the opening
1:14:52tag as the start of the button and the
1:14:54closing tag tag as the end of the button
1:14:57and in between we have the contents
1:15:00inside the button in this case it's the
1:15:03text
1:15:04hello in addition to text we can also
1:15:07have elements inside an element for
1:15:10example we can go to our paragraph
1:15:13element and we can add a button inside
1:15:17so less than button greater than and we
1:15:21also need less than SL button greater
1:15:24than and then inside the button we'll
1:15:26also have the text
1:15:28hello if we save this file and refresh
1:15:33the
1:15:34page now our paragraph element has a
1:15:37button element
1:15:39inside by the way this is called nesting
1:15:42when we have an element inside another
1:15:46element the last syntax rule we have to
1:15:48review is that in HTML if we have
1:15:52multiple spaces for example if we go
1:15:55here and type multiple
1:15:58spaces multiple spaces are combined into
1:16:01one space on the web page so if we save
1:16:05this code and
1:16:07refresh you'll notice that all of the
1:16:09spaces that we added only show up as one
1:16:12space on the web page in addition in
1:16:16HTML new lines also count as spaces so
1:16:20if we go back to our
1:16:22code and we type here and press enter to
1:16:26create a new line and then save and
1:16:32refresh notice that the new line doesn't
1:16:34appear on the web page and that's
1:16:37because this new line here is the same
1:16:40as spaces in HTML so all of these get
1:16:44combined into one space on the web
1:16:47page at first this might seem a little
1:16:50weird but this feature gives us a lot of
1:16:52flexibility when organizing our h ml
1:16:55code for example we can go into our code
1:16:59and add a new line here to separate
1:17:03these two elements and make our code
1:17:04easier to read another thing we usually
1:17:07do to make our code easier to read is to
1:17:10put the contents of an element on its
1:17:13own line for example we're going to type
1:17:16here and press enter and here and press
1:17:21enter
1:17:22again to put the contents of the button
1:17:24Buton on its own line now it's a lot
1:17:27easier to see where this button starts
1:17:30and where it ends we can do the same
1:17:33thing with the paragraph We can type
1:17:35here and press enter and type here as
1:17:39well and press enter and then remove
1:17:42some of the Extra
1:17:44Spaces to put the content of the
1:17:47paragraph on its own line and now if we
1:17:50save our
1:17:51file and refresh
1:17:55you notice that none of the new lines
1:17:57that we added appear on the web page by
1:18:00the way a web page is a single page like
1:18:03the homepage or the cart page together
1:18:07we call this a
1:18:09website so that's the basics of HTML and
1:18:13HTML
1:18:15syntax now let's review CSS CSS stands
1:18:19for cascading style sheets and CSS
1:18:23changes the appearance of our website
1:18:26let's review some CSS code we're going
1:18:29to write our CSS code inside our HTML
1:18:33file first let's type here and create
1:18:37some new lines at the top and then at
1:18:40the top we're going to create a special
1:18:43HTML element called the style element so
1:18:47let's type less than style greater
1:18:52than and we also need the closing tag
1:18:55less than SL style greater than so the
1:18:58style element is unique because it
1:19:01doesn't appear visibly on the page
1:19:04instead the purpose of the style element
1:19:07is that it lets us write CSS code
1:19:10inside so inside here let's press enter
1:19:14to create a new line and we're going to
1:19:17type
1:19:18button open curly bracket close curly
1:19:22bracket and then inside the curly
1:19:24brackets we're also going to press enter
1:19:27to create a new line so this is CSS code
1:19:32and this code tells a computer to change
1:19:34the appearance of all buttons on the
1:19:37page and then inside these curly
1:19:39brackets we can tell the computer how to
1:19:42change the appearance for example we can
1:19:45type
1:19:47background- color colon red and
1:19:52semicolon if we save
1:19:55and
1:19:57refresh you can see that this CSS code
1:20:00changes the appearance of all buttons on
1:20:02the page and changes their background
1:20:05color to
1:20:07Red let's do another example we're going
1:20:10to go back to our CSS code going to type
1:20:13here and press enter to create a new
1:20:16line and we're going to add color colon
1:20:21white and semicolon let's save
1:20:25and
1:20:28refresh and this CSS code changes the
1:20:31text color of all buttons on the page to
1:20:35White let's do one more example we're
1:20:38going to type the
1:20:40code order Colon none and
1:20:45semicolon let's save this and
1:20:49refresh and this CSS code removes the
1:20:52border for all buttons on the page
1:20:56and that's how CSS works we tell the
1:20:58computer which elements we want to
1:21:00change and then how to change the
1:21:03appearance of these
1:21:05elements now let's review the syntax
1:21:08rules for
1:21:09CSS this part of the CSS code is called
1:21:12the CSS selector it tells a computer
1:21:16which elements we want to change in
1:21:19other words it selects which elements to
1:21:22change inside the curly brackets we have
1:21:25some CSS Styles this tells a computer
1:21:28how to change the
1:21:30appearance for each style the left side
1:21:34is called the CSS property this tells a
1:21:37computer what we're changing the right
1:21:40side is called the CSS value this tells
1:21:43a computer what we're changing the
1:21:45property to for example this style
1:21:49changes the background color to
1:21:52Red we use a colon to separate the
1:21:55property and the value and a semicolon
1:21:58at the end to tell the computer that
1:22:01this is the end of a style so that's the
1:22:04basic syntax of CSS we tell the computer
1:22:08which elements we want to change and
1:22:10then how to change the appearance of
1:22:12these
1:22:14elements the next thing we're going to
1:22:16review is HTML
1:22:18attributes right now this CSS selector
1:22:22changes the appearance of all but
1:22:24buttons on the page however what if we
1:22:27only want to change the appearance of
1:22:29this one button and we want to style the
1:22:32other button differently how do we do
1:22:34that we're going to review a feature of
1:22:36HTML called attributes attributes change
1:22:40the behavior of an element for example
1:22:44we're going to go to the opening tag of
1:22:46the first button and then here we're
1:22:49going to add an HTML attribute by typing
1:22:53space
1:22:55title equals double quotes and then in
1:22:59between the double quotes we're going to
1:23:02type tool
1:23:05tip so this is an HTML attribute and
1:23:09this attribute adds a tool tip to this
1:23:12button if you're wondering what a tool
1:23:14tip is if we hover over some code in our
1:23:17code editor it'll show us this sort of
1:23:20popup with more
1:23:21information this is called a tool tip
1:23:24when we hover over something and this
1:23:26shows up so if we save our
1:23:29file and refresh the web page and now we
1:23:34hover over our button we can see that
1:23:37the HTML attribute added a tool tip to
1:23:40our button and then inside the double
1:23:43quotes is the text inside the tool tip
1:23:47for example we can actually change this
1:23:49to good
1:23:52job and if we save save and
1:23:57refresh and hover over our button the
1:24:00text between the double quotes is what
1:24:02shows up in our tool tip so that's an
1:24:05example of an HTML
1:24:08attribute now let's review the syntax
1:24:11rules for
1:24:12attributes we always put attributes on
1:24:15the opening tag and we add a space
1:24:18between the element name and the
1:24:20attribute to separate them on the left
1:24:23side is the attribute name this tells
1:24:26the computer what we're changing about
1:24:28this element on the right side is the
1:24:31attribute value this tells a computer
1:24:34what we're changing this attribute to
1:24:37for example here we're changing the tool
1:24:40tip of this element to good job we
1:24:44separate the name and value with an
1:24:47equal sign and make sure there are no
1:24:49spaces around the equal sign and we
1:24:52surround the value with double quotes
1:24:56now let's go back to the original
1:24:58problem how do we style these buttons
1:25:01differently we can do this using a very
1:25:03important attribute called the class
1:25:06attribute let's review that right now
1:25:09we're going to go back to our button and
1:25:11then here we're going to type space
1:25:16class equals double quotes and then
1:25:20inside the double quotes we're going to
1:25:21type red Das
1:25:25button so the class attribute sort of
1:25:28adds a label to an element so here we
1:25:32labeled this button as a red button and
1:25:36now that we labeled this element we can
1:25:38select it in
1:25:40CSS to do that we're going to go to our
1:25:42CSS code we're going to remove the
1:25:46button
1:25:46selector and replace it
1:25:49witht
1:25:51red-
1:25:52button when we start the selector with a
1:25:55DOT this means that now we're looking
1:25:58for a class so here we're going to look
1:26:01for all elements with the class red dash
1:26:04button which is only this element if we
1:26:09save and
1:26:12refresh now only the elements with the
1:26:15class red button gets these Styles we
1:26:18can also add the same class to multiple
1:26:21elements for example we can go to to our
1:26:24other
1:26:25button and add the class equals
1:26:31red-
1:26:32button if we save and
1:26:37refresh now these Styles get applied to
1:26:40both buttons again because they both
1:26:42have the class red-b button if we want
1:26:45to style this button differently we just
1:26:48give it a different class for example we
1:26:51can change this to Yellow yellow dash
1:26:55button and then in our CSS we can add
1:26:59another selector so we can type dot this
1:27:03means we're going to select a class and
1:27:06we're going to select the yellow Das
1:27:10button class open curly bracket close
1:27:13curly bracket and then inside here we
1:27:17can add some styles for the yellow
1:27:19button for
1:27:21example background Das color colon
1:27:26yellow and
1:27:28semicolon now let's save and
1:27:33refresh and that's how we use the class
1:27:36attribute in HTML to modify specific
1:27:40elements the final thing we need to
1:27:42review is something called the HTML
1:27:45structure let's go back to our website
1:27:48we're going to find a blank area and
1:27:51then
1:27:51rightclick and then click inspect
1:27:56so we already learned about the console
1:28:00tab here we can write and run JavaScript
1:28:03code now we're going to go to the
1:28:06elements tab which is for HTML and CSS
1:28:10so in the elements tab we can see all
1:28:13the HTML on the page as well as all the
1:28:17CSS on the page and we can play around
1:28:20with the CSS if we
1:28:22want now if we go back to to the
1:28:25HTML you'll notice that our web page has
1:28:28some elements that we didn't add before
1:28:31the HTML element the head element and
1:28:34the body
1:28:36element so this is the structure that
1:28:38we're supposed to follow when writing
1:28:41HTML in our code we didn't follow the
1:28:44structure so the browser actually adds
1:28:47it for us
1:28:48automatically however it's still best
1:28:50practice to follow this structure in our
1:28:53code because it gives us access to some
1:28:55more features of
1:28:57HTML let's review the HTML structure and
1:29:00add it to our
1:29:02code we're going to type up here and
1:29:05we're going to create some new
1:29:07lines and now every HTML file is going
1:29:11to start with less than
1:29:14exclamation dock type in capitals and
1:29:18then space
1:29:20HTML and greater
1:29:22than this is not an HTML element it's a
1:29:27special line of code that tells a
1:29:28browser to use a modern version of
1:29:31HTML if we don't have this the browser
1:29:34might fall back to an older version of
1:29:36HTML that has less
1:29:39features next we're going to create an
1:29:42HTML element so less than
1:29:46HTML and greater
1:29:49than the HTML element represents the
1:29:52entire web page
1:29:54so everything on the web page should go
1:29:57inside this
1:29:58element and then inside the HTML element
1:30:02we're also going to split it up into two
1:30:05sections the head
1:30:08element and the body
1:30:13element so the body element is supposed
1:30:16to contain everything that is visible on
1:30:18the page in our example that would be
1:30:22the buttons and the parag graph so let's
1:30:25actually select this
1:30:27code and we're going to
1:30:29rightclick and
1:30:32cut and then inside the
1:30:35body we're going to right click and
1:30:41paste the head element contains
1:30:45information about the page in general
1:30:48everything that is not visible on the
1:30:50page goes inside the
1:30:52head in our examp example that would be
1:30:55the style element so let's select this
1:30:58as
1:30:59well we're going to rightclick and
1:31:04cut and then inside the
1:31:07head we're going to right click and
1:31:12paste and at the bottom let's just clean
1:31:15up by removing all of the extra new
1:31:18lines so this is a structure that we're
1:31:21supposed to follow in all of our HTML
1:31:24files as you can see this structure uses
1:31:27a lot of nesting or elements inside
1:31:30elements to organize our
1:31:33code okay so what are the benefits of
1:31:36following this structure one benefit is
1:31:40that there are other elements that we
1:31:41can use inside the head for example
1:31:45let's type here press enter and we're
1:31:48going to add the title element so the
1:31:53title element sets the text in the
1:31:56tabs inside we can type HTML CSS review
1:32:03if we save and refresh the title will
1:32:07show up in the
1:32:09tab so this is an example of an element
1:32:12that we can now add in the
1:32:14head another benefit that we get from
1:32:17this structure is the ability to
1:32:19automatically refresh our web page when
1:32:22we change our code
1:32:24so far every time we change our code we
1:32:28have to save and then manually refresh
1:32:31the web page we can actually automate
1:32:34this by following the structure and then
1:32:37installing a VSS code
1:32:40extension so let's click the extension
1:32:43area and we're going to search for the
1:32:46extension live
1:32:49server and click install
1:32:54once we have that installed we're going
1:32:55to change a
1:32:57setting let's open the settings by
1:33:00clicking this icon in the bottom left
1:33:03and then click
1:33:06settings at the top we're going to
1:33:08search for live
1:33:12server and we're going to look for a
1:33:14setting called live server custom
1:33:18browser and we're going to change this
1:33:21to
1:33:22Chrome now now if Google Chrome is
1:33:25already your default web browser you
1:33:27don't need to do this step but it's nice
1:33:29to
1:33:30know now let's close the
1:33:33settings and go back to our
1:33:37code next instead of opening this file
1:33:40directly in the browser like before
1:33:43we're going to use live server to open
1:33:46this file to do that we're going to
1:33:49rightclick this file in our code editor
1:33:52and then click open open with live
1:33:56server if we open a file with live
1:33:58server this web page will automatically
1:34:01refresh when we change our
1:34:04code for example we can go here and
1:34:08change the background color to Green if
1:34:12we save live server will automatically
1:34:15refresh the web page so we don't have to
1:34:18do that back and forth
1:34:20anymore let's just change it back to Red
1:34:23so that the class last name makes sense
1:34:25and
1:34:26save and we can also close the previous
1:34:31tab so this is the HTML structure it
1:34:35gives us access to more features of
1:34:38HTML and this is all we need to review
1:34:41about HTML and CSS for now if you want
1:34:45to learn more you can check out my HTML
1:34:47and CSS full course in the video
1:34:52description by the way to find the links
1:34:54mentioned in each lesson you can click
1:34:57here in the
1:35:02description and this page contains all
1:35:05the links mentioned in each
1:35:10lesson before we add JavaScript to our
1:35:12website we're going to review some VSS
1:35:15code
1:35:16setup so you'll notice that many of
1:35:18these lines have spaces at the front
1:35:22these spaces are called in indents and
1:35:24indents make our code easier to read for
1:35:27example we can easily tell that this
1:35:30code is inside the brackets because it
1:35:33has an extra indent in the
1:35:36front if we didn't have indents here's
1:35:39what the code would look like it's a lot
1:35:41harder to
1:35:42read to add an indent we can type at the
1:35:46beginning of the line and press
1:35:49tab to remove an indent we can press
1:35:52shift tab or just use
1:35:55backspace now by default VSS code uses
1:35:59four spaces per indet however in HTML
1:36:03CSS and JavaScript we usually use two
1:36:06spaces per indet so we're going to
1:36:09update this setting let's go to our
1:36:11settings by clicking this icon in the
1:36:14bottom
1:36:15left and then click
1:36:18settings and at the top we're going to
1:36:21search for tab
1:36:24and we're going to change the tab size
1:36:27from 4 to
1:36:302 now let's close the
1:36:32settings and we're also going to change
1:36:34the indents for this file we're going to
1:36:37go down here and click select
1:36:41indent and we're going to choose indent
1:36:43using
1:36:44spaces and then click
1:36:48two and now if we type at the start of a
1:36:50line and press tab it will only add two
1:36:54spaces per
1:36:56indent so let's reformat our code to use
1:36:59two spaces per indent instead of four
1:37:03first we're going to remove all the
1:37:04indents in our code a shortcut for this
1:37:07is to select all of these
1:37:10lines and press shift tab to remove one
1:37:14indent for each line so we're going to
1:37:17keep pressing shift tab until we remove
1:37:20all the
1:37:22indents next next we're going to add the
1:37:24indents back using a similar shortcut
1:37:28we're going to select the head
1:37:30element and press tab to add one indent
1:37:34for each line and then select everything
1:37:37inside the head and press tab to add
1:37:40another indent and then select
1:37:43everything inside style and press Tab
1:37:47and then inside each of these brackets
1:37:49we're going to select the lines press
1:37:51Tab and then here press tab we'll do the
1:37:55same thing for the body element we'll
1:37:58select all these lines and press tab
1:38:02we'll select everything inside the body
1:38:05press Tab and then inside each of these
1:38:08elements we're going to press Tab and
1:38:11press
1:38:12tab now if we save our website will look
1:38:16the same because all we did was adjust
1:38:19the
1:38:20indents so there's one other setting in
1:38:23vs code that we're going to set up which
1:38:25is line wrapping if you look at this
1:38:28line of code you can see that it's
1:38:30really long and we need to scroll
1:38:33horizontally to see the rest of the line
1:38:36instead we're going to make this line
1:38:38wrap around if it gets too long let's go
1:38:41back into our settings by clicking here
1:38:44and then click the
1:38:46settings and then up here we're going to
1:38:49search for
1:38:51wrap and we're going to look for editor
1:38:54word wrap and we're going to turn this
1:38:58on now if we close our settings and go
1:39:01back to our
1:39:02code this line which is really long will
1:39:05wrap around to the next line instead of
1:39:08us having to horizontally
1:39:10scroll so that's the vs code setup that
1:39:13we need two spaces per indent and line
1:39:18wrapping finally we're going to add
1:39:20JavaScript to this website so we learned
1:39:23that we can use the console to write and
1:39:26run JavaScript well there's actually
1:39:28another way to run JavaScript which is
1:39:31inside an HTML file let's learn how to
1:39:34do that so we learned that HTML has a
1:39:38special element that runs CSS code
1:39:40called the style element while HTML has
1:39:44another special element that runs
1:39:46JavaScript code and this element is
1:39:49called the script
1:39:51element so inside
1:39:54body at the bottom of the body we're
1:39:57going to add less than script greater
1:40:01than and the closing tag less than SL
1:40:05script greater than and inside the
1:40:08script element we can put some
1:40:09JavaScript code we're going to add the
1:40:12code alert Open Bracket quote hello
1:40:18quote close bracket and semicolon if we
1:40:22save
1:40:24live server will refresh the page and
1:40:26now you notice that the computer now
1:40:28runs our JavaScript code just like it
1:40:31did in the console it creates a popup
1:40:34with the text hello
1:40:37inside and we usually put the script
1:40:39element at the bottom of the body
1:40:42because we want the web page to be
1:40:43created first and then we use JavaScript
1:40:46to make it
1:40:48interactive for the rest of this course
1:40:51we're going to run our JavaScript code
1:40:53using using an HTML file the console
1:40:56that we used in the previous lessons is
1:40:58more of a way to try out JavaScript code
1:41:02we wouldn't use a console for a real
1:41:05website in addition to the script
1:41:07element we have another way to run
1:41:10JavaScript code inside HTML and that's
1:41:13by using an attribute let's go back to
1:41:17our first button and here we're going to
1:41:20add another attribute so let's type
1:41:23space and this time we're going to add
1:41:26the
1:41:28onclick attribute equals double
1:41:32quotes So this attribute will run
1:41:36JavaScript code whenever we click this
1:41:38button that's what onclick means between
1:41:42the double quotes we can write some
1:41:45JavaScript for example let's press enter
1:41:49enter and then here we're going to type
1:41:52alert
1:41:53Open Bracket
1:41:55quote good job quote close bracket and
1:42:02semicolon now if we
1:42:04save live server will refresh the page
1:42:07and run this line of JavaScript code
1:42:10let's press okay and now if we click
1:42:14this
1:42:15button it will run this line of
1:42:17JavaScript code and create a popup with
1:42:20a text good job inside
1:42:25so those are two places where we can run
1:42:27JavaScript code the script element and
1:42:31the onclick attribute the code in the
1:42:34script element runs first when the page
1:42:37is loaded the code in the onclick
1:42:41attribute runs after when we click the
1:42:44button on the
1:42:46page and that's how we use HTML CSS and
1:42:51JavaScript together on a website
1:42:54notice that everything starts from
1:42:56HTML HTML first creates the website and
1:43:01then inside the HTML we can run CSS code
1:43:05to change the appearance and we can run
1:43:09JavaScript code to make the website
1:43:13interactive now let's learn some new
1:43:15features of JavaScript that we haven't
1:43:17seen yet in this course the next feature
1:43:20we're going to learn is called comments
1:43:23comments are pieces of code that the
1:43:25computer ignores so let's create our
1:43:27first comment we're going to go down to
1:43:30the script element
1:43:32here and type forward slash forward
1:43:36slash so this is a comment anything
1:43:40after the double slash will be ignored
1:43:42by the computer so we can type anything
1:43:45we want like this is a
1:43:50comment if we save it ignores this line
1:43:55and creates the popup in the next
1:43:57line now let's close this popup and
1:44:00learn why we use
1:44:02comments comments are useful for
1:44:05providing more information for people
1:44:07reading our code for example we can
1:44:11create a comment above this code like
1:44:16this code creates a
1:44:20popup this comment helps others and
1:44:23ourselves understand what this code does
1:44:27so that's one way we use
1:44:29comments another way we use comments is
1:44:32if we don't want to run some code
1:44:34anymore but we also don't want to delete
1:44:37it for example this code creates a popup
1:44:42every time we refresh the page and this
1:44:45can be
1:44:46annoying so I want to stop running this
1:44:49code but I also don't want to delete it
1:44:52because you might want to review this
1:44:53code
1:44:55later so what we can do here is to add a
1:44:58double slash in front of this line to
1:45:01turn this code into a
1:45:04comment now if we save the computer will
1:45:08ignore this line of code and not create
1:45:10the
1:45:12popup this is called commenting out the
1:45:15code it's useful if we don't want to run
1:45:18some code anymore but we also don't want
1:45:20to delete it for informational purposes
1:45:24so JavaScript has another Syntax for
1:45:27writing comments and that syntax is
1:45:31slash star and star
1:45:34slash here anything between the stars is
1:45:38a comment this is called a multi-line
1:45:42comment because between the Stars we can
1:45:44write a comment on multiple lines for
1:45:48example we can type multi enter line
1:45:53Line enter
1:45:56comment on the other hand double slash
1:45:59is known as a single line
1:46:02comment now just like JavaScript HTML
1:46:06and CSS also have comments but they use
1:46:10a different
1:46:11syntax if we scroll up to our
1:46:15HTML here we can type less than
1:46:19exclamation
1:46:21d-h and we also need dh- greater than so
1:46:25anything between these double dashes is
1:46:28a comment for example this is a
1:46:34comment in CSS to create a comment we
1:46:38can type slash star star slash so it's
1:46:44the same multi-line comment as
1:46:47JavaScript between the Stars we can add
1:46:50a comment so this
1:46:53is a
1:46:55comment if we save our
1:46:57file nothing changes on our web page
1:47:01because comments are ignored by the
1:47:03computer the last feature of JavaScript
1:47:06we're going to learn is called
1:47:08console.log let's go back to our
1:47:11code and at the bottom in the script
1:47:15element we're going to type the code 2 +
1:47:202 so we learned that this code in Java
1:47:23script does some math however if we save
1:47:26this
1:47:28file where is the result of this math so
1:47:32we might think that the result will show
1:47:34up in the console but if we
1:47:37rightclick click
1:47:40inspect and then click the
1:47:42console you'll notice that the result
1:47:45doesn't show up here either and that's
1:47:48because before we were running 2 + 2
1:47:52inside the console so the result shows
1:47:56up in the console but now we're not
1:47:59running this code in the console anymore
1:48:01we're running this code on the web page
1:48:04so how do we see this
1:48:07result the solution is we're going to
1:48:09redirect this result back to the console
1:48:13to do that we're going to use this piece
1:48:16of
1:48:17code
1:48:20console.log Open Bracket close bracket
1:48:23and
1:48:25semicolon console.log will display
1:48:28whatever's between the brackets back in
1:48:31the console so if we move this code
1:48:34between the brackets so we select this
1:48:38and then right click cut and then
1:48:41between the brackets right click paste
1:48:45and
1:48:47save the result of this code is
1:48:49displayed back in the console
1:48:53and console.log works for any code that
1:48:56we learned so far for example we can use
1:49:00strings so let's create a new line and
1:49:04type
1:49:07console.log Open Bracket close bracket
1:49:10semicolon and then between the brackets
1:49:13let's type some
1:49:14strings quote Su quote plus quote text
1:49:22quote
1:49:23and save this
1:49:25file again it will display the result of
1:49:28whatever's between the brackets back in
1:49:31the
1:49:32console so that's how we see the result
1:49:35of JavaScript code that is running in a
1:49:37file we use
1:49:40console.log and that's the end of this
1:49:43lesson in this lesson we reviewed the
1:49:46basics of HTML and CSS we set up our
1:49:50code editor vs code we learned how to
1:49:54load JavaScript inside an HTML file
1:49:58using the script element and the onclick
1:50:01attribute we learned how to create
1:50:04comments and we learned how to use
1:50:10console.log thanks for watching this
1:50:12course so far if you want to support
1:50:14this channel you can check out the
1:50:16premium version of my courses just like
1:50:18this one where you can get a certificate
1:50:21of completion and a learning platform if
1:50:24you're interested in extra videos from
1:50:26me more in-depth videos and behind thes
1:50:29scenes content you can check out these
1:50:32links here you can also support the
1:50:34channel by liking the video subscribing
1:50:37and sharing this video with others
1:50:40thanks again and let's continue with the
1:50:44course here are some exercises you can
1:50:46try on your own to practice what we
1:50:49learned in this lesson
1:51:10in this lesson we're going to learn the
1:51:12next feature of JavaScript called
1:51:14variables and we're going to use
1:51:17variables to build a simple version of
1:51:19the cart quantity feature of the final
1:51:21project
1:51:23first let's create a new HTML file just
1:51:27for learning variables we're going to go
1:51:30to our code editor and click this icon
1:51:33to show our files and then click this
1:51:36icon to create a new
1:51:39file and we're going to name this file
1:51:4405-
1:51:46variables.
1:51:48HTML and press
1:51:50enter so the 05 just means that this
1:51:53file is for lesson
1:51:55five let's also add the lesson number to
1:51:58website.
1:52:00HTML we'll select this file and then
1:52:04rightclick
1:52:06rename and then at the front We'll add
1:52:1004- and press
1:52:13enter next we're going to copy all the
1:52:16code in website. HTML to variables.
1:52:21HTML so let's click in this file and
1:52:24we're going to select all of this code
1:52:26by typing control a on Windows or
1:52:30command a on
1:52:32Mac and then we're going to
1:52:35rightclick
1:52:36copy and then inside variables.
1:52:40HTML rightclick and
1:52:44paste let's click this icon to hide our
1:52:47files for now and we'll prepare this
1:52:50file for this lesson so let's scroll up
1:52:53to the top and first we're going to
1:52:56change the title to
1:53:00variables next we're going to delete all
1:53:03the CSS because we're going to start
1:53:05over and we're going to delete all the
1:53:08HTML except for the script
1:53:13element and let's delete all the
1:53:15JavaScript from the previous
1:53:18lesson and finally let's save
1:53:22and we'll open this file in our browser
1:53:25by right clicking and then open with
1:53:28live
1:53:30server and now we can close the previous
1:53:32tab and the previous code for
1:53:36now now we're ready to learn
1:53:39variables first of all what is a
1:53:43variable a variable is like a container
1:53:46we can save a value like a number or a
1:53:49string inside a variable and then then
1:53:52use it later Let's do an example and
1:53:56create our first
1:53:57variable inside the script element we're
1:54:00going to type the code let and space the
1:54:05word let creates a new variable and now
1:54:09we're going to choose a name for our new
1:54:11variable let's name this variable
1:54:16one so this creates a variable or a
1:54:19container named variable one and now we
1:54:22can save a value inside this variable to
1:54:27do that we're going to type space equals
1:54:31space and then a value like a number or
1:54:34a string so let's save the number three
1:54:38inside and we'll type a semicolon at the
1:54:41end so here we use the let to create a
1:54:45new variable we named this variable
1:54:49variable one and we saved the value
1:54:51three inside this
1:54:54variable now that we saved this value we
1:54:57can use it later for example let's type
1:55:01a new line and type the code
1:55:05console. log Open Bracket close bracket
1:55:09and
1:55:10semicolon remember from the previous
1:55:12lesson that this code displays
1:55:14whatever's inside the brackets in the
1:55:17console so far we put a value inside
1:55:21like the number
1:55:22two if we save and then go to our
1:55:26website and open the console so right
1:55:29click
1:55:31inspect and then click the
1:55:34console we can see that the number two
1:55:37was displayed in the
1:55:39console so now let's try replacing this
1:55:41value with the variable that we created
1:55:44above so instead of two we're going to
1:55:48console.log variable one
1:55:52if we
1:55:53save notice that it now displays three
1:55:58so it's displaying whatever value is
1:56:00saved inside the variable as you can see
1:56:04we can save a value inside a variable
1:56:07and then use that variable later
1:56:10on let's do another example we're going
1:56:13to create another variable so we're
1:56:16going to create some new lines and we'll
1:56:18type
1:56:20let and this time let's name this
1:56:23variable
1:56:25calculation and we're going to type
1:56:27space equals space to save a value
1:56:31inside this new variable and this time
1:56:34instead of just a number we're going to
1:56:36save a
1:56:37calculation 2 + 2 and semicolon so this
1:56:43will calculate 2 + 2 and then save the
1:56:46result which is four into the
1:56:50variable if we call
1:56:53console. log Open
1:56:56Bracket
1:56:59calculation and semicolon and
1:57:03save it will show us that the value for
1:57:06is saved inside
1:57:08calculation now let's try this code
1:57:11we're going to type a new line and then
1:57:16console. log Open Bracket and
1:57:19calculation again
1:57:22and plus 2 and
1:57:26semicolon so here we're using a variable
1:57:29inside a
1:57:31calculation what this does is that it
1:57:33takes whatever value is saved inside the
1:57:36variable right now it is four and then
1:57:39substitutes that value into the
1:57:41calculation so this will be 4 + 2 which
1:57:45equals
1:57:46six if we
1:57:48save we can see that in the console it
1:57:51display blade
1:57:53six so we can use a variable wherever we
1:57:57use a value and JavaScript will
1:57:59substitute whatever is inside the
1:58:02variable into the
1:58:04code let's do another example we're
1:58:07going to type some new lines and create
1:58:09a new variable again using
1:58:13let and we're going to name this
1:58:15variable
1:58:17result and we're going to make it equal
1:58:20to calcul
1:58:23ation plus 2 and
1:58:28semicolon so this does the same thing as
1:58:31a code before it will take whatever
1:58:33value is inside calculation which is
1:58:36four and substitute it into this code so
1:58:39we get 4 + 2 =
1:58:426 but this time we have an extra step
1:58:46we're going to save this result which is
1:58:48six into another
1:58:50variable so so if we
1:58:55console.log
1:58:58result and
1:59:00save we can see that six was saved into
1:59:04the result
1:59:06variable again we can use a variable
1:59:09wherever we use a value now in addition
1:59:13to numbers we can save any type of value
1:59:15in a variable including
1:59:18strings for example let's create a new
1:59:21variable using
1:59:23let and let's name this
1:59:27message and we're going to save inside
1:59:29this variable a string this time so
1:59:33quote hello quote and
1:59:37semicolon again we're going to
1:59:39console.log this variable so
1:59:44console.log and
1:59:47message and a semicolon at the end if we
1:59:50save
1:59:52it will show us that the string hello is
1:59:54saved inside this
1:59:57variable okay now that we learned how
2:00:00variables work let's learn the syntax
2:00:02rules for
2:00:04variables the word let creates a new
2:00:07variable and then we give the variable a
2:00:10name so we can name variables almost
2:00:13anything we want except for a few
2:00:15restrictions number one we can't use
2:00:18special words like let as a variable
2:00:21name
2:00:22that's because let already has a special
2:00:25meaning in JavaScript it creates a
2:00:27variable so let is a reserved word
2:00:31however we can use let one or let two as
2:00:34variable names we just can't use
2:00:37let number two we can't start a variable
2:00:41name with a number if we start with a
2:00:44number JavaScript will think this is a
2:00:46number instead of a variable name
2:00:49however we can use numbers in the middle
2:00:52or the
2:00:53end lastly we can't use most special
2:00:56characters like these or a space in a
2:01:00variable name however there are two
2:01:03special characters we can use dollar and
2:01:06underscore so those are the rules for
2:01:09naming
2:01:10variables and then to save something
2:01:13inside a variable we just use the equal
2:01:15sign and then the value we want to save
2:01:19and that's it after we create a variable
2:01:22we can start using it in the rest of our
2:01:24code now there's one last part of the
2:01:27syntax that we haven't learned which is
2:01:29the semicolon we've seen semicolons in
2:01:32many places already in JavaScript a
2:01:36semicolon means this is the end of an
2:01:39instruction it's similar to a period in
2:01:42English in English a period means this
2:01:45is the end of a
2:01:47sentence so here this semicolon tells
2:01:51Java script that this is the end of an
2:01:54instruction and now after this we can
2:01:57add another instruction like
2:02:01console. log Open Bracket and then the
2:02:05string semicolon and a semicolon at the
2:02:09end if we
2:02:11save it will run these two instructions
2:02:14one after another without any
2:02:17problems so if we didn't have the
2:02:19semicolon here and and we save it
2:02:23wouldn't work because JavaScript thinks
2:02:26that this entire line is one
2:02:29instruction so we need semicolons to
2:02:32separate different instructions in
2:02:35JavaScript if we
2:02:37save everything goes back to
2:02:39normal so JavaScript is a little special
2:02:43because it has a feature called
2:02:45semicolon
2:02:46insertion that means it will try to
2:02:48insert the last semicolon in a line of
2:02:51code automat automatically for example
2:02:54if we removed the last
2:02:56semicolon and
2:02:59save this code will work without that
2:03:01semicolon and that's because JavaScript
2:03:04inserts the last semicolon
2:03:07automatically however a lot of companies
2:03:10still prefer to use semicolons in their
2:03:12JavaScript code because semicolon
2:03:14insertion can sometimes put the
2:03:16semicolon in the wrong place for this
2:03:19reason we're also going to use sem
2:03:21colons in this course to help you get
2:03:24used to JavaScript code with
2:03:27semicolons next we're going to learn how
2:03:29to change the value that is saved inside
2:03:32a variable for example here we save the
2:03:36number three inside variable one now
2:03:39we're going to change the value saved
2:03:41inside variable one to do that we're
2:03:44going to go to the bottom and create
2:03:47some new
2:03:48lines and we're going to type the
2:03:50variable name again so
2:03:53variable one and now to change the value
2:03:56saved inside we're just going to type
2:03:59the equal sign and then a different
2:04:02value like five and
2:04:06semicolon and now if we console.log this
2:04:09variable
2:04:13console.log variable 1 and semicolon and
2:04:18save it will show us that five is now
2:04:21now saved inside variable
2:04:23one notice also that if we scroll up to
2:04:27the top the first console.log still
2:04:30displays the value three and that's
2:04:33because at this point in the code
2:04:35variable one still contained three we
2:04:38didn't update the variable yet so when
2:04:41we first saved a value inside this
2:04:43variable this is called assigning a
2:04:46value to a
2:04:48variable then when we change the value
2:04:50inside this varable iable this is called
2:04:53reassigning a value to a
2:04:56variable now let's learn the syntax
2:04:58rules for reassigning a value notice
2:05:02that we don't use the word let when
2:05:04reassigning that's because let creates a
2:05:07new
2:05:08variable so if we try to use let again
2:05:12it would try to create a new variable
2:05:14named variable one however variable one
2:05:18already exists and we can't create two
2:05:21VAR variables with the same name so this
2:05:24would cause an error instead to reassign
2:05:28a variable we just type out the variable
2:05:31name and make it equal to something else
2:05:35so that's the Syntax for reassigning a
2:05:39variable now we're going to do one last
2:05:41example before working on the project
2:05:44let's go to the end of our code we're
2:05:47going to type some new
2:05:49lines and this time we're going to re
2:05:51reassign variable one again so we can
2:05:54reassign a variable as many times as we
2:05:57want so let's type variable 1 and then
2:06:03equals and we're going to type variable
2:06:071 + 1 and
2:06:11semicolon so we learned earlier that we
2:06:14can use a variable inside a calculation
2:06:17and it will substitute whatever value is
2:06:20inside the variable
2:06:22here we're also using a variable inside
2:06:24the calculation but we're using this
2:06:27variable
2:06:28itself so it's essentially taking this
2:06:31variable increasing it by one and then
2:06:34saving it
2:06:36back if we
2:06:39console.log this variable variable
2:06:43one and
2:06:46save variable one now contains six so it
2:06:50took the previous value in variable one
2:06:53which was five added one and then saved
2:06:56it
2:06:57back so this is how we increase the
2:07:00value of a variable by a certain
2:07:04number okay now that we know how to
2:07:06create and reassign variables we're
2:07:09ready to work on a project so I actually
2:07:12prepared a project that we can do for
2:07:14this lesson and we can see this project
2:07:17by going to our browser clicking at the
2:07:20top and and typing
2:07:23super simple
2:07:26dodev SL projects SLV
2:07:31variables and press
2:07:34enter so we're going to work on the cart
2:07:37quantity feature of the final project so
2:07:39in the final project we have a number in
2:07:42the top right corner that shows how many
2:07:44products are in our cart when we click
2:07:47the add to cart button this quantity
2:07:49will increase
2:07:52so what you see here is a simple version
2:07:54of the cart quantity feature that we can
2:07:57create right now let's go over how it
2:08:00works first make sure you have the
2:08:02console open on this page now when we
2:08:06click the show quantity button it will
2:08:09show us that there are zero products in
2:08:11our cart if we click the add to cart
2:08:15button it will increase the quantity by
2:08:17one and display it in the console
2:08:22if we click add to cart again it will
2:08:24increase the quantity by one again now
2:08:28in the final project we can also add
2:08:30more than one product at a time using
2:08:33this
2:08:35drop-down for now we're going to build a
2:08:37simpler version of that we're going to
2:08:40use the plus two and plus three buttons
2:08:42to add multiple products so when we
2:08:45click the plus two button it will
2:08:48increase the quantity by two and display
2:08:50it in the console
2:08:52and when we click the plus three button
2:08:54it will increase the quantity by
2:08:57three and finally when we click the
2:09:00reset cart button it will reset the
2:09:03quantity back to zero and display this
2:09:06message in the
2:09:08console so now that we understand how
2:09:11this project Works let's build this step
2:09:13by step first let's create a new HTML
2:09:18file just for this project we're going
2:09:21to go to our code editor and click this
2:09:24icon to show our files and then click
2:09:27this icon to create a new
2:09:31file let's name this file 05
2:09:35dcart D
2:09:38quantity.
2:09:40HTML and press
2:09:42enter next let's open variables. HTML
2:09:47and we're going to copy all the code
2:09:49here into our new
2:09:52file let's type control a on Windows or
2:09:56command a on Mac to select all this code
2:10:00and then
2:10:01rightclick
2:10:03copy and then in our new
2:10:05file right click and
2:10:10paste let's close this for
2:10:13now and in the new file we're going to
2:10:16change the title to cart quantity
2:10:22and let's remove all of our JavaScript
2:10:24code but keep the script element because
2:10:26we're going to write new JavaScript
2:10:30code now we're ready to begin let's
2:10:33start by creating these
2:10:35buttons let's go to the body element
2:10:39going to create a new
2:10:40line and here as we learned in the
2:10:44previous lesson we can create a button
2:10:47using this HTML code less than button
2:10:52greater than and the closing tag less
2:10:54than SLB button greater
2:10:57than inside this button we're going to
2:10:59have the text show
2:11:03quantity and let's
2:11:05save now let's open this file in live
2:11:08server by right clicking and then open
2:11:11with live
2:11:14server and we can see that we created
2:11:16the first button now let's create the
2:11:19other buttons here feel free to pause
2:11:22the video if you want to try it
2:11:25yourself we're going to go back to our
2:11:27HTML and create another
2:11:31button inside this one we're going to
2:11:33have the text add to
2:11:38cart let's create another
2:11:41button this one is going to have the
2:11:43text plus
2:11:45two and we'll create another
2:11:49button this one is going to be + 3 and
2:11:53finally we'll create the last
2:11:57button and this one is
2:12:00reset
2:12:02cart and now let's
2:12:04save and if we go back to our
2:12:07tab we've created all the
2:12:10buttons now let's make this web page
2:12:13interactive with
2:12:15JavaScript first of all we need
2:12:17somewhere to save the cart quantity so
2:12:20as we learned in this lesson variables
2:12:22are the perfect solution for this
2:12:25variables let us save a value so let's
2:12:28go into the script element and we're
2:12:31going to create a variable by typing
2:12:34let and this variable is going to save
2:12:37the cart quantity so let's just name it
2:12:41cart capital Q
2:12:45quantity so the card quantity will start
2:12:47out at zero so we're going to type equal
2:12:52Z and
2:12:54semicolon next when we click the show
2:12:57quantity button we want to display the
2:12:59quantity in the console to do this we
2:13:03learned a special HTML attribute in the
2:13:05previous lesson called the onclick
2:13:08attribute so we're going to type in this
2:13:11opening tag here space
2:13:15onclick equals and double quotes So the
2:13:19onclick attribute run some JavaScript
2:13:22when we click this
2:13:24button and between the double quotes we
2:13:27can write JavaScript code so let's press
2:13:30enter
2:13:31enter And now when we click this button
2:13:34we want to display the card quantity in
2:13:37the console so let's type
2:13:43console.log Open Bracket close bracket
2:13:46semicolon and then between the brackets
2:13:49we're going to display a message
2:13:52now if we go back to Super
2:13:55simple. and we click show
2:13:57quantity we want to display this message
2:14:00in the
2:14:01console so in our code between the
2:14:04brackets we're going to type the string
2:14:07quote cart
2:14:10quantity colon
2:14:130 now let's save and go back to our tab
2:14:18to try it
2:14:19out so we're going to open the console
2:14:21first by right clicking and then click
2:14:25inspect and then click the
2:14:28console and now when we press the show
2:14:30quantity button it should display that
2:14:33message in the
2:14:36console okay so we just made our project
2:14:39interactive however we obviously don't
2:14:42want to display zero every time we want
2:14:44to display the value inside cart
2:14:47quantity so we need to insert this value
2:14:50in inside this
2:14:52string remember from the strings lesson
2:14:55when we want to insert a value into a
2:14:57string we're going to use a template
2:14:59string so let's switch the single quotes
2:15:03to back
2:15:05ticks to create a template
2:15:08string and now instead of zero we're
2:15:11going to insert a value using Dollar
2:15:15open curly bracket and close curly
2:15:18bracket and in between these brackets
2:15:21we're going to insert this
2:15:23variable
2:15:25cart capital Q
2:15:29quantity remember that JavaScript is
2:15:31case sensitive so make sure you type the
2:15:34variable name exactly the
2:15:37same now let's
2:15:40save and click show quantity
2:15:43again and now it displays the value
2:15:46inside card quantity in the console so
2:15:49notice that variables also work with
2:15:52string
2:15:53interpolation again we can use a
2:15:55variable wherever we use a value and it
2:15:58will just substitute whatever value is
2:16:01saved inside this variable into the
2:16:04code now let's make the rest of the
2:16:07buttons
2:16:08interactive so when we click the add to
2:16:10cart button we're going to add one to
2:16:13this cart quantity and display it in the
2:16:16console so again we're going to type
2:16:19here and type space
2:16:21on click equals double quotes and
2:16:26between the double quotes we're going to
2:16:28add
2:16:29JavaScript let's also add some new lines
2:16:32here to make our code easier to
2:16:35read okay so in the onclick attribute
2:16:39we're going to do two things the first
2:16:42one is increase the card quantity by
2:16:45one we can do that by reassigning the
2:16:48card quantity variable
2:16:51so we're going to type just the variable
2:16:52name cart
2:16:55quantity and we're going to make it
2:16:57equal to
2:17:01itself plus one and
2:17:06semicolon next we're going to display
2:17:08the updated quantity in the console so
2:17:11let's press
2:17:13enter and we're going to display this
2:17:15message again so we can actually just
2:17:18copy this code so we'll select it and
2:17:20then right click and
2:17:23copy and then
2:17:25here right click and
2:17:29paste now if we
2:17:32save and click the add to card
2:17:36button we'll see that it increased the
2:17:38quantity by one and displayed the
2:17:40updated quantity in the console let's
2:17:43press it again to make sure it
2:17:45works so it increases it by one again
2:17:48and then displays it in the console
2:17:51so that's basically how the cart
2:17:52quantity feature works in the final
2:17:55project first we need a variable to save
2:17:57the quantity and then when we click a
2:18:00button we're going to update the
2:18:03quantity so now let's make the rest of
2:18:06these buttons interactive feel free to
2:18:09pause the video if you want to try it
2:18:12yourself for the plus two button we're
2:18:14going to add the onclick attribute again
2:18:18onclick equals double quote
2:18:22and inside we're going to increase the
2:18:24cart quantity by two so cart quantity
2:18:30and then we'll just make it equal to
2:18:34itself plus two and
2:18:39semicolon and again we're going to
2:18:41display the updated quantity in the
2:18:43console so we can create a new line and
2:18:45just copy this code so select it right
2:18:49click
2:18:51copy and here right click and
2:18:56paste let's save and click plus two a
2:19:00few times and we can see that it adds
2:19:03two to the card quantity and displays it
2:19:06in the
2:19:07console for the plus three button we'll
2:19:10do the
2:19:11same let's type an onclick
2:19:14attribute click equals double
2:19:17quotes and here we're going to increase
2:19:19the card quantity by three three so cart
2:19:23quantity equals
2:19:26itself plus 3 and
2:19:30semicolon and we're going to display
2:19:32this in the console again so we'll
2:19:34select this right click copy and here
2:19:39rightclick and paste let's save again
2:19:44and try it out to make sure it works so+
2:19:47three +
2:19:49three and finally let's do the reset
2:19:52card
2:19:53button so we'll add the onclick
2:19:56attribute again on click equals double
2:20:00quotes and inside the double quotes
2:20:03we're going to do something a little
2:20:04different this time instead of
2:20:07increasing the cart quantity we'll set
2:20:09it back to
2:20:10zero to do this we can just reassign the
2:20:14cart quantity variable so cart
2:20:18quantity and just make it equal to Z and
2:20:23semicolon now if we go back to
2:20:25superimple
2:20:27dodev and try out this reset cart
2:20:30button you'll notice that it displays
2:20:32two messages the first message is cart
2:20:35was reset so we're going to display that
2:20:37message in our code
2:20:39first
2:20:43console.log and the string cart was
2:20:48reset
2:20:52and the second message is the same
2:20:54message as the other buttons so we can
2:20:57just select
2:20:58this and then right click
2:21:02copy and then here right click and
2:21:09paste and now let's save and go back to
2:21:12our Tab and give this a
2:21:15try so the cart quantity starts at zero
2:21:18when we press add to cart increase in es
2:21:20by one this increases by two this
2:21:24increases by three and when we click
2:21:27reset cart it'll display cart was reset
2:21:31and reset the cart quantity back to
2:21:34zero and that's it we just created a
2:21:37simple version of the cart quantity
2:21:38feature of our final project using
2:21:41everything that we learned in this
2:21:42course so
2:21:44far now we're going to learn some
2:21:46shortcuts for reassigning
2:21:48variables so if we look at this line of
2:21:52code here we're increasing the value of
2:21:56this variable by two and then saving it
2:21:59back well there's actually a shortcut
2:22:02for this and that shortcut is cart
2:22:07quantity plus equal 2 and
2:22:11semicolon so this does the same thing as
2:22:14the line above but it's just shorter the
2:22:17plus means we're going to add two to
2:22:19cart quantity
2:22:22and equals means we're going to save
2:22:23that result back to card quantity so we
2:22:27can actually delete this
2:22:29line and the code will work the same way
2:22:32if we
2:22:34save and try it
2:22:36out it will still add a two and then
2:22:39save it back in card
2:22:42quantity let's scroll up and practice by
2:22:46using this shortcut for card quantity +
2:22:48one so instead of this line we can type
2:22:52cart
2:22:54quantity plus equal 1 and
2:22:59semicolon so it turns out that in
2:23:01programming plus equals 1 is so common
2:23:04that we have an even shorter shortcut
2:23:06for plus equals 1 and that shortcut is
2:23:11cart
2:23:12quantity plus plus and
2:23:16semicolon so this is the same thing as
2:23:19plus equal 1
2:23:21and all three lines do the same
2:23:23thing so we can remove these
2:23:27lines and the code will work the same
2:23:30because it's just a
2:23:32shortcut if we
2:23:33save so if we click add to
2:23:37cart it will add one every
2:23:40time so those are some shortcuts for
2:23:43reassigning
2:23:44variables we also have these shortcuts
2:23:46for the other operators like minus
2:23:49equals multiply equals divide equals and
2:23:53minus minus I'll leave some exercises
2:23:56for these other shortcuts at the end of
2:23:58this
2:24:00lesson next we're going to learn some
2:24:02best practices for naming variables so
2:24:05if we scroll
2:24:08down notice that our variable cart
2:24:11quantity has two words in it cart and
2:24:15quantity we learned earlier that we
2:24:17can't have spaces in a variable name so
2:24:20if we want to have multiple words we
2:24:22have to combine them together like this
2:24:25now you might be wondering why we wrote
2:24:27it this way with a lowercase c and a
2:24:30capital
2:24:31Q This is actually a naming convention
2:24:34called cam case in cam case we combine
2:24:38the words together and capitalize every
2:24:41word except the first
2:24:43word so for cart quantity we capitalize
2:24:46quantity but we keep cart lowercase
2:24:49because it's the first
2:24:51word cam case is actually the standard
2:24:54naming convention for JavaScript all of
2:24:57our variable names should use cam
2:25:00case now in programming there are other
2:25:02naming conventions that exist another
2:25:05one is called Pascal case Pascal case is
2:25:09the same as camel case except we
2:25:11capitalize the first word so for cart
2:25:14quantity Pascal case would be Capital
2:25:17cart and capital quantity in JavaScript
2:25:21there is one feature where we use Pascal
2:25:24case which we'll learn later in this
2:25:26course for everything else we use camel
2:25:29case another naming convention is Kebab
2:25:32case here we keep the words lowercase
2:25:36and combine them with a dash like cart
2:25:39Dash
2:25:40quantity Kebab case doesn't work in
2:25:42JavaScript because the dash is already a
2:25:45minus symbol however we use Kebab case
2:25:49in HTML and CSS and also in our file
2:25:52names as you can see
2:25:55here and finally we have snake case
2:25:59where we keep the words lowercase and
2:26:01combine them with underscores snake case
2:26:04is used in other languages but it's not
2:26:06really used in
2:26:08JavaScript so those are the common
2:26:10naming conventions that we use in
2:26:14programming now one more thing I want to
2:26:16note is that when we name our variables
2:26:19try to pick a name that is not too short
2:26:21or too long for example instead of cart
2:26:24quantity we could have named this
2:26:26variable
2:26:28C but this name is too short it's hard
2:26:31to understand what c means we could also
2:26:35use a name like this quantity of
2:26:40products in the cart but this name is
2:26:44too long it's hard to read this in the
2:26:47code so try to have a balance between a
2:26:49name that is understandable but not too
2:26:52long like cart
2:26:54quantity the last thing we're going to
2:26:56learn in this lesson is there are three
2:26:58ways to create variables in JavaScript
2:27:02let's go back to our variables. HTML
2:27:05file and we're going to learn those
2:27:07three
2:27:09ways so the first way is to use let
2:27:12which we already learned the second way
2:27:14to create a variable is to use the word
2:27:17const so at the bottom we can type const
2:27:22space and then a variable name like
2:27:25variable 2 and make it equal to
2:27:30three so const creates a variable just
2:27:33like let except we can't change its
2:27:36value later this value stays constant
2:27:40that's why it's called const if we try
2:27:43to change its value like variable 2 = 5
2:27:49and then and we save this and we open
2:27:52this file in the browser by right
2:27:55clicking and then open with live
2:27:59server and then open the console so
2:28:03rightclick
2:28:05inspect and then click the
2:28:10console it will give us an error when we
2:28:12try to change this variable so this
2:28:15doesn't work let's remove this line and
2:28:19Save
2:28:21so why would we ever use const instead
2:28:23of let well const makes our code safer
2:28:26and easier to understand when we create
2:28:29a variable with const we know for sure
2:28:32that this variable will always contain
2:28:35three for let however if we create a
2:28:38variable it's hard to know what value is
2:28:41inside this variable because later on we
2:28:44can change this value in our
2:28:47code so in order to keep our code safer
2:28:50it's actually a best practice to use
2:28:52const by default and only use let when
2:28:55we know that we need to change the
2:28:57variable so here it's actually best
2:29:00practice to use const to create this
2:29:03calculation variable because we're not
2:29:05changing it later same thing for the
2:29:08result
2:29:10variable and the message
2:29:13variable now for variable one we have to
2:29:16use let because we're changing it later
2:29:19in this code
2:29:21so that's const it creates a variable
2:29:23that can't be changed
2:29:25later finally the Third Way of creating
2:29:28a variable is to use another word VAR so
2:29:32at the bottom we can type VAR space and
2:29:37then a variable name like variable 3 and
2:29:42make it equal to
2:29:44three so VAR creates a variable just
2:29:47like let and this variable can be
2:29:49changed
2:29:50later VAR is actually the original way
2:29:53to create variables in JavaScript VAR
2:29:57means
2:29:58variable however VAR has some issues
2:30:01that we'll learn later in this course
2:30:04and because of these issues we don't use
2:30:06VAR in new JavaScript code you might see
2:30:09VAR in older JavaScript code so it's
2:30:12still useful to know so those are three
2:30:15ways to create variables in JavaScript
2:30:18let constant and VAR we use const by
2:30:23default and if we have to change a
2:30:25variable then use
2:30:28let so one more thing we're going to
2:30:30learn is that we can use type of with
2:30:34variables so remember that type of tells
2:30:37us what type a value is for example if
2:30:42we
2:30:43wrote
2:30:45console.
2:30:47log type of
2:30:51three and
2:30:53save type of will tell us that three is
2:30:57a
2:30:58number well we can actually use type of
2:31:01with a
2:31:02variable so if we change this to
2:31:06variable 2 and
2:31:10save type of will tell us the type of
2:31:13value inside the variable which is a
2:31:17number and that's what we see in the
2:31:19console
2:31:21now let's check the type of this
2:31:24variable message so message contains a
2:31:28string and if we do
2:31:33console.log type of
2:31:38message and
2:31:41save this will tell us that the value
2:31:44inside the message variable is a string
2:31:48so we can use type of to check the type
2:31:50of value that is saved inside a variable
2:31:54and that's the end of this lesson in
2:31:57this lesson we learned about variables
2:31:59which are a way to save values and use
2:32:02them later we learned how to reassign a
2:32:05variable we created the cart quantity
2:32:08feature of the final project we learned
2:32:11some shortcuts for reassigning a
2:32:13variable we learned some naming
2:32:15conventions and best practices for
2:32:17variable names and we learned learned
2:32:20three ways to create a variable let
2:32:24const and
2:32:25VAR here are some exercises to help you
2:32:28practice using variables
2:32:58in this lesson we're going to learn two
2:33:00more features of JavaScript called
2:33:03booleans and if statements and we're
2:33:06going to use these features to build
2:33:08this rock paper scissors
2:33:11project let's start by creating a new
2:33:14HTML file for this lesson we're going to
2:33:17go to our code editor and click this
2:33:20icon to show our files and then click
2:33:23this icon to create a new file we're
2:33:26going to name this file
2:33:3006-
2:33:32booleans
2:33:34HTML and press
2:33:36enter let's open variables.
2:33:40HTML and we're going to copy all this
2:33:43code into our new file let's select the
2:33:46code using control a on Windows or
2:33:49command a on Mac and then
2:33:52rightclick
2:33:54copy and in
2:33:56here rightclick and
2:34:00paste let's close this for now and
2:34:04prepare this file for this lesson so
2:34:06we'll scroll to the top and change this
2:34:09to
2:34:11booleans and then remove all the
2:34:14JavaScript code but keep the script
2:34:16element
2:34:20now let's
2:34:22save and open this file in live server
2:34:25by right clicking and then open with
2:34:27live
2:34:29server and we can close the previous
2:34:34tabs as well as the previous code for
2:34:39now we'll start by learning what are
2:34:42booleans so far in this course we learn
2:34:44two types of values in JavaScript
2:34:47numbers and strings booleans are another
2:34:50type of value in JavaScript but booleans
2:34:53are special because there are only two
2:34:56Boolean values true and
2:34:59false let's click in the script element
2:35:02and type true press enter and type
2:35:08false so these are the only two Boolean
2:35:11values that exist true and false so
2:35:15what's the purpose of Boolean values a
2:35:18Boolean value represents whether
2:35:20something is true or
2:35:23false for example in JavaScript we can
2:35:26compare two numbers let's create some
2:35:29new lines and type the code 3 less than
2:35:355 so this code checks whether the number
2:35:38three is less than five and of course
2:35:41this is true so if we console.log this
2:35:45code console.log
2:35:50and
2:35:51save and then go to our website and open
2:35:55the console rightclick
2:35:58inspect and
2:36:00console it will show us that the result
2:36:02of this code is the Boolean value
2:36:06true let's try another
2:36:08example let's delete this less than
2:36:11symbol and replace it with a greater
2:36:14than symbol so now this code checks
2:36:17whether three is greater than five
2:36:20and we know that three is not greater
2:36:21than five so if we
2:36:24save the computer will tell us that the
2:36:26result of this comparison is the Boolean
2:36:29value false so as you can see a Boolean
2:36:32value represents whether something is
2:36:35true or
2:36:37false now let's learn the syntax rules
2:36:39for booleans to create a Boolean we just
2:36:43type true or false note that we don't
2:36:46surround these with quotes like this if
2:36:49we surround them with quotes this is now
2:36:51a string not a
2:36:53Boolean we can use type of to check this
2:36:57so at the front we can type
2:37:02console.log type of
2:37:06true if we
2:37:09save this will tell us that this is a
2:37:12string now if we remove the
2:37:16quotes and Save
2:37:20this will tell us that this is now a
2:37:24Boolean so when creating a Boolean don't
2:37:27put quotes around true or
2:37:30false let's
2:37:32save now one way to create a Boolean is
2:37:36to compare two numbers for example 3
2:37:39greater than 5 so this greater than
2:37:43symbol is called a comparison operator
2:37:46and there are many other comparison
2:37:48operators we can use
2:37:50we saw less than earlier and we also
2:37:53have greater than or equal to less than
2:37:56or equal to Triple equals which checks
2:37:59if two values are equal to each other
2:38:02and exclamation double equals which
2:38:04checks if two values are not equal to
2:38:07each other now JavaScript is a little
2:38:10special because it has two ways to check
2:38:12if two values are equal triple equals
2:38:16and double equals the difference is that
2:38:19double equals tries to convert both
2:38:21values into the same type for example in
2:38:25our code let's create some new lines and
2:38:30console.
2:38:32log and let's check if the number five
2:38:36is equal to the string
2:38:415. if we
2:38:43save it will tell us that these two
2:38:45values are equal to each other even
2:38:48though one of of them is a number and
2:38:50the other is a string and that's because
2:38:53the double equals converts both values
2:38:56into the same type so converts both of
2:38:59these into the number five and then
2:39:02Compares them so that's why they are
2:39:05equal however this is not a good idea
2:39:08because this value is a number and this
2:39:10value is a string it's a piece of text
2:39:14so they shouldn't really be equal to
2:39:16each other that's why in JavaScript we
2:39:19always use the triple equals to check if
2:39:22two values are the same so that we avoid
2:39:24the conversion behavior of double equals
2:39:28so if we
2:39:29save now it will tell us that these two
2:39:32values are not equal to each other
2:39:35because one value is a number and the
2:39:37other value is a
2:39:39string so this rule also applies to not
2:39:42equal to in JavaScript we always use
2:39:45exclamation double equals instead of
2:39:48exclamation equals to avoid the
2:39:51conversion
2:39:52Behavior All right so those are
2:39:55comparison operators in the order of
2:39:58operations comparison operators have a
2:40:01lower priority than math so if we did
2:40:04something like 5 and then minus
2:40:085 this would calculate 5 - 5 first which
2:40:12is zero and then compare the two numbers
2:40:16so three is now greater than zero so if
2:40:19we
2:40:19save the first comparison will now be
2:40:23true so comparison operators have a
2:40:26lower priority than math
2:40:29operators now that we know what Boolean
2:40:31values are we're going to combine them
2:40:34with a really useful feature called if
2:40:36statements an if statement lets us write
2:40:39multiple groups of code and then decide
2:40:42which code to run Let's do an example
2:40:45and create our first if statement we're
2:40:48going to go to the the
2:40:50bottom and create some new
2:40:53lines and type if and Open Bracket Clos
2:40:58bracket and open curly bracket closed
2:41:01curly
2:41:03bracket between these round brackets
2:41:06we're going to put a Boolean value like
2:41:09true and in between the curly brackets
2:41:12we're going to put some code to run for
2:41:15example console.log
2:41:21hello so the way that an if statement
2:41:23works is that if this Boolean value is
2:41:27true then we're going to run the code in
2:41:29the curly brackets if this Boolean value
2:41:32is false then we're not going to run the
2:41:35code if we
2:41:37save the value between the brackets is
2:41:40true so we're going to run this code and
2:41:43display
2:41:44hello now if we change this to false and
2:41:51save it will not run this
2:41:54code so an if statement lets us decide
2:41:57whether or not to run some code based on
2:42:00this Boolean
2:42:01value now if statements have another
2:42:04useful feature called
2:42:06else let's go to the end of this if
2:42:09statement and
2:42:10type
2:42:12else open curly bracket close curly
2:42:15bracket and then inside these curly
2:42:18brackets we're going to put some
2:42:20different code like
2:42:24console.log
2:42:27else the way else works is if this
2:42:31Boolean value is true the computer will
2:42:33run this code otherwise we will run the
2:42:37code inside
2:42:38else let's give it a try we'll change
2:42:42this Boolean value to true and
2:42:45save and because it is true it will run
2:42:48this code
2:42:49and display
2:42:51hello now if this Boolean value is false
2:42:56and
2:42:57save because it is false it will not run
2:43:00this code and it will run the code
2:43:02inside else and display
2:43:05else so using IF and else we can write
2:43:09two groups of code and then decide which
2:43:11code to
2:43:13run now let's do a practical example
2:43:16we're going to write some code to check
2:43:18if someone is old enough to
2:43:20drive let's go to the bottom and create
2:43:23some new
2:43:24lines and we're going to type if
2:43:28brackets and curly
2:43:30brackets and inside here we're going to
2:43:33compare two numbers the first number is
2:43:36a person's age let's pretend we have a
2:43:40person who is 30 years old so we're
2:43:42going to type
2:43:4430 then we're going to check if this age
2:43:48is greater than or equal to the legal
2:43:51driving age Let's Pretend the legal
2:43:54driving age is
2:43:5716 notice that between the brackets we
2:43:59don't have to just put a Boolean value
2:44:03we can put any code that results in a
2:44:05Boolean
2:44:06value so this comparison results in the
2:44:09Boolean value true that means the
2:44:12computer will run the code between the
2:44:14curly brackets so in here let's type
2:44:18console
2:44:19.
2:44:22log you can
2:44:27drive now if this is not true let's run
2:44:30some different code at the bottom we'll
2:44:33type
2:44:34else and curly brackets and then inside
2:44:38these brackets we'll type
2:44:43console.log you canot drive
2:44:49now let's
2:44:50save and it will tell me that this
2:44:53person who is 30 years old can
2:44:56drive if we go back and change this to a
2:44:59person that is 15 years old and
2:45:04save this comparison will result in
2:45:06false so it will display you cannot
2:45:10drive so that's how we use if statements
2:45:13we can write multiple groups of code for
2:45:16different situations and then decide
2:45:18which Cod code to
2:45:21run now let's learn the syntax rules for
2:45:24if statements to create an if statement
2:45:27we type if and then round brackets with
2:45:30a Boolean value inside this is called
2:45:33the condition if this condition is true
2:45:37we will run the code inside the curly
2:45:40brackets we can also add an else
2:45:43statement this code will run if the
2:45:45condition is false the else statement is
2:45:49optional we don't have to have
2:45:51one so these curly brackets and the code
2:45:54inside these are called branches because
2:45:57it's like a tree branch the code is
2:45:59splitting off into two directions and we
2:46:02either run this code or we run this
2:46:06code one more thing to know is in a
2:46:09branch if we only have one line of code
2:46:12the curly brackets are actually optional
2:46:15so we can delete these and the code will
2:46:17still work
2:46:19however if we have more than one line of
2:46:21code in this Branch for example if we
2:46:24add another line
2:46:28console.log
2:46:31congrats now this branch has two lines
2:46:34of code so the curly brackets are
2:46:36mandatory so we have to add them
2:46:42back now we're going to learn another
2:46:44feature of if statements which is we can
2:46:46have more than one condition for example
2:46:50we're going to go to the end of this if
2:46:52branch and type else if and then
2:46:58brackets and curly
2:47:00brackets else if lets us add another
2:47:03Branch to our if
2:47:05statement between these round brackets
2:47:08we can add another condition for example
2:47:11if a person is almost old enough to
2:47:13drive let's display a different message
2:47:17so inside this condition
2:47:19let's check if this person's age which
2:47:21is 15 is greater than or equal to 14 so
2:47:27we're checking if they are almost old
2:47:29enough to drive and now inside the curly
2:47:32brackets we're going to display a
2:47:34different
2:47:35message
2:47:40console.log almost
2:47:44there so the way this works is that the
2:47:47if statement checks the condition one by
2:47:50one first it checks if this is true if
2:47:53it is it will run this Branch then it
2:47:56checks if this is true if it is it will
2:47:58run this branch and if none of the
2:48:01conditions are true it will run the else
2:48:04Branch so here this condition is false
2:48:08so we're not going to run this code but
2:48:10now the second condition is true so
2:48:13we're going to run this code if we
2:48:16save we display almost there
2:48:19in the
2:48:20console so using else if branches we can
2:48:24add as many conditions as we want to an
2:48:26if
2:48:27statement the next thing we're going to
2:48:29learn is that we can combine if
2:48:31statements with variables from the
2:48:33previous
2:48:34lesson for example here we wrote the
2:48:38person's age two times so we can
2:48:40actually save this age in a variable and
2:48:43then reuse that
2:48:45value so above the if statement
2:48:49let's create a variable using const and
2:48:54let's name this variable H and we'll
2:48:57make it equal to
2:49:0015 remember the best practice for
2:49:02creating a variable is to use const by
2:49:05default and only use let if we're going
2:49:08to change this value
2:49:10later and now that we saved this number
2:49:13in a variable we can use the variable
2:49:15inside the if statement so we'll replace
2:49:1915 with age and here as well with
2:49:25age so this will take whatever value is
2:49:28inside the variable and substitute it
2:49:31into the
2:49:32code if we
2:49:34save the if statement works the same way
2:49:37as before and we run this
2:49:40line okay now we're ready to use
2:49:43booleans and if statements to do a
2:49:45project we're going to build a rock
2:49:47paper scissors gate G first let's take a
2:49:51look at the project we're going to go to
2:49:53our browser and at the top create a new
2:49:57tab and we're going to type here
2:50:02superimple dodev SL
2:50:06projects SL
2:50:08booleans and press
2:50:11enter here we can see a simple version
2:50:14of a rock paper scissors game and if we
2:50:16click this link it will take us to the
2:50:19final version of this game so in this
2:50:22game we can pick a
2:50:24move and then the computer will pick a
2:50:27random move and it will show us the
2:50:30result and we also have a score of how
2:50:33many times we won lost and tied so we're
2:50:37going to build this as we go through the
2:50:39course but for now let's go
2:50:42back and we're going to start by
2:50:44building this simple version of the game
2:50:47so how this simple version works is we
2:50:49click one of these buttons to pick a
2:50:51move so let's pick
2:50:53Rock then the computer will randomly
2:50:56pick a move in this case it's paper but
2:50:59for you it might be different and it
2:51:01will compare the two moves and display
2:51:03the results in this
2:51:05popup so the rules of rock paper
2:51:07scissors are rock beats scissors paper
2:51:11beats Rock and scissors beats
2:51:15paper let's press okay and we'll get
2:51:18started on this
2:51:19project first we'll create a new HTML
2:51:22file just for this project let's go to
2:51:25our code editor and click here and
2:51:28create a new file and we're going to
2:51:30name this file
2:51:3306-
2:51:39rock-paper-scissors HTML and press
2:51:43enter next let's copy all the code from
2:51:46booleans HTML into this new file so
2:51:50we'll open this again and then control a
2:51:53or command a to select all the code and
2:51:56then right click
2:51:58copy and in here right click and
2:52:03paste let's close this and prepare this
2:52:07file so we'll change this to rock
2:52:12paper
2:52:14scissors and remove all of the
2:52:17JavaScript code that we had
2:52:22before finally let's save and open this
2:52:26file in the browser by right clicking
2:52:29and then open with live
2:52:32server let's take a look at the project
2:52:35again so we're going to start by
2:52:38creating the text first because this
2:52:40text is in the final version of the
2:52:44project so in our
2:52:46HTML we're going to create a paragraph
2:52:49element for this text so less than P
2:52:53greater than and the closing tag less
2:52:56than /p greater than inside our
2:52:59paragraph we're going to have the text
2:53:02rock paper
2:53:05scissors next let's create the
2:53:10buttons so we'll go to our
2:53:12HTML and create a
2:53:16button and inside this first button
2:53:18we'll have the text
2:53:21Rock Let's create another
2:53:25button this one will be
2:53:28paper and we'll create the last
2:53:31button this one will be
2:53:35scissors now let's save and check our
2:53:39new
2:53:40tab and now we created all the elements
2:53:43that we
2:53:44need next let's make these elements
2:53:47interactive with Javas JavaScript so
2:53:49when writing JavaScript a good strategy
2:53:52is to think about what steps we need to
2:53:54do and then convert those steps into
2:53:57code so here when we click a button the
2:54:01first step is the computer will randomly
2:54:03select a move and then we're going to
2:54:05compare the moves to get the result and
2:54:08finally we'll display the result in a
2:54:11popup by the way this is called an
2:54:14algorithm an algorithm is a set of steps
2:54:17to complete delete a task or to solve a
2:54:20problem now that we know what steps we
2:54:23need to do we're going to convert these
2:54:25steps or this algorithm into
2:54:28code first we're going to run some
2:54:30JavaScript when we click these buttons
2:54:33so let's use the onclick attribute again
2:54:36we'll go to the opening tag of the
2:54:38button and type
2:54:41onclick equals double
2:54:44quotes and then inside these double
2:54:46quotes we can add our JavaScript
2:54:51so now we have to figure out how to
2:54:52randomly select a move for the computer
2:54:56to do this we need to learn a new piece
2:54:58of JavaScript
2:54:59code so here we're going to type capital
2:55:03m
2:55:05math.random Open Bracket close bracket
2:55:09math.random generates a random number
2:55:12between 0o and 1 so if we console.log
2:55:16this console
2:55:21log and
2:55:24save and click this
2:55:27button and then check in our console by
2:55:30right-clicking
2:55:33inspect and the
2:55:35console it will display a random number
2:55:38between Z and 1 if we click this button
2:55:42again it will generate a different
2:55:44random number so every time we run MTH
2:55:48random it generates a different random
2:55:51number between 0 and one now to be more
2:55:54precise it actually generates a number
2:55:57greater than equal to zero and less than
2:56:00one now let's save this random number in
2:56:03a variable so we can use it later so
2:56:06we'll replace the
2:56:08console.log with
2:56:10const and then a variable name let's
2:56:13just name it random capital N number
2:56:19and then
2:56:21equals so we saved this random number
2:56:23inside this
2:56:25variable next we need a way to convert
2:56:28this random number into a move like rock
2:56:31paper or scissors to do this let's
2:56:34imagine the space between 0 and 1 and
2:56:38then divide the space into three equal
2:56:40parts each part represents a move if we
2:56:44generate a random number and it's
2:56:46between 0 and 1/3 the move will be Rock
2:56:50if it's between 1/3 and 2/3 the move
2:56:53will be paper and if it's between 2/3
2:56:56and one the move will be scissors this
2:57:00is how we can convert the random number
2:57:02into a move and this will give the
2:57:04computer an equal chance of picking rock
2:57:08paper or
2:57:09scissors now let's convert these steps
2:57:11into code and an if statement is the
2:57:14perfect solution for this this already
2:57:17looks like an if statement so in our
2:57:20onclick attribute let's add some new
2:57:23lines and type if brackets and curly
2:57:28brackets for this first condition we're
2:57:31going to check if the random number is
2:57:33between 0 and 1/3 so let's check if
2:57:38random number is greater than or equal
2:57:42to
2:57:43zero but in this case we also need to
2:57:46check that random number is less than
2:57:531/3 because we're checking if the number
2:57:55is between 0 and 1/3 but how do we do
2:57:59this how do we check that two
2:58:01comparisons are both true to do this
2:58:05we're going to learn another type of
2:58:07operator in JavaScript called logical
2:58:10operators logical operators let us
2:58:13combine Boolean values which is what we
2:58:15need to do here let's go back into
2:58:18booleans
2:58:20HTML and we're going to learn logical
2:58:23operators so first let's open the tab
2:58:26for this
2:58:27file and we're going to comment out all
2:58:30the previous code so our console doesn't
2:58:32get too messy
2:58:34slashstar and then at the
2:58:37bottom star
2:58:39slash now let's create some new
2:58:42lines and the first logical operator
2:58:45we're going to learn is called the and
2:58:47operator
2:58:49let's type
2:58:51console. log a Boolean value
2:58:55true and another Boolean value
2:59:00true so this is the and operator and it
2:59:03checks if two Boolean values are both
2:59:06true so it checks if the left side is
2:59:09true and the right side is true that's
2:59:12why it's called the and operator so here
2:59:16the left side is true and the right side
2:59:18is also true so the and operator will
2:59:21result in true if we
2:59:24save this displays true now if one of
2:59:28these sides is false for example if we
2:59:31change this to
2:59:34false now let's check is the left side
2:59:37and the right side both true in this
2:59:40case no so and will now result in false
2:59:44if we save it now displays false
2:59:49so that's the logical and operator it
2:59:52checks if the left side is true and the
2:59:55right side is also true so this is
2:59:58exactly what we need for our project for
3:00:01example let's create a new line and type
3:00:08console.log and let's say that we
3:00:10generated a random number like
3:00:130.2 and we want to check if it's between
3:00:160 and 1/3 so we can do
3:00:190.2 is greater than or equal to 0 and
3:00:25we're also going to check if
3:00:270.2 is less than
3:00:301/3 so we're using the logical and
3:00:33operator to check if the left side is
3:00:36true and the right side is also true so
3:00:40in this example both sides are true 0.2
3:00:43is between 0 and 1/3 so if we save
3:00:48this whole thing will display true now
3:00:51in the order of operations logical
3:00:54operators like and have a lower priority
3:00:57than math and comparisons so in this
3:01:00example it will calculate the math first
3:01:03and then it will calculate the
3:01:05comparison on the left and then the
3:01:07comparison on the right and then at the
3:01:09end the and operator checks if both
3:01:12sides result in
3:01:14true now let's use the and operator in
3:01:17our project let's go back to the file
3:01:20for our
3:01:21project and then inside this first
3:01:24condition we're going to check if the
3:01:26random number is greater than or equal
3:01:28to zero and at the same time is the
3:01:32random number less than 1/3 so this is
3:01:35how we check if a number is between 0
3:01:38and
3:01:391/3 in this case the computer will pick
3:01:42Rock so between the curly brackets let's
3:01:46just type con
3:01:48cons. log
3:01:52Rock let's get some practice and create
3:01:55the other two branches for picking paper
3:01:57and scissors feel free to pause this
3:02:00video if you want to try it yourself
3:02:02first so here we're going to type else
3:02:07if to add another branch and then
3:02:10brackets and curly brackets and in this
3:02:13condition we're going to check if random
3:02:18number is greater than or equal to
3:02:231/3
3:02:24and
3:02:26random number is less than
3:02:332/3 so if this random number is between
3:02:361/3 and 2/3 inside here we're going to
3:02:40console do log
3:02:44paper and finally let's create another
3:02:47Branch using else
3:02:51if random
3:02:54number greater than or equal to
3:02:572/3 and random number less than
3:03:041 and
3:03:08console.log
3:03:11scissors if we
3:03:13save and then go back to our rock paper
3:03:16scissors tab
3:03:18and then click the rock button a few
3:03:21times it will pick some random moves for
3:03:24the
3:03:25computer so that's how we generate the
3:03:27computer's move one thing I want to
3:03:30point out is that I use the less than
3:03:32comparison instead of less than or equal
3:03:35to I just did this so that the
3:03:37comparisons don't
3:03:40overlap before we continue in the
3:03:42project we're going to learn two other
3:03:44logical operators we can use let's go
3:03:47back to booleans
3:03:50HTML and let's also open the tab for
3:03:52this
3:03:55file the next logical operator is called
3:03:58the or operator for example let's type
3:04:02some new lines and type
3:04:07console.log true or
3:04:11false so this is the logical or operator
3:04:15it checks if at least one side is true
3:04:19so it checks if the left side is true or
3:04:22the right side is true that's why it's
3:04:24called the or
3:04:26operator so here one of these sides is
3:04:29true so the or operator will result in
3:04:32true if we
3:04:34save this displays
3:04:37true if both sides are true it will also
3:04:40result in true because at least one side
3:04:43is
3:04:44true the last logical operator we're
3:04:47going to learn is called the not
3:04:49operator for example let's create a new
3:04:52line and type
3:04:55console. log exclamation
3:04:59true so the exclamation is called the
3:05:03not operator the not operator only uses
3:05:06one Boolean value and it flips it into
3:05:09the opposite value so if this value is
3:05:13true the not operator will flip it into
3:05:16false so if we
3:05:18save this will result in false now if
3:05:22you think about it if we say that
3:05:25something is not true that's the same
3:05:28thing as saying that it is false so
3:05:30that's why this is called the not
3:05:33operator now if we change the value to
3:05:38false again the not operator will flip
3:05:41this into true so if we
3:05:44save this will now result in true
3:05:48so those are the logical or and not
3:05:51operators we don't need to use these in
3:05:54our project right now but I'll leave
3:05:56some exercises for these at the end of
3:05:58this lesson now let's go back and
3:06:01continue the project let's open the code
3:06:05and open the
3:06:07tab the next step is to compare the
3:06:11computer's move to our move which is
3:06:14Rock so first let's save the computer's
3:06:16move in a variable so we can compare it
3:06:19later so instead of
3:06:22console.log we're going to create a
3:06:23variable with
3:06:25const
3:06:27computer capital M move and make it
3:06:31equal to the string
3:06:33Rock and we'll do the same thing
3:06:36here const computer move equals
3:06:43paper and
3:06:45here const comp futter move equals
3:06:52scissors and now at the bottom let's
3:06:57console.log the computer move variable
3:07:00to make sure that it
3:07:02worked if we save and then click our
3:07:05Rock
3:07:07button unfortunately it gives us an
3:07:09error telling us that computer move is
3:07:12not defined even though we created it
3:07:15right here so what is happening here if
3:07:19statements have a special feature they
3:07:21create something called a scope a scope
3:07:25limits where a variable exists basically
3:07:29whenever we have these curly brackets
3:07:31like this any variable we create inside
3:07:35the curly brackets will only exist
3:07:37inside the curly brackets and we can't
3:07:40use these variables outside the curly
3:07:42brackets so this is called a scope
3:07:46Scopes are a feature of many programming
3:07:48languages and they help us avoid naming
3:07:51conflicts for example if I create a
3:07:55variable here called random number
3:08:00equals
3:08:010.5 and this didn't create a scope so if
3:08:05I delete these curly
3:08:07brackets this variable name will now
3:08:10conflict with the variable name up here
3:08:12because we can't have two variables with
3:08:14the same name so you can imagine that if
3:08:17we didn't have scope and we had hundreds
3:08:20or even thousands of lines of code we
3:08:22would quickly start to run out of
3:08:23variable names so by creating a new
3:08:26scope here all the variable names inside
3:08:30the scope only exist between the curly
3:08:33brackets and it won't affect anything
3:08:35outside in the code so Scopes help us
3:08:39avoid naming
3:08:41conflicts okay so I'll delete this
3:08:44example and we'll learn how to access
3:08:46this variable
3:08:48outside of this scope so to access this
3:08:51variable outside of the if statement we
3:08:54have to create this variable outside of
3:08:57the if statement so above
3:09:00here we can create this
3:09:03variable
3:09:05const
3:09:07computer move and let's just make it
3:09:10equal to the empty string for
3:09:13now so this variable was not created
3:09:16inside any curly brackets so it's
3:09:19accessible from all of this code inside
3:09:22the onclick attribute including inside
3:09:25the if
3:09:27statement and then inside the if
3:09:29statement instead of creating a new
3:09:31variable we're just going to save the
3:09:33move inside this variable up here
3:09:36because we can access this variable
3:09:38anywhere else in the
3:09:40code so instead of using const we're
3:09:43just going to reassign computer move and
3:09:46we're going to move it here as well and
3:09:49here as
3:09:51well and remember when we reassign a
3:09:54variable we have to switch from const to
3:09:59let and now if we
3:10:01save and then click the rock
3:10:04button we're able to console.log
3:10:07computer move because computer move is
3:10:10no longer inside this scope it's up here
3:10:14so we can access it in this line of code
3:10:17so that's how scope Works any variable
3:10:20that we create inside the curly brackets
3:10:23will only exist inside the curly
3:10:26brackets so remember in the previous
3:10:29lesson we learned a third way of
3:10:31creating variables called VAR the issue
3:10:34with VAR is that it doesn't really
3:10:35follow the rules of scope for example
3:10:39here if we create a variable with VAR
3:10:43like VAR and
3:10:45random number
3:10:48equals
3:10:500.5 this variable will conflict with the
3:10:53variable up here with the same name even
3:10:56though it's inside a scope so that's why
3:10:59we don't use VAR anymore and we just use
3:11:02const and let because of VAR doesn't
3:11:04really follow the rules of scope so we
3:11:08can remove this for now and move on to
3:11:10the next
3:11:13step so we generated a random move for
3:11:16the computer
3:11:18now we have to compare our move which is
3:11:20Rock to the computer's move to get the
3:11:23result and see who wins to do that we'll
3:11:26use another if statement so at the
3:11:29bottom here let's type if and then
3:11:33brackets and curly
3:11:35brackets and then inside this condition
3:11:38let's check if the
3:11:41computer move is equal to rock
3:11:48so remember in JavaScript we always use
3:11:50triple equals instead of double equals
3:11:53to avoid the conversion
3:11:54behavior and now if the computer's move
3:11:57is rock and our move is Rock then inside
3:12:01the curly brackets the result is going
3:12:03to be a
3:12:06tie and let's save the string in a
3:12:08variable so we can use it later again we
3:12:12have the same situation as before we
3:12:14don't want to create the variable inside
3:12:16here because then it only exists in this
3:12:20scope between the curly brackets instead
3:12:23we're going to create the variable above
3:12:25outside the if statement so we'll use
3:12:28let to create this variable because
3:12:31we're going to reassign it in the if
3:12:33statement let's name this variable
3:12:36result and just make it equal to the
3:12:39empty string at the top and then in the
3:12:42if statement we'll save the result into
3:12:46this variable
3:12:48so
3:12:49result equals
3:12:53tie now let's create the other branches
3:12:56of this if statement so here we'll add
3:13:00else if brackets and curly
3:13:04brackets and we'll check if the
3:13:07computer move is equal to paper this
3:13:12time if the computer move is paper and
3:13:16we picked Rock
3:13:17then we lose so the result is equal to
3:13:22you
3:13:25lose and finally we'll add another else
3:13:29if brackets and curly brackets and we'll
3:13:33check if the
3:13:35computer move is equal to
3:13:40scissors and if the computer picked
3:13:43scissors and we pick Rock the result is
3:13:47is that you
3:13:51win so that's how we compare our move to
3:13:54the computer's random move using an if
3:13:57statement the last step is to display
3:14:00this result in the
3:14:03popup so at the bottom let's create a
3:14:06popup using alert Open Bracket close
3:14:11bracket and let's go back to super
3:14:14simple Dev to see the message in the
3:14:16popup so we'll click this and in the
3:14:20popup it shows our move the computer's
3:14:22move and then the result so we can
3:14:25actually just copy
3:14:27this rightclick
3:14:31copy and then in here right click and
3:14:36paste so obviously the computer is not
3:14:39going to pick this move every time and
3:14:41this is not going to be the same result
3:14:43every time instead we want to insert
3:14:46computer move into here and we want to
3:14:49insert result into here so because we
3:14:52want to insert values we're going to
3:14:54turn this into a template string using
3:14:57back
3:14:59ticks and now instead of paper we're
3:15:03going to insert a value using dollar and
3:15:05curly brackets and we're going to insert
3:15:08the variable
3:15:10computer
3:15:12move and instead of this text every time
3:15:16we're going to
3:15:17insert the variable
3:15:21result and now if we
3:15:24save and we can click okay to close this
3:15:28and go back to our Tab and click the
3:15:31rock
3:15:32button we're going to pick Rock the
3:15:34computer will pick a random move and it
3:15:37will show us the result in a
3:15:39popup so that's how we create this
3:15:41simple version of rock paper scissors in
3:15:45our code we did things step by step
3:15:48first we generated a random number we
3:15:51converted it into a move for the
3:15:54computer and then we compared our move
3:15:57to the computer move and we displayed
3:15:59the result in a
3:16:01popup so as you can see when we're
3:16:04writing JavaScript we first figure out
3:16:06what steps we need to do this is called
3:16:09an algorithm and then we convert these
3:16:12steps or this algorithm into
3:16:15code so now now we can actually remove
3:16:18this console.log because we don't need
3:16:20it
3:16:22anymore and the last step is to make the
3:16:25other buttons here interactive so feel
3:16:28free to pause this video if you want to
3:16:29try it yourself
3:16:31first for the paper button let's add
3:16:35some new lines to make it a little
3:16:36easier to read and again we'll add the
3:16:41onclick
3:16:43attribute and then inside here we can
3:16:46actually make a copy of all the
3:16:48JavaScript we wrote so we can select all
3:16:51of
3:16:53this and then write click
3:16:57copy and then in here right click and
3:17:04paste if the formatting doesn't look
3:17:07right we can select all of these
3:17:10lines and press tab to add indents until
3:17:15the formatting looks good
3:17:19the one thing we have to change here is
3:17:21that now we picked paper so the result
3:17:24is going to be different if the computer
3:17:26picks Rock and we pick paper that means
3:17:30you
3:17:32win if the computer picks paper now it
3:17:36means that we tie and if the computer
3:17:40picks scissors that means you
3:17:45lose and here what will also change up
3:17:48pick Rock to
3:17:51paper and that's
3:17:55it the last step is to make the scissors
3:17:58button interactive so again
3:18:02onclick equals double
3:18:05quotes and then we'll make a copy of the
3:18:07code so I already have it so just write
3:18:10click and
3:18:13paste and then again select the code
3:18:16that we need to fix the formatting for
3:18:19and press
3:18:21Tab and here we pick scissors so if the
3:18:25computer picks Rock then the result is
3:18:28you lose if the computer picks paper the
3:18:32result is you win and if the computer
3:18:36also picks scissors the result is a
3:18:41tie and we'll change you pick Rock to
3:18:45scissors
3:18:47now if we save and try out our game if
3:18:51we click Rock we're going to pick Rock
3:18:54computer picks a random move and it will
3:18:56show us the result here let's press okay
3:19:00and try
3:19:01paper this also works correctly let's
3:19:05press
3:19:06okay and click
3:19:08scissors and this also works
3:19:11correctly and that's it we just finished
3:19:14creating a simple version of this rock
3:19:16rock paper scissors
3:19:18game in the rest of this lesson we're
3:19:21going to learn more details about
3:19:22booleans and if
3:19:24statements let's go back to booleans
3:19:28HTML and open the tab for this
3:19:31file and let's comment out the previous
3:19:34code using
3:19:37slashstar and star slash and create some
3:19:41new
3:19:43lines the next thing we're going to
3:19:44learn is called truthy and and falsy
3:19:48values so if statements don't just work
3:19:51with Boolean values like true and false
3:19:55they actually work with any type of
3:19:57value including numbers and strings for
3:20:01example let's type if brackets and curly
3:20:06brackets and inside this condition
3:20:09instead of putting a Boolean value we're
3:20:12going to put a number like five and then
3:20:16in inside the curly brackets let's
3:20:21console.log the string
3:20:24truthy if we
3:20:27save the number five behaves just like
3:20:30true it causes the if statement to run
3:20:33this code so we call this value a truthy
3:20:37value because it behaves just like true
3:20:40now let's change this value to a
3:20:43different number zero if we say
3:20:48the number zero behaves just like false
3:20:51it causes the if statement to not run
3:20:53this code we call this value zero a
3:20:57falsy value because it behaves just like
3:21:00false so how do we know if a value is
3:21:03truthy or falsy in JavaScript the list
3:21:07of falsy values are false the number
3:21:11zero the empty string Nan undefined and
3:21:16null
3:21:17any value that is not on this list is a
3:21:20truthy
3:21:21value so why do we use truthy and falsy
3:21:25values one way we use them is like a
3:21:28shortcut in our code for example let's
3:21:32create a variable at the bottom using
3:21:36const and let's call it cart
3:21:40quantity and make it equal to
3:21:44five next let's create an if statement
3:21:48if brackets and curly brackets and
3:21:52inside the curly brackets let's type
3:21:57console.log the string cart has
3:22:03products now let's say that we only want
3:22:06to display this message if our cart has
3:22:09products usually inside this condition
3:22:12we would check if cart quantity
3:22:17is greater than zero but now instead of
3:22:20doing this comparison we can actually
3:22:23just type cart quantity and it will
3:22:26behave the same way if the card quantity
3:22:29is not zero they will both behave like
3:22:32true if the card quantity is zero they
3:22:36will both behave like false so here the
3:22:39card quantity is five which is a truthy
3:22:42value if we
3:22:45save this caus the if statement to run
3:22:48this code as you can see instead of
3:22:51doing comparisons we can use truthy and
3:22:54falsey values as
3:22:56shortcuts truthy and falsy values also
3:22:59work with logical operators for example
3:23:03if we
3:23:07console.log the not operator and the
3:23:10number
3:23:11zero zero is a falsy value it behaves
3:23:15just like false so the not operator will
3:23:18flip it into true if we
3:23:21save this will display
3:23:24true now that we understand truthy and
3:23:27falsy values let's go over the list of
3:23:30falsy values because there are some that
3:23:32we haven't learned yet we already
3:23:34learned false zero and the empty string
3:23:39the next falsy value is Nan which means
3:23:42not a
3:23:43number we get Nan if we do some invalid
3:23:47math for example at the bottom let's
3:23:51type
3:23:54console.log the string
3:23:57text divided by the number
3:24:00five so obviously this is not valid math
3:24:04if we save JavaScript will tell us that
3:24:08the result of this calculation is not a
3:24:11number or
3:24:12Nan the next falsy value is undefined
3:24:16undefined represents that something
3:24:18doesn't have a value for example at the
3:24:22bottom if we create a variable with
3:24:26let variable one and we don't give it a
3:24:30value and then we
3:24:33console. log this
3:24:37variable and we
3:24:39save it will show us that variable one
3:24:42contains the value undefined so
3:24:45undefined represents that this variable
3:24:48doesn't have a
3:24:50value one thing to note with undefined
3:24:53is that we can only use this syntax with
3:24:55let we can't use it with
3:24:58const if we really want to use this with
3:25:01const we have to type out equals
3:25:05undefined
3:25:08directly the last faly value is null
3:25:11we'll need some extra knowledge to
3:25:13understand null so we'll learn about
3:25:15null later in in this
3:25:17course the last thing we're going to
3:25:19learn in this lesson are some shortcuts
3:25:22for if statements called the Turner
3:25:24operator the guard operator and the
3:25:27default
3:25:29operator first let's comment out this
3:25:31code so our console doesn't get too
3:25:33messy SL star and then at the bottom
3:25:38star
3:25:40slash and let's scroll down and we'll
3:25:43start by learning the Turner operator
3:25:46we're going to type a Boolean value like
3:25:49true and question mark another value for
3:25:53example the string
3:25:56truthy and then colon and another value
3:26:00like the string
3:26:02falsy so this is the Turner operator
3:26:06this is similar to an if else statement
3:26:10the first value is like the condition if
3:26:13it's truthy the result of this code is a
3:26:15value after the question mark if the
3:26:18first value is falsy the result of this
3:26:21code is the value after the colon so you
3:26:25can think of the question mark as the if
3:26:27branch and the colon as the else Branch
3:26:31this is sort of like a shortcut for an
3:26:34if statement like
3:26:36this now an advantage of the Turner
3:26:39operator over an if statement is that we
3:26:41can save a tary operator in a variable
3:26:45so at the front
3:26:46we can do
3:26:48const result
3:26:52equals and now if we
3:26:56console.log the
3:26:58result and
3:27:01save the first value is true so the
3:27:04value after the question mark gets saved
3:27:07in the
3:27:08variable as always we can use truthy and
3:27:11falsy values instead of just true and
3:27:14false so here if we change the first
3:27:18value to a falsy value like zero this
3:27:22will cause the value after the colon to
3:27:25get saved inside the variable if we
3:27:29save that's exactly what happens so this
3:27:33is the turnery operator it's sort of a
3:27:35shortcut for an if else statement like
3:27:40this the next shortcut is called the
3:27:43guard operator earlier in this lesson we
3:27:47learned the and operator which checks if
3:27:50two sides are both
3:27:52truthy the and operator has a special
3:27:55feature let's say we have an and
3:27:57operator and the left side is
3:28:00false in this situation we already know
3:28:04it's impossible for both sides to be
3:28:06truthy so we don't even need to check
3:28:09the right side so the and operator
3:28:12actually stops early and doesn't even
3:28:15run the code on the right this is called
3:28:18a shortcircuit
3:28:19evaluation for example let's go into our
3:28:23code and create some new lines and we'll
3:28:26type
3:28:28false
3:28:29and
3:28:31console.
3:28:33log
3:28:36hello if we
3:28:38save the left side is falsy so the and
3:28:42operator stops early or short circuits
3:28:45and it doesn't even run the code on the
3:28:47right so as you can see we can use the
3:28:51value on the left to block or guard the
3:28:54code on the right so when we use the and
3:28:57operator like this we call it the guard
3:29:01operator this is sort of like a shortcut
3:29:04for an if statement like
3:29:07this and just like the Turner operator
3:29:10we can save the guard operator in a
3:29:12variable for example let's create a
3:29:16variable const
3:29:19message and make it equal to
3:29:23false and the string
3:29:27hello if the first value is falsy the
3:29:31guard operator will stop early and the
3:29:34result will be the first value if we
3:29:38console. log this
3:29:42message and
3:29:44save the value f false will be saved
3:29:47inside this
3:29:48variable now let's change this value to
3:29:51a truthy value like the number five now
3:29:55it will not stop early and it will give
3:29:58us the second value as the result if we
3:30:01save the string hello is now saved
3:30:05inside this
3:30:06variable this is sort of like a shortcut
3:30:09for an if statement like this so don't
3:30:12worry if it's a bit confusing all of
3:30:15these are just shortcuts for an if
3:30:17statement they're sort of like an if
3:30:19statement that we can write on a single
3:30:23line the last shortcut is called the
3:30:26default operator which is similar to the
3:30:28guard operator but uses
3:30:31or earlier in this lesson we learned the
3:30:34or operator which checks if at least one
3:30:37side is truthy let's imagine we have an
3:30:41or operator and the left side is
3:30:44true in this situation we already know
3:30:47the result of the or operator because
3:30:50the left side is already truthy we don't
3:30:53even need to check the right side so the
3:30:56or operator also stops early or short
3:30:59circuits if the first value is truthy
3:31:03for example let's create some new lines
3:31:07and let's say that in our final Amazon
3:31:09Project we can choose a currency to pay
3:31:11for our order let's create a variable
3:31:15with
3:31:16const currency and make it equal to the
3:31:20string e or
3:31:23Euros now let's say that choosing a
3:31:26currency is optional if we don't choose
3:31:29a currency we'll use a default value of
3:31:32USD or United States dollars to create a
3:31:36default value we can go to the end and
3:31:39type or the string
3:31:44USD so here
3:31:46the left side is truthy so the or
3:31:49operator will stop early and it will
3:31:52result in the value on the
3:31:54left if we
3:31:58console. log the
3:32:01currency and
3:32:03save it will display
3:32:06Euros now let's say that we didn't
3:32:08choose a currency because it's optional
3:32:11so let's go here and we're going to
3:32:13change this currency to
3:32:17undefined now the left side is falsy so
3:32:21the or operator does not short circuit
3:32:24it will continue and the result will be
3:32:26the value on the right if we
3:32:30save now the string USD is saved inside
3:32:34currency as you can see we can use the
3:32:37or operator to set a default value so
3:32:41when we use the or operator like this we
3:32:43call it the default operator
3:32:47the default operator is sort of a
3:32:49shortcut for an if statement like
3:32:52this so don't worry remember that
3:32:55everything that we learned in this last
3:32:57section are basically some shortcuts for
3:33:00if statements we don't have to use them
3:33:02but they can save us some
3:33:05typing and that's the end of this lesson
3:33:08in this lesson we learned about booleans
3:33:10and if statements Boolean values
3:33:13represent whether something is true or
3:33:16false we learned how to use if
3:33:18statements to make decisions in our code
3:33:21we learn how to use comparison and
3:33:23logical operators we learned about
3:33:26algorithms and created a simple version
3:33:28of rock paper scissors we learned about
3:33:32truthy and falsey values and we learned
3:33:35some shortcuts for if statements the
3:33:38turnery operator the guard operator and
3:33:41the default operator here are some
3:33:44exercises to help you practice booleans
3:33:46and if
3:34:14statements in this lesson we're going to
3:34:16learn the next feature of JavaScript
3:34:18called functions and we're going to use
3:34:21functions to improve our rock paper
3:34:24scissors project first let's create a
3:34:27new file for this lesson we'll go to our
3:34:30code
3:34:31editor and create a new
3:34:34file and let's name this file
3:34:3807-
3:34:41functions.
3:34:43HTML and press enter
3:34:46next let's copy booleans HTML to
3:34:50functions. HTML so we'll click this file
3:34:55and then select all this code using
3:34:57control a or command
3:34:59a and then right click
3:35:03copy and in
3:35:05here rightclick and
3:35:10paste and we'll hide our files and
3:35:13prepare this file for this lesson
3:35:16so at the top we'll change the title to
3:35:21functions and we'll remove all the code
3:35:24in the script
3:35:28element and let's
3:35:30save and we'll open this file in live
3:35:33server by
3:35:34right-clicking open with live
3:35:38server and we're going to open the
3:35:40console as well so right
3:35:42click inspect
3:35:45and then click the
3:35:47console and finally we can close the
3:35:50previous
3:35:53tabs as well as the previous
3:35:58code okay now we're ready to learn
3:36:02functions first of all what is a
3:36:05function a function lets us reuse code
3:36:10let's create our first function we're
3:36:13going to go to the script element
3:36:16and type the word
3:36:18function and
3:36:20space so this creates a new function and
3:36:25then we're going to give a name to our
3:36:27function we can name it almost anything
3:36:29we want but for now let's just name it
3:36:33function one and then we're going to
3:36:36type round brackets and curly
3:36:40brackets then inside these curly
3:36:43brackets we're going to create a new
3:36:45line
3:36:46and we're going to type some code so
3:36:52console.log the string
3:36:55hello and we'll also type
3:37:00console.log 2 +
3:37:032 and
3:37:06save so this creates a function now
3:37:09let's learn how to use this function
3:37:12we're going to type at the bottom
3:37:16the function name so
3:37:18function one and then Open Bracket close
3:37:22bracket and
3:37:24semicolon when we type the function name
3:37:27with brackets this will run the code
3:37:30inside the function if we
3:37:33save notice that it runs the code inside
3:37:36the function and displays the two lines
3:37:39in the
3:37:40console so why do we use functions a
3:37:43function lets us reuse code so if we
3:37:47wanted to run both these lines of code
3:37:49again all we have to do is type the
3:37:52function name again with brackets so
3:37:55function one and brackets again if we
3:38:01save this will run the code inside the
3:38:03function two times and we can reuse this
3:38:07code as many times as we want by typing
3:38:10the function name with brackets so
3:38:13that's what a function is it lets us
3:38:16reuse code now let's learn the syntax
3:38:19rules for functions the word function
3:38:22creates a new
3:38:24function and then we choose a name for
3:38:27our function the rules for function
3:38:29names are the same as variable names we
3:38:32can't use special words like function we
3:38:36can't start with a number and we can't
3:38:39use special characters although dollar
3:38:41sign and underscore are allowed and just
3:38:44like variable names the best practice is
3:38:47to use camo case for function
3:38:50names and inside these curly brackets we
3:38:53put the code that we want to run when we
3:38:56use the function this is called the
3:38:58function body now one very important
3:39:02thing to remember is that this code only
3:39:05creates a function it doesn't run the
3:39:08code in the function or do anything else
3:39:12in order to actually run the code we
3:39:14have to use the function like below by
3:39:18typing the function name with
3:39:20brackets this is known as calling the
3:39:23function it's also known as running the
3:39:26function or executing the
3:39:28function now that we learned the syntax
3:39:31rules for functions let's do a practical
3:39:34example we're going to use functions to
3:39:37improve the code of our rock paper
3:39:39scissors project first let's click here
3:39:42to show our files and we're actually
3:39:45going to make a copy of the project just
3:39:48for this lesson so we're going to
3:39:50rightclick this
3:39:52file
3:39:54copy and then at the bottom right click
3:39:58and
3:39:59paste and we're going to rename this
3:40:02file so rightclick
3:40:05rename remove copy at the end and then
3:40:09at the beginning we'll change this to
3:40:1307 and press enter
3:40:16next we're going to open this file in
3:40:19live server by right clicking and then
3:40:23open with live
3:40:25server and let's also open the console
3:40:28on this page we'll right click
3:40:32inspect and then click the
3:40:36console all right now if we look at the
3:40:39code for generating a computer move
3:40:43you'll notice that this code is the same
3:40:45for all three
3:40:47buttons so this is a perfect situation
3:40:50to use a function because a function
3:40:53lets us reuse code so let's scroll down
3:40:57to the script element and we're going to
3:41:00make a function here so let's type
3:41:04function and then a function name let's
3:41:08name this function
3:41:10pick
3:41:12computer move and then brackets and
3:41:15curly brackets so one recommendation for
3:41:19function names is to use a verb or an
3:41:22action in the name such as
3:41:25pick so next we're going to move all the
3:41:28code for picking a computer move into
3:41:31our new function so let's create a new
3:41:34line here and we'll scroll up to the
3:41:38scissors button because it's the closest
3:41:40one and we'll select all of this code
3:41:43for picking a computer move and then
3:41:46rightclick
3:41:48cut and inside the
3:41:51function right click and
3:41:56paste if we need to fix the formatting
3:41:59we can select these lines and press tab
3:42:02to add
3:42:04indents so the reason we created this
3:42:06function in the script element is
3:42:08because remember that the script element
3:42:10runs when the page is loaded so we want
3:42:13to make sure that we create the function
3:42:16first and then we use it in the buttons
3:42:19after now remember this code just
3:42:22creates a function it doesn't actually
3:42:25run the code inside to run the code
3:42:27inside we're going to call this function
3:42:31so let's scroll up to the scissors
3:42:33button and we're going to call this
3:42:36function by typing the function name
3:42:39pick computer move Open Bracket close
3:42:44bracket ET and
3:42:46semicolon if we
3:42:49save and then click the scissors
3:42:52button unfortunately it now gives us an
3:42:55error saying computer move is not
3:42:58defined now this might seem weird
3:43:00because down here we actually create the
3:43:03computer move so what's going on the
3:43:06reason this happens is because functions
3:43:09create a scope in the previous lesson we
3:43:12learned about Scopes which limit weight
3:43:15where a variable exists we learned about
3:43:18if statements and that if statements
3:43:20create a scope between the curly
3:43:22brackets this means that any variable
3:43:25created between the curly brackets only
3:43:28exist between the curly
3:43:30brackets functions also create a scope
3:43:34any variable that is created between
3:43:37these curly brackets only exists inside
3:43:41the curly brackets and we can't use it
3:43:43outside the curly Brack ETS like we do
3:43:46here so that's why we're getting this
3:43:49error so how do we solve this problem
3:43:53remember that with if statements we
3:43:55solve this by creating the variable
3:43:57outside of the if statement like this we
3:44:01can use a similar solution with
3:44:03functions to make this variable exist
3:44:06outside the function we just have to
3:44:08create it outside the function so let's
3:44:11select this code we're going to
3:44:14rightclick
3:44:16and
3:44:17cut and remove these lines and then
3:44:21outside the function we're going to
3:44:24rightclick and
3:44:27paste so now this variable is no longer
3:44:31inside the function's scope and it can
3:44:34be used anywhere else in the code so
3:44:37variables like this that can be accessed
3:44:39anywhere are called Global
3:44:42variables if we save
3:44:45and now click the scissors
3:44:47button everything is working again
3:44:51because this code above can now access
3:44:53this
3:44:55variable now let's press
3:44:57okay and let's use this function to
3:45:00reuse this code so we'll scroll up to
3:45:04the paper
3:45:06button and now instead of all this code
3:45:09again we're just going to remove it and
3:45:12call the function pick
3:45:16computer move Open Bracket close bracket
3:45:20semicolon and also with the rock button
3:45:24we'll select all this
3:45:26code and remove it and just call the
3:45:29function
3:45:31pick
3:45:32computer move brackets and
3:45:36semicolon now if we
3:45:39save and click the rock
3:45:42button it works just like before
3:45:45we'll press okay and click the paper
3:45:48button it also works just like before so
3:45:52as you can see functions let us reuse
3:45:55code and they make our code a lot
3:45:57cleaner by removing all the duplication
3:46:00that we had another benefit of removing
3:46:03duplication is that before if we ever
3:46:06wanted to update the code for picking a
3:46:09computer move we had to update it in
3:46:11three places in each of the buttons but
3:46:15now if we scroll
3:46:17down we only have to update it in one
3:46:20place inside this function so functions
3:46:23also make our code easier to update in
3:46:26the
3:46:27future next we're going to learn a
3:46:29feature of functions called a return
3:46:32statement a return statement lets us get
3:46:35a value out of a function so at the end
3:46:39of this function let's type some new
3:46:43lines and we're going to type type
3:46:46return and then a value like the number
3:46:50five and
3:46:52semicolon now whenever we call this
3:46:55function it will result in a value the
3:46:58number five so up
3:47:02here when we call this function this
3:47:05will result in the number five so we can
3:47:08actually console.log this console.log
3:47:16and then
3:47:18save and click the scissors
3:47:21button and it will show us that calling
3:47:24the function now results in the number
3:47:26five and we display it in the
3:47:29console so that's how a return statement
3:47:32works it lets us get a value out of this
3:47:36function let's press okay and do another
3:47:40example we'll scroll
3:47:42down and this time let's change CH this
3:47:45value to the string
3:47:48Rock now whenever we call this function
3:47:51it will result in the string Rock if we
3:47:55save and then click
3:47:59scissors and scroll up
3:48:01here calling this function now results
3:48:04in the string Rock and then we display
3:48:07it in the
3:48:09console so now let's press okay and
3:48:12we'll learn the syntax rules for a
3:48:14return
3:48:16statement so we just have to type the
3:48:19word return and then a value and it will
3:48:22get this value out of the function now
3:48:26instead of just a value we can also
3:48:28return a calculation or a variable or
3:48:31anything that results in a
3:48:34value so this is known as returning a
3:48:37value from a function and this value is
3:48:41known as the return value we also Al
3:48:44don't have to return anything from a
3:48:47function if a function doesn't have a
3:48:49return statement or we return without a
3:48:52value like this this will return the
3:48:56value
3:48:57undefined so if we
3:49:00save and then click scissors
3:49:03again the function will return
3:49:07undefined and lastly when we use a
3:49:10return statement it ends the function
3:49:12immediately so after the the return
3:49:15statement if we type
3:49:20console.log the string
3:49:24after and press okay here and save this
3:49:29file and then click the scissors
3:49:32button notice that it doesn't run this
3:49:35code and that's because once we return
3:49:38the code returns back to where we called
3:49:41the function that's why it's called a
3:49:43return statement so it's not going to
3:49:45run anything after the return so we can
3:49:49remove this
3:49:51code and press
3:49:54okay so now that we understand return
3:49:56statements we're going to learn a better
3:49:59way of getting the computer move out of
3:50:02this function so first let's actually
3:50:05move this variable back into the
3:50:07function so we right click and
3:50:11cut and then in
3:50:13here right right click and
3:50:18paste and delete these
3:50:22lines so now we're back to the original
3:50:25problem how do we access computer move
3:50:28outside of the function so another
3:50:31solution is to return this variable
3:50:34because remember a return statement lets
3:50:37us get a value out of the function so
3:50:40down
3:50:41here we're going to return the
3:50:45computer
3:50:47move so this will take whatever value is
3:50:50saved inside computer move which is one
3:50:53of these values and return it out of the
3:50:56function if we
3:50:58save and then click these scissors
3:51:02button we were able to get the move
3:51:04scissors outside of this function so
3:51:08what happened here is that we return
3:51:10this move and then up
3:51:13here we took the move and displayed it
3:51:15in the console to get
3:51:18scissors so that's another way of
3:51:20getting the computer move out of a
3:51:22function using the return
3:51:26statement however now we're back to this
3:51:29problem with computer move not being
3:51:32defined because we moved it back into
3:51:34the function's scope so let's scroll up
3:51:38and remember that this return value is
3:51:42just a value we can use it like any
3:51:45other value for example we can
3:51:48console.log it or we can also save this
3:51:51in a variable so let's do that right now
3:51:55we're going to remove
3:51:57this and create a new variable with
3:52:01const and let's just name this variable
3:52:05computer move to match what we use down
3:52:09here and we use equals to save the
3:52:13return value inside inside this
3:52:15variable so note that even though we use
3:52:18computer move here as well as here
3:52:22there're different variables this one is
3:52:25inside the function's scope so it
3:52:27prevents it from conflicting with
3:52:29variables outside the function's scope
3:52:32that's one of the main benefits of
3:52:35Scopes so now that we saved the return
3:52:38value into this variable and we're using
3:52:41this variable down here the code should
3:52:44now work work if we
3:52:46save and click
3:52:49scissors everything is back to
3:52:52normal and let's press okay so don't
3:52:55worry functions can be a little
3:52:57confusing at first because the code is
3:52:59no longer simply going from top to
3:53:02bottom it sort of jumps around a little
3:53:05bit so let's go through this step by
3:53:08step when we click this button we're
3:53:11going to run this function so the code
3:53:14is going going to jump down here and
3:53:16then it's going to run all of this code
3:53:18from top to
3:53:20bottom at the end we're going to return
3:53:24whatever is inside computer move back to
3:53:27where we called this function so we're
3:53:30going to return all the way back here
3:53:33and then we're going to save that return
3:53:35value into a new variable computer move
3:53:39and then use computer move down
3:53:42here so following the code line by line
3:53:45like this is called tracing the code
3:53:48it's a useful technique to understand
3:53:50exactly what the code is
3:53:52doing now let's compare the two
3:53:54solutions that we used a global variable
3:53:58and returning a
3:54:01variable so returning a variable like
3:54:04this is actually preferred over using a
3:54:07global variable and that's because a
3:54:10scope can help us prevent naming
3:54:12conflicts so all the variables inside
3:54:15here will not conflict with anything
3:54:18outside the scope so generally it's a
3:54:21best practice to keep things inside a
3:54:23scope if we
3:54:26can now let's move on and use this
3:54:28function in the other buttons feel free
3:54:31to pause the video if you want to try it
3:54:34yourself
3:54:35first so we'll scroll up to the paper
3:54:39button and then here we're going to save
3:54:43The Returned computer move into a
3:54:46variable so
3:54:48const
3:54:50computer move so that it matches the
3:54:53code down here make it equal to whatever
3:54:57is returned and then same thing for the
3:55:00rock button we're going to save the
3:55:02return value in a variable const
3:55:06computer move
3:55:09equals if we
3:55:12save and click the rock button
3:55:16it
3:55:17works let's press okay and click the
3:55:20paper button and this also works and
3:55:24let's press okay so that's how we use a
3:55:27return statement to take advantage of
3:55:29the benefits of
3:55:31scope next if we look at the rest of
3:55:35this code where we compare our move and
3:55:38display the result you'll notice that
3:55:40this code is very similar for each of
3:55:43the buttons you the only thing that's
3:55:44different is the result and the message
3:55:48that we display so we can actually use
3:55:51functions here as well to reuse code
3:55:54that has small differences to do this
3:55:57we're going to need another feature of
3:55:59functions called
3:56:01parameters so let's go back into
3:56:03functions.
3:56:05HTML and let's open the tab for this
3:56:10file and let's also comment out the
3:56:12previous code by typing
3:56:14slash star and at the bottom star
3:56:20slash and create some new
3:56:23lines and now we're ready to learn
3:56:25parameters so parameters are sort of the
3:56:28opposite of a return statement a return
3:56:31statement gets a value out of a function
3:56:35a parameter puts a value into a function
3:56:39so let's do an example let's say that
3:56:41we're working on the final Amazon
3:56:43Project
3:56:44and we need to calculate the tax for our
3:56:47order let's create a function to
3:56:50calculate the tax so
3:56:53function let's name it
3:56:57calculate tax brackets and curly
3:57:01brackets and then inside the curly
3:57:03brackets let's say that the cost of our
3:57:06products is
3:57:081,000 or $10 and the tax is
3:57:1210% to calc calculate the tax we can do
3:57:161,000 *
3:57:190.1 which is
3:57:2110% let's also display this number in
3:57:24the console so at the front we'll type
3:57:30console.log and
3:57:34brackets now let's save and remember
3:57:38this code only creates a function it
3:57:40doesn't run the code inside to run this
3:57:43code we're going to call this function
3:57:46so down here we're going to type the
3:57:48function name calculate tax and then
3:57:54brackets if we
3:57:56save it runs this code and then it
3:57:59displays the tax which is 100 cents or
3:58:04$1 however right now this function only
3:58:07calculates the tax for
3:58:101,000 what if we want to calculate the
3:58:12tax for a different amount how would we
3:58:15modify this function to work with any
3:58:18number to do this we're going to learn a
3:58:21feature of functions called parameters a
3:58:24parameter lets us put a value into a
3:58:27function so let's finally create our
3:58:30first parameter so inside these round
3:58:33brackets we're going to choose a name
3:58:36for our parameter so let's just name
3:58:38this
3:58:40parameter
3:58:421 a parameter one works the same way as
3:58:45a variable we can save a value inside
3:58:49this parameter and then use it just like
3:58:51a
3:58:52variable so first let's save a value
3:58:55inside the parameter to do that we're
3:58:58going to go to where we call the
3:59:00function and then inside these brackets
3:59:03we're going to put a value for example
3:59:082,000 this will save this value into
3:59:12this parameter
3:59:14and now we can use it just like a
3:59:16variable so instead of
3:59:181,000 we're going to type
3:59:21parameter 1 and it will take whatever
3:59:25value is inside parameter 1 in this case
3:59:292,000 and substitute it into the code if
3:59:33we
3:59:34save it now calculates 2,000 *
3:59:380.1 to give us 200 cents as the tax
3:59:44now every time we call the function we
3:59:46can save a different value into the
3:59:49parameter for example let's create a new
3:59:52line and call the function
3:59:56calculate
3:59:59tax and this time we're going to save
4:00:02the value
4:00:035,000 into parameter 1 if we
4:00:08save this line of code will calculate
4:00:11the tax for 5,000
4:00:14and result in 500 cents so as you can
4:00:17see a parameter lets us put values into
4:00:21a function and this allows our function
4:00:24to work with any
4:00:26value now let's learn the syntax rules
4:00:29for parameters to create a parameter we
4:00:33just type the parameter name between the
4:00:36brackets parameter names follow the same
4:00:38rules as variable names we can't use
4:00:42special words we can't start with a
4:00:44number and we can't use special
4:00:46characters other than dollar sign and
4:00:50underscore and the best practice is to
4:00:52use cam
4:00:53case let's actually change this
4:00:56parameter name to cost so the code makes
4:00:59more
4:01:00sense and
4:01:03save next when a function has a
4:01:06parameter we usually say this function
4:01:09takes a parameter if this parameter
4:01:12should be a number we say this function
4:01:15takes a
4:01:16number when we put a value into the
4:01:19function like this we call this passing
4:01:22a value into the function another name
4:01:25for this value is called the
4:01:28argument and believe it or not we've
4:01:31actually used functions and parameters
4:01:33this whole time the first code that we
4:01:36learned in this course was alert alert
4:01:40is actually a function you can tell it's
4:01:43a function because of the round brackets
4:01:46and between the brackets we put a string
4:01:49so this is an example of a
4:01:51parameter and lastly a parameter only
4:01:55exists inside the function's scope so we
4:01:58can only use this parameter between the
4:02:01curly brackets we can't use it outside
4:02:04the
4:02:05function next a function can actually
4:02:08have more than one parameter for example
4:02:12right now our calculate TX function can
4:02:14only calculate a 10% tax but what if
4:02:18we're in a different country and we want
4:02:20to calculate a different tax percent to
4:02:23solve this we can add a second parameter
4:02:27by typing after the first parameter a
4:02:30comma and then another parameter name
4:02:34let's name this tax
4:02:38percent and now to save a value into the
4:02:42second parameter we'll go go to where we
4:02:44call this function and also type a comma
4:02:48and a second value like
4:02:510.2 or a 20% tax so the first value gets
4:02:57saved in the first parameter and the
4:02:59second value gets saved in the second
4:03:02parameter and now we can use our second
4:03:05parameter just like a variable so
4:03:08instead of 0.1 every time we're going to
4:03:11calculate it with tax
4:03:15percent and it will substitute whatever
4:03:18value is inside tax percent into the
4:03:21code if we
4:03:23save this first line will multiply 2,000
4:03:27by
4:03:280.2 and give us 400 cents as the
4:03:32result so we can have as many parameters
4:03:35as we want in a function we just have to
4:03:38separate them with a
4:03:40comma Now notice that the second time we
4:03:42call this function we didn't give a
4:03:45value for the second parameter if we
4:03:48don't save a value into the parameter
4:03:50the parameter will get the value
4:03:53undefined so here if we
4:03:57console. log the second parameter tax
4:04:03percent and
4:04:05save it will show us that the second
4:04:08time tax percent is
4:04:11undefined and then multiplying the cost
4:04:15time undefined is not valid math so we
4:04:18get the result Nan or not a number so
4:04:23now let's remove the
4:04:25console.log and we'll learn how to fix
4:04:28this so to fix this we can either pass a
4:04:31second value into the function like this
4:04:34line or we can also set a default value
4:04:38for the parameter to set a default value
4:04:41we can just type after the parameter
4:04:45and then add equal sign and a default
4:04:48value like
4:04:520.1 if we
4:04:54save the second function call Will
4:04:57multiply 5,000 by the default value
4:05:010.1 and give us
4:05:03500 so that's how we add a default value
4:05:07for a
4:05:08parameter all right now that we learned
4:05:11parameters we're going to go back to the
4:05:13rock paper scissors project and reuse
4:05:16even more code so let's go back to the
4:05:19file for the project and also the tab
4:05:23for this
4:05:24project and now if we look at the code
4:05:27inside each of the buttons you'll notice
4:05:30that the code is basically the same for
4:05:33all three buttons the only small
4:05:35difference is the move that we picked so
4:05:39this is a perfect situation to use a
4:05:42parameter so so inside the script
4:05:44element let's create a new function to
4:05:48reuse all of this code we'll type
4:05:53function and let's name this function
4:05:56play game brackets and curly
4:06:01brackets next let's move all of this
4:06:04code inside the function so we can reuse
4:06:07it we'll select this
4:06:10code and then
4:06:12rightclick
4:06:14cut and inside the
4:06:17function right click and
4:06:22paste and if we need to reformat we can
4:06:25select these lines and press
4:06:30tab so the value that is different for
4:06:32each button is the move that we picked
4:06:36so we're going to turn this move into a
4:06:39parameter so at the top between the
4:06:42brackets we're going to create a new
4:06:45parameter let's name it Player
4:06:50move and now let's save a value into
4:06:53this parameter so inside our scissors
4:06:57button we're going to call this function
4:06:59and run all this code so let's type play
4:07:04game and call this function and for the
4:07:08scissors button let's save the string
4:07:11scissors into Player move to do that
4:07:14we'll type between the brackets here and
4:07:18type the string
4:07:21scissors so as we learned this will save
4:07:24scissors into Player move and now we can
4:07:28use Player move just like a variable in
4:07:30the
4:07:32function now let's modify the code based
4:07:35on the parameter so here this code
4:07:38calculates the result however this only
4:07:41works if the player move is scissors so
4:07:45we're going to put this in an if
4:07:47statement so we'll type
4:07:51if
4:07:52Player move equals
4:07:57scissors and curly brackets inside this
4:08:01if statement we're going to put this if
4:08:03statement so let's select this and then
4:08:07right click
4:08:09cut and then inside
4:08:12here right click click and
4:08:16paste and select these lines and press
4:08:20tab so notice that we can put an if
4:08:23statement inside another if statement
4:08:26and we did this because this code only
4:08:29makes sense if the player move is
4:08:32scissors and finally let's modify the
4:08:35code that displays the message so here
4:08:39instead of displaying scissors every
4:08:41time we're going to display whatever is
4:08:43saved inside Player
4:08:45move so we'll replace it with Dollar
4:08:49open curly bracket close curly bracket
4:08:52and in between we'll insert Player
4:08:57move and that's it we modify this
4:09:00function to use a parameter instead of
4:09:03always using
4:09:04scissors now let's save and click the
4:09:08scissors
4:09:09button and you'll notice that it works
4:09:12we displayed the move scissors and we
4:09:15calculated the result
4:09:18correctly let's press okay and we're
4:09:21going to use this function to reuse the
4:09:23code for the other buttons so we'll
4:09:26scroll up and for the paper button we're
4:09:30going to use a different if statement to
4:09:33calculate the result so let's actually
4:09:36copy this into the function we're going
4:09:39to
4:09:40rightclick click copy
4:09:43and then inside the
4:09:45function we're going to create another
4:09:48Branch if the player move is paper so
4:09:52here let's type else if brackets and
4:09:57curly
4:09:58brackets inside this condition we're
4:10:01going to check if the
4:10:03player move is equal to paper this time
4:10:10and then inside these curly brackets
4:10:12we're going going to paste the if
4:10:14statement we copied earlier so right
4:10:17click and
4:10:20paste and we can select these lines and
4:10:23press tab to
4:10:26reformat so now we have the code that
4:10:28determines the result for paper down
4:10:32here we don't need to modify this code
4:10:35because we're always displaying whatever
4:10:37is inside Player
4:10:38move finally we can scroll up to the
4:10:42paper button
4:10:43and remove all this duplicated code and
4:10:47just use our function play
4:10:51game and we're going to pass paper
4:10:56inside so now paper will get saved
4:10:59inside Player move and it's going to run
4:11:03this if statement
4:11:04instead if we
4:11:07save and click the paper
4:11:10button in this example I pick paper
4:11:14computer pick Rock and it calculated the
4:11:16result
4:11:18correctly let's press okay and use this
4:11:22function for the rock button feel free
4:11:25to pause the video if you want to try it
4:11:27yourself
4:11:28first so let's scroll up to the Rock
4:11:31button and first we need to copy this if
4:11:34statement into the function so let's
4:11:38rightclick
4:11:40copy and then inside the function
4:11:44let's create a branch for rock else if
4:11:50Player move is equal to
4:11:55rock and then curly brackets and inside
4:11:58here we're going to rightclick and paste
4:12:02the if statement we copied
4:12:04earlier and now let's select these lines
4:12:07and press tab a few times to
4:12:10reformat and again this doesn't need
4:12:13need to
4:12:14change the last step is to scroll up to
4:12:17our Rock button and instead of
4:12:20duplicating all of this code we're going
4:12:23to remove it and just call our function
4:12:27instead play game brackets and then
4:12:32inside we'll have the string
4:12:36Rock now let's
4:12:38save and click the rock
4:12:41button so I picked Rock the computer
4:12:45picked paper and we calculated the
4:12:47result
4:12:48correctly let's press okay so by using a
4:12:53function with a parameter we were able
4:12:55to reuse all of the code in our buttons
4:12:59and you can see that it made our code a
4:13:01lot cleaner so lastly notice that inside
4:13:05a function we can call other functions
4:13:09let's go through the code step by step
4:13:11so that we understand how how it works
4:13:14so here when we call the play game
4:13:18function we go inside here and then we
4:13:21call the pick computer move function so
4:13:24now we're going to go inside this
4:13:27function and run all the code and then
4:13:30when this function returns we're going
4:13:33to return back to where we called it and
4:13:37then keep going and run the rest of the
4:13:40code and then when the play game
4:13:42function finishes it's going to return
4:13:45back to
4:13:47here so inside a function we can call
4:13:51other
4:13:52functions now one last thing we're going
4:13:54to do for this code is we'll scroll
4:13:58down and we're just going to add some
4:14:00new lines to this if statement to
4:14:03separate the branches and make the code
4:14:05a little easier to
4:14:09read and
4:14:11save and let's scroll
4:14:14up and that's the end of this
4:14:16lesson in this lesson we learned about
4:14:19functions which let us reuse code we
4:14:23learned how to get a value out of a
4:14:25function using return we learn how to
4:14:28put values into a function using
4:14:31parameters and we improve the code for
4:14:34our rock paper scissors project by
4:14:37reusing the code and removing
4:14:39duplication
4:14:43thanks for watching this course so far
4:14:45if you want to support this channel you
4:14:47can check out the premium version of my
4:14:49courses just like this one where you can
4:14:51get a certificate of completion and a
4:14:54Better Learning platform if you're
4:14:56interested in extra videos from me more
4:14:59in-depth videos and behind the scenes
4:15:01content you can check out these links
4:15:04here you can also support the channel by
4:15:07liking the video subscribing and sharing
4:15:09this video with others thanks again and
4:15:12let's go continue with the
4:15:15course here are some exercises you can
4:15:17do on your own to practice using
4:15:20functions
4:15:48in this lesson we're going to learn
4:15:49another type of value in JavaScript
4:15:52called objects and we're going to use
4:15:55objects to create a score in our rock
4:15:58paper scissors project first let's
4:16:01create a new file for this lesson we'll
4:16:04go to our code editor and click this
4:16:08icon and then click this icon to create
4:16:11a new file and we'll name this file
4:16:1608-
4:16:18objects.
4:16:19HTML and press
4:16:22enter next we'll copy all the code in
4:16:25functions. HTML to objects. HTML so
4:16:30we'll type here and press contrl a or
4:16:33command a to select the code and then
4:16:36right click
4:16:38copy and in
4:16:41here right click
4:16:43and
4:16:44paste now let's hide the files for now
4:16:48and we'll prepare this file for this
4:16:50lesson so we can change this to objects
4:16:55and remove all the code in the script
4:16:59element finally let's save and open this
4:17:04in live server by right clicking open
4:17:07with live
4:17:09server and let's also open the console
4:17:12on on this page so we'll right click
4:17:16click
4:17:17inspect and click the
4:17:21console let's close our previous
4:17:24tabs and also the previous
4:17:29code and now we're ready to learn
4:17:31objects so what is an object an object
4:17:36groups multiple values together let's do
4:17:39an example and create our first object
4:17:43we'll go to the script element and we'll
4:17:45create a variable using const and we'll
4:17:50name this variable product and make it
4:17:53equal to open curly bracket close curly
4:17:57bracket and semic it so this is an
4:18:02object inside this object we can add
4:18:05some values so we'll type enter and then
4:18:10Name colon and then a value like the
4:18:14string
4:18:16socks and at the end we'll type a
4:18:20comma and then price colon and another
4:18:25value like the number
4:18:291,90 so inside our object we just added
4:18:32two values so at the bottom here let's
4:18:36try console. logging this object
4:18:39console.log
4:18:44product and
4:18:46save and it will display both values
4:18:50into the
4:18:51console so as you can see an object lets
4:18:55us group multiple values together so for
4:18:58each of these values we have some code
4:19:01on the left this code is called the
4:19:04property and using the property we can
4:19:06access specific values in the object for
4:19:10example let's type and enter and
4:19:16console.log we're going to type the
4:19:19object product and then a DOT and then a
4:19:23property like
4:19:26name so dot name Will access the value
4:19:30that is associated with the name
4:19:33property which is the string socks so if
4:19:36we
4:19:37save it will display the string socks in
4:19:41the console
4:19:42let's do another example and we'll
4:19:44access this second value using the
4:19:47property price so we'll type enter
4:19:52console. log the object product and then
4:19:58a DOT and then a property
4:20:02price so this will access the value
4:20:05associated with price which is
4:20:091,090 if we save
4:20:12that's what gets displayed in the
4:20:15console now we can also use the property
4:20:18to change a value inside an object to do
4:20:22that we're going to type the object's
4:20:25name product and then Dot and a property
4:20:30like name and just make it equal to
4:20:34something else like the string cotton
4:20:40socks so this code will change change
4:20:42the value associated with the name
4:20:45property to cotton socks so at the
4:20:49bottom if we type
4:20:53console.log the product
4:20:56again and
4:20:58save you'll notice the value associated
4:21:01with the name property was changed to
4:21:03cotton
4:21:04socks so that's how an object works we
4:21:08group multiple values together and then
4:21:10we can access or change these values
4:21:13using the properties on the left now
4:21:16let's learn the syntax rules for objects
4:21:20to create an object we start with an
4:21:22open curly bracket and end with a closed
4:21:25curly bracket inside the object we can
4:21:28put multiple
4:21:30values for each value the code on the
4:21:33left is called the property this is how
4:21:36we access the value inside the object we
4:21:40separate the property and value with a
4:21:43colon and this is called a property
4:21:46value pair we can have many property
4:21:49value pairs in an object and we separate
4:21:52them with a
4:21:54comma to access a value inside the
4:21:57object we type the object's name and
4:22:00then Dot and then the property we want
4:22:03to access like name this will give us
4:22:06the value associated with the name
4:22:10property this syntax is called do
4:22:13notation if we access a property that
4:22:16doesn't exist the value will be
4:22:19undefined to change a value in an object
4:22:22we can use the dot notation again so
4:22:26product. name and just make it equal to
4:22:29something else now using the syntax we
4:22:32can also add a value to an object we can
4:22:36type a property that doesn't exist for
4:22:39example here we can type
4:22:43product do new
4:22:47property and make this equal to
4:22:49something like the Boolean value
4:22:53true if we
4:22:56console.log the product
4:22:59again and
4:23:02save it will add this value to the
4:23:04object along with the new
4:23:07property we can also remove a value from
4:23:10an object by typing
4:23:14delete and then the object
4:23:17product Dot and then the property we
4:23:20want to delete like new
4:23:25property if we
4:23:29console.log the product
4:23:32again and
4:23:35save this code will delete new property
4:23:38from the
4:23:39object and lastly notice that then an
4:23:42object is just another type of value we
4:23:45can save an object inside a variable and
4:23:49we can also console.log objects if we
4:23:53check the type of this value so type of
4:23:58product and
4:24:00save and scroll up in the
4:24:02console it will tell us that product is
4:24:06an object so let's remove
4:24:09this and Save
4:24:13and now we'll learn why we use objects
4:24:16so objects make our code more
4:24:19organized instead of creating a bunch of
4:24:21variables for the products values like
4:24:24the name and the price and other details
4:24:28we can just group all these related
4:24:30values together into one object objects
4:24:34also allow us to use multiple values
4:24:37together instead of console. logging
4:24:40each of these values individually we can
4:24:42just console log the whole object and
4:24:45display all the values at
4:24:48once so objects let us group multiple
4:24:51values together and let us use multiple
4:24:54values
4:24:56together next let's do a practical
4:24:59example with objects we're going to add
4:25:01a score to our rock paper scissors game
4:25:05so I've actually prepared a project we
4:25:07can use for this lesson to see this
4:25:09project we're going to go to our website
4:25:12and then create a new
4:25:14tab and then up here we're going to type
4:25:19super simple dodev SL projects
4:25:26slobs and press
4:25:29enter so this is our simplified rock
4:25:32paper scissors game again except in this
4:25:34project when we play the
4:25:36game it's also going to keep track of a
4:25:39score so how many times we win lose and
4:25:43tie and also if we click
4:25:47okay we have a reset score button so if
4:25:51we play the game a few
4:25:54times and add to our
4:25:57score and then click the reset score
4:26:00button this will reset the score back to
4:26:03zero so if we play the game again the
4:26:06score starts from zero
4:26:08again so we're going to learn how to use
4:26:11objects to create create this feature
4:26:14let's press
4:26:15okay and first let's create a copy of
4:26:19our project just for this lesson we'll
4:26:22go to our code editor and click this
4:26:25icon to show our files and we'll make a
4:26:28copy of the rock paper scissors project
4:26:30from the previous lesson so we'll
4:26:33rightclick and
4:26:35copy and down here right click and
4:26:40paste and we we right click and rename
4:26:45this
4:26:45file we'll remove the copy at the end
4:26:49and at the front we'll change this to 08
4:26:54and press
4:26:55enter now let's hide these files and we
4:26:59can close the 07 file for now and let's
4:27:03open this in live server by right
4:27:06clicking and open with live
4:27:10server let's also open the console on
4:27:13this page so
4:27:15rightclick
4:27:16inspect and the
4:27:19console all right now let's go into our
4:27:22code and add a score to our game so
4:27:26remember when writing JavaScript a good
4:27:28strategy is to think about what steps we
4:27:31need to do this is called an algorithm
4:27:35and then convert those steps into code
4:27:38so we already had an algorithm for the
4:27:41rock paper scissors game
4:27:43let's update this algorithm to include
4:27:45the score so first the computer randomly
4:27:49selects a move this step will stay the
4:27:52same number two we're going to compare
4:27:54the moves to get the result this step
4:27:57will also be the same but now we're
4:28:00going to add an extra step after getting
4:28:03the result we're going to update a score
4:28:06and finally we'll display the result and
4:28:09the score in a popup now let's convert
4:28:13these updated steps or this algorithm
4:28:15into code the first thing we need to
4:28:17change is we added a third step we're
4:28:21going to save and update a score so
4:28:24first we need somewhere to save our
4:28:26score so one place we can save it is
4:28:29inside a variable let's go to our script
4:28:34element and at the top we're going to
4:28:37create a variable for our score using
4:28:41const
4:28:42score and make it equal to an
4:28:46object and inside this object we're
4:28:50going to have the property
4:28:53wins so this will keep track of how many
4:28:55wins that we have we'll type colon and
4:28:59the number zero because the score starts
4:29:02at zero and then a comma and then
4:29:06another property
4:29:08losses this will be how many losses we
4:29:11have and then colon and zero and then
4:29:15another comma and ties colon and zero so
4:29:21we use an object here because these
4:29:23values are related to each other you
4:29:26could use separate variables but we're
4:29:28using an object for
4:29:30convenience another thing you'll notice
4:29:33is that we're creating this variable
4:29:35outside of a function and outside of a
4:29:39scope and that's because every time we
4:29:42make a move we need to update the score
4:29:45from last time so in order to save the
4:29:48score from last time we need to keep it
4:29:51outside the function if the score was
4:29:53inside the function the function would
4:29:56create a new score every time which is
4:29:59not what we want so in this situation in
4:30:02order to save a score from last time
4:30:04we're going to keep this variable
4:30:07outside now every time we play the game
4:30:11after we calc calate the result we're
4:30:13going to update the score so let's
4:30:15scroll down to where we calculate the
4:30:18result which is here and then below it
4:30:22we're going to type some new
4:30:24lines and type the code for updating the
4:30:27score so we can do that with an if
4:30:29statement so we'll type if brackets and
4:30:34curly brackets and inside the condition
4:30:37we're going to check if the result is a
4:30:39win if it is a win
4:30:42we're going to update the winds property
4:30:44and increase it by one so down
4:30:48here if the
4:30:51result is equal to the string you
4:30:57win and make sure that this string
4:31:00matches the string up here inside the
4:31:03curly brackets we're going to update
4:31:07score. wins and we'll make it equal to
4:31:13itself plus
4:31:16one so this is how we increase the winds
4:31:19property in the score object by one now
4:31:23remember from the variables lesson that
4:31:25we have a shortcut for increasing
4:31:27something by one and that shortcut
4:31:31is plus =
4:31:351 next let's add another Branch to this
4:31:39if statement for the other two results
4:31:42so else if brackets and curly brackets
4:31:48and in the second condition we're going
4:31:50to check if result is equal to the
4:31:55string you
4:31:57lose and make sure this string matches
4:32:00the string up here so if the result is
4:32:04you lose we're going to update score do
4:32:09losses property and increase it by 1 so
4:32:13plus equal
4:32:151 and finally we'll check if the result
4:32:19is a tie else if brackets and curly
4:32:25brackets
4:32:27result equals to the string
4:32:32tie and here we'll update
4:32:35score. ties plus equal
4:32:401 so we converted this step in the
4:32:42algorithm to code the score starts at
4:32:46zero and every time we play the game
4:32:49after we calculate the result we're
4:32:51going to update the score using this
4:32:55code now let's convert the last step
4:32:58into code we're going to display the
4:33:00result and the score in the popup at the
4:33:03end so let's actually go back to the
4:33:06super simple dodev
4:33:08project and we'll see what the popup
4:33:10looks like we'll click one of these
4:33:13buttons and in this popup on the second
4:33:16line we display the score so in our
4:33:20code this is the code that displays that
4:33:23popup so how do we add a second line to
4:33:27the popup remember that template strings
4:33:30have another special feature called
4:33:32multi-line strings so we can type at the
4:33:35end of this template string and press
4:33:38enter to add another line to this Str
4:33:42so here we can type winds colon and
4:33:47we're going to insert a value using
4:33:50Dollar open curly bracket Clos curly
4:33:53bracket and here we're going to insert
4:33:56the number of wins that we have which is
4:33:59score. wins so we'll type score
4:34:05dowins next we're going to show the
4:34:08number of losses that we have so after
4:34:11this
4:34:12let's type a comma and losses colon and
4:34:17insert another
4:34:19value here we'll insert
4:34:22score.
4:34:24losses and finally we'll type a comma
4:34:28and we'll display ties colon and
4:34:32inserted value score dot
4:34:37ties and this will display our score in
4:34:40the popup so let's save this and give it
4:34:43a try we'll click okay and then go back
4:34:47to our Tab and play the
4:34:51game so now on the second line we will
4:34:54display the score one small issue here
4:34:57is that we have a lot of spaces on the
4:34:59second line so these spaces correspond
4:35:02to the spaces here when we use
4:35:05multi-line strings these Extra Spaces
4:35:08will show up in the popup so to remove
4:35:11these SP cases we can just remove them
4:35:13in the code like this now if we
4:35:17save press
4:35:19okay and play the game it will show our
4:35:23score on the second line without those
4:35:25Extra Spaces at the front let's press
4:35:29okay we're going to add one more feature
4:35:32to this project if we go back to Super
4:35:35simple. Dev we have a reset score button
4:35:39which will reset the score back to zero
4:35:41when we click it let's add this button
4:35:44in our project so we'll scroll
4:35:47up and inside the
4:35:50HTML We'll add a button with the code
4:35:54less than button greater than and inside
4:35:58the button we'll have the text reset
4:36:02score and now when we click this button
4:36:06we'll run some code using the onclick
4:36:09attribute equals double quotes and then
4:36:13in here we're going to write some code
4:36:16to reset this score back to
4:36:19zero so one way we can do it is because
4:36:22this score is an object we can use dot
4:36:25notation to change everything back to
4:36:27zero so we can type
4:36:31score. wins and make it equal to zero
4:36:36we'll also type
4:36:38score. losses and make it equal to Z and
4:36:43finally
4:36:45score. ties and make it equal to
4:36:49zero now let's
4:36:51save and go back to our
4:36:54Tab and play the game a few times to get
4:36:58a
4:37:01score let's press okay and press reset
4:37:06score and then play the game again and
4:37:10you'll notice that the score started
4:37:12from zero again so that's how we create
4:37:15the reset score button we just set all
4:37:18of these properties back to
4:37:20zero and that's it that's how we add a
4:37:23score feature to our rock paper scissors
4:37:26project using an object to save the
4:37:30score let's press
4:37:32okay and we're going to learn more
4:37:34details about objects let's go back to
4:37:38objects.
4:37:40HTML and what open the tab for this
4:37:43file and let's also comment out the
4:37:46previous code using
4:37:49slashstar and at the
4:37:51bottom star
4:37:53slash and
4:37:55save now let's scroll to the bottom and
4:37:58we'll do some
4:38:00setup so first let's create a variable
4:38:03with const we'll name it Product 2 and
4:38:08make it equal to another object
4:38:12inside this object we have the property
4:38:15Name colon and the string
4:38:19shirt and we're going to console.log
4:38:22this object so
4:38:26console.log Product 2 and
4:38:31save so the next detail we're going to
4:38:34learn about objects is another way to
4:38:37access the values
4:38:38inside we previously learned the
4:38:41notation to do this for example
4:38:47console.log product
4:38:50to.
4:38:53name this will access the value
4:38:56associated with the name
4:38:58property in JavaScript we have another
4:39:01way of accessing values inside objects
4:39:04which is using square brackets so we'll
4:39:07create a new line and type console
4:39:11do
4:39:13log product 2 and this time we'll type
4:39:18square
4:39:19brackets and then inside the square
4:39:21brackets we'll have a string with
4:39:25name so this is called bracket notation
4:39:30and this does the same thing as dot
4:39:32notation up here it gets the value
4:39:35associated with the name property if we
4:39:40save these two lines of code both access
4:39:43the string shirt which we see here so
4:39:47when do we use the bracket notation
4:39:49instead of the dot notation bracket
4:39:52notation lets us use properties that
4:39:55normally don't work with do notation for
4:39:59example at the bottom we can type
4:40:05console.log Product 2 and then use a DOT
4:40:10and try to access a property called
4:40:16delivery-time if we
4:40:19save this property will give us an error
4:40:23and that's because JavaScript thinks
4:40:25that this Dash is a minus sign and it's
4:40:27trying to do math so in order to use a
4:40:31property like this we have to use
4:40:33bracket notation so we're going to
4:40:36replace the dot with square
4:40:40brackets and and turn this into a
4:40:44string now if we
4:40:46save it no longer gives us an error and
4:40:50because delivery time does not exist in
4:40:53the object we get the value
4:40:56undefined so using bracket notation we
4:40:59can also add values to the object when
4:41:02we create it so here we can add a
4:41:06comma and we'll add another property
4:41:09using bracket notation and a string
4:41:16delivery-time and a colon and then a
4:41:19value like the string one
4:41:22day if we
4:41:24save this lets us add a delivery-time
4:41:28property to this object so as you can
4:41:32see bracket notation lets us use
4:41:35properties that normally don't work with
4:41:37DOT
4:41:38notation another feature of bracket
4:41:41notation is that between the brackets we
4:41:44don't just have to use a string we can
4:41:47use a variable a calculation or anything
4:41:50that results in a
4:41:52value so you might be wondering which
4:41:54one should we use do notation or bracket
4:41:58notation we usually use do notation by
4:42:02default because it's shorter and easier
4:42:04to read but if we need to use properties
4:42:07that don't work with do notation then we
4:42:10use bracket not
4:42:11notation now a shortcut here is when we
4:42:15create the object if we only have a
4:42:17string between the brackets the brackets
4:42:20are actually optional so we can just
4:42:23type this if we save the code will still
4:42:28work okay the next detail we're going to
4:42:31learn is that inside an object we can
4:42:34save any type of value so this includes
4:42:38numbers strings booleans
4:42:41as well as other objects because
4:42:44remember objects themselves are also
4:42:47values for example we can type a comma
4:42:51and add a property called
4:42:54rating colon and then an object open
4:42:58curly bracket close curly bracket and
4:43:02inside this inner object we can add more
4:43:05properties like stars colon 4.5
4:43:12this is how many stars a product has and
4:43:16then a comma and a property called count
4:43:20colon
4:43:2287 this is how many ratings a product
4:43:25has so this is called a nested object or
4:43:30an object inside an object we can use
4:43:33nested objects to make our values more
4:43:36organized so inside the product the
4:43:39number of stars that has and the number
4:43:42of ratings that it has are both related
4:43:45to a rating so it makes sense to group
4:43:48them together further inside the
4:43:51product now to access values inside the
4:43:55inner object we just use the dot
4:43:57notation or bracket notation multiple
4:44:00times for example at the bottom we can
4:44:04type
4:44:09console.log product
4:44:112 dot
4:44:14rating this will get the value
4:44:17associated with rating and this is an
4:44:21object so we can use the dot notation
4:44:24again
4:44:26count so this will get the count inside
4:44:29the rating object which is this value
4:44:33right here so if we save it will display
4:44:3887 and finally another type Ty of value
4:44:41we can put in an object is a function so
4:44:45in this object let's type comma and
4:44:49another property
4:44:51fun colon and we're going to create a
4:44:54function here so let's type
4:44:57function and we'll name the function
4:45:01Function One brackets and curly brackets
4:45:05and then inside the function we're going
4:45:07to have some JavaScript code like usual
4:45:11so
4:45:12console. log the string
4:45:17function inside
4:45:21object this saves a function inside the
4:45:25object and this works because a function
4:45:28is actually just another type of value
4:45:31in JavaScript but we'll learn more about
4:45:34this feature of functions later in this
4:45:36course for now just know that functions
4:45:40are also values and we can save them in
4:45:43an object to access this function we can
4:45:46use the dot or bracket notation as usual
4:45:50so at the
4:45:51bottom we can type the object Product 2
4:45:58and then a DOT and then the property
4:46:01fun so this will access the value
4:46:04associated with the fun property which
4:46:07is a function and because this is a fun
4:46:10function we can call it as usual using
4:46:15brackets if we
4:46:17save this will run the function here and
4:46:22it will display function inside object
4:46:25into the
4:46:27console so when we save functions inside
4:46:30an object this is called a method and
4:46:34we've actually been using methods this
4:46:36whole time
4:46:38console.log is actually a method
4:46:41console is an object provided by
4:46:44JavaScript and log is a function that is
4:46:48saved inside the console
4:46:50object if we go to the bottom and type
4:46:56console.log type of
4:47:01console and
4:47:04save this will confirm that console is
4:47:07just an object and if we change this to
4:47:12console.log and
4:47:15save this will show us that console.log
4:47:18is a function so log is a function that
4:47:22is saved inside the console object so we
4:47:26call this a method another example of a
4:47:29method is math.random which we used in
4:47:33the rock paper scissors project math is
4:47:36also an object provided by JavaScript
4:47:40and random is a function saved inside
4:47:43the math object so we call math.random a
4:47:47method as well so we've actually been
4:47:50using objects and methods all throughout
4:47:53this course and now we understand all
4:47:55the code that we've been using so far
4:47:59next we're going to learn about builtin
4:48:01objects so the console object and the
4:48:04math object are known as builtin objects
4:48:08because they are built in to the
4:48:09language they provided by the
4:48:12language we're going to learn two more
4:48:15built-in objects called Json and local
4:48:18storage and we will use these objects to
4:48:21improve our rock paper scissors project
4:48:25let's start with the Json built-in
4:48:28object this object helps us work with
4:48:30something called
4:48:32Json Json stands for JavaScript object
4:48:36notation the easiest way to understand
4:48:38Jason is it's BAS basically a syntax
4:48:42it's a similar syntax to a JavaScript
4:48:45object but it has less features for
4:48:49example the code on the left uses
4:48:51JavaScript object syntax and the code on
4:48:54the right uses Json syntax so one
4:48:58difference is that all properties and
4:49:00strings must use double quotes in Json
4:49:04Jason does not support single quotes
4:49:07another difference is that Json does not
4:49:09support function functions so as you can
4:49:12see Json is basically a syntax that's
4:49:16similar to a JavaScript object syntax
4:49:19but with less
4:49:20features so why would we use Json syntax
4:49:24instead of a JavaScript object
4:49:26syntax a JavaScript object only makes
4:49:29sense in
4:49:31JavaScript on the other hand Json syntax
4:49:34can be understood by almost every
4:49:36programming language so Json syntax is
4:49:40more un
4:49:41Universal for this reason we use Json
4:49:44when we send data between two computers
4:49:47that might use different programming
4:49:49languages we'll learn how to do this
4:49:51later in the course we also use Json
4:49:55when we store data we'll learn how to
4:49:57store data in this
4:49:59lesson now that we understand what Json
4:50:02is let's learn about the built in Json
4:50:06object the Json object helps us convert
4:50:09a JavaScript object to Json for example
4:50:14let's convert our object product two to
4:50:17Json so we'll create some new
4:50:20lines and we'll type the Json object do
4:50:26stringify and Open Bracket close bracket
4:50:30so stringify is a method of the Json
4:50:33object so it's a function that is saved
4:50:36inside this object and we can call this
4:50:39function using
4:50:41brackets between the brackets we can
4:50:43give it a JavaScript object we want to
4:50:46convert like Product
4:50:502 this will convert the object into Json
4:50:54so now let's
4:50:56console. log the
4:51:01result and
4:51:04save and in the console it will display
4:51:07the product using Json syntax if we we
4:51:10scroll up you'll notice that the
4:51:13function that we saved in the object is
4:51:15not inside the Json and that's because
4:51:18Json does not support
4:51:20functions so one thing to note about
4:51:23stringify is that it actually results in
4:51:26a string so at the front if we type type
4:51:31of and
4:51:33save it will tell us that the result
4:51:36that it gives is actually a
4:51:39string so if we remove
4:51:41this and
4:51:44save now this Json string is ready to be
4:51:47sent to another computer or to be saved
4:51:50in
4:51:51storage next let's learn how to convert
4:51:54the other way from a Json back to a
4:51:57JavaScript object to do that we'll use
4:52:01another method in the built-in Json
4:52:03object called json.parse
4:52:07at the end we'll type Jon
4:52:11dop
4:52:13pars and
4:52:15brackets and between the brackets we can
4:52:18put a Json string that we want to
4:52:20convert so we actually have a Json
4:52:22string up here so let's just make a copy
4:52:26of this we'll select it
4:52:29rightclick
4:52:31copy and let's create an extra variable
4:52:34to make it more clear const Json string
4:52:40and make get equal to right click and
4:52:46paste and now let's convert this Json
4:52:49string back into an object by putting it
4:52:52into
4:52:54pars and finally we console.log this
4:52:58result so
4:53:05console.log and
4:53:07save and json. pars will turn the Json
4:53:11string back into a JavaScript object so
4:53:15that's the built-in Json object it helps
4:53:18us convert back and forth between a
4:53:21JavaScript object and
4:53:24Json now we're going to learn the next
4:53:27built-in object called local storage
4:53:30local storage is used to save values
4:53:33more permanently so far we've been
4:53:36saving our values in
4:53:38variables however variables are
4:53:41temporary they only exist on the current
4:53:44page if we refresh the page or close the
4:53:47page all the variables are deleted for
4:53:51example if we go back to our rock paper
4:53:54scissors
4:53:55project and open the tab for this
4:53:58project and we play a few
4:54:01games and play it again so we have two
4:54:06games if we refresh the page
4:54:10notice the score starts from zero again
4:54:14and that's because when we refresh the
4:54:15page all of these variables are deleted
4:54:18and the score gets reset back to zero
4:54:22however if we press okay and go to
4:54:25superimple
4:54:26dodev and we refresh the page and we
4:54:30play the
4:54:31game notice that the score doesn't start
4:54:34from zero it starts from the previous
4:54:36score even though we refreshed the page
4:54:40and that's because this project saves
4:54:42the score in local storage and local
4:54:45storage doesn't get deleted when we
4:54:47refresh the
4:54:49page now let's learn how to use local
4:54:52storage in our project let's press okay
4:54:56and we'll go back to our code and we'll
4:54:59scroll down to where we update the
4:55:02score so here after we update the score
4:55:06we're going to save it in local storage
4:55:09but first first let's learn how local
4:55:11storage works so at the bottom here
4:55:15we're going to type the local capital S
4:55:19Storage
4:55:21object to save a value inside local
4:55:24storage it has a method called set item
4:55:28so we can type dot set capital I item
4:55:34and brackets because this is a method or
4:55:38a function saved inside the object
4:55:40object and we're going to give two
4:55:43strings to this method the first string
4:55:46is a name this is how we're going to
4:55:49access the value that we save later so
4:55:52let's use the string
4:55:55message as the name and we'll type a
4:55:59comma and then we'll type the value that
4:56:02we want to save into local storage so
4:56:05local storage only supports strings so
4:56:08let's save the string
4:56:11hello inside local
4:56:13storage if we
4:56:15save and then go back to our Tab and
4:56:19play the
4:56:20game it will run all this code and save
4:56:23this string into local storage now let's
4:56:26learn how to get this string out of
4:56:28local storage we'll press okay and we'll
4:56:32scroll to the
4:56:35top and when we first load the page
4:56:38we're going to get that value out of
4:56:40local local storage by typing local
4:56:44capital S
4:56:46storage. getet item this
4:56:49time and
4:56:51brackets so the get item method gets a
4:56:55value out of local storage and we're
4:56:57going to give it one string so this
4:57:00string is the name that we used earlier
4:57:03which was message so we'll type the
4:57:05string
4:57:07message now let's console log this
4:57:11result so
4:57:16console.log and a bracket at the
4:57:19end and
4:57:21save it will get the value that we saved
4:57:24earlier out of local storage so we saved
4:57:28the string hello and that's exactly what
4:57:31gets displayed in the
4:57:33console so using local storage we were
4:57:36able to get the value that we saved
4:57:38earlier even though we refresh the
4:57:41page now let's save our score into local
4:57:44storage so it doesn't get reset when we
4:57:47refresh the page so let's scroll to the
4:57:52bottom and instead of using the name
4:57:55message we're going to use the name
4:57:57score to save our score and instead of
4:58:01the string
4:58:02hello we're going to save the score
4:58:06object now one problem here is that
4:58:09local storage only supports strings so
4:58:12we need to convert our object into a
4:58:15string and we actually learned how to do
4:58:17this earlier using json.stringify
4:58:20so at the front we can type
4:58:24json.
4:58:27stringify and then brackets around the
4:58:30score and this will convert the
4:58:33JavaScript object score into a Json
4:58:36string and then it's ready to be saved
4:58:39in local store
4:58:41so if we save this and then play the
4:58:45game it will run this code and save our
4:58:48score into local
4:58:50storage now let's press
4:58:53okay and then's scroll up to the
4:58:57top and now instead of getting the
4:58:59message we're going to get the score out
4:59:02of local storage if we
4:59:05save now when we load the page we're
4:59:08able to get the score that we saved from
4:59:11last time as a Json
4:59:13string the last step is instead of
4:59:16resetting the score to zero every time
4:59:19we're just going to use the score from
4:59:21local storage before we do that remember
4:59:24that this is just a string so we need to
4:59:28convert this back to an
4:59:30object we also learned how to do this
4:59:33earlier using json. pars so at the
4:59:38front we can type
4:59:41json. pars and then Open Bracket and at
4:59:45the end a close bracket and it will
4:59:49convert this back to an object if we
4:59:53save it will convert the score from a
4:59:55Json string back to an object so now we
4:59:59can use it up here so instead of doing
5:00:02this we'll remove it and replace it with
5:00:06this code so right click cut
5:00:11and then here right click and
5:00:16paste and we'll remove
5:00:21console.log and
5:00:23save so now when we load the page it
5:00:26will load the score from local storage
5:00:30if we play the
5:00:31game notice that the score doesn't start
5:00:34from zero it starts from the score that
5:00:36we had last time let's review what we
5:00:40did step by step first when we update
5:00:44our score in this code after we update
5:00:48the score we're going to save it in
5:00:50local storage using local storage. set
5:00:54item now local storage only supports
5:00:57strings so we have to convert our score
5:01:00object into a Json string using json.
5:01:05stringify and then after we've saved
5:01:07this into local storage when we load the
5:01:11page up here we're going to load the
5:01:14score that we just saved from local
5:01:17storage using local storage. getet item
5:01:21and the score was saved as a Json string
5:01:24so we need to convert it back into an
5:01:27object using json.parse
5:01:30so that's how we use the Json object and
5:01:34the local storage object to save our
5:01:36score more
5:01:38permanently let's press okay
5:01:40okay and the last feature we're going to
5:01:43add is when we click the reset score
5:01:46button we also need to remove the score
5:01:49from local storage otherwise if we press
5:01:52reset score and
5:01:55refresh and then play the game it will
5:01:58just grab the old score from local
5:02:00storage so reset score doesn't really
5:02:03work here let's press okay and fix this
5:02:07issue so here in the set score button at
5:02:11the end we're going to remove the score
5:02:14from local storage so we'll type
5:02:18local
5:02:19storage and then a method called do
5:02:24remove item and
5:02:27brackets and between the brackets we're
5:02:30going to tell local storage which value
5:02:32we want to remove so we're going to
5:02:34remove the score so we'll type the
5:02:37string score
5:02:40if we
5:02:41save and we click the reset button and
5:02:45then we refresh the page and try to play
5:02:48the game
5:02:49again unfortunately it now gives us an
5:02:52error so what is happening here so
5:02:55remember that we remov the score from
5:02:58local storage so now when we load the
5:03:00page this actually doesn't exist when
5:03:04something doesn't exist in local storage
5:03:07it's going to give us a value called
5:03:09null
5:03:11and at the
5:03:12bottom if we try to access any property
5:03:15on null it will give us an error so
5:03:18that's what we see here so how do we
5:03:21solve this problem if we scroll
5:03:24up one way to solve this problem is that
5:03:28if there is no score in local storage
5:03:31we're going to give it a default value
5:03:34let's look at how we can do that so
5:03:37after this line we're going to check if
5:03:39the score is null we can do that using
5:03:42an if statement if brackets and curly
5:03:47brackets and we'll check if score is
5:03:51equal to
5:03:54null and if it is equal to null we're
5:03:57going to give this a default score so
5:04:00inside the curly
5:04:01brackets we'll just make the score equal
5:04:06to the default object we had earlier
5:04:10which was
5:04:11wins zero and then
5:04:15losses zero and
5:04:18ties
5:04:20zero and remember if we need to reassign
5:04:23a variable we have to change it from
5:04:25const to let if we
5:04:29save the score will be null because we
5:04:32removed it earlier and now this will
5:04:35give it a default score so everything
5:04:38should work as before
5:04:40if we play the
5:04:41game you'll notice that the score starts
5:04:44from zero or this default score and
5:04:47everything is working again so that's
5:04:49how we create the score feature in the
5:04:51rock paper scissors project as well as
5:04:54the reset score
5:04:56feature next we're going to use some
5:04:59shortcuts to simplify our code so these
5:05:02shortcuts are things that we learned in
5:05:04the Boolean lesson so remember that null
5:05:08is a falsy
5:05:10value that means it will behave just
5:05:13like false so a shortcut we can use here
5:05:16is instead of checking if the score is
5:05:19equal to null we can also remove this
5:05:24and check if not
5:05:27score so not score does the same thing
5:05:31as checking if it's null if the score is
5:05:34null not score will flip it into true so
5:05:39both of these will return true if the
5:05:42score exists it's an object then both of
5:05:45these will return false so instead of
5:05:49checking if a value is equal to null we
5:05:52can just use the not operator as a
5:05:56shortcut now also from the boolean's
5:05:58lesson we have an even shorter shortcut
5:06:01for doing this so notice here that this
5:06:05code basically sets a default value if
5:06:08the score doesn't exist in the boolean's
5:06:11lesson we learned a technique called the
5:06:14default operator which is exactly what
5:06:17we need here so on this line we can
5:06:21remove the semicolon and type
5:06:26or and then a default value so we want
5:06:30our default value to be this object so
5:06:33let's select it and then
5:06:36rightclick copy
5:06:40and then here right click and
5:06:45paste and I'll select these lines and
5:06:48press shift tab to remove and indent and
5:06:52I'll add a semicolon back at the
5:06:55end so the way that the default operator
5:06:58works is that if the left side is truthy
5:07:02so in this case we have a score it will
5:07:05use the left side if the left side is
5:07:08falsy or in this case the score is null
5:07:11then we will use the right side as a
5:07:14default value so this does the same
5:07:17thing as this code below but it's just a
5:07:21shortcut so now let's comment out this
5:07:24code using
5:07:27slashstar and at the bottom start slash
5:07:31so we'll leave it here just for
5:07:33reference and then
5:07:35save and if we click reset score again
5:07:40and
5:07:41refresh and play the
5:07:43game it will still work so this is a
5:07:47perfect situation to use the default
5:07:49operator to simplify our
5:07:52code so let's press
5:07:55okay and that's all we're going to do
5:07:57for this project in this
5:08:00lesson now let's move on and learn more
5:08:03details about objects the first thing
5:08:06we'll learn is the value null so null is
5:08:09one of the falsy values in JavaScript
5:08:12it's similar to the value undefined they
5:08:15both represent that something doesn't
5:08:18have a value so what's the difference
5:08:20between null and undefined we use null
5:08:24when we intentionally want something to
5:08:26be empty for example in the previous
5:08:30lesson we learned that if a function has
5:08:33parameters we can give the parameter a
5:08:35default value if the parameter is
5:08:38undefined
5:08:40it will use the default value however if
5:08:43we set this parameter to null it will
5:08:46not use the default value and it will
5:08:48just use null so null means we
5:08:52intentionally want something to be
5:08:55empty in most cases though null and
5:08:58undefined work the same way okay so the
5:09:02next detail about objects we're going to
5:09:04learn is called
5:09:06autoboxing let's go back to objects. HT
5:09:09HML and open the tab for this
5:09:13file and let's also comment out the
5:09:15previous code so our console doesn't get
5:09:17too messy so
5:09:20slashstar and at the
5:09:22bottom star slash and
5:09:26save so let's scroll
5:09:29down we learned in this lesson that
5:09:32objects can have properties and methods
5:09:35so you might be surprised to learn that
5:09:37other values also have have properties
5:09:40and methods for example at the bottom
5:09:44we're going to type
5:09:46console.
5:09:48log the string
5:09:51hello and then the dot notation and a
5:09:55property called
5:09:58length so strings can also have
5:10:01properties the length property tells us
5:10:04how many characters or letters are in
5:10:07this string so hello has five letters so
5:10:11if we save the length property will be
5:10:15five here's another example we'll type
5:10:21console.log the string hello and then
5:10:25the dot notation and a method this time
5:10:292 capital u upper Capital C case and
5:10:36brackets so this string also has a
5:10:39method called two
5:10:42uppercase and this method gives us a
5:10:44copy of the string with all letters
5:10:47capitalized or in
5:10:49uppercase if we save it will give us
5:10:53hello in capital
5:10:55letters so as you can see simple values
5:10:58like strings can also have properties
5:11:01and
5:11:02methods so now you might be wondering
5:11:05these are strings not objects how can
5:11:08strings have properties and methods the
5:11:11answer is that JavaScript has a special
5:11:13feature called Auto boxing JavaScript
5:11:17automatically wraps this string in a
5:11:20special object first and this object has
5:11:23the property length and the method to
5:11:27uppercase so this is done automatically
5:11:29we don't see the special object that's
5:11:32wrapped around this string so this
5:11:35feature is called
5:11:36autoboxing because JavaScript automat
5:11:39automatically wraps the string in an
5:11:41object like a
5:11:43box so autoboxing also works with other
5:11:46types of values like numbers and
5:11:49booleans the only thing is that auto
5:11:52boxing does not work with null and
5:11:55undefined it would just give us an
5:11:58error The Last Detail we're going to
5:12:00learn about objects is a really
5:12:02important detail and that is objects are
5:12:07references to demonstrate let's create a
5:12:10new variable with an object so
5:12:13const object one and make it equal to an
5:12:19object inside this object let's have a
5:12:23property
5:12:24message colon and the string
5:12:29hello so you might think that when we
5:12:31create an object like this we create a
5:12:34value that has other values inside and
5:12:37we save the whole thing and a variable
5:12:40however this actually works a little
5:12:43differently when we create this object
5:12:46the actual value is created somewhere in
5:12:49the computer's memory and this variable
5:12:52actually just gets a reference that
5:12:54points to that location in the
5:12:56computer's memory this is like a
5:12:59shortcut on your computer a shortcut
5:13:02points to where the actual file or
5:13:04folder is so there's no way to actually
5:13:07see this reference but just just know
5:13:09that this is a reference and the object
5:13:12is somewhere else in the computer's
5:13:14memory so the reason it works this way
5:13:17is to make the language more efficient
5:13:19for example below this line we can
5:13:23create a variable const and call it
5:13:27object 2 and make it equal to object
5:13:33one so this code doesn't actually make a
5:13:36copy of the object it this makes a copy
5:13:40of the reference that points to the
5:13:42object so this makes a language more
5:13:45efficient because if we had a really big
5:13:48object here it's not good to copy the
5:13:51entire object over and over again
5:13:54instead Javas just copies the reference
5:13:57which is much faster this is called copy
5:14:00by
5:14:02reference now that we learned that
5:14:04objects are actually references let's
5:14:06learn some interesting behaviors of
5:14:09references so at the bottom here we're
5:14:13going to change the property message in
5:14:16this object we can do that by typing the
5:14:19object object
5:14:221. message property and make it equal to
5:14:27something else like the string good
5:14:32job and now if we
5:14:35console. log object one
5:14:40and
5:14:41save notice that we were able to change
5:14:44the message property even though we
5:14:47created object one with const and that's
5:14:50because this variable just contains a
5:14:53reference that points to the object so
5:14:56const prevents us from changing the
5:14:58reference in the variable but it doesn't
5:15:01prevent us from reaching into the
5:15:03reference and changing the object that
5:15:05it's pointing to so just be careful when
5:15:08you're working with with objects even
5:15:10though we use const we can still change
5:15:13the values inside the object another
5:15:16interesting behavior is that on this
5:15:18line we're not actually copying the
5:15:21object into this variable we're copying
5:15:24the reference so object two actually has
5:15:28the same reference as object one they
5:15:31actually point to the same object in the
5:15:33computer's
5:15:34memory so at the bottom if we type
5:15:38console
5:15:41log object 2 and save you'll notice that
5:15:47for object two the message property was
5:15:50also changed even though we only changed
5:15:53object one the last interesting behavior
5:15:56is that we can't compare objects
5:15:59directly for example let's go to the
5:16:02bottom and we'll create a new object
5:16:06using
5:16:07const object 3 and we'll make it equal
5:16:12to an object and then inside we're going
5:16:15to have these same values as object one
5:16:19so we'll have the property
5:16:22message and the value is the string good
5:16:29job so now let's try comparing object 3
5:16:33to object one so here we'll type console
5:16:39do
5:16:40log and check if object 3 is equal to
5:16:46object
5:16:48one if we
5:16:50save it will tell us that these two
5:16:53objects are not equal to each other even
5:16:56though they have the same values inside
5:16:59and that's because remember objects are
5:17:02references so object 3 also contains a
5:17:06reference and this code compares the
5:17:09references and not the values inside the
5:17:12object so because object 3 is a
5:17:15different reference than object one
5:17:17that's why this code results in
5:17:20false if we
5:17:22did
5:17:24console. log and we check if object 2 is
5:17:30equal to object
5:17:331 object two has the same reference as
5:17:37object one it points to the the same
5:17:39object in the computer's memory so if we
5:17:43save this will tell us that these two
5:17:46variables have the same
5:17:48reference so just remember that when
5:17:50you're comparing two variables that
5:17:52contain objects you're actually
5:17:54comparing the references not the values
5:17:57inside if we want to compare the values
5:18:00inside we would do that manually by
5:18:03checking the message property against
5:18:05this message property so don't worry
5:18:09object references are a little confusing
5:18:11at first but the more you work with it
5:18:13the more you just get used to
5:18:15it the last thing we're going to learn
5:18:17in this lesson are some shortcuts for
5:18:20objects so first let's make a copy of
5:18:24object 3 we'll select the code and
5:18:28rightclick
5:18:31copy and then at the
5:18:33bottom we'll scroll down and right click
5:18:37and paste
5:18:40and let's rename this variable to object
5:18:454 so now let's say that we want to get
5:18:48the message property out of this object
5:18:52we can do that by typing object
5:18:564.
5:18:58message and now let's also say that we
5:19:01want to save this in a variable also
5:19:04called message so at the front we'll
5:19:07type con
5:19:10message and make it equal to this
5:19:15value so now if the variable name and
5:19:18the property name are the same we
5:19:21actually have a shortcut for this to use
5:19:24a shortcut we're going to type const and
5:19:28curly brackets
5:19:31message and make it equal to object
5:19:354 so this shortcut is called
5:19:39destructuring this will take the message
5:19:41property out of object 4 and save it in
5:19:45a variable called message so this line
5:19:48of code does the same thing as the code
5:19:51above so let's comment out this line
5:19:54using double slash and we'll just keep
5:19:56it for reference so at the bottom if we
5:20:00type
5:20:04console.log
5:20:06message and Save
5:20:09it will display good job so the
5:20:12destructuring shortcut took the property
5:20:15out of the object and saved it in this
5:20:18message
5:20:19variable next we can use this
5:20:22destructuring shortcut for multiple
5:20:24properties for example let's add another
5:20:28property to this object using comma and
5:20:31we'll add a price property colon
5:20:37$7.99 and now we can take the price
5:20:40property out of this object by typing
5:20:43after message a comma and
5:20:48price so this will take the price
5:20:50property out of the object and save it
5:20:53in a variable called
5:20:55price if we
5:21:00console.log the
5:21:02price and
5:21:04save it will display $799
5:21:08so that's the destructuring shortcut
5:21:11it's an easier way to take properties
5:21:13out of an
5:21:14object the next shortcut we're going to
5:21:17learn is called the shorthand property
5:21:20so at the bottom let's create some new
5:21:23lines and let's say we want to create a
5:21:25new object so we'll type const and let's
5:21:30name this object 5 and we'll make it
5:21:34equal to an
5:21:36object and inside ins this object let's
5:21:40say we want to create a message property
5:21:43so we'll type message colon and for the
5:21:47value let's type the variable
5:21:52message so what this does is that it
5:21:54takes whatever is inside the message
5:21:56variable and substitutes it into this
5:22:00code so at the bottom if we
5:22:05console.log object 5 and
5:22:10save this object will have a property
5:22:13called message and the value is whatever
5:22:16is inside the message variable which is
5:22:19good job so now we actually have a
5:22:22shortcut for this code if the property
5:22:26and the variable name are the same we
5:22:28can actually just type it out once like
5:22:32message so this code does the same thing
5:22:35as message colon message and this
5:22:38shortcut is called the shorthand
5:22:41property so if we comment out this line
5:22:44using double
5:22:46slash and
5:22:48save you can see that this shortcut
5:22:51creates the same object that we had
5:22:54before the last shortcut we're going to
5:22:56learn is called the shorthand method so
5:23:00at the end let's create a new property
5:23:04comma and let's name it
5:23:07method Po in and we'll save a function
5:23:11in this property so we'll type
5:23:14function and let's name it Function One
5:23:19brackets and curly
5:23:21brackets and inside this function let's
5:23:28console.log
5:23:31method and now here at the
5:23:35bottom let's run this function by Ty
5:23:38typing object 5. method so this will
5:23:43access this function and we'll run it by
5:23:46typing
5:23:48brackets if we
5:23:50save this will run the code in the
5:23:52function and display method in the
5:23:56console so we actually have a shortcut
5:23:58for writing this so at the bottom we can
5:24:02type method again and just type brackets
5:24:06and curly brackets
5:24:11console.log string
5:24:14method so this code does the same thing
5:24:17as the code above so these brackets will
5:24:20create a function just like here so this
5:24:24function name is actually not needed so
5:24:27if we comment out these lines of
5:24:32code and
5:24:34save it will still display method in the
5:24:37console because this is a shortcut for
5:24:41these lines of code so this shortcut is
5:24:44called the shorthand method
5:24:46syntax and that's the end of this lesson
5:24:50in this lesson we learned another type
5:24:52of value called objects objects group
5:24:55related values together we added a score
5:24:59to our rock paper scissors game we
5:25:02learned about built-in objects and used
5:25:05the Json and local storage objects to
5:25:07save our our score more permanently we
5:25:10learned more details about objects like
5:25:13null autoboxing and references and we
5:25:17learned some useful shortcuts like
5:25:19destructuring shorthand properties and
5:25:22shorthand methods here are some
5:25:24exercises to help you practice working
5:25:27with objects
5:25:49in this lesson we're going to learn one
5:25:51of the most important features of
5:25:53JavaScript called the document object
5:25:56model or the Dom and we're going to use
5:25:59the Dom to improve our rock paper
5:26:02scissors project so first we'll create a
5:26:06new file for this lesson let's go to our
5:26:09code editor and click this icon to show
5:26:13our files and then click this icon to
5:26:16create a new file and we'll name this
5:26:20file 09
5:26:24dd.
5:26:26HTML and press
5:26:29enter next let's copy objects. HTML into
5:26:34dom.
5:26:35HTML so we'll click here to open the
5:26:38file file and then click inside and then
5:26:41type contrl A or command a to select the
5:26:45code and then
5:26:47rightclick
5:26:49copy and in
5:26:52here right click and
5:26:56paste now let's hide these files and
5:26:59we'll prepare this file for this lesson
5:27:03so let's scroll to the
5:27:05top and we'll change the title to
5:27:09Dom and let's delete all the JavaScript
5:27:12code from the previous
5:27:16lesson now let's save this file and
5:27:19we'll open it in the browser by right
5:27:22clicking open with live
5:27:26server and let's also open the console
5:27:29on this page we'll right click click
5:27:34inspect and then click the console
5:27:38and now we can close the previous
5:27:42tabs as well as the previous code for
5:27:46now and for this lesson we're going to
5:27:49do an extra step in the setup inside the
5:27:53body we're going to create a
5:27:55button so here let's type the code less
5:28:00than button greater than and inside the
5:28:04button we'll have the text
5:28:07hello now let's
5:28:09save and we should have a button on the
5:28:12page and now we're ready to learn the
5:28:15document object model or the Dom in the
5:28:19previous lesson we learned about objects
5:28:22which group multiple values together we
5:28:25also learned about builtin objects which
5:28:28are objects that are provided by
5:28:31JavaScript some examples of built-in
5:28:34objects are console math Json and local
5:28:40storage the Dom is another builtin
5:28:44object called the document object so
5:28:48let's go to our script element and we're
5:28:50going to type
5:28:52document so this is a built-in object
5:28:56provided by JavaScript and we've
5:28:58actually seen this document object
5:29:00before in the first lesson one of the
5:29:03first pieces of code that we learned was
5:29:06document dot body do inner Capital
5:29:14HTML equals the string hello and
5:29:20semicolon so this code removes
5:29:23everything on the page and replaces it
5:29:25with the text hello if we
5:29:29save it will remove the button and just
5:29:32put
5:29:33hello and now that we learned objects in
5:29:36the previous lesson we can fully
5:29:38understand this
5:29:40syntax document here is a built-in
5:29:43object and this is the dot notation this
5:29:47means we're accessing a property of the
5:29:50document object called body now body is
5:29:54also an object so we can use the dot
5:29:57notation again to access a property of
5:30:00the body object called inner
5:30:04HTML and finally we use an equal sign to
5:30:08change the inner HTML property to the
5:30:10string
5:30:12hello but as you can see there's
5:30:15something very special about the inner
5:30:17HTML property when we change this
5:30:20property it also changes the web page so
5:30:24this document object and the web page
5:30:27are linked together let's do another
5:30:31example we'll go to the end here and
5:30:33press enter and we'll type the document
5:30:37object again
5:30:38and we'll use the dot notation again and
5:30:41this time let's access the property
5:30:45title and we'll change the title
5:30:47property using an equal sign and we'll
5:30:50change it to the string good
5:30:55job if we
5:30:57save changing the title property we'll
5:31:01also change the title at the top of the
5:31:04tabs here so now this says good job
5:31:08again as you can see the document object
5:31:11is linked to the web page so from these
5:31:15examples it shows us that the document
5:31:17object represents or models the web page
5:31:22and that's why we call this feature the
5:31:24document object model or the
5:31:28Dom now that we know what the Dom means
5:31:32let's learn the syntax rules for the Dom
5:31:35so the Dom is just this built in
5:31:38document object and this object works
5:31:41the same way as any other object it
5:31:44contains properties like body and title
5:31:48that we can access using the dot
5:31:51notation now the special thing about the
5:31:54document object is that it is linked to
5:31:57the web page that means if we change
5:32:00certain properties in this object it
5:32:02will also change the web
5:32:04page now in addition to properties the
5:32:08document object also has methods we can
5:32:11use and we'll learn about them later in
5:32:13this
5:32:15lesson now that we understand the syntax
5:32:18of the document object let's learn about
5:32:21the properties and methods we can use
5:32:24first let's comment out this previous
5:32:26code using
5:32:29slashstar star slash and we'll create
5:32:33some new lines at the
5:32:35top so the first property will we're
5:32:37going to learn is called
5:32:40document.title
5:32:41so this property will give us the title
5:32:45at the top of the tabs here so if we
5:32:48console.log this property
5:32:55console.log and
5:32:57save this will give us the text at the
5:33:00top which is Dom and that's what gets
5:33:03displayed in the
5:33:05console if we change the doc do. tile
5:33:08property it will change the text at the
5:33:11top of the tab so here if we type
5:33:17document.title and make it equal to the
5:33:21string
5:33:23changed and
5:33:26save now the title at the top of the tab
5:33:29will be
5:33:31changed so as you can see the title
5:33:34property is linked to the title at the
5:33:37top of the tab
5:33:38we can use it to get the title and we
5:33:41can also use it to change the
5:33:44title next we're going to learn another
5:33:46property called
5:33:49document.body so let's go into our
5:33:52code and let's type
5:33:58document.body now document.body is a
5:34:01very special property so this will
5:34:04literally get this body HTML element
5:34:07element and put it inside our
5:34:11JavaScript so let's actually console.log
5:34:14this to see how it works
5:34:19console.log Open
5:34:21Bracket and then close bracket and
5:34:25save and inside the console it will tell
5:34:29us that
5:34:30document.body is the body HTML element
5:34:34and if I hover over this it will tell us
5:34:37that it is a exactly the body on our
5:34:39page if I expand this you can see that
5:34:43this code is exactly the code that we
5:34:46have here and this shows us one of the
5:34:49most important features of JavaScript we
5:34:52can have HTML elements inside
5:34:55JavaScript the document object or the
5:34:58Dom combines JavaScript and HTML
5:35:02together and it gives JavaScript control
5:35:05of the web page
5:35:07okay so now that we have an HTML element
5:35:11inside our JavaScript what can we do
5:35:13with it a really important thing to know
5:35:16is that when an HTML element is inside a
5:35:20JavaScript like this the HTML element is
5:35:23converted into a JavaScript object so
5:35:27for example if we do
5:35:31console.
5:35:32log type of document do
5:35:39body and
5:35:42save it will tell us that the body HTML
5:35:45element is just an object when it's
5:35:48inside
5:35:50JavaScript so just like any other object
5:35:53this has properties and methods we can
5:35:56use so one useful property of the body
5:36:00element is inner HTML which we saw
5:36:03earlier so down here let's type
5:36:09document dot body dot inner Capital
5:36:17HTML so the inner HTML property controls
5:36:22all the HTML inside the body that's why
5:36:26it's called inner
5:36:28HTML so if we access this property it
5:36:31will give us all the HTML inside the
5:36:35body so let's console.log to
5:36:38confirm
5:36:43console.log and
5:36:46save and inner HTML will give us all of
5:36:50this HTML inside the body
5:36:53element and if we change the inner HTML
5:36:56property it will change the HTML inside
5:37:00the body element so let's create a new
5:37:03line and we'll type document
5:37:07dot
5:37:09body do inner Capital
5:37:14HTML and we'll change it to the string
5:37:20changed so this will replace all of the
5:37:23HTML inside the body with a text changed
5:37:28if we
5:37:29save that's exactly what it does and we
5:37:32can actually confirm this by going into
5:37:35the elements tab so this tab is for HTML
5:37:39and CSS we can find the body element
5:37:43expand it and you can see all of the
5:37:47HTML that we had before was replaced
5:37:50with
5:37:51changed and don't worry about this part
5:37:54this part is just added by live server
5:37:57after so this shows that inner HTML
5:38:00gives us control of all the HTML inside
5:38:04the body we can get this h HTML and we
5:38:08can also change this
5:38:11HTML now another feature of inner HTML
5:38:15is that we can replace this HTML with
5:38:19new HTML code not just text so for
5:38:23example instead of just text we can
5:38:26replace it with the code less than
5:38:29button greater than and also less than
5:38:34slash button greater than so so this is
5:38:37HTML code for creating a button and
5:38:41inside the button let's put the text
5:38:45good
5:38:46job and now this code will replace all
5:38:50the HTML inside the body with this new
5:38:55HTML if we
5:38:57save it removes all the previous HTML
5:39:00and this new HTML creates this button so
5:39:05using this inner HTML property
5:39:08JavaScript can replace the HTML inside
5:39:11the body to whatever we want we have
5:39:14full control of the web
5:39:16page all right now we're going to learn
5:39:19a method of the document object that we
5:39:22can use as a reminder a method is a
5:39:25function that is saved inside an
5:39:29object so we're going to learn a very
5:39:31important method called document. query
5:39:36selector we just learned that
5:39:38document.body lets us get the body
5:39:41element and put it inside our
5:39:45JavaScript document. query selector lets
5:39:48us get any element from the page and put
5:39:51it inside our JavaScript let's give it a
5:39:54try so first we'll comment out the
5:39:57previous code using
5:40:01slashstar and star
5:40:03slash let's create some new lines at the
5:40:06top
5:40:08and let's type
5:40:11document. query capital S
5:40:16selector and
5:40:19brackets so document. query selector
5:40:22lets us get any element from the page
5:40:24and put it inside our
5:40:27JavaScript between these brackets we're
5:40:29going to put a string this string tells
5:40:33JavaScript which HTML element to get
5:40:36from the page
5:40:37so if we type
5:40:40button this will get the first button
5:40:43element from the page and put it inside
5:40:46our JavaScript so let's console.log this
5:40:49to
5:40:50confirm
5:40:52console.
5:40:54log close bracket and
5:40:58save and let's go back to our
5:41:01console now it will tell us that
5:41:04document. query selector got this button
5:41:07element and put it inside our JavaScript
5:41:11which you can see in the console and if
5:41:14I hover over this button element it will
5:41:16tell us that it is exactly the button on
5:41:19the page so that's what document. query
5:41:22selector does it can get any element
5:41:25from the page and put it inside our
5:41:28JavaScript this string tells it which
5:41:31element to get if we type button it will
5:41:35get the first button element from from
5:41:37the page if we type
5:41:40body this will now get the first body
5:41:43element from the page so it will do the
5:41:46same thing as
5:41:48document.body but for now let's just
5:41:51change this back to Button as an example
5:41:56and
5:41:57save so remember when an HTML element is
5:42:01inside JavaScript it's just a JavaScript
5:42:04object so this button element
5:42:08is also just an object and it has
5:42:11properties and methods we can
5:42:13use every HTML element actually has a
5:42:17property called inner
5:42:19HTML which lets us control the HTML
5:42:22inside the element so for this button
5:42:26element let's type at the end dot inner
5:42:33HTML and this will give us the HTML
5:42:36inside the button if we
5:42:40save it will give us
5:42:42hello and again if we change the inner
5:42:46HTML property it will change the HTML
5:42:50inside the button so let's make a copy
5:42:53of this code we'll select it and
5:42:57rightclick
5:42:59copy and down
5:43:01here right click and
5:43:05paste and let's change the inner HTML
5:43:09property using an equal sign and the
5:43:12string
5:43:15changed so this will only change the
5:43:18HTML inside the button which is here to
5:43:23changed if we
5:43:26save you can see that the text inside
5:43:28the button is now changed a little
5:43:32syntax shortcut I'm going to show you is
5:43:34that for the dot notation we can
5:43:37actually put it on multiple lines so we
5:43:40can type document. query selector and
5:43:43then put doin HTML on a separate line to
5:43:47make it easier to read and make sure to
5:43:50put a tab at the front so that we know
5:43:52it's a continuation of the previous
5:43:55line okay so using document. query
5:43:59selector we can get any element from the
5:44:02page put it inside our JavaScript and
5:44:05then we can control the h HML inside
5:44:08that element and this allows us to only
5:44:11change the parts of the page that we
5:44:15need next what if we have two buttons on
5:44:18the page so let's go up here and we'll
5:44:22create another button using less than
5:44:26button greater than and we'll have the
5:44:29text
5:44:31second
5:44:33button and
5:44:36Save so now we have two buttons on the
5:44:39page but document. query selector will
5:44:42only get the first button on the page
5:44:45how do we get this second button the
5:44:49solution is that we're going to add an
5:44:51attribute to this button called the
5:44:53class attribute so in the opening tag
5:44:57we're going to type space class equals
5:45:02double quotes So the class attribute
5:45:05sort of adds a label to this button so
5:45:09inside the double quotes we're going to
5:45:11label this button a JS dash
5:45:17button and now that we labeled this
5:45:19button we can select it using document.
5:45:23query
5:45:24selector so at the bottom here we'll
5:45:28type
5:45:30document. query selector again and
5:45:35brackets and we'll type A String inside
5:45:39and this time we're going to start with
5:45:41a DOT when we start with a DOT this
5:45:44means that it's going to look for a
5:45:46class rather than an element name so
5:45:50we're going to look for the class
5:45:53js-
5:45:55button and now document. query selector
5:45:58will select an element with the class JS
5:46:02button which is this element here so
5:46:05let's confirm this by
5:46:08console. logging this
5:46:12code and
5:46:14save and now you will see that this code
5:46:18gives us the second button on the page
5:46:22so using a class attribute and then
5:46:24starting with a dot in query selector we
5:46:27can get any specific element from the
5:46:30page and put it in our
5:46:32JavaScript by the way when we start with
5:46:35a DOT this is called called a class
5:46:38selector and this is also used in CSS to
5:46:41style elements with a specific class in
5:46:45fact anything we use in CSS can also be
5:46:48used in this
5:46:49string and also a common practice is to
5:46:52start the class with
5:46:55js- to make it clear that this class is
5:46:58being used in
5:47:00JavaScript and again HTML elements are
5:47:04JavaScript objects so this second button
5:47:07is also just an object and remember
5:47:11objects are values and we can save them
5:47:14inside a variable so instead of
5:47:19console.log let's create a variable
5:47:22using const and we'll name the variable
5:47:26button capital E
5:47:30element we usually end the variable name
5:47:33with element or LM to make it clear
5:47:36clear there's an HTML element inside
5:47:39this
5:47:40variable and finally we'll type an equal
5:47:43sign to save this element and we can
5:47:47remove this extra
5:47:49bracket and now if we console.log this
5:47:53variable
5:47:57console.log
5:47:58button
5:48:00element and
5:48:03save it will tell us that the second
5:48:05button was Sav saved inside this
5:48:08variable so using the Dom we can get
5:48:12HTML elements from the page put it
5:48:15inside a JavaScript and then save it in
5:48:18a variable so the Dom combines
5:48:21JavaScript and HTML together it gives
5:48:24JavaScript full control of the web
5:48:28page all right now that we learned how
5:48:30to use the Dom let's do some practical
5:48:34examples so I've actually prepared some
5:48:36projects that we can do for this lesson
5:48:39to open these projects we'll go to our
5:48:42browser and create a new tab at the
5:48:45top and here we'll type
5:48:49super
5:48:52simple. SL projects
5:48:57slod and press
5:49:00enter on this page we'll be working on
5:49:03three projects the YouTube subscribe
5:49:06button the rock paper scissors project
5:49:08we've been working on for the last few
5:49:10lessons and this Amazon shipping
5:49:14calculator and you'll notice that these
5:49:16projects modify the web page so we're
5:49:19going to be using the Dom to create
5:49:22these projects and in the next lesson
5:49:25we're going to use CSS to style these
5:49:27projects and make them look nice and you
5:49:30can preview that by clicking
5:49:33here so using CSS we can make the sub
5:49:36subscribe button look like the actual
5:49:38subscribe button on YouTube and if we
5:49:41click this link to see the rock paper
5:49:44scissors game you'll see that we'll make
5:49:46it look really nice with these icons but
5:49:50for this lesson we're only going to
5:49:52focus on the functionality and not the
5:49:55styling so let's go back to the projects
5:49:59we'll click back and click back
5:50:02again until we're at projects sdom
5:50:07and we're going to create the
5:50:08functionality for these projects first
5:50:11so before we start let's create a new
5:50:14file just for these projects we'll go to
5:50:17our code editor and click this icon and
5:50:22then click this icon to create a new
5:50:25file let's name this file 09
5:50:31dd-
5:50:33projects. HTML and press
5:50:38enter now let's copy dom. HTML into this
5:50:42file so we'll open it and then click in
5:50:46here and type control a or command a to
5:50:50select the code and then
5:50:53rightclick
5:50:55copy and in
5:50:57here right click and
5:51:02paste now let's close our files and
5:51:05we'll prepare this file
5:51:07so let's scroll up and we'll change the
5:51:09title to Dom
5:51:13projects and let's remove our HTML but
5:51:17keep the script
5:51:20element and we'll also remove the
5:51:23JavaScript from
5:51:26before finally let's save this file and
5:51:30we'll open it in the browser by right
5:51:32clicking open with live server
5:51:37and let's also open the console just in
5:51:40case right click click
5:51:44inspect and then click the
5:51:46console all right we're ready to start
5:51:49with the projects let's go back to super
5:51:52simple
5:51:54dodev and we'll start by creating the
5:51:57YouTube subscribe button let's actually
5:51:59press refresh to get it back to normal
5:52:03and when we click this button it will
5:52:05change to subscribe
5:52:07red first let's create the HTML elements
5:52:11for this project we'll go to the body
5:52:14we'll create some new
5:52:16lines and let's create the paragraph
5:52:19first we'll type less than P greater
5:52:24than and inside the paragraph we'll have
5:52:27the text
5:52:30YouTube
5:52:31subscribe
5:52:33button and now let's create the button
5:52:37so on the next
5:52:38line we'll type less than button greater
5:52:43than and inside the button
5:52:48subscribe now let's save and go back to
5:52:51our
5:52:52Tab and now we have the HTML elements
5:52:56that we need so now let's make this
5:52:58interactive with JavaScript and remember
5:53:01we have a process for this first we'll
5:53:04figure out what steps we need to do this
5:53:07is called an algorithm and then we'll
5:53:10convert these steps into code so the
5:53:13steps that we need here are when we
5:53:16click this button if the text is
5:53:19subscribe we'll change it to
5:53:22subscribed otherwise we'll change it
5:53:24back now let's convert these steps into
5:53:28code let's go to our button element and
5:53:31we're going to add an onclick attribute
5:53:34we'll type space on click equals double
5:53:40quotes and inside here we'll write some
5:53:44JavaScript so first we need to get the
5:53:47text inside the button and we learned
5:53:50how to do this earlier we can use
5:53:52document. Query selector to put this
5:53:55button into our JavaScript and then use
5:53:58inner HTML to get this HTML inside the
5:54:03button so in our code let's type
5:54:08document. query
5:54:11selector brackets and a string and as we
5:54:16learned we're going to use a class
5:54:18attribute to select this specific button
5:54:22so in the opening tag let's add a class
5:54:27attribute and let's make the class
5:54:32js-
5:54:34subscribe Dash
5:54:37button and then inside document. query
5:54:40selector we're going to type a DOT to
5:54:43select a class and we're going to select
5:54:45the class
5:54:48js-
5:54:50subscribe Das
5:54:53button and now let's console.log this to
5:54:56confirm that we got this button so at
5:55:00the front
5:55:05console.log and
5:55:07save and now let's click our
5:55:10button and it will show us that
5:55:12document. query selector got the button
5:55:15on the page so now let's save this
5:55:18button in a variable so we can use it
5:55:21later instead of
5:55:24console.log let's type const to create a
5:55:28variable and we'll name it
5:55:31button
5:55:33element and make it equal to this
5:55:37result so now that we have the button
5:55:40inside our JavaScript we're going to
5:55:42check if the text inside the button is
5:55:46subscribe to check the text we can use
5:55:49an if statement so at the bottom here
5:55:52we're going to type if brackets and
5:55:56curly
5:55:57brackets and inside this condition let's
5:56:01get the text inside the button so we'll
5:56:04type button
5:56:07element do inner Capital
5:56:13HTML and we're going to check if it's
5:56:15equal to subscribe so we'll type triple
5:56:19equal the string
5:56:24subscribe now if it is equal to
5:56:27subscribe inside the curly brackets
5:56:30we're going to change the text in the
5:56:32button to
5:56:34subscribed so let's type the code
5:56:38button
5:56:39element do inner Capital HTM L and we'll
5:56:45change it with an equal sign to the
5:56:48string
5:56:52subscribed and the last step is
5:56:55otherwise we'll change it back so we'll
5:56:58add an else to this if
5:57:00statement else and curly brackets and
5:57:05inside we're going to change the text
5:57:08back to
5:57:10subscribe so let's type
5:57:13button
5:57:15element. inner Capital
5:57:19HTML and make it equal to the string
5:57:25subscribe and
5:57:27save now before you try out this project
5:57:30make sure that the text inside the
5:57:32button has no spaces or new lines around
5:57:36it and it looks like this and I'll show
5:57:39you why in a second let's go to our
5:57:42project and try it out so when we click
5:57:45this button it will change to the text
5:57:49subscribed if we click it again it will
5:57:52go back to the original text so that's
5:57:55how we create the Subscribe button
5:57:57project using the Dom so now let's go
5:58:01back into our code and I'll show you why
5:58:04if we add new lines
5:58:06and some spaces around this
5:58:08text there's actually going to be some
5:58:11problems so if we save this
5:58:14code and then go back to our project and
5:58:17click the button again you'll notice
5:58:20that it no longer changes the text and
5:58:23that's because now we have a bunch of
5:58:26spaces around this text and these spaces
5:58:29will show up in inner
5:58:32HTML and now inner HTML will not equal
5:58:36exactly
5:58:37subscribe so how do we solve this
5:58:39problem when there are spaces around our
5:58:42text to solve this we're going to use a
5:58:45different property of an HTML element so
5:58:49instead of the inner HTML property we're
5:58:52going to use the property inner capital
5:58:56T
5:58:58text so inner text will give us the text
5:59:02inside this element but without all the
5:59:05spaces around it
5:59:07so now this will equal exactly
5:59:10subscribe if we save and go back to our
5:59:14project and click it again it'll start
5:59:17working again so that's the inner text
5:59:20property of an HTML element it gets us
5:59:24the text without the extra
5:59:26spaces so before we move on to the
5:59:29second project I'm going to show you how
5:59:31to make our code
5:59:33cleaner right now we're mixing a HTML
5:59:37and JavaScript together so to make our
5:59:40code cleaner and easier to read we're
5:59:43going to separate the JavaScript code
5:59:45and to do that we're going to put this
5:59:47code in a function
5:59:49instead so inside the script
5:59:52element let's create a function using
5:59:58function and we'll name the function
6:00:02subcribe brackets and curly brackets
6:00:07and inside these curly brackets we're
6:00:09going to move all of this code so let's
6:00:12select this
6:00:13code and we'll right
6:00:16click
6:00:17cut and in here right click and
6:00:23paste and if we need to fix the
6:00:25formatting we can select these lines and
6:00:28press tab a few times and now that we
6:00:31have this function we're going to go to
6:00:34the onclick attribute and and we're
6:00:36going to call this function so we'll
6:00:38type the function name
6:00:41subscribe and
6:00:44brackets so this will run all the code
6:00:48inside the function so it will do the
6:00:51same thing as before except now our code
6:00:54is cleaner because we grouped all the
6:00:57JavaScript code at the bottom and we're
6:00:59no longer mixing as much HTML and
6:01:02JavaScript
6:01:04together now let's move on to the second
6:01:07project we'll go back to superimple
6:01:10dodev and we're going to work on the
6:01:13rock paper scissors project so let's
6:01:15click this
6:01:17link and it will show us the next
6:01:19version of this project so you notice a
6:01:22few changes here the first change is
6:01:25that we're going to show the score on
6:01:27the page instead of in a popup and the
6:01:31second change is that when we click one
6:01:33of these buttons to play the game it
6:01:36will show us the result and the moves
6:01:39that we picked on the page rather than
6:01:42in a
6:01:43popup let's create a new file for this
6:01:46rock paper scissors game for this lesson
6:01:48so let's go to our code
6:01:50editor and we'll click this icon and
6:01:54click this icon to create a new file and
6:01:57we'll name this
6:02:0009-
6:02:02rock- paper Das
6:02:06scissors.
6:02:08HTML and press
6:02:11enter and let's copy the previous rock
6:02:14paper scissors which is here we'll click
6:02:17here and type control a or command a
6:02:21right click
6:02:24copy and here right click and
6:02:30paste and let's hide our
6:02:33files and let's save this F file and we
6:02:37can also close 08 rock paper scissors
6:02:41and finally we'll open this in the
6:02:43browser by right clicking open with live
6:02:49server now we're ready to begin the
6:02:52second project so let's go back to the
6:02:55project at super simple Dev and we're
6:02:58going to start by putting the score on
6:03:00the page so to do this we're going to
6:03:03need somewhere to put the score so let's
6:03:07create an HTML element for this we'll
6:03:11scroll up to our
6:03:13HTML which is
6:03:16here and after the scissors button let's
6:03:20add a paragraph element where we're
6:03:22going to put our score so less than P
6:03:26greater
6:03:27than and let's add a class attribute so
6:03:31we can select this element in our
6:03:33JavaScript so in the opening tag we'll
6:03:36type space class equals double quotes
6:03:43js-
6:03:45score now that we have a class let's get
6:03:48this element in our
6:03:50JavaScript so let's just do it down here
6:03:54so we'll type
6:03:57document.
6:03:58query
6:04:01selector brackets and a string and then
6:04:04we're going to type a Dot and we're
6:04:07going to select the class js- score so
6:04:12js-
6:04:14score so this will get the paragraph
6:04:17element from above and put it inside our
6:04:21JavaScript and now let's put the score
6:04:24inside the element to do that we can use
6:04:27inner
6:04:28HTML dot inner Capital
6:04:33HTML and we'll make it equal to the
6:04:37score if we scroll
6:04:40down we actually create the score down
6:04:43here so we can actually just copy this
6:04:46string so we'll select it
6:04:49rightclick
6:04:51copy and let's scroll
6:04:55up to here and I'll actually put this on
6:04:59a separate line to make it easier to
6:05:02read and now here we're going to type a
6:05:05string using back
6:05:08ticks and inside the string we're going
6:05:10to rightclick and
6:05:14paste so this will put the score that we
6:05:17used to have in our popup inside this
6:05:21element so inside this
6:05:23paragraph if we
6:05:25save and then go back to our
6:05:28tab you can see that now it displays the
6:05:31score on the page now before we move on
6:05:35I want want to point something out with
6:05:37HTML so remember that our reset score
6:05:40button was beside our other buttons and
6:05:43now it's below them so what determines
6:05:46if an element appears beside something
6:05:49or below something so the paragraph
6:05:52element Here is known as a block element
6:05:56a block element will always take up an
6:05:59entire line by itself so this line
6:06:03already has some buttons so the
6:06:05paragraph will take up the entire line
6:06:07under the buttons that's why this text
6:06:10appears under the buttons and not beside
6:06:13them and also because a block element
6:06:16like this paragraph takes up this entire
6:06:19line the next button has to appear below
6:06:23it so that's why we get this layout here
6:06:27so this is just a short review of
6:06:29layouts if you want to learn this in
6:06:31more detail you can check out my HTML
6:06:34and CSS full course in the video
6:06:37description all right the next feature
6:06:40we're going to do is if we play the game
6:06:43we also want to update the score right
6:06:46now if we play it doesn't update it on
6:06:49the page let's fix this in our
6:06:52JavaScript so let's go down to where we
6:06:55update the score so we'll scroll
6:06:58down which is right here we update the
6:07:02score and save it in local storage and
6:07:05after we do this we're also going to
6:07:07update the score on the page so we can
6:07:11actually use the same code that we used
6:07:14above which is here so let's make a copy
6:07:18of this code
6:07:20rightclick
6:07:21copy and down
6:07:24here right click and
6:07:29paste and I'll add a tab at the front if
6:07:33we save and then try out our game we'll
6:07:37click a move press
6:07:39okay and now you'll notice the score
6:07:42also updates on the page so let's go
6:07:45back into our code and do some cleanup
6:07:48so you notice that this code is the same
6:07:50as the code we had above and this is a
6:07:53great situation to use a function to
6:07:56reuse this code so at the bottom here
6:08:00let's create a function using function
6:08:05and we'll call it
6:08:08update
6:08:09score
6:08:11element brackets and curly
6:08:14brackets and we'll move this code into
6:08:17the function so we'll select it right
6:08:21click
6:08:22copy and in here right click and
6:08:28paste and now instead of writing this
6:08:30code multiple times we're just going to
6:08:33call the function
6:08:36update score element and
6:08:42brackets this will run all the code
6:08:44inside the function so it does the same
6:08:46thing as before except we can reuse the
6:08:50code so let's scroll back
6:08:53up and instead of typing out all this
6:08:56code again we can just use our
6:09:00function
6:09:01update
6:09:03score element
6:09:05and
6:09:07brackets now let's
6:09:09save it will display the score on the
6:09:12page at the start and when we click a
6:09:15move and click okay it will update the
6:09:19score on the page so the last feature
6:09:22we're going to do in relation to the
6:09:24score is when we click the reset score
6:09:27button we also want to update the score
6:09:29on the
6:09:30page right now if we click it it doesn't
6:09:34actually update it
6:09:36so let's go into our code and let's go
6:09:38to the reset button which is here and
6:09:43after we reset the score we're going to
6:09:46call that function again
6:09:49update
6:09:51score element and
6:09:54brackets if we
6:09:57save and now let's play the game and
6:10:00press okay so we have a score and if we
6:10:04click reset score it will reset
6:10:07everything back to zero so now we
6:10:11finished the score let's go back to
6:10:13super simple
6:10:15Dev and play the
6:10:17game and now we're going to work on this
6:10:20section we're going to show the result
6:10:23and the moves that we picked on the page
6:10:27so first let's create some paragraphs
6:10:29for these as well we'll go to our
6:10:32HTML and above the score
6:10:36let's add a less than P greater than
6:10:41this is going to be the result so let's
6:10:44give it a class of
6:10:48js-
6:10:50result and let's create another
6:10:53paragraph less than P greater than and
6:10:57we'll give this one a class equals
6:11:03js- moves
6:11:05now let's use the Dom to put the result
6:11:09and the moves in these paragraphs feel
6:11:12free to pause the video if you want to
6:11:14try it yourself first so let's scroll
6:11:17down to where we display the
6:11:21result which is here so we display it in
6:11:24a popup and instead of a popup we're
6:11:29going to get the paragraph and put this
6:11:31result inside the paragraph so we'll
6:11:34type
6:11:36document. query
6:11:39selector brackets and a string and we'll
6:11:43type a DOT and select the class
6:11:48js-
6:11:50result and then dot inner Capital
6:11:56HTML and we'll change this to
6:12:01result and now let's also display the
6:12:04moves so we'll type some new lines and
6:12:09document. query selector again brackets
6:12:14and a string dot
6:12:18js-
6:12:20moves do inner Capital
6:12:25HTML and make it equal to this text
6:12:29right here so let's type a template
6:12:32string because we're going to insert our
6:12:34Moves In inside the string and we'll
6:12:37Type
6:12:39U and we'll insert the player move
6:12:42dollar curly
6:12:44brackets Player move and then a dash and
6:12:50then the computers move so dollar curly
6:12:54brackets again and
6:12:57computer
6:12:59move computer at the end so now that
6:13:03we're displaying everything on the page
6:13:06we don't need this popup at the end so
6:13:09we can actually delete this
6:13:12popup all right now let's
6:13:15save and go back to our
6:13:18Tab and play our
6:13:21game now it will show the result and the
6:13:24moves that we picked on the page instead
6:13:27of in a popup let's play it again to
6:13:30make sure it works and finally when we
6:13:33click reset score it it will reset
6:13:35everything back to zero and that's it
6:13:39now we're displaying everything on the
6:13:41web page using the
6:13:43Dom now let's move on to the third and
6:13:46final project we'll go back to Super
6:13:50simple.
6:13:52deev and we'll click back to go back to
6:13:55our projects and we're going to create
6:13:58this third project here which is an
6:14:01Amazon shipping
6:14:02calculator the way this works is is that
6:14:05inside this text box we're going to type
6:14:08the cost of an order in dollars if the
6:14:11order is under
6:14:13$4 for example
6:14:16$25 and we click
6:14:18calculate it will add $10 of shipping
6:14:22and display the total down here but if
6:14:25we type a cost that is over
6:14:27$40 like 50 and press
6:14:32calculate it will be free shipping so so
6:14:35it will display the same total down here
6:14:38so let's learn how to create this using
6:14:40the
6:14:41Dom let's go back to our 09 Dom projects
6:14:46file and we'll start by creating the
6:14:49HTML
6:14:50elements so under our subscribe
6:14:53button let's create this paragraph using
6:14:58less than P greater than
6:15:02Amazon shipping
6:15:06calculator and next let's create this
6:15:09text box so the HTML element for a text
6:15:13box is called input so we'll type less
6:15:17than input greater than so the input
6:15:22element is special because it doesn't
6:15:24require a closing tag this is called a
6:15:28void
6:15:29element and lastly let's create the
6:15:32button so here we create less than
6:15:37button greater than
6:15:41calculate now let's
6:15:43save and open the tab for this file
6:15:47which is right here and we have the text
6:15:51the text box and the button that we need
6:15:55now one other thing we're going to add
6:15:57is that in the final project if we don't
6:16:00have anything in the text box we're
6:16:02going to have this gray text so this is
6:16:05called a placeholder to add a
6:16:08placeholder to a text box we're going to
6:16:11use the placeholder attribute so inside
6:16:14our input element we're going to type
6:16:18Space Place
6:16:20holder equals double quotes and inside
6:16:25the quotes we'll put the text we want as
6:16:27the placeholder which is cost of
6:16:33order and
6:16:35save now if we go back to our project we
6:16:39now have a placeholder in our text box
6:16:42that disappears when we start
6:16:45typing so that's all the HTML that we
6:16:48need now let's work on the JavaScript
6:16:51and again we'll figure out what steps we
6:16:54need to do so when we click this button
6:16:58we're going to get the text inside the
6:17:00text box if the amount is below $40
6:17:04we'll add $10 of shipping and then we'll
6:17:07display the total on the page let's
6:17:11convert these steps into code so we'll
6:17:14go to our button and add and onclick
6:17:19attribute and inside here let's also
6:17:23create a function to separate our
6:17:25JavaScript code like we did before so in
6:17:29the script we're going to create a
6:17:32function function
6:17:34and let's name it
6:17:37calculate total brackets and curly
6:17:42brackets and inside on click we're just
6:17:46going to call the function so
6:17:50calculate
6:17:51total
6:17:53brackets the next step is to get the
6:17:56text inside the text box so first let's
6:18:01get this input element and put it inside
6:18:04our J JavaScript to do that we can use
6:18:07document. Query selector again so we'll
6:18:11add a class to this input so we can
6:18:13select it class equals
6:18:18js-
6:18:20cost-
6:18:22input and then inside our JavaScript
6:18:25we'll use
6:18:27document.
6:18:29Query
6:18:30selector brackets and a string and a Dot
6:18:35and this class
6:18:39js-
6:18:40cost-
6:18:42input so this code will get the input
6:18:45element and put it inside our JavaScript
6:18:49let's confirm by
6:18:53console. logging the
6:18:57result and
6:19:00save and now when we click the calculate
6:19:03button it will give us
6:19:05the input element from the page let's
6:19:08save this input element in a variable so
6:19:11we can use it later instead of
6:19:14console.log we'll use const and we'll
6:19:17name the variable
6:19:20input element and make it equal to this
6:19:24element and remove the extra
6:19:27bracket and next we need to get the text
6:19:30inside the input element so so far in
6:19:33this lesson we've been using the
6:19:35property inner HTML to do this however
6:19:40for input elements you notice that there
6:19:42is no HTML inside so for input elements
6:19:47we're going to use a different property
6:19:49called
6:19:50value so at the bottom here we're going
6:19:53to type
6:19:56input
6:19:58element.
6:20:00value this is how we get the text inside
6:20:03a text box
6:20:05so let's console.log this to confirm
6:20:08that it works so we
6:20:11console do
6:20:15log and
6:20:17save and now let's type something in the
6:20:20text box like 50 and click
6:20:25calculate and input. value will give us
6:20:28the text inside the text
6:20:31box let's save this text in a variable
6:20:34so so we can use it later con and we'll
6:20:38name the variable cost and make it equal
6:20:42to the text in the text
6:20:45box the next step is to check if this
6:20:48cost is under
6:20:50$40 if it is We'll add
6:20:53$10 so down here let's type if brackets
6:20:58and curly
6:21:00brackets and inside the condition we'll
6:21:03check if cost is less than
6:21:0740 and if it is inside the curly
6:21:11brackets we'll do cost equals itself
6:21:17plus $10 of shipping and remember when
6:21:21we change a variable we have to switch
6:21:24from const to
6:21:26let and finally we're going to display
6:21:29the total cost on the page so let's
6:21:32create a paragraph where we can display
6:21:35the cost so down here we'll create a
6:21:39paragraph less than P greater than let's
6:21:44give it a class
6:21:48js- total Das cost and now inside our
6:21:53JavaScript let's use
6:21:57document. Query selector brackets and
6:22:02string and we'll Type A Dot and the
6:22:05class
6:22:07js- total Das cost and we're going to
6:22:12put the cost inside the paragraph we can
6:22:16use dot inner Capital
6:22:21HTML and make it equal and let's use a
6:22:24template string so back ticks and we'll
6:22:28have a dollar and we're going to insert
6:22:31the cost using dollar and curly brackets
6:22:37cost now let's save and try out this
6:22:41project so first we'll type a cost that
6:22:44is over
6:22:46$40 like 50 if we press
6:22:50calculate we're not going to add $10 of
6:22:53shipping and we'll display the same
6:22:55total on the page now let's try a number
6:22:59under
6:23:00$40 like 25 and press calculate
6:23:05and this number doesn't look right it's
6:23:08saying that we have to pay
6:23:11$2,510 so what's going on here let's go
6:23:14into our code and let's use console.log
6:23:17to figure out what's wrong so first
6:23:21let's console.log the cost to make sure
6:23:24that we're getting the right number from
6:23:25the text box so down here
6:23:31console.log the cost
6:23:34and save and then let's Type 25 again
6:23:39and press
6:23:40calculate and it will give us 25 so
6:23:43we're getting the correct text from the
6:23:45text box now let's console.log down here
6:23:49to see if the math is working so we'll
6:23:52type
6:23:54console.
6:23:55log
6:23:57cost and
6:23:59save and let's try 25 again and
6:24:04calculate
6:24:05and down here when we add 10 this is
6:24:09where things go wrong and it results in
6:24:1320510 so it's not doing math properly
6:24:16here so let's check if cost is a number
6:24:20to make sure that it's doing math so
6:24:23here we'll type
6:24:27console.log the type of
6:24:32cost and Save
6:24:35let's Type 25 again and calculate and
6:24:40aha it's telling us that the cost is a
6:24:44string so this is actually not a number
6:24:47it is a string that's why it's not doing
6:24:50math so remember from the strings lesson
6:24:53when we add a string with a number
6:24:57JavaScript will automatically convert
6:24:59this number into a string and combine
6:25:02them together that's that's why it just
6:25:04combines 25 and 10 here this is called
6:25:09type
6:25:10coercion so whenever we get a value from
6:25:13the Dom like this the value will be a
6:25:17string so in order to do math we have to
6:25:20manually convert this string into a
6:25:23number to do that JavaScript has a
6:25:26builtin function called number so before
6:25:30this code we're going to type capital n
6:25:35number Open Bracket and close bracket so
6:25:40the number function takes whatever's
6:25:42between the brackets and manually
6:25:44converts it into a number so now if we
6:25:49save and we Type 25 and press
6:25:54calculate the cost is now a number and
6:25:57it will do the math properly and give us
6:26:0135 so remember whenever we get a value
6:26:04from the Dom the value will be a string
6:26:07so if we want to do math with it we have
6:26:10to manually convert this value into a
6:26:13number first so now let's remove the
6:26:16console. logs that we used to figure out
6:26:19this
6:26:21problem and
6:26:24save okay we're going to add one more
6:26:27feature to this project let's go back to
6:26:30superimple
6:26:32dodev and inside the text box we're
6:26:35going to Type 25 and press
6:26:39enter so pressing enter will also
6:26:42calculate the total and display it on
6:26:45the page so let's learn how to create
6:26:47this feature so if we go back to our
6:26:50code so far in this course we've been
6:26:53using the attribute
6:26:55onclick which runs some JavaScript when
6:26:57we click an element HTML has another
6:27:02attribute we can use called on key down
6:27:06which runs JavaScript when we press a
6:27:09key down on our keyboard so inside the
6:27:12input this time let's add the attribute
6:27:16on key down equals double quotes and
6:27:22then inside here
6:27:26console. log and the string
6:27:31typing so now every time we type in the
6:27:34input it will console.log this message
6:27:38let's save it and give it a try we'll go
6:27:42to the tab for this file and then inside
6:27:45the text box we'll type some numbers and
6:27:49you can see that every time we type
6:27:51something it will run this code and
6:27:54display this
6:27:56message so that's how we do something
6:27:58when we type in an element so clicks and
6:28:02key Downs are known known as events on
6:28:06click and on key down are known as event
6:28:10listeners they check for events and runs
6:28:13JavaScript when those events happen now
6:28:17in addition to clicks and key Downs
6:28:20there are many other events we can
6:28:21listen for in
6:28:23JavaScript okay so now let's figure out
6:28:26what steps we need to do for this
6:28:28project when we press a key down in the
6:28:31text box we're going to check if the key
6:28:34is the enter key if it is we'll do the
6:28:38same thing as the calculate
6:28:41button so how do we know what key we
6:28:44pressed inside on key down we're
6:28:47actually given a special object called
6:28:51event so instead of this string let's
6:28:54remove it and we'll
6:28:56console.log
6:28:58event so this is an object that's
6:29:01provided to us by JavaScript and it
6:29:03contains information about the event
6:29:06every event listener including on click
6:29:09also gets an event object if we
6:29:15save and type in this text
6:29:18box it will show us that event is this
6:29:22object and inside the object it has a
6:29:25bunch of information including the key
6:29:29that we typed so here let's use the
6:29:33event object and we'll get dot key and
6:29:38save so now inside this text box if we
6:29:42type something it will tell us the key
6:29:45that we pressed and if we press
6:29:47enter it will tell us that the key is
6:29:51enter so the next step is to check if
6:29:54the key is enter and we can do that
6:29:57using an if statement so in our
6:30:00code we'll type a new line
6:30:04if brackets and curly brackets and
6:30:08inside the condition we'll check if
6:30:12event. key is equal to the string
6:30:18enter if it is equal to enter we're
6:30:22going to do the same thing as the
6:30:23calculate button so we can actually just
6:30:26use this function again inside the curly
6:30:30brackets we'll type calculate
6:30:35total and
6:30:37brackets and
6:30:40save so now let's go back to our project
6:30:43and type 25 enter and it will calculate
6:30:48the total and display it on the page so
6:30:51that's how we create this keyboard
6:30:53feature of this project lastly let's
6:30:57clean up our code and move this into a
6:30:59function like the rest of our code so
6:31:03inside the script
6:31:05element let's create a new function
6:31:08using
6:31:10function and we'll name it
6:31:13handle cost key down brackets and curly
6:31:19brackets and let's move this code into
6:31:22the function we'll select it
6:31:26rightclick
6:31:28cut and in here right click and paste
6:31:34if we need to fix the formatting we can
6:31:36select these lines and press Tab and
6:31:39let's remove this
6:31:41console.log and now up here we're going
6:31:44to call this
6:31:45function
6:31:47handle cost key down and
6:31:53brackets now the last thing we have to
6:31:55do is that event does not exist inside
6:31:59this function so we have to put the
6:32:01event object into the function
6:32:04and remember to put a value into a
6:32:06function we can use a
6:32:09parameter so between these brackets we
6:32:12can create a parameter called event and
6:32:16now to save something inside this
6:32:18parameter we're going to go up to these
6:32:21brackets and type
6:32:24event this will take the event object
6:32:27and put it inside the function where we
6:32:30can use it just like a variable so now
6:32:34if we
6:32:35save and try out the project 25 enter so
6:32:41this still works and now we finished all
6:32:44three projects in this lesson so in the
6:32:47rest of this lesson we're going to learn
6:32:49some more details about
6:32:51JavaScript in the last project we
6:32:54learned how to manually convert a string
6:32:57into a number using the number function
6:33:01we can also convert the other way from a
6:33:04number to a string so let's go to the
6:33:07top of the script
6:33:09element and we can type capital S string
6:33:15and brackets so the built-in string
6:33:18function will convert a value into a
6:33:21string between the brackets we can put a
6:33:24number like 25 and this will convert the
6:33:28number into the string
6:33:3025 the next detail we're going to learn
6:33:33is a special behavior of
6:33:35strings So Below this line we can type
6:33:40console do log the string
6:33:4525 minus
6:33:475 so if a string only contains a number
6:33:51and we subtract multiply or divide
6:33:55JavaScript will automatically convert
6:33:57the string into a number so this gets
6:34:01converted into the number 25 minus 5 and
6:34:05if we save it will do math and give us
6:34:1020 so this is another example of type
6:34:13coercion or automatic type
6:34:17conversion however it's not recommended
6:34:19to do math with strings like this
6:34:22because adding Works differently for
6:34:25example on a new line let's type
6:34:30console.log the string 25
6:34:34+ 5 and
6:34:38save this will convert the number into a
6:34:41string and combine them together into
6:34:45255 so because adding strings Works
6:34:48differently the best practice is always
6:34:51do math using numbers don't do math
6:34:54using strings if we need to we can
6:34:58manually convert the string into a
6:35:00number using the number function like we
6:35:03did here the last thing we're going to
6:35:06learn in this lesson is another built-in
6:35:09object called the window object so in
6:35:13this lesson we learned about the
6:35:15document object the document object
6:35:18represents the web page the window
6:35:21object represents the browser so let's
6:35:25go into our script element and Try It
6:35:28Out Below this we'll Type
6:35:32window so so this is the window object
6:35:35and it represents the browser because it
6:35:39represents the browser everything inside
6:35:41the browser is inside the window object
6:35:45so let's think what's inside the browser
6:35:49well the web page is inside the browser
6:35:52so the document object is inside the
6:35:55window object if we type
6:35:59window.
6:36:01document this will give us the same
6:36:04document object that we've been using in
6:36:06this lesson so what else is part of the
6:36:10browser well the console is also part of
6:36:13the browser so here if we type
6:36:18window.
6:36:20console this will give us the same
6:36:23console object we've been using in this
6:36:25course so we can actually do
6:36:30console.log and the string window
6:36:35and
6:36:36save and this will do the same thing as
6:36:41console.log what else is part of the
6:36:43browser well popups are also part of the
6:36:46browser so if we type
6:36:50window.
6:36:52alert this will give us the same alert
6:36:55function that we've been using in this
6:36:57course to create
6:36:59popups however you might have noticed
6:37:01that we never Type window window. doent
6:37:05or window.
6:37:07console.log and that's because the
6:37:09window object has a shortcut we don't
6:37:12have to type window dot at the front we
6:37:15can just type document or console and
6:37:18JavaScript will automatically add window
6:37:21dot at the front for us so window is a
6:37:25built-in object that represents the
6:37:28browser we don't have to type out window
6:37:31dot ourselves because JavaScript adds it
6:37:33for us automatically but it's still nice
6:37:36to know how this works behind the scenes
6:37:39and that's the end of this lesson in
6:37:41this lesson we learned about the
6:37:43document object model or the Dom which
6:37:47allows JavaScript to fully control the
6:37:49web page we learned how to use document.
6:37:53Query selector to get elements from the
6:37:55web page and put them inside our
6:37:58JavaScript we learned how to use inner
6:38:00HTML to modify the HTML inside an
6:38:04element we worked on three projects
6:38:07using the Dom we learned how to make
6:38:09elements interactive with the keyboard
6:38:12using on key down and we learned some
6:38:15more details about strings as well as
6:38:18the window object which represents the
6:38:21browser here are some exercises you can
6:38:23do on your own to practice using the Dom
6:38:54in this lesson we're going to add CSS to
6:38:57all of our projects and we're going to
6:38:59finish our rock paper scissors project
6:39:02CSS is a different language that changes
6:39:05the appearance of our website it's one
6:39:08of the three languages that we use to
6:39:10create websites so first let's look at
6:39:13the projects we're going to work on in
6:39:15this lesson we'll go to our browser and
6:39:19create a new tab at the
6:39:21top and here we're going to type
6:39:26super simple
6:39:29dodev SL projects slash
6:39:33Dom Das
6:39:36with-
6:39:38CSS and press
6:39:40enter so these are the same three
6:39:43projects we created in the previous
6:39:45lesson except this time we're going to
6:39:48add CSS to make these projects look nice
6:39:52let's start by creating a copy of the
6:39:55Project's HTML file from the previous
6:39:58lesson we'll go to our code
6:40:01editor and click this icon to show our
6:40:04files and then here we're going to
6:40:07select
6:40:0909-- projects we're going to right
6:40:12click
6:40:14copy and down here right click and
6:40:20paste and let's rename this file by
6:40:25right-clicking
6:40:27rename at the end we're going to remove
6:40:31copy and at the beginning
6:40:34we're going to change it to 10 and press
6:40:38enter now let's hide our
6:40:40files and we're going to open 10 Dom
6:40:43projects in the browser by
6:40:47right-clicking open with live
6:40:50server now we can close our previous
6:40:55tabs as well as the previous code from
6:40:58lesson 9 which is this file and these
6:41:02two
6:41:04and now we're ready to add CSS to our
6:41:07projects we'll start with the YouTube
6:41:09subscribe button let's go to the tab for
6:41:12our
6:41:13project and we're going to style this
6:41:16button first so we reviewed CSS in
6:41:19lesson 4 and one of the ways we can
6:41:22write CSS code is using the style
6:41:25element so inside the head section we're
6:41:29going to create an element using less
6:41:32than style greater than so the style
6:41:37element lets us write CSS code inside so
6:41:41inside here we're going to write
6:41:44button open curly bracket close curly
6:41:48bracket so the code in front of the
6:41:50brackets is called the CSS selector this
6:41:54tells the computer which elements we
6:41:56want to style or change the appearance
6:42:00so button will style all button elements
6:42:03on the page but in this situation we
6:42:06only want to style the Subscribe button
6:42:09because the calculate button will be
6:42:11styled differently so to style a
6:42:14specific element we can use the class
6:42:18attribute so if we look at our button
6:42:21currently it already has a class of JS
6:42:24subscribe button but this class is being
6:42:28used by our JavaScript a good practice
6:42:31is to add a different class that will be
6:42:33used by
6:42:34CSS so an element can have multiple
6:42:37classes we just separate them with a
6:42:40space so inside this class attribute
6:42:43we're going to type space and add
6:42:46another class
6:42:49subcribe dash
6:42:52button now this element has two classes
6:42:56and we're going to use this second class
6:42:58in our
6:42:59CSS so to style a specific class we're
6:43:02going to remove button and we're going
6:43:05to type a DOT so starting with a DOT
6:43:09means we're going to style a class
6:43:11rather than an element name so we'll
6:43:14style the class
6:43:17subscribe Das
6:43:20button which is this button right here
6:43:24and now inside these curly brackets
6:43:26we're going to tell the computer how to
6:43:28style this button for example border
6:43:33colon none and
6:43:36semicolon if we
6:43:39save this will remove the border from
6:43:42the button so it no longer has a border
6:43:45like this button so that's how we style
6:43:47a specific element with CSS we add a
6:43:51class to the element and then inside CSS
6:43:55we start with a DOT and the class and
6:43:58between the curly brackets the code on
6:44:00the left is called the property
6:44:03this tells a computer what we want to
6:44:05change on the right is called the value
6:44:09this tells a computer what we want to
6:44:11change the property to we separate the
6:44:14property and value with a colon and we
6:44:17end the whole thing with a semicolon so
6:44:20this is also called a property value
6:44:23pair as a reminder this is just a review
6:44:26of CSS if you want to learn CSS in more
6:44:30detail you can check out my HTML and and
6:44:33CSS full course in the video
6:44:36description so we just added one style
6:44:39to this button we're going to add more
6:44:41Styles so that it looks like our final
6:44:44design to make this easier I'm going to
6:44:47rearrange my windows and I'm going to
6:44:49put the final design at the bottom and
6:44:52then our project at the
6:44:55top this will make it easier to compare
6:44:57the two
6:44:58designs next to make it look like the
6:45:01final design we're we're going to style
6:45:03our element one by one let's go back to
6:45:07our
6:45:08code and press enter and next let's
6:45:12change the background color to Black to
6:45:15do that we'll type
6:45:18background Das color colon black and
6:45:24semicolon and
6:45:26save now our button has a black
6:45:29background let's keep going one by one
6:45:32we change the text color to white next
6:45:36so in our code we'll type color colon
6:45:41white and semicolon and
6:45:45save now if you're wondering how I know
6:45:48all these properties you can usually
6:45:50find them by searching in Google just
6:45:52make sure you search for what you are
6:45:54trying to
6:45:56do let's keep going one by one the next
6:46:00thing we'll change is we're going to add
6:46:02spacing on the inside of the button in
6:46:06CSS space on the inside of an element is
6:46:09called padding so we'll create a new
6:46:13line and we'll use the property
6:46:16padding Das toop colon
6:46:2210px and
6:46:24save so this will add space on the
6:46:27inside of the element called the padding
6:46:30at the top of 10 PX
6:46:33so the PX here means pixels a pixel is a
6:46:38unit of measurement in computers your
6:46:40screen is made up of many small little
6:46:43squares each of these squares is called
6:46:45a pixel so a pixel is the smallest thing
6:46:49that you can have on your screen screen
6:46:51sizes are measured in pixels images and
6:46:54video sizes are also measured in pixels
6:46:58and don't worry the more you work with
6:47:00pixels the more you'll get used to how
6:47:02big a pixel is so in this example 10
6:47:06pixels is equal to this amount of space
6:47:10and it looks pretty close to the final
6:47:11design so let's keep going we'll add
6:47:15space on the inside of the element at
6:47:17the bottom this time so we'll create a
6:47:20new line and type padding Dash bottom
6:47:27colon
6:47:2810px again and Save
6:47:33and that adds space at the bottom of the
6:47:35element of 10
6:47:37pixels next let's increase the space on
6:47:40the left and the right we'll go into our
6:47:44code and add padding Das left colon 10
6:47:52pixels and padding Das right colon 10
6:47:59pixels let's save
6:48:03and it added some extra space on the
6:48:05left and right but I think our final
6:48:07design has a little more space on the
6:48:10left and right so let's go back and
6:48:12increase our padding so instead of 10
6:48:16let's try 15 on both
6:48:19sides so we'll
6:48:21save and now the spacing looks close
6:48:24enough to the final
6:48:26design so in CSS it's normal to do some
6:48:29trial and error to get the styling right
6:48:33let's keep styling this one by one next
6:48:36we'll make the text thicker or bold so
6:48:40let's go into our code and to change the
6:48:43thickness of the text we'll use the
6:48:46property font Das weight colon
6:48:53bold let's
6:48:55save and that will make our text bold so
6:48:58we're almost there now let's make the
6:49:01corners rounded look like in the final
6:49:03design we'll go back to our CSS and the
6:49:07property for making the corners round is
6:49:09called
6:49:11border Das
6:49:13radius and we'll make it colon 5
6:49:18pixels let's
6:49:20save and you can see that it made our
6:49:22Corners round so the pixels here tells
6:49:26the computer how round we want the
6:49:28corners to be the higher the pixels the
6:49:31more round it will get
6:49:33so if we change this to 10 pixels and
6:49:37save it will make the corners even more
6:49:40round so let's change this to something
6:49:43really big to make it completely round
6:49:46we'll change this to 50 pixels and
6:49:51save and now our button is completely
6:49:54round the last style we're going to add
6:49:57is in the final design if we put our
6:49:59Mouse over the button it turns into this
6:50:02hand the icon so we call this a pointer
6:50:06and we're going to do the same thing in
6:50:07our project so let's go to our code and
6:50:11to create that pointer icon we're going
6:50:14to use the property
6:50:17cursor colon
6:50:20pointer and let's
6:50:23save and put our Mouse over the button
6:50:26and you'll notice it turns into this
6:50:28hand pointer icon and that's it now our
6:50:31subscribe button looks like the final
6:50:34design next let's click the Subscribe
6:50:37button you'll notice that it only
6:50:39changes the text but if we click the
6:50:42final
6:50:43design it also changes the background
6:50:46color and the text color so we're going
6:50:49to learn how to change the CSS when we
6:50:52click a
6:50:53button let's go back to our code and
6:50:56this time we're going to scroll down to
6:50:58our
6:50:59JavaScript which is here so we learned
6:51:02in the previous lesson we can get HTML
6:51:05elements from the page and put them
6:51:08inside our JavaScript and we also
6:51:10learned that these HTML elements are
6:51:13just JavaScript objects and they can
6:51:15have properties like inner text and
6:51:19inner
6:51:20HTML every element has another property
6:51:24we can use called class list class list
6:51:27gives us control of the class attribute
6:51:31so one solution we can do is when we
6:51:33click the button we can add a class and
6:51:37then this class will have different
6:51:39styles so let's see how we do that in
6:51:42our code we'll scroll down to the
6:51:44Subscribe function and when we click the
6:51:47button and make the button subscribed
6:51:50we're also going to add a class so let's
6:51:53create a new line and we'll type button
6:51:59element dot class capital L
6:52:05list so class list itself is an object
6:52:09which means it has properties and
6:52:10methods we can use one method is called
6:52:15add which adds a class to an element so
6:52:19after this let's type dot add and
6:52:25brackets and now inside these brackets
6:52:27we're going to put a string so this
6:52:30string is a class that we want want to
6:52:32add when we click this button let's add
6:52:36a class called
6:52:38is-
6:52:41subscribed and
6:52:43save so now every time we click this
6:52:47button it will add a class to the button
6:52:50called is- subscribed let's give it a
6:52:54try first we'll rightclick on the page
6:52:58and then click
6:53:00inspect and we'll go to the elements Tab
6:53:04and I'll rearrange my windows so you can
6:53:06see
6:53:07it and then inside the HTML pay
6:53:10attention to the class of the button now
6:53:14when we click the
6:53:15button it's going to add an extra class
6:53:18called is- subscribed so that's what
6:53:22this line of code does and now that this
6:53:25button has the is subscribed class we
6:53:28can style it in our CSS so let's go back
6:53:31to our code
6:53:33and we'll scroll up to our
6:53:35CSS and here we'll type dot to style a
6:53:40class and we'll style the class is-
6:53:44subscribed
6:53:46is-
6:53:48subscribed and curly
6:53:50brackets and now inside these curly
6:53:53brackets let's change the background
6:53:55color to Gray and the text color to
6:53:59Black
6:54:00Background Das color colon
6:54:05gray and then color colon
6:54:10black and make sure to type these Styles
6:54:13below the Subscribe button Styles so
6:54:16that these Styles will override the
6:54:18Styles
6:54:19above now if we
6:54:22save and then click our
6:54:25button it will add the is subscrib class
6:54:29and now this button will get our new
6:54:31styles that we added here so that's one
6:54:35way to change the CSS when we click a
6:54:38button all right now I'm going to move
6:54:41this back to the
6:54:44top and notice that our background color
6:54:47is different from the final design the
6:54:50final design uses a much lighter gray so
6:54:53how do we get this exact color to do
6:54:56that we're going to open the elements
6:54:59tab again so on this page we're going to
6:55:03rightclick click
6:55:06inspect and then click the elements
6:55:09Tab and I'll rearrange my windows so we
6:55:12can see
6:55:15it so in this section in the style
6:55:18section we can see the CSS that the
6:55:21element has so first let's actually find
6:55:24this button which is right here and
6:55:27we'll click
6:55:29it and here it will show us the CSS that
6:55:33this button has and it will show us the
6:55:36background color that we should use so
6:55:38let's make a copy of this color and put
6:55:41it into our code
6:55:44rightclick
6:55:46copy and here we'll remove it and
6:55:50rightclick and
6:55:53paste now let's
6:55:55save and go back to our project and try
6:55:59it
6:56:00out and now we get get the exact same
6:56:03color as the final design so by the way
6:56:07this color is known as an RGB value RGB
6:56:11means red green and blue and computers
6:56:16can create any color using a combination
6:56:19of red green and blue so the first
6:56:23number here is how much red we want in
6:56:26our color the second number is how much
6:56:28green we want and the third number is
6:56:31how much blue we want
6:56:33each number goes from 0 to
6:56:35255 Zer means less color and darker 255
6:56:41means more color and lighter so this
6:56:44color here uses 240 for all of the
6:56:47colors so it's close to 255 and will
6:56:51give us a very light gray color that you
6:56:54see
6:56:56here next if we go back to the final
6:56:59design and we click our button again
6:57:02it will change back to the original
6:57:05style so we're going to create this
6:57:07feature in our project as well so one
6:57:10way to do this is when we click the
6:57:12button again we can remove this class so
6:57:17let's scroll down to the
6:57:19bottom to the Subscribe function and
6:57:23when we click the button and we change
6:57:25it back to subscribe we can remove this
6:57:28class to do that class list has a
6:57:32another method we can use called remove
6:57:35so let's create a new line and we'll
6:57:38type
6:57:40button element do class capital L
6:57:46list dot
6:57:48remove and
6:57:51brackets so this does the opposite of
6:57:54add it will remove a class from this
6:57:58element so inside the brackets we'll
6:58:01type a string and the class we want to
6:58:03remove which is
6:58:06is-
6:58:09subscribed and
6:58:12save now let's try out our project we'll
6:58:15click the button it will get the class
6:58:18is subscribed and get the extra Styles
6:58:21and now when we click the button again
6:58:24it will remove the class and it will
6:58:26remove the extra
6:58:29Styles so notice here that when we add a
6:58:33class we just type the class name we
6:58:36don't type a DOT and the class name like
6:58:39we did for query selector typing a DOT
6:58:43only makes sense in query
6:58:45selector next we're going to style the
6:58:48text on the page let's scroll up to our
6:58:52CSS and one thing we can do is to style
6:58:55all the paragraph elements on the page
6:58:58using this code P and curly brackets
6:59:04however we're going to use a better
6:59:06solution instead of styling all the
6:59:08paragraphs we're just going to style the
6:59:11body
6:59:12element when we change the text in the
6:59:15body element it will change the text in
6:59:18the entire page so inside these curly
6:59:22brackets let's change the text here so
6:59:25we're going to use a different style of
6:59:27text this is called a font to change the
6:59:31font font we're going to use this
6:59:33property font Das
6:59:37family colon and we'll change it to
6:59:42aial which is what I used in the final
6:59:45design so let's
6:59:47save and this will style all the text
6:59:51inside the body and change the font to
6:59:55aial and a good practice is to write any
6:59:58styles for the body at the top so if we
7:00:01need to we can override it later so
7:00:04let's move these to the top we'll right
7:00:07click
7:00:09cut and then up
7:00:12here create some new lines and right
7:00:15click and
7:00:18paste and we're going to add one more
7:00:20style before moving on let's add some
7:00:24space between the Subscribe button and
7:00:26the second project so earlier we learned
7:00:30that space on the inside of it element
7:00:32is called padding space on the outside
7:00:36of an element is called margin so inside
7:00:40our subscribe button at the
7:00:43bottom let's add a property called
7:00:46margin Das bottom colon 30 pixels and
7:00:54save so this will add space on the
7:00:58outside of the element at the bottom of
7:01:0030 pixels
7:01:03now let's move on and style the Amazon
7:01:05shipping calculator with
7:01:07CSS again we'll add a class to these
7:01:10elements and then style them in our
7:01:13CSS let's scroll down to the text box
7:01:17which is the input element and we're
7:01:20going to add another class by typing
7:01:23space and let's use the class cost Das
7:01:29input and now we're going to style this
7:01:32in CSS so let's scroll up and here we'll
7:01:36style the class using dot cost Das
7:01:42input and curly
7:01:44brackets and inside we'll style this one
7:01:47by one let's look at our final design
7:01:51and see what styles we need so first
7:01:54let's change the text size because our
7:01:57text is a little smaller than the text
7:01:59here so the change the text size
7:02:02we're going to use Font Das size colon
7:02:08and let's try 15 pixels and
7:02:13save and now our text looks close enough
7:02:16to the final
7:02:18design next let's add some space inside
7:02:21the text box so remember space inside an
7:02:25element is called padding so we're going
7:02:28to type
7:02:30padding Das
7:02:32top of 10
7:02:35pixels padding Das bottom also 10
7:02:41pixels and let's add padding to the
7:02:45left 10
7:02:47pixels and padding
7:02:51dasr of 10 pixels so this will add a
7:02:57space on the inside of our text box in
7:03:00every direction if we
7:03:03save now it looks just like the final
7:03:07design now I'm going to show you a
7:03:09shortcut for padding that will save us
7:03:11some typing so if we create a new line
7:03:15we can actually use a property called
7:03:19padding and colon and then type 10
7:03:24pixels this padding property let us add
7:03:27padding on multiple sides at once if we
7:03:31type one value here like 10 pixels it
7:03:34will add 10 pixels to every side so this
7:03:37line does the same thing as these four
7:03:40lines above so let's actually comment
7:03:43this out using
7:03:46slashstar and star slash and
7:03:51save and you can see that this one line
7:03:53of CSS did the same thing as the other
7:03:57four lines of CSS so this shortcut can
7:04:00save us some typing
7:04:02next let's move on and style the
7:04:05calculate
7:04:06button again we'll add a class to this
7:04:09button so we can style it so in this
7:04:12button let's add a class
7:04:15attribute class equals
7:04:20calculate Das
7:04:23button now let's style this in our CSS
7:04:26by scrolling up and here we'll type Dot
7:04:32calculate dash
7:04:35button and curly
7:04:37brackets and inside these curly brackets
7:04:40we're going to style this button one by
7:04:43one so let's start with the background
7:04:45color so we'll type
7:04:49background Das color colon green and
7:04:55semicolon and
7:04:57save next let's change the text color to
7:05:01white
7:05:02so we'll type color colon
7:05:06white and save
7:05:09again okay let's keep going and we'll
7:05:12remove the border around this button so
7:05:15we'll type
7:05:17border colon
7:05:20none
7:05:22save next let's make our text a little
7:05:25bigger like in the final
7:05:27design so we'll type font Das
7:05:32size and make it 15
7:05:35pixels and
7:05:38save okay so now let's add the space on
7:05:42the inside of the button so we're going
7:05:44to use this shortcut again we'll type
7:05:48the padding
7:05:50property colon and this time we're going
7:05:53to give it two values separated by
7:05:56spaces 10
7:05:58pixels and maybe 50 pixels so it's
7:06:03easier to see what this does so when we
7:06:06give two values to padding the first
7:06:09value is the vertical padding so the top
7:06:12and bottom the second value is the
7:06:15horizontal padding or left and right if
7:06:19we
7:06:21save so you can see that the left and
7:06:23right has a lot of padding which is 50
7:06:27pixels so now let's make this match our
7:06:29final design so instead of 50 pixels
7:06:33let's bring it down to 15 pixels and
7:06:38save okay so that looks pretty close
7:06:41let's also increase the padding on the
7:06:43top and bottom so that the text box and
7:06:46the button line up with each other like
7:06:48in the final
7:06:51project so let's change the vertical
7:06:53padding to maybe 12 pixels and
7:06:58save the last thing we'll style for this
7:07:01project is when we put our Mouse over
7:07:03the button it turns into the pointer
7:07:05icon so to create this we're going to
7:07:08use the property
7:07:11cursor colon
7:07:15pointer and save and give it a
7:07:19try and that's it we just finished
7:07:22styling the Amazon shipping calculator
7:07:25so now let's give this a try we'll Type
7:07:2825 in the text box and press calculate
7:07:32and at the bottom it will add $10 of
7:07:35shipping and show
7:07:38$35 finally we're going to style the
7:07:41last project in this lesson which is the
7:07:43rock paper scissors project and this
7:07:46will finish the project let's go back to
7:07:49superimple dodev and we'll scroll down
7:07:52on this page and then click this link to
7:07:55show the final design for rock paper
7:07:58scissors so I'll rearrange my windows so
7:08:01we can see
7:08:03this and we're going to change the
7:08:05buttons to these nice big icons for each
7:08:08of the moves and when we click a move it
7:08:11will show the result in bold and show an
7:08:15icon of the move that we picked and the
7:08:17move that the computer picked so we're
7:08:20going to make this project look really
7:08:22nice now let's get started I'm going to
7:08:25rearrange my windows back so we have it
7:08:28at the bottom and let's create a cop
7:08:31copy of the rock paper scissors project
7:08:33for this lesson we'll go to our code
7:08:37editor and click here to show our
7:08:40files and we're going to make a copy of
7:08:4409- Ro paper scissors so let's click
7:08:47this file and then
7:08:50rightclick
7:08:52copy and down here right click and
7:08:57paste and we'll rename this file by
7:09:00right-clicking
7:09:03rename and at the end we'll remove copy
7:09:07and at the beginning we'll change it
7:09:09from 9 to 10 and press
7:09:14enter now let's click here to hide the
7:09:18files and we can close the 09
7:09:21file and let's open the 10 rock paper
7:09:25scissors file in the browser so we'll
7:09:28right click and then open with live
7:09:33server and I'll move this tab to the top
7:09:37here so we can see it side by side so
7:09:41let's start by styling the body we want
7:09:44to make the background color of the
7:09:46entire page this dark gray color we'll
7:09:50go into our code and let's create a
7:09:53style element so we can write some
7:09:56CSS inside the head let's type less than
7:10:00Style
7:10:01greater than and then inside here we're
7:10:05going to style the body so we'll type
7:10:08body and curly
7:10:11brackets now inside here we're going to
7:10:13change the background color so
7:10:19background-color colon and we're going
7:10:22to get the color that we see here by
7:10:25right clicking click
7:10:28inspect and then go to the elements tab
7:10:32Tab and I'll rearrange it so we can see
7:10:36it and then here we'll find the body
7:10:39element and click it and in this style
7:10:43section we can find the background color
7:10:46that we need so let's select
7:10:49this and
7:10:51rightclick
7:10:53copy and in
7:10:55here right click and
7:10:59paste and a semi colon at the end let's
7:11:04save and I'll move this back to the
7:11:08corner and now our project has the same
7:11:11background color as the final design
7:11:14next let's make the text color white so
7:11:18in our CSS we'll use the color property
7:11:23and colon white and semicolon and save
7:11:29and that will make our text White
7:11:32next let's change the style or the font
7:11:35of this text we'll type font
7:11:40dasam colon
7:11:43aial which is what the final design uses
7:11:47and
7:11:48save all right now let's style these
7:11:51elements one by one to match the final
7:11:54design we'll start with this paragraph
7:11:57at the top so inside the paragraph
7:12:00element
7:12:01let's add a class so we can style it in
7:12:05CSS we'll add class
7:12:08equals let's call this the
7:12:11title and then in our CSS we can style
7:12:15this class by starting with a DOT and
7:12:18then
7:12:19title and curly
7:12:22brackets so let's make our title really
7:12:25big like the final design we'll change
7:12:29the font Das size colon 30 pixels and
7:12:37save so that looks close enough next
7:12:40let's make the text bold in our CSS
7:12:44we'll use Font D weight colon bold and
7:12:52save now let's move on to installing the
7:12:56buttons so first we're going to need
7:12:58these images in our project and I'll
7:13:01show you how to get them we'll put our
7:13:04Mouse over the rock image and we'll
7:13:07rightclick and we'll click save
7:13:10image and now we're going to find the
7:13:13folder that contains all of our code so
7:13:16for me it's on the
7:13:18desktop and it's this folder right here
7:13:21so I'll double click this folder and
7:13:23then leave the file name as the default
7:13:26rock- emoji and click save
7:13:31and now in our code editor if we click
7:13:34here we should be able to see the rock
7:13:37image let's do the same with the paper
7:13:40and scissors image so we'll hover over
7:13:43it rightclick save
7:13:47image and in the same folder that
7:13:49contains our code we're going to save
7:13:52the paper image and finally rightclick
7:13:56save image and we'll save the scissors
7:13:59image
7:14:02all right now that we have these images
7:14:04in our code editor let's learn how to
7:14:06load them onto the page so we can do
7:14:10this using an HTML element so we'll go
7:14:13back to our HTML code and we'll scroll
7:14:17down and inside the button we're going
7:14:21to add an image element so let's type
7:14:25less than IMG and greater than so this
7:14:30is the image HTML element it loads an
7:14:33image onto the page the image element
7:14:36doesn't require a closing tag this is
7:14:39called a void element now to load an
7:14:42image we're going to add an attribute to
7:14:45this element called
7:14:49SRC so SRC stands for Source it tells a
7:14:53computer which file or image to load so
7:14:57let's look in our
7:14:59project for this button we're going to
7:15:01load rock- emoji.png
7:15:05inside the source attribute we'll type
7:15:10rock-
7:15:12emoji.png
7:15:14so what this does is it will look for
7:15:17the file with this name beside the HTML
7:15:21file and it finds it right here and it
7:15:24will load it onto the page if we
7:15:28save now inside our button it loaded the
7:15:31rock
7:15:32image right now this image is too big so
7:15:36let's use CSS to decrease the size of
7:15:39this image we'll hide the files and
7:15:43let's give a class attribute to the
7:15:45image element so we can style it so
7:15:48we'll type class equals and let's call
7:15:52this a move Das
7:15:56icon and I'm also just going to add some
7:15:59new lines to make the code a little
7:16:01easier to read so we'll scroll up to the
7:16:06CSS and we're going to style this class
7:16:09using dot move Dash icon and curly
7:16:16brackets and let's decrease the height
7:16:19of this image we can use the property
7:16:23height colon and a pixel value 50 pixels
7:16:29and Save
7:16:32so this will make the height of this
7:16:34image 50 pixels and it will also resize
7:16:38the width automatically so that the
7:16:40image keeps its shape so this size looks
7:16:43pretty close to the final design so we
7:16:46can move
7:16:47on another feature of the source
7:16:50attribute is that we can put our files
7:16:53into folders so let's open the files by
7:16:56clicking
7:16:58here and let's say that we want to
7:17:00organize all of our images into a folder
7:17:04so we're going to create a folder by
7:17:06clicking this
7:17:07icon and let's name this folder
7:17:13images and we're going to drag these
7:17:15images into this
7:17:18folder and drag this in
7:17:21here and in
7:17:25here now unfortunately you can see that
7:17:27the image doesn't load anymore and
7:17:30that's because if we look at our code
7:17:33Source tells a computer to look for this
7:17:36file beside this HTML
7:17:40file and right now there is no file
7:17:43called rock- emoji.png because we put it
7:17:47in a folder so to tell the computer to
7:17:50look inside this folder we're going to
7:17:52type the folder name at the start which
7:17:55is
7:17:57images and then we're going to type a
7:17:59slash to go into the images folder and
7:18:03then look for this file which is right
7:18:06here if we
7:18:08save the computer is now able to find
7:18:12this image and load it onto the web page
7:18:15so this feature is called file paaths we
7:18:18can tell the computer to look for a
7:18:20folder beside the HTML file like images
7:18:24and then use a slash to tell it to go
7:18:27into the folder and look for a file
7:18:32now let's use this code to load the
7:18:34other images onto our page so for the
7:18:38paper image we're going to go to this
7:18:40button remove the text and then create
7:18:45an image element less than IMG greater
7:18:49than and we'll give it an attribute
7:18:52Source equals and we'll locate the image
7:18:56it is in the images folder so we'll type
7:19:01images and then slash to go into the
7:19:04folder and we'll load the file paper-
7:19:08emoji.png
7:19:10so
7:19:12paper-
7:19:14emoji.png
7:19:16and
7:19:18save so our image is really big let's
7:19:22give it the same class that we gave the
7:19:24rock image so we'll add a class equals
7:19:30move Dash icon and
7:19:35save so these Styles get applied to all
7:19:38elements with the class move- icon so it
7:19:42applies to both of these
7:19:45elements now let's do the same thing for
7:19:47the scissors button we'll remove the
7:19:50text and we'll replace it with an image
7:19:55element and we'll give it the source
7:19:59attribute images
7:20:02slash
7:20:03scissors Das
7:20:06emoji.png
7:20:08and we'll also give this a
7:20:12class of
7:20:14move- icon to resize the images like up
7:20:18here let's
7:20:20save and now we have all the images that
7:20:23we
7:20:25need now let's make these buttons look
7:20:28like the final design we we scroll
7:20:31up and let's add a class to these
7:20:34buttons so we can style them with
7:20:37CSS so we'll add class equals and let's
7:20:42use
7:20:44move-
7:20:46button and for this button We'll add the
7:20:49same class class equals
7:20:53move-
7:20:55Button as well as for the third
7:20:58button class = move-
7:21:03button now let's scroll up to our CSS
7:21:07and we're going to style this class
7:21:10using move- button and curly
7:21:16brackets so first let's change the
7:21:19background color to match the background
7:21:21color of the page so we'll use
7:21:25background Das color colon and we'll use
7:21:30a special value called
7:21:33transparent and this will make the
7:21:35button see- through if we
7:21:38save now these buttons are
7:21:41see-through next let's add this white
7:21:44border to our buttons so we'll use the
7:21:48Border
7:21:49property colon and we're going to give
7:21:52it three values the first value is our
7:21:55border width or how thick the border is
7:21:59let's use one pixel for now the second
7:22:03value is the Border style and we'll use
7:22:07solid because it's a solid border other
7:22:11values we can use here are dotted or
7:22:14dashed and the third value is the Border
7:22:18color so we're going to use
7:22:21white and semicolon at the end and
7:22:26save and that will add a border so let's
7:22:29make our border a little thicker like
7:22:31the final design we'll change this first
7:22:34value which is the Border width to three
7:22:37pixels and
7:22:40save okay so that looks pretty close now
7:22:43let's change the size of our buttons
7:22:46usually we use the padding to add space
7:22:49on the inside of an element but in this
7:22:52case our images have different sizes so
7:22:55we're going to use width and height to
7:22:57set an exact size so so in our CSS we'll
7:23:02type
7:23:04WID colon and let's make it 100
7:23:08pixels and
7:23:11height and also 100 pixels and
7:23:16save so it looks like our final design
7:23:19is a little bigger than what we have
7:23:21here so let's increase the width and the
7:23:24height so let's try 120 pixels and Save
7:23:30all right so that looks pretty close now
7:23:33let's make these buttons round and the
7:23:36property for that is called border Das
7:23:41radius
7:23:43colon and to know how much we need to
7:23:45make it round we can set it to half of
7:23:49the width or the height so we'll set it
7:23:52to 60
7:23:54pixels and
7:23:56save okay so it's coming along really
7:23:58well and lastly we're going to add some
7:24:01space between the buttons so remember
7:24:05that space outside of an element is
7:24:07called margin so let's add some margin
7:24:11on the right so we'll
7:24:13type
7:24:15margin
7:24:17dasr colon and maybe 10 pixels and
7:24:24save and finally when we put our Mouse
7:24:27over the button it turns into a pointer
7:24:30so the property for that is cursor colon
7:24:37pointer and save and now our buttons
7:24:42match the final design so let's keep
7:24:44moving and style the next part of the
7:24:47project which is the result and the
7:24:50moves if you don't see this here you can
7:24:53just play the game and it'll give us a
7:24:55new
7:24:56result so to make this easier to style
7:24:59we're going to go into our code we're
7:25:01going to find the result which is here
7:25:04and we're going to add some fake results
7:25:07like you
7:25:10win let's save and now we have this
7:25:13result and we're going to style it so
7:25:16let's give this a class of
7:25:20result and then in our
7:25:23CSS we're going to style the class dot
7:25:27result and curly brackets
7:25:31so let's make the text bigger we're
7:25:33going to use Font Das size colon and
7:25:38maybe 25 pixels and
7:25:42save okay that looks pretty good let's
7:25:45make the text bold so we use Font Das
7:25:50weight colon
7:25:53bold and
7:25:55save and finally we're going to add
7:25:58extra spaces between this and the
7:26:02buttons so we'll add
7:26:07margin-top and maybe 50 pixels and
7:26:13save okay so I think that looks close
7:26:16enough now let's style the moves and
7:26:19again we'll scroll
7:26:21down and we're going to add some fake
7:26:24moves in here so it's easier to style so
7:26:27we'll Type U
7:26:30and then an image so let's use the less
7:26:34than image and the source
7:26:38attribute and let's just load the rock
7:26:41image and the scissors image for the
7:26:44computer so to load the rock image we'll
7:26:47look inside the images folder slash to
7:26:50go into the folder and then rock-
7:26:54emoji.png
7:26:56so
7:26:58rock- emoji
7:27:01PNG and greater than and we'll add
7:27:05another image less than image source
7:27:10equals Images slash the scissors
7:27:15Emoji scissors Das
7:27:19emoji.png
7:27:21and greater than and finally the text
7:27:26computer
7:27:27computer let's save
7:27:31and this will create some results
7:27:33although the images are really big so we
7:27:36can use the class move icon to resize
7:27:39them to be the same size as the buttons
7:27:43so for both of these images let's add
7:27:46the
7:27:47class
7:27:48move-
7:27:50icon and here as well class equals
7:27:55move- icon and Save
7:28:00and now our images look
7:28:02good next let's style this score section
7:28:06so the only thing we need here is to add
7:28:09spaces between these two so in this
7:28:12score element let's add a class of
7:28:18score and we'll scroll up and style this
7:28:22element using DOT score
7:28:26brackets and let's add some margin at
7:28:29the top
7:28:31so
7:28:33margin-top colon 50 pixels and
7:28:38save and let's compare it and it looks
7:28:41like our final design has a little more
7:28:43spacing than this so let's change this
7:28:47to 60 pixels and
7:28:51save and that looks close enough and
7:28:54finally we'll style the reset score
7:28:57button so let's go back to our HTM
7:29:00ml we'll add a class to this button so
7:29:05here class equals reset
7:29:10dcore Das
7:29:14button so at the top we'll type dot
7:29:19reset
7:29:21dcore
7:29:23Dutton curly
7:29:25brackets and we'll make the background
7:29:27color white so background dasc color
7:29:32colon
7:29:34white and let's also remove the border
7:29:37from our button using border colon
7:29:42none let's save and see how it
7:29:46looks and then let's increase the size
7:29:49of this text because the final design
7:29:52looks a little bigger so we'll add font
7:29:56Das size colon 15 pixels and
7:30:02save now let's add some extra space on
7:30:05the inside of the button so that's
7:30:08padding padding colon and we'll give it
7:30:13two values the first value is the
7:30:15vertical padding let's use 10
7:30:19pixels and the second value is the
7:30:22horizontal padding so let's use 15
7:30:27pixels and Save
7:30:31and it looks like our final project is a
7:30:33little shorter than our button so let's
7:30:36change the vertical padding to maybe
7:30:40eight and save and the last step is to
7:30:44add the cursor pointer so here cursor
7:30:50colon
7:30:51pointer and
7:30:54save and that's pretty much it we
7:30:56finished styling our rock paper scissors
7:30:58project so now I'm going to rearrange my
7:31:01windows so we can see the entire design
7:31:04and it looks really nice the last step
7:31:07here is to remove these fake results and
7:31:10use JavaScript to insert these results
7:31:13instead so let's scroll
7:31:17down and we'll remove this
7:31:22result and let's actually copy this code
7:31:25because we want our JavaScript to
7:31:26generate this code so we'll right click
7:31:31and
7:31:32copy and let's scroll to the
7:31:35bottom to where we insert the moves onto
7:31:38the page which is here and instead of
7:31:41this text we're going to rightclick and
7:31:45paste the code that we had before and
7:31:49this time instead of picking Rock every
7:31:51time we're going to substitute this with
7:31:54the player move so we're remove this and
7:31:58because this is already a template
7:32:00string we can insert a value directly
7:32:03inside using dollar and curly brackets
7:32:07and we'll insert the
7:32:09player
7:32:11move let's also insert the computer's
7:32:14move in here so we'll remove this and
7:32:17insert a value using dollar and curly
7:32:20brackets and we'll insert computer
7:32:25move and now that we're inserting this
7:32:28with JavaScript we can scroll up and
7:32:31remove the fake
7:32:33result which is here so we can select it
7:32:37and delete
7:32:38it now let's
7:32:41save and we're not going to have
7:32:43anything in our results and when we
7:32:45click a move it will show us the result
7:32:49and also show us the moves that we
7:32:51picked and that's it we finished the
7:32:54rock paper scissors
7:32:56project the last thing we're going to
7:32:58learn in this lesson is how to organize
7:33:00our code into different
7:33:03files so notice that right now all of
7:33:06our HTML CSS and JavaScript is in one
7:33:10HTML file and this makes the code harder
7:33:13to read because the file is bigger and
7:33:16it mixes three different languages to
7:33:19make our code more organized and easier
7:33:22to read we're going to separate each
7:33:24language into its own file so let's
7:33:28scroll down and we'll start by
7:33:30separating our JavaScript into its own
7:33:33file we'll click here to show our files
7:33:37and then click this icon to create a new
7:33:41file and we'll name this file
7:33:4410-
7:33:48rock-paper-
7:33:50scissors. JS and press
7:33:54enter so when we end a file
7:33:57withjs it tells the computer that this
7:34:00file contains JavaScript code not just
7:34:04text now let's go back to our HTML
7:34:08file and we're going to move all of this
7:34:10code into the Javascript file so we'll
7:34:14select this
7:34:17code and then we'll
7:34:20rightclick and
7:34:22copy and inside the Javascript file
7:34:26we'll rightclick and paste
7:34:31now let's
7:34:33save and we'll go back to the HTML file
7:34:37and we can delete all this JavaScript
7:34:41code and now we're just going to load
7:34:44our Javascript file on to the web page
7:34:47to do that we can use an attribute of
7:34:50the script element called SRC or source
7:34:55so we'll make it equal and this does the
7:34:58same thing as the image element it tells
7:35:01a computer which file to
7:35:03load if we type
7:35:0610-
7:35:11rock-paper-scissors
7:35:14DJs this will look for a file called 10
7:35:17rockpaper scissors. JS beside our HTML
7:35:21file which is this file here and it will
7:35:24run all the JavaScript inside this file
7:35:28so it does the same thing as before
7:35:31except now our JavaScript code is in its
7:35:34own
7:35:35file and this makes our code cleaner
7:35:38because each file only contains one
7:35:41language and each file also contains
7:35:44less
7:35:45code now let's go back to the HTML file
7:35:49and
7:35:50save and you'll notice that our project
7:35:53works the same way as before we just
7:35:55organized our code
7:35:57better another feature of The Source
7:36:00attribute is that it also uses file
7:36:02paths so we can put this Javascript file
7:36:05in a folder and we'll be able to find it
7:36:09for example let's show our files and
7:36:12let's create a new folder by clicking
7:36:14this
7:36:15icon and let's name this folder
7:36:21scripts so this folder will contain all
7:36:24of our JS files so we can drag this file
7:36:29into the
7:36:32folder and now we can locate it using
7:36:35the source attribute by typing the
7:36:37folder name which is scripts and then a
7:36:42slash to go inside this folder and look
7:36:45for this file and it will find it right
7:36:49here if we
7:36:51save everything works as
7:36:54normal another feature is we can use
7:36:57multiple script elements this lets us
7:37:00split our JavaScript into multiple files
7:37:02and then load them all onto the page
7:37:05from top to
7:37:06bottom next we're going to learn how to
7:37:09separate our CSS into its own
7:37:13file let's scroll up to our
7:37:16CSS so we can do the same thing with CSS
7:37:20so let's click the HTML
7:37:23file and let's create a new
7:37:26folder and we'll call this folder Style
7:37:30and press
7:37:32enter so this folder will contain all of
7:37:35our CSS code let's click the folder and
7:37:39we'll create a new file by clicking this
7:37:42icon and let's name this file
7:37:4510-
7:37:47ro-
7:37:49paper-
7:37:51scissors. CSS and press
7:37:55enter so ending the file with CSS means
7:37:59this file contains CSS code and now we
7:38:03can go back to our
7:38:05HTML and move our CSS into its own file
7:38:10so let's select all this
7:38:12code and then right
7:38:15click
7:38:16copy and in here right click and
7:38:23paste and save this
7:38:26file now let's go back to our HTML
7:38:30and we can remove this
7:38:32code and we'll learn how to load our CSS
7:38:35file onto our
7:38:37website so we're not going to use the
7:38:40style element for this we're going to
7:38:43use a different element called the link
7:38:46element so we'll type less than link
7:38:50greater than and the link element
7:38:53doesn't require a closing tag this is
7:38:55another void element so the link element
7:38:58uses two attributes the first attribute
7:39:02is called
7:39:05R means relation this tells a computer
7:39:09what type of file we're loading so we're
7:39:12going to set this attribute to style
7:39:15sheet this means we're loading a CSS
7:39:18file and then we'll add a second
7:39:21attribute called
7:39:24href so href tells a computer which file
7:39:28we want to load
7:39:30so this also supports file paaths so we
7:39:33can type the Styles
7:39:36folder this will look for a folder
7:39:39beside the HTML called Styles which is
7:39:42this one right here and then we'll type
7:39:45slash to go inside the folder and look
7:39:49for this CSS file which is
7:39:5310- Rock Das paper Das scissors
7:40:00CSS so this will load all the CSS inside
7:40:04this file and apply it to our page so it
7:40:08does the same thing as before except we
7:40:11separated each language into its own
7:40:13file if we save everything still works
7:40:17and all the Styles get applied and just
7:40:21like the script element we can also use
7:40:23multiple link elements to load multiple
7:40:26CSS
7:40:28files so that's how we separate our code
7:40:30into separate files using the script
7:40:33element and the link element it makes
7:40:36our code a lot easier to read because
7:40:39each file contains one language and it
7:40:42contains less code and that's the end of
7:40:45this lesson as a final reminder the CSS
7:40:48we learned in this lesson is just a
7:40:50review if you want to learn CSS in more
7:40:53detail you can check out my HTML and CSS
7:40:57full course in the video
7:40:59description so in this lesson we
7:41:02reviewed CSS and added CSS to all of our
7:41:06projects we learned about the class list
7:41:09property which lets us control the class
7:41:12attribute of an element we finished our
7:41:14rock paper scissors project and we
7:41:17learned how to organize our JavaScript
7:41:19and CSS code into separate
7:41:25files thanks for watching this course so
7:41:27far if you want to support this channel
7:41:30you can check out the premium version of
7:41:32my courses just like this one where you
7:41:34can get a certificate of completion and
7:41:36a Better Learning platform if you're
7:41:39interested in extra videos from me more
7:41:41in-depth videos and behindth scenes
7:41:44content you can check out these links
7:41:47here you can also support the channel by
7:41:49liking the video subscribing and sharing
7:41:52this video with others thanks again and
7:41:55let's continue with the course
7:41:59here are some exercises to help you
7:42:01practice using HTML CSS and JavaScript
7:42:05together
7:42:31in this lesson we're going to learn two
7:42:33more features of JavaScript called
7:42:36arrays and loops and we're going to use
7:42:39these features to create this to-do list
7:42:42project first let's create a new file
7:42:45for this lesson we'll go to our code
7:42:48editor and click up here to show our
7:42:51files and this time make sure you have
7:42:54one of these HTML files selected so we
7:42:57don't create the new file in one of
7:42:59these
7:43:00folders so now we're going to click this
7:43:03icon to create a new
7:43:05file and we're going to name this file
7:43:0911- arrays Das and Das
7:43:16loops.
7:43:17HTML and press
7:43:20enter now let's copy the previous lesson
7:43:24into this file so we'll click on 10 Dom
7:43:27projects and and we'll type here and typ
7:43:30control a or command a to select the
7:43:33code and then
7:43:36rightclick
7:43:38copy and in
7:43:40here right click and
7:43:44paste now let's hide our files and we'll
7:43:48prepare this file for this lesson so we
7:43:51can scroll to the
7:43:53top and we'll change the title to arrays
7:43:59and
7:44:01loops and let's remove all of the
7:44:09CSS and we'll also remove the
7:44:13HTML which is right
7:44:18here and we'll remove all the
7:44:24JavaScript now let's
7:44:27save and we'll open this file in the
7:44:29browser by right clicking open with live
7:44:35server and let's also open the console
7:44:38so we right click click
7:44:41inspect and click the
7:44:44console and now we can close the
7:44:47previous
7:44:48tabs and the previous code for
7:44:53now until we just have the lesson 11
7:44:57file now we're ready to learn arrays an
7:45:01array is another type of value in
7:45:04JavaScript and it represents a list of
7:45:07other values so let's do an example and
7:45:10create our first array we'll go into the
7:45:13script element and we're going to type
7:45:17open square bracket and closed square
7:45:19bracket and inside the square brackets
7:45:22we'll type a value like the number 10
7:45:26and then we'll type comma and and
7:45:29another value like the number 20 and
7:45:32then comma again and a third value like
7:45:35the number
7:45:3730 so this is an array and it represents
7:45:42a list of three numbers 10 20 and
7:45:4630 now arrays themselves are also values
7:45:51which means we can save them in a
7:45:53variable so at the front we can create a
7:45:56variable using const
7:45:59and let's name it my array and we'll
7:46:04make it equal to this array and we'll
7:46:07add a semicolon at the end so now we
7:46:11created a list of values and we saved
7:46:14this list in this
7:46:16variable let's create a new line and
7:46:19we'll
7:46:22console.log my
7:46:25array and Save
7:46:28and it will display the list of values
7:46:31in the console so that's basically what
7:46:34an array is it's a list of
7:46:37values now to get a specific value in an
7:46:40array we can use square brackets so
7:46:43let's create a new line and we'll type
7:46:47my array and square
7:46:51brackets inside these brackets we'll put
7:46:53a number like
7:46:55zero this number represents the position
7:46:59in the array so zero means the first
7:47:02value if we
7:47:05console do log this
7:47:10code and
7:47:12save my array Square braet 0 gives us
7:47:16the first value which is 10 and that's
7:47:19what's displayed in the
7:47:21console now if we change this to
7:47:25one this will get us the second value in
7:47:28the array which is 20 if we save it
7:47:32displays 20 so this number represents
7:47:36the position in the array zero is the
7:47:40first value one is the second value two
7:47:44is the third value and so on we can also
7:47:48change a value in an array also using
7:47:51square brackets so let's create a new
7:47:55line and we'll type my array
7:47:59square brackets and let's say we want to
7:48:02change the first value so we'll type
7:48:05zero for the first value and we just
7:48:08make it equal to something else like
7:48:1399 now if we
7:48:17console.log my array
7:48:20again and
7:48:23save you can see that this changed the
7:48:26first value to 99
7:48:29so that's basically how arrays work we
7:48:32can access a value inside an array and
7:48:35we can also change a value inside an
7:48:38array now that we understand the basics
7:48:41of arrays let's learn the syntax rules
7:48:44to create an array we start with an open
7:48:47square bracket and we end with a closed
7:48:50square bracket inside we can put a list
7:48:54of values and we separate each value
7:48:57with a comma
7:48:59we can also write an array on multiple
7:49:01lines like this we just put the new
7:49:05lines after the
7:49:08comma Now to get a value inside an array
7:49:11we can use square brackets and a number
7:49:15like one this number is called the index
7:49:19it represents the position in the array
7:49:21that we want to get so the first value
7:49:25is index zero the second value is index
7:49:28one 1 third value is index 2 and so on
7:49:33notice that the index starts at zero
7:49:36this is called a zero indexed
7:49:39array now inside an array we can put any
7:49:42type of value for example let's create a
7:49:46new line and we'll create a new array
7:49:50using square brackets and inside we can
7:49:54put the number one and then comma and we
7:49:58can also put a string like
7:50:01hello and another comma and we can put a
7:50:05Boolean value like true and another
7:50:09comma and we can even put an object like
7:50:14Curly
7:50:14brackets Name
7:50:17colon
7:50:20socks now an array itself is also a
7:50:24value that means we can save arrays in
7:50:28very variables like this or even save it
7:50:32in an array for example in this array we
7:50:37can add an array inside like 1 comma
7:50:432 next arrays have a weird behavior when
7:50:46we try to check the type of an array so
7:50:50on a new line let's type
7:50:55console.log type of and then square
7:50:59brackets one comma
7:51:022 and
7:51:05save this will tell us that an array is
7:51:09an object and that's because an array is
7:51:13actually an object but it's just a
7:51:15special type of object if we want to
7:51:18check if something is specifically an
7:51:20array we can use this code capital A
7:51:25array dot is
7:51:29array
7:51:31brackets and inside the brackets we'll
7:51:33put an array like square brackets 1
7:51:38comma 2 so this will check if this value
7:51:42is an array if we
7:51:46console. log this
7:51:49result and
7:51:51save it will display
7:51:55true and finally because arrays are are
7:51:58just a type of object they also have
7:52:01properties and methods we can use so one
7:52:04useful property is called length so
7:52:08we'll type
7:52:12console.log my
7:52:15array.
7:52:18length this will tell us how many values
7:52:21are in the array so my array has three
7:52:25values so if we save
7:52:28it will display
7:52:30three next we'll learn a useful method
7:52:34of an array called push this adds a
7:52:38value to the end of the
7:52:41array if we did my
7:52:45array.
7:52:47push
7:52:48100 this will add 100 to the end of my
7:52:53array if we console.log
7:52:58my
7:53:00array and
7:53:02save you can see that 100 was added at
7:53:06the
7:53:07end the last method we're going to learn
7:53:10for now is called do splice this removes
7:53:14a value from an array for example my
7:53:20array do
7:53:22splice and
7:53:24brackets and a splice takes two numbers
7:53:28the first number is the index that we
7:53:30want to remove so let's say we want to
7:53:33remove the first value which is index
7:53:37zero the second number we give to splice
7:53:40is the number of values we want to
7:53:43remove if we give it one it will remove
7:53:46one value at index zero if we give it
7:53:50two it will remove two values starting
7:53:53at index zero so for now let's just
7:53:57remove one value
7:53:59and let's create a new line and
7:54:04console.log my
7:54:08array and
7:54:10save you can see that splice removed the
7:54:13first value from the array or index0
7:54:17which was
7:54:1899 all right now that we understand the
7:54:22basics of arrays and the syntax rules
7:54:25let's do some practical examples so
7:54:28prepared a project we can do for this
7:54:30lesson we'll go to our browser create a
7:54:34new tab at the
7:54:36top and here we'll type
7:54:41superimple
7:54:43dodev SL projects slash arrays and press
7:54:51enter so this page contains the to-do
7:54:54list project we're going to create in
7:54:56this lesson so down here is the final
7:54:59version of the project we can type a
7:55:02name for our to-do like make
7:55:06dinner give it a due date and then click
7:55:10add and it will add it to our list we
7:55:13can add another to-do like wash
7:55:18dishes and then select a due date and
7:55:22click add again and it will add another
7:55:25to-do to our list and each to-do also
7:55:28has a delete button so we can delete it
7:55:31when we're finished the task so this is
7:55:34the final version of the project and
7:55:37these two up here are simpler versions
7:55:40of the project that we're going to use
7:55:42to work our way up so let's start with
7:55:45the first project up here we're going to
7:55:48open our console by
7:55:51right-clicking click
7:55:53inspect and click the
7:55:56console and the way way this first
7:55:59project works is we can type a to-do in
7:56:02this text box like make
7:56:06dinner and when we click add it will add
7:56:10the to-do to an array and display it in
7:56:13the
7:56:14console if we type another to-do like
7:56:18wash dishes and click add it will add it
7:56:23to the array and display it in the
7:56:26console so let's create create this
7:56:28project we'll start by creating a file
7:56:31for this project we'll go to our code
7:56:34editor and click up here to show our
7:56:38files and click this icon to create a
7:56:41file and we'll name this
7:56:4511-
7:56:46too-
7:56:48list.
7:56:50HTML and press
7:56:53enter now let's copy the code from
7:56:56arrays and loops. HTML
7:56:58so we'll click here control a or command
7:57:02a and then
7:57:04rightclick
7:57:06copy and down here right click and
7:57:12paste and let's close this for
7:57:15now we'll scroll up and change the title
7:57:20to to do list and remove all the
7:57:26JavaScript code
7:57:31and this time instead of writing all the
7:57:33JavaScript in here let's actually put
7:57:35the JavaScript in a separate file which
7:57:38we learned in the previous lesson so
7:57:40we'll open our files
7:57:42again and this time we'll go to our
7:57:45scripts folder we'll click this JS file
7:57:49and we'll click this icon to add a new
7:57:52file to this folder and let's name it
7:57:5711- to-do Das
7:58:02list.js and press
7:58:04enter next we're going to load this file
7:58:08into our HTML file so let's open this
7:58:12and in the script element we can remove
7:58:15the spaces and we're going to add an
7:58:17attribute called
7:58:20SRC equals and we're going to load the
7:58:23Javascript file that we just created
7:58:26which is inside the script folder so
7:58:29we'll type
7:58:31scripts and then a slash to go into this
7:58:35folder and we'll load the file
7:58:3911-
7:58:40too-
7:58:43list.js and
7:58:46save so now I'm going to drag this file
7:58:49down here so I can see both the HTML and
7:58:53JavaScript at the same time close this
7:58:56for now and I can close the other code
7:58:59for now as
7:59:01well and finally let's open this in our
7:59:04browser so we'll right
7:59:06click open with live
7:59:10server and let's also open the console
7:59:13on this page right click click
7:59:17inspect and click the
7:59:20console now one more thing I'm going to
7:59:22do for this video is I'll rearrange my
7:59:25windows so that we can have the the
7:59:28final design at the
7:59:30bottom let's start by creating the HTML
7:59:34elements let's go to the body and we'll
7:59:37actually create a paragraph element to
7:59:40start inside the paragraph we'll put the
7:59:43text to-do
7:59:47list next let's create the text box so
7:59:51to create a text box less than
7:59:55input greater than and add a placeholder
7:59:59to this text box Place holder equals to
8:00:05do name finally let's add this
8:00:10button so on a new line let's type less
8:00:14than button greater than and inside the
8:00:18button we'll have the text
8:00:21add now let's
8:00:23save and this creates all the HTML
8:00:26elements that we need
8:00:29next let's write our JavaScript so first
8:00:33we're going to create an array to store
8:00:35our to-dos and then when we click the
8:00:39add button we're going to get the text
8:00:41from the text box and add it to our
8:00:45array and finally we'll console.log the
8:00:49array now let's convert these steps into
8:00:52code let's create a new array first
8:00:55using const
8:00:58let's name it
8:01:00to-do list and we'll make it equal to
8:01:04square
8:01:05brackets so this is an array with no
8:01:08values inside we also call this an empty
8:01:12array next when we click the button
8:01:15let's get the value from the text box so
8:01:19let's go to our button and add an
8:01:22onclick
8:01:24attribute and then inside here let's
8:01:28create a function for this so down here
8:01:32let's create a
8:01:35function we'll name it add Todo brackets
8:01:40and curly
8:01:42brackets and then inside the onclick
8:01:44attribute we're just going to call this
8:01:47function add too and
8:01:52brackets the next step is to get the
8:01:55text in the text box we can do that
8:01:58using document. query selector so to use
8:02:02Query selector we're going to put a
8:02:04class on this input element so we'll
8:02:08type the class
8:02:10attribute
8:02:12js- name Das
8:02:16input and then in here document do query
8:02:24selector brackets and a string and we'll
8:02:28type a DOT to get a class and we'll get
8:02:32this class
8:02:34js-
8:02:36name-
8:02:38input as a reminder this gets an element
8:02:42with the class JS name input which is
8:02:45this element and puts it into our
8:02:49JavaScript and now let's save this in a
8:02:52variable so at the start let's type
8:02:56const in input element and make it equal
8:03:01to this
8:03:03result so now we took this input and put
8:03:06it into our
8:03:08JavaScript to get the text out we're
8:03:10going to use a property of the input
8:03:13element called value so down here
8:03:18input
8:03:20element.
8:03:21value and let's save the value in the
8:03:24text box in a variable so we can use it
8:03:27later
8:03:28at the front const name and we'll make
8:03:33it equal to whatever's in the text
8:03:37box before we continue let's
8:03:41console.log the name to check if this is
8:03:45working so let's save this Javascript
8:03:48file and let's also save this HTML
8:03:53file we'll go to our browser and I'll
8:03:56resize it so we can you can see the
8:03:58console and now if we type something in
8:04:01the text box like make dinner and click
8:04:06add it will get the text from the text
8:04:09box and then display it in the
8:04:12console okay so it's looking good so far
8:04:16the next step is to add this name to our
8:04:19to-do list so we learned how to do this
8:04:22earlier we can use a method called push
8:04:26push will add a value to the end of the
8:04:29array so let's remove this for now and
8:04:33at the
8:04:35bottom we're going to type our
8:04:38array to do
8:04:42list. push
8:04:45brackets and then between the brackets
8:04:48we're going to add our name
8:04:50here and now the last step is to
8:04:53console.log the entire array
8:05:00console.log Todo
8:05:03list and
8:05:06save now let's give it a try or'll type
8:05:11make dinner in the text box and click
8:05:15add it will take this text add it to the
8:05:18array and then console.log the array and
8:05:22now we have our to-do list let's add
8:05:25another to-do we'll type type wash
8:05:30dishes and click
8:05:32add again it will get the text in the
8:05:35text box and then add it to the array so
8:05:39now our array has two values and then we
8:05:42display them in the
8:05:43console so that's how we create this
8:05:47first version of the to-do list project
8:05:50now one more feature we're going to
8:05:52create is if we add something to our
8:05:55to-do list and click add
8:05:58it will reset the text box to do that
8:06:02let's go into our
8:06:03code and we'll create some new lines and
8:06:07remember that the value property
8:06:09represents the text in the text box so
8:06:12to change the text in the text box we
8:06:15can simply change the value property so
8:06:18we'll type
8:06:20input
8:06:22element. value and change it to the
8:06:26empty string
8:06:27so this will make the text in the text
8:06:29box become empty if we
8:06:33save and now type something in the text
8:06:37box and click
8:06:39add it will reset the text in the text
8:06:43box let's move on to the second version
8:06:46of the to-do list so here when we type
8:06:49something in the text box like make
8:06:53dinner and click add it will actually
8:06:56display it on the page if we type
8:06:59something else like wash dishes and
8:07:04click add it will also add it to the
8:07:07page so how do we take our array and
8:07:11display each value on the page to do
8:07:14this we're going to learn another
8:07:16feature of JavaScript called loops loops
8:07:20let us run some code over and over like
8:07:23a loop so let's go back to our 11 arrays
8:07:28and Loops file and we can close this
8:07:31JavaScript file for now and we're going
8:07:33to learn Loops so first let's comment
8:07:37out the previous code by typing
8:07:41slashstar and at the bottom star
8:07:45slash let's scroll
8:07:47down and we'll create our first Loop
8:07:51we'll start by creating a variable using
8:07:54the word let and we'll name name this
8:07:57variable I and we'll make it equal to
8:08:021 next we're going to type the word
8:08:06while and then brackets and curly
8:08:10brackets and then inside these curly
8:08:13brackets we're going to put some code
8:08:15that the computer will run over and over
8:08:18just like a loop let's put the code
8:08:22console.
8:08:24log
8:08:26I so this will display the variable I in
8:08:29the console over and over again now
8:08:33obviously we don't want to Loop this
8:08:35forever so how do we get this Loop to
8:08:38stop we can do that using the round
8:08:41brackets up here inside these round
8:08:44brackets we're going to put some code
8:08:46that results in true or false for
8:08:49example we can check if I is less than
8:08:54or equal to 5 so the way this works is
8:08:58that if this code results in true the
8:09:01loop will keep going over and over once
8:09:05this results in false the loop will stop
8:09:08and it will go to the next line now you
8:09:11may notice that this code will never
8:09:14result in false because I is equal to 1
8:09:17and 1 is always less than or equal to 5
8:09:21so when does this actually become false
8:09:24and Stop the Loop the answer is inside
8:09:28this loop we're also going to update
8:09:30this variable I so we'll type I and
8:09:34we'll make it equal to itself plus
8:09:391 so now every time we Loop over this
8:09:43code we're going to increase I by 1 and
8:09:47eventually I will be greater than 5 this
8:09:50will return false and it will stop the
8:09:53loop if we
8:09:55save and then go back back to the tab
8:09:58for this file and I'll rearrange my
8:10:01windows so we can see the console this
8:10:04Loop makes the computer count from 1 to
8:10:085 so let's go over this code step by
8:10:11step to make sure we understand how it
8:10:14works first we create a variable I and
8:10:18we make it equal to one and then we do a
8:10:22loop so if this condition is true the
8:10:26computer will keep running this code
8:10:29over and over again so the first time it
8:10:33Loops I equals 1 and then it displays
8:10:36one in the console and then we increase
8:10:39I to two now we go back to the top and
8:10:43we check this code 2 is less than or
8:10:47equal to 5 this is true so we're going
8:10:50to run this code again this time I equal
8:10:532 and we display it in the console and
8:10:56then we we increase I to three and now 3
8:11:01is still less than or equal to 5 so this
8:11:04is true which means we keep running this
8:11:07code and eventually this is going to
8:11:10increase I to six once I is six this
8:11:15will become false which will cause the
8:11:17loop to stop and then we go to the next
8:11:20line so that's why it counts from 1 to 5
8:11:24and then it stops at five
8:11:27so this is called a while loop while
8:11:32this condition is true it will keep
8:11:35running this code over and over again
8:11:38just like a loop as soon as this
8:11:40condition is false it will stop the
8:11:44loop all right now that we understand
8:11:47how a while loop Works let's learn the
8:11:50syntax rules to create a while loop we
8:11:53type the word while and then round
8:11:56brackets and curly brackets the code
8:11:59inside the round brackets is called the
8:12:02loop condition the code inside the curly
8:12:05brackets is called the loop body the
8:12:09variable I at the top is called the loop
8:12:13variable every time we loop we're going
8:12:15to increase the loop variable this is
8:12:18known as the increment step the
8:12:21increment step makes sure that the loop
8:12:24ends at some point without this
8:12:26increment step the loop would just keep
8:12:29going forever this is known as an
8:12:31infinite
8:12:33Loop now remember that I = I + 1 has a
8:12:38shortcut instead of this we can just do
8:12:42I plus = 1 and remember we actually have
8:12:47an even shorter shortcut for plus equal
8:12:501 instead of this we can also do I ++
8:12:57so this will increase the value of I by
8:13:00one every time just like before so those
8:13:04are the three major parts of a loop the
8:13:07loop variable the loop condition and the
8:13:10increment
8:13:12step now each time we run this Loop this
8:13:16is called an
8:13:17iteration so in this Loop we did five
8:13:21iterations we ran this code five times
8:13:25and lastly Loops create a scope any
8:13:28variable that we create between these
8:13:31curly brackets will only exist inside
8:13:34the curly brackets so that's a while
8:13:38loop while this condition is true it
8:13:42will keep running this code over and
8:13:44over again once this condition becomes
8:13:48false it will stop the loop and go to
8:13:51the next
8:13:52line so in JavaScript there's actually
8:13:55two types of loops
8:13:57the first type is a while loop which we
8:14:00just learned now we're going to learn
8:14:03another type of loop called a for Loop
8:14:07to create a for Loop we'll create some
8:14:09new lines and then down here we'll type
8:14:14four and brackets and curly
8:14:18brackets inside these brackets we're
8:14:21going to type three pieces of code the
8:14:24first piece of code is a loop variable
8:14:27which is the same thing as this line up
8:14:30here so we'll type let I equal one and
8:14:36then semicolon space and we'll type a
8:14:40second piece of code which is the loop
8:14:43condition so here we'll type I less than
8:14:48equal to 5 and then semicolon and space
8:14:52and the last piece of code is the
8:14:54increment step which is this line right
8:14:57here so we'll type
8:15:01i++ and between these curly brackets
8:15:04we'll write the code that we want to
8:15:06Loop over and over so let's just type
8:15:09the code
8:15:13console.log I and
8:15:16save so this for Loop does the same
8:15:19thing as the while loop above it counts
8:15:22from 1 to 5 and if we look at this code
8:15:26we can see that a for Loop is just a
8:15:29shorter version of this while loop
8:15:32instead of writing the loop variable
8:15:35condition and increment step separately
8:15:38we group all of them together at the top
8:15:41so this Loop works the same way first we
8:15:44create a loop variable and then as long
8:15:48as this Loop condition is true we will
8:15:51keep running this code over and over and
8:15:55every time we run this code we're also
8:15:57going to increase the loop variable by
8:16:00one so now that we learned two ways of
8:16:03doing a loop which one should we use if
8:16:07we're doing a standard Loop for example
8:16:10it has a loop variable a condition and
8:16:13an increment step every time it's
8:16:15recommended to use a for Loop because a
8:16:18for Loop is shorter and more organized
8:16:21than a while loop however if it's a
8:16:25nonstandard loop then it might be better
8:16:28to use a while loop so what's an example
8:16:31of a non-standard loop so let's say we
8:16:34want to Generate random numbers until we
8:16:37get a number that's at least
8:16:390.5 to create this Loop we'll create a
8:16:43variable that will store the random
8:16:46number using
8:16:48let
8:16:49random
8:16:51number and make it equal to zero to
8:16:54start and then we'll do a while
8:16:58loop brackets and curly brackets now
8:17:02inside the loop condition we want to
8:17:05keep running this Loop until random
8:17:07number is at least
8:17:100.5 so we'll check if
8:17:13random number is less than
8:17:190.5 because if it is less than 0.5 we
8:17:22want to keep running this Loop until we
8:17:25get a random number that's at least
8:17:280.5 and then inside this loop we're
8:17:31going to generate a random number
8:17:33between 0 and 1 and then save it in the
8:17:36variable up here so we'll type random
8:17:41number and make it equal to capital M
8:17:46math.
8:17:49random so if this random number is less
8:17:52than 0.5 it will keep generating random
8:17:56numbers until we get a number that is at
8:17:58least
8:18:000.5 so at the bottom if we
8:18:04console. log
8:18:07random
8:18:08[Music]
8:18:09number and
8:18:11save it will give us a random number
8:18:14that's at least
8:18:160.5 so notice that this is a
8:18:19non-standard loop it doesn't really have
8:18:22a loop variable that we increase every
8:18:25time and it also doesn't have the
8:18:27increment step so in this situation when
8:18:31we have a non-standard loop it's better
8:18:34to use a while loop because they're a
8:18:37bit more
8:18:38flexible all right now that we learned
8:18:41the basics of Loops let's do some
8:18:43practical examples we're going to learn
8:18:46a technique called looping through an
8:18:49array this means we're going to go
8:18:51through each value of an array one by
8:18:54one and do something with each each
8:18:57value so first let's comment out the
8:19:00previous code using
8:19:04slashstar and star slash at the bottom
8:19:09let's create an array of strings so
8:19:12we'll create a variable const to do list
8:19:18equal to an
8:19:20array and inside this array we'll have
8:19:24the string make
8:19:27dinner another string wash
8:19:32dishes and another
8:19:35string watch
8:19:38YouTube now let's take each value in
8:19:41this array and display it in the console
8:19:44to do that we're going to run a loop and
8:19:47this Loop is going to count from zero to
8:19:50the last index in the array so remember
8:19:54that the index is the position of a
8:19:56value in the array the first value is
8:19:59index zero the second value is index one
8:20:03third value is index 2 and so on So
8:20:07Below this let's type four brackets and
8:20:11curly
8:20:12brackets inside these brackets we're
8:20:15going to create the loop variable so
8:20:18here we're going to count the
8:20:20indexes let index equals zero semicolon
8:20:27space and we'll do the loop condition so
8:20:31we'll keep looping as long as the index
8:20:34is less than or equal to the last index
8:20:38so remember that the index starts from
8:20:40zero this means that the last index in
8:20:43an array will be the number of values in
8:20:46the array minus one or the array. length
8:20:50minus
8:20:52one to do list do
8:20:57length minus
8:20:591 and here we'll add another semicolon
8:21:03and we'll add the increment step which
8:21:06is index Plus+ so we'll increase it by
8:21:11one every time now inside these curly
8:21:14brackets we can do something for each
8:21:17index of this array for now let's just
8:21:22console. log this index
8:21:27and
8:21:28save so this will count from 0 to two
8:21:33which is exactly all the indexes in this
8:21:36array and now using this index we can
8:21:39also access the value at this
8:21:43index so instead of just the index here
8:21:47we can do to-do list and then square
8:21:52brackets and between the brackets index
8:21:56this will take whatever the index
8:21:58variable is and access that index in the
8:22:02array so if the index variable is zero
8:22:06this will access to-do list index0 which
8:22:09is the first value when the index is one
8:22:13it will access to-do list index one
8:22:16which is the second value and so
8:22:19on so for now let's save the value in a
8:22:22variable using const value
8:22:26and make it equal to to-do list bracket
8:22:31index and now let's
8:22:33console.log the value instead if we
8:22:38save this will Loop through each index
8:22:41of the array get the value at each index
8:22:45and then display each value which is
8:22:47what we see in the console so this
8:22:50technique is called looping through an
8:22:53array we use a loop to go through each
8:22:56value of an array and then we can do
8:22:59something with each
8:23:01value now I'm going to show you a few
8:23:04shortcuts we can use when looping
8:23:06through an array instead of checking if
8:23:09index is less than or equal to to-do
8:23:12list. length minus one we can shorten
8:23:16this to index less than to-do list.
8:23:21length so this check does the same thing
8:23:24as before the loop Loop will stop at
8:23:27index equal length minus one but it
8:23:30saves us some
8:23:32typing another shortcut is instead of
8:23:35naming the loop variable index we can
8:23:38shorten this to
8:23:41I and we'll shorten this as well and
8:23:44this as well and that's why we often
8:23:47name the loop variable I I means
8:23:52index next we're going to learn a
8:23:55technique that we can combine with
8:23:57looping through an array called the
8:24:00accumulator pattern so first let's
8:24:04comment out the previous code using
8:24:08slashstar and star
8:24:10slash and at the
8:24:14bottom let's say we have an array of
8:24:16numbers like this how do we calculate
8:24:19the total of all the numbers in the
8:24:22array let's set up this problem let's
8:24:26say we have an array of numbers const
8:24:31nums equals array and then the numbers 1
8:24:371 and
8:24:393 and we want to calculate the total of
8:24:42all the numbers in this array to
8:24:44calculate the total we'll learn the
8:24:47accumulator pattern the first step of
8:24:50the accumulator pattern is to create a
8:24:52variable to store the result so below
8:24:56this let's create a variable const total
8:25:01and we'll make it equal to zero and the
8:25:04next step is to Loop through this array
8:25:07and update the result so down here four
8:25:12brackets and curly brackets and inside
8:25:16the round brackets we'll create the loop
8:25:19variable let I or index equals z
8:25:25semicolon space and we'll create the
8:25:28loop condition I less than nums do
8:25:34length and then semicolon and the
8:25:37increment step
8:25:40i++ so as we learned earlier this Loop
8:25:44will go through each index of this array
8:25:48and now between these curly
8:25:50brackets first let's use the index to
8:25:53get each value so we'll type
8:25:57nums and then square brackets and access
8:26:00the index I and let's save this in a
8:26:04variable using
8:26:06const num equals this
8:26:11value and finally we're going to add
8:26:14each number to the total we can type
8:26:18total and make it equal to
8:26:22itself plus each number and remember
8:26:26remember we have a shortcut for this
8:26:28which is plus
8:26:31equals and finally since we're changing
8:26:34this total variable we have to change
8:26:36from const to
8:26:39let all right so after this Loop we
8:26:43should have added each number in the
8:26:45array to the total so at the bottom
8:26:49let's
8:26:50console. log the
8:26:54total and Save
8:26:57and it will display five which is the
8:27:00exact total of all the numbers in this
8:27:03array so that's the accumulator pattern
8:27:06we first create a variable to store the
8:27:09result and then we Loop through the
8:27:11array and update the result so notice
8:27:16that as we Loop through the array we're
8:27:18adding or accumulating the results into
8:27:21this variable and that's why this is
8:27:24called the accumulator pattern pattern
8:27:27and we call this variable the
8:27:29accumulator
8:27:31variable all right let's do another
8:27:34example using the accumulator pattern
8:27:37let's say we're given this array of
8:27:39numbers again and we want to create a
8:27:42copy of the array where each number is
8:27:45doubled so if the array is 1 13 we're
8:27:50going to create a new array with 2
8:27:5426 so as at the bottom we'll create some
8:27:58new lines and use the accumulator
8:28:00pattern the first step is to create a
8:28:03variable to store the result let's type
8:28:08const and let's name this
8:28:11nums
8:28:12doubled and we'll make it equal to an
8:28:15array this time so notice in the
8:28:18previous example the accumulator
8:28:21variable was a number in this example
8:28:24the accumulator variable is an array so
8:28:27we can use different types of values to
8:28:30accumulate the result it all depends on
8:28:33the problem we're trying to solve so now
8:28:36the next step is to Loop through this
8:28:38array and update the result at the
8:28:42bottom we'll create a four Loop brackets
8:28:46and curly
8:28:48brackets inside the round brackets we'll
8:28:51create the loop variable let I equal
8:28:56zero and we'll create the loop condition
8:29:00I less than nums do length and then the
8:29:05increment step
8:29:08i++ and now between the curly brackets
8:29:12we're going to get the number at each
8:29:14index so const num equals nums square
8:29:21bracket I and then we're going to update
8:29:25the result
8:29:26so down here we're going to add this
8:29:29number doubled to this
8:29:31array so remember to add a value to an
8:29:35array we can use the method push so
8:29:38we'll type
8:29:40nums
8:29:42doubled do push
8:29:46brackets and we're going to add to this
8:29:48array the number num multiplied by 2 and
8:29:55now at the bottom
8:29:56let's
8:29:58console. log the result nums
8:30:03doubled and
8:30:06save so this second Loop will create an
8:30:09array where each number is doubled so
8:30:12that's how we solve this
8:30:14example all right now that we understand
8:30:17how to Loop through an array and the
8:30:19accumulator pattern let's go
8:30:22back and we'll create the second version
8:30:26of our to-do list so when we add
8:30:29something to the list it will appear on
8:30:32the page let's go to our code editor and
8:30:36we'll open 11 Todo list.
8:30:39HTML and we're also going to open the
8:30:42Javascript file so it's this one and for
8:30:46the video I'm going to drag it to the
8:30:48bottom of my code editor so that I can
8:30:51see the files side by side so I'll close
8:30:55this for now
8:30:56and I'll rearrange my windows a
8:31:00bit let's open the tab for this project
8:31:04so we'll review what we have so far we
8:31:07can click in this text box and type a
8:31:10to-do like make dinner and click add and
8:31:16it will add this to-do to this array
8:31:19which is this array right here we can
8:31:22type another to-do like wash dishes and
8:31:27click add and it will add it to the end
8:31:31of the array so now that we have this
8:31:33array of to-dos we want to display it on
8:31:37the page to do that we're going to Loop
8:31:40through this array and we're going to
8:31:42create some HTML code for each to-do and
8:31:46then put that code on the web page using
8:31:49the Dom so first let's Loop through this
8:31:53array to make this easier let's make a
8:31:56copy of this array so right click
8:32:00copy and then here we'll remove this and
8:32:05rightclick and
8:32:07paste so this will give us some default
8:32:10values to work with so at the top let's
8:32:15Loop through this array using a for Loop
8:32:19so we'll type four brackets and curly
8:32:24brackets and then in inside the round
8:32:26brackets we're going to create the loop
8:32:29variable let I or index equal zero
8:32:35semicolon and the loop condition I less
8:32:39than too list do
8:32:43length semicolon and then the increment
8:32:47step
8:32:49i++ so this will Loop through each index
8:32:53of this array and then inside the curly
8:32:57brackets let's get the string for each
8:33:00index so we'll create a variable to save
8:33:03it const to-do and we'll make it equal
8:33:08to to-do list square brackets and
8:33:15I and now for each to-do we're going to
8:33:18create some HTML code so we'll create a
8:33:22new line and create a variable const
8:33:27HTML and make it equal and we'll create
8:33:30some HTML code using this to-do using a
8:33:35template
8:33:36string and then inside we'll create a
8:33:39paragraph element so less than P greater
8:33:43than and then less than SL P greater
8:33:46than inside this paragraph we're going
8:33:49to insert this to-do so we'll type
8:33:52dollar and curly brackets and
8:33:56Todo all right so now we're looping
8:33:59through this array and for each to-do we
8:34:02created some HTML code and now we're
8:34:06going to combine all of this HTML code
8:34:09together and put it on the web page to
8:34:12combine this HTML together we're going
8:34:15to use the accumulator pattern so at the
8:34:18top of the loop we'll create a variable
8:34:22to store the result let to do list
8:34:28Capital
8:34:29HTML and we'll make it equal to the
8:34:32empty string at the start and then as we
8:34:36Loop through the array we're going to
8:34:38add this HTML to the variable up here so
8:34:43let's create a new line and we'll do
8:34:46to-do list Capital
8:34:50HTML plus equals
8:34:54HTML to combine all of this HTML code
8:34:58together so now after the loop let's
8:35:02console do log to do list
8:35:08HTML to see what we get if we
8:35:13save we took this array of strings
8:35:16generated paragraph elements for each
8:35:18string and then combine them all
8:35:21together so now that we have all this
8:35:23HTML we can put it on the page using the
8:35:27Dom so first let's create an element
8:35:31where we can put this
8:35:33HTML so inside the HTML file after the
8:35:38button we're going to create a different
8:35:41type of element called a div element so
8:35:45we'll type less than div greater
8:35:49than so the div element represents a
8:35:52container its purpose is to contain
8:35:55other elements inside like paragraphs
8:35:58buttons and even other
8:36:00divs so in this situation we can't
8:36:03actually use a paragraph element because
8:36:06in HTML we cannot have a paragraph
8:36:10inside another paragraph so that's why
8:36:13we have to use a div element here for
8:36:16now let's put some text inside this
8:36:18element so we can learn more about it
8:36:22we'll type text and Save
8:36:26so like the paragraph element the div
8:36:29element is a block element that means it
8:36:32will take up an entire line by itself
8:36:35and that's why it appears below the text
8:36:38box and the button now one difference
8:36:41between a div and a paragraph is that a
8:36:44paragraph adds extra space above and
8:36:47below the paragraph while a div does not
8:36:50add any extra space above or below so it
8:36:54doesn't have any default
8:36:57styling all right so now that we learned
8:37:00the div let's put this HTML code inside
8:37:04this div first we need to get this
8:37:07element into our JavaScript and to do
8:37:11that we'll add a class to this element
8:37:14class equals
8:37:18js- too Das
8:37:22list and then down here let's scroll
8:37:25down and we'll put this div element
8:37:28inside our JavaScript we can do that
8:37:31using document do query
8:37:37selector brackets and a string and we'll
8:37:40type a DOT to select a class and we'll
8:37:44select the class
8:37:47js-
8:37:49too-
8:37:51list so this will get this div element
8:37:54and put it in inside our
8:37:56JavaScript and then every HTML element
8:37:59has a property called dot inner Capital
8:38:05HTML which controls the HTML inside this
8:38:09element and now to put the to-do list
8:38:12HTML into this div element we're going
8:38:15to make the inner
8:38:17HTML equal to the
8:38:21to-do list HTML
8:38:25and now let's save this
8:38:28file and also save the HTML
8:38:32file so this code will take the HTML
8:38:36that we created using the loop and put
8:38:39it into the div element and that's how
8:38:42we make them show up on the page so now
8:38:45let's try adding another to-do we'll
8:38:48type watch YouTube and click
8:38:53add and unfortunately
8:38:56this new Todo doesn't show up on the
8:38:59page and that's because when we click
8:39:01add it will run this add Todo function
8:39:05and update the list but we didn't
8:39:08actually update the HTML on the
8:39:11page so to update the HTML we need to
8:39:15run all this code again every time we
8:39:18add a too so let's create a function for
8:39:22this code so we can reuse it so at the
8:39:25top we'll create a
8:39:30function and let's name this
8:39:33render
8:39:34to-do list brackets and curly
8:39:39brackets so the word render means to
8:39:43display something on the page so we'll
8:39:46put all of this code into this function
8:39:49so we can delete this curly bracket and
8:39:53then at the end we'll type a closed
8:39:56curly bracket and let's reformat this
8:39:59code by selecting these lines and then
8:40:02press tab to add an
8:40:05indent so now let's use this function at
8:40:09the start we'll display this to-do list
8:40:12on the page so we'll call this function
8:40:15by typing render
8:40:19to-do list and
8:40:22brackets and then let's scroll down
8:40:26every time we add a to-do to the list
8:40:29we're also going to display the list
8:40:31again so at the bottom
8:40:34render to do list and brackets again so
8:40:41if we
8:40:42save at the start it will display the
8:40:44list on the page and then if we add it
8:40:48to the list like watch YouTube and click
8:40:53add it will add it to the list and also
8:40:57display it on the page so that's how we
8:41:00create the second version of the to-do
8:41:02list
8:41:03project by the way if we scroll up to
8:41:06the render Todo list function this
8:41:09technique is called generating the
8:41:12HTML instead of writing all the HTML by
8:41:16hand up here we looped through an array
8:41:19and we generated the HTML using
8:41:22JavaScript
8:41:25so when creating websites with
8:41:26JavaScript we usually follow a
8:41:29three-step process first we save the
8:41:33data in this case we saved our data as
8:41:36an
8:41:37array next we use the data to generate
8:41:41the HTML which we did here and finally
8:41:45we make the website interactive which
8:41:48we'll do later in this
8:41:50lesson this is the main idea of
8:41:53JavaScript and we follow follow this
8:41:55overall process when creating
8:41:58websites the rock paper scissors project
8:42:00from the previous lessons was a bit
8:42:03different because all the HTML we needed
8:42:06was already there we just had to modify
8:42:08it with
8:42:10JavaScript so this process we're using
8:42:12for the to-do list is one step above
8:42:15what we did for rock paper scissors we
8:42:18need to generate some
8:42:20HTML and this is a standard process for
8:42:23creating websites we're going to use
8:42:25this process for the to-do list and
8:42:28later the Amazon Project as well as
8:42:30websites that you build Beyond this
8:42:35course let's take a break before
8:42:37continuing with the rest of this lesson
8:42:40here are some exercises that will help
8:42:42you practice what we learned so far
8:43:07now let's create the final version of
8:43:09the to-do list we'll go back to
8:43:12superimple
8:43:14dodev and then here we'll scroll down
8:43:18and we'll create this final version so
8:43:21in this version we can type a too like
8:43:24make
8:43:26dinner and we can also add a due
8:43:29date and when we click add each to-do
8:43:33will now have a name and a due date and
8:43:37they will also have a delete button that
8:43:39we can click to remove it from the list
8:43:43so let's build this out one feature at a
8:43:46time we'll start by creating this delete
8:43:49button we'll go into our code and
8:43:52remember we're generating the HTML
8:43:55for the to-do list so for each value in
8:43:58the array we create a paragraph element
8:44:02so to add a delete button we just have
8:44:05to add a delete button inside here so
8:44:09inside the paragraph we'll create a less
8:44:12than button greater than and then less
8:44:16than SLB button greater than and then
8:44:20inside this button we'll put the text
8:44:24delete
8:44:26let's
8:44:27save and in the console you'll see that
8:44:30the HTML we generated now has a delete
8:44:33button inside the paragraph and that's
8:44:36what shows up on the
8:44:38page next we're going to reformat this
8:44:41HTML to make it a little easier to read
8:44:44so we'll create some new lines here and
8:44:47at the
8:44:48end and let's put the content of the
8:44:51paragraph on its own line like this
8:44:55and also put the delete button on its
8:44:57own line so remember that template
8:45:00strings have a feature called multi-line
8:45:02strings so this is perfect for writing
8:45:05HTML
8:45:08code the last step in the process is to
8:45:11make the website
8:45:12interactive so next let's make our
8:45:15delete button do something when we click
8:45:17it to do that we use the onclick
8:45:20attribute as usual so inside this button
8:45:25we're going to add an
8:45:28onclick attribute equals double quotes
8:45:33and then inside these double quotes we
8:45:35can run some JavaScript when we click
8:45:37this button so this works the exact same
8:45:41way as what we've been doing so far in
8:45:44this course the only difference now is
8:45:47that here we're generating this HTML
8:45:50using
8:45:51JavaScript okay so when we click one of
8:45:54these delete buttons we want to remove
8:45:56this to-do from the list earlier in this
8:46:00lesson we learned how to remove a value
8:46:02from an array using a method called
8:46:06splice so inside this onclick attribute
8:46:09we're going to type the to-do list dot
8:46:15splice and
8:46:18brackets so splice takes two numbers the
8:46:22first number is the index that we want
8:46:24to remove
8:46:25so if we click this delete button how do
8:46:28we know which index to
8:46:30remove well if we look at our Loop up
8:46:33here we already have the index it's this
8:46:36variable I so we're going to insert I
8:46:40into this string and we can do that by
8:46:43typing dollar curly brackets and
8:46:47I now splice also takes another number
8:46:51so we'll type comma and the second
8:46:54number is how many values we want to
8:46:56remove so here we just want to remove
8:47:00one value at this
8:47:02index and finally because we updated the
8:47:05to-do list we need to display the list
8:47:08again on the page to display the list we
8:47:12can use this function render to do list
8:47:15so down here we're going to type render
8:47:20Todo list and brackets
8:47:25now if we
8:47:27save you can see that in the generated
8:47:30HTML when we click the first delete
8:47:33button it will remove the value at
8:47:36index0 which is the first value if we
8:47:40click the second button it will remove
8:47:43the value at index one which is the
8:47:45second value so we're basically
8:47:48generating all this HTML using a loop so
8:47:52now if we click this delete button
8:47:55it will remove it from the list and then
8:47:57display the updated list on the page so
8:48:01that's how we create the delete
8:48:03button next let's go back to superimple
8:48:07dodev and we're going to create the due
8:48:10date
8:48:10feature so first let's create this date
8:48:14selector in our
8:48:16HTML we'll go to our HTML file and then
8:48:20under the text box we're going to add
8:48:23another input element
8:48:25so less than input greater than and to
8:48:30make it a date selector input elements
8:48:33have an attribute called
8:48:35type so this attribute determines what
8:48:38kind of input it is if the type is text
8:48:42which is the default value it's going to
8:48:44be a
8:48:46textbox now if we change the type to
8:48:50date and
8:48:52save it's going to create a date
8:48:57selector now let's go back into our
8:48:59JavaScript code and first we're going to
8:49:02scroll up and remember that right now
8:49:05our to-do list is just an array of
8:49:08strings but this time each to-do is also
8:49:11going to have a due date so how do we
8:49:14group the name and the due date together
8:49:17we can do that using an object so here
8:49:21instead of just a string we're going to
8:49:24create an an object and we'll give it a
8:49:27name property which is make dinner and
8:49:31we'll give it a due date property and
8:49:35we'll make the due date a
8:49:38string so you can type whatever date you
8:49:40have on the page for me it's 20
8:49:4722-12
8:49:49d22 and I'll end this object with a
8:49:52curly bracket and I'll turn this to do
8:49:55into an object as well so open curly
8:49:58bracket
8:50:02name and do
8:50:06date
8:50:072022
8:50:09D12
8:50:11d22 and closed curly
8:50:14bracket now that each to-do is an object
8:50:17we need to update the rest of our code
8:50:20let's scroll down and we'll start with
8:50:23the render function
8:50:25so here inside the loop each to-do is no
8:50:28longer just a string it's an object so
8:50:32let's change this variable name to to-do
8:50:36object to make it more clear and now we
8:50:39need to get the name and due date out of
8:50:43this object so we'll type const name
8:50:48equals to do object. name and const do
8:50:56date equals to do
8:51:00object. do
8:51:03date and now instead of inserting to-do
8:51:06which no longer exists we're going to
8:51:08insert the
8:51:10name and we're also going to insert the
8:51:14DU
8:51:16date if we
8:51:18save now each to-do will also display a
8:51:22due
8:51:23date before before we continue we're
8:51:25going to review a shortcut we can use
8:51:27with objects called
8:51:30destructuring so here you'll notice the
8:51:32variable name is the same as the
8:51:34property name we actually have a
8:51:36shortcut for this using
8:51:40const curly brackets
8:51:43name equals Todo
8:51:47object so this is called destructuring
8:51:51this takes the name property out of the
8:51:53object and and puts it in a variable
8:51:56also called name and this is a shortcut
8:51:59for this line up here so we can comment
8:52:02out this line we can also use multiple
8:52:05properties in this shortcut to also take
8:52:08the due date out of the object we can
8:52:11just add a comma and do
8:52:15date so this will do the same thing as
8:52:18this line of code and we can comment
8:52:21this
8:52:22out if we save
8:52:25everything still
8:52:26works next let's scroll down and we're
8:52:30going to update our add Todo function so
8:52:34this time when we click the add button
8:52:36we're going to get the name and the due
8:52:39date and put it into our list so let's
8:52:42get the due date out of this date
8:52:44selector first we can do that using the
8:52:47Dom like we did here so let's add a
8:52:51class attribute so we can get it using
8:52:54queries selector
8:52:56js- do
8:52:59dd-
8:53:01input and then down here let's create a
8:53:05variable
8:53:06const date input element and make it
8:53:12equal to
8:53:15document. query
8:53:18selector and a string Dot and then the
8:53:22class we want to select which which is
8:53:24this class
8:53:26js-
8:53:28do-
8:53:30date-
8:53:33input so this will get the date selector
8:53:35element and put it into our
8:53:38JavaScript and now below this let's get
8:53:41the due date out of the
8:53:43element we can do that using the value
8:53:46property again so let's create a
8:53:49variable first const do date and we'll
8:53:54make it equal to the date input
8:54:00element.
8:54:02value so this will get the date that we
8:54:04selected and save it in this
8:54:08variable and now when we add a to-do to
8:54:11our list instead of just a name we're
8:54:14going to add an object so open curly
8:54:17bracket We'll add a name property and
8:54:21the value will be the name variable up
8:54:23here so name and then comma and a doe
8:54:29date
8:54:30property and the value will be this due
8:54:33date variable up here so due date and
8:54:38then a closed curly
8:54:40bracket and remember that objects also
8:54:43have a shortcut for this if the property
8:54:47and the variable name are the same we
8:54:49can just type it out once like
8:54:52this this will do the same thing as this
8:54:55line above same thing with the second
8:54:58line if the property and the variable
8:55:00name are the same we can just type a
8:55:03comma and type it out
8:55:07once this is called the shorthand
8:55:10property syntax so these two lines do
8:55:13the same thing as these lines above so
8:55:16we can comment this out using double
8:55:18slash and double
8:55:21slash so that's all the code that we
8:55:23needed to update now let's save our
8:55:26Javascript
8:55:28file and we'll also save our HTML
8:55:32file and let's go to our project We'll
8:55:35add a new to-do like watch
8:55:40YouTube and select a
8:55:43date and click
8:55:46add and scroll down you can see that it
8:55:49added our new to-do with a name due date
8:55:53and a delete button
8:55:55if we click this delete button it will
8:55:58remove that to-do if we click this one
8:56:01it will also remove the correct
8:56:04to-do and that's actually all the
8:56:06functionality that we need for this
8:56:08project so let's go into our code and
8:56:11we're going to clean up by removing the
8:56:14console.log
8:56:15here and the console.log up
8:56:21here and Save
8:56:24finally let's add CSS to our project to
8:56:28make it look like the final design we'll
8:56:31go into our code editor and scroll to
8:56:34the top and instead of writing all the
8:56:37CSS in here let's put the CSS in a
8:56:41separate file just like our JavaScript
8:56:44so we'll click here to show our
8:56:47files and then find the Styles folder
8:56:51and we'll click the Styles folder and
8:56:53click this icon to create a new file
8:56:57inside and we'll name this file
8:57:0111-
8:57:02[Music]
8:57:04to-do-list
8:57:06docss and press
8:57:09enter and for the video I'm going to
8:57:12take this CSS file and put it at the
8:57:15bottom of my code editor so I can see
8:57:17these files side by side and now I'll
8:57:21click here to close
8:57:22it and will load this CSS into our
8:57:27HTML to do that we can use a link
8:57:30element so inside the head section let's
8:57:34type less than link greater than and
8:57:39we're going to give it two attributes
8:57:42Rel equals style
8:57:46sheet and
8:57:49hre equals the file that we want to load
8:57:53so we created this this in the Styles
8:57:55folder so we'll type Styles and then a
8:57:59slash to go into the folder and we load
8:58:02this file
8:58:0411-
8:58:06too- list.
8:58:10CSS and
8:58:13save now let's style our project one by
8:58:16one until it matches the final design
8:58:19we'll start with the text on the page
8:58:22we're going to change the font so in
8:58:24here let's type
8:58:27body curly brackets and then we'll
8:58:30change the font Das family colon Arial
8:58:37and
8:58:38save so that looks pretty good now let's
8:58:41work on styling the to-do list first
8:58:45let's add some more to-dos to the list
8:58:47so we'll type
8:58:50watch
8:58:51YouTube and then we'll select a date
8:58:55and click
8:58:56add and we're going to learn how to
8:58:58style our list to look like this so
8:59:01notice that this list creates a sort of
8:59:05grid we're going to create this grid
8:59:07using a feature called CSS grid so let's
8:59:12go into our HTML
8:59:15first we're going to add a class to this
8:59:18div element so we can style
8:59:20it to-do Das grid R and let's
8:59:26save and inside our CSS we're going to
8:59:30style this class using dot Todo Das grid
8:59:36and curly
8:59:38brackets and to turn this into a grid
8:59:41we're going to use the property
8:59:44display and
8:59:47grid and we're going to add another
8:59:49property called grid Das template Dash
8:59:56columns so this basically sets how many
8:59:59columns are in our grid the number of
9:00:02values that we give it is the number of
9:00:05columns for example if we give it 200
9:00:10pixels 150 pixels and 100
9:00:15pixels this will create three columns in
9:00:19the grid the First Column will be 200
9:00:22pixels the second Colum column will be
9:00:24150 pixels and the third column will be
9:00:28100
9:00:29pixels and now each element inside this
9:00:32div will go into the columns so the
9:00:36first element will go in the First
9:00:37Column second element will go in the
9:00:40second column and the third element will
9:00:42go in the third column if we have more
9:00:45than three elements it will wrap around
9:00:48and create a new
9:00:50row so let's
9:00:52save and and unfortunately that didn't
9:00:55quite work and that's because if we go
9:00:58back to our
9:01:00JavaScript remember that each to-do is
9:01:04one paragraph element so this entire
9:01:07to-do with the name due date and delete
9:01:10button will go inside the First Column
9:01:13and then the next entire to-do will go
9:01:16inside the second column but what we
9:01:19actually want is for the name to go in
9:01:21column 1 due date column 2
9:01:24and delete button column 3 to do this
9:01:28we're going to separate this element
9:01:30into three elements so that each element
9:01:32will go into each
9:01:35column so instead of one
9:01:38paragraph let's actually use a div
9:01:41element so less than div greater than
9:01:45and less than slash div greater than and
9:01:49in between we'll insert the name
9:01:56so the reason we use a div element is
9:01:58because div elements don't have any
9:02:01default styling so it's a little easier
9:02:03to style with
9:02:05CSS for the due date let's also create a
9:02:08div element so less than
9:02:12div and then at the end less than slash
9:02:16div greater than and finally for the
9:02:20delete button we already have an element
9:02:23so so let's just reformat these lines
9:02:26we'll select these lines and then press
9:02:29shift tab to remove the
9:02:32indent let's remove the extra line and
9:02:35we basically separated each to-do into
9:02:38three
9:02:39elements if we
9:02:41save now the grid is working because
9:02:44this element goes into the First Column
9:02:48this element goes into the second column
9:02:50and the button goes into the third
9:02:52column
9:02:54and that's how we lay out these elements
9:02:57in a grid like the final design next
9:03:01let's also lay out the inputs and the
9:03:03add button in a grid we'll go to our
9:03:08HTML and let's put these three elements
9:03:10in a div so we can use grid so we'll
9:03:14create a less than div greater
9:03:18than and then
9:03:20inside let's remove this and we'll add
9:03:24it at the end less than SL div and let's
9:03:29reformat these lines by selecting them
9:03:33and then press tab to add an
9:03:36indent and now let's make this div a
9:03:39grid as well let's go back to our CSS
9:03:43and we'll add a class to this div class
9:03:48equals let's call it to-do Das input d
9:03:55dgrid and instead of writing all this
9:03:57CSS again we can use a feature of CSS so
9:04:02here we're going to type a comma and
9:04:06enter so when we type a comma we can
9:04:09style multiple classes at the same time
9:04:12so we're also going to style dot
9:04:17too- input Das grid if we save the CSS
9:04:23file
9:04:24and let's also save the HTML
9:04:27file now the input and the add button
9:04:30are also laid out in the same
9:04:33grid next let's adjust the spacing
9:04:37inside our grid so grid has some
9:04:39properties for this we'll go to our CSS
9:04:43press enter and we'll use the property
9:04:47column Das Gap so this sets the spacing
9:04:52between the Columns of the grid so let's
9:04:56make this colon 10 pixels and
9:05:01save so now it will add 10 pixels
9:05:04between each column let's add some
9:05:06spacing between the rows as well and
9:05:09grid has another property for this row
9:05:13Das Gap colon 10 pixels and
9:05:19save so that will add 10 pixels of space
9:05:23between the rows now notice it didn't
9:05:25add space between these two rows and
9:05:28that's because these two are separate
9:05:30grids this is the to-do list and this is
9:05:34the to-do input
9:05:36grid so to add space between them we
9:05:39just going to use
9:05:41margin at the bottom we'll style dot
9:05:46too- input Das
9:05:50grid and we'll just add some margin
9:05:53under this grid so margin Das bottom
9:05:59colon 10 pixels and
9:06:03save all right now let's move on to
9:06:06styling the inputs and the buttons we'll
9:06:09start with the inputs first let's add a
9:06:13class so we can style them here let's
9:06:16add a class name Das
9:06:21input and down here let's let's also add
9:06:24another class
9:06:26do- dat Das
9:06:30input let's
9:06:32save and now inside our CSS we'll style
9:06:36both of these
9:06:38inputs so we'll style do
9:06:41name- input curly brackets and first
9:06:46let's make the text bigger like the
9:06:48final design we'll set the font Das size
9:06:54colon 15 pixels and save okay so that
9:06:59looks pretty good now let's add spacing
9:07:02on the inside of this input so we'll add
9:07:07padding six pixels and
9:07:11save and that looks pretty good let's
9:07:14move on to the due date input so we
9:07:17actually want the same Styles as the
9:07:19name input so again we can use that
9:07:22feature of CSS we'll type a comma and
9:07:27then dot
9:07:29do-
9:07:31date- input so now these Styles will be
9:07:35applied to this class and to this class
9:07:39let's
9:07:41save and that looks pretty good to me
9:07:44let's move on and style the
9:07:47buttons we'll go into our HTML and find
9:07:51the add button let's add a class so we
9:07:54can style
9:07:55it and we'll use add-
9:08:00too- button let's
9:08:03save and then inside our CSS we'll style
9:08:07that class using dot add-
9:08:12too- button curly
9:08:16brackets and let's start with the
9:08:18background color we'll set the
9:08:21background-color
9:08:24colon
9:08:25green and
9:08:28save now let's do the text
9:08:31color color colon
9:08:35white and
9:08:37save now let's remove the border around
9:08:40our button using border colon
9:08:46none
9:08:47save and let's make the text a little
9:08:50bigger so we'll do font
9:08:54D size colon 15
9:08:58pixels and
9:09:01save and the last thing we'll add is
9:09:03when we put our Mouse over the button it
9:09:06turns into this pointer icon we can do
9:09:09that using
9:09:11cursor colon
9:09:15pointer and
9:09:18save next let's style the delete buttons
9:09:22so these delete buttons are created in
9:09:24our JavaScript we'll go into our
9:09:27JavaScript
9:09:28file and then here let's add a class to
9:09:32each of the delete buttons so we can
9:09:34style them so we'll add class equals
9:09:39double quotes and then delete Das
9:09:44too-
9:09:46button let's
9:09:48save and then inside our
9:09:51CSS at the bottom we style dot delete
9:09:57Das too Das button curly
9:10:02brackets and let's start with the
9:10:04background color so we'll set background
9:10:08Das color colon and for this design I
9:10:13use the color dark
9:10:16red and
9:10:18save so that will style our delete
9:10:21buttons now let's change change the text
9:10:24color to white so we'll use color colon
9:10:29white and
9:10:31save now let's remove the Border using
9:10:36border colon
9:10:39none
9:10:41save and let's also make the text bigger
9:10:45using font Das size colon 15
9:10:51pixels save
9:10:53let's add this pointer icon using cursor
9:10:58colon
9:11:00pointer save and let's add some padding
9:11:04at the top and bottom of the button so
9:11:08we'll add
9:11:11padding-top colon 10 pixels and padding
9:11:17Dash bottom colon 10 pixels and Save
9:11:25so that's all the Styles we need for the
9:11:27delete button and we can also close the
9:11:29console to see the entire list however
9:11:33now we have another problem which is
9:11:36this text and this button are not
9:11:38vertically aligned in the center to
9:11:41vertically align in the center we're
9:11:44going to go back to the grid Styles so
9:11:47we'll scroll
9:11:48up to the to-do
9:11:51grid and CSS grid has another property
9:11:54for vertical alignment and that is align
9:11:59Das items Colon
9:12:03Center to vertically align in the center
9:12:08if we
9:12:09save now the text is aligned with the
9:12:12button but now we have a new problem our
9:12:15add button is no longer stretching to be
9:12:18the same as the inputs so by default
9:12:22align items is
9:12:24stretch that's why this button stretches
9:12:27to match the inputs and now that we
9:12:29changed it to align center it's no
9:12:32longer going to stretch so to solve this
9:12:35problem we just have to make this grid
9:12:39stretch so down here in the to-do input
9:12:43grid Styles we'll change align Das items
9:12:49back to
9:12:51stretch and Save
9:12:53save and that will cause this Grid at
9:12:56the top to stretch vertically again and
9:13:00that's it that's all the styling that we
9:13:02need and now we finished this to-do list
9:13:06project in the rest of this lesson we're
9:13:08going to learn more details about arrays
9:13:11and
9:13:11Loops so I'm going to put this back in
9:13:15the same
9:13:16window and I'll rearrange this
9:13:19window and now let's go back to 11
9:13:22arrays and loops.
9:13:24HTML and we'll open the tab for that
9:13:28file and we can also close these other
9:13:31files for
9:13:33now and first let's comment out the
9:13:36previous code
9:13:39using
9:13:41slashstar and at the bottom star
9:13:45slash and we'll scroll down and
9:13:50save the first detail we're going to
9:13:52learn is that that arrays are references
9:13:55so in the object lesson we learned that
9:13:58objects are references arrays work the
9:14:01same way so for example if we create an
9:14:05array
9:14:07const array 1 equals the array 1 2
9:14:153 this variable doesn't actually contain
9:14:18the values 1 2 3 this array is saved
9:14:23somewhere in the computer's memory and
9:14:25this variable only contains a reference
9:14:28that points to where this array is in
9:14:31memory and that means if we create a
9:14:34copy of this variable
9:14:37const array 2 equals array
9:14:431 array 2 doesn't contain a copy of the
9:14:47values it actually just contains a copy
9:14:50of the reference so now both of these
9:14:53variables are pointing to the same array
9:14:57so if we did array
9:15:002. push
9:15:03for and then we
9:15:08console.log array 1 and we
9:15:15console.log array
9:15:17two and
9:15:20save it will show us that even though we
9:15:23added four to array two array 1 and two
9:15:27were both modified and that's because
9:15:31arrays are references so both of these
9:15:34point to the same array in memory to
9:15:37avoid this Behavior we can create a copy
9:15:40of the values in the array using a
9:15:43method called slice so here if we did
9:15:48array
9:15:491. slice instead
9:15:53this will make a copy of the values in
9:15:56Array one and now these two variables
9:15:59point to two different arrays if we
9:16:04save now you'll see that this line only
9:16:07affected array
9:16:09two the second detail we're going to
9:16:11learn is a shortcut called
9:16:14destructuring so at the bottom here
9:16:17let's create a new array
9:16:20const array 3 3 equals the array 1 2
9:16:293 and let's say we want to get the first
9:16:32value and the second value out of this
9:16:35array one way to do this is to use the
9:16:38index like this another way is to use a
9:16:42shortcut called
9:16:44destructuring so here we're going to
9:16:47replace this with square brackets and
9:16:51now we can type some variable name
9:16:53if we type first value it will take the
9:16:58first value and save it in a variable
9:17:01called first value if we type comma and
9:17:05second value it will take the second
9:17:09value and save it in this variable so
9:17:13this is an easier way to get values out
9:17:16of an array and save them inside a
9:17:20variable next we're going to learn more
9:17:22details about loops so Loops have two
9:17:26features called break and continue break
9:17:30lets us exit a loop early for example
9:17:35let's create some new lines and let's
9:17:37create a loop that counts from 1 to 10
9:17:41so as usual we can use a four
9:17:45Loop let I =
9:17:481 I less than or equal to 10
9:17:53and I
9:17:56++ and we'll
9:17:59console. log I and
9:18:04save so this will count from 1 to
9:18:0810 so now let's say that when I is 8 we
9:18:12want to stop this Loop early so first
9:18:16let's check if I is equal to 8
9:18:24if it is equal to 8 we're going to stop
9:18:27this Loop by typing break and
9:18:31semicolon if we
9:18:33save once this reaches eight break will
9:18:37cause this Loop to stop and now it only
9:18:40counts up to eight so that's the break
9:18:44feature of a loop it lets us stop a loop
9:18:47early the next feature is called
9:18:50continue continue lets us skip one
9:18:53iteration of the loop or one run of the
9:18:56loop for example let's say we want to
9:18:59skip the number three so at the top we
9:19:03can check if I is equal to
9:19:10three and if it is we can use the code
9:19:15continue this will skip the rest of this
9:19:18code and go back up to the top of the
9:19:21loop and do i = 4 if we
9:19:26save this will skip three in the loop so
9:19:31continue let us Skip One iteration of
9:19:34the loop so now let's say that we want
9:19:36to skip a number if it's divisible by
9:19:39three divisible by three means the
9:19:42number can be divided evenly into three
9:19:45for example 3 and six are both divisible
9:19:49by three but s is not divisible by three
9:19:54because there's one remaining this is
9:19:57called the remainder and we can
9:19:59calculate the remainder using the
9:20:01remainder operator which looks like this
9:20:05so to check if a number is divisible by
9:20:07three we can check if the remainder is
9:20:11zero so here we're going to replace this
9:20:15with I remainder 3 and we'll check if
9:20:19the remainder is equal to to Z if we
9:20:25save this will skip three and six
9:20:29because they're both divisible by
9:20:32three next let's use continue in a while
9:20:36loop so at the end here we'll create
9:20:39some new lines and let's say we want to
9:20:42count from 1 to 10 using a while loop so
9:20:46we'll create a loop variable let I equal
9:20:511 and we'll create a while
9:20:55loop I less than or equal to 10 curly
9:21:01brackets and the increment step
9:21:05i++ and inside the loop we just
9:21:10console. log I and
9:21:15save so this will count from 1 to 10
9:21:18again and let's say we want to not count
9:21:22numbers that are divisible by three so 3
9:21:256 and 9 so at the top here we can check
9:21:32if I remainder 3 is equal to zero and
9:21:39curly brackets and we might just try to
9:21:42do
9:21:43continue however in a while loop
9:21:46continue will actually skip the
9:21:49increment step and this will cause an
9:21:51infinite Loop Loop so when using
9:21:54continue in a while loop we have to do
9:21:57this increment step manually so before
9:22:00continue we have to do I
9:22:04++ to avoid an infinite Loop if we
9:22:09save it will skip the numbers that are
9:22:12divisible by three which is 3 6 and 9 so
9:22:18remember in a while loop if we use
9:22:20continue always do the increment step
9:22:23manually in a for Loop however the
9:22:26increment step is done automatically
9:22:29after every
9:22:31iteration all right the last detail
9:22:33we're going to learn is how to use loops
9:22:36with functions so let's say we have an
9:22:39array of numbers and we want to create a
9:22:42copy of this array where each number is
9:22:45doubled so we already have the code for
9:22:48this we can scroll up and the code for
9:22:51this is here
9:22:53so let's actually make a copy of this
9:22:55code from before we'll
9:22:58rightclick
9:23:00copy and scroll down
9:23:03here and at the
9:23:06bottom right click and
9:23:10paste at the top let's create an array
9:23:14called
9:23:15nums so const nums equals array and one
9:23:231 and
9:23:25three if we
9:23:27save this will create an array where
9:23:30each number is
9:23:32doubled now what if we wanted to use
9:23:35this loop on a different array other
9:23:38than one one and three we can do that
9:23:41using a function so let's create a
9:23:44function around this Loop we'll create
9:23:49function let's name it dou full
9:23:54array brackets and curly bracket we'll
9:23:58remove the closed curly bracket and at
9:24:01the bottom We'll add it back and we'll
9:24:05select these
9:24:06lines and press
9:24:08tab so now instead of doing this loop on
9:24:12the same array every time we can turn
9:24:15this into a parameter so at the top here
9:24:20we'll create a parameter called
9:24:23nums and we're going to delete this
9:24:26line and we're going to Loop over this
9:24:29parameter instead so at the bottom we
9:24:34can call our function using double array
9:24:39and
9:24:40brackets and between the brackets we're
9:24:42going to save an array into nums so
9:24:47square bracket 1 1 and 3 if we
9:24:53save this will do the same thing as
9:24:56before but now because it's in a
9:24:59function we can use this loop with any
9:25:02array not just one one and three so at
9:25:06the end we can do double array
9:25:11brackets and an array 2 2 five this time
9:25:18and
9:25:19save and it will create an array where
9:25:22these numbers are doubled so using a
9:25:25function we can reuse this Loop for any
9:25:29value another feature of using a
9:25:32function with a loop is that we can
9:25:34break out of this Loop using a return
9:25:38instead so first let's actually use a
9:25:41return in this function instead of
9:25:44console.log we're going to
9:25:47return nums doubled
9:25:52and here we're going to console.log the
9:25:56result
9:26:01console.log and
9:26:08console.log and
9:26:11save so this does the same thing as
9:26:14before except we're returning the result
9:26:17and console. logging outside of the
9:26:20function now let's say that if we see
9:26:22the number zero we want to stop this
9:26:25Loop early to do that we can click here
9:26:29and check if num is equal to
9:26:35zero and if it is we can break out of
9:26:39this Loop now when we're inside a
9:26:42function we can also use a return
9:26:45statement to break out of this Loop so
9:26:48we can also do return nums
9:26:53doubled so a return statement will end
9:26:56this function immediately so this is
9:26:59another way of ending the
9:27:01loop so down here if we add the number
9:27:06zero and then five and
9:27:10save you'll notice that the loop stops
9:27:12when we see the number zero so return is
9:27:16another way of breaking out of a loop
9:27:19when it's inside a function and that's
9:27:22the end of this lesson in this lesson we
9:27:25learned about arrays which represent a
9:27:28list of values we learned about loops
9:27:31which let us run some code over and over
9:27:34just like a loop we learned a Technique
9:27:37we can use with loops called the
9:27:39accumulator pattern and we used it to
9:27:41create a to-do list project we learned
9:27:44that arrays are references and the
9:27:47destructuring shortcut and we learned
9:27:49more features of Loops like break
9:27:53continue and using Loops inside a
9:27:56function here are some exercises to help
9:27:59you practice arrays and loops
9:28:29in this lesson we're going to learn some
9:28:31Advanced features of functions and we're
9:28:34going to use them to improve our
9:28:36previous
9:28:37projects first let's create a new file
9:28:40for this lesson we'll go to our code
9:28:43editor and click here to show our files
9:28:47and click here to create a new file and
9:28:51we'll name this
9:28:5312- Advanced D
9:28:58functions.
9:28:59HTML and press
9:29:02enter now let's copy 11 arrays and Loops
9:29:06into this file so we'll click here
9:29:09control a or command a and then
9:29:14rightclick
9:29:16copy and in
9:29:18here right click and paste
9:29:24and we can close this for now and let's
9:29:27prepare this file for this lesson so
9:29:30we'll scroll
9:29:31up and change the title to
9:29:36Advanced
9:29:38functions and let's remove all the
9:29:41JavaScript code from
9:29:45before and now let's save and open this
9:29:49file in the browser by right click
9:29:52clicking open with live
9:29:55server and let's also open the console
9:29:58on this page so we'll
9:30:01rightclick
9:30:03inspect and open the
9:30:06console and now we can close the
9:30:08previous
9:30:10tabs as well as the previous
9:30:16files and now we're ready to begin so
9:30:19first we're going to review how to use
9:30:21fun
9:30:22functions inside the script element
9:30:25let's create a function using the word
9:30:29function will give it a name
9:30:32greeting brackets and curly brackets and
9:30:36inside the function we'll type the code
9:30:42console.log the string
9:30:45hello so this is a function and it lets
9:30:49us reuse code to run the code inside
9:30:52this function we can type the function
9:30:56name which is greeing and then
9:31:00brackets if we
9:31:03save this line of code we'll run the
9:31:06code inside the function and display
9:31:09hello this is known as calling the
9:31:12function or running the
9:31:15function so now that we understand
9:31:17functions we're going to learn an
9:31:19advanced feature of functions which is
9:31:22functions are values so we learned many
9:31:26types of values in this course like
9:31:29numbers strings and booleans and we can
9:31:32save a value in a variable for example
9:31:36let's create some new lines and we'll
9:31:39create a variable const num equal
9:31:452 so this will save the value two inside
9:31:49the variable num
9:31:52now functions are also values and this
9:31:55means just like a number we can save a
9:31:58function inside a variable so let's give
9:32:01it a try we'll create a new line and
9:32:05type
9:32:06const function one and we'll make this
9:32:11equal to a function this time so we'll
9:32:14just type
9:32:16function and a name
9:32:19greeting brackets and curly
9:32:22brackets and inside the function we'll
9:32:25type
9:32:27console. log the string hello
9:32:312 and we'll put a semicolon at the end
9:32:35since we're saving in a
9:32:37variable so this variable now contains a
9:32:40function we're using the exact same
9:32:43syntax as before except we're just
9:32:46taking this function and saving it in a
9:32:48variable because functions are values
9:32:52so now that this function is inside this
9:32:55variable let's actually console.log it
9:32:59so we
9:33:02console.log function one and
9:33:07save and this will show us that the
9:33:10variable function one actually contains
9:33:13this
9:33:14function now on a new line we can also
9:33:17do console.log
9:33:21and check the type of function one and
9:33:28save and it will tell us that the type
9:33:31of this variable is a function so as you
9:33:35can see a function is just another type
9:33:38of value and we can save it in a
9:33:42variable we can also run the function
9:33:44inside this
9:33:46variable by typing the variable name
9:33:49function 1 and because this contains a
9:33:53function we can actually just call it
9:33:56using
9:33:58brackets so this will run the code
9:34:01inside this function if we save it
9:34:05displays hello
9:34:07to now let's do some Cleanup in this
9:34:09code in JavaScript as long as there's a
9:34:13way to access a function this function
9:34:16name is not needed so here we can access
9:34:20this function using this variable so
9:34:23this function name is not needed and we
9:34:25can actually just delete it like this
9:34:29and now this is called an anonymous
9:34:32function which means a function without
9:34:34a
9:34:35name now an interesting thing to know is
9:34:38that the function syntax that we've been
9:34:40using this entire course up here is
9:34:43actually a shortcut for this code now
9:34:47even though this syntax uses VAR and we
9:34:50usually don't recommend VAR this syntax
9:34:53actually has a couple advantages number
9:34:55one it's easier to read and number two
9:34:59it gives us a feature called hoisting
9:35:02which means we can call this function
9:35:05greeting brackets before we create it in
9:35:08the code so using hoisting we don't have
9:35:11to worry about what order we write this
9:35:14code hoisting doesn't work when we
9:35:17create our function and save it in a
9:35:19variable like this so in JavaScript
9:35:23functions are values and just like any
9:35:26other value we can save it in a
9:35:29variable now let's think what else can
9:35:32we do with a value well we can save a
9:35:35value in an object for example let's
9:35:39scroll
9:35:40down and create some new lines and we'll
9:35:44create an object
9:35:47const object 1 equals curly
9:35:52brackets and inside this object we'll
9:35:55have a property num with the value
9:36:00two so this saves the number two inside
9:36:04this object now because functions are
9:36:07values we can also save a function
9:36:10inside this object so we'll type comma
9:36:14and then a property fun colon and we'll
9:36:18create a function this time function
9:36:21[Music]
9:36:23greeting brackets and curly brackets and
9:36:27inside we type
9:36:30console. log the string hello
9:36:363 so this saves a function inside this
9:36:40object under the property fun now to
9:36:44access this function we just use the dot
9:36:46notation as normal so object one dot
9:36:53fun and because this value is a function
9:36:57we can call it using
9:36:59brackets if we
9:37:02save this will run the code inside the
9:37:05function and display hello 3 so remember
9:37:10this is called a method when we have a
9:37:13function saved inside an
9:37:16object again as long as there's a way to
9:37:19access this function for example using
9:37:22object one. fun then we don't need this
9:37:25function name so we'll delete it and use
9:37:29an anonymous
9:37:31function now let's think what else can
9:37:34we do with a value we can pass a value
9:37:38into a function for example down here
9:37:43let's create a function
9:37:46function
9:37:47display brackets and curly brackets and
9:37:51we'll give this function a parameter so
9:37:54in here we'll create a parameter and
9:37:57name it
9:37:59param and inside the function we can use
9:38:02a parameter just like a variable so we
9:38:08console.log the
9:38:11param and then down here let's call this
9:38:14function using
9:38:17display brackets and two
9:38:21this will take the value two save it
9:38:24inside Pam and then we can use it just
9:38:27like a variable if we
9:38:30save this will display two in the
9:38:34console so this is known as passing a
9:38:38value into a function now because
9:38:42functions are values we can also pass a
9:38:45function into a function so let's give
9:38:49it a try down here
9:38:52we'll create a new function
9:38:55function run brackets and curly
9:38:59brackets and this function will also
9:39:02have a parameter let's call it
9:39:06param and down here we'll call this
9:39:10function run
9:39:13brackets and between the brackets we're
9:39:16going to give it a function this time so
9:39:18we'll type function
9:39:21brackets and curly brackets and inside
9:39:25the function we'll type
9:39:29console.log the string hello
9:39:344 so this will take this function and
9:39:37save it inside Pam and now up here we
9:39:42can use Pam just like a variable so we
9:39:46can type
9:39:47Pam and because Pam contains a function
9:39:52we can actually just call it using
9:39:55brackets if we
9:39:57save this code will run the function
9:40:01that we created down here and display
9:40:04hello 4 so this is called passing a
9:40:08function into another
9:40:11function the function that we're passing
9:40:13in is called a callback function or a
9:40:17callback so to summarize functions are
9:40:21values anything we can do with a value
9:40:24we can also do with a
9:40:26function now let's do some practical
9:40:29examples using functions as values we're
9:40:33going to learn a feature of JavaScript
9:40:35called set timeout set timeout allows us
9:40:39to run a function in the
9:40:41future first we'll comment out the
9:40:44previous code using
9:40:48slashstar and at the bottom
9:40:51star slash and let's create some new
9:40:55lines and we're going to type the code
9:40:58set capital T time
9:41:02out so set timeout is a built-in
9:41:05function so we can type brackets to call
9:41:10this function Now set timeout takes two
9:41:14parameters inside these brackets the
9:41:17first parameter is a function that we
9:41:19want to run in the future
9:41:22let's create a
9:41:24function brackets and curly brackets and
9:41:29inside this function let's type
9:41:33console.log the string time
9:41:38out so here we're using a function as a
9:41:42value and we're passing it into another
9:41:45function at the end we'll type a comma
9:41:49and we'll give set timeout a second
9:41:52parameter the second parameter is how
9:41:54long to wait before running this
9:41:57function so this is a number in
9:42:00milliseconds 1,000 milliseconds is equal
9:42:03to 1 second so if we type 3,000
9:42:08milliseconds this is equal to 3 seconds
9:42:12so set timeout will wait for 3 seconds
9:42:15and then call this function if we
9:42:19save after 3 seconds
9:42:21it's going to display timeout in the
9:42:24console so that's set timeout we give it
9:42:28a function and it will call this
9:42:30function after a certain amount of
9:42:32time so now we're going to learn an
9:42:35important concept called a synchronous
9:42:38code so after set timeout let's type
9:42:45console.log the string next
9:42:49line and Save
9:42:52so notice that it displays next line
9:42:54first and then after 3 seconds it
9:42:57displays timeout so what's happening
9:43:00here why are they reversed set timeout
9:43:04sets up a timer and after 3 seconds it
9:43:07will call this function however it
9:43:10doesn't actually wait for the 3 seconds
9:43:12to finish it just sets up the timer and
9:43:15immediately goes to the next line so
9:43:18that's why this line is displayed first
9:43:22so this is called asynchronous code
9:43:25asynchronous code means the computer
9:43:27won't wait for this line to finish
9:43:30before going on to the next line so for
9:43:33set timeout it'll just set up the timer
9:43:36and then immediately go to the next line
9:43:39synchronous code on the other hand means
9:43:42the computer will wait for one line to
9:43:43finish before going to the next line so
9:43:47all the code we've written in this
9:43:49course so far has been synchronous code
9:43:53in addition all the code inside this
9:43:56function is also synchronous code so if
9:43:59we added
9:44:02console.log the string time out
9:44:07to and
9:44:09save the code inside the function will
9:44:12still run line by line it will wait for
9:44:16each line to finish before going to the
9:44:18next line and after 3 seconds it will
9:44:21display timeout followed by timeout
9:44:242 so don't worry all the code that we
9:44:28normally write will be synchronous code
9:44:30it will run line by line as usual the
9:44:34only time that code becomes asynchronous
9:44:37is when we use certain features of
9:44:39JavaScript like set timeout so set
9:44:42timeout is the only part that is
9:44:45asynchronous now the advantage of set
9:44:48timeout being asynchronous is that it
9:44:50does doesn't block our code for 3
9:44:52seconds waiting for this timer to finish
9:44:55it just sets up the timer in the
9:44:57background and then goes to the next
9:44:59line of code so this allows our code to
9:45:02do other things while this timer is
9:45:04running in the background and this is
9:45:07similar to real life if you set up a
9:45:09timer on your alarm clock you're not
9:45:12going to stop and wait for the timer to
9:45:14finish you're going to go and do
9:45:16something else asynchronous code is the
9:45:19exact same concept
9:45:22next we're going to learn a similar
9:45:24function to set timeout called set
9:45:28interval so at the bottom let's type the
9:45:31code set capital I
9:45:36interval and set interval is another
9:45:39built-in function so we can call it
9:45:42using
9:45:43brackets and set interval takes these
9:45:46same two parameters as set timeout the
9:45:50first parameter is a function that we
9:45:52want to run in the future so let's type
9:45:56function brackets and curly brackets and
9:46:00inside we'll type
9:46:03console. log the string
9:46:09interval now let's add a comma and the
9:46:12second parameter is also a number in
9:46:15milliseconds so we'll type 3,000
9:46:18milliseconds or 3 seconds so set
9:46:21interval will run this function 3
9:46:24seconds in the future but this time it
9:46:27will keep running the function every 3
9:46:30seconds if we
9:46:32save in the console every 3 seconds it
9:46:36will run the function and display
9:46:39interval so set interval is also
9:46:42asynchronous below it if we type
9:46:48console.log the string next
9:46:51line
9:46:53two and
9:46:55save it will set up the interval and
9:46:58then immediately go to the next line and
9:47:01display next line two so that's set
9:47:04interval we give it a function and it
9:47:07will keep running this function after a
9:47:10certain period of time so now let's do a
9:47:13project using what we learned so far
9:47:16let's go to our browser and we'll create
9:47:19a new tab at the top
9:47:21top and here let's type
9:47:26superimple
9:47:28dodev slash projects slash Advanced Das
9:47:36functions and press
9:47:38enter so this is basically the rock
9:47:41paper scissors game that we created
9:47:43earlier except this time it has an extra
9:47:47button called autop playay if we click
9:47:50this Buton
9:47:51button every second the computer will
9:47:54play by
9:47:55itself so this feature will help us
9:47:58practice using set
9:47:59interval so first let's make a copy of
9:48:02the project files we'll go into our code
9:48:06editor and click this icon to show our
9:48:09files and let's make a copy of 10 rock
9:48:13paper scissors for this lesson so we'll
9:48:17rightclick copy
9:48:20and down here rightclick and
9:48:25paste and I'll stop this for now so here
9:48:29we're going to change the name by right
9:48:32clicking
9:48:34rename we'll remove copy at the end and
9:48:38at the beginning we'll change it to 12
9:48:42and press
9:48:43enter and let's also make a copy of the
9:48:47JavaScript and CSS files so we'll click
9:48:50this file and right click
9:48:54copy and then click the folder right
9:48:58click
9:48:59paste and we'll rename this file
9:49:03rightclick
9:49:05rename remove copy at the end and at the
9:49:09beginning change it to 12 and press
9:49:12enter and let's also make a copy of the
9:49:15CSS file select it rightclick copy
9:49:21click the folder right click and
9:49:26paste and right click
9:49:30rename remove copy and at the front
9:49:34change it to 12 and press
9:49:38enter now let's scroll down to 12 rock
9:49:42paper
9:49:44scissors and I'll close this for
9:49:47now and inside the head let's change
9:49:50this to load 12 rock paper scissors and
9:49:54we'll scroll to the
9:49:56bottom and here instead of the lesson 10
9:49:59file we'll load The Lesson 12 Javascript
9:50:03file let's save and we'll open this in
9:50:07the browser by
9:50:09right-clicking open with live
9:50:12server so now we're ready to begin let's
9:50:16go back to superimple
9:50:18dodev and the first thing thing we're
9:50:20going to create is this autoplay button
9:50:24so beside the reset score button which
9:50:26is here we're going to create a new
9:50:30button less than button greater than and
9:50:34inside we'll have the text auto
9:50:38play let's
9:50:40save and go back to our
9:50:43Tab and now we have this button so next
9:50:47let's style this button with CSS so
9:50:50we'll give it a
9:50:52class class equals
9:50:56auto-play Das
9:50:59button and
9:51:01save and now let's open the CSS
9:51:06file I'm going to take this file and
9:51:08then drag it to the bottom so I can see
9:51:11it side by side so I'll close this for
9:51:14now and rearrange this a little bit and
9:51:18then down here and we're going to style
9:51:21the autop playay button so let's just
9:51:23make the style the same as the reset
9:51:25score button so in the CSS we'll scroll
9:51:29down to the reset score button Styles so
9:51:33we'll add a comma at the end and type
9:51:37dot
9:51:40auto-play dasb button so now these
9:51:44Styles will apply to the class reset
9:51:46score button and the auto playay button
9:51:50if if we
9:51:51save now we styled our project so next
9:51:55let's make this button interactive so at
9:51:58the top here we'll add an onclick
9:52:03attribute and then in here we're going
9:52:06to run some JavaScript code let's
9:52:09actually create a function so we can
9:52:11separate the JavaScript into its own
9:52:13file so we'll run a function called auto
9:52:18play and
9:52:21brackets so now let's
9:52:23save and right now this function doesn't
9:52:26exist so we have to create this function
9:52:29in the Javascript file so for me the
9:52:32file is right here I'll select it and
9:52:35then drag it down here so I can see it
9:52:37side by side so let's scroll down and
9:52:41I'm going to create it just above the
9:52:43play game function so here we'll create
9:52:47some new lines and type function
9:52:51auto play brackets and curly
9:52:55brackets and now inside this function we
9:52:59want to play the game every second so we
9:53:02can use set interval to run some code
9:53:05every second so let's type set
9:53:10interval
9:53:12brackets and inside the brackets will
9:53:15give it a function that we want to run
9:53:18so brackets and curly
9:53:21brackets and then at the end let's type
9:53:24a comma and we'll give it
9:53:271,000 so this means it will run this
9:53:30function every 1,000 milliseconds or 1
9:53:34second and now inside this function
9:53:37we're going to automatically play the
9:53:39game and to play the game we can use
9:53:42this function right here play game so
9:53:46here we'll type play game
9:53:51brackets now we need to provide this
9:53:53function with a Player move and remember
9:53:57we have another function pick computer
9:53:59move which will give us a random move so
9:54:03above this line let's create a variable
9:54:08const
9:54:09Player move and we'll make it equal and
9:54:14we'll pick a random move using pick
9:54:18computer move
9:54:21and
9:54:22brackets and finally we'll take this
9:54:25move that we picked and pass it into
9:54:28this function so Player
9:54:32move so now when we click this button it
9:54:35should play the game every second let's
9:54:39save and click
9:54:43autoplay and it works the computer is
9:54:46playing against itself every second so
9:54:49now let's make this button button stop
9:54:51playing when we click it again so at the
9:54:54top let's create a variable to keep
9:54:57track of whether or not we're playing so
9:55:01we use let is auto playing and at the
9:55:07start we'll make it equal to
9:55:11false and
9:55:13save and now inside this function we'll
9:55:17check using an if statement brackets and
9:55:20curly
9:55:21brackets and inside this condition let's
9:55:24check if we're not playing so not is
9:55:30auto
9:55:33playing so if we're not playing then we
9:55:36want to start playing the game which is
9:55:38this code down here so let's select this
9:55:42code and then right click
9:55:45cut and in here right click and
9:55:51paste and also after we start playing
9:55:55the game we're going to change this
9:55:57variable to true so is auto playing and
9:56:03we'll make it equal to true because now
9:56:07we are autop playing so now let's add
9:56:10the else Branch to this
9:56:12statement else curly
9:56:16brackets so now we need to stop this
9:56:19interval so how do we do that the answer
9:56:23is that set interval actually returns a
9:56:26number and this number is like an ID we
9:56:29can use this ID to stop the interval so
9:56:33at the front let's create a variable to
9:56:37save this ID
9:56:39const
9:56:41interval ID and
9:56:45equals however there's another problem
9:56:48here every time we run the function
9:56:51we're going to get a different ID so in
9:56:54order to save the ID from last time we
9:56:57need to put this variable outside the
9:57:00function so let's select this and remove
9:57:03it for now and we'll scroll up and here
9:57:08we'll create the variable let
9:57:12interval ID and we'll leave it undefined
9:57:16to start and now down here we're going
9:57:19to save the return value into this
9:57:22variable by typing
9:57:25interval ID equals set
9:57:30interval and now at the bottom we're
9:57:33going to use the interval ID to stop the
9:57:36interval let's scroll down and to stop
9:57:40an interval we can use a function called
9:57:42clear interval so we'll type clear
9:57:47capital I interval
9:57:50and
9:57:52brackets and between the brackets we're
9:57:54going to give it an ID that we want to
9:57:57stop so we'll give it this interval
9:58:00ID
9:58:02interval
9:58:04ID and then at the bottom let's also
9:58:07change is autop playing to false because
9:58:11we just stopped it so is auto playing
9:58:17equals false
9:58:20and
9:58:21save so now if we try out this
9:58:25button it will start playing the game by
9:58:27itself every second and if we click the
9:58:30button again it will stop playing the
9:58:34game so that's how we stop an interval
9:58:37we need to save the ID and then call
9:58:40clear interval with this ID so now I'll
9:58:44clean up the code a little by removing
9:58:47this extra line and Save
9:58:50and now we're finished with this
9:58:53feature so next let's go back to our
9:58:57Advanced functions file so I'll click up
9:59:00here and then at the bottom I'll open 12
9:59:04Advanced
9:59:06functions and hide the files for now and
9:59:10we're going to learn some more features
9:59:12of functions as values so let's actually
9:59:16close the other files that we opened
9:59:20and first let's comment out the previous
9:59:23code with
9:59:25slashstar and at the bottom star
9:59:29slash let's scroll down and
9:59:33save and let's open the tab for this
9:59:37file so now we're going to learn another
9:59:40way to Loop through an array first let's
9:59:44create an array we'll type square
9:59:47brackets and inside the array we'll have
9:59:50the string make
9:59:54dinner and another string wash
10:00:00dishes and another
10:00:02string watch
10:00:06YouTube so in the previous lesson we
10:00:09learned how to Loop through an array
10:00:11using a for Loop or a while loop another
10:00:15way to Loop through an array is using a
10:00:18method of the array called four each so
10:00:22at the bottom let's type dot for capital
10:00:27E each and
10:00:31brackets so this is the four each method
10:00:34and it allows us to Loop through this
10:00:37array inside these brackets we're going
10:00:40to give for each a function so we'll
10:00:43type
10:00:45function brackets and curly brackets so
10:00:50again we're just passing a function into
10:00:53another
10:00:54function however this function will be a
10:00:57little different we're going to give it
10:00:59a parameter so up here let's create a
10:01:03parameter called
10:01:06value so what four each does is that it
10:01:09Loops through the array and for each of
10:01:12these values it will save the value in
10:01:15the parameter and run the function so
10:01:19let's
10:01:22console.log
10:01:24value and
10:01:27save so this will Loop through the array
10:01:30and display each value in the console so
10:01:34let's go through this step bystep so
10:01:37it'll take the first value save it in
10:01:40this parameter and run the function then
10:01:43it will take the second value save it in
10:01:45the parameter and run the function then
10:01:49it will take the Third value save it in
10:01:51the parameter and run the
10:01:54function so the for each method is
10:01:57actually the preferred way to Loop
10:01:59through an array because this is easier
10:02:02to read than a for Loop like this and
10:02:05for each also has another feature we can
10:02:09give this function a second parameter so
10:02:12we can type comma and the second
10:02:15parameter is the
10:02:17index or the position of the value in
10:02:20the array so for the first value index
10:02:23will be zero for the second value index
10:02:26will be one third value index will be
10:02:29two and so on so above this line let's
10:02:35also
10:02:38console.log the
10:02:40index and
10:02:42save and this will also display the
10:02:45index of each
10:02:47value all right now let's do a practical
10:02:50example using the for each method we're
10:02:54going to go back to the to-do list
10:02:56project that we created in the previous
10:02:58lesson so we'll click up here to show
10:03:01our
10:03:02files and let's scroll up and let's open
10:03:0611 too
10:03:09list.js so in this code we used a for
10:03:13Loop to display the to-do list on the
10:03:15page we're going to switch this to using
10:03:18a for each method instead said so first
10:03:21let's actually make a copy of the files
10:03:24for this project we'll click up
10:03:27here and let's click 11 to-do list and
10:03:32rightclick
10:03:34copy and let's click the script
10:03:37folder rightclick and
10:03:41paste and now we'll rename this by
10:03:45right-clicking
10:03:47rename remove copy from the end and
10:03:51change the beginning to 12 and press
10:03:56enter let's also make a copy of the CSS
10:03:59and HTML file for this project so we'll
10:04:02click the CSS file right click
10:04:07copy click the Styles folder right click
10:04:12and
10:04:13paste rightclick
10:04:17rename remove copy
10:04:20and at the front change it to 12 and
10:04:23press
10:04:25enter and finally we'll scroll down
10:04:28click 11 Todo list.
10:04:30HTML
10:04:32rightclick
10:04:34copy and then down here right click and
10:04:39paste right click
10:04:43rename remove copy at the end and at the
10:04:46beginning change it to 12 and and press
10:04:51enter now we can hide these
10:04:54files and we can close the lesson 11
10:04:57files and now here we're going to change
10:05:00the CSS file that we load to 12 to-do
10:05:04list and we'll scroll down and we'll
10:05:07also change the Javascript file that we
10:05:09load to 12 to-do list now let's
10:05:14save and we'll open this in the browser
10:05:17by right clicking
10:05:20open with live
10:05:22server okay now let's go back to the JS
10:05:26file so I'll take this file and drag it
10:05:29to the
10:05:30bottom and I'll rearrange the windows
10:05:33here we're going to scroll down and
10:05:36we'll change this for Loop to use a for
10:05:38each method so first let's type above
10:05:42this for Loop and we'll type the array
10:05:45that we want to Loop through which is
10:05:48Todo list and we'll type Dot and use the
10:05:53four each method and
10:05:57brackets inside the brackets we'll give
10:05:59it a function that we want to run for
10:06:02each to do so we'll type
10:06:05function brackets and curly
10:06:09brackets and this function can have two
10:06:12parameters the first parameter will
10:06:14contain each value in the array so we'll
10:06:18call it too
10:06:19[Music]
10:06:20object we'll type a comma and the second
10:06:24parameter contains each index in the
10:06:27array so we'll just call it
10:06:30index and now inside this Loop we
10:06:33basically want to do everything that we
10:06:35did here so let's just make a copy of
10:06:39this
10:06:40code right click
10:06:43copy and then up here inside for each
10:06:48right click and and
10:06:51paste so now if we scroll up we already
10:06:54have the to-do object up here so we
10:06:57don't need to get it from the array like
10:07:00before so we can remove this line and
10:07:04let's also remove these
10:07:08comments the other thing we have to
10:07:10change is that previously we were using
10:07:12I for the index but now the index is
10:07:16called index so we just change this to
10:07:19to
10:07:21index so that's how we use a for each
10:07:25method instead of a for Loop if we
10:07:28compare this code to the four Loop that
10:07:30we had before the for each method is
10:07:33easier to read so for the rest of this
10:07:36course we're going to prefer to use four
10:07:39each instead of a for Loop so we're
10:07:42going to remove this for
10:07:48Loop let's scroll back up and
10:07:52save and the project still works so
10:07:56that's a practical example of using the
10:07:58for each method now let's go back and
10:08:01learn some more details about for each
10:08:05we'll close the Javascript file for now
10:08:08and go back to Advanced functions. HTML
10:08:12and open the tab for this
10:08:15file so in the previous lesson we
10:08:18learned a feature of Loops called
10:08:21continue continue lets us skip to the
10:08:23next iteration or the next run of the
10:08:26loop for each methods don't have
10:08:29continue but we can do the same thing
10:08:31with a return statement so let's say in
10:08:35this Loop we don't like washing dishes
10:08:38if the value is wash dishes we're going
10:08:40to skip it and not display it in the
10:08:43console so above we'll create an if
10:08:47statement
10:08:50and then inside the condition we'll
10:08:52check if value is equal to the string
10:08:57wash
10:08:59dishes and then in the curly brackets if
10:09:02it is equal will return and
10:09:06semicolon so this return statement will
10:09:09end this function early and it will go
10:09:12on to the next function so it basically
10:09:15does the same thing as continue in a for
10:09:17Loop if we
10:09:20save you'll notice that it skipped wash
10:09:23dishes in the previous lesson we also
10:09:26learned a feature of Loops called break
10:09:29break lets us exit a loop early
10:09:32unfortunately there's not an easy way to
10:09:35break in a 4 each Loop so if we need to
10:09:38use break to exit this Loop early then
10:09:42it's better to use a regular for
10:09:46Loop let's take a break before
10:09:48continuing with the rest of this lesson
10:09:51here are some exercises that will help
10:09:53you practice what we learned so far
10:10:25so next we're going to move on and learn
10:10:28a shorter way to write functions called
10:10:31Arrow functions so let's go to the
10:10:34bottom of this code we'll create some
10:10:36new lines and let's create a variable
10:10:41const and we'll name the variable Arrow
10:10:46function and we'll make it equal to to
10:10:50brackets equal greater than or an arrow
10:10:55and then curly
10:10:57brackets inside the curly brackets we'll
10:10:59type some code
10:11:03console.log brackets and the string
10:11:07hello and we'll put a semicolon at the
10:11:11end so this is an arrow function it
10:11:14works the same way as a regular function
10:11:18for example we can call this Arrow
10:11:21function by typing the variable name
10:11:25Arrow
10:11:27function and
10:11:29brackets if we
10:11:31save this line of code will run the code
10:11:35inside this Arrow function and display
10:11:39hello so Arrow functions mostly work the
10:11:42same way as regular functions so to
10:11:45compare them let's actually type above
10:11:48this code we'll create some new lines
10:11:51and type
10:11:53const
10:11:54regular
10:11:56function equals the word
10:12:00function brackets and curly brackets
10:12:07console.log string
10:12:10hello so these two syntaxes do the same
10:12:14thing the difference is that instead of
10:12:17using the word function an arrow
10:12:19function just uses an
10:12:22arrow now parameters work the same way
10:12:25in an arrow function we just type the
10:12:27parameter between these round brackets
10:12:30so here let's type
10:12:33param and here as
10:12:37well if we want multiple parameters it
10:12:40also works the same way up here we can
10:12:43type comma param 2 and down here comma
10:12:49Pam 2 and finally return statements also
10:12:54work the same way so in this function we
10:12:58can return five and in the arrow
10:13:02function we can also return
10:13:06five so now let's learn some differences
10:13:09between these two Arrow functions have a
10:13:12few shortcuts that regular functions
10:13:14don't have for example at the bottom
10:13:19let's create an arrow function using
10:13:22const and we'll name it one
10:13:27perm and make it equal to an arrow
10:13:30function brackets arrow and curly
10:13:35brackets now in this Arrow function
10:13:37we're going to give it one parameter
10:13:41param and inside the function will
10:13:46console.log param plus
10:13:50one so when an arrow function only has
10:13:53one parameter these round brackets are
10:13:56optional so we can actually remove
10:14:00them if we do one param brackets 2 if we
10:14:08save it will display 2 + 1 which is
10:14:133 let's learn another shortcut we'll
10:14:16create some new lines and type const one
10:14:22line and make it equal to an arrow
10:14:25function brackets arrow and curly
10:14:30brackets and inside will return 2 +
10:14:373 so when an arrow function only has one
10:14:41line like this we can actually put it on
10:14:45the same line as the
10:14:47arrow and now that everything's on the
10:14:50same line the curly brackets are
10:14:53actually optional so we can remove them
10:14:56and we can also remove the return
10:15:01statement so this is a oneline arrow
10:15:04function if we just have an arrow it
10:15:06will automatically return the result on
10:15:09the right so at the bottom we can
10:15:14console. log and call the one line
10:15:19function with
10:15:21brackets if we
10:15:24save this function will return to plus
10:15:27three and it will display five in the
10:15:30console so that's Arrow functions it's a
10:15:33shorter way of writing a regular
10:15:35function and it has a few
10:15:38shortcuts for now let's get some
10:15:40practice using Arrow functions so let's
10:15:44scroll up in this code to the for each
10:15:47method so let's use an arrow function
10:15:51here instead we just have to remove the
10:15:54word
10:15:55function and after the round brackets
10:15:58add an arrow equals greater than if we
10:16:04save the loop still works so when we're
10:16:08passing a function into another function
10:16:11like for each it's recommended to use
10:16:14Arrow functions because it makes our
10:16:15code easier to read so now let's use use
10:16:19Arrow functions in some of our previous
10:16:21projects we'll start with the rock paper
10:16:24scissors game let's open our files by
10:16:27clicking
10:16:28here and we'll find the 12 rock paper
10:16:32scissors. JS
10:16:35file and then inside this file we're
10:16:38going to scroll down to the autoplay
10:16:41function so here we're passing a
10:16:45function into another function so it's
10:16:48recommended to use an arrow
10:16:50function let's remove the word
10:16:53function and add an arrow so now this
10:16:57code is a little easier to read now what
10:17:01about this function up here function
10:17:04autoplay should we also switch this to
10:17:07an arrow function so this situation is
10:17:10more personal preference so above this
10:17:13let's actually create an arrow function
10:17:15version of this const
10:17:19auto play equals brackets and arrow and
10:17:26curly
10:17:27brackets so even though we could create
10:17:30an arrow function version of this I
10:17:33actually prefer the regular function
10:17:36syntax here for two reasons number one I
10:17:39think this is easier to read than this
10:17:43and number two this function syntax
10:17:46enables hoisting which means we can call
10:17:49this function before we create it and we
10:17:52don't have to worry about which order we
10:17:54write the code so for these reasons I
10:17:57actually prefer this situation to use a
10:18:00regular function syntax and not an arrow
10:18:03function so we'll comment out the arrow
10:18:06function using double
10:18:08slash and double
10:18:11slash now let's
10:18:13save and let's open the tab for this
10:18:17project and we'll give give it a try so
10:18:20click
10:18:22autoplay and this still works after
10:18:24replacing with an arrow
10:18:27function next let's go to the to-do list
10:18:30project and switch to Arrow functions so
10:18:34we'll go to our code editor and find the
10:18:37to-do list project which is
10:18:42here and let's scroll
10:18:45down so inside render to-do list we're
10:18:48using four each and we're passing this
10:18:51function into another function so it's
10:18:54recommended to use an arrow function
10:18:56here so we'll remove the word
10:18:59function and after the brackets We'll
10:19:02add an
10:19:04arrow and again I'll leave this function
10:19:08syntax as a regular function because
10:19:10it's easier to read and enables hoisting
10:19:13so let's
10:19:15save and go back to our to-do list
10:19:19and everything still
10:19:21works next let's go back to 12 Advanced
10:19:26functions.
10:19:29HTML and we'll scroll to the
10:19:32bottom and we'll open the tab for this
10:19:36file and we'll review another place we
10:19:39could use Arrow functions which is
10:19:41inside an object so at the bottom here
10:19:45let's create a new object con
10:19:49object 2 equals
10:19:53object and then inside let's type the
10:19:57property method colon and an arrow
10:20:01function brackets arrow and curly
10:20:06brackets so even though we could save an
10:20:08arrow function inside an object like
10:20:11this objects already have a shortcut for
10:20:15functions so at the bottom we could just
10:20:19type
10:20:20method brackets and curly
10:20:23brackets so this syntax is called the
10:20:26shorthand method syntax so this
10:20:30shorthand method syntax is actually
10:20:32easier to read than an arrow function so
10:20:35when saving a function in an object it's
10:20:38actually recommended to use this syntax
10:20:41instead there's also another difference
10:20:44between regular functions and arrow
10:20:46functions but we'll learn about it later
10:20:48in in this course because it's a more
10:20:50advanced
10:20:52feature now let's move on and we're
10:20:54going to learn another Improvement we
10:20:56can make to our projects so let's
10:20:59comment out this code we'll scroll up
10:21:03and type SL star and at the
10:21:08bottom star slash and
10:21:12save and next we're actually going to
10:21:15scroll up to the very top of this file
10:21:19and we're going to create a button on
10:21:21the page so inside the body we'll type
10:21:25less than button greater than and inside
10:21:29the button we'll have the text
10:21:33click now let's say that we want to run
10:21:36some JavaScript code when we click this
10:21:38button so here we can type on click
10:21:43equals double quotes and write some
10:21:46JavaScript inside this double quotes
10:21:48quot now we're going to learn a better
10:21:51way of doing this called add event
10:21:54listener to use add event listener first
10:21:58we're going to get this button and put
10:21:59it into our JavaScript using document.
10:22:03query selector so let's add a class to
10:22:07this button so we can select it and
10:22:10we'll set it to
10:22:12js-
10:22:14button and now inside the script element
10:22:17we're going to use
10:22:20document. query
10:22:23selector brackets and the string do
10:22:29js-
10:22:31button so now let's save this button in
10:22:34a variable so we can use it later at the
10:22:37front we'll type
10:22:40const button element equals this
10:22:46result now every HT H ml element has a
10:22:50method called add event listener add
10:22:53event listener let us run some code when
10:22:56we interact with the element so it sort
10:22:59of does the same thing as
10:23:02onclick so at the bottom let's type
10:23:06button
10:23:08element dot add capital E Event capital
10:23:14L
10:23:15listener and brackets
10:23:19so add event listener has two parameters
10:23:22the first parameter is the event or what
10:23:25type of interaction we want to listen
10:23:28for so between these brackets let's type
10:23:32the string
10:23:34click so this will run some code when we
10:23:37click the button the way to find these
10:23:40event names is to look at this attribute
10:23:44the word after on is the
10:23:46event next the second parameter is a
10:23:49function that we want to run when we
10:23:52click this element so we'll type a comma
10:23:57and because we're passing a function
10:23:59into another function we're going to use
10:24:01an arrow function so we'll type
10:24:05brackets arrow and curly
10:24:08brackets so inside here let's just do
10:24:13console. log string click
10:24:18and
10:24:20save and now when we click this button
10:24:24it will run this function and display
10:24:28click so this code does the same thing
10:24:32as the onclick attribute however add
10:24:35event listener has some advantages over
10:24:38using an attribute first it lets us add
10:24:42multiple event listeners for an event
10:24:45for example let's add another click
10:24:48event listener we can select this
10:24:51code and
10:24:54rightclick
10:24:56copy and then down
10:24:59here rightclick and
10:25:03paste and let's change this to log click
10:25:07to if we
10:25:09save and click the
10:25:11button it will run both these functions
10:25:15so add event listener let us add
10:25:18multiple listeners to one event another
10:25:22advantage of doing this is that we can
10:25:24remove an event listener using a method
10:25:27called remove event
10:25:29listener so under this code we can type
10:25:34button
10:25:36element do remove capital E Event
10:25:42capital L listener and
10:25:46brackets and remove EV listener also has
10:25:49two
10:25:50parameters the first parameter is the
10:25:53event so in this case it is the string
10:25:58click and we'll type a comma and the
10:26:01second parameter is the function that we
10:26:04want to remove so that when we click
10:26:06this button it will no longer run that
10:26:09function now we can't just type a copy
10:26:13of this function we need to use this
10:26:15exact function inside remove event
10:26:18listener to do that we'll save this in a
10:26:21variable first so above this let's
10:26:25create a
10:26:26variable
10:26:27const event
10:26:31listener equals and we'll select this
10:26:34code right click
10:26:38copy and in here right click and
10:26:44paste and now we'll replace this with
10:26:47the VAR
10:26:48variable event
10:26:52listener and down here we'll remove this
10:26:55same
10:26:56variable event
10:27:00listener if we
10:27:02save and click the button again it will
10:27:06only display click two because we added
10:27:09this event listener and then we removed
10:27:12it so it will no longer run this
10:27:14function when we click the button so as
10:27:17you can see
10:27:18add event listener gives us more control
10:27:21over event listeners we can add multiple
10:27:24listeners to an event and we can also
10:27:27remove a listener from an event so
10:27:30because of these advantages the best
10:27:32practice is to use add event listener
10:27:35instead of an onclick attribute so let's
10:27:39go back into our projects and switch to
10:27:41using add event listener we'll start
10:27:44with the rock paper scissors project so
10:27:47we'll open our
10:27:49files and we'll open 12 rock paper
10:27:52scissors and click here and
10:27:55save and we'll scroll up to 12 rockpaper
10:28:00scissors. JS and for the video I'll drag
10:28:04this down to the bottom and I'll hide
10:28:07the files for
10:28:08now and then rearrange the
10:28:12windows and finally open the tab for
10:28:15this file
10:28:18now let's go to the HTML we'll scroll up
10:28:22to these move buttons which is up
10:28:27here so here we're using the onclick
10:28:30attribute and we're going to switch it
10:28:32to add event listener so first let's get
10:28:36this button into our
10:28:38JavaScript We'll add a class so we can
10:28:41select it
10:28:43js-
10:28:45rock- button
10:28:48and
10:28:49save and then down
10:28:51here let's go below the autoplay
10:28:54function right here and we'll use add
10:28:58event listener so we'll get this button
10:29:01into our JavaScript using
10:29:04document do query
10:29:08selector brackets and a string dot
10:29:13js-
10:29:14ro-
10:29:16button and we're going to use dot add
10:29:21event
10:29:23listener
10:29:25brackets so we're going to listen for a
10:29:29click and a comma and we'll give it a
10:29:32function that we want to run so a common
10:29:36mistake here is to actually run the
10:29:38function for example play game brackets
10:29:44and the string
10:29:46Rock so we're supposed to give a
10:29:49function to add event listener however
10:29:53this doesn't result in a function this
10:29:56will actually run play game and give us
10:29:59the return value which is undefined so
10:30:02this code will actually result in
10:30:05undefined and then we're giving
10:30:06undefined to add event listener so it
10:30:10won't
10:30:11work so in order to give add event
10:30:14listener a function we need to create a
10:30:17function here
10:30:18so let's remove this code and we'll
10:30:21create a function using brackets arrow
10:30:25and curly
10:30:27brackets and then inside this function
10:30:30we're going to call play game so we'll
10:30:33type play game brackets and
10:30:40rock so now when we click the rock
10:30:43button it will run this function and
10:30:46play the game so let's remove the
10:30:49onclick
10:30:51attribute and save the
10:30:55HTML and also save the
10:30:58JavaScript and then go to our project
10:31:01and click the rock button you can see
10:31:04that it works except this time we're
10:31:06using add event listener so let's do the
10:31:10same thing for the paper and the
10:31:12scissors button feel free to pause the
10:31:14video if you want to try it
10:31:16yourself so we'll scroll down here and
10:31:20let's add a class to the paper button so
10:31:23we can select it
10:31:25js-
10:31:27paper- button and then in our JavaScript
10:31:31we'll make a copy of this code so right
10:31:35click
10:31:37copy and then down
10:31:40here right click and
10:31:44paste and now we're going to replace the
10:31:47rock button
10:31:48with
10:31:50paper and when we click this button
10:31:53we're going to play the game with
10:31:56paper now let's
10:31:58save and we'll remove the onclick
10:32:03attribute and save the
10:32:06HTML if we click the paper button it
10:32:09works as
10:32:11before finally let's do the scissors
10:32:14button so we'll add a class Js
10:32:18s- scissors dasb
10:32:22button and then inside our JavaScript
10:32:25we'll make a copy of this rightclick
10:32:30copy and then down here create some new
10:32:33lines rightclick and
10:32:37paste and now switch to the scissors
10:32:41button and play game with
10:32:45scissors let's save
10:32:48and remove the onclick
10:32:51attribute save the
10:32:54HTML and try the scissors
10:32:56button so everything still
10:32:59works and I'll leave switching the reset
10:33:02score button and the autop playay button
10:33:05as
10:33:06exercises so now let's try add event
10:33:09listener with a different event we'll
10:33:11use it with key down so let's say that
10:33:14in our project we want to make it so we
10:33:17can play the the game with our keyboard
10:33:19if we Type R it will play Rock if we
10:33:23type P it will play paper and if we Type
10:33:26S it will play
10:33:29scissors let's go into our
10:33:31JavaScript and we'll scroll
10:33:34down and we're going to add an event
10:33:36listener to the body this time so that
10:33:39if we type anywhere on the page we can
10:33:41run some code so we're going to get the
10:33:44body element using document
10:33:49body and
10:33:51then add event listener and
10:33:57brackets this time the first parameter
10:34:00or the event will be the string key
10:34:04down and let's type comma and give it a
10:34:08function that we want to run brackets
10:34:12arrow and curly
10:34:14brackets inside here let's just type
10:34:20console.log key down for now and
10:34:25save so now if we go to the project and
10:34:28we open the console
10:34:31rightclick and click
10:34:33inspect click the
10:34:35console and then click on the page if we
10:34:39type a key on our
10:34:41keyboard it will run this function and
10:34:44display key down so now we have to check
10:34:48what key was pressed and play the game
10:34:52so how do we know which key that we
10:34:54pressed earlier in this course we used
10:34:57the attribute on key down and we learned
10:35:00that it gets a special object called
10:35:03event and the event object contains
10:35:05which key was pressed add event listener
10:35:09also provides this event object but it
10:35:12provides it as a parameter to this
10:35:14function so inside the round brackets
10:35:17let's add a parameter
10:35:20event now every time we type on our
10:35:23keyboard add event listener will save
10:35:26the event object in here and run the
10:35:29function and this event object contains
10:35:32the key that we
10:35:34pressed so in the console.log let's
10:35:37display event. key this time and
10:35:42save now if we click on the page and
10:35:46type R
10:35:48event. key will contain R if we press P
10:35:53event. key will contain P so that's how
10:35:57we know which key we pressed so now
10:36:00let's close this and instead of
10:36:03console.log we'll create an if statement
10:36:06to check which key we pressed so if
10:36:10brackets and curly
10:36:12brackets and here we'll check if event.
10:36:17key
10:36:18is equal to the string R if it is we're
10:36:23going to play the game with rock so
10:36:27inside here we can just run this play
10:36:30game
10:36:31function play game and brackets and
10:36:36inside we'll type the string
10:36:40Rock now let's check if we pressed P so
10:36:44we'll add another Branch else if
10:36:48brackets and curly brackets and in the
10:36:51second condition we'll check if event.
10:36:55key is equal to the string P if it is
10:37:01we'll play the game with paper so inside
10:37:05here we'll run play game brackets and
10:37:10the string paper and finally we'll check
10:37:14if we pressed s so at the end We'll add
10:37:18another else if brackets curly brackets
10:37:23and inside here we'll check if event.
10:37:28key is equal to the string s if it is
10:37:34we'll play the
10:37:37game with the string
10:37:40scissors now let's
10:37:43save click our page and type R
10:37:48and it plays the game with rock if we
10:37:51type P it will play the game with paper
10:37:55and if we Type S it will play the game
10:37:58with
10:37:59scissors so that's an example of using
10:38:02add event listener with a different type
10:38:04of event with a key down if we need the
10:38:08event object we can get it using a
10:38:11parameter up here so those are all the
10:38:14features we're going to create for our
10:38:16rock paper scissors project
10:38:18now let's move on to the to-do list
10:38:20project and switch to add event listener
10:38:23we'll go into our code editor click up
10:38:27here and find 12 to-do list.
10:38:32HTML we'll also scroll up to the scripts
10:38:35folder find 12 to-do
10:38:38list.js and open this file and I'm going
10:38:41to put it at the bottom here so I can
10:38:43see it side by side I'll close this for
10:38:46now
10:38:47and close rock paper
10:38:50scissors and then open the tab for this
10:38:54project okay so let's start by switching
10:38:57the add button to use add event listener
10:39:00we'll go into our HTML and find the add
10:39:04button which is here and we're going to
10:39:07add a class so we can select it in
10:39:10JavaScript
10:39:12js-
10:39:13add- too dasb button
10:39:18now let's go to our JavaScript and
10:39:21scroll
10:39:22down above the add Todo
10:39:25function we'll get this button into our
10:39:28JavaScript using
10:39:31document. query
10:39:34selector brackets and then a string Dot
10:39:39and the class we want to get
10:39:42js- add- too dasb button
10:39:48and then after this we use do add event
10:39:55listener
10:39:57brackets inside these brackets we'll
10:40:00give it the event the string click comma
10:40:05and then a function to run when this
10:40:07event happens so brackets arrow and
10:40:12curly
10:40:13brackets and in here we just want to do
10:40:16the same thing as the onclick attribute
10:40:19which is ADD too and call this function
10:40:25let's
10:40:26save and then in the HTML let's remove
10:40:30the onclick
10:40:32attribute and
10:40:35save and let's try it out so we'll type
10:40:38A
10:40:39too watch
10:40:42YouTube select a due
10:40:45date and then click add
10:40:48and the add button still works as before
10:40:51but we're just using add event
10:40:53listener next let's switch all the
10:40:56delete buttons let's scroll up to where
10:40:59we create these delete buttons which is
10:41:03here and first We'll add a class to all
10:41:06the delete buttons so we can select them
10:41:08in
10:41:09JavaScript
10:41:11js- delete Das too dasb button
10:41:18and now we're going to use document.
10:41:20Query selector and add an event listener
10:41:23to all of these buttons however there's
10:41:26two problems here first is that at this
10:41:29point in the code this is just a string
10:41:33we haven't actually put this button on
10:41:35the page yet we do that down here in
10:41:39this line of code we put the HTML that
10:41:41we generated onto the page so in order
10:41:45to add an event listener we need to put
10:41:48the HTML on the page first so we have to
10:41:51do it after this code so down here we're
10:41:56going to type
10:41:58document. query
10:42:01selector brackets and the string Dot and
10:42:06we'll select this class
10:42:09js- delete Das too
10:42:15Dutton however there's also a second
10:42:17problem here which is we're going to
10:42:20have multiple delete
10:42:22buttons and query selector only gives us
10:42:25the first one so how do we select all
10:42:28the buttons on the page that match this
10:42:31criteria instead of just the first one
10:42:34to do that the document object has
10:42:37another method called query
10:42:40selector
10:42:41all so query selector all will give us
10:42:45all the elements on the page that have
10:42:47the class JS delete Todo button so down
10:42:52here let's console.log this result to
10:42:55see what it looks like
10:42:57[Music]
10:42:59console.log brackets and close bracket
10:43:03and
10:43:05save and then here
10:43:08rightclick
10:43:10inspect and the
10:43:12console and expand this you'll see that
10:43:17document. query selector all gives us a
10:43:20list of elements and this list works
10:43:23just like an array this is index zero or
10:43:27the first button and this is index one
10:43:31which is the second button so now let's
10:43:34remove
10:43:37console.log and add event listeners to
10:43:40all of these
10:43:42buttons to do that we're going to Loop
10:43:45through this list of delete buttons
10:43:47so again this list works like an array
10:43:50so we can use a for each method to Loop
10:43:53through it so at the end let's type
10:43:58enter and tab and then dot for each and
10:44:06brackets as usual we'll give for each a
10:44:09function that we want to run for each of
10:44:12these values so we'll type brackets
10:44:16Arrow and curly
10:44:18brackets and now every time we Loop
10:44:21through the list for each will give us
10:44:24two parameters the first one is the
10:44:27value in the list which is a delete
10:44:29button element so let's name it delete
10:44:35button and we'll type comma and the
10:44:38second parameter is the index so
10:44:42index so now we want to add an event
10:44:45listener to each delete button so inside
10:44:49here we'll type delete button dot add
10:44:56event listener and
10:45:00brackets inside these brackets we'll
10:45:02tell it what event we want to listen to
10:45:05which is the string click and comma and
10:45:10then a function that we want to run when
10:45:13this event happens so brackets Arrow and
10:45:17curly
10:45:19brackets so now when we click a delete
10:45:22button we want to do the same thing as
10:45:24this onclick attribute above so let's
10:45:28select this
10:45:29code we'll
10:45:31rightclick
10:45:33copy and then down
10:45:36here right click and
10:45:40paste and now we can remove these
10:45:42characters because we're not in a string
10:45:45anymore and that's all we need to
10:45:48do so to summarize we used query
10:45:51selector all to get a list of all the
10:45:55delete buttons on the page and then we
10:45:57looped through the list using four each
10:46:01and for each delete button we added a
10:46:04click event listener and ran the same
10:46:06code that we did before so now we can
10:46:09scroll up and remove this onclick
10:46:14attribute and Save
10:46:18go back to the page close a console and
10:46:22try out the delete
10:46:23button and you can see that it still
10:46:26works so that's how we switch the to-do
10:46:29list project to use add event
10:46:31listener so now we're finished improving
10:46:34all of our
10:46:35projects in the rest of this lesson
10:46:38we're going to learn more features that
10:46:39use functions as
10:46:42values so let's close this for now and
10:46:45we'll go back to
10:46:4712 Advanced functions.
10:46:51HTML and we'll open the tab for this
10:46:54file and let's also comment out this
10:46:57JavaScript code using
10:47:02slashstar and star
10:47:05slash let's
10:47:07save and now let's scroll to the bottom
10:47:10of this
10:47:12code and create some new
10:47:15lines so in this lesson we learned the
10:47:18array method for each which lets us Loop
10:47:22through an array now we're going to
10:47:24learn two more array methods called
10:47:27filter and map so let's start with
10:47:30Filter let's say we have an array of
10:47:33numbers and we want to create a copy of
10:47:36this array with all the negative numbers
10:47:39removed so let's go up here and create
10:47:43an array of the number one comma -3
10:47:49comma 5 and type the method do
10:47:54filter and
10:47:56brackets so Filter Works the same way as
10:48:00for each we give it a function so
10:48:03bracket arrow and curly bracket and this
10:48:08function has two parameters the
10:48:11value and the
10:48:14index so filter will take the first
10:48:16first value save it in here and run the
10:48:19function then it will take the second
10:48:21value save it in here run the function
10:48:25and the third value save it and run the
10:48:28function now the only difference is that
10:48:31this time this inner function will
10:48:33return a value so we'll type
10:48:37return and we're going to return a
10:48:39Boolean like
10:48:42true so now the return value matters so
10:48:46what filter does is it creates a new
10:48:49array if the inner function returns true
10:48:52it will put this value in the new array
10:48:55if the inner function returns false it
10:48:58will not put this value in the new array
10:49:01for example at the front let's
10:49:04console.log the result of this so we'll
10:49:07type
10:49:10console.log Open Bracket and down here
10:49:14close bracket and Save
10:49:17so in this example the inner function
10:49:20always returns true so all three values
10:49:23will be in the new array if we change
10:49:26the return value to false every time and
10:49:31save all three values will not be added
10:49:35to the new
10:49:36array so now let's use this to solve our
10:49:39problem we want to remove the negative
10:49:42numbers from this array so inside this
10:49:45inner function we're going to return
10:49:47true if the number is positive and
10:49:50return false if the number is
10:49:52negative so we'll check if value is
10:49:57greater than or equal to
10:50:00zero curly brackets will return true and
10:50:05include it in the new
10:50:07array
10:50:09else will return false and not include
10:50:14it in the new array so let's remove this
10:50:19and
10:50:20save so now only values that are greater
10:50:23than zero will be in the new copy so
10:50:26using this we can sort of filter out
10:50:29values based on a criteria that's why
10:50:32this method is called
10:50:34filter now we can shorten this logic by
10:50:38using this code return value greater
10:50:43than or equal to zero so this comparison
10:50:47will return true if it's greater than or
10:50:49equal to zero and it will return false
10:50:52otherwise so this line does the same
10:50:55thing as this code up here so we can
10:50:59comment this out with slashstar and star
10:51:03slash and
10:51:05save and as always we can return a
10:51:09truthy or falsy value instead of just
10:51:12true or
10:51:13false the last array method we're going
10:51:15to learn is called map so let's create
10:51:19some new lines and scroll
10:51:22down and let's say we have an array of
10:51:25numbers again like the array 1 1 3 and
10:51:33we want to make a copy of this array
10:51:35with each number
10:51:37doubled so at the end we'll
10:51:41type map
10:51:43brackets and Map works just like for
10:51:46each and filter between the brackets
10:51:49we'll give it a function bracket arrow
10:51:54and curly brackets and this function
10:51:57will get two
10:51:58parameters the first parameter is each
10:52:01value in the array and the second
10:52:05parameter comma is the
10:52:08index so map will take the first value
10:52:12save it in this parameter and run the
10:52:14function take the second value
10:52:16save it in this parameter run the
10:52:18function third value save it and run the
10:52:22function and inside this function we're
10:52:24going to return a
10:52:27value so what map does is it creates a
10:52:31new array and then whatever we return
10:52:34will be added to the new array so if we
10:52:37return
10:52:3810 and then we console.log this result
10:52:43console.log
10:52:47and close bracket and
10:52:49save it will create an array where each
10:52:52value becomes
10:52:5410 now the interesting thing is that we
10:52:57can actually use the value itself in the
10:53:00return so here if we did value + 10 and
10:53:08save it will take each value in the
10:53:11original array add a 10 and put it in
10:53:14the new array
10:53:17so map will transform an array into
10:53:20another array based on the return value
10:53:23so if we want to return an array where
10:53:26each number is doubled we just have to
10:53:28multiply each value by two and save and
10:53:34this will give us 2
10:53:3826 next we're going to review some
10:53:40shortcuts of Arrow functions to make
10:53:43this code more
10:53:44compact first let's make a copy of this
10:53:48code rightclick
10:53:51copy and down
10:53:54here rightclick and
10:53:57paste so notice in the inner function
10:54:00we're not using index so let's just
10:54:03remove it for now and now that this
10:54:06Arrow function only has one parameter
10:54:08these round brackets are optional so we
10:54:11can also remove these to make the code
10:54:14more compact another shortcut is if we
10:54:18only have one line of code in an arrow
10:54:21function we can put the code on one line
10:54:24like
10:54:26this and now the curly brackets and the
10:54:29return are optional so we can actually
10:54:32just remove all of this
10:54:36code so if we have just an arrow it will
10:54:39automatically return this result on the
10:54:42right and we don't have to type return
10:54:45ourselves
10:54:47so this code does the same thing as the
10:54:49code above but as you can see these
10:54:52shortcuts make our code very Compact and
10:54:55clean so let's save and this will give
10:54:59us the same
10:55:01result the last thing we're going to
10:55:03learn in this lesson is a feature of
10:55:05functions called a closure a closure
10:55:08means if a function has access to a
10:55:11value it will always have access to that
10:55:15value so let's take a look at an example
10:55:18we're going to go back to the to-do list
10:55:20project so we'll click up here and then
10:55:24scroll up to 12 to-do
10:55:28list.js and close this and then open the
10:55:31tab for the to-do list which is here and
10:55:35let's scroll down to the query selector
10:55:40all so we're going to focus on this
10:55:43inner function here so notice that this
10:55:46fun function uses index from above now
10:55:50the interesting thing about index is
10:55:52that as soon as this for each ends index
10:55:55gets deleted for example if we add some
10:55:59new lines and we try to
10:56:02console.
10:56:04log
10:56:06index and
10:56:08save and then go into our project
10:56:12rightclick
10:56:13inspect and the con
10:56:17it'll tell us that the index is not
10:56:20defined so as soon as we end the for
10:56:23each Loop index doesn't exist
10:56:25anymore however if we move this into the
10:56:29inner function so inside here and we
10:56:36console.log
10:56:38index and
10:56:40save and we click a delete button it
10:56:44will tell us that the index is zero so
10:56:48even though index gets deleted right
10:56:50away down here if we click one of these
10:56:53buttons later on it still has access to
10:56:57Index this feature is called a closure
10:57:01if a function has access to a value it
10:57:04will always have access to that value
10:57:07the value like index gets packaged
10:57:10together or enclosed with the function
10:57:13that's why we call it a closure
10:57:16so even if the value index gets deleted
10:57:19after the loop we can click the delete
10:57:22button 5 seconds later or even 5 minutes
10:57:25later and this function will always have
10:57:28access to
10:57:29index so closures are something that
10:57:32naturally happens as we write JavaScript
10:57:34code and it's nice to know how this
10:57:37feature works there are some Advanced
10:57:39Techniques that we can do with closures
10:57:41but they're not used that often so I
10:57:44won't be covering them in this course
10:57:46but maybe in a different video now let's
10:57:49remove
10:57:50console.log and
10:57:53save and that's the end of this lesson
10:57:56in this lesson we learned that functions
10:57:59are values we learned set time out and
10:58:02set interval which lets us run a
10:58:04function in the future we learned an
10:58:07array method called for each which is a
10:58:10cleaner way of looping through an array
10:58:13we used four each Arrow functions and
10:58:16and add event listener to improve our
10:58:18projects we learned two more array
10:58:21methods filter and map and we learned a
10:58:25feature of functions called
10:58:28closures here are some exercises to help
10:58:30you practice what we learned in this
10:58:32lesson
10:59:00in this lesson we're going to start the
10:59:03Amazon Project and we're also going to
10:59:05learn a very useful technology called
10:59:08git so first let's take a look at the
10:59:11Amazon Project to see how it works we're
10:59:14going to go to our browser
10:59:16and create a new tab at the top and
10:59:20we're going to type super simple dodev
10:59:25SL projects SL Amazon and press
10:59:33enter so this is going to be the project
10:59:36we're going to build in this course this
10:59:38is an e-commerce website that looks like
10:59:41Amazon where we can see a list of
10:59:43products on the homepage and then we can
10:59:46add these products to a cart by clicking
10:59:49add to
10:59:51cart and then we can see our cart by
10:59:54clicking the top
10:59:58right and on this page it will show us
11:00:01which products are in our cart and it
11:00:04will also show us the cost of our order
11:00:07including shipping and taxes and once
11:00:11we're ready to create an order we can
11:00:13click this button to create the order
11:00:17and it will take us to this page which
11:00:19shows us a list of our past orders we
11:00:22can also track our order by clicking
11:00:25this track package
11:00:27button and it will take us to this page
11:00:30which tells us the progress of our order
11:00:32whether it's preparing it's shipped and
11:00:35it's
11:00:36delivered so that's an overview of the
11:00:39project we're going to built this is a
11:00:41complex multi-page website where the
11:00:44different pages interact with each other
11:00:46to create a full app the first thing
11:00:50we're going to do is to download the
11:00:52starting code for this project we're
11:00:54going to create a new
11:00:57tab and here we're going to type
11:01:01github.com
11:01:05slup
11:01:07simple Dev SL JavaScript D Amazon d
11:01:13project and press enter
11:01:19you can also find the starting code in
11:01:21the description by clicking
11:01:25here and then going to the links for
11:01:28this
11:01:35lesson and on this page we can see the
11:01:38starting code for the Amazon Project so
11:01:42this code contains all the HTML and CSS
11:01:46that we need the reason we're going to
11:01:48use some starting code instead of
11:01:50writing all of this ourselves is because
11:01:52this course is focused on JavaScript not
11:01:55HTML and CSS if we were to write all of
11:01:59this code ourselves it would just take
11:02:01up too much time and it would be an
11:02:03entire course by itself if you want to
11:02:06learn how to create this code you can
11:02:08check out my HTML and CSS full course
11:02:11which would teach you all the skills
11:02:13that you need but for this JavaScript
11:02:16course we're going to start with the
11:02:18HTML and CSS here and we're just going
11:02:21to focus on adding JavaScript to this
11:02:24website so now let's download all of
11:02:27this code we can do that by clicking
11:02:29this green code button here and then
11:02:33click download
11:02:36zip once that's finished downloading
11:02:38we're going to go to our downloads
11:02:40folder so for me it's this folder right
11:02:43here called downloads
11:02:47and then we're going to unzip this file
11:02:50by double clicking
11:02:51it and this will give us a folder that
11:02:54contains all the code so we're going to
11:02:56select this folder and move it to our
11:03:03desktop next let's go to our desktop so
11:03:07we're going to close this for now and
11:03:09I'll hide the
11:03:11browser and on the desktop we're going
11:03:14to select the folder that we downloaded
11:03:16and we're going to rename this so at the
11:03:19end we'll remove Main and press enter to
11:03:24rename it to JavaScript Amazon
11:03:27Project next we're going to take this
11:03:29folder and open it in our code editor so
11:03:33let's open vs
11:03:34code and we're going to click
11:03:38file open
11:03:41folder and we're going to find the
11:03:42folder that we downloaded for me it's on
11:03:45the desktop and it's this folder right
11:03:47here so we'll click this folder and then
11:03:51click select
11:03:54folder and then we can close this
11:03:56welcome
11:03:57message okay so now we have our starting
11:04:00code and we're going to set up the
11:04:03project so first let's open our browser
11:04:07again and we can close the GitHub
11:04:10page as well as the tabs for the
11:04:13previous lessons so we'll close these
11:04:16tabs right
11:04:17here but we'll leave the final Amazon
11:04:20Project
11:04:21open next let's go back to vs
11:04:24code and we're going to open this
11:04:27project in our browser so we're going to
11:04:29select this file amazon.
11:04:32HTML so this file corresponds to the
11:04:35homepage here so let's select this file
11:04:39and then
11:04:40rightclick open with live server
11:04:45so I'm just going to rearrange my
11:04:47windows here so we can see these side by
11:04:51side and now we're ready to begin so
11:04:55let's take a look at the code that we
11:04:57have to start with as I mentioned all we
11:05:00have here is the HTML and CSS for this
11:05:03website there's currently no JavaScript
11:05:06at all on this
11:05:07page so one thing you'll notice is that
11:05:10we can actually create almost all of the
11:05:12website using just HTML and CSS we
11:05:17actually don't even need JavaScript to
11:05:19create all of this we're able to create
11:05:21the header at the top as well as three
11:05:24products to start with and this shows
11:05:27that HTML and CSS can pretty much create
11:05:30everything that we see visually on the
11:05:33website where JavaScript comes in is
11:05:36that JavaScript makes this website
11:05:39interactive so right now if we click the
11:05:42add to card button it looks pretty nice
11:05:45but it doesn't actually do anything and
11:05:48that's because we haven't added
11:05:49JavaScript yet so the role of JavaScript
11:05:52is to make our website interactive after
11:05:55we created all the content and The
11:05:58Styling now before we begin adding
11:06:01JavaScript to this website we're
11:06:03actually going to take some time and
11:06:05learn another very useful technology
11:06:07called git so git is a technology that
11:06:11lets us track changes in our code for
11:06:15examp example do not follow along here
11:06:18but let's say that I'm working on this
11:06:20website and I go into my code editor and
11:06:24I change some code here so let's say
11:06:26that I add some code
11:06:29here and then in this file I'm going to
11:06:32delete some code so I just select some
11:06:34code and delete it and then
11:06:39save and then in this file I'm going to
11:06:42change some code at the bottom
11:06:47so now let's say that I made a mistake
11:06:50and I want to undo all the changes that
11:06:52I just made so how would I do that how
11:06:55would I remember all the code that I
11:06:57changed in the different files so right
11:07:00now this is really difficult and this is
11:07:02a problem that we run into in bigger
11:07:05projects we're changing lots of code in
11:07:07different files and it's really hard to
11:07:09keep track of what code has changed and
11:07:13this is where git comes in git lets us
11:07:16track changes in our code and it helps
11:07:19us solve this
11:07:21problem so here's what it looks like if
11:07:23I have git set up in my project I can go
11:07:27into this section of VSS code this
11:07:30section is for git and then here git
11:07:33will tell me which files I changed and
11:07:36if I click these files it will tell me
11:07:38which lines I changed and exactly which
11:07:41code I changed if I want to I can click
11:07:45this button
11:07:46to reverse all the changes in this
11:07:49file I can also click here to reverse
11:07:52all the changes in all the
11:07:56files so as you can see kit helps us
11:08:00track changes in our code and it lets us
11:08:03easily undo our changes if we need
11:08:06to and this technology is really useful
11:08:09in bigger projects like this Amazon
11:08:12Project where we're going to be changing
11:08:14lots of code in in many different files
11:08:17so before we start this project we're
11:08:19going to learn how to set up and use
11:08:22git the first thing we need to do is to
11:08:25install git to do that we can go to this
11:08:29section of vs code called Source
11:08:33control now if this section looks like
11:08:35this with a button initialize repository
11:08:39that means you already have git
11:08:42installed otherwise if you're on Windows
11:08:45you can click this button and then click
11:08:49open or you can go to this website
11:08:53directly and then click this link to
11:08:56download
11:08:58git once it's finished downloading we're
11:09:01going to run the installer and then just
11:09:04go with the default
11:09:06options if you're using a Mac you can
11:09:09click up
11:09:10here and then type
11:09:13terminal and press enter
11:09:17and inside here you're going to type git
11:09:19and press
11:09:21enter and then click this link and
11:09:24install
11:09:30git all right after installing git we're
11:09:34going to restart vs
11:09:39code and make sure you have the Amazon
11:09:42Project
11:09:43open and now if if we go into the git
11:09:47section it should look like this with
11:09:50the button initialize
11:09:52repository so now that we've installed
11:09:55git we're going to set up git in our
11:09:58Amazon Project we can do that by
11:10:01clicking initialize
11:10:05repository if this button doesn't work
11:10:07for you you can also try going to the
11:10:10terminal menu and click new terminal
11:10:15and then inside this terminal type kit
11:10:19in it and press
11:10:25enter so a repository is just a folder
11:10:29where changes are being tracked by
11:10:31clicking initialize repository this
11:10:34turns the current folder which is
11:10:37Javascript Amazon Project into a
11:10:40repository and now all the changes
11:10:42inside this folder will be tracked by
11:10:45git so to start off git will tell us
11:10:48that all of these files are new files
11:10:52and that's because we just set up this
11:10:54repository so all of these files are
11:10:56considered new changes that we're
11:10:59starting to keep track
11:11:01of next we need to configure a username
11:11:05and email with Git now don't worry this
11:11:08information is not used anywhere online
11:11:11this is just forget to add an author to
11:11:14the changes that we make so to configure
11:11:17a username and email we're going to go
11:11:20to the
11:11:21top and open the terminal menu and click
11:11:25new
11:11:26terminal and then inside
11:11:29here we're going to type get config
11:11:35user.name and double
11:11:39quotes now if this looks familiar to you
11:11:41and you've already done this before you
11:11:43can skip this step and and the next
11:11:46step so between these double quotes
11:11:49we'll pick a username that we want to
11:11:51use so for me I'll use super simple Dev
11:11:58and press
11:12:00enter and we'll also configure an email
11:12:03by typing get config user. Emil double
11:12:10quotes and between these double quotes
11:12:13we'll put an email so I'll put Simon at
11:12:19superimple
11:12:21dodev and press
11:12:24enter so now that we configured a
11:12:27username and email we can close this
11:12:33terminal next we're going to save these
11:12:36changes into git so that git will start
11:12:39tracking any new changes that we make to
11:12:43save these changes we're just going to
11:12:44type type a message here describing what
11:12:47we changed so let's just type the
11:12:50message add the starting
11:12:55files and then we're going to click
11:12:57commit and if this popup shows up we're
11:13:00going to click
11:13:02yes so that will take all of our changes
11:13:05and save them into git so now that we've
11:13:09saved those changes into git any new
11:13:12changes that we add will start showing
11:13:14up here so let's do an example and let's
11:13:18change some code in a couple different
11:13:20files for practice so let's click this
11:13:23icon up here to show our code and let's
11:13:27go into amazon.
11:13:29HTML and we'll just change this title to
11:13:33intro to git and
11:13:37save and then let's go into checkout.
11:13:42HTML and at the top let's actually
11:13:45remove the title and save and then let's
11:13:49open orders.
11:13:51HTML and at the top let's just add
11:13:54something to the title like
11:13:57page if we
11:13:59save and then go into the source control
11:14:02section or the git
11:14:04section it will tell us all the changes
11:14:07that we just made in our code in the
11:14:09three different files if we click one of
11:14:12these files it will actually tell us
11:14:16exactly which code that we
11:14:19changed now if your git section looks
11:14:21like this where the changes are on top
11:14:23of each other instead of side by side if
11:14:26you want to you can change this by
11:14:28clicking these three dots here making
11:14:31sure that inline view is unchecked and
11:14:34also unchecking use inline view when
11:14:36space is
11:14:40limited so now it's very easy to undo
11:14:43this code we can just take the code on
11:14:45the left and then copy paste it on the
11:14:47right to undo this change we can also
11:14:51click here to undo all the changes in
11:14:54this
11:14:56file and up here we can also click this
11:15:00button to undo all the changes in all
11:15:03the different
11:15:05files so that's an intro to Git it helps
11:15:09us keep track of changes in our code and
11:15:12it's very useful for bigger projects
11:15:14like this Amazon Project where we're
11:15:16going to be changing lots of code in
11:15:19many different files if you want to
11:15:21learn about git in more detail you can
11:15:24check out my git and GitHub full course
11:15:26in the video
11:15:29description so now that we've setup git
11:15:32let's start the Amazon Project so first
11:15:35make sure that this section is empty and
11:15:38we've reversed all the changes that we
11:15:40made when practicing
11:15:42git next let's click the this icon to
11:15:45show our
11:15:46files and let's remove the previous
11:15:51code and we're going to start in the
11:15:54amazon. HTML
11:15:59file and let's close the git page and
11:16:03then open the tab for this file it
11:16:06should say amazon. HTML up
11:16:09here so we'll start by creating the list
11:16:12of products on the homepage so right now
11:16:15we start with three products if we go to
11:16:18the final project we're going to add the
11:16:21rest of the products that you see here
11:16:24and we're also going to make this
11:16:25interactive so that when we click the
11:16:28add to card button it will add this
11:16:31product to our
11:16:33cart so let's go back to our
11:16:36project and in order to create this
11:16:39we're going to learn the main idea of
11:16:42JavaScript so when using JavaScript
11:16:44script we usually do a three-step
11:16:47process the first step is to save the
11:16:51data and then we generate the
11:16:54HTML and finally we make it
11:16:58interactive let's go through each step
11:17:01to create this list of
11:17:03products so right now we have three
11:17:06products on our page to start with and
11:17:08we're going to add more products to this
11:17:11page so let's start by finding the HTML
11:17:14for one of these products because we can
11:17:17always just copy and paste this to
11:17:19create another one now we're going to
11:17:21learn a very important skill for bigger
11:17:24projects which is how to find the code
11:17:27for something on this page so let's say
11:17:29that we want to find the code for one of
11:17:32these products we're going to
11:17:35rightclick and click
11:17:38inspect and this will bring up the
11:17:40console and I'm actually going to click
11:17:43these three dots and click this icon to
11:17:46move the console to a separate window so
11:17:49that we can see the whole web page so
11:17:52now we're going to click this icon in
11:17:54the top
11:17:55left and we're going to hover over and
11:17:58click the thing that we want to get the
11:18:00code for so I want to get the code for
11:18:03this entire first product so I'll click
11:18:06in this
11:18:07space and this will tell us that the
11:18:10code for the product is this code a div
11:18:13with the class product -
11:18:15container so now we're going to take
11:18:18this class and then search for it in our
11:18:21code editor so let's open vs
11:18:24code and we're going to type contrl f on
11:18:27Windows or command F on Mac to search
11:18:31for code in this file so we're going to
11:18:34search for the class that we saw earlier
11:18:38which is
11:18:40product-
11:18:43container and this will take us to the
11:18:45code for one of these products so we can
11:18:49actually click the arrow on the left to
11:18:51collapse this code and we'll see another
11:18:54product container which corresponds to
11:18:57the second product we can click this
11:18:59Arrow again and we'll see a third
11:19:02product container which corresponds to
11:19:04the third
11:19:05product so that's how we find the code
11:19:08for something on the page now to add
11:19:11another product to this page one thing
11:19:14we can do is to take this HTML and just
11:19:17make a copy of it at the bottom of the
11:19:20page however this is not a good idea
11:19:24because if we add lots of products we're
11:19:26going to be copying this HTML over and
11:19:29over and if we expand this you can see
11:19:33that each product has a lot of HTML code
11:19:36so we don't want to be copying all of
11:19:38this over and over again it's going to
11:19:41be a lot of code and it's going to be
11:19:42hard to manage in instead another
11:19:45strategy is to generate this HTML code
11:19:49using JavaScript so let's learn how to
11:19:52do that before we can do that we need to
11:19:56add JavaScript to this page so we're
11:19:58going to create a Javascript file so
11:20:02let's click up here to show our
11:20:04files and first let's create a new
11:20:08folder to contain all of our JavaScript
11:20:11code so let's name this folder SC
11:20:14scripts and press
11:20:17enter next let's click on our folder and
11:20:21we're going to click this icon to create
11:20:23a new file and we'll name this file
11:20:27amazon. JS and press enter so this will
11:20:32be the Javascript file for this HTML
11:20:36file next inside this Javascript file
11:20:40let's type the code
11:20:43console.
11:20:45log
11:20:47hello just to make sure that this works
11:20:50and
11:20:51save next we're going to load this
11:20:54Javascript file in our HTML file so
11:20:58let's go back to amazon.
11:21:01HTML and then at the bottom of the code
11:21:04we're going to scroll down and then
11:21:07right above the closing tag for the body
11:21:10we're going to add a script element
11:21:14and we're going to give this element an
11:21:16attribute SRC or Source equals double
11:21:21quotes and we're going to load this
11:21:23Javascript file so this Javascript file
11:21:26is in a folder called scripts so here
11:21:30we're going to type the folder name
11:21:33scripts and then a forward slash to go
11:21:36into the folder and we'll load the file
11:21:39amazon. JS and
11:21:43save so now let let's go back to the
11:21:46page and we'll open the console right
11:21:49click
11:21:51inspect and then click the
11:21:53console and it should display hello so
11:21:56now we're loading JavaScript on this
11:21:59page so let's open up vs code
11:22:03again and we're going to generate all of
11:22:05this HTML using JavaScript instead so
11:22:10the first step in our process is to save
11:22:13the data what does this mean data means
11:22:17information so in this case the data is
11:22:21the information about our products for
11:22:24example the products name the price
11:22:27ratings and the image so right now the
11:22:31information about the products or the
11:22:34data is inside our
11:22:36HTML so in our code if we click here to
11:22:41expand this element you can see that the
11:22:44inform
11:22:44about the products for example the name
11:22:48and the image is inside the
11:22:51HTML so what we need to do is to take
11:22:54this data and save it inside our
11:22:57JavaScript so that our JavaScript can
11:23:00use it so let's go to our Javascript
11:23:03file and I'm just going to put it down
11:23:06here so we can see it side by
11:23:09side and we're going to move this data
11:23:13into our JavaScript
11:23:14so let's remove
11:23:16console.log and let's create a variable
11:23:19to save the data so we'll type const and
11:23:23let's name it
11:23:25products and make it
11:23:27equal and now we want to create
11:23:30something that closely matches our data
11:23:34so in this case we have a list of
11:23:36products so in here we're going to
11:23:39create an array because an array
11:23:43represents a list
11:23:46and now each product in the list has
11:23:49many values like an image a name and a
11:23:53price so we're going to use an object to
11:23:56represent each product because an object
11:24:00lets us group multiple values
11:24:04together so inside this array we're
11:24:07going to create an object using curly
11:24:11brackets and now inside this object
11:24:14we're going to save the data for the
11:24:16first product so first let's find the
11:24:20data in our HTML we're going to search
11:24:23for the product's name by typing contrl
11:24:26F or command F and we'll search for
11:24:30black and
11:24:33gray and this will take us to the code
11:24:35for the first product so this is the
11:24:39name of the first product so let's
11:24:41actually scroll up and we're going to
11:24:44get get the image for the first product
11:24:47and we're going to take this and save it
11:24:49in our JavaScript so let's select this
11:24:52code we're going to
11:24:55rightclick
11:24:57copy and then inside this object let's
11:25:00create a property called image colon and
11:25:05then here right click and
11:25:09paste and let's save this as a string so
11:25:13at the front we'll type a single quote
11:25:16and at the end we'll type a single
11:25:19quote so we just saved the image inside
11:25:22our
11:25:23JavaScript let's move on and save the
11:25:26name inside our JavaScript so we'll
11:25:29scroll down we'll select this code and
11:25:32then
11:25:34rightclick
11:25:35copy and in this object we'll type comma
11:25:40and a property called name col in a
11:25:43string
11:25:45and we'll right click and
11:25:50paste next we're going to save the
11:25:53rating into our JavaScript so we'll type
11:25:57comma and let's create a property called
11:26:00rating
11:26:02colon for the rating there's actually
11:26:05two parts the stars and the number of
11:26:08ratings that it has so let's actually
11:26:11group these two values into an object
11:26:14because these values are related to each
11:26:16other so in here we'll make the rating
11:26:20and
11:26:22object and each rating will have the
11:26:26stars and for the socks it's
11:26:304.5 comma and the rating will also have
11:26:33a
11:26:35count and for the first product it's
11:26:3987 next let's save the price into our
11:26:43JavaScript
11:26:44so we'll create another property called
11:26:49price and for the first product the
11:26:52price is
11:26:55$10.90 however JavaScript has problems
11:26:58doing math with decimal numbers or
11:27:01floats like this so a best practice when
11:27:04calculating money is to calculate in
11:27:07cents instead of dollars so for this
11:27:10reason we're going to save the price as
11:27:13cents so we'll save it as
11:27:171,90 as a reminder $1 is equal to 100
11:27:22cents and because we're saving in cents
11:27:25it's helpful to rename this property to
11:27:28price cents
11:27:31instead so now if we scroll up we just
11:27:34saved all the information or the data
11:27:37about the first product into our
11:27:41JavaScript next let's go to the end here
11:27:45and type comma and create another object
11:27:49and we're going to save the data for the
11:27:51second product into this object so feel
11:27:54free to pause the video if you want to
11:27:56try it yourself
11:27:58first so again let's find this product
11:28:01in our HTML we'll go to our HTML and
11:28:05type contrl f or command F to search for
11:28:09code and we'll search for the name
11:28:12intermediate
11:28:15size basketball so now this is the code
11:28:18for the second product we're going to
11:28:21scroll up a bit and find the image for
11:28:24this product and we're going to select
11:28:26it rightclick
11:28:29copy and then inside the second object
11:28:33we'll create an image property just like
11:28:36we did up
11:28:38here and we'll save it as a string and
11:28:42we're going to rightclick and
11:28:46paste and let's type comma and we'll
11:28:49save the name inside the second object
11:28:53so we'll scroll down and select the
11:28:57name and then right click
11:29:01copy and then down here create a string
11:29:06and rightclick and
11:29:08paste and we'll type a comma and we'll
11:29:12save the rating
11:29:15colon
11:29:16object and we'll save the number of
11:29:19stars which is
11:29:21four and the number of ratings that it
11:29:24has count colon
11:29:28127 and finally we'll type a comma and
11:29:32we'll save the price of the product in
11:29:36cents colon
11:29:41295 so now the data for these second
11:29:44product is saved inside our
11:29:47JavaScript let's go to the end and type
11:29:50comma and create another object and
11:29:53we're going to save the data for the
11:29:55third product inside again feel free to
11:29:58pause the video to try it yourself first
11:30:02so let's save the image we'll find the
11:30:04code for this product in our HTML so up
11:30:08here we'll typ contrl F or command
11:30:11F and we'll search for the product name
11:30:15which is
11:30:17adults plain cotton
11:30:20t-shirt and scroll up and we're going to
11:30:23save the image first so let's select
11:30:25this right click copy and then down here
11:30:31create an image property colon and a
11:30:34string and then right click and
11:30:38paste and we'll create a comma and let's
11:30:41save the name in our Javas script next
11:30:45create a string and then we'll scroll
11:30:48down here we'll select the
11:30:51name right
11:30:53click
11:30:54copy and then in here right click and
11:30:59paste and comma and we'll save the
11:31:03rating colon and object and we have the
11:31:07number of stars for this one it's
11:31:114.5 colon and the
11:31:15count and for this one it is
11:31:2056 and lastly type a comma and we'll
11:31:24save the price in
11:31:27cents colon
11:31:31799 and now let's save our Javascript
11:31:35file now one really important thing is
11:31:39to make sure that in each of these
11:31:41objects we have the same property so we
11:31:44have the image property the name
11:31:47property and the same rating property
11:31:49with the same structure we want all of
11:31:52our objects to have the same structure
11:31:54so that our code can handle each product
11:31:57the
11:31:58same so that's what it means to save the
11:32:01data we create something in JavaScript
11:32:04that closely matches the data that we
11:32:07have on the Page by the way this is
11:32:10called a data structure because its
11:32:13structure structures or organizes the
11:32:15data and this represents a list of
11:32:18products so we usually use a combination
11:32:21of objects and arrays to create a data
11:32:24structure in
11:32:26JavaScript so now that we've saved the
11:32:28data the next step is to use this data
11:32:32to generate the HTML instead of writing
11:32:35the HTML
11:32:38manually to generate the HTML we can
11:32:41Loop through this array and for each of
11:32:45these products we're going to create
11:32:47some
11:32:48HTML so let's go ahead and loop through
11:32:51this array first we'll scroll down to
11:32:55the
11:32:56bottom and we'll type the name of the
11:32:58array which is products and then we'll
11:33:02Loop through this array using a for each
11:33:05method so we'll type Dot 4 Capital each
11:33:11brackets and inside we create a function
11:33:15using brackets arrow and curly
11:33:19brackets and we'll give it a parameter
11:33:22called
11:33:24Product so I'm going to move this back
11:33:26to the top here so we can see more of
11:33:29the code so the way that for each works
11:33:32is that it takes each object saves it in
11:33:35this parameter called Product and then
11:33:37runs the function so it takes the first
11:33:40object saves it in product runs the
11:33:43function function takes a second object
11:33:45saves a product runs a function and so
11:33:48on so for each of these products or each
11:33:51of these objects we want to create some
11:33:56HTML so inside this function let's
11:33:59create a variable const
11:34:03HTML equals and we'll create a template
11:34:06string using back
11:34:09ticks and now inside this template
11:34:12string we're basically going going to
11:34:14copy all the HTML for one of these
11:34:17products so let's go back to our HTML
11:34:21file and how do we find the HTML for one
11:34:24product so we learned this earlier we
11:34:27can
11:34:28rightclick
11:34:31inspect and then click the top left
11:34:34icon and click the element we want to
11:34:36get the HTML for so this HTML represents
11:34:41one product and we can search for this
11:34:43class product- container in our code so
11:34:47we'll go back to our vs
11:34:50code inside the HTML file we can contrl
11:34:54f or command F to search for code and
11:34:57we'll search for the class product Das
11:35:03container and let's go to the first
11:35:05result so we'll go to the first result
11:35:08which is here and let's copy all of the
11:35:12code inside this ele element one trick
11:35:15we can do is to click the arrow on the
11:35:17left to collapse it and then we'll
11:35:21select all this code and we'll
11:35:24rightclick
11:35:26copy and then inside our Javascript file
11:35:30inside the string we're just going to
11:35:33rightclick and paste the
11:35:37HTML and if we need to fix the
11:35:39formatting we can select all of this
11:35:42code and then press tab a few times to
11:35:46add some indexs and here we can remove
11:35:49the indent and let's
11:35:52save so now we're basically looping
11:35:56through the array of products and for
11:35:59each product we're creating all of the
11:36:02HTML that we had before so we're
11:36:05generating this HTML using
11:36:08JavaScript now let's console.log this
11:36:11HTML to make sure that it's working
11:36:14we'll scroll down to the
11:36:16bottom and here let's
11:36:21console.log the HTML that we just
11:36:24created if we
11:36:26save and then go back to our page right
11:36:30click and
11:36:32inspect and click the
11:36:35console you can see in the console that
11:36:38we just generated all this HTML and we
11:36:41generated three of these
11:36:44let's go back to our
11:36:46code and scroll
11:36:50up now one problem here is that in the
11:36:54HTML that we generate we don't want to
11:36:56have the name black and gray socks every
11:36:59time for the second product we want to
11:37:01have a different name and a different
11:37:03image and for the third product we want
11:37:06to have a different name and a different
11:37:09image so how do we create slightly
11:37:12different HTML for each
11:37:15product to do that we're going to
11:37:17replace this part of the code with
11:37:20whatever the image property is so for
11:37:24here we're going to delete it and we're
11:37:26going to insert the property image into
11:37:30this string so to insert values into a
11:37:34template string like this we can use
11:37:37Dollar open curly bracket Clos curly
11:37:40bracket and then inside here we're going
11:37:43to insert the
11:37:47product. image property so it's going to
11:37:50take whatever the image property is of
11:37:52the product and put it inside this HTML
11:37:56code same thing for the name instead of
11:37:59black and gray socks every time we're
11:38:02going to delete this and then insert a
11:38:05value we're going to insert the
11:38:09product Dot and we'll insert the name
11:38:12property this time into this HTML so dot
11:38:18name and we'll do the same thing for the
11:38:20other pieces of data so for each product
11:38:23the number of stars could be different
11:38:26so instead of 4.5 every time let's
11:38:30delete this and we're going to insert
11:38:33the products rating and stars so
11:38:39product.
11:38:41rating. Stars
11:38:46one thing we have to watch out here for
11:38:49is that this image has to exist so right
11:38:52now if we substitute the product.
11:38:55ratings. Stars into this we will get
11:38:58this image and if we go into our files
11:39:03by clicking here and open the images
11:39:06folder and then open the ratings
11:39:10folder we can see that there's no image
11:39:12called rating
11:39:14-4.5 instead there's an image called
11:39:17rating
11:39:18-45 so if the rating is 4.5 we should
11:39:22convert it into 45 so that this image
11:39:26actually
11:39:27exists similarly if the rating is four
11:39:31we should convert it into 40 so that
11:39:34this image actually exists so in here we
11:39:38should actually multiply this by 10 so
11:39:43that this points to an actual image that
11:39:47exists
11:39:48here next let's move
11:39:53on and we'll work on replacing the count
11:39:57so we'll remove this and dollar curly
11:40:01brackets and we'll replace it with the
11:40:05products. rating Dot and the count
11:40:11property so
11:40:14count and finally we're going to replace
11:40:17the price for each product so in here
11:40:20we're going to remove this and
11:40:23substitute
11:40:25product. price
11:40:28sense and remember that this is a number
11:40:31in cents but when we display it on the
11:40:34page we want to display it as dollars so
11:40:37we're going to divide this by 100
11:40:41because there are 100 cents in each
11:40:45dollar so now in the HTML that we're
11:40:48generating we're actually inserting the
11:40:51details about each product if we
11:40:55save and then go back to the console
11:40:58right click
11:40:59inspect and
11:41:01console and look at the HTML that we
11:41:05generated you'll see that it's different
11:41:07for each of the products so that's how
11:41:10we use JavaScript to generate all the
11:41:13HTML
11:41:15here so now the last step is we're going
11:41:18to combine all this HTML together into
11:41:21one string and put it on the web page
11:41:25let's go back into VSS
11:41:28code and to combine all this HTML
11:41:31together let's create a variable at the
11:41:34top for combining all the strings
11:41:37together so we'll type let let's call it
11:41:41products cap Capital
11:41:44HTML and make it equal to an empty
11:41:47string to start and then each time we go
11:41:51through the loop we're going to add this
11:41:53HTML string up here so instead of
11:41:57creating a new variable we're just going
11:42:00to add products
11:42:03HTML equals itself products
11:42:08HTML plus this string and remember a
11:42:13shortcut for this is to just type plus
11:42:18equals so this is called the accumulator
11:42:21pattern we Loop through an array and
11:42:24each time we're adding to the result so
11:42:27we're accumulating the result and now
11:42:31that we combine all the HTML into this
11:42:34variable we can scroll to the
11:42:37bottom and let's remove this line
11:42:40because this doesn't exist anymore
11:42:43and then after the loop let's
11:42:47console.log the products
11:42:52HTML and
11:42:54save and now if we go into our
11:42:58console we combined all the HTML for all
11:43:02the products
11:43:04together and now the last step is to
11:43:07take this HTML and put it on the page
11:43:10and we can do that using the Dom
11:43:13so let's go back into our
11:43:16code and to use the Dom we're first
11:43:19going to get an HTML element from the
11:43:22page and put it inside our
11:43:24JavaScript so first let's go to our HTML
11:43:29file and remember that a product-
11:43:32container represents one of these
11:43:34products here so we're going to look for
11:43:37this element here a div products- grid
11:43:41so this element contains all of our
11:43:45products so we're going to use the Dom
11:43:47to take this element put it into our
11:43:50JavaScript and replace all the HTML
11:43:54inside so to put this element in our
11:43:56JavaScript we're going to give it a
11:43:59class so let's add a class
11:44:03js-
11:44:05products- grid and
11:44:08save and let's go into our JavaScript so
11:44:12I'm just going to move this this down to
11:44:13the bottom again so we can see it side
11:44:15by
11:44:17side and then inside our JavaScript at
11:44:21the bottom we're going to use the Dom by
11:44:24typing
11:44:26document. query selector brackets and a
11:44:31string and we're going to type dot to
11:44:33select a class and we're going to select
11:44:37js-
11:44:39products-
11:44:41grid so the DOT means we're going to
11:44:44look for a class called JS products grid
11:44:47which is right here and it's going to
11:44:49take this element and put it inside our
11:44:53JavaScript and now we can change the
11:44:56HTML inside the element to do that we'll
11:45:00use the property do inner Capital
11:45:05HTML and we'll change it to the products
11:45:09HTML that we created Above So for
11:45:13products Capital
11:45:16HTML and
11:45:18save so it's not going to look any
11:45:21different but now we're actually
11:45:23generating all the HTML with JavaScript
11:45:26and then using the Dom to put this HTML
11:45:30inside here so now we can actually
11:45:33delete all of this because we're
11:45:35generating this with
11:45:40JavaScript if we save this file
11:45:43our products will still be here because
11:45:46even though we deleted the HTML we're
11:45:48now generating it with
11:45:51JavaScript now one problem that I see
11:45:53here is that the price shows up with one
11:45:56decimal but we actually wanted to show
11:45:59up as
11:46:0110.90 so let's scroll up to this part in
11:46:04the code so we'll scroll up
11:46:07here and look for Price
11:46:10sense and the reason this happens is
11:46:12because price sense is
11:46:141,90 so if we divide that by 100 the
11:46:18result is actually
11:46:2010.9 if we want to force this to show
11:46:23two decimals like
11:46:2510.90 we actually have a special method
11:46:29that we can use with a number so here we
11:46:33can add brackets around this to make
11:46:35sure we calculate this number first and
11:46:38numbers have a special method called dot
11:46:412 Capital fixed and brackets so to fixed
11:46:47we'll convert a number into a string but
11:46:50we can tell it how many decimals we want
11:46:53between the brackets if we type two it
11:46:56will show two decimals so if we save now
11:47:00it shows correctly on the page if you're
11:47:03wondering how to find this method you
11:47:06can find it by searching in Google or
11:47:08using an AI
11:47:11tool okay let's let's take a break here
11:47:14and take a look at git to see all the
11:47:16changes that we made so I'm going to
11:47:19expand this here and we're going to
11:47:21click the git
11:47:23section and it's going to tell us that
11:47:25we changed two files if we click the
11:47:28HTML
11:47:30file git will tell us that we deleted
11:47:33all of the HTML code for the products
11:47:36which is correct if we open the
11:47:39Javascript file it will tell us that we
11:47:42added all of this new JavaScript code
11:47:45including the data and the loop for
11:47:48generating the
11:47:50HTML so git helps us track all of the
11:47:53changes that we made so now let's
11:47:56actually take these changes and save
11:47:58them into git so we can track new
11:48:01changes at the top let's type a message
11:48:05to describe the changes that we made so
11:48:07let's type
11:48:09generate HTML with
11:48:14JavaScript and click
11:48:16commit and yes if this shows
11:48:25up so now let's talk about the benefit
11:48:28of generating the
11:48:30HTML so let's close git for now and I'll
11:48:34move this to the side
11:48:36here so the benefit of generating the
11:48:39HTML is that if we want to add another
11:48:41product we don't have to copy paste all
11:48:44of this HTML again all we need to do is
11:48:48to go up to the data and add the data
11:48:52for a new product so let's do an example
11:48:55and add a fourth product to our list so
11:48:59at the end here let's type a comma and
11:49:02create another
11:49:05object and let's go to the final
11:49:09project and we'll scroll down to this
11:49:12four fourth product here so we're going
11:49:14to take the data about this product and
11:49:17save it in our JavaScript so first let's
11:49:21create a property image colon string and
11:49:26we're going to take this image and put
11:49:28it in here to do that we can rightclick
11:49:31the image
11:49:34inspect and then we're going to copy
11:49:37this Source attribute so we can double
11:49:39click it and we can select this
11:49:43attribute
11:49:44rightclick
11:49:46copy and then inside our JavaScript
11:49:49we're going to right click and
11:49:53paste and at the end we'll type a comma
11:49:57and create the name
11:49:59property and a string and we're going to
11:50:03select this
11:50:04name rightclick copy and then in here
11:50:09right click
11:50:11paste copy comma and a rating property
11:50:15colon and object we have these Stars
11:50:20which is five and the
11:50:23count which is
11:50:272,197 and at the end we're going to add
11:50:31the price in cents colon
11:50:391,899 so now if we save this JavaScript
11:50:42file and then go back to our
11:50:46project and we scroll down you'll notice
11:50:49that it automatically added the fourth
11:50:52product and all we had to do was to add
11:50:55another object to our array and then our
11:50:58Loop will handle generating all the HTML
11:51:01for us so you can see that generating
11:51:04the HTML with JavaScript is a lot easier
11:51:08than copy pasting this HTML every time
11:51:11and that's why we use this
11:51:14technique next we're going to add the
11:51:17rest of the products in the final
11:51:19project now one thing we could do is to
11:51:22manually copy this over one by one but
11:51:25to make this easier inside the starting
11:51:27code I've actually created a file that
11:51:30contains all the data so if we scroll up
11:51:35and close this for now and we're going
11:51:37to go to this data folder and open it
11:51:40and inside this folder I've provided a
11:51:43Javascript file called products. JS and
11:51:46in here it contains an array with the
11:51:49data for all the products in the final
11:51:52project so we don't have to create it
11:51:55ourselves so now let's use this products
11:51:58array in our code so first we need to
11:52:02load this file on our page we can go to
11:52:05our amazon. HTML file and then scroll
11:52:09down to the
11:52:11bottom and then at the bottom in the
11:52:14script element we're going to add
11:52:16another script element above it so we
11:52:19type script and then the source is going
11:52:23to be equal to this Javascript file so
11:52:26we'll type the folder called data and
11:52:30then a slash to go into the folder and
11:52:33load the file
11:52:36products.
11:52:37JS so what this does is that it will run
11:52:40the files one by one
11:52:43first it will run the products. JS file
11:52:46and create the array and then it will
11:52:48run our amazon. JS file and generate the
11:52:53HTML so back here let's
11:52:57save and then go back into amazon.
11:53:02JS so now instead of using our own
11:53:05products array let's just use the
11:53:08products array in this
11:53:10file so we'll go back to to amazon.
11:53:14JS and we're just going to delete this
11:53:16array so over here we can click this
11:53:20Arrow to collapse the code and I'm going
11:53:23to select it and then just delete
11:53:27it and
11:53:29save so now this variable will be coming
11:53:33from this file if we go back to our
11:53:37project and scroll down you can see that
11:53:40we created all the products in our final
11:53:44project so the way this works is that
11:53:47inside our amazon.
11:53:49HTML we're loading two JavaScript files
11:53:53this Javascript file creates all the
11:53:55products and then this Javascript file
11:53:58Loops through the products and creates
11:54:00all the
11:54:02HTML so keep in mind that script
11:54:05elements are loaded one by one so the
11:54:07order matters we have to first create
11:54:10the products array and then we can use
11:54:13it if these two were reversed then the
11:54:15code wouldn't
11:54:18work so this is how a real world website
11:54:22is created we don't write all the HTML
11:54:26manually instead we save the data for
11:54:29the website in a data structure like
11:54:31this and then we use JavaScript to
11:54:35generate the HTML using the data so now
11:54:39let's go into get and look at our most
11:54:41recent
11:54:43changes so here it will tell us that we
11:54:45changed two files in the amazon. HTML
11:54:49file we added a script element and then
11:54:52in the amazon. JS file we deleted the
11:54:56products array that we created on our
11:54:59own so let's type a message to describe
11:55:02our changes use products. JS file and
11:55:09then click commit and yes
11:55:14now one other thing I want to show you
11:55:16about git is if we go back to our files
11:55:19here and then open amazon. JS git has a
11:55:23really useful feature called a history
11:55:26so we can open this timeline section and
11:55:29then click this filter icon and only
11:55:33check git
11:55:35history and now you can see that we
11:55:37actually have a history of all of our
11:55:40changes for this file so if we click the
11:55:43first line in the history it will show
11:55:46us that here we added all of the code
11:55:49and then the second line in the history
11:55:52we deleted this part of the code so this
11:55:55gives us a step-by-step history of all
11:55:58the changes in our code and in git this
11:56:02is called a version history you can also
11:56:05see that the messages that we created
11:56:08when we commit show up here and these
11:56:11messages help us us understand what was
11:56:13changed in each version in the
11:56:16history all right so let's close this
11:56:19for
11:56:21now and the last step in the process is
11:56:24to make it
11:56:26interactive so let's take a look at our
11:56:29current
11:56:30project so we'll go here and open this
11:56:35tab and let's scroll
11:56:38up so right now if we click the add to
11:56:41cart button Buton it doesn't do anything
11:56:45so we're going to add some JavaScript to
11:56:46make this interactive and actually add
11:56:49this product to a cart so first let's
11:56:53find the add to cart button in our code
11:56:56we'll go back to our amazon. JS file
11:57:01close this for
11:57:02now and to find the code we can actually
11:57:05just search the text in the button so
11:57:08inside here let's typ contrl F or
11:57:12command F and we're going to search for
11:57:14the text add to
11:57:18cart and this will take us to the code
11:57:21for this button so now we're going to
11:57:24add an event listener to this button and
11:57:26make it do something when we click it to
11:57:29add an event listener we're first going
11:57:32to add a
11:57:33class
11:57:35js-
11:57:37add-2
11:57:39dcart and then we're going to use the
11:57:41dawn to add an event listener to this
11:57:45button so down
11:57:48here after we've put this HTML on the
11:57:51page we're going to use
11:57:55document. Query
11:57:58selector all brackets and then a string
11:58:03a DOT and we're going to select all the
11:58:06js- add to cart so
11:58:10js- add-2 to- cart so this will give us
11:58:15a list of all the add to cart buttons on
11:58:18the page and then we can Loop through
11:58:21each of the buttons so we can type dot
11:58:25for each
11:58:28brackets and then in here we'll give it
11:58:30a function bracket arrow and curly
11:58:34brackets and a parameter so the
11:58:38parameter is going to be the button
11:58:40element that we got from the page so now
11:58:44for each of these buttons we're going to
11:58:46add an event listener so we can do
11:58:48something when we click the button to do
11:58:51that we'll type
11:58:54button. add event
11:58:58listener brackets and then the event
11:59:01that we want to listen for which is the
11:59:04click
11:59:05event and then a function that we want
11:59:08to run when we click this button so
11:59:11brackets arrow and curly
11:59:14brackets so for now let's just
11:59:16console.log a message to make sure that
11:59:19this is working so we'll
11:59:23console.log added
11:59:26product and
11:59:29save and we can also remove this line
11:59:32for now because we're not using it and
11:59:35save again and then now on our page
11:59:38we're going to click add it to
11:59:40cart and then look inside our console so
11:59:44rightclick
11:59:45inspect and click the
11:59:48console and it displays added product so
11:59:52now whenever we click one of these
11:59:53buttons it will display this message so
11:59:57that means that our code here is working
12:00:01correctly next we need to figure out how
12:00:04to add the product to a cart and we need
12:00:07to figure out what this looks like if we
12:00:10think about a cart a cart is basically
12:00:13just a list and inside this list we have
12:00:16the product that we want to buy and the
12:00:19quantity or the number of this product
12:00:21that we want to buy so we can actually
12:00:24represent this in JavaScript as an array
12:00:28inside the array we can have some
12:00:30objects and each object is going to
12:00:32contain the product and a
12:00:35quantity so we can use something like
12:00:37this to represent our cart so let's go
12:00:41ahead and create create this cart array
12:00:44now to keep things cleaner let's
12:00:46actually separate the cart into its own
12:00:49file so we'll click up here to show our
12:00:52files and then we'll go into the data
12:00:55folder and click this folder and click
12:00:58this icon to create a new
12:01:01file and we'll name this file cart. JS
12:01:06and press
12:01:08enter so this file will contain all the
12:01:11code related to the cart and the reason
12:01:14we separate it is to keep our code
12:01:16organized each file will focus on one
12:01:19particular thing so inside
12:01:22C.J let's create our cart so we can just
12:01:27create a variable const cart and make it
12:01:31equal to an array so we'll start off
12:01:35with an MD cart and let's save this
12:01:39file and now we need to load this file
12:01:42into our
12:01:43HTML so we can open amazon.
12:01:47HTML and again we can just add another
12:01:50script element so let's add it at the
12:01:53top to make sure we load the cart before
12:01:56running the rest of our code so we'll
12:01:59type less than
12:02:01script and the attribute
12:02:04source and we'll load the data folder
12:02:07slash to go inside cart. Js
12:02:12and
12:02:13save so now it will run this file at the
12:02:17start and it will create an array
12:02:20representing our cart so now that we
12:02:23have a cart we need to figure out what
12:02:25happens when we click a button how do we
12:02:28add a product to this cart so let's go
12:02:32back into amazon. JS and we'll figure
12:02:36this out together so down here this is
12:02:40the function that is run when we click
12:02:42the button so in here we have to figure
12:02:45out how to add this product to the
12:02:48cart one way to do this is to just add
12:02:51an object to the cart like this we have
12:02:54the product's name and the quantity that
12:02:57we want however when we click this
12:03:00button how do we know which product
12:03:03we're supposed to add to the cart to
12:03:05solve this problem we're going to learn
12:03:08a feature of HTML called a data
12:03:11attribute
12:03:12a data attribute is just another HTML
12:03:16attribute except the purpose of a data
12:03:19attribute is that it allows us to attach
12:03:22any information to an HTML element so
12:03:26let's do an example and create a data
12:03:30attribute we're going to scroll up to
12:03:33the add to card button here and then at
12:03:36the end of the opening tag after the
12:03:39class we'll type enter
12:03:42and then we're going to type data Dash
12:03:46and then we can type any name that we
12:03:48want like
12:03:51product-name and we'll make it equal to
12:03:55double
12:03:56quotes and then inside the double quotes
12:03:59we're going to put the product's name
12:04:01like a basketball or a t-shirt so to do
12:04:05that we're going to insert using dollar
12:04:08and curly
12:04:09brackets product
12:04:12AME and
12:04:15save so now let's inspect the HTML on
12:04:19the page we're going to rightclick on
12:04:22this add to card button and
12:04:25inspect and then in the elements tab it
12:04:28will show us the HTML for the button and
12:04:31now you can see that each of these
12:04:33buttons now has a data attribute called
12:04:36data- product-name and it's equal to the
12:04:40product name
12:04:43so before we continue let's learn the
12:04:45syntax rules for the data
12:04:48attribute a data attribute is just an
12:04:51HTML attribute that means it follows the
12:04:55same syntax rules we have an attribute
12:04:58name on the left and an attribute value
12:05:01on the right the one difference is that
12:05:04data attributes have to start with data
12:05:08Dash and then we can give it any name
12:05:10that we want like product- name but we
12:05:14have to make sure to separate the words
12:05:16with a dash this is also known as Kabob
12:05:21case so the purpose of a data attribute
12:05:24is that we can attach any information to
12:05:27an element so here we attached the
12:05:30product name to this button but we can
12:05:32also attach the product's image or the
12:05:35price and so on so now that we attached
12:05:39the product's name to this button when
12:05:41we click this button we can actually get
12:05:44the name and this will tell us which
12:05:47product we should add to the
12:05:49cart so let's see what this looks like
12:05:51in our code so we'll go to our
12:05:55code and then when we click the button
12:05:58we're first going to get the product
12:06:01name from the button to do that we're
12:06:04going to type button and then the
12:06:07property dot data set
12:06:12so the data set property basically gives
12:06:15us all the data attributes that are
12:06:18attached to this button so now we're
12:06:20able to get the product name so let's
12:06:23console.log this to see what it looks
12:06:26like
12:06:28console.log Open Bracket close bracket
12:06:32and
12:06:33save and then in here let's click the
12:06:37basketballs add to cart
12:06:39button and we'll go into our console
12:06:42right click
12:06:45inspect and
12:06:47console and I'm just going to move this
12:06:50to the left so we can see it side by
12:06:52side with our
12:06:54code so this is what the data set
12:06:56property looks like it gives us all the
12:06:59data attributes that are attached to the
12:07:02element so in our case we have the
12:07:04product name now this works just like an
12:07:08object so to access the product name we
12:07:11just have to type dot product capital N
12:07:17name so notice that the name gets
12:07:20converted from Kebab case to camo case
12:07:24so now if we
12:07:26save and let's go back to our
12:07:29website and click the add to cardart
12:07:32button it will get that data attribute
12:07:35from the button and display it in the
12:07:38console if we click the socks at to cart
12:07:42button this will tell us which product
12:07:45we should add to the cart so now that we
12:07:48have the product name let's actually put
12:07:50this into our cart so let's go into our
12:07:55code and here let's save the product
12:07:58name in a variable called const
12:08:03Product name
12:08:06equals and then here we're going to add
12:08:09this to the cart
12:08:12so we already created a cart variable
12:08:14here so we're just going to type the
12:08:17variable cart and we're going to dot
12:08:20push into the array and let's push an
12:08:24object because we said we wanted a
12:08:26product and the
12:08:28quantity so we'll add an object
12:08:31containing the product name which is
12:08:35this variable product
12:08:39name and a quantity
12:08:42of
12:08:43one and that's pretty much it we first
12:08:47attached the product name to the button
12:08:49using a data attribute and then when we
12:08:52click the button we got the product name
12:08:56out and then we add the product to the
12:08:59cart so at the bottom let's
12:09:03console.log thee cart to see what it
12:09:06looks like if we
12:09:08save and then go here and open the
12:09:11console right click inspect
12:09:17console and let's add a basketball to
12:09:20our cart so we'll click here and then in
12:09:23our cart we now have a basketball with a
12:09:27quantity of one so now let's add another
12:09:30product to our cart we'll go to the
12:09:33t-shirt and click add to
12:09:36cart and now we have two products in our
12:09:39cart one b basketball and one
12:09:44t-shirt so now we're successfully adding
12:09:46products to a cart next let's try adding
12:09:50one t-shirt again if we click add to
12:09:54cart and unfortunately this doesn't look
12:09:58quite right the T-shirt product is
12:10:01repeated twice and each of them has a
12:10:04quantity of one what we actually want to
12:10:07do is we want one t-shirt product with a
12:10:10quantity of two
12:10:12because this is how we're going to
12:10:13display it on the cart page so let's
12:10:16figure out how to achieve this and we'll
12:10:19do this step by step first we'll check
12:10:23if the product is already in the cart if
12:10:26it is in the cart we'll just increase
12:10:28the quantity by one if it's not in the
12:10:31cart We'll add it to the cart so let's
12:10:35convert these steps into code so the
12:10:38first step is to check if a product is
12:10:41already in the cart so how do we do that
12:10:45let's go back to our
12:10:47code and one way to check this is we can
12:10:50Loop through our cart and look for a
12:10:53particular product name so up here let's
12:10:58create some new lines and let's check if
12:11:01this product name is already in the cart
12:11:05array so we'll type cart and we'll Loop
12:11:09through the cart using dot for each
12:11:14brackets and then inside we'll give it a
12:11:17function brackets arrow and curly
12:11:20brackets and we'll give this a parameter
12:11:24and let's just call it an item so an
12:11:27item will contain a product name and a
12:11:31quantity so we want to see if this
12:11:33product name is already in the
12:11:36card so we're going to check if the
12:11:40product
12:11:42name over here is equal to this item's
12:11:46product name so we'll type equals the
12:11:51item.
12:11:53product name and curly
12:11:56brackets so if the product names match
12:12:00that means this product is already in
12:12:02the
12:12:03cart so let's save this matching item in
12:12:06a variable so we can use it later so
12:12:10we're going to create the variable
12:12:11outside the for each Loop and outside of
12:12:15its scope so we'll type let matching
12:12:20capital I item and we'll make it
12:12:23undefined to start and if we find a
12:12:26matching item we're going to save it in
12:12:30this variable so
12:12:33matching item equals
12:12:37item so this is how we figure out if a
12:12:40product is already already in the cart
12:12:43now the next step is If the product is
12:12:46in the cart we'll just increase its
12:12:48quantity by one so we'll type
12:12:53if
12:12:54matching item and curly brackets so we
12:12:59can just type matching item here because
12:13:02if we did find a matching item it will
12:13:04be an object which is a truthy value so
12:13:09in here we're going to increase the
12:13:11matching items quantity by one using
12:13:15matching
12:13:17item. quantity and we'll plus equal
12:13:221 and finally If the product is not in
12:13:26the cart We'll add it to the cart which
12:13:29is basically what we do here so at the
12:13:32end we can just type else if we did not
12:13:36find a matching item curly brackets and
12:13:41move this code so we'll select it right
12:13:45click
12:13:46cut and then in here rightclick and
12:13:52paste and remove the new lines and
12:13:57save so now let's go into our project
12:14:00we'll
12:14:01rightclick inspect the
12:14:04console and let's click the add to card
12:14:07button for the basketball so we'll click
12:14:10this
12:14:11and then in our cart we have a
12:14:14basketball with a quantity of
12:14:17one let's add a
12:14:19T-shirt and now we have one T-shirt with
12:14:23a quantity of one and if we click add to
12:14:26cart on the T-shirt
12:14:28again now we have a t-shirt with a
12:14:31quantity of two so that's how we solve
12:14:34the problem of combining the quantities
12:14:37together now there's one last problem
12:14:40that we have to solve here
12:14:41which is it's not good to use the
12:14:43product name to identify the product in
12:14:46the cart because in an e-commerce
12:14:49website we might actually have two
12:14:51products that have the same name but
12:14:54from different brands so to fix this we
12:14:57should give each product an ID and this
12:15:01ID should be unique so no two products
12:15:04will have the same ID so let's use an ID
12:15:08to identify these products instead of
12:15:11using the name we'll go back to our
12:15:14code and if we open our files here and
12:15:19go to data products.
12:15:21JS you'll notice that I've actually
12:15:24added an ID for each of these products
12:15:27and this ID is unique so I added it here
12:15:31to save us a bit of work so we don't
12:15:33have to create the IDS
12:15:35ourselves so now let's just use this ID
12:15:38in our code so we'll go back to amazon.
12:15:44JS and then in here instead of using the
12:15:47product name we're going to use the
12:15:50products ID to identify it in the cart
12:15:54but first we need to attach the ID to
12:15:57the button so we'll scroll up and
12:16:00instead of a data- product name
12:16:03attribute we're going to use a data
12:16:07product-id attribute and we're going to
12:16:10save the
12:16:11products ID
12:16:14instead and now down here we're going to
12:16:17grab the ID from the button to do that
12:16:21we'll change this to product ID so
12:16:26remember this gets converted from Kebab
12:16:29case to cam case and we'll rename this
12:16:32variable product
12:16:36ID and then here we'll compare product
12:16:41ID is equal to the items product
12:16:46ID and lastly when we add to the cart
12:16:50we're just going to add the product ID
12:16:53to the
12:16:57cart and
12:17:00save so now if we go to our website and
12:17:03click add to cart and check our
12:17:09console and expand this you can see that
12:17:13we're saving the product ID so that two
12:17:16products with the same name will be able
12:17:18to be added to the
12:17:21cart okay so that's how we make the add
12:17:24to cart button
12:17:26interactive and now we finished all
12:17:28three steps first we save the data for
12:17:32the website in our JavaScript and then
12:17:35we use this data to generate the
12:17:38HTML and finally we made it
12:17:41interactive and this is the main idea of
12:17:45JavaScript this is generally how we use
12:17:48JavaScript on a real
12:17:51website now let's go back to git so
12:17:53we'll open our code editor and open the
12:17:57git section and review the changes that
12:18:00we made so we'll expand it and then in
12:18:03the HTML file we just added the cart. JS
12:18:08file and then in here we just created
12:18:11the cart array and in our amazon. JS
12:18:15file we basically added a data attribute
12:18:19to the button and then down here we made
12:18:22the button interactive by adding an
12:18:25event
12:18:27listener so now let's save these changes
12:18:30into git we'll type a message to
12:18:33describe our
12:18:34changes make add to cart button
12:18:39Interactive
12:18:41and click
12:18:46commit all right so let's close this for
12:18:49now and the last feature we're going to
12:18:52create in this lesson is we're going to
12:18:55make this cart quantity in the top right
12:18:58interactive so we'll do this step by
12:19:01step first we need to calculate the
12:19:04quantity or the total number of products
12:19:07in our cart and then we're going to put
12:19:10that quantity
12:19:11on the page here so how do we calculate
12:19:14the total quantity of the cart so
12:19:17remember that the cart is an array of
12:19:20objects and each object has a quantity
12:19:23so to calculate the total quantity we
12:19:25can Loop through this array and add the
12:19:28quantities together let's go into our
12:19:32code and we'll open amazon. JS and let's
12:19:36scroll to the
12:19:38bottom so here after we update our cart
12:19:42we're going to calculate the total
12:19:44quantity so let's create some new lines
12:19:47and as we saw earlier we can Loop
12:19:50through the cart array so we'll type
12:19:53cart dot for each brackets and a
12:19:59function arrow and curly brackets and
12:20:03we'll give this a parameter
12:20:05item so this is going to Loop through
12:20:08each object in the cart
12:20:11next we need a variable to store the
12:20:13total quantity so let's create a
12:20:16variable up here we'll type let and name
12:20:20it cart
12:20:22quantity and make it equal to zero to
12:20:26start and then as we Loop through this
12:20:28array we're going to add the items
12:20:31quantity to this variable up here so
12:20:35here we can type cart quantity plus
12:20:40equals the
12:20:42items.
12:20:44quantity so this will add up all the
12:20:46quantities and save it in this
12:20:49variable so at the bottom let's
12:20:53console.log the cart quantity to make
12:20:56sure that this is working so we'll
12:20:59save and go back to our page and open
12:21:03the console right click inspect and
12:21:08console when we click add to cart on the
12:21:11basketball the quantity will be one if
12:21:15we click add to cart on the T-shirt the
12:21:18quantity will be two if we click again
12:21:22the quantity will be three so looking at
12:21:25the cart it basically added one
12:21:28basketball and two T-shirts to get a
12:21:31total of three so that's how we can
12:21:34calculate the total quantity of the cart
12:21:37so now that we have the total quantity
12:21:40we're going going to put it on the page
12:21:42here and we can do this using the Dom so
12:21:46let's go back to our
12:21:49code and to use the Dom we first need an
12:21:52HTML element where we're going to put
12:21:55this quantity so let's find the HTML
12:21:58element for this number here we can go
12:22:01back to our page we're going to
12:22:03rightclick this number and then
12:22:08inspect and then we can click this icon
12:22:11in the top
12:22:12left hover over this number and click
12:22:16it so this will tell us that the code
12:22:19for the number is this code right here a
12:22:22div with a class cart quantity so now
12:22:25we're going to search for this class
12:22:27cart quantity in our code so let's go
12:22:30back to our
12:22:32code and let's go to the amazon. HTML
12:22:36file because the header is still in this
12:22:39file and we'll type contrl f or command
12:22:43F to search for code and we'll search
12:22:46for cart Das
12:22:49quantity and it will tell us that it's
12:22:51this line right here so next to use the
12:22:54Dom we need to get this element into our
12:22:58JavaScript to do that we're going to add
12:23:01a class to this element so let's add the
12:23:04class
12:23:05js- cart D quantity and say
12:23:11save now let's go back to our JavaScript
12:23:14file and I'm just going to move it down
12:23:16here so we can see it side by
12:23:22side and we'll scroll down after we
12:23:26calculate the quantity let's get this
12:23:28element into our JavaScript using the
12:23:31Dom so at the bottom we'll type
12:23:35document. query
12:23:38selector brackets and a string we start
12:23:41with a DOT and the class
12:23:44js- cart D
12:23:48quantity and now that we have this
12:23:50element we can change the HTML inside
12:23:54using the property do inner Capital
12:23:59HTML and we'll make it equal to the cart
12:24:04quantity that we calculated above so
12:24:08let's
12:24:09save and go back to our website and
12:24:12let's click the add to card button for
12:24:14the
12:24:15basketball now it will update the
12:24:17quantity to be one let's click the add
12:24:20to cart for the T-shirt it will update
12:24:23the quantity again and it will be two if
12:24:26we click it again it will increase to
12:24:29three so now the cart quantity up here
12:24:32is
12:24:34interactive the last thing we need to do
12:24:37is we'll go back to our
12:24:38HTML and in instead of starting at three
12:24:42the card quantity should start at zero
12:24:45so let's
12:24:47save and now the cart quantity starts at
12:24:50zero if we click add to cart it will
12:24:53increase to one so that's how we create
12:24:56this cart quantity feature in the final
12:24:59project so now we're finished all the
12:25:02features that we're going to do in this
12:25:04lesson let's go back to our JavaScript
12:25:07and I'm just going to move it back up
12:25:09here
12:25:10and let's clean up this code by removing
12:25:13these console.
12:25:15logs and
12:25:17save and finally let's check git one
12:25:20more time to see the changes that we
12:25:22made so we can expand this and go to the
12:25:26git
12:25:28section if we click amazon. HTML it will
12:25:32tell us we added this class and if we
12:25:35click amazon. JS it will show us the
12:25:38code that we added for C calculating the
12:25:40card quantity and putting it on the
12:25:44page so finally let's type a message to
12:25:47describe our
12:25:49changes make the cart quantity
12:25:56interactive and
12:26:00commit so now we can close
12:26:03this and that's the end of this lesson
12:26:06in this lesson we started the final
12:26:09Amazon Project
12:26:10we set up and learned how to use git to
12:26:13track changes we learned the main idea
12:26:17of JavaScript which is save the data
12:26:20generate the HTML and make it
12:26:23interactive we created a list of
12:26:26products on the homepage we made the add
12:26:29to cart button interactive and we made
12:26:32the cart quantity
12:26:37interactive thanks for watching this
12:26:39course so so far if you want to support
12:26:42this channel you can check out the
12:26:43premium version of my courses just like
12:26:46this one where you can get a certificate
12:26:48of completion and a Better Learning
12:26:50platform if you're interested in extra
12:26:53videos from me more in-depth videos and
12:26:56behind the scenes content you can check
12:26:58out these links here you can also
12:27:01support the channel by liking the video
12:27:04subscribing and sharing this video with
12:27:06others thanks again and let's continue
12:27:09with the course
12:27:11here are some exercises to help you
12:27:13practice what we learned in this lesson
12:28:04in this lesson we're going to learn a
12:28:05feature of JavaScript called modules
12:28:08which is a better way to organize our
12:28:11code so first let's take a look at a
12:28:14problem that we have in our current code
12:28:17we're going to go to our files here and
12:28:19we're going to open amazon.
12:28:22HTML and then we're going to scroll to
12:28:24the bottom of this file to our script
12:28:28tags so right now we're using three
12:28:31script tags to run all of our
12:28:33JavaScript so this runs all the code in
12:28:37cart. JS and then it runs all the code
12:28:40in products. JS and finally it runs all
12:28:43the code in amazon. JS so this is
12:28:47basically the same thing as combining
12:28:49all the files together into one big file
12:28:52and then running all of our code however
12:28:56there's a big problem with using script
12:28:58tags like this and that problem is it
12:29:01can cause naming conflicts so in our
12:29:04situation here we created a variable
12:29:07named cart in cart. Js
12:29:10this means we can't use the variable
12:29:12name cart in any of our other files so
12:29:16for example if we went to amazon.
12:29:19JS and then we scroll to the top
12:29:22here and let's say that we try to create
12:29:25another variable named cart so at the
12:29:28top we type const cart equals square
12:29:32brackets and
12:29:34save and now if we go back to our
12:29:37project you'll notice that the website
12:29:40stops working and if we rightclick
12:29:44inspect and open the
12:29:46console it will tell us that we got an
12:29:49error and it says that cart has already
12:29:51been declared so this is happening
12:29:54because we created a variable called
12:29:56cart in cart. JS and then later in
12:29:59amazon. JS we created another variable
12:30:02named cart now we can't have two
12:30:05variables with the same name in
12:30:06JavaScript and this causes an error and
12:30:09it causes our website to break so this
12:30:12is called a naming conflict when we have
12:30:14two variables with the same
12:30:17name so the big problem with script tags
12:30:20is if we go back to our
12:30:25code you can see here that it's really
12:30:27hard to tell which variables have been
12:30:30created in other files and it's really
12:30:32easy to accidentally create a naming
12:30:35conflict like this so that's the problem
12:30:38with using script tags like this and
12:30:40running our code one file at a time it's
12:30:44very easy to get naming
12:30:46conflicts so now we're going to learn
12:30:48how to solve this problem using a
12:30:50feature of JavaScript called
12:30:53modules so a module basically contains a
12:30:56variable inside a file so now this
12:30:59variable is not going to cause conflicts
12:31:02with anything outside the file for
12:31:05example in our project we created a
12:31:08variable called cart and we want to
12:31:10contain this variable inside the cart.
12:31:13JS file so that it doesn't conflict with
12:31:16the cart variable inside the amazon. JS
12:31:20file so we can do this using a module so
12:31:23now let's learn how to create our first
12:31:27module we're going to go back to amazon.
12:31:30HTML and then here to create a module
12:31:34we're simply going to delete this line
12:31:36of code that uses a script tag to load
12:31:39cart. JS so we'll delete it and
12:31:43save and you'll see that the website is
12:31:46working again so how does this work when
12:31:50we use a script tag it will run all the
12:31:52code inside cart. JS so this code will
12:31:56create a card variable and this will
12:31:58cause a naming Conflict by removing the
12:32:02script tag we're no longer running the
12:32:04code inside cart. JS so we're no longer
12:32:07creating a cart variable and it will no
12:32:10longer cause a naming
12:32:13conflict so to create a module we simply
12:32:17do two steps number one we create a file
12:32:21and write our code inside the file and
12:32:24number two don't load the file with a
12:32:27script tag by doing this any variables
12:32:31we create inside the file will be
12:32:33contained inside the file and it won't
12:32:36cause naming conflicts so that's
12:32:39basically how we create a
12:32:42module okay so now we run into another
12:32:45problem in our code if we open amazon.
12:32:49JS we created this card variable as an
12:32:52example but what we actually want to do
12:32:55is to keep the cart variable inside
12:32:57cart. JS because we want to keep all the
12:33:00code that's related to the cart inside
12:33:03this file so in
12:33:10and if we
12:33:11save and then go back to our project and
12:33:15click add to cart you'll notice that it
12:33:18no longer works so let's look at the
12:33:20console again to see what error we get
12:33:23we'll right click
12:33:26inspect and open the
12:33:28console and it's going to tell us that
12:33:31cart is not defined so the problem that
12:33:34we have here is that in this file we're
12:33:37using the variable cart but now because
12:33:40we're not loading cart. JS using a
12:33:43script tag the cart variable doesn't
12:33:46exist anymore it's contained inside
12:33:48cart. JS and we can't access it from the
12:33:54outside so now we're going to learn how
12:33:56to get a variable out of a file or a
12:34:00module to do that we're going to do
12:34:03three steps the first step is to add a
12:34:06type equals module attribute the second
12:34:09step is to export and the third step is
12:34:12to import let's learn these steps one by
12:34:16one so the first step is to add a type
12:34:19equals module attribute we're going to
12:34:22open amazon.
12:34:24HTML and we're going to scroll to the
12:34:27bottom and here in the last script tag
12:34:31where we load amazon. JS we're going to
12:34:33add an HTML attribute here so we're
12:34:37going to type type equal equal module
12:34:42and
12:34:43save so the type equals module attribute
12:34:47basically lets this file get variables
12:34:49out of other files it basically enables
12:34:53this feature now the second step is to
12:34:56export so we're going to go to cart.
12:35:00JS and now we're going to choose which
12:35:02variables can be accessed outside of
12:35:05this file so for example we want to
12:35:08access the VAR variable cart outside of
12:35:11this file to do that in front of the
12:35:14variable we're just going to type the
12:35:16word export and space and save so now
12:35:22this variable can be used outside of
12:35:24cart.
12:35:26JS the last step is to
12:35:29import so we're going to go to the place
12:35:32where we're going to use this variable
12:35:34which is inside amazon.
12:35:37JS and now at the top we're going to
12:35:40tell the computer which variable we want
12:35:42to get from another file so we'll type
12:35:47import open curly bracket close curly
12:35:50bracket and between these brackets we're
12:35:53going to give the name of the variable
12:35:55we want to get which is the cart
12:35:58variable and then we'll tell the
12:36:00computer which file we want to get this
12:36:03variable from so we'll type
12:36:07from single quotes and and
12:36:10semicolon and now inside these quotes
12:36:13we're going to locate the file using a
12:36:16file path so let's open up our files
12:36:19here so it's easy to see what files we
12:36:22have so right now we're in amazon. JS
12:36:25and we want to locate cart. JS so the
12:36:29first step is we actually need to get
12:36:31out of the scripts folder we're in the
12:36:33scripts folder and we need to get out of
12:36:35it and into the data folder so to get
12:36:38out of the current Cent folder that this
12:36:40file is in we're going to type dot dot
12:36:45so dot dot basically represents the
12:36:47folder outside of this current folder
12:36:50which is this folder right here
12:36:52JavaScript Amazon projects and then
12:36:54we're going to type a forward slash to
12:36:57go outside of the scripts folder so now
12:37:00that we're outside of this folder we're
12:37:02going to go into the data folder so here
12:37:06we're going to type data and then a
12:37:08slash to go into this folder and we're
12:37:11going to locate the file cart. JS
12:37:15C.J and
12:37:18save so what this code does is that it's
12:37:21going to take the variable cart out of
12:37:24the file cart. JS and we use this file
12:37:28path here to locate that file so as a
12:37:31reminder dot dot means to go outside of
12:37:34the current folder outside of scripts
12:37:36into here and then we go into the data
12:37:38folder and then inside the data folder
12:37:41we find cart.
12:37:45JS so those are the three steps to get a
12:37:48variable out of a module first we add a
12:37:52type equals module attribute to enable
12:37:55this feature and then we export the
12:37:58variables that we want to get out and
12:38:01finally we import the variables when we
12:38:04need
12:38:06them now there's two more things that we
12:38:08need to know about modules number one we
12:38:12have to put all of our Imports at the
12:38:14top of the
12:38:15file and number two in order for modules
12:38:19to work we need to use live server so
12:38:22for example if I open the folder that
12:38:25contains amazon.
12:38:27HTML so I open JavaScript Amazon Project
12:38:31and then I select this HTML file and
12:38:34rightclick open with Google
12:38:38Chrome the website won't work and that's
12:38:41because modules don't work if we open
12:38:44the HTML file directly like this so
12:38:47let's close this for
12:38:49now and to get modules to work we need
12:38:52to open our code editor and then
12:38:55rightclick the HTML
12:38:57file and open with live
12:39:01server so in this course in order for
12:39:04modules to work we need to use live
12:39:07server to open our HTML files
12:39:11so now that we learned how to use a
12:39:13module let's talk about the benefits of
12:39:17modules the first big benefit is that it
12:39:20helps us avoid naming conflicts the only
12:39:23time that this causes naming conflicts
12:39:26is if we import this variable and we
12:39:28have another variable named cart inside
12:39:32this file like
12:39:34this so this will again create a naming
12:39:37conflict if I save this the website will
12:39:40stop working but at least now we have
12:39:43control over when naming conflicts
12:39:45happen they will only happen if we
12:39:47import the same variable name now
12:39:50modules have another feature that allows
12:39:52us to avoid this problem as well so
12:39:55after the variable name that we import
12:39:58we can type as and then a different name
12:40:02such as my cart and save so this will
12:40:07basically take the input and rename it
12:40:10to my cart so that this will no longer
12:40:13conflict with this variable name so as
12:40:16you can see modules have a lot of
12:40:18features that help us avoid naming
12:40:21conflicts when we have lots of files in
12:40:23our project so now I'm just going to
12:40:26delete this and put the code back
12:40:29because that was just an example and
12:40:32save so the second big benefit of
12:40:35modules is that we don't have to worry
12:40:37about the order of our files
12:40:40before when we loaded everything with
12:40:42script tags we had to make sure that we
12:40:45load C.J first because we need the cart
12:40:48variable to be created and then we can
12:40:51use it in amazon.
12:40:53JS so the order of our script tags
12:40:56really matter and it becomes really hard
12:40:58to manage when we have lots of files in
12:41:01a big
12:41:02project but now with modules we can just
12:41:05import the variables that we need and we
12:41:08don't have to worry about the order that
12:41:10we're loading our
12:41:12files so as you can see modules are a
12:41:15better way to organize our code
12:41:18especially in bigger projects so now
12:41:20let's use git and save our changes so
12:41:24we'll go to the git section here and it
12:41:26will tell us we changed three files in
12:41:29amazon. JS we removed the script tag and
12:41:32added type equals module in cart. JS we
12:41:36exported the cart variable and in
12:41:39amazon. JS we imported the cart variable
12:41:43from cart. JS so now let's save these
12:41:47into get so here we'll type a message
12:41:50use
12:41:52modules and import cart from cart. JS
12:41:58and
12:42:03commit now that we learned modules let's
12:42:06use them in more places in our project
12:42:09so let's close this for now and we're
12:42:12going to open amazon.
12:42:15HTML and next we're going to turn
12:42:17products. JS into a module as well so
12:42:21we'll start off by deleting the script
12:42:23tag because the script tag will just
12:42:26load all the code onto the page so we'll
12:42:29delete this and
12:42:31save so notice that our website stops
12:42:35working and now inside amazon. JS we
12:42:38need to to access products from
12:42:40products. JS so again we're going to do
12:42:43three steps the first step is to add a
12:42:47type equals module attribute which we
12:42:49already have so we don't need to do this
12:42:51again the second step is to export the
12:42:55variables that we want to get out so in
12:42:58this case we want to get the products
12:43:00variable out of the products. JS file so
12:43:04let's open our files and open products.
12:43:07Js
12:43:09and we'll scroll to the
12:43:11top so to get the products variable out
12:43:14of this file in front of the variable
12:43:17we're going to type export and space and
12:43:22save and the last step is to import the
12:43:26variable that we need so inside amazon.
12:43:29JS we need the products variable so at
12:43:33the top we're going to type
12:43:37import curly brackets
12:43:39and then inside here we're going to type
12:43:41the variable name that we want to get
12:43:44which is
12:43:46products and we're going to get this
12:43:48variable from single quotes semicolon
12:43:53and then inside here we're going to
12:43:55locate the products. JS file so we're
12:43:58going to type dot dot and slash to go
12:44:01outside of the current folder so outside
12:44:04of the scripts folder and then we're
12:44:06going to go into the data folder so type
12:44:09data and a slash to go into the folder
12:44:13and we're going to locate the file
12:44:16products. JS and
12:44:19save so now that we're importing this
12:44:22variable from this file the rest of our
12:44:25code will work and our website will
12:44:27start working
12:44:28again so that's how we turn products. JS
12:44:32into a module as well so let's go into
12:44:35get and take a look at our
12:44:37changes so in amazon. HTML we deleted
12:44:41the script tag and then in products. JS
12:44:45we exported the variables that we wanted
12:44:48to get out and then in amazon. JS we
12:44:52imported the variables that we need from
12:44:54the
12:44:56file so let's type a message and save
12:44:59these changes into git import products
12:45:05from products. JS and
12:45:13commit let's close
12:45:15this and let's open amazon.
12:45:19HTML now the last thing is you might be
12:45:22wondering should we also delete this
12:45:25script tag that loads amazon. JS and the
12:45:28answer is no because we still need one
12:45:31Javascript file to load our code so this
12:45:35file will import from all the other
12:45:37files that we created
12:45:39and this is how we organize our code in
12:45:41a real
12:45:43website so this file is called the entry
12:45:48point so now that we've seen some
12:45:50examples of modules we're going to use
12:45:52modules to organize our code better so
12:45:56let's go into amazon.
12:45:59JS and then we're going to scroll down
12:46:01to the code for the add to card button
12:46:04so inside this file we're going to
12:46:06scroll down here all the way down to
12:46:09this code here so this is a code that we
12:46:12run when we click add it to cart and
12:46:15you'll notice that we're running a lot
12:46:17of code here when we click that button
12:46:20we're running code that adds the product
12:46:22to the cart and we're also running code
12:46:25that calculates the quantity and updates
12:46:27the page so a best practice in
12:46:29programming is that when we have a lot
12:46:31of code here that does different things
12:46:33it's better to split these up into
12:46:35smaller functions to make our code
12:46:38easier to read so here this part of the
12:46:42code takes the product ID and then adds
12:46:45it to the cart so it makes sense to
12:46:48split this into its own function so
12:46:51let's scroll up and at the top here
12:46:54let's create a function for this code so
12:46:57we'll type function and let's call it
12:47:01add to cart brackets and curly brackets
12:47:06and then we're just going to move all
12:47:08this code into the function so we'll
12:47:10select this
12:47:12code and then
12:47:14rightclick
12:47:16cut and then inside this
12:47:19function rightclick and
12:47:23paste and then down here we're going to
12:47:25run this function inside here so when we
12:47:30click add to cart we're going to run add
12:47:33to cart function that we just created
12:47:37and Save
12:47:40so now let's give this a try so we'll
12:47:42click add to
12:47:44cart and unfortunately it doesn't work
12:47:47anymore so let's take a look at the
12:47:49console to see if there's any errors
12:47:51we'll rightclick
12:47:54inspect and then open the
12:47:56console and it's telling us that product
12:47:59ID is not defined so if we look at our
12:48:02code
12:48:03here and scroll up in the function
12:48:07you'll notice that we're using product
12:48:09but it's no longer anywhere in the
12:48:11function and that's because product ID
12:48:14is outside the
12:48:16function so we actually want to keep
12:48:18this code outside because it's using
12:48:20this button so instead we're going to
12:48:23take product ID and put it into a
12:48:25function using a parameter so at the top
12:48:29of the function we're going to add a
12:48:31parameter product
12:48:34ID and then when we call this function
12:48:36we're going to pass it the product
12:48:39ID so we're going to take this value put
12:48:42it into the function and save it in here
12:48:45and then the function can run as normal
12:48:48so now if we save and then go to our
12:48:51project and click add to cart you can
12:48:53see that it's working
12:48:56again next let's go back and scroll
12:49:01down and we're going to put the rest of
12:49:03our code into its own function as well
12:49:06to make it more organized so at the top
12:49:08here let's create some new lines and
12:49:11create a
12:49:13function and this code updates the card
12:49:16quantity on the page
12:49:19here so let's name this function
12:49:23update cart quantity brackets and curly
12:49:28brackets and we'll move this code into
12:49:30the function so let's select this code
12:49:34and then rightclick cut and then in here
12:49:38rightclick and
12:49:40paste and then down here we'll call the
12:49:44function using update cart quantity and
12:49:50brackets and
12:49:53save so as you can see by splitting up
12:49:56our code into smaller functions it makes
12:49:58our code a lot easier to read when we
12:50:01click add to cart it's really easy to
12:50:04understand what's going on first we're
12:50:06going to add a product to our cart and
12:50:09then we're going to update the card
12:50:11quantity so now let's save and then go
12:50:14back to our project and try it out and
12:50:17you can see that everything is working
12:50:20again so we're going to do two more
12:50:22things to better organize our code so
12:50:25let's go back to our code and the first
12:50:27thing is we're going to scroll up to the
12:50:30add to cart function and I made a small
12:50:33mistake in the previous lesson I
12:50:35actually want to rename this parameter
12:50:37from item to cart item instead to make
12:50:41it a little more clear so we're just
12:50:44going to rename this to cart item and
12:50:47here as well we name it to cart item and
12:50:53save and we'll scroll down here and
12:50:56we're going to do the same thing for
12:50:57this parameter so we'll rename it to
12:51:00cart item and then here cart item and
12:51:06Save
12:51:10and the last thing we'll do is let's
12:51:12scroll up to the add to cart
12:51:14function so you'll notice that this code
12:51:17manages our cart so it's actually a best
12:51:20practice to move this function into
12:51:22cart. JS because cart. JS contains all
12:51:26the code that's related to the cart a
12:51:29best practice is to group related code
12:51:31together into its own
12:51:34file so here let's take the function add
12:51:38to cart we'll select it and then
12:51:41rightclick
12:51:43cut and then inside cart. JS we're going
12:51:47to rightclick and paste and just move
12:51:52that function into this file because
12:51:54this file contains all the code that's
12:51:56related to the cart so now that this
12:51:59function is inside the file we need to
12:52:02access it from amazon.
12:52:05JS and we can do that using modules
12:52:08using the features export and import so
12:52:12inside cart. JS in front of the function
12:52:16we're going to export it so we can use
12:52:19it in other files so let's save this
12:52:22file and then inside amazon. JS we're
12:52:26going to scroll to the
12:52:28top and you'll notice that we're already
12:52:30importing something from cart. JS so we
12:52:34actually don't need to write import
12:52:35again here we can actually import
12:52:38multiple things from this file by typing
12:52:42comma and space and then something else
12:52:45that we want to import so in our case
12:52:47we're going to import the function add
12:52:49to cart so here we'll type comma add to
12:52:54cart so now it will import both the cart
12:52:58and the add to cart function from this
12:53:01file so Imports can import multiple
12:53:03things from a
12:53:05file Imports have another syntax import
12:53:09Star as this Imports everything from a
12:53:12file and groups it together inside this
12:53:16object and then we can access each
12:53:18import as a property or a
12:53:24method so lastly I'm just going to
12:53:26scroll down to my code
12:53:29here and I'm just going to remove this
12:53:31extra new line and
12:53:34save now you might be wondering if we
12:53:37should move update cart quantity into
12:53:39cart. JS as
12:53:41well so this function actually handles
12:53:44updating the web page rather than
12:53:46managing the cart so we're going to keep
12:53:48this function inside this file for
12:53:52now so now let's go into get and save
12:53:55our changes so we'll go here and inside
12:53:58cart. JS we moved the add to cart
12:54:02function and then we exported it and
12:54:05then inside amazon. JS we imported the
12:54:08add to card
12:54:10function and then down here we took the
12:54:13big block of code that we had before and
12:54:15we separated it into two functions add
12:54:18to cart and update cart quantity and
12:54:21this made our code a lot easier to
12:54:24read so now let's type a message
12:54:27describing our changes move add to cart
12:54:32into cart. JS and commit
12:54:41next we're going to create the checkout
12:54:43page in our final project and we're
12:54:45going to use modules to organize our
12:54:47code again so let's open the final
12:54:51project and we're going to click this
12:54:53cart icon in the top
12:54:55right and this will take us to another
12:54:57page which is the checkout page so on
12:55:00this page we can see the products that
12:55:02are in our
12:55:03cart so if you're wondering how that
12:55:05cart icon works it basically uses is an
12:55:08HTML element called a link element which
12:55:12looks like this link elements have a
12:55:14special attribute called href when we
12:55:18click a link element whatever is inside
12:55:21the href attribute it will open it in
12:55:23the page so if we put youtube.com inside
12:55:27the href and we click the link it will
12:55:30open youtube.com in our browser if we
12:55:33put a file like checkout. HTML inside
12:55:37href it will look for a file called
12:55:39checkout. HTML and open that
12:55:44file so in our project if we look at our
12:55:48code and open our
12:55:50files inside amazon.
12:55:53HTML we're basically just using a link
12:55:56element or an a element and this has an
12:55:59hre of checkout. HTML so what this does
12:56:03is it's going to look for a file called
12:56:05checkout. HTML beside the current file
12:56:08amazon. HTML so here's amazon. HTML and
12:56:13it's going to look for checkout. HTML
12:56:15beside it and then open that in our
12:56:17browser which is how that cart icon
12:56:20works so in our browser at the top you
12:56:23can see that it opened checkout. HTML so
12:56:26that's basically how a link element
12:56:28works and how we can navigate from one
12:56:30page to another you can learn more about
12:56:33link elements in my HTML and CSS full
12:56:36course but for now now we're going to
12:56:39learn how to build the checkout page
12:56:41using
12:56:42JavaScript so first let's take a look at
12:56:44the code for this page so again the code
12:56:48is inside checkout.
12:56:50HTML so in our code editor we're going
12:56:53to open checkout.
12:56:56HTML and this is a code for the page
12:56:59that we saw earlier that contains our
12:57:02cart so just like with the homepage
12:57:05instead of writing all this HTML
12:57:08manually we're going to use JavaScript
12:57:10to generate this
12:57:12HTML so first we need to add JavaScript
12:57:15to this page so let's scroll down to the
12:57:18very bottom
12:57:19here and right before the end of the
12:57:23body we're going to create a script
12:57:26element to load some
12:57:28JavaScript and we'll give it an
12:57:30attribute Source equals double quotes
12:57:33and then a file we want to load so let's
12:57:36create a new Javascript file file for
12:57:38this page so inside our scripts folder
12:57:42let's click amazon. JS and then click
12:57:45this icon to create a new file and let's
12:57:48name this file checkout. JS and press
12:57:53enter and now we're going to load this
12:57:55page inside checkout.
12:57:57HTML so here in the source attribute
12:58:01we're going to locate this file so first
12:58:04we need to go into this scripts folder
12:58:07so we'll type
12:58:08scripts and then a slash to go into the
12:58:11folder and then we'll load the file
12:58:15checkout.
12:58:17JS and next we're going to add another
12:58:20attribute type equals double quotes
12:58:25module so remember from earlier in the
12:58:27lesson this attribute enables module
12:58:30features for this file so now this file
12:58:33can import from other JavaScript files
12:58:38so now let's
12:58:39save and let's open checkout. JS and
12:58:44we'll start creating this page with
12:58:46JavaScript so let's go back to our page
12:58:49first and take a look at the structure
12:58:51of this page so you can see on this page
12:58:54we actually have two sections we have
12:58:57the cart section on the left which shows
12:59:00the products in our cart and we also
12:59:03have the payment section on the right
12:59:05which calculates the cost of our order
12:59:08so let's use JavaScript to create the
12:59:10cart section first so remember the main
12:59:14idea of JavaScript is first we're going
12:59:17to save the data and then we're going to
12:59:19generate the HTML and finally we'll make
12:59:22it
12:59:23interactive let's start by saving the
12:59:26data that we need for this section of
12:59:28the page so for this section we're
12:59:31basically displaying a list of products
12:59:33along with the quantity of each product
12:59:36that we want to buy and and if you
12:59:38remember we already created a data
12:59:40structure to represent this which is our
12:59:43cart inside our cart we have the ID of
12:59:46the product as well as the quantity that
12:59:49we want to buy so we can just reuse this
12:59:52data structure to create this section so
12:59:55let's go into our
12:59:57code and we're going to open cart.
13:00:01JS so inside here we have an array
13:00:04called cart that's supposed to represent
13:00:06our data here
13:00:08so right now our card is empty so to
13:00:12make it easier for us to develop we're
13:00:14just going to add some default values
13:00:16into this array so inside here let's
13:00:20create an object and put one product
13:00:23into our card first so looking at this
13:00:26page the product that we want to put is
13:00:29the socks so we'll go back into our code
13:00:32and I'll rearrange my windows so we can
13:00:34see it side by side and we're going to
13:00:38get the product ID for the socks here so
13:00:40we're going to go into products.
13:00:42JS and then here's the socks we just
13:00:46going to take this
13:00:47ID right click
13:00:51copy and then inside the
13:00:54cart and remember we structured our data
13:00:57so that each card item has a product ID
13:01:00as well as a
13:01:02quantity so here we're going to create
13:01:05the same structure that our current code
13:01:07uses
13:01:08so we're going to give each object a
13:01:11product ID colon and single quotes and
13:01:16we're just going to rightclick and
13:01:19paste the ID that we copied earlier and
13:01:22then we'll type a comma and we'll give
13:01:25it a
13:01:26quantity colon and for the first item
13:01:30we're going to give it a quantity of two
13:01:33so we'll just create a cart that kind of
13:01:35matches what we see on this page
13:01:38next let's create a second card item to
13:01:41represent the basketball so we'll type
13:01:44comma curly brackets we'll give it a
13:01:48product ID colon and single quotes and
13:01:53then we're going to get the ID for this
13:01:55basketball so inside products. JS we
13:01:59going to scroll down to the basketball
13:02:01here and we're going to copy this
13:02:04ID right click copy
13:02:08and then inside cart.
13:02:10JS in here right click and
13:02:14paste and we'll give this one a
13:02:17quantity colon one and
13:02:21save so what we're doing here is we're
13:02:23just creating some default values that
13:02:25we can use to write the code to generate
13:02:28this page so this is just for
13:02:31development when we're actually using
13:02:33the website the cart will start off as
13:02:36empty so so if we compare our data to
13:02:39our page you might notice that there's a
13:02:42few things that are missing such as the
13:02:44product's image the name and the price
13:02:47so how come we're not saving these into
13:02:50our data and that's because we're using
13:02:53a special technique we're just saving
13:02:55the product's ID and then we can use
13:02:58this ID to search for this product
13:03:00inside the products array here so using
13:03:04the ID we can find all the other details
13:03:07of the product like the image the name
13:03:10and the price so there's no need to save
13:03:13this data twice inside the products
13:03:15array and inside the cart array all we
13:03:19have to do is save the ID of the product
13:03:22that we want and then search for it so
13:03:24this technique is called duplicating the
13:03:27data or normalizing the data and this is
13:03:31a very common technique in software
13:03:34engineering okay so the one other thing
13:03:37that we probably need to save in our
13:03:38data is the delivery times and the
13:03:41delivery options but we're going to
13:03:43leave this for the next lesson because
13:03:45it requires some more features that
13:03:47we're going to
13:03:48learn so for now we finished saving the
13:03:51data that we need the next step is to
13:03:54use this data to generate the
13:03:58HTML so let's open checkout.
13:04:01JS so I'm just going to drag it to the
13:04:03bottom here so we can see it side by
13:04:06side
13:04:10so the first step we need to do is to
13:04:12take the cart array and import it into
13:04:16checkout. JS so we can use it so in here
13:04:20let's import curly brackets the cart
13:04:25array and we're going to import it from
13:04:29single quotes and semicolon and we're
13:04:31going to use a file path between the
13:04:33quotes to locate cart. JS so let's open
13:04:37our files again and to get from here to
13:04:41here we need to go out of the scripts
13:04:44folder so to do that we can type dot dot
13:04:47and then slash to go to the outer folder
13:04:51and then we're going to go to the data
13:04:53folder so we'll type data slash to go
13:04:56into this folder and we'll locate cart.
13:04:59JS so cart. JS and save and next we're
13:05:05going to Loop through this cart and
13:05:07generate the HTML just like we did for
13:05:10the
13:05:11homepage so let's close this for now and
13:05:15here we're going to create a loop over
13:05:17the cart so we'll type cart. for each
13:05:23brackets and a
13:05:26function and then we'll give it a
13:05:28parameter let's call it cart
13:05:31item and then for each cart item here
13:05:34we're going to generate this
13:05:36HTML so in here let's create a template
13:05:39string for the HTML using back ticks and
13:05:43we'll create some new lines and then
13:05:45here we're going to copy and paste the
13:05:47HTML for one of these products so first
13:05:51let's find the HTML for one of these
13:05:53products and to do that we can
13:05:56rightclick
13:05:58inspect and then click this top left
13:06:01icon and then click the element we want
13:06:04to get the HTML
13:06:05for so here's the HTML for one of these
13:06:09products and we're going to search for
13:06:11this class card item container and our
13:06:14code so inside our
13:06:17code let's open checkout.
13:06:21HTML and we'll type control F or command
13:06:24F to search for code and we'll search
13:06:27for the class cart D item D
13:06:32container which is this code right here
13:06:35so if we collapse it and collapse this
13:06:39this is the code for these two products
13:06:42here so we're going to take this HTML
13:06:45and we're going to move it into our
13:06:46JavaScript so we can generate it with
13:06:49JavaScript so we'll right click
13:06:53copy and then in here right click and
13:06:57paste and if we need to fix the
13:06:59formatting we can select all of these
13:07:02lines and then press shift tab to remove
13:07:05some indents
13:07:07and I'll add an indent here next when
13:07:10we're generating this HTML we want to
13:07:13replace this with the actual products
13:07:16image and this with the actual products
13:07:18name so we're going to take this card
13:07:21item and use it to get the data that we
13:07:23need so let's open card. JS to see what
13:07:27each cart item looks like so we have the
13:07:29product ID and the
13:07:32quantity so first we need to use this
13:07:35product ID to search for the product in
13:07:38order to get the other details like the
13:07:40image the name and the
13:07:42price so to do that let's get the
13:07:45product ID out of the cart item first so
13:07:49we'll create a variable const product ID
13:07:53equals the cart item do product
13:07:59ID and now we need to use this to search
13:08:02for the full product so the full product
13:08:05if we open our files is INS inside
13:08:07products.
13:08:09JS which is this array right here so I'm
13:08:13just going to move this up here so we
13:08:14can see it side by
13:08:16side so to search inside this array we
13:08:20actually need to import products into
13:08:23checkout. JS so let's use some module
13:08:26features again at the top we'll import
13:08:31curly
13:08:32brackets the products array and we'll
13:08:35import it from single quotes and
13:08:39semicolon and then here we'll locate the
13:08:42products. JS file so we'll type do dot
13:08:45slash to go out of the scripts folder
13:08:49and then we'll go into the data folder
13:08:51data and then a slash to go into this
13:08:54folder and we import from products. JS
13:08:58so
13:08:59products. JS and save so now we have
13:09:04access to this products array here and
13:09:07we'll search the array for the full
13:09:09product details so down
13:09:12here let's create a variable to save the
13:09:15result so we'll type let and we'll name
13:09:19it matching
13:09:22product and then down here we'll Loop
13:09:25through the products array so we'll type
13:09:28products. for each brackets and a
13:09:34function and then we'll give it a
13:09:36parameter
13:09:38product and now for each product here
13:09:42we're going to check if the ID property
13:09:44is equal to our product ID here so down
13:09:48here we'll check if the
13:09:51product. ID property is equal to our
13:09:56product ID up here and then if they're
13:10:00equal that means we found the matching
13:10:03product and we're going to save it in
13:10:05this variable so matching
13:10:09product equals this product that We're
13:10:12looping
13:10:13through so now that we have the matching
13:10:15product we have access to the image the
13:10:18name as well as the price that we can
13:10:21use to generate this HTML so this is a
13:10:24good example of duplicating or
13:10:27normalizing our data so now at the
13:10:30bottom let's
13:10:32console.log our matching product to see
13:10:35if it works so matching
13:10:39product and
13:10:41save now if we go into our project and
13:10:45we rightclick inspect and check our
13:10:49console you can see that we were able to
13:10:52get the full product details for each of
13:10:54these products using the product ID so
13:10:58now that we have the full product
13:10:59details we can use this to generate all
13:11:02this HTML
13:11:07so down here instead of generating the
13:11:11same image every time we're going to use
13:11:13the image in the matching product so
13:11:16let's get rid of this
13:11:18code and here we're going to remove this
13:11:22and we're going to substitute using
13:11:24dollar curly
13:11:25brackets the matching
13:11:29product.
13:11:31image and we'll scroll down and instead
13:11:34of the same product name every time
13:11:36we're going we're going to replace this
13:11:39and we're going to substitute the
13:11:42matching
13:11:43product. name so each time we're going
13:11:46to generate HTML with a different image
13:11:49and a different name and down here the
13:11:51same thing remove the price and we'll
13:11:55replace it with matching product Dot and
13:12:00then we'll just check here what the
13:12:01property is it's called a price sense
13:12:05and remember this is in
13:12:07and to display it as dollars we have to
13:12:10convert it by dividing by 100 and
13:12:15save and lastly we're going to replace
13:12:17the quantity here so if we scroll down
13:12:21we can see that this is the quantity so
13:12:23instead of two every time we'll
13:12:28substitute and for the quantity remember
13:12:30it's not part of a product it's part of
13:12:33our cart so each cart item has a
13:12:36property called called quantity so down
13:12:38here we're going to substitute the cart
13:12:43item.
13:12:45quantity and
13:12:48save so now we're generating all this
13:12:51HTML by looping through our cart so the
13:12:55next step is we're going to combine all
13:12:57this HTML together and then put it on
13:13:00the page so I'm just going to move this
13:13:02up here so we can see more of the
13:13:06code so to combine all this HTML
13:13:09together let's create a variable up here
13:13:11to store the result so we'll type let
13:13:15and let's call it the cart summary
13:13:20HTML equals an empty string and now each
13:13:25time we Loop through the cart we're
13:13:27going to add this HTML up here so that
13:13:29we combine it so here we'll type cart
13:13:34summary
13:13:35HTML Plus
13:13:37equals this HTML that we
13:13:40generated and at the bottom I'll just
13:13:43add a
13:13:44semicolon and then let's console.log the
13:13:47cart summary
13:13:49HTML
13:13:50console.log cart summary HTML to make
13:13:55sure that it worked so we'll save and
13:13:59then in here we'll check the console
13:14:02right click
13:14:04inspect the console
13:14:07and now you can see that we generated
13:14:09the HTML and each cart item is different
13:14:13depending on the product that is being
13:14:15displayed so that's how we generate all
13:14:17the HTML for this section and the last
13:14:20step is to take this and put it on the
13:14:23page using the Dom so first we need an
13:14:26element that we can put the HTML inside
13:14:29of to find this element let's rightclick
13:14:34inspect and click the top left left and
13:14:38click one of these
13:14:39products and let's find this order
13:14:42summary element because this contains
13:14:45both of our products here so we're going
13:14:47to replace all the HTML inside here with
13:14:50what we generated so let's search for
13:14:53the class order summary in our code so
13:14:56we'll go back to our code and let's open
13:14:59checkout.
13:15:02HTML and we'll type contrl f or command
13:15:04F to search for code and we'll search
13:15:07for the class
13:15:09order-
13:15:10summary and then it's right
13:15:13here and we're going to add a class so
13:15:16we can select it using the Dom so js-
13:15:20order- summary and
13:15:23save so now let's use the Dom and put
13:15:26this element in our JavaScript so inside
13:15:29here at the
13:15:30[Music]
13:15:32bottom we use
13:15:34document. Query select VOR
13:15:38brackets and the class we just
13:15:41created js-
13:15:44order-
13:15:46summary and we'll use the property.
13:15:49inner Capital
13:15:51HTML and we'll change the HTML to cart
13:15:56summary
13:15:58HTML and we can remove this
13:16:01line and now if we
13:16:04save we're basically generating all this
13:16:06h HTML with JavaScript and then putting
13:16:09it on the page so now we can go back to
13:16:12checkout.
13:16:13HTML and we can actually remove the code
13:16:17inside this order summary so we can
13:16:19delete this
13:16:21code and save and everything will still
13:16:25work because this is now being generated
13:16:28by
13:16:30JavaScript so that's how we create the
13:16:32cart section of this page with
13:16:35JavaScript let's go into get and save
13:16:38our changes so we'll open the git
13:16:41section and then it will tell us that we
13:16:43changed three files in checkout. HTML we
13:16:48removed all the HTML that was written
13:16:51manually and then at the bottom we
13:16:53created a script tag to load our
13:16:56JavaScript and then we also changed
13:16:58cart. JS and added some default values
13:17:02to work with and then we created
13:17:04checkout. JS which loops through the
13:17:07cart creates the HTML and puts it on the
13:17:10page so let's create a message to
13:17:13describe our
13:17:14changes generate
13:17:17HTML for the order summary and
13:17:27commit next let's open our project
13:17:31again and before we continue we actually
13:17:34have two issues that we need to fix the
13:17:36first issue is that the price is
13:17:39displaying as one decimal here instead
13:17:41of two and the second issue is that
13:17:44these delivery options are actually
13:17:46shared between the two products for
13:17:49example if I click this delivery option
13:17:51here it will actually unselect for the
13:17:54second product so they're sort of shared
13:17:57between the two
13:17:58products but what we actually want is
13:18:00for each product to be able to select
13:18:03its own delivery options so we're going
13:18:05to fix these two issues
13:18:07next first let's focus on the price and
13:18:11we want to display it in two
13:18:13decimals so we actually learn how to fix
13:18:15this on the homepage using the method to
13:18:18fixed so we're going to use the same
13:18:20code here let's go into our
13:18:24code and we'll open our files and let's
13:18:28open checkout. JS
13:18:30again so here we're going to scroll down
13:18:33to where we display the
13:18:35price which is here price sense and to
13:18:38show this in two decimal places we're
13:18:41going to surround this with brackets to
13:18:43make sure we calculate it
13:18:45first and then use the method
13:18:48do2 fixed brackets and then two to show
13:18:53two decimal places if we save and then
13:18:57open our
13:18:59project now the price is displaying
13:19:02correctly before we move on we're going
13:19:04to learn how to better organize this
13:19:07code so if we go
13:19:09back so notice that we're using this
13:19:11code inside the checkout page as well as
13:19:14inside amazon. JS which is the homepage
13:19:19so we can actually share this code
13:19:21between the two files so we don't have
13:19:23to repeat it and to do that we can use
13:19:26modules so let's open checkout. JS again
13:19:30and what we'll do is we're going to
13:19:32create a function that does the same
13:19:34thing as this code and then we can share
13:19:37this function between the two files so
13:19:40let's create a file that's going to
13:19:42contain this shared function so we're
13:19:45going to go to our scripts folder here
13:19:47and inside we're going to create a new
13:19:50folder this time and let's call this
13:19:53folder
13:19:54utils and press
13:19:57enter so we're naming it utils because
13:20:00this code is sort of like a useful
13:20:02utility that we want to
13:20:04share now inside this folder we're going
13:20:07to have different types of utils so
13:20:10let's create a new
13:20:11file and let's name it money. JJs so
13:20:17this file is going to contain utilities
13:20:20that are related to money which is this
13:20:22code right here so let's press
13:20:25enter and I'm just going to move this to
13:20:28the bottom so we can see it side by
13:20:33side so now inside this UIL file we're
13:20:36going to create a function that does the
13:20:38same thing as here and then we can share
13:20:40it between the two
13:20:42files so here we'll create a function
13:20:47and let's name it format currency
13:20:51because that's what this code is doing
13:20:54and then brackets and curly
13:20:56brackets so this function is basically
13:20:59going to do the same thing as here so
13:21:02we're going to add a parameter here
13:21:05price sense
13:21:07because we want to use this function for
13:21:09any amount of price
13:21:11sents and then in here we're going to do
13:21:14the same thing which is price sents
13:21:18divided 100 and then we're going to
13:21:21surround this with brackets to make sure
13:21:23we calculate this
13:21:25first and then display it in two decimal
13:21:28places using dot 2 fixed brackets and
13:21:33two and finally let's return this result
13:21:38return and
13:21:41save so what we just did is we created a
13:21:44function that does the same thing as
13:21:46this code here and now we're going to
13:21:48share this function between checkout. JS
13:21:51and amazon. JS so first in order to
13:21:55share it we need to export this function
13:21:58so at the front we're going to type
13:22:01export and
13:22:03save and now inside each of these files
13:22:06we're going to to import this function
13:22:08and use it so let's scroll to the
13:22:12top and here we're going to import curly
13:22:16brackets we're going to import the
13:22:19function format
13:22:21currency and we're going to import it
13:22:24from single quotes and
13:22:27semicolon and then inside here we're
13:22:29going to locate the file money. JS so
13:22:33here we're in the checkout. JS file
13:22:36which is right here and to go here we're
13:22:39first going to go into the UTS folder so
13:22:42we're going to Type U toils and then a
13:22:45slash to go into this folder and we're
13:22:48going to locate the file money. JS so
13:22:51money.
13:22:53JS now for modules we have to do one
13:22:56extra thing at the front of this file
13:22:59path we need to type dot
13:23:02slash so remember that dot dot
13:23:05represents the folder outside the
13:23:07current folder so for checkout. JS if we
13:23:10go outside of this folder we're going to
13:23:12go outside the scripts
13:23:14folder now a single dot on the other
13:23:17hand means the current folder so this
13:23:20dot means we're going to go into the
13:23:22current folder which is the scripts
13:23:24folder and then we're going to go into
13:23:26the utils folder and then we're going to
13:23:29go and locate money.
13:23:32JS so for modules if we want to start in
13:23:35the current f folder our file paths have
13:23:38to start with Slash so that's one extra
13:23:41thing that we have to do so now that
13:23:44we've imported the format currency
13:23:46function let's use it in the rest of our
13:23:48code so we're going to scroll
13:23:51down to here and instead of writing this
13:23:55all over again we're just going to use
13:23:57the function format
13:24:00currency and then brackets and we're
13:24:03going to remove the rest of the code
13:24:05here and and close bracket and
13:24:10save so we're basically running the same
13:24:13code except we're using this shared
13:24:15function that's located in another file
13:24:18so let's open our
13:24:20project and we can see that the price is
13:24:23still displaying
13:24:24correctly so now let's go back into our
13:24:26code and we're going to share this
13:24:28function inside amazon. JS as well so
13:24:32let's open amazon.
13:24:34JS and then we'll scroll to where we
13:24:38show the price which is here and we're
13:24:40going to use this function again so
13:24:42first we have to import it so we'll
13:24:44scroll up to the top and import curly
13:24:49brackets we'll import the function
13:24:53format
13:24:54currency and we'll import it from single
13:24:59quotes semicolon and then here we'll
13:25:02locate the file money. JS so remember
13:25:05for module if we want to start in the
13:25:07current folder we have to type slash and
13:25:12then we're going to go to the UIL folder
13:25:14so utils and then a slash to go inside
13:25:18the folder and locate the
13:25:21file money.
13:25:24JS and now we're going to use this
13:25:26function so let's scroll
13:25:29down and we're going to replace this
13:25:31code and use format currency and
13:25:36brackets so we can remove the rest of
13:25:38the code here and
13:25:41save and now let's look at our
13:25:44project and we'll click up here to go
13:25:47back to the
13:25:48homepage and you can see that the prices
13:25:50are displaying as two decimal
13:25:53places and that's it if we look at our
13:25:56code again we're essentially taking this
13:25:59function and sharing it across two files
13:26:03using modules so using modules we can re
13:26:06use a lot of our code and reduce
13:26:10repetition next let's work on the second
13:26:12issue that we saw earlier so we'll go
13:26:15back to our project and click the top
13:26:18right to go back to the checkout page
13:26:21and then here the delivery options are
13:26:23shared between the two products but we
13:26:26want each product to choose its own
13:26:28delivery
13:26:30options so to fix that let's go back
13:26:33into our code and just going to resize a
13:26:36here so we can see it side by
13:26:39side and we'll open checkout. JS again
13:26:43and we can close this for
13:26:48now so this is an HTML element called a
13:26:52radial selector and here's the code for
13:26:55a radial selector so the way that radial
13:26:58selectors work is that if a set of radio
13:27:01selectors have the same name then we can
13:27:03only select one of them so for example
13:27:06if these three radio selectors have the
13:27:08same name attribute then we can only
13:27:11select one of them now if the three at
13:27:14the top have one name and the three at
13:27:16the bottom have a different name then we
13:27:19can select one from the first three as
13:27:21well as one from the second
13:27:25three now what's the problem with the
13:27:27radial selectors here well let's take a
13:27:30look at the code for these selectors to
13:27:33do that we're going to rightclick one of
13:27:35them and then
13:27:38inspect and then click the top left and
13:27:41click one of these selectors to get the
13:27:43HTML code so here we have the code for
13:27:47the radio selector and you can see that
13:27:49the name of the selector is delivery
13:27:52option one and now if we click the top
13:27:54left again and find one of these bottom
13:27:58selectors you'll notice that these also
13:28:00have the name delivery option one so all
13:28:03six of these have the same name at
13:28:06attribute that's why we can only select
13:28:08one of these six at a time so what we
13:28:11actually want to do is we want the first
13:28:14three selectors to have one name and the
13:28:17second three selectors to have a
13:28:19different name so let's figure out how
13:28:21to give these a different name so inside
13:28:25the console we can see the code for this
13:28:27selector and we have a name attribute
13:28:30delivery D
13:28:32option-1 so let's actually find this
13:28:35name in our code so we'll go to our code
13:28:38editor and contrl F or command F to
13:28:41search for code and we'll search for
13:28:45delivery Das
13:28:49option-1 and if we scroll
13:28:52down you'll notice that every time we're
13:28:54generating these radio selectors we're
13:28:57always using the same name delivery
13:28:59option one so every product is going to
13:29:02have the same name for the radio
13:29:04selectors and all of these are going to
13:29:06be shared so what we actually want to do
13:29:09is instead of using the name delivery
13:29:11option one every time each product is
13:29:14going to use a different name for these
13:29:17three
13:29:17selectors so one way we can do that is
13:29:20instead of the number one every time we
13:29:23can replace it with the product's ID
13:29:26because the ID is always unique for each
13:29:28product so let's substitute using dollar
13:29:32and curly
13:29:33brackets the product
13:29:37ID and then down here as well instead of
13:29:40using the name one every time we're
13:29:42going to
13:29:43substitute
13:29:46product. and
13:29:48actually we use the name matching
13:29:52product so we'll scroll down and just
13:29:56update this to matching
13:29:59product and then down here matching
13:30:04product and and as well down here
13:30:07instead of one every
13:30:09time substitute the matching product. ID
13:30:15and
13:30:17save so now these three radial selectors
13:30:21will have a different name attribute
13:30:23than these three radial selectors that
13:30:26means we can select one out of these
13:30:28three and we can select one out of these
13:30:33three so that's how we fix that error
13:30:36instead of using the same name delivery
13:30:38option one every time we're going to
13:30:40generate a name using the product's ID
13:30:44so let's go into get and save our
13:30:46changes so in amazon. JS we imported
13:30:51this shared function and we used it to
13:30:53format the price in two decimal places
13:30:56and then in checkout. JS we also used
13:30:59the shared function
13:31:01here and we fix the radio selectors
13:31:06and then in this file
13:31:08moneyjar
13:31:10function so let's create a message to
13:31:13describe our changes fix price
13:31:17formatting and radio
13:31:21selectors and
13:31:28commit the last step in our process is
13:31:30to make it
13:31:33interactive so I'm just going to close
13:31:35these for now
13:31:37and going to move it to the right again
13:31:40so we can see our
13:31:46project and for the order summary
13:31:49there's a few things we can make
13:31:51interactive for now we're going to start
13:31:53with this delete link when we click this
13:31:56link it should remove this product from
13:31:58the cart so we're going to learn how to
13:32:00build
13:32:01this so let's go back to our code and
13:32:05first let's add event listeners to all
13:32:08of these delete links to do that we're
13:32:11going to find the code for these delete
13:32:12links so we'll rightclick
13:32:17inspect and then in here this is the
13:32:19code so we're going to search for this
13:32:21class in our code editor delete quantity
13:32:26dlink so in here let's open checkout. JS
13:32:30and we're going to contrl f or command F
13:32:33and search for delete - quantity
13:32:38dlink which is right
13:32:40here next we're going to add a class to
13:32:43these elements so we can add event
13:32:45listeners so at the end here let's add a
13:32:48class
13:32:50js- delete
13:32:52daslink and
13:32:55save and then at the bottom we're going
13:32:58to scroll down and then out here we're
13:33:01going to add the event
13:33:02listeners so first we're going to select
13:33:05all the delete links on the page using
13:33:09document. query selector all brackets
13:33:15and then a string and we're going to
13:33:17select a class using Dot and the class
13:33:20js- delete
13:33:24daslink and then we're going to Loop
13:33:26through all these links so dot for each
13:33:31brackets and a
13:33:34function and and in here it will give us
13:33:37the link every time and then for each of
13:33:40these links we're going to add an event
13:33:42listener so
13:33:44link.
13:33:46addevent
13:33:47listener
13:33:49brackets and here we're going to give a
13:33:51string and the event we want to listen
13:33:53for which is a
13:33:56click and then a function that we want
13:33:58to run when we click these links so for
13:34:01now let's just
13:34:04console.log string delete to make sure
13:34:07that it's working so we'll save
13:34:10this and then in here we click these
13:34:13delete links and then open the console
13:34:16right click
13:34:19inspect
13:34:20console we can see that it's working now
13:34:24so now let's go back to our
13:34:27code so when we click delete we're going
13:34:30to do two steps the first step is we're
13:34:33going to remove the product from the
13:34:34cart and the second step is we're also
13:34:37going to update our HTML and remove the
13:34:40product from the page so let's start
13:34:43with the first step so when we click
13:34:45delete how do we know which product we
13:34:48need to remove from the
13:34:50cart so we learned how to do this for
13:34:53the added to cart button we can attach
13:34:55the product's ID to the link element so
13:34:59let's scroll up again to where the
13:35:01delete link is which is right here and
13:35:06we're going to attach the products ID to
13:35:08this element using a data attribute so
13:35:12at the end here we're going to add
13:35:15data-
13:35:17product-id equals double quotes and then
13:35:21here we'll
13:35:23substitute the matching
13:35:27product. ID and
13:35:30save and now that we attached the
13:35:33product ID to this element we can get it
13:35:35in our JavaScript below so let's scroll
13:35:40down and then here we're going to delete
13:35:43this line and using the link element we
13:35:47can get that product ID using link. dat
13:35:51set to access the data attributes and
13:35:54we're going to access product
13:35:58ID and let's save this in a variable so
13:36:01we can use it later so const product ID
13:36:04equals this
13:36:07value and let's
13:36:09console.log this to see if it
13:36:13works and
13:36:15save so now if we go to the project and
13:36:18click the delete link for the first
13:36:20product and then look at the console
13:36:23inspect and console it will show us the
13:36:26products
13:36:27ID if we click the second products
13:36:30delete link it will show us the second
13:36:33products ID so now now we have the ID
13:36:36that we need to remove from the cart so
13:36:39now how do we actually do that so before
13:36:42we begin figuring that out instead of
13:36:45writing all the code down here let's
13:36:47actually create a function inside C.J to
13:36:51do this task the reason we're going to
13:36:54do this is because cart. JS is supposed
13:36:57to contain all the code that's related
13:36:59to the cart so this will help us
13:37:02organize our code better so let's open
13:37:04our files again again and we're going to
13:37:07open cart.
13:37:09JS and we're going to scroll to the
13:37:12bottom and we're going to create a
13:37:14function for removing a product from the
13:37:17cart so let's type function and let's
13:37:21name it remove from cart brackets and
13:37:26curly
13:37:27brackets so this function we'll take a
13:37:30product ID which we have and remove it
13:37:33from the cart so here let's let's create
13:37:35a parameter for the ID product ID and
13:37:40now in here we're going to figure out
13:37:42how to remove it so here's one way we
13:37:45can do this first we can create a new
13:37:49array and then we can Loop through our
13:37:51cart and then add each product to the
13:37:54new array except for this product ID so
13:37:59now let's convert these steps into code
13:38:02so inside this function here let's
13:38:04create a new new array using const we'll
13:38:08call it new cart equals an empty
13:38:13array the next step is we're going to
13:38:15Loop through our cart so we'll type
13:38:19cart. for each brackets and a
13:38:24function and we'll give it a parameter
13:38:27cart item and the last step is that
13:38:31we're going to add each card item to the
13:38:33new array except if it has this product
13:38:36ID so we can do that by checking if the
13:38:41cart
13:38:42item. product ID is not equal to the
13:38:48product ID that we're looking for
13:38:50product
13:38:52ID so if it's not equal to the product
13:38:55we're trying to remove we're going to
13:38:57add it to the new cart so new cart. push
13:39:03cart item
13:39:06so the result of this Loop is it's going
13:39:08to contain all the cart items that don't
13:39:11match this product ID and that's the
13:39:13same thing as removing this from the
13:39:16cart so now the last step is we're going
13:39:19to take our new cart and replace the
13:39:21cart up here so we'll scroll
13:39:24down and then here we'll make cart equal
13:39:28to our new
13:39:31cart because we're reassigning this
13:39:34variable we have to scroll up and change
13:39:37it from const to let and
13:39:42save so now that we created this
13:39:45function let's use it in our checkout
13:39:48page first we're going to use the
13:39:50modules feature and Export this function
13:39:54and
13:39:56save and then inside checkout. JS we're
13:39:59going to import this function so I'm
13:40:01just going to move this down to the
13:40:02bottom so we can see it side by side
13:40:06so here so in checkout. JS we're going
13:40:09to scroll up and we're already importing
13:40:12from cart. JS so we're just going to
13:40:15import one additional Thing by typing
13:40:18comma and we're going to import this
13:40:20function remove from cart and
13:40:26save and then we're going to use this
13:40:28function at the bottom so we'll scroll
13:40:31down and then here we're going to
13:40:36remove from cart brackets and we're
13:40:40going to give it the product ID we want
13:40:42to remove so product
13:40:46ID and lastly let's just console.log the
13:40:50cart to make sure that this works so
13:40:52console.log the card and
13:40:56save so now let's go into our
13:40:59project and we're going to click this
13:41:01delete link for the first product so
13:41:04delete and let's open the console right
13:41:07click inspect the console and now it's
13:41:11going to show us that we have one
13:41:13product remaining in the cart and this
13:41:15product has a quantity of one which is
13:41:18the second product here so by clicking
13:41:20that delete link We successfully removed
13:41:23this product from the cart so now if we
13:41:26refresh and tried clicking the second
13:41:29delete
13:41:30link and look at the
13:41:33console and then EXP expand the cart it
13:41:36will tell us that the remaining product
13:41:38has a quantity of two which is this
13:41:41product so we successfully removed the
13:41:44second product from the cart when we
13:41:45clicked
13:41:48delete so now let's go into get and look
13:41:51at our changes so we'll go into this
13:41:54section well I can close this for now
13:41:56and we'll open git and it will tell us
13:41:59that in C.J we change it to let and we
13:42:03created this new remove from cart
13:42:06function and then in checkout. JS we
13:42:09import that function and then at the
13:42:12bottom when we click the delete link
13:42:15we're going to remove this product from
13:42:17the cart now finally we can remove this
13:42:21console.log save and we're going to put
13:42:24these changes into git so we'll type a
13:42:26message to describe our
13:42:28changes delete products from cart when
13:42:34clicking
13:42:35delete and
13:42:41commit the second thing we have to do
13:42:43when we click delete is to update our
13:42:46HTML so if we go back to our
13:42:49project when we click delete we want to
13:42:52remove this product from the page so one
13:42:56way we can do this is first we're going
13:42:59to use the Dom to get the element we
13:43:01want to remove and then we can use a
13:43:04method called
13:43:05remove so every element that we get from
13:43:08the Dom has a method called remove which
13:43:11removes it from the page so first of all
13:43:15how do we know which element to get from
13:43:17the page so let's actually look at the
13:43:20HTML for one of these products we're
13:43:22going to
13:43:24rightclick
13:43:25inspect and then click the top left and
13:43:29then click one of these products
13:43:31here and this will give us the HTML so
13:43:35these two products are represented by
13:43:37these two divs here with the class
13:43:40cart--
13:43:41container so one way to identify which
13:43:44product this is for is to add a special
13:43:47class to this element and this class
13:43:49will contain the product
13:43:51ID and then if we go back to our code
13:43:55and we open checkout. JS and scroll to
13:43:59the
13:44:01bottom when we click delete we have the
13:44:04product ID here so we can use this to
13:44:07select that special class that we're
13:44:09going to add so first let's add that
13:44:12special class to each of these elements
13:44:15so we're going to scroll up to the
13:44:18HTML and we're going to go to the top
13:44:20here to the div cart--
13:44:24container and then here we'll add a
13:44:27special class
13:44:29js- cart Das item Das container Das and
13:44:35then we'll substitute the product's ID
13:44:38so we'll type the
13:44:40matching
13:44:42product.
13:44:44ID and let's put this class on a
13:44:46separate line so the line is not too
13:44:48long now let's
13:44:51save and now we're going to scroll to
13:44:53the bottom and use our code to get this
13:44:56class so we'll scroll to the
13:44:58[Music]
13:45:00bottom and here we're going to use the
13:45:02Dom as well as this product ID to get
13:45:05that special class that we just added
13:45:08above so here we can type
13:45:12document. query selector brackets and
13:45:17then inside we'll type a string and
13:45:20we'll select the class using a DOT js-
13:45:24cart D item D container Dash and then
13:45:29we're going to substitute the product ID
13:45:32so because we want to insert something
13:45:34in here we're going to switch this to a
13:45:36template string using
13:45:38backtick and now we can substitute this
13:45:42product ID into this
13:45:44string product
13:45:47ID so by creating the string like this
13:45:51we're able to select the specific
13:45:53container that we need so now let's save
13:45:56this in a variable so we can use it
13:45:58later so const container equals this
13:46:03result so for now let's let's actually
13:46:05console.log this to see if it works
13:46:09console.log
13:46:12container and
13:46:14save and then we'll go back to our
13:46:16project so just move this
13:46:19here and then in our project if we click
13:46:22delete on the first product and then
13:46:25check the console right click inspect
13:46:28and the console you can see that we're
13:46:31getting the correct element that we
13:46:32should delete if we go out here and
13:46:36click this delete link and check the
13:46:39console you can see that this is also
13:46:42getting us the correct element that we
13:46:44want to
13:46:45delete so now that we have the element
13:46:48we want to delete the next step is to
13:46:50use the do remove method so again every
13:46:54element we get with the Dom has a method
13:46:57called do remove which will remove it
13:46:59from the page so if we go back into our
13:47:02code down here all we have to do is type
13:47:06out the element
13:47:08container. remove and brackets and this
13:47:12will remove it from the page if we
13:47:16save and try it out so we'll go in here
13:47:20we'll click delete on the first product
13:47:22and it will remove it from the
13:47:24page if we click delete on the second
13:47:27product it will also remove it from the
13:47:30page so that's it now let's refresh to
13:47:33bring the products back
13:47:35and that's how we make the delete link
13:47:37interactive and remove the products from
13:47:39the cart as well as from the
13:47:42page so now let's save our changes into
13:47:44git we'll go to the git
13:47:48section and it will tell us that in
13:47:51checkout. JS at the top we added that
13:47:54special class which contains the product
13:47:57ID and if we scroll down to the
13:48:01bottom we created the string which will
13:48:04get us these specific element that we
13:48:06want to remove and then we use the do
13:48:08remove method so now let's create a
13:48:11message to describe our
13:48:13changes delete products from
13:48:18HTML when clicking delete and
13:48:28commit the last thing we're going to do
13:48:30in this lesson is we're going to add
13:48:32local storage to our cart so if we go
13:48:35back to our
13:48:36project if we delete some products in
13:48:39our cart and then
13:48:41refresh notice that our cart goes back
13:48:44to what it was before and that's because
13:48:47right now if we look at our code and we
13:48:50open cart.
13:48:52JS our cart is just a variable and
13:48:56variables are reset when we refresh the
13:48:58page or when we go to a different page
13:49:02so again if we go back to our project
13:49:04and we go to a different Page by
13:49:06clicking the top left so on this
13:49:09homepage we can add as many products as
13:49:12we want to our cart and if we go back to
13:49:15the checkout page our cart will just get
13:49:18reset to whatever it is here so that's a
13:49:22problem with just using a variable to
13:49:24save our cart it gets reset when we
13:49:26refresh the page or we go to a different
13:49:29page to solve this problem we're going
13:49:31to use local storage to save our cart
13:49:35so first let's create a function for
13:49:37saving the cart to local storage because
13:49:40we might want to reuse this code so down
13:49:43here let's create a function we'll call
13:49:47it save to storage brackets and curler
13:49:52brackets and we're just going to save
13:49:54the cart to local storage using local
13:49:58storage do set item
13:50:02brackets and set item takes two
13:50:05strings the first string is the name of
13:50:08whatever we want to save so we're going
13:50:10to save our cart so we're just going to
13:50:13call this the cart and then the second
13:50:15string is the data that we want to save
13:50:19so remember that local storage can only
13:50:21save strings so to save our cart we need
13:50:24to convert it into a string first and we
13:50:27can do that using
13:50:30json.
13:50:32stringify brackets and then inside we're
13:50:35going to give it the cart so this will
13:50:38convert the cart into a string and now
13:50:41we can save it in local storage so now
13:50:44let's use this function whenever we
13:50:47update the cart we need to save it to
13:50:49local storage so it doesn't get reset
13:50:51when we refresh the page so here when we
13:50:55add it to the cart at the bottom after
13:50:58we update the cart we're going to use
13:51:00that function we created above save to
13:51:04to storage and
13:51:07brackets and also in the function remove
13:51:10from cart so this function is also
13:51:13updating the cart so after we update the
13:51:16cart we're also going to save to storage
13:51:22and brackets and
13:51:25save so now whenever we update the cart
13:51:28we're going to save it in local
13:51:31storage the last thing we need to do is
13:51:33at the top at the beginning of our code
13:51:36we need to get the cart from local
13:51:38storage instead of using this default
13:51:41value so let's add some new lines here
13:51:43to separate the code for a bit and here
13:51:46we're going to get the cart from local
13:51:48storage and we can do that using local
13:51:53storage. get item and brackets so get
13:51:57item takes one string and that is the
13:52:00name of what we saved earlier which is
13:52:03the cart so we're going to to give it
13:52:04the string
13:52:06cart so this will give us the cart that
13:52:08we
13:52:09saved however remember that local
13:52:12storage can only save strings so it will
13:52:15give us the string version of our cart
13:52:17and we need to convert it back into an
13:52:19array to convert it back to an array we
13:52:22can use the code
13:52:24json. pars and brackets and close
13:52:32bracket the last thing we need to do is
13:52:34when we first use the website we might
13:52:37not have a cart in local storage so if
13:52:40we don't have a cart saved local storage
13:52:42will give us null so in this situation
13:52:46if this value is null we want to give
13:52:48the cart a default value which is this
13:52:51value below so to give the cart a
13:52:54default value if it's empty we can use
13:52:57an if statement by typing if brackets
13:53:01and curly brackets and then here we can
13:53:04check if not
13:53:07cart so if we don't have a cart in local
13:53:10storage this will give us
13:53:12null in this case not null will become
13:53:15truthy and we're going to run the code
13:53:18in this if
13:53:19statement so if the cart is empty we're
13:53:22going to make the cart equal this
13:53:25default value below so let's just select
13:53:28this code and we'll right click cut and
13:53:32then in here right click and
13:53:35paste and remove the extra line and
13:53:40save so now if the cart is empty we just
13:53:43give it a default value if we go back to
13:53:46our project and try out our code so
13:53:49let's delete the first product and
13:53:52refresh the page notice that the cart
13:53:55gets saved and the first product remains
13:53:58deleted if we go to the homepage and we
13:54:01add some new products
13:54:04and then go to our
13:54:06cart notice that our cart is saved
13:54:09between pages so by using local storage
13:54:12we can save our cart even when we
13:54:14refresh the page or go between different
13:54:18pages so that's all we're going to build
13:54:20in this lesson so to clean up let's
13:54:23delete all these products in the
13:54:26cart and then go to the
13:54:28homepage and we'll add back two socks
13:54:32and one basketball which which is the
13:54:34default value of the
13:54:36cart let's go back to the checkout
13:54:39page and now we're done with this part
13:54:42of the page so finally let's save our
13:54:45changes into git we'll go to the git
13:54:48section and it will tell us that inside
13:54:51cart. JS we're now loading the cart from
13:54:54local storage when we open the page if
13:54:57the cart doesn't exist we're going to
13:54:58give it a default value and we created a
13:55:01function to save the cart into local
13:55:04store
13:55:04stage so now let's add a message to
13:55:07describe our
13:55:08changes save cart in local storage and
13:55:19commit and that's the end of this lesson
13:55:22in this lesson we learned about modules
13:55:25which is a better way to organize our
13:55:28code we created the checkout page in our
13:55:31final project we learned about HTML link
13:55:34elements and radio selectors we made the
13:55:37delete link interactive and we saved the
13:55:41cart in local
13:55:43storage here are some exercises to help
13:55:46you practice what we learned in this
13:56:03lesson e
13:56:38in this lesson we're going to learn
13:56:39about external libraries and we're going
13:56:42to finish the checkout page in our final
13:56:44project an external library is basically
13:56:47just code that is outside of our
13:56:50project so far we've only been using
13:56:53Code that is inside our project like
13:56:56these
13:56:57files well a lot of developers write
13:57:00JavaScript code and then put their code
13:57:02on the internet and we can actually load
13:57:05their code from the internet into our
13:57:08project and use it we call this code an
13:57:11external library because it's code that
13:57:14is outside of our project Let's do an
13:57:17example and load our first external
13:57:20Library we're going to go to the video
13:57:22description and we're going to click
13:57:24this
13:57:29link for the hello external Library
13:57:37and it will open up a page that contains
13:57:40JavaScript code so I actually wrote this
13:57:42code myself and you'll notice that this
13:57:44is just normal JavaScript code we create
13:57:47a function called hello and it just
13:57:50console.log hello so this is called an
13:57:53external Library it's code that is
13:57:56outside of our project so the cool thing
13:57:59is we can actually load this code from
13:58:02the internet into our project so let's
13:58:06give that a try we're going to go to our
13:58:09project and we're going to open
13:58:11checkout.
13:58:12HTML and we're going to scroll to the
13:58:15bottom and above the script tag we're
13:58:18going to add another script tag to load
13:58:21some code so
13:58:24script and we'll give it a source
13:58:27attribute and then in here instead of
13:58:30using a fth like we've done before we're
13:58:33going to give this a a URL of a website
13:58:35that contains JavaScript code so if we
13:58:38go back to our
13:58:40browser and here the URL of this page is
13:58:44up here so we're just going to copy this
13:58:47right click copy and then paste it into
13:58:50our
13:58:51code right click and
13:58:55paste so now the computer will get all
13:58:58the JavaScript code from this URL or
13:59:00from this
13:59:02page so it's going to get all the code
13:59:04from this page and load it into our
13:59:07project like normal code so let's save
13:59:11and let's give this a
13:59:13try so this code creates a function
13:59:15called hello so let's try running this
13:59:18hello function in our project we'll go
13:59:21to checkout. JS and then scroll to the
13:59:25top and then here let's just run the
13:59:28function hello so hello and brackets and
13:59:33Save
13:59:35now if we go back to our
13:59:36project go to the checkout page and
13:59:40check the console right click inspect
13:59:44and the console you'll see that it
13:59:46displayed the message
13:59:48hello so that's how an external Library
13:59:51works it's just code that is outside of
13:59:54our project and we can load this code
13:59:57using a script tag like this we just
14:00:00give it the URL of where this code is
14:00:03located
14:00:04so there's two things you might be
14:00:05wondering about how come we put the
14:00:07script tag at the top so generally we
14:00:10load external libraries first and then
14:00:13we can use the library in our own code
14:00:16below and the second thing is how do you
14:00:19put code on the internet like this to
14:00:22learn this you can check out my video on
14:00:24how to put a website on the internet
14:00:27it'll show you how to put any file like
14:00:29HTML CSS and JavaScript files onto a
14:00:33website like this
14:00:34this next let's talk about why we use
14:00:37external libraries external libraries
14:00:40let us share code instead of writing all
14:00:43the code ourselves we can use code that
14:00:46other people wrote and this helps us
14:00:48save time and avoid duplicating work
14:00:52right now we're loading a very simple
14:00:54Library so let's load a more complex
14:00:56library to show how we can save a lot of
14:00:58time and work let's go back to our
14:01:02project and go to the checkout
14:01:05page here we have a section for choosing
14:01:08a delivery option for this product and
14:01:11you'll notice that each option has a
14:01:13date so this is the date that the
14:01:15product should be delivered by so the
14:01:18way this works is that the cheapest
14:01:20option here takes 7 days to deliver the
14:01:24$4.99 option takes 3 days to deliver and
14:01:27the
14:01:28$9.99 option takes one day to deliver so
14:01:32to get these dates here we need to do
14:01:35three things first we need to somehow
14:01:37get today's date in our JavaScript
14:01:41number two we need to do calculations
14:01:43with the date such as ADD seven days or
14:01:46add 3 days and number three we need to
14:01:49display the date in an easyto read
14:01:52format like
14:01:53this now we could try to figure out how
14:01:56to do this ourselves by writing our own
14:01:58code but this is going to be a lot of
14:02:00work instead we can use an external
14:02:03Library to help us work with dates so in
14:02:06this project we're going to use an
14:02:08external Library called DJs this is a
14:02:11popular library that helps us work with
14:02:14dates so first let's load DJs into our
14:02:19project we're going to go to the video
14:02:21description and we'll click this
14:02:28link for the DJs external Library
14:02:35and when the page opens you'll see a
14:02:37bunch of random code here now you might
14:02:40think that this is some special code but
14:02:42this is actually just regular JavaScript
14:02:44code that has been compressed so
14:02:47basically all the extra spaces have been
14:02:49removed and the variable names have been
14:02:51shortened to one
14:02:53letter we can press JavaScript code like
14:02:56this because we need to load this code
14:02:58from the internet into our project by
14:03:02compressing it it makes this code
14:03:04smaller so it will load into our project
14:03:06faster so this compression process is
14:03:09called minification or we Minify the
14:03:14code okay so this is the code for the
14:03:17external Library DJs now let's load this
14:03:20code into our project we'll go back to
14:03:23our
14:03:24code and then go to checkout.
14:03:27HTML and then here we're going to add
14:03:29another script tag less than script and
14:03:33the source
14:03:36attribute and then here we're going to
14:03:38give it the URL of the code we want to
14:03:41load so let's go back to the code for
14:03:43DJs and then up here we're going to
14:03:46rightclick and copy this
14:03:49URL and then inside our code in the
14:03:52source attribute we're going to
14:03:53rightclick and paste the
14:03:56URL and
14:03:57save so again this will take all the
14:04:00code that's located on this page and
14:04:03then load it into our
14:04:05project now let's give it a try the DJs
14:04:09external Library creates a function
14:04:11called
14:04:12DJs so we'll go to checkout. JS and then
14:04:16at the top we're going to run the JJs
14:04:20function and
14:04:22brackets now make sure this is all
14:04:24lowercase cuz that's the name that the
14:04:26library used so now let's actually
14:04:29console.log the result of this function
14:04:32console.log
14:04:36and
14:04:37save and we'll go back to our project in
14:04:41the checkout page we're going to check
14:04:42our
14:04:45console and you'll see that the DJs
14:04:47function gives us an object and this
14:04:50object represents the current date and
14:04:52time so we know that DJs is working and
14:04:56that's it we successfully loaded the DJs
14:04:59external Library into our
14:05:02project now let's learn how to use
14:05:05DJs external libraries usually have a
14:05:08documentation page that shows us how to
14:05:10use the library we can find the
14:05:12documentation Page by searching on
14:05:14Google the library name like DJs and
14:05:18then documentation or we can ask an AI
14:05:21tool how to use the library to make
14:05:23things easier in this video I'm going to
14:05:25show you the features that we need and
14:05:27you can go through the documentation
14:05:29later if you want so earlier we said we
14:05:32needed to do three things with the date
14:05:35first we want to get today's date number
14:05:38two we want to do calculations with the
14:05:40date and number three we want to display
14:05:42the date in an easyto read format DJs
14:05:46helps us do all of these things so first
14:05:49let's use DJs to get today's date
14:05:52according to the documentation to get
14:05:54the current date and time we can just
14:05:57use the DJs function like
14:06:01this so if we go back to our code
14:06:04and that's what we have here we call DJs
14:06:07and it gives us an object that
14:06:08represents the current date and time the
14:06:11second thing we need to do is to do
14:06:13calculations with the date so for the
14:06:16delivery options here we need to
14:06:18calculate today's date plus 7 days or
14:06:22today's date plus 3 days so again the
14:06:25DJs Library can help us do
14:06:28this so let's go back to our
14:06:31console and look at the object that we
14:06:33get back from DJs so this object
14:06:37represents today's date and time and
14:06:40this object also has a method called add
14:06:43which adds a certain amount of time to
14:06:45this date so this is what we need for
14:06:48the project to calculate these dates
14:06:51here let's go to our
14:06:53code and first let's save this result in
14:06:57a variable so we're going to remove this
14:07:00and create a variable const today
14:07:04equals
14:07:06DJs and then down here we're going to
14:07:08use the add method so we'll type
14:07:12today. add and
14:07:14brackets now the add method takes two
14:07:18parameters the first one is the number
14:07:20of time that we want to add so if we
14:07:23want to add seven days we're going to
14:07:25type seven and then the second parameter
14:07:28is the length of time that we want to
14:07:30add so if we want to add seven days
14:07:33we're going to give it a string days so
14:07:37this will add seven days to today's
14:07:41date so let's save this result in a
14:07:43variable const delivery date equals this
14:07:49result and we'll console.log it to make
14:07:51sure it's working correctly
14:07:55console.log the delivery date and
14:07:59save now if we go back to our project
14:08:02and open the
14:08:04console it will give us an object that
14:08:07represents 7 days after to date or 7
14:08:10days after when you're watching this
14:08:14video so that's how we use DJs to do
14:08:16calculations with the date it gives us
14:08:19methods like add to add a certain amount
14:08:21of time to the date finally we're going
14:08:25to use DJs to display this date in an
14:08:28easyto read format like
14:08:31this so according to the document
14:08:34this date object has another method
14:08:36called format which will display the
14:08:39date in an easyto read format so let's
14:08:43go back to our
14:08:45code and we'll remove the
14:08:48console.log and we'll type delivery
14:08:52date.
14:08:55format and then inside these brackets
14:08:58we're going to give this method a string
14:09:01so this string tells DJs what kind kind
14:09:03of format we want for the date so in the
14:09:06documentation it has a table showing us
14:09:09some special characters we can put into
14:09:11this string for example if we want to
14:09:14show the day of the week like Monday or
14:09:17Tuesday we can type four D's into the
14:09:20string and this will give us a string
14:09:23where this text is replaced by the
14:09:25actual day of the
14:09:27week if we want to add a comma and a
14:09:30space to this format we can just add a
14:09:32comma and space and this will show up
14:09:35directly in the result now let's say
14:09:37that after this we want to show the
14:09:40month according to the documentation to
14:09:43show the month we can type for Capital
14:09:47M's and it will replace this with the
14:09:50month and finally we'll type a space and
14:09:54according to the documentation if we
14:09:56want to insert the day of the month into
14:09:59the string we can type a capital D
14:10:03so this method takes this date and
14:10:06converts it into a string with this
14:10:08format so now let's console.log this to
14:10:11see what it looks like well
14:10:15console.log and
14:10:17brackets and
14:10:19save and then go into our project and
14:10:22open the
14:10:24console and now you should see the date
14:10:277 days after today but displayed in an
14:10:30easyto read format
14:10:33so that's how we use the DJs external
14:10:36library to help us work with dates and
14:10:39as you can see it saves us a lot of time
14:10:41and work we don't have to figure out how
14:10:43to work with dates ourselves we can just
14:10:46use someone else's code to solve this
14:10:49problem so a best practice in
14:10:51programming is when we need to do
14:10:53something complicated try to find an
14:10:55external Library first before writing
14:10:58the code
14:10:59ourselves to find external libraries we
14:11:03can you can search in Google JavaScript
14:11:05and then what kind of Library we're
14:11:07looking for like date
14:11:10Library we can also use an AI tool to
14:11:13help us find external
14:11:16libraries next we're going to learn how
14:11:18to use external libraries and JavaScript
14:11:21modules together right now if we look at
14:11:24our code and go to checkout.
14:11:28HTML we're loading these libraries using
14:11:31script tags the problem with script tags
14:11:34is that it runs this code directly on
14:11:36the page and this might cause naming
14:11:39conflicts for example the hello Library
14:11:42creates a function called hello so if
14:11:45something else is called hello in any of
14:11:47our other code it might cause a naming
14:11:50conflict a better way to load external
14:11:53libraries is to use JavaScript modules
14:11:56because a module will contain this code
14:11:59inside a file and any variables that are
14:12:02created inside inside the file will not
14:12:04conflict with anything outside of the
14:12:08file to use external libraries and
14:12:11JavaScript modules together we're going
14:12:13to use a special version of the library
14:12:16called an esm version esm stands for
14:12:20ecmascript modules ecmascript is just
14:12:23another name for JavaScript so the esm
14:12:26version of a library is just a version
14:12:28that works with JavaScript
14:12:31modules so let's do an example we're
14:12:34going to go to the video description and
14:12:37we're going to open the esm version of
14:12:48hello.js so you can see that it's the
14:12:50exact same code as before we're creating
14:12:53a function called hello except this time
14:12:56I just added the word export in front of
14:12:58function so this turns the library into
14:13:01an esm version and now it will work with
14:13:04JavaScript modules so let's use the esm
14:13:08version in our code we're going to go
14:13:10back to our
14:13:11code and we're not going to use script
14:13:14tags to load this anymore so let's
14:13:16delete
14:13:17this and
14:13:19save and then in checkout. JS at the top
14:13:24we're going to use an import to import
14:13:26this function into our code so we'll
14:13:29type import curly brackets we'll import
14:13:33the function
14:13:35hello and we're going to import it from
14:13:38a string and then this time instead of
14:13:42giving it a file path like before we're
14:13:44going to give it a URL that contains our
14:13:47code so on the web page we're going to
14:13:51rightclick and copy the URL at the top
14:13:54and then inside our code in here we're
14:13:57going to rightclick and
14:13:59paste so this import works the same way
14:14:02as before before except now the codee is
14:14:05coming from the internet rather than one
14:14:07of our files so let's
14:14:10save and then go back to our project and
14:14:14check the
14:14:15console and you can see that everything
14:14:17is still
14:14:19working so that's how we use external
14:14:21libraries and JavaScript modules
14:14:23together we just load the esm version of
14:14:27the library and we use import as normal
14:14:30except this time we're importing from
14:14:32code that is on the
14:14:35internet next let's use DJs with
14:14:38JavaScript modules to do that we're
14:14:41going to load the esm version of DJs so
14:14:44we're going to go to the video
14:14:45description and click this link for the
14:14:48DJs esm
14:14:58version and now we're going to load this
14:15:00code into our project so let's go back
14:15:03into our codee and first let's open
14:15:07checkout.
14:15:08HTML and we're going to remove this
14:15:10script tag because we're going to load
14:15:12this with JavaScript modules so let's
14:15:15save and then go into checkout. JS and
14:15:19then at the top we're going to import
14:15:21from the DJs esm version so we'll
14:15:25import and we're going to use a slightly
14:15:28different syntax we're just going to
14:15:30type
14:15:31DJs without the curly brackets and then
14:15:35we'll type from a
14:15:38string and we're going to give it the
14:15:40URL that contains the code so we'll go
14:15:43to our
14:15:44browser and then click the URL at the
14:15:46top we're going to right click
14:15:50copy and then in our code inside these
14:15:53quotes rightclick and
14:15:56paste and
14:15:59save so now let's open our project and
14:16:02take a look at the the console to make
14:16:03sure it works so we'll right click
14:16:07inspect the
14:16:09console and everything is still working
14:16:12so that's how we use the DJs external
14:16:15library with JavaScript modules so
14:16:18before we continue we're going to learn
14:16:20about this new syntax that we used here
14:16:23so this syntax is called a default
14:16:26export a default export is another way
14:16:29of exporting something from a file we
14:16:32can use it when we only want to export
14:16:34one thing from a file and it makes the
14:16:37syntax a little bit cleaner because we
14:16:39don't have to type the curly brackets so
14:16:42let's do an example of a default export
14:16:44to see how it works we're going to open
14:16:47the utils folder and open money.
14:16:50JS and at the bottom we're going to
14:16:53create a default export by typing
14:16:57export default and then whatever we want
14:17:00to export so let's say we want to export
14:17:03this function here so we just type the
14:17:05name of the function format
14:17:09currency and
14:17:11save and now when we import this we can
14:17:14just import the name without the curly
14:17:17brackets so the syntax is a little bit
14:17:20cleaner now each file can only have one
14:17:23default export so if we only want to
14:17:25export one thing from a file this is
14:17:28another syntax that we can
14:17:31use so some people like using default
14:17:34exports because they feel that exporting
14:17:36only one thing from a file makes the
14:17:38code cleaner however in your own code
14:17:41it's up to you which version of export
14:17:44you want to
14:17:45use let's go back to checkout.
14:17:49JS and then here the DJs Library only
14:17:53exports one thing which is the DJs
14:17:56function so they chose to use a default
14:17:59export instead of a normal export that
14:18:01we were using before
14:18:03by the way the syntax up here with the
14:18:05curly brackets is called a named
14:18:08export so when we use external libraries
14:18:11in the future some libraries will use
14:18:14named exports like this and other
14:18:16libraries will use a default export like
14:18:19this so it's useful to know both
14:18:22syntaxes so that's how we use external
14:18:24libraries and JavaScript modules
14:18:26together we just import from the esm
14:18:29version of the library now keep in mind
14:18:32that not every library has an esm
14:18:34version so for some libraries we still
14:18:37have to use a script
14:18:39tag okay now that we learned external
14:18:41libraries let's do some practical
14:18:44examples we're going to go back to the
14:18:46checkout page and we're going to use DJs
14:18:49to create the delivery options here so
14:18:52the way this works is that we can select
14:18:54one of three delivery options when we
14:18:57click an option it should change the
14:18:59delivery date up here and it should
14:19:02change the prices on the right side so
14:19:05let's get started as always we're going
14:19:07to do three steps first we're going to
14:19:10save the data and then we're going to
14:19:12generate the HTML and finally we're
14:19:15going to make it interactive so first
14:19:18what data do we need to save for this
14:19:20section well each delivery option has a
14:19:23delivery time like 7 days or 3 days and
14:19:27each option also has a
14:19:29price so right now here's what our cart
14:19:33looks like now we could save the
14:19:35delivery option details inside the cart
14:19:38like this however notice that this data
14:19:41gets duplicated for each product in the
14:19:43cart instead we're going to save the
14:19:46delivery options
14:19:47separately and then just save an ID that
14:19:50points to the delivery
14:19:53option as a reminder this technique is
14:19:56called normalizing the data we save the
14:19:59delivery options separately and then we
14:20:01just save an ID
14:20:03that points to the full delivery
14:20:06option so let's create the data for the
14:20:08delivery options we'll go into our code
14:20:12and then in the data folder let's create
14:20:15a new file for this and we're going to
14:20:17name this file delivery options. JS and
14:20:22press
14:20:23enter and in here we'll create a list of
14:20:26delivery options that we can pick from
14:20:29we'll create a variable const delivery
14:20:33options equals and array because we want
14:20:36a list and then each delivery option is
14:20:39going to have multiple values like the
14:20:42time to deliver as well as the price so
14:20:45we're going to make each of them an
14:20:46object to group these values together so
14:20:50I'm going to rearrange my windows here
14:20:52so that we can see the data that we're
14:20:53trying to save and we can actually close
14:20:56these tabs for now
14:21:03so here let's save the data for the
14:21:05first delivery
14:21:06option first let's give it an ID
14:21:10property because as we mentioned we're
14:21:12going to save the ID in the cart and
14:21:14then we're going to use that ID to get
14:21:16the full delivery option here so to keep
14:21:20things simple let's just give it a
14:21:22string and an ID of
14:21:24one and then we're going to give it
14:21:26another property and we're going to save
14:21:28the delivery time so for the first
14:21:31option it's going to take seven days to
14:21:33deliver so let's create a property
14:21:37delivery days colon 7 and comma and
14:21:42we're also going to save the price so
14:21:45this one is free so we're going to save
14:21:47the price cents and zero remember that a
14:21:52best practice when calculating money is
14:21:54to save it in
14:21:56cents and next let's save the data for
14:21:59the second delivery option here we'll
14:22:01type a comma and another object and
14:22:04let's give it an ID of two this time and
14:22:09this one is going to take three days to
14:22:11deliver so we'll type delivery days
14:22:15colon 3 and we'll give it a price cents
14:22:19and this one is
14:22:21$4.99 so
14:22:23$4.99 and then finally we're going to
14:22:26save the data for the third delivery
14:22:27option comma another object ID of three
14:22:33and this one is going to take one day to
14:22:35deliver so we'll type delivery days
14:22:39colon 1 comma and the price sense is
14:22:43$9.99 so price sense 999 and
14:22:50save so now that we've created our
14:22:52delivery options for each product in the
14:22:55cart we're going to save the ID of the
14:22:58delivery option that's selected so for
14:23:00example here we selected the first First
14:23:02Option we're going to save an ID of one
14:23:05in our cart so let's go back into our
14:23:08code and we're going to open the
14:23:14cart so here in the default cart we're
14:23:17going to save the delivery option ID
14:23:23colon and let's say that the first
14:23:25product selected the first delivery
14:23:27option so we're going to save the ID one
14:23:31and then for the second product we're
14:23:34also going to save a delivery option ID
14:23:38colon and then let's say that for the
14:23:40second product we chose the second
14:23:42delivery option here so here we're going
14:23:45to give it an ID of
14:23:48two next when we add a product to the
14:23:51cart we also need to give it a delivery
14:23:53option ID so if we scroll down to the
14:23:56add to cart function here we're adding a
14:23:59product to the cart so when we add a new
14:24:02product we also want to give it a
14:24:03delivery option ID so we'll type
14:24:06delivery option ID colon and for new
14:24:11products let's give it a default
14:24:13delivery option of one so for new
14:24:16products to select the first one and now
14:24:19let's
14:24:20save and lastly we might have a cart
14:24:23that is saved in local storage so we'll
14:24:26need to add the delivery option ID to
14:24:29local storage as well but to keep things
14:24:31simple let's just do a shortcut we're
14:24:34going to delete the cart in local
14:24:36storage and then it will go back to
14:24:38using this default value which has the
14:24:40delivery option
14:24:42IDs so to delete the cart from local
14:24:44storage we're going to go into our page
14:24:47and open the console right click
14:24:51inspect the
14:24:53console and we're going to type local
14:24:58storage. remove item brackets and the
14:25:02cart and press
14:25:05enter so this will erase the cart from
14:25:07local storage and it will use those
14:25:09default values so now let's go to our
14:25:12page and
14:25:14refresh and it should be using the
14:25:16default cart so that's how we save the
14:25:19data for the delivery
14:25:22options by the way in the rest of this
14:25:25course if you get an error in your
14:25:27project but your code looks correct you
14:25:30may have some bad data saved in local
14:25:33storage to fix this you can try running
14:25:37local storage. CLE in your console to
14:25:40remove everything from local
14:25:42storage and then refresh the
14:25:48page the next step is to generate the
14:25:52HTML first let's find the HTML for the
14:25:55delivery options here to do that we can
14:25:58rightclick this part of the page and
14:26:01inspect
14:26:03and this will give us the HTML for this
14:26:05part so we're going to find the element
14:26:08that represents this part of the page
14:26:10and that's this one right here it's a
14:26:12div with the class delivery Das options
14:26:15and to find this in our code we're going
14:26:17to search for this class so let's go
14:26:19back to our
14:26:21code and then we're going to open
14:26:23checkout. JS which is right
14:26:26here and we'll press crlf or command F
14:26:30to find code and we're going to look for
14:26:32the class delivery Das
14:26:35options and it will give us this code
14:26:38right here so this is the HTML for the
14:26:41delivery
14:26:42options so now instead of writing this
14:26:45HTML directly we're going to generate
14:26:47this with
14:26:48JavaScript to keep our code organized
14:26:51let's create a function for generating
14:26:53this
14:26:54HTML we'll scroll to the
14:26:57bottom and then here we'll create a
14:27:01function and let's call it delivery
14:27:04options
14:27:06HTML brackets and curly
14:27:10brackets and now inside here we're going
14:27:12to do three steps first we're going to
14:27:15Loop through the delivery options we
14:27:17created earlier and then for each option
14:27:20we're going to generate some HTML and
14:27:22then finally we're going to combine all
14:27:24the HTML together so first let's import
14:27:28the delivery options at the top so we'll
14:27:30scroll up and we're going to
14:27:34import curly brackets from quotes and
14:27:39we're going to locate the delivery
14:27:40options file which is inside the data
14:27:43folder so first we need to get out of
14:27:45the scripts folder we'll type dot do
14:27:47slash and then go into the data folder
14:27:51slash delivery options. JS and we're
14:27:55going to import the delivery
14:27:59options now one thing I forgot to do is
14:28:02that inside these delivery options we
14:28:04need to make sure that we export this
14:28:06variable so we're going to type export
14:28:10and
14:28:11save and we'll go back to checkout. JS
14:28:15and then here we're going to Loop
14:28:17through the delivery options below so
14:28:19we'll scroll back
14:28:21down to this new
14:28:24function and type delivery options. for
14:28:30each brackets and a function
14:28:35inside and we'll name the parameter
14:28:38delivery
14:28:40option so for each delivery option we're
14:28:43going to generate some HTML so let's use
14:28:46a template string to save the
14:28:48HTML and then we're going to scroll up
14:28:51and we're going to find the class
14:28:53delivery Das option so this is the HTML
14:28:57for one delivery option so we're just
14:28:59going to copy this HTML into our Java
14:29:02JavaScript below so we'll right click
14:29:06copy and then down here inside the
14:29:10string give some new lines and
14:29:13rightclick and
14:29:15paste and if we need to reformat we can
14:29:18select these lines and press
14:29:26tab okay now when we're generating the
14:29:29HTML instead of using the same date
14:29:31every time we're going to calculate the
14:29:34date using DJs and then insert it into
14:29:38here to calculate the date we're going
14:29:40to get today's date first using
14:29:43DJs so up here let's create a variable
14:29:47const today
14:29:49equals and according to the
14:29:51documentation to get today's date we can
14:29:54just call the DJs function so we'll type
14:29:58DJs and
14:30:00brackets next
14:30:02each delivery option takes a certain
14:30:04amount of days to deliver so we need to
14:30:07add that to today's date to do that we
14:30:10have a method called add So Below this
14:30:14let's create a variable to save the
14:30:16result const delivery date
14:30:21equals
14:30:23today. add
14:30:27brackets and we're going to give it two
14:30:29parameters the first parameter is how
14:30:31many dat days we want to add and this is
14:30:34saved in the delivery option so here
14:30:37we'll give it the delivery option dot
14:30:41delivery days
14:30:44comma and then we'll give it the length
14:30:46of time we want to add which is a string
14:30:50days now that we calculated the correct
14:30:53delivery date we need to display it in
14:30:56an easyto read format and again DJs has
14:31:00a method called format that Let's us do
14:31:03this so below let's create a variable
14:31:06const and we'll call it date string and
14:31:10make it equal to delivery
14:31:14date.
14:31:15format brackets and will give it a
14:31:19string so the format we want is we want
14:31:23to insert the day of the week so
14:31:26according to the documentation we can
14:31:28use
14:31:294ds and then a comma and a space and
14:31:33then we want to insert the month and
14:31:35according to the documentation that's 4
14:31:38Capital
14:31:39M's and finally we're going to insert
14:31:41the day of month which is capital
14:31:44D so now that we calculated this date
14:31:47string we're going to insert it into the
14:31:50HTML instead of using the same date
14:31:52every time so we'll remove this and then
14:31:56insert the date
14:31:59string next let's insert the price
14:32:02because it's going to be different
14:32:03prices every time so at the
14:32:06top let's create a variable const and
14:32:10we'll call it price string and make it
14:32:14equals and remember each delivery option
14:32:17has a property price sense so if the
14:32:19price ense is zero we want to display
14:32:22the text free if the price sense is not
14:32:25zero we want to display the price as
14:32:27dollars with a
14:32:29dash so to do that let's practice using
14:32:32a Turner operator so first we'll check
14:32:35if the price sense is zero so we'll type
14:32:38delivery option. price sense is triple
14:32:44equals to
14:32:45Z and then we'll type a new line and
14:32:48question mark and also a new line and
14:32:51colon so remember the way that a Turner
14:32:54operator works is that if the first part
14:32:57returns true the value is whatever is
14:33:00after this question Mark if the first
14:33:03part is false then the value is whatever
14:33:05is after the colon so it's sort of like
14:33:08an if statement except we can save the
14:33:10result in a
14:33:12variable so if the price sense is zero
14:33:15that means it's free so we want to
14:33:17display the text free so we'll create a
14:33:20string
14:33:22free and if the price sense is not zero
14:33:25we want to display the price as dollars
14:33:29so here we're going to type a template
14:33:31string a dollar sign and we're going to
14:33:34insert the price sents as
14:33:37dollars so here we'll type delivery
14:33:40option. price sense and to display this
14:33:44as dollars we already have a function
14:33:46for this called format currency so at
14:33:50the front we're just going to type
14:33:52format
14:33:54currency Open Bracket and close
14:33:58bracket and then at the end let's add a
14:34:00dash so here we'll add space and dash
14:34:05and
14:34:06semicolon so that's how we create the
14:34:09price string for each delivery option so
14:34:12now let's substitute this into the HTML
14:34:15so we'll remove this and substitute the
14:34:20price string and
14:34:25save so now instead of using these same
14:34:28values every time we're substituting the
14:34:30values in into the
14:34:32HTML finally let's combine all this HTML
14:34:36together so we're going to scroll up to
14:34:38the top and outside of this loop we're
14:34:41going to create a variable to save the
14:34:43result so let HTML equals empty string
14:34:47to start and then every time we Loop
14:34:50through we're going to add this HTML to
14:34:53this result so here we're going to type
14:34:56HTML plus
14:34:58equals and finally after we've created
14:35:01this HTML we're going to return it from
14:35:04this function so at the bottom we're
14:35:07just going to return the
14:35:09HTML and
14:35:12save now that we generated the HTML for
14:35:15the delivery options let's insert this
14:35:18into the HTML
14:35:21above so instead of creating this HTML
14:35:23directly we're going to delete it
14:35:32and then here we're going to insert and
14:35:35we're going to run this function to
14:35:37generate it so here we're going to type
14:35:40delivery options HTML and
14:35:45brackets now before we save one thing
14:35:48that we're missing in this function is
14:35:50that if we scroll down here we're using
14:35:53a variable called matching product but
14:35:56this variable is not accessible inside
14:35:59this function so let's actually pass the
14:36:01matching product into here so at the top
14:36:05we're going to add a parameter matching
14:36:09product and then when we call this
14:36:11function up here we're going to pass in
14:36:14the matching product so matching product
14:36:19so now let's
14:36:20save and check our page and now we're
14:36:24generating the HTML for these delivery
14:36:27options and you'll notice that your
14:36:29delivery dates here will be based on
14:36:31today's date or when you're watching
14:36:34this video so this will be 7 days after
14:36:37today or 7 days after when you're
14:36:39watching this video this will be 3 days
14:36:42after today or 3 days after when you're
14:36:45watching this video and this will be one
14:36:47day after
14:36:49today now one thing we need to fix here
14:36:52is that these selectors are empty
14:36:54however we want the delivery option that
14:36:57is saved in the cart to be checked to do
14:37:00that let's go back to our
14:37:02code and in order to make one of these
14:37:05selectors selected we're going to scroll
14:37:08down to the input
14:37:11element and we're going to add an
14:37:13attribute called
14:37:16checked and this attribute makes a
14:37:19selector
14:37:20checked however we don't want all of
14:37:22these delivery options to be checked we
14:37:25only want it to be checked if it matches
14:37:27the delivery option ID that is saved in
14:37:30the cart so let's write some code up
14:37:32here to figure out which delivery option
14:37:35should be checked we're going to create
14:37:37a variable const is
14:37:41checked
14:37:43equals and we only want it to be checked
14:37:46if this delivery options ID matches the
14:37:49delivery option ID in the cart so we'll
14:37:53test if delivery option. ID is equal to
14:37:59the cart item
14:38:02do delivery option
14:38:06ID now inside this function we actually
14:38:09don't have access to cart item so let's
14:38:12actually pass it in as a parameter cart
14:38:16item up here and then when we call the
14:38:19function this outer function has access
14:38:22to the cart item so we're going to give
14:38:24it the cart item so we're going to put
14:38:28it into this function and then we can
14:38:30use it down here
14:38:32so now that we have this
14:38:34variable instead of being checked all
14:38:37the time we're going to remove this and
14:38:40insert and we're going to use a tary
14:38:42operator here is
14:38:46checked question mark and colon so we
14:38:50can also use a ternary operator when
14:38:52we're inserting into a string so again
14:38:55if this is true it's going to get the
14:38:58value after the question mark So if it
14:39:00is checked we're going to give it the
14:39:02value
14:39:05checked if this is false we're going to
14:39:08give it the value of empty string so
14:39:11it's the same thing as if this attribute
14:39:13didn't exist so now if we
14:39:16save you'll notice that the correct
14:39:18delivery option is checked for each
14:39:20product the first product we saved
14:39:23delivery option one and the second
14:39:25product we say delivery option
14:39:28two finally let's replace this date at
14:39:31the top with the delivery date that we
14:39:33selected
14:39:35here we'll go back to our
14:39:37code and we'll scroll to the
14:39:41top until we see this date in our code
14:39:44here so now we're going to calculate
14:39:47this date using the delivery option that
14:39:49we picked so remember that inside the
14:39:52cart we only saved the delivery option
14:39:54ID so let's use this to get the full
14:39:57delivery
14:39:58option so at the top here let's get the
14:40:01delivery option ID out of the cart const
14:40:06delivery option ID equals cart item.
14:40:11delivery option
14:40:16ID next we're going to use this ID to
14:40:19find the full delivery option now we did
14:40:22something similar with the product ID we
14:40:25Loop through the products found a
14:40:26matching ID and then saved it in a
14:40:28variable up here so we'll do the same
14:40:31let's create a variable to store the
14:40:33result let
14:40:35delivery option and then we're going to
14:40:38Loop through the delivery options so
14:40:41delivery options. for each brackets and
14:40:46a
14:40:47function and let's name the parameter
14:40:51option because we use the name delivery
14:40:53option up here so in here we're going to
14:40:56look for a matching ID so if this option
14:41:01ID is equal to the delivery option ID
14:41:09here we're going to save this inside
14:41:12this variable so delivery option equals
14:41:16option so now we have the full delivery
14:41:19option in our code and we can use it to
14:41:21get the delivery days property and then
14:41:24calculate the day that we need
14:41:26here to calculate this state we already
14:41:29wrote some code for this at the bottom
14:41:32if we scroll down in our
14:41:34code when we created the delivery
14:41:37options we calculated the date for each
14:41:39delivery option so we can reuse this
14:41:42code above so let's select this code and
14:41:46then right
14:41:47click
14:41:49copy and then at the
14:41:52top after we get the delivery option
14:41:56we're just going to rightclick and paste
14:41:58that code again
14:42:02and if we need to we can reformat by
14:42:04selecting these lines and press shift
14:42:07tab so this code will take the delivery
14:42:10option that we selected and calculate
14:42:12the delivery date that we need to show
14:42:14down here and now instead of using the
14:42:18same date every time we're going to
14:42:20remove this and insert the date string
14:42:23that we created Above So date string and
14:42:28save so now this date string up here
14:42:32will match the delivery date that we
14:42:34chose on the right side so that's how we
14:42:38generate the HTML for the delivery
14:42:40options using the DJs external Library
14:42:44so now let's take a look at our changes
14:42:46in git we'll go to our code and open the
14:42:50git
14:42:54section and here it'll tell us in cart.
14:42:57JS we added delivery option IDs to the
14:43:00cart
14:43:01as well as when we add to the
14:43:03cart and then in this file we created
14:43:06the list of delivery
14:43:11options and in checkout. JS instead of
14:43:14writing this HTML directly we generated
14:43:16it and then in money. JS we learned
14:43:20about default exports so let's type a
14:43:23message to describe our changes save
14:43:26data and generate HTML for for delivery
14:43:33options and
14:43:39commit the last step is to make it
14:43:43interactive so when we click a delivery
14:43:46option we need to do two things first we
14:43:49need to update the delivery option ID in
14:43:52the cart array and number two we need to
14:43:55update the page so we need to update
14:43:58this date here to match the date that we
14:44:00select
14:44:02let's start with the first step let's
14:44:04create a function for updating the
14:44:06delivery option in the cart we're going
14:44:09to go to our
14:44:10code and we're going to open the file
14:44:13called cart.
14:44:15JS so because we're modifying the cart a
14:44:19best practice is to put the code inside
14:44:21this file this file should contain all
14:44:23the code that manages the cart so we're
14:44:26going to scroll down to the bottom and
14:44:28we're going to add a new function so
14:44:31let's type function and let's name it
14:44:34update
14:44:36delivery option brackets and curly
14:44:40brackets so when we update a delivery
14:44:42option we need to know the product that
14:44:45we want to update as well as the
14:44:46delivery option that we chose so we're
14:44:49going to need two things for this
14:44:50function the product ID and the delivery
14:44:56option
14:44:59ID so the steps to do this is first
14:45:03we're going to Loop through the cart and
14:45:05find the product and then we're going to
14:45:07update the delivery option ID of that
14:45:10product so to find the product using the
14:45:13product ID we already have some code for
14:45:16this if we scroll up to the add to cart
14:45:20function we have this code which takes a
14:45:22product ID and finds the matching
14:45:25product in the cart so let's just make a
14:45:27copy of this code we're going to select
14:45:29it right click
14:45:31copy and then paste it into our new
14:45:34function so down here right click and
14:45:39paste so this will give us the card item
14:45:42that matches this product ID and save it
14:45:44in this
14:45:45variable next each card item has a
14:45:49property called delivery option ID so
14:45:51we're just going to update that property
14:45:54so down here we can just type the code
14:45:57matching item. delivery op option ID and
14:46:02make it equal to the delivery option ID
14:46:05that we give to this function so
14:46:07delivery option
14:46:10ID and lastly because we updated the
14:46:13cart we should save it to local
14:46:15storage so we can use this function we
14:46:18created earlier save to
14:46:22storage and brackets now let's
14:46:26save now that we have this function
14:46:28let's use it on the checkout page so
14:46:31first let's export it so we can use this
14:46:33in another file we're going to export
14:46:36this
14:46:36function and
14:46:39save and then open checkout.
14:46:43JS and then in our project we need to
14:46:46add event listeners to each of these
14:46:48delivery options so we run some code
14:46:50when we click them so inside our code
14:46:53here we're going to scroll to the HTML
14:46:55for each delivery option which is right
14:46:58here and then we're going to add a class
14:47:01so we can select it using the Dom js-
14:47:04delivery D option and then we'll add an
14:47:08event listener to these so we'll scroll
14:47:11down and down here we'll add the event
14:47:13listener using
14:47:15document. query selector all brackets
14:47:20and a string will'll select that class
14:47:23we just created using dot js- delivery D
14:47:28option
14:47:31and then dot for each brackets and a
14:47:37function so for each option we're going
14:47:40to add an event listener and listen for
14:47:42clicks so let's just call each of the
14:47:44options an
14:47:47element so for each of these elements
14:47:49we're going to element.
14:47:53addevent listener brackets and we're
14:47:56going to listen for clicks comma and
14:47:59we're going to run this function when we
14:48:01click
14:48:02it so as we said the first thing we'll
14:48:05do is to update the delivery option ID
14:48:08in the cart so now let's import that
14:48:11function that we created earlier we're
14:48:13going to scroll to the
14:48:16top and we're already importing from the
14:48:18cart so to import something else we're
14:48:21going to add a comma and we're going to
14:48:23import that function update delivery
14:48:27option so now let's scroll back down and
14:48:30use use it in our
14:48:32code so here when we click a delivery
14:48:35option we're going to update delivery
14:48:39option brackets now we said we need to
14:48:42give this function two things the
14:48:44product ID that we want to updated for
14:48:48as well as the delivery option ID that
14:48:51we picked but how do we get these two
14:48:56values and the answer is if we scroll
14:48:59up here here we have access to the
14:49:02product ID and we also have access to
14:49:05the delivery option
14:49:07ID so we can use data attributes to
14:49:10attach it to this element
14:49:13here so let's create a data attribute
14:49:17data-
14:49:19product-id equals double quotes and
14:49:24insert the product ID which is matching
14:49:28product. ID and we're also going to use
14:49:32a data attribute for the delivery option
14:49:35data- delivery D option- ID equals
14:49:39double
14:49:41quotes and we're going to insert the
14:49:43delivery option here so delivery
14:49:49option. and
14:49:53save next let's scroll back
14:49:55down and then here we're going to get
14:49:59those values out of the the data
14:50:01attributes by using const and let's use
14:50:05the shorthand property here for practice
14:50:08curly brackets equals the element. data
14:50:13set and then out of the data attributes
14:50:15we're going to get the product ID comma
14:50:20as well as the delivery option
14:50:24ID as a reminder this is a shorthand
14:50:27property it does the same thing as the
14:50:29code down here but it's just a
14:50:32shortcut now let's
14:50:34save and try out the project we'll go
14:50:38back and here if we click the second
14:50:41delivery option and then refresh the
14:50:44page you'll notice that now this one is
14:50:47checked and the date here is
14:50:50correct so that's how we make the
14:50:52section interactive we just update the
14:50:54cart and then when we refresh the page
14:50:57it will regenerate the HTML based on the
14:50:59new cart
14:51:02now let's save our code into git we'll
14:51:04go back and open the git
14:51:08section and then it will tell us in
14:51:10cart. JS we added this function for
14:51:13updating the delivery
14:51:15option and in checkout. JS we imported
14:51:19that function and then at the bottom we
14:51:22added some event listeners and data
14:51:24attributes and we use that function to
14:51:26update the
14:51:28card now let's add a message describe
14:51:30describing our changes make delivery
14:51:34options
14:51:36interactive and
14:51:43commit next when we select a delivery
14:51:45option we need to update the
14:51:49page so right now in our project when we
14:51:53click a delivery option we need to
14:51:55refresh the page for the text to be
14:51:58updated so what we're going to work on
14:52:00now is when we click this we want the
14:52:03page to update
14:52:04immediately so far in this course the
14:52:06way we solve this problem is once we
14:52:09click this we're going to use a Dom to
14:52:11get this element here and then update
14:52:14the text
14:52:16directly however the problem with this
14:52:18approach is that we need to update the
14:52:20page one by one and later there might be
14:52:23lots of places on the page that we need
14:52:25to update for example when we change a
14:52:28delivery option we also need to change
14:52:31the numbers here on the right so there's
14:52:34potentially a lot of things that we need
14:52:36to update one by one and it's easy to
14:52:39make a mistake or forget something so
14:52:41now we're going to learn a better way to
14:52:43update the page we'll go back to our
14:52:47code and let's open checkout. JS
14:52:52again and notice if we scroll
14:52:56up here we already have all of this code
14:53:00that takes our data and generates the
14:53:03HTML so another way to update the page
14:53:06is after we update our data we just need
14:53:09to rerun all this code and regenerate
14:53:12all this HTML so let's give this a try
14:53:16first we're going to put all of this
14:53:18code inside a function so we can rerun
14:53:21it we're going to scroll to the
14:53:24top and let's put this in a function by
14:53:27typing function and let's call call it
14:53:31render order summary brackets and curly
14:53:36brackets so the word render just means
14:53:39to display on the
14:53:41page and we're going to call this
14:53:43section the order
14:53:44summary so this function should display
14:53:47the order summary on the page next we're
14:53:50going to put all of this code inside our
14:53:53new function so let's just remove this
14:53:55curly bracket
14:53:57here and let's actually select all of
14:54:00this code and we're just going to
14:54:02reformat it by pressing Tab and adding
14:54:05an indent and then at the end we're
14:54:07going to add back that closed curly
14:54:09bracket to finish the
14:54:12function so all we did was we put all of
14:54:15our code inside a
14:54:17function and then at the bottom let's
14:54:20run this function because we still need
14:54:22to run all this code at the start of our
14:54:25page so we're going to type render the
14:54:28order summary
14:54:31and brackets so this shouldn't change
14:54:33anything because we're just running the
14:54:35same code but now it's just in a
14:54:37function let's save and
14:54:41check and everything's still working so
14:54:43that's good so now let's go back into
14:54:46our
14:54:47code and this time to update the page
14:54:50instead of using the Dom to update the
14:54:52page directly like we did up here we're
14:54:55just going to rerun all of this code and
14:54:58regenerate all the HTML
14:55:02so after we update the data we're going
14:55:04to rerun the code using render order
14:55:08summary and
14:55:10brackets now let's
14:55:13save and try it
14:55:15out so here let's say we start off with
14:55:17the first delivery option if we click
14:55:20the third delivery option you'll notice
14:55:23that the date up here updates
14:55:25automatically if we click the second
14:55:27delivery option it updates automatically
14:55:29as well
14:55:31so that's a better way to keep the page
14:55:33up to dat instead of using the Dom and
14:55:36changing the HTML directly one by one we
14:55:40just update the data and then regenerate
14:55:43all of this
14:55:45HTML so let's go back into our code and
14:55:48there's two things that I want to point
14:55:50out here so notice that we put our event
14:55:54listeners into this big function and
14:55:57that's because when we're regenerating
14:55:59all the HTML we're essentially deleting
14:56:01the previous HTML and replacing it so we
14:56:04need to add the event listeners again
14:56:08and the second thing I want to point out
14:56:10is that inside the render order summary
14:56:12function we can call render order
14:56:15summary
14:56:16again so a function can actually call
14:56:19itself or rerun itself and this feature
14:56:23is called recursion it's useful when a
14:56:26function needs to rerun all of its code
14:56:30so now let's save our changes into git
14:56:33we'll open the git section and it will
14:56:35tell us in checkout. JS we basically
14:56:38moved all of our code into this function
14:56:42and then at the bottom we call the
14:56:45function at the start of the page and we
14:56:47also call the function when we select a
14:56:49delivery option so now let's add a
14:56:52message describing our
14:56:53changes
14:56:55regenerate
14:56:57HTML when updating
14:57:00delivery option and
14:57:07commit so the technique we just used
14:57:10where we update the data and then
14:57:12regenerate all the HTML this technique
14:57:15is called
14:57:16MVC MVC stands for model view controller
14:57:21and is a popular technique in software
14:57:23engineering in MVC we split our code
14:57:26into three parts the first part is the
14:57:29model this is all the code that saves
14:57:32and manages the
14:57:34data so in our project all the code in
14:57:37this data folder is called the model
14:57:40because this code saves and manages our
14:57:43data the second part of MVC is the view
14:57:48this is code that takes the data and
14:57:50displays it on the page so in our
14:57:53project if we open checkout. JS and
14:57:56scroll to the top here we have code that
14:58:00takes our data and then generates all
14:58:02the HTML so this code is called the
14:58:06view the last part of MVC is the
14:58:09controller so this runs some code when
14:58:11we interact with the
14:58:14page so in our project at the
14:58:17bottom these event listeners here would
14:58:20be called the controller because they do
14:58:23something when we interact with the page
14:58:25or with the
14:58:26view so in MVC we divide our code Lo
14:58:30into these three parts and then they
14:58:32interact with each other in a
14:58:34loop first we use the model to generate
14:58:38the
14:58:39view so in our code that's what we did
14:58:42here we took the model or the data which
14:58:45is our cart and then we generated the
14:58:48HTML or the view then when we interact
14:58:52with the view it will run the
14:58:56controller so that's what we did at the
14:58:58bottom here
14:59:00when we interact with the page we run
14:59:02some
14:59:03code then the controller will update the
14:59:08model so that's what we did here inside
14:59:12the controller we just updated our data
14:59:14using this
14:59:16function and finally we use the updated
14:59:19model to regenerate The
14:59:23View so that's what this code does it
14:59:26takes the updated data and then
14:59:28regenerates all the HTM ml or
14:59:30regenerates The
14:59:32View so that's how MVC Works instead of
14:59:36updating the page directly with the Dom
14:59:38we just update our data and then
14:59:40regenerate all the
14:59:44HTML so we use MVC because doing this
14:59:48makes sure that the page always matches
14:59:51the
14:59:51data so MVC is known as a design pattern
14:59:56it's a way to organize and design our
14:59:59code in the future you might use a
15:00:01technology called a JavaScript framework
15:00:03to build websites many JavaScript
15:00:06Frameworks are based on MVC so it's
15:00:09useful to know how it
15:00:11works okay now that we learned the MVC
15:00:15design pattern let's do some practical
15:00:17examples using
15:00:19MBC we're going to open our project
15:00:21again to the checkout page and we're
15:00:24going to create this payment section on
15:00:27the right now before we start if we look
15:00:30at our code in this checkout. JS file
15:00:34you'll notice that we already have a lot
15:00:35of code
15:00:37here instead of adding even more code to
15:00:40this file let's actually split this up
15:00:42into two different
15:00:44files so one file will be responsible
15:00:47for this left section and then one file
15:00:50will be responsible for this right
15:00:52section we're doing this to keep our
15:00:54code more organized and so that we don't
15:00:56have too much code in one file
15:01:00so let's go back and let's create two
15:01:02new files for the checkout page so up
15:01:05here we'll create a file and let's call
15:01:08this one the order summary. JS and press
15:01:14enter and let's create another file for
15:01:17the right section and let's call this
15:01:20one the payment
15:01:23summary. JS and press
15:01:27enter now both of these files are
15:01:29related to the checkout page so let's
15:01:32create a folder and group them together
15:01:35we'll create a new folder up here and
15:01:38let's call it checkout and press enter
15:01:42and we're going to move these two files
15:01:43into this new folder so we move that and
15:01:47we'll move
15:01:51that next let's open checkout. JS and
15:01:55let's move all of this code into the
15:01:58order summary so we'll press control a
15:02:01or command a to select all the code and
15:02:04then
15:02:05rightclick
15:02:07cut and then in here we're going to
15:02:10rightclick and
15:02:14paste now there's a few things that we
15:02:16need to fix here so first our checkout.
15:02:19HTML file is still loading checkout. JS
15:02:23so we actually need to run this function
15:02:25inside checkout. JS instead of inside
15:02:28here so let's actually remove
15:02:31this and save and we're going to scroll
15:02:35to the
15:02:36top and let's export this function so we
15:02:39can run it inside here so we'll type
15:02:42export and save and then inside checkout
15:02:47we're going to import curly brackets the
15:02:51render order summary
15:02:54function from a string and to locate
15:02:58this file we're going to type A do slir
15:03:02that means to start from the current
15:03:04folder and we'll go into the checkout
15:03:06folder checkout SL orderers
15:03:10summary.
15:03:13JS and finally we're going to run this
15:03:16function when we load the page so render
15:03:19order summary and brackets and
15:03:25save another thing we need to fix is if
15:03:28we open order summary .js we moved this
15:03:32file into a folder so now all of these
15:03:35file paths need to be updated do do
15:03:38slash is now inside the scripts folder
15:03:41and we can't find a data folder anymore
15:03:43so this is going to cause an error so to
15:03:46find the data folder we need to get out
15:03:48of the checkout folder and then we need
15:03:50to get out of the scripts folder so we
15:03:53need to get out of two folders so we'll
15:03:55just add an additional do dot slash and
15:03:58then same thing for this we'll add
15:04:00another dot dot slash and for the utils
15:04:04now we need to get out of the checkout
15:04:05folder and then into the utils folder so
15:04:08we'll change this to do/
15:04:11utils and then for here we're going to
15:04:13go out an additional folder so another
15:04:16dot dot slash and
15:04:19save so now let's check if this still
15:04:21works we'll go to our project and
15:04:24refresh and try it
15:04:28out and the p still works because we're
15:04:31still running all of the same code but
15:04:34we just organized it into its own file
15:04:37so now let's open git and save our
15:04:39changes so it's going to tell us that in
15:04:41here we removed all this code and then
15:04:44we separated it into the order summary
15:04:47file and the payment summary file which
15:04:49we're going to work on next so let's
15:04:51type a message describing our changes
15:04:54move order
15:04:57summary into its own own file and
15:05:06commit now let's start creating the
15:05:08payment summary on the right side so in
15:05:11our code let's open payment summary.
15:05:18JS and just like the order summary let's
15:05:21put all our code in a function so we can
15:05:23regenerate the HTML if we need to so
15:05:27we'll type function and let's call it
15:05:30render payment summary brackets and
15:05:34curly
15:05:36brackets and let's just
15:05:39console.log string payment summary just
15:05:43to make sure it's working so we'll save
15:05:47and let's export this function and then
15:05:49run it inside checkout. JS so export
15:05:53save and then in checkout. JS at the top
15:05:57we're going to import curly brackets the
15:06:01render payment summary function from a
15:06:06string the current folder go into the
15:06:09checkout folder and the payment summary.
15:06:13JS file and then at the bottom we're
15:06:16going to run the function so render
15:06:19payment summary brackets and
15:06:23save let's go back to our project and
15:06:26open the console rightclick inspect the
15:06:30console and we'll see the message
15:06:32payment summary so now we know that our
15:06:35code here is working and the export is
15:06:38working
15:06:40correctly now let's remove this code and
15:06:43actually build the payment
15:06:46summary as always we're going to do
15:06:48three steps save the data generate the
15:06:51HTML and make it interactive so let's
15:06:55start with saving the data in MVC this
15:06:58is called the
15:07:01model so if we go to our
15:07:03project for this section the data that
15:07:06we need is just to calculate these
15:07:08numbers
15:07:10here so let's start by calculating this
15:07:13first number here which is the cost of
15:07:15the products to calculate this we can
15:07:18Loop through the cart and for each
15:07:20product in the cart we can multiply the
15:07:22products price times the quantity and
15:07:26then add everything together now let's
15:07:28convert these steps into code we'll go
15:07:31to our project and inside the payment
15:07:34summary
15:07:35file first we need to get the cart so
15:07:38let's import it import curly brackets
15:07:42the
15:07:43cart from the string and we'll locate
15:07:47cart.
15:07:49JS so first we'll go out of the checkout
15:07:51folder do do slash and then go out of
15:07:54the scripts folder do do slash and then
15:07:57into the data folder
15:08:02data.js and
15:08:04save and now we're going to Loop through
15:08:06the cart so we can type cart. for each
15:08:12brackets and a
15:08:15function and let's name the parameter
15:08:18cart item so for each cart item we have
15:08:22the product ID and the quantity so we
15:08:25need to multiply the product's price
15:08:27times the quantity so first we need to
15:08:30use the product ID and get the full
15:08:32product details and we already have some
15:08:35code for this inside orders summary. JS
15:08:39if we scroll down here we have some code
15:08:42that takes a product ID and finds the
15:08:45matching
15:08:46product now instead of copy and pasting
15:08:49this code let's actually put this into a
15:08:51function so we can reuse this and we'll
15:08:54practice some modules so let's select
15:08:57this code and rightclick and copy it
15:09:01first and then let's go into the
15:09:03products. JS
15:09:05file and at the top we're going to
15:09:08create a function so we can reuse that
15:09:10code so let's type function and let's
15:09:14name it get product brackets and curer
15:09:18brackets and we're going to give this
15:09:20function the product ID that we're
15:09:23looking for and then let's paste the
15:09:26code we copied earlier right click and
15:09:31paste so this finds the matching product
15:09:33using the product ID and then at the end
15:09:36of the function let's return the
15:09:39matching product so we can use this
15:09:42outside of the function so now let's
15:09:45export this function so we can share it
15:09:47across files so export and
15:09:51save first we'll go to the order summary
15:09:55and at the top let's import that
15:09:56function so we're already importing from
15:09:58product .js we're going to import
15:10:01something else using a comma the get
15:10:04product function and then down
15:10:07here instead of all this
15:10:10code we're going to run that function so
15:10:13we make this equal to get product and
15:10:18run the function and we need to give the
15:10:20function the product ID so let's just
15:10:22give that here product
15:10:25ID and because we're no longer updating
15:10:28this variable we can change from let to
15:10:31const and
15:10:33save let's go to our project to make
15:10:36sure everything's still working so that
15:10:38looks
15:10:39good and now let's use this function
15:10:42inside payment summary. JS so the same
15:10:45thing we will import curly brackets the
15:10:49get product function from a
15:10:53string and we'll go to the data folder
15:10:56do SL do do SL data SL
15:11:00and products.
15:11:03JS and let's run that function to get
15:11:05the full product so get product brackets
15:11:10and then each cart item has the product
15:11:12ID so we're going to give it to the
15:11:13function cart item. product
15:11:18ID and let's save this product in a
15:11:21variable so we can use it for our
15:11:23calculations con product equals get
15:11:27product so now now as we said we're
15:11:30going to multiply the product's price by
15:11:32the quantity so down here we can do
15:11:36product and it has a property
15:11:38called price sense and we're going to
15:11:42multiply it by the cart item and this
15:11:46has a property do
15:11:49quantity and the last step is to add all
15:11:52of these
15:11:54together so outside of the loop let's
15:11:56create a variable to save the result of
15:11:59adding them together let's type let and
15:12:02we'll name it product price sense equals
15:12:08and we'll make it zero to start and then
15:12:11every time we Loop through the cart
15:12:13we're going to add this to this variable
15:12:15so we'll type product price sense plus
15:12:20equals this value
15:12:23here and that's how we calculate the
15:12:25cost of the products so at the bottom
15:12:28let's
15:12:30console.log the product price sense just
15:12:35to make sure that this is working we'll
15:12:38save and in our project we're going to
15:12:41check the
15:12:42console and it will give us this number
15:12:44here and this number should match the
15:12:47number on the page except it's in sense
15:12:50and assuming you also have two socks and
15:12:53one basketball in your
15:12:56cart okay so that's how we calculate
15:12:58this first number here now let's
15:13:01calculate the second number which is the
15:13:03cost of shipping so to calculate this
15:13:06we're going to Loop through the cart and
15:13:08add all the shipping costs
15:13:11together so let's go into our
15:13:14code and here we're already looping
15:13:17through the cart so instead of creating
15:13:19another loop let's just calculate the
15:13:21shipping cost in the same Loop so let's
15:13:25create some new
15:13:26lines and each card item has a property
15:13:29delivery option ID so we need to use
15:13:32this ID to get the full delivery option
15:13:35which has the price so in the order
15:13:38summary we also have this code that
15:13:41takes the delivery option ID and finds
15:13:43the full delivery option so again let's
15:13:46create a function to share and reuse
15:13:48this
15:13:49code so first let's select this code and
15:13:52we'll write click and
15:13:55copy and let's go to the delivery
15:13:58options. Js
15:13:59file and then at the bottom we'll create
15:14:02a
15:14:03function let's call it get delivery
15:14:07option brackets and curly brackets and
15:14:11we'll give this function the delivery
15:14:14option
15:14:15ID and inside here we'll rightclick and
15:14:19paste the code that we copied earlier so
15:14:23this will take this ID and get the
15:14:25delivery option from this array and
15:14:28let's return return this delivery
15:14:30option so we can use it outside of this
15:14:34function and just to be safe let's also
15:14:37give this a default value if we don't
15:14:40find a delivery option so we'll use the
15:14:43default operator
15:14:45or and let's make the default value the
15:14:48first delivery option so delivery
15:14:53options square bracket 0
15:15:00so now let's export this and
15:15:03save and then inside order summary we'll
15:15:06use this function so at the
15:15:08top we're already importing from
15:15:11delivery options so we'll type a comma
15:15:14and get delivery
15:15:17option and then down here instead of
15:15:20running all this code we'll select it
15:15:23and make this equal and run the function
15:15:26get delivery option
15:15:29brackets and we'll give it this delivery
15:15:32option ID delivery option
15:15:36ID and we can change from let to const
15:15:40since we're not changing this variable
15:15:42so now let's save and let's use this
15:15:45function inside payment summary as well
15:15:48so in here at the top we'll import curly
15:15:52brackets the get delivery option
15:15:57function from
15:16:00quotes the data folder do do slash do
15:16:04data slash and the delivery options. JS
15:16:11file and now we'll run this function get
15:16:15delivery option and
15:16:18brackets and each cart item has a
15:16:20delivery option ID so we'll put that
15:16:23into the function cart item. delivery
15:16:28option
15:16:29ID and let's save this in a
15:16:32variable con delivery option
15:16:38equals and now we can get the price for
15:16:41the delivery option using delivery
15:16:45option price sense
15:16:49property and finally we're going to add
15:16:51all these together so at the top let's
15:16:54create a variable to save the result let
15:16:57we'll call it ship
15:16:59shipping price cents equals zero and
15:17:04when we Loop through the cart we're
15:17:07going to
15:17:08do shipping price sents plus equals this
15:17:14delivery options
15:17:17price and let's also console.log this to
15:17:21make sure it's working so shipping price
15:17:26cents and Save
15:17:29now let's go to our project and check
15:17:31the
15:17:34console and this value
15:17:37here should be the same as adding these
15:17:40two numbers together in
15:17:44sense so that's how we calculate the
15:17:46second number the shipping price so note
15:17:50that this
15:17:51$4.99 number is just a practice number
15:17:54right now the actual shipping price
15:17:56should be the total of adding all these
15:17:58sh shipping prices
15:18:01together the next number we need to
15:18:03calculate is the total before tax so let
15:18:06just adding these two numbers together
15:18:09inside our
15:18:11code let's remove these console. logs
15:18:14and we'll create const total before tax
15:18:20sense and make it equal and we'll add
15:18:23these two together product price sense
15:18:28Plus shipping price
15:18:32sense and the next number is the tax so
15:18:36we're going to calculate a 10% tax on
15:18:39this number here to calculate 10% of
15:18:41something we can multiply this by 10 /
15:18:45100 that's what percent means so 10 ID
15:18:50100 is also equal to
15:18:520.1 so we can also multiply this number
15:18:55by
15:18:570.1 let's go into code and we'll create
15:19:00a variable const tax sense make it equal
15:19:05to the total before tax sense times 0.1
15:19:11or
15:19:1310% finally to calculate the total we're
15:19:16going to add these two numbers together
15:19:19so const total sense equals the total
15:19:25before tax sense Plus the tax
15:19:31sense so that's how we calculate all the
15:19:34numbers in the payment summary and now
15:19:36we have all the data that we need next
15:19:39we're going to generate the HTML in MVC
15:19:43this is called The
15:19:46View so at the bottom here let's create
15:19:49a variable to store the
15:19:51HTML const payment summary
15:19:57HTML and we'll make make it equal to a
15:20:00template
15:20:01string and then inside here we're going
15:20:03to copy and paste the
15:20:05HTML so let's open checkout.
15:20:09HTML and we're going to scroll up until
15:20:12we find the class payment D summary so
15:20:16we're going to generate all the HTML
15:20:18inside here so let's actually select
15:20:21this HTML and move it into our
15:20:23JavaScript so we'll select it up until
15:20:26this button and then we we can
15:20:29rightclick
15:20:32cut and remove the new line save and
15:20:37then inside the payment summary inside
15:20:40the screen we'll rightclick and paste
15:20:43the
15:20:45HTML and if we need to reformat we can
15:20:48select these
15:20:50lines and press tab a few times to
15:20:53reformat
15:20:57it and and
15:21:00save next instead of using these same
15:21:03numbers every time we're going to take
15:21:06the numbers we calculated up here and
15:21:08insert it into this HTML string so
15:21:12instead of 42.75 every time we're going
15:21:15to insert the product price
15:21:19sense and let's give it some new lines
15:21:22to make it a little easier to
15:21:24read now remember that this number is in
15:21:27sense and we want to display it as
15:21:30dollars to do that we already have a
15:21:33function for this so in the utils money.
15:21:37JS file we have a function format
15:21:40currency that displays it in dollars so
15:21:43let's use this function inside payment
15:21:45summary so at the top let's import the
15:21:48function
15:21:49first import curly brackets the format
15:21:54currency function from a Str
15:21:59and to locate this folder we'll go out
15:22:01of the checkout folder do do/ the UIL
15:22:05folder SL money.jpg
15:22:28numbers here so this one is the shipping
15:22:31price so we can
15:22:34insert format currency brackets the
15:22:40shipping price sents and let's give it
15:22:43some new lines to make it a little
15:22:45easier to
15:22:47read next let's insert the total before
15:22:51tax so we'll remove this number and
15:22:54insert format currency bracket gets the
15:22:59total before tax
15:23:02sents and new
15:23:07lines and next is the tax we'll remove
15:23:11this and
15:23:12insert format currency brackets the tax
15:23:19sents and we'll enter some new lines and
15:23:23finally the total so we remove this
15:23:26insert
15:23:28format currency brackets total sense and
15:23:34add some new
15:23:37lines and
15:23:40save now before we continue I actually
15:23:43learned of a small issue with the format
15:23:45currency function so let's open the
15:23:48money. JS
15:23:50file and I recently learned that this
15:23:52two fixed method has a small issue with
15:23:56rounding so for some numbers that end in
15:23:58five it won't round the number
15:24:02properly one way to fix this issue is to
15:24:05round the price sense first so that this
15:24:08method doesn't have to do any rounding
15:24:11so at the front here let's just type
15:24:15math.round Open Bracket and close
15:24:19bracket so this is just a tricky issue
15:24:22that I discovered with the help of AI
15:24:24recently we just need to add a little
15:24:26bit of code here to fix it
15:24:29so now let's save this
15:24:30file and go back to payment
15:24:33summary so now that we generated all
15:24:36this HTML and inserted our numbers into
15:24:39it let's put this HTML on the page so
15:24:43inside checkout.
15:24:46HTML let's give this payment summary
15:24:48another class
15:24:50js- payment Das summary and then we'll
15:24:54select this using the Dom so now let's
15:24:57save this
15:24:59file inside payment summary at the
15:25:03bottom after we create the HTML we're
15:25:06going to document. query selector
15:25:11brackets and a string and we'll select
15:25:15js- payment D summary to get that
15:25:21element and we'll change the HTML inside
15:25:24that element using do inner Capital H
15:25:29HTML and we'll make it equal to the
15:25:32payment summary
15:25:35HTML that we just created so now let's
15:25:39save and check our
15:25:42project and now these numbers on the
15:25:45right should match what we have in the
15:25:47cart and the delivery options that we
15:25:51selected so that's how we generate the
15:25:54HTML for this section
15:25:56here now let's save our changes into git
15:26:00we'll open
15:26:01git and it will tell us in checkout.
15:26:03HTML we removed the HTML we created
15:26:08manually in delivery options. JS we
15:26:11created this shared function for finding
15:26:13the full delivery option and the same
15:26:15thing in products. JS for finding the
15:26:17full
15:26:18product inside checkout. JS we're now
15:26:21running all the code inside payment
15:26:24summary in order summary we're just
15:26:27using those shared functions that we
15:26:29created and then in payment summary we
15:26:32calculated the numbers and generated all
15:26:35the
15:26:36HTML and finally in money. JS we fixed a
15:26:40small bug related to rounding let's type
15:26:43a message to describe our changes save
15:26:47data and generate
15:26:51HTML for payment
15:26:55summary and commit
15:27:03the last step is to make it interactive
15:27:06in MVC this is called the
15:27:09controller let's go to our
15:27:11project and one thing we can make
15:27:14interactive in this section is the place
15:27:16order button however we haven't figured
15:27:19out how orders work yet so we'll work on
15:27:22this in the next lesson another thing we
15:27:25can make interactive however is when we
15:27:28change the cart on the left these prices
15:27:32should also update so let's make this
15:27:35interactive first when we delete a
15:27:37product the prices here should update so
15:27:41let's actually practice using MVC to
15:27:44create this
15:27:46functionality according to MVC when we
15:27:49click delete we should update the data
15:27:52and then regenerate all of this
15:27:55HTML so let's get started and go to the
15:27:58code for the delete link so this is in
15:28:01the order summary section so in our code
15:28:04let's open the orders summary. JS
15:28:08file and we'll scroll down and find the
15:28:11event listener for the delete link which
15:28:14is right
15:28:16here when we click delete first we're
15:28:19going to update the
15:28:22data so we already update the data using
15:28:25this function remove from cart
15:28:29and now the next step according to MBC
15:28:31is to just regenerate all the
15:28:34HTML so to regenerate the HTML for the
15:28:37payment summary we created this function
15:28:40at the top render payment
15:28:43summary so this will recalculate all the
15:28:46numbers and then regenerate the
15:28:50HTML so let's import this
15:28:53function in order summary. JS we'll
15:28:56scroll to the top
15:28:58and down here we can import curly
15:29:02brackets the render payment summary
15:29:07function from a string and we'll locate
15:29:11the payment summary file so it's in the
15:29:14same folder so we're going to start with
15:29:16a slash which is the current folder the
15:29:19payment summary. JS file and now let's
15:29:24use this function in the event listener
15:29:27so let's scroll
15:29:29down when we click delete we're going to
15:29:33update the data and then regenerate all
15:29:36the HTML using render payment summary
15:29:42brackets now let's save and go to our
15:29:47project focus on the numbers on the
15:29:50right here and now let's click
15:29:53delete and you'll notice that all of
15:29:55these numbers updated to match our new
15:29:59so that's another example of using MVC
15:30:03when we click delete instead of using
15:30:05the Dom to change these numbers one by
15:30:07one we just update the data and then
15:30:10regenerate all of the
15:30:13HTML MVC makes sure that the HTML always
15:30:17matches the data or that the view always
15:30:20matches the
15:30:22model let's do one last example of NBC
15:30:25for this lesson when we change the
15:30:28delivery options here we also want these
15:30:31numbers on the right to update so let's
15:30:34find the code for the delivery options
15:30:37again this is in the order summary
15:30:38section so in our code we'll open orders
15:30:42summary. JS scroll down and then here we
15:30:47updated the data and then we're just
15:30:49going to regenerate the HTML for the
15:30:52payment summary using render payment
15:30:56summary and and
15:30:58brackets now let's
15:31:01save and then look at our project and
15:31:04let's try changing the delivery option
15:31:06here and you'll notice the numbers on
15:31:08the right update automatically to match
15:31:11the cart and that's it we finished the
15:31:14checkout page so now let's save our code
15:31:17into git we'll go into the git
15:31:20section here and inside order summary we
15:31:24basically imported the render payment
15:31:27summary function
15:31:28and then at the
15:31:30bottom we used MVC so when we click
15:31:34delete we update the data or the model
15:31:37and then we regenerate all the HTML or
15:31:40regenerate The View down here same thing
15:31:44when we click a delivery option we
15:31:46update the data and then regenerate all
15:31:49the
15:31:50HTML the last thing we're going to do is
15:31:53at the top of this file
15:31:58we're going to remove this practice code
15:32:00that we use to learn external libraries
15:32:03so let's open orders summary.
15:32:07JS and at the top we're going to remove
15:32:10this
15:32:12code and
15:32:15save now let's go back into
15:32:20get and that looks good finally let's
15:32:24type a message describing our
15:32:26changes make
15:32:28payment
15:32:30summary
15:32:32interactive and
15:32:39commit and that's the end of this lesson
15:32:42in this lesson we learned about external
15:32:44libraries which is code that is outside
15:32:47of our project we learned about the DJs
15:32:51external Library which helps us work
15:32:53with dates we also learned how to use
15:32:56external libraries with JavaScript
15:32:58modules together as well as the default
15:33:01export syntax we created the delivery
15:33:05section of the checkout page we learned
15:33:07MBC which is a better way to design our
15:33:10code and we created the payment section
15:33:14of the checkout
15:33:17page thanks for watching this course so
15:33:20far if you want to support this channel
15:33:22you can check out the premium version of
15:33:24my courses just like this one where you
15:33:26can get a certificate of completion and
15:33:29a Better Learning platform if you're
15:33:31interested in extra videos from me more
15:33:34in-depth videos and behind the scenes
15:33:36content you can check out these links
15:33:39here you can also support the channel by
15:33:42liking the video subscribing and sharing
15:33:45this video with others thanks again and
15:33:48let's continue with the
15:33:50course here are some exercises to help
15:33:53you practice what we learned in this
15:33:56lesson e
15:34:40in the rest of this course if you get an
15:34:43error in your project but your code
15:34:45looks correct you may have some bad data
15:34:48saved in local storage to fix this you
15:34:52can try running local storage. CLE in
15:34:55your console to remove everything from
15:34:57local
15:34:58storage and then refresh the
15:35:03page if you see an error like this
15:35:06object object that means that you saved
15:35:09something directly into local storage
15:35:11but you have to json.stringify it first
15:35:15so check your code to make sure that
15:35:16you're always stringifying before saving
15:35:19to local storage and then clear your
15:35:21local storage and refresh the
15:35:26page in this lesson we're going to learn
15:35:29how to test our code so when we're
15:35:32writing code it's important to test our
15:35:34code to see if it's working correctly
15:35:37and if you're working at a company in
15:35:39the future you'll also be expected to
15:35:41test your code so let's learn how to do
15:35:44that in this
15:35:46lesson the easiest way to test our code
15:35:48is to just open the website and try out
15:35:51the code for example in our code here
15:35:55let's open the file utils money.jpg
15:36:30server so on this website we have a
15:36:33couple of prices here as well as here
15:36:36and we created these prices using the
15:36:38function format
15:36:40currency so if we just look at the
15:36:42website we can see that these prices
15:36:44look correct and this tells us that the
15:36:47function format currency is working
15:36:49correctly so that's one way to test that
15:36:52function we just open the website and
15:36:54try it out so this is called manual
15:36:58testing when we manually open the
15:37:00website and try our code so manual
15:37:03testing is really useful for quickly
15:37:06checking to see if everything is
15:37:08working so now let's talk about the
15:37:11disadvantages of manual testing one
15:37:14disadvantage is it's hard to test every
15:37:18situation for example here we just
15:37:21happen to have the number
15:37:23295 and we test with that however what
15:37:26if we want to test with different
15:37:28numbers like the number zero or a number
15:37:31that requires rounding like
15:37:352.5 in order to test all these
15:37:37situations we have to manually set up
15:37:39our website so that our code runs with
15:37:42those numbers so here we ran with 2095
15:37:46as well as zero so we covered those
15:37:49situations however we did not cover
15:37:522.5 so we have to do a bunch of setup in
15:37:55order to test that situation
15:37:58so as you can see it takes a lot of time
15:38:00and effort to test different situations
15:38:02in our code the second disadvantage of
15:38:05manual testing is that it's hard to
15:38:07retest the code for example if we change
15:38:11some of our code how do we retest format
15:38:14currency and make sure that it's still
15:38:16working
15:38:18correctly well we would have to open the
15:38:20website and set up all the situations
15:38:22again and retest all those situations
15:38:25manually so this takes too much time and
15:38:28effort to retest the
15:38:30code to solve these two problems we're
15:38:33going to learn another way to test our
15:38:35code called automated
15:38:38testing automated testing basically
15:38:41means using code to test code instead of
15:38:45manually opening the website and
15:38:47clicking around to try our code we're
15:38:49going to tell the computer to do these
15:38:51tests for us and this will save a lot of
15:38:54time and effort so let's go ahead and
15:38:57create our first automated test we're
15:39:01going to go back to our
15:39:02code and again let's test this format
15:39:06currency function to create an automated
15:39:09test we're just going to write some code
15:39:11to test this function so first let's
15:39:14create a folder to group all of our test
15:39:17code together we're going to click this
15:39:19icon to create a folder and let's just
15:39:22name this tests and press enter
15:39:27and we're going to move this folder so
15:39:29we'll drag it to the top level here
15:39:32beside the HTML
15:39:35files so we want the test folder to be
15:39:38beside the scripts
15:39:40folder next let's click on the test
15:39:43folder and we're going to create our
15:39:45first test file we'll click
15:39:48this and we're going to test format
15:39:51currency which is inside the money.jpg
15:39:57money
15:40:00test.js so we know that this file
15:40:02contains tests for money. JS so let's
15:40:06press
15:40:08enter and inside this file we're going
15:40:11to write some code to test format
15:40:14currency so first let's import format
15:40:16currency so we can test it at the top
15:40:20we'll type import curly brackets format
15:40:25currency
15:40:27from a string and from here we're going
15:40:30to locate money. JS so we start out in
15:40:34money test.js and we need to get out of
15:40:36the test folder so we'll type do do
15:40:39slash to get out of this folder and then
15:40:42we'll go into the scripts folder scripts
15:40:46slash and then into the utils folder
15:40:49utils slash and locat
15:40:53money. Js
15:40:57so as a reminder format currency takes a
15:41:00number in cents like 295 cents and then
15:41:04converts it into Dollars like
15:41:09$20.95 so first let's test this function
15:41:12using that number 2095 as an example
15:41:16we're going to run the function format
15:41:20currency brackets and give it
15:41:24295 and now we're going to check if the
15:41:27result of this function is correct to do
15:41:30that we can just use an if statement so
15:41:34we'll type if Open Bracket close
15:41:38bracket and we said we expect format
15:41:41currency
15:41:42295 to give us the string
15:41:5320959 and curly brackets and and if
15:41:57these two are equal that means the code
15:41:59is working correctly so we're going to
15:42:02console. log the string
15:42:07passed to say that this test has passed
15:42:11now if it is not equal to
15:42:2620.95%
15:42:28failed and
15:42:30save and that's it this is our first
15:42:33automated test it checks if the result
15:42:36of this function is correct if it is
15:42:39correct we're going to display past and
15:42:42if it's not correct we're going to
15:42:43display
15:42:45failed now let's run this test code so
15:42:49remember we can't run JavaScript files
15:42:52directly we need to load this Javascript
15:42:55file using an HTML file so let's create
15:42:59an HTML file to run this test inside the
15:43:03test folder we're going to create a new
15:43:05file by clicking up
15:43:07here and let's name this file
15:43:11tests.
15:43:13HTML and press
15:43:16enter and in here we're going to start
15:43:18by creating a basic HTML structure so as
15:43:22a reminder at the top we'll type less
15:43:25than exclamation
15:43:27dock type space HTML greater than and
15:43:32we'll create an HTML
15:43:35element and then inside we'll create a
15:43:38head
15:43:39element as well as a body
15:43:44element and then inside the body we're
15:43:46going to create a script tag to run
15:43:49JavaScript
15:43:50code and we're going to give the script
15:43:52tag an attribute called SRC or source
15:43:57equals double quotes and we're going to
15:43:59give it this JavaScript file to
15:44:01run money
15:44:06test.js and also because this file uses
15:44:09import we also need to add an attribute
15:44:12called type equals modules to give this
15:44:17file access to JavaScript module
15:44:19features like
15:44:21import so now let's
15:44:23save and we're going to run this file in
15:44:26live server so we're going to click it
15:44:29and then
15:44:30rightclick open with live
15:44:33server and then we're going to check the
15:44:35console by right
15:44:37clicking
15:44:39inspect and open the
15:44:42console and our code display the text
15:44:46passed so if we look at our
15:44:48code and open money
15:44:52test.js it's telling us that the result
15:44:54of this function matched what we
15:44:56expected
15:44:57and this test
15:44:59passed so that's how we run an automated
15:45:02test we just load it like normal
15:45:05JavaScript so as you can see automated
15:45:08tests are pretty straightforward we're
15:45:10just using code to test
15:45:15code okay so I mentioned earlier that a
15:45:18disadvantage of manual testing is it's
15:45:22hard to test every
15:45:24situation now let's solve this problem
15:45:26using automated
15:45:28tests so inside money
15:45:31test.js if we want to test format
15:45:33currency in different situations or with
15:45:36different numbers we can just add some
15:45:39more tests at the bottom so at the
15:45:41bottom let's create some new lines and
15:45:44we'll just add another test using IF
15:45:47brackets and curly
15:45:49brackets and inside here let's test
15:45:52format currency with the number zero so
15:45:55we'll type format
15:45:57currency brackets 0 and we expect this
15:46:02result to be the string 0.0 0 so we'll
15:46:07check if this triple equals the string
15:46:120. if this result matches we're going to
15:46:17console.log the string
15:46:21passed and if this result does not match
15:46:25we're going to type else curly brackets
15:46:29and
15:46:31console.log the string
15:46:35failed so that's how we test format
15:46:37currency in a different situation with
15:46:40the number zero so now let's
15:46:43save and then go back to our test page
15:46:47which is here and then open the console
15:46:50right click
15:46:52inspect the
15:46:53console and it will tell us that both of
15:46:56our automated tests
15:46:58passed so as you can see automated tests
15:47:02help us test our code in different
15:47:04situations very easily this is a lot
15:47:07faster than manually opening our website
15:47:09and setting it up to test with different
15:47:13numbers so let's go back to our
15:47:16code and by the way another name for a
15:47:19situation that we're testing is called a
15:47:22test case so here instead of saying
15:47:26we're testing two different situations
15:47:28we usually say we're testing two test
15:47:32cases okay now let's get more practice
15:47:35and add another test case at the bottom
15:47:39of this file we're going to create
15:47:41another if statement if brackets and
15:47:44curly
15:47:46brackets and this time let's test format
15:47:51currency brackets and we'll give it a
15:47:54number that requires some rounding
15:47:57so when we calculate the 10% tax on our
15:48:00website the result could be a decimal
15:48:03like the number
15:48:062000.5 if we use the number
15:48:102.5 this will convert into $20 and
15:48:150.5 however we can't have
15:48:180.5 so we're going to round this up to 1
15:48:22cent so we're going to have $20 And1
15:48:27so let's check if this result triple
15:48:29equals the string
15:48:3320.1 and if it is equal we're going to
15:48:38console.log
15:48:40past and if it is not equal else curly
15:48:45brackets
15:48:48console.log
15:48:50failed and
15:48:52save and open our test page and open the
15:48:56con
15:48:59and you can see that all three of our
15:49:01test cases passed and that's it we just
15:49:04created three test cases for format
15:49:07currency using automated
15:49:10tests now let's go back to our
15:49:15code and currently we have three test
15:49:18cases and you might be wondering how
15:49:20many test cases should we have generally
15:49:24we create two types of test cases basic
15:49:28test cases and edge
15:49:30cases a basic test case just tests if
15:49:34the code is working or not so here our
15:49:37first test case is a basic test case we
15:49:40use a normal number like
15:49:432095 and we see if format currency is
15:49:46working
15:49:47correctly the second type of test cases
15:49:50that we should have are edge cases this
15:49:53means we test a code with values that
15:49:56are a little bit bit tricky they're on
15:49:58the edge of what our code can handle for
15:50:01example in our test here the last two
15:50:04test cases are edge cases zero is sort
15:50:07of a special number that's not positive
15:50:10or negative and
15:50:132.5 is a number that requires some
15:50:15rounding so these numbers are acceptable
15:50:18we can use them with format currency but
15:50:21they're a little bit tricky and on the
15:50:23edge of what our code can handle
15:50:27so when creating test cases make sure to
15:50:30create basic test cases as well as edge
15:50:32cases if there are any edge
15:50:37cases now we could have added another
15:50:39basic test case like format currency
15:50:431095 however this is very similar to
15:50:472095 it's basically testing the same
15:50:49thing so we don't need another test case
15:50:52like this generally we should try to
15:50:54test something different in each test
15:50:57case for example an edge case that we
15:51:01have not tested is a number
15:51:04200.4 so this would check if the code
15:51:07rounds down correctly to $20
15:51:11and0 however I'll leave creating this
15:51:13test case as an
15:51:16exercise now let's move on and talk
15:51:19about the second disadvantage of manual
15:51:22tests which is it's hard to retest the
15:51:25code automated test also solve this
15:51:28problem for example let's say that we
15:51:31Chang the format currency function so
15:51:34inside UIL money.jpg
15:51:56we would have to open up the website set
15:51:59up everything manually and then click
15:52:01around to see if it's
15:52:03working however with automated testing
15:52:06all we need to do is to rerun all of
15:52:09this test code and it will instantly
15:52:12retest all of these cases so let's go
15:52:15back to money. JS and save this
15:52:19code and then go into our test
15:52:23page and check our console right click
15:52:27inspect the
15:52:30console and you can see that it
15:52:32instantly reruns all the test cases and
15:52:35it tells us that the last test case
15:52:37failed so automated tests make it really
15:52:39easy to retest our code after we make
15:52:42any
15:52:44changes okay now we have another problem
15:52:48here we can see that the test Cas is
15:52:50passed passed and failed but it's not
15:52:53clear which ones passed and which ones
15:52:55failed we don't really have a name for
15:52:58these tests so we don't know what
15:53:00they're doing so that's what we're going
15:53:02to add next we're going to give each of
15:53:04these tests a name so let's go back to
15:53:07our
15:53:08code and open money
15:53:12test.js and now we're going to give each
15:53:14of these test cases a name so above the
15:53:17first test
15:53:19case let's just
15:53:21console.
15:53:23log a string and we're going to give
15:53:26this test a name so the name should
15:53:29describe what this test is doing so in
15:53:32here let's just use the name converts
15:53:36cents into
15:53:39dollars and that's how we give a test
15:53:41case a name let's do the same thing with
15:53:44the other two test cases so down here
15:53:48we're going to console.
15:53:52log brackets and a string and we give
15:53:56the second test case a name so this one
15:53:59tests the number zero so let's use the
15:54:02name works with zero so again the name
15:54:08just describes what the test is
15:54:11doing and let's do the same thing for
15:54:13the third test case we
15:54:17console.log a string and here we're
15:54:21testing if the function rounds up to the
15:54:23nearest scent so let's use the name
15:54:27rounds up to the nearest
15:54:32scent and
15:54:34save if you're wondering how I came up
15:54:37with these names a naming convention
15:54:39that we use is to describe what the code
15:54:42is doing for example the code works with
15:54:46zero or the code rounds up to the
15:54:49nearest scent and then we remove the
15:54:52code some people also like to use the
15:54:54word it instead of the
15:54:59code so now each of these test cases has
15:55:02a name above it if we open up our test
15:55:05page and open the
15:55:08console now we can see exactly which
15:55:11test case passed and which test case
15:55:14failed so this failed test case tells us
15:55:17we have a rounding problem in our code
15:55:20so now we can go back to our code into
15:55:23money. JS and investigate the rounding
15:55:26problem so of course we removed
15:55:29math.round as an example we're just
15:55:31going to add it back to fix that failing
15:55:34test capital m
15:55:38math.round Open Bracket and close
15:55:42bracket and
15:55:45save and then open the console for our
15:55:48test which is here and now all of our
15:55:51test cases
15:55:54passed next another thing we do when
15:55:57naming our tests is to group related
15:56:00tests together for example these three
15:56:04test cases are for the format currency
15:56:07function so we're going to group these
15:56:09tests together and give this group a
15:56:12name by the way a group of related tests
15:56:16is called a test
15:56:20Suite so let's go back to our code and
15:56:23open Money test.js
15:56:26and at the top let's give this group of
15:56:28tests or this test Suite A Name by
15:56:32typing
15:56:34console.log brackets and a string we're
15:56:38going to name it test Suite colon format
15:56:45currency and
15:56:47save so now let's open the console for
15:56:50our
15:56:52tests and now at the top it will show us
15:56:55test site format currency so this makes
15:56:58it clear that this group of tests here
15:57:01are for the format currency
15:57:04function in the future if we are testing
15:57:06some other code for example a calculated
15:57:09tax function we can create another group
15:57:12of tests or another test Suite like this
15:57:16and this makes it clear that the second
15:57:18group of tests is for the calculate tax
15:57:21function so this is how we name our
15:57:24tests and group our tests together
15:57:26together to make it more clear what is
15:57:28being tested and which tests have passed
15:57:31or
15:57:33failed and now we created our first set
15:57:36of automated tests as you can see
15:57:39automated tests are basically using code
15:57:42to test code and they make it really
15:57:45easy to check if our code is working
15:57:47correctly so now let's save this into
15:57:50git we're going to open the git
15:57:54section and our first change in money
15:57:57test.js we created the tests for format
15:58:00currency and then we created an HTML
15:58:03file to load our test
15:58:06code so let's create a message
15:58:08describing these
15:58:10changes create automated tests for
15:58:15format
15:58:17currency and
15:58:24commit next we're going to learn how to
15:58:26use a testing framework to write
15:58:29automated tests so what is a testing
15:58:32framework in the previous lesson we
15:58:34learned about external libraries which
15:58:37is code that is outside of our project
15:58:40that someone else wrote and we can load
15:58:43external libraries into our project and
15:58:46use
15:58:47them so a testing framework is an
15:58:50external library that helps us write
15:58:53tests
15:58:54easier let's go back to our code and
15:58:57we're going to open the money test.js
15:59:00file and notice that in our tests we
15:59:03need to do several things first we
15:59:06create a test suite and we give it a
15:59:08name and then we create some tests and
15:59:11for each test we give it a name and then
15:59:14we compare the values and display the
15:59:17result in the console so a testing
15:59:20framework helps us do all of these
15:59:22things automatically and gives us many
15:59:25other features so now let's learn our
15:59:27first testing
15:59:29framework in this course we're going to
15:59:31use a popular testing framework called
15:59:34Jasmine now if you're working at a
15:59:36company in the future you'll definitely
15:59:38be using a testing framework but it
15:59:40might not always be Jasmine and that's
15:59:43okay because most testing Frameworks are
15:59:45pretty similar so by learning Jasmine
15:59:48you'll be able to easily use other
15:59:50testing Frameworks in the
15:59:53future to load Jasmine into our project
15:59:57we're going to go into the video
15:59:58description and we're going to click
16:00:00this link to download
16:00:13Jasmine so once that link opens we're
16:00:16going to be on this page and we're going
16:00:18to scroll down and we're going to click
16:00:20this Jasmine DST standalone. zip file to
16:00:23download it
16:00:27now once that's finished downloading
16:00:29we're going to open our downloads
16:00:34folder and if you're on Windows we're
16:00:36going to rightclick the zip file and
16:00:40click extract
16:00:41all and click
16:00:45extract now if you don't have that
16:00:47extract all option you can also create a
16:00:49folder with this name and then double
16:00:52click the zip file and drag everything
16:00:54into that folder
16:00:57if you're using a Mac you can just
16:00:58doubleclick the zip
16:01:03file so this folder contains the code
16:01:05for Jasmine and we're going to drag this
16:01:08folder into our project so let's open
16:01:11the code for our
16:01:13project and then we're just going to
16:01:15drag this folder down
16:01:19here and click copy
16:01:23folder so just make sure that this fold
16:01:25folder is beside the scripts and images
16:01:29folder next we're going to rename this
16:01:31folder so we'll right click
16:01:35rename and let's rename it to
16:01:38test- Jasmine to make it clear this
16:01:41folder contains test created with
16:01:44Jasmine so now let's press
16:01:48enter and now we have Jasmine inside our
16:01:51project so inside the lip folder we have
16:01:55some JavaScript files here and this is
16:01:58the code for the Jasmine testing
16:02:00framework so this is another way to load
16:02:02an external Library into our project we
16:02:05can just download all the code and put
16:02:07it into our project and this is useful
16:02:10if an external library has lots of
16:02:12different files like
16:02:14this before we continue let's save the
16:02:17changes into git so if we make any
16:02:20changes later it will be easier to see
16:02:22them we'll open the git section
16:02:25and then we just added all the code for
16:02:28Jasmine so at the top let's type the
16:02:31message add Jasmin testing
16:02:36framework and
16:02:42commit now that we loaded Jasmine into
16:02:45our project let's learn how to use it so
16:02:48Jasmine has a documentation page that
16:02:50shows you how to use the testing
16:02:52framework however to save time I'm just
16:02:55going to show you the features that we
16:02:56need and you can read the documentation
16:02:58later if you want so first let's learn
16:03:01how to run tests using
16:03:03Jasmine I'm going to close this for now
16:03:07and then in our code we're going to open
16:03:09the test- Jasmin folder and at the
16:03:13bottom we're going to open this spec
16:03:15runner. HTML
16:03:17file so this file loads all of the
16:03:21tests so this does the same thing as our
16:03:23test.html file from before and by the
16:03:27way in Jasmine spec is another name for
16:03:31test so spec Runner just means test
16:03:35Runner this file runs all the
16:03:38tests so let's actually rename this file
16:03:41to test.html so we can match what we had
16:03:44before and compare the two so here we're
16:03:48going to right click and
16:03:51rename
16:03:53tests. HTML and press
16:03:57enter and now let's open this file and
16:03:59take a look at the code that's
16:04:01inside so here at the top this is the
16:04:05code for the Jasmine testing framework
16:04:08so we're just loading the framework up
16:04:11here below that here we have the code
16:04:15that we want to test so this code is
16:04:18sort of like the money JS file that we
16:04:21were testing
16:04:22earlier and then at the bottom these
16:04:25files contain the tests so these files
16:04:28are sort of like the money test.js file
16:04:30that we had earlier and you'll notice
16:04:33that these are in a spec folder so as a
16:04:35reminder in Jasmine spec is another name
16:04:39for test so this is basically the test
16:04:41folder this folder contains all of our
16:04:46tests so now let's run these tests and
16:04:49to do that we just need to open this
16:04:51HTML file in live server just like we
16:04:54did before
16:04:56so for this file we're going to right
16:04:59click and open with live
16:05:05server and I'm just going to make this a
16:05:07little bigger by pressing control equals
16:05:10so it's easier to see in the
16:05:12video so this is what Jasmine tests look
16:05:15like up here we have five Green Dots
16:05:19this means we have five tests that we
16:05:21ran and the green color means that all
16:05:23of them passed so that here each test
16:05:27has a Green Dot and you'll notice that
16:05:29each test also has a name next to it
16:05:32which tells us what the test does and
16:05:35don't worry if this is in a different
16:05:36order for you Jasmine randomizes the
16:05:39order of the
16:05:40tests also notice that some of these
16:05:43tests are grouped together into a test
16:05:46suite and up here we have the name of
16:05:49the test Suite so as you can see a
16:05:52testing framework helps us do all of the
16:05:55things we were doing before and it also
16:05:57provides a nice looking website where we
16:05:59can see the test results so a testing
16:06:02framework is just an external library
16:06:05that helps us write tests
16:06:11easier now that we know what Jasmine and
16:06:14a testing framework is let's learn how
16:06:16to write our tests using
16:06:19Jasmine first we're going to go back to
16:06:21our
16:06:23code and we're going to remove the
16:06:25example code provided by
16:06:28Jasmine so down here we'll remove these
16:06:31four script
16:06:34texts and let's also remove the source
16:06:37folder so we'll right click
16:06:41delete as well as the spec folder right
16:06:44click
16:06:47delete but make sure we keep this lib
16:06:49folder because this contains a code for
16:06:53Jasmine and now inside test Jasmin we're
16:06:56going to create a new file for our test
16:06:59so we'll create a new
16:07:01file and let's say that we're testing
16:07:04money. JS again so let's name it the
16:07:06same thing here money
16:07:11test.js and press
16:07:14enter and now let's create the same test
16:07:18we had before by using Jasmine this time
16:07:21so to make it easier for the video I'm
16:07:24just going to take this file and drag it
16:07:26to the top here so we can see these two
16:07:29side by
16:07:34side so like before we're going to
16:07:36create tests for format currency first
16:07:39we'll need to import this function at
16:07:41the top so let's just actually select
16:07:45this and right click
16:07:48copy and then down here right click and
16:07:53paste and just make sure that this file
16:07:56path still works so our money test.js
16:07:59file has to be inside test- Jasmin and
16:08:03this folder should be beside the
16:08:05previous test
16:08:10folder next we're going to create a test
16:08:12suite and name the test Suite so in
16:08:16Jasmine to create a test Suite we're
16:08:18going to use a function called
16:08:22describe so this describe function is
16:08:25provided by Jasmine and it creates a
16:08:28test
16:08:30Suite next we're going to give a name to
16:08:33the test Suite so to name a test Suite
16:08:35in Jasmine we're going to give describe
16:08:37a string and this string is the name of
16:08:40the test Suite so let's name it the same
16:08:43thing as before test Suite colon format
16:08:52currency next we're going to add some
16:08:55tests inside the test Suite to do that
16:08:59we're going to give describe a second
16:09:01parameter which is a function brackets
16:09:05arrow and curly
16:09:09brackets and inside here we're going to
16:09:12create a test and give the test a name
16:09:16to create a test in Jasmine we're going
16:09:18to use another function called it and
16:09:23brackets so it is a another function
16:09:26provided by Jasmine and this creates a
16:09:30test next let's give a name to our test
16:09:34so that we know what it's doing to name
16:09:36a test we're going to give it a string
16:09:40and this is going to be the test name so
16:09:42let's name it the same thing we had
16:09:44before
16:09:46converts sense into
16:09:51dollars and now we're going to add some
16:09:54code into our tests to do that in
16:09:57Jasmine we're going to give it a second
16:09:59parameter which is another function
16:10:03brackets arrow and curly
16:10:06brackets so this is the code inside the
16:10:09test and in this test we need to compare
16:10:12these two values and display the result
16:10:16in Jasmine instead of creating an if
16:10:18statement and displaying the result
16:10:20ourselves Jasmine provides us another
16:10:23function to do all of this
16:10:26and that function is called expect and
16:10:31brackets so expect lets us compare a
16:10:34value to another value for example let's
16:10:38give expect the first value that we want
16:10:40to compare which is format currency
16:10:442095 so we'll type format
16:10:48currency brackets
16:10:52295 and now to compare this value to
16:10:55another value expect gives us an
16:10:59object and this object has many methods
16:11:02we can use to do
16:11:04comparisons so one of the methods we can
16:11:06use in this object is dot 2 equal
16:11:13brackets and then inside these brackets
16:11:16we'll put another value that we want to
16:11:18compare this to so we want to compare
16:11:21this to the string 2095
16:11:26and that's it this checks if this value
16:11:29is equal to this value and then displays
16:11:32the result on the page so it does
16:11:35everything that we did before except
16:11:37with one line of code and you'll also
16:11:40notice that jasmin's code is designed so
16:11:43that it reads like English for example
16:11:46we expect format currency
16:11:482095 to equal this string and this makes
16:11:52a test code easier to read
16:11:56so we just created our first test suite
16:11:58and our first test using
16:12:01Jasmine now let's run this test to do
16:12:05that we just need to run this Javascript
16:12:07file inside test.html
16:12:10so first let's save this
16:12:13file and then inside test.html we're
16:12:16going to load this file so in here at
16:12:20the bottom we're going to create a
16:12:23script tag
16:12:26and we'll give it a source attribute SRC
16:12:29equals double
16:12:31quotes and we're going to load money
16:12:35test.js
16:12:39test.js and remember our test file uses
16:12:42import so we also need to give it the
16:12:45attribute type equals module so this
16:12:49file has access to JavaScript module
16:12:52features so now let's save
16:12:56and we'll open this file in our browser
16:12:59so we should have it open from before if
16:13:01you don't you can write click and open
16:13:04with live
16:13:06server so we'll open the test page and
16:13:09now you can see that we have our one
16:13:11test that we created here and it's
16:13:13passing so it's green you can see here
16:13:16that we created a test Suite with a name
16:13:20and we also created a test with this
16:13:22name so we just created the first test
16:13:26that we had before except using Jasmine
16:13:28this time and you can see that Jasmine
16:13:31also creates a nice website for us to
16:13:33see the test
16:13:36results okay now that we learned how to
16:13:38use Jasmine to create a test let's get
16:13:41some practice and create the rest of our
16:13:43tests from before we'll go back to our
16:13:47code and open money
16:13:51test.js and here we're going to create
16:13:54the other two tests that we had here so
16:13:57at the bottom inside the same test Suite
16:14:01we're going to create another test using
16:14:03the function it brackets and we'll give
16:14:07it a string which is the test name and
16:14:11let's name it the same as
16:14:12before works with zero comma brackets
16:14:18arrow and curly
16:14:20brackets and now we can put something
16:14:22inside this test so in the second test
16:14:25we're going to compare these two values
16:14:28to compare values we're going to use the
16:14:30function expect
16:14:34brackets and the first value is going to
16:14:36be format
16:14:40currency brackets
16:14:42zero and then expect gives us an
16:14:46object and this object has a method
16:14:49called dot to equal which lets us
16:14:53compare this value to another value
16:14:55so we'll call this method using brackets
16:14:58and compare to the string the string 0 0
16:15:030 and now let's
16:15:06save and live server will update our web
16:15:09page automatically so we'll open the
16:15:11test page and now we have two tests and
16:15:14they both passed so that's how we create
16:15:17the second test using Jasmine and again
16:15:20don't worry if this is in a different
16:15:22order for you Jasmine randomizes the
16:15:24order of the
16:15:25tests finally let's create that third
16:15:28test that we had before we'll go back to
16:15:30our code and then in our old money test
16:15:34file we're going to create this third
16:15:36test feel free to pause the video if you
16:15:39want to give it a try
16:15:40yourself so we'll scroll down and we'll
16:15:44create another test inside this test
16:15:46Suite using the function it brackets and
16:15:50a string and we'll give it the same test
16:15:53name as before
16:15:55rounds up to the
16:15:59nearest set comma brackets arrow and
16:16:04curly
16:16:05brackets and we're going to compare
16:16:07these two values so we use exp brackets
16:16:13and give it the first value format
16:16:16currency brackets
16:16:192000.5 and to compare it we'll use the
16:16:22method
16:16:23do2 equal brackets and compare it to
16:16:3120.01 and
16:16:33save and let's go back to our test page
16:16:37and now we have three tests and all
16:16:39three of them passed so we recreated the
16:16:43tests that we had
16:16:45before now let's try making one of these
16:16:48tests fail to see what it looks like in
16:16:50Jasmine we'll open our
16:16:53code and and let's open the file utils
16:17:12money.jpg
16:17:21test so it tells us the test Suite name
16:17:24and the test name that failed and it
16:17:26will also tell us the two values that
16:17:28are not equal to each other and here it
16:17:31will tell us where this test failed so
16:17:33it tell us that it failed in money
16:17:35test.js at line
16:17:3813 so if we go back to our
16:17:41code and we open the Jasmine money
16:17:45test.js line 13 is right here so just
16:17:48telling us that this line failed the
16:17:50test
16:17:55here we can see the full list of tests
16:17:58and it will tell us that we have three
16:18:00tests two of them passed and one of them
16:18:04failed so Jasmine gives us a lot of
16:18:06details on where a test failed to help
16:18:09us fix the
16:18:10issue now let's add back math.round to
16:18:14make everything pass again we'll open
16:18:17our code and open UTS money.jpg
16:18:26math.round Open Bracket and close
16:18:30bracket and
16:18:32save and if we check our test page
16:18:35everything passes
16:18:37again so this is how we use a testing
16:18:40framework like Jasmine to create tests
16:18:43the testing framework gives us a bunch
16:18:46of functions such as describe it and
16:18:49expect and then we use these functions
16:18:52to create our test so so these functions
16:18:55have a lot of features inside them they
16:18:58do all of the setup for us and they also
16:19:01display the test on a nice web page for
16:19:04us now there's one more thing I want to
16:19:06mention which is we can use describe
16:19:09inside describe this helps us organize
16:19:12our tests
16:19:16further so now let's save our changes
16:19:18into git we'll open the git
16:19:22section and let's close this file at the
16:19:24top for
16:19:25now so inside money test.js we created
16:19:30all the tests that we had before for
16:19:32format currency by using Jasmine this
16:19:35time and for spec Runner we rename this
16:19:38file to test.html and finally we deleted
16:19:42all the test code that came with Jasmine
16:19:46so now let's add a message to describe
16:19:48our
16:19:48changes
16:19:50remove default tests and add
16:19:55money tests and
16:20:04commit now let's test a different
16:20:06function using Jasmine and along the way
16:20:09we're going to learn some more features
16:20:11of testing
16:20:13Frameworks let's go back to our
16:20:16code and we're going to scroll to the
16:20:18top and open the data/ cart. JS
16:20:23file so inside this file we have a
16:20:26function called add to cart so we're
16:20:29going to create tests for the add to
16:20:31cart
16:20:32function first since this function is in
16:20:35a different file we're going to create a
16:20:38new test file so we're going to scroll
16:20:41down and let's close the test folder so
16:20:44we don't get confused and then inside
16:20:47test- Jasmine we're going to click in
16:20:50this folder and then create a new file
16:20:53and let's name it cart
16:20:58test.js and press
16:21:00enter so we name it the original file
16:21:04name which is cart and then just add
16:21:06test at the
16:21:08end and to better organize our test
16:21:11files we usually try to match the folder
16:21:15structure of the code so for example in
16:21:18our code money. JS is inside this UIL
16:21:22folder so inside our tests we should
16:21:25also create a utils folder and put this
16:21:28file inside so we'll create a new folder
16:21:31by clicking up here and let's name it
16:21:34utils and press
16:21:37enter and then move the money test.js
16:21:40file
16:21:43inside if it asks you if you want to
16:21:46update Imports automatically you can
16:21:48click
16:21:49yes if you check your code scroll to the
16:21:53top make sure that your file path starts
16:21:56with do do slash do do slash because now
16:21:58we're inside another
16:22:01folder VSS code sometimes updates the
16:22:03file paths for us automatically but if
16:22:06it doesn't we can just add an extra dot
16:22:08do slash in front
16:22:12ourselves and we're also going to open
16:22:14money test.js and save this
16:22:19file next if we scroll up cart. JS is in
16:22:24inside a data folder so inside our tests
16:22:28we're also going to create a data folder
16:22:30let's click cart
16:22:32test.js we'll create a new folder and
16:22:35let's name this the data folder and
16:22:38press
16:22:40enter and then move card test.js inside
16:22:48here now you'll notice that this folder
16:22:50structure doesn't perfectly match the
16:22:52folder structure that we have up here
16:22:54because utils is inside the scripts
16:22:57folder but usually this data folder
16:22:59should also be inside the scripts folder
16:23:02I just made a mistake when structuring
16:23:04the
16:23:05project so let's just use this folder
16:23:07structure in our
16:23:10tests okay so now let's open cart
16:23:14test.js and now we're ready to test the
16:23:17add to cart
16:23:18function so first let's import add to
16:23:22cart at the top we'll import
16:23:25curly brackets add to
16:23:29cart from a
16:23:31string and we're going to locate cart.
16:23:34JS so first we need to get out of the
16:23:37data folder using do slash and then get
16:23:41out of the test djine folder do do slash
16:23:45and we'll go into this data folder data
16:23:48SL cart.
16:23:51JS next let's create a test suite for
16:23:55this function so we'll create some new
16:23:57lines and to create a test Suite in
16:24:00Jasmine we'll use the function
16:24:03describe
16:24:05brackets and we'll give this test Suite
16:24:07A Name by giving it a
16:24:10string so let's use the name test Suite
16:24:15colon add to
16:24:18cart and we'll give it a second
16:24:20parameter which is a function brackets
16:24:24arrow and curly
16:24:27brackets and now inside this test Suite
16:24:30we're going to add some tests so let's
16:24:33look at the code for add to cart to see
16:24:35what kind of tests we should
16:24:37add so we'll open data/ cart.
16:24:41JS and then inside add to cart you'll
16:24:45notice that this function uses an if
16:24:48statement a best practice in testing is
16:24:51to test each condition of the if
16:24:53statement
16:24:54this is known as test coverage test
16:24:57coverage means how much of the code is
16:25:00being tested and a best practice is we
16:25:03try to maximize test
16:25:07coverage so for this if statement we'll
16:25:09create a test for the first condition
16:25:12which is when the product is already in
16:25:14the cart and we'll create a test for the
16:25:17else condition when the product is not
16:25:19in the
16:25:22cart let's go back to cart
16:25:28test.js and inside this test Suite we're
16:25:31going to create a test using the
16:25:33function it brackets and we'll give it a
16:25:37string and this will be the test name so
16:25:41for the video I'm just going to scroll
16:25:43up and take this cart. JS file and put
16:25:46it at the top here so we can see our
16:25:49code and our test side by side so I'm
16:25:52going to scroll down to the add to card
16:25:55function and we mentioned that we're
16:25:57going to test each condition of this if
16:26:00statement so the first test is going to
16:26:03be when the product is already in the
16:26:05cart so that here let's name it ads and
16:26:11existing product to the cart comma
16:26:16brackets arrow and curly
16:26:19brackets and let's add another test for
16:26:22when the product is not in the cart so
16:26:23this else condition so down here we'll
16:26:27create another test using it brackets
16:26:31and a string and the test name adds a
16:26:36new product to the cart comma and a
16:26:41function brackets arrow and curly
16:26:46brackets so these are the two tests that
16:26:49we need for the two conditions of this
16:26:51if
16:26:53statement let's actually start with
16:26:55adding a new product to the cart since
16:26:58it's a little easier to
16:27:00test now unlike the format currency
16:27:03function add to cart doesn't return a
16:27:06value so we can't really compare it to
16:27:09another value using
16:27:11expect instead we're going to call add
16:27:14to cart to modify the cart and then
16:27:16check if this cart looks correct to do
16:27:20that inside here let's call the function
16:27:24add to cart
16:27:28brackets and this function takes one
16:27:32string which is the product
16:27:35ID so inside here let's give it a string
16:27:39and to find a product ID that we can
16:27:42test with we're going to go to the left
16:27:45and scroll up and we're going to open
16:27:47the data/ products. JS
16:27:50file and inside here we have a list of
16:27:54products so let's just take the first
16:27:56product ID and use it in our test we're
16:27:59going to select this ID and right click
16:28:04copy and then inside cart
16:28:08test.js in this string we're going to
16:28:11rightclick and
16:28:14paste so this will add this product ID
16:28:17to the cart and now to check if this
16:28:20code is working correctly we're going to
16:28:22check what the cart look looks like so
16:28:25first we need to import the cart we're
16:28:28going to scroll up and since we're
16:28:30already importing from cart. JS to UT
16:28:33the cart we can type a comma
16:28:36cart and then at the bottom here we're
16:28:40going to create a new
16:28:42line and first let's check if the card.
16:28:45length is correct so if we assume that
16:28:48we start with an empty cart when we add
16:28:51a product the cart. length should should
16:28:54be one so we can compare these two
16:28:56values cart. length and one so to
16:29:00compare values we're going to use the
16:29:01function expect brackets and we'll
16:29:05compare the
16:29:07cart.
16:29:09length and then here we'll use the
16:29:13method2 equal brackets
16:29:171 so now let's save this
16:29:20file and we're going to run these tests
16:29:23to run them we're just going to load
16:29:25this file inside test.html so we'll open
16:29:30this and then at the bottom we'll create
16:29:33a script
16:29:35tag give it a source attribute double
16:29:38quotes and we're going to load this file
16:29:42so this file is inside the data folder
16:29:44so we need to type data SL to go into
16:29:48the folder and then load cart test.js
16:29:54and this file also uses import so we're
16:29:57going to give it the attribute type
16:29:59equals module to enable JavaScript
16:30:02module
16:30:03features and one thing that I forgot to
16:30:06do is we moved money test into the util
16:30:10folder so we need to update the source
16:30:12attribute to add the utils folder and
16:30:15then slash to go into the folder and
16:30:18then locate money
16:30:20test.js so now let's save this HTML file
16:30:25and open this test page in our
16:30:31browser and now we should have two
16:30:33additional tests and the test that we
16:30:35just created should fail if it doesn't
16:30:38fail for you you can go into your
16:30:40console and run local storage. CLE and
16:30:43then refresh the page and it should
16:30:47fail so this tells us that the failure
16:30:50happened in the test suite at Dart in
16:30:53the test adds a new product to the cart
16:30:55which is the one we just
16:30:58created so it's telling us that the
16:31:00cart. length is not equal to one it's
16:31:03equal to a different number so why is
16:31:06this happening let's go back to our
16:31:09test open cart
16:31:13test.js and in here remember that we
16:31:16assumed the cart starts as empty and if
16:31:19we add a product the card dot length
16:31:21would be one however the cart doesn't
16:31:24actually start as
16:31:27empty in cart. JS at the top here we're
16:31:31loading the cart from local storage if
16:31:34there's nothing in local storage we use
16:31:36this default cart so our starting cart
16:31:40depends on what's inside local storage
16:31:43and this is a big problem when testing
16:31:46because local storage can change if
16:31:48there's an empty card saved in local
16:31:50storage our test will pass but if
16:31:54there's not an empty cart in local
16:31:56storage then this test will fail this is
16:32:00known as a flaky test a test that
16:32:03sometimes passes and sometimes fails
16:32:05even if we don't change the
16:32:07code now to solve this problem we're
16:32:10going to use a feature of Jasmine called
16:32:13mocks a mock lets us replace a method
16:32:17with a fake version and then we can make
16:32:20the fake version do anything we want for
16:32:23example
16:32:24when we load the cart from local storage
16:32:27we're using local storage. getet item so
16:32:30we can use a mock to create a fake
16:32:33version of get item and then we can make
16:32:36this fake version do anything we want
16:32:38like return an empty
16:32:40array so let's go ahead and create our
16:32:43first
16:32:44mock we'll go back to cart
16:32:47test.js and at the top of this test
16:32:50we're going to create a mock using
16:32:52another function of Jasmine called spy
16:32:56on and
16:32:59brackets and we'll give spy on two
16:33:02parameters the first parameter is the
16:33:05object that we want to mock in our case
16:33:08it's local storage so we'll type local
16:33:12storage comma and then we'll give it a
16:33:15string and this string will be the
16:33:18method that we want to Mark in our case
16:33:21we want to Mark the get item method so
16:33:24here we'll type get item and make sure I
16:33:28is uppercase so that we exactly match
16:33:31the method
16:33:32name so now this will replace local
16:33:35storage. getet item with a fake version
16:33:39and we can make this fake version do
16:33:41anything we want to do that spy on gives
16:33:45us an object and this object has a
16:33:49property we can
16:33:50use so at the end we'll type Dot
16:33:54and the property called
16:33:57an and this result is also an object and
16:34:01this object has a method called dot call
16:34:05fake brackets so don't worry about all
16:34:09the Dots here Jasmine just organizes its
16:34:12code so that it reads like English so
16:34:16we're spying on local storage. getet
16:34:18item and call fake so next we're going
16:34:22to give call fake a function brackets
16:34:26arrow and curly
16:34:29brackets and this function is what we
16:34:32want get item to do so we're essentially
16:34:34overwriting the original get item with
16:34:37whatever is inside this
16:34:40function so earlier we said we wanted
16:34:42get item to return the empty array for
16:34:45this test so inside this fake function
16:34:48let's make get item return the empty
16:34:52array
16:34:54now remember that local storage only
16:34:56supports strings so we need to return
16:34:58this as a string to do that we're going
16:35:01to use the code Json all uppercase do
16:35:08stringify Open Bracket and close bracket
16:35:12so this will convert whatever is in the
16:35:14brackets to a Json string and that's
16:35:17what we need for local
16:35:19storage so now let's test out this mock
16:35:22to see if it works
16:35:24below this we're going to
16:35:27console.log
16:35:29brackets and run local
16:35:32storage doget capital I item brackets
16:35:38the string
16:35:41cart let's save this file and then open
16:35:45the test page in our
16:35:47browser and we're going to open the
16:35:49console so
16:35:51rightclick inspect
16:35:54and the
16:35:56console and you'll see that Here Local
16:35:59storage. getet item is no longer loading
16:36:02from the actual local storage it's
16:36:04giving us an empty array every
16:36:07time so now we have mocked the get item
16:36:12method however you'll also notice that
16:36:15our test is still failing so how come it
16:36:18still
16:36:19fails to understand what's happening
16:36:22let's take a closer look at our code
16:36:25we'll go back to our
16:36:28code and inside our tests here we're
16:36:31mocking local storage. getet item but
16:36:34notice that above this if we scroll up
16:36:38we import the cart at the top so the
16:36:41order of this code matters first we load
16:36:45the cart from local storage and after
16:36:47we're mocking local storage. getet item
16:36:50so the card is already loaded at this
16:36:52point and this code doesn't have the
16:36:54effect that we
16:36:56want so one way to solve this problem is
16:37:00after we mock local storage here we
16:37:02should reload the cart so inside cart.
16:37:06JS just going to give it a little more
16:37:09space to reload this cart after we mock
16:37:13we just need to rerun all of this code
16:37:17so let's create a function so we can
16:37:18rerun this code at the bottom here we'll
16:37:22create a
16:37:25function and we'll call it load from
16:37:30Storage brackets and curly
16:37:33brackets and we're just going to move
16:37:36all of this code inside the function so
16:37:39let's select all the code up to cart
16:37:42equals we'll
16:37:44rightclick
16:37:47cut and then in the function we'll
16:37:50rightclick and paste
16:37:54and at the top let's create the cart
16:37:56variable again let cart and
16:38:01semicolon and lastly when we load this
16:38:04file we need to run this function so
16:38:06that we run this code at least
16:38:09once so down here we'll just run this
16:38:12function load from storage and
16:38:17brackets so let's
16:38:20save so we're basically running the
16:38:22exact same code as before except this
16:38:25code is now inside a
16:38:28function and now in our
16:38:31test after we mock local storage. getet
16:38:34item we're going to reload the cart
16:38:37using this function so first let's
16:38:40export it so we can use it in our test
16:38:42we'll type
16:38:44export and save this file and Insider
16:38:48test let's scroll up to the top we're
16:38:51already importing from cart. Js so we'll
16:38:53type a comma and we'll import load from
16:38:59storage and then we'll scroll down back
16:39:02to our test and here after we mock local
16:39:05storage. getet item we're going to load
16:39:10from Storage brackets and
16:39:15save so this time we mock local storage.
16:39:19getet item first to return an empty
16:39:22array and then when we reload the cart
16:39:25this is going to be an empty array and
16:39:28the cart will be empty and now in our
16:39:30test when we add a product to an empty
16:39:33cart the cart length will be equal to
16:39:35one so this test will pass so we can
16:39:39actually remove the console.log here and
16:39:43save and check our test
16:39:46page and now this test should be
16:39:50passing next let's go back to our code
16:39:53Cod and if we look at the add to cart
16:39:56function in cart.
16:39:58JS so in here at the bottom of this
16:40:03function you'll notice that we're saving
16:40:05the cart to local storage so this is
16:40:08going to call local storage. set
16:40:11item however we don't actually want to
16:40:14save to local storage because this is
16:40:16just test code we don't want our test
16:40:19code to be modifying local storage or
16:40:21affecting our real code
16:40:24to prevent this we're also going to mock
16:40:26local storage. set
16:40:28item so down here we're going to create
16:40:31some new lines at the top of the test
16:40:34and we're going to mock local storage.
16:40:36set item using the function spy on
16:40:40brackets and we'll give it local
16:40:44storage comma a string and the method we
16:40:48want to mock which is set
16:40:51item and
16:40:54save and remember the order of the code
16:40:57matters so we want to mock local
16:41:00storage. set item first and then we call
16:41:03add to cart so now set item will be
16:41:06replaced with a fake version and this
16:41:08will no longer save to local
16:41:13storage next spyon has another useful
16:41:16feature which is it records every time a
16:41:19method is used for example what if we
16:41:23want to make sure that add to cart saves
16:41:25the cart to local storage at the end in
16:41:28our tests set item is mocked so we can't
16:41:31really check what's inside the local
16:41:33storage instead we can just check if add
16:41:37to cart calls set item at some
16:41:40point to check if set item was called at
16:41:44the bottom we can use the function
16:41:47expect
16:41:49brackets and we're going to give this
16:41:52the method that we loed which is local
16:41:56storage. set
16:42:00item and remember that expect gives us
16:42:03an object and this object has many
16:42:05useful methods to check stuff like dot
16:42:08to
16:42:09equal so another method we get from
16:42:13expect is dot 2 have been called times
16:42:21brackets
16:42:23so make sure that you write this method
16:42:25in cam case two is lowercase and every
16:42:28word after starts with a
16:42:31capital so this method checks how many
16:42:33times local storage. set item was called
16:42:37in the code above so we expect it to be
16:42:40called once inside add to cart so we're
16:42:43going to give it the number
16:42:45one so keep in mind that this only works
16:42:48if this method has been mocked with spy
16:42:51on so now let's
16:42:53save and open our test
16:42:56page and you can see that all of our
16:42:58tests passed and local storage. set item
16:43:02was called
16:43:03once so after we mock a method we can
16:43:07check how many times this method was
16:43:10called and we can even check what values
16:43:13this method received but I'll leave that
16:43:16as an
16:43:17exercise another thing you'll notice
16:43:19here is that each test can have multiple
16:43:22expectations
16:43:23and the test will only pass if all of
16:43:26its expectations
16:43:29pass now let's add a few more
16:43:31expectations to this test for practice
16:43:35so one thing we can check is we can
16:43:37check the first product in the cart and
16:43:40make sure that its product ID matches
16:43:42this string here so below this let's use
16:43:46another expect brackets and we're going
16:43:50to check the first product in the cart
16:43:53using cart square bracket
16:43:560 so this is going to be an object and
16:44:00this object is going to have a property
16:44:03called product ID so that here we'll get
16:44:07the dot product
16:44:11ID and we're going to check if this
16:44:13product ID is equal to this string so to
16:44:16do that we'll use the dot 2 equal method
16:44:21brackets and we'll give it this string
16:44:24here so let's just select this and
16:44:27rightclick
16:44:29copy and here right click and
16:44:34paste another thing that we can check is
16:44:37the quantity when we add a new product
16:44:40to the cart the quantity should start
16:44:42out as one so down here we're going to
16:44:46add another
16:44:47expect
16:44:49brackets and we're going to check the
16:44:52first product
16:44:53cart square bracket
16:44:550.
16:44:57quantity. 2 equal brackets one and
16:45:04save now let's open our test
16:45:07page and you can see that all of those
16:45:10expectations
16:45:13passed now let's move on and create the
16:45:16test for adding an existing product to
16:45:18the cart so we'll go back to our code
16:45:23and scroll up to the first test
16:45:26here so first we need to set up the cart
16:45:29so that it already contains the product
16:45:32that we want to add to do that we're
16:45:35going to Mark local storage. getet item
16:45:38again so down here we can just reuse
16:45:41this code so we're going to select this
16:45:44code and right
16:45:47click
16:45:49copy and then in the first test here
16:45:53rightclick and
16:45:57paste and this time do set up the test
16:46:00we're going to put a product into the
16:46:02cart at the beginning and then we're
16:46:04going to add the same product to the
16:46:07cart so inside this cart array let's add
16:46:11an
16:46:12object and each product has a property
16:46:15called product ID so we're going to add
16:46:18this property product ID colon
16:46:23and let's just give the same product ID
16:46:25that we used down here so we'll select
16:46:29this and then right click
16:46:33copy and then up here we're going to
16:46:36right click and
16:46:38paste
16:46:40comma and each product also has a
16:46:43quantity so we'll give it a quantity
16:46:46colon and let's just give it one comma
16:46:51and also a delivery option so delivery
16:46:55option ID colon and let's just give it
16:46:59the string
16:47:00one and
16:47:03save so now when we do local storage.
16:47:06getet item it will give back this array
16:47:09as the starting cart and then we need to
16:47:12make sure that we reload the cart from
16:47:16Storage next let's scroll down and let's
16:47:20copy the rest of the tests because it's
16:47:23going to be very similar so we're going
16:47:25to select this code and
16:47:28rightclick
16:47:30copy and then up here create some new
16:47:34lines and right click and
16:47:39paste and also one thing I forgot to
16:47:41copy over is to mock local storage. set
16:47:45item so at the
16:47:47top let's
16:47:49also spy on brackets
16:47:54local
16:47:55storage comma a string set
16:48:00item so a mock only lasts for one test
16:48:04once that test is finished the method is
16:48:06no longer mocked so that's why in this
16:48:09test we also have to mock local storage.
16:48:12set
16:48:14item and now in this test we're just
16:48:17going to modify these expectations so
16:48:20that they make sense for this test
16:48:23if we add an existing product to the
16:48:25cart the cart. length will still equal
16:48:28one because these product IDs match and
16:48:31we're just increasing the
16:48:33quantity we're still going to call local
16:48:35storage. set item once so this is
16:48:38correct
16:48:39still the first item in the cart is
16:48:42going to have this product ID and the
16:48:45only thing we're going to change is that
16:48:47the quantity is now going to increase by
16:48:50one so it's going to go from one to two
16:48:54this
16:48:56time so everything is the same except if
16:48:59we add an existing product we're just
16:49:01increasing the quantity now let's
16:49:05save and check the test
16:49:08page and now the existing product test
16:49:12is
16:49:13passing and that's it we created tests
16:49:16for the add to cart
16:49:18function so now let's do some cleanup
16:49:21and we're actually going to remove
16:49:23everything from local storage since we
16:49:25were modifying it earlier in the test
16:49:28and we might have messed it up so on
16:49:30this page we're going to
16:49:32rightclick
16:49:34inspect and open the console and to
16:49:38remove everything from local storage
16:49:40we're going to type the code local
16:49:43capital S
16:49:45storage. clear and brackets and press
16:49:51enter and then we'll refresh the
16:49:54page now finally let's go into get and
16:49:57save our changes so we'll open our code
16:50:01and we can close this one for
16:50:04now and we'll open the get
16:50:07Section so in cart. JS at the top we
16:50:12basically put all the code that loads
16:50:14the cart into a function so we can use
16:50:17it in our
16:50:18tests and then here we moved money
16:50:21test.js into a utils folder in test.html
16:50:26we're loading the new cart test.js file
16:50:31and then inside cart test.js we added
16:50:34some tests for the add to cart function
16:50:37so now let's create a message describing
16:50:40these
16:50:41changes
16:50:42create
16:50:44automated tests for add to cart and
16:50:50commit
16:50:56the last thing we're going to learn in
16:50:58this lesson is how to create more
16:51:00complicated
16:51:01tests so far we've only been testing a
16:51:05single function for example we tested
16:51:08the add to card function as well as the
16:51:11format currency function so these are
16:51:14called Unit tests because we're only
16:51:17testing one unit or one piece of the
16:51:20code now what if we want to test t a
16:51:22whole page or part of a page and this
16:51:26requires a more complicated test called
16:51:28an integration
16:51:30test an integration test tests many
16:51:34units of code or pieces of code working
16:51:38together for example in our code we're
16:51:41going to go to scripts checkout thee
16:51:44orders summary. JS
16:51:46file and we're going to test this render
16:51:49order summary function so this function
16:51:52creates a whole section on the checkout
16:51:55page and it uses many different
16:51:57functions and libraries to create the
16:51:59page so testing this function will be
16:52:02considered an integration test because
16:52:05it uses many different pieces of code or
16:52:07units of code together so let's start by
16:52:11creating a test file for this function
16:52:14so this is in the orders summary. JS
16:52:16file inside our test here let's match
16:52:21the file structure that we have here
16:52:22here so we're going to click test-
16:52:25Jasmin and first we're going to create a
16:52:27checkout folder so we'll click here to
16:52:30create a
16:52:31folder and we're going to name it
16:52:34checkout and press
16:52:37enter and then inside the checkout
16:52:39folder we're going to create a new file
16:52:42so we'll click this to create a new
16:52:44file and we'll name it the same as above
16:52:48order summary and ADD test
16:52:53.js and press
16:52:56enter so by matching the file structure
16:52:59it's clear that this test file is going
16:53:02to test ORD summary.
16:53:04JS and again for the video I'm just
16:53:07going to drag this file to the top here
16:53:10so we can see this and the test side by
16:53:15side and now we're going to test this
16:53:17render order summary function so first
16:53:20we're going to import this function into
16:53:22to our test file at the top we'll import
16:53:26curly brackets the render order summary
16:53:31function from a string and we're going
16:53:35to locate this file so first we need to
16:53:37get out of the checkout folder and out
16:53:40of the test Jasmine folder so we'll use
16:53:42two do do slash do do slash and then
16:53:47we're going to go into the scripts
16:53:48folder and into the checkout folder
16:53:51Scripts slash checkout slash and we'll
16:53:55load order
16:54:07summary.jpg
16:54:19[Music]
16:54:20order summary
16:54:23a comma and a function brackets arrow
16:54:27and curler
16:54:28brackets and now what test cases should
16:54:31we create render order summary creates a
16:54:35part of the page so when we're testing a
16:54:38page the two things we need to test is
16:54:41how the page looks and how the page
16:54:44behaves let's start by testing how the
16:54:47page looks inside our test Suite we're
16:54:50going to create a test using it brackets
16:54:55and we'll name this test with a
16:54:57string and this will just be a basic
16:55:00test case so we'll describe what this
16:55:03function does which is
16:55:07displays the
16:55:09cart comma and we'll give it a function
16:55:12brackets arrow and curly brackets and
16:55:16now we're ready to create the
16:55:19test so render order summary usually
16:55:22displays the cart on the page however in
16:55:26our tests where does this cart get
16:55:29displayed so if we look at the code in
16:55:32this
16:55:33function and we scroll down here we
16:55:36generate the HTML for the
16:55:39cart and then after we generate the
16:55:42HTML we put the HTML inside an element
16:55:46with the class js- order-
16:55:50summary however we don't have this
16:55:53element in our tests so to fix this
16:55:56we're just going to create an element
16:55:57with the class js- order-
16:56:00summary to do this we're going to scroll
16:56:03down and we're going to open the
16:56:05test.html
16:56:07file and then at the bottom we're going
16:56:10to go to the body and then inside here
16:56:14we're going to create a div so less than
16:56:17div and greater
16:56:19than so remember how we said we need to
16:56:21create create an element with the class
16:56:23js- order- summary we're going to create
16:56:27that element and put it inside this div
16:56:30so this div is going to act like a
16:56:33container the reason we use a container
16:56:36is that when we create elements in our
16:56:37test we don't want to be modifying the
16:56:40entire body because the body might
16:56:42contain our test results from jasine so
16:56:44we put everything inside a
16:56:46container so now let's give this div a
16:56:49class so we can use it in our JavaScript
16:56:52we're going to give it a class equals
16:56:54double quotes and we're going to call
16:56:56this the js- test-
16:57:00container to make it clear this is a
16:57:03container for all of our test
16:57:05code and
16:57:08save and now let's get this container
16:57:11into our tests we can do that using
16:57:14document. query
16:57:17selector brackets and a string and we'll
16:57:20select the class using using a js- test-
16:57:27container and then inside this container
16:57:30we're going to create an element with
16:57:31the class js- order- summary so to put
16:57:36something inside this element we're
16:57:38going to use the property do inner
16:57:42Capital
16:57:43HTML equals a template
16:57:49string and inside this template
16:57:52let's create a div element less than div
16:57:56greater than less than SL div greater
16:57:59than and as we mentioned we'll give this
16:58:02element a class equals double quotes of
16:58:06js- order-
16:58:10summary so this basically takes this
16:58:12HTML and puts it inside our test
16:58:15container so it will put it inside here
16:58:19and now we have the element that we need
16:58:21for render order summary so when we call
16:58:24this function it's going to create the
16:58:25cart and display it in this element
16:58:28here next if we look at the code for
16:58:32render order summary and we scroll to
16:58:35the
16:58:37top you'll notice that it takes the cart
16:58:40and then displays it on the page but
16:58:43remember that by default we load this
16:58:45cart from local storage and this can
16:58:48cause problems in our test depending on
16:58:51what is inside local storage so to fix
16:58:53this we're going to mock local storage.
16:58:56getet item again to control exactly
16:58:59what's inside this cart so let's
16:59:02actually open the cart test that we had
16:59:05before and we're just going to copy
16:59:08paste this mock that we created so we're
16:59:10going to start from here this function
16:59:13and we're going to select the code up to
16:59:16spy on get item and then
16:59:19rightclick copy
16:59:22and then down here we're going to
16:59:25rightclick and
16:59:28paste and one other thing we need to do
16:59:30here is we don't have access to load
16:59:33from Storage right now so we need to
16:59:35import it at the
16:59:38top let's also copy the import that we
16:59:41had here so we're going to select this
16:59:44and then right click
16:59:47copy and then down here we're going to
16:59:50rightclick and paste the
16:59:52import and we just need to make sure
16:59:54that this file path locates cart. JS so
16:59:58do/ do slash it's going to go outside
17:00:00checkout and outside test- Jasmin and
17:00:03then it will go inside the data folder
17:00:06and then locate card. JS so this file
17:00:09path is correct and currently we're not
17:00:12using these two values so we can just
17:00:14remove
17:00:19them and now let's set up this cart for
17:00:22this test so we could just use this cart
17:00:25here however to make our test a little
17:00:28more detailed let's open the cart. JS
17:00:33file and at the top here we're going to
17:00:36use this default card instead because it
17:00:39has two products with different
17:00:41quantities so we can test more things so
17:00:44we're just going to select this card
17:00:46here and then right click
17:00:49copy and then down here open order
17:00:52summary
17:00:53test and we're going to select this card
17:00:57and remove
17:00:58it and inside these brackets we're going
17:01:01to right click and paste that default
17:01:05cart and now that the HTML and the cart
17:01:09is set up for this function at the
17:01:12bottom we can call the function render
17:01:16order summary and
17:01:19brackets and Save
17:01:25so now let's run this test file we're
17:01:28going to open test.html
17:01:31and then beneath these tests we're going
17:01:34to add another script Tech less than
17:01:37script Source equals and we'll load the
17:01:42checkout slash order summary test.js
17:01:49file and we need to give it the
17:01:51attribute type Ty
17:01:53equals module because we used
17:01:57Imports and let's save so we run this
17:02:00test so we'll open our test
17:02:03page and you can see that the cart was
17:02:06rendered onto this test page and we
17:02:10still have our Jasmine results at the
17:02:11bottom here so you notice that when we
17:02:14render this it didn't load any CSS or
17:02:18images and this is okay because we can't
17:02:21really use code to check if the page
17:02:23visually looks correct however we can
17:02:27use this to check the contents of the
17:02:29page like if the products and the
17:02:31quantities are
17:02:33correct so first our cart has two
17:02:36products in it so we can check if there
17:02:38were two products that were rendered on
17:02:41the page let's go back to our
17:02:45tests and let's take a look at the
17:02:48orderers summary. JS file
17:02:54and when we render the order summary we
17:02:56scroll down for each product in the cart
17:03:00we create an element with the class
17:03:02cart--
17:03:04container since we have two products in
17:03:06the cart let's check that we created two
17:03:09of these elements on the page so we're
17:03:12going to open the order summary test.js
17:03:18file and then in the first test at the
17:03:21bottom of this test we're going to add
17:03:24some lines and we're going to check if
17:03:27we have two of these elements to do that
17:03:29we can use the Dom using
17:03:32document. query selector all brackets
17:03:38and a string and we could select the
17:03:41class card- item D container however
17:03:44this class is used for CSS so remember
17:03:47if we're going to use a class in
17:03:48JavaScript we start with js-
17:03:53let's add a new class to this element
17:03:55that we can use for the test we'll add
17:03:58js- cart D item D
17:04:03container so now we're going to select
17:04:05all the elements with this class
17:04:08using js- card- item D
17:04:14container and let's save the ORD
17:04:17summary. JS
17:04:20file and then down here we're going to
17:04:23check if we have two of these elements
17:04:25on the page so again to check something
17:04:28in our tests we're going to use the
17:04:30function expect Open Bracket and let's
17:04:34create a new line to make it a little
17:04:37cleaner and at the end we'll give a Clos
17:04:40bracket like
17:04:41this and this code gives us an array of
17:04:45elements so here we're going to check if
17:04:48the dot length of this is equal to to
17:04:52two so expect gives us an object which
17:04:55has a method called dot 2 equal brackets
17:05:01and two so this checks if we have two of
17:05:04these elements on the page so let's
17:05:08save and then check the test
17:05:11page and scroll to the bottom and you'll
17:05:14see that this test
17:05:16passed so that's how we check if we
17:05:18render the page correctly
17:05:23next let's do another check of what we
17:05:25rendered on the page so another thing we
17:05:28can test is If the product quantities
17:05:30are correct so first we need to get this
17:05:33quantity element into our tests so we'll
17:05:37go back to our
17:05:38code and then inside the HTML of the
17:05:42order summary we're going to scroll
17:05:45down until we see a div with the class
17:05:48product- quantity and we're displaying
17:05:51the Quant
17:05:53here so now we're going to take this
17:05:55element put it into our test and check
17:05:58that the quantity here is
17:06:00correct so to do that let's give another
17:06:04class to this element so we can select
17:06:06it using JavaScript so here we'll add
17:06:09another class
17:06:11js-
17:06:13product-
17:06:15quantity and we want to check the
17:06:17quantity for each product so we need to
17:06:20identify which product this is for we
17:06:23can do that by adding a dash to this
17:06:25class and then inserting using dollar
17:06:28and curly brackets the products ID which
17:06:32is the matching product matching
17:06:36product. ID and
17:06:40save and now let's get this element into
17:06:43our test so down here we're going to
17:06:47document. query
17:06:50selector
17:06:52brackets and we'll give it a template
17:06:54string because we're going to insert a
17:06:56product ID so we're going to select this
17:06:58class using a js- product- quantity Dash
17:07:05and then insert the product ID so in our
17:07:09cart we have two products and let's
17:07:11start with the first product ID now to
17:07:14make this easier let's put this string
17:07:17inside a variable so we can reuse it
17:07:19below so above the this let's create a
17:07:22variable with const call it product
17:07:27id1 equals and we're going to select
17:07:31this ID and then right click
17:07:35cut and then up here rightclick and
17:07:40paste and then we're just going to use
17:07:43this variable down here product
17:07:48id1 and then when we're getting this
17:07:50element into our our code we're also
17:07:53going to insert the product ID which is
17:07:56product
17:07:59id1 but now we're going to check if the
17:08:02text inside is correct so for the first
17:08:05product we have a quantity of two so the
17:08:09text inside this element should say
17:08:11Quantity colon
17:08:142 so to check this at the bottom of our
17:08:18test as usual we're going to use the
17:08:20function
17:08:21expect Open Bracket and a new line and
17:08:25then here we can remove the semicolon
17:08:28and close
17:08:30bracket and we're going to get the text
17:08:32inside this element now we're not going
17:08:34to usein HTML because this element
17:08:38contains a bunch of HTML inside but we
17:08:41only want the text to get just the text
17:08:44we're going to use the property do inner
17:08:50text so we expect the text inside this
17:08:53element to contain quantity colon
17:08:562 however this element also has some
17:08:59other text like update and
17:09:01delete so we just want to check if
17:09:04quantity 2 is somewhere inside this
17:09:06element so how do we check that to do
17:09:10that we're going to use a different
17:09:11method of expect called dot to
17:09:17contain and
17:09:19brackets and we're going to give it the
17:09:21string that we want to check for which
17:09:23is capital Q quantity colon
17:09:292 so the two contain method checks if
17:09:33this value contains this string so they
17:09:36don't have to be an exact match like
17:09:39with two
17:09:40equal as long as quantity colon 2 is
17:09:43somewhere in this element then this
17:09:46expectation will pass and this is
17:09:49exactly what we need when this El has
17:09:51some extra text that we don't really
17:09:53need to
17:09:55check so now let's click our test file
17:09:58and
17:09:59save and open the test
17:10:02page and scroll to the bottom and you'll
17:10:05notice that the test passed so for the
17:10:08first product we're displaying the
17:10:10quantity of two
17:10:13correctly let's also check the quantity
17:10:16of the second product we'll go back to
17:10:18our
17:10:20tests and and just like before let's
17:10:23create a variable to store this ID so
17:10:27we'll create a variable with const
17:10:30product
17:10:32id2 equals and we'll select this
17:10:36ID and right click
17:10:39copy and then here right click and
17:10:44paste and then we'll remove
17:10:47this and use the variable product
17:10:53id2 and then at the bottom we're going
17:10:56to get the quantity element for Product
17:10:582 so let's just copy this code because
17:11:01it's very similar we'll select it right
17:11:04click copy and then down
17:11:07here right click and
17:11:11paste so this time we're going to get
17:11:13the quantity element for product ID
17:11:172 and in our cart product two has a
17:11:20quantity of one so down here we're going
17:11:24to check if the text contains quantity
17:11:27colon 1 and
17:11:31save and let's open our test
17:11:33page and scroll to the
17:11:36bottom and this test passed so we're
17:11:39displaying the quantity of both products
17:11:41correctly on the
17:11:44page the second thing we can test in an
17:11:47integration test is how the page behaves
17:11:50for for example on this page we can
17:11:53click the delete link to remove a
17:11:56product from the page so let's create a
17:11:59new test to make sure that the delete
17:12:01link behaves
17:12:03correctly we'll open our test
17:12:06code and at the bottom we're going to
17:12:09create a new test using the function it
17:12:13and
17:12:14brackets we'll give it a name and let's
17:12:18describe what the behavior should be
17:12:21which is removes a
17:12:24product comma and a function brackets
17:12:29arrow and curler
17:12:32brackets now let's do the same setup as
17:12:34the first test so we start with two
17:12:37products in the cart so we can select
17:12:40from load from storage and we'll select
17:12:43all of this code up here and then
17:12:47rightclick
17:12:49copy and at the bottom
17:12:52we're going to right click and
17:12:56paste so this will set up the HTML
17:12:59element that we need for the order
17:13:01summary as well as the
17:13:03cart and after this let's render the
17:13:07order summary using the function render
17:13:11order summary and
17:13:16brackets so once we've displayed this on
17:13:18the page we're going to get the delete
17:13:20link and click it so first let's get the
17:13:24delete link into our code so we'll go to
17:13:27the orders summary. JS file and inside
17:13:30the HTML we're going to scroll down a
17:13:33bit till we see the delete quantity link
17:13:37and let's test the delete link for the
17:13:39first product in the
17:13:41cart so first we need to add a class to
17:13:44this element so we know which product
17:13:47this is for so here we're going to add a
17:13:50class JF s- delete
17:13:53dink Dash and insert the product ID
17:13:58which is the matching
17:14:01product
17:14:03doid and I'll add a new line to make the
17:14:06code a little bit cleaner and now we can
17:14:09save and then down here we're going to
17:14:12get the delete link for the first
17:14:14product ID so at the bottom we use
17:14:19document do query
17:14:21selector
17:14:23brackets and we'll give it a template
17:14:26string because we're going to insert the
17:14:28product ID and we'll select this class
17:14:31using js- delete
17:14:35dlink D and then insert dollar curly
17:14:40brackets product
17:14:44id1 and now we need to click this delete
17:14:47link to remove the first product from
17:14:50the page and from the cart to click an
17:14:53element using Code we can just get it
17:14:56using the Dom and then use the method
17:14:59dot click and
17:15:02brackets so this will click delete on
17:15:04the first product and remove it so let's
17:15:08save and take a look at our test
17:15:12page and unfortunately this test failed
17:15:16so let's take a look at the details of
17:15:18the failure to figure out how to fix it
17:15:22so it's telling us that we cannot set
17:15:24properties of null this means that a
17:15:27value in our code is null and we're
17:15:29trying to give it a
17:15:32property and here it will tell us which
17:15:35line we got this error from so this
17:15:38error happened in our test file and the
17:15:41line that created this error was in Ord
17:15:43summary. js on line
17:15:45132 or whatever line that you see here
17:15:48on your page
17:15:51so inside our code we're going to open
17:15:54orders summary.
17:15:55JS and I'm going to scroll down to line
17:15:59132 and you can scroll down to the line
17:16:01that you got on your
17:16:03page so this line of code is actually
17:16:07part of the code that we run when we
17:16:10click delete so remember that when we
17:16:13click delete we also update the payment
17:16:16summary on the right side of the page
17:16:18and that's what this line does now the
17:16:21reason this is not working is if we open
17:16:24the payment summary JS file and we look
17:16:27at what this does at the bottom after we
17:16:30generate the HTML we try to put the HTML
17:16:34in an element with a class js- payment D
17:16:38summary and this element does not exist
17:16:41in our tests so one way to fix this is
17:16:44to add this element to our
17:16:48test so let's open our test again
17:16:51we'll open the order summary
17:16:54test.js and then we'll scroll
17:16:56up and then here when we create the
17:16:59order summary element we're also going
17:17:02to create the payment summary
17:17:04element so we'll create a less than div
17:17:08greater than less than SL div greater
17:17:11than and here we'll give it a class
17:17:14equals double quotes and we'll give the
17:17:18class that the payment summary needs
17:17:20which is
17:17:21js- payment D
17:17:24summary and
17:17:28save so now that the payment summary
17:17:30element is set up we can open our test
17:17:33page and our test should no longer have
17:17:36a failure so you also notice that the
17:17:39payment summary got rendered or
17:17:40displayed on the
17:17:43page okay so in our tests we only
17:17:46clicked the delete link for the first
17:17:48product but we didn't actually check if
17:17:50the page looks
17:17:52correct and that's what it shows here
17:17:54with this yellow dot this test has no
17:17:57expectations
17:17:59yet so let's go back to our test and add
17:18:02some expectations at the bottom so we'll
17:18:05scroll down and down
17:18:09here after we click delete for the first
17:18:12product we expect that there's only one
17:18:14element left on the page for the
17:18:17cart so in our first test we actually
17:18:20had a check for this so we can scroll up
17:18:24and here we check if we have two cart
17:18:27item containers on the page so let's
17:18:30just reuse this check because it's very
17:18:32similar we'll select it right click
17:18:37copy and then down
17:18:39here we're going to right click and
17:18:44paste and this time we only expect one
17:18:47cart item container to be left on the
17:18:49page so so we'll change this to one so
17:18:53we'll
17:18:54save open the test page scroll down and
17:18:58now this test
17:19:02passed let's also do a more detailed
17:19:05check so we're going to check that the
17:19:07first product is no longer on the page
17:19:11we'll go back to our
17:19:13tests and then down here we're going to
17:19:16get the card item container for the
17:19:18first product we use
17:19:21document. query selector
17:19:25brackets and to get the element for the
17:19:27first product we're going to open orders
17:19:30summary. JS and then scroll up in the
17:19:35HTML until we find the cart item
17:19:39container
17:19:40element and we're going to look for this
17:19:42class right here which tells us which
17:19:44product this element is for so in here
17:19:48we'll give it a template string because
17:19:50we'll in insert the product ID and we'll
17:19:52look for this class using a
17:19:57js-- item Das container Dash and insert
17:20:03the first product so product
17:20:09id1 and because we removed this product
17:20:12from the page we expect this result to
17:20:15be null so we'll use the function expect
17:20:20open bracket and a new line and then
17:20:23down here a close bracket and we'll use
17:20:26the method
17:20:28do2 equal brackets and we expect this to
17:20:32be null and
17:20:36save let's also check that the second
17:20:39product is still on the page because we
17:20:42didn't delete
17:20:43it so let's just make a copy of this
17:20:46check we'll select it right click copy
17:20:51and then
17:20:52here right click and
17:20:56paste and we'll get the element for
17:20:59product ID 2 this time and we want to
17:21:02make sure that this exists so that it is
17:21:05not equal to null in Jasmine to check if
17:21:08something is not equal
17:21:10to expect gives us another property we
17:21:13can use called dot
17:21:17not so if we use theot property it will
17:21:20check the opposite of whatever is next
17:21:24so this will check if this value is not
17:21:27equal to null so remember the code for
17:21:30Jasmine is designed to read like
17:21:33English let's save and check the test
17:21:37page and scroll
17:21:40down and this test passed so we're
17:21:43displaying the correct products on the
17:21:45page after
17:21:48deleting now there's one more thing that
17:21:50we need to check here which is after
17:21:52deleting is the cart array itself
17:21:56updated so we'll go back to our code and
17:21:58add that
17:21:59check so first we need to import the
17:22:02cart so we can use it in this test we're
17:22:05going to scroll up to the
17:22:06top and we're already importing from
17:22:09cart. JS so we'll add a comma and import
17:22:13the
17:22:14cart and then at the
17:22:17bottom we're going to check if the card
17:22:19is correct
17:22:22so the cart started out with two
17:22:24products inside after removing the first
17:22:27product the card should have a length of
17:22:30one and the remaining product should
17:22:33have product id2 so let's add both of
17:22:36these checks at the bottom so we'll
17:22:39scroll back
17:22:42down and we'll use expect
17:22:46brackets and we'll check if cart. length
17:22:51do 2 equal brackets
17:22:551 and we'll also expect brackets and
17:23:00we'll check the first product in the
17:23:02cart which is cart square bracket 0 and
17:23:06we'll check its product ID do2
17:23:13equal and it should equal product ID 2
17:23:17so product id2
17:23:21and
17:23:22save so let's open our test
17:23:24page and scroll to the bottom and this
17:23:28test still passed so once we click
17:23:30delete the card array is also
17:23:34correct so that's how we create an
17:23:36integration test it tests many units of
17:23:39code or pieces of code working together
17:23:43and it lets us test how our page looks
17:23:46and how our page behaves
17:23:51now there's one thing that I forgot to
17:23:52do when we created these tests if we
17:23:55look at our
17:23:56code and I'm going to open orders
17:23:59summary.
17:24:01JS when we click delete at the bottom
17:24:06here it uses a function called remove
17:24:09from
17:24:10cart and if I look at the code for this
17:24:13function which is right here remove from
17:24:16cart this function actually saves the
17:24:18cart to local storage and and calls
17:24:20local storage. set
17:24:23item however it's recommended not to
17:24:26modify local storage in our test so
17:24:29inside the order summary test file we
17:24:32should also mock local storage. set item
17:24:36in this test so we'll scroll to the
17:24:40top and at the start of the test let's
17:24:43mock set item using spy on
17:24:48brackets local
17:24:51storage comma the string set
17:24:55item and
17:24:58save and we'll open the test page and
17:25:01make sure that the test still passes and
17:25:04we might have messed up our local
17:25:05storage because of that mistake so let's
17:25:08reset local storage again we'll right
17:25:11click on this page
17:25:14inspect open the
17:25:17console and we'll type the code local
17:25:21storage. CLE brackets and press
17:25:26enter and refresh the page just to be
17:25:30safe now another thing that we might
17:25:32want to add is that when we render the
17:25:35order summary on the page it's taking up
17:25:37a lot of space and it pushes the test
17:25:39results to the bottom so what we can do
17:25:42is after our test we can actually remove
17:25:45all of this
17:25:46HTML so let's go back to our code
17:25:50in the order summary test file at the
17:25:53end of the first test we'll create some
17:25:55new lines and remove the HTML that we
17:25:58created to do that we can scroll up to
17:26:02this code so to remove the HTML we can
17:26:06just set this element inner HTML to the
17:26:09empty string so we'll select this code
17:26:13right click
17:26:15copy and then down here right click and
17:26:20and
17:26:21paste so in our test all the HTML we
17:26:25created was placed inside this test
17:26:28container and we're just going to remove
17:26:30all that
17:26:31HTML by setting the inner HTML to the
17:26:35empty string and we'll do the same thing
17:26:38for the second test so we'll select this
17:26:40code rightclick
17:26:43copy and then down here at the
17:26:47bottom we'll right click and
17:26:50paste so this is just some cleanup we
17:26:53can do at the end of each test let's
17:26:56save and look at our test
17:26:59page and now all the HTML that we
17:27:02generated is gone and we can see the
17:27:04test results more
17:27:08clearly lastly we're going to learn a
17:27:11shortcut we can use in Jasmine called
17:27:14hooks a hook lets us run some code for
17:27:18each test for example
17:27:21if we go back to our code notice that
17:27:24before each of our tests we do a bunch
17:27:26of setup here so we can actually share
17:27:29all of this code between our two tests
17:27:32using a hook so to create a hook we're
17:27:36going to scroll up to outside of both of
17:27:40these
17:27:41tests and at the top of the test Suite
17:27:44we're going to use another function
17:27:46provided by Jasmine called before
17:27:50capital E
17:27:52each brackets and we'll give this a
17:27:56function brackets arrow and curler
17:28:00brackets so this is called a before each
17:28:04hook and it will run this function
17:28:07before each of our
17:28:09tests so inside this function we can put
17:28:12our setup code so that we run the setup
17:28:14code before each of our
17:28:17tests let's actually take the setup code
17:28:19for the second test because it's a
17:28:22little more
17:28:23detailed so down here we're going to
17:28:25select the code starting from render
17:28:27order summary all the way up to mocking
17:28:31local storage. set item and we'll
17:28:34rightclick and cut this
17:28:37code and remove these new
17:28:40lines and then at the top inside before
17:28:44each we're going to rightclick and paste
17:28:50so now before each of our tests it's
17:28:52going to run this function and it's
17:28:54going to run all of our setup code so
17:28:57this is a great way to share code
17:28:59between our tests and remove
17:29:02duplication so now that we're running
17:29:04this inside before each if we scroll
17:29:07down to the first test we don't have to
17:29:09run this code again so we can actually
17:29:12remove
17:29:13it and we'll remove this Mock and we'll
17:29:18remove the render order summary as
17:29:20W and all we're left with are the
17:29:23expectations for our
17:29:26test now before we save we need to fix
17:29:29one thing with this code here so right
17:29:32now these two variables are inside this
17:29:36function and because of scope these will
17:29:39be contained inside this function and we
17:29:42can't use it down here in our
17:29:44tests so to fix this we can just move
17:29:47these variables outside of this function
17:29:50up here so we're going to select these
17:29:52lines and then right click
17:29:56cut and up
17:29:59here we're going to right click and
17:30:04paste so now any code inside this outer
17:30:07function can use these two variables
17:30:10including our
17:30:12tests so now let's
17:30:15save and check the test
17:30:18page and everything is still still
17:30:20passing so that's how we use a hook to
17:30:23run some code before each test now
17:30:27before each is not the only hook that we
17:30:29can use Jasmine provides several hooks
17:30:32that we can use in our
17:30:35tests another common Hook is after each
17:30:38which lets us run a function after each
17:30:41test so this is really useful for
17:30:44cleanup code like we have down here when
17:30:47we remove the
17:30:48HTML all leave using after each as an
17:30:52exercise now let's go into git and save
17:30:55our changes and I can close these three
17:30:59files at the top for
17:31:01now so we'll open the git
17:31:04section and then inside orders summary.
17:31:08JS we added some classes that we're
17:31:11going to use in our
17:31:13tests inside test.html we are loading
17:31:17our order summary test file and we also
17:31:20created a test container where we're
17:31:23going to put our HTML that we
17:31:26generate and then for the order summary
17:31:29test file this contains the test that we
17:31:32created for the order
17:31:34summary now let's create a message
17:31:36describing our
17:31:38changes create automated tests for order
17:31:46summary and commit
17:31:54now that we've created all these tests
17:31:56for our project when we make some
17:31:59changes to our code we can just open the
17:32:02testing page and it will rerun all of
17:32:05our
17:32:06tests so here's the process that we do
17:32:08when we write code first we make changes
17:32:12to our code and then we rerun the tests
17:32:15to make sure that everything still works
17:32:18and finally we save our changes into
17:32:22git now before we end the lesson we're
17:32:25going to do one more cleanup we'll go
17:32:27back to our
17:32:29code and we'll open our
17:32:33files and here we usually organize all
17:32:36of our tests into a folder called tests
17:32:40however in this lesson we named this
17:32:43folder test- Jasmin because we wanted to
17:32:46compare this folder to tests that were
17:32:48created without a testing framework but
17:32:52now that the lesson's over we're going
17:32:54to rename test- Jasmine to just test to
17:32:57make it more
17:32:59standard first we need to rename this
17:33:01folder up here so we'll right
17:33:04click
17:33:06rename and let's rename it to test-
17:33:10simple because this folder contains
17:33:13tests that were created without a
17:33:16framework let's press enter
17:33:19and now we can rename test- Jasmine to
17:33:22test by right clicking
17:33:26rename and rename it to tests and press
17:33:32enter another thing we can do is we're
17:33:35going to drag test- simple into the test
17:33:38folder so that all of our tests are
17:33:41contained in one
17:33:44folder so if it asks you to update the
17:33:47Imports you can click yes
17:33:51and we also need to open money test.js
17:33:54in the test- simple folder because it
17:33:56updated the Imports and then save this
17:34:03file finally we're going to run all of
17:34:06our tests again to make sure everything
17:34:08still works after we move things around
17:34:12so because test.html is inside a
17:34:15different folder now we need to reopen
17:34:18this with live server
17:34:20so we'll rightclick and click open with
17:34:23live
17:34:26server and it'll show us that all the
17:34:28tests are still passing so our code is
17:34:31still
17:34:32correct so now we can close some of
17:34:34these extra tabs
17:34:37here and save our changes into git we'll
17:34:42open the git
17:34:44section and all of these changes are
17:34:47related to renaming the folders
17:34:50so we'll give a message at the
17:34:52top rename test- Jasmine
17:34:58folder to
17:35:00tests and
17:35:08commit and that's the end of this lesson
17:35:11in this lesson we learned how to test
17:35:13our code using manual and automated
17:35:16tests we learned how to organize our
17:35:19test using test cases and test Suites we
17:35:23learned how to use a testing framework
17:35:25like Jasmine to help us write tests
17:35:28easier we learned how to Mock and spy on
17:35:32methods we learned how to test web pages
17:35:35using integration tests and we learned
17:35:38about hooks which lets us share code
17:35:41between our
17:35:43tests here are some exercises to help
17:35:46you practice what we learned in this
17:35:48lesson e
17:36:33in the rest of this course if you get an
17:36:36error in your project but your code
17:36:38looks correct you may have some bad data
17:36:41saved in local storage to fix this you
17:36:44can try running local storage. CLE in
17:36:48your console to remove everything from
17:36:50local
17:36:51storage and then refresh the
17:36:56page if you see an error like this
17:36:59object object that means that you saved
17:37:02something directly into local storage
17:37:04but you have to jason. stringify it
17:37:06first so check your code to make sure
17:37:09that you're always stringifying before
17:37:11saving to local storage and then clear
17:37:14your local storage and refresh the page
17:37:20in this lesson we're going to learn
17:37:22objectoriented
17:37:24programming objectoriented programming
17:37:27or oop is another style of programming
17:37:31so it's another way that we write our
17:37:33code it's useful to know because many
17:37:36programming languages use
17:37:40oop now how do we use objectoriented
17:37:43programming object-oriented programming
17:37:46is basically organizing our code into
17:37:49into
17:37:50objects let's look at an
17:37:53example we're going to go to our
17:37:56code and we're going to scroll up and
17:37:59open data/ cart.
17:38:03JS inside this file we have the code for
17:38:06our cart and you'll notice that for the
17:38:09cart we have some data at the top and
17:38:12then we have a bunch of functions at the
17:38:14bottom that modify the cart and these
17:38:18are separate from each other the data
17:38:19and the functions so this style of
17:38:22programming that we've been using
17:38:23throughout this course is called
17:38:25procedural programming procedure means a
17:38:29set of step-by-step
17:38:32instructions and this is basically a
17:38:35function so in procedural programming we
17:38:38organize our code into separate
17:38:40functions like we did
17:38:43here on the other hand in objectoriented
17:38:46programming we organize all of this code
17:38:49into an object so we put everything
17:38:52together into an
17:38:55object so let's do an example and
17:38:58convert this cart code into
17:39:00objectoriented
17:39:02programming we're going to click cart.
17:39:05JS and inside this folder we're going to
17:39:08create a new file by clicking
17:39:12here and let's name this file
17:39:15C- oop or objectoriented
17:39:19programming. JS and press
17:39:24enter and now we're going to copy all of
17:39:27the code in cart into this new file so
17:39:30let's open this and we'll click in this
17:39:34file and then we'll type control a or
17:39:36command a to select all the code and
17:39:40then right click
17:39:43copy and inside C- oop we're going to
17:39:47rightclick and paste
17:39:52and let's scroll back up to the
17:39:54top and now to convert this code into
17:39:57objectoriented programming we're going
17:39:59to group all the data and the functions
17:40:02together into an object first at the top
17:40:07let's create an object that we can put
17:40:09all of these inside
17:40:10of so we'll create a variable const
17:40:14let's call it cart equals and object
17:40:20and now we're going to group our data
17:40:22and all of our functions into this
17:40:25object so let's do it step by step and
17:40:28we'll start with this cart
17:40:30variable as a reminder cart semicolon is
17:40:34actually a shortcut for cart equals
17:40:37undefined to make things easier to
17:40:40understand let's actually write this out
17:40:42in full instead of using the shortcut so
17:40:45we'll type cart equals undefined
17:40:51and now we're going to move this into
17:40:53the object so we'll select this
17:40:56line and then
17:40:59rightclick
17:41:01cut and then inside the object we're
17:41:05going to rightclick and
17:41:09paste now inside an object we can't use
17:41:12the word export or
17:41:15let so to move a variable into an object
17:41:18we're going to convert it into a
17:41:20property and a value so we'll remove
17:41:23these
17:41:24words and then type cart and colon
17:41:29undefined and remove the semicolon and
17:41:32replace it with a
17:41:34comma so this is the same thing as cart
17:41:37equals undefined but we move that value
17:41:40into an
17:41:42object now one problem here is that if
17:41:45we access this cart property we're going
17:41:48to do cart. cart which can be a bit
17:41:50confusing so let's actually rename this
17:41:53property to cart capital I items instead
17:41:58to make it a bit more clear that this
17:42:00contains the items in the cart or the
17:42:03products that are in the
17:42:07cart next we're going to group all of
17:42:10our functions into this object as well
17:42:14so let's create some new
17:42:16lines and we're going to move this
17:42:18function inside here so let's select
17:42:21this
17:42:24function and then
17:42:26rightclick
17:42:28cut and inside the
17:42:31object we're going to
17:42:33rightclick and
17:42:36paste and again we can't use the word
17:42:39export inside an object so we're going
17:42:41to convert this into a property and
17:42:44value as
17:42:45well so let's remove these words
17:42:49and let's make the property name load
17:42:51from storage and then we'll type a colon
17:42:55and we'll make the value a
17:42:58function brackets and curly
17:43:00brackets so that's how we move a
17:43:03function into this object now make sure
17:43:06that you use a regular function syntax
17:43:09here and not an arrow function and I'll
17:43:11explain why later in this
17:43:14lesson now as a reminder when we have a
17:43:17function inside an object
17:43:20we call this a
17:43:22method also JavaScript has a shortcut
17:43:25for methods called the shorthand method
17:43:29syntax so instead of typing colon and
17:43:32function we can actually just remove
17:43:34this
17:43:36code and just type brackets and curly
17:43:38brackets after the function name and
17:43:41this is a shortcut for the code that we
17:43:44had
17:43:46before now the code inside this function
17:43:49doesn't actually work anymore because
17:43:52cart was actually renamed to cart items
17:43:55so we have to rename this variable so
17:43:58instead of cart we're going to do cart
17:44:01dot cart
17:44:03items to access this value and same
17:44:07thing here cart do cart
17:44:10items and here cart
17:44:14doart
17:44:17items so so this code Works however we
17:44:21have a small problem here if we change
17:44:24the name of the object up here this code
17:44:28will no longer
17:44:29work to solve this problem JavaScript
17:44:32has a feature called this this gives us
17:44:37the object that contains this function
17:44:40so it gives us this outer object up here
17:44:43so to improve our code we're going to
17:44:45change from using a variable named cart
17:44:49to this and here as well this. cart
17:44:54items and this Dot card
17:44:58items so this will give us the outer
17:45:01object and now this code will always
17:45:04work and it doesn't matter what the
17:45:06variable name
17:45:08is the last thing we're going to change
17:45:10in this function is we're currently
17:45:12loading from local storage
17:45:15cart however our original cart was also
17:45:18loading from local storage cart so let's
17:45:21actually change this to C- oop so that
17:45:25we don't affect our original
17:45:32cart let's move on and we're going to
17:45:34move the other functions into this
17:45:37object so let's go down to the next
17:45:40function which is save to storage we're
17:45:43going to select this and then
17:45:45rightclick
17:45:47cut and then inside this object at the
17:45:51end we're going to add a comma and some
17:45:54new
17:45:54lines and we're going to rightclick and
17:46:00paste and we can't use the word function
17:46:02at the front here so let's remove this
17:46:06word and just use the shorthand method
17:46:09syntax so this is a shortcut for colon
17:46:15function and here we're saving to local
17:46:18storage cart
17:46:19so let's also change this to C- oop so
17:46:23we don't affect our original cart so
17:46:26we'll change it to card-
17:46:31oop another thing we need to change is
17:46:34that the cart was renamed to cart
17:46:37items so here we're going to change from
17:46:41cart to this which gives us the outer
17:46:45object and then dot cart items
17:46:49which is this property so it should do
17:46:52the same thing as before except this
17:46:54function is now inside an
17:46:56object let's continue and move another
17:46:59function into the object so we're going
17:47:02to do add to cart this time so let's
17:47:05select this
17:47:07code and then
17:47:10rightclick
17:47:11cut and inside the object we're going to
17:47:15add a comma and some new lines and then
17:47:18rightclick and
17:47:20paste so again instead of using export
17:47:23function we're just going to remove this
17:47:26code and use the shorthand method syntax
17:47:30which is a shortcut for this
17:47:33code and now let's update the code
17:47:35inside this function as well so instead
17:47:38of the cart we rename this to this. cart
17:47:42items so we'll change it to this do cart
17:47:46items
17:47:48and then down here we're going to change
17:47:51from cart to this. cart
17:47:56items and also the function save to
17:47:59storage was moved inside the object so
17:48:03now to access this function we're going
17:48:06to get the outer object again using this
17:48:09and then dot save to storage so down
17:48:13here we'll add this dot in front to
17:48:18access the function inside the
17:48:21object and now let's move on and move
17:48:25the next function into the object so
17:48:27we'll select this
17:48:29code and then
17:48:31rightclick
17:48:33cut inside the object add a comma and
17:48:36some new lines and right click and
17:48:40paste we'll remove export
17:48:44function and use the shorthand method
17:48:47syntax and again we'll change from cart
17:48:50to this. cart
17:48:54items we're going to change cart here to
17:48:57this.c cart
17:49:00items and change save to storage to this
17:49:04do save to
17:49:06storage so we access save to storage
17:49:09inside this
17:49:11object next let's move this last
17:49:14function into the object so we'll select
17:49:17the code and then rightclick
17:49:21cut and inside the object we're going to
17:49:24type a comma and some new lines right
17:49:28click and
17:49:30paste we'll remove export function and
17:49:34use the shorthand method
17:49:36syntax and update the code in this
17:49:38method so we'll change cart to this do
17:49:42cart
17:49:44items and save to storage to this Dove
17:49:49to
17:49:50storage now let's remove the extra
17:49:56lines and the last thing we need to
17:49:58update is that load from Storage was
17:50:01moved inside the cart object so to
17:50:04access this function at the front we're
17:50:07going to type
17:50:09cart. load from storage and save this
17:50:14file and that's it this is the basic
17:50:18idea behind objectoriented programming
17:50:22we organize our code into objects so we
17:50:25group the data and the functions
17:50:28together into an object like
17:50:33this now let's talk about why do we use
17:50:36objectoriented
17:50:38programming objectoriented programming
17:50:41tries to represent the real
17:50:44world in the real world a cart is a
17:50:47physical object object so in
17:50:49objectoriented programming we represent
17:50:52this physical object as a digital object
17:50:55or in this case a JavaScript
17:50:58object a physical cart can have products
17:51:01inside so our JavaScript object can also
17:51:05have products
17:51:07inside a physical cart also has actions
17:51:11we can take to modify the cart like we
17:51:14can add a product or remove a product
17:51:20our JavaScript object also has actions
17:51:23we can take to modify the cart like the
17:51:27add to cart function or the remove from
17:51:30cart
17:51:31function so as you can see
17:51:34objectoriented programming tries to
17:51:36represent the real world we take a
17:51:39physical object like a cart and
17:51:42represent it as a digital object like a
17:51:45JavaScript
17:51:46object and some people feel feel that
17:51:48this makes the code more intuitive or
17:51:51easier to
17:51:55understand now let's try out the code in
17:51:58this object to make sure it actually
17:52:00works we're going to scroll down to the
17:52:04bottom and
17:52:06here we're just going to type
17:52:10console.log the
17:52:12cart and save this
17:52:15file and now let's load this code into
17:52:19the project to do that we're going to
17:52:22open the scripts folder and open the
17:52:24file checkout.
17:52:27JS and at the top below the Imports
17:52:31we're going to import our new file so
17:52:34let's type
17:52:36import and we're going to use a slightly
17:52:38different syntax we're just going to
17:52:40type a
17:52:41string and give it the file that we want
17:52:44to load so we need to load C- oop. Js
17:52:49so first we need to get out of the
17:52:51scripts folder using do slash and then
17:52:54go into the data folder data slash and
17:52:58load C-
17:53:00oop.
17:53:02JS so this is another syntax we can use
17:53:06for imports this just runs all the code
17:53:10inside this file without importing
17:53:13anything which is what we need in this
17:53:15situation so let's save this file
17:53:20and then open this page in the browser
17:53:23so if you don't have this page open you
17:53:25can scroll down to checkout. HTML and
17:53:28then right click and open with live
17:53:31server I already have this page open so
17:53:35I'm just going to open that
17:53:37Tab and if the page is too big we can
17:53:40zoom out by pressing control minus or
17:53:43command minus a few
17:53:45times and now let's check the console to
17:53:48see what the cart looks like on this
17:53:51page we're going to
17:53:52rightclick and click
17:53:55inspect and then open the
17:53:59console and in the console we'll see
17:54:02this cart object so inside this object
17:54:05we have the data as well as all the
17:54:08functions for our cart but it's grouped
17:54:11inside an object and you'll see that the
17:54:14code still works the same as before cart
17:54:17items has a the two default
17:54:20products if we look at our code and open
17:54:24card-
17:54:25o at the beginning we run cart. load
17:54:29from storage and then inside this
17:54:32function if we scroll up it will give
17:54:35the cart items this default cart with
17:54:38two products inside and that's what we
17:54:40see in the console
17:54:44here so we know that the code inside
17:54:46this object still works works the same
17:54:48way as
17:54:51before so now let's try another method
17:54:54to make sure that it's working so let's
17:54:56try using the add to cart method to add
17:55:00a product to the cart items up here so
17:55:03we'll scroll
17:55:05down to the bottom and then above
17:55:08console.log cart we're going to call add
17:55:11to cart now add to cart was saved inside
17:55:16this cart object so to access it we're
17:55:19going to type
17:55:21cart. add to cart and
17:55:26brackets now add to cart takes one
17:55:29parameter which is a string and this is
17:55:32the product ID that we want to add so to
17:55:36find a product ID we can go to the data
17:55:39folder and products. JS and then inside
17:55:43here we have this list of products so
17:55:47let's actually scroll down to the third
17:55:49product which is right here so this
17:55:52t-shirt product and we're going to add
17:55:54this product ID to the cart so let's
17:55:58select this ID we're going to
17:56:01rightclick
17:56:03copy and then inside C-
17:56:06oop inside the string we're going to
17:56:09rightclick and paste that product
17:56:12ID and let's
17:56:15save and let's check the console
17:56:18so I'll open the console
17:56:20Here and Now inside the cart object if
17:56:24we expand it cart items now has three
17:56:28products because we just added a new
17:56:30product to the cart so this shows that
17:56:33all of the code is working the exact
17:56:35same way as before we just organized it
17:56:39into an object and that's objectoriented
17:56:44programming now that we're done with
17:56:46this example let's remove these two
17:56:49lines of
17:56:50code and
17:56:56save next another reason we use
17:56:59objectoriented programming is it's easy
17:57:02to create multiple objects for example
17:57:06the real amazon.com has a feature called
17:57:09Amazon business where you can have a
17:57:11separate cart for your business
17:57:14purchases so how do we create two
17:57:16separate carts in our code with
17:57:19objectoriented programming this is easy
17:57:23we can just make a copy of the cart
17:57:26object so we can scroll up in this
17:57:29code and I'm just going to click this
17:57:32Arrow here beside the card variable to
17:57:34collapse this code and to create a
17:57:37separate cart for business purchases
17:57:40we're just going to select this code and
17:57:43then right click
17:57:46copy and at the
17:57:48bottom right click and
17:57:53paste and now we have two separate cards
17:57:57so let's scroll up to the top of the
17:57:59second cart which is right here and we
17:58:03said that we wanted this card for
17:58:05business purchases so let's rename this
17:58:08to
17:58:10business Capital C
17:58:13cart and when we load from Storage let's
17:58:17load it from cart Das business instead
17:58:21so that it doesn't conflict with the
17:58:23cart up
17:58:24here and if we scroll down same thing in
17:58:28save to storage let's save this cart to
17:58:31cart Das
17:58:34business and finally let's scroll down
17:58:36to the
17:58:38bottom and here instead of cart. load
17:58:41from Storage we're going to change this
17:58:43to business cart. load from Storage
17:58:50and that's it we just created a
17:58:52completely separate cart simply by
17:58:55copying this object so object-oriented
17:58:58programming makes it easy to create
17:59:01multiple
17:59:05objects so now let's console.log both of
17:59:08these cards to see what they look like
17:59:10we're going to scroll to the
17:59:12bottom and here we're going to
17:59:16console.log the
17:59:18cart and
17:59:21console.log the business cart and
17:59:28save and if we open the console for the
17:59:30checkout
17:59:32page it will show us that we have two
17:59:35carts the regular cart has three
17:59:38products inside and the business cart
17:59:41has two products inside and these are
17:59:44just the default products that we get
17:59:46when we first load the cart
17:59:48so you can see that these two cards are
17:59:51completely separate from each
17:59:53other in the real world we can have two
17:59:56physical cards that are completely
17:59:58separate from each other and in
18:00:00programming we can also have two cards
18:00:02that are completely separate from each
18:00:04other by simply making a copy of the
18:00:08object so again object-oriented
18:00:11programming tries to represent the real
18:00:13world
18:00:19now currently there's an obvious problem
18:00:21with how we're creating multiple objects
18:00:24which is we're copy pasting a lot of
18:00:27code and this can make our code messy
18:00:29and hard to manage so now we're going to
18:00:32make our code cleaner by using a
18:00:34function to create multiple
18:00:37objects so first let's delete this
18:00:40business card that we copy pasted so
18:00:43we're going to select this
18:00:46object and then up to here the business
18:00:49card we're going to remove
18:00:51it and now instead of copy pasting this
18:00:54object we're going to use a function to
18:00:56generate these objects so at the top of
18:00:59this file let's create a new
18:01:03function and we'll name it capital c
18:01:06cart brackets and curly
18:01:10brackets so by the way in objectoriented
18:01:14programming a naming convention is to
18:01:16use Pascal case for things that create
18:01:19or generate objects in Pascal case we
18:01:22start every word with a capital
18:01:24including the first word so that's why
18:01:27we started cart with a Capital
18:01:29C now inside this function we're going
18:01:32to create cart
18:01:34objects so let's actually move this
18:01:36object into the function so we can
18:01:38create it using the function so we're
18:01:41going to select this object to here and
18:01:44then we'll right
18:01:45click and cut
18:01:49and then move it into the function by
18:01:51clicking in the function and then
18:01:53rightclick and
18:01:56paste so now every time we run this
18:01:59function it will generate a new cart
18:02:01object and we don't have to copy paste
18:02:04this code over and over to create
18:02:06multiple
18:02:07objects so at the bottom I'm going to
18:02:10click this Arrow to collapse this object
18:02:12for now and at the bottom of this
18:02:14function we're going to return this C
18:02:18object so we can use it outside the
18:02:22function okay now let's give this a try
18:02:25and we'll use this function to generate
18:02:28cart objects so first let's create the
18:02:31normal cart using const cart make it
18:02:35equal and we'll run this function to
18:02:38generate an object Capital C cart and
18:02:43brackets and let's generate another
18:02:45object using the function using const
18:02:49and we'll name it business
18:02:52cart equals Capital C cart and
18:02:57brackets and we'll still load from
18:03:00storage for both of these and then
18:03:02console log both of
18:03:03these so basically instead of copy
18:03:06pasting all the time we're going to use
18:03:08a function to generate
18:03:10objects so now let's
18:03:14save and then open the
18:03:16console and and now we have two cart
18:03:18objects
18:03:20again however now both of these carts
18:03:23have three products
18:03:25inside but before the regular card had
18:03:28three products and the business card had
18:03:30two
18:03:32products so what
18:03:33happened if we go back to our code and
18:03:37look inside this cart
18:03:40object you'll notice that we're loading
18:03:42from the same key in local storage which
18:03:45is C- o that means every cart that we
18:03:48generate will be getting its data from
18:03:50the same place in local
18:03:53storage so to fix this we're going to
18:03:56replace C- oop with a parameter so
18:04:00different carts can use a different key
18:04:02in local storage so at the top let's
18:04:06create a parameter called local storage
18:04:11key and then instead of using the same
18:04:14string every time we're going to use the
18:04:16parameter local storage
18:04:19key and the same thing for save to
18:04:23storage instead of saving to the same
18:04:25key every time we're going to replace
18:04:27this with the parameter local storage
18:04:33key and finally when we run this
18:04:36function at the bottom
18:04:39here we need to give the function a
18:04:42local storage key so for our regular
18:04:45cart let's use the string cart C-
18:04:49oop and for the business cart we can use
18:04:53a different key like the string cart Das
18:04:57business so now these two carts will
18:05:00load from different keys in local
18:05:02storage and they can have different data
18:05:05so let's save and then check the
18:05:09console and now our regular card has
18:05:12three products and our business card has
18:05:14two products like
18:05:16before so let's go back to our code and
18:05:20this is a better way to create multiple
18:05:22objects instead of copy pasting a bunch
18:05:25of code every time we can create a
18:05:27function that generates
18:05:31objects so now let's save this example
18:05:34into git we'll go into our git
18:05:37section and then at the top here we
18:05:40created a function to generate these
18:05:43objects and in checkout. JS we are
18:05:46loading that c - oop practice file so
18:05:50we'll type a message to describe these
18:05:52changes create oop or objectoriented
18:05:58programming version of cart and
18:06:10commit next we're going to learn an even
18:06:13better way to generate objects
18:06:18object-oriented programming has a
18:06:20feature called a Class A Class is
18:06:23specifically designed for generating
18:06:26objects a class is basically an object
18:06:32generator So currently if we open our
18:06:35code and then open C-
18:06:38oop we learn how to use a function to
18:06:42generate objects in objectoriented
18:06:45programming so now we're going to switch
18:06:47this to using a class to generate these
18:06:50objects instead because classes are
18:06:53cleaner and have more features than
18:06:55using a function so first let's create a
18:06:58new file for learning
18:07:00classes inside the data folder we're
18:07:03going to click C- oop and then create a
18:07:07new
18:07:08file and we'll name this file cart DCL
18:07:12class. JS and press enter
18:07:18so first let's copy over all the code so
18:07:20we can compare it we're going to open C-
18:07:23oop click this file and then press
18:07:26contrl a or command a to select the code
18:07:29and right
18:07:31click
18:07:32copy and in
18:07:35C-Class we're going to right click and
18:07:40paste and we'll scroll to the
18:07:43top and at the top we're going to create
18:07:46our first class class using the word
18:07:50class and now we're going to give a name
18:07:53to this class so let's name it the same
18:07:56as here Capital C cart and then curly
18:08:02brackets as a reminder a naming
18:08:05convention is to use Pascal case for
18:08:08things that generate objects so that's
18:08:10why we start this cart with a Capital
18:08:12C so this is a class A Class is
18:08:17basically an object
18:08:20generator so now inside the class we're
18:08:23going to put the properties and methods
18:08:25that we want for each object that we
18:08:28generate so here we have our properties
18:08:30and methods we're just going to move
18:08:32them into the
18:08:34class so first let's select the card
18:08:36items
18:08:37property we're going to right click
18:08:41cut and then move it into the class by
18:08:44clicking in here and then right click
18:08:47and
18:08:49paste and classes use a slightly
18:08:52different syntax than objects so to
18:08:55create a property called cart items
18:08:58we're going to type the property name
18:09:00and instead of a colon we're just going
18:09:02to make it equal to undefined and
18:09:05instead of a comma at the end we're
18:09:07going to put a
18:09:09semicolon so that's how we add a
18:09:11property to a class and now every object
18:09:15that we generate will have this property
18:09:17just like we did
18:09:19before next let's move the methods into
18:09:22the class so we'll delete these lines
18:09:25for now and we'll move load from Storage
18:09:29so we'll select this method and then
18:09:33rightclick and
18:09:35cut and inside the class we're going to
18:09:38move it by right clicking and
18:09:43paste and classes use a slightly
18:09:45different syntax to create methods as
18:09:48well so instead of having a comma at the
18:09:50end we can just remove it and every
18:09:54object that we generate will now have
18:09:56this
18:09:57method so now let's move the rest of the
18:09:59methods into this class we're going to
18:10:02scroll down and we'll move save to
18:10:05storage so we'll select the method and
18:10:08right click
18:10:10cut and at the bottom of the class we're
18:10:14going to right click and paste
18:10:18and remove the comma at the
18:10:19end same with add to cut we'll select
18:10:23this
18:10:25method and then right
18:10:28click
18:10:30cut and inside the bottom of the class
18:10:34we're going to rightclick and
18:10:37paste and remove the comma at the
18:10:41end as well as remove from cart so we'll
18:10:44select this
18:10:45method right click
18:10:48cut and at the bottom of the class right
18:10:52click and
18:10:54paste and remove the comma at the
18:10:57end and finally we'll move the last
18:11:00method update delivery
18:11:03option and right click
18:11:07cut inside this class we're going to
18:11:10right click and
18:11:13paste so this method did not have a
18:11:16comma at the end so this looks
18:11:19good so that's how we create a class we
18:11:22basically give it some properties and
18:11:24methods and now when we generate objects
18:11:27using this class every object that we
18:11:29generate will have these properties and
18:11:34methods now one thing we need to fix
18:11:37here is that local storage key doesn't
18:11:40exist anymore to fix this we're going to
18:11:43save this in a property instead so at
18:11:46the top
18:11:47we're going to give a new property to
18:11:49every object that we generate called
18:11:52local storage key and make it equal to
18:11:58undefined to
18:12:00start and then inside the methods we're
18:12:03going to switch this to this. local
18:12:07storage key so this is going to point to
18:12:10the object that we generate just like
18:12:12before and then local storage key will
18:12:16access this property
18:12:19and another place we need to fix this is
18:12:21inside save to storage so instead of
18:12:24using a variable local storage key we're
18:12:27going to use the property this. local
18:12:30storage
18:12:33key and that's it so if we scroll
18:12:37down we basically converted this whole
18:12:40function into a class so now we can
18:12:43remove it
18:12:49and the final step here is now that we
18:12:52have this class let's use it to generate
18:12:55these two objects
18:12:57again to do that instead of this code
18:13:01we're going to type the word new and
18:13:04then type the class name which is
18:13:06capital c cart and
18:13:10brackets so you see that a class uses a
18:13:13similar syntax as a function except we
18:13:16use the word new in front of
18:13:19it so this generates a new object using
18:13:23our
18:13:25class and this new object will have all
18:13:27the properties and methods that we added
18:13:30above so let's do the same thing for the
18:13:33business card we'll use the class to
18:13:35generate it we'll remove this
18:13:38code and then we'll type new and the
18:13:41class name Capital C cart and brackets
18:13:46to generate another object using this
18:13:50class now there's one thing we need to
18:13:52fix here each of these objects has a
18:13:55property called local storage key and
18:13:58they're currently undefined so we need
18:14:00to set this
18:14:02property so at the bottom here we're
18:14:05going to type
18:14:07cart. local storage key and we'll make
18:14:12it
18:14:14equal and we'll use the same string as
18:14:17before which is C-
18:14:21oop and we'll do the same thing for the
18:14:23business cart we'll type the
18:14:26business
18:14:28cart. local storage
18:14:32key and make it equal the same string
18:14:35that we had before which is cart Das
18:14:42business and then we'll load the cart
18:14:44from Storage as well as the business C
18:14:47from storage and we'll console.log
18:14:50them so we have the same code as before
18:14:53except we converted it from a function
18:14:55to a
18:14:57class so now let's
18:14:59save and we're going to run this code So
18:15:03currently if we go into our code and
18:15:06open checkout.
18:15:07JS we're still loading C-
18:15:11oop so we're just going to update this
18:15:13and load
18:15:14C-Class instead and
18:15:19save and we'll open cart Das class
18:15:22again and now if we open the
18:15:26console you can see that we created two
18:15:28cart objects just like we did
18:15:31before and the regular card has three
18:15:34products inside and the business card
18:15:37has two products
18:15:39inside and if we click this Arrow beside
18:15:42prototype we can see the methods that
18:15:45each of these objects have
18:15:48so we're basically creating the same
18:15:49objects that we had before except this
18:15:52time we used a
18:15:54class by the way each object that we
18:15:58generate from a class is called an
18:16:00instance of the
18:16:02class we can also check if an object is
18:16:06an instance of a class using the code
18:16:10business cart and then instance of and
18:16:16then the class name name Capital C
18:16:19cart so this will check if this object
18:16:21was generated from this class so we can
18:16:25console.log this result
18:16:28console.log and close bracket and
18:16:32save and then check the
18:16:34console and it will tell us that this is
18:16:37true so business card was generated from
18:16:41this
18:16:43class okay don't worry if class are a
18:16:47bit confusing at first just remember
18:16:50that objectoriented programming means
18:16:52organizing our code into objects because
18:16:56this tries to represent the real
18:16:59world and then classes are a feature
18:17:02that help us generate these objects so
18:17:05they make it easier to create these
18:17:08objects a class is basically an object
18:17:12generator
18:17:17now that we learned how classes work
18:17:19let's talk about the benefits of
18:17:21classes if we scroll
18:17:24up when we generate an object it's going
18:17:28to have these properties and these
18:17:30methods and you'll notice that a class
18:17:33actually looks like the object that we
18:17:37generate and this is cleaner than using
18:17:40a function like we had before
18:17:46another benefit of classes is that they
18:17:49have extra features for object-oriented
18:17:54programming the first feature is called
18:17:56a Constructor which lets us run some
18:17:59setup code after creating an
18:18:02object so if we scroll down in our
18:18:06code you'll notice that after we create
18:18:09these objects we run some setup code a
18:18:13Constructor lets us put the setup code
18:18:16inside the class and this makes our code
18:18:19cleaner because we can group everything
18:18:21together inside the
18:18:24class to create a Constructor we're
18:18:26going to scroll up in the
18:18:30class and Below these properties we're
18:18:33going to create a new method called
18:18:37Constructor brackets and curly
18:18:41brackets so the Constructor method works
18:18:44like a normal method we can put code
18:18:47inside and it will run the
18:18:49code but the special thing about the
18:18:52Constructor is that when we generate an
18:18:54object it will run this Constructor
18:18:57automatically so this is a great place
18:18:59to put our setup
18:19:01code so let's scroll down to the
18:19:05bottom and here instead of running the
18:19:08setup code outside the class we're just
18:19:11going to move this into the class and
18:19:13into the Constructor so we'll select
18:19:16this code
18:19:18and then right click
18:19:21cut and scroll to the
18:19:24top and inside the Constructor we're
18:19:27going to rightclick and
18:19:31paste so now after we create an object
18:19:35it will run the code in the Constructor
18:19:38and set up the
18:19:41object so there's a few things that we
18:19:43need to fix here the first thing is each
18:19:46object object that we create is going to
18:19:48run the Constructor so we only need one
18:19:51of each of these lines so let's remove
18:19:54the setup for the business
18:20:02card so now the setup code has two steps
18:20:06we set the local storage key and then we
18:20:08load from Storage the next problem is
18:20:12that the object that we create is not
18:20:14going to be called cart every time
18:20:18to solve this we can replace cart with
18:20:21this and here as well this. load from
18:20:25Storage so as a reminder this points to
18:20:29the object that we generate so whatever
18:20:32object that we generate we're going to
18:20:34get its local storage key and set it and
18:20:37we're going to get its load from Storage
18:20:39method and run that
18:20:42method now the second problem here is
18:20:45that we don't want local storage key to
18:20:47be card- oop every
18:20:50time to fix this the Constructor can
18:20:53also have parameters let's give the
18:20:56Constructor a parameter and we'll name
18:20:58it
18:21:00local storage key and instead of the
18:21:04same string every time we're going to
18:21:07use local storage
18:21:11key now the last thing is how do we save
18:21:14a value into this parameter
18:21:17so if we scroll down to the
18:21:22bottom when we call the class between
18:21:25these brackets we can put the parameters
18:21:27for the Constructor so for the cart we
18:21:31want the local storage key to be the
18:21:33string C- oop and for the business cart
18:21:38we want the local storage key to be the
18:21:40string cart Das
18:21:44business so the values inside here are
18:21:47saved in the parameters in the
18:21:49Constructor so C- oop will be saved
18:21:53inside local storage key and then we use
18:21:56it and then the same thing for cart D
18:21:58business so now let's save this
18:22:02code and then open the
18:22:07console and you'll see that the cart
18:22:09objects are correct so after we
18:22:12generated each object we also ran this
18:22:15setup code so that's how the Constructor
18:22:18works every time we generate an object
18:22:21it will run the code inside here so this
18:22:24is a great place to put setup code and
18:22:27make our code
18:22:30cleaner so here are a few more details
18:22:32about the
18:22:33Constructor the method has to be named
18:22:36Constructor we can't just use any name
18:22:38that we want we also should not return
18:22:41anything from a
18:22:44Constructor so last ly a shortcut that
18:22:47we can use in a class is when we have a
18:22:50property and it's equal undefined we can
18:22:53actually remove equal undefined and just
18:22:56use a semicolon so this is the same
18:22:59thing as the code before and same thing
18:23:02here we can remove equal undefined and
18:23:06just use a semicolon and
18:23:11save so we finished converting our code
18:23:13from using a function to using a class
18:23:16and as you can see a class is just a
18:23:19better way to generate objects in
18:23:22objectoriented
18:23:25programming so now let's save our code
18:23:27into git we'll open the git section
18:23:31inside cart Das class we created our
18:23:34cart class and inside checkout. JS we're
18:23:38basically loading the cart Das class
18:23:41file so we'll type a message to describe
18:23:43this change create
18:23:47class
18:23:48version of cart and
18:23:59commit next we're going to learn an
18:24:01important feature of classes called
18:24:04private properties and
18:24:07methods so let's open our code again and
18:24:10open
18:24:12C-Class and you'll see that this class
18:24:15has a property called local storage
18:24:17key so this property is useful inside
18:24:20the class but it's not really meant to
18:24:23be used outside the class for example at
18:24:27the bottom
18:24:28here we could take this
18:24:31object cart and then change the local
18:24:35storage key using dot local storage key
18:24:41equals something
18:24:43else now this is a problem because it
18:24:46will mess up how this object works and
18:24:49it will start saving to a different
18:24:51local storage key so this is a common
18:24:54problem in programming where if you're
18:24:56working on a team somebody might
18:24:59accidentally change properties that
18:25:01they're not supposed to to prevent this
18:25:04classes let us make a property or a
18:25:06method private which means it can only
18:25:09be accessed inside the
18:25:14class so let's remove this line
18:25:18and scroll
18:25:20up and to make local storage key private
18:25:24we're just going to add a number sign in
18:25:27front or a
18:25:28hash and also whenever we access this
18:25:31property inside the class we're going to
18:25:34add the hash in front so we'll type
18:25:37this. has local storage key this.h local
18:25:41storage key and inside save to storage
18:25:46this.h local storage
18:25:49key so this is called a private property
18:25:53this means it can only be used inside
18:25:56this class or inside these curly
18:25:58brackets it cannot be used outside the
18:26:02class a property without a hash in front
18:26:05is called a public property meaning it
18:26:08can be accessed
18:26:11anywhere so now let's
18:26:13save and open the console
18:26:19and the code still
18:26:22works so we made this property private
18:26:25and we're able to access it inside the
18:26:28class so now let's try accessing this
18:26:31property outside the class to see what
18:26:33happens we're going to scroll
18:26:36down and we're going to try to access
18:26:41cart. hash local storage key
18:26:46and change it to something else like
18:26:50test and
18:26:52save and if we open our
18:26:55console you'll see that when we try to
18:26:58access a private property here it will
18:27:01give us a syntax error saying this is a
18:27:04private field and by the way a field is
18:27:07the same thing as a
18:27:10property so that's how a private
18:27:13property works it prevents us from
18:27:15accessing this property
18:27:16outside the object and messing it
18:27:19up we can also have private
18:27:23methods so let's remove this
18:27:26line and scroll
18:27:31up and the method load from Storage
18:27:35should also only be used inside this
18:27:37class there's really no reason for code
18:27:40outside to be calling load from Storage
18:27:43so to make our code safer we're going to
18:27:45make this a private
18:27:47method to make a method private we're
18:27:50going to do the same thing in front of
18:27:52the method we're going to add a number
18:27:54sign or a hash and we're going to update
18:27:58the rest of our code so we're going to
18:28:00do this dot hash load from
18:28:04storage and now we can
18:28:07save and check the console to make sure
18:28:10that everything is still working so
18:28:12everything still looks good
18:28:16because we're only using this private
18:28:18method inside this
18:28:21class so a class Let's us create private
18:28:25properties and methods and this is
18:28:27useful on a bigger project where people
18:28:30might not be sure which properties and
18:28:32methods they're supposed to use outside
18:28:34the class and which ones to
18:28:37avoid so now let's save our changes into
18:28:40git we'll go into the git section and
18:28:44inside here we we made local storage key
18:28:47and load from Storage
18:28:50private we'll create a message to
18:28:53describe these changes make local
18:28:57storage key and load from Storage
18:29:03private and
18:29:12commit now that we learned
18:29:14objectoriented programming and and
18:29:16classes we're going to use it in our
18:29:19project so one thing we could do is to
18:29:22take this card class and replace
18:29:25everywhere we use cart in our project
18:29:28however we use cart in a lot of places
18:29:30and this would take too much time so I'm
18:29:32going to leave replacing the cart as a
18:29:35challenge
18:29:36exercise instead we're going to work on
18:29:39the
18:29:41homepage so first let's go back to our
18:29:44code and we're going to open checkout.
18:29:47JS and we're just going to comment out
18:29:50this import because we're just using
18:29:53this file for practice so let's save
18:29:56this and then let's open the checkout
18:29:59page so I already have it open if you
18:30:01don't have it open you can rightclick
18:30:04checkout. HTML and open with live
18:30:11server on the checkout page we're going
18:30:13to click this icon in the top left to go
18:30:16to the
18:30:19homepage on this page we have a list of
18:30:22products
18:30:24here and the code for these products is
18:30:28if we go back to vs
18:30:30code and on the left side we're going to
18:30:33open
18:30:34dataproducts
18:30:38DJs so here is the code or the data for
18:30:42all the products on the homepage and
18:30:44you'll notice that each product is an
18:30:47object we're going to learn a technique
18:30:49called converting an object into a
18:30:54class so what this means is instead of
18:30:57using regular objects in this array
18:30:59we're going to use a class to generate
18:31:02these objects so Above This array let's
18:31:06create a new class using the word class
18:31:10and let's call it capital P product and
18:31:14curly brackets
18:31:17because this class is meant to generate
18:31:20products so now each of our products is
18:31:23going to have some properties like the
18:31:25ID image and the name so let's add these
18:31:28to the class We'll add the ID property
18:31:31and a semicolon so that it starts off as
18:31:34undefined and then an image property and
18:31:38a name
18:31:40property and each product will also have
18:31:42a rating and the price sets rating and
18:31:47price
18:31:49set and you'll notice each object here
18:31:52also has a property called keywords now
18:31:55we're not currently using this in our
18:31:57project so we're going to leave it out
18:31:59of the class for now and if we need to
18:32:01use it later we can always add it back
18:32:04in so now we have all the properties
18:32:07that we want for each product so now
18:32:10let's test this by generating a product
18:32:13using this class so that here
18:32:16let's create a variable const product
18:32:20one equals and to generate an object
18:32:24we're going to use the word new and then
18:32:26the class name capital P product and
18:32:32brackets and let's console.log this to
18:32:35see if it worked
18:32:38console.log product one and
18:32:43save so now we're going to open the web
18:32:46page and then open the console so right
18:32:50click and
18:32:52inspect and open the
18:32:54console and inside here you'll see that
18:32:57we created a product object using the
18:33:01class so right now all of these
18:33:03properties are undefined so now let's
18:33:06set the values of these properties we'll
18:33:09go back to our
18:33:11code don't follow along here but one way
18:33:14to set set these prop properties is to
18:33:16access them outside the
18:33:19class for example product
18:33:231. equals something and then do product
18:33:281. image equals something and then
18:33:32product one. name and so
18:33:35on so this is not a good way to set
18:33:38these properties because we have to do
18:33:40this for each product that we create so
18:33:42it makes our code repetitive and messy
18:33:46instead notice that when we create a
18:33:48product this is kind of like the setup
18:33:51code we create a product and then set
18:33:53all of its
18:33:55properties and remember classes have a
18:33:58specific feature for setup code called
18:34:01The
18:34:03Constructor and now you can follow
18:34:05along so inside this class we're going
18:34:08to create a
18:34:12Constructor brackets and curly brackets
18:34:16so whenever we generate an object it's
18:34:19going to automatically run this
18:34:21Constructor so this Constructor is where
18:34:24we should put our setup
18:34:26code so let's remove this
18:34:30code and then do all of that inside the
18:34:33Constructor so first we want to set the
18:34:36ID property we're going to do this do ID
18:34:41and make it equal and now what value do
18:34:45we set the ID to so the value of the ID
18:34:48is inside each of these
18:34:51objects so when we create a product up
18:34:54here we're going to put this object
18:34:57inside these
18:34:59brackets and then that's going to go
18:35:01into the Constructor in here so in the
18:35:05Constructor let's create a parameter to
18:35:07save this data so we'll name it product
18:35:13details and now to save something inside
18:35:15ins this parameter we're going to put it
18:35:17between these
18:35:20brackets so let's actually give this
18:35:22entire object to the
18:35:26Constructor so we're going to right
18:35:28click and
18:35:32copy and then between these brackets
18:35:35we're going to rightclick and
18:35:39paste so whenever we create a new
18:35:41product we're going to give it this
18:35:44object with all the details
18:35:46it's going to get saved in here and now
18:35:48we can set the
18:35:50properties so this. ID is going to be
18:35:53equal to the product details. ID
18:35:56property so product
18:36:00details.
18:36:02ID and for the image we're going to do
18:36:06this. image equals the product details
18:36:12which is this object that we passed in
18:36:15dot the image
18:36:18property same thing for the name so this
18:36:21do name equals product
18:36:26details. name which is this property
18:36:29here same thing for the rating this.
18:36:33rating equals product details.
18:36:39rating and finally the price
18:36:41sense this. price sense equals the
18:36:47product
18:36:49details. Price
18:36:52sets so this is called converting an
18:36:56object into a class what we're doing is
18:37:00we're basically taking a regular object
18:37:02like this we put it inside a class and
18:37:07then we copy over the
18:37:09properties you can also visualize it
18:37:12like this we have a regular object and
18:37:15we're basically wrapping it inside a
18:37:17class and the reason we do this is that
18:37:20classes have extra features we can use
18:37:23like we can add methods and we can also
18:37:26have private properties and private
18:37:29methods so we basically have these same
18:37:31object as before except we have an
18:37:34enhanced version of that object it has
18:37:38some extra features from
18:37:41classes so for now let's save this code
18:37:46and then down here we console.log
18:37:49product one so let's take a look at it
18:37:51in our console so we'll open the
18:37:54console and now we can see that we
18:37:56created a product object so it's the
18:37:59same object as before except now it's
18:38:02enhanced it has some extra features from
18:38:08classes so next we're going to take this
18:38:11technique and apply it to this entire
18:38:14array so instead of having an array of
18:38:17regular objects we're going to convert
18:38:19each of these objects into the product
18:38:23class now one way we could do this is
18:38:26that in front of the object we can just
18:38:28type new product Open Bracket and then
18:38:33close bracket at the
18:38:35bottom and this will essentially convert
18:38:38this regular object into the product
18:38:41class however we're going to have to
18:38:43repeat this code for every object in the
18:38:46array and it's going to be a lot of work
18:38:48and
18:38:50repetition so instead let's just Loop
18:38:53through this array and then use code to
18:38:56convert each of these objects so instead
18:38:58of typing this out manually we're going
18:39:00to remove this and remove the round
18:39:03bracket at the end and then I'm going to
18:39:06click this Arrow beside the array to
18:39:09collapse
18:39:10it and at the end of the array we're
18:39:13going to use an array method called do
18:39:17map and
18:39:20brackets so map basically Loops through
18:39:23an array and for each value it runs a
18:39:26function so we're going to give this a
18:39:28function that we want to run for each
18:39:31value so arrow and curly
18:39:34brackets and this inner function is
18:39:36going to get a
18:39:39parameter so this parameter is basically
18:39:42each value in the
18:39:43array so it's going to take the first
18:39:46value and then save it inside this
18:39:49parameter run the function and then take
18:39:51the second value save it in here run the
18:39:53function third value save it and run the
18:39:57function so let's name this parameter
18:40:00the product
18:40:02details because each object in this
18:40:05array contains product details so now
18:40:08it's going to take each object save it
18:40:11in the parameter and run the function
18:40:15and here we're going to convert the
18:40:17object into a class to do that we're
18:40:20going to use the code new capital P
18:40:24product
18:40:26brackets and we're going to give it this
18:40:29regular object which is the product
18:40:35details and now there's a second part to
18:40:38how Map works so map creates a new array
18:40:43and whatever we return from this inner
18:40:45function is going to go inside that new
18:40:49array so here we're going to return this
18:40:54class so this result is going to be put
18:40:57inside a new array so you can think of
18:41:00map as we take each value in an array we
18:41:04run this function on it and we transform
18:41:06it and then put it inside a new
18:41:10array so here we're essentially
18:41:13transforming each of these products or
18:41:15these regular objects into a
18:41:19class so at the bottom let's
18:41:23console.log the products array to
18:41:26confirm this so we'll
18:41:29save and open the
18:41:32console and now you can see we have an
18:41:35array and each of the values is a
18:41:38product class instead of just a regular
18:41:40object
18:41:45so we converted all of our products from
18:41:47regular objects into this product class
18:41:51and now let's open the web page to make
18:41:54sure that everything still
18:41:55works so if we open the
18:41:58page you notice that everything is still
18:42:00working
18:42:01correctly and that's because we have the
18:42:04exact same objects as before except
18:42:07they're now just sort of enhanced
18:42:11objects next let's use those extra
18:42:14features of classes to simplify our code
18:42:17for this page we'll go back to our
18:42:21code and on the left side let's open
18:42:25amazon.
18:42:26JS so this is the code that creates the
18:42:30homepage so in here we're going to
18:42:33scroll down until we see the rating
18:42:35section where we calculate the stars and
18:42:38the rating
18:42:40account so notice that inside our HTML
18:42:44we're constru in this URL here for the
18:42:47number of stars a product
18:42:49has and we're also creating the price
18:42:52that we want to display on the
18:42:55page now instead of doing this all in
18:42:57the HTML our code would be cleaner if we
18:43:01moved this logic into our class because
18:43:04we want to group this related code
18:43:07together so let's use the features of
18:43:09classes to make this code a little bit
18:43:12cleaner we'll open products. Js
18:43:17and we'll scroll up to the product class
18:43:21and inside here let's add some methods
18:43:24for calculating the stars and the
18:43:27price so we're going to add a method and
18:43:29call it get Stars URL brackets and curly
18:43:37brackets and let's create another method
18:43:40called get price brackets and curly
18:43:44brackets
18:43:47and now we're going to move the code
18:43:48from our HTML into this class so we'll
18:43:52open amazon.
18:43:55JS and then here we're creating the URL
18:43:58of the Stars so let's actually select
18:44:01all this
18:44:01code and
18:44:04rightclick
18:44:06copy and inside products.
18:44:09JS inside get Stars URL we're going to
18:44:12rightclick and paste
18:44:17and this is going to be a string so at
18:44:20the front let's add a back tick so we're
18:44:23going to use a template string because
18:44:25we're going to insert a value inside and
18:44:28at the end we'll add another back
18:44:30tick so now that we created the string
18:44:33we're going to return it from this
18:44:35method so
18:44:37return and semicolon at the
18:44:40end and one thing we need to fix is that
18:44:43product is not defined anywhere so to
18:44:47get the rating property of whatever
18:44:50object this is we're going to use this.
18:44:53ratings.
18:44:57Stars so now each product is able to
18:45:01construct its own Stars URL here so
18:45:05let's save this
18:45:07file and then inside amazon.
18:45:10JS instead of doing this calculation
18:45:13directly inside the HTML
18:45:15we're going to delete it and we're going
18:45:18to insert the
18:45:21product. getet Stars URL method and
18:45:27brackets so you'll notice that we have
18:45:29the same product object as before but
18:45:32now it's sort of an enhanced product we
18:45:35can add methods to group related code
18:45:38together and make our code
18:45:42cleaner let's do the same thing with the
18:45:44price down here we're going to calculate
18:45:47this using the method instead of
18:45:49directly in the
18:45:50HTML so we're going to select this code
18:45:53and then right click
18:45:57copy inside products.
18:45:59JS inside the get price method we're
18:46:03going to
18:46:05rightclick and
18:46:08paste and again we want to return the
18:46:11price as a string so at the front we'll
18:46:14create a template string because we're
18:46:16inserting a
18:46:17value and at the back a template string
18:46:20or a back tick and we're going to return
18:46:23this from the
18:46:26method and another thing we need to fix
18:46:28is that product is undefined so to get
18:46:31the price sets property we're going to
18:46:33use this Price
18:46:37sets now one extra thing we need to do
18:46:40here is that we're using the format
18:46:42currency function but we didn't import
18:46:44it so we're going to scroll to the
18:46:47top and import format
18:46:50currency import curly brackets the
18:46:54format currency function from a
18:46:59string and here we're going to locate
18:47:02this function so we're inside the data
18:47:04folder we need to get out of the data
18:47:06folder using do slash and then go into
18:47:10the scripts folder into the UTS folder
18:47:13and load money. JS so scripts SL
18:47:17utils
18:47:26money.jpg
18:47:30and instead of calculating the price
18:47:33inside the HTML we're going to remove
18:47:36this and then insert the
18:47:41product. getet price method and
18:47:45brackets so now let's
18:47:48save and let's open the homepage to make
18:47:51sure that it's
18:47:53working so now you see that everything
18:47:55is still working including the stars and
18:47:59the
18:48:03prices so we'll go back to our
18:48:06code and now that we have these methods
18:48:08let's use them in our other page which
18:48:12is the checkout page so we'll open
18:48:14scripts
18:48:16checkout.
18:48:18JS and this basically displays the
18:48:20products on the checkout
18:48:24page if we scroll to the HTML and find
18:48:28the delivery date the product image and
18:48:31the product name we're going to see that
18:48:33here we're also calculating the
18:48:35product's price directly in the
18:48:39HTML so instead of doing this let's use
18:48:42the method we just created so select
18:48:45this code and remove it and insert the
18:48:50matching product this time so
18:48:52matching
18:48:54product and remember we converted all of
18:48:57our products into classes so this is not
18:49:00a regular object anymore it's more of an
18:49:02enhanced object it's a product
18:49:05class and that means this will have the
18:49:09method. get price and brackets and Save
18:49:16so now let's open the checkout page to
18:49:18see if this works we'll open the web
18:49:21page and then at the top right we're
18:49:24going to click the
18:49:25cart and now you can see that on the
18:49:27checkout page the price is still
18:49:30displayed
18:49:33correctly and that's it if we go back to
18:49:36our
18:49:37code you'll see that by converting our
18:49:39objects into classes we're able to use
18:49:42extra features of classes like methods
18:49:46to make our code
18:49:48cleaner so now let's make sure that all
18:49:50of our tests are passing we'll go to the
18:49:53left and scroll down and we're going to
18:49:56open test.html in the browser so if you
18:49:59don't have it open you can right click
18:50:02and open with live server but for me I
18:50:05already have it open so I'm going to
18:50:07open the test page and all of our tests
18:50:10are still passing so our code is still
18:50:13correct and now now let's save our
18:50:15changes into git we'll open the git
18:50:19section and in products. JS we created
18:50:22the products class and at the bottom we
18:50:26converted all of our objects into the
18:50:28products
18:50:30class so actually one thing I forgot to
18:50:32do is to clean up these console. logs so
18:50:36let's do that right now we're going to
18:50:38open our code and go into products.
18:50:42JS and we'll scroll down right after the
18:50:45product class and let's remove this
18:50:49product one because it was just an
18:50:52example and we'll also remove the
18:50:54console.log products at the
18:50:57end and
18:50:59save so now if we go back into git and
18:51:04open products. JS we just have the code
18:51:07where we convert our objects into a
18:51:10class in amazon.
18:51:12JS we use the feature of classes called
18:51:15Methods to make our code cleaner in
18:51:18checkout. JS we stop loading our cart
18:51:22class practice file and in orders
18:51:24summary. JS we also use a method to make
18:51:27our code
18:51:30cleaner so now let's create a message to
18:51:32describe these
18:51:34changes
18:51:36convert products into classes and commit
18:51:50next we're going to learn an important
18:51:52feature of object-oriented programming
18:51:55called
18:51:56inheritance inheritance lets us reuse
18:51:59code between
18:52:01classes so first let's learn the concept
18:52:04of
18:52:06inheritance to do that we're going to
18:52:08open our
18:52:09project so we'll open this page here to
18:52:13our checkout page
18:52:15and we're going to go to the homepage by
18:52:17clicking the top
18:52:20left and on this page we have a bunch of
18:52:23products but you also notice that we
18:52:26have different types of products for
18:52:28example we have clothing like this
18:52:30t-shirt and we have appliances like this
18:52:34toaster so clothing and appliances are
18:52:38still products they have a name a price
18:52:41and a rating but they are a more
18:52:44specific type of product for example
18:52:48clothing can have all the properties of
18:52:50a regular product but it can also have
18:52:53specific properties like a size
18:52:56chart so how do we represent this kind
18:52:59of relationship in our code we have a
18:53:01product and then we have a more specific
18:53:04type of
18:53:05product one way to represent this is to
18:53:08create a new class called clothing and
18:53:11this class will have all the properties
18:53:13of a regular product but also more
18:53:16specific
18:53:18properties however there's a problem
18:53:20with this which is we're duplicating a
18:53:22lot of
18:53:24code instead objectoriented programming
18:53:28has a feature called inheritance that
18:53:30allows one class to get all the
18:53:33properties and methods from another
18:53:35class so we don't have to copy paste
18:53:38this
18:53:39code for example we can make a clothing
18:53:42class and then use inheritance to get
18:53:46all the properties and methods from the
18:53:48product
18:53:49class this is similar to how a child
18:53:52inherits things from their parents like
18:53:55their hair color or the shape of their
18:53:57eyes in fact we call the product class
18:54:01the parent class and we call the
18:54:03clothing class the child
18:54:08class so now let's learn how to use
18:54:10inheritance in our code we're going to
18:54:13open VSS
18:54:16code and open our code on the left and
18:54:19then open products.
18:54:22JS and we're going to scroll to the
18:54:26product class and then below this class
18:54:29we're going to create a more specific
18:54:31type of product called
18:54:35class and capital c
18:54:38clothing and curly
18:54:41brackets so we said that clothing is is
18:54:44just a specific type of product so that
18:54:47means clothing should have all the
18:54:50properties and methods of a
18:54:52product so first let's inherit all these
18:54:56properties and methods into the clothing
18:54:59class to use inheritance after the class
18:55:02name we're going to use the word
18:55:06extends and then we're going to give it
18:55:08the class that we want to inherit from
18:55:12which is the product class
18:55:15Above So this means that clothing will
18:55:18get all the properties and methods of
18:55:20this class or it will inherit all the
18:55:24properties and
18:55:26methods to demonstrate this let's leave
18:55:29this empty and create a new clothing
18:55:33object so down
18:55:35here let's create a variable first using
18:55:39const and we'll name it a
18:55:42t-shirt make it equal
18:55:45and we'll generate a new clothing object
18:55:48to do that we'll use the word New
18:55:52Capital C clothing and
18:55:57brackets and next we're going to expand
18:56:00the products array and we're going to
18:56:02give the product details to this class
18:56:06so we're going to scroll down to the
18:56:07third product which is the
18:56:11t-shirt and we're going to select this
18:56:13object
18:56:14and then right
18:56:16click
18:56:18copy and scroll
18:56:20up and now between these brackets we're
18:56:24going to right click and
18:56:27paste so now we created a new closing
18:56:30class we gave it all the data that it
18:56:33needs and let's console.log it to see
18:56:36what it looks like so down here we're
18:56:38going to
18:56:40console.log brackets and the variable
18:56:43name which is t-shirt so here
18:56:48t-shirt and
18:56:51save and now let's open the console so
18:56:54we'll open our web page and then on this
18:56:57page we're going to right
18:56:59click
18:57:01inspect and open the
18:57:04console and you'll see that we created a
18:57:06new clothing
18:57:07object and if we open it you'll see that
18:57:11this has the same properties as the
18:57:13product class
18:57:14so this inherited all the properties
18:57:17from
18:57:18product so let's see if we inherited the
18:57:21methods as well we'll go to our
18:57:24code and let's try the method get price
18:57:28so we'll
18:57:30console.log
18:57:31t-shirt. getet price and
18:57:36brackets and
18:57:38save and now if we open the console
18:57:42again you'll see that get price also
18:57:44works so clothing inherited the methods
18:57:48from product as well so even though this
18:57:51is empty this class gets or inherits all
18:57:56the properties and methods of
18:57:59product so we use inheritance when we
18:58:02have one class which is a more specific
18:58:05type of another class for example
18:58:08clothing is a more specific type of
18:58:11product we want all the properties and
18:58:14methods of the product still but we just
18:58:16don't want to copy paste all this code
18:58:19down here so inheritance lets us reuse
18:58:22code between
18:58:29classes so now that we have this
18:58:31clothing class we can add properties and
18:58:33methods that are more specific to
18:58:37clothing for example clothing can have a
18:58:40size
18:58:42chart so for con convenience inside this
18:58:45t-shirt object I've actually added a
18:58:48size chart link so let's add this to our
18:58:52clothing class so up here we're going to
18:58:55add a
18:58:56property size chart
18:59:00link and now to set this value we're
18:59:03going to use the Constructor like we did
18:59:06before so down here we're going to use a
18:59:11Constructor brackets and curly brackets
18:59:16and we're going to give this a parameter
18:59:18called Product
18:59:24details so when we create the clothing
18:59:26we save this object into product details
18:59:29and then we can use it to set the
18:59:31properties up here so we're going to do
18:59:35this do size chart link and make it
18:59:40equal to the product details
18:59:44which is this object and we're going to
18:59:46get the size chart link
18:59:49property dot size chart
18:59:55link now one problem we have here is
18:59:58that clothing inherits all the
19:00:00properties from the product so we also
19:00:04need to set the ID the image the name
19:00:07and so on so if we scroll down we could
19:00:11do something like this . ID equals
19:00:16product details.
19:00:18ID however instead of doing this one by
19:00:22one all over again inheritance gives us
19:00:25a shortcut we can actually just use the
19:00:28Constructor in the parent class up
19:00:33here so to call the parents Constructor
19:00:36we're going to use a special feature of
19:00:38classes called super and brackets
19:00:44so super basically calls the Constructor
19:00:47of the parent class which is the product
19:00:50so this will call the Constructor up
19:00:52here and we also need to give this the
19:00:55product details so down here we're going
19:00:58to call Super and give it the product
19:01:05details so this will call the
19:01:07Constructor of the parent class which is
19:01:09product and that will set the ID the
19:01:12name and the rating
19:01:14so now let's save
19:01:16this and check our console
19:01:20again and open up the clothing object
19:01:23and you'll see that now we have a size
19:01:25chart link
19:01:27property so that's how inheritance Works
19:01:31a class can get or inherit all the
19:01:34properties and methods of another class
19:01:37and reuse that code and this class can
19:01:40also have more specific properties and
19:01:42methods like a size chart
19:01:46link one last thing to know is that if
19:01:49we don't create a Constructor by default
19:01:52it will run the parents Constructor so
19:01:55that's why when this class was empty the
19:01:57code still
19:02:02worked now that we have this clothing
19:02:04class we're going to use it in our
19:02:09project so right now if we scroll down
19:02:11to our products array we can converted
19:02:14all of these into a product
19:02:16class however we're going to convert
19:02:19some of them like the t-shirt into a
19:02:22clothing class instead to make it more
19:02:25specific so how do we know which objects
19:02:27to convert into a product and which ones
19:02:30to convert into clothing to help us do
19:02:33that I included a property called type
19:02:36so type tells us which class we should
19:02:38use when we're converting this into a
19:02:42class this is sometimes called a
19:02:44discriminator property it tells us which
19:02:47class we should convert this
19:02:50to so we're going to go down to the
19:02:52bottom of this code so I'm going to do a
19:02:55trick here I'm going to scroll up to the
19:02:57products array and click this Arrow to
19:03:00collapse it and then at the bottom we're
19:03:03going to use that type property to
19:03:05decide which class to use so inside this
19:03:09function we're going to use an if
19:03:12statement bracket ET and curler
19:03:15brackets and inside we're going to check
19:03:17the type
19:03:19property product
19:03:22details.
19:03:24type and we'll check if it is equal to
19:03:28the string
19:03:32clothing if it is equal to clothing
19:03:35we're going to convert this object into
19:03:37a clothing class instead so let's
19:03:41return new Capital C clothing and
19:03:47brackets and we're going to give the
19:03:49Constructor product
19:03:55details so now our array will contain a
19:03:58mix of regular products and
19:04:02clothing next for each of our clothing
19:04:05we're going to display the size chart
19:04:07link on the
19:04:10page but first let's make sure that we
19:04:13have this image here the closing size
19:04:16chart so if we go into our images
19:04:19folder you might see the image here
19:04:22called clothing siiz
19:04:24chart.png but currently I don't have
19:04:26this so I need to download this first to
19:04:29do that we're going to click this link
19:04:31in the
19:04:38description which will open the size
19:04:40chart
19:04:46and then on this image we're going to
19:04:48right click save image
19:04:51as and then find the folder that
19:04:53contains all our code so for me it's on
19:04:56the
19:04:57desktop inside a JavaScript Amazon
19:05:01Project and inside the images
19:05:04folder and we'll save it
19:05:10here and if we go back to our code we
19:05:13should have the closing size chart image
19:05:16inside the images
19:05:19folder now let's display the size chart
19:05:22on the
19:05:24page so if I go to the
19:05:26homepage whenever we have a clothing
19:05:29product like this t-shirt we're going to
19:05:31display a size chart
19:05:35underneath let's go back to our
19:05:38code and open amazon. JS which creates
19:05:42the homepage
19:05:43which is right
19:05:45here and we're going to scroll down the
19:05:47HTML below the product price and the
19:05:51quantity selector here and underneath
19:05:57this if we have a clothing product we're
19:06:00going to display a size chart link under
19:06:02the quantity selector like
19:06:06this so one way we can do this is to use
19:06:10something like an if statement or a
19:06:12turnery like a this if it's a clothing
19:06:16then display some HTML if it's not a
19:06:18clothing then just display
19:06:23nothing however we're going to learn a
19:06:25different way to do this using
19:06:28inheritance so first we're going to
19:06:30create a new method on the clothing
19:06:32class that's going to generate the HTML
19:06:35that we need here so we're going to go
19:06:38to our code and scroll up and open
19:06:41products. Js
19:06:44and we're going to scroll up to the
19:06:46clothing
19:06:47class and at the bottom we're going to
19:06:49create a new method and let's call it
19:06:53extra
19:06:55info
19:06:56HTML brackets and Cur
19:07:02brackets so this method will generate
19:07:04some HTML that contains some extra
19:07:07information about this product like the
19:07:09size
19:07:11chart so here we're going to return some
19:07:16HTML and we use a template string
19:07:18because we're going to insert some
19:07:20values inside and inside here let's
19:07:24create some HTML for a
19:07:27link to create a link we're going to use
19:07:30the code less than a greater than less
19:07:34than SL a greater than so this HTML
19:07:38element creates a link when we click
19:07:41this link it will open another page
19:07:44page inside this link let's put the text
19:07:48size chart so this is what's going to
19:07:51show up on the
19:07:52page and Link elements have two
19:07:56attributes the first attribute is called
19:07:59hre Equals double
19:08:01quotes So this tells the computer which
19:08:04page this should open when we click this
19:08:08link inside here we're going to insert
19:08:11the size chart link so we're going to
19:08:14insert this. siiz chart
19:08:20link so when we click this it will open
19:08:23a page containing the size chart
19:08:27image we'll scroll back
19:08:30up and Link elements can have another
19:08:33attribute called Target equals double
19:08:37quotes and we're going to give it a
19:08:39value of underscore blank
19:08:43and I'll add some new lines here to make
19:08:45it a little easier to
19:08:48read so Target equals blank tells the
19:08:51link to open in a new
19:08:54tab so now let's save this
19:08:57file and we'll go back to the homepage
19:09:00so I'll scroll down here to amazon.
19:09:04JS and below the quantity
19:09:07selector let's
19:09:09insert and we'll call the method that we
19:09:12just created which is the
19:09:15product. extra info
19:09:19HTML and
19:09:22brackets so this will ins some HTML
19:09:26containing extra information about the
19:09:28product like the size
19:09:30chart now before we run this code
19:09:33there's one thing that we need to fix
19:09:35currently only the clothing class has
19:09:38this
19:09:39method if it's just a regular product
19:09:42it's not going to have this method and
19:09:44it's going to cause an
19:09:47error to fix this we're also going to
19:09:50create this method on the product class
19:09:53so we'll go back to our
19:09:55code and open products.
19:09:58JS and we're going to scroll up to the
19:10:01products class here and at the bottom
19:10:05we're going to add the same
19:10:10method extra info HTML brackets and
19:10:15curly
19:10:17brackets and for regular products we
19:10:20don't have any extra info we want to
19:10:22display so let's just return and empty
19:10:27string and
19:10:30save so now if we call extra info HTML
19:10:34it doesn't matter if it's a product or a
19:10:36clothing both of these will have this
19:10:39method
19:10:40defined so we'll go back to amazon.
19:10:44JS and now this should always
19:10:47work so let's click this file and
19:10:51save and then open the web page to see
19:10:54the
19:10:55result so now you notice that products
19:10:58that are clothing have a size chart
19:11:01underneath and regular products don't
19:11:04have any extra
19:11:06information and if we click the size
19:11:08chart link it will open a new tab to the
19:11:12size chart image
19:11:15so that's how we create this size chart
19:11:17link for only the clothing
19:11:24products let's go back to our code and
19:11:26we'll learn more about this new
19:11:28technique that we just
19:11:31used so on the left we'll go back to
19:11:34products. JS
19:11:38first so notice that the product class
19:11:41has a method called extra info HT ML and
19:11:44then clothing extends this
19:11:47class that means clothing will
19:11:49automatically get the extra info HTML
19:11:53method but then we Define this method
19:11:56again inside
19:11:58clothing so this will actually override
19:12:01or replace the parents method and this
19:12:04technique is called method
19:12:09overwriting one more thing to know about
19:12:11method overwriting is that if we really
19:12:14need access to the parents method
19:12:17there's a feature that we can use called
19:12:20super so super gives us access to the
19:12:24parent
19:12:25class so if we want to call this method
19:12:27up here we can do super and then extra
19:12:32info
19:12:36HTML so it's the same super as we used
19:12:39up here except this calls the parents
19:12:42Constructor and this calls one of the
19:12:45parents
19:12:47methods so let's comment this out since
19:12:49it's just an
19:12:52example and let's
19:12:55save and lastly let's go back to amazon.
19:13:00JS and we'll take a look at this code
19:13:04and notice that when we call extra info
19:13:07HTML we don't know what class this is
19:13:10this might be a clothing class or a
19:13:13might just be a product
19:13:15class this technique is called
19:13:18polymorphism which means we can use a
19:13:20method without needing to know exactly
19:13:23what class this
19:13:25is polymorphism is sort of like an
19:13:28alternative to doing if statements here
19:13:31instead of doing if it's clothing do
19:13:33this if it's a regular product do
19:13:36something else we can just have both of
19:13:38the classes use the same method and then
19:13:41the class itself will Det determine what
19:13:43this method
19:13:45does if we add a new class like an
19:13:48appliance class we don't need to change
19:13:51any of this code the appliance class
19:13:53will determine what extra info HTML
19:13:59does and that's it we learned about
19:14:02inheritance which lets us reuse code
19:14:05between classes and we learn some of the
19:14:07techniques we can do with inheritance
19:14:10like method overwriting and polymorph
19:14:13PRM which can make our code a little bit
19:14:16cleaner now let's check our test to make
19:14:19sure that everything still works so
19:14:21we'll open the test page and make sure
19:14:24that everything is still passing and
19:14:26then we'll go back to our code and we'll
19:14:29save this into git open the git
19:14:32section and in products.
19:14:37JS we created the clothing class which
19:14:41inherits from product
19:14:43and one thing I forgot to do is to
19:14:45remove this practice
19:14:47code so let's actually go back to our
19:14:50code in products.
19:14:53JS and below the clothing let's remove
19:14:57this practice
19:14:59code and
19:15:02save we'll go back to
19:15:04git and just make sure that it's been
19:15:08removed and then we added the size chart
19:15:11image
19:15:13and in amazon. JS we used polymorphism
19:15:16to add some extra info below each
19:15:19product so let's create a message
19:15:21describing our
19:15:23changes use
19:15:27inheritance and
19:15:30polymorphism to add size chart and
19:15:35commit
19:15:43in the rest of this lesson we're going
19:15:44to learn more details about classes the
19:15:48first detail is how to test classes so
19:15:51testing classes is the same as writing
19:15:54normal
19:15:55tests so we generate an object using a
19:15:58class and then we test if its properties
19:16:01and methods are
19:16:03correct I'll leave writing tests as an
19:16:06exercise at the end of this
19:16:10lesson the second detail we're going to
19:16:12learn is built in
19:16:14classes these are classes that are
19:16:16provided by the
19:16:20language so let's go back to our
19:16:23code and open products. JS
19:16:26again and we're going to practice using
19:16:29a buil-in
19:16:30class an example of a built-in class is
19:16:35date this class generates an object that
19:16:38represents the current date
19:16:44below the classes that we created we're
19:16:46going to create some new lines and we're
19:16:48going to practice using the built-in
19:16:50date
19:16:51class first we'll generate a new date
19:16:55object using the code new and then the
19:16:59class capital D date and
19:17:04brackets and now let's save this object
19:17:06in a variable so at the front we'll use
19:17:10const and we'll call it date and make it
19:17:13equal to this object that we just
19:17:16generated and below this let's
19:17:19console.log the date to see what it
19:17:22looks like so we'll
19:17:25save and then open the
19:17:27page and we'll go back to our project
19:17:30here and we're going to check the
19:17:32console so right click
19:17:35inspect and the
19:17:38console and we can see that the date
19:17:40object represents the current date and
19:17:43time so this is the current date and
19:17:45time that I'm recording this
19:17:49video so this date object has properties
19:17:52and methods that we can use that are
19:17:54related to the
19:17:56date for example we'll go back to our
19:18:00code and every date object has a method
19:18:03called two local time string this
19:18:06basically gives us the current
19:18:09time so let's try it out we'll create
19:18:12create a new line and type the code date
19:18:16dot to local time string and brackets so
19:18:24make sure that this is in cam case two
19:18:26is lowercase and every other word starts
19:18:29with an
19:18:30uppercase and we'll console.log this to
19:18:33see what it looks like
19:18:35console. log and
19:18:40brackets so let's save this file
19:18:44and open the
19:18:46console and that method gave us the time
19:18:50so for you you should see your current
19:18:52time
19:18:55here so that's the built-in date class
19:18:59it lets us create objects that represent
19:19:01the current date and
19:19:04time an interesting thing to know is
19:19:06that we used the external Library DJs
19:19:10earlier in the project DJs uses this
19:19:13date class behind the
19:19:15scenes however DJs gives us a lot of
19:19:18extra features so we usually use DJs
19:19:22instead of using the date class
19:19:26directly so now let's comment out this
19:19:28code because it was just an example so
19:19:31at the top we'll type
19:19:33slashstar and below it star
19:19:39slash the last thing we're going to
19:19:41learn is more detail dets about
19:19:44this as a
19:19:46reminder inside an object we can use the
19:19:49value this and this will point to the
19:19:53outer
19:19:54object so this feature lets an object
19:19:57access its own
19:20:00properties now in JavaScript this can
19:20:04actually be used anywhere in our
19:20:07code for example we're going to create
19:20:10some new lines
19:20:13and here we can just directly
19:20:17console.log
19:20:20this so here we're using this but we're
19:20:23using it outside of any object in this
19:20:27situation there's no object for this to
19:20:30point to so this will be undefined which
19:20:34actually makes
19:20:36sense if we
19:20:38save and we check our console
19:20:43this will equal
19:20:45undefined now originally this actually
19:20:49equaled the window
19:20:51object however this Behavior caused
19:20:54confusion so when they release
19:20:56JavaScript modules inside a module this
19:21:00is now undefined which makes more
19:21:06sense let's go back to our code and
19:21:09another place we can use this is when
19:21:11we're creating an object so let's go
19:21:14down here and we're going to create a
19:21:17new object using const we'll call it
19:21:20object two and make it equal to curly
19:21:24brackets and we're going to give this
19:21:26object a property let's just call it a
19:21:29colon give it a value of two comma and
19:21:33add another property B
19:21:36colon and we'll set the value of this
19:21:39property to this Dot
19:21:43a now you might think that because we're
19:21:46inside this object this will point to
19:21:50object 2 however at this point in the
19:21:54code object 2 has not been created yet
19:21:57so this doesn't have anything to point
19:22:00to and this will be
19:22:05undefined if we
19:22:07save and then open the
19:22:10console it will give us an error because
19:22:14this is
19:22:17undefined let's go back to our
19:22:19code so so far if we're inside a method
19:22:23we can use this and it will point to the
19:22:26object if we're outside of a method
19:22:29there's no object to point to and this
19:22:31will be
19:22:32undefined and everything makes sense so
19:22:37far so let's comment this out using SL
19:22:41star and and at the bottom start
19:22:46slash now the last important place we
19:22:49can use this is inside a
19:22:54function so at the bottom here we're
19:22:57going to create a
19:23:00function and let's call it log this
19:23:04brackets and curly
19:23:06brackets and inside we're just going to
19:23:09console. log this
19:23:14so again we're not inside of any object
19:23:18so there's nothing for this to point2
19:23:21and in this situation this will be
19:23:24undefined as
19:23:28well below this if we run the function
19:23:31log this and brackets and
19:23:36save and check the
19:23:38console it will tell us that this is
19:23:41undefined when it's just inside a
19:23:43regular
19:23:45function next this actually has a
19:23:48special
19:23:49feature so inside a function we can
19:23:52change this to whatever we want to do
19:23:56that functions have a method called
19:24:01call So Below this line let's type the
19:24:04function name log this and use a method
19:24:09do call and brackets
19:24:13so call runs this function so it does
19:24:17the same thing as the line above except
19:24:20we can set the value of this to be
19:24:22whatever we want so the first value that
19:24:25we give to do call is going to be the
19:24:28value of this for example we can give it
19:24:31the string
19:24:34hello and now this will run the function
19:24:37and this will be equal to hello if we
19:24:40save
19:24:42and open the
19:24:44console you can see that we set this to
19:24:47be equal to
19:24:50hello so that's a special feature of
19:24:53this inside just a function we can
19:24:57change this to whatever we want using a
19:25:00method like
19:25:03call so call is the same as calling or
19:25:07running the function except we add an
19:25:10extra parameter in front this first
19:25:13parameter is the value of
19:25:18this the last important thing to know
19:25:21about this is that Arrow functions do
19:25:23not change the value of
19:25:26this for example below this let's create
19:25:30a method by using an arrow function this
19:25:32time so we'll create some new lines and
19:25:36first we're going to create an object
19:25:38using
19:25:39const we'll call it object three equals
19:25:44curly
19:25:45brackets and inside will give it a
19:25:49method and colon and we're going to
19:25:52create this method using an arrow
19:25:54function this time brackets arrow and
19:25:57curly brackets and inside we'll just
19:26:01console. log
19:26:06this so usually this will point to the
19:26:10object itself
19:26:12however Arrow functions do not change
19:26:15the value of
19:26:17this here this will have the same value
19:26:22as outside the arrow
19:26:24function outside the arrow function
19:26:27let's type
19:26:28this here this has no object to point to
19:26:33so this will be
19:26:35undefined and then inside the arrow
19:26:38function it will also be undefined
19:26:42basically this keeps the value that it
19:26:45had outside the arrow
19:26:50function as a test below this we'll run
19:26:54object 3. method and
19:26:58brackets if we
19:27:00save and check the
19:27:06console it will show us that inside here
19:27:09this is also undefined
19:27:13so in an arrow function this will be
19:27:15whatever the value is outside the arrow
19:27:20function now you might be wondering why
19:27:23are Arrow functions designed this
19:27:27way so JavaScript had a common problem
19:27:29in the past when we are inside a method
19:27:33this points to the object but if we try
19:27:36to do a for each Loop inside the for
19:27:40each Loop this does not point to the
19:27:42object anymore it points to undefined
19:27:46and that's because we created a whole
19:27:48new function here and remember inside a
19:27:51regular function this becomes
19:27:55undefined so this caused problems
19:27:58because we no longer had access to the
19:28:00outer object up
19:28:02here so that's why we created Arrow
19:28:05functions if we replace this with an
19:28:07arrow function this would be equal to
19:28:10whatever it is outside the Arrow
19:28:12function Arrow functions do not change
19:28:15the value of
19:28:17this so outside for each this points to
19:28:20the object and inside for each this also
19:28:24points to the
19:28:26object so that's why Arrow functions are
19:28:29designed this way to avoid accidentally
19:28:32overwriting
19:28:34this so let's summarize what we learned
19:28:37about this inside a method this points
19:28:41to to the outer object inside a function
19:28:45this is undefined but we can change it
19:28:48to whatever we want using something like
19:28:51call and arrow functions do not change
19:28:54the value of
19:28:57this don't worry if these rules are a
19:28:59bit confusing at first they are actually
19:29:02sort of
19:29:03reasonable if there's an object to point
19:29:05to this will point to that object if
19:29:08there's no object to point to this will
19:29:10be undefined and we have tools like call
19:29:14and arrow functions to kind of
19:29:16manipulate the value of this to be what
19:29:19we want the more that you work with it
19:29:21the more you just get used to
19:29:27it so now let's comment out this
19:29:29practice code at the top we'll type
19:29:33slashstar and at the bottom star slash
19:29:37and
19:29:39save and we'll save to get
19:29:42we'll open the git
19:29:44section inside products. JS we added
19:29:48some practice code to learn more details
19:29:50about classes and
19:29:53this let's type a message describing our
19:29:57changes learn more details about classes
19:30:03and this and commit
19:30:13now that we learned object-oriented
19:30:15programming you might notice that it's a
19:30:18very different style of programming than
19:30:21just writing out a bunch of functions
19:30:23directly so you might be wondering which
19:30:26style of programming should we use
19:30:29objectoriented programming or procedural
19:30:31programming which is the step-by-step
19:30:34style that we used in the earlier
19:30:37lessons the answer is it's up to you I
19:30:41personally prefer procedural programming
19:30:43in JavaScript because I think it's
19:30:45simpler I only use objectoriented
19:30:48programming if I'm working on a team
19:30:50that also uses it also object-oriented
19:30:54programming is much more popular in
19:30:56other languages so it's still useful to
19:30:59know object-oriented programming in case
19:31:02you work with other programming
19:31:03languages in the
19:31:06future and that's the end of this lesson
19:31:10in this lesson we learned about
19:31:12objectoriented programming which means
19:31:14we organize our code into objects we
19:31:18learned how to use a function to
19:31:20generate objects and we improve that by
19:31:22using a class to generate objects we
19:31:26learned that classes can have private
19:31:28properties and methods we learned about
19:31:31inheritance which lets us reuse code
19:31:34between classes and we learned about
19:31:37method overwriting and polymorphism
19:31:40which lets us call a method without
19:31:42needing to know what the class is and
19:31:45lastly we learned more details about
19:31:47this and how to control the value of
19:31:54this thanks for watching this course so
19:31:56far if you want to support this channel
19:31:59you can check out the premium version of
19:32:01my courses just like this one where you
19:32:03can get a certificate of completion and
19:32:06a Better Learning platform if you're
19:32:08interested in extra videos from me more
19:32:11in-depth videos and behind the scenes
19:32:13content you can check out these links
19:32:16here you can also support the channel by
19:32:19liking the video subscribing and sharing
19:32:22this video with others thanks again and
19:32:24let's continue with the
19:32:27course here are some exercises to help
19:32:30you practice what we learned in this
19:32:32lesson
19:33:03in this lesson we're going to learn
19:33:04about backend and this will prepare you
19:33:07for the next step after finishing this
19:33:10course first of all
19:33:12what is backend a backend is just
19:33:15another computer that manages the data
19:33:18of a
19:33:19website for example in our Amazon
19:33:22Project we created this website where we
19:33:25can pick which products we want but how
19:33:28does Amazon the company know which
19:33:31products that we
19:33:32ordered in this situation there has to
19:33:35be a second computer somewhere that's
19:33:37owned by
19:33:39Amazon and then our computer sends the
19:33:42order information to this second
19:33:44computer and now Amazon will know what
19:33:47we
19:33:48ordered so this second computer is
19:33:52called the backend computer or just the
19:33:55backend it manages the data of a
19:33:59website on the other hand our computer
19:34:02or the web page where we can see and
19:34:04interact with the products this is
19:34:07called the front end
19:34:12now that we know what a backend is how
19:34:14does our computer or the front end send
19:34:18information to the back end when two
19:34:22computers are connected to the internet
19:34:24they can actually send messages to each
19:34:27other using a feature called
19:34:31HTTP or hypertext transfer
19:34:34protocol in an HTTP message we can
19:34:38actually attach information like our
19:34:40Amazon order
19:34:42when Amazon's backend receives this HTTP
19:34:45message now Amazon will know what we
19:34:50ordered now that we know what HTTP is
19:34:54let's send our first HTTP message using
19:34:58JavaScript so we'll go to our code and
19:35:02on the left we're going to create a new
19:35:03file just for practicing backend so
19:35:06we'll scroll up to the data folder and
19:35:09we'll click inside this folder and then
19:35:12create a new
19:35:13file and let's name this file backend
19:35:17Das
19:35:19practice. JS and press
19:35:24enter and now to send an HTTP message
19:35:28we're going to use a class called XML
19:35:32HTTP request so this is a built in class
19:35:36meaning it's provided by
19:35:39JavaScript first we gener at an object
19:35:42using this class using the code
19:35:46new and the class name
19:35:49XML all capital capital
19:35:53HTTP capital r request and
19:36:00brackets so this creates a new HTTP
19:36:03message that we want to send to the
19:36:05backend a message is also known as a
19:36:10request so now let's save this request
19:36:13in a variable at the front we'll create
19:36:16a variable with const and name it
19:36:20xhr equals this
19:36:24request next we need to set up this
19:36:27request so we'll create a new line and
19:36:31to set it up we'll do xhr
19:36:35doop and
19:36:38brackets and to set up this request
19:36:42we're going to give open two
19:36:45parameters the first parameter is what
19:36:48type of HTTP message to
19:36:50send so one type of message we can send
19:36:54is the string
19:36:56get get means we want to get some
19:36:59information from the back
19:37:01end there are several common types of
19:37:04requests that we can give to the backend
19:37:07but we're going to start by learning get
19:37:12next we're going to give open a second
19:37:16parameter and this parameter tells a
19:37:18computer where to send this HTTP message
19:37:23so using HTTP we can send a message to
19:37:27any computer that's connected to the
19:37:29internet now to locate another computer
19:37:32on the internet we need to use a
19:37:35url url stands for uniform resource
19:37:39locator and it's kind of like an address
19:37:42but for the internet a URL helps us
19:37:46locate another computer on the
19:37:49internet so URLs look like this this is
19:37:54the URL for Amazon YouTube and my
19:37:57website the https in front means we're
19:38:01using HTTP to communicate with this
19:38:04computer the S after the http means
19:38:08we're using a secure version of http
19:38:13the second part of a URL is called a
19:38:15domain name this is like an address it
19:38:18points to another computer on the
19:38:21internet so amazon.com points to one of
19:38:25Amazon's backend computers youtube.com
19:38:28points to one of YouTube's backend
19:38:31computers and superimple dodev points to
19:38:34one of my backend
19:38:37computers if you want to learn more
19:38:39about domain names and how the internet
19:38:41works you can check out my video on how
19:38:43to put a website on the
19:38:47internet now for this lesson I actually
19:38:50set up a backend computer that we can
19:38:52practice with so my backend is located
19:38:56at the URL
19:38:58https super simple backend
19:39:02dodev so in the second parameter of open
19:39:06we're going to give it a
19:39:07string and we're going to give it the
19:39:09URL of the back end end that we want to
19:39:12send the message
19:39:13to so the URL for my backend is
19:39:18https colon SL SL super simple
19:39:25backend.
19:39:28death so that's how we set up an HTTP
19:39:31message we give it the type of message
19:39:34we want to send and also the URL which
19:39:37is where to send this message to
19:39:42the last step is to just send this
19:39:44message so we'll create a new line and
19:39:48we'll type xhr
19:39:51doent brackets and
19:39:56save so this creates a new HTTP message
19:40:00sets it up and then sends this message
19:40:03across the internet to my backend
19:40:06computer located at superimple backend.
19:40:09deev so now let's actually run this code
19:40:13and see the results we're going to go to
19:40:15the left and we're going to open
19:40:18checkout.
19:40:20JS and in here just like we did before
19:40:23we're going to load that practice file
19:40:25that we just created so we'll create a
19:40:28new line and we're going to import a
19:40:32file or a string and we'll locate that
19:40:35practice
19:40:37file so first we need to go to the data
19:40:39folder using using do dot SL dat slash
19:40:45and load
19:40:47backend D
19:40:49practice. JS and
19:40:55save so we'll go back to the practice
19:40:58file and now when we open the website it
19:41:01will run this code and send the HTTP
19:41:04message to see that let's open the
19:41:07website so we'll scroll down and if you
19:41:10don't have the website open you can open
19:41:12it again by right clicking checkout.
19:41:15HTML and then open with live
19:41:18server I already have the website open
19:41:21so I'm going to open
19:41:22it and then I'm going to go to the
19:41:25checkout
19:41:26page and now we're going to look at the
19:41:29console so we'll right
19:41:32click and
19:41:35inspect and this time instead of going
19:41:37to the console tab we're going to go to
19:41:40a new tab
19:41:42called the network
19:41:44tab if you don't see this tab you can
19:41:47make this window wider or you might find
19:41:50it under these
19:41:52arrows so we'll open the network
19:41:59Tab and in here this will show us all
19:42:03the HTTP messages that are coming in and
19:42:06out of our
19:42:08computer now before we start looking at
19:42:11the the HTTP messages there's one
19:42:13important thing to know about the
19:42:15network Tab and that is messages will
19:42:18only appear here after we open the
19:42:22console if we send some messages and
19:42:25then we open the console it's not going
19:42:27to show up
19:42:28here so to make sure our HTTP messages
19:42:32are recorded here we need to open the
19:42:35network tab first and then we're going
19:42:38to refresh the page to resend those
19:42:42messages and now if we open the network
19:42:45tab we should be able to see the HTTP
19:42:48messages at the
19:42:52bottom okay so inside this list we
19:42:56should be able to see that we sent a
19:42:58message to superimple backend. deev if
19:43:02you don't see it we can also search this
19:43:04list by using the text box up
19:43:08here so in here we can type part of the
19:43:12URL that we sent the message to for
19:43:15example super
19:43:18simple and the message that we sent
19:43:21should appear here so now we can click
19:43:24this message to get more details about
19:43:28it on the right side we have several
19:43:31tabs here the headers tab gives us
19:43:34details about our message or about our
19:43:38request so it tells us which type of
19:43:41requests that we sent which is get and
19:43:44the URL that we sent it to which is
19:43:47super simple backend.
19:43:49Dev this sends the request across the
19:43:53internet to my
19:43:55backend and then when my backend
19:43:58receives this message or this request it
19:44:01will send back a message which is called
19:44:04a
19:44:06response to see the response from my
19:44:09backend we can open the the response
19:44:12Tab and you can see that my backend
19:44:15responded with hello this is super
19:44:18simple dev's back end and a
19:44:20documentation page that we can check
19:44:23out so we have successfully sent an HTTP
19:44:26message or a request to my backend and
19:44:30we got back a
19:44:33response another useful tab here is the
19:44:36preview tab it basically takes a
19:44:38response and displays it in an easy to
19:44:41read
19:44:43format so now let's learn some
19:44:46terminology when we send a message to
19:44:49the backend this message is called a
19:44:52request we are requesting something from
19:44:54the
19:44:55backend when the backend receives our
19:44:58request it will send an HTTP message
19:45:01back to us and this message is called
19:45:04the
19:45:06response so each request that we make
19:45:09will get one response from the back
19:45:12end and this is called a request
19:45:15response cycle it's always one request
19:45:18one
19:45:22response next currently we're viewing
19:45:25the response in the network tab but we
19:45:28can actually get this response in our
19:45:31code and then do something with this
19:45:34response so let's go back to our
19:45:37code and here after we send the requ
19:45:40Quest we can get the response using a
19:45:43property called xhr do
19:45:49response however there's a slight
19:45:51problem with doing this when we send a
19:45:54request to the backend it takes time for
19:45:57the request to travel across the
19:46:00internet to the back end and for the
19:46:02response to come
19:46:04back so the response is not available
19:46:07right away and xr. response will be
19:46:11undefined at first so xr. send is known
19:46:15as asynchronous code asynchronous code
19:46:19means it does not wait for this line of
19:46:21code to finish it just sends the request
19:46:25and then immediately goes to the next
19:46:27line the response might come back later
19:46:30in the future but we don't have access
19:46:32to it
19:46:34here so in this situation in order to
19:46:38get this response we need to wait for
19:46:41the response to come back first and then
19:46:44we can access do
19:46:46response in order to wait for the
19:46:49response to come back at the top after
19:46:52we create the
19:46:53xhr we're going to use this code
19:46:58xhr do add capital E Event capital L
19:47:04listener and
19:47:07brackets so this method listens or waits
19:47:11for an event and then it can run a
19:47:15function so this method takes two
19:47:17parameters the first parameter is the
19:47:20event that we want to listen for or to
19:47:23wait for in this case we want to wait
19:47:26for the response to come back so we're
19:47:28going to give it the string load load
19:47:32means the response has
19:47:36loaded the second parameter is a
19:47:39function that we want to run
19:47:41after this event
19:47:43happens so in this case after the
19:47:45response has loaded we're going to run a
19:47:48function brackets arrow and curly
19:47:54brackets so because this function runs
19:47:56after the response loaded inside here we
19:48:00can access xhr do
19:48:04response and this will not be undefined
19:48:07it will contain the response that we saw
19:48:09earlier in the network
19:48:11tab so let's console.log this to see
19:48:14what it looks like
19:48:17console.log and
19:48:19brackets and we'll remove this line at
19:48:22the
19:48:23end and
19:48:26save so now let's go back and check the
19:48:29console for the response so we'll open
19:48:32the
19:48:33console and then open the console
19:48:37Tab and here you can see that we have
19:48:40the response in our code and we console.
19:48:43logged
19:48:45it so this
19:48:47response is a string and now we can save
19:48:51this in a variable or do whatever we
19:48:53want with it in our
19:48:57code now one thing you might be
19:48:59wondering is why do we put the event
19:49:01listener up here at the top so first we
19:49:05need to set up the event listener and
19:49:08then trigger the event or send the
19:49:11request this is the same as setting up
19:49:13an event listener for clicking a button
19:49:16we need to set up the event listener
19:49:18first and then we click the button
19:49:22after so that's how we send a request to
19:49:25the back end wait for the response and
19:49:28then save the response in our
19:49:33code next we can send different messages
19:49:36or different requests to the backend
19:49:39using URL
19:49:41paths a URL path is the part that comes
19:49:45after the domain name for example in
19:49:48this URL the URL path is /hello in this
19:49:53URL the URL path is/ products
19:49:58slir in this URL if there is no URL path
19:50:02the URL path is
19:50:06slash we can send a request to these URL
19:50:09paths and each URL path will give us a
19:50:12different
19:50:14response so let's try sending requests
19:50:17to different URL paths and see what
19:50:19different responses that we
19:50:22get so for this example let's send the
19:50:26request to super simple backend. deev
19:50:29and then the URL path SL hello and
19:50:36save and now let's open our console to
19:50:39see the response
19:50:42and here you can see that this URL path
19:50:45gave us a different response than last
19:50:48time let's go back and try another URL
19:50:52path to see what it looks like so we'll
19:50:55delete this and then send the request to
19:50:58slash products
19:51:02slir and
19:51:04save and we'll open the console to view
19:51:07the
19:51:09response and here here this URL path
19:51:12give us a Json and this contains the
19:51:15details of the first product in our
19:51:18Amazon
19:51:20Project so we can send requests to
19:51:23different URL paths and we will get
19:51:25different responses from the
19:51:29backend next a backend only supports a
19:51:33certain set of URL paths for example
19:51:37when I created my backend super simple
19:51:40backend .d I had to decide which URL
19:51:44paths are supported and how my backend
19:51:47would respond to each URL path if we
19:51:51send a request to a URL path that is not
19:51:54supported the back end will respond with
19:51:56an
19:51:59error let's go back to our
19:52:01code and we'll try a URL path that is
19:52:04not
19:52:06supported so let's remove this at the
19:52:08end
19:52:11and we'll try sending the request to
19:52:14not-
19:52:16supported and
19:52:20save and now if we look at our
19:52:23console you'll see that the backend
19:52:26responded with an error message saying
19:52:28this URL path is not
19:52:31supported the browser will also
19:52:33console.log this red error
19:52:36message this red message is displayed
19:52:38automatically when there's an error
19:52:43so this message tells us the type of
19:52:45request that we sent which is get and
19:52:49the URL that we sent it to and also this
19:52:53number which is called the status
19:52:55code whenever we get a response from the
19:52:58backend the backend also gives us a
19:53:01status code which tells us if a request
19:53:04succeeded or
19:53:06failed a status code that starts with
19:53:09four or five means the response
19:53:12failed starting with four means it was
19:53:15our problem we sent the request to a URL
19:53:18path that was not
19:53:20supported starting with five means it
19:53:23was the backends problem for example the
19:53:25backend
19:53:27crashed a status code starting with a
19:53:30two means the response was
19:53:34successful so we can also see the status
19:53:36code in the network
19:53:38tab so we can search for our request and
19:53:42then when we click the request in the
19:53:45headers tab it will show us the status
19:53:47code in this
19:53:49row so this tells us if our request
19:53:52succeeded or
19:53:54failed so now you might be wondering how
19:53:57do we know which URL paths are supported
19:54:00and which are
19:54:02not so there's actually no way to figure
19:54:05out all the URL paths that are supported
19:54:08and this is for security reasons
19:54:11however some backends do provide a
19:54:13documentation page that lists the URL
19:54:16paths that are supported and also what
19:54:18kind of response that they give for my
19:54:21backend I created a documentation page
19:54:24and we're going to take a look at that
19:54:27so we'll open the
19:54:28browser and at the top we're going to
19:54:30create a new
19:54:32tab and to see the documentation for my
19:54:35backend we're going to go to super
19:54:39simple back back end dodev SL
19:54:44documentation and press
19:54:49enter so this is the documentation page
19:54:52for my backend it gives us a list of
19:54:55which URL paths that are supported and
19:54:58what each URL path does so when we make
19:55:01a request to slash it will give us this
19:55:04message which we saw earlier if we make
19:55:07a request to/ hello it will give us this
19:55:10message which we also saw
19:55:14earlier so by the way the list of all
19:55:17the URL paths that are supported is
19:55:20called the backend
19:55:23API API means application programming
19:55:27interface interface means how we
19:55:29interact with something so this list of
19:55:33URL paths are all the ways that we can
19:55:35interact with the backend and that's why
19:55:38we call this the backend
19:55:43API next the backend can respond with
19:55:46different types of data so one type of
19:55:50data the back end can respond with is
19:55:53text for example when we sent the
19:55:56request to get/ hello it gave us some
19:56:00text
19:56:01back so in our
19:56:03code if we change this URL path to
19:56:08/hello
19:56:10and
19:56:11save and we open the
19:56:15console and click the console
19:56:18tab it gives us back some
19:56:21text we can also see what type of
19:56:23response that we got using the network
19:56:26tab so we'll open the network Tab and
19:56:29then search for the
19:56:31request and then here when we click
19:56:34it inside the headers tab if we scroll
19:56:38down to the response
19:56:40section here it will give us the content
19:56:44type or the type of response that we got
19:56:47back so in this example /hello gave us
19:56:50some text and the type is text
19:56:55slpl another type of data the backend
19:56:57can respond with is
19:57:00Json so if we go back to our code and
19:57:04change the url path to products
19:57:08slir and
19:57:11save and then look at our
19:57:15console in the network tab we'll open
19:57:18this request and inside the headers if
19:57:21we scroll
19:57:23down it will tell us that the type of
19:57:26the response is application SL
19:57:30Json so the backend sent us back some
19:57:33Json if we open the console tab we can
19:57:37see the Json string here
19:57:41so once we get this Json from the
19:57:43backend we can use json.parse to convert
19:57:47this back into a JavaScript
19:57:50object basically this allows us to send
19:57:53JavaScript objects across the internet
19:57:56to the back
19:57:58end another type of data the back end
19:58:01can respond with is
19:58:05HTML we'll go back to our
19:58:07code and we'll change the URL path to
19:58:14documentation so this was the
19:58:16documentation page that we saw earlier
19:58:19if we
19:58:21save and then open the
19:58:25console you'll see that the back end
19:58:27responded with a bunch of
19:58:29HTML if we look at the network Tab and
19:58:33search for the request and open the
19:58:36request here and in the headers tab we
19:58:39scroll down
19:58:40to the content type it will tell us that
19:58:43the type of the response was text/html
19:58:50finally another type of data the backend
19:58:53can respond with is an
19:58:56image for example we'll go back to our
19:58:59code and change the url path to
19:59:06imagesapple
19:59:08jpg and say
19:59:11save and we'll open the
19:59:13console and in the network tab we can
19:59:17open this
19:59:19request and in the headers tab we can
19:59:22scroll down and it will tell us that the
19:59:25type of response was an
19:59:29image/jpeg as you can see the backend
19:59:32can respond with different types of data
19:59:35not just
19:59:38text okay so we got this image back from
19:59:42the back end but what does this look
19:59:44like in the console we'll open the
19:59:48console and we'll see that we just get a
19:59:50bunch of random characters here and
19:59:53that's because the console is trying to
19:59:54display the image as text but the image
19:59:57is not really
19:59:58text this is the image's raw data so
20:00:02that's why it shows all these random
20:00:03characters
20:00:05here however it would be better to
20:00:08display this as an actual ual image
20:00:11instead of raw
20:00:12data we can display this as an image by
20:00:16using the
20:00:17browser so if we open the
20:00:20browser when we type a URL at the top of
20:00:24the browser it actually sends a get
20:00:27request to that
20:00:30URL so typing in here actually does the
20:00:33same thing as our code it makes a get
20:00:37request the one big difference is that
20:00:40that in the browser when it gets back
20:00:42the response it will display the
20:00:44response on the
20:00:46page for example if we enter superimple
20:00:50backend dodev and change the url path to
20:00:54just nothing or slash and press
20:00:59enter this actually sends a get request
20:01:02to my back end the backend responds with
20:01:06some text and it displays this response
20:01:09on the
20:01:11page so using the browser is the same
20:01:14thing as making a get
20:01:18request now the cool thing about this is
20:01:21that if the browser gets back an image
20:01:23it will display it as an actual image
20:01:26instead of raw data that we saw in the
20:01:29console so here if we change the url
20:01:32path
20:01:33to/ images
20:01:36slapple jpg and press enter
20:01:41it will get back the same image as
20:01:43before except the browser will display
20:01:46it as an actual image on the
20:01:50page same thing happens with the backend
20:01:52responds with
20:01:54HTML so at the Top If we change the url
20:01:58path to slash
20:02:01documentation and press
20:02:05enter if the response from the back end
20:02:07is HTML theow browser will display this
20:02:11HTML as an actual web page instead of
20:02:14raw
20:02:16HTML so again using the browser is the
20:02:19same thing as making a get
20:02:22request and depending on the type of
20:02:25response the browser can display the
20:02:27response in a more useful way on the
20:02:31page and that's it we learn the basics
20:02:34of how a backend Works how to send
20:02:36requests to a backend and how to send
20:02:39requests to different different URL
20:02:41paths so now let's go back into our
20:02:44code and we'll remove this URL path and
20:02:49just dodev so that we don't keep console
20:02:52logging and image and then
20:02:56save and let's save this practice code
20:02:58into git we'll open the kit
20:03:03section in backend practice we learn how
20:03:06to make requests to the backend and in
20:03:09checkout. as we loaded that backend
20:03:12practice
20:03:13file so let's type a message describing
20:03:16our
20:03:17changes add backend
20:03:21practice file and
20:03:31commit now that we learned what a
20:03:33backend is and how to communicate with a
20:03:35backend let's use a backend in our
20:03:38project
20:03:40so first we're going to open our code
20:03:43and we're actually going to open
20:03:44checkout.
20:03:46JS and we're going to comment out this
20:03:48import statement because we're not going
20:03:50to run the practice file anymore so
20:03:53we'll type double slash to comment that
20:03:55out and
20:03:59save next super simple backend dodev has
20:04:03a URL path called slash
20:04:06products this gives us a list of all the
20:04:09products in the Amazon Project so first
20:04:12let's open our browser and visit this
20:04:16URL path to see what the response looks
20:04:19like we'll open this tab to super simple
20:04:23backend dodev and we're going to change
20:04:26the url path at the end to slash
20:04:30products and press
20:04:33enter and you can see that this URL path
20:04:37gives us a Json response so this
20:04:40contains all the details of the products
20:04:43for our
20:04:45project now instead of using a file on
20:04:48our computer to load the products let's
20:04:50use the backend to load the
20:04:54products so let's go back into our
20:04:58code and on the left we're going to open
20:05:01data/ products.
20:05:05JS and we're going to scroll down to the
20:05:08array of prodct S at the end so now
20:05:12instead of loading the products from
20:05:13this file we're going to load the
20:05:15products from the back end so first
20:05:18let's comment out all this code if you
20:05:21need to you can click this arrow on the
20:05:23left to collapse this array and we're
20:05:26going to comment this out using slash
20:05:29star and at the end star
20:05:32slash and above this we're going to load
20:05:36the products from the back end
20:05:39first let's create a variable to save
20:05:41the products again so we use let
20:05:45products equal and empty array and let's
20:05:49export this so we can use it outside of
20:05:52this file like before at the front we'll
20:05:55type
20:05:58export next let's create a function to
20:06:01load these products from the back end
20:06:04we'll create a
20:06:06function and let's name it load products
20:06:10brackets and curly
20:06:14brackets and inside here we're going to
20:06:16create an XML HTTP request again to make
20:06:20a request to my
20:06:22backend so to create a request we're
20:06:24going to use new in the class XML HTTP
20:06:31request and brackets so this will
20:06:34generate a new request object and let's
20:06:38save this in a variable
20:06:40so at the front we'll use const and
20:06:42we'll name it xhr equals this
20:06:47object next we're going to set up the
20:06:50request using xhr doop and
20:06:56brackets so open takes two parameters
20:06:58the first parameter is the type of
20:07:00request that we want to send in this
20:07:03case the type of request will be the
20:07:05string get
20:07:09and we're going to give open a second
20:07:11parameter which is the URL that we want
20:07:13to send this request to so we'll give it
20:07:16a string and the URL of my backend is
20:07:22https colon slash super simple backend
20:07:30dodev and then we'll add the URL path
20:07:33which is slash
20:07:37products finally we're going to send
20:07:40this request using the code xr. send and
20:07:48brackets so this will create and set up
20:07:51a request and then send it to my backend
20:07:54now remember that do send is
20:07:57asynchronous that means it will just
20:07:59send the request but it will not wait
20:08:02for a response to come
20:08:04back in order to wait for a response
20:08:07above this code we're going to create
20:08:10some new lines and set up an event
20:08:12listener using
20:08:15xr. add event listener and
20:08:21brackets and this takes two parameters
20:08:24the first one is the event we want to
20:08:26listen for in this case it's the string
20:08:29load which means the response has
20:08:32loaded next we're going to give it a
20:08:35second parameter which is a function so
20:08:38brackets Arrow and curly
20:08:40brackets and this is a function that we
20:08:43want to run after the response has
20:08:47loaded so inside here after the response
20:08:51has loaded we can access it using xhr do
20:08:57response for now let's console.log this
20:09:00to see what it looks like so we console.
20:09:04log and brackets
20:09:09finally let's run this function so that
20:09:12we run all this code at the bottom we're
20:09:16going to load products and
20:09:20brackets and
20:09:23save so this will send a request to my
20:09:26backend and then once we get the
20:09:28response it will display it in the
20:09:32console so now let's go to our
20:09:34website we're going to open the project
20:09:37tab
20:09:39and don't worry if the page is blank for
20:09:41you we're going to fix this in a bit for
20:09:44now we're going to open the console by
20:09:46right
20:09:47clicking
20:09:48inspect and open the
20:09:52console and in here you'll see that xr.
20:09:55response gave us this Json and this
20:09:58represents all the products in our
20:10:01Amazon
20:10:05Project now that we have all this Json
20:10:08we're going to convert this back into a
20:10:10JavaScript object and then use it in the
20:10:13rest of our code let's go back to our
20:10:16code and here the response is a
20:10:20Json we're going to convert it back into
20:10:22a JavaScript object or in this case a
20:10:25JavaScript array using the code
20:10:29json. pars and
20:10:34brackets so once we' converted this back
20:10:36to an array we're going to replace the
20:10:38product up here with what we loaded from
20:10:41the back end to do that we'll do
20:10:44products and make it equal to this
20:10:48result that we got from the back
20:10:51end now one more thing we need to do is
20:10:54previously we converted the product
20:10:57objects into a class so we're just going
20:11:00to do that again with this
20:11:03array so we'll select the code from map
20:11:08all the way to the end
20:11:10and then right click
20:11:13copy and
20:11:16here after this products array that we
20:11:19got from the back
20:11:21end right click
20:11:24paste we're also going to transform this
20:11:27array from objects into these
20:11:31classes and at the end let's console.log
20:11:35this products array to see what it looks
20:11:36like now so we'll console
20:11:39. log
20:11:42products and
20:11:45save and now if we open the console for
20:11:48our
20:11:49project you'll see that products is now
20:11:51an array of product classes and clothing
20:11:55classes so we converted the response
20:11:58from a Json into a JavaScript array and
20:12:02then into these
20:12:06classes so that's how we load data from
20:12:09the the back end and then convert it
20:12:11into a JavaScript object or array that
20:12:14we can use in our
20:12:18code next let's go back to our code and
20:12:22instead of console. loging the products
20:12:24every time which will display a lot of
20:12:26stuff in the console let's just
20:12:28console.log a message to make sure that
20:12:31this is working so we'll change this to
20:12:33the string load products
20:12:40and now that we have this function let's
20:12:42use it in each of our
20:12:45Pages first we're going to remove
20:12:48calling this function for now and we're
20:12:51going to export this function so we can
20:12:53use it outside of this file so
20:12:57export and save this
20:13:01file and we're going to start from the
20:13:05homepage so we'll scroll down to the
20:13:07bottom to amazon.
20:13:11JS and we're going to scroll to the
20:13:15top and first we're going to import load
20:13:19products we're already importing from
20:13:21products. JS so we'll just add a comma
20:13:25and load
20:13:28products and now before we run all of
20:13:31this code at the top we're going to load
20:13:35the products first and brackets
20:13:40so now let's
20:13:42save and open the project in our
20:13:46browser and we'll click the top left
20:13:48icon to go to the
20:13:51homepage and you'll see that the
20:13:53homepage is actually empty so what went
20:13:55wrong
20:13:57here remember that HTTP requests are
20:14:01asynchronous if we go back into our
20:14:04code load products will send a request
20:14:08to my backend
20:14:09but it takes time for the request to
20:14:11travel across the internet to my backend
20:14:15and to travel
20:14:17back so here it will just send the
20:14:20request and at the next line the
20:14:22response has not loaded yet so the
20:14:26products array is still
20:14:28empty and when we run this code with an
20:14:30empty array the page will be
20:14:35empty to solve this problem we need to
20:14:38wait for this HTTP request to finish
20:14:41first and for the response to come back
20:14:44and then we're going to run the rest of
20:14:46this
20:14:47code so how do we do
20:14:49that so we're going to go to the left
20:14:52and we're going to scroll up to data/
20:14:55products.
20:14:56JS and I'm going to drag this file to
20:14:59the top so we can see the code side by
20:15:03side and I'll scroll down to the HTTP
20:15:07request
20:15:10which is right
20:15:13here and remember that we used an event
20:15:16listener to wait for the response to
20:15:18come back once the response is loaded
20:15:21we're going to run this
20:15:24function so basically we want to run all
20:15:27of this code at the bottom of this event
20:15:31listener so after we've loaded our
20:15:36products so one way to solve this
20:15:38problem is maybe we can just copy all
20:15:41this code and then paste it at the
20:15:43bottom
20:15:45here now obviously this doesn't make
20:15:47sense because we're copy pasting a bunch
20:15:50of code and then we can't really reuse
20:15:52this
20:15:54function a better solution is we're
20:15:57going to put all this code in a
20:16:00function and then we can give this
20:16:03function to load products let's do this
20:16:06step by step
20:16:09so first at the top let's create a
20:16:11function to group all of this code
20:16:14together we'll use the word
20:16:17function and let's name it render
20:16:21products grid brackets and curly
20:16:26brackets and now we're going to move all
20:16:28of this code into the
20:16:30function so we can do that by removing
20:16:33this closing curly
20:16:36bracket and then at the bottom we we're
20:16:38going to scroll down all the way to the
20:16:41bottom here we're going to add back the
20:16:44closing curler bracket to put all this
20:16:47code inside the function and now let's
20:16:50also select this code so we can fix the
20:16:53index so we'll select it all the way up
20:16:57to
20:16:58here and then press tab to add an indet
20:17:03so now we put all the code inside render
20:17:06products grid
20:17:09next we're going to put this function
20:17:12inside load products using a parameter
20:17:17so between these brackets we're going to
20:17:19give it this
20:17:20function
20:17:22render products
20:17:26grid so remember in JavaScript functions
20:17:29are values and we can use a function as
20:17:32a
20:17:33parameter so now inside load products if
20:17:36we go up here at the top this function
20:17:41will be saved in a parameter so let's
20:17:44create a parameter at the top and we'll
20:17:46name it fun to say that this parameter
20:17:50will contain a
20:17:53function so we basically saved this
20:17:56function inside this parameter and now
20:18:00after we load the response we're going
20:18:02to run the
20:18:05function so at the bottom here after
20:18:08we've created the products array we're
20:18:11going to run font and
20:18:16brackets so that's how we run all of
20:18:19this code after we've loaded the
20:18:22products we group this code into a
20:18:25function and then we save the function
20:18:27up here after we load the response we're
20:18:31going to run the
20:18:34function so let's save these two files
20:18:37we'll save products. Js
20:18:40and then down here we'll save amazon.
20:18:43JS and then open our
20:18:45website and you'll see that the products
20:18:48loaded again because this time we're
20:18:50waiting for the response to come back
20:18:53and then we run our
20:18:56code so that's how we wait for an HTTP
20:19:00request to finish first and then we run
20:19:04some
20:19:07code by the the way this function that
20:19:10we provide to load products this is
20:19:13known as a call back because we're
20:19:17giving it a function to run in the
20:19:19future or to call in the future so this
20:19:22function will be called back in the
20:19:27future and we've actually used call
20:19:30backs before when we wrote the code set
20:19:33timeout we provided set timeout a
20:19:36function to run in the future or or to
20:19:38call in the future so this function is
20:19:42also known as a call
20:19:44back don't worry if this technique is a
20:19:47little complicated at first the more you
20:19:50work with callbacks the more you'll get
20:19:52used to
20:19:54it let's get some more practice and use
20:19:57the backend and callbacks on the
20:19:59checkout page so we're going to open
20:20:02checkout. JS which is the checkout page
20:20:07and first we're going to in import load
20:20:09products so at the top we'll create an
20:20:13import curly brackets load
20:20:18products from a
20:20:21string and we'll locate products. JS so
20:20:25inside here we're in the scripts folder
20:20:28we're going to get out of it using do do
20:20:30slash and then we're going to go into
20:20:32the data
20:20:35folder and then we'll add slash data
20:20:39slash and we'll load products.
20:20:45JS and then down here we're also going
20:20:49to load products and
20:20:54brackets and again we're going to give
20:20:56load products a call back or a function
20:20:59that we want to run in the
20:21:02future this time instead of creating a
20:21:05whole new function we're just going to
20:21:07create a function in inside these
20:21:09brackets using brackets arrow and curly
20:21:15brackets so we don't need to create a
20:21:17function name every time we can also
20:21:20just create an anonymous function or a
20:21:23function without a
20:21:25name and then give this to load products
20:21:28to run in the
20:21:29future now inside this Anonymous
20:21:32function we're just going to move this
20:21:34code into here so we'll select this code
20:21:38and then rightclick
20:21:41cut and then inside here we're going to
20:21:44rightclick and
20:21:47paste and if you need to you can fix the
20:21:52formatting so again this is going to
20:21:55save this function inside the parameter
20:21:59fun and then we're going to call fun
20:22:02after we've loaded all the
20:22:05products so let's save this file
20:22:09and open our
20:22:10website and we'll click the cart in the
20:22:13top right to go to the checkout page and
20:22:16now the checkout page is loading
20:22:20again so that's how we use a backend in
20:22:23our project we need to send a request
20:22:27and then use a call back to wait for a
20:22:31response and then run the rest of our
20:22:35code so now let's save our changes into
20:22:38G
20:22:39we'll go to the git
20:22:41section and in products.
20:22:49JS we created the load products
20:22:54function in amazon.
20:22:56JS we used load products and gave it a
20:23:00call
20:23:01back and in checkout. JS we also used
20:23:06load products and we gave it a call back
20:23:09using an anonymous function or a
20:23:11function without a
20:23:13name let's create a message describing
20:23:16our
20:23:18changes load products from the backend
20:23:25and
20:23:30commit next we're going to learn testing
20:23:34with a
20:23:36backend now that we're using a back back
20:23:38end in our code we need to update our
20:23:41tests first let's go to our code and
20:23:45we're going to run our tests so we'll
20:23:47scroll to the bottom and if you don't
20:23:50have the tests open we can run them by
20:23:52right clicking test.html and then click
20:23:56open with live server now I already have
20:23:59the test open in my browser so I'm just
20:24:02going to open that
20:24:04Tab and for the video I'll zoom in using
20:24:07control equals or command
20:24:10equals and we have some failing tests
20:24:13now so if you did the exercises from the
20:24:16previous few lessons you might have more
20:24:18than two failing tests but we're going
20:24:20to focus on fixing these two tests here
20:24:23for the
20:24:25video so first let's open the code for
20:24:28our order summary tests we'll open vs
20:24:31code and then on the left we're going to
20:24:34go into the test folder SL checkout SL
20:24:37Ord summary
20:24:42test.js so now we're going to scroll
20:24:44down in this test and notice that here
20:24:48we are rendering the order summary which
20:24:51creates the cart on the checkout
20:24:55page however this card requires the
20:24:58products to be loaded from the back end
20:25:01and currently we're not loading the
20:25:03products in our tests so that's why the
20:25:06tests are failing we need to to load the
20:25:09products
20:25:11first to do that let's import the load
20:25:14products function at the top so we'll
20:25:17scroll
20:25:18up and we're going to add another
20:25:21import curly brackets the load products
20:25:26function from a string and we'll locate
20:25:30products. JS so we need to get out of
20:25:33checkout and out of tests using do do
20:25:36slash do do slash and and then we'll go
20:25:38into the data folder data/ and load
20:25:43products.
20:25:46JS and now we could call load products
20:25:50inside before each but this will load
20:25:53the products before each of our tests so
20:25:55it will load it multiple times and we
20:25:58don't really need to do this we only
20:26:00need to load the products once for all
20:26:02of our
20:26:04tests to do that we're going to use
20:26:07another hook provided by Jasmine called
20:26:11before
20:26:13all so above before
20:26:15each we're going to use the function
20:26:18before all and
20:26:23brackets so this is the before all hook
20:26:26it will run a function before all of our
20:26:30tests inside these brackets we're going
20:26:32to give it a function to run so brackets
20:26:35arrow and curly brackets
20:26:39and now before all of our tests we're
20:26:42going to load the products so let's load
20:26:46products and
20:26:49brackets and
20:26:52save and now let's open our tests in the
20:26:55browser and unfortunately the tests are
20:26:58still
20:27:00failing let's go back to our code and
20:27:02see what the problem is we'll open vs
20:27:06code and here
20:27:09remember that load products is
20:27:12asynchronous that means it just sends a
20:27:14request to my back end but it doesn't
20:27:17wait for the response to come back so it
20:27:20would just send a request and then
20:27:22continue with the rest of the test
20:27:25code and unfortunately at this point the
20:27:28response has not come back yet products
20:27:31is still an empty
20:27:34array to fix this issue we need to wait
20:27:37for a load products to finish first and
20:27:40then continue with the rest of the
20:27:44test to do that Jasmine has a feature
20:27:48for waiting for some code to finish
20:27:50called a done
20:27:53function so in before all we can give
20:27:56this inner Function One parameter called
20:28:02done so done is a function and it's
20:28:05provided by Jasmine when we we add this
20:28:09done parameter before all will not
20:28:12automatically go to the next step now
20:28:15it's just going to wait and it will only
20:28:18go to the next step when we call this
20:28:20done function so when we do done and
20:28:24brackets then it will go to the next
20:28:28step if we don't call done then before
20:28:31all we'll just keep waiting forever so
20:28:34this done function allows us to control
20:28:38exactly when before all finishes and
20:28:40goes to the next
20:28:43step and this is what we need to fix the
20:28:46test we need to wait for load products
20:28:48to finish first and then we're going to
20:28:51call done and then go to the next
20:28:56step to wait for load products to finish
20:29:00remember we're going to give it a
20:29:02function so between these brackets we'll
20:29:04create a function using brackets Arrow
20:29:08and curly
20:29:10brackets now once the products have
20:29:13finished loading it will run the
20:29:15function inside here we're going to call
20:29:19done and
20:29:22brackets so this makes sure that the
20:29:24products load first and then we call
20:29:26done and then it goes to the next step
20:29:30which is the before each hook and then
20:29:32eventually it runs the tests at the
20:29:35bottom
20:29:38so now let's
20:29:40save and take a look at our test page
20:29:43and you'll see that those order summary
20:29:45tests are now passing if you have any
20:29:48other fail tests I'll leave that as an
20:29:52exercise let's go back to our
20:29:56code and that's how we test with a
20:30:00backend we wait until the backend code
20:30:03is finished and then we use the done
20:30:05function to control exactly when to go
20:30:08to the next step by the way we can also
20:30:12use done inside before each and inside
20:30:15it as well to wait for backend code to
20:30:20finish now let's save our changes into
20:30:23git we'll open the get section and
20:30:26inside order summary test we imported
20:30:28load products and then we called load
20:30:31products and use the done function to
20:30:34make sure that the products are loaded
20:30:36first and then we go to The Next
20:30:39Step let's create a message describing
20:30:42our
20:30:43changes load products in before all hook
20:30:51and
20:30:58commit next we're going to learn
20:31:01promises which are a better way to
20:31:03handle asynchronous code promises are
20:31:06similar to Jasmine done function that we
20:31:09just learned they let us wait for some
20:31:12asynchronous code to finish before going
20:31:14to the next
20:31:18step so now let's create our first
20:31:22promise we're going to open our code and
20:31:25on the left we're going to go to
20:31:27checkout.
20:31:31JS and in here at the top we're going to
20:31:35practice promises
20:31:38promise is a class so we're going to
20:31:40type the code new capital P promise and
20:31:46brackets to create a new promise
20:31:49object now inside these brackets we're
20:31:52going to give it a function so brackets
20:31:55arrow and curly
20:31:58brackets so that's just how promises are
20:32:01designed it's a built-in class and when
20:32:04we create a promise we need to give it a
20:32:06function
20:32:10so when we create This Promise it's
20:32:12going to run this function
20:32:16immediately so inside here let's
20:32:21console.log the string
20:32:23promise to show that it runs
20:32:27immediately so we'll save this
20:32:30file and then go to the
20:32:32website and we'll open the tab for our
20:32:35project
20:32:38and I'm going to zoom out a bit by
20:32:39pressing control or command
20:32:43minus and then open the console right
20:32:46click
20:32:48inspect and the
20:32:51console and you'll see a logged
20:32:55promise so when we create a promise it
20:32:59runs this inner function
20:33:03immediately now this inner function gets
20:33:06a parameter called called
20:33:09resolve and resolve is a function and it
20:33:13works very similar to Jasmine's done
20:33:16function so resolve lets us control when
20:33:19to go to the next
20:33:23step for example let's add some
20:33:26asynchronous code into this
20:33:29promise we'll remove the
20:33:32console.log and we're going to run load
20:33:34products which is asynchronous
20:33:37so here we'll type load products and
20:33:43brackets and now we're going to give
20:33:45load products a callback function like
20:33:48we did down
20:33:50here brackets arrow and curly
20:33:54brackets so it will run this function
20:33:57after load products is
20:34:00finished once this is finished we want
20:34:02to go to the next step so here we're
20:34:05going to call resolve so resolve and
20:34:11brackets so you can see that the syntax
20:34:13here is very similar to jasmin's done
20:34:16function we run some asynchronous code
20:34:19and then we wait for it to finish and
20:34:21then we call resolve to go to the next
20:34:26step now what is the next step to This
20:34:31Promise so you might think that this
20:34:33code down here is the next
20:34:36step however a promise actually creates
20:34:39a separate line of code or a separate
20:34:42thread of
20:34:44code so here these two groups of code
20:34:48are sort of running at the same time
20:34:51feel free to pause the video to get a
20:34:52longer look at this
20:34:55diagram the reason promises are designed
20:34:58this way is it allows JavaScript to do
20:35:01multiple things at the same
20:35:04time so when the promise finishes it can
20:35:08do a Next Step but this next step is
20:35:11going to be separate from the rest of
20:35:13the code it sort of does the next step
20:35:17on the
20:35:19side so right now this promise creates a
20:35:23separate thread of code but this
20:35:26separate thread doesn't actually have a
20:35:28next step so we're going to add
20:35:33one to add a next step to a promise at
20:35:37the end and we're going to use a method
20:35:39called dot then and
20:35:44brackets and we need to give then a
20:35:47function so we're going to type brackets
20:35:50arrow and Cur
20:35:52brackets and inside here let's just
20:35:56console.log the string Next
20:36:01Step so first we run this asynchronous
20:36:05code and then we wait for it to finish
20:36:08and then we run resolve and resolve
20:36:11makes it go to the next
20:36:14step to make this easier to see in the
20:36:16console let's actually add some console.
20:36:19logs to track the progress of this code
20:36:23so at the top let's
20:36:26console.log the string start
20:36:30promise and then in here let's
20:36:35console.log the string
20:36:38finished
20:36:40loading and we'll also comment out the
20:36:43code that we had
20:36:45before so we'll type
20:36:48slashstar and at the bottom star slash
20:36:52and now let's
20:36:54save and check our
20:37:00console so let's go through this step by
20:37:03step first we start the promise which we
20:37:06see here
20:37:07and then we call load products which we
20:37:10see here once the products are finished
20:37:13loading it's going to run this function
20:37:16and then we'll display finish loading
20:37:19and then we're going to call resolve
20:37:21which goes to the next step which runs
20:37:24this function and we display Next
20:37:28Step so resolve lets us control when to
20:37:32go to the next
20:37:33step in this case we waited until load
20:37:37product prods was finished and then we
20:37:39called resolve to go to the next
20:37:42step so that's how promises work they
20:37:46let us split our code into separate
20:37:48steps and then we can wait for one step
20:37:51to finish before going to the next
20:37:56step now that we understand promises
20:37:59let's convert the code that we had
20:38:01before from a call back to using a
20:38:06promise so first let's remove these
20:38:08console. logs to make our code a little
20:38:11easier to
20:38:15read now in our previous code we
20:38:18actually had two steps the first step is
20:38:21to call load products and then once this
20:38:25is finished the second step is to call
20:38:28render order summary and render payment
20:38:31summary and in our promise we have the
20:38:34same thing our first step is load
20:38:37product
20:38:38once this is finished we're going to
20:38:40call resolve and then go to the Second
20:38:42Step so we're just going to copy this
20:38:45second step into the second step up here
20:38:49so we'll select this code and then right
20:38:52click
20:38:54copy and in do then we're going to right
20:38:58click and
20:39:04paste and now let's save
20:39:08and let's check the web page so we'll
20:39:10open the project and you can see that
20:39:13everything is loading
20:39:18correctly So This Promise does the same
20:39:20thing as a call back that we had before
20:39:23both of them have two steps the first
20:39:25step is to load the products and then we
20:39:29wait for the products to finish loading
20:39:32and then we do the Second Step which is
20:39:34to render the page
20:39:40so now you might be wondering why do we
20:39:42use promises it looks like it's more
20:39:45work and more code than just using a
20:39:48callback so callbacks have a big problem
20:39:51which is multiple callbacks cause a lot
20:39:54of
20:39:57nesting nesting means having code inside
20:40:00code like
20:40:02this to see why this is a problem let's
20:40:05say that we want to load the cart from
20:40:08the back end as well I actually set up a
20:40:11URL path that we can use to practice
20:40:14called SLC
20:40:17cart so first let's go into products.
20:40:21JS and we're going to copy load products
20:40:24and change it to load the
20:40:27cart so we'll select this
20:40:30function and then
20:40:32rightclick
20:40:34copy and let's open cart. Js
20:40:38since we're going to load the cart from
20:40:39the back end and let's scroll down to
20:40:42the
20:40:46bottom and here we'll right click and
20:40:50paste that
20:40:53code and now instead of loading the
20:40:56products let's load the cart from the
20:40:59backend so first let's rename this
20:41:01function to load Capital C cart
20:41:07and the first thing we need to change is
20:41:08the URL path so instead of loading SL
20:41:12products we're going to load slash cart
20:41:15from my
20:41:16backend so normally when we load SL cart
20:41:20the backend will give us a cart
20:41:23array however since we're just
20:41:25practicing my backend will just give us
20:41:28some text when we load SL
20:41:33cart next we don't need this products
20:41:36code anymore so we can select it and
20:41:40then delete
20:41:41it and instead let's just console. log
20:41:48brackets and we just display the
20:41:50response that we get back xhr do
20:41:56response and we can remove this other
20:42:00console.log and
20:42:05save so now let's use load cart in our
20:42:08previous
20:42:10example on the left we'll scroll down
20:42:13and open checkout.
20:42:15JS and at the top let's import load cart
20:42:20so here we'll import curly brackets load
20:42:25cart from a string and we'll go to the
20:42:29data folder which is do
20:42:32dotdata slash and we'll load C.J
20:42:40and now we're going to use this in our
20:42:42callback code to show the problem with
20:42:46callbacks first let's comment out this
20:42:49promise so we can focus on the Callback
20:42:54code at the top we'll type
20:42:57slashstar and here star
20:43:00slash and we'll remove the comments for
20:43:03the
20:43:05Callback and after we load the products
20:43:08we're also going to load the
20:43:10cart so inside this function we're going
20:43:13to type load cart brackets and we're
20:43:17going to give it a
20:43:22function so this function is going to
20:43:24run after the cart has
20:43:27loaded so now let's say that we want to
20:43:29wait for the products and the cart to
20:43:32load before we render the
20:43:35page to do that we need to move this
20:43:38code inside this inner
20:43:42function so we'll select this and then
20:43:45right click
20:43:47cut inside load cart we're going to
20:43:50right click and
20:43:52paste and remove this extra
20:43:56line so now this code is going to load
20:43:59the products wait for it to finish and
20:44:02then it's going to load the cart and
20:44:05then wait for the cart to finish
20:44:07and then it will render the page or
20:44:09display the page so let's
20:44:13save and check the
20:44:16console and now you can see that we
20:44:19loaded the products and then we loaded
20:44:22the cart and if we open the
20:44:25page everything was displayed
20:44:29properly so now let's go back to our
20:44:32code and notice that when we added
20:44:35another call back we we created another
20:44:38layer of
20:44:39nesting so we have code inside code
20:44:43inside
20:44:45code the problem with this is that each
20:44:48layer of nesting adds some indents at
20:44:51the front or spaces at the
20:44:54front this means if we have lots of
20:44:57callbacks our code will become more and
20:45:00more nested like
20:45:02this this is a big problem with
20:45:05callbacks multi multiple callbacks cause
20:45:08a lot of nesting and all these indents
20:45:11make our code hard to work
20:45:16with the promises solve this problem by
20:45:20letting us flatten our
20:45:23code for example let's load the products
20:45:27and the carts again but this time using
20:45:29our promise
20:45:31instead first let's comment out the
20:45:33Callback using
20:45:35slashstar and and at the bottom star
20:45:38slash and we're going to uncomment the
20:45:41promise so here we'll remove the
20:45:48comments and then in the next
20:45:51step instead of rendering the
20:45:54page we're going to load the cart like
20:45:58we did down here so we'll type load cart
20:46:03and
20:46:05brackets now we have a problem here we
20:46:08want to wait for load card to finish and
20:46:11then go to the next step however we
20:46:15usually do this using resolve but we
20:46:17don't have resolve inside this
20:46:21function to solve this problem inside.
20:46:25then we can actually return a new
20:46:28promise so at the top we're going to
20:46:32return a new promise and
20:46:38brackets so we're going to give this
20:46:40promise a function just like we did up
20:46:45here so we'll type brackets arrow and
20:46:48curly
20:46:49brackets and this function gets one
20:46:52parameter called
20:46:56resolve so inside do then if we want to
20:47:00use resolve to wait for some code to
20:47:03finish we can return a new promise
20:47:09so now let's move our code into this new
20:47:11promise so we can use resolve so we'll
20:47:14select this code and then right click
20:47:19cut and inside here we're going to right
20:47:23click and
20:47:25paste and remove these new
20:47:28lines and we can give load card a
20:47:31function to run when it's finished so
20:47:34we'll type brackets arrow and and curler
20:47:38brackets once load card is finished it
20:47:41runs this function and then inside here
20:47:44we're going to call resolve so that we
20:47:47move to the next step so here we'll call
20:47:52resolve and
20:47:55brackets so now this will go to the next
20:47:59step and we currently don't have a next
20:48:01step to This Promise so let's add The
20:48:04Next Step at the end to add another step
20:48:09we're going to use dot then
20:48:12brackets and we'll give this a function
20:48:16brackets arrow and curler
20:48:20brackets so the third step is to render
20:48:24the page so we're going to do the same
20:48:26thing inside
20:48:29here so let's select this code and we'll
20:48:33rightclick copy
20:48:37inside the third step we're going to
20:48:39right click and
20:48:42paste and adjust the formatting if you
20:48:45need
20:48:46to so that's how we do these three steps
20:48:49in the Callback using a
20:48:53promise we do the first step wait for it
20:48:57to finish call resolve and then it goes
20:49:00to the second step we do the Second Step
20:49:03wait for it to finish call resolve and
20:49:06and then we go to the third
20:49:10step so we promise let us have as many
20:49:13steps as we want and we can use resolve
20:49:16to wait for each step to finish before
20:49:19going to the next
20:49:22step so let's save this and check the
20:49:26console to make sure it worked so we'll
20:49:29open the
20:49:30console and inside here we have the same
20:49:33messages as last time first we load the
20:49:37products we wait for it to finish and
20:49:40then go to the next step then we load
20:49:42the
20:49:43cart wait for it to finish and then go
20:49:46to the next step and then we render or
20:49:49display the page if we open the page
20:49:53you'll see that everything displayed
20:49:57properly so now let's go back and
20:49:59compare promises and
20:50:02callbacks so even though promises
20:50:05require a bunch of setup code you can
20:50:08see that it keeps our code relatively
20:50:11flat the third step doesn't get more and
20:50:14more nested like in
20:50:19callbacks so if we have lots of steps in
20:50:22our promise this is what the code will
20:50:24look like you can see that even when we
20:50:27add more steps the code does not become
20:50:31more and more
20:50:32nested so promises help keep our code
20:50:35flat
20:50:37and avoid too much
20:50:39nesting so that's why it's recommended
20:50:42to use promises instead of callbacks
20:50:46promises will keep our code more
20:50:52flat so let's actually add some new
20:50:55lines here as well as
20:50:58here to better separate these steps so
20:51:01it's a little easier to read
20:51:07lastly we're going to learn two more
20:51:09features of
20:51:10promises the first feature is we can
20:51:13give resolve a value so inside here
20:51:17let's give it a value like the string
20:51:21value
20:51:23one so whatever we give to resolve is
20:51:26going to be saved in a parameter inside
20:51:29doth so inside this function we can add
20:51:32a parameter called value
20:51:36and now whatever we give to resolve is
20:51:39going to be saved inside here and now we
20:51:42can use
20:51:43it so this lets us share a value between
20:51:47two steps of a
20:51:50promise so in here let's check if this
20:51:53worked using
20:51:57console.log
20:51:59value and
20:52:01save and if we look inside our
20:52:04console you'll see that it displayed
20:52:07value
20:52:08one so whatever we give to resolve will
20:52:11be saved in this
20:52:15parameter the second feature is we can
20:52:18run multiple Promises at the same time
20:52:22currently we wait for things to load one
20:52:25at a time for example we wait for the
20:52:29products to load and then we wait for
20:52:31the cart to load and then we go to the
20:52:34next step to make this more efficient we
20:52:37can actually load the products and the
20:52:40cart at the same
20:52:42time to do that we can use a feature
20:52:45called
20:52:47promise.all promise.all lets us run
20:52:50multiple Promises at the same time and
20:52:53wait for all of them to
20:52:57finish so let's scroll to the top and
20:53:01we'll do an
20:53:02example so here we'll type the code
20:53:07capital P
20:53:10promise.all and
20:53:13brackets inside these brackets we're
20:53:16going to give this an
20:53:18array inside this array we can give it
20:53:22multiple promises to wait
20:53:25for so let's just copy paste the two
20:53:27promises that we have here into this
20:53:31array so we'll start from here at the
20:53:34end of the first promise and we'll
20:53:36select this code right click
20:53:41copy and in this array we're going to
20:53:44right click and
20:53:48paste and remove this line so we have
20:53:51our first promise and at the end we're
20:53:54going to add a comma and we're going to
20:53:56give it a second promise so we'll scroll
20:53:59down to our second promise here and
20:54:02we're going to select this code starting
20:54:05from here
20:54:06and select the promise right click
20:54:11copy and at the top we're going to right
20:54:15click and
20:54:19paste so we basically created an array
20:54:22of promises and then we're going to give
20:54:25this array to
20:54:26promise.all and it's going to wait for
20:54:29all of the promises to finish before
20:54:31going to the next
20:54:33step so now let's add a next
20:54:36Step at the end to add a Next Step we're
20:54:40going to use dot then and brackets and
20:54:45we'll add a new line to make it a little
20:54:47easier to
20:54:49read so as usual dot then adds a next
20:54:53step to a
20:54:55promise it will give it a function to
20:54:58run so brackets arrow and curling
20:55:03brackets after we load the products and
20:55:06load the cart we're going to render the
20:55:09page so let's copy paste that code
20:55:12inside this next step so we'll scroll
20:55:15down to the render code and we'll select
20:55:19it right click
20:55:22copy and at the top inside then we'll
20:55:26right click and
20:55:30paste so now let's comment out our old
20:55:33promise and try out promise do
20:55:38all above our old promise we're going to
20:55:41type
20:55:42slashstar and below it we're going to
20:55:45type star
20:55:47slash and let's
20:55:51save we'll go to our
20:55:54console and you can see that it did the
20:55:56same thing it loaded the products and it
20:55:59loaded the cart and it's going to wait
20:56:01for both of them to call resolve before
20:56:04going to the next step which is to
20:56:07render or display the page if we open
20:56:10the page you'll see that everything
20:56:12displayed
20:56:14properly so that's
20:56:17promise.all we can give it an array of
20:56:20promises and it will run both of them at
20:56:23the same time instead of waiting for
20:56:25each promise one by
20:56:28one also the values that we give to
20:56:32resolve are saved in a parameter so
20:56:35inside do then we can add a parameter
20:56:38called
20:56:40values and then these values that we
20:56:43give to resolve are going to be saved
20:56:45inside here so if we
20:56:49console.log
20:56:51values and
20:56:53save and check the
20:56:57console and it gives us an array of
20:56:59values the first value is from the first
20:57:03promise and the second value is from the
20:57:06the second promise so here we didn't
20:57:09give anything to resolve so the second
20:57:11value is
20:57:14undefined so that's an overview of
20:57:16promises and
20:57:18promise.all promises are a better way to
20:57:21wait for asynchronous code to finish
20:57:24versus
20:57:26callbacks because they help us avoid
20:57:28nesting and keep our code relatively
20:57:32flat promises also have more features
20:57:35like promise all which lets us run
20:57:38multiple Promises at the same
20:57:41time now let's save our changes into git
20:57:45we're going to open the git
20:57:47section inside cart.
20:57:50JS we added a function to practice
20:57:53loading the cart from the back
20:57:55end and then in checkout.
20:57:58JS we learn a promises and converted our
20:58:02code from a callback to a promise
20:58:06let's type a message describing our
20:58:09changes learn
20:58:12promises and convert code to promises
20:58:19and
20:58:26commit now that we learned promises
20:58:29we're going to learn another feature
20:58:30called
20:58:32fetch fetch is a better way to make htd
20:58:36PP
20:58:39requests let's go back to our
20:58:41code and we're going to open products.
20:58:45JS and we're going to scroll down to the
20:58:48load products
20:58:50function currently we're using XML HTTP
20:58:54request to make requests to the back end
20:58:58and this uses a call
20:59:00back fetch also lets us make requests to
20:59:04the backend but fetch uses a
20:59:08promise so let's do an example and we'll
20:59:11make the same request except using fetch
20:59:14this
20:59:15time we'll scroll up and above load
20:59:19products let's create another function
20:59:22using
20:59:23function and we'll name it load products
20:59:29Fetch and brackets and curly
20:59:33brackets and to use fetch we're going to
20:59:36use the built-in function Fetch and
20:59:41brackets so this makes an HTTP request
20:59:45just like we did down here so let's make
20:59:48the same request as we did in this
20:59:53function at the bottom we made a get
20:59:56request to this
20:59:59URL so by default fetch will make a get
21:00:03request so we just need to give it the
21:00:05the URL that we want to make the request
21:00:09to so at the bottom let's select this
21:00:13URL and we're just going to
21:00:16rightclick
21:00:18copy and at the top inside fetch we're
21:00:22going to right click and
21:00:26paste so this will make the exact same
21:00:28request as we did
21:00:31below so you can see that fetch is a lot
21:00:34more simple than XML HTTP request we
21:00:38don't have to create a new object or do
21:00:41any setup we can just call Fetch and
21:00:44tell it where we want the request to
21:00:48go so this will send a request to the
21:00:51back end and now how do we get the
21:00:54response so instead of using a call back
21:00:57to get the response fetch uses a
21:01:01promise when we call fetch this is going
21:01:05to create a promise and we can add a
21:01:08next step to This Promise using dot then
21:01:13and
21:01:14brackets so we'll give dot then a
21:01:17function brackets arrow and curly
21:01:22brackets so the way this works is that
21:01:24fetch is going to send a request to the
21:01:26backend when we get a response it's
21:01:29going to go to the next
21:01:32step it's also going to save the
21:01:34response inside inside a parameter in
21:01:37here so we'll add a parameter called
21:01:41response and this will contain the
21:01:43response from the back
21:01:45end so instead of using a call back to
21:01:49wait for the response fetch uses a
21:01:52promise to wait for the
21:01:54response so here let's
21:01:58console.log the response to see what it
21:02:00looks
21:02:03like and now let's run this code
21:02:06at the
21:02:07bottom we'll run this function using
21:02:11load products Fetch and
21:02:15brackets so now let's
21:02:18save and take a look at the
21:02:22console so here's the response that we
21:02:25get from Fetch if we open it you can see
21:02:29it gives us a bunch of information about
21:02:31the response like the status or whether
21:02:34it succeeded or
21:02:36failed as well as the URL that we made
21:02:39the request
21:02:41to so how do we get the data for the
21:02:44products from this
21:02:46response to do that we'll go back to our
21:02:50code and to get data that's attached to
21:02:53this
21:02:54response we're going to use
21:02:58response. Json and
21:03:02brackets so this gives us the Json or
21:03:05the data attached to the response in
21:03:08this case it's our products
21:03:12data next response. Jon is actually
21:03:17asynchronous it returns a
21:03:20promise so we need to wait for this
21:03:23promise to finish before we continue to
21:03:25the next
21:03:28step to do that inside. then we can
21:03:32actually return another promise so here
21:03:36we're going to return this
21:03:40promise when we return a promise it will
21:03:44wait for this promise to finish before
21:03:46going to the next
21:03:48step so now let's add another step to
21:03:51This Promise using dot then brackets and
21:03:56we'll give this a function again so
21:03:59brackets arrow and curly
21:04:03brackets when response. Json finishes
21:04:06it's going to give us the data that's
21:04:08attached to the response and it's going
21:04:10to save it inside this
21:04:14parameter so this response should
21:04:16contain our products data so let's name
21:04:19this
21:04:20parameter products data and let's
21:04:24console.log this to see what it looks
21:04:26like so here we
21:04:29console. log the
21:04:32products
21:04:34data and and
21:04:36save and let's open the
21:04:40console and you see here that the
21:04:43products data is the array of products
21:04:46that we're going to use in our Amazon
21:04:49Project you'll also notice that instead
21:04:52of giving us just a big Json string like
21:04:55before it actually converted the Json
21:04:58into an array so basically it did json.
21:05:02pars on the response for us so this this
21:05:05saved us a little bit of
21:05:08code finally now that we have the
21:05:10products array let's do the same thing
21:05:13that we did down here so we'll scroll
21:05:16down and select all of this
21:05:19code and we'll right
21:05:21click
21:05:23copy and then up
21:05:26here we'll remove
21:05:28this and rightclick and
21:05:32paste so we'll do the same steps as
21:05:35before
21:05:36except using a promise this
21:05:38time first instead of doing json. pars
21:05:42on the response we already have the
21:05:44array of products so we can remove this
21:05:49and replace it with products
21:05:53data and then we're still going to
21:05:55convert this from objects to classes
21:05:58like before we'll keep this console.log
21:06:02so we can track the progress
21:06:06this last line of code let us do
21:06:09something after we finish loading the
21:06:12products however instead of using a call
21:06:15back like before we're going to remove
21:06:18this
21:06:19line and to do something after this step
21:06:23we can actually return this entire
21:06:27promise so to make it easier to read
21:06:30let's save this entire promise into a
21:06:33variable using const
21:06:36let's call it promise equals
21:06:41fetch so let's add some new lines here
21:06:45as well as here to make the code a
21:06:48little easier to
21:06:50read so we're basically calling fetch
21:06:53which creates a promise and then we're
21:06:56going to save this promise inside this
21:07:01variable and then at the end of this
21:07:04function we can just
21:07:06return the promise so we're just going
21:07:08to return this whole promise out of the
21:07:12function and then we can add even more
21:07:14steps after this
21:07:17promise so down here this is going to
21:07:21give us the promise and then we can
21:07:23attach another step using dot then
21:07:28brackets and inside here we can give it
21:07:31a
21:07:31function brackets arrow and curly
21:07:35brackets
21:07:39so this attaches another step to the end
21:07:42of This Promise so basically attaches
21:07:44another step
21:07:46here so after we load all the products
21:07:49let's just
21:07:52console.log next
21:07:54step and
21:07:57save so we'll check the
21:08:00console and we'll see that we loaded the
21:08:03products and then after we did The Next
21:08:10Step so we can actually return a promise
21:08:14out of a function and then keep
21:08:16attaching more steps to that
21:08:19promise so that's how we use fetch it's
21:08:23a better way to make HTTP requests
21:08:26because it uses promises
21:08:31directly so now let's use fetch in our
21:08:34project instead of using XML HTTP
21:08:38request so first let's comment out this
21:08:41code because we were just practicing
21:08:43we'll type
21:08:44slashstar and at the bottom star
21:08:48slash and let's scroll up to load
21:08:52products Fetch and we're going to export
21:08:54this
21:08:55function so we can use it outside this
21:08:59file let's
21:09:02save we'll go to the left
21:09:05and open checkout.
21:09:08JS and here instead of using load
21:09:11products which uses callbacks let's
21:09:14switch to load products fetch which uses
21:09:18promises we'll scroll
21:09:20up and we're going to import load
21:09:22products fetch so here we're already
21:09:25importing from products. JS we'll type a
21:09:28comma load products
21:09:33Fetch and now will replace load products
21:09:37so remember that we need to give this a
21:09:40promise and also remember that fetch
21:09:43returns a promise so all we need to do
21:09:47is to remove this code and just call
21:09:51load products Fetch and
21:09:56brackets this will return a promise and
21:10:00we can use it with
21:10:02promise.all so now let's save
21:10:05we'll check our
21:10:07website and you'll see that everything
21:10:09is still
21:10:11working so fetch helps us make our code
21:10:14a lot cleaner because it can return a
21:10:16promise directly and we don't have to
21:10:18type out all of this extra
21:10:22code finally let's use fetch inside our
21:10:26tests on the left we'll open order
21:10:30summary
21:10:32test.js and remember that inside here we
21:10:35used load products so let's switch this
21:10:38to using load products fetch instead
21:10:42first we'll import it at the top we're
21:10:45importing from products. JS so we'll
21:10:48type comma and import load products
21:10:54Fetch and instead of load products we're
21:10:57going to call load products
21:11:02Fetch and brackets
21:11:06so remember that this returns a promise
21:11:09and we can attach more steps to This
21:11:11Promise using the method dot then and
21:11:16brackets and we'll give then a function
21:11:19to run so brackets arrow and curly
21:11:25brackets once the products are finished
21:11:27loading it's going to run then and
21:11:31inside here we're going to call done to
21:11:34go to the next step of the test so here
21:11:38we'll just call done and
21:11:41brackets and we'll remove the old
21:11:44code so now let's save to make sure this
21:11:47is
21:11:48working and we'll open the tests go to
21:11:51the browser and open the
21:11:55test and the order summary test should
21:11:57be
21:11:59passing so now let's save our changes
21:12:02into git we'll open the git set
21:12:06section inside products. JS we learned
21:12:09how to use fetch which returns a promise
21:12:13directly inside checkout. JS we used
21:12:17load products fetch inside our project
21:12:21and in order summary
21:12:22test.js we use load products fetch
21:12:26inside our tests let's create a message
21:12:29describing these
21:12:30changes convert load products
21:12:35from xhr or XML HTTP request to fetch
21:12:43and
21:12:49commit next we're going to learn async
21:12:52await which is an even better way to
21:12:55handle asynchronous
21:12:58code let's go back to our
21:13:01code and we'll open checkout. Js
21:13:06currently we're using promises to handle
21:13:09asynchronous code but the problem with
21:13:11promises is that it creates a lot of
21:13:14extra code for example we need to create
21:13:17a new promise we need to use resolve and
21:13:20we need to use do
21:13:23that async await is a shortcut for
21:13:26promises and it removes all this extra
21:13:30code so let's do our first example of
21:13:33asyn a weit we're going to scroll
21:13:38up and at the top we're going to create
21:13:41a function using
21:13:44function and let's name it load page
21:13:48brackets and curly
21:13:51brackets and inside we're going to
21:13:55console.log the string load
21:14:00page and now we'll learn the first part
21:14:03of async await which is
21:14:06async in front of the word function
21:14:09we're going to add the word async and
21:14:13space so async makes a function return a
21:14:18promise so this code is a shortcut for
21:14:21this code it basically wraps the code in
21:14:25a
21:14:28promise so now let's run this function
21:14:31to show that it actually returns a
21:14:33promise
21:14:35So Below this we'll call load page and
21:14:39brackets and because this returns a
21:14:42promise we can add a next step to This
21:14:45Promise using dot then
21:14:50brackets and we'll give then a function
21:14:54brackets arrow and curly
21:14:56brackets and inside here let's just
21:15:01console.log the string Next Step
21:15:06now let's
21:15:08save and we'll check the console so
21:15:11we'll open the
21:15:12console and you'll see that we loaded
21:15:15the page and then in the next step we
21:15:19displayed Next Step so when we put a
21:15:23sync in front of function it makes this
21:15:25function return a
21:15:28promise this code is a shortcut for this
21:15:31code
21:15:36next if we return something from this
21:15:38function for example we're going to
21:15:41return a value like the string value
21:15:46two this gets converted into resolve
21:15:50value
21:15:54two so this value is going to be saved
21:15:57in a parameter in The Next Step so here
21:16:01we'll add a parameter value and value
21:16:05two is going to be saved inside here if
21:16:09we
21:16:10console.log the value and
21:16:14save and then check the
21:16:17console we'll see that value is equal to
21:16:21this
21:16:23string and that's it for async it just
21:16:27makes a function return a
21:16:30promise now you might be wondering
21:16:33what's the point of this feature
21:16:36so the reason we use async is because it
21:16:38lets us use the second feature called
21:16:44await await lets us wait for a promise
21:16:48to finish before going to the next
21:16:53line so let's do an example inside here
21:16:58let's run some code that creates a
21:17:02promise let's run load products fetch so
21:17:06we'll type load products Fetch and
21:17:12brackets so this loads the products from
21:17:15the back end and usually this returns a
21:17:19promise so one way to wait for this to
21:17:22finish is to use do then and then give
21:17:26it a
21:17:27function so this runs this function
21:17:31after load products has finished
21:17:35now await gives us another way to wait
21:17:38for this promise to finish instead of
21:17:41using
21:17:43then at the front we can just type
21:17:50await so await lets us write
21:17:53asynchronous code like normal code so
21:17:57now it will wait for this line to finish
21:18:00and get the response from the back end
21:18:03before going to the next next line so we
21:18:06don't have to do any more do then we
21:18:09just write it like normal code line by
21:18:13line this code is a shortcut for this
21:18:21code and this makes our code a lot
21:18:24easier to read than what we have down
21:18:28here so now let's see what this looks
21:18:31like in the console before we save let's
21:18:35comment out this promise at the bottom
21:18:37so we don't get
21:18:39confused so we'll type
21:18:42slashstar and at the bottom star
21:18:46slash and now we're going to save this
21:18:49code and check the console to see what
21:18:52it
21:18:53did so you see that we loaded the page
21:18:57and then notice that it finish loading
21:18:59the products before going to the next
21:19:02step so this actually Waits for this
21:19:05line to finish before going to the next
21:19:08line in the code and this makes our code
21:19:10a lot
21:19:13cleaner now one very important thing to
21:19:15know is that we can only use a weight
21:19:19when we're inside an async
21:19:22function that's actually the main reason
21:19:24we use async so that we can use a weight
21:19:27to make our code
21:19:32cleaner now that we learned asyn wait
21:19:35let's use it in our
21:19:38project so previously we loaded the
21:19:41products and then we loaded the cart and
21:19:44then we rendered the page so let's
21:19:47recreate this using async
21:19:50await first we want to load the products
21:19:54which we did here and we're going to
21:19:56wait for this to finish and then we're
21:19:58going to load the
21:20:01cart so to load the cart let's use this
21:20:04promise down here asyn await can only be
21:20:08used with promises it doesn't do
21:20:10anything with a call
21:20:14back so we'll select this promise and
21:20:18rightclick
21:20:20copy and then up here we're going to
21:20:23load the cart with a promise by right
21:20:26clicking and
21:20:29paste so now we want to wait for this
21:20:32promise to finish before going to the
21:20:34next line to do that at the front we can
21:20:38simply type
21:20:43await finally after we load the products
21:20:47and we load the cart we're going to
21:20:49render the page so we'll scroll down and
21:20:53we'll select this
21:20:56code and we're going to right click
21:21:00copy and at the top
21:21:05we're going to rightclick and
21:21:10paste and that's it you can see that our
21:21:13asynchronous code is a lot cleaner now
21:21:16we load the products and then we just
21:21:19wait for it to finish then we load the
21:21:21cart and we also wait for it to finish
21:21:24and then we run the rest of our code so
21:21:28we can write asynchronous code like
21:21:30normal code
21:21:35so now let's remove the console.log at
21:21:38the
21:21:38top and also remove this return value
21:21:42because we don't need
21:21:43it and we'll remove do then at the
21:21:50end and let's
21:21:53save so now if we open our
21:21:56website and open the
21:22:01project you can see that everything
21:22:03loaded properly
21:22:06inside the
21:22:07console you can see that we loaded the
21:22:10products first wait for it to finish
21:22:13then load the cart wait for it to finish
21:22:17and then we displayed the page so that's
21:22:20how we use a syn8 to make our code a lot
21:22:23cleaner than what we had
21:22:29before so now we'll learn some more
21:22:32details about Ayn a weit
21:22:35as I mentioned we can only use a weight
21:22:37inside an async
21:22:41function also the closest function has
21:22:44to be
21:22:46async for example here we have an async
21:22:49function at the top and inside we have a
21:22:52normal function so we can't use a weight
21:22:55inside the normal function we have to
21:22:57make this one
21:23:03async another another detail is if a
21:23:06promise resolves with a value for
21:23:09example here we give resolve a value
21:23:12like the string value
21:23:16three normally this value will be saved
21:23:19in The Next Step so if we did do then
21:23:24and gave it a
21:23:27function this value would be saved in
21:23:30this
21:23:32parameter however if we use await this
21:23:36value just gets returned and we can save
21:23:38it in a variable so instead of using
21:23:42then we can Simply Save whatever is
21:23:45resolved inside a variable using const
21:23:49value
21:23:52equals and this makes our code a lot
21:23:55easier to read instead of having to use
21:23:58then we can simply save this inside a
21:24:01variable like normal code
21:24:06and finally we can use await with
21:24:09promise.all as well but I'll leave that
21:24:12as an
21:24:14exercise so that's async await it's a
21:24:17shortcut for promises and it lets us
21:24:20write asynchronous code like normal
21:24:26code so when working with asynchronous
21:24:28code a best practice is to use asyn
21:24:32await over promises and callbacks
21:24:35because they are much
21:24:38cleaner so now let's save our changes
21:24:40into git we'll open the git section in
21:24:44checkout. JS we created the load page
21:24:48function where we learned async and
21:24:51await let's create a message describing
21:24:54these
21:24:56changes convert from promises to async
21:25:03await and
21:25:11commit now we're going to learn about
21:25:13error handling when we're sending HTTP
21:25:17requests across the internet we could
21:25:19get unexpected errors for example the
21:25:23internet connection might stop working
21:25:26so we're going to learn how to handle
21:25:27these kinds of unexpected
21:25:31errors let's go back to our code and
21:25:34we're going to open data/ products.
21:25:39JS and we're going to
21:25:41scroll to the load products
21:25:46function so this uses a call back to
21:25:49send a request and get a
21:25:53response now what if there's an error
21:25:55along the way for callbacks we usually
21:25:58set up a separate callback just for
21:26:03errors for example below this we're
21:26:06going to add another event listener
21:26:09using xhr do add event listener
21:26:16brackets and the first parameter is the
21:26:20event this time we're going to listen
21:26:22for the error
21:26:25event and then we're going to give it a
21:26:31function so now if we get an unexpected
21:26:35error it's going to run this function so
21:26:38if we get an error let's just console
21:26:40log a message
21:26:44console.log a string
21:26:47unexpected
21:26:50error and usually when we get an error
21:26:53we give some instructions on what to
21:26:56do here let's just type please try again
21:27:01later
21:27:04and
21:27:06save so this is called error handling if
21:27:10we get an error during the request we
21:27:12can handle it with this function so we
21:27:15just display a
21:27:17message so now let's try out this code
21:27:20to simulate an error we're going to
21:27:22change the url of the
21:27:25request to
21:27:28error. superimple backend. deev so this
21:27:32will create an error because this URL
21:27:35doesn't
21:27:37exist so now down here let's call this
21:27:40function so that we run this code and
21:27:43get the error so we'll type load
21:27:47products and
21:27:50brackets and
21:27:53save let's check the
21:27:57console and you'll see that we displayed
21:28:00this error
21:28:02message so we got an error and it ran
21:28:06this error function and it did not run
21:28:09the load function
21:28:13above also usually this callback gets a
21:28:17parameter called error and this contains
21:28:21some information about the
21:28:24error so that's how we handle errors
21:28:27when using callbacks we usually set up a
21:28:30separate callback just for errors
21:28:35so now let's remove this line since it
21:28:37was just for
21:28:38practice and we'll remove error from the
21:28:42URL and change it back to super simple
21:28:45backend dodev and
21:28:51save next we'll learn how to handle
21:28:53errors in
21:28:55promises so we'll scroll up to the load
21:28:59products fetch
21:29:00function and this makes the same request
21:29:03as below
21:29:04but it uses
21:29:06promises to handle an error in promises
21:29:10promises give us two methods do then and
21:29:14another method called dot catch brackets
21:29:19and we're going to give catch a function
21:29:22brackets arrow and curly
21:29:27brackets so now if this request has an
21:29:30error it's going to go to this catch
21:29:32method and it's going to run this error
21:29:35function so inside here let's also
21:29:38display a message so let's just copy the
21:29:41message that we had
21:29:43below we're going to select this message
21:29:46and then
21:29:47rightclick
21:29:49copy and then inside catch we're going
21:29:53to right click and
21:29:57paste and again to simulate an error
21:30:01we're going to scroll up and change the
21:30:03url
21:30:04so we're going to add error at the front
21:30:08do superimple backend
21:30:11dodev so now let's call this function
21:30:14and test out this error code at the
21:30:19bottom we'll type load products Fetch
21:30:25and
21:30:26brackets and
21:30:29save so now let's open the
21:30:32console and you'll see in here that we
21:30:34displayed the error message so we're
21:30:37successfully creating an error it's
21:30:40going inside catch and it displays this
21:30:45message so just like callbacks catch
21:30:49gets a parameter called error and this
21:30:52contains information about the error if
21:30:55we need
21:30:57it so that's how we handle errors with
21:31:00promises we have another method called
21:31:03Dot catch that will run this function if
21:31:06there's an
21:31:07error so now let's remove this practice
21:31:12code and switch back the
21:31:15URL so remove error and Dot and
21:31:23save lastly we'll learn how to handle
21:31:25errors in async
21:31:27await so let's go to the left and we're
21:31:30going to open the checkout file so we'll
21:31:32scroll down and open checkout.
21:31:36JS and inside here we're using async
21:31:40await so the catch errors when using
21:31:42async await we're going to use some new
21:31:45syntax called try
21:31:48catch above this we're going to type the
21:31:51word try and curly
21:31:56brackets and now we're going to put the
21:31:58code that could cause an error into try
21:32:02so here we're making a request to the
21:32:04back end and here we're also making a
21:32:07request to the back end so this code
21:32:09could cause an error so we're going to
21:32:12move it inside try so we'll select it
21:32:15right click
21:32:17cut and then inside here we'll right
21:32:20click and
21:32:23paste and now if any of this code inside
21:32:27a try gets an error we can catch it
21:32:32using this code at at the bottom we'll
21:32:34type
21:32:36catch brackets and curly
21:32:40brackets Now Catch is going to get one
21:32:43parameter in these brackets called error
21:32:47and this contains information about the
21:32:49error if we need
21:32:51it so catch Works similarly to catch for
21:32:57promises if there's an error inside here
21:33:01it's going to catch the error or it's
21:33:03going to hand handle the error and run
21:33:05the code inside catch so in here we can
21:33:08put our error message so let's go back
21:33:11to products.
21:33:14JS and let's copy the error message so
21:33:17we'll select this and right click
21:33:22copy and back to
21:33:24checkout inside catch we'll right click
21:33:29and paste
21:33:34so now I'll remove this new line and add
21:33:37a new line here to make it a little
21:33:39easier to
21:33:41read and let's test out this
21:33:44code to do that we'll go inside
21:33:48products. JS again and we're going to
21:33:50modify the URL again so at the front
21:33:54here we're going to add error do super
21:33:58simple backend and also we're going to
21:34:00comment out the dot catch because right
21:34:04now the error is going to be handled
21:34:06here and it's not going to be handled
21:34:08outside in the try catch so we're going
21:34:12to comment this out using
21:34:15slashstar and at the
21:34:17end star slash and
21:34:22save so we'll go back to checkout.
21:34:26JS and here we'll also
21:34:30save and now let's open the console
21:34:35and you'll see that we had an error here
21:34:38we caught the error and it ran this code
21:34:41and displayed the error
21:34:44message so that's how we handle errors
21:34:47with async await we put our code that
21:34:50can cause an error inside try and if
21:34:55there is an error it's going to run the
21:34:57code inside
21:35:00catch so now let's go back to products
21:35:04and remove error from the URL and the
21:35:08dot and we'll also uncomment
21:35:13catch and
21:35:18save next we're going to learn some more
21:35:20details about try catch so we'll open
21:35:23checkout.
21:35:25JS and one thing to know about TR catch
21:35:29is that we don't have to use it with
21:35:31async await we can actually use TR catch
21:35:35with synchronous code or normal code for
21:35:39example here we try to run a function
21:35:42that does not exist and this will cause
21:35:45an error try catch will catch this error
21:35:49and display a message so notice that
21:35:53we're not using async O8 here this is
21:35:56just normal code so we can use try catch
21:36:00to catch errors in normal code as well
21:36:04another detail is whenever we get an
21:36:07error it will skip the rest of the code
21:36:10so here it will not console.log next
21:36:13line it will skip the rest of this code
21:36:17and go directly into
21:36:21catch now one thing you might be
21:36:23wondering is why don't we just use TR
21:36:26catch everywhere and prevent all of our
21:36:29errors so try catch and any error
21:36:32handling is meant to handle unexpected
21:36:36errors that means our code is correct
21:36:39but something outside our control caused
21:36:41the error so we can give some
21:36:43instructions on what to
21:36:45do so that's why we don't use try catch
21:36:48everywhere we only use it for unexpected
21:36:52errors or errors outside of our
21:36:58control so the last thing to know about
21:37:01error handling is that we can man
21:37:03manually create
21:37:05errors to manually create an error in TR
21:37:08catch at the top we're going to use the
21:37:11word
21:37:13throw so throw creates a new error or it
21:37:18throws an error that we're going to
21:37:20catch a
21:37:21later and now we need to give this error
21:37:23a
21:37:24value so we can use any type of value
21:37:27for an error like a string number or an
21:37:31object for an example we're just going
21:37:33to use a string error
21:37:37one so this will manually create an
21:37:40error when we get an error it's going to
21:37:43skip the rest of the code inside these
21:37:46curly brackets and it's going to go
21:37:48straight into catch so this error value
21:37:52is going to be saved inside this
21:37:55parameter and it's going to run the code
21:37:57inside
21:37:59catch so if we
21:38:01save and then check the
21:38:04console throw creates an error and it's
21:38:07going to display this error message up
21:38:14here so now let's comment out this
21:38:18example and
21:38:21save next if we're using promises there
21:38:25are two ways to manually create an
21:38:29error so inside this promise if we want
21:38:33want to manually create an error we can
21:38:35also just throw an error like the string
21:38:40error
21:38:412 and this will throw an error and go
21:38:44inside dot catch by the way if we await
21:38:49a promise instead of going into catch
21:38:52it's going to go inside catch
21:38:55here so await makes it behave sort of
21:38:58like synchronous code or normal code if
21:39:02we save
21:39:04and check the
21:39:07console it will get an error it will not
21:39:10load the cart and it will display this
21:39:13error
21:39:15message so now let's comment out this
21:39:19example and we'll learn the second way
21:39:21to create an error in a
21:39:24promise inside a promise if we need to
21:39:27create an error in the future then we
21:39:30need to use different code for example
21:39:34here we load the cart and then once it's
21:39:37finished loading we're going to run this
21:39:40function so this function runs in the
21:39:44future inside this function throw does
21:39:47not work because throw does not work in
21:39:51the
21:39:52future instead promises give us another
21:39:55way to create an error when we create a
21:39:59new promise it gives us a second
21:40:02parameter
21:40:04called
21:40:06reject reject is a function and it lets
21:40:10us create an error in the
21:40:14future so here after we load the cart in
21:40:18the future let's create an error using
21:40:22reject brackets and a string error
21:40:29three so let's comment out resolve as an
21:40:32example
21:40:34so now let's
21:40:36save and check the
21:40:40console and you'll see that reject
21:40:42created an error in the
21:40:45future and then it goes down here and
21:40:47runs the code inside catch and creates
21:40:51the error
21:40:55message so the manually create an error
21:40:58in a promise we have two ways we can use
21:41:01throw if we're creating the error
21:41:04synchronously or right away or we can
21:41:07use reject if we're creating the error
21:41:10asynchronously or in the
21:41:13future so now let's comment out
21:41:17reject and uncomment resolve and
21:41:23save so that's error handling it lets us
21:41:27handle unexpected errors and it also
21:41:29lets us create our own
21:41:32errors so now let's save these changes
21:41:34into git we'll open git inside products.
21:41:39JS we added. catch for
21:41:43promises and an error function for
21:41:46callbacks and then in checkout. JS we
21:41:49added try catch for async await and we
21:41:53also learned how to manually create our
21:41:56own
21:41:57errors so we'll type a message
21:41:59describing our
21:42:00changes learn and error
21:42:04handling and
21:42:12commit now that we learned backend
21:42:15promises and async await let's use them
21:42:18in our
21:42:20project we'll open our
21:42:23project and open the tab for the project
21:42:27and we're going to go to the checkout
21:42:29page so the feature we're going to work
21:42:31on is in the checkout page we're going
21:42:34to make this place order button
21:42:37interactive when we click this button
21:42:40it's going to take our cart and turn it
21:42:42into an
21:42:44order this time instead of writing this
21:42:46code ourselves we're going to use the
21:42:49back end to create an
21:42:53order so first let's set up an event
21:42:56listener for this button we'll go back
21:42:59to our
21:43:00code and open our files
21:43:03and that button is in a section called
21:43:05the payment
21:43:07summary so we're going to open scripts
21:43:10SL checkout payment summary.jpg
21:43:34your order and now we have the code for
21:43:37the button right here so we're going to
21:43:39set up an event listener so we can do
21:43:42something when we click
21:43:43it first we'll add a class to the button
21:43:46so we can get it in our
21:43:49JavaScript at the end of the class let's
21:43:51create a new line and add a class
21:43:55js- Place Das
21:43:59order and now after we put this HTML on
21:44:03the page we're going to set up an event
21:44:06listener to do that we're going to get
21:44:09this button into our JavaScript using
21:44:13document. query
21:44:16selector
21:44:18brackets and a string and to select this
21:44:21class we're going to start with a
21:44:24js- place-
21:44:28order and now that we have this button
21:44:31we're going to add an event listener to
21:44:33to it so we'll create a new line and use
21:44:36the method do add event
21:44:41listener
21:44:43brackets and we'll give this two
21:44:45parameters the first parameter is the
21:44:48event we want to listen for which is
21:44:52click and the second parameter is a
21:44:54function we want to run when we click
21:44:56this button so we'll type brackets arrow
21:45:00and curler brackets
21:45:03and now when we click this button we're
21:45:05going to make a request to the back end
21:45:07to create the
21:45:10order so for this example I set up a URL
21:45:14path in my backend for creating orders
21:45:18called slash
21:45:20orders so inside here we're going to
21:45:22make a request to the backend using
21:45:26fetch
21:45:27brackets and then we're going to give it
21:45:29the URL of the request which is H ttps
21:45:34colon double
21:45:36slash super simple
21:45:40backend. Dev and the URL path slash
21:45:47orders however this time we need to send
21:45:50some data to the back end so we need to
21:45:53send our cart to the backend in order to
21:45:56create an
21:45:59order to send data in a request we need
21:46:03to use a different type of requests so
21:46:07there are four common types of requests
21:46:10get post put and delete get means we
21:46:14want to get something from the back end
21:46:17post means we want the back end to
21:46:19create something put means we want it to
21:46:23update something and delete means we
21:46:25want to delete something so far we only
21:46:29use get request which let us get data
21:46:32from from the back
21:46:34end however get requests don't really
21:46:37let us send data to the back
21:46:42end so in this situation we want to
21:46:45create an order so we're going to use
21:46:48post to create something post lets us
21:46:52send data to the
21:46:56backend so to create a post request
21:47:00instead of a get request we're going to
21:47:02give fetch a second
21:47:04parameter which is an
21:47:07object and inside this object we're
21:47:10going to give it a property called
21:47:13method
21:47:14colon and this is the type of the
21:47:17request in this case we'll use the
21:47:19string
21:47:22post and after this we're going to give
21:47:25another property called
21:47:27headers colon and this is going to be an
21:47:31object
21:47:33headers gives the backend more
21:47:35information about our request and this
21:47:38is needed when we're sending data to the
21:47:41back
21:47:42end inside this object we'll add the
21:47:45property string Capital C content Das
21:47:50capital T
21:47:52type
21:47:54colon and the value will be the string
21:47:58application slash Json
21:48:03this tells the back endend what type of
21:48:06data we're sending in our request here
21:48:09we're going to send some Jon which is
21:48:11basically a JavaScript
21:48:14object next we're going to add another
21:48:16property called body
21:48:20colon and this is the actual data we're
21:48:23going to send to the back
21:48:25end according to the documentation we
21:48:28need to send an object with a property
21:48:30called cart and this contains our cart
21:48:36array so in the body let's send an
21:48:39object with a property called cart colon
21:48:44and give it the cart
21:48:46array so we should have the cart array
21:48:48in this file and it should be called
21:48:53cart and finally we can't send an object
21:48:57directly in our request we need to
21:48:59convert it into a Json string
21:49:05to do that at the front we'll use
21:49:09json.
21:49:11stringify Open Bracket and close bracket
21:49:16so this will convert this data into a
21:49:18Json string and now we can send it to
21:49:21the back
21:49:24end okay so after we send this request
21:49:27we need to wait for the response to come
21:49:30back to do that fetch returns a
21:49:34promise however instead of using dot
21:49:37then to add a Next Step let's use async
21:49:40a weit because it's cleaner so first we
21:49:43need to make this function
21:49:46async remember we can only use await
21:49:49inside an async
21:49:52function so at the front of this
21:49:54function we'll type the word
21:49:58async and now in front of fetch we can
21:50:01use
21:50:04await this is going to wait for fetch to
21:50:07finish or for fetch to get a response
21:50:10from the back end and then go to the
21:50:12next
21:50:14line now because we used await we can
21:50:17save the response in a variable so at
21:50:21the front we'll create a variable const
21:50:24and call it response and make it equal
21:50:28to this result
21:50:33next remember that to get the data
21:50:36that's attached to the response we need
21:50:38to use response.
21:50:40Json so down here we're going to use
21:50:45response. Json and
21:50:48brackets now remember that response.
21:50:51Json is also a promise so at the front
21:50:55we can use await to wait for this
21:50:58promise to finish before going to the
21:51:00next line
21:51:03so this will give us the data that's
21:51:05attached to the response which should be
21:51:08the order that was created by the
21:51:11backet so let's save this in a variable
21:51:14using const order
21:51:21equals and finally let's
21:51:25console.log the order to see what it
21:51:28looks like so now let's save
21:51:32and then we'll open the
21:51:35project and make sure you have some
21:51:37products in your
21:51:39cart and then we'll click place
21:51:43order and now we can check our console
21:51:45to see what the order looks
21:51:52like and you'll see that we got an order
21:51:55object from the back end it has an order
21:51:58ID an order time and the products in our
21:52:03order including a delivery time and the
21:52:07quantity that we
21:52:09want so we successfully use the back end
21:52:12to create a new
21:52:14order let's also check the network tab
21:52:17up here and open
21:52:20network so I'll resize this to make it a
21:52:23little easier to read and we'll search
21:52:26for the super simple
21:52:28URL and then we'll find this request
21:52:31orders with a status 200 and we'll click
21:52:36it so inside the details you'll see that
21:52:39it was a post request sent to/ orders
21:52:44and the status code was 200 so it was
21:52:47successful inside the payload tab this
21:52:51is what we sent to the back end which is
21:52:54our
21:52:55cart in the preview tab this is what the
21:52:58backend sent back an order object
21:53:02and the response tab is the same thing
21:53:04we got the order object
21:53:09back so that's how a real world website
21:53:12works instead of creating the order on
21:53:15the web page or on our computer we send
21:53:19an HTTP request to the backend to create
21:53:23the
21:53:30order okay now that we created an order
21:53:33let's save it
21:53:36somewhere we'll go back to our
21:53:39code and on the left inside the data
21:53:43folder let's create a file for our
21:53:45orders so we'll click inside this folder
21:53:49and then click here to create a file and
21:53:52let's name it
21:53:54orders. JS and press
21:53:58enter at the top let's create an array
21:54:01to contain rain all of our orders we use
21:54:05const orders equals and empty array and
21:54:10let's export this so we can use it in
21:54:12other files
21:54:15export next let's create a function for
21:54:18adding an order to this array so we'll
21:54:21create a
21:54:23function add
21:54:25order brackets and curly brackets and
21:54:29we'll give this function an order object
21:54:33and we're just going to add it to the
21:54:35array now for orders we usually want the
21:54:38most recent order at the top so we're
21:54:41going to add this order to the front of
21:54:43the array to do that we'll type the
21:54:47array name orders and use the method do
21:54:52unshift
21:54:54brackets and we'll give it the
21:54:57order so this will add the order to the
21:55:00front of the array instead of the
21:55:03back finally let's save our orders into
21:55:06local storage so we'll create a function
21:55:09to save to local storage
21:55:12function save to
21:55:16storage brackets and curly brackets and
21:55:19we'll run local
21:55:22storage. set item brackets and a string
21:55:28we'll use a local storage key orders
21:55:33comma and remember local storage only
21:55:36supports strings so we'll use
21:55:39json.
21:55:41stringify
21:55:43brackets
21:55:45orders and now when we modify this array
21:55:49we're going to save to storage and
21:55:57brackets finally at the top let's load
21:56:00the orders from Storage
21:56:02so
21:56:04here we use local
21:56:08storage. getet item brackets the string
21:56:14orders and remember that this will be a
21:56:17string so we need to convert it back
21:56:20into an array using the code json. pars
21:56:25and
21:56:28brackets now in the beginning we're not
21:56:30going to have any orders saved in local
21:56:34storage so we can give this a default
21:56:37value using or and an empty array so if
21:56:43there's nothing in local storage it's
21:56:45going to use this empty array as a
21:56:47default and
21:56:53save so now let's use add order in the
21:56:56payment summary so first we'll export
21:56:59this
21:57:00function and and
21:57:03save and then open the payment summary
21:57:07again and at the top we're going to
21:57:10import that function so here we'll
21:57:13import curly brackets add
21:57:18order from a
21:57:21string and we'll go into the data folder
21:57:24which is do do slash
21:57:26dotdata SL orders
21:57:30doj and and we'll scroll back
21:57:34down and now after we create an order
21:57:37from the back end we're going to add it
21:57:39to the array and save it in local
21:57:42storage using the function add order
21:57:47brackets the order
21:57:51object and
21:57:54save now if we go to our web page and
21:57:58click place
21:58:00order this should create an order order
21:58:02from the back end and save it in local
21:58:05storage so now we can open our
21:58:08console and go to the console Tab and
21:58:12let's check if it's inside local storage
21:58:15using local
21:58:18storage. getet item brackets and the
21:58:22string
21:58:24orders and press
21:58:28enter and you'll see that we saved an
21:58:30order in local store
21:58:34storage if you ever want to remove the
21:58:37orders from local storage you can use
21:58:40this
21:58:41code local
21:58:44storage. remove item brackets and the
21:58:49string
21:58:51orders press enter and then refresh the
21:58:59page let's go back to our code
21:59:02and let's get some practice and add some
21:59:05error handling to this code so at the
21:59:08top for asyn of weight we're going to
21:59:11use try catch so we'll type try curly
21:59:16bracket and catch brackets and curly
21:59:21brackets and catch gets a parameter
21:59:23called
21:59:25error so now we're going to move our
21:59:27code inside a try we'll select this code
21:59:32and then right click
21:59:34cut inside try right click and
21:59:40paste and I'll create a new line and now
21:59:44if we make a request and there's some
21:59:46sort of network error that error will go
21:59:49down here and we'll run the code inside
21:59:53catch so in here let's display a
21:59:56message
21:59:58console. log the string
22:00:02unexpected
22:00:06error try again
22:00:12later the last step is after we create
22:00:15an order we should go to the orders
22:00:19page to do that at the bottom
22:00:24here we're going to use an object called
22:00:28window.location window.location is a
22:00:31special object object provided by
22:00:33JavaScript and it lets us control the
22:00:36URL at the top of the
22:00:39browser if we change the location object
22:00:43it will change the url at the top so
22:00:46let's give this a try we'll go into our
22:00:50code and we'll type
22:00:56window.location Now location has a
22:00:58property
22:00:59called href
22:01:02this gives us the URL at the top of the
22:01:06browser and if we change the href
22:01:08property it will change the url at the
22:01:12top of the browser so we'll try that in
22:01:15our code we're going to change. href and
22:01:19make it equal to the string orders.
22:01:27HTML so this will replace everything
22:01:30after the slash here with orders.
22:01:35HTML and this will open the orders. HTML
22:01:38file which is at the bottom
22:01:42here and this will open the orders
22:01:45Page by the way orders. HTML is a file
22:01:51path the current file is checkout. HTML
22:01:55because this code is running on the
22:01:56checkout page so it starts from
22:01:59checkout. HTML and then looks for a file
22:02:03called orders. HTML beside it which is
22:02:07this file here and it loads this file in
22:02:10the
22:02:12browser so now let's
22:02:16save we'll open the project and then
22:02:19click place
22:02:23order so it should create a new order
22:02:26using the backend and it will take us to
22:02:28the orders
22:02:30page so right now we have a list of
22:02:33order objects and that's all the data
22:02:36that we need to create this page I'll
22:02:39leave generating the HTML and making
22:02:42this page interactive as
22:02:46exercises so now let's check our tests
22:02:49to make sure that everything is still
22:02:50working we'll open the tab for our tests
22:02:54and I'll refresh just in case and it
22:02:56looks good and we'll save our changes
22:02:58into git we'll go to the git section
22:03:04inside orders. JS we created some
22:03:07functions for saving our orders and in
22:03:11payment summary.
22:03:13JS we made the place order button
22:03:18interactive and we use the backend to
22:03:20create an order let's create a message
22:03:24describing these
22:03:26changes create order using the back end
22:03:33and
22:03:39commit so we're going to learn one more
22:03:42thing in this lesson and this is needed
22:03:44to create the tracking page we're going
22:03:47to learn how to use URL
22:03:52parameters so first let's open our
22:03:55project and we'll go back to the orders
22:03:59page and on this page we have these
22:04:03track package links beside the products
22:04:06if we click this link it will take us to
22:04:10the tracking page at tracking.
22:04:14HTML however right now this page is just
22:04:17plain HTML there's no
22:04:20JavaScript so if we go back to our
22:04:24orders and then track a different
22:04:28product you'll notice that all of the
22:04:31tracking pag pages are the
22:04:33same so we need to make each tracking
22:04:35page different depending on the order
22:04:38and the product so how do we know which
22:04:41product to track on this
22:04:44page to create this we can use a feature
22:04:47called URL
22:04:48parameters URL parameters let us save
22:04:52data directly in the
22:04:55URL to create a URL parameter at the top
22:05:00after this URL we're going to type
22:05:03question mark and then order capital i d
22:05:10equals 1 2 3 for example and press
22:05:16enter so the question mark means we're
22:05:19adding a URL parameter to this
22:05:22URL so a parameter is a property value
22:05:26pair the left side is a property and the
22:05:29right side is a value
22:05:31this is sort of like an object like
22:05:37this so using URL parameters we can save
22:05:41some data in the URL like
22:05:45this and then we can use JavaScript to
22:05:48get this data out of the URL to do that
22:05:53we'll go back to our
22:05:55code and we'll open our files here and
22:05:58we'll scroll down to the bottom to the
22:06:01tracking
22:06:02page and let's scroll all the way down
22:06:05to the
22:06:07bottom and at the bottom of the body
22:06:10let's add a script tag to run some
22:06:12JavaScript so we'll type less than
22:06:15script greater
22:06:18than and to get the parameters out of
22:06:21the URL we can use a built-in class
22:06:24called
22:06:26URL first let's generate an object using
22:06:29this class we'll type
22:06:32New Capital URL and
22:06:36brackets and we'll give it the URL that
22:06:39we want to get the parameters
22:06:41from so in here we'll type
22:06:47window.location.href
22:06:49remember that
22:06:52window.location.href gets the URL at the
22:06:55top of the
22:06:58browser and now let's save this object
22:07:00in a variable
22:07:02at the front we'll create const URL
22:07:06equals this
22:07:09object so this URL class analyzes the
22:07:13URL that we give it and breaks it down
22:07:16into different parts one of the parts
22:07:19are the URL
22:07:21parameters to get the parameters we're
22:07:23going to use a property
22:07:26url. search capital p perams
22:07:32by the way URL parameters are also
22:07:35called search
22:07:37parameters because they're used for
22:07:39features like YouTube
22:07:44search so search params will let us get
22:07:48the URL parameters up
22:07:51here so let's say that we wanted the
22:07:53order ID
22:07:55parameter inside our
22:07:57code search params has a method called
22:08:01Dot
22:08:01get brackets and this lets us get
22:08:05individual parameters so inside here
22:08:08we'll give it a string and we'll get the
22:08:11order capital i d parameter out of the
22:08:17URL so let's console.log this
22:08:22console.log and
22:08:25brackets if we
22:08:28save and then open our project and go to
22:08:32the tracking page and then open the
22:08:34console right click
22:08:38inspect the
22:08:40console you'll see that it gave us the
22:08:43order ID that we saved up
22:08:47here so using that code we can get URL
22:08:51parameters out of the URL at the top and
22:08:55then use them to create this
22:08:59page we can also say save multiple
22:09:02parameters in the URL to save another
22:09:05parameter at the end we can just type
22:09:09and and now we can give it another
22:09:12property value pair like product Capital
22:09:17ID equal
22:09:19456 and press
22:09:23enter and now inside our code we can get
22:09:26this second parameter
22:09:31so inside here we're going to make a
22:09:33copy of this line select it right click
22:09:38copy and then down here right click
22:09:43paste and this time we're going to get
22:09:46the
22:09:47parameter product Capital ID and
22:09:54save if we open the page and open the
22:09:57console
22:10:01we got the order ID as well as the
22:10:05product ID out of the
22:10:09URL so URL parameters lets us save
22:10:13different data in each
22:10:16URL and we can actually go back and
22:10:19forth between them so if we click the
22:10:21back button it will go to this URL and
22:10:26this URL has different data or
22:10:28parameters saved inside if we click
22:10:32forward this URL has different
22:10:34parameters or data saved
22:10:37inside and this is how YouTube search
22:10:39works if we search for something our
22:10:42search is saved as a URL parameter if we
22:10:46search for something else our search is
22:10:48also saved as a URL parameter and we can
22:10:51go back and forth between the
22:10:59two so this is actually all the data
22:11:02that we need to create the tracking page
22:11:05we need to know which order it is and
22:11:07which product it
22:11:09is now there's one more thing to know to
22:11:12create this page we'll go back to our
22:11:15code and we're going to open the orders
22:11:18page at orders.
22:11:20HTML and we're going to find the track
22:11:23package button using control F or
22:11:26command F and we'll type the text in
22:11:29that button track
22:11:33package so notice that these buttons are
22:11:36just a link to the tracking page or
22:11:39tracking.
22:11:40HTML so when you're generating this
22:11:43HTML make sure that you add URL
22:11:46parameters after this tracking page
22:11:49URL using question mark the order
22:11:54Capital ID equals and then you
22:11:57substitute the order ID like 1 2 3
22:12:01and then and also attach the product ID
22:12:06product Capital ID equals
22:12:11456 so when generating this HTML make
22:12:14sure you substitute the order ID and
22:12:18product ID into this URL so that when it
22:12:22opens the tracking page you know which
22:12:24order and which product to track
22:12:31I'll leave generating the HTML and
22:12:33making the tracking page interactive as
22:12:37exercises so now let's save this
22:12:40file and let's check our tests so we'll
22:12:44open the browser and open the test Tab
22:12:47and everything is still working and
22:12:49we'll save these changes into git open
22:12:53the git
22:12:54section in orders.
22:12:59HTML we added an example of adding URL
22:13:03parameters to the tracking page
22:13:07Link in tracking. HTML we added an
22:13:11example of getting the parameters out of
22:13:14the URL at the
22:13:16top let's create a message describing
22:13:19these
22:13:20changes add URL
22:13:25parameters
22:13:26example and commit
22:13:33and that's the end of this lesson in
22:13:36this lesson we learned what a vend is
22:13:39and how to make HTTP requests to the
22:13:42back end we learned how to use XML HTTP
22:13:46request and
22:13:47fetch we learned how to handle
22:13:49asynchronous code using callbacks
22:13:52promises and async await we learned how
22:13:56to test asynchronous code we learned
22:13:59about error handling for unexpected
22:14:02errors we use the backend in our project
22:14:06and we learn URL
22:14:09parameters before we look at the
22:14:11exercises you might be wondering what's
22:14:14the next step after this course instead
22:14:17of just using a backend the next step is
22:14:20to learn how to create our own backend
22:14:24to do that you need to learn the command
22:14:26line and after that you'll learn a
22:14:28technology called nodejs which lets us
22:14:31create our own
22:14:34backend also after this course you can
22:14:37learn how to put a website on the
22:14:39internet using this video right
22:14:45here here are some exercises that'll
22:14:47help you practice what we learned in
22:14:49this
22:14:59lesson e
22:15:38thanks for watching here are some other
22:15:41videos and courses that you might be
22:15:43interested in if you want to support
22:15:45this channel you can click like
22:15:47subscribe and share this video with
22:15:50others thanks again and I'll see you in
22:15:52the next one

About this transcript

This page contains the full transcript of YouTube transcript (EerdGm-ehJQ) , generated from the public captions YouTube serves with the video. The transcript has 165,390 words across 25,999 segments, with the original timestamps preserved so you can click any line to jump to that moment in the embedded player.

What you can do with it

Use the transcript to take notes, quote the speaker, build a study guide, generate a summary with ChatGPT or Claude via the YouTube Summary tool, or export it as a timed subtitle file with YouTube to SRT. You can also re-open it in the transcriber to translate the transcript into 100+ languages.

Free YouTube transcript tool

YouTube2Text is a free YouTube transcript generator — no signup, no daily limit. Paste any YouTube link and get the full transcript instantly, with timestamps, click-to-jump, translation to 100+ languages, AI prompts for ChatGPT, Claude, and Gemini, and exports to TXT, SRT, VTT, or Markdown.