JavaScript Full Course (2023) - Beginner to Pro - Part 2 Lesson 13
JavaScript Full Course (2023) - Beginner to Pro - Part 2 Lesson 13
In part 2 lesson 13 of this JavaScript tutorial and JavaScript full course, we’ll start the Amazon project and learn to use JavaScript with HTML, CSS, and Git.
Exercise solutions: https://github.com/SuperSimpleDev/jav…
Copy of the code: https://github.com/SuperSimpleDev/jav…
JavaScript Full Course - Part 1: • JavaScript Full Course (2023) - Begin…
Starting code for the Amazon project: https://github.com/SuperSimpleDev/jav…
HTML CSS Full Course: • HTML \u0026 CSS Full Course - Beginner to Pro
🎓 Get a certificate for HTML CSS with premium learning experience \u0026 support SuperSimpleDev! ❤️
https://courses.supersimple.dev/cours…
Git installation instructions: https://git-scm.com/downloads
Git and GitHub Full Course: • Git and GitHub - 0 Experience to Prof…
A.I. tool for searching for code: https://chat.openai.com/chat
Lessons:
0:00 Intro to the Amazon Project
7:04 Intro to Git
15:56 Create the list of products
22:36 Save the data
32:53 Generate the HTML
49:08 Add more products
57:04 Add products to cart
1:10:31 Combine the cart quantities
1:19:29 Make the cart quantity interactive
1:27:18 Exercises
Additional Information:
This JavaScript tutorial and JavaScript full course is a project based series of JavaScript tutorials for aspiring software engineers, teaching the main skills that we need to create complex, interactive websites. Each JavaScript tutorial builds on a project and provides some JavaScript exercises to practice what we learned. By the end, we’ll learn how to create complex, interactive websites with HTML, CSS, and JavaScript and we’ll continue our journey to becoming a web developer and software engineer.
#javascript #javascripttutorial #javascriptfullcourse #js #javascriptcourse #webdevelopment #advancedjavascript #advancedjavascripttutorial #coding #codingtutorial #softwareengineer #softwareengineering #learntocode #supersimpledev #html #css #htmlcssjavascript #htmlcssjavascripttutorial
Content
0.3 -> Welcome to part two of this JavaScript
course where we're going to build a
4.2 -> website like Amazon. In
order to follow along,
8.37 -> make sure that you watch the first part
of this course or the main features
13.23 -> of JavaScript. You can find a link
to part one in the video description.
18.26 -> Let's get started.
25.23 -> In this lesson,
26.4 -> we're going to start the Amazon project
and we're also going to learn a very
30.75 -> useful technology called gi. So first,
34.56 -> let's take a look at the Amazon
project to see how it works.
39.06 -> We're going to go to our browser
and create a new tab at the top,
44.34 -> and we're going to type super simple dev
49.59 -> slash projects slash Amazon and
54.51 -> press enter.
58.29 -> So this is going to be the project
we're going to build in this course.
62.73 -> This is an e-commerce website
that looks like Amazon,
66.36 -> where we can see a list of
products on the homepage.
70.02 -> And then we can add these products
to a cart by clicking add to cart,
77.01 -> and then we can see our cart
by clicking the top right.
83.91 -> And on this page, it will show us
which products are in our cart,
88.2 -> and it will also show us
the cost of our order,
91.5 -> including shipping and taxes.
95.34 -> And once we're ready to create an order,
97.65 -> we can click this button to create
the order and it will take us to
102.54 -> this page, which shows us
a list of our past orders.
107.04 -> We can also track our order by
clicking this track package button
112.89 -> And it will take us to this page which
tells us the progress of our order,
116.8 -> whether it's preparing, it's
shipped and it's delivered.
121.83 -> So that's an overview of the
project we're going to build.
125.55 -> This is a complex multi-page website
where the different pages interact with
130.5 -> each other to create a full app.
134.01 -> The first thing we're going to do is
to download the starting code for this
137.88 -> project, we're going to create a new tab,
142.41 -> and here we're going to type
145.29 -> github.com/super
150.72 -> simple dev slash JavaScript
155.46 -> dash amazon dash project and press enter.
162.12 -> And on this page we can see the
starting code for the Amazon project.
167.58 -> So this code contains all the
HTML and CSS that we need.
172.71 -> The reason we're going to use
some starting code instead
of writing all of this
176.32 -> ourselves is because this
course is focused on JavaScript,
180.43 -> not HTML and css.
183.25 -> If we were to write all
of this code ourselves,
185.95 -> it would just take up too much time and
it would be an entire course by itself.
190.96 -> If you want to learn
how to create this code,
193.18 -> you can check out my
HTML and CSS full course,
196.65 -> which would teach you all
the skills that you need.
199.9 -> But for this JavaScript course,
202 -> we're going to start with
the HTML and CSS here,
205.78 -> and we're just going to focus on
adding JavaScript to this website.
210.43 -> So now let's download all of this code.
213.61 -> We can do that by clicking this
green code button here and then click
218.65 -> download, zip.
222.43 -> Once that's finished downloading, we're
going to go to our downloads folder.
226.45 -> So for me, it's this folder
right here called downloads.
232.45 -> And then we're going to unzip
this file by double clicking it,
238.09 -> and this will give us a folder
that contains all the code.
241.6 -> So we're going to select this
folder and move it to our desktop.
249.67 -> Next, let's go to our desktop.
251.92 -> So we're going to close this for
now and I'll hide the browser.
257.47 -> And on the desktop we're going to select
the folder that we downloaded and we're
262.03 -> going to rename this.
263.86 -> So at the end we'll remove
main and press enter
269.38 -> to rename it to JavaScript
Amazon project. Next,
273.76 -> we're going to take this folder
and open it in our code editor.
278.2 -> So let's open vs code
and we're going to click
282.52 -> file open folder,
287.32 -> and we're going to find the
folder that we downloaded. For me,
290.17 -> it's on the desktop and
it's this folder right here.
294.01 -> So we'll click this folder
and then click select folder,
300.43 -> and then we can close this
welcome message. Okay,
304.42 -> so now we have our starting code and
we're going to set up the project.
309.26 -> So first,
310.45 -> let's open our browser again
and we can close the GitHub
315.25 -> page as well as the tabs
for the previous lessons.
320.11 -> So we'll close these tabs right here,
323.56 -> but we'll leave the final
Amazon project open. Next,
327.67 -> let's go back to VS code,
331.09 -> and we're going to open
this project in our browser.
334.36 -> So we're going to select
this file, amazon dot html.
338.59 -> So this file corresponds
to the homepage here.
342.85 -> So let's select this file
and then right click Open
347.59 -> with live server.
351.22 -> So I'm just going to rearrange my windows
here so we can see these side by side.
357.68 -> And now we're ready to begin.
359.99 -> So let's take a look at the code that
we have to start with. As I mentioned,
365.15 -> all we have here is the HTML
and CSS for this website.
369.68 -> There's currently no JavaScript
at all on this page. So one thing
374.57 -> you'll notice is that we can actually
create almost all of the website using
379.19 -> just HTML and css.
382.01 -> We actually don't even need
JavaScript to create all of this.
385.94 -> We're able to create the header at the
top as well as three products to start
390.54 -> with.
391.55 -> And this shows that HTML and CSS
can pretty much create everything
396.53 -> that we see visually on the website.
399.71 -> Where JavaScript comes in is that
JavaScript makes this website interactive.
405.41 -> So right now if we click
the add to card button,
409.4 -> it looks pretty nice, but it
doesn't actually do anything.
412.7 -> And that's because we
haven't added JavaScript yet.
416.27 -> So the role of JavaScript is to make
our website interactive after we created
421.23 -> all the content and the styling. Now,
425.15 -> before we begin adding
JavaScript to this website,
428.6 -> we're actually going to take some time
and learn another very useful technology
433.1 -> called Git.
434.84 -> So Git is a technology that lets
us track changes in our code.
440.54 -> For example, do not follow along here,
443.6 -> but let's say that I'm working on this
website and I go into my code editor
448.74 -> and I change some code here.
451.52 -> So let's say that I add some code here,
455.66 -> And then in this file I'm
going to delete some code.
459.05 -> So I just select some code
and delete it and then save.
465.95 -> And then in this file, I'm going
to change some code at the bottom.
472.34 -> So now let's say that I made a
mistake and I want to undo all the
476.84 -> changes that I just made.
So how would I do that?
480.53 -> How would I remember all the code
that I changed in the different files?
485.42 -> So right now,
486.02 -> this is really difficult and this is
a problem that we run into in bigger
490.37 -> projects.
491.33 -> We're changing lots of code in different
files and it's really hard to keep
495.15 -> track of what code has changed.
And this is where Git comes in.
500.57 -> Git lets us track changes in our
code and it helps us solve this
505.28 -> problem. So here's what it looks like.
508.73 -> If I have Git set up in my project,
511.85 -> I can go into this section of
VS code. This section is for gi,
517.19 -> and then here Git will tell
me which files I changed.
521.63 -> And if I click these files,
523.25 -> it will tell me which lines I changed
and exactly which code I changed.
528.5 -> If I want to,
529.58 -> I can click this button to reverse
all the changes in this file.
535.8 -> I can also click here to reverse
all the changes in all the files.
542.58 -> So as you can see,
544.26 -> Git helps us track changes in
our code and it lets us easily
549.06 -> undo our changes if we need to.
552.49 -> And this technology is really useful
in bigger projects like this Amazon
557.4 -> project where we're going to be changing
lots of code in many different files.
562.59 -> So before we start this project, we're
going to learn how to set up and use Git.
568.77 -> The first thing we need to do
is to install Git. To do that,
573.78 -> we can go to this section of
VS code called source control.
579.18 -> Now if this section looks like this
with a button initialized repository,
584.43 -> that means you already have Git installed
and you can skip to this time in the
588.81 -> video. Otherwise, if you're on Windows,
592.05 -> you can click this button
and then click open and
596.86 -> then click this link to download Git.
601.08 -> Once it's finished downloading,
602.85 -> we're going to run the installer and
then just go with the default options.
609.07 -> If you're using a Mac,
you can click up here
613.65 -> and then type terminal and press enter.
618.93 -> And inside here you're going
to type get and press enter,
624.03 -> and then click this link and install Git.
632.67 -> Now if you run into any
issues with the install,
635.31 -> you can check the description for
the most up-to-date instructions.
641.13 -> All right, after installing gi,
we're going to restart VS code
650.02 -> and make sure you have
the Amazon project open.
654.33 -> And now if we go into the Git section,
657.96 -> it should look like this with a
button initialized repository.
663.45 -> So now that we've installed Git,
665.61 -> we're going to set up Git
in our Amazon project.
669.42 -> We can do that by clicking
initialize repository.
675.03 -> So a repository is just a folder
where changes are being tracked
680.67 -> by clicking Initialized repository.
This turns the current folder,
685.62 -> which is JavaScript Amazon
project into a repository.
690.21 -> And now all the changes inside
this folder will be tracked by Git.
695.46 -> So to start off, Git will tell us
that all of these files are new files,
701.04 -> and that's because we just
set up this repository.
704.37 -> So all of these files are considered
new changes that we're starting to keep
708.84 -> track of. Next,
711.99 -> we need to configure a
username and email with Git.
716.26 -> Now don't worry, this information
is not used anywhere online.
720.85 -> This is just for Git to add an
author to the changes that we make.
725.62 -> So to configure a username and email,
728.47 -> we're going to go to the top
and open the terminal menu
733.51 -> and click new terminal.
And then inside here
740.08 -> we're going to type GI config
744.49 -> user.name and double quotes.
748.99 -> Now if this looks familiar to you
and you've already done this before,
752.59 -> you can skip this step and the next step.
756.43 -> So between these double quotes, we'll
pick a username that we want to use.
761.23 -> So for me,
762.07 -> I'll use super simple dev
767.2 -> and press enter.
769.88 -> And we'll also configure
an email by typing GI
775.15 -> config user.email double
779.71 -> quotes. And between these double
quotes, we'll put an email.
784.48 -> So I'll
784.84 -> [email protected]
791.29 -> and press enter.
794.68 -> So now that we configured a username
and email, we can close this terminal.
803.17 -> Next,
803.95 -> we're going to save these changes into
Git so that Git will start tracking
808.78 -> any new changes that we
make to save these changes.
813.43 -> We're just going to type a message
here describing what we changed.
818.08 -> So let's just type the message,
820.51 -> add the starting files,
825.01 -> and then we're going to click
Commit. And if this popup shows up,
829.39 -> we're going to click yes.
832.75 -> So that will take all of our
changes and save them into Git.
837.67 -> So now that we've saved
those changes into Git,
841.03 -> any new changes that we add
will start showing up here.
845.26 -> So let's do an example and let's change
some code in a couple of different files
850.06 -> for practice. So let's click this
icon up here to show our code.
855.7 -> And let's go into Amazon
dot html and we'll just
860.5 -> change this title to intro to GI and
865.81 -> save.
And then let's go into checkout dot html.
871.87 -> And at the top, let's actually
remove the title and save.
877.75 -> And then let's open orders
dot html. And at the top,
882.94 -> let's just add something
to the title like page.
887.35 -> If we save
889.75 -> and then go into the source
control section or the GI section,
894.92 -> it will tell us all the changes that
we just made in our code in the three
899.15 -> different files. If we
click one of these files,
903.68 -> it will actually tell us exactly
which code that we changed.
907.85 -> So now it's very easy to undo this code.
911.03 -> We can just take the code on the left
and then copy paste it on the right to
915.47 -> undo this change.
917.42 -> We can also click here to undo
all the changes in this file.
924.26 -> And up here we can also click
this button to undo all the
928.88 -> changes in all the different files.
933.5 -> So that's an intro to Git.
935.72 -> It helps us keep track
of changes in our code,
939.02 -> and it's very useful for bigger projects
like this Amazon project where we're
943.79 -> going to be changing lots of
code in many different files.
948.02 -> If you want to learn
about Git in more detail,
950.57 -> you can check out my Git and GitHub
full course in the video description.
956.99 -> So now that we've set up Git,
let's start the Amazon project.
961.85 -> So first,
962.45 -> make sure that this section is empty
and we've reversed all the changes that
967.34 -> we've made when practicing Git. Next,
971 -> let's click this icon to show
our files and let's remove
976.1 -> the previous code.
979.82 -> And we're going to start in
the Amazon dot html file.
987.5 -> And let's close the GI page and
then open the tab for this file.
993.02 -> It should say Amazon dot html up here.
So we'll start
997.94 -> by creating the list of
products on the homepage.
1001.87 -> So right now we start with three
products. If we go to the final project,
1007.39 -> we're going to add the rest of
the products that you see here.
1011.32 -> And we're also going to make
this interactive so that
when we click the add to
1015.58 -> cart button, it will add
this product to our cart.
1021.34 -> So let's go back to our project.
And in order to create this,
1026.38 -> we're going to learn the
main idea of JavaScript.
1030.64 -> So when using JavaScript, we
usually do a three step process.
1035.71 -> The first step is to save the data,
1039.1 -> and then we generate the html.
1042.64 -> And finally we make it interactive.
1046.27 -> Let's go through each step to
create this list of products.
1051.13 -> So right now we have three
products on our page to start with,
1055.39 -> and we're going to add more products
to this page. So let's start by finding
1060.37 -> the HTML for one of these products
because we can always just copy and
1065.2 -> paste this to create another one.
1068.02 -> Now we're going to learn a very
important skill for bigger projects,
1071.78 -> which is how to find the code
for something on this page.
1076.13 -> So let's say that we want to find
the code for one of these products.
1080.45 -> We're going to right
click and click inspect,
1085.78 -> and this will bring up the console.
1088.64 -> And I'm actually going to click
these three dots and click this icon
1093.71 -> to move the console to a separate window
so that we can see the whole webpage.
1098.87 -> So now we're going to click
this icon in the top left
1103.55 -> and we're going to hover over and click
the thing that we want to get the code
1107.9 -> for.
1108.92 -> So I want to get the code for this entire
first product. So I'll click in this
1113.78 -> space and this will tell us that
the code for the product is in this
1118.77 -> code a diviv with a class
product dash container.
1123.68 -> So now we're going to take this class and
then search for it in our code editor.
1129.47 -> So let's open vs code,
1132.56 -> and we're going to typer F on
windows or command F on Mac
1137.99 -> to search for code in this file.
1141.02 -> So we're going to search for
the class that we saw earlier,
1144.8 -> which is product dash container.
1150.86 -> And this will take us to the
code for one of these products.
1155.66 -> So we can actually click the arrow
on the left to collapse this code,
1160.14 -> and we'll see another product container
which corresponds to the second product.
1165.68 -> We can click this arrow again and we'll
see a third product container which
1170.63 -> corresponds to the third product.
1173.78 -> So that's how we find the code
for something on the page. Now,
1178.1 -> to add another product to this page,
1180.59 -> one thing we can do is to take
this HTML and just make a copy of
1185.42 -> it at the bottom of the page. However,
1189.05 -> this is not a good idea because
if we add lots of products,
1193.4 -> we're going to be copying
this HTML over and over.
1197.45 -> And if we expand this,
1199.29 -> you can see that each product
has a lot of HTML code.
1203.72 -> So we don't want to be copying
all of this over and over again.
1207.62 -> It's going to be a lot of code and it's
going to be hard to manage. Instead,
1212.33 -> another strategy is to
generate this HTML code using
1217 -> JavaScript. So let's learn how to do that.
1221.06 -> Before we can do that, we need
to add JavaScript to this page.
1225.41 -> So we're going to create
a JavaScript file.
1228.77 -> So let's click up here to show our files.
And first,
1233.24 -> let's create a new folder to
contain all of our JavaScript
1238.07 -> code.
1239.18 -> So let's name this folder
scripts and press enter.
1245.09 -> Next,
1245.75 -> let's click on our folder and we're
going to click this icon to create a new
1250.47 -> file. And we'll name this file,
1253.8 -> amazon dot js, and press enter.
1258.87 -> So this will be the JavaScript
file for this HTML file.
1263.91 -> Next inside this JavaScript file,
1267.48 -> let's type the code console dot log.
1273.3 -> Hello, just to make sure
that this works and save.
1279.57 -> Next we're going to load this
JavaScript file in our HTML file.
1284.73 -> So let's go back to Amazon dot html.
1288.93 -> And then at the bottom of the
code, we're going to scroll down.
1293.37 -> And then right above the
closing tag for the body,
1297.24 -> we're going to add a script element.
1301.34 -> And we're going to give
this element an attribute,
1305.02 -> SRC or source equals double quotes.
And we're going to
1309.54 -> load this JavaScript file.
1312.06 -> So this JavaScript file is
in a folder called scripts.
1316.38 -> So here we're going to type
the folder, name scripts,
1320.62 -> and then a slash to go into
the folder and we'll load the
1325.29 -> file, Amazon dot js and save.
1330.99 -> So now let's go back to the
page and we'll open the console,
1335.91 -> right click inspect,
1338.62 -> and then click the console
and it should display. Hello.
1343.59 -> So now we're loading
JavaScript on this page.
1346.98 -> So let's open up vs code again,
1350.91 -> and we're going to generate all
of this HTML using JavaScript
1355.47 -> instead. So the first step in
our process is to save the data.
1361.17 -> What does this mean?
Data means information.
1365.55 -> So in this case, the data is the
information about our products.
1370.86 -> For example, the products name, the price,
1374.43 -> ratings and the image. So right now,
1378.15 -> the information about the
products or the data is inside our
1382.98 -> html. So in our code,
1386.52 -> if we click here to expand this element,
1390.15 -> you can see that the information
about the products, for example,
1393.6 -> the name and the image is inside the html.
1399.15 -> So what we need to do is to take
this data and save it inside
1404.04 -> our JavaScript so that
our JavaScript can use it.
1408.51 -> So let's go to our JavaScript file,
1411.51 -> and I'm just going to put it down
here so we can see it side by side.
1417.81 -> And we're going to move this
data into our JavaScript.
1421.86 -> So let's remove console dot log,
1424.62 -> and let's create a
variable to save the data.
1428.05 -> So type cons and let's name it products
1433.57 -> and make it equal.
1435.55 -> And now we want to create something
that closely matches our data.
1440.86 -> So in this case, we
have a list of products.
1444.58 -> So in here we're going to
create an array because an
1449.5 -> array represents a list.
1453.25 -> And now each product in
the list has many values,
1457.21 -> like an image, a name, and a price.
1460.91 -> So we're going to use an object
to represent each product
1465.73 -> because an object lets us
group multiple values together.
1471.85 -> So inside this array,
1474.49 -> we're going to create an
object using curly brackets.
1479.53 -> And now inside this object,
1481.42 -> we're going to save the data
for the first product. So first,
1485.95 -> let's find the data in our html.
1489.4 -> We're going to search for the product's
name by typing control F or command
1494.21 -> F,
1495.7 -> and we'll search for black and gray.
1501.25 -> And this will take us to the
code for the first product.
1504.73 -> So this is the name of the first product.
1507.97 -> So let's actually scroll up and
we're going to get the image for the
1512.77 -> first product. And we're going to take
this and save it in our Java script.
1517.63 -> So let's select this code.
1520.15 -> We're going to right click copy.
1525.1 -> And then inside this object,
1527.05 -> let's create a property
called image colon.
1532.3 -> And then here, right click and paste.
1536.91 -> And let's save this as a string.
1540.16 -> So at the front we'll type a single quilt,
1543.16 -> and at the end we'll type a single quilt.
1547.33 -> So we just saved the image
inside our JavaScript.
1551.47 -> Let's move on and save the
name inside our JavaScript.
1555.48 -> So we'll scroll down,
we'll select this code,
1559.51 -> and then right click copy.
1563.68 -> And in this object we'll type
comma and a property called
1568.39 -> name, colon a string,
1572.17 -> and we'll right click and paste.
1578.47 -> Next, we're going to save the
rating into our JavaScript.
1582.79 -> So we'll type comma,
1585.01 -> and let's create a property
called rating colon.
1590.35 -> For the rating, there's
actually two parts,
1593.2 -> the stars and the number
of ratings that it has.
1597.1 -> So let's actually group these two values
into an object because these values
1601.93 -> are related to each other.
1604.13 -> So in here we'll make
the rating and object,
1609.86 -> and each rating will have the stars.
1614.54 -> And for the socks, it's 4.5,
1618.86 -> and the rating will also have a count.
1622.85 -> And for the first product, it's 87.
1627.35 -> Next, let's save the
price into our JavaScript.
1631.73 -> So we'll create another
property called price.
1637.31 -> And for the first product,
the price is $10 and 90 cents.
1643.1 -> However,
1644.27 -> JavaScript has problems doing math
with decimal numbers or floats like
1649.13 -> this.
1650.21 -> So a best practice when calculating
money is to calculate in cents
1654.89 -> instead of dollars. So for this reason,
1658.16 -> we're going to save the price as cents,
1661.22 -> so we'll save it as 1090 cents.
As a
1665.87 -> reminder, $1 is equal to 100 cents,
1670.43 -> and because we're saving I cents,
1672.44 -> it's helpful to rename this
property to price cents
1677.33 -> instead. So now if we scroll up,
1681.35 -> we just saved all the information
or the data about the first product
1686.63 -> into our Java script. Next,
1690.02 -> let's go to the end here and type
comma and create another object.
1695.75 -> And we're going to save the data for
the second product into this object.
1701.18 -> So feel free to pause a video if
you want to try it yourself first.
1706.49 -> So again, let's find
this product in our html.
1710.66 -> We'll go to our HTML and
type Ctrl F or command F to
1715.37 -> search for code, and
we'll search for the name
1720.01 -> intermediate size basketball.
1724.43 -> So now this is the code
for the second product.
1727.79 -> We're going to scroll up a bit and
find the image for this product.
1731.99 -> And we're going to select
it, right click copy,
1737.69 -> and then inside the second object
will create an image property
1743.39 -> just like we did up here.
1746.42 -> And we'll save it as a string.
1749.03 -> And we're going to right click and paste
1754.1 -> and let's type comma,
1755.96 -> and we'll save the name
inside the second object.
1760.49 -> So we'll scroll down and select the name,
1765.62 -> and then right click
copy. And then down here,
1770.42 -> create a string and right click and paste,
1776.84 -> and we'll type a comma.
1778.82 -> And we'll save the rating colon object
1784.53 -> and will save the number
of stars, which is four,
1789.45 -> and the number of ratings that it has.
1792.75 -> Count colon 1 27.
1796.65 -> And finally we'll type a
comma and we'll save the price
1801.69 -> of the product in cents colon
1806.07 -> 2090 5 cents.
1809.46 -> So now the data for the second product
is saved inside our JavaScript.
1814.92 -> Let's go to the end and type
comma and create another object.
1820.53 -> And we're going to save the data
for the third product inside. Again,
1825.12 -> feel free to pause a video to try
it yourself first. So let's save the
1829.83 -> image. We'll find the code
for this product in our html.
1834.6 -> So up here we'll type Ctrl F or command F,
1839.52 -> and we'll search for the product name,
1842.13 -> which is adults plain cotton
1846.63 -> T-shirt.
1848.07 -> And scroll up and we're going
to save the image first.
1851.82 -> So let's select this right to click copy.
1856.5 -> And then down here,
create an image, property,
1859.89 -> colon and a string.
1862.29 -> And then right click and paste,
1866.55 -> and we'll create a comma. And let's
save the name in our Java script.
1871.26 -> Next, create a string, and
then we'll scroll down here,
1876.24 -> we'll select the name,
1879 -> right click copy, and then in here,
1884.01 -> right click and paste and comma,
1888.87 -> and we'll save the rating.
Hold in and object.
1893.85 -> And we have the number
of stars for this one,
1897.3 -> it's 4.5 colon and the count.
1902.91 -> And for this one, it is 56.
1908.25 -> And lastly,
1909.39 -> type of comma and will save the price in
1913.68 -> cents 7 99.
1919.68 -> And now let's save our
JavaScript file. Now,
1924.04 -> one really important thing is to make
sure that in each of these objects we
1929 -> have the same properties. So we
have the image, property, the name,
1933.84 -> property, and the same rating
property with the same structure.
1938.52 -> We want all of our objects to have the
same structure so that our code can
1942.84 -> handle each product the same.
1946.44 -> So that's what it means to save the data.
1949.47 -> We create something in JavaScript that
closely matches the data that we have on
1954.42 -> the page. By the way,
1956.85 -> this is called a data structure
because it structures or
1961.51 -> organizes the data, and this
represents a list of products.
1966.7 -> So we usually use a combination of
objects and arrays to create a data
1971.35 -> structure in JavaScript. So
now that we've saved the data,
1976.51 -> the next step is to use this
data to generate the html.
1981.85 -> Instead of writing the HTML manually
1986.32 -> to generate the html, we
can loop through this array.
1990.85 -> And for each of these products,
we're going to create some html.
1995.61 -> So let's go ahead and
loop through this array.
1998.44 -> First we'll scroll down to the bottom,
2004.08 -> and we'll type the name of
the array, which is products,
2008.64 -> and then we'll loop through this
array using a four each method.
2013.29 -> So we'll type dot four capital each
2017.94 -> brackets and inside will
create a function using
2022.86 -> brackets, arrow and curly brackets,
2027.15 -> and we'll give it a
parameter called product.
2032.31 -> So I'm going to move this back to the
top here so we can see more of the code.
2037.44 -> So the way that four each works
is that it takes each object,
2041.61 -> saves it in this parameter called
product, and then runs the function.
2046.23 -> So it takes the first object, saves
it in product, runs the function,
2050.92 -> takes the second object, saves the
product, runs a function, and so on.
2056.43 -> So for each of these products
or each of these objects,
2060.12 -> we want to create some html.
2064.11 -> So inside this function,
2065.76 -> let's create a variable const html
2071.22 -> equals and create a template
string using back ticks.
2077.55 -> And now inside this template string,
2079.8 -> we're basically going to copy all
the HTML for one of these products.
2084.99 -> So let's go back to our HTML
file and how do we find the
2090.06 -> HTML for one product? So
we learned this earlier,
2093.96 -> we can right click inspect
2098.85 -> and then click the top left icon
and click the element we want to
2103.65 -> get the HTML for. So this
HTML represents one product,
2109.1 -> and we can search for this class
product dash container in our code.
2114.6 -> So we'll go back to our VS
code inside the HTML file.
2119.97 -> We can control F or command
F to search for code,
2124.14 -> and we'll search for the
class product dash container.
2131.1 -> And let's go to the first result.
So we'll go to the first result,
2135.3 -> which is here,
2136.99 -> and let's copy all of the
code inside this element.
2141.82 -> One trick we can do is to click the
arrow on the left to collapse it,
2147.4 -> and then we'll select all this
code and we'll right click
2152.55 -> copy.
2154.38 -> And then inside our JavaScript
file inside the string,
2159.31 -> we're just going to right
click and paste the H T M L.
2164.95 -> And if we need to fix the formatting,
we can select all of this code
2170.41 -> and then press tab a few
times to add some indents.
2175.33 -> And here we can remove the
indent. And let's save.
2180.73 -> So now we're basically looping
through the array of products.
2185.53 -> And for each product,
2187.27 -> we're creating all of the
HTML that we had before.
2191.1 -> So we're generating this
html using JavaScript.
2196.33 -> Now let's console dot log this html
to make sure that it's working.
2201.25 -> We'll scroll down to the bottom. And here,
2205.78 -> let's console dot log the HTML that we
2210.55 -> just created.
2212.2 -> If we save and then go back to our page,
2216.55 -> right to click and inspect and click the
2221.38 -> console.
2223.12 -> You can see in the console that we
just generated all this html and
2228.04 -> we generated three of these.
Let's go back to our code
2233.89 -> and scroll up. Now,
2238.6 -> one problem here is that in
the HTML that we generate,
2242.86 -> we don't want to have the name
black and gray socks every time.
2247.12 -> For the second product, we want to have
a different name and a different image.
2251.71 -> And for the third product,
2252.79 -> we want to have a different
name and a different image.
2257.2 -> So how do we create slightly
different HTML for each product?
2262.99 -> To do that,
2263.92 -> we're going to replace this part
of the code with whatever the image
2268.51 -> property is. So for here,
2271.51 -> we're going to delete it and we're
going to insert the property image
2276.67 -> into this string.
So to insert values into a template
2281.29 -> string like this, we can use dollar open,
2285.76 -> curly bracket, close curly bracket.
2288.46 -> And then inside here we're
going to insert the product
2294.01 -> dot image property.
2296.68 -> So it's going to take whatever the image
property is of the product and put it
2301.27 -> inside this HTML code.
2304.33 -> Same thing for the name instead
of black and gray socks.
2307.84 -> Every time we're going to delete
this and then insert a value.
2313.63 -> We're going to insert
the product dot and will
2318.32 -> insert the name property
this time into this html,
2323.09 -> so.name.
2325.88 -> And we'll do the same thing for the other
pieces of data. So for each product,
2330.71 -> the number of stars could be different.
2333.47 -> So instead of 4.5 every
time, let's delete this.
2338.3 -> And we're going to insert
the products rating and
2342.86 -> stars.
2344.21 -> So product dot rating
2348.95 -> dot stars,
2353.51 -> one thing we have to watch out here
for is that this image has to exist.
2359.18 -> So right now,
2360.08 -> if we substitute the product
ratings dot stars into this,
2364.85 -> we will get this image.
2367.22 -> And if we go into our
files by clicking here and
2372.11 -> open the images folder and
then open the ratings folder,
2378.02 -> we can see that there's no
image called rating dash 4.5.
2382.43 -> Instead, there's an image
called rating dash 45.
2386.45 -> So if the rating is 4.5,
2389.18 -> we should convert it into 45
so that this image actually
2393.74 -> exists. Similarly, if the rating is four,
2398.3 -> we should convert it into 40 so
that this image actually exists.
2403.97 -> So in here,
2405.35 -> we should actually multiply this by 10
2410.21 -> so that this points to an
actual image that exists here.
2416.69 -> Next, let's move on
2421.04 -> and we'll work on replacing the count.
2424.25 -> So we'll remove this and
dollar curly brackets,
2428.86 -> and we'll replace it with the product dot
2433.76 -> rating dot and the count property.
2439.55 -> So count.
And finally,
2443.12 -> we're going to replace the
price for each product.
2446.51 -> So in here we're going to
remove this and substitute
2451.27 -> product dot price cents.
2456.44 -> And remember that this
is a number in cents,
2459.74 -> but when we display it on the page,
we want to display it as dollars.
2464.57 -> So we're going to divide
this by 100 because there are
2469.13 -> 100 cents in each dollar.
2472.79 -> So now in the HTML that we're generating,
2476.06 -> we're actually inserting the
details about each product.
2480.77 -> If we save and then go
back to the console,
2485.03 -> right click, inspect and console
2489.68 -> and look at the HTML that we generated,
2492.89 -> you'll that it's different
for each of the products.
2496.95 -> So that's how we use JavaScript
to generate all the HTML here.
2503.52 -> So now the last step is we're going
to combine all this HTML together
2508.47 -> into one string and put it on the webpage.
2512.22 -> Let's go back into VS code.
2515.91 -> And to combine all this HTML together,
2519.42 -> let's create a variable at the top for
combining all the strings together.
2524.88 -> So we'll type let, let's call it products,
2529.4 -> capital H T M L,
2532.26 -> and make it equal to an
empty string to start.
2536.46 -> And then each time we go through the loop,
2539.31 -> we're going to add this
HTML string up here.
2543.51 -> So instead of creating a new variable,
2546.57 -> we're just going to add products.
2549.93 -> HTML equals itself,
2553.77 -> products html plus this string.
2559.11 -> And remember,
2559.74 -> a shortcut for this is
to just type plus equals.
2565.86 -> So this is called the accumulator pattern.
2569.31 -> We loop through an array and each
time we're adding to the result,
2574.29 -> so we're accumulating the result.
2577.59 -> And now that we combine all
the HTML into this variable,
2581.94 -> we can scroll to the bottom
2585.03 -> and let's remove this line because
this doesn't exist anymore.
2590.19 -> And then after the loop,
2591.78 -> let's console dot log the products
2598.1 -> HTML and save.
2602.52 -> And now if we go into our console,
2606.36 -> we combined all the HTML for
all the products together.
2612.51 -> And now the last step is to take
this HTML and put it on the page,
2617.64 -> and we can do that using the dom.
So let's go back into our code.
2623.77 -> And to use the dom,
2625.68 -> we're first going to get an HTML
element from the page and put it
2630.33 -> inside our JavaScript. So first,
2633.3 -> let's go to our HTML file.
2636.96 -> And remember that a product dash
container represents one of these
2641.55 -> products here. So we're going
to look for this element here,
2646.23 -> a diviv product slash grid.
2648.78 -> So this element contains
all of our products.
2652.98 -> So we're going to use the
dom to take this element,
2656.13 -> put it into our JavaScript and
replace all the HTML inside.
2661.69 -> So to put this element in our JavaScript,
we're going to give it a class.
2667.02 -> So let's add a class JS dash products,
2672.22 -> dash grid and save.
2676.69 -> And let's go into our JavaScript.
2678.97 -> So I'm just going to move
this down to the bottom again,
2681.46 -> so we can see it side by side.
2685.78 -> And then inside our
JavaScript at the bottom,
2689.62 -> we're going to use the
DOM by typing document,
2693.4 -> dot query, selector brackets and a string.
2698.86 -> And we're going to type.to select a class,
2702.16 -> and we're going to select
JS dash products dash
2706.84 -> grid.
2708.1 -> So the dot means we're going
to look for a class called Js
2712.96 -> products grid, which is right here.
2715.81 -> And it's going to take this element
and put it inside our JavaScript.
2721.3 -> And now we can change the
HTML inside the element.
2726.22 -> To do that, we'll use the
property dot inner capital
2732.29 -> html and we'll change it
to the products HTML that
2737.2 -> we created above. So products, capital,
2742.53 -> html and save.
2746.44 -> So it's not going to look any different,
2749.2 -> but now we're actually generating
all the HTML with JavaScript and then
2754.12 -> using the DOM to put
this HTML inside here.
2758.59 -> So now we can actually delete all of
this because we're generating this
2763.6 -> with JavaScript.
2768.16 -> If we save this file,
2770.62 -> our products will still be here because
even though we deleted the html,
2775.51 -> we're now generating it with Java script.
2778.96 -> Now one problem that I see here is
that the price shows up with one
2783.58 -> decimal, but we actually
wanted to show up as 10.90.
2788.92 -> So let's scroll up to this part in
the code. So we'll scroll up here
2795.31 -> and look for price cents.
2797.89 -> And the reason this happens is
because price cents is 1090.
2802.21 -> So if we divide that by 100,
2804.7 -> the result is actually 10.9.
2808.27 -> If we want to force this to
show two decimals, like 10.90,
2813.52 -> we actually have a special method
that we can use with a number.
2818.71 -> So here we can add brackets around
this to make sure we calculate this
2823.45 -> number first.
2825.07 -> And numbers have a special
method called dot two capital
2830.23 -> fixed and brackets. So to fixed,
2834.31 -> we'll convert a number into a string,
2837.46 -> but we can tell it how many decimals
we want between the brackets. If we
2842.36 -> type two, it will show two
decimals. So if we save,
2847.24 -> now it shows correctly on the page.
2850.25 -> If you're wondering how
to find this method,
2852.77 -> you can find it by searching
in Google or using an AI tool.
2858.68 -> Okay,
2859.58 -> let's take a break here and take a look
at Git to see all the changes that we
2864.08 -> made.
2865.22 -> So I'm going to expand this here and
we're going to click the GI section,
2871.28 -> and it's going to tell us
that we changed two files.
2874.49 -> If we click the HTML file,
2878.66 -> Git will tell us that we deleted all
of the HTML code for the products,
2883.61 -> which is correct. If we
open the JavaScript file,
2888.41 -> Git will tell us that we added
all of this new JavaScript code,
2892.79 -> including the data and the
loop for generating the html.
2898.1 -> So Git helps us track all
of the changes that we made.
2902.6 -> So now let's actually take these changes
and save them into Git so we can track
2907.52 -> new changes. At the top,
2910.46 -> let's type a message to describe
the changes that we made.
2914.51 -> So let's type generate HTML
2919.1 -> with JavaScript and click Commit.
2924.23 -> And yes, if this shows up,
2931.16 -> Thanks for watching this course so
far. If you find this content valuable,
2935.51 -> you can support this
channel by liking the video,
2938.48 -> clicking subscribe below the video
and recommending this course to your
2943.13 -> friends. Thanks again, and
let's continue with the course.
2948.53 -> So now let's talk about the
benefit of generating the html.
2953.48 -> So let's close Git for now, and
I'll move this to the side here.
2959.45 -> So the benefit of generating the HTML is
that if we want to add another product,
2964.93 -> we don't have to copy paste
all of this html. Again,
2969.62 -> all we need to do is to go
up to the data and add the
2974.27 -> data for a new product.
2976.91 -> So let's do an example and add
a fourth product to our list.
2981.8 -> So at the end here,
2983.08 -> let's type a comma and
create another object.
2988.94 -> And let's go to the final
project and we'll scroll down
2994.22 -> to this fourth product here.
2996.59 -> So we're going to take the data
about this product and save it in our
3000.94 -> JavaScript. So first,
3003.46 -> let's create a property
image colon string,
3008.77 -> and we're going to take this image
and put it in here. To do that,
3012.91 -> we can right click the image inspect,
3018.1 -> And then we're going to
copy this source attribute.
3020.98 -> So we can double click it and
we can select this attribute,
3026.32 -> right click copy.
3029.81 -> And then inside our JavaScript,
3032.3 -> we're going to right click and paste.
3037.07 -> And at the end we'll type
a comma and create the name
3041.6 -> property and a string. And
we're going to select this name,
3047.69 -> right click copy, and then in here,
3051.83 -> right click paste
3056.05 -> and a rating property, colon and object.
3060.23 -> We have the stars, which is five,
3063.77 -> and the count,
3066.41 -> which is 2,197.
3071.24 -> And at the end,
3072.56 -> we're going to add the price in cents
3077.12 -> colon 1899 cents.
3082.45 -> So now if we save this JavaScript
file and then go back to our
3087.41 -> project and we scroll down,
3091.43 -> you'll notice that it automatically
added the fourth product,
3095.72 -> and all we had to do was to add
another object to our array,
3100.34 -> and then our loop will handle
generating all the HTML for us.
3105.5 -> So you can see that generating
the HTML with JavaScript is a lot
3110 -> easier than copy pasting
this HTML every time,
3114.17 -> and that's why we use
this technique. Next,
3118.28 -> we're going to add the rest of the
products in the final project. Now,
3123.17 -> one thing we could do is to
manually copy this over one by one,
3127.61 -> but to make this easier,
inside the starting code,
3130.91 -> I've actually created a file
that contains all the data.
3135.08 -> So if we scroll up and close this for now,
3139.25 -> and we're going to go to
this data folder and open it.
3143.18 -> And inside this folder,
3144.71 -> I've provided a JavaScript
file called Products Js.
3149.21 -> And in here it contains an array
with the data for all the products in
3154.16 -> the final project, so we don't
have to create it ourselves.
3159.29 -> So now let's use this
products array in our code.
3163.22 -> So first we need to load this
file on our page. We can go to
3168.15 -> our Amazon dot html file and
then scroll down to the bottom.
3174.35 -> And then at the bottom
in the script element,
3178.25 -> we're going to add another script
element above it. So we'll type script,
3183.86 -> and then the source is going to
be equal to this JavaScript file.
3189.08 -> So we'll type the folder
called data and then a
3193.46 -> slash to go into the folder
and load the file products
3199.01 -> dot js.
3201.2 -> So what this does is that it
will run the files one by one
3205.71 -> first, it will run the products
js file and create the array,
3210.42 -> and then it will run our
Amazon JS file and generate the
3215.22 -> html. So back here,
3218.7 -> let's save and then go back into Amazon
3223.17 -> js.
3225.48 -> So now instead of using
our own products array,
3229.26 -> let's just use the products
array in this file.
3233.91 -> So we'll go back to Amazon JS
and we're just going to delete
3238.74 -> this array.
3240.27 -> So over here we can click this
arrow to collapse the code,
3245.28 -> and I'm going to select
it and then just delete it
3250.35 -> and save.
3252.78 -> So now this variable will
be coming from this file.
3257.73 -> If we go back to our
project and scroll down,
3262.26 -> you can see that we created all
the products in our final project.
3267.81 -> So the way this works is that
inside our Amazon dot html,
3273.12 -> we're loading two JavaScript files.
3275.88 -> This JavaScript file
creates all the products,
3278.86 -> and then this JavaScript file loops
through the products and creates all the
3283.89 -> H T M L. So keep in mind that
script elements are loaded
3288.48 -> one by one. So the order matters.
3291.81 -> We have to first create the products
array and then we can use it.
3296.28 -> If these two were reversed,
then the code wouldn't work.
3302.13 -> So this is how a real
world website is created.
3305.91 -> We don't write all the HTML manually.
3309.39 -> Instead we save the data for the
website in a data structure like
3313.98 -> this.
3315.18 -> And then we use JavaScript to
generate the HTML using the
3320.07 -> data.
3321.45 -> So now let's go into GI and
look at our most recent changes.
3326.46 -> So here it will tell us that we
changed two files in the Amazon dot
3330.99 -> html file, we added a script element,
3334.68 -> and then in the Amazon JS file,
3337.56 -> we deleted the products array
that we created on our own.
3343.08 -> So let's type a message
to describe our changes.
3346.41 -> Use products dot js file
3351.3 -> and then click commit. And yes.
3357.06 -> Now one other thing I want to show you
about Git is if we go back to our files
3361.68 -> here and then open Amazon dot js.
3365.64 -> Git has a really useful
feature called a history.
3369 -> So we can open this timeline
section and then click this filter
3373.71 -> icon and only check get history.
3378.84 -> And now you can see that we actually
have a history of all of our changes for
3383.5 -> this file. So if we click the
first line in the history,
3388.27 -> it will show us that here we added
all of the code and then the second
3393.19 -> line in the history, we
deleted this part of the code.
3397.84 -> So this gives us a step-by-step
history of all the changes in our code.
3403.72 -> And in get this is
called a version history.
3407.8 -> You can also see that the messages that
we created when we commit show up here
3413.29 -> and these messages help us understand
what was changed in each version in the
3418.12 -> history. All right, so
let's close this for now.
3425.08 -> And the last step in the process
is to make it interactive.
3430.33 -> So let's take a look
at our current project.
3434.35 -> So we'll go here and open this tab and
3439.03 -> let's scroll up.
3441.52 -> So right now if we click
the add to cart button,
3445.45 -> it doesn't do anything.
3447.58 -> So we're going to add some JavaScript to
make this interactive and actually add
3451.96 -> this product to a cart. So first,
3455.56 -> let's find the add to
cart button in our code.
3459.37 -> We'll go back to our Amazon JS file.
3463.63 -> Close this for now,
And to find the code,
3467.47 -> we can actually just search the
text in the button. So inside here,
3472.51 -> let's type Ctrl F or command F,
3476.02 -> and we're going to search
for the text add to cart.
3481.87 -> And this will take us to
the code for this button.
3485.68 -> So now we're going to add an event
listener to this button and make it do
3489.82 -> something when we click it
to add an event listener,
3493.93 -> we're first going to add a class js dash,
3498.82 -> add dash two dash cart,
3503.11 -> and then we're going to use the dom to
add an event listener to this button.
3509.14 -> So down here
3511.51 -> After we've put this HTML on the page,
3514.96 -> we're going to use document dot query
3519.91 -> selector, all brackets,
3524.08 -> and then a string a dot.
3526.99 -> And we're going to select
all the JS dash add two cart,
3531.25 -> so JS dash add dash two dash cart.
3536.83 -> So this will give us a list of all
the add to cart buttons on the page,
3542.32 -> and then we can loop
through each of the buttons.
3545.35 -> So we can type dot four each
3549.88 -> brackets.
3551.44 -> And then in here we'll give it
a function bracket arrow and
3556.48 -> curly brackets and a parameter.
3560.26 -> So the parameter is going to be the
button element that we got from the
3565.01 -> page. So now for each of these buttons,
3568.46 -> we're going to add an event listener.
3570.59 -> So we can do something when we
click the button to do that,
3574.61 -> we'll type button dot add event
3579.62 -> listener brackets,
3582.8 -> and then the event that
we want to listen for,
3585.56 -> which is the click event.
And then a function that we
3590.45 -> want to run when we click
this button. So brackets,
3594.65 -> arrow and curly brackets. So for now,
3598.46 -> let's just console dot log a message
to make sure that this is working so
3603.38 -> we'll, console dot log,
3607.31 -> added product and save.
3612.95 -> And we can also remove this line for
now because we're not using it and save
3617.81 -> again.
3618.98 -> And then now on our page we're
going to click add it to cart and
3623.82 -> then look inside our console.
3625.64 -> So right click inspect
and click the console
3631.67 -> and it displays added product. So now
whenever we click one of these buttons,
3637.1 -> it will display this message.
3639.65 -> So that means that our code
here is working correctly.
3644.33 -> Next, we need to figure out how
to add the product to a cart.
3649.43 -> And we need to figure out what this
looks like. If we think about a cart,
3654.41 -> A cart is basically just a list.
And inside this list we have the
3659.33 -> product that we want to buy and the
quantity or the number of this product
3664.22 -> that we want to buy.
3665.78 -> So we can actually represent
this in JavaScript as an array.
3670.52 -> Inside the array we can have some objects
and each object is going to contain
3675.53 -> the product and a quantity.
3678.5 -> So we can use something like
this to represent our cart.
3682.97 -> So let's go ahead and
create this cart array.
3686.72 -> Now to keep things cleaner,
3688.7 -> let's actually separate
the cart into its own file.
3693.02 -> So we'll click up here to show our files,
3696.29 -> and then we'll go into the data folder
and click this folder and click this
3701.18 -> icon to create a new file.
3704.6 -> And we'll name this file
cart dot js and press
3709.61 -> enter.
3711.5 -> So this file will contain all
the code relating to the cart.
3716.09 -> And the reason we separated
is to keep our code organized,
3719.84 -> each file will focus on one
particular thing. So inside
3724.73 -> cart js, let's create our cart.
3728.46 -> So we can just create a
variable constant cart
3733.79 -> and make it equal to an array.
3736.94 -> So we'll start off with an empty
cart and let's save this file.
3742.47 -> And now we need to load this
file into our html so we can
3747.33 -> open amazon dot html. And again,
3751.71 -> we can just add another script element.
3755.01 -> So let's add it at the top to make sure
we load the cart before running the
3759.84 -> rest of our code.
3761.55 -> So we'll type less than
script and the attribute
3766.29 -> source,
3768.18 -> and we'll load the data
folder slash to go inside cart
3773.04 -> dot js and save.
3777.18 -> So now it will run this file at
the start and it will create an
3781.92 -> array representing our cart.
So now that we have a cart,
3787.02 -> we need to figure out what
happens when we click a button,
3790.74 -> how do we add a product to this cart?
So let's go back
3795.51 -> into Amazon JS and we'll
figure this out together.
3800.49 -> So down here, this is the function
that is run when we click the button.
3806.16 -> So in here we had to figure out how
to add this product to the cart.
3811.47 -> One way to do this is to just
add an object to the cart like
3815.97 -> this. We have the product's name
and the quantity that we want.
3820.83 -> However, when we click this button,
3823.83 -> how do we know which product
we're supposed to add to the cart?
3828.21 -> To solve this problem,
3829.65 -> we're going to learn a feature
of HTML called a data attribute.
3835.26 -> A data attribute is just
another HTML attribute
3839.91 -> except the purpose of a data attribute
is that it allows us to attach
3844.56 -> any information to an HTML element.
3848.67 -> So let's do an example and
create a data attribute.
3854.01 -> We're going to scroll up to the
add to card button here. And
3858.87 -> then at the end of the
opening tag after the class,
3862.74 -> we'll type enter,
3864.63 -> and then we're going to type data dash.
3868.4 -> And then we can type
any name that we want,
3871.68 -> like product dash name,
3876.24 -> and we'll make it equal to double quotes.
3879.9 -> And then inside the double quotes,
3881.91 -> we're going to put the products
name like a basketball or a t-shirt.
3887.07 -> So to do that we're going to insert
using dollar and curly brackets,
3892.57 -> product dot, name, and save.
3898.8 -> So now let's inspect the HTML on the page.
3903.06 -> We're going to right click on this
add to card button and inspect.
3909 -> And then in the elements tab it will
show us the HTML for the button.
3914.07 -> And now you can see that each of these
buttons now has a data attribute called
3919.18 -> data product dash name, and
it's equal to the product name.
3925.84 -> So before we continue,
3927.34 -> let's learn the syntax rules
for the data attribute. A data
3932.17 -> attribute is just an HTML attribute.
3935.63 -> That means it follows
the same syntax rules.
3939.43 -> We have an attribute name on the left
and an attribute value on the right.
3945.16 -> The one difference is that data
attributes have to start with data
3949.75 -> dash, and then we can give
it any name that we want,
3953.69 -> like product dash name,
3956.44 -> but we have to make sure to
separate the words with a dash.
3960.16 -> This is also known as kebab case.
3964.66 -> So the purpose of a data attribute is
that we can attach any information to
3969.64 -> an element. So here we attached
the product name to this button,
3974.83 -> but we can also attach the product's
image or the price and so on.
3980.23 -> So now that we attached the
product's name to this button,
3984.16 -> when we click this button,
3985.9 -> we can actually get the name and this
will tell us which product we should add
3990.64 -> to the cart. So let's see what
this looks like in our code.
3995.89 -> So we'll go to our code, and
then when we click the button,
4001.29 -> we're first going to get the
product name from the button.
4005.76 -> To do that, we're going to
type button and then the
4009.63 -> property.data set.
4015.3 -> So the data set property basically
gives us all the data attributes
4020.25 -> that are attached to this button. So
now we're able to get the product name.
4025.8 -> So let's console dot log this
to see what it looks like,
4029.14 -> console dot log, open bracket,
4033.93 -> close bracket, and save. And then in here,
4038.7 -> let's click the basketball's
add to cart button,
4042.78 -> and we'll go into our console.
4044.7 -> Right click inspect and console.
4051.18 -> And I'm just going to move this to the
left so we can see it side by side with
4055.41 -> our code. So this is what the
dataset property looks like.
4060.87 -> It gives us all the data attributes
that are attached to the element.
4065.34 -> So in our case, we have the product name.
4068.73 -> Now this works just like an object.
So to access the product name,
4073.95 -> we just have to type dot product
4078.45 -> capital n name.
4081.33 -> So notice that the name gets converted
from kebab case to Camel case.
4086.36 -> So now if we save,
4089.49 -> and let's go back to our website
and click the add to cart
4094.44 -> button,
4096.28 -> it will get that data attribute from the
button and display it in the console.
4102.07 -> If we click the socks add two cart button,
4105.58 -> this will tell us which product
we should add to the cart.
4109.96 -> So now that we have the product name,
4112.27 -> let's actually put this into our cart.
So let's go into our code.
4118.42 -> And here let's save the product
name in a variable called
4123.34 -> Cons. Product name equals.
4129.82 -> And then here we're going
to add this to the cart.
4134.89 -> So we already created
a cart variable here,
4138.19 -> so we're just going to type the
variable cart and we're going to dot
4143.17 -> push into the array.
4145.75 -> And let's push an object because we said
we wanted a product and the quantity.
4151.47 -> So we'll add an object
containing the product
4155.95 -> name,
4157.27 -> which is this variable product name
4162.58 -> and a quantity of one.
4167.32 -> And that's pretty much it.
4169.09 -> We first attached the product name
to the button using a data attribute.
4174.64 -> And then when we click the button,
we got the product name out,
4179.68 -> and then we add the product
to the cart. So at the bottom,
4184.24 -> let's console dot log the
cart to see what it looks like
4189.85 -> if we save.
And then go here and open the
4194.3 -> console, right click inspect console,
4200.74 -> and let's add a basketball to
our cart. So we'll click here.
4205.27 -> And then in our cart,
4206.89 -> we now have a basketball
with a quantity of one.
4211.9 -> So now let's add another
product to our cart.
4215.17 -> We'll go to the T-shirt
and click add to cart.
4219.81 -> And now we have two products in our cart,
4223.33 -> one basketball and one t-shirt.
4227.18 -> So now we're successfully
adding products to a cart.
4231.64 -> Next, let's try adding one t-shirt. Again,
4235.42 -> if we click add to cart,
4237.88 -> and unfortunately this
doesn't look quite right,
4242.26 -> the T-shirt product is repeated
twice and each of them has a quantity
4247.12 -> of one.
4248.53 -> What we actually want to do is we want
one t-shirt product with a quantity of
4253.3 -> two because this is how we're going
to display it on the cart page.
4258.76 -> So let's figure out how to achieve
this and we'll do this step by step.
4264.05 -> First, what check if the
product is already in the cart.
4268.57 -> If it is in the cart, we'll just
increase the quantity by one.
4273.32 -> If it's not in the cart,
we'll add it to the cart.
4277.16 -> So let's convert these steps into code.
4280.73 -> So the first step is to check if
a product is already in the cart.
4285.44 -> So how do we do that?
Let's go back to our code.
4290.22 -> And one way to check this is
we can loop through our cart
4295.07 -> and look for a particular
product name. So up here,
4300.32 -> let's create some new lines.
4302.3 -> And let's check if this product
name is already in the cart
4306.98 -> array. So what type cart?
4311.03 -> And we'll loop through the
cart using dot for each
4316.61 -> brackets. And then inside we'll
give it a function, brackets,
4321.68 -> arrow and curly brackets.
4324.29 -> And we'll give this a parameter
and let's just call it an item.
4329.6 -> So an item will contain a
product name and a quantity.
4334.7 -> So we want to see if this product
name is already in the cart.
4339.86 -> So we're going to check if the product
4344.45 -> name over here is equal
to this item's product
4349.43 -> name.
4350.27 -> So a type equals the item dot product
4356.39 -> name and curler brackets.
4360.11 -> So if the product names match,
4362.78 -> that means this product
is already in the cart.
4366.62 -> So let's save this matching item in
a variable so we can use it later.
4372.47 -> So we're going to create the variable
outside for each loop and outside of
4377.45 -> its scope.
4378.98 -> So we'll type let matching capital I item,
4384.74 -> and we'll make it undefined to start.
4387.89 -> And if we find a matching item,
4390.68 -> we're going to save it in this variable.
4393.68 -> So matching item equals
4398.81 -> item.
4400.46 -> So this is how we figure out if
a product is already in the cart.
4405.59 -> Now the next step is if the
product is in the cart will just
4410.12 -> increase its quantity by one.
4413.33 -> So we'll type if matching
4418.16 -> item and curly brackets.
4421.34 -> So we can just type matching item
here because if we did find a matching
4426.29 -> item, it will be an object,
which is a truthy value.
4431.3 -> So in here we're going to increase
the matching items quantity by one,
4436.67 -> using matching item dot quantity
4442.13 -> and will plus equals one. And finally,
4446.93 -> if the product is not in the
cart, we'll add it to the cart,
4451.44 -> which is basically what we do here.
4454.17 -> So at the end we can just
type else if we did not
4459.06 -> find a matching item, curly brackets,
4462.99 -> and we'll move this
code. So we'll select it,
4466.8 -> right click cut, and then in here,
4471.84 -> right click and paste
4475.86 -> and remove the new lines and save.
4480.93 -> So now let's go into our project.
We'll right click,
4485.01 -> inspect the console
4488.03 -> and let's click the add it to
cart button for the basketball.
4492.39 -> So we'll click this.
4494.04 -> And then in our cart we have a
basketball with a quantity of
4498.75 -> one. Let's add a t-shirt.
4503.31 -> And now we have one T-shirt
with a quantity of one.
4507.68 -> And if we click add to
cart on the t-shirt again,
4511.86 -> now we have a T-shirt
with a quantity of two.
4516.21 -> So that's how we solve the problem
of combining the quantities together.
4520.98 -> Now there's one last problem
that we have to solve here,
4524.19 -> which is it's not good to use the
product name to identify the product
4529.02 -> in the cart because in
an e-commerce website,
4532.5 -> we might actually have two products
that have the same name but from
4537.1 -> different brands. So to fix this,
4539.97 -> we should give each product an id,
4542.92 -> and this ID should be unique,
4545.46 -> so no two products will have the same id.
So let's use an
4550.26 -> ID to identify these products.
Instead of using the name,
4555.36 -> we'll go back to our code.
4558.24 -> And if we open our files
here and go to Data Products
4563.4 -> js,
4565.26 -> you'll notice that I've actually added
an ID for each of these products.
4570.21 -> And this ID is unique.
4572.31 -> So I added it here to save us a bit of
work so we don't have create the IDs
4576.96 -> ourselves. So now let's just
use this ID in our code.
4582.15 -> So we'll go back to Amazon js,
4587.34 -> and then in here, instead
of using the product name,
4591.96 -> we're going to use the products
ID to identify it in the cart.
4597.09 -> But first we need to attach the ID
to the button. So we'll scroll up,
4602.76 -> and instead of a data dash
product name attribute,
4607.14 -> we're going to use a data
product dash ID attribute,
4612.24 -> and we're going to save
the products ID instead.
4617.61 -> And now down here,
4619.02 -> we're going to grab the ID
from the button to do that,
4623.88 -> we'll change this to product id.
4628.53 -> So remember this gets converted
from kebab case to Camel case,
4633.97 -> and we'll rename this variable product id.
4640.06 -> And then here we'll compare Product ID is
4644.77 -> equal to the items product id.
4649.75 -> And lastly, when we add to the cart,
4652.57 -> we're just going to add
the product ID to the cart
4660.46 -> And save.
4663.58 -> So now if we go to our website
and click add to cart and
4668.32 -> check our console
4672.88 -> and expand this,
4675.13 -> you can see that we're saving the
product ID so that two products with the
4679.9 -> same name will be able to
be added to the cart. Okay,
4684.71 -> so that's how we make the added
to cart button interactive.
4689.95 -> And now we finished
all three steps. First,
4693.55 -> we save the data for the
website in our JavaScript,
4697.48 -> and then we use this data
to generate the html.
4701.95 -> And finally, we made it interactive.
4705.02 -> And this is the main idea of JavaScript.
4708.7 -> This is generally how we use
JavaScript on a real website.
4714.61 -> Now let's go back to Git.
4716.2 -> So we'll open our code editor
and open the Git section
4721.09 -> and review the changes that
we made. So we'll expand it,
4725.47 -> and then in the HTML file,
4727.96 -> we just added the cart js file.
4731.53 -> And then in here we just
created the cart array.
4735.76 -> And in our Amazon JS file,
4738.88 -> we basically added a data
attribute to the button.
4742.82 -> And then down here we made the
button interactive by adding
4747.7 -> an event listener.
4750.55 -> So now let's save these changes into Git.
4754.12 -> We'll type a message to
describe our changes.
4757.63 -> Make add to cart button,
4761.52 -> inter interactive, and click commit.
4769.48 -> All right, so let's close this for now.
4773.2 -> And the last feature we're going to create
in this lesson is we're going to make
4777.82 -> this cart quantity in the
top right interactive.
4781.47 -> So we'll do this step by step. First,
4785.65 -> we need to calculate the quantity or
the total number of products in our
4790.27 -> cart, and then we're going to put
that quantity on the page here.
4795.52 -> So how do we calculate the
total quantity of the cart?
4799.57 -> So remember that the cart is an
array of objects and each object has
4804.56 -> a quantity. So to calculate
the total quantity,
4808.13 -> we can loop through this array
and add the quantities together.
4813.32 -> Let's go into our code and
we'll open Amazon dot js.
4818.99 -> And let's scroll to the bottom.
4821.72 -> So here after we update our card,
4824.31 -> we're going to calculate
the total quantity.
4828.02 -> So let's create some new
lines. And as we saw earlier,
4831.59 -> we can loop through the cart array.
So we'll type cart
4837.05 -> dot four each brackets and a function
4842.83 -> arrow and curly brackets.
4845.87 -> And we'll give this a parameter item.
4849.32 -> So this is going to loop through
each object in the cart. Next,
4854.27 -> we need a variable to
store the total quantity.
4857.99 -> So let's create a variable up here.
4860.87 -> We'll type let and name it cart quantity
4866 -> and make it equal to zero to start.
4869.42 -> And then as we loop through this array,
4872 -> we're going to add the items
quantity to this variable up here.
4877.49 -> So here we can type cart quantity plus
4882.41 -> equals the items dot quantity.
4887.93 -> So this will add up all the quantities
and save it in this variable.
4893.03 -> So at the bottom,
4894.29 -> let's console dot log
the cart quantity to make
4899.22 -> sure that this is working.
4901.13 -> So we'll save and go back
to our page and open the
4905.81 -> console right to click
inspect and console.
4911.75 -> When we click add to cart on the
basketball, the quantity will be one.
4917.42 -> If we click add to cart on the
T-shirt, the quantity will be two.
4922.43 -> If we click again, the
quantity will be three.
4926.69 -> So looking at the cart,
4928.76 -> it basically added one basketball
and two T-shirts to get a
4933.74 -> total of three.
4935.78 -> So that's how we can calculate
the total quantity of the cart.
4940.37 -> So now that we have the total quantity,
we're going to put it on the page here,
4945.74 -> and we can do this using the dom.
So let's go back to our code.
4952.58 -> And to use the dom,
4954.32 -> we first need an HTML element where
we're going to put this quantity.
4959.39 -> So let's find the HTML
element for this number here.
4963.38 -> We can go back to our page.
4965.6 -> We're going to right click
this number and then inspect.
4971.36 -> And then we can click
this icon in the top left,
4975.74 -> hover over this number and click it.
4979.64 -> So this will tell us that the code for
the number is this code right here,
4984.5 -> a diviv with a class cart quantity.
4987.84 -> So now we're going to search for
this class cart quantity in our code.
4992.79 -> So let's go back to our code
4995.85 -> and let's go to the Amazon dot
html file because the header
5000.77 -> is still in this file.
5002.89 -> And we'll type Ctrl F or
command F to search for code,
5007.82 -> and we'll search for cart dash quantity,
5012.47 -> and it will tell us that it's
this line right here. So next,
5016.73 -> to use the dom, we need to get
this element into our JavaScript.
5021.86 -> To do that, we're going to
add a class to this element.
5025.88 -> So let's add the class js dash cart dash
5030.71 -> quantity and save.
5034.7 -> Now let's go back to our JavaScript file,
5037.79 -> and I'm just going to move it down
here so we can see it side by side.
5045.77 -> And we'll scroll down after
we calculate the quantity,
5050.36 -> let's get this element into
our JavaScript using the dom.
5054.92 -> So at the bottom we'll
type document dot query
5059.47 -> selector brackets,
5062.36 -> and a string will start
with a dot and the class
5066.53 -> js dash cart dash quantity.
5071.72 -> And now that we have this element,
5073.7 -> we can change the HTML
inside using the property
5078.44 -> dot inner capital H T M L,
5083.33 -> and we'll make it equal to
the cart quantity that we
5088.02 -> calculated above.
5090.29 -> So let's save and go back to our website.
5094.91 -> And let's click the add to
cart button for the basketball.
5099.08 -> Now it will update the quantity to be one.
5102.41 -> Let's click the add to cart
for the t-shirt. It will
update the quantity again,
5107.27 -> and it will be two. If we click it
again, it will increase to three.
5113.03 -> So now the cart quantity
up here is interactive. The
5117.93 -> last thing we need to do is
we'll go back to our html.
5122.3 -> And instead of starting at three, the
cart quantity should start at zero.
5128.12 -> So let's save. And now the
cart quantity starts at zero.
5133.7 -> If we click add to cart,
it will increase to one.
5137.93 -> So that's how we create this cart
quantity feature in the final project.
5143.15 -> So now we're finished all the features
that we're going to do in this lesson.
5148.16 -> Let's go back to our JavaScript, and
I'm just going to move it back up here.
5152.9 -> And let's clean up this code by
removing these console dot logs
5158.78 -> and save. And finally,
5161.78 -> let's check Git one more time
to see the changes that we made.
5166.26 -> So we can expand this and
go to the Git section.
5171.57 -> If we click amazon dot html, it
will tell us we added this class,
5177.15 -> and if we click amazon dot js,
5180.18 -> it will show us the code that we added
for calculating the cart quantity and
5184.56 -> putting it on the page. So finally,
5189.03 -> let's type a message to
describe our changes,
5192.75 -> make the cart quantity active
5199.41 -> and commit.
5203.46 -> So now we can close this, and
that's the end of this lesson.
5208.98 -> In this lesson, we started
the final Amazon project.
5213.15 -> We set up and learned how
to use Git to track changes.
5217.53 -> We learned the main idea of
JavaScript, which is save the data,
5222.78 -> generate the HTML, and
make it interactive.
5227.13 -> We created a list of
products on the homepage.
5230.7 -> We made the add to cart
button interactive,
5234.27 -> and we made the cart. Quantity interactive
5238.56 -> are some exercises to help you practice
what we learned in this lesson.
5286.08 -> Thanks for watching this lesson. If you
want to be notified of future lessons,
5290.61 -> you can click the subscribe
button below the video.
5294.21 -> I'll see you in the next one.
Source: https://www.youtube.com/watch?v=TmcEmsyYKXE