JavaScript Full Course (2023) - Beginner to Pro - Part 1
JavaScript Full Course (2023) - Beginner to Pro - Part 1
In part 1 of this JavaScript tutorial and JavaScript full course, we learn how to build websites with JavaScript and use it with HTML and CSS.
Exercise solutions: https://github.com/SuperSimpleDev/jav…
Copy of the code: 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…
A.I. tool for searching for code: https://chat.openai.com/chat
Lessons:
0:00 Intro
1:47 1. JavaScript Basics
14:51 2. Numbers and Math
45:25 3. Strings
1:11:30 4. HTML CSS Review, console.log
1:56:35 5. Variables
2:42:30 6. Booleans and If-Statements
3:49:51 7. Functions
4:34:44 8. Objects
5:51:43 9. Document Object Model (DOM)
7:12:03 10. HTML, CSS, and JavaScript Together
8:21:19 11. Arrays and Loops
9:26:38 11 (Part 2). Arrays and Loops
10:16:22 12. Advanced Functions
11:02:26 12 (Part 2). Advanced Functions
11:55:49 Projects and Ending
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.66 -> Welcome to the complete
JavaScript course. In this course,
4.71 -> we're going to learn how to build
complex websites using JavaScript from a
8.97 -> beginner to a professional level,
and by the end of this course,
13.35 -> we're going to build amazon.com.
16.11 -> So this is an interactive
multi-page website we're we can
20.82 -> add products to our cart, create an order,
25.44 -> and even track our order Along the way,
30.09 -> we're also going to build some
smaller projects like a rock paper,
34.17 -> scissors game, a to-do
list, and a calculator.
39.48 -> Now you don't need any previous coding
or technical experience to follow along.
44.76 -> This course will cover everything
that you need to learn JavaScript.
49.35 -> We're going to start from the very basics
of JavaScript and we're going to build
53.28 -> our way up step by step.
55.8 -> We're going to learn the major features
of JavaScript and also how to use
59.97 -> JavaScript together with other
technologies like H T M L and
64.86 -> C S S. These are the topics we'll
learn in part one of this course.
70.08 -> In part two,
71.22 -> we'll learn skills that are useful
for bigger and more complex projects,
75.84 -> and we're going to start and
finish the final Amazon project.
80.85 -> You can find the different lessons of
this course below the video here and
85.86 -> here. And after each lesson,
88.59 -> I'm going to give you a bunch of
exercises that you can do on your own to
93.6 -> practice the skills that
we learned in total.
96.63 -> This course will have over 200 exercises.
100.74 -> So with that said, let's get started.
110.18 -> Before we begin, if something in
this course is not working properly,
114.75 -> make sure to check the first comment
below the video for a list of solutions.
120.27 -> If you can't find a solution in this
list, you can reply to this comment.
128.28 -> I'm going to be doing
this course on Windows,
130.98 -> but the steps are the same
if you're using a Mac.
134.7 -> We're going to start from the very
basics of JavaScript and build our way up
139.32 -> step by step. First of all,
142.86 -> what is JavaScript?
145.26 -> JavaScript is a technology
that we use to create websites.
149.88 -> A website is like
youtube.com or amazon.com.
154.98 -> It's how we access YouTube
and Amazon on our computer.
160.17 -> If we were using a phone,
we usually use an app,
164.58 -> but on our computer we use a website.
168.75 -> So there's actually three technologies
that we use to create websites,
174.13 -> html, css, and JavaScript.
177.81 -> Each of these technologies has a specific
purpose. When creating a website,
184.19 -> HTML creates the content of a website.
187.42 -> It creates all the buttons,
the text and the images.
191.26 -> CSS changes the appearance of the website.
196.18 -> By adding css,
197.92 -> we can make our website look nice.
And finally,
202.06 -> JavaScript makes our website interactive.
205.48 -> So if we only have HTML
and CSS and we click one
210.43 -> of these buttons, our
website doesn't do anything.
214.39 -> But once we add JavaScript,
216.34 -> we can make our website do something
when we click a button such as
221.17 -> add a product to our
cart or create an order.
227.32 -> So this course is focused on JavaScript.
231.04 -> If you want to learn HTML
and CSS in more detail,
235.48 -> I have a full course just like this
one that you can find in the video
239.74 -> description. Let's get
started with JavaScript.
244.81 -> The first thing we need to do is to
install a piece of software called a web
249.34 -> browser.
250.69 -> A web browser lets us view websites
that we create in this course.
255.79 -> The most popular web browser for
web development is Google Chrome,
260.2 -> so I recommend using that. If
you don't have Google Chrome,
264.46 -> you can open the default web browser
on your computer. For Windows,
268.96 -> it's Microsoft Edge, and
for Mac, it's Safari.
273.46 -> Type in google.com at
the top and press enter.
278.59 -> Search for Google Chrome,
282.49 -> click the result and follow the
instructions to download and
287.38 -> install. Once we've installed
Chrome, we're ready to begin.
293.56 -> We're going to start by learning what
exactly is JavaScript and how does it
298.36 -> work.
299.68 -> The easiest way to understand
JavaScript is we're basically giving
304.12 -> instructions to a computer and
then the computer follows our
308.41 -> instructions.
310.21 -> I find the best way to learn this
is to jump in and give it a try.
315.04 -> So first, let's open Google Chrome.
320.71 -> Next we're going to click at the top here
325.12 -> and type super
328.3 -> simple.dev/j-basics
336.79 -> and press enter.
340 -> And now we'll learn how to give our
computer some instructions to follow.
345.4 -> To do that, we're going to go
to a blank area of the webpage.
350.14 -> We're going to right click, click inspect,
355.72 -> and then click the tab. Now,
360.03 -> if your console doesn't show
up at the bottom like this,
363.71 -> you can click these three
dots here and then select this
368.3 -> icon. Okay,
371.81 -> so inside the console we can give
some instructions for our computer.
376.94 -> Let's learn our first instruction.
380.09 -> We're going to type here and
we're going to type, alert,
385.67 -> open bracket, single quote, hello,
390.47 -> single quote, close
bracket, and semi call it.
395.12 -> Make sure to type this out exactly
as I have it here in JavaScript.
399.95 -> If you don't type things out
correctly, it won't work.
404.15 -> So this is an instruction to
create a pop-up with a text,
408.47 -> hello inside to get the computer
to follow our instruction.
413.51 -> We can just press enter,
and as you can see,
418.13 -> the computer does exactly
what we tell it to do.
421.73 -> It creates a pop-up with
a text. Hello inside.
426.56 -> Now let's press okay,
429.51 -> and let's give another
instruction to the computer.
433.4 -> So we're going to type here again
and we're going to type alert
438.05 -> again, open bracket, single quote,
442.25 -> but this time we're going to type
a different message in the popup,
447.44 -> good job and single
452.09 -> close bracket and semicolon.
455.57 -> So this is an instruction
to create a pop-up again,
459.86 -> but this time with a text,
good job inside the pop-up.
464.51 -> If we press enter,
466.94 -> the computer does exactly what we tell
it to do and it creates a pop-up with a
471.92 -> text. Good job inside.
474.8 -> And that's basically the
main idea behind JavaScript.
478.82 -> We're giving instructions to a computer
and then the computer follows our
483.8 -> instructions.
485.81 -> So note that we can open and
use this console on any website.
490.88 -> We're just using super
simple.dev as an example.
495.2 -> Let's press okay and we're
going to learn some terminology.
500.96 -> The instructions we give to our computer,
503.9 -> these instructions are called code.
507.17 -> When we press enter and the
computer follows our instructions.
511.34 -> This is called running the code.
514.64 -> Now there are many different languages
we can use to write code called
519.32 -> programming languages.
521.48 -> It's similar to how we have many human
languages that we can use to communicate.
526.91 -> Some examples of programming
languages are JavaScript,
530.9 -> Python and Java.
533.6 -> So here we're writing our code
using the JavaScript programming
538.52 -> language. So we call this JavaScript code.
542.79 -> Now that we understand
the basic terminology,
546.09 -> let's look at some more examples of
what we can do with JavaScript code.
551.7 -> Another thing we can do is meth.
555.45 -> Let's go back to the
console and type here,
559.59 -> and we're going to type two plus two.
564.99 -> So this is an instruction or code
that tells a computer to do some
570 -> math to calculate two plus two.
When we press
574.62 -> enter,
576.54 -> the computer follows our instruction
or runs this code calculates two
581.43 -> plus two and gives us the
result, which is four.
586.26 -> Let's do another example.
588.75 -> We're going to type 10 minus three and
593.73 -> press enter to run this code. Again,
597.69 -> the computer does this math calculates
the result and gives us seven.
603.54 -> So as you can see,
604.98 -> JavaScript can do many different
things like create pop-ups and do
609.9 -> math.
611.55 -> Let's look at one more example
of what JavaScript can do.
616.38 -> We're going to go to the
bottom and type out this code
620.91 -> document dot body
625.56 -> dot inner capital H T M L
631.29 -> equals single quote, hello,
635.46 -> single quote and semicolon.
638.91 -> Make sure to write this out exactly as
I have it here with the dots and the
643.59 -> capital letters, because
JavaScript is case sensitive,
648.57 -> let's press enter to run this code.
652.5 -> What this code does is that it
removes everything on the page and
657.03 -> replaces it with a text.
Hello. In this example,
661.8 -> we use JavaScript to modify the webpage.
665.91 -> Modifying the webpage is one of the
most important features of JavaScript
671.01 -> and we're going to be using this
feature throughout this course,
674.88 -> and that's the basics of JavaScript.
677.67 -> We're giving instructions to a computer.
680.52 -> These instructions are called code,
683.37 -> and then the computer
follows our instructions.
686.55 -> This is called running the code,
689.73 -> and also don't worry about
memorizing all this code.
693.36 -> You can find a copy of all the code
that we write in this course in the
697.93 -> video description.
700.89 -> Now that we understand
the basics of JavaScript,
704.25 -> let's learn more about the
JavaScript language itself.
708.93 -> If we take a look at this code alert and
713.44 -> hello,
714.79 -> you might be wondering what the
brackets and the quote mean.
719.8 -> All of these characters have a
special meaning in the language.
723.73 -> This is something called syntax.
726.73 -> Syntax are the rules that we have
to follow when using a programming
731.23 -> language like JavaScript.
This is sort of like in English.
735.97 -> We also have rules that
we follow called grammar.
740.32 -> The difference is that in English,
742.42 -> we don't have to follow the
rules of grammar perfectly.
746.08 -> People can still understand
us, but in programming,
749.83 -> we have to follow the
rules of syntax exactly,
753.64 -> otherwise the computer won't
understand our code. For example,
759.25 -> if we scroll down and we
type this code, alert,
764.86 -> open, hello,
769.75 -> close bracket and semicolon,
772.57 -> but this time we remove the
first bracket and press enter,
779.29 -> it will give us a syntax error.
782.23 -> We're not following the rules of syntax,
785.02 -> so the computer doesn't
understand this code.
789.04 -> Now JavaScript has a lot of syntax
rules and we can't learn them all at
793.99 -> once right now. Instead,
796.72 -> we're going to learn the syntax rules
one by one as we go through the course.
802.39 -> For now,
803.29 -> we'll just learn enough syntax to do
the exercises at the end of this lesson,
809.17 -> what we need to know is
that if we scroll up,
813.7 -> this part of the code tells a
computer to create a pop-up.
818.59 -> The text between these quotes
is the text inside the pop-up.
824.08 -> If we change this text, we can
change the text inside the pop-up.
829.6 -> Same thing for this code down here.
833.26 -> If we change the text between the quotes,
836.08 -> it will change the text
that appears on the page,
839.89 -> and that's all we need to know
about JavaScript syntax. For now,
844.24 -> we'll learn exactly what the other
characters like the brackets,
848.17 -> quotes and semicolon mean
later on in this course.
853.21 -> So in this lesson,
854.44 -> we learned that JavaScript is
basically giving instructions to a
859.07 -> computer. We wrote our first
few lines of JavaScript code.
864.28 -> We learned how to run our code using
the console in our web browser,
869.68 -> and we learned about syntax,
872.14 -> which are the rules that we had
to follow when writing our code.
876.88 -> Here are some exercises you can try on
your own to practice what we learned
881.62 -> in this lesson.
883.54 -> You can find these solutions to these
exercises in the video description.
895.1 -> Now that we understand
the basics of JavaScript,
898.49 -> we're going to learn about each feature
of the language. In this lesson,
903.68 -> we're going to focus on
numbers and math first.
908.42 -> We can close the console for now.
912.08 -> So I've actually prepared a project
that we can use for this lesson.
917.03 -> To open this project, we're
going to go to our browser,
920.78 -> click up here and type super
926.12 -> simple.dev/projects/amazon
935.21 -> and press enter.
938.48 -> So this is actually the final project
we're going to create in this course.
943.79 -> This is an e-commerce website
similar to Amazon where we
948.71 -> can add products to our cart
and then view our cart by
953.48 -> clicking the top right.
956.84 -> And on this page we can see
the products in our cart,
961.1 -> modify our cart and create and order.
965.63 -> For this lesson, we're going
to focus on this right section,
970.04 -> which calculates the cost of our cart,
972.68 -> including the cost of the products,
976.28 -> shipping and taxes.
979.4 -> This section is a great way
to learn numbers and math in
984.14 -> JavaScript. First,
986.78 -> let's open the console again so
we can write JavaScript code.
991.79 -> We're going to find a blank area
of the webpage. Write click,
997.19 -> click inspect, and then click the console.
1004.06 -> So we already saw some examples
of math in the previous lesson.
1009.01 -> For example,
1010.39 -> we wrote the code two plus two.
1015.76 -> If we press enter,
1018.31 -> the computer adds these two
numbers and results in four.
1024.1 -> We also did 10 minus three.
1029.17 -> If we press enter,
1031.48 -> the computer subtracts these
two numbers and gives us seven.
1037.21 -> In addition to adding and subtracting,
1040.48 -> we can also multiply
and divide to multiply.
1045.52 -> We're going to type 10 star three
1050.53 -> and press enter.
1053.05 -> So Star is the character
for multiplying to
1057.46 -> divide.
1058.6 -> We're going to type 10 forward slash two
1063.91 -> and press enter.
1066.34 -> So forward slash is a
character for dividing.
1071.66 -> Now let's learn the syntax
rules for numbers and math.
1076.76 -> The syntax for math is pretty
straightforward in JavaScript,
1081.14 -> we just write it out like normal math.
1085.25 -> We can also do math with more
than two numbers. For example,
1090.68 -> we can add two plus two and
1095.48 -> then plus another two.
If we press enter,
1101.12 -> the computer will add these three
numbers together and result in
1106.07 -> six. And finally,
1108.89 -> JavaScript can handle decimal numbers like
1112.7 -> 2.2 plus 2.2.
1118.34 -> If we press enter,
1120.59 -> it will calculate these
decimal numbers and result in
1124.67 -> 4.4.
1127.4 -> Now let's do some practical examples.
1130.49 -> We're going to calculate the
numbers here in our final project,
1135.26 -> but first, let's set up our cart.
1137.99 -> So we have the same products in our cart,
1141.56 -> so make sure in your
cart you have two socks
1146.54 -> with free shipping and
you have one basketball
1151.79 -> with $4 and 99 cents
of shipping and nothing
1156.41 -> else in your cart. If you need to,
1159.98 -> you can modify your cart by
clicking update or delete
1164.87 -> or by going to the homepage by
clicking in the top left and
1169.67 -> adding any products that you're missing.
1173.09 -> Once you have the same products
as me in your cart and you have
1178.01 -> the same numbers on the right,
1180.65 -> we're ready to begin.
Let's start by calculating this
1185.15 -> number up here.
1187.13 -> This is the cost of the products
before shipping and taxes.
1192.83 -> To calculate this number using JavaScript,
1196.13 -> we're just going to add
the cost of the products.
1199.73 -> So in our console we're going
to add the cost of the socks,
1204.68 -> which is $10 and 90 cents.
1209.15 -> We have two of them,
1211.25 -> so we're going to multiply this by two,
1216.56 -> and then we're going to add
the cost of the basketball.
1220.25 -> So plus $20 and 95 cents.
1225.89 -> If we press enter,
1228.56 -> the computer will do this math
calculation and give us this number,
1234.2 -> and if we scroll to
the top of our project,
1238.19 -> you'll see that the number that we
got matches what we have on the page.
1243.83 -> So that's how we use JavaScript
to calculate this here.
1249.18 -> Let's do another example.
1251.76 -> We're going to calculate
this third number,
1255 -> which is the cost of the
products plus shipping.
1259.17 -> Feel free to pause the video if
you want to try it yourself first.
1263.48 -> Otherwise we'll do it together.
Let's go back to our console
1269.67 -> and we're going to add the
cost of the products again,
1273.27 -> which is $10 and 90 cents times
1278.28 -> two plus $20 and
1282.33 -> 95 cents.
1284.31 -> But this time we're going
to add the cost of shipping,
1289.11 -> which is $4 and 99 cents.
1292.83 -> So 4.99 and press enter.
1299.16 -> The computer will do this
calculation and give us this number
1304.14 -> which matches what we
see in the final project.
1308.67 -> Next,
1309.66 -> we're going to learn a very important
feature of math called the order
1314.4 -> of operations, adding, subtracting,
1319.33 -> multiplying and dividing.
1321.24 -> These are called operations and the
characters in the middle are called
1326.97 -> operators.
1328.26 -> Now there's a certain order
that we do these operations.
1333.09 -> For example,
1334.53 -> if we go back to our console
and type the calculation
1339.3 -> one plus one times
1343.83 -> three and press enter.
1347.61 -> Notice that it multiplies
one times three first,
1351.96 -> which equals three and then adds one,
1356.22 -> which equals four.
1358.71 -> Notice that it does not
add one plus one first,
1363.48 -> which equals two and then
two times three equals
1368.19 -> six.
1370.02 -> The way math normally works is
that multiply and divide are
1375 -> done first.
1376.65 -> Add and subtract are done
after this is called the
1381.4 -> order of operations,
1383.73 -> and JavaScript follows the same rules.
Multiply and divide
1388.68 -> are done first,
1390.51 -> add and subtract are
done after the order of
1395.04 -> operations is also called
operator precedence in
1399.51 -> JavaScript.
1401.58 -> One thing to note is that
multiply and divide have the same
1405.85 -> priority, so if we have
both in a calculation,
1410.43 -> it will calculate from left to right,
1414.33 -> add and subtract also
have the same priority.
1418.44 -> If we have both in a calculation,
1421.05 -> it will also calculate from left to right.
1425.26 -> Another feature of the order of
operations is that we can use
1429.91 -> brackets to control which part
of the calculation gets done
1434.83 -> first. For example,
1437.68 -> let's type out this calculation again,
1441.01 -> one plus one times three,
1446.94 -> but this time we're going
to add an open bracket
1452.2 -> and a closed bracket around one plus one.
1457.72 -> If we press enter,
1460.57 -> Now the calculation inside the
brackets will be done first,
1465.31 -> so it will add one plus one equals two,
1470.32 -> and then two times three equals six.
1474.91 -> So when we use brackets,
1477.01 -> JavaScript will always do the
calculation inside the brackets first
1482.47 -> and then do the rest of the
calculation brackets have the highest
1487.96 -> priority in the order of operations.
1491.65 -> Now let's learn the
syntax rules for brackets.
1495.73 -> So we just have to have a
matching open bracket and closed
1500.62 -> bracket.
1501.73 -> So something like this doesn't
work because we have two
1506.47 -> open brackets and no closed bracket.
1510.4 -> We also need to have a complete
calculation in the brackets,
1515.32 -> so this also doesn't
work because one plus one
1519.82 -> multiply is not a complete calculation.
1525.07 -> Now let's do some practical
examples using the order of
1529.45 -> operations. First,
1532.21 -> we're going to do some more
setup in the final project,
1536.05 -> so we're actually going to remove
all the products in our cart,
1542.23 -> and then once our cart is empty,
1544.81 -> we'll go to the homepage
by clicking the top left,
1550.06 -> and this time we're going
to add some new products.
1554.05 -> So we'll add one basketball
1557.92 -> and two t-shirts.
1562.36 -> Now let's go back to our cart
by clicking the top right,
1569.23 -> We'll scroll down and we're going
to calculate the numbers in this
1573.73 -> section. Again, let's calculate
this number at the top,
1578.59 -> which is the cost of the products.
1581.65 -> We'll go back to our console
And add the cost of the
1586.51 -> basketball,
1587.45 -> which is $20 and 95 cents
1592.54 -> plus the cost of the T-shirts,
1596.56 -> which is $7 and 99 cents,
1601.45 -> and we have two of them,
1603.83 -> so we'll multiply this by two.
1607.64 -> If we press enter,
1610.16 -> this will give us the number
that we see in the final project
1615.08 -> here.
1616.73 -> Notice that in this calculation
we're taking advantage of the order
1621.53 -> of operations even though
multiply is written
1625.88 -> last, we still multiply
these two numbers first.
1631.04 -> So we calculate the cost of
two t-shirts first and then we
1636.02 -> add the cost of the
basketball after. Okay,
1641.36 -> now let's try something
a little more difficult.
1644.72 -> We're going to learn how to
calculate this 10% tax here.
1649.55 -> So how do we calculate 10%
of something? Unfortunately,
1654.59 -> we can't just multiply
by 10% in JavaScript.
1659.03 -> Instead we have to calculate
the percent manually.
1663.47 -> So how do we do that?
1665.75 -> 1% is actually equal to one divided by
1670.07 -> 100.
That's what percent means.
1674.6 -> So 10% is equal to 10 divided by 100,
1680.03 -> which equals 0.1.
1683.27 -> So to calculate 10% manually,
1686.21 -> we just multiply this number by 0.1.
1690.95 -> So we'll type 36.93
1695.78 -> multiplied by 10% or 0.1.
1701.51 -> If we press enter,
1704.18 -> it will give us a number that is close
to what we have in the final project.
1709.37 -> It's the same amount of money,
1711.83 -> but our number is more
accurate than we need.
1715.64 -> So later in this lesson we'll
learn how to round this number down
1720.74 -> to exactly what we have
on the webpage. For now,
1725.51 -> let's do some more practice
with the order of operations.
1730.28 -> Let's calculate the tax again,
1733.01 -> except instead of using
the final number, 36.93,
1738.65 -> let's calculate this number
individually like here.
1743.6 -> So at the bottom we're going to
add the cost of the basketball
1748.37 -> 20.95 plus the cost of
1753.35 -> the T-shirts,
1754.67 -> 7.99 times two,
1759.68 -> and then multiply this
by the tax percent times
1765.08 -> 0.1 and press enter.
1770.27 -> Unfortunately,
1771.5 -> this number doesn't match
what we got up here and that's
1776.33 -> because if we look at this
calculation according to the order of
1780.99 -> operations, multiply is done first.
1785.16 -> So it will multiply these three
numbers first and then add
1789.84 -> 20.95 after. However,
1794.4 -> this is not what we want.
1796.74 -> We actually want to
calculate this number first.
1800.79 -> This is the cost of the products.
1803.64 -> So how do we get the computer
to calculate this first and then
1808.05 -> multiply by the tax
percent 0.1. To do this,
1813.15 -> we can use brackets to control
which part of the calculation
1818.01 -> gets done first. So let's
create this calculation again,
1823.86 -> 20.95 plus
1827.97 -> 7.99 times two.
1832.77 -> But this time we're going to add
brackets around this part of the
1837.69 -> calculation to make sure that
this gets calculated first,
1843.18 -> and then at the end we'll
multiply it by the tax percent,
1848.25 -> 0.1, and now if we press enter,
1853.65 -> we will get the same number
that we had before. So
1858.48 -> that's how we use math and
the order of operations to
1863.19 -> calculate the numbers in this
section of the final project.
1867.93 -> So don't worry, you don't have to
be good at math to learn JavaScript.
1872.55 -> This is just to show you how
math works in JavaScript.
1877.83 -> In the rest of this lesson,
1879.57 -> we're going to learn some more
details about numbers and math.
1884.73 -> The first detail we're going to
learn is a weird behavior of math in
1889.29 -> JavaScript.
1890.94 -> First we'll need to learn some
terminology in programming.
1895.62 -> Whole numbers like two, three,
1898.59 -> and four are called integers.
1902.13 -> Decimal numbers like 2.2 and
1906.03 -> 2.5 are called floating point numbers or
1910.71 -> floats, and unfortunately,
1914.3 -> computers have a problem working
with floats. For example,
1919.44 -> if we go back to our console
and type the calculation
1924.18 -> 0.1 plus
1927.9 -> 0.2 and press enter,
1932.7 -> it will give us this weird
number here that's close to
1936.78 -> 0.3,
1938.25 -> but a little bit inaccurate.
So this problem is not
1943.18 -> specific to JavaScript. Many programming
languages also have this problem.
1949.14 -> The reason this happens is because
of how computers store numbers,
1954.39 -> I'll give a simplified explanation.
1957.6 -> Computers can only store
zeros and ones while humans
1962.53 -> can count from zero to nine.
1965.41 -> So there's sort of a mismatch
between our number systems.
1969.7 -> For integers, this is not a problem.
1972.34 -> The computer can just use
a bunch of zeros and ones
1976.69 -> to store it. However,
1979.48 -> for decimal numbers or floats,
1982.48 -> sometimes the computer can't
store the number properly.
1986.95 -> For example,
1988.24 -> here's how the computer
tries to store 0.2 using
1992.83 -> only zeros and ones at the
top is what the computer
1997.63 -> stores at the bottom is what
this is equal to in human
2002.58 -> numbers,
2004.08 -> we can see that the computer
gets closer and closer to 0.2
2009.18 -> but never actually reaches it.
2011.88 -> And this is why we get these inaccuracies
when calculating with fill floats
2017.01 -> because computers can't
store some floats properly.
2022.26 -> Note that this doesn't happen
with all floats. For example,
2027.96 -> computers can store 0.25
without any problems,
2032.91 -> so these inaccuracies only
happen with some floats,
2037.11 -> but not all of them. However,
when calculating money,
2041.91 -> we definitely want to
avoid any inaccuracies.
2045.72 -> So let's learn how to do that. First,
2049.32 -> we're going to set up our cart again,
2052.14 -> so make sure in your cart you
have one basketball with free
2056.88 -> shipping, and this time
you have one t-shirt.
2061.68 -> So we're going to click update,
2064.71 -> change this to one and click save.
2070.23 -> And this t-shirt also has free shipping.
2073.98 -> Now let's scroll up and we're going to
calculate this number at the top again,
2079.47 -> which is the cost of the products.
2082.38 -> Let's go into our console and
we're going to add the cost of the
2087.21 -> basketball $20 and 95 cents
2092.16 -> plus the cost of the t-shirt,
2096.12 -> which is $7 and 99 cents.
2101.22 -> If we press enter
calculating with these floats
2106.42 -> causes the inaccuracies that we
saw earlier. So how do we avoid
2111.36 -> this problem?
2113.04 -> The best practice when calculating
money is to calculate in cents
2118.14 -> instead of dollars.
2120.15 -> So instead of $20 and 95 cents,
2124.5 -> we're going to calculate 2090 5 cents
2129.45 -> plus seven 99 cents.
2133.92 -> Notice we're not using floats anymore,
2136.86 -> so we avoid the inaccuracies,
2140.14 -> but now this number is in cents,
2142.93 -> so we need to convert back
to dollars to do that.
2147.55 -> We'll surround this calculation
with brackets to make sure we
2152.35 -> calculate this first,
2154.39 -> and then at the end we'll divide by 100
2159.61 -> to convert back to dollars
because there are 100 cents
2164.74 -> in each dollar if we press enter
2169.75 -> and scroll up,
2172.51 -> that's how we get the exact
number that we see on the page.
2177.76 -> So remember,
2178.87 -> in programming calculations with
floats are sometimes inaccurate,
2184.15 -> and when working with money,
2186.07 -> the best practice is to do the
calculation in cents and then
2190.84 -> convert back to dollars at the end.
2195.07 -> The next detail we're going to
learn is how to round a number in
2199.63 -> JavaScript.
2201.22 -> Rounding just means taking a
number and moving it to the nearest
2205.78 -> integer to round a number.
We can use this code,
2211.75 -> capital M, math dot round,
2217.12 -> open bracket, closed bracket,
2220.03 -> so make sure you use a capital
M because JavaScript is case
2225.01 -> sensitive. Now between the brackets,
2229.09 -> we can put a number that
we want to round like
2233.32 -> 2.2. If we press enter,
2238.36 -> it will round this number down to two.
2242.23 -> If we do capital M,
2245.14 -> math dot round, open
bracket, close bracket,
2250.9 -> and between the brackets
we put 2.8 and press
2255.73 -> enter,
2257.44 -> it will round 2.8 up to three.
2262.3 -> Now let's do a practical
example with math dot round.
2267.52 -> We're going to calculate the tax again,
2270.64 -> but this time we're going to
round the result to exactly this
2275.14 -> number on the page. So first,
2278.65 -> let's calculate the tax.
We'll go into our console
2283.99 -> and add the cost of the products in cents,
2287.86 -> so 2090 5 cents for the basketball
2294.76 -> and plus the cost of the t-shirt,
2297.7 -> which is seven 99 cents.
2300.73 -> And we'll surround this in brackets
to make sure we calculate this
2305.5 -> first and then we're going
to multiply this by the
2310.27 -> tax percent or 0.1.
2314.99 -> And finally we'll convert
this back to dollars.
2319.13 -> So let's surround this in
brackets as well to make sure
2324.08 -> we calculate this first,
2326.15 -> and at the end we'll divide by 100
2331.58 -> to convert back to dollars.
2334.85 -> So notice here we can have
brackets inside brackets
2340.04 -> In this situation,
2341.6 -> JavaScript will calculate the
inner brackets first and then the
2346.49 -> outer brackets and then
everything else if we press
2351.41 -> enter,
2353.48 -> this gives us 2.894,
2357.56 -> which is close to the number on the page.
2361.37 -> It's the same amount of money,
2363.56 -> but our number is more accurate
than we need. So now let's
2368.27 -> learn how to use math dot
round to round this number to
2372.71 -> exactly 2.89. First,
2376.88 -> let's create a copy of this
calculation. So we'll select it,
2382.37 -> right click copy,
2386.36 -> and down here, right click and paste.
2392.72 -> So one thing we might try to
do is to round this entire
2396.98 -> calculation, however this will round
2400.82 -> 2.89423 because it rounds to the
2405.74 -> nearest integer. Instead,
2409.19 -> what we want to round is this number here.
2413.33 -> So remember that this number
is the result in cents,
2418.37 -> which is 289.40 cents.
2423.44 -> If we round this number,
2425.48 -> it will round down to 289 cents,
2429.56 -> which is exactly $2 and 89 cents.
2434.57 -> So to round this calculation
at the front will type
2439.64 -> capital M math dot round.
2445.49 -> So we already have brackets
around this so we don't need extra
2449.94 -> brackets,
2451.61 -> so this will round to 289 cents,
2456.26 -> and finally we'll convert this
back to dollars at the end
2461.27 -> by dividing by 100.
If we
2466.16 -> press enter,
2468.35 -> that's how we round this calculation
to get the exact number on the
2473.09 -> page. So to summarize,
2476.51 -> we first calculate the result
in cents and then we round
2481.31 -> this to the nearest cent,
2484.19 -> and then at the end we convert
back to dollars. Again,
2489.29 -> don't worry, you don't have to be
good at math to learn JavaScript.
2493.74 -> These examples are just for learning.
2496.83 -> Almost all the math we do in
JavaScript is more simple than this.
2502.32 -> I'll give you some exercises at the
end of this lesson to help you get more
2506.79 -> practice.
2508.53 -> The last thing we're going to learn in
this lesson is how to use Google when
2513.21 -> you're learning to code.
2515.37 -> So far I've been giving you
different pieces of code like
2519.9 -> alert and math dot round.
You might be wondering,
2524.91 -> where do I find this code?
2526.71 -> These pieces of code are
features of JavaScript
2531.63 -> and I find this code by searching
on Google. So we're going to learn
2536.52 -> how to use Google to learn new
features of JavaScript on our
2541.27 -> own.
2542.79 -> Let's go to our browser and
create a new tab at the top
2549.21 -> and we'll click here and type
2552.21 -> google.com and press enter
2558.75 -> and we'll search in Google.
2561.45 -> So the trick to searching in Google
is to search for what we are trying
2566.43 -> to do. For example, if we
want to round a number,
2571.44 -> we would search for JavaScript,
2576.18 -> how to round a number.
2582.12 -> If we press enter,
2585.06 -> sometimes you might get the code
right away in the first result,
2589.86 -> and sometimes you might have
to go into the other results,
2593.76 -> define the code that
you need. In my example,
2598.14 -> I see the code math dot
round in the first result,
2602.13 -> so I can click into this result,
2605.25 -> read about what this code does,
2607.89 -> and also see some examples of
how to use it. One thing to
2612.69 -> keep in mind is that when
you're searching in Google,
2615.87 -> you might not understand all the
code that you get in your results.
2620.76 -> For example, here, there's a lot of
code that we haven't learned yet,
2626.28 -> and actually that's okay.
2628.83 -> We just need to look for the pieces
of code that look familiar to us
2633.81 -> like this part of the code.
2636.51 -> We can then use this part
of the code in our own code.
2640.89 -> We don't have to understand every
bit of code that we get from Google,
2646.26 -> and don't worry as we
move through this course,
2649.71 -> we will understand more and more of
this code that we get from Google
2654.66 -> results these days.
2657.51 -> We also have some artificial
intelligence or AI tools that can
2662.44 -> help us search for code.
2665.13 -> I'll provide links to some of these
tools in the video description
2670.62 -> and that's the end of this
lesson. In this lesson,
2674.14 -> we learned how to work
with numbers and math.
2677.95 -> We learned the order of
operations and brackets.
2682.66 -> We calculated the numbers
in the final Amazon project.
2686.89 -> We learned that calculations using
floats can be inaccurate and how to
2691.84 -> avoid this problem when
working with money.
2695.02 -> We learned how to round numbers
using math dot round and we
2699.79 -> learned how to search for code on our own.
2703.81 -> Here's some exercises to help
you practice numbers and math.
2729.25 -> In the previous lesson, we learned
how to work with numbers and math.
2734.68 -> In this lesson, we're going to
learn how to work with text,
2738.94 -> and we're going to create the text
in this section of the final project.
2744.01 -> First,
2744.82 -> make sure you have the final project
open and you're on the checkout page.
2750.52 -> Also, make sure you have the
console open on this page.
2755.2 -> If not, you can go to a
blank area, right click,
2760.51 -> click inspect, and then click the console.
2766.96 -> Now we're going to learn a feature
of JavaScript called strings.
2772.15 -> A string represents text.
2775.69 -> Let's go to our console and
create our first string.
2780.46 -> We're going to type single quote,
2783.52 -> hello and single quote and press enter.
2789.79 -> This is a string and it
represents the text. Hello,
2795.07 -> and we've actually seen this
code before. In the first lesson,
2800.02 -> the first piece of code
that we learned was alert,
2805.27 -> open bracket, single quilt, hello,
2809.56 -> single quilt, closed bracket,
2812.02 -> and semicolon.
This code creates a popup on the
2817 -> page. If we press enter,
2820.57 -> it creates a popup. Now,
2823.48 -> inside these brackets we
actually created a string.
2828.28 -> This string is the text
that appears in the popup,
2832.96 -> so as you can see, a
string represents text.
2838.21 -> Let's press okay,
2840.55 -> and now let's learn the syntax
rules for strings to create a
2845.53 -> string, we just write
some text like hello,
2849.89 -> and then surround this
text with single quotes,
2853.61 -> one at the beginning and one at the end.
2857.36 -> We can also add strings
together. For example,
2861.83 -> let's type the string sum
2867.15 -> plus the string text and
2871.85 -> press enter. When we add two strings,
2876.59 -> it combines the strings
together into a bigger string,
2881.3 -> and this makes sense. We're adding
two pieces of text together.
2886.4 -> We can also add more than two
strings at a time. For example,
2891.83 -> we can type the string sum
2896.69 -> plus the string more,
2900.02 -> plus the string text.
2906.41 -> If we press enter,
2908.87 -> the computer will combine all
three strings into one big
2913.7 -> string. By the way,
2916.37 -> this is called Cate Nation when
we combine strings together.
2922.22 -> Now in the previous lesson
we learned about numbers.
2926.21 -> Numbers and strings are two
different types of values.
2930.86 -> In JavaScript. They
represent different things,
2935.06 -> and we can actually check what
type of value something is
2939.74 -> using this code type of,
2944.87 -> and then space, and then a
value like the number two.
2950.66 -> If we press enter type
of will tell us that
2955.32 -> two is a number.
2957.98 -> If we do type of quote,
2963.32 -> hello, quote, and press enter,
2967.91 -> it will tell us that hello is a string.
2972.38 -> Now what if we added a
string and a number together?
2976.85 -> For example, let's type the string hello
2983.21 -> plus the number three and press enter.
2989.57 -> So when we add a string and a number,
2993.17 -> JavaScript will automatically
convert this number into a string.
2998.63 -> So this gets converted into the string,
3002.47 -> hello plus the string three,
3007 -> and then it combines them together
into the string. Hello, three.
3012.49 -> This feature is called
type coercion or automatic
3017.08 -> type conversion. Okay,
3020.56 -> now that we understand
the basics of strings,
3023.71 -> let's do some practical examples.
3027.11 -> We're going to use strings and
numbers to create the text in this
3031.85 -> section of the project. First,
3035.15 -> make sure that in your cart you
have one basketball with free
3040.13 -> shipping and you have one t-shirt
3044.72 -> also with free shipping and
you have no other products.
3050.75 -> Let's scroll up and we'll
start by creating this
3055.49 -> text in the top right. So this
is the cost of the products,
3060.68 -> but this time we're going to have a
dollar sign. So instead of just a number,
3065.99 -> this will be text.
3068.75 -> So one thing we can do to create
this text is just type out the
3073.4 -> string directly, like quote dollar
3078.11 -> 28.94 and quote.
However,
3083.81 -> let's actually calculate this
number using math. Remember,
3088.73 -> the advantage of JavaScript is
that it's able to do calculations.
3094.07 -> So instead of typing out 28.94,
3098.15 -> we're just going to create
the string dollar sign plus,
3103.85 -> and we're going to calculate
this number using math.
3109.07 -> So we're going to add the
cost of the basketball,
3112.82 -> which is $20 and 95 cents, plus
3119.54 -> the cost of the t-shirt,
3121.88 -> which is $7 and 99 cents.
3126.17 -> If we press enter,
3129.02 -> unfortunately this doesn't look right.
3132.17 -> Instead of doing math and adding
these two numbers together,
3136.55 -> it just sort of put the numbers
one after another into the string.
3141.92 -> So why is this happening?
JavaScript adds from left to right.
3147.62 -> So the first step is to
add these two values,
3151.79 -> and as we learned, if we
add a string and a number,
3156.29 -> JavaScript will automatically
convert this number into a string.
3161.42 -> So the result of this
calculation will be the string
3166.54 -> dollar 20.95, and
3172.58 -> the next step is to add 7.99.
So it
3177.5 -> will add 7.99,
3182.33 -> and now we're adding again
a string and a number.
3187.01 -> So JavaScript will automatically
convert this number into a string
3192.41 -> and combine them together.
3195.2 -> That's why it puts 7.99
at the end of this string
3199.91 -> instead of doing math.
3202.73 -> So what we actually want to do
here is to add these two numbers
3207.78 -> first and then combine
the total with the string.
3212.97 -> So how do we do this?
3215.1 -> The solution is that strings
also follow the order of
3219.66 -> operations, just like
numbers. And remember,
3223.68 -> in the order of operations,
3225.87 -> we can use brackets to control
which part of a calculation gets
3230.67 -> done first. So let's type
this calculation out. Again,
3235.65 -> the string dollar sign plus
3240.18 -> 20.95 plus
3244.5 -> 7.99,
3247.28 -> but this time we're going
to add an open bracket and a
3252.18 -> closed bracket around this calculation.
3256.41 -> This tells a computer to
calculate this number first using
3261.12 -> math and then combine this
result with the string after.
3266.97 -> If we press enter.
3269.52 -> Now this is doing math and it
solves our original problem
3275.19 -> unfortunately. Now we
have another problem.
3278.58 -> This math is inaccurate. So
remember from the previous lesson,
3283.58 -> doing calculations with
floats can sometimes cause
3287.73 -> inaccuracies,
3289.5 -> and the best practice when calculating
money is always calculate in
3294.33 -> cents and then convert
back to dollars at the end.
3299.46 -> So at the bottom here,
3301.59 -> we're going to add the string dollar plus
3307.14 -> open bracket, and instead
of $20 and 95 cents,
3312.72 -> we're going to add 2090 5 cents
3317.19 -> plus seven 99 cents and close
3322.02 -> bracket. And then at the end,
3325.38 -> we're going to convert this
number back to dollars by
3330 -> dividing by 100. If we press enter,
3336.39 -> this will give us the text that
we see in the final project.
3341.28 -> Again,
3342.21 -> strings follow the same order
of operations as numbers.
3347.82 -> Brackets are always calculated first,
3351.74 -> multiply and divide are done next,
3354.27 -> and add and subtract are done after.
So adding this
3359.16 -> result to the string is the last step.
3364.83 -> Now let's do a more complicated example.
3368.49 -> Let's use strings and numbers
to create this entire line of
3373.47 -> text, not just the dollar
text. To create this,
3378.48 -> we're going to go from left to right.
3381.84 -> Let's go back in our console and
we're going to start with the
3386.23 -> string items, open bracket,
3391.3 -> and here we could just
type two and close bracket,
3396.52 -> but let's actually calculate
this number as well using math.
3402.13 -> So this number is the quantity or
the number of products in our cart.
3408.01 -> Let's go back to our console.
3410.65 -> We're going to end the string
here and we're going to add,
3415.27 -> and we're going to calculate the quantity.
3417.88 -> So we have one basketball
plus one t-shirt.
3423.85 -> Again, we run into the
same problem as before.
3428.08 -> This gets calculated first
and results in a string,
3432.55 -> and then it will just combine
the one at the end of the string.
3437.11 -> Instead of doing math. To solve this,
3440.77 -> we're going to use brackets
again. So around the one plus one,
3446.32 -> we're going to add open
bracket and close bracket.
3451.6 -> This tells a computer to add
the numbers first and then
3456.49 -> combine it with a string. All right,
3460.54 -> let's keep going from left to right.
3463.99 -> We're going to add the rest of the string
3468.94 -> close bracket,
3471.19 -> and let's just use a space to
represent the space between these two.
3476.62 -> So we'll type a space dollar sign,
3480.07 -> and then we're going to calculate
this number again and add it
3485.08 -> to the string.
3486.79 -> So we'll end the string and then plus,
3491.35 -> and we already did this
calculation up here,
3495.07 -> so we can select this and then right click
3500.11 -> copy and here,
3503.68 -> right click and paste and press enter.
3510.13 -> And that's how we create this first
line of text using strings and
3514.51 -> numbers. We break up
the string into parts,
3518.74 -> calculate the numbers, and then
add the parts back together.
3524.2 -> All right,
3525.1 -> now let's take these strings that we
created and do something with them.
3530.14 -> Let's create a popup and
display this first line of text
3535.09 -> inside the popup.
3537.31 -> We'll go back to our console and
type the code for creating a popup
3543.4 -> alert, open bracket, closed bracket,
3548.86 -> and then inside the popup we're
going to display this string.
3554.02 -> So let's just make a copy of
this code. We'll select it,
3559.6 -> right click copy,
3563.27 -> and between the brackets
right click and paste.
3569.69 -> If we press enter,
3572.33 -> the computer displays a popup with
the first line of text of the final
3576.8 -> project inside.
3579.53 -> So that's how we use strings to
create the text in the final project.
3584.63 -> And once we create the strings,
3586.73 -> we can use them in other JavaScript code.
3592.79 -> In the rest of this lesson,
3594.47 -> we're going to learn more details
about strings in JavaScript.
3599.84 -> There are actually three
ways to create a string.
3604.01 -> The first way is to use single
quotes, which we already learned.
3608.87 -> For example, we can type single quote,
3613.25 -> hello and single quote and press enter.
3619.67 -> The second way to create a
string is to use double quotes.
3624.56 -> For example,
3626.09 -> double hello and double and
3630.98 -> press enter.
3633.77 -> This creates the exact same
string as single quotes.
3638.81 -> So which one should we
use to create a string,
3642.32 -> single quotes or double
quotes? In JavaScript,
3646.7 -> I recommend using single
quotes by default,
3650.48 -> they're a little easier to read and type.
There is one situation
3655.58 -> where double quotes might be useful,
3658.43 -> and that is if we have a
single quote inside the string.
3663.32 -> For example, if we type the string,
3667.58 -> I'm learning Java script
3674.24 -> and single and press enter.
3678.35 -> This doesn't work because there's
a single quote inside the string,
3683.48 -> and this single quote
will end the string early.
3688.19 -> To solve this, we can create
the string using double quotes.
3692.93 -> For example,
3694.46 -> double I'm learning Java
3699.36 -> script and double and press enter.
3705.8 -> So now this works because we
created the string using double
3710.57 -> quotes. The single quote no
longer has a special meaning,
3715.19 -> and it will no longer
end the string early.
3718.58 -> So this is a situation where double
quotes might be useful. Otherwise,
3723.8 -> we use single quotes by default. Now,
3727.61 -> there's actually another solution to
this problem other than using double
3732.08 -> quotes, and that's by
using an escape character.
3737.12 -> So a character is one letter number or
3741.6 -> symbol in a piece of text. For example,
3745.8 -> the text Hello has five characters.
3754.65 -> A character can be a letter, a number,
3758.76 -> or also a symbol. These are
all considered characters.
3764.31 -> Now, in addition to these characters,
3766.98 -> we have a special set of characters
we can also use in a string
3772.14 -> called escape Characters.
3775.02 -> An escape character looks
like this, a backslash,
3779.79 -> and then another character
like single quilt.
3783.96 -> This combination actually counts
as one character in a string.
3789.63 -> This character creates a
single quilt that is just text.
3794.37 -> It doesn't have a special meaning,
3796.71 -> and it doesn't start or
end strings. For example,
3801.9 -> we can create this string with
single quotes again, so single
3809.04 -> and this time we'll use the
escape character slash single
3814.86 -> and then M learning Java
3819.73 -> script
3822.06 -> and single and press enter.
3826.74 -> And now this works because
the escape character slash
3831.66 -> single creates a single
quote that is just text.
3836.19 -> It doesn't start or end the string.
3840 -> Another escape character that's
useful to know is back slash double.
3845.76 -> This creates a double that is just text.
3849.78 -> It doesn't start or end a string.
3853.62 -> The last escape character will
learn in this lesson is back slash
3859.86 -> This is called the New Line character.
3862.56 -> This escape character
doesn't create the letter
3867.06 -> anymore, it creates a new line of text.
3871.83 -> For example,
3873.57 -> let's create a popup using alert
3880.65 -> and
3882.57 -> and then inside the brackets
we're going to create a string
3887.49 -> sum and then back slash n text
3893.22 -> and single quilt. If we press enter,
3898.44 -> you'll notice that this escapee
character created a new line of
3903.3 -> text in the pop-up,
3905.67 -> and that's why we call this
the new line character.
3909.63 -> So that's how escape characters work.
3912.54 -> They're a set of special characters
that start with backslash,
3916.74 -> and we use them in a string.
Now let's press okay,
3922.81 -> and we're going to learn the third way
of creating a string in JavaScript,
3928 -> which is using back ticks.
For example,
3931.99 -> let's type in our console
and we'll type back,
3935.74 -> tick hello and back tick and
3940.42 -> press enter.
3943.33 -> This creates the same string
as single quotes and double
3947.98 -> quotes. Strings created with
back ticks actually have a name.
3953.08 -> We call these template strings and
they have a name because they have some
3957.76 -> special features.
3960.1 -> The first special feature of template
strings is called interpolation.
3965.62 -> Interpolation lets us insert
a value directly into a
3970.27 -> string. For example,
3973.06 -> let's say we want to create the
first line of text in our project.
3977.89 -> Earlier in this lesson, we created
this text with concatenation,
3982.99 -> which means we broke it up into
parts and added them back together.
3988.33 -> Interpolation gives us a
much easier way to do this.
3993.1 -> We'll go to our console and we'll
create this text using a template string
3998.26 -> because interpolation is only
a feature of template strings,
4003.48 -> so we'll type back tick items,
4008.16 -> open bracket, closed bracket,
4010.32 -> and back tick.
And now between these brackets,
4014.58 -> we want to insert the quantity or
the number of products in our cart.
4020.22 -> To insert this with interpolation,
4023.13 -> we're going to type dollar
open, curly bracket,
4027.15 -> close curly bracket.
4029.55 -> So this combination of characters
allows us to insert values
4034.08 -> directly into the string.
Between these curly brackets,
4038.88 -> we can calculate the quantity,
4041.31 -> which is one basketball plus one t-shirt.
4047.01 -> This will add one plus
one, which equals two,
4051.33 -> and then insert it
directly into the string.
4055.5 -> Let's keep going and create
the rest of this line.
4059.64 -> So we're going to type at the end a colon
4064.05 -> space and dollar,
4066.81 -> and now we're going to insert
another value into the string,
4070.83 -> which is the cost of the
products. To insert another value,
4075.87 -> we're going to type dollar open,
curly bracket, close curly bracket.
4080.7 -> Again, in between the curly brackets,
4084.39 -> we're going to calculate
the cost of the products,
4087.99 -> which is 2090 5 cents
4093.81 -> plus
4096.82 -> seven 99 cents.
And we'll surround this in brackets
4102.04 -> to make sure we calculate
this first, and at the end,
4106.3 -> we're going to convert back
to dollars by dividing by
4110.53 -> 100. If we press enter,
4115.6 -> this creates the first line
of text again in our final
4120.1 -> project. If we compare this code,
4123.28 -> which uses interpolation
to our previous code,
4127.24 -> which uses concatenation,
4129.64 -> you can see that interpolation is
a much cleaner way of inserting
4134.64 -> values into a string.
4136.84 -> So interpolation is a
recommended solution. Next,
4142.56 -> template strings have another special
feature called multi-line strings.
4148.39 -> Let's go to our console and
we're going to type a back tick,
4154.12 -> sum,
4155.68 -> and then press enter and text
4160.69 -> and back. Tick.
4163.21 -> Notice that this string
is on multiple lines,
4166.87 -> so we call this a multi-line string,
4170.62 -> and this feature is only
available for template strings.
4175.27 -> If we press enter,
4178.12 -> you can see that the new line in
the string just creates the new line
4183.07 -> escape character that we learned earlier.
So that's the
4187.36 -> multi-line string feature
of template strings.
4191.05 -> We're going to use multi-line
strings a lot later in this course,
4195.73 -> but for now, I just wanted to
introduce you to this feature.
4200.53 -> Now, you might be wondering again,
what should we use to create a string,
4205.72 -> single quilts or template strings?
4209.02 -> Even though template
strings have more features,
4211.99 -> I find that most JavaScript code
still uses single quilts by default.
4217.51 -> So my personal recommendation is
to use single quotes by default.
4222.7 -> And if we need to insert a value
into the string or type the
4227.29 -> string on multiple lines,
then use template strings.
4232.48 -> And that's the end of this
lesson. In this lesson,
4236.14 -> we learned about strength.
A string represents text.
4241.78 -> We learned how to use strings
and numbers to create the text.
4246.31 -> In our final project,
4248.26 -> we learned three different ways of
creating a string, single quotes,
4253.3 -> double quotes, and back
ticks or template strings.
4257.5 -> We learned about escape characters,
4260.35 -> and we learned two useful
features of template strings,
4264.64 -> interpolation, and multi-line strings.
4268.84 -> Here's some exercises to help you
practice working with strings.
4293.75 -> So far in this course,
4295.22 -> we've learned some basic features
of JavaScript like numbers and
4299.94 -> strings. In this lesson,
4302.63 -> we're going to learn how
to use H T M L CSS and
4306.95 -> JavaScript together because as I
mentioned at the beginning of this course,
4312.26 -> we use all three technologies
to build a full website.
4317.96 -> HTML creates the content of a website,
4321.14 -> like the buttons and the text.
4323.93 -> CSS changes the appearance of the website,
4328.01 -> and JavaScript makes
the website interactive.
4332.54 -> The first thing we're going to do is
review the basics of H T M L and C
4337.76 -> s s that we will need for
the rest of this course. Now,
4342.5 -> in order to write H T M L and c s s code,
4346.43 -> we'll need to install another piece
of software called a code editor.
4351.77 -> A code editor helps us
write and organize our code.
4356.69 -> The most popular code editor for
web development is called VS.
4361.56 -> Code or Visual Studio Code to install
4366.2 -> VS code. You can go to
google.com in your browser
4372.53 -> search for VS code,
4376.55 -> click the result and follow the
instructions to download and
4381.26 -> install. Once we've installed VS code,
4385.94 -> we're ready to review the
basics of H T M L and c s s.
4391.7 -> We'll start with H T M tml.
4395.11 -> HTML stands for hyper
text markup language,
4399.32 -> and just like JavaScript,
4401.47 -> HTML is also giving
instructions to a computer. Now,
4406.34 -> unlike JavaScript,
4407.87 -> we can't use the console
to write and run HTML code.
4413.03 -> Instead,
4414.14 -> we write HTML code inside
a file using our code
4419.09 -> editor. Let's do that right now.
4422.63 -> We'll start by going to our desktop.
4425.36 -> So I'm going to close my
browser to go to my desktop,
4429.65 -> and then we're going
to create a new folder.
4432.95 -> So we can write click new folder.
4438.26 -> This folder is going to contain all
the code that we write in this course.
4443.72 -> Let's name this folder,
JavaScript dash course.
4450.02 -> Next, we're going to open this
folder in our code editor.
4454.44 -> So let's open vs code,
4458.28 -> and then we'll click file open folder
4464.58 -> and find the folder that
we just created. For me,
4468.45 -> it's on the desktop
And it's this folder right here.
4473.04 -> So we're going to select the folder
and then click select folder.
4480.3 -> Now we can close this startup
message and we're going to create
4485.19 -> an HTML file.
4487.83 -> We're going to click this
icon to create a new file,
4492.78 -> and we're going to name
this file website dot
4498.68 -> html and press enter.
4502.56 -> Ending the file name with dot html
tells a computer that this file
4507.51 -> contains HTML code rather than just text.
4512.73 -> Now, let's review some basic HTML code.
4516.93 -> We're going to type the
code less than button
4521.79 -> greater than,
4523.68 -> and we also need to type less
than slash button greater than,
4528.12 -> but our code editor might
auto complete this for us.
4532.29 -> So this code tells a computer
to create a button and
4537.24 -> inside the button we're going
to have the text. Hello.
4543.36 -> Now let's save this file by clicking file
4547.92 -> save or by typing control S on Windows
4553.02 -> or command S on Mac.
4556.77 -> Now to run this HTML code,
4559.47 -> we're going to open this
file in our browser.
4563.13 -> Let's go back to our desktop.
4566.91 -> We're going to open the
folder that we created,
4571.74 -> find the HTML file, select it,
4575.85 -> and then right click
open with Google Chrome.
4583.53 -> As you can see,
4584.34 -> we have a website and we created
a button with a text Hello
4589.02 -> inside. And if we look back at our code,
4594.84 -> that's exactly what we told the
computer to do. So just like JavaScript,
4600.62 -> HTML is also giving
instructions to a computer.
4606.06 -> Let's review some more HTML code first.
4610.14 -> I'm just going to rearrange my windows
here so that it's easy to see the website
4615.36 -> side by side. Next,
4620.16 -> we're going to click the end of the
first line and press enter to create a
4624.96 -> new line.
4626.31 -> And we're going to type the
code less than P, greater than,
4631.87 -> and we also need to type less
than slash p greater than.
4636.64 -> So this code creates a paragraph,
4640.18 -> and inside the paragraph we're
going to put some text, for example,
4645.48 -> paragraph of text.
4649.93 -> Now let's save our file by typing
CTRL S on windows or command S on
4654.88 -> Mac, and to update our
website to the new code,
4659.65 -> we're going to go to our website
and click refresh or type
4664.24 -> CTRL R on windows or command R on Mac.
4670.9 -> And now you can see that the computer
created a paragraph of text just
4675.82 -> like we told it to do, and
that's the basics of html.
4680.89 -> The computer reads our code and then
follows our instructions one by one.
4686.44 -> First it creates a button,
4689.29 -> and then it creates a
paragraph of text. Now,
4694.24 -> let's review the syntax rules for html.
4698.86 -> Each of these things that
we're displaying on a webpage,
4702.13 -> these are called HTML elements.
4705.25 -> So a button is a type of HTML element,
4708.52 -> and a paragraph is another
type of H T M L element.
4713.35 -> To create an element, we
start with a less than symbol,
4717.4 -> and then the element name like a button,
4721.39 -> and then the greater than symbol.
4724.36 -> So this whole thing is
called an H T M L tag.
4728.8 -> This tells a computer to
create a button element.
4733.69 -> Every HTML tag needs a matching tag.
4738.13 -> The matching tag follows the same syntax,
4740.95 -> except it has a slash in
front of the element name. So
4745.51 -> this is called the opening tag,
and this is called the closing tag.
4751.06 -> You can think of the opening tag as the
start of the button and the closing tag
4755.5 -> as the end of the button.
4758.02 -> And in between we have the
contents inside the button.
4762.37 -> In this case, it's the text.
Hello. In addition to text,
4767.5 -> we can also have elements
inside an element. For example,
4772.6 -> we can go to our paragraph
element and we can add a button
4777.04 -> inside, so less than button,
4781.54 -> greater than, and we also need less
than slash button greater than.
4786.73 -> And then inside the button,
we'll also have the text,
4789.97 -> hello if we save this file and
4794.44 -> refresh the page.
4797.32 -> Now our paragraph element
has a button element inside.
4802.45 -> By the way, this is called nesting.
4805.48 -> When we have an element
inside, another element,
4809.84 -> the last syntax rule we have
to review is that in html,
4814.37 -> if we have multiple spaces, for example,
4817.73 -> if we go here and type multiple spaces,
4822.29 -> multiple spaces are combined
into one space on the webpage.
4827.51 -> So if we save this code and refresh,
4832.46 -> you'll notice that all of the spaces
that we added only show up as one space
4837.35 -> on the webpage. In addition, in H T M L,
4841.4 -> new lines also count as spaces.
So if we go back to our code
4848.06 -> and we type here and press
enter to create a new line
4853.22 -> and then save and refresh,
4858.2 -> notice that the new line
doesn't appear on the webpage.
4862.07 -> And that's because this new
line here is the same as spaces
4866.96 -> in html.
4868.31 -> So all of these get combined
into one space on the webpage.
4874.13 -> At first, this might seem a little weird,
4876.89 -> but this feature gives us a lot of
flexibility When organizing our HTML code,
4882.62 -> for example,
4883.97 -> we can go into our code
and add a new line here to
4888.69 -> separate these two elements and
make our code easier to read.
4893.15 -> Another thing we usually do to make
our code easier to read is to put the
4898.07 -> contents of an element on its own line.
For example,
4903.23 -> we're going to type here
and press enter and here
4908.15 -> and press enter again
4910.88 -> to put the contents of the
button on its own line. Now,
4915.02 -> it's a lot easier to see where this
button starts and where it ends.
4920.63 -> We can do the same thing
with the paragraph.
4923.33 -> We can type here and press
enter and type here as well,
4928.67 -> and press enter,
4930.53 -> and then remove some of the
extra spaces to put the content
4935.42 -> of the paragraph on its own line. And now,
4938.87 -> if we save our file and refresh,
4944.42 -> you notice that none of the new lines
that we added appear on the webpage.
4949.46 -> By the way,
4950.45 -> a webpage is a single page like
the homepage or the cart page
4956.09 -> together. We call this a website.
4960.23 -> So that's the basics of
HTML and HTML syntax.
4966.05 -> Now let's review css.
4968.63 -> CSS stands for cascading
style sheets and CSS
4973.58 -> changes the appearance of our website.
Let's review some CSS
4978.41 -> code.
4979.97 -> We're going to write our CSS
code inside our HTML file.
4985.26 -> First, let's type here and
create some new lines at the top.
4990.69 -> And then at the top we're
going to create a special HTML
4995.48 -> element called the style element.
4999.09 -> So let's type less than,
style, greater than,
5005.06 -> and we also need the closing tag,
less than slash style greater than.
5010.7 -> So the style element is unique because
it doesn't appear visibly on the
5015.53 -> page. Instead,
5017.96 -> the purpose of the style element
is that it lets us write CSS code
5022.97 -> inside. So inside here,
5026.24 -> let's press enter to create a new line,
5029.57 -> and we're going to type
button open curly bracket,
5034.58 -> close curly bracket. And then
inside the curly brackets,
5039.47 -> we're also going to press
enter to create a new line.
5043.97 -> So this is CSS code.
5046.37 -> And this code tells a computer to
change the appearance of all buttons on
5051.35 -> the page.
And then inside these curly brackets,
5055.25 -> we can tell the computer how to
change the appearance. For example,
5059.81 -> we can type background, dash color,
5064.66 -> colon, red, and semicolon.
5068.93 -> If we save and refresh,
5073.67 -> you can see that this CSS code changes
the appearance of all buttons on the
5078.44 -> page and changes their
background color to red.
5083.75 -> Let's do another example. We're
going to go back to our CSS code.
5088.91 -> We're going to type here and press enter
to create a new line and we're going to
5093.84 -> add color, colon,
5097.37 -> white and semicolon.
5100.4 -> Let's save and refresh,
5105.74 -> and this CSS code changes the
text color of all buttons on the
5110.48 -> page to white. Let's do one more example.
5115.64 -> We're going to type the code, order
5121.07 -> none and semicolon.
5123.83 -> Let's save this and refresh.
5128.42 -> And this CSS code removes the
border for all buttons on the page
5134.09 -> and that's how CSS works. We tell the
computer which elements we want to
5138.98 -> change and then how to change
the appearance of these elements.
5145.43 -> Now let's review these
syntax rules for css.
5149.39 -> This part of the CSS code
is called the CSS selector.
5154.34 -> It tells a computer which elements
we want to change. In other words,
5159.17 -> it selects which elements to change.
5162.68 -> Inside the curly brackets
we have some CSS styles.
5167.43 -> This tells a computer how to
change the appearance for each
5172.17 -> style. The left side is
called the CSS property.
5176.88 -> This tells a computer what we're changing.
5180.09 -> The right side is called the CSS value.
5183.72 -> This tells a computer what
we're changing the property to.
5188.13 -> For example, this style changes
the background color to red.
5194.22 -> We use a colon to separate the
property and the value and a
5199.05 -> semicolon at the end to tell the
computer that this is the end
5203.94 -> of a style.
So that's the basic syntax of css.
5208.8 -> We tell the computer which elements we
want to change and then how to change the
5213.69 -> appearance of these elements.
5217.23 -> The next thing we're going
to review is HTML attributes.
5221.73 -> Right now this CSS selector
changes the appearance of
5226.53 -> all buttons on the page. However,
5230.07 -> what if we only want to
change the appearance of this
one button and we want to
5234.36 -> style the other button
differently? How do we do that?
5238.56 -> We're going to review a feature
of HTML called attributes.
5242.79 -> Attributes change the behavior
of an element. For example,
5247.89 -> we're going to go to the opening
tag of the first button and then
5252.48 -> here we're going to add an
HTML attribute by typing
5257.28 -> space.
5259.02 -> Title equals double quotes.
5263.49 -> And then in between the double quotes,
5266.43 -> we're going to type tool tip.
5270.84 -> So this is an HTML attribute
and this attribute adds a
5275.61 -> tool tip to this button.
If you're wondering what a tool tip is,
5280.62 -> if we hover over some
code in our code editor,
5284.07 -> it'll show us this sort of
popup with more information.
5288.12 -> This is called a tool tip. When we
hover over something and this shows up,
5293.82 -> so if we save our file
and refresh the webpage
5299.49 -> and now we hover over our button,
5302.52 -> we can see that the HTML attribute
added a tool tip to our button
5308.37 -> and then inside the double quotes
is the text inside the tool tip.
5314.1 -> For example,
5315.33 -> we can actually change this to good job
5320.76 -> and if we save and refresh
5325.56 -> and hover over our button,
5327.57 -> the text between the double quotes
is what shows up in our tooltip.
5332.61 -> So that's an example of an HTML attribute.
5337.26 -> Now let's review the syntax
rules. For attributes,
5341.5 -> we always put attributes on
the opening tag and we add a
5345.91 -> space between the element name and
the attribute to separate them.
5351.34 -> On the left side is the attribute name.
5354.49 -> This tells the computer What we're
changing about this element on the right
5359.38 -> side is the attribute value.
5362.17 -> This tells a computer what we're
changing this attribute to.
5367 -> For example,
5368.26 -> here we're changing the tool
tip of this element to good job.
5374.05 -> We separate the name and value with
an EcoSign and make sure there are
5378.94 -> no spaces around the EcoSign and
we surround the value with double
5383.89 -> quotes. Now let's go back
to the original problem.
5389.2 -> How do we style these buttons differently?
5392.44 -> We can do this using a very important
attribute called the class attribute.
5397.81 -> Let's review that right now.
5400.21 -> We're going to go back to our button
and then here we're going to type
5405.55 -> space class equals double quotes,
5410.83 -> and then inside the double quotes
we're going to type red dash
5416.02 -> button.
5417.88 -> So the class attribute sort
of adds a label to an element.
5422.77 -> So here we labeled this
button as a red button
5428.05 -> and now that we label this
element, we can select it in css.
5433.39 -> To do that, we're going
to go to our CSS code.
5436.99 -> We're going to remove the
button selector and replace it
5441.46 -> with.red dash button.
5446.86 -> When we start the selector with a dot,
5449.44 -> this means that now we're
looking for a class.
5453.04 -> So here we're going to look for all
elements with the class red dash
5457.78 -> button, which is only
this element if we save
5463.99 -> and refresh.
5467.35 -> Now only the elements with the
class red button gets these styles.
5473.02 -> We can also add the same class to
multiple elements. For example,
5478.21 -> we can go to our other button and add the
5482.5 -> class equals red dash button
5488.74 -> if we save and refresh.
5493.48 -> Now these styles get applied to both
buttons again because they both have the
5497.95 -> class red dash button.
5500.92 -> If we want to style this
button differently, we just
give it a different class.
5505.9 -> For example,
5507.22 -> we can change this to yellow dash button
5512.53 -> and then in our CSS we
can add another selector,
5517.72 -> so we can type dot.
5519.62 -> This means we're going to select a
class and we're going to select the
5524.78 -> yellow dash button class,
5529.1 -> open curly bracket, close curly bracket.
5532.43 -> And then inside here we can add
some styles for the yellow button.
5537.59 -> For example, background, dash color,
5542.93 -> colon, yellow, and semicolon.
5547.1 -> Now let's save and refresh,
5552.26 -> and that's how we use the class
attribute in HTML to modify
5556.67 -> specific elements.
5559.73 -> The final thing we need to review is
something called the HTML structure.
5565.31 -> Let's go back to our website.
5567.26 -> We're going to find a blank area
and then right click and then
5572.21 -> click inspect.
5575.66 -> So we already learned
about the console tab
5580.19 -> here. We can write and
run JavaScript code.
5584.36 -> Now we're going to go to the elements tab,
5587.36 -> which is for HTML and css.
5590.78 -> So in the elements tab we can
see all the HTML on the page
5596.27 -> as well as all the CSS on the page,
5599.81 -> and we can play around
with the CSS if we want.
5603.8 -> Now if we go back to the html,
5607.16 -> you'll notice that our webpage has some
elements that we didn't add before,
5611.96 -> the HTML element, the head
element and the body element.
5618.53 -> So this is the structure that we're
supposed to follow when writing HTML
5624.2 -> in our code, we didn't
follow the structure,
5627.2 -> so the browser actually adds it
for us automatically. However,
5631.76 -> it's still best practice to follow the
structure in our code because it gives us
5636.59 -> access to some more features of html.
5640.55 -> Let's review the HTML structure
and add it to our code.
5645.95 -> We're going to type up here and
we're going to create some new lines.
5651.41 -> And now every HTML file is
going to start with less
5656.19 -> than exclamation doc type in capitals
5661.28 -> and then space HTML and greater than.
5667.23 -> This is not an HTML element,
5670.15 -> it's a special line of code that tells
a browser to use a modern version of
5675.11 -> html. If we don't have this,
5677.7 -> the browser might fall back to an older
version of HTML that has less features.
5684.31 -> Next, we're going to
create an H T M L element,
5688.55 -> so less than H T M L and greater than
5695 -> the H T M L element
represents the entire webpage.
5699.6 -> So everything on the webpage
should go inside this element
5705.12 -> and then inside the HTML element,
5707.46 -> we're also going to split
it up into two sections,
5711.69 -> the head element
5714.9 -> and the body element.
5720.45 -> So the body element is supposed to
contain everything that is visible on the
5724.98 -> page.
5726.24 -> In our example that would be
the buttons and the paragraph.
5731.55 -> So let's actually select this code
5735.09 -> and we're going to right click and cut.
5740.07 -> And then inside the body
5743.76 -> we're going to right click and paste.
5750.18 -> The head element contains
information about the page.
5754.95 -> In general,
5755.68 -> everything that is not visible
on the page goes inside the head.
5761.46 -> In our example, that would
be the style element.
5765.54 -> So let's select this as well.
5768.63 -> We're going to right click and cut,
5773.46 -> and then inside the head
5777.6 -> we're going to right click and paste.
5782.1 -> And at the bottom let's just clean up
by removing all of the extra new lines.
5788.31 -> So this is a structure that we're
supposed to follow in all of our
5793.21 -> HTML files. As you can see,
5796.23 -> this structure uses a lot of
nesting or elements inside
5800.64 -> elements to organize our code. Okay,
5805.38 -> so what are the benefits of
following this structure?
5809.13 -> One benefit is that there are other
elements that we can use inside the head.
5814.56 -> For example, let's type here, press enter,
5819.06 -> and we're going to add the title element.
5823.86 -> So the title element
sets the text in the tabs
5828.09 -> inside we can type
5831.41 -> html CSS review.
5835.17 -> If we save and refresh,
5838.71 -> the title will show up in the tap.
5842.19 -> So this is an example of an element
that we can now add in the head.
5847.74 -> Another benefit that we get from
this structure is the ability to
5851.94 -> automatically refresh our
webpage when we change our code
5857.22 -> so far, every time we change our code,
5860.61 -> we have to save and then
manually refresh the webpage.
5866.13 -> We can actually automate this by
following the structure and then
5870.45 -> installing a VS code extension.
5874.71 -> So let's click the extension area
and we're going to search for
5879.67 -> the extension live server
5884.53 -> and click install. Once
we have that installed,
5889.78 -> we're going to change a setting.
5892.75 -> Let's open the settings by clicking
this icon in the bottom left and
5897.52 -> then click settings
5901.6 -> At the top we're going to search for live
5906.01 -> server
5908.92 -> and we're going to look for a setting
called live server custom browser,
5915.22 -> And we're going to change this to Chrome.
5919.06 -> Now if Google Chrome is already
your default web browser,
5923.05 -> you don't need to do this
step, but it's nice to know.
5927.19 -> Now let's close the settings
and go back to our code
5934.6 -> next. Instead of opening this
file directly in the browser,
5938.86 -> like before, we're going to use
live server to open this file.
5944.35 -> To do that,
5945.37 -> we're going to right click this file
in our code editor and then click
5950.53 -> open with live server.
5954.37 -> If we open a file with Live server,
5956.86 -> this webpage will automatically
refresh when we change our code.
5962.74 -> For example,
5963.97 -> we can go here and change the
background color to green.
5969.88 -> If we save live server will
automatically refresh the
5974.5 -> webpage, so we don't have to
do that back and forth anymore.
5979.33 -> Let's just change it back to red so
that the class name makes sense and
5984.04 -> save. And we can also
close the previous tab.
5991.15 -> So this is the H T M L structure.
5994.39 -> It gives us access to
more features of html,
5998.89 -> and this is all we need to review
about h, html and css. For now,
6004.11 -> if you want to learn more,
6005.58 -> you can check out my HTML and CSS
full course in the video description.
6012.72 -> Before we add a JavaScript to our website,
6015.36 -> we're going to review some VS code setup.
So you'll notice that
6020.22 -> many of these lines have
spaces at the front.
6024.21 -> These spaces are called
indents, an indent maker code,
6028.29 -> easier to read. For example,
6031.11 -> we can easily tell that this
code is inside the brackets
6035.79 -> because it has an extra
indent in the front.
6039.99 -> If we didn't have indents, here's
what the code would look like.
6043.86 -> It's a lot harder to
read. To add an indent,
6048.39 -> we can type at the beginning
of the line and press tap.
6053.77 -> To remove an indent,
6055.3 -> we can press shift tab
or just use backspace.
6060.49 -> Now by default vs. Code
uses four spaces per indent.
6066.01 -> However, in html, CSS and JavaScript,
6069.94 -> we usually use two spaces per indent.
So we're going to update this setting.
6075.79 -> Let's go to our settings by clicking
this icon in the bottom left
6081.28 -> and then click settings.
6084.88 -> And at the top we're
going to search four tab
6090.19 -> and we're going to change
the tab size from four to
6094.99 -> two.
6096.73 -> Now let's close the settings and we're
also going to change the indents for
6101.62 -> this file.
6103.18 -> We're going to go down here
and click select indent,
6108.31 -> and we're going to choose
indent using spaces,
6112.24 -> and then click two.
6115.6 -> And now if we type at the
start of a line and press tab,
6119.86 -> it will only add two spaces per indent.
6124.15 -> So let's reformat our code to use two
spaces per indent instead of four.
6130.09 -> First we're going to remove
all the indents in our code.
6134.08 -> A shortcut for this is to
select all of these lines
6139.18 -> and press shift tab to remove
one indent for each line.
6144.4 -> So we're going to keep pressing
shift tab until we remove all the
6149.02 -> indents.
6151.42 -> Next we're going to add the indents
back using a similar shortcut.
6157.09 -> We're going to select the
head element and press tab to
6161.83 -> add one indent for each line and
then select everything inside
6166.75 -> the head and press tab
to add another indent and
6171.65 -> then select everything
inside style and press tab.
6176.47 -> And then inside each of these brackets,
6179.02 -> we're going to select the lines press tab,
6182.32 -> and then here press tab.
6185.29 -> We'll do the same thing
for the body element.
6188.41 -> We'll select all these
lines and press tab.
6192.61 -> We'll select everything
inside the body press tab,
6196.99 -> and then inside each of these
elements we're going to press tab and
6201.91 -> press tab. Now if we save,
6206.11 -> our website will look the same
because all we did was adjust the
6210.77 -> indents.
6212.74 -> So there's one other setting in VS
code that we're going to set up,
6216.21 -> which is line wrapping. If
you look at this line of code,
6221.38 -> you can see that it's really long and
we need to scroll horizontally to see
6226.36 -> the rest of the line. Instead,
6229.15 -> we're going to make this line
wrap around if it gets too long.
6233.39 -> Let's go back into our settings by
clicking here and then click the
6237.86 -> settings
6240.2 -> and then up here we're
going to search for wrap
6245.3 -> and we're going to look for editor
word wrap and we're going to turn this
6250.19 -> on. Now if we close our settings
and go back to our code,
6256.25 -> this line,
6257.03 -> which is really long will wrap
around to the next line instead of us
6261.77 -> having to horizontally scroll.
So that's the VS code
6266.48 -> set up that we need two
spaces per indent and line
6271.07 -> wrapping. Finally,
6273.77 -> we're going to add
JavaScript to this website.
6277.34 -> So we learned that we can use the
console to write and run JavaScript.
6282.26 -> Well, there's actually another way
to run JavaScript which is inside an
6286.82 -> HTML file. Let's learn how to do that.
6291.14 -> So we learned that HTML has a
special element that runs CSS code
6296.03 -> called the style element,
6298.64 -> while HTML has another special
element that runs JavaScript code.
6304.13 -> And this element is
called the script element.
6308.33 -> So inside our body at
the bottom of the body,
6313.19 -> we're going to add less
than script, greater than,
6318.74 -> and the closing tag less than
slash script greater than.
6323.81 -> And inside the script element
we can put some JavaScript code,
6328.61 -> we're going to add the code alert,
6334.37 -> hello
6337.79 -> and semicolon if we save live server will
6342.56 -> refresh the page. And now you notice
that the computer now runs our
6347.12 -> JavaScript code just like
it did in the console.
6350.57 -> It creates a popup with
a text Hello inside,
6356.54 -> and we usually put the script element at
the bottom of the body because we want
6361.19 -> the webpage to be created first and
then we use JavaScript to make it
6365.99 -> interactive. For the rest of this course,
6369.77 -> we're going to run our JavaScript
code using an H T M L file.
6374.6 -> The console that we used in the
previous lessons is more of a way to try
6379.4 -> out JavaScript code. We wouldn't
use the console for a real website.
6385.88 -> In addition to the script element,
6388.01 -> we have another way to run
JavaScript code inside html,
6393.26 -> and that's by using an attribute.
6396.35 -> Let's go back to our first button
and here we're going to add another
6401.3 -> attribute.
6402.68 -> So let's type space and this
time we're going to add the
6407.75 -> on click attribute equals
6412.56 -> double quotes.
6414.39 -> So this attribute will run
JavaScript code whenever we
6419.1 -> click this button, that's
what on click means.
6423.51 -> Between the double quotes,
we can write some JavaScript.
6427.89 -> For example, let's press enter enter,
6431.58 -> and then here we're going to type alert.
6445.23 -> Now if we save
6447.96 -> live server will refresh the page
and run this line of JavaScript code.
6453.39 -> Let's press okay and now
if we click this button,
6458.82 -> it will run this line of JavaScript
code and create a popup with a
6463.59 -> text. Good job inside.
6468.87 -> So those are two places where
we can run JavaScript code,
6473.16 -> the script element and
the on click attribute.
6477.81 -> The code in the script element
runs first when the page is loaded,
6483.54 -> the code in the on click attribute
runs after when we click the
6488.34 -> button on the page,
6491.91 -> and that's how we use H
T M L CSS and JavaScript
6496.39 -> together on a website. Notice
that everything starts from h
6503.37 -> l first creates the website,
6506.4 -> and then inside the H T M L,
6509.13 -> we can run CSS code to change
the appearance and we can
6514.02 -> run JavaScript code to make
the website interactive.
6520.17 -> Now let's learn some new
features of JavaScript that
we haven't seen yet in this
6524.46 -> course. The next feature we're
going to learn is called comments,
6529.59 -> comments or pieces of code
that the computer ignores.
6533.22 -> So let's create our first comment.
6536.16 -> We're going to go down to
the script element here
6539.76 -> and type forward slash forward slash.
6544.32 -> So this is a comment,
6546.93 -> anything after the double slash
will be ignored by the computer.
6551.58 -> So we can type anything we want,
6553.35 -> like this is a comment
6559.26 -> if we save it,
6561.19 -> ignores this line and creates
the popup in the next line.
6566.79 -> Now let's close this popup
and learn why we use comments.
6572.07 -> Comments are useful for providing more
information for people reading our
6576.87 -> code. For example,
6579.6 -> we can create a comment
above this code like
6584.64 -> this code creates a pop-up.
6590.32 -> This comment helps others and
ourselves understand what this code
6595.27 -> does. So that's one way we use comments.
6600.16 -> Another way we use comments is if we
don't want to run some code anymore,
6605.62 -> but we also don't want to
delete it. For example,
6609.58 -> this code creates a popup
every time we refresh the page
6615.16 -> and this can be annoying, so I
want to stop running this code,
6620.2 -> but I also don't want to delete it
because you might want to review this code
6624.91 -> later.
6626.86 -> So what we can do here is to add
a double slash in front of this
6631.67 -> line to turn this code into a comment.
6636.37 -> Now if we save,
6638.35 -> the computer will ignore this line
of code and not create the popup.
6644.44 -> This is called commenting out the code.
6648.19 -> It's useful if we don't want
to run some code anymore,
6651.67 -> but we also don't want to delete
it for informational purposes.
6657.07 -> So JavaScript has another syntax
for writing comments and that
6661.72 -> syntax is slash star and star
6666.4 -> slash here.
6669.46 -> Anything between the stars is a comment.
6672.82 -> This is called a multi-line
comment because between the stars
6677.74 -> we can write a comment on
multiple lines. For example,
6682.54 -> we can type multier line,
6687.67 -> enter comment
6691.72 -> on the other hand double slash is
known as a single line comment.
6697.84 -> Now just like JavaScript,
6700.3 -> HTML and CSS also have comments,
6704.08 -> but they use a different syntax.
6707.38 -> If we scroll up to our HTML here,
6712 -> we can type less than
exclamation dash dash
6717.25 -> and we also need dash greater than.
6720.52 -> So anything between these
double dashes is a comment.
6725.35 -> For example,
6726.76 -> this is a comment in
6731.74 -> css to create a comment we can type slash
6736.69 -> star star slash,
6739.96 -> so it's the same multi-line
comment as JavaScript between
6744.91 -> the stars. We can add a comment,
6747.94 -> so this is a comment
6753.4 -> if we save our file,
6755.86 -> nothing changes on our webpage because
comments are ignored by the computer.
6762.04 -> The last feature of JavaScript we're
going to learn is called console dot log.
6767.27 -> Let's go back to our code and
at the bottom in the script
6771.86 -> element,
6774.29 -> we're going to type the code two plus two.
6779.33 -> So we learned that this code in
JavaScript does some math. However,
6784.37 -> if we save this file,
6787.82 -> where is the result of this math?
6790.64 -> So we might think that the result
will show up in the console,
6794.75 -> but if we right click, click inspect
6800.15 -> and then click the console.
6803.06 -> You'll notice that the result
doesn't show up here either,
6807.32 -> and that's because before
we were running two plus two
6812.42 -> inside the console, so the
result shows up in the console,
6818 -> but now we're not running this
code in the console anymore,
6822.05 -> we're running this code on the
webpage. So how do we see this result?
6828.35 -> The solution is we're going to redirect
this result back to the console.
6834.32 -> To do that, we're going
to use this piece of code
6838.97 -> console dot log, open bracket,
6843.95 -> close bracket, and semicolon
6847.64 -> console dot log will display
whatever's between the brackets back
6852.53 -> in the console. So if we move
this code between the brackets,
6857.96 -> so we select this and then right click cut
6863.33 -> and then between the brackets right click,
6866.93 -> paste and save.
6870.62 -> The result of this code is
displayed back in the console
6875.72 -> and console dot log works for
any code that we learned so far.
6880.82 -> For example, we can use strings,
6884.75 -> so let's create a new
line and type console
6890.48 -> dot log, open bracket close,
6895.1 -> and then between the brackets,
let's type some strings,
6900.17 -> some quote plus
6905.18 -> text quote and save this file.
6910.52 -> Again,
6911.42 -> it will display the result of whatever's
between the brackets back in the
6916.25 -> console.
6918.14 -> So that's how we see the result of
JavaScript code that is running in a file.
6923.54 -> We used console dot log
and that's the end of this
6928.1 -> lesson. In this lesson,
6930.5 -> we reviewed the basics of HTML and css.
6935.42 -> We set up our code editor vs code.
6939.47 -> We learned how to load
JavaScript inside an HTML file
6944.52 -> using the script element
and the on click attribute,
6948.96 -> we learned how to create comments
and we learned how to use
6953.52 -> console dot log.
6956.97 -> Thanks for watching this course so
far. If you find this content valuable,
6961.32 -> you can support this
channel by liking the video,
6964.26 -> clicking subscribe below the video
and recommending this course to your
6968.91 -> friends. Thanks again and
let's continue with the course.
6998.25 -> In this lesson we're going to learn
the next feature of JavaScript called
7002.51 -> variables,
7004.04 -> and we're going to use variables to build
a simple version of the cart quantity
7009.05 -> feature of the final project. First,
7012.89 -> let's create a new HTML
file just for learning
7017.8 -> variables.
7019.1 -> We're going to go to our code editor
and click this icon to show our
7023.96 -> files and then click
this icon to create a new
7028.46 -> file. And we're going to name this file,
7033.62 -> zero five dash variables dot
7039.71 -> html and press enter.
7043.1 -> So the zero five just means that
this file is for lesson five.
7048.65 -> Let's also add the lesson
number to website dot html.
7054.11 -> We'll select this file
and then right click
7058.43 -> rename and then add the front.
7062.54 -> We'll add zero four dash and press enter.
7068.39 -> Next,
7069.19 -> we're going to copy all the
code in website dot html to
7074.51 -> variables dot html.
7076.97 -> So let's click in this file and we're
going to select all of this code
7081.89 -> by typing control A on
Windows or command A
7086.75 -> on Mac.
7089.21 -> And then we're going to right click copy
7094.1 -> and then inside variables dot html,
7098.18 -> right click and paste.
7102.83 -> Let's click this icon to hide
our files for now and we'll
7107.6 -> prepare this file for this lesson.
So let's scroll up to the top.
7113 -> And first we're going
to change the title to
7117.87 -> variables.
7119.93 -> Next we're going to all the CSS
because we're going to start over
7125.76 -> and we're going to delete all
the HTML except for the script
7130.59 -> element
7133.98 -> and let's delete all the JavaScript
from the previous lesson.
7139.8 -> And finally, let's save
7143.52 -> and we'll open this file in our
browser by right clicking and
7148.48 -> then open with live server.
7152.58 -> And now we can close the previous
tab and the previous code for
7157.38 -> now.
7159.89 -> Now we're ready to learn
variables. First of all,
7164.4 -> what is a variable? A
variable is like a container.
7169.95 -> We can save a value like a
number or a string inside a
7174.9 -> variable and then use it later.
7178.53 -> Let's do an example and
create our first variable
7183.18 -> inside the script element.
We're going to type the code,
7187.35 -> let and space the word let creates
7192.15 -> a new variable,
7194.4 -> and now we're going to choose
a name for our new variable.
7198.54 -> Let's name this variable one.
7203.13 -> So this creates a variable
or a container named variable
7207.93 -> one,
7209.07 -> and now we can save a
value inside this variable.
7214.38 -> To do that,
7215.4 -> we're going to type space equals space,
7220.08 -> and then a value, like
a number or a string.
7223.98 -> So let's save the number
three inside and we'll type a
7228.81 -> semicolon at the end.
7231.33 -> So here we used a let to
create a new variable.
7236.34 -> We named this variable,
7238.87 -> variable one and we saved
the value three inside this
7244.03 -> variable. Now that we saved
this value, we can use it later.
7249.63 -> For example,
7251.22 -> let's type a new line
and type the code console
7256.08 -> dot log, open bracket,
7259.59 -> close bracket and semicolon.
7263.22 -> Remember from the previous lesson that
this code displays whatever's inside the
7268.05 -> brackets in the console
so far we put a value
7273 -> inside like the number two if we save
7278.79 -> and then go to our website
and open the console.
7282 -> So right click inspect
And then
7286.93 -> click the console.
7289.5 -> We can see that the number two
was displayed in the console.
7294.54 -> So now let's try replacing this value
with the variable that we created.
7300.67 -> So instead of two,
7302.5 -> we're going to console
dot log variable one.
7308.44 -> If we save notice that
it now displays three,
7314.26 -> so it's displaying whatever value
is saved inside the variable.
7319.66 -> As you can see,
7320.89 -> we can save a value inside
a variable and then use that
7325.54 -> variable later on. Let's
do another example.
7331.27 -> We're going to create another variable.
7334.03 -> So we're going to create some
new lines and we'll type let,
7339.67 -> and this time let's name
this variable calculation
7346 -> and we're going to type
space equals space to save a
7350.57 -> value inside this new variable.
7353.95 -> And this time instead of just a number,
7356.29 -> we're going to save a calculation two plus
7361.42 -> two and semicolon.
7364.39 -> So this will calculate two plus two
and then save the result which is
7369.07 -> four into the variable.
7373.06 -> If we console dot log,
7378.04 -> open bracket calculation
7382.84 -> and semicolon and save,
7387.22 -> it will show us that the value
four is saved inside calculation.
7393.34 -> Now let's try this code.
7395.56 -> We're going to type a
new line and then console
7400.6 -> dot log, open bracket
and calculation again
7407.56 -> And plus two and semicolon.
7412.72 -> So here we're using a
variable inside a calculation.
7417.79 -> What this does is that it takes whatever
value is saved inside the variable
7423.13 -> right now it is four and then
substitutes that value into the
7427.72 -> calculation. So this
will be four plus two,
7432.55 -> which equals six. If we save,
7437.41 -> we can see that in the
console it displayed six.
7442.87 -> So we can use a variable
wherever we use a value and
7447.43 -> JavaScript will substitute whatever
is inside the variable into the
7452.41 -> code. Let's do another example.
7456.73 -> We're going to types some new lines
and create a new variable again
7461.65 -> using let and we're going
to name this variable
7466.54 -> result
7469.09 -> and we're going to make
it equal to calculation
7475.66 -> plus two and semicolon.
7480.38 -> So this does the same thing
as a code before it will take
7485.56 -> whatever value is inside
calculation, which is four,
7489.26 -> and substitute it into this code.
7491.9 -> So we get four plus two equals six,
7496.67 -> but this time we have an extra step.
We're going to save this result,
7501.11 -> which is six into another variable.
7505.64 -> So if we console dot log,
7510.44 -> result and save,
7515.84 -> we can see that six was
saved into the result
7520.77 -> variable. Again,
7523.37 -> we can use a variable
wherever we use a value.
7528.11 -> Now in addition to numbers,
7529.91 -> we can save any type of value
in a variable including strings.
7535.76 -> For example,
7536.81 -> let's create a new variable using let and
7541.7 -> let's name this message
7545.33 -> and we're going to save inside
this variable a string this time.
7550.31 -> So hello and semicolon
7556.41 -> again. We're going to console
dot log this variable,
7560.45 -> so console dot log and
7564.98 -> message and a semicolon at the end.
7569.6 -> If we save,
7572 -> it will show us that the string
hello is saved inside this
7576.44 -> variable. Okay,
7579.32 -> now that we learned how variables work,
7581.93 -> let's learn the syntax
rules for variables.
7586.01 -> The word let creates a new
variable and then we give the
7590.75 -> variable a name.
7592.88 -> So we can name variables almost
anything we want except for a few
7597.44 -> restrictions. Number one,
7600.11 -> we can't use special words
like let as a variable name.
7605.27 -> That's because let already has
a special meaning in JavaScript,
7610.13 -> it creates a variable. So let
is a reserved word. However,
7615.74 -> we can use Let one or let two
as a variable names we just
7620.57 -> can't use let. Number two,
7624.41 -> we can't start a variable
name with a number.
7628.16 -> If we start with a number,
7629.9 -> JavaScript will think this is a
number instead of a variable name.
7634.54 -> However, we can use numbers
in the middle or the end.
7639.95 -> Lastly,
7640.94 -> we can't use most special
characters like these or a
7645.41 -> space in a variable name. However,
7648.98 -> there are two special
characters we can use dollar and
7653.63 -> underscore. So those are the
rules for naming variables.
7659.28 -> And then to save something
inside a variable,
7662.52 -> we just use the equal sign and
then the value we want to save,
7667.65 -> and that's it. After we create a variable,
7670.77 -> we can start using it
in the rest of our coat.
7674.85 -> Now there's one last part of the
syntax that we haven't learned,
7678.57 -> which is the semicolon.
7681 -> We've seen semicolons in many
places already in JavaScript.
7685.98 -> A semicolon means this is
the end of an instruction.
7690.75 -> It's similar to a period in English.
7694.08 -> In English A period means
this is the end of a sentence.
7700.2 -> So here this semicolon tells
JavaScript that this is
7705.06 -> the end of an instruction,
7707.73 -> and now after this we can
add another instruction like
7712.56 -> console dot log log, open bracket,
7717.57 -> and then the string semicolon
and a semicolon at the end.
7723.81 -> If we save,
7725.97 -> it will run these two instructions one
after another without any problems.
7732.75 -> So if we didn't have the
semicolon here and we save,
7738.27 -> it wouldn't work because JavaScript
thinks that this entire line
7743.25 -> is one instruction.
7746.28 -> So we need semicolons to separate
different instructions in
7750.69 -> JavaScript. If we save,
7754.32 -> everything goes back to normal.
7757.44 -> So JavaScript is a little special
because it has a feature called
7762.09 -> semicolon insertion.
7764.31 -> That means it will try to insert
the last semicolon in a line of code
7769.2 -> automatically. For example,
7772.11 -> if we removed the last semicolon and save,
7778.41 -> this code will work
without that semicolon,
7781.56 -> and that's because JavaScript inserts
the last semicolon automatically.
7787.41 -> However,
7788.46 -> a lot of companies still prefer to use
semicolons in their JavaScript code
7793.92 -> because semicolon insertion can sometimes
put the semicolon in the wrong place.
7799.71 -> For this reason,
7800.94 -> we're also going to use semicolons in
this course to help you get used to
7805.47 -> JavaScript code with semicolons.
7809.91 -> Next,
7810.66 -> we're going to learn how to change the
value that is saved inside a variable.
7816.18 -> For example,
7817.41 -> here we save the number
three inside variable one.
7822.24 -> Now we're going to change the
value saved inside variable one.
7826.8 -> To do that, we're going to go to
the bottom and create some new lines
7832.71 -> and we're type the variable name again,
7835.57 -> so variable one.
7839.32 -> And now to change the value saved inside,
7843.01 -> we're just going to type the
EcoSign and then a different value
7848.08 -> alike, five and semicolon.
7851.94 -> And now if we console
dot log this variable
7856.06 -> console dot log
7860.05 -> variable one and semicolon and save,
7866.14 -> it will show us that five is
now saved inside variable One.
7871.84 -> Notice also that if we
scroll up to the top,
7876.1 -> the first console dot log
still displays a value three.
7880.66 -> And that's because at this point in
the code variable one still contained
7885.55 -> three,
7886.39 -> we didn't update the variable yet.
So when we first saved a
7890.92 -> value inside this variable,
7893.41 -> this is called assigning
a value to a variable.
7898.42 -> Then when we change the
value inside this variable,
7902.41 -> this is called reassigning
a value to a variable.
7907.69 -> Now let's learn the syntax
rules for reassigning a value.
7911.91 -> Notice that we don't use the
word let when reassigning.
7916.69 -> That's because let creates a new variable.
7920.98 -> So if we try to use Let again,
7924.01 -> it would try to create a new
variable named Variable one.
7928.9 -> However variable one already
exists and we can't create
7933.82 -> two variables with the same name.
So this would cause an error.
7939.67 -> Instead to reassign a variable,
7942.67 -> we just type out the variable
name and make it equal
7947.47 -> to something else.
7949.69 -> So that's the syntax for
reassigning a variable.
7954.55 -> Now we're going to do one last
example before working on the project,
7959.71 -> let's go to the end of our code.
We're going to type some new lines,
7965.38 -> and this time we're going to
reassign variable one again,
7970 -> so we can reassign a variable
as many times as we want.
7974.47 -> So let's type variable one and
7979.4 -> then equals,
7981.64 -> and we're going to type variable one
7985.99 -> plus one and semicolon.
7990.67 -> So we learned earlier that we can
use a variable inside a calculation
7996.07 -> and it will substitute whatever
value is inside the variable.
8001.2 -> Here we're also using a
variable inside the calculation,
8005.49 -> but we're using this variable itself.
8009.36 -> So it's essentially taking this,
8012.1 -> increasing it by one
and then saving it back.
8017.74 -> If we console dot log, this variable,
8023.07 -> variable one and save
8028.36 -> variable one now contains six.
8031.72 -> So it took the previous
value in variable one,
8035.26 -> which was five added one,
and then saved it back.
8041.11 -> So this is how we increase the value
of a variable by a certain number.
8047.92 -> Okay, now that we know how to
create and reassign variables,
8052.45 -> we're ready to work on a project.
8055.39 -> So I actually prepared a project that
we can do for this lesson and we can see
8060.34 -> this project by going to our browser,
8063.58 -> clicking at the top and typing
8067.69 -> super
8069.2 -> simple.dev/projects/variables
8078.04 -> and press enter.
8081.19 -> So we're going to work on the cart
quantity feature of the final project.
8086.14 -> So in the final project we have a number
in the top right corner that shows
8090.97 -> how many products are in our cart.
8093.85 -> When we click the add to cart
button, this quantity will increase.
8099.82 -> So what you see here is a simple
version of the cart quantity feature
8104.77 -> that we can create right now.
Let's go over how it works.
8109.9 -> First, make sure you have the
console open on this page.
8114.79 -> Now when we click the
show quantity button,
8118.57 -> it will show us that there
are zero products in our cart.
8122.98 -> If we click the add to cart button,
8126.13 -> it will increase the quantity by
one and display it in the console.
8132.85 -> If we click add to cart, again,
8135.61 -> it will increase the
quantity by one again.
8139.54 -> Now in the final project,
8141.19 -> we can also add more than one product
at a time using this dropdown.
8148.45 -> For now, we're going to build
a simpler version of that.
8152.35 -> We're going to use the plus two and
plus three buttons to add multiple
8157.04 -> products. So when we
click the plus two button,
8160.87 -> it will increase the quantity by
two and display it in the console.
8166.24 -> And when we click the plus three button,
8168.85 -> it will increase the quantity by three.
8173.35 -> And finally, when we click
the reset cart button,
8177.1 -> it will reset the quantity back
to zero and display this message
8181.99 -> in the console.
8184.87 -> So now that we understand
how this project works,
8188.23 -> let's build step by step. First,
8192.35 -> let's create a new H T M L
file just for this project.
8198.02 -> We're going to go to our code editor
and click this icon to show our
8202.88 -> files and then click
this icon to create a new
8207.69 -> file. Let's name this file,
8211.61 -> zero five dash cart dash quantity
8217.07 -> dot html, and press enter.
8222.35 -> Next,
8223.31 -> let's open variables dot
html and we're going to
8227.72 -> copy all the code here into our new file.
8232.85 -> Let's typer A on windows
or command A on Mac
8238.19 -> to select all this code.
8240.5 -> And then right click copy.
8245.42 -> And then in our new file,
8248 -> right click and paste.
8253.64 -> Let's close this for now.
8256.61 -> And in the new file we're
going to change the title to
8261.59 -> cart quantity
8265.16 -> and let's remove all
of our JavaScript code,
8267.98 -> but keep the script element because
we're going to write new JavaScript code.
8274.82 -> Now we're ready to begin.
8277.25 -> Let's start by creating these buttons.
Let's go to the body
8281.99 -> element, going to create a new line.
8286.58 -> And here as we learn
in the previous lesson,
8290.93 -> we can create a button
using this HTML code lessen
8296.39 -> button greater than and the
closing tag lessen slash
8301.25 -> button greater than inside this button,
8305.75 -> we're going to have
the text show quantity.
8311.24 -> And let's save.
8314.09 -> Now let's open this file in live
server by right clicking and
8318.9 -> then open with live server.
8323.3 -> And we can see that we
created the first button.
8326.87 -> Now let's create the other buttons here.
8330.11 -> Feel free to pause the video
if you want to try it yourself.
8335.21 -> We're going to go back to our
HTML and create another button.
8342.38 -> Inside this one we're going
to have the text add to
8347.36 -> cart. Let's create another button.
8353.27 -> This one is going to
have the text plus two,
8357.62 -> and we'll create another button.
8359.69 -> This.
8362 -> One is going to be plus three.
8365.18 -> And finally we'll create the last button,
8370.56 -> and this one is reset cart.
8376.2 -> And now let's save. And
if we go back to our tab,
8382.05 -> we've created all the buttons.
8385.65 -> Now let's make this webpage
interactive with JavaScript.
8390.24 -> First of all, we need somewhere
to save the cart quantity.
8394.95 -> So as we learned in this lesson,
8397.57 -> variables are the perfect solution
for this variables let us save a
8402.27 -> value.
8403.71 -> So let's go into the script element
and we're going to create a variable
8408.69 -> by typing let,
8411.81 -> and this variable is going
to save the cart quantity.
8415.86 -> So let's just name it cart,
8418.92 -> capital Q quantity.
8423.18 -> So the cart quantity
will start out at zero,
8426.96 -> so we're going to type
equals zero and semicolon.
8432.9 -> Next, when we click the
show quantity button,
8437.04 -> we want to display the quantity
in the console. To do this,
8441.84 -> we learned a special H T M L attribute
in the previous lesson called the
8446.64 -> on click attribute.
8449.1 -> So we're going to type
in this opening tag here,
8452.67 -> space on click equals
8457.44 -> and double quotes.
8459.63 -> So the on click attribute runs
some JavaScript when we click this
8464.52 -> button and between the double quotes,
8468.45 -> we can write JavaScript
code. So let's press enter,
8472.71 -> enter.
And now when we click this button,
8476.67 -> we want to display the cart
quantity in the console.
8481.62 -> So let's type console dot log,
8486.96 -> open bracket, close bracket, semicolon.
8490.53 -> And then between the brackets
we're going to display a message.
8495.84 -> Now if we go back to super simple.dev
8500.49 -> and we click show quantity,
8503.19 -> we want to display this
message in the console.
8507.36 -> So in our code between the brackets,
8510.72 -> we're going to type the string quote cart,
8515.55 -> quantity colon zero.
8520.65 -> Now let's save and go back
to our tab to try it out.
8527.04 -> So we're going to open the console
first by right clicking and then click
8531.72 -> inspect and then click the console.
8536.49 -> And now when we press
the show quantity button,
8540.06 -> it should display that
message in the console.
8545.23 -> Okay, so we just made our
project interactive, however,
8549.82 -> we obviously don't want to display
zero every time we want to display the
8554.44 -> value inside cart quantity.
8558.01 -> So we'll need to insert this
value inside this string.
8563.29 -> Remember from the strings lesson, when
we want to insert a value into a string,
8568.6 -> we're going to use a template string.
8571.42 -> So let's switch the single
quotes to back ticks
8577.18 -> to create a template string.
8580.75 -> And now instead of zero,
8583.42 -> we're going to insert a
value using dollar open curly
8588.07 -> bracket and closed curly bracket.
8591.67 -> And in between these brackets,
we're going to insert this variable
8597.76 -> cart, capital Q quantity.
8603.73 -> Remember that JavaScript
is case sensitive,
8607.21 -> so make sure you type the
variable name exactly the same.
8612.37 -> Now let's save
8615.61 -> and click show quantity again,
8619.51 -> and now it displays the value
inside cart quantity in the console.
8624.88 -> So notice that variables also
work with string interpolation.
8629.89 -> Again, we can use a variable
wherever we use a value
8635.11 -> and it will just substitute whatever
value is saved inside this variable into
8640.09 -> the code.
8642.73 -> Now let's make the rest of
the buttons interactive.
8646.63 -> So when we click the add to cart button,
8649.66 -> we're going to add one to this cart
quantity and display it in the console.
8655.3 -> So again,
8656.62 -> we're going to type
here and type space on.
8660.91 -> Click equals double quotes,
8665.11 -> and between the double quotes
we're going to add JavaScript.
8670.12 -> Let's also add some new lines here
to make our code easier to read.
8676.84 -> Okay, so in the on click attribute,
we're going to do two things.
8682.3 -> The first one is increase
the cart quantity by one.
8687.73 -> We can do that by reassigning
the cart quantity variable.
8692.65 -> So we're going to type just the
variable name cart quantity,
8698.83 -> and we're going to make it equal to itself
8705.49 -> plus one and semicolon.
8710.5 -> Next we're going to display the
updated quantity in the console.
8715.36 -> So let's press enter and we're
going to display this message again,
8721.09 -> so we can actually just copy this code.
8723.68 -> So we'll select it and
then right click and copy.
8729.62 -> And then here, right click and paste.
8736.13 -> Now if we save
8738.98 -> and click the add to card button,
8743.24 -> we'll see that it increased the quantity
by one and displayed the updated
8747.65 -> quantity in the console. Let's press
it again to make sure it works.
8753.38 -> So it increases it by one again and
then displays it in the console.
8758.78 -> So that's basically how the cart quantity
feature works in the final project.
8763.94 -> First, we need a variable
to save the quantity,
8767.57 -> and then when we click a button,
we're going to update the quantity.
8773.33 -> So now let's make the rest
of these buttons interactive.
8777.98 -> Feel free to pause a video if
you want to try it yourself.
8782.9 -> For the plus two button, we're going
to add the on click attribute. Again,
8788.51 -> on click equals double quotes,
And inside
8794.69 -> we're going to increase
the cart quantity by two,
8798.41 -> so cart quantity,
8802.07 -> and then we'll just
make it equal to itself
8807.77 -> plus two and semicolon.
8812.54 -> And again,
8813.23 -> we're going to display the updated
quantity in the console so we can create a
8817.67 -> new line and just copy
this code. So select it,
8822.74 -> right click copy, and here,
8827.51 -> right click and paste.
8831.95 -> Let's save and click plus two a few times
8837.26 -> and we can see that it adds two to the
cart quantity and displays it in the
8841.77 -> console for the plus three
button, we'll do the same.
8847.79 -> Let's type an on click attribute,
8851.27 -> click equals double quotes,
8854.45 -> and here we're going to increase
the cart quantity by three.
8858.17 -> So cart quantity equals itself
8864.8 -> plus three and semicolon.
8869.51 -> And we're going to display this in the
console again. So we'll select this,
8874.28 -> right click copy, and here,
8878.39 -> right click and paste.
8881.54 -> Let's save again and try it
out to make sure it works.
8885.83 -> So plus three, plus three.
8890 -> And finally let's do
the reset card button.
8894.5 -> So we'll add the on
click attribute. Again,
8897.95 -> on click equals double quotes,
8902.37 -> and inside the double quotes, we're
going to do something a little different.
8906.12 -> This time instead of
increasing the cart quantity,
8910.29 -> we'll set it back to zero. To do this,
8914.52 -> we can just reassign the
cart quantity variable,
8918.45 -> so cart quantity and just make it
8922.8 -> equal to zero and semicolon.
8927.57 -> Now if we go back to super
simple.dev and try out this
8932.34 -> reset cart button, you'll notice
that it displays two messages.
8937.62 -> The first message is cart was reset.
8940.98 -> So we're going to display
that message in our code first
8945.27 -> console dot log,
8949.95 -> and the string cart was reset,
8957.99 -> and the second message is the
same message as the other buttons.
8962.76 -> So we can just select
this and then right click
8968.43 -> copy, and then here,
8972.69 -> right click and paste.
8977.55 -> And now let's save and go back
to our tab and give this a
8982.44 -> try.
8984.21 -> So the cart quantity starts at
zero When we press add to cart
8988.83 -> increases by one, this increases by two,
8993.15 -> this increases by three, and
when we click reset cart,
8998.34 -> it'll display cart was reset and
reset the cart quantity back to
9003.23 -> zero. And that's it.
9006.08 -> We just created a simple version of
the cart quantity feature of our final
9010.73 -> project using everything that we
learned in this course so far.
9016.4 -> Now we're going to learn some
shortcuts for reassigning variables.
9021.44 -> So if we look at this line of code
Here,
9026.66 -> we're increasing the value of this
variable by two and then saving it
9031.37 -> back. Well, there's actually
a shortcut for this,
9036.14 -> and that shortcut is cart quantity
9041.75 -> plus equals two and semicolon.
9046.07 -> So this does the same thing as the
line above, but it's just shorter.
9051.8 -> The plus means we're going
to add two to cart quantity
9056.69 -> and equals means we're going to save
that result back to cart quantity.
9061.97 -> So we can actually delete this line
9065.93 -> and the code will work
the same way. If we save
9071.03 -> and try it out,
9073.67 -> it will still add a two and then
save it back in card quantity.
9079.98 -> Let's scroll up and practice
by using this shortcut for cart
9084.87 -> quantity plus one. So
instead of this line,
9088.98 -> we can type cart quantity
9093.6 -> plus equals one and semicolon.
9098.52 -> So it turns out that in programming
plus equals one is so common that we
9103.29 -> have an even shorter
shortcut for plus equals one,
9108.3 -> and that shortcut is cart quantity
9113.67 -> plus plus and semicolon.
9117.18 -> So this is the same thing
as plus equals one and
9122.13 -> all three lines do the same thing.
9125.82 -> So we can remove these lines
9130.32 -> and the code will work the same
because it's just a shortcut If we
9135.12 -> save. So if we click add decart
9140.61 -> it, it will add one every time.
9144.33 -> So those are some shortcuts
for reassigning variables.
9148.56 -> We also have these shortcuts
for the other operators,
9151.89 -> like minus equals multiply
equals divide equals
9156.99 -> and minus minus.
9159.27 -> I'll leave some exercises for these other
shortcuts at the end of this lesson.
9165.42 -> Next we're going to learn some best
practices for naming variables.
9170.46 -> So if we scroll down,
9174.96 -> notice that our variable cart
quantity has two words in it,
9179.49 -> cart and quantity.
9182.46 -> We learned earlier that we can't
have spaces in a variable name,
9186.66 -> so if we want to have multiple words,
9188.91 -> we have to combine them
together like this.
9192.66 -> Now you might be wondering why we wrote
it this way with a lowercase C and a
9197.58 -> capital Q.
9200.04 -> This is actually a naming
convention called Camel Case.
9204.84 -> In Camel case,
9206.01 -> we combine the words together and
capitalize every word except the
9210.93 -> first word. So for a cart quantity,
9215.01 -> we capitalize quantity,
9217.2 -> but we keep cart lowercase
because it's the first word.
9222.18 -> Camel case is actually the standard
naming convention for JavaScript.
9227.13 -> All of our variable names
should use Camel Case.
9231.75 -> Now in programming there are other
naming conventions that exist.
9236.28 -> Another one is called Pascal Case.
9239.52 -> Pascal case is the same as Camel
Case except we capitalize the
9244.29 -> first word. So for cart quantity,
9247.44 -> Pascal case would be capital
cart and capital quantity.
9253.14 -> In JavaScript, there is one
feature where we use Pascal case,
9257.71 -> which we'll learn later in this course.
9260.23 -> For everything else we use Camel Case.
Another naming
9264.86 -> convention is Kebab case.
9267.55 -> Here we keep the words lowercase
and combine them with a dash
9272.56 -> like cart dash quantity.
9275.62 -> Kebab case doesn't work in JavaScript
because the dash is already a
9280.45 -> minus symbol. However,
9283.03 -> we use kebab case in H
tml and CSS and also in
9288.02 -> our file names as you can see here.
9292.66 -> And finally,
9293.41 -> we have Snake case where we keep
the words lowercase and combine
9298.3 -> them with underscores. Snake
case is used in other languages,
9303.16 -> but it's not really used in JavaScript.
9306.91 -> So those are the common naming
conventions that we use in programming.
9312.91 -> Now, one more thing I want to note
is that when we name our variables,
9317.47 -> try to pick a name that is not too
short or too long. For example,
9322.93 -> instead of cart quantity, we
could have named this variable C,
9329.08 -> but this name is too short. It's
hard to understand what C means.
9334.69 -> We could also use a
name like this quantity
9339.28 -> of products in the cart,
9344.5 -> but this name is too long. It's
hard to read this in the code.
9349.21 -> So try to have a balance between a name
that is understandable but not too long,
9354.4 -> like cart quantity.
9358.03 -> The last thing we're going to learn in
this lesson is there are three ways to
9361.87 -> create variables in JavaScript.
9365.02 -> Let's go back to our
variables dot html file,
9370.15 -> and we're going to learn those three ways.
9373.51 -> So the first way is to use
Let, which we already learned.
9378.13 -> The second way to create a
variable is to use the word cons.
9382.93 -> So at the bottom we can type const space
9387.97 -> and then a variable name like variable two
9393.28 -> and make it equal to three.
9397.48 -> So Const creates a variable just like let,
9400.93 -> except we can't change its value later.
9404.59 -> This value stays constant.
That's why it's called Constant.
9409.42 -> If we try to change its value,
9411.61 -> like variable two equals five,
9417.43 -> and then we save this and we
open this file in the browser by
9422.2 -> right clicking and then
open with live server
9428.95 -> and then open the console.
So right click inspect
9436.01 -> and then click the console.
9440.63 -> It will give us an error when
we try to change this variable.
9445.1 -> So this doesn't work.
9447.5 -> Let's remove this line and save.
9452.06 -> So why would we ever
use Cons instead of let,
9455.87 -> while Cons makes our code
safer and easier to understand?
9460.22 -> When we create a variable with Cons,
9463.04 -> we know for sure that this
variable will always contain three
9468.17 -> for let. However, if we create a variable,
9472.13 -> it's hard to know what value is
inside this variable because later on
9477.08 -> we can change this value in our code.
9481.28 -> So in order to keep our code safer,
9483.95 -> it's actually a best practice to
use cons by default and only use
9488.9 -> Let When we know that we
need to change the variable.
9492.83 -> So here it's actually
best practice to use Cons
9497.66 -> to create this calculation variable
because we're not changing it later.
9502.67 -> Same thing for the result variable and the
9507.41 -> message variable. Now for variable one,
9512.57 -> we have to use Let because we're
changing it later in this code.
9517.58 -> So that's cons. It creates a
variable that can't be changed later.
9523.91 -> Finally,
9524.69 -> the third way of creating a
variable is to use another word var.
9530.24 -> So at the bottom we can type VAR space
9535.31 -> and then a variable
name like variable three
9540.8 -> and make it equal to three.
9544.52 -> So VAR creates a variable just like Let,
9547.7 -> and this variable can be changed later.
9551.18 -> VAR is actually the original way
to create variables in JavaScript.
9556.88 -> VAR means variable. However,
9560.93 -> VAR has some issues that we'll
learn later in this course.
9565.16 -> And because of these issues, we
don't use VAR in new JavaScript code.
9570.83 -> You might see VAR in older JavaScript
code, so it's still useful to note.
9576.44 -> So those are three ways to
create variables in JavaScript.
9580.94 -> Let Const and var,
9584.48 -> we use Const by default, and if
we have to change a variable,
9589.58 -> then use Let.
9593.06 -> So one more thing we're going to
learn is that we can use type of with
9598.36 -> variables.
9599.39 -> So remember that type of
tells us what type A value is.
9605.24 -> For example,
9607.04 -> if we wrote
Console dot
9611.72 -> log type of three
9617.73 -> and save
9620.58 -> type of will tell us
that three is a number.
9625.59 -> Well, we can actually use
type of with a variable.
9630.84 -> So if we change this to
9634.24 -> variable two and save
9639.33 -> type of will tell us the type
of value inside the variable,
9644.43 -> which is a number, and that's
what we see in the console.
9650.52 -> Now let's check the type
of this variable message.
9655.59 -> So message contains a string,
9658.89 -> and if we do console dot log
9664.86 -> type of message
9669.96 -> and save,
9672.81 -> this will tell us that the value
inside the message variable is a
9677.7 -> string.
9679.44 -> So we can use type of to check
the type of value that is saved
9684.42 -> inside a variable. And that's
the end of this lesson.
9688.98 -> In this lesson, we
learned about variables,
9692.11 -> which are a way to save
values and use them. Later,
9697.02 -> we learned how to reassign a variable.
9699.96 -> We created the cart quantity
feature of the final project.
9704.43 -> We learned some shortcuts
for reassigning a variable.
9708.36 -> We learned some naming conventions
and best practices for variable names,
9713.76 -> and we learned three ways
to create a variable.
9717.84 -> Let Cons and var.
9722.07 -> Here's some exercises to help
you practice using variables.
9753.84 -> In this lesson,
9755.04 -> we're going to learn two more
features of JavaScript called Bullions
9759.96 -> and If statements.
9761.85 -> And we're going to use these features
to build this rock paper scissors
9766.44 -> project.
9769.11 -> Let's start by creating a new
HTML file for this lesson.
9774.57 -> We're going to go to our code editor
and click this icon to show our files
9780 -> and then click this icon
to create a new file.
9784.53 -> We're going to name
this file zero six dash
9789.72 -> bullions
9793.19 -> html and press enter.
9796.99 -> Let's open variables dot html
9801.22 -> and we're going to copy all
this code into our new file.
9805.3 -> Let's select the code using control
A on Windows or command A on
9810.25 -> Mac. And then right click copy.
9816.61 -> And in here, right click and paste.
9823.36 -> Let's close this for now and
prepare this file for this lesson.
9828.85 -> So we'll scroll to the
top and change this to
9833.59 -> boos and then remove
all the JavaScript code,
9838.51 -> but keep the script element.
9844.18 -> Now let's save and open
this file in live server
9848.98 -> by right clicking and then
open with live server.
9855.34 -> And we can close the previous tabs
9860.5 -> as well as the previous code. For now,
9865.54 -> we'll start by learning what are
bulls. So far in this course,
9870.1 -> we learned two types of values in
JavaScript, numbers and strings.
9875.83 -> Bullying are another type
of value in JavaScript,
9879.97 -> but bullying are special because
there are only two bullying values.
9884.62 -> True and false.
Let's click in the script element
9890.26 -> and type true press enter and
9895.09 -> type false.
9897.97 -> So these are the only two bullying
values that exist true and
9902.95 -> false. So what's the
purpose of bullying values?
9907.96 -> A bullying value represents
whether something is true or false.
9914.05 -> For example, in JavaScript
we can compare two numbers.
9918.73 -> Let's create some new lines
and type the code three
9924.31 -> less than five.
9927.25 -> So this code checks whether the
number three is less than five,
9931.9 -> and of course this is true.
9934.39 -> So if we console dot
log this code console,
9938.98 -> dot log
9943.09 -> and save,
9945.58 -> and then go to our website
and open the console,
9949.36 -> right click inspect and console,
9955 -> it will show us that the result of
this code is the boo value. True.
9961.18 -> Let's try another example.
9963.7 -> Let's delete this less than
symbol and replace it with a
9968.54 -> greater than symbol.
9970.49 -> So now this code checks whether
three is greater than five,
9975.47 -> and we know that three is not
greater than five. So if we save,
9980.93 -> the computer will tell us that the
result of this comparison is the bullying
9985.25 -> value. False. So as you can see,
9988.91 -> a bullying value represents
whether something is true or false.
9995.27 -> Now, let's learn these syntax rules
for bullying. To create a bullying,
10000.22 -> we just type true or false.
10003.25 -> Note that we don't surround
these with quotes like this.
10007.84 -> If we surround them with quotes,
this is now a string, not a bullying.
10013.48 -> We can use type of to check this.
10016.75 -> So at the front we can type console dot
10021.79 -> log, type of true.
10028 -> If we save,
10030.43 -> this will tell us that
this is a string. Now,
10034.63 -> if we remove the quotes
10038.8 -> and save,
10041.62 -> this will tell us that this is now a bull.
10046.93 -> So when creating a bull,
10049.24 -> don't put quotes around true or false.
10053.77 -> Let's save. Now,
10056.71 -> one way to create a bull
is to compare two numbers,
10061 -> for example,
10062.23 -> three greater than five.
So this greater than symbol
10067.48 -> is called a comparison operator.
10070.69 -> And there are many other
comparison operators we can use.
10074.71 -> We saw less than earlier,
10077.29 -> and we also have greater than or
equal to less than or equal to
10082.93 -> triple equals,
10084.13 -> which checks if two values are
equal to each other and exclamation
10089.05 -> double equals, which checks if two
values are not equal to each other.
10094.93 -> Now JavaScript is a little special
because it has two ways to check if
10099.79 -> two values are equal, triple
equals and double equals.
10105.52 -> The difference is that double equals
tries to convert both values into the same
10110.56 -> type. For example, in our code,
10114.82 -> let's create some new
lines and console dot
10119.98 -> log,
10121.96 -> and let's check if the
number five is equal to the
10126.91 -> string 5.00.
10131.74 -> If we save,
10134.17 -> it will tell us that these two
values are equal to each other,
10138.76 -> even though one of them is a
number and the other is a string.
10143.38 -> And that's because the double equals
converts both values into the same
10148.16 -> type.
10149.54 -> So converts both of these into
the number five and then compares
10154.52 -> them. So that's why
they are equal. However,
10158.57 -> this is not a good idea because
this value is a number and this
10163.19 -> value is a string. It's a piece of text,
10167.21 -> so they shouldn't really
be equal to each other.
10170.45 -> That's why in JavaScript we
always use the triple equals to
10175.23 -> check if two values are the same,
10177.56 -> so that we avoid the conversion
behavior of double equals.
10182.66 -> So if we save, now,
10185.42 -> it will tell us that these two values
are not equal to each other because
10190.32 -> one value is a number and
the other value is a string.
10195.47 -> So this rule also applies to not equal to.
10199.55 -> In JavaScript we always use
exclamation double equals instead of
10204.41 -> exclamation equals to avoid
the conversion behavior.
10210.44 -> All right, so those are
comparison operators.
10214.22 -> In the order of operations,
10216.65 -> comparison operators have
a lower priority than math.
10221.27 -> So if we did something
like five and then minus
10226.19 -> five, this would calculate
five minus five first,
10230.93 -> which is zero. And then
compare the two numbers.
10234.92 -> So three is now greater than zero.
10237.89 -> So if we save the first
comparison will now be
10242.78 -> true.
10244.1 -> So comparison operators have
a lower priority than math
10248.88 -> operators. Now that we know
what bullying values are,
10253.61 -> we're going to combine them with a really
useful feature called if statements.
10258.68 -> An if statement lets us write
multiple groups of code and then
10263.48 -> decide which code to run.
10266.54 -> Let's do an example and
create our first if statement.
10270.92 -> We're going to go to the bottom
and create some new lines
10277.37 -> and type if and open bracket,
10281.45 -> closed bracket and open curly
bracket. Closed curly bracket.
10287.33 -> Between these round brackets,
10289.97 -> we're going to put a boo value like true
10294.78 -> and in between the curly brackets
we're going to put some code to run.
10300.02 -> For example, console dot log.
10305.03 -> Hello.
10307.97 -> So the way that an if statement
works is that if this bullying value
10312.71 -> is true, then we're going to run
the code in the curly brackets.
10318.02 -> If this bullying value is false,
then we're not going to run the code.
10323.39 -> If we save
10326.04 -> the value between the brackets is true.
10328.92 -> So we're going run this
code and display hello.
10333.24 -> Now if we change this to false and
10337.98 -> save, it will not run this code.
10343.83 -> So an if statement lets us decide
whether or not to run some code
10348.93 -> based on this bullying value.
10352.5 -> Now if statements have another
useful feature called else,
10357.42 -> let's go to the end of
this if statement and type
10362.03 -> else open curly bracket,
close curly bracket,
10367.86 -> and then inside these curly brackets
we're going to put some different code
10372.75 -> like console dot log
10377.76 -> else.
10380.58 -> The way else works is if
this bullion value is true,
10385.77 -> the computer will run this code.
10388.47 -> Otherwise we will run
the code inside else.
10393.03 -> Let's give it a try.
10394.92 -> We'll change this bullying
value to true and save,
10400.77 -> and because it is true, it will
run this code and display. Hello.
10406.71 -> Now if this bullying value is false and
10411.54 -> save
Because it is false,
10414.63 -> it will not run this code and
it will run the code inside else
10419.46 -> and display else.
10422.58 -> So using if and else we can
write two groups of code and then
10427.38 -> decide which code to run.
10430.92 -> Now let's do a practical example.
10433.86 -> We're going to write some code to check
if someone is old enough to drive.
10439.05 -> Let's go to the bottom
and create some new lines
10443.49 -> and we're going to type
if brackets and curly
10448.08 -> brackets and inside here
we're going to compare
10453.03 -> two numbers. The first
number is a person's age.
10458.22 -> Let's pretend we have a
person who is 30 years old,
10462.09 -> so we're going to type 30.
10465.18 -> Then we're going to check if
this age is greater than or
10469.92 -> equal to the legal driving age.
10473.49 -> Let's pretend the legal driving age is 16.
10479.04 -> Notice that between the brackets we
don't have to just put a bullying value.
10484.8 -> We can put any code that
results in a bullying value.
10489.78 -> So this comparison results
in the bullying value. True.
10494.43 -> That means the computer will run
the code between the curly brackets.
10499.11 -> So in here,
10500.25 -> let's type console dot log
10506.83 -> you can drive.
10512.26 -> Now if this is not true,
10514.45 -> let's run some different
code at the bottom or type
10519.16 -> else and curly brackets
and then inside these
10524.05 -> brackets will type console dot log.
10530.35 -> You cannot drive.
10535.6 -> Now let's save
10538.12 -> and it will tell me that this
person who is 30 years old can drive
10544.54 -> If we go back and change
this to a person that is 15
10549.44 -> years old and save this comparison will
10554.21 -> result in false, so it will
display you cannot drive.
10560.08 -> So that's how we use if statements.
10562.51 -> We can write multiple groups of code
for different situations and then
10567.19 -> decide which code to run.
10571.66 -> Now let's learn the syntax rules
for if statements to create an if
10576.61 -> statement we type if and then
round brackets with a boo
10581.5 -> value inside. This is
called the condition.
10586.21 -> If this condition is true,
10588.55 -> we will run the code
inside the curly brackets.
10593.17 -> We can also add an else statement.
10595.93 -> This code will run if
the condition is false.
10599.8 -> The else statement is optional.
We don't have to have one.
10605.35 -> So these curly brackets and the code
inside these are called branches
10610.36 -> because it's like a tree branch.
10612.49 -> The code is splitting off into two
directions and we either run this
10616.9 -> code or we run this code.
10621.13 -> One more thing to know is in a
branch if we only have one line
10626.11 -> of code,
10627.22 -> the curly brackets are actually
optional so we can delete these and
10632.2 -> the code will still work.
However,
10635.71 -> if we have more than one line of
code in this branch, for example,
10640.15 -> if we add another line console dot log,
10646.18 -> congrats.
10649.21 -> Now this branch has two lines of code,
10651.88 -> so the curly brackets are mandatory
so we have to add them back.
10661.18 -> Now we're going to learn another
feature of if statements,
10664.09 -> which is we can have more than
one condition. For example,
10669.1 -> we're going to go to the end
of this if branch and type
10673.99 -> else if and then brackets and curly
10679 -> brackets else.
10681.32 -> If let's us add another
branch to our if statement.
10686.09 -> Between these round brackets
we can add another condition.
10691.01 -> For example, if a person is
almost old enough to drive,
10695.48 -> let's display a different
message. So inside this condition,
10700.64 -> let's check if this person's age,
10702.86 -> which is 15 is greater than or equal to
10708.24 -> 14. So we're checking if they're
almost old enough to drive.
10713.24 -> And now inside the curly brackets we're
going to display a different message
10719.29 -> console dot log
10724.61 -> almost there.
10729.38 -> So the way this works is that the if
statement checks the conditions one by
10734.37 -> one. First it checks if this is true,
10737.96 -> if it is it will run this branch.
Then it checks if this is true,
10742.73 -> if it is,
10743.69 -> it will run this branch
And if none of the conditions are true,
10748.37 -> it will run the ELs branch.
10751.37 -> So here this condition is false, so
we're not going to run this code,
10756.8 -> but now this second condition is
true, so we're going to run this code.
10762.29 -> If we save,
10764.42 -> we display almost there in the console.
10769.31 -> So using Ls if branches,
10771.71 -> we can add as many conditions
as we want to an if statement.
10777.23 -> The next thing we're going to learn is
that we can combine if statements with
10781.1 -> variables from the previous
lesson. For example,
10786.17 -> here we wrote the person's age two times.
10789.71 -> So we can actually save this age in
a variable and then reuse that value.
10795.98 -> So above the if statement,
10799.52 -> let's create a variable using cons
10804.5 -> and let's name this variable
age and we'll make it
10809 -> equal to 15. Remember,
10813.04 -> the best practice for creating a
variable is to use cons by default
10818.18 -> and only use Let. If we're going
to change this value later,
10823.73 -> and now that we saved
this number in a variable,
10827 -> we can use the variable
inside the if statement.
10830.99 -> So we'll replace 15 with age and
10835.76 -> here as well with age.
10840.35 -> So this will take whatever value is
inside the variable and substitute it
10845.42 -> into the code. If we save
10850.25 -> the if statement works the same
way as before and we run this line.
10856.37 -> Okay,
10857.39 -> now we're ready to use bulls and
if statements to do a project
10862.44 -> we're going to build a rock
paper scissors game. First,
10866.88 -> let's take a look at the project.
10869.46 -> We're going to go to our browser
and at the top create a new tab
10875.67 -> and we're going to type here super
10879.84 -> simple.dev/projects/bulls
10888.12 -> and press enter.
10890.7 -> Here we can see a simple
version of a rock paper,
10893.82 -> scissors game and if we click this link,
10897.75 -> it will take us to the
final version of this game.
10901.74 -> So in this game we can pick a move
10905.61 -> and then the computer will pick a random
move and it will show us the result.
10911.82 -> And we also have a score of
how many times we won lost and
10916.74 -> tied. So we're going to build
this as we go through the course,
10921.66 -> but for now,
10922.83 -> let's go back and we're going
to start by building this simple
10927.52 -> version of the game.
10929.61 -> So how this simple version works is we
click one of these buttons to pick a
10934.08 -> move. So let's pick rock.
10937.71 -> Then the computer will randomly pick
a move. In this case it's paper,
10942.45 -> but for you it might be different
and it will compare the two moves and
10947.29 -> display the results in this popup.
So the rules of rock paper,
10952.14 -> scissors are rock beats,
scissors, paper beats,
10956.67 -> rock and scissors beats paper.
10961.2 -> Let's press okay and we'll
get started on this project.
10965.85 -> First we'll create a new HTML
file just for this project.
10970.8 -> Let's go to our code editor and
click here and create a new file
10976.77 -> and we're going to name this file,
10979.14 -> zero six dash rock dash paper,
10984.36 -> dash scissors,
10987.36 -> do html and press enter.
10992.22 -> Next,
10992.88 -> let's copy all the code from
bullions dot html into this new
10997.69 -> file.
10998.88 -> So we'll open this again and
then control A or command A to
11003.83 -> select all the code and
then right click copy.
11009.2 -> And in here right click and paste.
11014.36 -> Let's close this and prepare this file.
11018.56 -> So we'll change this to rock paper
11024.26 -> scissors
11026.84 -> and remove all of the JavaScript
code that we had before.
11034.82 -> Finally,
11035.63 -> let's save and open this file
in the browser by right clicking
11041.37 -> and then open with live server.
11045.99 -> Let's take a look at the project again.
11049.92 -> So we're going to start by creating
the text first because this text
11054.72 -> is in the final version of the project.
11059.04 -> So in our HTML we're going
to create a paragraph
11063.61 -> element for this text. So less than P,
11068.07 -> greater than, and the closing
tag less than slash p,
11072.09 -> greater than insider paragraph.
We're going to have the text,
11076.95 -> rock,
Paper, scissors.
11082.77 -> Next, let's create the buttons.
11087.63 -> So we'll go to our HTML
and create a button.
11094.23 -> And inside this first button
we'll have the text rock.
11099.6 -> Let's create another button.
11104.1 -> This one will be paper
11107.85 -> and we'll create the last button.
11111.21 -> This one will be scissors.
11115.23 -> Now let's save and check our new tab.
11120.84 -> And now we created all the
elements that we need. Next,
11125.85 -> let's make these elements
interactive with JavaScript.
11130.08 -> So when writing JavaScript,
11131.91 -> a good strategy is to think about
what steps we need to do and
11136.71 -> then convert those steps into code.
11139.92 -> So here when we click a button,
11142.71 -> the first step is the computer
will randomly select a
move and then we're going
11147.6 -> to compare the moves to get the result.
11150.63 -> And finally we'll display
the result in a pop-up.
11155.31 -> By the way, this is called an algorithm.
11158.91 -> An algorithm is a set of steps
to complete a task or to solve a
11163.77 -> problem. Now that we know
what steps we need to do,
11167.97 -> we're going to convert these
steps or this algorithm into code
11173.88 -> first. We're going to run some
JavaScript when we click these buttons.
11177.87 -> So let's use the on click attribute again,
We'll go to the
11182.55 -> opening tag of the button and type on
11187.05 -> click equals double quotes.
11191.07 -> And then inside these double
quotes we can add our Java script.
11197.4 -> So now we have to figure out how to
randomly select a move for the computer.
11203.07 -> To do this, we need to learn a
new piece of JavaScript code.
11208.14 -> So here we're going to type capital M math
11213 -> dot random open bracket close bracket
11218.14 -> math dot random generates a random
number between zero and one.
11223.78 -> So if we console dot
log this console dot log
11232.18 -> and save and click this button
11238.6 -> and then check in our console
by right clicking inspect
11244.84 -> and the console
11247.72 -> it will display a random
number between zero and one
11252.67 -> it we click this button again, it would
generate a different random number.
11258.46 -> So every time we run math dot random,
11261.82 -> it generates a different random
number between zero and one.
11266.74 -> Now to be more precise,
11268.51 -> it actually generates a number greater
than equal to zero and less than one.
11275.17 -> Now let's save this random number in
a variable so we can use it later.
11280.42 -> So we'll replace the
console dot log with const
11285.94 -> and then a variable name,
11287.83 -> let's just name it random capital N number
11294.25 -> and then equals.
11297.61 -> So we saved this random
number inside this variable.
11301.96 -> Next we need a way to convert
this random number into a move
11307.12 -> like rock, paper or scissors. To do this,
11311.35 -> let's imagine the space between
zero and one and then divide
11316.21 -> this space into three equal parts.
11319.15 -> Each part represents a move.
11322.03 -> If we generate a random number and
it's between zero and one third,
11326.89 -> the move will be rock. If it's
between one-third and two-thirds,
11332.02 -> the move will be paper. And if
it's between two-thirds and one,
11336.91 -> the move will be scissors.
11339.4 -> This is how we can convert the random
number into a move and this will
11344.35 -> give the computer an equal
chance of picking rock,
11348.1 -> paper or scissors.
Now let's convert these steps into
11352.84 -> code and an if statement is
a perfect solution for this.
11357.58 -> This already looks like an if statement.
11360.91 -> So in our on click attribute,
11363.64 -> let's add some new lines and type if
11368.53 -> brackets and curly brackets.
11371.74 -> For this first condition we're going
to check if the random number is
11376.36 -> between zero and one one-third.
11379.15 -> So let's check if random number
11384.04 -> is greater than or equal to zero.
11388.48 -> But in this case we also
need to check that random
11393.8 -> number is less than one third
11399.08 -> because we're checking if the number
is between zero and one third.
11404.33 -> But how do we do this?
11405.86 -> How do we check that two
comparisons are both true?
11410.78 -> To do this we're going to learn another
type of operator in JavaScript called
11415.52 -> logical operators. Logical operators.
11419.48 -> Let us combine bull values,
which is what we need to do here.
11425 -> Let's go back into bulls dot
html and we're going to learn
11429.66 -> logical operators.
So first let's open the tab for
11434.57 -> this file and we're going to
comment out all the previous
11439.49 -> code so our console doesn't
get too messy slash star.
11444.86 -> And then at the bottom
11447.65 -> star slash Now let's create some new lines
11453.29 -> and the first logical operator we're
going to learn is called the and
11457.8 -> operator.
11459.38 -> Let's type console dot log
11464.24 -> A bullying value true and another
11468.89 -> bullying value true.
11472.46 -> So this is the and operator
and it checks if two bull
11477.23 -> values are both true.
11479.84 -> So it checks if the left side is
true and the right side is true.
11485.12 -> That's why it's called the and operator.
11488.3 -> So here the left side is true
and the right side is also true.
11493.04 -> So the and operator will
result in true if we save
11498.71 -> this displays true.
11501.83 -> Now if one of these sides
is false, for example,
11506.18 -> if we change this to false,
11509.72 -> now let's check is the left side
and the right side both true
11515.24 -> in this case no so and
will now result in false if
11520.16 -> we save and now displays false.
11525.71 -> So that's the logical and operator
it checks if the left side is true
11531.05 -> and the right side is also true.
11535.01 -> So this is exactly what we need
for our project. For example,
11540.14 -> let's create a new line and type console
11544.82 -> dot log and let's say
that we generated a random
11549.65 -> number like 0.2 and we
want to check if it's
11554.39 -> between zero and one third.
11557.54 -> So we can do 0.2 is greater than or equal
11562.22 -> to zero and we're also going to check if
11566.69 -> 0.2 is less than one third.
11572.55 -> So we're using the logical and operator
to check if the left side is true
11577.8 -> and the right side is also true.
11581.31 -> So in this example both sides are true.
11584.22 -> 0.2 is between zero and one third.
11587.88 -> So if we save this whole
thing will display true
11593.76 -> now in the order of operations,
11596.67 -> logical operators like and have
a lower priority than math and
11601.59 -> comparisons.
11603.15 -> So in this example it will
calculate the math first and then it
11608.01 -> will calculate the comparison on the
left and then the comparison on the
11612.6 -> right and then at the end the
and operator checks if both
11617.19 -> sides result in true.
11620.55 -> Now let's use the and
operator in our project.
11624.36 -> Let's go back to the file for
our project and then inside
11629.22 -> this first condition we're going to check
if the random number is greater than
11633.93 -> or equal to zero and
at the same time is the
11638.91 -> random number less than one third.
11642.33 -> So this is how we check if a number
is between zero and one third.
11647.94 -> In this case the computer will pick
rock. So between the curly brackets,
11652.89 -> let's just type console dot
11657.45 -> log rock,
11661.86 -> let's get some practice and create
the other two branches for picking
11666.36 -> paper and scissors.
11668.46 -> Feel free to pause this video if
you want to try it yourself first.
11673.53 -> So here we're going to type else if to add
11678.51 -> another branch and then
brackets and curly brackets.
11683.16 -> And in this condition we're
going to check if random
11688.75 -> number is greater than or equal to one
11694.29 -> third and random
11699.57 -> number is less than two
11704.16 -> thirds.
11707.01 -> So if this random number is
between one third and two thirds
11711.63 -> inside here we're going to console dot log
11717.03 -> paper.
11719.79 -> And finally let's create
another branch using else
11724.83 -> if random number
11729.96 -> greater than or equal two thirds and
11735.54 -> random number less than one
11741.45 -> and console dot log
11745.89 -> scissors.
11749.5 -> If we save and then go back
to our rock paper scissors tab
11755.56 -> and then click the rock
button a few times it will
11760.51 -> pick some random moves for the computer.
11764.08 -> So that's how we generate
the computer's move.
11767.62 -> One thing I want to point out is
that I use the less than comparison
11772.24 -> instead of less than or equal to.
11775.39 -> I just did this so that the
comparisons don't overlap.
11780.7 -> Before we continue in the project,
11782.86 -> we're going to learn two other
logical operators we can use.
11787.54 -> Let's go back to bulls
dot html and let's also
11792.25 -> open the tab for this file.
11796.93 -> The next logical operator
is called the OR operator.
11801.55 -> For example,
11802.93 -> let's type some new lines and type console
11807.91 -> dot log.
11810.22 -> True or false.
11815.47 -> So this is a logical or
operator IT checks if at least
11820.24 -> one side is true.
11822.67 -> So it checks if the left side is
true or the right side is true,
11827.53 -> that's why it's called the OR operator.
11831.34 -> So here one of these sides is true.
11834.61 -> So the OR operator will
result in true if we save
11840.04 -> this displays true.
11843.49 -> If both sides are true it will also
result in true because at least
11848.38 -> one side is true.
11851.47 -> The last logical operator we're going
to learn is called the knot operator.
11857.02 -> For example,
11858.07 -> let's create a new line
and type console dot
11862.99 -> log exclamation true.
11868.45 -> So the exclamation is called
the knot oper operator.
11872.65 -> The knot operator only uses
one bull value and it flips it
11877.75 -> into the opposite value.
So if this value is true,
11882.7 -> the knot operator will flip
it into false. So if we save,
11888.79 -> this will result in false.
Now if you think about it,
11894.04 -> if we say that something is not true,
11897.7 -> that's the same thing as
saying that it is false.
11900.85 -> So that's why this is
called the not operator.
11905.2 -> Now if we change the value to false,
11910.14 -> again the not operator
will flip this into troop.
11914.86 -> So if we save,
11917.17 -> this will now result in troop.
So those are the
11922 -> logical or and not operators.
11925.6 -> We don't need to use these
in our project right now,
11928.7 -> but I'll leave some exercises for
these at the end of this lesson.
11932.99 -> Now let's go back and
continue the project.
11937.07 -> Let's open the code and open the tab.
11943.1 -> The next step is to compare the
computer's move to our move,
11947.96 -> which is rock.
11949.91 -> So first let's save the computers move
in a variable so we can compare it
11954.48 -> later. So instead of console dot log,
11958.76 -> we're going to create
a variable with const
11962.72 -> computer capital M move and make
11967.61 -> it equal to the string rock
11971.81 -> and we'll do the same thing here. Cons,
11976.19 -> computer move equals paper
11981.74 -> and here cons,
11985.43 -> computer move equals scissors.
11992.33 -> And now at the bottom
let's console dot log
11997.28 -> the computer move variable
to make sure that it worked.
12002.89 -> If we save and then click our rock button.
12007.95 -> Unfortunately it gives us an error
telling us that computer move is
12012.73 -> not defined even though
we created it right here.
12017.83 -> So what is happening here, if
statements have a special feature,
12022.78 -> they create something called a scope,
12026.29 -> A scope limits where a variable exists.
12030.85 -> Basically whenever we have
these curly brackets like this,
12035.83 -> any variable we create inside the
curly brackets will only exist
12040.84 -> inside the curly brackets and
we can't use these variables
12045.43 -> outside the curly brackets.
So this is called a scope.
12050.38 -> Scopes are a feature of many programming
languages and they help us avoid
12055.36 -> naming conflicts. For example,
12058.69 -> if I create a variable here called random
12064.06 -> number equals 0.5 and this
12068.98 -> didn't create a scope. So if
I delete these curly brackets,
12074.38 -> this variable name will now conflict
with the variable name up here
12079.54 -> because we can't have two
variables with the same name.
12083.38 -> So you can imagine that if we didn't
have scope and we had hundreds or even
12087.98 -> thousands of lines of code,
we would quickly start to
run out of variable names.
12093.31 -> So by creating a new scope here,
12096.61 -> all the variable names inside
the scope only exist between the
12101.38 -> curly brackets and it won't affect
anything outside in the code.
12107.12 -> So scopes help us avoid naming conflicts,
12112.04 -> okay,
12112.79 -> so I'll delete this example and
we'll learn how to access this
12117.17 -> variable outside of this scope.
12121.19 -> So to access this variable
outside of the if statement,
12125.15 -> we have to create this variable
outside of the if statement.
12130.01 -> So above here we can create this variable
12136.84 -> constant
12138.56 -> computer move and let's just make it equal
12143.69 -> to the empty string for now.
12146.99 -> So this variable was not created
inside any curly brackets,
12152.09 -> so it's accessible from all of
this code inside the on click
12156.89 -> attribute including
inside the if statement
12162.14 -> and then inside the IF statement
instead of creating a new variable,
12167.27 -> we're just going to save the move
inside this variable up here because we
12172.19 -> can access this variable
anywhere else in the code.
12177.08 -> So instead of using cons,
12179.15 -> we're just going to reassign computer
move and we're going to remove it here
12184.04 -> as well. And here as well.
12188.57 -> And remember when we reassign a variable,
12191.75 -> we have to switch from cons to let
12197.39 -> and now if we save and
then click the rock button,
12203.57 -> we're able to console dot log
computer move because computer
12208.37 -> move is no longer inside this scope,
12211.7 -> it's up here so we can access
it in this line of code.
12217.1 -> So that's how scope works.
12219.35 -> Any variable that we create
inside curly brackets will only
12223.94 -> exist inside the curly brackets.
12227.84 -> So remember in the previous lesson we
learned a third way of creating variables
12232.8 -> called var.
12234.56 -> The issue with VAR is that it doesn't
really follow the rules of scope.
12239.42 -> For example here if we
create a variable with var,
12243.98 -> like VAR and random
12248.66 -> number equals 0.5,
12253.52 -> this variable will conflict with
the variable up here with the same
12258.44 -> name even though it's inside a scope.
12262.46 -> So that's why we don't use a VAR
anymore and we just use cons and let
12267.08 -> because a var doesn't really
follow the rules of scope.
12271.91 -> So we can remove this for now
and move on to the next step.
12279.35 -> So we generated a random
move for the computer,
12283.29 -> now we have to compare our move which
is rock to the computer's move to
12288.21 -> get the result and see who wins.
12291.39 -> To do that we'll use another if
statement. So at the bottom here,
12297.33 -> let's type if and then
brackets and curly brackets.
12303.18 -> And then inside this condition,
12305.91 -> let's check if the computer move
12311.46 -> is equal to rock.
12316.32 -> So remember in JavaScript we always
use triple equals instead of double
12320.82 -> equals to avoid the conversion behavior.
12324.84 -> And now if the computer's move
is rock and our move is rock,
12329.82 -> then inside the curly brackets
the result is going to be
12334.35 -> a tie
12337.26 -> And let's save the string in a
variable so we can use it later. Again,
12342.51 -> we have the same situation as before.
12345.45 -> We don't want to create the variable
inside here because then it only
12349.83 -> exists in this scope
between the curly brackets.
12354.15 -> Instead we're going to create the
variable above outside the if statement.
12359.91 -> So we'll use let to create this
variable because we're going to reassign
12364.83 -> it in the if statement.
12366.9 -> Let's name this variable
result and just make it equal
12371.91 -> to the empty string at the top.
12375.69 -> And then in the if statement
we'll save the result into
12380.49 -> this variable.
12382.08 -> So result equals tie.
12388.98 -> Now let's create the other
branches of this if statement.
12393.12 -> So here we'll add else if
12398.34 -> brackets and curly brackets
and we'll check if the
12402.78 -> computer move is equal to
12408.06 -> paper This time,
12410.34 -> if the computer move is
paper and we picked rock,
12414.96 -> then we lose.
12416.22 -> So the result is equal to you
12420.87 -> lose.
12424.02 -> And finally we'll add another else if
12428.73 -> brackets and curly brackets
and we'll check if the
12433.32 -> computer move is equal
12437.91 -> to scissors
12441.3 -> and if the computer picked
scissors and we pick rock,
12445.62 -> the result is that you win.
12452.94 -> So that's how we compare our move
to the computer's random move using
12457.86 -> an if statement.
12459.99 -> The last step is to display
this result in the popup.
12466 -> So at the bottom let's
create a pop-up using
12470.44 -> alert, open bracket, close bracket
12475.27 -> and let's go back to super simple
dev to see the message in the pop-up.
12480.49 -> So what click this and in
the popup it shows our move,
12485.74 -> the computers move and then the result.
12489.07 -> So we can actually just copy this,
12492.97 -> right click copy
12496.6 -> and then in here right click and paste.
12502.15 -> So obviously the computer is not going
to pick this move every time and this is
12507.13 -> not going to be the
same result every time.
12510.01 -> Instead we want to insert
computer move into here and
12514.93 -> we want to insert result into here.
12518.2 -> So because we want to insert values,
12521.32 -> we're going to turn this into a
template string using back ticks.
12528.25 -> And now instead of paper we're
going to insert a value using dollar
12533.17 -> and curly brackets and we're
going to insert the variable
12538.03 -> computer move.
12541.9 -> And instead of this text,
12543.88 -> every time we're going to insert the
12548.38 -> variable result.
12552.52 -> And now if we save
12555.61 -> and we can click okay to close
this and go back to our tab
12561.16 -> and click the rock button,
we're going to pick rock,
12565.69 -> the computer will pick a random move
and it will show us a result in a popup.
12571.9 -> So that's how we create this simple
version of rock paper scissors
12577.03 -> in our code we did things step by step.
12580.99 -> First we generated a random number,
12584.11 -> we converted it into a move
for the computer and then we
12589.06 -> compared our move to the computer
move and we displayed the result in a
12594.01 -> pop-up. So as you can see
when we're writing JavaScript,
12599.26 -> we first figure out what
steps we need to do.
12602.89 -> This is called an algorithm and
then we convert these steps or this
12607.84 -> algorithm into code.
12611.68 -> So now we can actually remove this
console dot log because we don't need it
12615.61 -> anymore.
12619.18 -> And the last step is to make the
other buttons here interactive.
12623.98 -> So feel free to pause this video if
you want to try it yourself first
12629.14 -> for the paper button,
12631.24 -> let's add some new lines to
make it a little easier to read.
12635.89 -> And again we'll add the on click attribute
12642.29 -> and then inside here we can actually
make a copy of all the JavaScript
12647.27 -> we wrote so we can select all of this
12652.91 -> and then write click copy
12657.8 -> and then in here right click and paste.
12665.72 -> If the formatting doesn't look right
we can select all of these lines
12672.47 -> And press tab to add indents
until the formatting looks
12677.39 -> good.
12680.9 -> The one thing we have to change
here is that now we picked paper,
12685.13 -> so the result is going to be different.
12688.01 -> If the computer picks
rock and we pick paper,
12691.7 -> that means you win.
12696.17 -> If the computer picks
paper now it means that we
12701.45 -> tie and if the computer picks scissors,
12705.92 -> that means you lose.
12709.97 -> And here we'll also change.
You pick rock to paper
12716.69 -> and that's it.
12721.7 -> The last step is to make these
scissors button interactive. So again,
12726.89 -> on click equals double quotes
12732.41 -> and then we'll make a copy of
the code. So I already have it,
12736.25 -> so just write click and paste
12741.29 -> and then again select the code that
we need to fix the formatting for
12746.48 -> and press tab.
12749.78 -> And here we pick scissors. So
if the computer picks rock,
12754.91 -> then the result is you lose.
12759.2 -> If the computer picks paper,
12761.15 -> the result is you win and if the computer
12765.92 -> also picks scissors,
12767.66 -> the result is a tie and we'll
12772.44 -> change. You pick rock to scissors.
12777.68 -> Now if we save and try out our game,
12782 -> if we click rock,
12784.19 -> we're going to pick rock computer picks
a random move and it will show us the
12788.54 -> result. Here
Let's press okay and try paper.
12794.48 -> This also works correctly.
12796.97 -> Let's press okay and click scissors
12801.83 -> and this also works
correctly and that's it.
12806.6 -> We just finished creating a simple
version of this rock paper scissors game.
12812.93 -> In the rest of this lesson we're going
to learn more details about bulls and if
12817.89 -> statements.
12819.72 -> Let's go back to bullions
dot html and open the
12824.4 -> tab for this file
12827.25 -> and let's comment out the
previous code using slash star
12833.34 -> and star slash and create some new lines.
12839.85 -> The next thing we're going to learn
is called truthy and falsey values.
12845.4 -> So if statements don't just work
with bullying values like true
12850.35 -> and false,
12852.15 -> they actually work with any type
of value including numbers and
12857.01 -> strings. For example,
12859.68 -> let's type if brackets and curly
12864.07 -> brackets and inside this condition,
12868.2 -> instead of putting a bullion value,
12870.81 -> we're going to put a number like five.
12874.95 -> And then inside the curly brackets,
12877.62 -> let's console dot log the string
12882.96 -> truthy.
12885.75 -> If we save the number
five behaves just like
12890.46 -> true, it causes the if
statement to run this code.
12895.47 -> So we call this value a truthy
value because it behaves just
12900.45 -> like true.
12902.19 -> Now let's change this value
to a different number zero.
12908.01 -> If we save
12910.5 -> the number zero behaves just like false,
12913.65 -> it causes the if statement
to not run this code.
12917.79 -> We call this value zero
a falsey value because it
12922.26 -> behaves just like false.
12925.26 -> So how do we know if a
value is truthy or falsey?
12930.15 -> In JavaScript, the list of
falsey values are false.
12935.25 -> The number is zero,
12936.96 -> the empty string nan undefined and nu,
12942.9 -> any value that is not on
this list is a truthy value.
12948.63 -> So why do we use truthy and falsey values?
12952.89 -> One way we use them is like
a shortcut in our code.
12957.36 -> For example,
12958.86 -> let's create a variable
at the bottom using const
12964.41 -> and let's call it cart
quantity and make it
12969.33 -> equal to five. Next,
12973.83 -> let's create an if statement.
12976.53 -> If brackets and curly
brackets and inside the
12981.51 -> curly brackets,
12983.1 -> let's type console dot log.
12987.66 -> The string cart has products.
12994.29 -> Now let's say that we only want to
display this message if our cart has
12999.01 -> products usually inside
this condition we would
13003.57 -> check if cart quantity is greater
13009 -> than zero,
13011.1 -> but now instead of doing this
comparison we can actually just type
13015.9 -> cart quantity and it
will behave the same way.
13020.73 -> If the cart quantity is not zero,
they will both behave like true.
13026.52 -> If the cart quantity is zero,
they will both behave like false.
13032.16 -> So here the cart quantity is five,
13035.19 -> which is a truthy value if we save,
13039.87 -> this causes the if statement to
run this code. As you can see,
13045.15 -> instead of doing comparisons we
can use truthy and falsey values
13050.1 -> as shortcuts.
13052.77 -> Truthy and falsey values also
work with logical operators.
13057.78 -> For example,
13059.31 -> if we console dot log
13064.77 -> the knot operator and the number zero
13069.21 -> zero is a falsey value,
13071.49 -> it behaves just like false so
the knot operator will flip it
13076.59 -> into truth.
If we save, this will display truth.
13083.28 -> Now that we understand
truthy and falsey values,
13087 -> let's go over the list of falsey values
because there are some that we haven't
13091.47 -> learned yet.
13093.15 -> We already learned false
zero and the empty string.
13098.37 -> The next falsy value is nan,
which means not a number.
13104.46 -> We get nan if we do some
invalid math for example
13109.83 -> at the bottom,
13111.51 -> let's type console dot log the
13116.49 -> string text divided by the number
13120.87 -> five.
13123.03 -> So obviously this is not valid math.
13126.69 -> If we save JavaScript will
tell us that the result of this
13131.25 -> calculation is not a number or nan
13136.47 -> the next false value is undefined.
13140.01 -> Undefined represents that
something doesn't have a value.
13144.66 -> For example,
13146.04 -> at the bottom if we
create a variable with let
13151.05 -> variable one and we
don't give it a value and
13155.91 -> then we console dot log this variable
13163.26 -> and we save,
13165.9 -> it will show us that variable
one contains the value undefined.
13171.39 -> So undefined represents that this
variable doesn't have a value.
13177.85 -> One thing to note with undefined is
that we can only use this syntax with
13182.5 -> let, we can't use it with const.
13187.27 -> If we really want to use this
with const we have to type out
13191.83 -> equals undefined directly.
13197.29 -> The last falsey value is nu.
13200.11 -> We'll need some extra knowledge to
understand nu so we'll learn about null
13204.67 -> later in this course.
13208.09 -> The last thing we're going to learn in
this lesson are some shortcuts for if
13212.42 -> statements called the turner operator,
13215.83 -> the guard operator and
the default operator.
13220.42 -> First, let's comment out this code
so our console doesn't get too messy
13225.76 -> slash star and then at
the bottom star slash
13232.45 -> and let's scroll down and we'll start
by learning the turnery operator.
13238.81 -> We're going to type a
boian value like true and
13244.14 -> question mark,
13245.29 -> another value for
example the string truthy
13250.51 -> and then colon and another
value like the string
13255.64 -> falsy. So this is the turn operator.
13260.74 -> This is similar to an if else statement.
13264.46 -> The first value is like the
condition, if it's truthy,
13269.2 -> the result of this code is a
value after the question mark.
13273.64 -> If the first value is falsey,
13276.28 -> the result of this code is
the value after the colon.
13280.81 -> So you can think of the question
mark as the IF branch and the
13285.25 -> colon as the ELs branch.
This is sort of like a
13289.57 -> shortcut for an IF statement like this.
13294.67 -> Now an advantage of the ary operator
over an if statement is that we can
13299.65 -> save a ary operator in a variable.
13303.37 -> So at the front we can do constant
13307.96 -> result equals
13312.07 -> and now if we console dot log the
13316.72 -> result and save
13322.03 -> the first value is true.
13324.16 -> So the value after the question
mark gets saved in the variable.
13329.98 -> As always we can use truthy and
falsey values instead of just
13334.63 -> true and false.
13336.94 -> So here if we change the
first value to a falsely value
13341.62 -> like zero,
13343.78 -> this will cause the value
after the colon to get saved
13348.34 -> inside the variable. If we save,
13352.52 -> that's exactly what happens.
13355.37 -> So this is the turn operator,
13358.07 -> it's sort of a shortcut for an
if else statement like this.
13365.21 -> The next shortcut is
called the guard operator.
13369.2 -> Earlier in this lesson we
learned the and operator which
13373.91 -> checks if two sides are both truthy,
13377.93 -> the and operator has a special feature.
13381.11 -> Let's say we have an and operator
and the left side is false.
13386.96 -> In this situation we already
know it's impossible for both
13391.52 -> sides to be truth so we don't
even need to check the right side.
13397.4 -> So the and operator actually
stops early and doesn't even run
13402.39 -> the code on the right and
this is called a short circuit
13406.61 -> evaluation. For example,
13409.7 -> let's go into our code and
create some new lines and we'll
13414.36 -> type false and
13419.03 -> console dot log. Hello.
13426.11 -> If we save, the left side is falsey,
13430.88 -> so the and operator stops
early or short circuits and it
13435.65 -> doesn't even run the code on the right.
13439.1 -> So as you can see we can use
the value on the left to block
13444.08 -> or guard the code on the right.
13447.05 -> So when we use the and operator like this,
13449.99 -> we call it the guard operator.
13453.77 -> This is sort of like a shortcut
for an IF statement like this
13460.28 -> and just like the turn operator,
13462.74 -> we can save the guard operator
in a variable. For example,
13468.26 -> let's create a variable cons message
13473.66 -> and make it equal to false
13478.31 -> and the string, hello.
13483.2 -> If the first value is falsey,
13485.66 -> the guard operator will stop early
and the result will be the first
13490.49 -> value.
13492.05 -> If we console dot log this message
13498.59 -> and save the value,
13501.74 -> false will be saved inside this variable.
13505.97 -> Now let's change this value to
a truthy value like the number
13510.44 -> five.
13511.94 -> Now it will not stop early and
it will give us the second value
13516.71 -> as the result if we save the string.
13521 -> Hello is now saved inside this variable.
13525.62 -> This is sort of like a shortcut
for an IF statement like this,
13530.94 -> so don't worry if it's a bit confusing.
13533.64 -> All of these are just
shortcuts for an IF statement.
13537.54 -> They're sort of like an if statement
that we can write on a single line.
13544.05 -> The last shortcut is called
the default operator,
13547.66 -> which is similar to the
guard operator but uses or
13552.99 -> earlier in this lesson we learned
the OR operator which checks
13557.79 -> if at least one side is truthy.
13561.12 -> Let's imagine we have an OR
operator and the left side is
13565.74 -> true in this situation.
13568.98 -> We already know the result of the
OR operator because the left side
13573.84 -> is already truthy, we don't even
need to check the right side.
13579.18 -> So the OR operator also stops
early or short circuits.
13583.98 -> If the first value is truthy, for example,
13588.69 -> let's create some new lines and
let's say that in our final Amazon
13593.4 -> project we can choose a
currency to pay for our order.
13598.53 -> Let's create a variable with
13602.61 -> currency and make it equal to the string e
13607.53 -> u R or euros.
13610.68 -> Now let's say that choosing
a currency is optional.
13614.7 -> If we don't choose a currency,
13616.44 -> we'll use a default value
of U S D or United States
13621 -> dollars to create a default value.
We can go to the end
13626.4 -> and type or the string U s
13631.29 -> D. So here the left side is truthy,
13636.99 -> so the OR operator will stop
early and it will result in the
13641.58 -> value on the left.
13644.85 -> If we console dot log the
13649.36 -> currency
13652.2 -> and save it will display euros.
13657.33 -> Now let's say that we didn't choose
a currency because it's optional.
13662.25 -> So let's go here and we're
going to change this currency to
13667.14 -> undefined.
13669.93 -> Now the left side is fy,
13672.81 -> so the ore operator
does not short circuit.
13675.96 -> It will continue and the result
will be the value on the right
13681.06 -> if we save.
13683.34 -> Now the string U S D is
saved inside currency.
13688.56 -> As you can see,
13689.73 -> we can use the ore operator
to set a default value.
13694.47 -> So when we use the OR operator like this,
13697.35 -> we call it the default operator.
13701.22 -> The default operator is sort of a
shortcut for an IF statement like
13706.11 -> this. So don't worry,
13709.6 -> remember that everything that we learned
in this last section are basically some
13714.73 -> shortcuts for if statements.
13716.86 -> We don't have to use them but
they can save us some typing
13722.02 -> and that's the end of this lesson.
13724.27 -> In this lesson we learned about
bullying's and if statements bullying
13729.16 -> values represent whether
something is true or false.
13734.23 -> We learned how to use IF statements
to make decisions in our code.
13738.67 -> We learned how to use comparison
and logical operators.
13743.11 -> We learned about algorithms and
created a simple version of rock
13747.88 -> paper, scissors.
13749.62 -> We learned about truthy and
falsey values and we learned
13754.48 -> some shortcuts for if
statements, the turn operator,
13759.16 -> the guard operator, and
the default operator.
13763.15 -> Here's some exercises to help you
practice bullying and if statements.
13795.31 -> In this lesson we're going to learn
the next feature of JavaScript called
13799.95 -> functions and we're going to use
functions to improve our rock paper
13804.67 -> scissors project. First,
13807.64 -> let's create a new file for
this lesson we'll go to our code
13812.11 -> editor and create a new file
13817.24 -> and let's name this file zero seven dash
13822.31 -> functions dot html and
13826.9 -> press enter. Next,
13830.29 -> let's copy bulls dot html to functions dot
13835.06 -> html.
13836.2 -> So we'll click this file and
then select all this code using
13841.15 -> control A or command A and then right
13845.53 -> click copy.
13849.4 -> And in here right click and paste
13856.63 -> and we'll hide our files and
prepare this file for this lesson.
13862.42 -> So at the top we'll change the title to
13867.19 -> functions
13869.26 -> and we'll remove all the
code in the script element.
13876.37 -> And let's save and we'll
open this file in live server
13881.35 -> by right clicking open with live server
13887.24 -> and we're going to open
the console as well.
13890.18 -> So right click inspect and then
13895.07 -> click the console.
13898.01 -> And finally we can close the previous tabs
13903.62 -> as well as the previous code.
13909.77 -> Okay, now we're ready to learn functions.
13914.03 -> First of all, what is a function?
13917.39 -> A function let's us reuse code.
13921.26 -> Let's create our first function.
13924.65 -> We're going to go to the script element
And type the word
13930.1 -> function and space.
13934.01 -> So this creates a new function
and then we're going to give a
13938.93 -> name to our function. We can
name it almost anything we want,
13943.64 -> but for now let's just
name it function one
13949.46 -> and then we're going to type
round brackets and curly brackets.
13955.4 -> Then inside these curly brackets
we're going to create a new line
13960.95 -> and we're going to type some code.
13963.59 -> So console dot log
13968.69 -> the string, hello,
13971.93 -> and we'll also type console dot log
13977.66 -> two plus two and save.
13984.11 -> So this creates a function.
13986.78 -> Now let's learn how to use this function.
We're going to type at the bottom
13993.77 -> the function name,
13995.63 -> so function one and then open bracket,
14000.55 -> close bracket and semicolon.
14003.94 -> When we type the function
name with brackets,
14007.54 -> this will run the code
inside the function.
14012.04 -> If we save,
14014.44 -> notice that it runs the code inside
the function and displays the two lines
14019.54 -> in the console. So why
do we use functions?
14024.31 -> A function lets us reuse code.
14027.64 -> So if we wanted to run both
these lines of code, again,
14031.36 -> all we have to do is type the
function name again with brackets.
14036.07 -> So function one and brackets again,
14041.95 -> if we save,
This will run the code inside the function
14047.11 -> two times and we can reuse this
code as many times as we want
14052.54 -> by typing the function name with brackets.
14056.68 -> So that's what a function
is. It lets us reuse code.
14061.99 -> Now let's learn the syntax
rules for functions.
14065.69 -> The word function creates
a new function and then we
14070.65 -> choose a name for our function.
14073.49 -> The rules for function names
are the same as variable names.
14077.9 -> We can't use special words like function.
14081.74 -> We can't start with a number and
we can't use special characters
14087.55 -> although dollar sign and
underscore are allowed.
14091.07 -> And just like variable names,
14092.75 -> the best practice is to use
camel case for function names.
14098.42 -> And inside these curly brackets
we put the code that we want to
14103.07 -> run when we use the function.
14105.83 -> This is called the function body.
14109.1 -> Now one very important thing
to remember is that this code
14113.9 -> only creates a function.
It doesn't run the code in the function
14118.97 -> or do anything else in order
to actually run the code.
14123.86 -> We have to use the function
like below by typing the
14129.14 -> function name with brackets.
14132.2 -> This is known as calling the function.
14135.29 -> It's also known as running the
function or executing the function.
14141.14 -> Now that we learned these
syntax rules for functions,
14144.35 -> let's do a practical example.
14147.32 -> We're going to use functions to improve
the code of our rock paper scissors
14151.71 -> project. First,
14154.37 -> let's click here to show our files
and we're actually going to make a
14159.17 -> copy of the project just for this lesson.
14163.19 -> So we're going to right
click this file copy,
14168.95 -> and then at the bottom
right click and paste
14175.04 -> and we're going to rename this
file. So right click rename,
14181.67 -> remove copy at the end,
14184.43 -> and then at the beginning
we'll change this to zero seven
14189.68 -> and press enter.
14192.65 -> Next we're going to open this
file in live server by right
14197.51 -> clicking and then open with live server.
14203.48 -> And let's also open the console
on this page while right click
14208.94 -> inspect and then click the console.
14214.97 -> All right,
14216.2 -> now if we look at the code for
generating a computer move,
14221.72 -> you'll notice that this code is
the same for all three buttons.
14227.12 -> So this is a perfect situation
to use a function because a
14232.56 -> function lets us reuse code.
14235.82 -> So let's scroll down to the script
element and we're going to make
14240.74 -> a function here. So let's type function
14246.63 -> and then a function name.
Let's name this function,
14250.8 -> pick computer move,
14255.93 -> and then brackets and curly brackets.
14259.62 -> So one recommendation for function
names is to use a verb or an
14264.39 -> action in the name such as pick.
14268.95 -> So next we're going to move all the
code for picking a computer move
14274.38 -> into our new function.
14277.14 -> So let's create a new line
here and we'll scroll up to
14281.94 -> the scissors button because it's
the closest one and we'll select all
14286.9 -> of this code for picking a computer move.
14290.01 -> And then right click cut
14295.02 -> and inside the function,
14298.17 -> right click and paste.
14303.48 -> If we need to fix the formatting,
14305.55 -> we can select these lines
and press tab to add indents.
14311.73 -> So the reason we created this function
in the script element is because
14316.41 -> remember that the script element
runs when the page is loaded.
14320.94 -> So we want to make sure that we create
the function first and then we use
14325.92 -> it in the buttons after. Now remember,
14329.85 -> this code just creates a function.
14332.97 -> It doesn't actually run the code
inside to run the code inside.
14337.8 -> We're going to call this function.
14340.53 -> So let's scroll up to the scissors
button and we're going to call
14345.45 -> this function by typing the function name,
14349.47 -> pick computer,
14352.62 -> move open bracket,
14355.26 -> close bracket and semi call it if we save
14361.17 -> and then click the scissors
button. Unfortunately,
14365.73 -> it now gives us an error saying
computer move is not defined.
14371.22 -> Now this might seem weird because
down here we actually create
14376.08 -> the computer move. So what's going on?
14379.65 -> The reason this happens is
because functions create a scope.
14384.39 -> In the previous lesson
we learned about scopes,
14387.72 -> which limit where a variable exists.
14391.41 -> We learned about if statements and
that if statements create a scope
14395.82 -> between the currently brackets,
14398.31 -> this means that any variable created
between the currently brackets only
14403.08 -> exist between the curly brackets.
14407.72 -> Functions also create a scope.
14410.43 -> Any variable that is created
between these curly brackets
14415.53 -> only exists inside the curly
brackets and we can't use it
14420.19 -> outside the curly
brackets like we do here.
14424.51 -> So that's why we're getting this error.
14428.05 -> So how do we solve this problem?
Remember that with if statements,
14432.91 -> we solve this by creating the
variable outside of the if statement
14437.8 -> like this.
14439.57 -> We can use a similar solution
with functions to make this
14444.11 -> variable exist outside the function,
14447.07 -> we just have to create
it outside the function.
14450.67 -> So let's select this code.
14453.4 -> We're going to right click and cut
14458.8 -> and remove these lines.
14461.05 -> And then outside the function
we're going to right click
14466.51 -> and paste.
14469.69 -> So now this variable is no
longer inside the functions
14474.31 -> scope and it can be used
anywhere else in the code.
14479.32 -> So variables like this that can be
accessed anywhere are called global
14484.72 -> variables. If we save
14488.26 -> and now click the scissors button,
14491.86 -> everything is working again
because this code above can now
14496.51 -> access this variable.
Now let's press okay,
14502.48 -> and let's use this function
to reuse this code.
14507.25 -> So we'll scroll up to the paper button
14512.35 -> and now instead of all this code, again,
14516.07 -> we're just going to remove
it and call the function pick
14521.59 -> computer, move open
bracket, close bracket,
14526.6 -> semicolon,
14528.13 -> and also with the rock button
we'll select all this code
14533.95 -> and remove it and just call the function,
14537.52 -> pick computer,
14541.33 -> move brackets and semicolon.
14545.74 -> Now if we save and click the rock button,
14551.59 -> it works just like before,
14554.23 -> we'll press okay and
click the paper button.
14558.64 -> It also works just like
before. So as you can see,
14564.04 -> functions let us reuse code and
they make our code a lot cleaner by
14568.96 -> removing all the duplication that we had.
14572.77 -> Another benefit of removing
duplication is that before if we ever
14577.63 -> wanted to update the code
for picking a computer move,
14581.5 -> we had to update it in three
places in each of the buttons.
14586.75 -> But now if we scroll down,
14590.26 -> we only have to update it in
one place inside this function.
14595.51 -> So functions also make our code
easier to update in the future.
14601.16 -> Next we're going to learn a feature of
functions called a return statement.
14606.86 -> A return statement lets us
get a value out of a function.
14612.47 -> So at the end of this function,
let's type some new lines
14618.83 -> and we're going to type return and then a
14623.36 -> value like the number five and semicolon.
14628.76 -> Now whenever we call this function,
14632.18 -> it will result in a value the number five.
14636.86 -> So up here when we call this function,
14641.78 -> this will result in the number five.
14645.2 -> So we can actually console
dot log this console
14649.82 -> dot log
14654.71 -> and then save and click
the scissors button
14660.53 -> and it will show us that calling the
function now results in the number
14665.4 -> five and we display it in the console.
14670.19 -> So that's how a return statement works.
14672.92 -> It lets us get a value
out of this function.
14677.21 -> Let's press okay and do another example.
14681.5 -> We'll scroll down and this
time let's change this value
14686.51 -> to the string rock.
14690.08 -> Now whenever we call this function,
14692.9 -> it will result in the
string rock if we save
14698.78 -> and then click scissors
and scroll up here,
14705.2 -> calling this function now results
in the string rock and then
14710.15 -> we display it in the console.
So now let's press okay,
14715.76 -> and we'll learn these syntax
rules for a return statement.
14719 -> So.
14722 -> We just have to type the word
return and then a value and it
14726.9 -> will get this value out of the function.
14730.52 -> Now instead of just a value,
14732.53 -> we can also return a
calculation or a variable or
14737.15 -> anything that results in a value.
14740.93 -> So this is known as returning
a value from a function
14746.15 -> and this value is known
as the return value.
14751.1 -> We also don't have to return
anything from a function.
14754.97 -> If a function doesn't have a
return statement or we return
14759.56 -> without a value like this,
14763.34 -> this will return the value undefined.
14766.94 -> So if we save and then
click scissors again
14772.97 -> the function will return undefined.
14777.36 -> And lastly, when we
use a return statement,
14780.51 -> it ends the function immediately.
So after the return statement,
14786.6 -> if we type console dot,
14790.74 -> log the string after
14795.93 -> and press okay here and save this file
14801.3 -> and then click the scissors button.
14804.87 -> Notice that it doesn't run this code.
14807.84 -> And that's because once we
return the code returns back to
14812.67 -> where we call the function. That's
why it's called a return statement.
14817.53 -> So it's not going to run
anything after the return.
14821.52 -> So we can remove this code
14826.11 -> and press. Okay,
14828.93 -> So now that we understand
return statements,
14831.99 -> we're going to learn a better way of
getting the computer move out of this
14837.37 -> function. So first,
14839.55 -> let's actually move this
variable back into the function.
14843.54 -> So we're right click and
cut, and then in here,
14850.14 -> right click and paste
14854.99 -> and delete these lines.
14860.46 -> So now we're back to the original problem.
14863.37 -> How do we access computer
move outside of the function?
14868.05 -> So another solution is to
return this variable because
14872.67 -> remember a return statement
lets us get a value out of the
14877.77 -> function. So down here
14881.31 -> we're going to return the computer move.
14887.49 -> So this will take whatever value
is saved inside computer move,
14892.41 -> which is one of these values and
return it out of the function
14897.66 -> if we save and then click
the scissors button,
14903.93 -> we were able to get the move
scissors outside of this function.
14909.15 -> So what happened here is that we
returned this move and then up here
14915.54 -> we took the move and displayed it
in the console to get scissors.
14921.51 -> So that's another way of getting
the computer move out of a function
14926.31 -> using the return statement. However,
14930.69 -> now we're back to this problem with
computer move not being defined
14936.21 -> because we moved it back
into the functions scope.
14940.89 -> So let's scroll up and remember that this
14945.45 -> return value is just a value.
14948.54 -> We can use it like any
other value, for example,
14952.53 -> we can log it or we
can also save this in a
14957.76 -> variable. So let's do that right now.
14960.94 -> We're going to remove this
14964.96 -> and create a new variable with cons.
14969.31 -> And let's just name this
variable computer move
14975.25 -> to match what we use down
here and we use equals to
14980.15 -> save the return value
inside this variable.
14984.49 -> So note that even though we use
computer move here as well as
14989.35 -> here, there are different variables.
14992.74 -> This one is inside the function's scope.
14996.07 -> So it prevents it from conflicting
with variables outside the function's
15001.08 -> scope. That's one of the
main benefits of scopes.
15006.72 -> So now that we save the return
value into this variable,
15011.22 -> and we're using this variable down here,
15013.86 -> the code should now work.
If we save and
15018.69 -> click scissors,
15021.57 -> everything is back to normal
and let's press. Okay,
15026.67 -> so don't worry,
15027.78 -> functions can be a little confusing
at first because the code is no longer
15032.55 -> simply going from top to bottom.
15036.33 -> It sort of jumps around a little bit.
15039.15 -> So let's go through this step by
step. When we click this button,
15044.49 -> we're going to run this function.
15047.16 -> So the code is going to jump down
here and then it's going to run all of
15052.02 -> this code from top to bottom.
15056.01 -> At the end we're going to return
whatever is inside computer,
15060.68 -> move back to where we
called this function.
15064.83 -> So we're going to return
all the way back here,
15069.09 -> and then we're going to save
that return value into a new
15073.53 -> variable computer move and then
use computer move down here.
15079.77 -> So following the code line by line
like this is called tracing the code.
15085.26 -> It's a useful technique to understand
exactly what the code is doing.
15090.93 -> Now let's compare the two
solutions that we used a global
15095.4 -> variable and returning a variable.
15100.44 -> So returning a variable like
this is actually preferred
15105.36 -> over using a global variable,
15108.3 -> and that's because a scope can
help us prevent naming conflicts.
15113.1 -> So all the variables inside here
will not conflict with anything
15117.99 -> outside the scope.
15120.33 -> So generally it's a best practice
to keep things inside a scope
15125.19 -> if we can.
15127.83 -> Now let's move on and use this
function in the other buttons.
15132.88 -> Feel free to pause the video if
you want to try it yourself first.
15138.7 -> So we'll scroll up to the paper button
15143.08 -> and then here we're going to
save the returned computer,
15147.4 -> move into a variable. So cons,
15152.35 -> computer move so that it matches the code
15157.21 -> down here. Make it equal
to whatever is returned.
15163 -> And then same thing for the rock button,
15166 -> we're going to save the
return value in a variable.
15170.29 -> Cons computer move equals
15176.17 -> if we save and click the rock button,
15181.96 -> it works.
Let's press okay and click the paper
15186.76 -> button and this also
works and let's press.
15191.41 -> Okay,
15193 -> so that's how we use a return statement
to take advantage of the benefits
15197.92 -> of scope. Next,
15200.98 -> if we look at the rest of this
code where we compare our move
15205.84 -> and display the result,
15207.73 -> you'll notice that this code is very
similar for each of the buttons.
15212.77 -> The only thing that's different is
the result and the message that we
15217.63 -> display.
15219.16 -> So we can actually use functions
here as well to reuse code
15224.11 -> that has small differences. To do this,
15227.83 -> we're going to need another feature
of functions called parameters.
15232.81 -> So let's go back into
functions dot html and
15237.67 -> let's open the tab for this file.
15242.68 -> And let's also comment out the
previous code by typing slash star
15248.41 -> and at the bottom star slash
15253.6 -> and create some new lines.
15256.66 -> And now we're ready to learn parameters.
15259.78 -> So parameters are sort of the
opposite of a return statement.
15264.37 -> A return statement gets a
value out of a function.
15268.75 -> A parameter puts a value into a function.
15273.19 -> So let's do an example.
15275.65 -> Let's say that we're working on the
final Amazon project and we need to
15280.15 -> calculate the tax for our order.
15283.63 -> Let's create a function
to calculate the tax.
15287.71 -> So function,
Let's name it,
15292.48 -> calculate late tax brackets and curly
15297.16 -> brackets, and then inside
the curly brackets,
15301.06 -> let's say that the cost of our products is
15304.48 -> 1000 cents or $10 and the tax
15309.2 -> is 10%. To calculate the tax,
15312.92 -> we can do 1000 times 0.1,
15318.47 -> which is 10%. Let's also display
this number in the console.
15324.26 -> So at the front, we'll type console, dot,
15328.91 -> log, and brackets.
15335 -> Now let's save and remember,
15338.12 -> this code only creates a function.
It doesn't run the code inside.
15343.82 -> To run this code, we're
going to call this function.
15347.48 -> So down here we're going
to type the function, name,
15351.41 -> calculate, tax, and then brackets.
15357.02 -> If we save, it runs this code,
15361.64 -> and then it displays the tax,
which is 100 cents or $1.
15367.28 -> However,
15368.78 -> right now this function only
calculates the tax for 1000 cents.
15374.84 -> What if we want to calculate
the tax for a different amount?
15378.83 -> How would we modify this
function to work with any number?
15383.84 -> To do this, we're going to learn a
feature of functions called parameters.
15389.03 -> A parameter lets us put
a value into a function.
15393.44 -> So let's finally create
our first parameter.
15397.19 -> So inside these round brackets,
15400.4 -> we're going to choose a
name for our parameter.
15404.06 -> So let's just name this parameter one.
15409.76 -> A parameter works the
same way as a variable.
15413.72 -> We can save a value inside this
parameter and then use it just
15418.64 -> like a variable. So first,
15421.64 -> let's save a value inside
the parameter. To do that,
15426.5 -> we're going to go to where
we call the function,
15429.59 -> and then inside these brackets
we're going to put a value,
15434.33 -> for example, 2000.
15438.35 -> This will save this value
into this parameter,
15443.69 -> and now we can use it
just like a variable.
15447.32 -> So instead of 1000,
15449.99 -> we're going to type parameter one and
15454.97 -> it will take whatever value
is inside parameter one,
15459.26 -> in this case 2000 and
substitute it into the code.
15464.87 -> If we save it now calculates 2000
15469.64 -> times 0.1 to give us 200 cents as
15474.56 -> the tax. Now every time
we call the function,
15479.33 -> we can save a different value
into the parameter. For example,
15484.97 -> let's create a new line
and call the function
15490.2 -> calculate tax.
15494.58 -> And this time we're going
to save the value 5,000
15499.35 -> into parameter one. If we save
15504.66 -> this line of code will
calculate the tax for 5000 cents
15509.91 -> and result in 500 cents.
So as you can see,
15514.68 -> a parameter lets us put
values into a function and
15519.61 -> this allows our function
to work with any value.
15524.49 -> Now let's learn the syntax
rules for parameters to create a
15529.26 -> parameter. We just typed the
parameter name between the brackets,
15534.96 -> parameter names follow the
same rules as variable names.
15539.46 -> We can't use special words,
15541.86 -> we can't start with a number and
we can't use special characters
15546.72 -> other than dollar sign and underscore.
15550.23 -> And the best practice is to use camo case.
15554.52 -> Let's actually change this
parameter name to cost so the code
15559.53 -> makes more sense and save.
15564.6 -> Next, when a function has a parameter,
15567.87 -> we usually say this
function takes a parameter.
15572.49 -> If this parameter should be a number,
15575.22 -> we say this function takes a number.
When we
15580.02 -> put a value into the function like this,
15583.14 -> we call this passing a
value into the function.
15587.97 -> Another name for this value
is called the argument.
15592.98 -> And believe it or not,
15594.51 -> we've actually used functions
and parameters this whole time.
15599.19 -> The first code that we learned
in this course was alert.
15603.81 -> Alert is actually a function.
15606.63 -> You can tell it's a function because
of the round brackets and between
15611.62 -> the brackets we put a string.
15614.22 -> So this is an example of
a parameter. And lastly,
15619.47 -> a parameter only exists
inside the functions scope.
15624.03 -> So we can only use this parameter
between the curly brackets,
15629.07 -> we can't use it outside
the function. Next,
15634.11 -> a function can actually have more
than one parameter. For example,
15639.39 -> right now our calculate tax
function can only calculate a
15643.71 -> 10% tax.
15645.87 -> But what if we're in a different country
and we want to calculate a different
15650.25 -> tax percent To solve this,
15652.98 -> we can add a second parameter
by typing after the first
15657.69 -> parameter, a comma, and
then another parameter name.
15663.63 -> Let's name this tax percent.
15669.82 -> And now to save a value into
the second parameter will go to
15674.68 -> where we call this function
and also type a comma
15679.69 -> and a second value like 0.2 or
15684.7 -> a 20% tax.
15687.46 -> So the first value gets saved in
the first parameter and the second
15692.08 -> value gets saved in the second parameter.
15696.19 -> And now we can use our second
parameter just like a variable.
15701.02 -> So instead of 0.1 every time
we're going to calculate it
15705.94 -> with tax percent
15710.44 -> And it will substitute whatever
value is inside tax percent into
15715.4 -> the code. If we save,
15719.5 -> this first line will multiply 2000 by 0.2
15724.9 -> and give us 400 cents as the result.
15729.52 -> So we can have as many parameters
as we want in a function,
15733.69 -> we just have to separate
them with a comma.
15737.56 -> Now notice that the second
time we call this function,
15740.83 -> we didn't give a value
for the second parameter.
15744.82 -> If we don't save a value
into the parameter,
15748.15 -> the parameter will get
the value undefined.
15751.93 -> So here if we console dot
15756.61 -> log the second parameter tax percent
15763.12 -> and save
15765.64 -> it will show us that the
second time tax percent is
15770.17 -> undefined.
15772.24 -> And then multiplying the
cost times undefined is not
15776.95 -> valid math.
15778.42 -> So we get the result nan or not a number.
15783.31 -> So now let's remove the console
dot log and we'll learn how to fix
15788.08 -> this. So to fix this,
15791.44 -> we can either pass a second value
into the function like this line
15796.87 -> or we can also set a default
value for the parameter
15802.18 -> to set a default value.
15804.37 -> We can just type after
the parameter and then add
15809.38 -> equals sign and a default value like
15813.46 -> 0.1 If we save
15818.98 -> the second function call
will multiply 5,000 by the
15823.54 -> default value 0.1 and give us 500.
15829.57 -> So that's how we add a
default value for a parameter.
15835 -> All right, now that we learned parameters,
15838.03 -> we're going to go back to the rock paper
scissors project and reuse even more
15842.9 -> code.
15844.25 -> So let's go back to the file
for the project and also the
15849.02 -> tab for this project.
15852.23 -> And now if we look at the code
inside each of the buttons,
15857 -> you'll notice that the code is basically
the same for all three buttons.
15862.46 -> The only small difference
is the move that we picked.
15866.87 -> So this is a perfect
situation to use a parameter.
15872.06 -> So inside the script element,
15874.43 -> let's create a new function
to reuse all of this code.
15880.28 -> We'll type function
15884.15 -> and let's name this function,
15886.31 -> play game brackets and curly
15890.99 -> brackets. Next,
15893.69 -> let's move all of this code inside
the function so we can reuse it.
15899.27 -> We'll select this code
15902.6 -> and then right click cut
15907.04 -> and inside the function
15910.55 -> right click and paste.
15915.8 -> And if we need to reformat,
15918.02 -> we can select these lines and press tap.
15924.29 -> So the value that is different for
each button is the move that we picked.
15929.99 -> So we're going to turn this
move into a parameter. So
15934.88 -> at the top between the brackets
we're going to create a new
15939.33 -> parameter,
15940.88 -> let's name it player move.
15946.55 -> And now let's save a
value into this parameter.
15951.17 -> So inside our scissors button,
15954.02 -> we're going to call this
function and run all this code.
15958.31 -> So let's type play game and call this
15963.2 -> function. And for the scissors button,
15966.74 -> let's save the string
scissors into player move.
15971.27 -> To do that,
15972.35 -> we'll type between the
brackets here and type the
15976.7 -> string scissors.
15980.93 -> So as we learned,
15982.19 -> this will save scissors into
player move and now we can
15986.99 -> use player move just like
a variable in the function.
15992.6 -> Now let's modify the code
based on the parameter.
15996.68 -> So here this code calculates
the result. However,
16001.36 -> this only works if the
player move is scissors.
16005.59 -> So we're going to put
this in an if statement.
16009.61 -> So we'll type if
16013.54 -> player move equals
16018.31 -> scissors,
16021.2 -> curly brackets inside this if statement,
16024.8 -> we're going to put this if statement.
16027.68 -> So let's select this and
then right click cut.
16033.62 -> And then inside here,
16036.5 -> right click and paste
16040.76 -> and select these lines and press tab.
16045.89 -> So notice that we can put an
if statement inside another if
16050.39 -> statement and we did this
because this code only makes
16054.95 -> sense if the player move is scissors.
And
16059.63 -> finally, let's modify the code
that displays the message.
16064.16 -> So here instead of displaying scissors,
16067.07 -> every time we're going to display
whatever is saved inside player
16072.06 -> move.
16073.73 -> So we'll replace it with
dollar open curly bracket,
16078.23 -> close curly bracket and in between insert
16082.82 -> player move and that's it.
16087.38 -> We modify this function to use a
parameter instead of always using
16092.45 -> scissors.
16094.01 -> Now let's save and click
the scissors button
16100.13 -> and you notice that it works.
16102.2 -> We display the move scissors
and we calculated the result
16106.64 -> correctly.
16109.43 -> Let's press okay and we're going
to use this function to reuse
16114.29 -> the code for the other buttons.
16117.11 -> So we'll scroll up and for the
paper button we're going to
16122.09 -> use a different if statement
to calculate the result.
16126.8 -> So let's actually copy
this into the function.
16130.82 -> We're going to right click, click copy,
16136.04 -> and then inside the function
16139.73 -> we're going to create another
branch. If the player move is paper,
16145.16 -> so here let's type else if
16150.41 -> brackets and curly brackets.
16153.53 -> Inside this condition we're
going to check if the player
16159.23 -> move is equal to paper this time.
16165.35 -> And then inside these curly
brackets we're going to paste the if
16169.94 -> statement we copied earlier.
16172.31 -> So right click and paste
16177.71 -> And we can select these lines
and press tab to reformat.
16184.34 -> So now we have the code that
determines the result for paper
16189.17 -> down here.
16190.16 -> We don't need to modify this code
because we're always displaying whatever
16194.94 -> is inside player move. Finally,
16199.14 -> we can scroll up to the paper
button and remove all this
16203.91 -> duplicated code and just use our function
16208.89 -> play game.
16212.13 -> And we're going to pass paper inside.
16217.23 -> So now paper will get saved
inside player move and
16222.21 -> it's going to run this
if statement instead.
16226.56 -> If we save and click the paper button,
16233.07 -> in this example I pick paper,
16235.83 -> computer pick rock in a
calculated the result correctly.
16241.53 -> Let's press okay and use
this function for the rock
16246.36 -> button.
16247.56 -> Feel free to pause a video if you
want to try it yourself first.
16252.66 -> So let's scroll up to the rock button.
16255.9 -> And first we need to copy this
if statement into the function.
16260.76 -> So let's right click copy.
16265.68 -> And then inside the function
16268.95 -> let's create a branch for rock else
16273.51 -> if player move is
16277.98 -> equal to rock and then curly
16282.63 -> brackets.
16283.92 -> And inside here we're going
to right click and paste
16288.78 -> the if statement we copied earlier.
And now let's select these
16293.64 -> lines and press tab a
few times to reformat.
16299.1 -> And again, this doesn't need to change.
16303.03 -> The last step is to scroll
up to our rock button
16307.83 -> and instead of duplicating
all of this code,
16311.64 -> we're going to remove it and
just call our function instead
16317.64 -> play game brackets and then
16322.35 -> inside we'll have the string rock.
16326.82 -> Now let's save and click the rock button.
16333.39 -> So I picked rock,
16335.1 -> the computer picked paper and we
calculated the result correctly.
16340.98 -> Let's press.
16341.64 -> Okay.
So by using a function with a parameter,
16346.83 -> we were able to reuse all of the
code in our buttons and you can
16351.78 -> see that it made our code
a lot cleaner. So lastly,
16356.85 -> notice that inside a function
we can call other functions.
16362.4 -> Let's go through the code step by
step so that we understand how it
16367.05 -> works.
16368.58 -> So here when we call
the play game function,
16373.05 -> we go inside here and then we
call the pick computer function.
16378.7 -> So now we're going to go
inside this function and
16383.41 -> run all the code and then
when this function returns,
16388.63 -> we're going to return back to where
we called it and then keep going
16394.69 -> and run the rest of the code.
16397.45 -> And then when the play
game function finishes,
16400.54 -> it's going to return back to here.
16405.61 -> So inside a function we
can call other functions.
16411.07 -> Now one last thing we're going to do
for this code is we'll scroll down
16417.07 -> and we're just going to add some
new lines to this if statement to
16422.34 -> separate the branches and make
the code a little easier to read
16429.16 -> and save.
16431.95 -> And let's scroll up and
that's the end of this lesson.
16437.71 -> In this lesson we learned about
functions which let us reuse
16442.63 -> code.
16443.8 -> We learned how to get a value
out of a function using return.
16449.02 -> We learned how to put values
into a function using parameters,
16453.91 -> and we improve the code for our
rock paper scissors project by
16458.83 -> reusing the code and removing duplication.
16462.97 -> Here's some exercises you can
do on your own to practice using
16467.95 -> functions.
16487.78 -> In this lesson we're going to learn
another type of value in Java script
16492.97 -> called objects and we're going
to use objects to create a
16497.5 -> score in our rock paper
scissors project. First,
16502.27 -> let's create a new file for
this lesson we'll go to our code
16506.83 -> editor and click this icon and then click
16511.81 -> this icon to create a new
file and we'll name this
16516.46 -> file,
16517.6 -> zero eight dash objects dot
16522.92 -> html and press enter. Next,
16527.41 -> we'll copy all the code in
functions dot html to objects
16532.36 -> dot html.
16534.37 -> So we'll type here and press
control A or command A to
16539.17 -> select the code and then right click copy
16544.69 -> and in here,
16547.24 -> right click and paste.
16551.17 -> Now let's hide the files for now
and we'll prepare this for this
16556.04 -> lesson so we can change this to objects
16561.59 -> and remove all the code
in the script element.
16567.68 -> Finally,
16568.61 -> let's save and open this
in live server by right
16573.38 -> clicking open with live server.
16578.87 -> And let's also open the console
on this page. So right click,
16584.75 -> click inspect and click the console.
16591.17 -> Let's close our previous tabs
16595.1 -> and also the previous code.
16600.08 -> And now we're ready to learn
objects. So what is an object?
16605.72 -> An object groups multiple values together.
16610.01 -> Let's do an example and
create our first object.
16614.45 -> We'll go to the script element
and we'll create a variable
16619.31 -> using const and we'll name this variable
16623.87 -> product and make it equal to open curly
16628.4 -> bracket,
16629.21 -> closed curly bracket and semicolon.
So this
16634.52 -> is an object inside this object.
16638 -> We can add some values.
16640.49 -> So we'll type enter and then name
16645.26 -> colon and then a value like the string
16649.67 -> socks. And at the end we'll type a comma
16656.27 -> and then price colon and another value
16661.61 -> like the number 1090.
16666.11 -> So inside our object we
just added two values.
16670.58 -> So at the bottom here,
16672.44 -> let's try console dot
logging this object console,
16677.96 -> dot log product
16682.91 -> and save and it will display both values
16687.89 -> into the console. So as you can see,
16692.36 -> an object lets us group
multiple values together.
16697.13 -> So for each of these values
we have some code on the left.
16701.54 -> This code is called the property.
16704.42 -> And using the property we can access
specific values in the object.
16710.12 -> For example,
16711.65 -> let's type and enter and console
16716.51 -> dot log.
16718.67 -> We're going to type the
object product and then a dot
16724.13 -> and then a property like name.
16729.53 -> So.name will access the
value that is associated
16734.34 -> with the name property,
which is the string socks.
16738.96 -> So if we save,
16741.51 -> it will display the string
socks in the console.
16745.98 -> Let's do another example and we'll
access this second value using the
16751.44 -> property price.
16753.36 -> So we'll type enter console dot
16757.92 -> log,
16759.48 -> the object product and then a dot and
16764.37 -> then a property price.
16768.78 -> So this will access the
value associated with price,
16773.7 -> which is 1090. If we save,
16778.92 -> that's what gets displayed in the console.
16782.67 -> Now we can also use the property
to change a value inside
16787.59 -> an object.
16789.09 -> To do that we're going to
type the object's name,
16793.44 -> product and then dot and a property like
16798.51 -> name and just make it
equal to something else
16803.64 -> like the string cotton socks.
16810.33 -> So this code will change the
value associated with the name
16815.25 -> property to cotton
socks. So at the bottom,
16820.02 -> if we type console dot,
16823.38 -> log the product again
16827.58 -> and save.
16830.04 -> You notice the value associated
with the name property was changed
16834.72 -> to cotton socks. So that's
how an object works.
16839.76 -> We group multiple values together
and then we can access or change
16844.74 -> these values using the
properties on the left.
16849.24 -> Now let's learn the syntax
rules for objects to create an
16853.83 -> object,
16854.67 -> we start with an open curly
bracket and end with a closed curly
16859.47 -> bracket inside the object.
16862.32 -> We can put multiple values for each value.
16867.06 -> The code on the left
is called the property.
16870.6 -> This is how we access the
value inside the object.
16875.13 -> We separate the property and
value with a colon and this is
16880.02 -> called a property value pair.
16883.56 -> We can have many property
value pairs in an object and we
16888.09 -> separate them with a comma
16891.54 -> to access a value inside the object.
We type the object's name
16896.91 -> and then dot,
16898.65 -> and then the property we
want to access like name.
16903.57 -> This will give us the value
associated with the name property.
16908.91 -> This syntax is called dot notation.
16912.91 -> If we access a property
that doesn't exist,
16916.12 -> the value will be undefined.
16919.18 -> To change a value in an object,
16921.82 -> we can use the dot notation again,
16924.76 -> so product.name and just
make it equal to something
16929.71 -> else.
16931.3 -> Now using the syntax we can
also add a value to an object.
16936.4 -> We can type a property that
doesn't exist. For example,
16941.53 -> here we can type
16943.57 -> product.new property
16949.87 -> and make this equal to something
like the bullion value true.
16956.47 -> If we console dot log the product again
16961.12 -> and save
16966.37 -> it will add this value to the
object along with the new property.
16972.64 -> We can also remove a value
from an object by typing
16977.56 -> delete,
16979.3 -> and then the object product dot
16984.16 -> and then the property we
want to delete like new
16989.02 -> property.
16991.66 -> If we console dot log the
16996.61 -> product again and save
17002.4 -> this code will delete new
property from the object.
17007.86 -> And lastly, notice that an object
is just another type of value.
17013.2 -> We can save an object inside
a variable and we can also
17017.94 -> console dot log objects if
we check the type of this
17022.77 -> value.
17024.03 -> So type of product and save
17030.51 -> And scroll up in the console,
17033.24 -> it will tell us that product is an object.
17037.83 -> So let's remove this and save.
17043.53 -> And now we'll learn why we use objects.
17047.37 -> So objects make our code more organized.
17051.18 -> Instead of creating a bunch of
variables for the products values like
17056.13 -> the name and the price and other details,
17060.09 -> we can just group all these
related values together into one
17064.65 -> object.
17066.27 -> Objects also allow us to use
multiple values together.
17071.1 -> Instead of console dot logging
each of these values individually,
17075.69 -> we can just console log the
whole object and display all the
17080.25 -> values at once.
So objects,
17083.88 -> let us group multiple values
together and let us use multiple
17088.59 -> values together. Next,
17092.32 -> let's do a practical example with objects.
17096.25 -> We're going to add a score to
our rock paper scissors game.
17100.78 -> So I've actually prepared a project
we can use for this lesson to see this
17105.64 -> project. We're going to go to our
website and then create a new tab.
17112.06 -> And then up here we're going to type super
17116.71 -> simple.dev/projects/objects
17124.93 -> and press enter.
17128.14 -> So this is our simplified rock
paper scissors game again except in
17133.03 -> this project when we play the game,
17136.6 -> it's also going to keep track of a score.
17139.36 -> So how many times we win lose and tie.
17144.34 -> And also if we click okay,
17147.94 -> we have a reset score button.
17150.97 -> So if we play the game a few times
17155.23 -> and add to our score
17158.8 -> and then click the reset score button,
17162.01 -> this will reset the score back to zero.
So if we play the game again,
17167.86 -> the score starts from zero again.
17171.61 -> So we're going to learn how to use
objects to create this feature.
17176.53 -> Let's press okay.
17179.35 -> And first let's create
a copy of our project.
17183.31 -> Just for this lesson we'll go
to our code editor and click
17188.23 -> this icon to show our files and
we'll make a copy of the rock
17193.15 -> paper Scissors project
from the previous lesson.
17196.75 -> So we'll right click and copy and
17201.64 -> down here right click and paste
17207.01 -> and we'll right click and rename.
17210.34 -> This file will,
17212.65 -> we'll remove the copy at the
end and at the front we'll
17217.43 -> change this to zero eight and press enter.
17223.27 -> Now let's hide these files and
we can close the zero seven
17228.19 -> file for now.
17230.29 -> And let's open this in live
server by right clicking
17235.21 -> and open with live server.
17239.35 -> Let's also open the console on this page.
17242.74 -> So right click inspect and the console.
17249.61 -> All right, now let's go into our
code and add a score to our game.
17255.46 -> So remember when writing JavaScript,
17258.28 -> a good strategy is to think
about what steps we need to do.
17263.14 -> This is called an algorithm
and then convert those into
17268.04 -> code.
17269.45 -> So we already had an algorithm
for the rock paper scissors game.
17274.19 -> Let's update this algorithm
to include the score.
17278.48 -> So first the computer
randomly selects a move.
17282.53 -> This step will stay the same. Number two,
17286.25 -> we're going to compare the
moves to get the result.
17289.49 -> This step will also be the same,
17292.55 -> but now we're going to add an extra
step. After getting the result,
17297.59 -> we're going to update a score
and finally we'll display the
17302.4 -> result and the score in a pop-up.
17306.29 -> Now let's convert these updated
steps or this algorithm into code.
17311.6 -> The first thing we need to
change is we added a third step.
17315.86 -> We're going to save and update a score.
17319.28 -> So first we need somewhere
to save our score.
17323.6 -> So one place we can save
it is inside a variable.
17328.22 -> Let's go to our script
element and at the top
17333.53 -> we're going to create a variable
for our score using cons
17339.59 -> score and make it equal to an object.
17345.53 -> And inside this object we're
going to have the property
17350.21 -> wins.
17352.25 -> So this will keep track of
how many wins that we have,
17356.24 -> what type colon and the
number zero because the
17360.95 -> score starts at zero and
then a comma and then
17365.96 -> another property losses.
17369.56 -> This will be how many losses
we have and then colon and
17374.3 -> zero and then another comma and ties
17379.58 -> colon and zero.
17382.67 -> So we use an object here because these
values are related to each other.
17388.1 -> You could use separate variables, but
we're using an object for convenience.
17393.72 -> Another thing you'll notice is that
we're creating this variable outside
17398.75 -> of a function and outside of a scope.
17402.89 -> And that's because every time we
make a move we need to update the
17407.6 -> score from last time.
17410.15 -> So in order to save the
score from last time,
17414.29 -> we need to keep it outside the function.
If the score was inside the function,
17419.78 -> the function would create a new score
every time, which is not what we want.
17425.54 -> So in this situation, in order
to save a score from last time,
17430.4 -> we're going to keep this variable outside.
17433.97 -> Now every time we play the game,
after we calculate the result,
17439.13 -> we're going to update the score.
17441.89 -> So let's scroll down to where
we calculate the result,
17445.86 -> which is here and then below
it we're going to type some new
17450.81 -> lines and type the code
for updating the score.
17456.06 -> So we can do that with an if statement.
17458.94 -> So we'll type if brackets
and curly brackets
17464.52 -> and inside the condition we're going
to check if the result is a win.
17469.8 -> If it is a win,
17471.66 -> we're going to update the wind's
property and increase it by one.
17476.79 -> So down here,
17479.67 -> if the result is equal to the
17484.59 -> string, you win.
17489.27 -> And make sure that this string
matches the string up here
17493.92 -> inside the curly brackets
we're going to update
17498.21 -> score dot wins and will make it equal
17503.29 -> to itself plus one.
17509.52 -> So this is how we increase the
wind's property in the score
17513.94 -> object by one.
17516.57 -> Now remember from the variables lesson
that we have a shortcut for increasing
17521.55 -> something by one and that shortcut is
17526.74 -> plus equals one. Next,
17532.05 -> let's add another branch to this if
statement for the other two results.
17537.69 -> So else if brackets and curly
17542.55 -> brackets.
17543.69 -> And in the second condition
we're going to check if result
17548.97 -> is equal to the string you
17553.77 -> lose.
17555.69 -> And make sure this string
matches the string up here.
17559.8 -> So if the result is you lose,
17563.07 -> we're going to update score dot losses
17568.03 -> property and increase it by one.
17570.96 -> So plus equals one.
17575.13 -> And finally we'll check
if the result is a tie
17579.84 -> else if brackets and curly brackets
17586.05 -> result equals to the string tie.
17593.19 -> And here we'll update score dot ties
17598.26 -> plus equals one.
17602.13 -> So we converted this step
in the algorithm to code.
17606.27 -> The score starts at zero and
every time we play the game
17611.37 -> after we calculate the result,
17613.47 -> we're going to update the
score using this code.
17618.54 -> Now let's convert the last step into code.
17622.17 -> We're going to display the result and
the score in the popup at the end.
17627.79 -> So let's actually go back to
the super simple.dev project
17633.19 -> and we'll see what the popup looks
like. We'll click one of these buttons
17638.95 -> and in this popup on the second
line we display the score.
17644.35 -> So in our code this is the
code that displays that
17648.94 -> popup. So how do we add a
second line to the popup?
17654.31 -> Remember that template strings
have another special feature called
17658.36 -> multi-line strings.
17660.61 -> So we can type at the end of this
template string and press enter
17666.64 -> to add another line to this string.
So here we can
17671.2 -> type winds, colon,
17675.28 -> and we're going to insert a
value using dollar open curly
17679.78 -> bracket, close curly bracket.
17682.48 -> And here we're going to insert
the number of wins that we have,
17687.37 -> which is score wins.
17690.52 -> So we'll type score wins.
17695.89 -> Next we're going to show the
number of losses that we have.
17700.87 -> So after this,
17702.34 -> let's type a comma and losses colon
17707.83 -> and insert another value here we'll insert
17712.66 -> score dot losses.
17716.47 -> And finally we'll type a
comma and we'll display
17721.36 -> ties colon and insert value
17725.98 -> score dot ties
17731.29 -> and this will display
our score in the popup.
17734.98 -> So let's save this and give it a try.
17738.16 -> We'll click okay and
then go back to our tab
17743.14 -> and play the game.
17746.05 -> So now on the second line
we will display the score.
17750.76 -> One small issue here is that we have
a lot of spaces on the second line,
17755.83 -> so these spaces correspond
to the spaces here. When
17760.72 -> we use multi-line strings,
17762.67 -> these extra spaces will
show up in the popup.
17766.6 -> So to remove these spaces we can
just remove them in the code like
17771.34 -> this. Now if we save press okay
17777.43 -> and play the game,
17779.89 -> it will show our score on the second
line without those extra spaces at the
17784.54 -> front. Let's press. Okay,
17788.68 -> we're going to add one more
feature to this project.
17792.01 -> If we go back to super simple.dev,
17795.76 -> we have a reset score button
which will reset the score back to
17800.32 -> zero. When we click it, let's
add this button in our project.
17805.49 -> So we'll scroll up and inside the HTML
17811.28 -> we'll add a button with a code less than
17815.69 -> button greater than,
17818.12 -> and inside the button have the text reset
17822.65 -> score. And now when we click this button,
17827.6 -> we'll run some code using
the on click attribute
17832.88 -> equals double quotes.
17835.61 -> And then in here we're going to
write some code to reset this score
17840.53 -> back to zero.
17842.84 -> So one way we can do it is
because this score is an object,
17847.43 -> we can use dot notation to
change everything back to zero.
17852.71 -> So we can type score dot wins
17857.63 -> and make it equal to zero.
We'll also type
17862.28 -> score dot losses and make it equal to
17867.32 -> zero.
17868.79 -> And finally score dot ties and make it
17873.41 -> equal to zero.
17876.65 -> Now let's save and go back to our tab
17881.99 -> and play the game a few
times to get a score.
17890.15 -> Let's press okay and press reset score
17895.01 -> and then play the game again.
17897.95 -> And you'll notice that the
score started from zero again.
17901.97 -> So that's how we create
the reset score button.
17905.84 -> We just set all of these
properties back to zero
17910.82 -> and that's it.
17911.99 -> That's how we add a score feature
to our rock paper scissors project
17916.58 -> using an object to save the score.
17921.26 -> Let's press okay
17923.84 -> and we're going to learn
more details about objects.
17928.07 -> Let's go back to objects
dot html and we'll open
17932.96 -> the tab for this file.
17936.02 -> And let's also comment out
the previous code using slash
17940.61 -> star and at the bottom star
17944.96 -> slash and save.
17949.1 -> Now let's scroll to the bottom
and we'll do some setup.
17954.11 -> So first let's create
a variable with cons or
17958.94 -> name it product two and make it equal
17963.56 -> to another object
Inside.
17966.95 -> This object will have
the property name colon
17972.38 -> and the string shirt and
we're going to console dot
17977.19 -> log this object,
17978.99 -> so console dot log
17983.37 -> product two and save.
17989.04 -> So the next detail we're going to
learn about objects is another way to
17993.63 -> access the values inside.
17996.78 -> We previously learned the dot
notation to do this. For example,
18002.18 -> console dot log product
18007.34 -> two.name.
18012.02 -> This will access the value
associated with the name
18016.55 -> property In JavaScript
we have another way of
18021.05 -> accessing values inside
objects which is using square
18025.61 -> brackets.
18027.08 -> So we'll create a new
line and type console
18031.91 -> dot log product two.
18037.07 -> And this time we'll type
square brackets and then
18041.6 -> inside the square brackets
will have a string with name.
18048.44 -> So this is called bracket
notation and this does the
18053.12 -> same thing as dot notation
up here it gets the value
18057.89 -> associated with the name
property. If we save
18063.95 -> these two lines of code,
both access the string shirt,
18068.42 -> which we see here.
So when do we use the bracket notation
18073.58 -> instead of the dot notation,
18076.4 -> bracket notation lets us use
properties that normally don't work
18081.44 -> with dot notation. For example,
18085.1 -> at the bottom we can type console dot
18089.9 -> log product two and then
18094.61 -> use a dot and try to
access a property called
18099.71 -> delivery dash time.
18104.45 -> If we save this property
will give us an error
18110.6 -> and that's because JavaScript thinks
that this dash is a minus sign and it's
18115.52 -> trying to do math.
18118.01 -> So in order to use a property like this,
18121.04 -> we have to use bracket notation.
18124.19 -> So we're going to replace
the dot with square brackets
18130.19 -> and turn this into a string.
18134.36 -> Now if we save
18137.45 -> it no longer gives us an error
and because delivery time does
18142.31 -> not exist in the object,
we get the value undefined.
18148.28 -> So using Bren notation,
18150.26 -> we can also add values to
the object when we create it.
18155.15 -> So here we can add a comma
and we'll add another
18160.64 -> property using bracket
notation and a string
18165.57 -> delivery dash time and a
18169.98 -> colon and then a value like the string one
18175.23 -> day if we save,
18179.19 -> this lets us add a delivery
dash time property to this
18184.2 -> object. So as you can see,
18187.38 -> bracket notation lets us use properties
that normally don't work with
18192.24 -> dot notation.
18194.61 -> Another feature of bracket notation
is that between the brackets
18199.5 -> we don't just have to use a
string, we can use a variable,
18204.18 -> a calculation or anything
that results in a value.
18209.4 -> So you might be wondering which
one should we use dot notation or
18214.23 -> bracket notation.
18216.42 -> We usually use dot notation by
default because it's shorter and
18221.37 -> easier to read.
18222.93 -> But if we need to use properties
that don't work with dot notation,
18227.31 -> then we use bracket notation.
18230.88 -> Now a shortcut here is when we
create the object. If we only
18235.71 -> have a string between the brackets,
18238.83 -> the brackets are actually
optional so we can just type this
18244.68 -> If we save the code will still work. Okay,
18250.26 -> the next detail we're going to learn
is that inside an object we can
18254.86 -> save any type of value.
18257.88 -> So this includes numbers, strings, bulls,
18262.65 -> as well as other objects
because remember objects
18266.91 -> themselves are also values. For example,
18271.35 -> we can type a comma and
add a property called
18275.94 -> rating colon and then an object
18281.19 -> open curly bracket, close curly bracket.
18284.82 -> And inside this inner object
we can add more properties
18290.19 -> like stars,
18292.65 -> colon 4.5,
18296.76 -> this is how many stars a
product has and then a comma
18302.61 -> and a property called count colon 87.
18308.34 -> This is how many ratings a product has.
18312.09 -> So this is called a
nested object or an object
18316.98 -> inside an object.
18319.56 -> We can use nested objects to
make our values more organized.
18324.3 -> So inside the product the number
of stars that it has and the
18329.19 -> number of ratings that it has
are both related to a rating,
18334.56 -> so makes sense to group them
together further inside the
18339.1 -> product.
18341.05 -> Now to access values
inside the inner object,
18345.1 -> we just use the dot notation or
bracket notation multiple times.
18350.92 -> For example,
18352.54 -> at the bottom we can type console
18357.1 -> dot log product two
18362.77 -> dot rating.
18365.74 -> This will get the value
associated with rating.
18370.45 -> And this is an object,
18373.12 -> so we can use the dot
notation again, count.
18378.64 -> So this will get the count
inside the rating object,
18383.5 -> which is this value right
here. So if we save,
18389.35 -> it will display 87. And finally,
18393.28 -> another type of value we can
put in an object is a function.
18398.44 -> So in this object let's
type comma and another
18403.6 -> property fun colon.
18407.47 -> And we're going to create a function
here. So let's type function
18413.59 -> and we'll name the function function one,
18418.39 -> brackets and curly brackets.
18421.21 -> And then inside the function we're
going to have some JavaScript code like
18425.71 -> usual. So console dot log,
18431.56 -> the string function inside
18436.42 -> object.
18439.63 -> This saves a function inside
the object and this works
18444.67 -> because a function is actually
just another type of value in
18449.59 -> JavaScript.
18451.12 -> But we'll learn more about this feature
of functions later in this course.
18456.52 -> For now just know that functions
are also values and we can
18461.35 -> save them in an object.
To access this function,
18465.94 -> we can use the dot or
bracket notation as usual.
18470.44 -> So at the bottom we can type the object,
18475.27 -> product two and then a dot
18480.4 -> and then the property fun.
18483.73 -> So this will access the
value associated with the fun
18488.66 -> property, which is a function.
18491.53 -> And because this is a function
we can call it as usual using
18497.29 -> brackets if we save,
18501.4 -> this will run the function
here and it will display
18506.78 -> function inside object into the console.
18512.44 -> So when we save functions
inside an object,
18515.87 -> this is called a method and we've
actually been using methods this whole
18520.7 -> time. Console dot log
is actually a method.
18526.34 -> Console is an object
provided by JavaScript and
18530.97 -> log is a function that is
saved inside the console
18535.67 -> object.
18537.59 -> If we go to the bottom and type console
18542.24 -> dot log type of
18546.77 -> console and save,
18552.14 -> this will confirm that
console is just an object.
18556.73 -> And if we change this to console dot log
18562.16 -> and save,
18564.59 -> this will show us that
console dot log is a function.
18569.33 -> So log is a function that
is saved inside the console
18574.28 -> object. So we call this a method.
18578.3 -> Another example of a
method is math dot random,
18582.89 -> which we used in the rock paper
Scissors Project Math is also
18587.87 -> an object provided by JavaScript
and random is a function
18592.91 -> saved inside the math object.
18596.45 -> So we call math dot random
a method as well. So
18601.41 -> we've actually been using objects and
methods all throughout this course
18606.74 -> and now we understand all the
code that we've been using so far.
18611.78 -> Next we're going to learn
about built-in objects.
18615.83 -> So the console object and the
math object are known as built-in
18620.81 -> objects because they are
built into the language,
18624.5 -> they are provided by the language.
18627.89 -> We're going to learn two more
built-in objects called Jason and
18632.84 -> local storage and we will
use these objects to improve
18637.64 -> our rock paper scissors project.
18640.7 -> Let's start with the Jason Builtin object.
18644.6 -> This object helps us work
with something called Jason.
18649.55 -> Jason stands for
JavaScript object notation.
18653.99 -> The easiest way to understand
Jason is it's basically a
18658.4 -> syntax. It's a similar syntax
to a JavaScript object,
18663.68 -> but it has less features. For example,
18667.85 -> the code on the left uses
JavaScript object syntax and the
18672.68 -> code on the right uses syntax.
So one
18677.36 -> difference is that all properties
and strings must use double quotes.
18682.4 -> In Jason, Jason does not
support single quotes.
18686.96 -> Another difference is that Jason
does not support functions.
18692.22 -> So as you can see Jason is
basically a syntax that's
18696.99 -> similar to a JavaScript object
syntax but with less features.
18702.84 -> So why would we use Jason Syntax
instead of a JavaScript object
18707.56 -> syntax?
18709.62 -> A JavaScript object only
makes sense in JavaScript.
18714.09 -> On the other hand,
18715.59 -> Jason Syntax can be understood by
almost every programming language.
18721.14 -> So Jason syntax is more universal.
18725.28 -> For this reason,
18726.57 -> we use Jason when we send data
between two computers that
18731.53 -> might use different programming languages,
18734.37 -> we'll learn how to do
this later in the course.
18737.82 -> We also use Jason when we store data.
18741.51 -> We'll learn how to store
data in this lesson.
18745.56 -> Now that we understand what Jason is,
18748.47 -> let's learn about the
built-in Jason object.
18752.7 -> The Jason object helps us
convert a JavaScript object to
18757.59 -> Jason. For example,
18760.29 -> let's convert our object
product two to Jason.
18765.24 -> So we'll create some new
lines and we'll type the Jason
18770.04 -> object dot stringy
18775.14 -> and open bracket close bracket.
18778.32 -> So stringy is a method
of the adjacent object,
18782.7 -> so it's a function that is
saved inside this object and we
18787.53 -> can call this function using
brackets. Between the brackets,
18792.63 -> we can give it a JavaScript
object we want to convert like
18797.46 -> product two.
18801.09 -> This will convert the object into Jason.
18804.93 -> So now let's console dot log the
18809.49 -> result
18813.54 -> And save.
18816.81 -> And in the console it will display
the product using Jason Syntax.
18822.27 -> If we scroll up,
18824.28 -> you notice that the function that we
saved in the object is not inside the
18828.96 -> Jasons and that's because Jason
does not support functions.
18834.9 -> So one thing to note about stringy
is that it actually results
18839.76 -> in a string. So at the front,
18843.21 -> if we type type of and save,
18849.3 -> it will tell us that the result
that it gives is actually a string.
18854.88 -> So if we remove this and save
18860.55 -> now this Jason string is ready
to be sent to another computer
18865.8 -> or to be saved in storage. Next,
18869.83 -> let's learn how to convert the
other way from a Jason back to a
18874.6 -> JavaScript object.
18876.67 -> To do that we'll use another
method in the built-in Jason object
18881.92 -> called Jason dot par.
18885.73 -> At the end we'll type
18888.13 -> jason.pars and
18892.96 -> brackets.
18894.88 -> And between the brackets we can put a
Jason string that we want to convert.
18900.31 -> So we actually have a
Jason string up here.
18903.82 -> So let's just make a copy
of this, we'll select it,
18908.41 -> write click copy,
18911.95 -> and let's create an extra
variable to make it more clear.
18916.87 -> Const jason string and make it
18921.56 -> equal to right click and paste.
18929.17 -> And now let's convert this Jason
string back into an object by
18933.86 -> putting it into pars.
18938.23 -> And finally we'll console
dot log this result.
18942.43 -> So console dot log
18949.57 -> and save
18952.48 -> and jason.pars will turn
the Jason string back
18957.01 -> into a JavaScript object.
18959.83 -> So that's the built-in Jason object.
18963.25 -> It helps us convert back and
forth between a JavaScript object
18967.88 -> and Jason.
18970.93 -> Now we're going to learn the next
built-in object called local storage.
18976.48 -> Local storage is used to
save values more permanently.
18981.55 -> So far we've been saving
our values in variables.
18985.94 -> However, variables are temporary.
18989.62 -> The only exist on the current page.
18992.71 -> If we refresh the page or close the page,
18996.13 -> all the variables are
deleted. For example,
19000.42 -> if we go back to our rock paper
scissors project and open the
19005.4 -> tab for this project
and we play a few games
19011.88 -> and play it again. So we have two games.
19017.13 -> If we refresh the page
19020.55 -> notice the score starts from zero again.
19024.42 -> And that's because when
we refresh the page,
19027.15 -> all of these variables are deleted
and the score gets reset back to
19031.83 -> zero. However,
19034.11 -> if we press okay and
go to super simple.dev
19039.33 -> and we refresh the page
and we play the game,
19044.58 -> Notice that the score doesn't start from,
19047.95 -> it starts from the previous score
even though we refreshed the page.
19053.5 -> And that's because this project
saves the score in local storage
19058.63 -> and local storage doesn't get
deleted when we refresh the page.
19064 -> Now let's learn how to use
local storage in our project.
19069.28 -> Let's press okay and we'll
go back to our code and we'll
19074.08 -> scroll down to where we update the score.
19079.09 -> So here after we update the score,
19082.54 -> we're going to save it in local storage.
19085.84 -> But first let's learn
how local storage works.
19090.04 -> So at the bottom here we're
going to type the local
19094.63 -> capital S storage object
19099.55 -> to save a value inside local storage.
19102.79 -> It has a method called set item.
19106.54 -> So we can type tot set capital i
19111.4 -> item and brackets because this is a method
19116.59 -> or a function saved inside the object.
19120.91 -> And we're going to give two
strings to this method. The first
19125.74 -> string is a name.
19127.99 -> This is how we're going to access
the value that we save later.
19132.67 -> So let's use the string
message as the name
19138.61 -> and we'll type a comma and then
we'll type the value that we want
19143.53 -> to save into local storage.
19146.5 -> So local storage only supports strings.
19149.95 -> So let's save the string.
19152.44 -> Hello inside local storage.
19157.12 -> If we save and then go back to our tab
19162.07 -> and play the game.
19164.68 -> It will run all this code and save
the string into local storage.
19170.08 -> Now let's learn how to get this
string out of local storage.
19174.52 -> We'll press okay and
we'll scroll to the top.
19180.49 -> And when we first load the page,
19183.13 -> we're going to get that value
out of local storage by typing
19187.59 -> local capital S storage.
19192.91 -> Get item this time and brackets.
19199.06 -> So the get item method gets
a value out of local storage
19204.19 -> and we're going to give it one string.
19207.01 -> So this string is the name that we
used earlier, which was message.
19212.29 -> So a type the string message.
19216.52 -> Now let's console dot log this result.
19220.33 -> So console dot log
19226.34 -> and a bracket at the end and save
19232.19 -> it will get the value that we
saved earlier out of local storage.
19237.05 -> So we saved the string. Hello.
19239.66 -> And that's exactly what gets
displayed in the console.
19244.43 -> So using local storage,
19246.38 -> we were able to get the value that
we saved earlier even though we
19250.65 -> refreshed the page.
19253.55 -> Now let's save our score into
local storage so it doesn't get
19258.17 -> reset when we refresh the page.
So let's scroll to the bottom
19265.97 -> and instead of using the name message,
19268.58 -> we're going to use the name
score to save our score
19273.68 -> and instead of the string, hello,
19276.86 -> we're going to save the score object.
19280.97 -> Now one problem here is that local
storage only supports strings.
19286.22 -> So we need to convert
our object into a string.
19290.51 -> And we actually learned how to
do this earlier using Jason dot
19294.99 -> stringy.
19296.39 -> So at the front we can type jason dot
19301.35 -> stringy
19303.77 -> and then brackets around the score.
19307.94 -> And this will convert the
JavaScript object score into
19313.06 -> adjacent string and then it's
ready to be saved in local storage.
19318.23 -> So if we save this and then play the game,
19324.2 -> it will run this code and save
our score into local storage.
19329.87 -> Now let's press okay, and
then scroll up to the top.
19337.13 -> And now instead of getting the message,
19339.86 -> we're going to get the score out
of local storage. If we save.
19346.19 -> Now when we load the page,
19348.32 -> we're able to get the score that
we saved from last time as a Jason
19353 -> string.
19355.19 -> The last step is instead of resetting
the score to zero every time
19360.32 -> we're just going to use the score
from local storage. Before we do that,
19365.63 -> remember that this is just a string,
19369.02 -> so we need to convert
this back to an object.
19373.79 -> We also learned how to do
this earlier using jason.pars.
19379.58 -> So at the front
19382.22 -> we can type jason.pars and
19387.11 -> then open bracket.
19388.73 -> And at the end a closed
bracket and it will convert
19393.65 -> this back to an object.
19396.2 -> If we save It will convert
the score from a Jason string
19401.54 -> back to an object. So now
we can use it up here.
19406.62 -> So instead of doing this,
19408.99 -> we'll remove it and
replace it with this code.
19413.46 -> So right click cut and then here,
19419.28 -> right click and paste
19423.63 -> and we'll remove console dot log
19429 -> and save. So now when we load the page,
19434.28 -> it will load the score from local
storage. If we play the game,
19440.37 -> notice that the score
doesn't start from zero,
19443.82 -> it starts from the score
that we had last time.
19447.72 -> Let's review what we
did step by step first
19452.82 -> when we update our score in this code,
19457.11 -> after we update the score,
19459 -> we're going to save it in local
storage using local storage dot
19463.83 -> set item. Now local storage
only supports strings,
19469.17 -> so we have to convert our score
object into a Jason string
19474.36 -> using Jason stringy.
19477.81 -> And then after we've saved
this into local storage,
19482.07 -> when we load the page up here,
19486.21 -> we're going to load the score that
we just saved from local storage
19490.77 -> using local storage dot get item.
And the
19495.3 -> score was saved as a jason string.
19498.36 -> So we need to convert it
back into an object using
19502.12 -> jason.pars.
19505.32 -> So that's how we use the adjacent
object and the local storage object
19510.27 -> to save our score more
permanently. Let's press. Okay,
19517.02 -> and the last feature we're going to
add is when we click the reset score
19521.82 -> button, we also need to remove
the score from local storage.
19526.92 -> Otherwise if we press reset,
19528.93 -> score and refresh and then play the game,
19534.63 -> it will just grab the old
score from local storage.
19538.41 -> So reset score doesn't really work here.
19541.86 -> Let's press okay and fix this issue.
19546.3 -> So here in the reset score
button at the end we're going
19551.22 -> to remove the score from local storage.
19555 -> So we'll type local storage and
19559.9 -> then a method called dot remove
19564.51 -> item and brackets.
19568.53 -> And between the brackets we're going to
tell local storage which value we want
19573.24 -> to remove.
So we're going to remove the score.
19577.29 -> So we'll type the string score if we
19581.8 -> save and we click the reset button
19586.81 -> and then we refresh the page
and try to play the game again.
19592.72 -> Unfortunately it now gives us an
error. So what is happening here?
19598.12 -> So remember that we remove
the score from local storage.
19602.23 -> So now when we load the page,
this actually doesn't exist.
19607.84 -> When something doesn't
exist in local storage,
19610.72 -> it's going to give us a value called null.
19614.89 -> And at the bottom,
19617.5 -> if we try to access any property on nu,
19621.49 -> it will give us an error.
So that's what we see here.
19625.75 -> So how do we solve this
problem if we scroll up?
19631.45 -> One way to solve this problem is
that if there is no score in local
19636.4 -> storage, we're going to
give it a default value.
19640.63 -> Let's look at how we can do that.
19643.57 -> So after this line we're going
to check if the score is null.
19648.4 -> We can do that using an if statement,
19651.67 -> if brackets and curly brackets.
19656.23 -> And we'll check if score is equal to
19661.72 -> null. And if it is equal to null,
19666.04 -> we're going to give this a default
score. So inside the curly brackets,
19672.19 -> we'll just make the score
equal to the default
19677.23 -> object we had earlier,
19679.81 -> which was winds zero and then
19684.52 -> losses zero and ties
19690.25 -> zero. And remember, if we
need to reassign a variable,
19695.44 -> we have to change it from cons to let.
19699.88 -> If we save,
19702.37 -> the score will be null because
we removed it earlier and now
19707.05 -> this will give it a default score.
So everything should work as
19711.85 -> before. If we play the game,
19715.75 -> you'll notice that the score starts
from zero or this default score and
19720.68 -> everything is working again.
19723.13 -> So that's how we create the score feature
in the rock paper scissors project
19727.96 -> as well as the reset score feature.
19731.86 -> Next we're going to use some
shortcuts to simplify our code.
19737.26 -> So these shortcuts are things that
we learned in the bulls lesson.
19742.57 -> So remember that null is a falsey value.
19747.19 -> That means it will behave just like false.
19750.73 -> So a shortcut we can use here is
instead of checking if the score
19755.65 -> is equal to null,
19757.84 -> we can also remove this and check if
19763.58 -> not score.
19766.1 -> So not score does the same
thing as checking if it's null.
19771.86 -> If the score is null,
19773.96 -> not score will flip it into true.
19777.5 -> So both of these will return true.
19780.98 -> If the score exists, it's an object,
19784.22 -> then both of these will return false.
19787.91 -> So instead of checking if
a value is equal to null,
19792.44 -> we can just use the knot
operator as a shortcut.
19797.48 -> Now also from the bullying's lesson,
19799.97 -> we have an even shorter
shortcut for doing this.
19804.41 -> So notice here that this
code basically sets a default
19808.76 -> value if the score doesn't exist.
19812.87 -> In the bulls lesson we learned
a technique called the default
19817.34 -> operator, which is
exactly what we need here.
19821.9 -> So on this line we can
remove the semicolon
19826.91 -> and type
19830.72 -> And then a default value.
19833.78 -> So we want our default
value to be this object.
19837.83 -> So let's select it and then right click
19842.48 -> copy. And then here,
19846.77 -> right click and paste
19851.48 -> and I'll select these lines
and press shift tab to
19856.44 -> remove and indent. And I'll add
a semicolon back at the end.
19863.24 -> So the way that the default operator
works is that if the left side is
19868.13 -> truthy, so in this case we have a score,
19872 -> it will use the left side.
19874.79 -> If the left side is falsey or
in this case the score is null,
19879.59 -> then we will use the right
side as a default value.
19884.39 -> So this does the same
thing as this code below,
19888.8 -> but it's just a shortcut.
19891.41 -> So now let's comment out
this code using slash
19895.97 -> star and at the bottom star slash.
19901.13 -> So we'll leave it here just
for reference and then save.
19907.34 -> And if we click reset
score again and refresh
19913.31 -> and play the game, it will still work.
19918.14 -> So this is a perfect situation
to use the default operator to
19922.88 -> simplify our code. So let's press Okay,
19928.82 -> And that's all we're going to do
for this project in this lesson.
19933.98 -> Now let's move on and learn
more details about objects.
19939 -> The first thing we'll
learn is the value null.
19942.72 -> So NU is one of the falsey
values in JavaScript.
19946.95 -> It's similar to the value undefined,
19950.01 -> they both represent that
something doesn't have a value.
19954.57 -> So what's the difference
between null and undefined?
19958.89 -> We use null when we intentionally
want something to be empty.
19964.05 -> For example,
19965.34 -> in the previous lesson we learned
that if a function has parameters,
19970.5 -> we can give the parameter a default value.
19974.43 -> If the parameter is undefined,
it will use the default value.
19979.62 -> However, if we set this parameter to null,
19983.28 -> it will not use the default
value and it will just use null.
19988.65 -> So null means we intentionally
want something to be empty.
19994.68 -> In most cases though, null and
undefined work the same way.
20000.08 -> Okay,
20000.95 -> so the next detail about objects we're
going to learn is called auto boxing.
20006.68 -> Let's go back to objects
dot html and open the
20011.66 -> tab for this file.
20014.36 -> And let's also comment out the previous
code so our console doesn't get too
20018.9 -> messy. So slash star and at the bottom,
20024.71 -> star slash and save.
20029.21 -> So let's scroll down.
20032.42 -> We learned in this lesson that
objects can have properties and
20036.68 -> methods,
20038.12 -> so you might be surprised to
learn that other values also have
20042.56 -> properties and methods. For example,
20046.07 -> at the bottom we're going to type console
20050.84 -> dot log, the string, hello,
20056.84 -> and then the dot notation
and a property called length.
20064.34 -> So strings can also have properties.
20067.85 -> The length property tells us how
many characters or letters are in
20072.69 -> this string. So hello has five letters.
20077.18 -> So if we save the length
property will be five.
20083.33 -> Here's another example,
20085.58 -> what type console dot log,
20089.96 -> the string, hello,
20092.57 -> and then the dot notation
and a method this time
20097.07 -> two, capital U, upper capital C,
20102.08 -> case and brackets.
20106.16 -> So this string also has a
method called two upper case.
20112.19 -> And this method gives us a copy
of the string with all letters
20116.97 -> capitalized or in upper case if we save,
20122.28 -> it will give us hello in capital letters.
So as you
20127.27 -> can see,
20128.22 -> simple values like strings
can also have properties and
20132.69 -> methods. So now you might be wondering,
20136.35 -> these are strings, not objects.
20139.44 -> How can strings have
properties and methods?
20143.73 -> The answer is that JavaScript has a
special feature called auto boxing.
20149.55 -> JavaScript automatically wraps
this string in a special object
20154.38 -> first,
20155.61 -> and this object has the property
length and the method to
20160.17 -> uppercase. So this is done automatically.
20163.71 -> We don't see the special object
that's wrapped around this string.
20168.93 -> So this feature is called
auto boxing because JavaScript
20173.7 -> automatically wraps the string
in an object like a box.
20179.85 -> So auto boxing also works with
other types of values like numbers
20184.77 -> and bulls.
20186.54 -> The only thing is that auto
boxing does not work with null and
20191.37 -> undefined. It will just give us an error.
20196.29 -> The last detail we're going to learn
about objects is a really important detail
20201.72 -> and that is objects are references.
To demonstrate
20206.97 -> let's create a new
variable with an object.
20211.08 -> So const object one and make it
20216 -> equal to an object inside this object.
20221.31 -> Let's have a property message,
20225.12 -> colon and the string. Hello.
20230.1 -> So you might think that when
we create an object like this,
20234.54 -> we create a value that has other
values inside and we save the whole
20239.16 -> thing in a variable. However,
20242.52 -> this actually works a little
differently. When we create this object,
20248.04 -> the actual value is created
somewhere in the computer's memory,
20253.41 -> and this variable actually just
gets a reference that points to that
20258.06 -> location. In the computer's memory,
20261.09 -> this is like a shortcut on your computer,
20264.33 -> a shortcut points to where
the actual file or folder is.
20269.43 -> So there's no way to
actually see this reference,
20272.67 -> but just know that this is a reference
and the object is somewhere else in the
20278.03 -> computer's memory.
20279.9 -> So the reason it works this way is
to make the language more efficient.
20284.76 -> For example,
20286.23 -> below this line we can
create a variable cons
20291.66 -> and call it object two and make it equal
20296.65 -> to object one.
20300.43 -> So this code doesn't actually
make a copy of the object,
20305.65 -> it just makes a copy of the
reference that points to the object.
20311.05 -> So this makes a language more efficient
because if we had a really big
20315.82 -> object here,
20317.38 -> it's not good to copy the entire
object over and over again.
20322.27 -> Instead, JavaScript just copies
the reference which is much faster.
20327.76 -> This is called copy by reference.
20332.2 -> Now that we learned that
objects are actually references,
20336.19 -> let's learn some interesting
behaviors of references.
20340.81 -> So at the bottom here,
20343.21 -> we're going to change the
property message in this object.
20348.46 -> We can do that by typing
the object object one
20353.8 -> dot message property and make it equal to
20358.57 -> something else like the string. Good job.
20365.5 -> And now if we console dot log object one
20373.42 -> and save.
20376 -> Notice that we were able to change
the message property even though we
20380.54 -> created object one with cons.
20384.19 -> And that's because this variable just
contains a reference that points to
20389.08 -> the object.
20390.64 -> So const prevents us from changing
the reference in the variable,
20395.74 -> but it doesn't prevent us from reaching
into the reference and changing the
20400.13 -> object that it's pointing to.
20402.73 -> So just be careful when you're working
with objects. Even though we use cons,
20408.22 -> we can still change the
values inside the object.
20412.69 -> Another interesting behavior
is that on this line we're not
20417.77 -> actually copying the
object into this variable,
20421.27 -> we're copying the reference.
20423.85 -> So object two actually has the
same reference as object one.
20428.83 -> They actually point to the same
object in the computer's memory.
20434.35 -> So at the bottom,
20435.91 -> if we type console dot log
20441.01 -> object two and save,
20446.14 -> you'll notice that for object two,
20448.72 -> the message property was also
changed even though we only changed
20453.52 -> object one.
20455.47 -> The last interesting behavior is that
we can't compare objects directly.
20461.05 -> For example,
20462.58 -> let's go to the bottom and
we'll create a new object
20467.59 -> using Constant Object three
20473.03 -> and we'll make it equal to an object.
20476.66 -> And then inside we're going to
have the same values as object one.
20481.88 -> So we'll have the property message
20486.74 -> And the value is the string. Good job.
20494.3 -> So now let's try comparing
object three to object one.
20499.91 -> So here we'll type console dot
20504.38 -> log and check if object
20509 -> three is equal to object one.
20515.15 -> If we save,
20517.55 -> it will tell us that these two
objects are not equal to each other
20522.5 -> even though they have
these same values inside.
20526.43 -> And that's because remember
objects are references.
20530.63 -> So Object three also contains a reference,
20534.92 -> and this code compares the references
and not the values inside the
20539.85 -> object.
20541.22 -> So because object three is a
different reference than Object one,
20546.14 -> that's why this code results in false.
20550.58 -> If we did console dot log
20556.1 -> and we check if object two is equal
20561.14 -> to object one,
20564.56 -> object two has the same
reference as object one,
20568.76 -> it points to the same object
in the computer's memory.
20573.05 -> So if we save,
20575.69 -> this will tell us that these two
variables have the same reference.
20581 -> So just remember that when
you're comparing two variables
that contain objects,
20586.07 -> you're actually comparing the
references, not the values inside.
20591.65 -> If we want to compare the values inside,
20594.47 -> we would do that manually by checking
the message property against this
20599.42 -> message property.
So don't worry object references are a
20604.19 -> little confusing at first,
but the more you work with it,
20607.55 -> the more you just get used to it.
20610.97 -> The last thing we're going to learn
in this lesson are some shortcuts for
20615.26 -> objects.
20616.88 -> So first let's make a
copy of object three.
20621.23 -> We'll select the code and right click
20625.7 -> copy. And then at the bottom
20631.22 -> we'll scroll down and
right click and paste.
20637.28 -> And let's rename this variable to object
20641.84 -> four.
20643.91 -> So now let's say that we want to
get the message property out of this
20648.78 -> object.
20650.37 -> We can do that by typing Object four
20656.16 -> message.
20658.59 -> And now let's also say that we want
to save this in a variable also
20663.21 -> called message.
20665.1 -> So at the front we'll type const
20669.6 -> message and make it equal to this value.
20676.83 -> So now if the variable name and
the property name are the same,
20681.75 -> we actually have a shortcut
for this. To use a shortcut,
20686.73 -> we're going to type
constant and curly brackets
20691.98 -> message and make it equal to
20696.36 -> object four.
20699.42 -> So this shortcut is called destructuring.
20703.14 -> This will take the message property
out of object four and save
20708.09 -> it in a variable called message.
20711.21 -> So this line of code does the
same thing as the code above.
20716.31 -> So let's comment out this line
using double slash and we'll just
20721.26 -> keep it for reference.
So at the bottom,
20725.43 -> if we type console dot log
20730.62 -> message and save,
20735.72 -> it will display good job.
20738.45 -> So the Destructuring shortcut took
the property out of the object
20743.31 -> and saved it in this message variable.
20747.3 -> Next we can use this destructuring
shortcut for multiple
20751.63 -> properties. For example,
20754.47 -> let's add another property
to this object using comma
20759.75 -> and we'll add a price property colon
20764.67 -> 7 99.
20767.37 -> And now we can take the price
property out of this object by
20772.21 -> typing after message a comma and
20776.94 -> price.
20778.98 -> So this will take the price property
out of the object and save it
20783.87 -> in a variable called price.
20787.38 -> If we console dot log the
20792.36 -> price
20794.58 -> and save it will display 7 99.
20800.73 -> So that's the destructuring shortcut.
20803.4 -> It's an easier way to take
properties out of an object.
20808.41 -> The next shortcut we're going to learn
is called the shorthand property.
20813.6 -> So at the bottom let's
create some new lines.
20817.59 -> And let's say we want
to create a new object.
20821.19 -> So we'll type cons and let's name this
20825.75 -> object five and we'll make it equal to an
20830.5 -> object. And inside this object,
20834.67 -> let's say we want to
create a message property.
20838.3 -> So we'll type message colon and for the
20843.22 -> value, let's type the variable message.
20849.34 -> So what this does is that it takes
whatever is inside the message variable
20854.56 -> and substitutes it into
this code. So at the bottom,
20859.54 -> if we console dot log
20864.07 -> object five and save
20869.02 -> this object will have a property
called message and the value
20873.94 -> is whatever is inside
the message variable,
20877.51 -> which is good job.
20880.3 -> So now we actually have
a shortcut for this code.
20884.41 -> If the property and the
variable name are the same,
20888.16 -> we can actually just type
it out once like message.
20893.86 -> So this code does the same
thing as message, colon message,
20899.41 -> and this shortcut is called
the shorthand property.
20903.73 -> So if we comment out this
line using double slash
20908.68 -> and save,
20911.2 -> you can see that this shortcut
creates the same object that we had
20915.97 -> before.
20917.92 -> The last shortcut we're going to
learn is called the shorthand method.
20922.96 -> So at the end let's create a new property
20928.81 -> and let's name it method colon and we'll
20933.79 -> save a function in this property.
20936.91 -> So we'll type function,
20940.33 -> and let's name it function one brackets
20945.28 -> and curly brackets.
20948.04 -> And inside this function let's console dot
20953.11 -> log method.
20958.87 -> And now here at the bottom,
20962.98 -> let's run this function
by typing object five
20967.99 -> dot method.
20970.24 -> So this will access this function
and we'll run it by typing
20975.13 -> brackets.
If we save,
20979.24 -> this will run the code in the
function and display method in the
20983.86 -> console. So we actually have
a shortcut for writing this.
20989.74 -> So at the bottom we can
type method again and
20994.72 -> just type brackets and curly brackets,
20998.83 -> console dot log string method.
21006.1 -> So this code does the same
thing as the code above.
21010.39 -> So these brackets will create
a function just like here.
21014.98 -> So this function name
is actually not needed.
21018.94 -> So if we comment out lines of code
21025.45 -> and save,
21028.27 -> it will still display method in
the console because this is a
21032.92 -> shortcut for these lines of code.
21036.01 -> So this shortcut is called
the shorthand method syntax,
21041.59 -> and that's the end of this lesson.
21044.05 -> In this lesson we learned another
type of value called objects,
21049.21 -> objects, group related values.
21051.98 -> Together we added a score to
our rock paper scissors game.
21057.4 -> We learned about built-in objects
and used the Jason and local
21062.05 -> storage objects to save
our score more permanently.
21066.43 -> We learned more details about
objects like null auto boxing
21071.2 -> and references,
21073.24 -> and we learned some useful
shortcuts like destructuring
21077.74 -> shorthand properties
and shorthand methods.
21081.49 -> Here are some exercises to help
you practice working with objects.
21106.91 -> In this lesson we're going to learn
one of the most important features of
21111.4 -> JavaScript called the
document object model or the
21116.26 -> dom.
21117.43 -> And we're going to use the DOM to
improve our rock paper scissors project.
21123.19 -> So first we'll create a
new file for this lesson.
21127.81 -> Let's go to our code editor
and click this icon to
21132.73 -> show our files and then
click this icon to create a
21137.68 -> new file. And we'll name this file,
21141.76 -> zero nine dash dom dot
21147.17 -> html and press enter. Next,
21151.99 -> let's copy objects dot html into dom dot
21157.13 -> html.
21158.35 -> So we'll click here to open
the file and then click inside
21163.6 -> and then type control A or
command A to select the code.
21169.12 -> And then right click copy.
21173.89 -> And in here,
21176.74 -> right click and paste.
21181.51 -> Now let's hide these and we'll
prepare this file for this
21186.38 -> lesson. So let's scroll to the top
21191.33 -> and we'll change the
title to Dom and let's
21196.28 -> delete all the JavaScript
code from the previous lesson.
21203.39 -> Now let's save this file and
we'll open it in the browser
21208.4 -> by right clicking open with live server.
21214.85 -> And let's also open the
console on this page,
21218.84 -> we'll right click,
21220.88 -> click inspect
And then click the console.
21226.94 -> And now we can close the previous tabs
21231.86 -> as well as the previous code. For now
21237.08 -> and for this lesson we're going
to do an extra step in the setup
21241.97 -> inside the body we're
going to create a button.
21247.01 -> So here,
21248.42 -> let's type the code
less than button greater
21253.19 -> than, and inside the button
we'll have the text. Hello.
21259.4 -> Now let's save
21262.1 -> and we should have a button on the page.
21265.55 -> And now we're ready to learn
the document object model or the
21270.29 -> dom.
21271.55 -> In the previous lesson we
learned about objects which group
21276.64 -> multiple values together. We also
learned about built-in objects,
21281.64 -> which are objects that are
provided by JavaScript.
21285.92 -> Some examples of builtin
objects are console
21290.45 -> math, Jason and local storage.
21296.03 -> The dom is another
builtin object called the
21300.92 -> document object.
21303.29 -> So let's go to our script
element and we're going to type
21307.79 -> document.
21309.62 -> So this is a built in object
provided by JavaScript and
21314.54 -> we've actually seen this document
object before. In the first lesson,
21319.88 -> one of the first pieces of code
that we learned was document
21325.28 -> dot body dot inner
21330.44 -> capital H T M L equals the
21335.03 -> string. Hello and semicolon.
21339.68 -> So this code removes everything
on the page and replaces it
21344.72 -> with a text. Hello.
21347.18 -> If we save,
It will remove the button and just
21351.9 -> put hello.
And now that we learned objects in the
21356.8 -> previous lesson, we can
fully understand this syntax
21362.32 -> document. Here is a built-in
object and this is the dot
21367.2 -> notation.
21368.7 -> This means we're accessing a
property of the document object
21373.26 -> called body. Now body is also an object,
21378.6 -> so we can use the dot notation
again to access a property of
21383.43 -> the body object called inner html.
21388.05 -> And finally we use an equal
sign to change the inner
21392.67 -> HTML property to the string. Hello.
21397.02 -> But as you can see,
21398.76 -> there's something very special
about the inner HTML property.
21403.77 -> When we change this property,
it also changes the webpage.
21409.35 -> So this document object and the
webpage are linked together.
21415.17 -> Let's do another example.
21417.63 -> We'll go to the end here and
press enter and we'll type the
21422.49 -> document object again and we'll
use the dot notation again.
21428.04 -> And this time let's
access the property title
21432.99 -> and we'll change the title
property using an equal sign
21438.06 -> and we'll change it to the string.
Good job
21444.66 -> if we save
21447.18 -> changing the title property
will also change the title at
21452.2 -> the top of the tabs here.
So now this says good job.
21457.41 -> Again, as you can see,
21459.87 -> the document object is
linked to the webpage.
21464.37 -> So from these examples it shows
us that the document object
21468.75 -> represents or models the webpage.
21472.68 -> And that's why we call this
feature the document object model
21477.87 -> or the dom.
21480.93 -> Now that we know what the dom means,
21483.84 -> let's learn the syntax rules for the dom.
21487.83 -> So the dom is just this
built in document object
21492.69 -> and this object works the
same way as any other object.
21497.43 -> It contains properties
like body and title that we
21502.32 -> can access using the dot notation.
21506.19 -> Now the special thing about the
document object is that it is linked to
21511.11 -> the webpage.
21512.82 -> That means if we change certain
properties in this object,
21517.05 -> it will also change the webpage.
Now in addition
21521.82 -> to properties,
21523.56 -> the document object also has
methods we can use and we'll learn
21528.4 -> about them later in this lesson.
21532.2 -> Now that we understand the
syntax of the document object,
21536.67 -> let's learn about the properties
and methods we can use. First,
21541.96 -> let's comment out this
previous code using slash
21546.43 -> star,
21548.26 -> star slash and we'll create
some new lines at the top.
21554.86 -> So the first property we're going
to learn is called document dot
21559.36 -> title.
21561.1 -> So this property will give us the
title at the top of the tabs here.
21567.04 -> So if we console dot log
this property console
21572.26 -> dot log
21576.7 -> and save,
21579.16 -> this will give us the text at the top,
21582.04 -> which is Dom and that's what
gets displayed in the console.
21587.44 -> If we change the document
dot title property,
21590.8 -> it will change the text
at the top of the tab.
21594.91 -> So here if we type document
21599.5 -> dot title and make it equal to the string
21604.9 -> changed
21607.75 -> and save.
Now the title at the top of the
21612.58 -> tab will be changed.
21615.91 -> So as you can see the title
property is linked to the title
21620.95 -> at the top of the tab we can
use it to get the title and we
21625.93 -> can also use it to change the title.
21629.98 -> Next we're going to learn another
property called document dot
21634.87 -> body.
21636.43 -> So let's go into our code and let's type
21640.9 -> document dot Body.
21645.4 -> Now document dot body is
a very special property,
21650.08 -> so this will literally get this body html
21654.92 -> element and put it inside our JavaScript.
21660.16 -> So let's actually console dot
log this to see how it works,
21664.94 -> console dot log, open bracket,
21670.87 -> and then close bracket and save.
21675.88 -> And inside the console it will
tell us that document dot body
21680.65 -> is the body html element.
21684.22 -> And if I hover over this,
21686.26 -> it will tell us that it is
exactly the body on our page.
21690.97 -> If I expand this,
21692.92 -> you can see that this code is
exactly the code that we have here.
21699.07 -> And this shows us one of the most
important features of JavaScript.
21703.96 -> We can have H T M L
elements inside JavaScript.
21709.09 -> The document object or the
dom combines JavaScript and H
21714.02 -> T M L together and it gives
JavaScript control of the
21718.94 -> webpage.
21721.91 -> So now that we have an HTML
element inside our JavaScript,
21726.62 -> what can we do with it?
21728.69 -> A really important thing to know
is that when an HTML element
21733.37 -> is inside our JavaScript like this,
21736.28 -> the HTML element is converted
into a JavaScript object.
21742.25 -> So for example,
21744.08 -> if we do console dot log
21749.63 -> type of document dot
21754.51 -> body A and save
21759.8 -> it will tell us that the body
H T M L element is just an
21764.78 -> object when it's inside JavaScript.
21768.71 -> So just like any other object,
21771.29 -> this has properties
and methods we can use.
21775.97 -> So one useful property of
the body element is inner H T
21780.8 -> M L, which we saw earlier.
21783.86 -> So down here let's type document
21789.95 -> dot body dot inner
21794.98 -> capital H T M L.
21799.01 -> So the inner HTML
property controls all the
21803.96 -> HTML inside the body,
21806.9 -> that's why it's called inner html.
21810.83 -> So if we access this property,
21813.41 -> it will give us all the
H T M L inside the body.
21818.36 -> So let's console dot
log to confirm console
21823.13 -> dot log
21827.39 -> and save
21830.15 -> and inner HTML will
give us all of this HTML
21835.22 -> inside the body element.
21838.34 -> And if we change the inner HTML property,
21841.7 -> it will change the HTML
inside the body element.
21847.16 -> So let's create a new line and we'll type
21851.36 -> document dot body dot
21856.69 -> inner capital T M L,
21861.23 -> and we'll change it to the string changed.
21867.68 -> So this will replace all of
the H T M L inside the body
21872.81 -> with a text changed if we save,
21876.32 -> that's exactly what it
does and we can actually
21881.18 -> confirm this by going
into the elements tab.
21885.23 -> So this tab is for HTML and css.
21889.49 -> We can find the body element, expand it,
21893.93 -> and you can see all of the
HTML that we had before was
21898.89 -> replaced with changed. And
don't worry about this part,
21903.99 -> this part is just added
by live server after.
21908.25 -> So this shows that inner
HTML gives us control of
21913.29 -> all the HTML inside the body.
21917.28 -> We can get this H T M L
and we can also change this
21922.14 -> H T M L.
21924.3 -> Now another feature of inner
H T M L is that we can replace
21929.31 -> this H T M L with new H T M L code,
21933.45 -> not just text. So for example,
21937.02 -> instead of just text,
21938.97 -> we can replace it with
a code less than button
21944.43 -> greater than and also
less than slash button
21949.89 -> greater than.
So this is HTML code for creating a
21954.78 -> button. And inside the
button, let's put the text.
21960.12 -> Good job.
21963.12 -> And now this code will replace
all the HTML inside the
21967.77 -> body with this new html.
21972.03 -> If we save,
21974.4 -> it removes all the previous
HTML and this new HT m
21979.16 -> L creates this button.
21982.5 -> So using this inner HTML property,
21985.59 -> JavaScript can replace the
HTML inside the body to
21990.12 -> whatever we want. We have
full control of the webpage.
21996.12 -> All right,
21997.14 -> now we're going to learn a method of
the document object that we can use.
22002.48 -> As a reminder,
22003.53 -> a method is a function that
is saved inside an object.
22009.53 -> So we're going to learn a very
important method called document dot
22014.42 -> query selector.
22017.21 -> We just learned that document
dot body lets us get the body
22022.19 -> element and put it inside our JavaScript
22027.08 -> document dot query selector
lets us get any element from the
22031.79 -> page and put it inside our JavaScript.
Let's give it a try.
22037.7 -> So first we'll comment out
the previous code using
22042.41 -> slash star and star slash
22047.51 -> let's create some new lines at the top
22051.86 -> and let's type document dot query
22057.73 -> capital S,
22059.79 -> selector and brackets.
22064.55 -> So document dot query selector
lets us get any element from the
22069.23 -> page and put it inside our
JavaScript between these
22073.98 -> brackets. We're going to put a string.
22077.28 -> This string tells JavaScript
which HTML element to get
22082.29 -> from the page. So if we type button,
22087.63 -> this will get the first button
element from the page and put it
22092.52 -> inside our JavaScript.
22095.04 -> So let's console dot log
this to confirm console
22100.26 -> dot log,
22103.83 -> close bracket and save.
22108.12 -> And let's go back to our console.
22111.36 -> Now we will tell us that
document doc query selector got
22116.13 -> this button element and put
it inside our JavaScript,
22120.78 -> which you can see in the console.
22123.63 -> And if I hover over this button element,
22126.72 -> it will tell us that it is
exactly the button on the page.
22131.73 -> So that's what document
Duck query selector does.
22135.03 -> It can get any element from the page
and put it inside our JavaScript.
22141.15 -> This string tells it which element to get.
22145.05 -> If we type button it will get the
first button element from the page.
22150.75 -> If we type body,
22153.78 -> this will now get the first
body element from the page.
22158.19 -> So it will do the same
thing as document body.
22163.29 -> But for now,
22165.06 -> let's just change this back
to button as an example
22170.13 -> and save.
22172.83 -> So remember when an HTML
element is inside JavaScript,
22177.93 -> it's just a JavaScript object.
22180.99 -> So this button element
is also just an object
22186.21 -> and it has properties
and methods we can use.
22190.53 -> Every HTML element actually
has a property called inner
22195.87 -> html,
22196.95 -> which lets us control the
HTML inside the element.
22202.17 -> So for this button element,
22204.54 -> let's type at the end dot inner
22210.63 -> html and this will give us the HTML inside
22215.49 -> the button. If we save,
22219.54 -> it will give us hello. And again,
22223.8 -> if we change the inner HTML property,
22227.28 -> it will change the HTML inside the button.
22232.02 -> So let's make a copy of this code.
22234.81 -> We'll select selected
and right click copy.
22240.45 -> And down here,
22243.36 -> right click and paste.
22247.71 -> And let's change the inner
HTML property using an equal
22252.67 -> sign. And the string changed.
22258.82 -> So this will only change
the HTML inside the button,
22264.04 -> which is here to changed. If we save
22270.19 -> it can see that the text inside
the button is now changed.
22275.68 -> A little syntax shortcut I'm going
to show you is that for the dot
22280.33 -> notation, we can actually
put it on multiple lines.
22284.53 -> So we can type document dot
query selector and then put dot
22289.54 -> inner html on a separate line
to make it easier to read.
22295.18 -> And make sure to put a tab at the front
so that we know it's a continuation
22299.98 -> of the previous line. Okay,
22303.55 -> so using document doc query selector,
22306.97 -> we can get any element from the
page, put it inside our JavaScript,
22312.46 -> and then we can control the
HTML inside that element.
22317.56 -> And this allows us to only change
the parts of the page that we
22322.27 -> need. Next,
22324.85 -> what if we have two buttons on the page?
So let's go up here
22330.94 -> and we'll create another
button using less than
22335.62 -> button greater than,
22338.5 -> and we'll have the text second button
22344.02 -> and save.
22347.08 -> So now we have two buttons on the page,
22350.89 -> but document doc query selector will
only get the first button on the
22355.78 -> page. How do we get this second button?
22360.22 -> The solution is that we're going
to add an attribute to this button
22364.93 -> called the class attribute.
22367.96 -> So in the opening tag
we're going to type space
22372.94 -> class equals double quotes.
22377.53 -> So the class attribute sort of
adds a label to this button.
22382.66 -> So inside the double quotes we're
going to label this button a
22387.97 -> js dash button.
22392.56 -> And now that we labeled this button,
22395.14 -> we can select it using
document dot query selector.
22400.48 -> So at the bottom here we'll type document
22406.39 -> dot query selector again and
22411.22 -> brackets, and we'll type a string inside.
22415.69 -> And this time we're going to start
with a dot. When we start with a
22420.44 -> dot,
22421.54 -> this means that it's going to
look for a class rather than an
22426.07 -> element name.
22427.84 -> So we're going to look
for the class js dash
22432.56 -> button.
22434.48 -> And now document dot query selector
will select an element with the
22439.13 -> class js button, which
is this element here.
22444.56 -> So let's confirm this by console dot
22449.18 -> logging this code
22453.2 -> and save.
22455.63 -> And now you will see that
this code gives us the second
22460.34 -> button on the page.
22462.77 -> So using a class attribute
and then starting with a dot
22467.3 -> inquiry selector,
22469.01 -> we can get any specific element
from the page and put it in our
22473.78 -> JavaScript. By the way,
when we start with a dot,
22478.46 -> this is called a class selector,
22481.46 -> and this is also used in CSS to
style elements with a specific
22486.38 -> class. In fact,
22488.78 -> anything we use in CSS can
also be used in this string.
22494.21 -> And also a common practice
is to start the class with
22498.98 -> JS dash to make it clear
that this class is being used
22503.72 -> in JavaScript. And again,
22507.2 -> HTML elements are JavaScript objects.
22511.43 -> So this second button
is also just an object.
22515.81 -> And remember,
22516.8 -> objects are values and we can
save them inside a variable.
22522.59 -> So instead of console dot log,
22526.37 -> let's create a variable
using const constant.
22531.41 -> And we'll name the variable button,
22534.98 -> capital E element.
22538.7 -> We usually end the variable
name with Element or
22543.11 -> lm.
22544.34 -> To make it clear there's an H T
M L element inside this variable.
22550.22 -> And finally we'll type an
equal sign to save this element
22555.68 -> and we can remove this extra bracket.
22559.55 -> And now if we console
dot log this variable
22563.96 -> console dot log button
22570.11 -> element and save
22574.97 -> it will tell us that the second
button was saved inside this variable.
22581.18 -> So using the dom,
22582.74 -> we can get H T M L elements from the page,
22586.79 -> put it inside our JavaScript
and then save it in a variable.
22592.1 -> So the DOM combines
JavaScript and HTML together,
22597.11 -> it gives JavaScript full
control of the webpage.
22602.33 -> All right, now that we
learned how to use the dom,
22606.05 -> let's do some practical examples.
22609.36 -> So I've actually prepared some projects
that we can do for this lesson to
22614.25 -> open these projects,
22615.78 -> we'll go to our browser and
create a new tab at the top.
22622.08 -> And here we'll type super
22626.07 -> simple.dev/projects/dom
22634.44 -> and press enter. On this page,
22638.88 -> we'll be working on three projects,
the YouTube subscribe button,
22644.34 -> the Rock paper Scissors project we've
been working on for the last few lessons
22649.11 -> and this Amazon shipping calculator.
22652.98 -> And you'll notice that these
projects modify the webpage.
22658.02 -> So we're going to be using the
DOM to create these projects.
22662.49 -> And in the next lesson we're
going to use CSS to style these
22666.99 -> projects and make them look nice.
22669.9 -> And you can preview that by clicking here.
22674.13 -> So using css,
22675.93 -> we can make the subscribe button look
like the actual subscribe button on
22680.25 -> YouTube.
22681.72 -> And if we click this link to see
the rock paper scissors game,
22686.91 -> you'll see that will make it look
really nice with these icons.
22691.8 -> But for this lesson we're only going
to focus on the functionality and
22696.6 -> not the styling. So let's
go back to the projects,
22701.64 -> we'll click back and click back again
22706.8 -> until we're at projects slash
dom and we're going to create the
22711.63 -> functionality for these projects
first. So before we start,
22716.97 -> let's create a new file
just for these projects.
22721.5 -> We'll go to our code
editor and click this icon
22726.72 -> and then click this icon
to create a new file.
22731.52 -> Let's name this file,
22733.32 -> zero nine dash dom dash
22738.09 -> projects dot html and press
22743.1 -> enter.
22745.41 -> Now let's copy dom dot
html into this file.
22750.69 -> So we'll open it and then
click in here and type
22755.25 -> ctrl a or command A to select the code.
22759.96 -> And then right click copy.
22764.52 -> And in here,
22767.13 -> right click and paste.
22772.23 -> Now let's close our files
and we'll prepare this file.
22776.34 -> So let's scroll up and we'll
change the title to Dom
22781.8 -> projects
22784.35 -> and let's remove our html,
22787.78 -> but keep the script element
22792.25 -> and we'll also remove the
Java script from before.
22799.03 -> Finally,
22799.66 -> let's save this file and we'll
open it in the browser by right
22804.43 -> clicking open with live server.
22809.83 -> And let's also open the console
just in case, right click,
22815.38 -> click inspect, and then click the console.
22821.17 -> All right, we're ready to
start with the projects.
22825.07 -> Let's go back to super
simple.dev and we'll
22829.75 -> start by creating the
YouTube subscribe button.
22833.5 -> Let's actually press refresh
to get it back to normal.
22837.79 -> And when we click this button,
it will change to subscribe.
22843.37 -> First, let's create the HTML
elements for this project.
22848.59 -> We'll go to the body,
22850.96 -> we'll create some new
lines and let's create the
22855.32 -> paragraph first,
22857.5 -> what's type less than P, greater than.
22862.27 -> And inside the paragraph
we'll have the text, YouTube
22869.13 -> subscribe button.
22872.62 -> And now let's create the
button. So on the next line
22878.38 -> we'll type less than button greater than.
22883.36 -> And inside the button subscribe.
22888.31 -> Now let's save and go back to our tab.
22893.47 -> And now we have the HTML
elements that we need.
22897.58 -> So now let's make this
interactive with JavaScript.
22901.33 -> And remember we have a process for this.
22904.63 -> First we'll figure out
what steps we need to do.
22908.77 -> This is called an algorithm,
22911.29 -> and then we'll convert
these steps into code.
22915.19 -> So the steps that we need here
are when we click this button.
22920.11 -> If the text is subscribe,
we'll change it to subscribe,
22925.84 -> otherwise we'll change it back.
22928.84 -> Now let's convert these steps into code.
22932.47 -> Let's go to our button element
and we're going to add an on click
22937.3 -> attribute.
22938.92 -> We'll type space on click equals
22944.08 -> double quotes.
22945.97 -> And inside here we'll
write some Java script.
22950.44 -> So first we need to get the
text inside the button and we
22955.36 -> learned how to do this earlier.
22957.55 -> We can use document dot query
selector to put this button
22962.35 -> into our JavaScript and
then use inner html to get
22967.25 -> this HTML inside the button.
So in our code,
22972.62 -> let's type document dot
22977.09 -> query selector brackets
22982.13 -> and a string. And as we learned,
22985.37 -> we're going to use a class attribute
to select this specific button.
22991.25 -> So in the opening tag,
22993.38 -> let's add a class attribute
22998.12 -> and let's make the class js dash
23003.76 -> subscribe dash button.
23008.53 -> And then inside document
dot query selector,
23012.16 -> we're going to type a.to select a
class and we're going to select the
23016.82 -> class js dash
23020.26 -> subscribe dash button.
23026.11 -> And now let's console dot log this
to confirm that we got this button.
23032.08 -> So at the front console dot log
23039.13 -> and save. And now let's click our button
23045.04 -> and it will show us that document
dot query selector got the button
23049.93 -> on the page.
23051.88 -> So now let's save this button in
a variable so we can use it later.
23057.49 -> Instead of console dot log,
23060.52 -> let's type const to create
a variable and we'll name it
23066.55 -> button element and make it equal
23071.65 -> to this result.
23075.13 -> So now that we have the
button inside our JavaScript,
23078.76 -> we're going to check if the text
inside the button is subscribe.
23084.25 -> To check the text, we
can use an if statement.
23088.45 -> So at the bottom here
we're going to type if
23093.52 -> brackets and curly brackets.
23097.24 -> And inside this condition,
23099.37 -> let's get the text inside the button.
23103.21 -> So we'll type button element
23108.13 -> dot inner capital H, T M L,
23114.04 -> and we're going to check
if it's equal to subscribe.
23118.36 -> So we'll type triple equal the string,
23123.68 -> subscribe.
23126.01 -> Now if it is equal to
subscribe inside the curly
23130.63 -> brackets,
23132.04 -> we're going to change the text
in the button to subscribe.
23137.44 -> So let's type the code button element
23142.97 -> dot inner capital H T M L,
23148.4 -> and we'll change it with
an equal sign to the string
23153.05 -> sub described.
23157.16 -> And the last step is otherwise
we'll change it back.
23162.05 -> So we'll add an L to this if statement L
23167.69 -> and curly brackets.
And inside we're going to change
23172.56 -> the text back to subscribe.
23176.69 -> So let's type button
23180.11 -> element dot inner capital H,
23185.32 -> T M L and make it equal to the string.
23190.68 -> Subscribe and save.
23195.53 -> Now before you try out this project,
23198.14 -> make sure that the text inside
the button has no spaces or
23203.09 -> new lines around it
and it looks like this.
23207.23 -> And I'll show you why in a second.
23210.02 -> Let's go to our project and try it out.
23213.59 -> So when we click this button, it
will change to the text, subscribe.
23219.53 -> If we click it again, it will
go back to the original text.
23224.96 -> So that's how we create the subscribe
button project using the dom.
23230.84 -> So now let's go back into our
code and I'll show you why.
23235.31 -> If we add new lines and some
spaces around this text,
23240.79 -> there's actually going
to be some problems.
23244.07 -> So if we save this code and
then go back to our project
23249.5 -> and click the button again,
23252.05 -> you'll notice that it no longer
changes the text. And that's because
23256.73 -> now we have a bunch of
spaces around this text
23262.31 -> and these spaces will show
up in inner html and now
23267.32 -> inner HTML will not
equal exactly subscribe.
23272.69 -> So how do we solve this problem when
there are spaces around our text
23278.09 -> to solve this,
23279.11 -> we're going to use a different
property of an HTML element.
23284.63 -> So instead of the inner HTML property,
23288.23 -> we're going to use the
property inner capital T
23293.6 -> text.
23295.61 -> So inner text will give us
the text inside this element,
23300.71 -> but without all these spaces around it.
23304.37 -> So now this will equal exactly subscribe.
23308.84 -> If we save and go back to
our project and click it
23313.7 -> again, it'll start working again.
23317.81 -> So that's the inner text
property of an HTML element.
23322.44 -> It gets us the text
without the extra spaces.
23327.12 -> So before we move on
to the second project,
23330.15 -> I'm going to show you how to make
our code cleaner. Right now we're
23335.1 -> mixing HTML and Java JavaScript together.
23340.11 -> So to make a code cleaner
and easier to read,
23343.8 -> we're going to separate
the JavaScript code.
23346.83 -> And to do that we're going to put
this code in a function instead.
23352.26 -> So inside the script element,
23355.56 -> let's create a function using function
23361.83 -> and we'll name the function,
23364.89 -> subscribe brackets and curly brackets.
23370.2 -> And inside these curly brackets,
we're going to move all of this code.
23375.24 -> So let's select this code
23378.66 -> and we'll right click cut and in
23383.46 -> here, right click and paste.
23389.34 -> And if we need to fix the formatting,
23391.53 -> we can select these lines
and press tab a few times.
23396.57 -> And now that we have this function,
23398.88 -> we're going to go to the on click
attribute and we're going to call this
23403.85 -> function. So we'll type
the function, name,
23408.01 -> subscribe and brackets.
23412.77 -> So this will run all the
code inside the function
23417.57 -> so it will do the same thing as before,
23420.75 -> except now our code is cleaner
because we grouped all the JavaScript
23425.71 -> code at the bottom and we're
no longer mixing as much
23430.05 -> html and JavaScript together.
23433.95 -> Now let's move on to the second project.
23437.46 -> We'll go back to super simple
dev and we're going to work
23442.35 -> on the rock paper scissors
project. So let's click this link
23448.65 -> and it will show us the next
version of this project.
23452.49 -> So you'll notice a few changes here.
23455.25 -> The first change is that we're going
to show the score on the page instead
23460.15 -> of in a pop-up.
23462.24 -> And the second change is that when we
click one of these buttons to play the
23466.9 -> game,
23468.09 -> it will show us the result and
the moves that we picked on the
23472.98 -> page rather than in a pop-up.
23476.91 -> Let's create a new file for this rock
paper scissors game for this lesson.
23482.25 -> So let's go to our code editor
and we'll click this icon
23487.8 -> and click this icon to create a new file.
23491.85 -> And we'll name this zero nine dash
23496.17 -> rock dash paper dash
23500.74 -> scissors dot html and
23505.48 -> press enter.
23508.18 -> And let's copy the previous rock
paper scissors, which is here.
23513.43 -> We'll click here and type
control A or command a
23518.44 -> right click copy.
23522.52 -> And here, right click and paste.
23529.03 -> And let's hide our files
23532.45 -> and let's save this file
and we can also close
23537.28 -> zero eight rock paper scissors.
23540.4 -> And finally we'll open this in
the browser by right clicking
23545.92 -> open with live server.
23550.42 -> Now we're ready to begin
the second project.
23554.23 -> So let's go back to the project at Super
Simple Dev and we're going to start
23559.51 -> by putting the score on
the page. So to do this,
23564.25 -> we're going to need
somewhere to put the score.
23567.94 -> So let's create an HTML element for this.
23572.65 -> We'll scroll up to our html,
23576.43 -> which is here. And after
the scissors button,
23582.01 -> let's add a paragraph element
where we're going to put our score,
23587.38 -> so less than P, greater then.
23592.3 -> And let's add a class attribute.
23594.46 -> So we can select this element in our
Java script. So in the opening tag,
23599.95 -> we'll type space class equals double
23604.78 -> quotes
23607.33 -> JS dash score.
23611.02 -> Now that we have a class, let's get
this element in our Java script.
23617.08 -> So let's just do it down here.
23619.96 -> So we'll type document dot
23624.52 -> query, selector
23628.72 -> brackets and a string.
23631.6 -> And then we're going to type a dot
and we're going to select the class
23636.22 -> js dash score.
23639.19 -> So JS dash score.
23643.87 -> So this will get the paragraph
element from above and put it
23648.37 -> inside our JavaScript.
23651.25 -> And now let's put the
score inside the element.
23655.15 -> To do that we can use inner html dot
23660.43 -> inner capital H T M L,
23664.96 -> and we'll make it equal to the score.
23669.04 -> If we scroll down,
23671.53 -> We actually create the score
down here so we can actually just
23676.19 -> copy this string. So we'll select it,
23680.15 -> right click copy,
23684.2 -> and let's scroll up to here.
23689.81 -> And I'll actually put this on a
separate line to make it easier to
23694.58 -> read.
23696.08 -> And now here we're going to
type a string using back ticks
23702.32 -> and inside the string we're
going to right click and
23706.88 -> paste.
23709.52 -> So this will put the score that
we used to have in our popup
23714.29 -> inside this element. So
inside this paragraph,
23719.39 -> if we save and then go back to our tab,
23725.21 -> you can see that now it
displays the score on the page.
23729.86 -> Now before we move on, I want to
point something out with html.
23734.78 -> So remember that our reset score
button was beside our other
23739.37 -> buttons and now it's below them.
23742.94 -> So what determines if an element
appears beside something or below
23747.74 -> something?
So the paragraph element here is known as
23752.63 -> a block element.
23753.89 -> A block element will always
take up an entire line
23758.87 -> by itself. So this line
already has some buttons,
23763.67 -> so the paragraph will take up the
entire line under the buttons.
23769.01 -> That's why this text appears under
the buttons and not beside them.
23774.38 -> And also because a block element
like this paragraph takes up
23779.21 -> this entire line, the next
button has to appear below it.
23784.91 -> So that's why we get this layout here.
23788.69 -> So this is just a short review of layouts.
23792.08 -> If you want to learn this in more detail,
23794.48 -> you can check out my HTML and
CSS full course in the video
23799.46 -> description. Alright,
23802.34 -> the next feature we're going
to do is if we play the game.
23806.12 -> We also want to update
the score right now.
23810.05 -> If we play it doesn't
update it on the page,
23814.58 -> let's fix this in our JavaScript.
So let's go down to where we
23819.53 -> update the score. So we'll scroll down,
23823.88 -> which is right here.
23826.1 -> We update the score and
save it in local storage.
23830.24 -> And after we do this,
23832.04 -> we're also going to update
the score on the page.
23836.27 -> So we can actually use the
same code that we used above,
23841.01 -> which is here. So let's
make a copy of this code,
23846.02 -> right click copy and down here,
23852.83 -> right and paste.
23857.76 -> And I'll add a tab at the front.
23860.82 -> If we save and then try out our game,
23865.32 -> we'll click a move press. Okay.
23869.1 -> And now you'll notice the
score also updates on the page.
23873.51 -> So let's go back into our
code and do some cleanup.
23877.47 -> So you notice that this code is
the same as the code we had above.
23882.51 -> And this is a great situation
to use a function to reuse this
23887.25 -> code. So at the bottom here,
23891.12 -> let's create a function using function and
23897 -> we'll call it update score
23902.43 -> element brackets and curly brackets.
23907.41 -> And we'll move this code into
the function. So we'll select it,
23913.05 -> write, click, copy, and in here,
23918.09 -> right click and paste.
23922.44 -> And now instead of writing
this code multiple times,
23926.7 -> we're just going to call the function
23930.27 -> update score element
23934.95 -> and brackets.
23937.89 -> This will run all the code inside the
function so it does the same thing as
23942.66 -> before, except we can reuse the code.
23947.01 -> So let's scroll back up
23950.37 -> and instead of typing
out all this code again,
23954.12 -> we can just use our function update
23958.98 -> score element and
23963.33 -> brackets. Now let's save.
23967.95 -> It will display the score
on the page at the start.
23971.88 -> And when we click a move and click okay,
23976.38 -> it will update the score on the page.
23980.1 -> So the last feature we're going to do
in relation to the score is when we
23984.78 -> click the reset score button.
23987.18 -> We also want to update the score
on the page right now if we
23992.01 -> click it,
23993.39 -> it doesn't actually update it.
So let's go into our code
23998.73 -> and let's go to the reset
button, which is here.
24003.68 -> And after we reset the score,
24006.83 -> we're going to call that function again,
24009.98 -> update score element
24015.38 -> and brackets if we save.
24020.36 -> And now let's play the
game and press, okay,
24025.28 -> so we have a score and
if we click reset score,
24029.72 -> it will reset everything back to zero.
24033.78 -> So now we finish the score.
24036.57 -> Let's go back to super
simple dev and play the
24041.32 -> game. And now we're going
to work on this section.
24046.23 -> We're going to show the result and
the moves that we picked on the
24050.76 -> page. So first,
24053.07 -> let's create some paragraphs
for these as well.
24057.03 -> We'll go to our HTML and above the score.
24062.37 -> Let's add a less than greater than
24067.83 -> this is going to be the result.
24070.29 -> So let's give it a class of JS
24075.51 -> dash result
24078.96 -> and let's create another
paragraph, less than P,
24083.52 -> greater than,
24085.5 -> and we'll give this one a class equals
24091.29 -> js dash moves.
Now let's use the
24095.88 -> dom to put the result and the
moves in these paragraphs.
24101.58 -> Feel free to pause a video if you
want to try it yourself first.
24106.71 -> So let's scroll down to
where we display the result,
24112.5 -> which is here.
24114.6 -> So we display it in a popup
and instead of a popup,
24120.21 -> we're going to get the paragraph and
put this result inside the paragraph.
24125.97 -> So we'll type document dot query,
24131.34 -> selector brackets and a string,
24136.11 -> and we'll type a dot
and select the class js
24141.39 -> dash result
24145.17 -> and then dot inner capital H,
24149.49 -> T M L.
24151.74 -> And we'll change this to result.
24157.35 -> And now let's also display the moves.
24160.68 -> So we'll types of new lines and document
24165.69 -> dot query selector, again,
24169.98 -> brackets and a string dot j s
24174.84 -> dash moves,
24178.23 -> dot inner capital H T M L
24183.81 -> and make it equal to this text right here.
24188.1 -> So let's type a template string
because we're going to insert our moves
24192.99 -> inside the string and we'll type you
24198.6 -> and we'll insert the player move dollar,
24202.41 -> curly brackets player move
24207.48 -> and then a dash. And
then the computers move.
24212.47 -> So dollar curly brackets again and
24216.49 -> computer move computer
24222.1 -> at the end. So now that we're
displaying everything on the page,
24227.56 -> we don't need this popup at the
end so we can actually delete this
24232.42 -> popup. All right,
24236.59 -> now let's save and go back to our tab
24242.38 -> and play our game.
24244.81 -> Now it will show the result and the
moves that we picked on the page
24249.82 -> instead of in a pop-up. Let's play
it again to make sure it works.
24255.64 -> And finally, when we click reset score,
24258.91 -> it will reset everything
back to zero and that's it.
24263.74 -> Now we're displaying everything
on the webpage using the dom.
24269.71 -> Now let's move on to the
third and final project.
24273.82 -> We'll go back to super simple.dev
24278.74 -> and we'll click back to go
back to our projects and
24283.69 -> we're going to create
this third project here,
24286.6 -> which is an Amazon shipping calculator.
24290.71 -> The way this works is that inside
this text box we're going to type the
24295.52 -> cost of an order in dollars.
24298.9 -> If the order is under $40, for example,
24303.34 -> $25, and we click calculate,
24307.99 -> it will add $10 of shipping and
display the total down here.
24313.81 -> But if we type a cost that is over $40,
24317.95 -> like 50 and press calculate,
24322.9 -> it will be free shipping. So it will
display the same total down here.
24328.66 -> So let's learn how to
create this using the dom.
24333.1 -> Let's go back to our zero
nine dom projects file,
24338.44 -> and we'll start by
creating the HTML elements.
24343.12 -> So under our subscribe button,
24346.54 -> let's create this
paragraph using less than
24351.4 -> P,
24352.33 -> greater than Amazon shipping
24358.21 -> calculator. And next,
24361.69 -> let's create this text box.
24365.05 -> So the HTML element for a
text box is called input.
24370.36 -> So a type less than input, greater than.
24376.48 -> So the input element is special
because it doesn't require a closing
24381.19 -> tag. This is called a void element.
24386.02 -> And lastly, let's create the button.
24389.63 -> So here we'll create less than button
24394.58 -> greater than calculate.
24399.02 -> Now let's save and open
the tab for this file,
24404.63 -> which is right here.
And we have the text,
24408.95 -> the text box, and the button that we need.
24413.03 -> Now one other thing we're going to
add is that in the final project,
24418.25 -> if we don't have anything in the text box,
24421.25 -> we're going to have this gray text.
24424.04 -> So this is called a placeholder.
24427.28 -> To add a placeholder to a text box,
24430.28 -> we're going to use the
placeholder attribute.
24433.88 -> So inside our input element
we're going to type space,
24439.58 -> place holder equals double quotes,
24445.37 -> and inside the quotes we'll put the
text we want as the placeholder,
24450.53 -> which is cost of order
24456.38 -> and save. Now if we go
back to our project,
24461.96 -> we now have a placeholder in our
text box that disappears when we
24467 -> start typing. So that's
all the html that we need.
24472.76 -> Now let's work on the
JavaScript and again,
24476.42 -> we'll figure out what steps we need to do.
24480.14 -> So when we click this button,
24482.42 -> we're going to get the text
inside the text box. If the amount
24487.43 -> is below $40,
24489.5 -> we'll add $10 of shipping and
then we'll display the total
24494.42 -> on the page. Let's convert
these steps into code.
24499.82 -> So we'll go to our button and add and on
24504.8 -> click attribute. And inside here,
24509.15 -> let's also create a function to
separate our JavaScript code like
24514.1 -> we did before.
24516.17 -> So in the script we're
going to create a function
24521.09 -> function and let's name it
24525.32 -> calculate total brackets and
24530.09 -> curly brackets.
24532.46 -> And inside on click we're just
going to call the function.
24537.74 -> So calculate total
24542.51 -> brackets.
24544.58 -> The next step is to get the
text inside the text box.
24550.04 -> So first,
24551.21 -> let's get this input element and
put it inside our JavaScript.
24556.97 -> To do that we can use document
dot query selector again.
24562.01 -> So we'll add a class to this
input. So we can select it.
24566.94 -> Class equals js dash
24571.62 -> cost dash input.
24575.82 -> And then inside our
JavaScript will use document
24580.98 -> dot query selector
24585.15 -> brackets and a string and a dot.
24589.83 -> And this class js dash
24594.3 -> cost dash input.
24598.71 -> So this code will get the input
element and put it inside our,
24604.95 -> let's confirm by console
24609.72 -> dot logging the result
24615.06 -> and save. And now when we
click the calculate button,
24621.03 -> it will give us the input
element from the page.
24625.5 -> Let's save this input element in
a variable so we can use it later.
24631.11 -> Instead of console dot log,
24633.18 -> we'll use const and
we'll name the variable
24637.89 -> input
Element and make it equal
24642.78 -> to this element and
remove the extra bracket.
24647.4 -> And next, we need to get the
text inside the input element.
24652.77 -> So so far in this lesson we've
been using the property inner H T M
24657.63 -> L to do this. However, for input elements,
24662.49 -> you notice that there
is no H T M L inside.
24666.69 -> So for input elements we're going
to use a different property called
24671.61 -> value.
24673.44 -> So at the bottom here
we're going to type input
24678.94 -> element dot value.
24683.43 -> This is how we get the
text inside a text box.
24688.71 -> So let's console dot log this
to confirm that it works.
24693.66 -> So we'll console dot log
24700.14 -> and save.
24702.69 -> And now let's type something
in the text box like 50
24708.24 -> and click calculate and input value will
24713.16 -> give us the text inside the text box.
24717.93 -> Let's save this text in a
variable so we can use it later.
24722.67 -> Cons and we'll name the variable cost
24727.59 -> and make it equal to the
text. In the text box.
24733.5 -> The next step is to check
if this cost is under
24737.61 -> $40. If it is, we'll add $10.
24742.62 -> So down here,
24743.98 -> let's type if brackets and curly brackets.
24749.68 -> And inside the condition
we'll check if cost
24754.87 -> is less than 40.
24758.08 -> And if it is inside the curly brackets,
24761.92 -> we'll do do cost equals itself
24767.02 -> plus $10 of shipping.
24771.16 -> And remember when we change a variable,
24773.95 -> we have to switch from cost to let.
24779.08 -> And finally we're going to display
the total cost on the page.
24784.18 -> So let's create a paragraph
where we can display the cost.
24788.86 -> So down here we'll create a paragraph less
24793.81 -> than P, greater than,
24797.02 -> let's give it a class JS dash
24802.3 -> total dash cost.
24806.29 -> And now inside our
JavaScript, let's use document
24812.56 -> query selector brackets and
24816.97 -> string and we'll type a dot and the class
24821.89 -> js dash total dash
24826.3 -> cost. And we're going to put
the cost inside the paragraph,
24831.91 -> we can use dot inner capital
24836.53 -> H T M L and make it equal.
And let's
24841.24 -> use a template string.
24843.31 -> So back ticks and we'll have a dollar.
24847.6 -> And we're going to insert
the cost using dollar and
24852.49 -> curly brackets cost.
24856.6 -> Now let's save and try out this project.
24861.55 -> So first we'll type a
cost that is over $40,
24866.08 -> like 50. If we press calculate,
24870.79 -> we're not going to add $10 of shipping
and we'll display the same total
24875.83 -> on the page. Now let's
try a number under $40,
24881.44 -> like 25 and press calculate.
24885.79 -> And this number doesn't look right,
24889.12 -> it's saying that we have to pay $2,510.
24893.98 -> So what's going on here?
24895.9 -> Let's go into our code and let's
use console dot log to figure
24900.61 -> out what's wrong. So first,
24903.49 -> let's console dot log the cost to
make sure that we're getting the right
24908.02 -> number from the text box. So down here,
24912.34 -> console dot, log,
24916.09 -> the cost and save.
24920.65 -> And then let's type 25
again and press calculate
24926.12 -> and it will give us 25. So we're
getting the correct text from the text
24930.83 -> box.
24932.15 -> Now let's console dot log down
here to see if the math is working
24937.55 -> so we'll type console, dot log,
24942.86 -> cost and save.
24947.39 -> And let's try 25 again and calculate.
24952.49 -> And down here when we add 10,
24956 -> this is where things go
wrong and a result in
24959.63 -> 2,510.
24962.6 -> So it's not doing math properly here.
24965.99 -> So let's check if cost is a number
to make sure that it's doing
24970.49 -> math.
24971.96 -> So here we'll type console dot
24976.55 -> log the type of cost
24982.7 -> and save.
24985.22 -> Let's type 25 again and calculate
24990.02 -> and aha,
24992.36 -> it's telling us that the cost is a string.
24996.05 -> So this is actually not
a number, it is a string,
25000.37 -> that's why it's not doing math. So
remember from the strings lesson,
25005.44 -> when we add a string with a number,
25009.16 -> JavaScript will automatically
convert this number into a string
25014.2 -> and combine them together.
That's why just combines
25018.58 -> 25 and 10 here.
25021.52 -> This is called type coercion.
25025.57 -> So whenever we get a value
from the dom like this,
25029.8 -> the value will be a string.
So in order to do math,
25034.15 -> we have to manually convert
the string into a number
25039.22 -> To do that,
25040.36 -> JavaScript has a built-in
function called number.
25045.4 -> So before this code we're
going to type capital N
25050.5 -> number open bracket and close bracket.
25056.56 -> So the number function takes whatever's
between the brackets and manually
25061.54 -> converts it into a
number. So now if we save
25068.14 -> and we type 25 and press calculate
25073.03 -> the cost is now a number and
it will do the math properly
25077.98 -> and give us 35.
25080.68 -> So remember whenever we
get a value from the dom,
25084.91 -> the value will be a string. So
if we want to do math with it,
25089.44 -> we have to manually convert
this value into a number first.
25095.29 -> So now let's remove the console
dot logs that we use to figure out
25100.19 -> this problem and save.
25105.8 -> Okay, we're going to add one
more feature to this project.
25110.57 -> Let's go back to super simple.dev and
25115.43 -> inside the text box we're
going to type 25 and
25120.41 -> press enter.
25123.11 -> So pressing enter will also
calculate the total and display it
25127.91 -> on the page. So let's learn
how to create this feature.
25132.62 -> So if we go back to our code so far
in this course we've been using the
25137.57 -> attribute on click,
25140.21 -> which runs some JavaScript
when we click an element,
25145.3 -> HTML has another attribute
we can use called On
25150.02 -> Key Down,
25151.4 -> which runs JavaScript when we
press a key down on our keyboard.
25156.98 -> So inside the input this time,
25160.37 -> let's add the attribute on key
25165.38 -> down equals double quotes.
25169.55 -> And then inside here,
25172.07 -> console dot log and the string
25177.59 -> typing.
25180.08 -> So now every time we type in
the input it will console dot
25185.07 -> log this message.
Let's save it and give it a try.
25190.85 -> We'll go to the tab for this
file and then inside the text box
25196.01 -> we'll type some numbers and
you can see that every time
25200.87 -> we type something it will run
this code and display this
25205.73 -> message.
25207.6 -> So that's how we do something
when we type in an element.
25211.91 -> So clicks and key downs
are known as events
25217.19 -> on click and on key
down are known as event
25221.66 -> listeners.
25223.01 -> They check for events and runs
Java script when those events
25227.63 -> happen. Now in addition
to clicks and key downs,
25232.76 -> there are many other events we
can listen for in Java script.
25237.62 -> Okay, so now let's figure out what
steps we need to do for this project.
25243.29 -> When we press a key down in the text box,
25246.98 -> we're going to check if the
key is the enter key. If it is,
25251.93 -> we'll do the same thing
as the calculate button.
25256.67 -> So how do we know what
key we pressed inside on
25261.62 -> key down we're actually
given a special object called
25266.33 -> event. So instead of this string,
25270.08 -> let's remove it and we'll
console dot log event.
25276.2 -> So this is an object that's provided
to us by JavaScript and it contains
25281.07 -> information about the event.
25283.86 -> Every event listener including
on click also gets an event
25288.9 -> object. If we save
25294.03 -> and type in this text box,
25298.02 -> it will show us that event
is this object and inside the
25302.86 -> object it has a bunch of
information including the
25307.81 -> key that we typed.
25310.53 -> So here let's use the
event object and we'll get
25315.51 -> dot key and save.
25319.98 -> So now inside this text box,
25322.71 -> if we type something it will tell
us the key that we pressed and
25327.69 -> if we press enter, it will
tell us that the key is enter.
25333.69 -> So the next step is to
check if the key is enter,
25338.58 -> and we can do that using an if statement.
So in our code
25344.58 -> we'll type a new line if brackets
25349.2 -> and curly brackets.
25351.63 -> And inside the condition
we'll check if event
25356.49 -> dot key is equal to the string
25362.22 -> enter if it is equal to enter,
25366.6 -> we're going to do the same
thing as the calculate button.
25370.56 -> So we can actually just use
this function again inside the
25375.33 -> curly brackets, we'll type calculate
25380.79 -> total and brackets and
25385.47 -> save.
25387.6 -> So now let's go back to
our project and type 25
25392.85 -> enter and it will calculate
the total and display it on the
25397.71 -> page.
25398.82 -> So that's how we create this
keyboard feature of this project.
25403.89 -> Lastly,
25405 -> let's clean up our code and move
this into a function like the
25409.74 -> rest of our code. So
inside the script element,
25415.11 -> let's create a new function using function
25420.75 -> and we'll name it, handle cost,
25425.79 -> key down brackets and curly brackets.
25431.31 -> And let's move this code into
the function. We'll select it
25436.65 -> right click cut,
25440.31 -> and in here right click and paste.
25445.98 -> If we need to fix the formatting, we
can select these lines and press tab.
25451.71 -> And let's remove this console dot log.
25454.99 -> And now up here we're
going to call this function
25459.52 -> handle cost key down
25465.16 -> and brackets.
25467.77 -> Now the last thing we have to
do is that event does not exist
25472.75 -> inside this function.
25474.67 -> So we have to put the event
object into the function and
25479.47 -> remember to put a value
into a function we can use a
25483.82 -> parameter.
25485.71 -> So between these brackets we
can create a parameter called
25491.14 -> event. And now to save
something inside this parameter,
25496.39 -> we're going to go up to
these brackets and type
25500.86 -> event.
25502.72 -> This will take the event object and
put it inside the function where
25507.71 -> we can use it just like a variable.
25511.15 -> So now if we save and try out the project
25516.79 -> 25 enter.
So this still works.
25521.77 -> And now we finished all three
projects in this lesson.
25526.15 -> So in the rest of this lesson we're
going to learn some more details about
25530.77 -> JavaScript.
25532.54 -> In the last project we learned
how to manually convert a string
25537.61 -> into a number using the number function.
25542.05 -> We can also convert the other
way from a number to a string.
25547.54 -> So let's go to the top
of the script element
25552.43 -> and we can type capital S string
25557.17 -> and brackets.
25559.54 -> So the built-in string function
will convert a value into a string
25565.12 -> between the brackets. We
can put a number like 25,
25570.31 -> and this will convert the
number into the string. 25.
25575.35 -> The next detail we're going to learn
is a special behavior of strings.
25580.69 -> So below this line we can type console
25585.67 -> dot log the string 25
25591.13 -> minus five.
25594.22 -> So if a string only contains
a number and we subtract,
25599.23 -> multiply or divide,
25601.27 -> JavaScript will automatically
convert the string into a number.
25606.82 -> So this gets converted into
the number 25 minus five,
25612.64 -> and if we save it will do math and give us
25617.35 -> 20.
25618.91 -> So this is another example
of type coercion or automatic
25623.8 -> type conversion. However,
25627.19 -> it's not recommended to do math with
strings like this because adding
25632.2 -> works differently. For
example, on a new line,
25636.59 -> let's type console dot log
25641.51 -> the string 25 plus five
25647.09 -> and save.
25650.09 -> This will convert the number into
a string and combine them together
25655.25 -> into 2 55.
25657.86 -> So because adding strings
works differently,
25661.31 -> the best practice is always
do math using numbers,
25665.66 -> don't do math using
strings. If we need to,
25670.01 -> we can manually convert the
string into a number using the
25674.87 -> number function like we did here.
25678.77 -> The last thing we're going to learn in
this lesson is another built in object
25683.84 -> called the window object.
25686.81 -> So in this lesson we learned
about the document object. The
25691.7 -> document object represents the webpage,
25695.69 -> the window object represents the browser.
25699.74 -> So let's go into our script
element and try it out.
25704.42 -> Below this we'll type window.
25709.34 -> So this is the window object
and it represents the browser
25714.77 -> because it represents the browser.
25717.08 -> Everything inside the browser
is inside the window object.
25722.33 -> So let's think what's inside the browser.
25726.36 -> Well the webpage is inside the browser,
25730.34 -> so the document object is
inside the window object.
25735.62 -> If we type window dot document,
25741.17 -> this will give us the same document
object that we've been using in this
25745.94 -> lesson.
25747.35 -> So what else is part of the
browser while the console
25752.12 -> is also part of the browser.
25755.15 -> So here if we type window dot
25760.25 -> console,
25762.26 -> this will give us the same console
object we've been using in this
25766.73 -> course.
25768.11 -> So we can actually do console dot log
25773.18 -> and the string window
25776.96 -> and save.
And this will do the same thing as
25781.91 -> console dot log. What else
is part of the browser?
25787.22 -> Well pop-ups are also part of the browser.
25791.18 -> So if we type window dot alert,
25796.91 -> this will give us the same alert function
that we've been using in this course
25802.04 -> to create pop-ups. However,
25805.52 -> you might have noticed that we
never type window dot document or
25810.35 -> window console dot log,
25813.57 -> and that's because the
window object has a shortcut.
25817.56 -> We don't have to type window.at the front,
25821.37 -> we can just type document or
console and JavaScript will
25826.26 -> automatically add
window.at the front for us.
25831.3 -> So window is a built-in object
that represents the browser.
25836.7 -> We don't have to type out window dot
ourselves because JavaScript adds it
25841.65 -> for us automatically,
25843.6 -> but it's still nice to know how
this works behind the scenes.
25847.74 -> And that's the end of this lesson.
25850.05 -> In this lesson we learned about
the document object model or the
25854.97 -> dom, which allows JavaScript
to fully control the webpage.
25860.58 -> We learned how to use document dot
query selector to get elements from
25865.53 -> the webpage and put them
inside our JavaScript.
25869.4 -> We learned how to use inner
HTML to modify the HTML
25874.32 -> inside an element.
25876.33 -> We worked on three projects using the dom.
25879.93 -> We learned how to make elements
interactive with the keyboard using on
25884.67 -> key down.
25886.05 -> And we learned some more details
about strings as well as the
25890.73 -> window object, which
represents the browser.
25895.05 -> Here are some exercises you can do
on your own to practice using the
25899.58 -> dom.
25927.24 -> In this lesson we're going to
add CSS to all of our projects
25932.16 -> and we're going to finish our
rock paper Scissors project.
25936.03 -> CSS is a different language that
changes the appearance of our
25940.77 -> website.
25942.06 -> It's one of the three languages
that we use to create websites.
25946.86 -> So first let's look at the
projects we're going to work on.
25950.4 -> In this lesson we'll go to
our browser and create a
25955.17 -> new tab at the top.
25958.08 -> And here we're going to type super
25962.97 -> simple.dev/projects/dom-with-css
25976.26 -> and press enter.
25979.41 -> So these are the same three projects
we created in the previous lesson,
25984.48 -> except this time we're going to
add CSS to make these projects look
25989.44 -> nice.
25991.18 -> Let's start by creating a copy
of the project's HTML file
25996.19 -> from the previous lesson.
25998.71 -> We'll go to our code editor
and click this icon to show
26003.61 -> our files.
26005.25 -> And then here we're going to
select zero nine dash dom dash
26010.23 -> projects. We're going to right click copy,
26016.8 -> and down here, right click and paste.
26022.5 -> And let's rename this
file by right clicking
26027.96 -> rename.
26030.6 -> At the end we're going
to remove copy and at
26035.55 -> the beginning we're going
to change it to 10 and press
26040.44 -> enter.
26042.36 -> Now let's hide our files
and we're going to open 10
26047.22 -> dom projects in the
browser by right clicking
26052.32 -> open with live server.
26056.19 -> Now we can close our previous tabs
26061.83 -> as well as the previous
code from lesson nine,
26065.28 -> which is this file and these two.
26070.2 -> And now we're ready to
add CSS to our projects.
26074.34 -> We'll start with the
YouTube subscribe button.
26077.85 -> Let's go to the tab for our project
26081.63 -> and we're going to
style this button first.
26084.81 -> So we reviewed CSS in lesson four,
26088.38 -> and one of the ways we can write
CSS code is using the style
26093.12 -> element.
26094.65 -> So inside the head section
we're going to create an element
26099.9 -> using less than style, greater than.
26105.24 -> So the style element lets
us write CSS code inside.
26110.13 -> So inside here we're going to write button
26115.44 -> open curly bracket, close curly bracket.
26119.31 -> So the code in front of the
brackets is called the CSS selector.
26125.04 -> This tells the computer which elements
we want to style or change the
26129.85 -> appearance.
26131.49 -> So button will style all
button elements on the page,
26136.68 -> but in this situation we only
want to style the subscribe button
26141.72 -> because the calculate button
will be styled differently.
26146.52 -> So to style a specific element,
26149.16 -> we can use the class attribute.
So if we look at our button
26154.59 -> currently,
26155.34 -> it already has a class
of JS subscribe button,
26160.68 -> but this class is being
used by our JavaScript.
26164.49 -> A good practice is to add a
different class that would be used by
26168.97 -> css. So an element can
have multiple classes,
26173.77 -> we just separate them with a space.
26176.8 -> So inside this class attribute,
26179.65 -> we're going to type space
and add another class,
26185.56 -> subscribe dash button.
26189.91 -> Now this element has two classes
and we're going to use this second
26194.69 -> class in our css. So to
style a specific class,
26200.35 -> we're going to remove button
and we're going to type a dot.
26205.93 -> So starting with a dot means we're
going to style a class rather
26210.7 -> than an element name.
26213.25 -> So we'll style the class subscribe dash
26218.53 -> button, which is this button right here.
26223.72 -> And now inside these curly brackets,
26226.51 -> we're going to tell the computer how
to style this button. For example,
26232.06 -> border colon, none.
26236.5 -> And semicolon, if we save
26241.27 -> this will remove the border from
the button so it no longer has a
26246.04 -> border like this button.
26248.74 -> So that's how we style a
specific element. With css,
26253 -> we add a class to the element.
26255.67 -> And then inside CSS we
start with a dot and the
26260.08 -> class. And between the curly brackets,
26263.59 -> the code on the left is called the
property. This tells a computer.
26268.42 -> What we want to change on the
right is called the value.
26273.58 -> This tells a computer what we
want to change the property to.
26278.44 -> We separate the property and
value with a colon and we end the
26283.27 -> whole thing with a semicolon.
26285.82 -> So this is also called
a property value pair.
26290.32 -> As a reminder, this is
just a review of css.
26294.52 -> If you want to learn CSS in more detail,
26297.46 -> you can check out my HTML and
CSS full course in the video
26302.35 -> description.
So we just added one style to this
26307 -> button.
26308.2 -> We're going to add more styles so
that it looks like our final design.
26313.27 -> To make this easier,
26314.74 -> I'm going to rearrange my windows
and I'm going to put the final design
26319.72 -> at the bottom and then
our project at the top.
26324.94 -> This will make it easier to
compare the two designs next
26329.86 -> to make it look like the final design.
26332.38 -> We're going to style
our element one by one.
26336.46 -> Let's go back to our code and press enter.
26341.41 -> And next, let's change the
background color to black.
26346.1 -> Do you do that? We'll, type background,
26350.54 -> dash color, colon, black,
26355.43 -> and semicolon and save.
26359.18 -> Now our button has a black background.
26362.87 -> Let's keep going one by one.
26365.42 -> We'll change the text color
to white next. So in our code,
26371.09 -> we'll type color colon, white,
26376.07 -> and semicolon and save.
26380.33 -> Now if you're wondering how
I know all these properties,
26383.6 -> you can usually find them by searching
in Google. Just make sure you
26388.17 -> search for what you are trying to do.
26392.03 -> Let's keep going one by one.
26394.97 -> The next thing will change is
we're going to add spacing on the
26399.29 -> inside of the button.
26401.57 -> In CSS space on the inside
of an element is called
26406.67 -> padding.
26408.35 -> So we'll create a new line
and we'll use the property
26413.18 -> padding dash top colon
26418.34 -> 10 PX and save.
26423.44 -> So this will add space on the
inside of the element called padding
26428.6 -> at the top of 10 px.
26432.35 -> So the PX here means pixels.
26435.95 -> A pixel is a unit of
measurement in computers.
26439.7 -> Your screen is made up of
many small little squares.
26443.84 -> Each of these squares is called a pixel.
26447.02 -> So a pixel is the smallest thing
that you can have on your screen.
26451.88 -> Screen sizes are measured in pixels,
26454.67 -> images and video sizes are
also measured in pixels.
26459.62 -> And don't worry, the more
you work with pixels,
26462.56 -> the more you get used to how
big a pixel is. So in this
26467.24 -> example,
26468.23 -> 10 pixels is equal to this
amount of space and it looks
26473 -> pretty close to the final
design. So let's keep going.
26477.5 -> We'll add space on the inside of
the element at the bottom this time.
26483.05 -> So we'll create a new
line and type padding
26488.45 -> dash bottom colon 10
26493.54 -> PX again and save.
26498.05 -> And that adds space at the bottom
of the element of 10 pixels.
26503.81 -> Next, let's increase the space
on the left and the right.
26509.18 -> We'll go into code and add padding.
26514.01 -> Dash left colon,
26517.28 -> 10 pixels and padding.
26521.93 -> Dash right colon 10 pixels.
26527.85 -> Let's save.
26530.55 -> And it added some extra
space on the left and right,
26534.75 -> but I think our final design has a
little more space on the left and right.
26539.88 -> So let's go back and increase
our padding. So instead of 10,
26545.1 -> let's try 15 on both sides.
26549.66 -> So we'll save.
And now the spacing looks close
26554.49 -> enough to the final design. So in css,
26558.75 -> it's normal to do some trial and
error to get the styling right.
26564.06 -> Let's keep styling this one by one.
26567.15 -> Next we'll make the text thicker or bold.
26571.95 -> So let's go into our code and
to change the thickness of the
26576.45 -> text,
26577.47 -> we'll use the property font dash weight
26583.02 -> colon bold. Let's save.
26589.02 -> And that will make our text
bold. So we're almost there.
26593.64 -> Now let's make the corners
rounded like in the final design.
26598.56 -> We'll go back to our css.
26600.99 -> And the property for making the
corners round is called border
26607.77 -> radius.
26609.6 -> And we'll make it colon five pixels.
26614.22 -> Let's save.
26616.65 -> And you can see that it
made our corners round.
26620.49 -> So the pixels here tells the computer
how round we want the corners to be.
26626.1 -> The higher the pixels,
26627.69 -> the more round it will get.
So if we change this to 10
26632.25 -> pixels and save,
26635.55 -> it will make the corners even more round.
26639 -> So let's change this to something
really big to make it completely round.
26644.31 -> We'll change this to 50 pixels and save.
26650.79 -> And now our button is completely round.
26654.27 -> The last style we're going to
add is in the final design.
26658.26 -> If we put our mouses over the
button, it turns into this hand icon.
26663.54 -> So we call this a pointer and we're
going to do the same thing in our
26668.07 -> project.
26669.57 -> So let's go to our code and
to create that pointer icon,
26675.06 -> we're going to use the property cursor,
26679.14 -> colon pointer,
26683.13 -> and let's save
26685.74 -> and put our mouse over the button and
you'll notice it turns into this hand
26690.66 -> pointer icon. And that's it.
26693.63 -> Now our subscribe button looks
like the final design. Next,
26698.7 -> let's click the subscribe button.
26701.68 -> You'll notice that it
only changes the text,
26704.95 -> but if we click the final design,
26708.55 -> it also changes the background
color and the text color. So we're
26713.53 -> going to learn how to change
the CSS when we click a button.
26719.02 -> Let's go back to our code.
26720.85 -> And this time we're going to
scroll down to our JavaScript,
26725.23 -> which is here.
26727.48 -> So we learned in the previous lesson
we can get HTML elements from the
26732.25 -> page and put them inside our JavaScript.
26736.33 -> And we also learned that these
HTML elements are just JavaScript
26741.07 -> objects and they can have
properties like inner
26745.48 -> text and inner html.
26749.38 -> Every element has another property
we can use called class list.
26754.84 -> Class list gives us control
of the class attribute.
26759.52 -> So one solution we can do
is when we click the button,
26763.54 -> we can add a class,
26766.06 -> and then this class will
have different styles.
26769.99 -> So let's see how we do that in our code.
26773.2 -> We'll scroll down to
the subscribe function.
26776.86 -> And when we click the button
and make the button subscribed,
26780.97 -> we're also going to add a class.
So let's create a new line
26786.7 -> and we'll type button element
26791.74 -> dot class, capital L list.
26797.98 -> So class list itself is an object,
26801.13 -> which means it has properties
and methods we can use.
26805.33 -> One method is called dot add,
26808.69 -> which adds a class to an
element. So after this,
26813.4 -> let's type dot, add and brackets.
26819.91 -> And now inside these brackets
we're going to put a string.
26824.71 -> So this string is a class that we want
to add. When we click this button,
26830.26 -> let's add a class called is
26835.54 -> subscribed and save.
26840.64 -> So now every time we click this button,
26844.12 -> it will add a class to the
button called is subscribed.
26849.85 -> Let's give it a try first.
26852.58 -> We'll right click on the
page and then click inspect
26858.97 -> and we'll go to the elements tab and
I'll rearrange my windows so you can
26863.95 -> see it. And then inside the html,
26868.81 -> pay attention to the class of the button.
26872.71 -> Now when we click the button,
26875.62 -> it's going to add an extra
class called is subscribed.
26880.79 -> So that's what this line of code does.
26884.36 -> And now that this button
has the is subscribed class,
26887.99 -> we can style it in our css.
26891.38 -> So let's go back to our code
and we'll scroll up to our css.
26897.29 -> And here we'll type.to style a class
26902.54 -> and will style. The
class is dash subscribed,
26907.19 -> is dash subscribed and curly
26912.17 -> brackets. And now inside
these curly brackets,
26916.73 -> let's change the background color
to gray and the text color to
26921.56 -> black background dash color
26927.2 -> colon gray,
26930.35 -> and then color colon black.
26936.14 -> And make sure to type these styles
below the subscribe button styles
26941.09 -> so that these styles will
override the styles above.
26946.04 -> Now if we save and then click our button,
26952.52 -> it will add the is subscribe class.
26955.85 -> And now this button will get our
new styles that we added here.
26961.13 -> So that's one way to change
the CSS when we click a button.
26966.86 -> All right, now I'm going to
move this back to the top.
26972.8 -> And notice that our background color
is different from the final design.
26978.2 -> The final design uses a much lighter gray.
26982.07 -> So how do we get this
exact color? To do that,
26986.57 -> we're going to open
the elements tab again.
26989.96 -> So on this page we're
going to right click,
26994.52 -> click inspect,
26997.49 -> and then click the elements tab
and I'll rearrange my windows
27002.53 -> so we can see it.
27007.21 -> So in this section, in the style section,
27010.51 -> we can see the CSS that the element has.
27014.35 -> So first let's actually find
this button which is right here
27019.69 -> and we'll click it
27022.27 -> And here it will show us
the CSS that this button has
27028.09 -> and it will show us the background
color that we should use.
27031.9 -> So let's make a copy of this
color and put it into our code.
27036.88 -> Right click copy and here
27042.28 -> we'll remove it. And
right click and paste.
27048.91 -> Now let's save
27051.88 -> And go back to our project and try it out.
27057.2 -> And now we get the exact same
color as the final design.
27061.79 -> So by the way, this color
is known as an RGB value.
27067.25 -> RGB means red, green, and blue,
27072.17 -> and computers can create any
color using a combination of
27077.06 -> red, green, and blue.
27080.39 -> So the first number here is how
much red we want in our color.
27085.16 -> The second number is
how much green we want.
27088.07 -> And the third number is
how much blue we want.
27091.67 -> Each number goes from zero to 2 55 0
27096.26 -> means less color and darker 2 55 means
27100.82 -> more color and lighter.
27103.94 -> So this color here uses two
40 for all of the colors,
27108.68 -> so it's close to 2 55 and
will give us a very light gray
27113.51 -> color that you see here. Next,
27118.76 -> if we go back to the final design
and we click our button again,
27124.4 -> it will change back to the original style.
27128.06 -> So we're going to create this
feature in our project as well.
27132.71 -> So one way to do this is when
we click the button again,
27136.67 -> we can remove this class. So
let's scroll down to the bottom
27144.2 -> to the subscribe function.
27146.69 -> And when we click the button and
we change it back to subscribe,
27151.13 -> we can remove this class.
27154.13 -> To do that class list has
another method we can use called
27158.99 -> remove.
27160.61 -> So let's create a new line and we'll type
27164.99 -> button element dot class,
27170.18 -> capital L, list dot,
27173.99 -> remove and brackets.
27178.88 -> So this does the opposite of.ad.
27182.36 -> It will remove a class from this element.
27186.17 -> So inside the brackets we'll
type a string and the class we
27190.94 -> want to remove, which is
27195.62 -> sub described and save.
27201.65 -> Now let's try out our project.
We'll click the button,
27206.18 -> it will get the class is subscribed
and get the extra styles.
27211.34 -> And now when we click the button
again it will remove the class
27216.44 -> and it will remove the extra styles.
27221.27 -> So notice here that when we add a class,
27224.66 -> we just type the class name.
27227.09 -> We don't type a dot and the
class name like we did for query
27231.69 -> selector,
27233.33 -> typing a dot only makes
sense in query selector.
27238.35 -> Next we're going to style
the text on the page.
27242.91 -> Let's scroll up to our css.
27245.91 -> And one thing we can do is to
style all the paragraph elements on
27250.9 -> the page using this code P and
27255.66 -> curly brackets. However, we're
going to use a better solution.
27261.3 -> Instead of styling all the paragraphs,
27264.09 -> we're just going to
style the body element.
27268.56 -> When we change the text
in the body element,
27271.65 -> it will change the text
in the entire page.
27275.61 -> So inside these curly brackets,
let's change the text here.
27281.28 -> So we're going to use a
different style of text.
27284.79 -> This is called a font. To change the font,
27289.08 -> we're going to use this property font dash
27293.73 -> family colon,
27296.88 -> and we'll change it to aerial,
27301.02 -> which is what I used in the final design.
So let's save
27307.02 -> and this will style all the
text inside the body and
27311.73 -> change the font to aerial.
27315.03 -> And a good practice is to write
any styles for the body at the top.
27320.34 -> So if we need to, we
can override it later.
27324.18 -> So let's move these to the top.
27326.4 -> We'll right click cut
27331.17 -> and then up here
27333.96 -> create some new lines and
right click and paste.
27340.71 -> And we're going to add one
more style Before moving on,
27344.82 -> let's add some space between the
subscribe button and the second project.
27350.58 -> So earlier we learned that space
on the inside of an element is
27355.57 -> called padding space.
27358.23 -> On the outside of an
element is called margin.
27362.82 -> So inside our subscribe
button at the bottom,
27367.62 -> let's add a property called margin dash
27372.96 -> bottom colon 30 pixels
27378.39 -> and save.
27380.73 -> So this will add space on the
outside of the element at the bottom
27385.86 -> of 30 pixels.
27388.68 -> Now let's move on and style the
Amazon shipping calculator with
27393.06 -> css. Again,
27395.49 -> we'll add a class to these elements
and then style them in our css.
27401.34 -> Let's scroll down to the text
box, which is the input element.
27407.1 -> And we're going to add
another class by typing space.
27412.08 -> And let's use the class cost dash input.
27418.99 -> And now we're going to style
this in css. So let's scroll up.
27424.57 -> And here we'll style
the class using dot cost
27429.88 -> dash input and curly brackets.
27435.13 -> And inside we'll style this one by one.
27439.3 -> Let's look at our final design
and see what styles we need.
27444.01 -> So first,
27445.12 -> let's change the text size because
our text is a little smaller than the
27450.04 -> text here. So the change the text size,
27454 -> we're going to use font dash size
27459.07 -> colon,
27460.39 -> and let's try 15 pixels and save.
27466.93 -> And now our text looks close
enough to the final design.
27472.06 -> Next, let's add some
space inside the text box.
27477.1 -> So remember, space inside an
element is called padding.
27482.65 -> So we're going to type padding dash top
27488.05 -> of 10 pixels, padding,
27492.13 -> dash bottom, also 10 pixels.
27497.71 -> And let's add padding to the left
27502.87 -> 10 pixels and padding dash
27507.67 -> right of 10 pixels.
27513.34 -> So this will add space on the
inside of our text box in every
27517.96 -> direction if we save.
27522.16 -> Now it looks just like the final design.
27526.36 -> Now I'm going to show you a shortcut for
padding that will save us some typing.
27531.97 -> So if we create a new line,
27534.73 -> we can actually use a
property called padding
27539.44 -> and colon and then type 10 pixels.
27545.26 -> This padding property lets us add
padding on multiple sides at once.
27551.08 -> If we type one value here, like 10 pixels,
27554.8 -> it will add 10 pixels to every side.
27558.31 -> So this line does the same
thing as these four lines above.
27563.86 -> So let's actually comment
this out using slash star
27569.29 -> and star slash and save.
27574.69 -> And you can see that this one
line of CSS did the same thing as
27579.55 -> the other four lines of css.
27582.43 -> So this shortcut can save
us some typing. Next,
27587.17 -> let's move on and style the
calculate button. Again,
27592.04 -> we'll add a class to this
button so we can style it. So in
27596.9 -> this button, let's add a class attribute.
27601.64 -> Class equals calculate
27606.71 -> dash button.
27609.59 -> Now let's style this in
our C S s by scrolling up.
27614.9 -> And here we'll type dot calculate
27620.15 -> dash button and curly brackets.
27625.91 -> And inside these curly brackets, we're
going to style this button one by one.
27631.73 -> So let's start with the background color.
27634.88 -> So a type background, dash color,
27640.64 -> colon, green,
27643.04 -> and semicolon and save.
27647.48 -> Next, let's change the
text color to white.
27651.8 -> So we'll type color colon white
27657.86 -> and save again. Okay,
27660.74 -> let's keep going and we'll remove
the border around this button.
27665.84 -> So we'll type border colon,
27670.88 -> none save. Next,
27675.44 -> let's make our text a little
bigger like in the final design.
27680.42 -> So we'll type font dash size
27686.09 -> and make it 15 pixels and save.
27692.39 -> Okay, so now let's add the space
on the inside of the button.
27698.09 -> So we're going to use this shortcut again,
27701.66 -> we'll type the padding property colon,
27706.76 -> and this time we're going to
give it two values separated by
27711.02 -> spaces,
27712.58 -> 10 pixels and maybe 50 pixels.
27718.52 -> So it's easier to see what this does.
27721.85 -> So when we give two values to padding,
27725.36 -> the first value is the vertical
padding. So the top and bottom.
27729.89 -> The second value is the
horizontal padding or
27734.45 -> left and right if we save.
27739.61 -> So you can see that the left
and right has a lot of padding,
27743.21 -> which is 50 pixels.
27746.33 -> So now let's make this
match our final design.
27749.75 -> So instead of 50 pixels,
27751.94 -> let's bring it down to 15 pixels and
27756.5 -> save. Okay, so that looks pretty close.
27761.15 -> Let's also increase the padding on
the top and bottom so that the text
27765.86 -> box and the button line up with each
other like in the final project.
27772.41 -> So let's change the
vertical padding to maybe 12
27777.07 -> pixels and save.
27780.93 -> The last thing we'll style for this
project is when we put our mouse over the
27785.1 -> button, it turns into the
pointer icon. So to create this,
27790.5 -> we're going to use the property cursor,
27794.73 -> colon pointer,
27798.72 -> and save and give it a try.
27803.67 -> And that's it. We just finished
styling the Amazon shipping calculator.
27808.92 -> So now let's give this a try.
27811.38 -> We'll type 25 in the text
box and press calculate.
27817.35 -> And at the bottom it will
add $10 of shipping and show
27821.56 -> $35. Finally,
27825.12 -> we're going to style the
last project in this lesson,
27828.07 -> which is the rock paper scissors project.
27831.36 -> And this will finish the project.
27834.42 -> Let's go back to super simple.dev
and we'll scroll down on this
27839.4 -> page and then click this
link to show the final design
27844.29 -> for rock paper scissors.
27846.81 -> So I'll rearrange my
windows so we can see this
27851.61 -> And we're going to change the buttons
to these nice big icons for each
27856.47 -> of the moves. And when we click a move,
27860.22 -> it will show the result in
bold and show an icon of the
27864.97 -> move that we picked and the
move that the computer picked.
27869.25 -> So we're going to make this
project look really nice.
27873.54 -> Now let's get started.
27875.04 -> I'm going to rearrange my windows
back so we have it at the bottom.
27880.38 -> And let's create a copy of the
Rock paper Scissors project.
27884.43 -> For this lesson,
27886.35 -> we'll go to our code editor
and click here to show our
27890.82 -> files.
27892.77 -> And we're going to make a copy
of zero nine dash rock paper
27897.57 -> scissors.
27898.95 -> So let's click this file
and then right click
27903.54 -> copy. And down here,
27907.23 -> right click and paste.
27911.19 -> And we'll rename this file
by right clicking rename.
27917.58 -> And at the end we'll remove
copy and at the beginning
27923.01 -> we'll change it from nine to 10 and
27927.6 -> press enter.
27930.69 -> Now let's click here to hide
the files and we can close the
27935.52 -> zero nine file.
27938.28 -> And let's open the 10 rock paper
scissors file in the browser.
27943.95 -> So we'll right click and
then open with live server.
27951.25 -> And I'll move this tab to
the top here so we can see it
27956.2 -> side by side.
27958.51 -> So let's start by styling the body.
27962.14 -> We want to make the background
color of the entire page,
27965.71 -> this dark gray color.
27968.53 -> We'll go into our code and let's
create a style element so we can
27973.36 -> write some CSS inside the head.
27977.56 -> Let's type less than style greater than.
27982.99 -> And then inside here we're
going to style the body.
27987.07 -> So we'll type body and curly brackets.
27992.56 -> Now inside here we're going to
change the background color.
27997.36 -> So background dash color
28002.04 -> colon,
28003.66 -> and we're going to get the color
that we see here by right clicking.
28008.79 -> Click inspect
28012 -> and then go to the elements tab
28015.48 -> and I'll rearrange it so we can see it.
28020.13 -> And then here we'll find the
body element and click it.
28025.92 -> And in this style section we can
find the background color that we
28030.87 -> need. So let's select this.
28034.98 -> And right click copy. And in here,
28041.16 -> right click and paste
28045.81 -> and a semicolon at the end.
28048.9 -> Let's save and I'll move
this back to the corner.
28055.59 -> And now our project has the same
background color as the final design.
28061.02 -> Next, let's make the tex color white.
28065.1 -> So in our css we'll use the color property
28070.77 -> and colon,
28072.45 -> white and semicolon and save.
28077.73 -> And that will make our text white. Next,
28081.15 -> let's change the style
or the font of this text.
28085.86 -> We'll type font, dash family,
28090.87 -> colon, aerial,
28093.99 -> which is what the final
design uses and save.
28099.87 -> All right,
28100.83 -> now let's style these elements one
by one to match the final design.
28106.44 -> We'll start with this
paragraph at the top.
28110.25 -> So inside the paragraph
element, let's add a class.
28115.02 -> So we can style it in css,
28118.17 -> we'll add class equals,
28122.07 -> let's call this the title.
And then in our css,
28127.57 -> we can style this class by
starting with a dot and then
28132.52 -> title and curly brackets.
28137.29 -> So let's make our title really bake,
28140.38 -> like the final design will change the font
28145.06 -> dash size,
28147.04 -> colon 30 pixels and save.
28153.19 -> So that looks close enough.
Next, let's make the text bold.
28158.77 -> In our css,
28160.33 -> we'll use font dash weight
28164.82 -> colon bold and save.
28170.62 -> Now let's move on to styling the buttons.
28174.22 -> So first we're going to need these
images in our project and I'll show you
28179.05 -> how to get them.
28181.24 -> We'll put our mouse over the
rock image and we'll right click
28186.49 -> and we'll click save image.
28190.15 -> And now we're going to find the
folder that contains all of our code.
28195.01 -> So for me,
28195.94 -> it's on the desktop and
it's this folder right here.
28200.86 -> So I'll double click this folder
and then leave the file name as the
28205.63 -> default rock emoji and click save.
28211.72 -> And now in our code
editor, if we click here,
28215.8 -> we should be able to see the rock image.
28219.97 -> Let's do the same with the
paper and scissors image.
28223.99 -> So we'll hover over it,
right click save image,
28230.26 -> and in the same folder
that contains our code,
28233.56 -> we're going to save the
paper image. And finally,
28238 -> right click save image and we'll save the
28242.62 -> scissors image. All right,
28246.49 -> now that we have these
images in our code editor,
28249.79 -> let's learn how to load
them onto the page.
28253.54 -> So we can do this using an HTML element.
28257.71 -> So we'll go back to our HTML
code and we'll scroll down
28263.89 -> an inside the button.
28266.14 -> We're going to add an image element.
28269.65 -> So let's type less than I m G and greater
28274.54 -> than. So this is the
image H T M L element.
28279.4 -> It loads an image onto the page.
28281.83 -> The image element doesn't
require a closing tag.
28286.57 -> This is called a void element.
Now, to load an image,
28291.28 -> we're going to add an attribute
to this element called
28296.57 -> src. So SRC stands for source.
28301.9 -> It tells a computer which
file or image to load.
28306.74 -> So let's look in our project
For this button we're going to
28311.48 -> load rock dash emoji png
28316.25 -> inside the source attribute or type rock
28320.81 -> dash emoji dot p n g.
28326.18 -> So what this does is it will
look for the file with this name
28330.74 -> beside the HTML file and
it finds it right here and
28335.67 -> it will load it onto the page if we save.
28341.09 -> Now inside our button,
it loaded the rock image.
28346.43 -> Right now this image is too big.
28349.25 -> So let's use CSS to decrease
the size of this image.
28354.2 -> We'll hide the files and let's
give a class attribute to the
28359.09 -> image element so we can style it.
28362.21 -> So we'll type class equals and let's call
28367.11 -> this a move dash icon.
28372.23 -> And I'm also just going to add some
new lines to make the code a little
28377.06 -> easier to read. So we'll
scroll up to the CSS
28383.12 -> and we're going to style
this class using dot
28388.01 -> move dash icon and curly brackets.
28394.16 -> And let's decrease the
height of this image.
28398.27 -> We can use the property height colon
28403.4 -> and a pixel value 50 pixels
28408.17 -> and save.
28410.6 -> So this will make the height
of this image 50 pixels
28415.73 -> and it will also resize the width
automatically so that the image keeps
28420.5 -> its shape.
28422.18 -> So this size looks pretty close to
the final design so we can move on.
28428.54 -> Another feature of the source
attribute is that we can put our
28433.04 -> files into folders.
28435.68 -> So let's open the files by clicking here.
28440.3 -> And let's say that we want to organize
all of our images into a folder.
28445.82 -> So we're going to create a
folder by clicking this icon.
28451.04 -> And let's name this folder images.
28457.52 -> And we're going to drag
these images into this folder
28462.56 -> and drag this in here and in here.
28469.79 -> Now unfortunately, you can see that
the image doesn't load anymore.
28474.89 -> And that's because if we look
at our code source tells a
28479.61 -> computer to look for this
file beside this HTML file.
28486.87 -> And right now there is no
file called rock emoji dot
28491.52 -> png because we put it in a folder.
28495.27 -> So to tell the computer to
look inside this folder,
28498.96 -> we're going to type the
folder name at the start,
28502.38 -> which is images,
28505.35 -> and then we're going to type
a slash to go into the images
28509.91 -> folder. And then look for this
file, which is right here.
28515.67 -> If we save
28518.13 -> the computer is now able to find
this image and load it onto the
28522.99 -> webpage. So this feature
is called file paths.
28527.82 -> We can tell the computer to look
for a folder beside the HTML file
28532.86 -> like images and then use a
slash to tell it to go into the
28537.84 -> folder and look for a file.
28543.09 -> Now let's use this code to load
the other images onto our page.
28548.73 -> So for the paper image, we're
going to go to this button,
28552.96 -> remove the text,
28555.27 -> and then create an image
element less than i
28560.19 -> m G, greater than,
28562.98 -> and we'll give it an
attribute source equals and
28567.9 -> we'll locate the image it
is in the images folder,
28572.76 -> so we'll type images and then slash to
28577.65 -> go into the folder and we'll
load the file paper dash
28582.33 -> emoji dot p g. So paper
28587.82 -> emoji png and save.
28594.78 -> So our image is really big.
28597.27 -> Let's give it the same class
that we gave the rock image.
28601.89 -> So we'll add a class equals
28606.33 -> move dash icon and save.
28612.96 -> So these styles get applied to
all elements with a class move
28617.85 -> dash icon, so it applies
to both of these elements.
28624 -> Now let's do the same thing for the
scissors button. We'll remove the text
28630.36 -> and we'll replace it with an image element
28635.16 -> and we'll give it the source attribute
28639.27 -> images slash scissors
28644.22 -> dash emoji p n g.
28649.17 -> And we'll also give this a class
28653.7 -> Of dash icon to resize the
28658.44 -> images like up here. Let's save.
28663.1 -> And now we have all the
images that we need.
28668.26 -> Now let's make these buttons
look like the final design.
28672.79 -> We'll scroll up and let's
add a class to these
28677.5 -> buttons so we can style them with css.
28681.79 -> So we'll add class equals and let's
28686.44 -> use move dash button.
28691.24 -> And for this button we'll
add the same class class
28696.07 -> equals move dash button
28700.93 -> as well as for the third button class
28705.67 -> equals move dash button.
28710.14 -> Now let's scroll up to our CSS
and we're going to style this
28714.67 -> class using dot move dash
28719.71 -> button and curl your brackets.
28724.21 -> So first let's change the background
color to match the background color
28729.22 -> of the page.
28730.99 -> So we'll use background dash color
28736.33 -> colon and we'll use a special value called
28740.8 -> transparent and this will
make the button see through
28746.38 -> if we save. Now these
buttons are see through.
28752.17 -> Next, let's add this white
border to our buttons.
28756.88 -> So we'll use the border property colon
28761.89 -> and we're going to give it three values.
28764.92 -> The first value is our border
width or how thick the border is.
28770.5 -> Let's use one pixel for now.
28774.22 -> The second value is the border
style and we'll use solid
28780.01 -> because it's a solid border.
28783.4 -> Other values we can use
here are dotted or dashed.
28788.71 -> And the third value is the border color.
28792.4 -> So we're going to use white
28795.64 -> and semicolon at the end and save.
28801.1 -> And that will add a border. So let's
make our border a little thicker,
28805.81 -> like the final design. We'll
change this first value,
28809.95 -> which is the border width
to three pixels and save.
28816.22 -> Okay, so that looks pretty close.
28818.77 -> Now let's change the size of our buttons.
28822.37 -> Usually we use the padding to
add space on the inside of an
28826.93 -> element, but in this case our
images have different sizes.
28832.03 -> So we're going to use width and
height to set an exact size.
28837.59 -> So in our c s s, we'll type width
28842.84 -> colon,
28844.13 -> and let's make it a
hundred pixels and height
28850.49 -> and also 100 pixels and save.
28856.85 -> So it looks like our final design is a
little bigger than what we have here.
28862.28 -> So let's increase the
width and the height.
28865.61 -> So let's try 120 pixels and save.
28871.25 -> All right, so that looks pretty close.
Now let's make these buttons route.
28876.92 -> And the property for that is called border
28882.29 -> radius, colon.
28885.95 -> And to know how much we
need to make it round,
28889.19 -> we can set it to half of
the width or the height.
28893.51 -> So we'll set it to 60 pixels and
28898.19 -> save. Okay, so it's
coming along really well.
28903.02 -> And lastly, we're going to add
some space between the buttons.
28908.03 -> So remember that space outside
of an element is called margin.
28913.61 -> So let's add some margin on the right.
28917.36 -> So what type margin dash
28921.95 -> right colon and maybe 10
28926.57 -> pixels and save.
28931.01 -> And finally when we put
our mouse over the button,
28934.76 -> it turns into a pointer.
28937.37 -> So the property for that is cursor,
28941.99 -> colon, pointer and save.
28947.93 -> And now our buttons
match the final design.
28952.01 -> So let's keep moving and style
the next part of the project,
28956.72 -> which is the result and the
moves. If you don't see this here,
28961.31 -> you can just play the game and
it'll give us a new result.
28966.5 -> So to make this easier to style,
we're going to go into our code,
28971.27 -> we're going to find the
result which is here,
28974.48 -> and we're going to add
some fake results like you
28979.22 -> win. Let's save.
28983.3 -> And now we have this result
and we're going to style it.
28987.44 -> So let's give this a class of result.
28992.72 -> And then in our CSS
28995.87 -> we're going to style
the class dot result and
29000.85 -> curly brackets. So let's
make the text bigger.
29006.04 -> We're going to use font, dash size, colon,
29011.47 -> and maybe 25 pixels and save.
29017.03 -> Okay, that looks pretty good.
Let's make the text bold.
29021.71 -> So we use font dash weight,
29026.39 -> colon bold and save.
29031.7 -> And finally we're going to add
extra spaces between this and the
29036.23 -> buttons.
29039.29 -> So we'll add margin,
29042.62 -> dash top and maybe 50 pixels
29047.66 -> and save. Okay,
29051.14 -> so I think that looks close
enough. Now let's style the moves.
29056.78 -> And again,
29057.8 -> we'll scroll down and we're going
to add some fake moves in here
29062.87 -> so it's easier to style.
29065.51 -> So we'll type you and then an image.
29071.45 -> So let's use the less than image
29076.13 -> and the source attribute.
29079.07 -> And let's just load the rock image
and the scissors image for the
29083.72 -> computer.
29085.16 -> So to load the rock image will
look inside the images folder
29090.23 -> slash to go into the
folder and then rock dash
29095.36 -> emoji png.
29098.15 -> So rock dash emoji
29103.18 -> png and greater than.
29106.13 -> And we'll add another
image less than image
29111.08 -> source equals images slash
29116.27 -> the scissors emoji, scissors
29121.72 -> emoji png and greater than.
29127.22 -> And finally, the text computer computer.
29133.04 -> Let's save. And this
will create some results,
29138.26 -> although the images are really big.
29140.96 -> So we can use the class
move icon to resize them to
29145.85 -> be the same size as the buttons.
So for both of these images,
29150.89 -> let's add the class move dash
29155.75 -> icon. And here as well,
29159.68 -> class equals move dash icon
29165.02 -> and save. And now our images look good.
29170.96 -> Next, let's style this score section.
29174.62 -> So the only thing we need here is
to add spaces between these two.
29180.17 -> So in this score element,
29183.44 -> let's add a class of score
29188.12 -> And we'll scroll up and style this element
29192.84 -> using dot score brackets.
29197.91 -> And let's add some margin at the top.
29201.54 -> So margin dash, top colon,
29206.28 -> 50 pixels and save.
29211.2 -> And let's compare it.
29212.88 -> And it looks like our final design
has a little more spacing than this.
29217.62 -> So let's change this to 60 pixels and
29222.39 -> save. And that looks close enough.
29227.25 -> And finally we'll style
the reset score button.
29231.84 -> So let's go back to our html,
29235.44 -> we'll add a class to this button.
29239.01 -> So here class equals reset
29244.2 -> dash score dash button.
29250.32 -> Is that the top?
29251.94 -> What type dot reset dash
29256.23 -> score. Dash button curly brackets.
29262.23 -> And we'll make the background color white.
29266.04 -> So background dash color, colon, white.
29272.58 -> And let's also remove the
border from our button using
29277.44 -> border colon, none.
29281.49 -> Let's save and see how it looks.
29285.96 -> And then let's increase the size of
this text because the final design
29290.61 -> looks a little bigger. So we'll add font,
29295.23 -> dash size, colon,
29298.5 -> 15 pixels and save.
29302.94 -> Now let's add some extra space
on the inside of the button.
29307.62 -> So that's padding, padding, colon,
29312.96 -> and we'll give it two values. The
first value is the vertical padding.
29318.84 -> Let's use 10 pixels.
29321.84 -> And the second value is
the horizontal padding.
29326.19 -> So let's use 15 pixels and save.
29333.57 -> And it looks like our final project
is a little shorter than our button.
29338.79 -> So let's change the
vertical padding to maybe
29343.47 -> eight and save.
29346.77 -> And the last step is to add
the cursor pointer. So here,
29352.77 -> cursor, colon pointer,
29357.3 -> and save. And that's pretty much it.
29361.44 -> We finished styling our
rock paper scissors project.
29365.25 -> So now I'm going to rearrange my
windows so we can see the entire design
29370.65 -> and it really nice.
29373.09 -> The last step here is to remove
these fake results and use
29377.53 -> JavaScript to insert
these results instead.
29381.64 -> So let's scroll down
29385.72 -> and we'll remove this result.
29390.52 -> And let's actually copy this code
because we want our JavaScript to
29394.84 -> generate this code.
29397.15 -> So we'll right click and copy.
29402.31 -> And let's scroll to the bottom
to where we insert the moves onto
29407.29 -> the page, which is here.
And instead of this text,
29412.81 -> we're going to right click
and paste the code that we
29417.67 -> had before. And this time,
29420.55 -> instead of picking rock every time
we're going to substitute this with the
29425.2 -> player move. So we'll remove this,
29428.95 -> and because this is
already a template string,
29432.16 -> we can insert a value
directly inside using dollar
29437.14 -> and curly brackets,
29439.36 -> and we'll insert the player move.
29444.55 -> Let's also insert the
computer's move in here.
29448.39 -> So we'll remove this and
insert a value using dollar
29453.19 -> and curly brackets and
will insert computer
29458.26 -> move. And now that we're
inserting this with JavaScript,
29463.54 -> we can scroll up and
remove the fake result,
29468.64 -> which is here, so we can
select it and delete it.
29474.82 -> Now let's save
29477.76 -> and we're not going to have anything in
our results, and when we click a move,
29483.73 -> it will show us the result and also
show us the moves that we picked.
29489.46 -> And that's it. We finished the
Rock Paper Scissors project.
29494.71 -> The last thing we're going to learn in
this lesson is how to organize our code
29499.06 -> into different files.
29501.88 -> So notice that right now all of our html,
29506.03 -> CSS and JavaScript is in one html file,
29510.82 -> and this makes the code harder to
read because the file is bigger and
29515.74 -> it mixes three different languages.
29519.07 -> To make our code more
organized and easier to read,
29522.61 -> we're going to separate each
language into its own file.
29527.77 -> So let's scroll down and we'll
start by separating our JavaScript
29532.81 -> into its own file.
29535.3 -> We'll click here to show our
files and then click this
29540.07 -> icon to create a new file
and we'll name this file,
29545.74 -> 10 dash rock, dash paper,
29550.82 -> dash scissors dot js,
29555.59 -> and press enter.
29558.65 -> So when we end a file with dot js,
29562.1 -> it tells the computer that this
file contains JavaScript code,
29566.51 -> not just text.
29569.24 -> Now let's go back to our
HTML file and we're going to
29573.8 -> move all of this code
into the JavaScript file.
29578.3 -> So we'll select this code
29583.61 -> and then we will right click and copy
29589.22 -> and inside the JavaScript
file will right click
29594.8 -> and paste. Now let's save
29600.95 -> and we'll go back to the HTML
file and we can delete all
29605.75 -> this JavaScript code.
29609.8 -> And now we're just going to load our
JavaScript file onto the webpage.
29615.59 -> To do that,
29616.58 -> we can use an attribute of
the script element called
29621.86 -> SRC or source. So we'll make it equal.
29626.93 -> And this does the same
thing as the image element.
29630.44 -> It tells a computer which file to load
29634.7 -> if we type 10 dash rock dash
29639.59 -> paper dash scissors dot js.
29645.77 -> This will look for a file called
10 rock paper scissors dot
29650.15 -> js beside our HTML file,
29654.02 -> which is this file here,
29656.21 -> and it will run all the
JavaScript inside this file.
29660.74 -> So it does the same thing as before,
29663.53 -> except now our JavaScript
code is in its own file.
29669.32 -> And this makes our code
cleaner because each file only
29673.76 -> contains one language and
each file also contains less
29678.44 -> code.
Now let's go back to the H T M L file
29683.72 -> and save.
29686.12 -> And you'll notice that our project
works the same way as before we just
29690.56 -> organized our code better.
29693.86 -> Another feature of the source
attribute is that it also uses file
29698.45 -> paths.
29699.62 -> So we can put this JavaScript file in
a folder and we'll be able to find it.
29705.26 -> For example,
29706.67 -> let's show our files and let's
create a new folder by clicking
29711.56 -> this icon.
29713.72 -> And let's name this folder scripts.
29719.78 -> So this folder will contain
all of our JS files.
29724.61 -> So we can drag this file into the folder
29731.97 -> and now we can locate it using
the source attribute by typing
29736.74 -> the folder name, which is scripts,
29740.67 -> and then a slash to go inside
this folder and look for
29745.56 -> this file and it will find it right here
29750.75 -> if we save. Everything works as normal.
29756.15 -> Another feature is we can
use multiple script elements.
29760.5 -> This lets us split our JavaScript
into multiple files and then load them
29765.42 -> all onto the page from top to bottom.
29769.89 -> Next we're going to learn how
to separate our CSS into its
29774.73 -> own file.
29776.82 -> Let's scroll up to our CSS
so we can do the same thing
29781.68 -> with css.
29783.66 -> So let's click the HTML file
And let's
29788.4 -> create a new folder
29791.4 -> and we'll call this folder
styles and press enter.
29798.06 -> So this folder will contain
all of our CSS code.
29802.2 -> Let's click the folder and we'll
create a new file by clicking this
29806.97 -> icon. And let's name this file,
29810.78 -> 10 dash rock dash paper,
29815.88 -> dash scissors dot css,
29820.74 -> and press enter.
29823.14 -> So ending the file with dot
CSS means this file contains
29828.59 -> CSS code and now we
can go back to our HTML
29834.18 -> and move our CSS into its own file.
29838.29 -> So let's select all this code
29842.37 -> and then right click copy.
29846.93 -> And in here right click and paste
29854.13 -> and save this file.
29857.22 -> Now let's go back to our H
T M L and we can remove this
29862.02 -> code
29864.39 -> and we'll learn how to load our
c s s file onto our website.
29870.15 -> So we're not going to use
the style element for this.
29874.29 -> We're going to use a different
element called the link element.
29879.06 -> So we'll type less
than, link greater than,
29884.43 -> and the link element doesn't
require a closing tag.
29888 -> This is another void element.
29890.94 -> So the link element uses two attributes.
29894.54 -> The first attribute is called R E L
29899.76 -> R E L means relation.
29902.73 -> This tells a computer what
type of file we're loading.
29907.18 -> So we're going to set this
attribute to style sheet.
29911.41 -> This means we're loading a
CSS file and then we will add
29916.33 -> a second attribute called H Ref.
29919.99 -> So H ref tells a computer
which file we want to
29924.97 -> load. So this also supports file paths.
29929.98 -> So we can type the styles folder.
29934.54 -> This will look for a folder
beside the HTML called styles,
29940 -> which is this one right here.
29942.19 -> And then we'll type slash
to go inside the folder and
29947.03 -> look for this CSS file,
29949.93 -> which is 10 dash rock dash
29955 -> paper dash scissors dot css.
29961.3 -> So this will load all the CSS
inside this file and apply it to
29966.28 -> our page. So it does the
same thing as before,
29970.6 -> except we separated each
language into its own file.
29975.49 -> If we save,
29977.53 -> everything still works and all
the styles get applied. And just
29982.45 -> like the script element,
29984.04 -> we can also use multiple link
elements to load multiple
29988.84 -> CSS files.
29991.24 -> So that's how we separate
our code into separate files.
29995.08 -> Using the script element
and the link element,
29999.49 -> it makes our code a lot easier to
read because each file contains one
30004.44 -> language and it contains less code.
30008.58 -> And that's the end of this
lesson. As a final reminder,
30012.36 -> the CSS we learned in this
lesson is just a review.
30016.41 -> If you want to learn CSS in more detail,
30019.41 -> you can check out my H T M
L and CSS full course in the
30023.94 -> video description.
30026.28 -> So in this lesson we
reviewed CSS and added CSS
30031.2 -> to all of our projects. We learned
about the class list property,
30036.39 -> which lets us control the
class attribute of an element.
30040.74 -> We finished our rock paper scissors
project and we learned how to
30045.18 -> organize our JavaScript and
CSS code into separate files.
30050.79 -> Here are some exercises to
help you practice using html,
30055.05 -> CSS and JavaScript together.
30083.2 -> In this lesson we're going to learn
two more features of JavaScript
30087.76 -> called arrays and loops.
30090.73 -> And we're going to use these features
to create this to-do list project.
30096.04 -> First, let's create a
new file for this lesson.
30100.54 -> We'll go to our code editor
and click up here to show our
30105.13 -> files.
30106.42 -> And this time make sure you have
one of these HTML files selected
30111.46 -> so we don't create the new file
in one of these folders. So
30116.42 -> now we're going to click this
icon to create a new file
30121.84 -> and we're going to name this file 11 dash
30126.4 -> arrays dash and dash
30131.29 -> loops dot html and press
30135.88 -> enter.
30138.4 -> Now let's copy the previous
lesson into this file.
30142.6 -> So we'll click on 10 dom
projects and we'll type here
30147.73 -> and type CTRL A or command
A to select the code.
30152.86 -> And then right click copy.
30157.36 -> And in here,
30160.06 -> right click and paste.
30164.35 -> Now let's hide our files and
we'll prepare this file for this
30169.12 -> lesson. So we can scroll to the top
30174.22 -> and we'll change the title to array
30179.65 -> and loops.
30182.83 -> And let's remove all of the css
30191.38 -> and we'll also remove the H T M L,
30195.94 -> which is right here,
30202.06 -> and we'll remove all the JavaScript.
30208.75 -> Now let's save and we'll
open this file in the browser
30213.55 -> by right clicking open with live server.
30219.91 -> And let's also open the
console. So we're right click,
30224.71 -> click inspect and click the console.
30230.65 -> And now we can close the
previous tabs and the
30235.78 -> previous code for now
30240.22 -> Until we just have the lesson 11 file.
30244.54 -> Now we're ready to learn arrays.
30247.6 -> And array is another type of
value in JavaScript and it
30252.22 -> represents a list of other values.
30256.18 -> So let's do an example and
create our first array.
30260.86 -> We'll go into the script element
and we're going to type open
30265.55 -> square bracket and closed square bracket.
30269.45 -> And inside the square brackets
we'll type a value like the number
30274.37 -> 10,
30275.93 -> and then we'll type comma and
another value like the number
30280.64 -> 20. And then again,
30283.76 -> and a third value like the number 30.
30288.65 -> So this is an array and
it represents a list
30293.63 -> of three numbers, 10, 20, and 30.
30299.09 -> Now themselves are also values,
30302.87 -> which means we can save
them in a variable.
30306.5 -> So at the front we can create
a variable using constant,
30312.17 -> and let's name it my
array and we'll make it
30317.21 -> equal to this array and
we'll add a semicolon at
30322.16 -> the end.
So now we created a list of values
30327.2 -> and we saved this list in this variable.
30331.61 -> Let's create a new line and we'll console
30336.41 -> dot log my array
30341.75 -> and save,
30344.15 -> and it will display the list
of values in the console.
30348.5 -> So that's basically what an
array is. It's a list of values.
30354.41 -> Now to get a specific value and an
array, we can use square brackets.
30360.35 -> So let's create a new
line and we'll type my
30365.69 -> array and square brackets.
30369.59 -> Inside these brackets we'll
put a number like zero.
30374.9 -> This number represents
the position in the array.
30378.95 -> So zero means the first value if we
30383.54 -> console dot log this code
30390.71 -> and save my array.
30394.49 -> Square bracket zero gives us
the first value, which is 10,
30399.62 -> and that's what's
displayed in the console.
30403.01 -> Now if we change this to one,
30407.33 -> this will get us the
second value in the array,
30410.48 -> which is 20.
If we save,
30414.26 -> it displays 20.
30416.63 -> So this number represents
the position in the array.
30421.07 -> Zero is the first value,
one is the second value,
30426.44 -> two is the third value, and so on.
30430.88 -> We can also change a value
in an array also using square
30435.53 -> brackets.
30437.06 -> So let's create a new
line and we'll type my
30442.77 -> array square brackets.
30445.95 -> And let's say we want to
change the first value,
30449.88 -> so we'll type zero for the
first value and we just make it
30454.5 -> equal to something else like 99.
30459.81 -> Now if we console dot log
30464.55 -> my array again and save.
30470.91 -> You can see that this change
the first value to 99.
30476.61 -> So that's basically how arrays work.
30479.52 -> We can access a value inside an
array and we can also change a
30484.23 -> value inside an array.
30487.5 -> Now that we understand
the basics of arrays,
30490.68 -> let's learn the syntax
rules To create an array,
30495.39 -> we start with an open square bracket
and we end with a closed square
30500.28 -> bracket inside we can put a list of values
30505.35 -> and we separate each value with a comma.
30509.73 -> We can also write an array
on multiple lines like this.
30515.61 -> We just put the new lines after the comma.
30520.47 -> Now to get a value inside an array,
30523.41 -> we can use square brackets
and a number like one.
30528.66 -> This number is called the index.
30531.81 -> It represents the position in
the array that we want to get.
30536.49 -> So the first value is index zero,
30540 -> the second value is index one,
30542.88 -> third value is index two, and so on.
30547.2 -> Notice that the index starts as zero.
30550.32 -> This is called a zero indexed array.
30554.55 -> Now inside an array we
can put any type of value.
30559.44 -> For example,
30560.97 -> let's create a new line and
we'll create a new array
30566.07 -> using square brackets.
30568.53 -> And inside we can put the
number one and then comma.
30574.14 -> And we can also put a string like hello
30579.09 -> and another comma,
30581.28 -> and we can put a bullion value like true
30586.14 -> and another comma.
30588.27 -> And we can even put an
object like curly brackets,
30593.79 -> name colon socks.
30599.79 -> Now an array itself is also a value.
30604.59 -> That means we can save
arrays in variables like this
30610.32 -> or even save it in an array. For example,
30615.81 -> in this array,
30617.29 -> we can add an array inside like one
30622.3 -> comma two.
30624.91 -> Next arrays have a weird behavior
when we try to check the type
30629.8 -> of an array. So on a new line,
30633.22 -> let's type console dot log
30638.53 -> type of,
30640.93 -> and then square brackets one,
30644.89 -> two and save.
30649.57 -> This will tell us that
an array is an object,
30654.61 -> and that's because an array
is actually an object,
30658.42 -> but it's just a special type of object.
30662.02 -> If we want to check if something
is specifically an array,
30666.43 -> we can use this code capital A
30670.36 -> array.is array
30676.03 -> brackets and inside the
brackets will put an array
30680.98 -> like square brackets one comma two.
30686.53 -> So this will check if
this value is an array.
30691.09 -> If we console dot log this result
30698.11 -> an and save it will display true.
30704.17 -> And finally, because arrays
are just a type of object,
30709 -> they also have properties
and methods we can use.
30713.26 -> So one useful property
is called dot length.
30717.88 -> So we'll type console dot log
30723.01 -> my array length.
30729.76 -> This will tell us how many
values are in the array.
30733.99 -> So my array has three values,
30737.86 -> so if we save, it will display three.
30743.38 -> Next we'll learn a useful
method of an array called dot
30748.48 -> push. This adds a value
to the end of the array.
30754.63 -> If we did my array dot
30759.13 -> push 100,
30763.15 -> this will add 100 to the end of my array.
30768.43 -> If we console dot log my
30774.19 -> array and save,
30778.63 -> you can see that 100 was added at the end.
30783.73 -> The last method we're going to
learn for now is called dot splice.
30788.92 -> This removes a value from
an array. For example,
30794.29 -> my array dot
30798.26 -> splice and brackets.
30802.46 -> And a splice takes two numbers.
30805.43 -> The first number is the
index that we want to remove.
30809.66 -> So let's say we want to
remove the first value,
30813.09 -> which is index zero.
30816.53 -> The second number we give to splice
is the number of values we want to
30821.33 -> remove.
If we give it one,
30824.84 -> it will remove one value at index zero.
30829.1 -> If we give it two,
30830.87 -> it will remove two values
starting at index zero.
30835.58 -> So for now,
30836.66 -> let's just remove one value
and let's create a new
30841.32 -> line and console dot log
30846.71 -> my array and save.
30852.8 -> You can see that splice removed
the first value from the array
30857.72 -> or index zero, which was 99. Alright,
30863.09 -> now that we understand the basics
of arrays and the syntax rules,
30867.95 -> let's do some practical examples.
30871.28 -> So I've prepared a project
we can do for this lesson.
30875.12 -> We'll go to our browser,
create a new tab at the top,
30881.33 -> and here we'll type super
30885.89 -> simple.dev/projects/erase
30894.68 -> and press enter.
30897.8 -> So this page contains the to-do list
project we're going to create in this
30902.16 -> lesson. So down here is the
final version of the project.
30907.73 -> We can type a name for our to-do like make
30912.8 -> dinner,
30914.39 -> give it a due date and
then click add and it
30919.26 -> will add it to our list.
30921.59 -> We can add another to-do like wash dishes
30927.83 -> and then select due
date and click add again
30932.81 -> and it will add another to-do to our list.
30936.32 -> And each to-do also has a delete
button so we can delete it
30941.33 -> when we're finished the task.
30943.94 -> So this is the final version
of the project and these two up
30948.68 -> here are simpler versions of the project
that we're going to use to work our
30953.61 -> way up. So let's start with
the first project up here.
30959.57 -> We're going to open our
console by right clicking,
30963.8 -> click inspect and click the console.
30970.04 -> And the way this first project
works is we can type A to-do
30975 -> in this text box, like make dinner,
30980.73 -> and when we click add,
30983.28 -> it will add the to-do to an array
and display it in the console.
30989.13 -> If we type another to-do like wash
30993.87 -> dishes and click add,
30997.71 -> it will add it to the array
and display it in the console.
31002.87 -> So let's create this project. We'll start
by creating a file for this project.
31008.9 -> We'll go to our code editor
and click up here to show our
31013.46 -> files.
31015.17 -> And click this icon to
create a file and we'll name
31020.03 -> this 11 dash to do dash
31024.83 -> list dot html and press enter.
31031.85 -> Now let's copy the code from
arrays and loops dot html.
31037.01 -> So we'll click here
control A or command A,
31041.81 -> and then right click copy.
31046.31 -> And down here, right click and paste.
31053.18 -> And let's close this for now.
31056.99 -> We'll scroll up and change the title to
31062.66 -> do list and remove all the
31067.08 -> JavaScript code.
31072.41 -> And this time, instead of writing
all the JavaScript in here,
31076.1 -> let's actually put the
JavaScript in a separate file,
31080.21 -> which we learned in the previous lesson.
31083.18 -> So we'll open our files again
and this time we'll go to
31088.16 -> our scripts folder.
31090.47 -> We'll click this JS file and
we'll click this icon to add
31095.42 -> a new file to this folder.
31098.48 -> And let's name it 11 dash to-do
31103.58 -> dash list dot js and press
31108.29 -> enter.
31110.27 -> Next we're going to load
this file into our HTML file.
31116.09 -> So let's open this.
31118.34 -> And in the script element we can
remove the spaces and we're going to
31123.18 -> add an attribute called SRC
31127.73 -> equals.
31129.14 -> And we're going to load the
JavaScript file that we just created,
31133.55 -> which is inside the scripts folder.
31136.64 -> So we'll type scripts and then a slash
31141.86 -> to go into this folder
and we'll load the file 11
31147.44 -> dash to do dash list
31151.8 -> js and save.
31156.18 -> So now I'm going to drag this
file down here so I can see
31161.19 -> both the HTML and
JavaScript at the same time.
31165.93 -> Close this for now and I can
close the other code for now as
31170.82 -> well. And finally, let's
open this in our browser.
31175.89 -> So we'll right click
open with live server.
31182.7 -> And let's also open the console
on this page right click,
31187.98 -> click inspect and click the console.
31193.74 -> Now one more thing I'm going to do
for this video is I'll rearrange my
31198.48 -> windows so that we can have
the final design at the bottom.
31204.6 -> Let's start by creating the HTML elements.
31208.86 -> Let's go to the body and we'll
actually create a paragraph
31213.57 -> element to start.
31216 -> Inside the paragraph
we'll put the text to do
31220.71 -> list. Next,
31223.95 -> let's create the text box.
So to create a text box,
31229.23 -> less than input, greater than,
31233.04 -> and we'll add a placeholder
to this text box.
31237.69 -> Place holder equals to
31242.28 -> do name. Finally,
31246.12 -> let's add this button. So on a new line,
31251.04 -> let's type less than button greater than,
31256.05 -> and inside the button
will have the text add.
31260.82 -> Now let's save
31263.37 -> and this creates all the
HTML elements that we need.
31268.62 -> Next,
31269.28 -> let's write our Java script.
So first we're going to create an
31274.08 -> array to store our to-dos.
31277.56 -> And then when we click the add button,
31280.86 -> we're going to get the text from
the text box and add it to our
31285.54 -> array. And finally, we will
console dot log the array.
31291.24 -> Now let's convert these steps into code.
31294.66 -> Let's create a new array
first using constant,
31300.54 -> let's name it to do list and we'll make
31305.49 -> it equal to square brackets.
31309.36 -> So this is an array with no values inside.
31313.17 -> We also call this an empty array. Next,
31317.82 -> when we click the button, let's
get the value from the text box.
31323.07 -> So let's go to our button and add an on
31327.81 -> click attribute. And then inside here,
31333.01 -> let's create a function
for this. So down here,
31337.87 -> let's create a function. We'll name it,
31343.15 -> add to-do brackets and curly
31347.68 -> brackets. And then inside
the on click attribute,
31352.66 -> we're just going to call this function add
31357.28 -> to-do and brackets.
31361.03 -> The next step is to get
the text in the text box.
31365.88 -> We can do that using
document query selector.
31370.54 -> So to use query selector,
31372.46 -> we're going to put a class
on this input element.
31377.05 -> So we'll type the class attribute
31381.39 -> js dash name dash input,
31387.85 -> and then in here
Document dot
31392.5 -> query selector
31396.28 -> brackets and a string.
31399.31 -> And we'll type a.to get a
class and we'll get this
31403.99 -> class JS dash name
31408.61 -> dash input. As a reminder,
31413.02 -> this gets an element with
a class js name input,
31417.55 -> which is this element and
puts it into our Java script.
31423.28 -> And now let's save this in
a variable. So at the start,
31428.47 -> let's type const
31431.56 -> in input element and make it equal
31436.39 -> to this result.
31438.97 -> So now we took this input and
put it into our Java script.
31444.28 -> To get the text out,
31446.02 -> we're going to use a property of
the input element called value.
31451.96 -> So down here input element
31457.75 -> value,
31459.55 -> and let's save the value in
the text box in a variable.
31463.66 -> So we can use it later at the front const
31469.45 -> name and we'll make it equal
to whatever's in the text
31474.31 -> box. Before we continue,
31477.85 -> let's console dot log the name to check
31482.86 -> if this is working.
31485.2 -> So let's save this JavaScript
file and let's also
31489.76 -> save this HTML file.
31493.93 -> We'll go to our browser and I'll
resize it so we can see the console.
31499.84 -> And now if we type
something in the text box,
31502.69 -> like make dinner and click add,
31508.82 -> It will get the text from the text box
and then display it in the console.
31514.97 -> Okay, so it's looking good so far.
31518 -> The next step is to add
this name to our to-do list.
31523.55 -> So we learn how to do this earlier.
31525.98 -> We can use a method called push.
31529.52 -> Push will add a value
to the end of the array.
31533.99 -> So let's remove this for
now. And at the bottom
31540.59 -> we're going to type our array to do
31545.6 -> list dot, push brackets.
31551.3 -> And then between the brackets,
we're going to add our name here.
31557.36 -> And now the last step is to
console dot log the entire array
31563.39 -> console dot log to
31568.13 -> do list and save.
31574.43 -> Now let's give it a try or type make
31579.5 -> dinner in the text box and click add.
31583.97 -> It will take this text,
add it to the array,
31588.02 -> and then console dot log the array.
And now we have our to-do list.
31593.81 -> Let's add another to-do we'll type wash
31598.94 -> dishes and click add. Again,
31603.77 -> it will get the text in the text
box and then add it to the array.
31608.87 -> So now our array has two
values and then we display them
31613.7 -> in the console.
So that's how we create this first
31618.5 -> version of the to-do list project.
31622.04 -> Now one more feature we're going to
create is if we add something to our
31626.84 -> to-do list and click add,
31630.77 -> it will reset the text box. To do that,
31634.79 -> let's go into our code and
we'll create some new lines.
31639.83 -> And remember that the value
property represents the text in the
31644.73 -> text box. So to change
the text in the text box,
31649.07 -> we can simply change the value property.
31652.79 -> So we'll type input element dot
31657.92 -> value and change it to the empty string.
31663.02 -> So this will make the text
in the text box become empty
31667.91 -> if we save.
31670.61 -> And now type something
in the text box and click
31675.32 -> add,
31677.18 -> it will reset the text in the text box.
Let's move on to the
31682.13 -> second version of the to-do list. So here,
31686.58 -> when we type something in the text box,
31689.28 -> like make dinner and click add,
31694.17 -> it will actually display it on the page.
31697.41 -> If we type something else like wash dishes
31702.78 -> and click add, it will
also add it to the page.
31708.15 -> So how do we take our array
and display each value on the
31712.8 -> page? To do this,
31715.17 -> we're going to learn another
feature of JavaScript called Loops.
31720.03 -> Loops. Let us run some code
over and over, like a loop.
31725.73 -> So let's go back to our
11 arrays and loops file.
31731.37 -> And we can close this JavaScript
file for now and we're going to learn
31736.2 -> loops. So first,
31738.6 -> let's comment out the
previous code by typing slash
31743.04 -> star and at the bottom star
31747.48 -> slash let's scroll down and
31752.42 -> we'll create our first loop.
31755.04 -> We'll start by creating a
variable using the word let
31761.04 -> and we'll name this variable
I and we'll make it equal to
31765.73 -> one.
31767.94 -> Next we're going to
type the word while and
31772.83 -> then brackets and curly brackets.
31777.09 -> And then inside these curly brackets
we're going to put some code that the
31781.14 -> computer will run over and
over, just like a loop.
31786.12 -> Let's put the code console dot log.
31793.92 -> So this will display the variable
I in the console over and
31798.63 -> over again. Now obviously we
don't want to loop this forever,
31804.24 -> so how do we get this loop to stop?
31807.42 -> We can do that using the
round brackets up here.
31811.74 -> Inside these round brackets,
31813.6 -> we're going to put some code
that results in true or false.
31818.49 -> For example,
31819.78 -> we can check if I is less than or equal to
31825.18 -> five.
31826.83 -> So the way this works is that
if this code results in true,
31832.23 -> the loop will keep going over and over.
31835.89 -> Once this results in false,
31838.41 -> the loop will stop and it
will go to the next line.
31843.03 -> Now you may notice that this code
will never result in false because
31847.95 -> I is equal to one and one is
always less than or equal to
31852.81 -> five.
31854.37 -> So when does this actually
become false and stop the loop?
31859.11 -> The answer is inside this loop.
We're also going to update
31864.07 -> this variable.
31866.5 -> So we'll type I and we'll
make it equal to itself
31871.93 -> plus one.
31874.96 -> So now every time we loop over this code,
31878.74 -> we're going to increase I
by one and eventually I will
31883.63 -> be greater than five.
31885.55 -> This will return false and
it will stop the loop if we
31890.48 -> save.
31892.6 -> And then go back to the tab for
this file and I'll rearrange my
31897.49 -> windows so we can see the console.
31900.67 -> This loop makes the computer
count from one to five.
31906.4 -> So let's go over this code step by
step to make sure we understand how
31911.36 -> it works.
31912.76 -> First we create a variable
I and we make it equal to
31917.68 -> one and then we do a loop.
31921.91 -> So if this condition is true,
31925.45 -> the computer will keep running
this code over and over again.
31931.57 -> So the first time it loops, I equals one,
31935.26 -> and then it displays one in the
console and then we increase I
31940.33 -> to two. Now we go back to
the top and we check this.
31945.32 -> Code two is less than or
equal to five. This is true.
31950.92 -> So we're going to run this code again.
31953.86 -> This time I equals two and
we display it in the console
31958.84 -> and then we increase I to three.
31962.59 -> And now three is still
less than or equal to five.
31966.58 -> So this is true,
31968.11 -> which means we keep running
this code and eventually
31972.61 -> this is going to increase I to six.
31976.3 -> Once I is six, this will become false,
31980.65 -> which will cause the loop to stop
and then we go to the next line.
31985.45 -> So that's why it counts from
one to five and then it stops
31990.34 -> at five.
31992.56 -> So this is called a while loop.
31997.18 -> While this condition is true,
32000.15 -> it will keep running this code
over and over again just like a
32004.81 -> loop. As soon as this condition is false,
32008.88 -> it will stop the loop. All right,
32012.84 -> now that we understand
how a wild loop works,
32016.26 -> let's the syntax rules
to create a wild loop.
32021 -> We type the word while and
then round brackets and curly
32025.77 -> brackets.
32027.33 -> The code inside the round brackets
is called the loop condition.
32032.64 -> The code inside the curly
brackets is called the loop body.
32038.25 -> The variable eye at the top
is called the loop variable.
32043.81 -> Every time we loop, we're going
to increase the loop variable.
32048.7 -> This is known as the increment
step. The increment step,
32053.5 -> make sure that the loop ends at
some point without this increment
32058.15 -> step, the loop will
just keep going forever.
32061.69 -> This is known as an infinite loop.
32065.98 -> Now remember that I
equals i plus one has a
32070.69 -> shortcut. Instead of this,
32073.63 -> we can just do i plus equals one.
32079.18 -> And remember, we actually have an even
shorter shortcut for plus equals one.
32085.06 -> Instead of this we can also do i plus
32089.56 -> plus.
So this will increase the value of I by
32094.37 -> one every time just like before.
32098.23 -> So those are the three
major parts of a loop,
32102.28 -> the loop variable, the loop condition,
32105.73 -> and the increment step.
32108.64 -> Now each time we run this loop,
32111.76 -> this is called an iteration.
32114.7 -> So in this loop we did five iterations,
32118.48 -> we ran this code five times. And lastly,
32122.98 -> loops create a scope.
32125.59 -> Any variable that we create
between these curly brackets will
32130.18 -> only exist inside the curly brackets.
32134.44 -> So that's a while loop.
32136.93 -> While this condition is true,
32140.32 -> it will keep running this
code over and over again.
32145.09 -> Once this condition becomes false,
32148.15 -> it will stop the loop
and go to the next line.
32153.25 -> So in JavaScript, there's
actually two types of loops.
32157.93 -> The first type is a wild
loop, which we just learned.
32162.52 -> Now we're going to learn another
type of loop called a four loop.
32168.37 -> To create a four loop,
32170.32 -> we'll create some new lines
and then down here we'll type
32175.36 -> four and brackets and curly brackets.
32181.39 -> Inside these brackets we're going
to type three pieces of code.
32187.06 -> The first piece of code
is a loop variable,
32190.51 -> which is the same thing
as this line up here.
32194.32 -> So we'll type let I equals one
32199.9 -> and then semicolon space,
32203.26 -> and we'll type a second piece of
code which is the loop condition.
32209.02 -> So here we'll type I less than equal to
32213.73 -> five, and then semicolon and space.
32217.93 -> And the last piece of code
is the increment step,
32221.66 -> which is this line right here.
32224.99 -> So we'll type i plus plus,
32229.22 -> and between these curly brackets we'll
write the code that we want to loop
32233.84 -> over and over.
32235.85 -> So let's just type the
code console dot log
32241.76 -> I and save.
32246.02 -> So this four loop does the same
thing as the wild loop above. It
32250.58 -> counts from one to five.
And if we look at this code,
32255.47 -> we can see that a four loop is
just a shorter version of this wire
32260.45 -> loop.
32261.98 -> Instead of writing the loop variable
condition and increment step
32266.84 -> separately, we group all of
them together at the top.
32272 -> So this loop works the same way.
32274.88 -> First we create a loop variable,
32278.09 -> and then as long as this
loop condition is true,
32282.38 -> we will keep running
this code over and over.
32286.61 -> And every time we run this code,
32289.07 -> we're also going to increase
the loop variable by one.
32294.17 -> So now that we learned two ways of
doing a loop, which one should we use?
32300.17 -> If we're doing a standard
loop, for example,
32303.5 -> it has a loop variable,
32305.39 -> a condition and an increment
step every time it's recommended
32310.43 -> to use a four loop because a
four loop is shorter and more
32315.14 -> organized than a wild loop.
However,
32319.01 -> if it's a non-standard loop,
32321.77 -> then it might be better
to use a wild loop.
32325.58 -> So what's an example
of a non-standard loop?
32329.57 -> So let's say we want to generate random
numbers until we get a number that's
32334.46 -> at least 0.5. To create this loop,
32339.59 -> we'll create a variable that will
store the random number using
32344.51 -> let random number
32349.94 -> and make it equal to zero to start.
32353.63 -> And then we'll do a wild loop
32358.01 -> brackets and curly brackets.
32360.98 -> Now inside the loop condition,
32363.95 -> we want to keep running this loop
until random number is at least
32368.42 -> 0.5.
32370.55 -> So we'll check if random number
32375.92 -> is less than 0.5 because if
32380.87 -> it is less than 0.5,
32383.36 -> we want to keep running this loop until
we get a random number that's at least
32388.37 -> 0.5.
32390.53 -> And then inside this loop we're going
to generate a random number between
32395.06 -> zero and one and then save
it in the variable up here.
32400.32 -> So we'll type random number and
32405.21 -> make it equal to capital M math dot
32410.52 -> random.
32413.25 -> So if this random number is less than 0.5,
32418.02 -> it will keep generating random numbers
until we get a number that is at
32422.88 -> least 0.5. So at the bottom,
32427.35 -> if we console dot log random
32433.07 -> number and save,
32438.36 -> it will give us a random
number that's at least 0.5.
32443.31 -> So notice that this is
a non-standard loop.
32447.72 -> It doesn't really have a loop
variable that we increase every time
32452.91 -> and it also doesn't
have the increment step.
32456.87 -> So in this situation when
we have a non-standard loop,
32461.52 -> it's better to use a wild loop
because they're a bit more flexible.
32467.43 -> All right, now that we
learn the basics of loops,
32471.45 -> let's do some practical examples.
32474.54 -> We're going to learn a technique
called looping through an array.
32479.46 -> This means we're going to go through
each value of an array one by
32484.32 -> one and do something with
each value. So first,
32489.54 -> let's comment out the
previous code using slash star
32495.54 -> and star slash at the bottom
32500.31 -> let's create an array of strings.
So we'll create a
32504.69 -> variable cons to-do
32509.13 -> list equal to an array,
32514.23 -> and inside this array
will have the string make
32519.78 -> dinner,
32521.85 -> another string wash dishes,
32527.28 -> and another string watch YouTube.
32533.25 -> Now let's take each value in
this array and display it in the
32537.82 -> console. To do that,
32540.48 -> we're going to run a loop and this
loop is going to count from zero
32545.58 -> to the last index in the array.
32548.67 -> So remember that the index is the
position of a value in the array.
32554.07 -> The first value is index zero,
32557.04 -> the second value is index
one. Third value is index two,
32561.93 -> and so on.
32563.88 -> So below this let's type four brackets
32568.8 -> and curly brackets.
32571.35 -> Inside these brackets we're going
to create the loop variable.
32576.34 -> So here we're going to count the indexes,
32580.18 -> let index equals zero
32585.31 -> semicolon space, and we'll
do the loop condition.
32590.29 -> So we'll keep looping as long as
the index is less than or equal
32595.69 -> to the last index.
So remember that the index starts from
32600.58 -> zero.
32601.78 -> This means that the last index in an
array will be the number of values
32606.7 -> in the array minus one
or the array dot length
32611.95 -> minus one
32615.04 -> to do list dot length
32620.32 -> minus one.
32623.11 -> And here we'll add another semicolon
and we'll add the increment
32628.15 -> step, which is index plus plus.
32633.64 -> So we'll increase it by one every time.
32637.24 -> Now inside these curling brackets,
32639.4 -> we can do something for
each index of this array.
32644.2 -> For now,
32645.16 -> let's just console dot log this
32649.6 -> index and save.
32654.61 -> So this will count from a zero to two,
32658.45 -> which is exactly all the
indexes in this array.
32663.1 -> And now using this index,
32665.74 -> we can also access the
value at this index.
32670.69 -> So instead of just the index here,
32674.47 -> we can do to do list and then square
32679.21 -> brackets. And between the brackets index,
32684.49 -> this will take whatever the
index variable is and access that
32689.2 -> index in the array.
So if the index variable is zero,
32694.75 -> this will access to-do list index zero,
32698.47 -> which is the first value.
When the index is one,
32702.58 -> it will access to-do list index one,
32705.85 -> which is the second value and so on.
32710.26 -> So for now,
32711.58 -> let's save the value in
a variable using cons
32716.59 -> value and make it equal
to to-do list bracket
32721.51 -> index.
32723.67 -> And now let's console dot
log the value. Instead,
32729.13 -> if we save,
32731.56 -> this will loop through
each index of the array,
32735.4 -> get the value at each index,
and then display each value,
32740.32 -> which is what we see in the console.
32743.26 -> So this technique is called
looping through an array.
32747.73 -> We use a loop to go through
each value of an array and then
32752.72 -> we can something with each value.
32757.13 -> Now I'm going to show you a few shortcuts
we can use when looping through an
32762.05 -> array.
32763.52 -> Instead of checking if index is
less than or equal two to do list
32768.5 -> dot length minus one,
32770.99 -> we can shorten this to
index less than to-do
32775.97 -> list length.
32778.52 -> So this check does the
same thing as before.
32782.96 -> The loop will stop at index
equals length minus one,
32787.58 -> but it saves us some typing.
32790.55 -> Another shortcut is instead of
naming the loop variable index,
32795.98 -> we can shorten this to I and we'll
32800.87 -> shorten this as well and this as well.
32805.43 -> And that's why we often
name the loop variable I
32810.41 -> means index.
32813.08 -> Next we're going to learn a
technique that we can combine with
32817.55 -> looping through an array
called the accumulator pattern.
32823.4 -> So first,
32824.51 -> let's comment out the
previous code using slash star
32830.15 -> and star slash and at the bottom.
32836.66 -> Let's say we have an array
of numbers like this.
32840.86 -> How do we calculate the total
of all the numbers in the array?
32846.41 -> Let's set up this problem.
32849.02 -> Let's say we have an
array of numbers, cons,
32854.03 -> numbs equals array,
32858.11 -> and then the numbers one, one and three.
32864.2 -> And we want to calculate the total
of all the numbers in this array.
32869.33 -> To calculate the total will
learn the accumulator pattern.
32874.34 -> The first step of the accumulator
pattern is to create a variable to
32879.08 -> store the result. So below this,
32882.38 -> let's create a variable constant total
32887.51 -> and we'll make it equal to zero.
32890.96 -> And the next step is to loop through
this array and update the result.
32896.72 -> So down here,
32898.94 -> four brackets and curly brackets,
32903.53 -> and inside the round brackets
will create the loop variable,
32908.18 -> let I or index equals
32912.92 -> zero semicolon space and
we'll create the loop
32917.51 -> condition I less than numbs
32922.73 -> dot length and then
semicolon and the increment
32927.71 -> step I plus plus.
So as we
32932.7 -> learned earlier,
32933.99 -> this loop will go through
each index of this array.
32939.18 -> And now between these curly brackets,
32942.3 -> first let's use the
index to get each value.
32947.28 -> So we'll type numbs and
then square brackets
32952.2 -> and access the index I.
32955.47 -> And let's save this in a
variable using constant
32960.87 -> numb equals this value.
32965.85 -> And finally, we're going to
add each number to the total.
32970.77 -> We can type total and make it equal to
32975.51 -> itself plus each number.
32980.64 -> And remember, we have a shortcut for this,
32983.88 -> which is plus equals. And finally,
32988.41 -> since we're changing this total variable,
32991.59 -> we have to change from cons to let.
32996.78 -> All right, so after this loop,
32999.42 -> we should have added each number
in the array to the total.
33004.31 -> So at the bottom,
33006.14 -> let's console dot log the total
33012.83 -> and save and it will display five,
33017.9 -> which is the exact total of all
the numbers in this array. So
33022.82 -> that's the accumulator pattern.
33025.58 -> We first create a variable
to store the result,
33029.36 -> and then we loop through the
array and update the result.
33035.06 -> So notice that as we
loop through the array,
33038.18 -> we're adding or accumulating
the results into this variable.
33043.7 -> And that's why this is called
the accumulator pattern.
33048.2 -> And we call this variable
the accumulator variable.
33053.93 -> All right, let's do another example
using the accumulator pattern.
33059.51 -> Let's say we're given this array of
numbers again and we want to create
33064.43 -> a copy of the array where
each number is doubled.
33069.2 -> So if the array is 1, 1 3,
33073.1 -> we're going to create a
new array with 2, 2, 6.
33079.49 -> So at the bottom we'll create
some new lines and use the
33084.2 -> accumulator pattern.
33086.27 -> The first step is to create a
variable to store the result.
33091.19 -> Let's type const and let's name this
33095.69 -> numbs doubled and we'll make it equal
33100.94 -> to an array this time.
So notice in the previous example
33106.25 -> the accumulator variable was
a number. In this example,
33111.15 -> the accumulator variable is an array.
33114.66 -> So we can use different types of
values to accumulate the result.
33119.79 -> It all depends on the problem
we're trying to solve.
33123.78 -> So now the next step is to loop
through this array and update the
33128.7 -> result.
33130.26 -> At the bottom we'll create a four loop
33134.94 -> brackets and curly brackets.
33138.48 -> Inside the round brackets
will create the loop variable,
33143.13 -> let I equals zero and will create
33148.14 -> the loop condition I less than
33152.46 -> numbs dot length,
33155.61 -> and then the increment step i plus plus.
33160.86 -> And now between the curly brackets,
33163.86 -> we're going to get the number
at each index. So cons,
33169.68 -> numb equals numbs square bracket
33174.84 -> I, and then we're going
to update the result.
33179.55 -> So down here we're going to
add this number doubled to
33184.23 -> this array.
33186.33 -> So remember to add a value to an array,
33189.78 -> we can use the method push.
33192.63 -> So we'll type numbs doubled
33197.67 -> dot push brackets,
33201.84 -> and we're going to add to
this array the number numb
33207.48 -> multiplied by two. And now at the bottom,
33212.64 -> let's console dot log the result
33218.03 -> NUS doubled and save.
33224.13 -> So this second loop will create
an array where each number is
33228.82 -> doubled. So that's how we
solve this example. All right,
33234.42 -> now that we understand how to loop through
an array and the accumulator pattern,
33239.97 -> let's go back and we'll create the second
33244.69 -> version of our to-do list. So
when we add something to the list,
33250.08 -> it will appear on the page.
33253.17 -> Let's go to our code editor
and we'll open 11 to-do
33257.97 -> list html.
33260.85 -> And we're also going to
open the JavaScript file.
33264.93 -> So it's this one.
33266.61 -> And for the video I'm going to drag
it to the bottom of my code editor
33271.95 -> so that I can see the files side by side.
33276.09 -> So I'll close this for now and
I'll rearrange my windows a bit.
33283.68 -> Let's open the tab for this project.
33287.32 -> So we'll review what we have so far.
33290.62 -> We can click in this text
box and type A to do like
33295.15 -> make dinner and click add.
33300.31 -> And it will add this to do to this array,
33303.7 -> which is this array right here.
33306.67 -> We can type another to-do like wash dishes
33312.13 -> and click add and it will
add it to the end of the
33316.75 -> array. So now that we
have this array of to-dos,
33321.25 -> we want to display it
on the page. To do that,
33325.57 -> we're going to loop through this array
and we're going to create some HTML
33330.49 -> code for each to do and
then put that code on the
33334.96 -> webpage using the dom. So first,
33339.01 -> let's loop through this
array. To make this easier,
33343.36 -> let's make a copy of this array.
33346.3 -> So right click copy,
33349.96 -> and then here we'll remove
this and right click
33355.15 -> and paste.
So this will give us some default
33359.8 -> values to work with. So at the top,
33364.33 -> let's loop through this
array using a four loop.
33369.31 -> So we'll type four brackets
and curly brackets.
33375.82 -> And then inside the round brackets
we're going to create the loop variable,
33381.28 -> let I or index equal zero
33386.68 -> semicolon and the loop condition I less
33391.48 -> than to-do list dot length
33397.3 -> semicolon,
33398.68 -> and then the increment step I plus plus.
33404.08 -> So this will loop through
each index of this array.
33409.06 -> And then inside the curly brackets,
33412.15 -> let's get the string for each index.
33416.02 -> So we'll create a variable to save it,
33419.11 -> cons to do,
33422.29 -> and we'll make it equal to do list
33427.36 -> square brackets. And
33431.95 -> now for each to do,
33434.23 -> we're going to create some H T M L code.
33437.86 -> So we'll create a new line
and create a variable cons
33443.35 -> H T M L and make it equal.
And we'll create
33448.21 -> some H T M L code using this to do using a
33453.47 -> template string.
33455.26 -> And then inside will
create a paragraph element,
33459.19 -> so less than P, greater than,
33462.34 -> and then less than slash
p greater than inside this
33467.15 -> paragraph,
33468.11 -> we're going to insert this
to-do so we'll type dollar and
33473 -> curly brackets and to-do, all right,
33478.19 -> so now we're looping through this array.
33481.31 -> And for each to-do we
created some HTML code.
33486.65 -> And now we're going to combine all
of this HTML code together and put it
33491.66 -> on the webpage. To combine
this HTML together,
33496.76 -> we're going to use the
accumulator pattern.
33500.21 -> So at the top of the loop we'll
create a variable to store the
33505.13 -> result, let to do list
33510.95 -> capital H T M L,
33514.01 -> and we'll make it equal to
the empty string at the start.
33519.32 -> And then as we loop through the array,
33521.87 -> we're going to add this H T
M L to the variable up here.
33527.42 -> So let's create a new
line and we'll do to do
33532.16 -> list capital H T M L
33536.93 -> plus equals H T M L to combine
33541.7 -> all of this H T M L code together.
33545.21 -> So now after the loop,
33547.55 -> let's console dot log to
33552.32 -> do list H,
33555.44 -> T M L to see what we get. If we save,
33561.68 -> we took this array of strings
generated paragraph elements for
33566.42 -> each string and then
combine them all together.
33570.71 -> So now that we have all this html,
33573.5 -> we can put it on the page using the dom.
33577.73 -> So first let's create an
element where we can put this
33581.99 -> html.
33583.85 -> So inside the HTML file after the button,
33589.73 -> we're going to create a different type
of element called a diviv element.
33595.4 -> So what type less than
diviv, greater than.
33601.22 -> So the diviv element
represents a container.
33604.97 -> It's purpose is to contain
other elements inside like
33609.35 -> paragraphs, buttons, and even other divs.
33614.12 -> So in this situation,
33615.74 -> we can't actually use a
paragraph element because in HTML
33621.08 -> we cannot have a paragraph
inside another paragraph.
33625.88 -> So that's why we have to use
a div element here. For now,
33630.83 -> let's put some text inside this
element so we can learn more about it.
33636.38 -> What type text and save.
33641.54 -> So like the paragraph element, the
diviv element is a block element.
33647.07 -> That means it will take up an
entire line by itself and that's why
33651.88 -> it appears below the
text box and the button.
33656.43 -> Now one difference between a
diviv and a paragraph is that a
33660.79 -> paragraph adds extra space
above and below the paragraph,
33666.18 -> while a diviv does not add
any extra space above or
33670.8 -> below,
33672.21 -> so it doesn't have any default styling.
All right,
33676.92 -> so now that we learned the diviv,
33679.74 -> let's put this HTML
code inside this diviv.
33684.93 -> First we need to get this
element into our JavaScript.
33689.7 -> And to do that,
33691.05 -> we'll add a class to this element class
33695.61 -> equals js dash to do
33701.79 -> list. And then down here,
33705.75 -> let's scroll down and we'll put
this diviv element inside our
33710.4 -> JavaScript.
33711.96 -> We can do that using document dot
33716.43 -> query selector brackets and a
33721.41 -> string.
33722.67 -> And we'll type a.to select
a class and we'll select the
33727.27 -> class JS dash todo
33732.21 -> dash list.
33735.24 -> So this will get this diviv
element and put it inside our
33739.62 -> JavaScript.
33741.36 -> And then every HTML element
has a property called dot
33746.76 -> inner capital H T M L,
33751.08 -> which controls the H T
M L inside this element.
33755.91 -> And now to put the to-do list H
T M L into this diviv element,
33761.37 -> we're going to make the
inner h t TML equal to
33766.08 -> the to-do list html.
33772.44 -> And now let's save this file
33776.25 -> and also save the HTML file.
33781.02 -> So this code will take the
HTML that we created using
33786 -> the loop and put it
into the diviv element,
33789.93 -> and that's how we make
them show up on the page.
33793.71 -> So now let's try adding
another to-do we'll type
33798.36 -> watch YouTube and click add.
33804.15 -> And unfortunately this new
to-do doesn't show up on the
33808.8 -> page, and that's because
when we click add,
33813.06 -> it will run this add to-do
function and update the list,
33818.34 -> but we didn't actually
update the HTML on the page.
33823.6 -> So to update the html,
33826.09 -> we need to run all this code again.
33829.36 -> Every time we add a to-do so,
33832.88 -> let's create a function for
this code so we can reuse it.
33838 -> So at the top we'll create a function
33844.24 -> and let's name this render to-do
33849.52 -> list brackets and curly brackets.
33855.01 -> So the word render means to
display something on the page.
33860.53 -> So we'll put all of this code
into this function so we can
33865.66 -> delete this curly bracket.
And then at the end we'll
33870.58 -> type a closed curly bracket
and let's reformat this code
33876.25 -> by selecting these lines
and then press tab to add
33881.14 -> an indent.
33883.12 -> So now let's use this
function at the start.
33888.28 -> We'll display this to-do list on the page.
33891.28 -> So we'll call this
function by typing render
33896.77 -> to-do list and brackets.
33901.78 -> And then let's scroll down.
33904.78 -> Every time we add a to-do to the list,
33908.53 -> we're also going to
display the list again.
33911.8 -> So at the bottom render to-do
33916.84 -> list and brackets again.
33920.92 -> So if we save at the start,
33924.55 -> it will display the list on the page,
33927.46 -> and then if we add to the list like watch
33932.38 -> YouTube and click add,
33936.07 -> it will add it to the list and
also display it on the page.
33941.29 -> So that's how we create the second
version of the to-do list project.
33946.87 -> By the way, if we scroll up to
the render to-do list function,
33952.3 -> this technique is called
generating the H T M L.
33956.86 -> Instead of writing all the
H T M L by hand up here,
33961.51 -> we looped through an array
and we generated the H T M L
33966.28 -> using JavaScript.
33969.94 -> Let's take a break before continuing
with the rest of this lesson,
33974.38 -> here are some exercises you can do on
your own to practice what we learned so
33978.94 -> far.
34001.78 -> Now let's create the final
version of the to-do list.
34005.98 -> We'll go back to super simple.dev and then
34010.78 -> here we'll scroll down and
we'll create this final version.
34016.48 -> So in this version we
can type A to-do like
34020.95 -> make dinner, and we can
also add a due date.
34027.22 -> And when we click add each
to do will now have a name
34032.62 -> and a due date,
34034.63 -> and they will also have a delete
button that we can click to
34039.28 -> remove it from the list.
34041.83 -> So let's build this out
one feature at a time.
34045.49 -> We'll start by creating
this delete button.
34049.21 -> We'll go into our code and
remember we're generating the
34053.99 -> HTML for the to-do list.
34057.01 -> So for each value in the array
we create a paragraph element.
34062.68 -> So to add a delete button,
34064.96 -> we just have to add a
delete button inside here.
34069.34 -> So inside the paragraph
will create a less than
34074.62 -> button greater than and
then less than slash
34079.39 -> button greater than. And
then inside this button,
34084.49 -> we'll put the text, delete, let's save.
34090.73 -> And in the console you'll see
that the H T M L we generated now
34095.41 -> has a delete button inside the
paragraph and that's what shows up
34100.45 -> on the page.
34102.4 -> Next we're going to reformat this
HTML to make it a little easier
34107.38 -> to read.
34108.67 -> So we'll create some new
lines here and at the end,
34113.83 -> and let's put the content of the
paragraph on its own line like
34118.78 -> this and also put the delete
button on its own line.
34124.57 -> So remember that template strings have
a feature called multi-line strings.
34129.67 -> So this is perfect for
writing html code. Next,
34134.98 -> let's make our delete button do
something when we click it. To do that,
34140.05 -> we use the on click attribute as usual.
34144.1 -> So inside this button
we're going to add an
34148.75 -> on click attribute equals double
34153.58 -> quotes. And then inside
these double quotes,
34157.51 -> we can run some JavaScript
when we click this button.
34161.77 -> So this works the exact same
way as what we've been doing so
34166.63 -> far in this course.
34168.67 -> The only difference now is that
here we're generating this HTML
34173.8 -> using JavaScript. Okay,
34177.2 -> so when we click one of
these delete buttons,
34179.84 -> we want to remove this to
do from the list. Earlier.
34184.32 -> In this lesson we learn how to
remove a value from an array using
34189.17 -> a method called splice.
34192.35 -> So inside this on click attribute,
34195.23 -> we're going to type the to-do list
34199.91 -> dot, splice and brackets.
34205.61 -> So splice takes two numbers.
34208.7 -> The first number is the
index that we want to remove.
34212.96 -> So if we click this delete button,
34215.72 -> how do we know which index to remove?
Well,
34219.68 -> if we look at our loop up here,
we already have the index.
34223.97 -> It's this variable I,
34226.88 -> so we're going to insert I into
this string and we can do that
34231.89 -> by typing dollar curly brackets.
34235.34 -> And I now splice also takes another
34240.11 -> number, so we'll type comma.
34243.56 -> And the second number is how
many values we want to remove.
34248.18 -> So here we just want to remove
one value at this index.
34254.33 -> And finally, because we
updated the to-do list,
34258.05 -> we need to display the list
again on the page to display the
34262.94 -> list. We can use this
function render to-do list.
34267.92 -> So down here we're going to type render
34272.78 -> to-do list and brackets.
34278.15 -> Now if we save,
34281.42 -> you can see that in the
generated html when we
34286.04 -> click the first delete button,
34288.83 -> it will remove the value at index
zero, which is the first value.
34294.86 -> If we click the second button,
34297.23 -> it will remove the value at index one,
34300.38 -> which is the second value.
So we're basically generating all this
34305.47 -> HTML using a loop.
34308.21 -> So now if we click this delete button,
34311.9 -> it will remove it from the list and
then display the updated list on the
34316.58 -> page. So that's how we
create the delete button.
34321.38 -> Next,
34322.4 -> let's go back to super simple.dev
and we're going to create
34327.2 -> the due date feature. So first,
34330.74 -> let's create this date
selector in our html.
34335.63 -> We'll go to our HTML file.
34339.05 -> And then under the text box we're
going to add another input element.
34344.45 -> So less than input, greater than,
34349.64 -> and to make it a date selector input
elements have an attribute called
34354.9 -> type.
34357.03 -> So this attribute determines
what kind of input it is.
34361.71 -> If the type is text, which
is the default value,
34365.31 -> it's going to be a text box.
34368.52 -> Now if we change the type to date and
34373.32 -> save, it's going to
create a date selector.
34380.61 -> Now let's go back into our JavaScript
code and first we're going to scroll
34385.48 -> up and remember that right
now our to-do list is just an
34390 -> array of strings,
34392.73 -> but this time each to do is
also going to have a due date.
34397.77 -> So how do we group the name
and the due date together?
34402.33 -> We can do that using an object.
34405.3 -> So here instead of just a string,
34408.69 -> we're going to create an
object and we'll give it a name
34413.58 -> property,
34414.99 -> which is make dinner
and we'll give it a due
34420.12 -> date property and we'll
make the due date a string.
34425.7 -> So you can type whatever date
you have on the page for me.
34430.26 -> It's 2022 dash 12
34435.51 -> dash 22,
34438.6 -> and I'll end this object
with a curly bracket.
34441.84 -> And I'll turn this second to
do into an object as well.
34446.01 -> So open curly bracket name
34451.95 -> and do date
34456.1 -> 2022 dash 12 dash 22
34462.09 -> and closed curly bracket.
34465.39 -> Now that each to do is an object, we
need to update the rest of our code.
34471.51 -> Let's scroll down and we'll
start with the render function.
34476.28 -> So here inside the loop each
to do is no longer just a
34480.96 -> string, it's an object.
34483.63 -> So let's change this variable name to do
34488.01 -> object to make it more clear.
34491.7 -> And now we need to get the
name and due date out of this
34496.21 -> object. So type cons,
34500.25 -> name equals to do
34504.42 -> object.name and cons,
34510 -> do date equals to do
34514.32 -> object dot due date.
34519.42 -> And now instead of inserting
to-do, which no longer exists,
34523.98 -> we're going to insert the name
34527.61 -> And we're also going to insert the do date
34533.77 -> if we save.
34536.17 -> Now each to do will
also display a due date.
34541.39 -> Before we continue,
34542.68 -> we're going to review a shortcut
we can use with objects called
34547 -> destructuring.
34548.83 -> So here you'll notice the variable
name is the same as the property name.
34554.17 -> We actually have a shortcut
for this using cons,
34559.78 -> curly brackets,
34561.67 -> name equals to do
34566.23 -> object. So this is called destructuring.
34571.24 -> This takes the name property out of
the object and puts it in a variable
34576.19 -> also called name.
34578.23 -> And this is a shortcut for this
line up here so we can comment out
34583.21 -> this line.
34585.13 -> We can also use multiple
properties in this shortcut to also
34589.78 -> take the due date out of the object.
34592.9 -> We can just add a comma and do date.
34598.69 -> So this will do the same thing as
this line of code and we can comment
34603.68 -> this out
34606.55 -> if we save everything still works.
34611.17 -> Next,
34612.01 -> let's scroll down and we're
going to update our add to do
34617.14 -> function. So this time when
we click the add button,
34621.28 -> we're going to get the name and the
due date and put it into our list.
34627.16 -> So let's get the due date out
of this date selector first.
34631.42 -> We can do that using the
dom like we did here.
34635.53 -> So let's add a class attribute
so we can get it using query
34640.48 -> selector js dash do dash
34645.67 -> date dash input.
34649.12 -> And then down here let's create a variable
34654.15 -> constant date input element
34659.56 -> and make it equal to document dot
34664.33 -> query selector and a string
34670.12 -> dot. And then the class we want to select,
34673.33 -> which is this class js dash do
34678.34 -> dash date dash input.
34684.07 -> So this will get the date selector
element and put it into our JavaScript.
34690.19 -> And now below this, let's get
the due date out of the element.
34695.56 -> We can do that using the
value property again.
34699.43 -> So let's create a variable first,
34702.92 -> constant due date and we'll make it equal
34708.37 -> to the date input element
34713.45 -> dot value.
34716.45 -> So this will get the date that we
selected and save it in this variable.
34722.48 -> And now when we add a to-do
to our list instead of just a
34727.1 -> name, we're going to add an object.
34730.64 -> So open curly bracket
Will add a name property
34735.89 -> and the value will be the
name variable up here.
34739.64 -> So name and then comma and a due
34744.89 -> date property.
34747.17 -> And the value will be this
due date variable up here.
34751.16 -> So do date and then a closed curly
34755.9 -> bracket.
34758.63 -> And remember that objects
also have a shortcut for this.
34763.22 -> If the property and the
variable name are the same,
34766.88 -> we can just type it out once like this
34771.89 -> will do the same thing as this line above.
34775.7 -> Same thing with the second line.
34777.89 -> If the property and the
variable name are the same,
34781.25 -> we can just type a comma
and type it out once.
34787.79 -> This is called the
shorthand property syntax.
34791.57 -> So these two lines do the same
thing as these lines above.
34796.34 -> So we can comment this out
using double slash and double
34801.08 -> slash. So that's all the code
that we needed to update.
34806.78 -> Now let's save our JavaScript
file and we'll also
34811.73 -> save our HTML file.
34815.48 -> And let's go to our project.
34817.85 -> We'll add a new to-do like watch
34822.47 -> YouTube and select a date
34827.75 -> and click add and scroll down.
34832.04 -> You can see that it added our
new to-do with a name due date
34837.17 -> and a delete button. If we
click this delete button,
34842.18 -> it will remove that to-do.
If we click this one,
34846.47 -> it will also remove the correct
to-do and that's actually
34851.18 -> all the functionality that
we need for this project.
34855.2 -> So let's go into our code and we're
going to clean up by removing the
34859.79 -> console dot log here
34863.03 -> and the console dot log up here
34868.88 -> And save. Finally,
34872.81 -> let's add CSS to our project.
34875.69 -> To make it look like the final design,
We'll go into our code
34880.52 -> editor and scroll to the top.
34884.48 -> And instead of writing
all the CSS in here,
34888.05 -> let's put the in a separate
file, just like our JavaScript.
34893.64 -> So we'll click here to show our files
34897.69 -> and then find the styles folder.
34900.78 -> And we'll click the styles
folder and click this icon to
34905.7 -> create a new file inside.
34909.03 -> And we'll name this file 11 dash
34913.38 -> to-do dash list dot css
34918.99 -> and press enter.
34922.14 -> And for the video I'm going to
take this CSS file and put it at
34927.03 -> the bottom of my code editor so I
can see these files side by side.
34933.18 -> And now I'll click here to close it
34936.84 -> and we will load this CSS into our html.
34941.91 -> To do that we can use a link element.
34945.54 -> So inside the head section,
34948.66 -> let's type less than link greater than,
34953.97 -> and we're going to give it two attributes
34958.14 -> equals style sheet
34963.09 -> and href equals the file that we
34967.86 -> want to load.
So we created this in the styles folder,
34972.42 -> so we'll type styles
and then a slash to go
34977.25 -> into the folder and
we'll load this file 11
34982.17 -> dash to-do dash list dot
34986.76 -> css and save.
34992.13 -> Now let's style our project one by
one until it matches the final design.
34998.16 -> We'll start with the text on the
page, we're going to change the font.
35003.44 -> So in here,
35005.03 -> let's type body curly brackets
35009.86 -> and then we'll change the font dash family
35014.66 -> colon, aerial and save.
35020.27 -> So that looks pretty good.
35022.16 -> Now let's work on styling
the to-do list first,
35026.42 -> let's add some more to-dos to the list.
35029.39 -> So we'll type watch YouTube
35034.76 -> and then we'll select
a date and click add.
35040.16 -> And we're going to learn how to
style our list to look like this.
35044.48 -> So notice that this list
creates a sort of grid.
35049.46 -> We're going to create this grid
using a feature called CSS grid.
35055.46 -> So let's go into our HTML first,
35060.59 -> we're going to add a class to this
diviv element, so we can style it
35066.62 -> to dash grid.
35070.62 -> And let's save. And inside our css,
35075.78 -> we're going to style
this class using.to do
35080.91 -> dash,
35082.02 -> grid and curly brackets.
And to turn this
35086.67 -> into a grid,
35088.11 -> we're going to use the
property display and
35093 -> grid.
35095.4 -> And we're going to add
another property called grid
35099.87 -> dash template dash columns.
35105.81 -> So this basically sets how
many columns are in our grid.
35110.97 -> The number of values that we
give it is the number of columns.
35115.59 -> For example, if we give it 200 pixels,
35120.99 -> one 50 pixels and 100 pixels,
35127.08 -> this will create three
columns in the grid.
35131.04 -> The first column will be 200 pixels.
35134.31 -> The second column will be one 50 pixels,
35137.91 -> and the third column will be 100 pixels.
35142.53 -> And now each element inside this
div will go into the columns.
35148.02 -> So the first element will
go in the first column,
35151.11 -> second element will go in
the second column and the
third element will go in the
35156 -> third column. If we have
more than three elements,
35160.11 -> it will wrap around and create a new row.
35165.27 -> So let's save.
35167.91 -> And unfortunately that didn't
quite work and that's because if we
35172.89 -> go back to our Java script,
35176.46 -> remember that each to-do
is one paragraph element.
35181.32 -> So this entire to-do with the
name due date and delete button
35186.54 -> will go inside the first
column and then the next entire
35191.25 -> to-do will go inside the second column.
35195.18 -> But what we actually want is for
the name to go in column one,
35199.74 -> due date, column two, and
delete button column three.
35204.63 -> To do this,
35205.53 -> we're going to separate this element
into three elements so that each
35210.24 -> element will go into each column.
35214.26 -> So instead of one paragraph,
35218.43 -> let's actually use a diviv
element. So less than diviv,
35223.65 -> greater than, and less than
slash diviv greater than,
35229.02 -> and in between will insert the name.
35236.4 -> So the reason we used a diviv element
is because diviv elements don't
35241.05 -> have any default styling,
35243.54 -> so it's a little easier to
style with CSS for the due date.
35248.8 -> Let's also create a diviv element,
35251.74 -> so less than diviv and then at the end,
35257.05 -> less than slash diviv greater than.
35261.64 -> And finally for the delete button,
we already have an element.
35266.62 -> So let's just reformat these lines.
35269.77 -> We'll select these lines and
then press shift tab To remove
35274.81 -> the indent, let's remove the extra line.
35279.31 -> And we basically separated
each to do into three elements.
35284.74 -> If we save,
35287.11 -> now the grid is working because
this element goes into the first
35292 -> column.
35293.29 -> This element goes into the second
column and the button goes into the
35298.15 -> third column.
35300.94 -> And that's how we lay out these elements
in a grid like the final design.
35306.97 -> Next,
35307.87 -> let's also layout out the inputs
and the ad button in a grid.
35313.33 -> We'll go to our HTML and
let's put these three
35318.01 -> elements in a diviv. So we can use grid.
35321.97 -> So we'll create a less
than diviv graded than.
35327.58 -> And then inside,
35330.55 -> let's remove this and
we'll add it at the end
35335.47 -> less than slash diviv.
35338.47 -> And let's reformat these lines
by selecting them and then
35343.42 -> press tab to add an IND debt.
35347.53 -> And now let's make this
diviv a grid as well.
35352.24 -> Let's go back to our CSS and
we'll add a class to this
35357.07 -> diviv class equals let's call it
35362.11 -> to do dash input dash grid.
35368.38 -> And instead of writing all the css again,
35371.47 -> we can use a feature of css.
35374.65 -> So here we're going to
type a comma and enter.
35380.74 -> So when we type a comma,
35382.69 -> we can style multiple
classes at the same time.
35386.74 -> So we're also going to style.to do
35391.36 -> dash input dash grid
35396.25 -> if we save the CSS file.
And let's also save the
35401.56 -> HTML file.
35404.14 -> Now the input and the add button
are also laid out in the same grid.
35410.26 -> Next, let's adjust the
spacing inside our grid.
35415.33 -> So grid has some properties
for this, we'll go to our css,
35420.82 -> press enter,
35422.59 -> and we'll use the
property column dash gap.
35428.54 -> So this sets the spacing
between the columns of the grid.
35434.03 -> So let's make this colon 10 pixels and
35438.86 -> save.
35440.9 -> So now it will add 10
pixels between each column.
35445.58 -> Let's add some spacing
between the rows as well.
35449.09 -> And grid has another property for this row
35453.74 -> dash gap,
35455.75 -> colon 10 pixels and save.
35461.24 -> So that will add 10 pixels
of space between the rows.
35465.8 -> Now notice it didn't add
space between these two rows,
35469.97 -> and that's because these
two are separate grids.
35473.45 -> This is the to-do list and
this is the to-do input grid.
35479.72 -> So to add space between them,
35481.91 -> we're just going to use
margin at the bottom will
35486.2 -> style.to do dash
35490.46 -> input dash grid,
35495.41 -> and we'll just add some
margin under this grid. So
35499.88 -> margin dash, bottom colon,
35504.68 -> 10 pixels, and save.
35509.69 -> All right, now let's move on to
styling the inputs and the buttons.
35515.27 -> We'll start with the inputs first,
35518.12 -> let's add a class so
we can style them here.
35522.59 -> Let's add a class name, dash input.
35528.92 -> And down here, let's
also add another class.
35533.18 -> Do dash date dash input.
35539.06 -> Let's save.
35541.64 -> And now insider css while
style, both of these inputs.
35547.85 -> So a style.name dash input
35553.22 -> curly brackets. And first
let's make the text bigger,
35557.93 -> like the final design.
35560.09 -> We'll set the font dash size colon,
35565.43 -> 15 pixels and save. Okay,
35569.87 -> so that looks pretty good.
35571.7 -> Now let's add spacing on
the inside of this input.
35576.5 -> So we'll add padding,
35579.5 -> six pixels and save.
35584.18 -> And that looks pretty good. Let's
move on to the due date input.
35589.46 -> So we actually want the same
styles as the name input.
35594.05 -> So again,
35594.98 -> we can use that feature of c s s.
We'll type a comma
35600.14 -> and then.do dash date
35605.1 -> dash input.
35607.71 -> So now these styles will be
applied to this class and to
35612.69 -> this class. Let's save.
35616.86 -> And that looks pretty good to me.
35619.71 -> Let's move on and style the buttons.
35623.67 -> We'll go into our HTML
and find the add button.
35628.59 -> Let's add a class so we
can style it and we'll use
35634.05 -> add dash to do dash button.
35639.27 -> Let's save.
35641.55 -> And then inside our CSS
will style that class
35646.2 -> using dot add dash to do dash
35651.36 -> button curly brackets.
35655.32 -> And let's start with the
background color will set the
35659.82 -> background color, colon,
35664.2 -> green and save.
35668.61 -> Now let's do the text color,
35671.85 -> color colon,
35674.7 -> white and save.
35679.23 -> Now let's remove the border
around our button using
35684.3 -> border colon. None save.
35690.3 -> And let's make the text a little bigger.
35693.51 -> So we'll do font dash size,
35698.28 -> colon, 15 pixels and save.
35704.97 -> And the last thing we'll add is when
we put our mouse over the button,
35709.38 -> it turns into this pointer icon.
We can do that
35714 -> using cursor, colon, pointer
35720.42 -> and save. Next,
35724.26 -> let's dial the delete buttons.
35727.05 -> So these delete buttons are
created in our Java script.
35731.22 -> We'll go into our JavaScript
file and then here,
35736.65 -> let's add a class to each of the
delete buttons so we can style them.
35742.44 -> So we'll add class equals double quotes
35747.96 -> and then delete dash to do dash
35752.58 -> button. Let's save.
35756.84 -> And then inside our CSS
35760.14 -> at the bottom we'll style dot
35764.67 -> delete dash to do dash button
35770.07 -> curly brackets. And let's start
with the background color.
35775.11 -> So we'll set background dash color
35780.25 -> colon.
35781.84 -> And for this design I
use the color dark red
35787.87 -> and save. So that will
style our delete buttons.
35793.6 -> Now let's change the text color to white.
35797.08 -> So we'll use color colon,
35800.77 -> white and save.
35804.67 -> Now let's remove the border using border
35809.89 -> colon. None save.
35814.69 -> And let's also make the text bigger using
35819.16 -> font dash size colon
35823.51 -> 15 pixels save.
35827.71 -> Let's add this pointer icon using cursor,
35833.38 -> colon pointer, save.
35838.09 -> And let's add some padding at
the top and bottom of the button.
35843.25 -> So we'll add padding dash top
35848.11 -> colon 10 pixels and padding
35853.54 -> dash bottom colon 10 pixels
35859.12 -> and save.
35862.18 -> So that's all the styles we
need for the delete button.
35865.96 -> And we can also close the
console to see the entire list.
35870.61 -> However,
35871.48 -> now we have another problem which
is this text and this button
35876.49 -> are not vertically aligned
in the center to vertically
35881.28 -> align in the center. We're going
to go back to the grid styles.
35886.6 -> So we'll scroll up to the to-do grid
35891.88 -> and css grid has another
property for vertical alignment
35897.13 -> and that is align dash items
35902.77 -> colon center to vertically align in
35907.72 -> the center. If we save,
35911.8 -> now the text is aligned with the button,
35915.19 -> but now we have a new problem.
35917.59 -> Our ad button is no longer stretching
to be the same as the inputs.
35923.29 -> So by default align items is stretch.
35928.21 -> That's why this button
stretches to match the inputs.
35932.92 -> And now that we changed
it to align center,
35936.04 -> it's no longer going to stretch.
So to solve this problem,
35940.6 -> we just have to make this grid stretch.
35944.65 -> So down here in the
to-do input grid styles,
35949.81 -> we'll change a line dash items
35954.76 -> back to stretch and save.
35960.83 -> And that will cause this grid at
the top to stretch vertically again.
35966.71 -> And that's it. That's all
the styling that we need.
35970.16 -> And now we've finished this to-do
list project. In the rest of
35975.02 -> this lesson we're going to learn
more details about arrays and loops.
35980.87 -> So I'm going to put this
back in the same window and
35985.86 -> I'll rearrange this window.
35988.7 -> And now let's go back to
11 arrays and loops dot
35993.35 -> html and we'll open the tab for that file
35999.23 -> and we can also close
these other files for now.
36004.81 -> And first, let's comment
out the previous code using
36010.66 -> slash star and at the bottom
36015.1 -> star slash
36018.13 -> and we'll scroll down and save.
36022.96 -> The first detail we're going to
learn is that arrays are references.
36027.88 -> So in the object lesson we learn
that objects are references.
36033.34 -> Arrays work the same way. So for example,
36037.6 -> if we create an array, constant array,
36042.28 -> one equals the array
36046.3 -> 1, 2, 3.
36050.62 -> This variable doesn't actually
contain the values. 1, 2, 3.
36056.5 -> This array is saved somewhere
in the computer's memory.
36060.7 -> And this variable only contains a
reference that points to where this
36065.5 -> array is in memory.
36068.56 -> And that means if we create
a copy of this variable,
36073.18 -> cons array two
36077.59 -> equals array one,
36081.64 -> array two doesn't contain
a copy of the values,
36086.17 -> it actually just contains
a copy of the reference.
36090.28 -> So now both of these variables
are pointing to the same array.
36095.68 -> So if we did array two,
36100.3 -> push
Four,
36103.96 -> and then we console dot log
36108.88 -> array one and we console
36114.55 -> log array two
36119.32 -> and save,
36122.2 -> It will show us that even though
we added four to array two,
36127.27 -> array one and two were both modified.
36131.77 -> And that's because arrays are references.
36135.11 -> So both of these point to
the same array in memory.
36140 -> To avoid this behavior,
36141.74 -> we can create a copy of the
values in the array using a
36146.36 -> method called slice.
36149.18 -> So here if we did array one dot
36154.13 -> slice instead,
36157.1 -> this will make a copy of
the values in array one.
36162.11 -> And now these two variables
point to two different arrays.
36167.48 -> If we save,
36170.15 -> now you'll see that this
line only affected array two.
36176.21 -> The second detail we're going to learn
is a shortcut called destructuring.
36181.7 -> So at the bottom here,
let's create a new array.
36186.86 -> Cons array three equals
36191.99 -> the array. 1, 2, 3.
36197.6 -> And let's say we want to get the
first value and the second value
36202.46 -> out of this array.
36204.65 -> One way to do this is to
use the index like this.
36209.78 -> Another way is to use a
shortcut called destructuring.
36214.88 -> So here we're going to replace
this with square brackets,
36220.61 -> and now we can type some variable names.
36223.7 -> If we type first value,
36227.93 -> it will take the first value and
save it in a variable called first
36232.76 -> value.
36234.26 -> If we type and second value,
36239.66 -> it will take the second value
and save it in this variable.
36245 -> So this is an easier way to
get values out of an array
36250.13 -> and save them inside a variable.
36254.03 -> Next we're going to learn
more details about loops.
36258.44 -> So loops have two features
called break and continue.
36263.72 -> Break lets us exit a
loop early. For example,
36269.45 -> let's create some new lines and
let's create a loop that counts from
36274.16 -> one to 10. So as usual,
36277.46 -> we can use a four loop let
36282.05 -> I equals one I less
36286.7 -> than or equal to 10 and i plus
36291.57 -> plus
36294.11 -> and will console dot log I
36299.96 -> and save.
36302.66 -> So this will count from one to 10.
36307.25 -> So now let's say that when I is eight,
36310.61 -> we want to stop this loop early.
36313.68 -> So first let's check if I
36318.87 -> is equal to eight.
36323.52 -> If it is equal to eight,
36325.77 -> we're going to stop this
loop by typing break and
36330.45 -> semicolon, if we save
36334.89 -> once this reaches eight break
will cause this loop to stop
36340.35 -> and now it only counts up to eight.
36343.95 -> So that's the break feature of a loop.
36346.95 -> It lets us stop a loop early.
36350.13 -> The next feature is
called continue. Continue.
36353.81 -> Let's us skip one iteration
of the loop or one run of the
36358.53 -> loop. For example,
36360.9 -> let's say we want to
skip the number three.
36364.71 -> So at the top we can check if
36369.69 -> I is equal to three.
36375 -> And if it is, we can
use the code continue.
36380.97 -> This will skip the rest of this
code and go back up to the top
36385.86 -> of the loop. And do I equals four?
36390.03 -> If we save,
36392.46 -> this will skip three in the loop.
36396.66 -> So continue,
36397.71 -> let's us skip one iteration of the loop.
So now let's say
36402.6 -> that we want to skip a number.
If it's divisible by three,
36407.55 -> divisible by three means the number
can be divided evenly into three.
36412.98 -> For example,
36414.12 -> three and six are both divisible by three,
36419.04 -> but seven is not divisible
by three because there's one
36423.39 -> remaining. This is called the remainder.
36427.65 -> And we can calculate the remainder
using the remainder operator,
36432 -> which looks like this.
36434.37 -> So to check if a number
is divisible by three,
36438.03 -> we can check if the remainder is zero.
36442.35 -> So here we're going to replace this with I
36447 -> remainder three and we'll
check if the remainder is
36452.25 -> equal to zero. If we save,
36457.68 -> this will skip three and
six because they're both
36461.97 -> divisible by three. Next,
36466.05 -> let's use continue in a wild loop.
36469.41 -> So at the end here we'll
create some new lines
36474.3 -> and let's say we want to count
from one to 10 using a wild loop.
36479.82 -> So we'll create a loop variable,
36482.55 -> let I equals one,
36486.75 -> and we'll create a wild loop I
36491.89 -> less than or equal to 10 curly brackets.
36496.96 -> And the increment step I plus plus
36502.24 -> and inside the loop will just console dot
36506.95 -> log I and save.
36512.35 -> So this will count from one to 10 again.
36516.55 -> And let's say we want to not count
numbers that are divisible by three,
36521.89 -> so three, six, and nine.
36525.76 -> So at the top here we can check if
36531.1 -> I remainder three is equal to
36535.9 -> zero and curly brackets.
36539.47 -> And we might just try
to do continue. However,
36544.57 -> in a wild loop continue will
actually skip the increment
36549.28 -> step and this will cause an infinite loop.
36553.51 -> So when using continue in a wild loop,
36556.84 -> we have to do this
increment step manually.
36560.41 -> So before continue we have to do i plus
36565.27 -> plus to avoid an infinite loop.
36569.98 -> If we save,
36572.59 -> it will skip the numbers that are
divisible by three, which is three,
36577.54 -> six,
36578.26 -> and nine.
So remember in a wild loop if we
36583.15 -> use continue,
36584.5 -> always do the increment step
manually in a four loop. However,
36589.96 -> the increment step is done
automatically after every iteration.
36595.96 -> All right,
36596.89 -> the last detail we're going to learn
is how to use loops with functions.
36602.44 -> So let's say we have an array of
numbers and we want to create a copy
36607.33 -> of this array where
each number is doubled.
36611.44 -> So we already have the code for this,
36614.38 -> we can scroll up and the
code for this is here.
36619.15 -> So let's actually make a copy
of this code from before.
36623.95 -> We'll right click copy
36628.18 -> and scroll down here. And at the bottom
36634.69 -> right click and paste at the top,
36640.51 -> let's create an array called numbs.
36644.71 -> So cons,
36647.05 -> numbs equals array, and one,
36652.24 -> one and three. If we save ave,
36658 -> this will create an array
where each number is doubled.
36663.46 -> Now what if we wanted to use this
loop on a different array other
36668.44 -> than one, one and three?
36671.45 -> We can do that using a function.
36674.84 -> So let's create a
function around this loop.
36678.98 -> We'll create function,
36682.4 -> let's name it double array
36687.23 -> brackets and curly brackets
will remove the closed
36691.97 -> curly bracket.
36693.47 -> And at the bottom we'll
add it back and we'll
36698.36 -> select these lines
And press tap.
36703.31 -> So now instead of doing this loop
on the same array every time,
36709.01 -> we can turn this into a
parameter. So at the top here,
36714.77 -> we'll create a parameter called numbs,
36719.39 -> and we're going to delete this line
36723.5 -> and we're going to loop
over this parameter instead.
36727.67 -> So at the bottom we can
call our function using
36733.01 -> double array and brackets.
36737.9 -> And between the brackets we're
going to save an array into
36742.77 -> nus. So square bracket one,
36747.23 -> one, and three. If we save,
36752.42 -> this will do the same thing as before,
36756.23 -> but now because it's in a function,
36758.99 -> we can use this loop with
any array, not just one,
36763.31 -> one and three.
36765.38 -> So at the end we can do double array
36771.17 -> brackets and an array
36774.77 -> 2, 2, 5 this time and save.
36780.86 -> And it will create an array
where these numbers are doubled.
36786.29 -> So using a function, we can
reuse this loop for any value.
36792.47 -> Another feature of using a
function with a loop is that we can
36796.97 -> break out of this loop
using a return instead.
36801.86 -> So first, let's actually use
a return in this function.
36806.42 -> Instead of console dot
log, we're going to return.
36812.15 -> Now numbs doubled,
36816.74 -> And here we're going to
console dot log the result
36821.27 -> console, dot log
36827.36 -> and console dot log
36835.22 -> and save.
36837.83 -> So this does the same thing as before,
36841.1 -> except we're returning the result
and console dot logging outside
36845.96 -> of the function. Now let's say
that if we see the number zero,
36851.13 -> we want to stop this
loop early. To do that,
36855.45 -> we can click here and check if
36860.13 -> numb is equal to zero.
36864.96 -> And if it is, we can
break out of this loop.
36869.94 -> Now when we're inside a function,
36872.4 -> we can also use a return statement
to break out of this loop.
36877.53 -> So we can also do return numbs
36882.57 -> doubled.
36884.79 -> So a return statement will
end this function immediately.
36889.05 -> So this is another way of ending the loop.
36893.73 -> So down here if we add the number zero and
36898.59 -> then five and save,
36902.82 -> you'll notice that the loop stops
when we see the number zero.
36907.38 -> So return is another way of
breaking out of a loop when it's
36912.27 -> inside a function. And that's
the end of this lesson.
36917.19 -> In this lesson we learned about array,
36920.13 -> which represent a list of
values. We learned about loops,
36925.2 -> which led us run some code over
and over, just like a loop.
36930.3 -> We learned a technique we can use with
loops called the accumulator pattern,
36935.34 -> and we used it to create
a to-do list project.
36938.97 -> We learned that arrays are references
and the destructuring shortcut,
36944.43 -> and we learned more features
of loops like break,
36948.9 -> continue, and using
loops inside a function.
36953.91 -> Here are some exercises to help
you practice arrays and loops.
36985.92 -> In this lesson we're going to learn
some advanced features of functions
36990.93 -> and we're going to use them to
improve our previous projects.
36995.46 -> First, let's create a
new file for this lesson.
36999.96 -> We'll go to our code editor
and click here to show our
37004.46 -> files.
37005.84 -> And click here to create
a new file and we'll name
37010.46 -> this 12 dash advanced
37016.7 -> functions HTML and press enter.
37023.27 -> Now let's copy 11 arrays
and loops into this file.
37028.5 -> So we'll click here,
control A or command A,
37033.21 -> and then right click copy.
37038.22 -> And in here,
37041.28 -> right click and paste.
37045.96 -> And we can close this for now
and let's prepare this file for
37050.79 -> this lesson. So we'll scroll up
37055.35 -> and change the title to advanced
37061.5 -> functions.
37063.27 -> And let's remove all the
JavaScript code from before.
37070.71 -> And now let's save and open
this file in the browser
37075.81 -> by right clicking open with live server.
37082.2 -> Now let's also open the console on
this page. So we'll right click,
37087.66 -> inspect and open the console.
37093.21 -> And now we can close the previous tabs
37098.37 -> as well as the previous files.
37104.16 -> And now we're ready to begin.
37106.68 -> So first we're going to
review how to use functions
37111.21 -> inside the script element.
37113.43 -> Let's create a function
using the word function.
37118.56 -> We'll give it a name,
37120.72 -> greeting brackets and curly brackets.
37125.7 -> And inside the function
we'll type the code console
37130.62 -> dot log the string. Hello.
37137.01 -> So this is a function
and it lets us reuse code
37142.26 -> to run the code.
37143.16 -> Inside this function we
can type the function name,
37148.14 -> which is greeting,
37150.81 -> and then brackets if we save
37155.94 -> this line of code will run the
code inside the function and
37160.44 -> display. Hello.
37163.08 -> This is known as calling the
function or running the function.
37169.32 -> So now that we understand functions,
37171.84 -> we're going to learn an
advanced feature of functions,
37175.59 -> which is functions are values.
37179.58 -> So we learned many types of values
in this course, like numbers,
37184.29 -> strings, and bulls.
37186.87 -> And we can save a value in
a variable. For example,
37191.76 -> let's create some new lines
and will create a variable
37197.42 -> constant numb equal two.
37202.59 -> So this will save the value
to inside the variable
37207.16 -> numb.
37208.81 -> Now functions are also values
and this means just like a
37213.64 -> number, we can save a
function inside a variable.
37218.86 -> So let's give it a try.
37220.75 -> We'll create a new line and type const
37225.55 -> function one and we'll make this equal
37230.44 -> to a function this time.
37232.84 -> So we'll just type function and a name,
37237.94 -> greeting brackets and curly brackets
37243.19 -> and inside the function
we'll type console dot
37247.99 -> log the string. Hello two.
37253.72 -> And we'll put a semicolon at the end
since we're saving in a variable.
37259.54 -> So this variable now contains a function.
37263.65 -> We're using the exact
same syntax as before,
37267.31 -> except we're just taking this
function and saving it in a variable
37272.05 -> because functions are values.
37275.62 -> So now that this function
is inside this variable,
37279.13 -> let's actually console dot log it.
37282.46 -> So well console dot log
37287.23 -> function one and save.
37292.9 -> And this will show us that the
variable function one actually contains
37297.94 -> this function.
37300.16 -> Now on a new line we can also do console
37305.35 -> dot log and check the type of
37311.45 -> function one and save.
37316.24 -> And it will tell us that the type
of this variable is a function.
37321.46 -> So as you can see,
37323.05 -> a function is just another type
of value and we can save it
37327.97 -> in a variable.
37330.82 -> We can also run the function
inside this variable by
37335.59 -> typing the variable name function one.
37340.87 -> And because this contains a function,
37343.51 -> we can actually just
call it using brackets.
37348.37 -> So this will run the code
inside this function if we
37353.18 -> save it. Displays. Hello two.
37358.21 -> Now let's do some cleanup
in this code in JavaScript.
37362.89 -> As long as there's a way
to access a function,
37366.31 -> this function name is not needed.
37369.52 -> So here we can access this
function using this variable.
37374.77 -> So this function name is not needed
and we can actually just delete it
37379.6 -> like this.
37381.5 -> And now this is called
an anonymous function,
37385.61 -> which means a function without a name.
37389.63 -> Now an interesting thing to know is
that the function syntax that we've been
37393.92 -> using this entire course up
here is actually a shortcut
37398.96 -> for this code.
37401 -> Now even though this syntax uses
var and we usually don't recommend
37405.68 -> var, this syntax actually
has a couple advantages.
37410.63 -> Number one, it's easier
to read. And number two,
37414.59 -> it gives us a feature called hoisting,
37417.77 -> which means we can call
dysfunction greeting
37422.27 -> brackets before we create it in the code.
37426.62 -> So using hoisting, we don't have
to worry about what order we write.
37430.82 -> This code hoisting doesn't work
when we create our function
37435.83 -> and save it in a variable like this.
37439.52 -> So in JavaScript functions are values,
37443.33 -> and just like any other value,
37445.31 -> we can save it in a variable.
Now let's think,
37450.23 -> what else can we do with a value? Well,
37454.07 -> we can save a value in
an object, for example,
37458.87 -> let's scroll down and
create some new lines
37463.91 -> and will create an object.
37467.21 -> Constant object one equals
37472.22 -> curly brackets and inside
this object will have
37477.14 -> a property numb with the value two.
37482.78 -> So this saves the number
two inside this object.
37487.61 -> Now because functions are values,
37490.31 -> we can also save a function
inside this object.
37494.87 -> So we'll type comma
and then a property fun
37500.04 -> colon. And we'll create
a function this time
37505.32 -> function
37507.02 -> greeting brackets and curly brackets.
37511.7 -> And inside what type console dot log
37517.22 -> the string. Hello, three.
37522.32 -> So this saves a function
inside this object under the
37527.72 -> property. Fun. Now to
access this function,
37531.62 -> we just use the dot notation as normal.
37535.34 -> So object one.fun.
37541.1 -> And because this value is a function,
37544.1 -> we can call it using brackets if we
37548.78 -> save,
37550.76 -> this will run the code inside
the function and display.
37555.29 -> Hello three.
37557.42 -> So remember this is called a method.
37561.15 -> When we have a function
saved inside an object,
37566.19 -> again, as long as there's a way to
access this function, for example,
37571.32 -> using object one, fun,
37574.5 -> then we don't this function name.
37577.35 -> So we'll delete it and
use an anonymous function.
37583.02 -> Now let's think, what else
can we do with a value?
37587.76 -> We can pass a value into
a function. For example,
37593.19 -> down here let's create a function
37597.45 -> function dis display brackets and
37602.43 -> curly brackets. And we'll give
this function a parameter.
37607.35 -> So in here we'll create a
parameter and name it parameter.
37613.68 -> And inside the function we can use
a parameter just like a variable.
37619.47 -> So we'll console dot log the
37624.12 -> peram, and then down here,
37628.65 -> let's call this function using display
37633.96 -> brackets. And two,
37637.5 -> this will take the value
two, save it inside,
37642.42 -> and then we can use it just
like a variable. If we save,
37648.36 -> this will display two in the console.
37652.47 -> So this is known as passing a value into a
37657.07 -> function. Now because
functions are values,
37662.13 -> we can also pass a
function into a function.
37666.99 -> So let's give it a try.
37669.27 -> Down here we'll create a new function
37673.32 -> function,
37675.36 -> run brackets and curly brackets.
37680.46 -> And this function will
also have a parameter,
37684.33 -> let's call it per
37687.39 -> and down here we'll call this function
37691.68 -> run brackets.
37695.01 -> And between the brackets we're going
to give it a function this time.
37699.99 -> So we'll type function brackets and
37704.64 -> curly brackets,
37706.32 -> and inside the function
will type console dot
37711.33 -> log the string.
Hello, four.
37717.96 -> So this will take this
function and save it inside.
37724.17 -> And now up here we can use
peram just like a variable.
37729.78 -> So we can type peram.
37733.02 -> And because peram contains a function,
37736.71 -> we can actually just
call it using brackets.
37741.67 -> If we save,
37744.04 -> this code will run the function
that we created down here
37749.2 -> and display. Hello four.
37752.14 -> So this is called passing
a function into another
37757.42 -> function.
37758.74 -> The function that we're passing
in is called a callback function
37763.96 -> or a callback. So to summarize,
37768.06 -> functions are values.
37770.08 -> Anything we can do with a value
we can also do with a function.
37775.99 -> Now let's do some practical examples.
37778.72 -> Using functions as values,
37781.78 -> we're going to learn a feature
of JavaScript called set timeout.
37786.64 -> Set timeout allows us to run
a function in the future.
37792.28 -> First we'll comment out
the previous code using
37797.23 -> slash star and at the bottom
37802.15 -> star slash and let's create some new lines
37807.16 -> and we're going to type
the code set capital T
37812.35 -> time out.
37815.11 -> So set time out is a built in function.
37819.1 -> So we can type brackets
to call this function.
37824.17 -> Now set timeout takes two
parameters inside these
37828.79 -> brackets.
37830.17 -> The first parameter is a function
that we want to run in the future.
37835.9 -> Let's create a function
37839.83 -> brackets and curly brackets.
37843.16 -> And inside this function
let's type console
37847.84 -> dot log the string time out.
37854.77 -> So here we're using a function
as a value and we're passing it
37859.81 -> into another function.
37862.78 -> At the end we'll type a comma
and we'll give set timeout
37867.58 -> a second parameter.
37869.89 -> The second parameter is how long to
wait before running this function.
37875.65 -> So this is a number in milliseconds,
37878.89 -> 1000 milliseconds is equal to one second.
37883.09 -> So if we type 3000 milliseconds,
37887.5 -> this is equal to three
seconds. So set time out,
37892.09 -> we'll wait for three seconds
and then call this function.
37897.16 -> If we save after three seconds,
37901.27 -> it's going to display
timeout in the console.
37905.05 -> So that's set timeout,
37907.48 -> we give it a function and it
will call this function after a
37912.07 -> certain amount of time.
37914.83 -> So now we're going to learn an important
concept called asynchronous code.
37920.54 -> So after set timeout,
37923.18 -> let's type console dot log
37928.1 -> the string next line
37932.9 -> and save.
37935.24 -> So notice that it displays next
line first and then after three
37939.92 -> seconds it displays timeout.
So what's happening here?
37944.57 -> Why are they reversed? Set?
37947.12 -> Timeout sets up a timer and
after three seconds it will
37951.89 -> call this function. However,
37954.95 -> it doesn't actually wait for
the three seconds to finish,
37958.94 -> it just sets up the timer and
immediately goes to the next line.
37963.83 -> So that's why this line
is displayed first.
37967.85 -> So this is called asynchronous code.
37971.42 -> Asynchronous code means the
computer won't wait for this line to
37976.04 -> finish before going on to the next line.
37979.91 -> So for set timeout,
37981.56 -> it'll just set up the timer and then
immediately go to the next line.
37987.49 -> Synchronous code on the other hand means
the computer will wait for one line to
37991.73 -> finish before going to the next line.
37995.45 -> So all the code we've written in this
course so far has been synchronous
38000.38 -> code. In addition,
38003.25 -> all the code inside this function
is also synchronous code.
38008.65 -> So if we added console dot log
38013.75 -> the string timeout two
38018.79 -> and save the code inside the function will
38023.62 -> still run line by line.
It will wait for each line to finish
38028.66 -> before going to the next line.
38031.27 -> And after three seconds it will
display timeout followed by
38035.68 -> timeout two. So don't worry,
38039.28 -> all the code that we normally
write will be synchronous code,
38043.54 -> it will run line by line as usual.
38047.38 -> The only time that code becomes
asynchronous is when we use certain
38051.91 -> features of JavaScript like set timeout.
38055.96 -> So set timeout is the only
part that is asynchronous.
38060.88 -> Now the advantage of set timeout
being asynchronous is that it doesn't
38065.77 -> block our code for three seconds
waiting for this timer to finish.
38070.87 -> It just sets up the timer
in the background and then
goes to the next line of
38075.73 -> code.
38076.84 -> So this allows our code to do other
things while this timer is running in the
38081.64 -> background. And this is
similar to real life.
38085.45 -> If you set up a timer on your alarm clock,
38088.78 -> you're not going to stop and
wait for the timer to finish.
38092.44 -> You're going to go and do something else.
38095.57 -> Asynchronous code is
the exact same concept.
38100.19 -> Next we're going to learn a similar
function to set timeout called
38105.14 -> set interval.
38107.45 -> So at the bottom let's type the code, set,
38112.58 -> capital I interval
38116.81 -> and set interval is
another built-in function.
38120.47 -> So we can call it using brackets.
38124.58 -> And set interval takes the same
two parameters as set timeout.
38130.31 -> The first parameter is a function
that we want to run in the future.
38135.29 -> So let's type function brackets and
38139.97 -> curly brackets and
inside will type console
38145.22 -> dot log the string interval.
38152.63 -> Now let's add a comma and the
second parameter is also a
38157.28 -> number in milliseconds.
38159.59 -> So we'll type 3000
milliseconds or three seconds.
38164.93 -> So set interval will run this
function three seconds in the future,
38170.45 -> but this time it will keep running
the function every three seconds.
38175.7 -> If we save
38178.64 -> in the console every three seconds,
38181.43 -> it will run the function
and display interval.
38185.69 -> So set interval is also asynchronous.
38189.77 -> Below it if we type console dot,
38194.18 -> log the string,
38197.12 -> next line two and save
38203.45 -> it will set up the interval and
then immediately go to the next line
38208.34 -> and display next line two.
So that's set interval.
38213.35 -> We give it a function and it will
keep running this function after
38218.27 -> a certain period of time.
38221.09 -> So now let's do a project
using what we learned so far.
38225.95 -> Let's go to our browser and we'll
create a new tab at the top.
38232.4 -> And here,
38233.75 -> let's type super simple
38238.55 -> dev slash projects slash
38243.8 -> advanced dash functions and
38248.48 -> press enter.
38251.12 -> So this is basically the rock paper
scissors game that we created earlier,
38256.79 -> except this time it has an
extra button called autoplay.
38262.31 -> If we click this button every second,
38266.12 -> the computer will play by itself.
38269.57 -> So this feature will help us
practice using set interval.
38274.32 -> So first let's make a
copy of the project files.
38278.64 -> We'll go into our code
editor and click this icon to
38283.53 -> show our files.
38285.39 -> And let's make a copy of 10
rock paper scissors for this
38290.34 -> lesson. So we'll right click copy
38296.43 -> and down here, right click and paste.
38302.7 -> And I'll stop this for now.
38305.01 -> So here we're going to change
the name by right clicking
38310.14 -> rename.
38312.57 -> We'll remove copy at the end
and at the beginning we'll
38317.34 -> change it to 12 and press enter.
38322.74 -> And let's also make a copy of
the Java script and CSS files.
38328.65 -> So we'll click this file
and right click copy
38334.59 -> and then click the
folder right click paste
38340.53 -> and we'll rename this
file right click rename,
38346.35 -> remove copy at the end and
at the beginning change
38351.33 -> it to 12 and press enter.
38354.72 -> And let's also make a
copy of the CSS file.
38358.41 -> Select it right click copy,
38363.45 -> click the folder, right click and paste.
38369.42 -> And right click rename,
38374.01 -> remove copy,
38376.2 -> and at the front change
it to 12 and press enter.
38383.16 -> Now let's scroll down to
12 rock paper scissors.
38389.01 -> And I'll close this for
now and inside the head,
38394.08 -> let's change this to load
12 rock paper scissors.
38399.54 -> And we'll scroll to the bottom
and here instead of the lesson
38404.28 -> 10 file, we'll load the
lesson 12 JavaScript file.
38410.13 -> Let's save and we'll open
this in the browser by
38414.78 -> right clicking open with live server.
38420.21 -> So now we're ready to begin.
38422.82 -> Let's go back to super simple.dev.
38427.23 -> And the first thing we're going
to create is this autoplay button.
38432.15 -> So beside the reset score
button, which is here,
38436.56 -> we're going to create a new button,
38439.8 -> less than button, greater than,
38443.67 -> and inside will have the text auto plate.
38449.2 -> Let's save and go back to our tab.
38454.75 -> And now we have this button. So next,
38457.81 -> let's style this button with css.
38461.23 -> So we'll give it a class class equals
38466.54 -> auto dash play button
38471.97 -> and save. And now let's open the CSS file.
38479.17 -> I'm going to take this file and then
drag it to the bottom so I can see
38484.09 -> it side by side.
38486.25 -> So I'll close this for now and
rearrange this a little bit.
38492.04 -> And then down here, and we're
going to style the autoplay button.
38497.02 -> So let's just make the style the
same as the reset score button.
38501.67 -> So in the CSS we'll scroll down to the
38506.05 -> reset score button styles.
38508.54 -> So we'll add a comma at the end and
38511.73 -> type.auto dash play
38516.52 -> dash button.
38518.98 -> So now these styles will apply
to the class reset score button
38524.2 -> and the autoplay button. If we save,
38529.09 -> now we styled our project. So next,
38532.75 -> let's make this button interactive.
38535.57 -> So at the top here we'll add an on
38540.31 -> click attribute.
38542.83 -> And then in here we're going
to run some JavaScript code.
38547.33 -> Let's actually create a function so we
can separate the JavaScript into its own
38552.32 -> file.
So we'll run a function called
38557.89 -> autoplay and brackets.
38561.94 -> So now let's save.
38564.7 -> And right now this function doesn't exist,
38567.91 -> so we have to create this function
in the JavaScript file. So for me,
38573.01 -> the file's right here,
38575.14 -> I'll select it and then drag it down
here so I can see it side by side.
38581.02 -> So let's scroll down and I'm going
to create it just above the play
38585.91 -> game function.
38587.71 -> So here we'll create some
new lines and type function,
38594.04 -> auto play brackets and curly brackets.
38600.1 -> And now inside this function we
want to play the game every second.
38605.59 -> So we can use set interval to
run some code every second.
38611.02 -> So let's type set interval
38616.36 -> brackets and inside the
brackets will give it a
38621.7 -> function that we want to run.
38624.22 -> So brackets and curly brackets.
38628.19 -> And then at the end let's
type a comma and we'll give it
38632.96 -> 1000.
So this means it will run this function
38637.97 -> every 1000 milliseconds or one second.
38642.53 -> And now inside this function we're
going to automatically play the game.
38648.17 -> And to play the game we can use
this function right here. Play game.
38653.84 -> So here we'll type play game
38659.21 -> brackets.
38660.98 -> Now we need to provide this
function with a player move.
38665.39 -> And remember we have another
function pick computer move,
38670.22 -> which will give us a random
move. So above this line,
38675.53 -> let's create a variable cons
38679.76 -> player move and we'll make it equal
38685.01 -> and we'll pick a random move using pick,
38689.81 -> computer, move and brackets.
38695.54 -> And finally we'll take this move
that we picked and pass it into
38700.49 -> this function. So player move.
38706.01 -> So now when we click this button,
38708.29 -> it should play the game every second.
38712.01 -> Let's save and click autoplay.
38718.13 -> And it works. The computer is
playing against itself every second.
38723.68 -> So now let's make this button stop
playing when we click it again.
38728.75 -> So at the top let's create
a variable to keep track
38733.85 -> of whether or not we're playing.
38736.43 -> So we use let is auto
38741.92 -> playing,
38743.42 -> and at the start we'll
make it equal to false
38748.91 -> and save. And now inside this function,
38754.04 -> what check using an if statement,
38757.07 -> brackets and curly brackets.
And inside this condition,
38762.44 -> let's check if we're not playing,
38765.59 -> so not is auto
38770.45 -> playing.
38772.82 -> So if we're not playing then we
want to start playing the game,
38777.68 -> which is this code down here.
38780.23 -> So let's select this
code and then right click
38784.94 -> cut and in here,
38788.84 -> right click and paste.
38793.55 -> And also after we start playing the game,
38797.15 -> we're going to change
this variable to true.
38800.63 -> So is auto playing and will
38805.5 -> make it equal to true
because now we are auto
38810.45 -> playing.
38812.07 -> So now let's add the ELs
branch to this statement
38816.75 -> else curly brackets.
38820.53 -> So now we need to stop this
interval. So how do we do that?
38826.5 -> The answer is that set interval
actually returns a number
38831.48 -> and this number is like an id.
38834.18 -> We can use this ID to stop the interval.
38838.41 -> So at the front let's create
a variable to save this id
38843.39 -> d constant interval
38849.08 -> ID and equals. However,
38853.2 -> there's another problem here.
38855.6 -> Every time we run the function
we're going to get a different id.
38860.79 -> So in order to save the ID from last time,
38864.48 -> we need to put this variable
outside the function.
38868.65 -> So let's select this and
remove it for now. And we'll
38873.57 -> scroll up.
38875.16 -> And here we'll create the variable let
38880.35 -> interval ID and we'll leave it
38884.76 -> undefined to start.
38887.4 -> And now down here we're going to
save the return value into this
38892.87 -> variable by typing interval ID
38898.47 -> equals set interval.
38901.86 -> And now at the bottom we're
going to use the interval ID to
38906.69 -> stop the interval. Let's scroll down.
38910.59 -> And to stop an interval we can
use a function called clear
38915.33 -> interval.
38916.77 -> So we'll type clear capital I,
38921.36 -> interval and brackets.
38925.83 -> And between the brackets we're going
to give it an ID that we want to stop.
38931.26 -> So we'll give it this interval id,
38935.94 -> interval id.
38939.27 -> And then at the bottom let's
also change is autoplaying
38944.13 -> to false because we just stopped it.
38947.46 -> So is auto playing
38952.68 -> equals false and save.
38958.44 -> So now if we try out this button,
38962.19 -> it will start playing the game by
itself every second. And if we click the
38967.14 -> button again, it will
stop playing the game.
38971.97 -> So that's how we stop an interval.
38974.55 -> We need to save the ID and
then call clear interval
38979.47 -> with this id.
38981.93 -> So now I'll up the code a little
by removing this extra line
38987.01 -> and save. And now we're
finished with this feature.
38992.95 -> So next let's go back to
our advanced functions file.
38998.53 -> So I'll click up here and
then at the bottom I'll
39003.27 -> open 12 advanced functions
39007.53 -> and hide the files for now.
39010.5 -> And we're going to learn some more
features of functions as values.
39015.96 -> So let's actually close the
other files that we opened.
39021.5 -> And first let's comment
out the previous code with
39026.07 -> slash star.
39028.08 -> And at the bottom star slash
39033.24 -> let's scroll down and save.
39037.11 -> And let's open the tab for this file.
39042.09 -> So now we're going to learn another
way to loop through an array.
39047.7 -> First let's create an array.
39050.61 -> We'll type square brackets and
inside the array we'll have
39055.44 -> the string make dinner
39060.84 -> and another string wash dishes.
39066.51 -> And another string watch YouTube.
39073.44 -> So in the previous lesson we
learned how to loop through an array
39078.51 -> using a for loop or a wire loop.
39082.2 -> Another way to loop through an
array is using a method of the array
39087.54 -> called four each.
39090.18 -> So at the bottom let's type dot four
39095.28 -> capital E each and brackets.
39100.86 -> So this is the four each
method and it allows us to loop
39105.57 -> through this array.
39107.94 -> Inside these brackets we're going
to give for each a function.
39113.19 -> So we'll type function
39116.82 -> brackets and curly brackets. So again,
39121.08 -> we're just passing a function
into another function.
39126.24 -> However, this function
will be a little different.
39129.99 -> We're going to give it a parameter.
39132.81 -> So up here let's create a parameter called
39137.25 -> value.
39139.53 -> So what for each does is that
it loops through the array
39144.51 -> and for each of these values it
will save the value in the parameter
39149.67 -> and run the function.
39151.89 -> So let's console dot log
39157.5 -> value and save.
39162.58 -> So this will loop through the
array and display each value in the
39167.53 -> console. So let's go
through this step by step.
39172.06 -> So it'll take the first value,
39174.67 -> save it in this parameter
and run the function.
39178.78 -> Then it will take the second value,
39181.3 -> save it in the parameter
and run the function.
39184.93 -> Then it will take the third value,
39187.39 -> save it in the parameter
and run the function.
39192.22 -> So the four each method is actually
the preferred way to loop through an
39196.96 -> array because this is easier
to read than a four loop
39201.67 -> like this.
And four each also has another feature.
39207.34 -> We can give this function a
second parameter so we can type
39212.17 -> comma.
39213.61 -> And the second parameter
is the index or the
39217.96 -> position of the value in the array.
39221.47 -> So for the first value index will be zero.
39225.19 -> For the second value index
will be one third value,
39229.57 -> index will be two, and so
on. So above this line,
39235.21 -> let's also console dot log
39240.46 -> the index and save.
39245.74 -> And this will also display
the index of each value.
39251.05 -> All right,
39251.98 -> now let's do a practical example
using the for each method
39257.05 -> we're going to go back to the to-do list
project that we created in the previous
39261.49 -> lesson. So we'll click up
here to show our files.
39267.34 -> And let's scroll up
and let's open 11 to-do
39272.11 -> list dot js.
39275.41 -> So in this code we used a for loop
to display the to-do list on the
39280.36 -> page.
39281.68 -> We're going to switch this to
using A for each method instead.
39286.51 -> So first let's actually make a
copy of the files for this project.
39291.94 -> We'll click up here
39294.76 -> and let's click 11 to-do
list and right click
39300.7 -> copy. And let's click the script folder,
39305.95 -> right click and paste.
39310.33 -> And now we'll rename this
by right clicking rename.
39316.99 -> Remove copy from the end
and change the beginning to
39321.85 -> 12 and press enter.
39326.38 -> Let's also make a copy of the
CSS and HTML file for this
39330.86 -> project. So we'll click this CSS file,
39335.23 -> right to click copy,
39339.2 -> click the styles folder,
right click and paste,
39345.47 -> right click rename,
39350 -> remove copy,
39351.83 -> and at the front change
it to 12 and press enter.
39358.07 -> And finally we'll scroll down,
39360.8 -> click 11 to-do list dot html,
39364.43 -> right click copy. And then down here,
39370.1 -> right click and paste,
39373.91 -> right click rename,
39377.93 -> remove copy at the end and
at the beginning change it to
39383 -> 12 and press enter.
39387.02 -> Now we can hide these files
39390.68 -> and we can close the lesson 11 files.
39394.04 -> And now here we're going to
change the CSS file that we load
39398.63 -> to 12 to-do list and we'll scroll down and
39403.61 -> we'll also change the JavaScript
file that we load to 12 to-do list.
39409.58 -> Now let's save
39412.31 -> and we'll open this in the
browser by right clicking
39417.47 -> open with live server. Okay,
39422.33 -> now let's go back to the JS file.
39425.06 -> So I'll take this file
and drag it to the bottom
39429.62 -> and I'll rearrange the windows here
39432.98 -> and we're going to scroll down and we'll
change this four loop to use a four
39437.99 -> each method. So first,
39440.84 -> let's type above this four loop
and we'll type the array that we
39445.67 -> want to loop through,
39447.47 -> which is to-do list and we'll type dot
39453.05 -> and use the four each method and
39457.61 -> brackets inside the brackets
we'll give it a function
39462.59 -> that we want to run for each.
39464.27 -> To do so we'll type function
39468.92 -> brackets and curly brackets.
39472.46 -> And this function can have two parameters.
39476.27 -> The first parameter will
contain each value in the array.
39480.86 -> So we'll call it to do object,
39485.69 -> we'll type a comma and the
second parameter contains each
39490.22 -> index in the array. So
we'll just call it index.
39495.95 -> And now inside this loop we basically
want to do everything that we
39500.72 -> did here. So let's just
make a copy of this code,
39506.45 -> right click copy,
39510.65 -> and then up here inside
for each right click
39515.69 -> and paste. So now if we scroll up,
39521.19 -> we already have the to-do object up here,
39524.79 -> so we don't need to get it
from the array like before.
39528.66 -> So we can remove this line
and let's also remove these
39533.34 -> comments.
39537.54 -> The other thing we have to change is
that previously we were using I for the
39542.16 -> index, but now the index is called index.
39547.14 -> So we just changed this to index.
39552.66 -> So that's how we use a for each
method instead of a four loop,
39558 -> if we compare this code to the
four loop that we had before
39563.07 -> the four, each method is easier to read.
39566.49 -> So for the rest of this course we're
going to prefer to use four each
39571.35 -> instead of a four loop. So we're
going to remove this four loop.
39581.49 -> Let's scroll back up and save
39586.35 -> and the project still works.
39589.2 -> So that's a practical example
of using the for each method.
39594.27 -> Now let's go back and learn some
more details about for each.
39599.58 -> We'll close the JavaScript
file for now and go back to
39604.5 -> advanced functions dot html
and open the tab for this
39609.45 -> file.
39612 -> So in the previous lesson we
learned a feature of loops called
39616.86 -> continue.
39617.88 -> Continue let's us skip to the next
iteration or the next run of the
39622.81 -> loop for each methods don't have continue,
39627.27 -> but we can do the same thing
with a return statement.
39631.02 -> So let's say in this loop we
don't like washing dishes.
39635.52 -> If the value is wash dishes,
39638.19 -> we're going to skip it and
not display it in the console.
39642.63 -> So above we'll create an if statement
39648.63 -> and then inside the condition
we'll check if value
39653.16 -> is equal to the string wash
39658.14 -> dishes. And then in the curly brackets,
39662.07 -> if it is equal, will return and semicolon.
39667.89 -> So this return statement will end
this function early and it will go
39672.78 -> on to the next function.
39675.24 -> So it basically does the same
thing as continue in a for loop.
39680.31 -> If we save,
39682.62 -> you'll notice that it's
skipped wash dishes.
39686.88 -> In the previous lesson we also learned
a feature of loops called break.
39692.25 -> Break lets us exit a loop early.
39695.68 -> Unfortunately there's not an easy
way to break in a four each loop.
39701.02 -> So if we need to use break
to exit this loop early,
39705.19 -> then it's better to use
a regular four loop.
39711.28 -> Let's take a break before continuing
what the rest of this lesson here are
39716.09 -> some exercises you can do on your own
to practice what we learned so far.
39749.63 -> So next we're going to move on
and learn a shorter way to write
39754.78 -> functions called arrow functions.
39758.14 -> So let's go to the bottom of this code,
39761.08 -> we'll create some new lines
and let's create a variable
39766.21 -> cost
39768.4 -> and we'll name the variable arrow function
39774.04 -> and we'll make it equal to brackets equal
39778.96 -> greater than or an arrow.
39782.5 -> And then curly brackets
39785.56 -> inside the curly brackets
we'll type some code console
39790.6 -> dot log brackets and the string,
39795.82 -> hello. And we'll put a
semicolon at the end.
39800.89 -> So this is an arrow function.
39803.86 -> It works the same way as a
regular function. For example,
39809.17 -> we can call this arrow function
by typing the variable name
39815.17 -> arrow function and brackets.
39821.08 -> If we save,
39823.54 -> this line of code will run the
code inside this arrow function
39828.49 -> and display. Hello.
39831.7 -> So arrow functions mostly
work the same way as regular
39836.46 -> functions. So to compare them,
39839.26 -> let's actually type above this
code will create some new lines
39844.21 -> and type const regular
39849.46 -> function equals the word function.
39855.64 -> Brackets and curler brackets,
39858.63 -> console dot log string.
39863.59 -> Hello.
39866.62 -> So these two syntaxes do the same thing.
39870.82 -> The difference is that instead of
using the word function and arrow
39875.33 -> function just uses an arrow.
39878.9 -> Now parameters work the same
way in an arrow function we just
39883.79 -> type the parameter between
these round brackets.
39887.24 -> So here let's type per
39891.65 -> and here as well.
39895.52 -> If we want multiple parameters,
39897.8 -> it also works the same
way up here we can type
39904.43 -> two and down here
39909.74 -> two. And finally,
39912.17 -> return statements also work the same way.
39915.95 -> So in this function we can return five
39921.41 -> and in the arrow function
we can also return
39925.97 -> five.
39927.89 -> So now let's learn some differences
between these two arrow functions
39932.78 -> have a few shortcuts that
regular functions don't have.
39937.61 -> For example,
39939.2 -> at the bottom let's create
an arrow function using
39944.24 -> cons and we'll name it one
39948.72 -> peram and make it equal
to an arrow function,
39953.6 -> brackets, arrow and curly brackets.
39959.27 -> Now in this arrow function we're
going to give it one parameter
39964.25 -> per and inside the function will console
39970.16 -> dot log peram plus one.
39976.49 -> So when an arrow function
only has one parameter,
39980.21 -> these round brackets are optional
so we can actually remove them
39987.08 -> if we do one per brackets.
39992.45 -> Two,
39993.92 -> if we save it will display two plus one,
39998.54 -> which is three. Let's
learn another shortcut.
40003.43 -> We'll create some new lines and type cons.
40007.93 -> One line and make it equal to
40013 -> an arrow function racks arrow and
40017.77 -> curly brackets
40020.38 -> and inside will return two
40025.3 -> plus three.
40028.42 -> So when an arrow function
only has one line like this,
40033.4 -> we can actually put it on
the same line as the arrow.
40039.4 -> And now that everything's
on the same line,
40042.43 -> the curly brackets are actually optional.
40045.82 -> So we can remove them and we can
also remove the return statement.
40054.11 -> So this is a one line arrow
function. If we just have an arrow,
40059.03 -> it will automatically return
the result on the right.
40063.74 -> So at the bottom we can console dot
40068.57 -> log and call the one line
40073.76 -> function with brackets. If we save
40079.04 -> this function will return two
plus three and it will display
40083.66 -> five in the console. So
that's arrow functions.
40088.22 -> It's a shorter way of writing a
regular function and it has a few
40093.32 -> shortcuts for now.
40095.72 -> Let's get some practice
using arrow functions.
40099.56 -> So let's scroll up in
this code to the for each
40104.21 -> method. So let's use
an arrow function here.
40108.02 -> Instead we just have to
remove the word function.
40113.9 -> And after the round brackets add an arrow
40118.43 -> equals greater than if we save
40123.23 -> the loop still works.
40125.57 -> So when we're passing a
function into another function,
40129.71 -> like for each,
40131.39 -> it's recommended to use arrow functions
because it makes our code easier to
40136.25 -> read. So now let's use arrow
functions in some of our previous
40140.99 -> projects. We'll start with
the rock paper scissors game.
40146.06 -> Let's open our files by clicking here
40150.35 -> and we'll find the 12
rock paper scissors dot js
40155.23 -> file.
40157.46 -> And then inside this file we're
going to scroll down to the
40162.38 -> autoplay function.
40164.63 -> So here we're passing
a function into another
40169.25 -> function. So it's recommended
to use an arrow function.
40174.41 -> Let's remove the word function and add an
40179.15 -> arrow. So now this code is
a little easier to read.
40184.25 -> Now what about this function
up here function autoplay,
40189.53 -> should we also switch
this to an arrow function?
40193.28 -> So this situation is more personal
preference. So above this,
40198.62 -> let's actually create an arrow
function version of this.
40203.03 -> Cons auto play
40207.71 -> equals brackets and arrow and
40212.45 -> curly brackets.
40214.97 -> So even though we could create
an arrow function version of
40219.71 -> this,
40220.73 -> I actually prefer the regular
function syntax here for two reasons.
40226.28 -> Number one, I think this is
easier to read than this.
40231.72 -> And number two, this function
syntax enables hoisting,
40236.58 -> which means we can call this function
before we create it and we don't have
40241.47 -> to worry about which order we write
the code. So for these reasons,
40246.75 -> I actually prefer this situation
to use a regular function
40251.32 -> syntax and not an arrow function.
40254.52 -> So we'll comment out the arrow
function using double slash
40260.34 -> and double slash.
Now let's save
40265.74 -> and let's open the tab for this
project and we'll give it a
40270.48 -> try. So click autoplay
40275.01 -> and this still works after
replacing with an arrow function.
40281.16 -> Next,
40281.94 -> let's go to the to-do list project
and switch to arrow functions.
40287.31 -> So we'll go to our code
editor and find the to-do list
40292.02 -> project, which is here.
40297.21 -> And let's scroll down.
40300.39 -> So inside render to-do list
we're using for each and
40305.28 -> we're passing this function
into another function.
40309.15 -> So it's recommended to use
an arrow function here.
40313.11 -> So we'll remove the word
function and after the brackets
40318.51 -> we'll add an arrow. And again,
40323.13 -> I'll leave this function syntax as a
regular function because it's easier to
40327.96 -> read and enables hoisting.
40330.93 -> So let's save and go
back to our to-do list
40336.9 -> and everything still works. Next,
40340.83 -> let's go back to 12 advanced functions dot
40345.73 -> html and we'll scroll to the bottom
40352.71 -> and we'll open the tab for this file
40356.54 -> and we'll review another place.
40358.38 -> We could use arrow functions
which is inside an object.
40363.66 -> So at the bottom here,
let's create a new object.
40368.58 -> Const object two equals
40373.77 -> object.
40375.66 -> And then inside let's
type the property method
40380.88 -> colon and an arrow function brackets
40385.71 -> arrow and curly brackets.
So even though we
40390.36 -> could save an arrow function
inside an object like this,
40395.28 -> objects already have a
shortcut for functions.
40399.87 -> So at the bottom we could just type method
40405.33 -> Brackets and curly brackets.
40409 -> So this syntax is called
the shorthand method syntax.
40414.1 -> So this shorthand method syntax
is actually easier to read than an
40419.05 -> arrow function. So when saving
a function in an object,
40423.67 -> it's actually recommended
to use this syntax instead.
40428.35 -> There's also another difference between
regular functions and arrow functions,
40433.33 -> but we'll learn about it later in this
course because it's a more advanced
40437.92 -> feature.
40439.99 -> Now let's move on and we're going to
learn another improvement we can make to
40444.58 -> our projects. So let's
comment out this code.
40449.26 -> We'll scroll up and type slash star
40454.57 -> and at the bottom
40458.08 -> star slash and save.
40462.67 -> And next we're actually going to
scroll up to the very top of this file
40468.61 -> and we're going to create
a button on the page.
40472.21 -> So inside the body we'll type less than
40476.98 -> button greater than,
40479.47 -> and inside the button
we'll have the text click.
40485.29 -> Now let's say that we want to run some
JavaScript code when we click this
40489.91 -> button.
40491.35 -> So here we can type on click
40495.7 -> equals double quotes and write
some JavaScript inside this
40500.56 -> double quotes.
40502.27 -> Now we're going to learn a better
way of doing this called add event
40506.92 -> Listener to use add event
listener first we're going to
40511.9 -> get this button and put it into
our Java script using document
40516.85 -> dot query selector.
40519.16 -> So let's add a class to this
button so we can select it
40524.77 -> and we'll set it to js dash button.
40530.23 -> And now inside the script element
we're going to use document
40536.05 -> dot query selector
40540.49 -> brackets and the string dot
40545.41 -> js dash button.
40549.64 -> So now let's save this button in
a variable so we can use it later
40554.8 -> at the front. We'll type cons
40559.27 -> button element equals this result.
40565.9 -> Now every HTML element
has a method called add
40570.7 -> event listener.
Add Event Listener lets us run some code
40575.89 -> when we interact with the element,
40578.44 -> so it sort of does the
same thing as on click.
40582.97 -> So at the bottom,
40584.74 -> let's button element
40589.43 -> dot add, capital E, event,
40594.62 -> capital L, listener and brackets.
40600.98 -> So add event listener has two parameters.
40604.76 -> The first parameter is the event
or what type of interaction we want
40609.65 -> to listen for. So between these brackets,
40614.27 -> let's type the string click.
40618.44 -> So this will run some code
when we click the button.
40623 -> The way to find these event names
is to look at this attribute.
40627.98 -> The word after on is the event next.
40632.75 -> The second parameter is a function
that we want to run when we click
40637.76 -> this element.
40639.5 -> So we'll type a comma and
because we're passing a
40644.03 -> function into another function,
we're going to use an arrow function.
40649.7 -> So we'll type brackets,
40652.58 -> arrow and curly brackets.
So inside here
40657.71 -> let's just do console dot log
40662.99 -> string, click and save.
40669.23 -> And now when we click this button,
40672.59 -> it will run this function
and display click.
40677.57 -> So this code does the
same thing as the on click
40682.22 -> attribute. However,
40684.74 -> add event listener has some
advantages over using an attribute.
40690.11 -> First it lets us add multiple
event listeners for an event.
40695.57 -> For example, let's add
another click event listener.
40700.76 -> We can select this code and right click
40706.1 -> copy. And then down here,
40711.89 -> right click and paste.
40716.06 -> And let's change this to log click two.
40720.53 -> If we save and click the button,
40725.9 -> it will run both these functions.
40729.08 -> So at Event Listener let's us
add multiple listeners to one
40733.94 -> event.
40735.35 -> Another advantage of doing this is
that we can remove an event listener
40740.42 -> using a method called
remove event Listener.
40745.16 -> So under this code we can type
40749.57 -> button element dot
40754.16 -> remove, capital E, event,
40758.24 -> capital L,
40759.59 -> listener and brackets and remove
40764.49 -> Event Listener also has two parameters.
The first
40769.17 -> parameter is the event.
40771.78 -> So in this case it is the string click
40777.09 -> and we'll type a comma.
40779.22 -> And the second parameter is the
function that we want to remove so
40784.09 -> that when we click this button it
will no longer run that function.
40789.18 -> Now we can't just type
a copy of this function,
40793.23 -> we need to use this exact function
inside remove event listener.
40799.11 -> To do that, we'll save
this in a variable first.
40803.4 -> So above this,
40804.99 -> let's create a variable constant event
40810.75 -> listener equals and we'll select this code
40817.05 -> right click copy,
40820.92 -> and in here right click and paste.
40827.4 -> And now we'll replace
this with the variable
40832.26 -> event listener.
40836.07 -> And down here we'll
remove this same variable
40840.57 -> event listener.
40844.95 -> If we save and click the button again,
40850.05 -> it will only display click two
because we added this event
40854.88 -> listener and then we removed it
so it will no longer run this
40859.47 -> function when we click the
button. So as you can see,
40864.24 -> add event listener gives us more
control over event listeners.
40869.16 -> We can add multiple listeners
to an event and we can also
40873.96 -> remove a listener from an event.
So because of these advantages,
40879.24 -> the best practice is to use add
event listener instead of an on
40884.22 -> click attribute.
40886.2 -> So let's go back into our projects
and switch to using ad event listener.
40892.11 -> We'll start with the rock
paper scissors project.
40895.92 -> So we'll open our files
and we'll open 12 rock
40900.9 -> paper scissors and click here and save.
40906.03 -> And we'll scroll up to 12
rock paper scissors dot
40910.89 -> js. And for the video I'll
drag this down to the bottom
40917.1 -> and I'll hide the files for now
40920.46 -> and then rearrange the windows
40924.51 -> and finally open the tab for this file.
40929.64 -> Now let's go to the html.
40932.49 -> We'll scroll up to these move buttons,
40936.69 -> which is up here.
40940.53 -> So here we're using the on click
attribute and we're going to switch it
40945.46 -> to add event listener.
40948.01 -> So first let's get this
button into our Java script.
40952.9 -> We'll add a class so we can select it js
40957.55 -> dash rock dash button
40962.41 -> and save. And then down here,
40967.09 -> let's go below the autoplay
function right here
40972.4 -> and we'll use add event listener.
40975.46 -> So we'll get this button into
our JavaScript using document
40981.43 -> dot query selector brackets
40986.56 -> and a string dot js dash
40991.06 -> rock dash button.
40995.23 -> And we're going to use dot add event
41000.57 -> listener brackets.
41004.68 -> So we're going to listen for a click and a
41009.27 -> comma and we'll give it a
function that we want to run.
41014.64 -> So a comma mistake here is
to actually run the function.
41019.17 -> For example,
41020.67 -> play game brackets and the
41025.08 -> string rock.
41028.11 -> So we're supposed to give a
function to add event listener.
41032.91 -> However this doesn't result in a function.
41037.44 -> This will actually run play game
and give us the return value
41042.48 -> which is undefined.
41044.55 -> So this code will actually result
in undefined and then we're giving
41049.2 -> undefined to add event
listener so it won't work.
41055.14 -> So in order to give add
event listener a function,
41059.31 -> we need to create a function here.
41062.19 -> So let's remove this code and
we'll create a function using
41067.11 -> brackets, arrow and curly brackets.
41072.57 -> And then inside this function
we're going to call play game.
41077.97 -> So we'll type play game brackets
41083.37 -> and rock.
41086.85 -> So now when we click the rock button,
41090.21 -> it will run this function
and play the game.
41094.65 -> So let's remove the on click attribute
41099.48 -> and save the HTML
41103.59 -> and also save the JavaScript.
41106.89 -> And then go to our project
and click the rock button.
41111.63 -> You can see that it works except
this time we're using add event
41116.4 -> listener.
41117.99 -> So let's do the same for the
paper and the scissors button.
41122.5 -> Feel free to pause the video
if you want to try it yourself.
41127.36 -> So we'll scroll down here and
let's add a class to the paper
41132.25 -> button.
41133.06 -> So we can select it js dash paper
41138.16 -> dash button.
41140.65 -> And then in our java script
we'll make a copy of this code.
41145.36 -> So right click copy,
41149.53 -> And then down here,
41152.89 -> right click and paste.
41157.87 -> And now we're going to replace
the rock button with paper.
41164.23 -> And when we click this button, we're
going to play the game with paper.
41170.62 -> Now let's save and we'll
remove the on click
41175.36 -> attribute and save the h html.
41181.6 -> If we click the paper
button, it works as before.
41187.06 -> Finally, let's do the scissors button.
41190.39 -> So we'll add a class js dash,
41194.98 -> scissors dash button,
41199.06 -> and then inside our java script
we'll make a copy of this,
41203.86 -> right click copy.
41207.73 -> And then down here, create some new lines,
41211.84 -> right click and paste.
41216.1 -> And now switch to the
scissors button and play
41220.99 -> game with scissors.
41225.01 -> Let's save and remove
the on click attribute,
41231.76 -> save the html and try the scissors button
41237.37 -> so everything still works.
41240.43 -> And I'll leave switching the reset
score button and the autoplay button
41245.68 -> as exercises.
41247.99 -> So now let's try add event
listener with a different event.
41252.4 -> We'll use it with key down.
41255.13 -> So let's say that in our project we want
to make it so we can play the game with
41259.84 -> our keyboard. If we type
R, it will play rock.
41265.09 -> If we type P, it will play
paper and if we type S,
41269.95 -> it will play scissors.
Let's go into our JavaScript
41275.56 -> and we'll scroll down
41278.26 -> And we're going to add an event listener
to the body this time so that if
41283.18 -> we type anywhere on the
page we can run some code.
41287.71 -> So we're going to get the
body element using document
41292.96 -> dot body and then dot add
41298.4 -> event listener and brackets.
41304.13 -> This time the first parameter
or the event will be the string
41309.41 -> key down.
41312.11 -> And let's type comma and give it
a function that we want to run
41317.45 -> brackets,
41318.89 -> arrow and curly brackets inside here.
41323.75 -> Let's just type console dot log
41328.85 -> key down for now and save.
41334.91 -> So now if we go to the project
and we open the console,
41339.17 -> right click and click inspect,
41343.91 -> click the console and
then click on the page.
41348.68 -> If we type a key on our keyboard,
41352.85 -> it will run this function
and display key down.
41357.62 -> So now we have to check what key
was pressed and play the game.
41362.81 -> So how do we know which key
that we pressed earlier in this
41367.34 -> course we used the attribute
on key down and we learned that
41372.26 -> it gets a special object
called event and the event
41376.79 -> object contains which key was pressed add.
41381.02 -> Event Listener also
provides this event object,
41384.74 -> but it provides it as a
parameter to this function.
41388.73 -> So inside the round brackets,
let's add a parameter event.
41395.12 -> Now every time we type on our
keyboard add event listener will
41399.83 -> save the event object in
here and run the function.
41405.11 -> And this event object contains
the key that we pressed.
41410.09 -> So in the console dot log,
41412.16 -> let's display event dot key this time and
41417.11 -> save.
41419.66 -> Now if we click on the page and type R
41424.88 -> event dot key will contain R.
41428.57 -> If we press P event dot
key, we'll contain P.
41433.85 -> So that's how we know which key we
pressed. So now let's close this
41439.73 -> and instead of console dot log,
41442.79 -> we'll create an if statement
to check which key we pressed.
41447.23 -> So if brackets and curly brackets,
41452.21 -> and here we'll check if event dot key
41457.88 -> is equal to the string R.
41462.65 -> If it is, we're going to
play the game with rock.
41467.24 -> So inside here we can just
run this play game function,
41473.15 -> play game and brackets and
41477.75 -> inside we'll type these string rock.
41482.79 -> Now let's check if we pressed P.
41485.91 -> So we'll add another branch else if
41490.92 -> brackets and curly brackets.
41493.92 -> And in the second condition
we'll check if event dot
41498.75 -> key is equal to the string P.
41504.54 -> If it is, we'll play the game with paper.
41508.44 -> So inside here we'll run play game
41514.11 -> brackets and the string paper.
41518.49 -> And finally we check if we pressed S.
41522.36 -> So at the end we'll add another else if
41527.22 -> brackets,
41528.03 -> curly brackets.
And inside here we check if
41533.04 -> event dot key is equal to the
41537.54 -> string S. If it is,
41541.53 -> we'll play the game
41545.31 -> with the string scissors.
41549.6 -> Now let's save click our page
41554.43 -> and type R and it plays a game with rock.
41559.62 -> If we type P,
41561.69 -> it will play the game with
paper and if we type S,
41567.06 -> it will play the game with scissors.
41570.36 -> So that's an example of using ad event
listener with a different type of
41575.25 -> event with a key down. If
we need the event object,
41580.38 -> we can get it using a parameter up here.
41584.37 -> So those are all the features we're going
to create for our rock paper scissors
41588.45 -> project.
41589.8 -> Now let's move on to the to-do list
project and switch To add event
41594.52 -> listener, we'll go into our code editor,
41598.65 -> click up here and find 12 to-do list dot
41603.76 -> html.
41606.18 -> We'll also scroll up
to the scripts folder,
41610.02 -> find 12 to-do list js and open this file.
41615.15 -> And I'm going to put it at the bottom
here so I can see it side by side.
41620.4 -> I'll close this for now
and close rock, paper,
41623.76 -> scissors and then open
the tab for this project.
41629.91 -> Okay,
41630.81 -> so let's start by switching the ad
button to use add event listener.
41636.6 -> We'll go into our H T M L and
find the add button which is
41641.49 -> here. And we're going to add a class.
41644.85 -> So we can select it in JavaScript js dash
41650.07 -> add dash to do dash button.
41655.9 -> Now let's go to our Java
script and scroll down
41661.3 -> above the add to do function,
41665.14 -> we'll get this button into
our Java script using document
41670.42 -> dot query selector
41674.82 -> brackets and then a string dot.
41678.82 -> And the class we want to get js dash
41683.32 -> add dash to do dash button.
41688.66 -> And then after this we'll use dot add
41694.21 -> event listener brackets.
41700.15 -> Inside these brackets
we'll give it the event,
41703.69 -> the string click
41707.71 -> and then a function to run
when this event happens.
41711.88 -> So brackets, arrow and curly brackets.
41717.55 -> And in here we just want to do the
same thing as the on click attribute,
41723.04 -> which is add to do and call
41727.9 -> this function. Let's save.
41731.98 -> And then in the html, let's
remove the on click attribute
41738.82 -> and save and let's try it out.
41743.35 -> So we'll type A to do watch YouTube,
41749.2 -> select a due date and then click add.
41755.17 -> And the add button still works as before,
41758.32 -> but we're just using ad
event listener. Next,
41762.4 -> let's switch all the delete buttons.
41765.67 -> Let's scroll up to where we
create these delete buttons,
41769.9 -> which is here.
41772.24 -> And first we'll add a class
to all the delete buttons.
41776.17 -> So we can select them in JavaScript JS
41780.64 -> dash delete dash to-do dash
41785.68 -> button.
41788.05 -> And now we're going to use document
dot query selector and add an event
41792.82 -> listener to all of these buttons. However,
41796.19 -> there's two problems here.
41798.67 -> First is that at this point in
the code, this is just a string.
41804.1 -> We haven't actually put
this button on the page yet.
41808.45 -> We do that down here.
In this line of code,
41811.96 -> we put the HTML that we
generated onto the page.
41816.76 -> So in order to add an event listener,
41819.55 -> we need to put the H T
M L on the page first.
41823.54 -> So we have to do it after this code.
41827.92 -> So down here we're going
to type document dot
41832.85 -> query selector brackets
41837.8 -> and the string dot,
41840.74 -> and we'll select this class js dash,
41844.76 -> delete dash to do dash button.
41851.09 -> However, there's also
a second problem here,
41854.39 -> which is we're going to
have multiple delete buttons
41859.1 -> and query selector only gives
us the first one. So how do
41864.06 -> we select all the buttons on the
page that match this criteria
41868.82 -> instead of just the first one? To do that,
41872.93 -> the document object has another
method called query selector
41878.96 -> all.
41880.73 -> So query selector all will give
us all the elements on the page
41885.68 -> that have the class js
delete to do button.
41890.39 -> So down here let's console dot log
this result to see what it looks
41895.28 -> like,
41896.63 -> console dot log brackets
41901.76 -> and close bracket and save.
41906.35 -> And then here right click inspect
41912.05 -> and the console and expand this.
41917.33 -> You'll see that document dot
query selector all gives us a list
41922.31 -> of elements. And this list
works just like an array.
41927.98 -> This is index zero or the first button,
41931.73 -> and this is index one,
which is the second button.
41936.5 -> So now let's remove console dot log
41942.41 -> and add event listeners
to all of these buttons.
41947.39 -> To do that we're going to loop
through this list of delete buttons.
41952.16 -> So again, this list works like nra,
41955.7 -> so we can use a for each
method to loop through it.
41960.56 -> So at the end,
41962.51 -> let's type enter and tab and then dot
41967.55 -> for each and brackets
41973.64 -> as usual,
41974.75 -> we'll give for each a function that
we want to run for each of these
41979.58 -> values. So we'll type brackets,
41983.93 -> arrow and curly brackets.
41987.32 -> And now every time we loop through
the list for each will give us
41992.21 -> two parameters. The first
one is a value in the list,
41997.37 -> which is a delete button element.
42000.31 -> So let's name it delete button
42005.32 -> and we'll type comma. And the
second parameter is index.
42010.22 -> So index.
42013.22 -> So now we want to add an event
listener to each delete button.
42018.8 -> So inside here we'll type delete
42023.69 -> button dot,
42026.27 -> add event listener and
42031.07 -> brackets.
42032.93 -> Inside these brackets we'll tell
it what event we want to listen to,
42037.49 -> which is the string click and comma.
42042.98 -> And then a function that we want
to run when this event happens.
42047.87 -> So brackets, arrow and curlier brackets.
42053.9 -> So now when we click a delete button,
42056.9 -> we want to do the same thing as
this on click attribute above.
42062 -> So let's select this code.
Whoa,
42065.57 -> right click copy,
42069.59 -> and then down here,
42072.71 -> right click and paste.
42077.12 -> And now we can remove these characters
because we're not in a string anymore
42083.21 -> and that's all we need
to do. So to summarize,
42087.56 -> we used query selector all to
get a list of all the delete
42092.48 -> buttons on the page and then we
looped through the list using
42097.28 -> for each and for each
delete button we added a
42101.96 -> click event listener and ran the
same code that we did before.
42107.42 -> So now we can scroll up
and remove this on click
42112.19 -> attribute and save.
42117.86 -> Go back to the page,
42119.75 -> close a console and try
out the delete button
42124.88 -> and you can see that it still works.
42127.73 -> So that's how we switch the to-do list
project to use add event listener.
42133.49 -> So now we're finished
improving all of our projects.
42137.93 -> In the rest of this lesson we're going
to learn more features that use functions
42142.69 -> as values.
42144.98 -> So let's close this for
now and we'll go back to
42149.66 -> 12 advanced functions dot html
42155.06 -> and we'll open the tab for this file.
42158.87 -> And let's also comment out
this JavaScript code using
42164.3 -> slash star and star
42168.92 -> slash Let's save.
42172.97 -> And now let's scroll to
the bottom of this code
42177.92 -> And create some new lines.
42182.06 -> So in this lesson we learned
the array method for each,
42186.53 -> which lets us loop through an array.
42189.63 -> Now we're going to learn two more
array methods called filter and
42194.55 -> map. So let's start with filter.
42198.48 -> Let's say we have an array of
numbers and we want to create a
42202.92 -> copy of this array with all
the negative numbers removed.
42208.5 -> So let's go up here and
create an array of the
42213.18 -> number one negative three,
42218.52 -> five and type the method dot filter
42224.91 -> and brackets.
42227.28 -> So filter works the same way as for each.
42231.18 -> We give it a function, so bracket,
42234.9 -> arrow and curly bracket.
42238.02 -> And this function has two parameters,
42241.32 -> the value and the index.
42246.36 -> So filter will take the first value,
42249.09 -> save it in here and run the function.
42252.42 -> Then it will take the second value,
save it in here, run the function,
42257.31 -> and the third value,
42258.81 -> save it and run the function.
Now the only difference is that
42263.64 -> this time this inner
function will return a value.
42268.29 -> So we'll type return and
we're going to return a
42273.12 -> bull like true.
42277.2 -> So now the return value matters.
42280.26 -> So what filter does is
it creates a new array.
42284.58 -> If the inner function returns true,
42287.28 -> it will put this value in the new array.
42290.64 -> If the inner function returns false,
42293.31 -> it will not put this value in
the new array. For example,
42298.65 -> at the front, let's console
dot log the result of this.
42303.6 -> So we'll type console dot log,
42307.95 -> open bracket, and down here,
42311.37 -> close bracket and save.
42315.36 -> So in this example, the inner
function always returns true.
42319.86 -> So all three values will
be in the new array.
42324.36 -> If we change the return
value to false every time
42329.25 -> and save
42331.83 -> all three values will not
be added to the new array.
42336.93 -> So now let's use this to solve
our problem. We want to remove the
42342.15 -> negative numbers from this array.
42344.64 -> So inside this inner function we're
going to return true if the number is
42350.15 -> positive and return false
if the number is negative.
42354.84 -> So we'll check if value is greater than
42359.88 -> or equal to zero.
42363.06 -> Curly brackets will
42366.73 -> true and include it in the new array
42371.17 -> else
42373.42 -> will return false and not include it
42378.28 -> in the new array.
42380.14 -> So let's remove this and save.
42384.97 -> So now only values that are greater
than zero will be in the new
42389.65 -> copy.
42390.94 -> So using this we can sort of
filter out values based on a
42395.77 -> criteria. That's why this
method is called filter.
42400.99 -> Now we can shorten this
logic by using this code
42405.7 -> return value greater than or equal to
42410.65 -> zero.
42412.39 -> So this comparison will return true
if it's greater than or equal to
42416.98 -> zero and it will return false otherwise.
42420.82 -> So this line does the same
thing as this code up here.
42425.83 -> So we can comment this
out with slash star and
42430.66 -> star slash and save.
42435.07 -> And as always we can return
a truthy or falsey value
42439.93 -> instead of just true or false.
42443.65 -> The last array method we're
going to learn is called map.
42448.18 -> So let's create some new
lines and scroll down.
42453.61 -> And let's say we have an array of numbers,
42456.49 -> again like the array
42459.67 -> 1, 1 3,
42463.93 -> and we want to make a copy of this
array with each number doubled.
42470.11 -> So at the end what type dot map
42475.03 -> brackets and map works
just like for each and
42479.62 -> filter between the brackets,
42482.53 -> we'll give it a function bracket,
42485.94 -> arrow and curly brackets.
42489.43 -> And this function will get two parameters.
42493.09 -> The first parameter is
each value in the array,
42498.4 -> and the second parameter
comma is the index.
42504.4 -> So map will take the first value,
42507.13 -> save it in this parameter and run
the function. Take the second value,
42512.2 -> save it in this parameter, run the
function, third value, save it,
42516.73 -> and run the function.
42519.04 -> And inside this function
we're going to return a value.
42525.31 -> So what map does is it
creates a new array and then
42530.29 -> whatever we return will
be added to the new array.
42534.25 -> So if we return 10 and then we console dot
42539.08 -> log this result console,
42542.47 -> dot log and close bracket
42547.22 -> and save,
42549.47 -> it will create an array
where each value becomes 10.
42554.87 -> Now the interesting thing is that
we can actually use the value itself
42560 -> in the return.
42561.62 -> So here if we did value plus 10
42567.32 -> and save,
42569.78 -> it will take each value
in the original array,
42573.41 -> add 10 and put it in the new array.
42578.45 -> So map will transform an
array into another array
42583.19 -> based on the return value.
42585.86 -> So if we want to return an array
where each number is doubled,
42590.45 -> we just have to multiply each value by two
42595.28 -> and save.
And this will give us
42598.67 -> 2, 2 6.
42602.42 -> Next we're going to review some
shortcuts of arrow functions to make this
42607.07 -> code more compact. First,
42610.43 -> let's make a copy of this code,
42612.65 -> right click copy
42617.6 -> and down here, right click and paste.
42624.2 -> So notice in the inner
function we're not using index,
42628.52 -> so let's just remove it for now.
42631.55 -> And now that this arrow
function only has one parameter,
42635.21 -> these round brackets are optional.
42638.21 -> So we can also remove these to make
the code more compact. Compact.
42643.76 -> Another shortcut is if we only
have one line of code in an arrow
42648.35 -> function,
42649.88 -> we can put the code on one line like this.
42655.28 -> And now the curly brackets
and the return are optional.
42659.9 -> So we can actually just
remove all of this code.
42666.77 -> So if we have just an arrow,
42669.17 -> it will automatically return this
result on the right and we don't
42673.94 -> have to type return ourselves.
42677.33 -> So this code does the same
thing as the code above.
42681.89 -> But as you can see,
42683.18 -> these shortcuts make our
code very compact and clean.
42688.25 -> So let's save and this will
give us the same result.
42694.4 -> The last thing we're going to learn in
this lesson is a feature of functions
42698.35 -> called a closure.
42700.76 -> A closure means if a function
has access to a value,
42705.23 -> it will always have access to that value.
42709.31 -> So let's take a look at an example.
42712.31 -> We're going to go back to
the to-do list project.
42715.58 -> So we'll click up here
and then scroll up to 12
42720.65 -> to-do list js
42723.96 -> and close this and then open
the tab for the to-do list,
42728.58 -> which is here.
42730.47 -> And let's scroll down to
the query selector all.
42736.86 -> So we're going to focus on
this inner function here.
42741.3 -> So notice that this function
uses index from above.
42746.58 -> Now the interesting thing about
index is that as soon as this four,
42751.05 -> each ends index gets deleted. For example,
42755.97 -> if we add some new lines
and we try to console
42760.98 -> dot log index and
42765.73 -> save and then go into our project,
42769.98 -> right click Inspect and
42774.54 -> the console,
42777.3 -> it'll tell us that the
index is not defined.
42780.81 -> So as soon as we end the four,
42782.88 -> each loop index doesn't
exist anymore. However,
42788.28 -> if we move this into the inner function,
42792.24 -> so inside here and we console dot
42797.1 -> log, index and save,
42803.55 -> and we click a delete button,
42806.64 -> it will tell us that the index is zero.
42810.72 -> So even though index gets
deleted right away down here,
42815.16 -> if we click one of these buttons later on,
42818.4 -> it still has access to index.
This feature is
42823.11 -> called a closure. If a
function has access to a value,
42828.3 -> it will always have access to that value.
42832.02 -> The value like Index
gets packaged together or
42836.37 -> enclosed with the function.
That's why we call it a closure.
42842.07 -> So even if the value index
gets deleted after the loop,
42846.69 -> we can click the delete button
five seconds later or even five
42851.34 -> minutes later, and this function
will always have access to index.
42857.49 -> So closures are something that naturally
happens as we write JavaScript code,
42862.71 -> and it's nice to know
how this feature works.
42866.22 -> There are some advanced techniques
that we can do with closures,
42869.61 -> but they're not used that often, so I
won't be covering them in this course,
42874.41 -> but maybe in a different video.
42877.2 -> Now let's remove console dot log and save,
42883.56 -> and that's the end of this
lesson. In this lesson,
42886.98 -> we learned that functions
are values. We learned, set,
42891.36 -> timeout and set interval,
42893.52 -> which lets us run a
function in the future.
42897.06 -> We learned an array
method called for each,
42900.49 -> which is a cleaner way of
looping through an array.
42904.39 -> We used for each arrow
functions and add event listener
42909.25 -> to improve our projects. We
learned two more array methods,
42914.35 -> filter and map,
42916.72 -> and we learned a feature of
functions called closures.
42921.64 -> Here are some exercises to help you
practice what we learned in this lesson.
42949.57 -> Here are some projects you can try
on your own to practice combining
42954.1 -> everything we learned in this course.
These projects are open-ended,
42959 -> meaning it's up to you
how they look and work.
42963.07 -> You can find example solutions for
these projects in the video description.
42968.68 -> So that's the end of
part one of this course.
42971.74 -> Great job in making it this
far. In this part of the course,
42975.88 -> we learned all the major features of
JavaScript and now we know everything we
42980.71 -> need to build projects.
42984.25 -> In the second part of this course,
42986.29 -> we're going to focus on building
bigger and more complex projects,
42990.58 -> and we're going to start and
finish the final Amazon project.
42995.05 -> Along the way,
42995.98 -> we're going to learn advanced techniques
like the ones listed here that are
43000.33 -> useful for bigger projects.
Also, from now on,
43005.22 -> I'll be posting one lesson at a
time as soon as I finish them,
43009.69 -> and then combine them
all together at the end.
43012.66 -> If you want to be notified
of future lessons,
43015.3 -> you can click the subscribe
button below the video.
43021.54 -> If you want to learn HTML
and CSS in more detail,
43025.71 -> you can check out my HTML
and CSS full course here.
43030.93 -> If you want to support this channel,
43032.7 -> you can like this video and recommend
this course to anyone you know who is
43037.2 -> interested in learning
JavaScript. Thanks again,
43040.38 -> and I'll see you in the next one.
Source: https://www.youtube.com/watch?v=SBmSRK3feww