Welcome to the complete
JavaScript course. In this course, we're going to learn how to build
complex websites using JavaScript from a beginner to a professional level,
and by the end of this course, we're going to build amazon.com. So this is an interactive
multi-page website we're we can add products to our cart, create an order, and even track our order Along the way, we're also going to build some
smaller projects like a rock paper, scissors game, a to-do
list, and a calculator. Now you don't need any previous coding
or technical experience to follow along. This course will cover everything
that you need to learn JavaScript. We're going to start from the very basics
of JavaScript and we're going to build our way up step by step. We're going to learn the major features
of JavaScript and also how to use JavaScript together with other
technologies like H T M L and C S S. These are the topics we'll
learn in part one of this course. In part two, we'll learn skills that are useful
for bigger and more complex projects, and we're going to start and
finish the final Amazon project. You can find the different lessons of
this course below the video here and here. And after each lesson, I'm going to give you a bunch of
exercises that you can do on your own to practice the skills that
we learned in total. This course will have over 200 exercises. So with that said, let's get started. Before we begin, if something in
this course is not working properly, make sure to check the first comment
below the video for a list of solutions. If you can't find a solution in this
list, you can reply to this comment. I'm going to be doing
this course on Windows, but the steps are the same
if you're using a Mac. We're going to start from the very
basics of JavaScript and build our way up step by step. First of all, what is JavaScript? JavaScript is a technology
that we use to create websites. A website is like
youtube.com or amazon.com. It's how we access YouTube
and Amazon on our computer. If we were using a phone,
we usually use an app, but on our computer we use a website. So there's actually three technologies
that we use to create websites, html, css, and JavaScript. Each of these technologies has a specific
purpose. When creating a website, HTML creates the content of a website. It creates all the buttons,
the text and the images. CSS changes the appearance of the website. By adding css, we can make our website look nice.
And finally, JavaScript makes our website interactive. So if we only have HTML
and CSS and we click one of these buttons, our
website doesn't do anything. But once we add JavaScript, we can make our website do something
when we click a button such as add a product to our
cart or create an order. So this course is focused on JavaScript. If you want to learn HTML
and CSS in more detail, I have a full course just like this
one that you can find in the video description. Let's get
started with JavaScript. The first thing we need to do is to
install a piece of software called a web browser. A web browser lets us view websites
that we create in this course. The most popular web browser for
web development is Google Chrome, so I recommend using that. If
you don't have Google Chrome, you can open the default web browser
on your computer. For Windows, it's Microsoft Edge, and
for Mac, it's Safari. Type in google.com at
the top and press enter. Search for Google Chrome, click the result and follow the
instructions to download and install. Once we've installed
Chrome, we're ready to begin. We're going to start by learning what
exactly is JavaScript and how does it work. The easiest way to understand
JavaScript is we're basically giving instructions to a computer and
then the computer follows our instructions. I find the best way to learn this
is to jump in and give it a try. So first, let's open Google Chrome. Next we're going to click at the top here and type super simple.dev/j-basics and press enter. And now we'll learn how to give our
computer some instructions to follow. To do that, we're going to go
to a blank area of the webpage. We're going to right click, click inspect, and then click the tab. Now, if your console doesn't show
up at the bottom like this, you can click these three
dots here and then select this icon. Okay, so inside the console we can give
some instructions for our computer. Let's learn our first instruction. We're going to type here and
we're going to type, alert, open bracket, single quote, hello, single quote, close
bracket, and semi call it. Make sure to type this out exactly
as I have it here in JavaScript. If you don't type things out
correctly, it won't work. So this is an instruction to
create a pop-up with a text, hello inside to get the computer
to follow our instruction. We can just press enter,
and as you can see, the computer does exactly
what we tell it to do. It creates a pop-up with
a text. Hello inside. Now let's press okay, and let's give another
instruction to the computer. So we're going to type here again
and we're going to type alert again, open bracket, single quote, but this time we're going to type
a different message in the popup, good job and single close bracket and semicolon. So this is an instruction
to create a pop-up again, but this time with a text,
good job inside the pop-up. If we press enter, the computer does exactly what we tell
it to do and it creates a pop-up with a text. Good job inside. And that's basically the
main idea behind JavaScript. We're giving instructions to a computer
and then the computer follows our instructions. So note that we can open and
use this console on any website. We're just using super
simple.dev as an example. Let's press okay and we're
going to learn some terminology. The instructions we give to our computer, these instructions are called code. When we press enter and the
computer follows our instructions. This is called running the code. Now there are many different languages
we can use to write code called programming languages. It's similar to how we have many human
languages that we can use to communicate. Some examples of programming
languages are JavaScript, Python and Java. So here we're writing our code
using the JavaScript programming language. So we call this JavaScript code. Now that we understand
the basic terminology, let's look at some more examples of
what we can do with JavaScript code. Another thing we can do is meth. Let's go back to the
console and type here, and we're going to type two plus two. So this is an instruction or code
that tells a computer to do some math to calculate two plus two.
When we press enter, the computer follows our instruction
or runs this code calculates two plus two and gives us the
result, which is four. Let's do another example. We're going to type 10 minus three and press enter to run this code. Again, the computer does this math calculates
the result and gives us seven. So as you can see, JavaScript can do many different
things like create pop-ups and do math. Let's look at one more example
of what JavaScript can do. We're going to go to the
bottom and type out this code document dot body dot inner capital H T M L equals single quote, hello, single quote and semicolon. Make sure to write this out exactly as
I have it here with the dots and the capital letters, because
JavaScript is case sensitive, let's press enter to run this code. What this code does is that it
removes everything on the page and replaces it with a text.
Hello. In this example, we use JavaScript to modify the webpage. Modifying the webpage is one of the
most important features of JavaScript and we're going to be using this
feature throughout this course, and that's the basics of JavaScript. We're giving instructions to a computer. These instructions are called code, and then the computer
follows our instructions. This is called running the code, and also don't worry about
memorizing all this code. You can find a copy of all the code
that we write in this course in the video description. Now that we understand
the basics of JavaScript, let's learn more about the
JavaScript language itself. If we take a look at this code alert and hello, you might be wondering what the
brackets and the quote mean. All of these characters have a
special meaning in the language. This is something called syntax. Syntax are the rules that we have
to follow when using a programming language like JavaScript.
This is sort of like in English. We also have rules that
we follow called grammar. The difference is that in English, we don't have to follow the
rules of grammar perfectly. People can still understand
us, but in programming, we have to follow the
rules of syntax exactly, otherwise the computer won't
understand our code. For example, if we scroll down and we
type this code, alert, open, hello, close bracket and semicolon, but this time we remove the
first bracket and press enter, it will give us a syntax error. We're not following the rules of syntax, so the computer doesn't
understand this code. Now JavaScript has a lot of syntax
rules and we can't learn them all at once right now. Instead, we're going to learn the syntax rules
one by one as we go through the course. For now, we'll just learn enough syntax to do
the exercises at the end of this lesson, what we need to know is
that if we scroll up, this part of the code tells a
computer to create a pop-up. The text between these quotes
is the text inside the pop-up. If we change this text, we can
change the text inside the pop-up. Same thing for this code down here. If we change the text between the quotes, it will change the text
that appears on the page, and that's all we need to know
about JavaScript syntax. For now, we'll learn exactly what the other
characters like the brackets, quotes and semicolon mean
later on in this course. So in this lesson, we learned that JavaScript is
basically giving instructions to a computer. We wrote our first
few lines of JavaScript code. We learned how to run our code using
the console in our web browser, and we learned about syntax, which are the rules that we had
to follow when writing our code. Here are some exercises you can try on
your own to practice what we learned in this lesson. You can find these solutions to these
exercises in the video description. Now that we understand
the basics of JavaScript, we're going to learn about each feature
of the language. In this lesson, we're going to focus on
numbers and math first. We can close the console for now. So I've actually prepared a project
that we can use for this lesson. To open this project, we're
going to go to our browser, click up here and type super simple.dev/projects/amazon and press enter. So this is actually the final project
we're going to create in this course. This is an e-commerce website
similar to Amazon where we can add products to our cart
and then view our cart by clicking the top right. And on this page we can see
the products in our cart, modify our cart and create and order. For this lesson, we're going
to focus on this right section, which calculates the cost of our cart, including the cost of the products, shipping and taxes. This section is a great way
to learn numbers and math in JavaScript. First, let's open the console again so
we can write JavaScript code. We're going to find a blank area
of the webpage. Write click, click inspect, and then click the console. So we already saw some examples
of math in the previous lesson. For example, we wrote the code two plus two. If we press enter, the computer adds these two
numbers and results in four. We also did 10 minus three. If we press enter, the computer subtracts these
two numbers and gives us seven. In addition to adding and subtracting, we can also multiply
and divide to multiply. We're going to type 10 star three and press enter. So Star is the character
for multiplying to divide. We're going to type 10 forward slash two and press enter. So forward slash is a
character for dividing. Now let's learn the syntax
rules for numbers and math. The syntax for math is pretty
straightforward in JavaScript, we just write it out like normal math. We can also do math with more
than two numbers. For example, we can add two plus two and then plus another two.
If we press enter, the computer will add these three
numbers together and result in six. And finally, JavaScript can handle decimal numbers like 2.2 plus 2.2. If we press enter, it will calculate these
decimal numbers and result in 4.4. Now let's do some practical examples. We're going to calculate the
numbers here in our final project, but first, let's set up our cart. So we have the same products in our cart, so make sure in your
cart you have two socks with free shipping and
you have one basketball with $4 and 99 cents
of shipping and nothing else in your cart. If you need to, you can modify your cart by
clicking update or delete or by going to the homepage by
clicking in the top left and adding any products that you're missing. Once you have the same products
as me in your cart and you have the same numbers on the right, we're ready to begin.
Let's start by calculating this number up here. This is the cost of the products
before shipping and taxes. To calculate this number using JavaScript, we're just going to add
the cost of the products. So in our console we're going
to add the cost of the socks, which is $10 and 90 cents. We have two of them, so we're going to multiply this by two, and then we're going to add
the cost of the basketball. So plus $20 and 95 cents. If we press enter, the computer will do this math
calculation and give us this number, and if we scroll to
the top of our project, you'll see that the number that we
got matches what we have on the page. So that's how we use JavaScript
to calculate this here. Let's do another example. We're going to calculate
this third number, which is the cost of the
products plus shipping. Feel free to pause the video if
you want to try it yourself first. Otherwise we'll do it together.
Let's go back to our console and we're going to add the
cost of the products again, which is $10 and 90 cents times two plus $20 and 95 cents. But this time we're going
to add the cost of shipping, which is $4 and 99 cents. So 4.99 and press enter. The computer will do this
calculation and give us this number which matches what we
see in the final project. Next, we're going to learn a very important
feature of math called the order of operations, adding, subtracting, multiplying and dividing. These are called operations and the
characters in the middle are called operators. Now there's a certain order
that we do these operations. For example, if we go back to our console
and type the calculation one plus one times three and press enter. Notice that it multiplies
one times three first, which equals three and then adds one, which equals four. Notice that it does not
add one plus one first, which equals two and then
two times three equals six. The way math normally works is
that multiply and divide are done first. Add and subtract are done
after this is called the order of operations, and JavaScript follows the same rules.
Multiply and divide are done first, add and subtract are
done after the order of operations is also called
operator precedence in JavaScript. One thing to note is that
multiply and divide have the same priority, so if we have
both in a calculation, it will calculate from left to right, add and subtract also
have the same priority. If we have both in a calculation, it will also calculate from left to right. Another feature of the order of
operations is that we can use brackets to control which part
of the calculation gets done first. For example, let's type out this calculation again, one plus one times three, but this time we're going
to add an open bracket and a closed bracket around one plus one. If we press enter, Now the calculation inside the
brackets will be done first, so it will add one plus one equals two, and then two times three equals six. So when we use brackets, JavaScript will always do the
calculation inside the brackets first and then do the rest of the
calculation brackets have the highest priority in the order of operations. Now let's learn the
syntax rules for brackets. So we just have to have a
matching open bracket and closed bracket. So something like this doesn't
work because we have two open brackets and no closed bracket. We also need to have a complete
calculation in the brackets, so this also doesn't
work because one plus one multiply is not a complete calculation. Now let's do some practical
examples using the order of operations. First, we're going to do some more
setup in the final project, so we're actually going to remove
all the products in our cart, and then once our cart is empty, we'll go to the homepage
by clicking the top left, and this time we're going
to add some new products. So we'll add one basketball and two t-shirts. Now let's go back to our cart
by clicking the top right, We'll scroll down and we're going
to calculate the numbers in this section. Again, let's calculate
this number at the top, which is the cost of the products. We'll go back to our console
And add the cost of the basketball, which is $20 and 95 cents plus the cost of the T-shirts, which is $7 and 99 cents, and we have two of them, so we'll multiply this by two. If we press enter, this will give us the number
that we see in the final project here. Notice that in this calculation
we're taking advantage of the order of operations even though
multiply is written last, we still multiply
these two numbers first. So we calculate the cost of
two t-shirts first and then we add the cost of the
basketball after. Okay, now let's try something
a little more difficult. We're going to learn how to
calculate this 10% tax here. So how do we calculate 10%
of something? Unfortunately, we can't just multiply
by 10% in JavaScript. Instead we have to calculate
the percent manually. So how do we do that? 1% is actually equal to one divided by 100.
That's what percent means. So 10% is equal to 10 divided by 100, which equals 0.1. So to calculate 10% manually, we just multiply this number by 0.1. So we'll type 36.93 multiplied by 10% or 0.1. If we press enter, it will give us a number that is close
to what we have in the final project. It's the same amount of money, but our number is more
accurate than we need. So later in this lesson we'll
learn how to round this number down to exactly what we have
on the webpage. For now, let's do some more practice
with the order of operations. Let's calculate the tax again, except instead of using
the final number, 36.93, let's calculate this number
individually like here. So at the bottom we're going to
add the cost of the basketball 20.95 plus the cost of the T-shirts, 7.99 times two, and then multiply this
by the tax percent times 0.1 and press enter. Unfortunately, this number doesn't match
what we got up here and that's because if we look at this
calculation according to the order of operations, multiply is done first. So it will multiply these three
numbers first and then add 20.95 after. However, this is not what we want. We actually want to
calculate this number first. This is the cost of the products. So how do we get the computer
to calculate this first and then multiply by the tax
percent 0.1. To do this, we can use brackets to control
which part of the calculation gets done first. So let's
create this calculation again, 20.95 plus 7.99 times two. But this time we're going to add
brackets around this part of the calculation to make sure that
this gets calculated first, and then at the end we'll
multiply it by the tax percent, 0.1, and now if we press enter, we will get the same number
that we had before. So that's how we use math and
the order of operations to calculate the numbers in this
section of the final project. So don't worry, you don't have to
be good at math to learn JavaScript. This is just to show you how
math works in JavaScript. In the rest of this lesson, we're going to learn some more
details about numbers and math. The first detail we're going to
learn is a weird behavior of math in JavaScript. First we'll need to learn some
terminology in programming. Whole numbers like two, three, and four are called integers. Decimal numbers like 2.2 and 2.5 are called floating point numbers or floats, and unfortunately, computers have a problem working
with floats. For example, if we go back to our console
and type the calculation 0.1 plus 0.2 and press enter, it will give us this weird
number here that's close to 0.3, but a little bit inaccurate.
So this problem is not specific to JavaScript. Many programming
languages also have this problem. The reason this happens is because
of how computers store numbers, I'll give a simplified explanation. Computers can only store
zeros and ones while humans can count from zero to nine. So there's sort of a mismatch
between our number systems. For integers, this is not a problem. The computer can just use
a bunch of zeros and ones to store it. However, for decimal numbers or floats, sometimes the computer can't
store the number properly. For example, here's how the computer
tries to store 0.2 using only zeros and ones at the
top is what the computer stores at the bottom is what
this is equal to in human numbers, we can see that the computer
gets closer and closer to 0.2 but never actually reaches it. And this is why we get these inaccuracies
when calculating with fill floats because computers can't
store some floats properly. Note that this doesn't happen
with all floats. For example, computers can store 0.25
without any problems, so these inaccuracies only
happen with some floats, but not all of them. However,
when calculating money, we definitely want to
avoid any inaccuracies. So let's learn how to do that. First, we're going to set up our cart again, so make sure in your cart you
have one basketball with free shipping, and this time
you have one t-shirt. So we're going to click update, change this to one and click save. And this t-shirt also has free shipping. Now let's scroll up and we're going to
calculate this number at the top again, which is the cost of the products. Let's go into our console and
we're going to add the cost of the basketball $20 and 95 cents plus the cost of the t-shirt, which is $7 and 99 cents. If we press enter
calculating with these floats causes the inaccuracies that we
saw earlier. So how do we avoid this problem? The best practice when calculating
money is to calculate in cents instead of dollars. So instead of $20 and 95 cents, we're going to calculate 2090 5 cents plus seven 99 cents. Notice we're not using floats anymore, so we avoid the inaccuracies, but now this number is in cents, so we need to convert back
to dollars to do that. We'll surround this calculation
with brackets to make sure we calculate this first, and then at the end we'll divide by 100 to convert back to dollars
because there are 100 cents in each dollar if we press enter and scroll up, that's how we get the exact
number that we see on the page. So remember, in programming calculations with
floats are sometimes inaccurate, and when working with money, the best practice is to do the
calculation in cents and then convert back to dollars at the end. The next detail we're going to
learn is how to round a number in JavaScript. Rounding just means taking a
number and moving it to the nearest integer to round a number.
We can use this code, capital M, math dot round, open bracket, closed bracket, so make sure you use a capital
M because JavaScript is case sensitive. Now between the brackets, we can put a number that
we want to round like 2.2. If we press enter, it will round this number down to two. If we do capital M, math dot round, open
bracket, close bracket, and between the brackets
we put 2.8 and press enter, it will round 2.8 up to three. Now let's do a practical
example with math dot round. We're going to calculate the tax again, but this time we're going to
round the result to exactly this number on the page. So first, let's calculate the tax.
We'll go into our console and add the cost of the products in cents, so 2090 5 cents for the basketball and plus the cost of the t-shirt, which is seven 99 cents. And we'll surround this in brackets
to make sure we calculate this first and then we're going
to multiply this by the tax percent or 0.1. And finally we'll convert
this back to dollars. So let's surround this in
brackets as well to make sure we calculate this first, and at the end we'll divide by 100 to convert back to dollars. So notice here we can have
brackets inside brackets In this situation, JavaScript will calculate the
inner brackets first and then the outer brackets and then
everything else if we press enter, this gives us 2.894, which is close to the number on the page. It's the same amount of money, but our number is more accurate
than we need. So now let's learn how to use math dot
round to round this number to exactly 2.89. First, let's create a copy of this
calculation. So we'll select it, right click copy, and down here, right click and paste. So one thing we might try to
do is to round this entire calculation, however this will round 2.89423 because it rounds to the nearest integer. Instead, what we want to round is this number here. So remember that this number
is the result in cents, which is 289.40 cents. If we round this number, it will round down to 289 cents, which is exactly $2 and 89 cents. So to round this calculation
at the front will type capital M math dot round. So we already have brackets
around this so we don't need extra brackets, so this will round to 289 cents, and finally we'll convert this
back to dollars at the end by dividing by 100.
If we press enter, that's how we round this calculation
to get the exact number on the page. So to summarize, we first calculate the result
in cents and then we round this to the nearest cent, and then at the end we convert
back to dollars. Again, don't worry, you don't have to be
good at math to learn JavaScript. These examples are just for learning. Almost all the math we do in
JavaScript is more simple than this. I'll give you some exercises at the
end of this lesson to help you get more practice. The last thing we're going to learn in
this lesson is how to use Google when you're learning to code. So far I've been giving you
different pieces of code like alert and math dot round.
You might be wondering, where do I find this code? These pieces of code are
features of JavaScript and I find this code by searching
on Google. So we're going to learn how to use Google to learn new
features of JavaScript on our own. Let's go to our browser and
create a new tab at the top and we'll click here and type google.com and press enter and we'll search in Google. So the trick to searching in Google
is to search for what we are trying to do. For example, if we
want to round a number, we would search for JavaScript, how to round a number. If we press enter, sometimes you might get the code
right away in the first result, and sometimes you might have
to go into the other results, define the code that
you need. In my example, I see the code math dot
round in the first result, so I can click into this result, read about what this code does, and also see some examples of
how to use it. One thing to keep in mind is that when
you're searching in Google, you might not understand all the
code that you get in your results. For example, here, there's a lot of
code that we haven't learned yet, and actually that's okay. We just need to look for the pieces
of code that look familiar to us like this part of the code. We can then use this part
of the code in our own code. We don't have to understand every
bit of code that we get from Google, and don't worry as we
move through this course, we will understand more and more of
this code that we get from Google results these days. We also have some artificial
intelligence or AI tools that can help us search for code. I'll provide links to some of these
tools in the video description and that's the end of this
lesson. In this lesson, we learned how to work
with numbers and math. We learned the order of
operations and brackets. We calculated the numbers
in the final Amazon project. We learned that calculations using
floats can be inaccurate and how to avoid this problem when
working with money. We learned how to round numbers
using math dot round and we learned how to search for code on our own. Here's some exercises to help
you practice numbers and math. In the previous lesson, we learned
how to work with numbers and math. In this lesson, we're going to
learn how to work with text, and we're going to create the text
in this section of the final project. First, make sure you have the final project
open and you're on the checkout page. Also, make sure you have the
console open on this page. If not, you can go to a
blank area, right click, click inspect, and then click the console. Now we're going to learn a feature
of JavaScript called strings. A string represents text. Let's go to our console and
create our first string. We're going to type single quote, hello and single quote and press enter. This is a string and it
represents the text. Hello, and we've actually seen this
code before. In the first lesson, the first piece of code
that we learned was alert, open bracket, single quilt, hello, single quilt, closed bracket, and semicolon.
This code creates a popup on the page. If we press enter, it creates a popup. Now, inside these brackets we
actually created a string. This string is the text
that appears in the popup, so as you can see, a
string represents text. Let's press okay, and now let's learn the syntax
rules for strings to create a string, we just write
some text like hello, and then surround this
text with single quotes, one at the beginning and one at the end. We can also add strings
together. For example, let's type the string sum plus the string text and press enter. When we add two strings, it combines the strings
together into a bigger string, and this makes sense. We're adding
two pieces of text together. We can also add more than two
strings at a time. For example, we can type the string sum plus the string more, plus the string text. If we press enter, the computer will combine all
three strings into one big string. By the way, this is called Cate Nation when
we combine strings together. Now in the previous lesson
we learned about numbers. Numbers and strings are two
different types of values. In JavaScript. They
represent different things, and we can actually check what
type of value something is using this code type of, and then space, and then a
value like the number two. If we press enter type
of will tell us that two is a number. If we do type of quote, hello, quote, and press enter, it will tell us that hello is a string. Now what if we added a
string and a number together? For example, let's type the string hello plus the number three and press enter. So when we add a string and a number, JavaScript will automatically
convert this number into a string. So this gets converted into the string, hello plus the string three, and then it combines them together
into the string. Hello, three. This feature is called
type coercion or automatic type conversion. Okay, now that we understand
the basics of strings, let's do some practical examples. We're going to use strings and
numbers to create the text in this section of the project. First, make sure that in your cart you
have one basketball with free shipping and you have one t-shirt also with free shipping and
you have no other products. Let's scroll up and we'll
start by creating this text in the top right. So this
is the cost of the products, but this time we're going to have a
dollar sign. So instead of just a number, this will be text. So one thing we can do to create
this text is just type out the string directly, like quote dollar 28.94 and quote.
However, let's actually calculate this
number using math. Remember, the advantage of JavaScript is
that it's able to do calculations. So instead of typing out 28.94, we're just going to create
the string dollar sign plus, and we're going to calculate
this number using math. So we're going to add the
cost of the basketball, which is $20 and 95 cents, plus the cost of the t-shirt, which is $7 and 99 cents. If we press enter, unfortunately this doesn't look right. Instead of doing math and adding
these two numbers together, it just sort of put the numbers
one after another into the string. So why is this happening?
JavaScript adds from left to right. So the first step is to
add these two values, and as we learned, if we
add a string and a number, JavaScript will automatically
convert this number into a string. So the result of this
calculation will be the string dollar 20.95, and the next step is to add 7.99.
So it will add 7.99, and now we're adding again
a string and a number. So JavaScript will automatically
convert this number into a string and combine them together. That's why it puts 7.99
at the end of this string instead of doing math. So what we actually want to do
here is to add these two numbers first and then combine
the total with the string. So how do we do this? The solution is that strings
also follow the order of operations, just like
numbers. And remember, in the order of operations, we can use brackets to control
which part of a calculation gets done first. So let's type
this calculation out. Again, the string dollar sign plus 20.95 plus 7.99, but this time we're going
to add an open bracket and a closed bracket around this calculation. This tells a computer to
calculate this number first using math and then combine this
result with the string after. If we press enter. Now this is doing math and it
solves our original problem unfortunately. Now we
have another problem. This math is inaccurate. So
remember from the previous lesson, doing calculations with
floats can sometimes cause inaccuracies, and the best practice when calculating
money is always calculate in cents and then convert
back to dollars at the end. So at the bottom here, we're going to add the string dollar plus open bracket, and instead
of $20 and 95 cents, we're going to add 2090 5 cents plus seven 99 cents and close bracket. And then at the end, we're going to convert this
number back to dollars by dividing by 100. If we press enter, this will give us the text that
we see in the final project. Again, strings follow the same order
of operations as numbers. Brackets are always calculated first, multiply and divide are done next, and add and subtract are done after.
So adding this result to the string is the last step. Now let's do a more complicated example. Let's use strings and numbers
to create this entire line of text, not just the dollar
text. To create this, we're going to go from left to right. Let's go back in our console and
we're going to start with the string items, open bracket, and here we could just
type two and close bracket, but let's actually calculate
this number as well using math. So this number is the quantity or
the number of products in our cart. Let's go back to our console. We're going to end the string
here and we're going to add, and we're going to calculate the quantity. So we have one basketball
plus one t-shirt. Again, we run into the
same problem as before. This gets calculated first
and results in a string, and then it will just combine
the one at the end of the string. Instead of doing math. To solve this, we're going to use brackets
again. So around the one plus one, we're going to add open
bracket and close bracket. This tells a computer to add
the numbers first and then combine it with a string. All right, let's keep going from left to right. We're going to add the rest of the string close bracket, and let's just use a space to
represent the space between these two. So we'll type a space dollar sign, and then we're going to calculate
this number again and add it to the string. So we'll end the string and then plus, and we already did this
calculation up here, so we can select this and then right click copy and here, right click and paste and press enter. And that's how we create this first
line of text using strings and numbers. We break up
the string into parts, calculate the numbers, and then
add the parts back together. All right, now let's take these strings that we
created and do something with them. Let's create a popup and
display this first line of text inside the popup. We'll go back to our console and
type the code for creating a popup alert, open bracket, closed bracket, and then inside the popup we're
going to display this string. So let's just make a copy of
this code. We'll select it, right click copy, and between the brackets
right click and paste. If we press enter, the computer displays a popup with
the first line of text of the final project inside. So that's how we use strings to
create the text in the final project. And once we create the strings, we can use them in other JavaScript code. In the rest of this lesson, we're going to learn more details
about strings in JavaScript. There are actually three
ways to create a string. The first way is to use single
quotes, which we already learned. For example, we can type single quote, hello and single quote and press enter. The second way to create a
string is to use double quotes. For example, double hello and double and press enter. This creates the exact same
string as single quotes. So which one should we
use to create a string, single quotes or double
quotes? In JavaScript, I recommend using single
quotes by default, they're a little easier to read and type.
There is one situation where double quotes might be useful, and that is if we have a
single quote inside the string. For example, if we type the string, I'm learning Java script and single and press enter. This doesn't work because there's
a single quote inside the string, and this single quote
will end the string early. To solve this, we can create
the string using double quotes. For example, double I'm learning Java script and double and press enter. So now this works because we
created the string using double quotes. The single quote no
longer has a special meaning, and it will no longer
end the string early. So this is a situation where double
quotes might be useful. Otherwise, we use single quotes by default. Now, there's actually another solution to
this problem other than using double quotes, and that's by
using an escape character. So a character is one letter number or symbol in a piece of text. For example, the text Hello has five characters. A character can be a letter, a number, or also a symbol. These are
all considered characters. Now, in addition to these characters, we have a special set of characters
we can also use in a string called escape Characters. An escape character looks
like this, a backslash, and then another character
like single quilt. This combination actually counts
as one character in a string. This character creates a
single quilt that is just text. It doesn't have a special meaning, and it doesn't start or
end strings. For example, we can create this string with
single quotes again, so single and this time we'll use the
escape character slash single and then M learning Java script and single and press enter. And now this works because
the escape character slash single creates a single
quote that is just text. It doesn't start or end the string. Another escape character that's
useful to know is back slash double. This creates a double that is just text. It doesn't start or end a string. The last escape character will
learn in this lesson is back slash This is called the New Line character. This escape character
doesn't create the letter anymore, it creates a new line of text. For example, let's create a popup using alert and and then inside the brackets
we're going to create a string sum and then back slash n text and single quilt. If we press enter, you'll notice that this escapee
character created a new line of text in the pop-up, and that's why we call this
the new line character. So that's how escape characters work. They're a set of special characters
that start with backslash, and we use them in a string.
Now let's press okay, and we're going to learn the third way
of creating a string in JavaScript, which is using back ticks.
For example, let's type in our console
and we'll type back, tick hello and back tick and press enter. This creates the same string
as single quotes and double quotes. Strings created with
back ticks actually have a name. We call these template strings and
they have a name because they have some special features. The first special feature of template
strings is called interpolation. Interpolation lets us insert
a value directly into a string. For example, let's say we want to create the
first line of text in our project. Earlier in this lesson, we created
this text with concatenation, which means we broke it up into
parts and added them back together. Interpolation gives us a
much easier way to do this. We'll go to our console and we'll
create this text using a template string because interpolation is only
a feature of template strings, so we'll type back tick items, open bracket, closed bracket, and back tick.
And now between these brackets, we want to insert the quantity or
the number of products in our cart. To insert this with interpolation, we're going to type dollar
open, curly bracket, close curly bracket. So this combination of characters
allows us to insert values directly into the string.
Between these curly brackets, we can calculate the quantity, which is one basketball plus one t-shirt. This will add one plus
one, which equals two, and then insert it
directly into the string. Let's keep going and create
the rest of this line. So we're going to type at the end a colon space and dollar, and now we're going to insert
another value into the string, which is the cost of the
products. To insert another value, we're going to type dollar open,
curly bracket, close curly bracket. Again, in between the curly brackets, we're going to calculate
the cost of the products, which is 2090 5 cents plus seven 99 cents.
And we'll surround this in brackets to make sure we calculate
this first, and at the end, we're going to convert back
to dollars by dividing by 100. If we press enter, this creates the first line
of text again in our final project. If we compare this code, which uses interpolation
to our previous code, which uses concatenation, you can see that interpolation is
a much cleaner way of inserting values into a string. So interpolation is a
recommended solution. Next, template strings have another special
feature called multi-line strings. Let's go to our console and
we're going to type a back tick, sum, and then press enter and text and back. Tick. Notice that this string
is on multiple lines, so we call this a multi-line string, and this feature is only
available for template strings. If we press enter, you can see that the new line in
the string just creates the new line escape character that we learned earlier.
So that's the multi-line string feature
of template strings. We're going to use multi-line
strings a lot later in this course, but for now, I just wanted to
introduce you to this feature. Now, you might be wondering again,
what should we use to create a string, single quilts or template strings? Even though template
strings have more features, I find that most JavaScript code
still uses single quilts by default. So my personal recommendation is
to use single quotes by default. And if we need to insert a value
into the string or type the string on multiple lines,
then use template strings. And that's the end of this
lesson. In this lesson, we learned about strength.
A string represents text. We learned how to use strings
and numbers to create the text. In our final project, we learned three different ways of
creating a string, single quotes, double quotes, and back
ticks or template strings. We learned about escape characters, and we learned two useful
features of template strings, interpolation, and multi-line strings. Here's some exercises to help you
practice working with strings. So far in this course, we've learned some basic features
of JavaScript like numbers and strings. In this lesson, we're going to learn how
to use H T M L CSS and JavaScript together because as I
mentioned at the beginning of this course, we use all three technologies
to build a full website. HTML creates the content of a website, like the buttons and the text. CSS changes the appearance of the website, and JavaScript makes
the website interactive. The first thing we're going to do is
review the basics of H T M L and C s s that we will need for
the rest of this course. Now, in order to write H T M L and c s s code, we'll need to install another piece
of software called a code editor. A code editor helps us
write and organize our code. The most popular code editor for
web development is called VS. Code or Visual Studio Code to install VS code. You can go to
google.com in your browser search for VS code, click the result and follow the
instructions to download and install. Once we've installed VS code, we're ready to review the
basics of H T M L and c s s. We'll start with H T M tml. HTML stands for hyper
text markup language, and just like JavaScript, HTML is also giving
instructions to a computer. Now, unlike JavaScript, we can't use the console
to write and run HTML code. Instead, we write HTML code inside
a file using our code editor. Let's do that right now. We'll start by going to our desktop. So I'm going to close my
browser to go to my desktop, and then we're going
to create a new folder. So we can write click new folder. This folder is going to contain all
the code that we write in this course. Let's name this folder,
JavaScript dash course. Next, we're going to open this
folder in our code editor. So let's open vs code, and then we'll click file open folder and find the folder that
we just created. For me, it's on the desktop
And it's this folder right here. So we're going to select the folder
and then click select folder. Now we can close this startup
message and we're going to create an HTML file. We're going to click this
icon to create a new file, and we're going to name
this file website dot html and press enter. Ending the file name with dot html
tells a computer that this file contains HTML code rather than just text. Now, let's review some basic HTML code. We're going to type the
code less than button greater than, and we also need to type less
than slash button greater than, but our code editor might
auto complete this for us. So this code tells a computer
to create a button and inside the button we're going
to have the text. Hello. Now let's save this file by clicking file save or by typing control S on Windows or command S on Mac. Now to run this HTML code, we're going to open this
file in our browser. Let's go back to our desktop. We're going to open the
folder that we created, find the HTML file, select it, and then right click
open with Google Chrome. As you can see, we have a website and we created
a button with a text Hello inside. And if we look back at our code, that's exactly what we told the
computer to do. So just like JavaScript, HTML is also giving
instructions to a computer. Let's review some more HTML code first. I'm just going to rearrange my windows
here so that it's easy to see the website side by side. Next, we're going to click the end of the
first line and press enter to create a new line. And we're going to type the
code less than P, greater than, and we also need to type less
than slash p greater than. So this code creates a paragraph, and inside the paragraph we're
going to put some text, for example, paragraph of text. Now let's save our file by typing
CTRL S on windows or command S on Mac, and to update our
website to the new code, we're going to go to our website
and click refresh or type CTRL R on windows or command R on Mac. And now you can see that the computer
created a paragraph of text just like we told it to do, and
that's the basics of html. The computer reads our code and then
follows our instructions one by one. First it creates a button, and then it creates a
paragraph of text. Now, let's review the syntax rules for html. Each of these things that
we're displaying on a webpage, these are called HTML elements. So a button is a type of HTML element, and a paragraph is another
type of H T M L element. To create an element, we
start with a less than symbol, and then the element name like a button, and then the greater than symbol. So this whole thing is
called an H T M L tag. This tells a computer to
create a button element. Every HTML tag needs a matching tag. The matching tag follows the same syntax, except it has a slash in
front of the element name. So this is called the opening tag,
and this is called the closing tag. You can think of the opening tag as the
start of the button and the closing tag as the end of the button. And in between we have the
contents inside the button. In this case, it's the text.
Hello. In addition to text, we can also have elements
inside an element. For example, we can go to our paragraph
element and we can add a button inside, so less than button, greater than, and we also need less
than slash button greater than. And then inside the button,
we'll also have the text, hello if we save this file and refresh the page. Now our paragraph element
has a button element inside. By the way, this is called nesting. When we have an element
inside, another element, the last syntax rule we have
to review is that in html, if we have multiple spaces, for example, if we go here and type multiple spaces, multiple spaces are combined
into one space on the webpage. So if we save this code and refresh, you'll notice that all of the spaces
that we added only show up as one space on the webpage. In addition, in H T M L, new lines also count as spaces.
So if we go back to our code and we type here and press
enter to create a new line and then save and refresh, notice that the new line
doesn't appear on the webpage. And that's because this new
line here is the same as spaces in html. So all of these get combined
into one space on the webpage. At first, this might seem a little weird, but this feature gives us a lot of
flexibility When organizing our HTML code, for example, we can go into our code
and add a new line here to separate these two elements and
make our code easier to read. Another thing we usually do to make
our code easier to read is to put the contents of an element on its own line.
For example, we're going to type here
and press enter and here and press enter again to put the contents of the
button on its own line. Now, it's a lot easier to see where this
button starts and where it ends. We can do the same thing
with the paragraph. We can type here and press
enter and type here as well, and press enter, and then remove some of the
extra spaces to put the content of the paragraph on its own line. And now, if we save our file and refresh, you notice that none of the new lines
that we added appear on the webpage. By the way, a webpage is a single page like
the homepage or the cart page together. We call this a website. So that's the basics of
HTML and HTML syntax. Now let's review css. CSS stands for cascading
style sheets and CSS changes the appearance of our website.
Let's review some CSS code. We're going to write our CSS
code inside our HTML file. First, let's type here and
create some new lines at the top. And then at the top we're
going to create a special HTML element called the style element. So let's type less than,
style, greater than, and we also need the closing tag,
less than slash style greater than. So the style element is unique because
it doesn't appear visibly on the page. Instead, the purpose of the style element
is that it lets us write CSS code inside. So inside here, let's press enter to create a new line, and we're going to type
button open curly bracket, close curly bracket. And then
inside the curly brackets, we're also going to press
enter to create a new line. So this is CSS code. And this code tells a computer to
change the appearance of all buttons on the page.
And then inside these curly brackets, we can tell the computer how to
change the appearance. For example, we can type background, dash color, colon, red, and semicolon. If we save and refresh, you can see that this CSS code changes
the appearance of all buttons on the page and changes their
background color to red. Let's do another example. We're
going to go back to our CSS code. We're going to type here and press enter
to create a new line and we're going to add color, colon, white and semicolon. Let's save and refresh, and this CSS code changes the
text color of all buttons on the page to white. Let's do one more example. We're going to type the code, order none and semicolon. Let's save this and refresh. And this CSS code removes the
border for all buttons on the page and that's how CSS works. We tell the
computer which elements we want to change and then how to change
the appearance of these elements. Now let's review these
syntax rules for css. This part of the CSS code
is called the CSS selector. It tells a computer which elements
we want to change. In other words, it selects which elements to change. Inside the curly brackets
we have some CSS styles. This tells a computer how to
change the appearance for each style. The left side is
called the CSS property. This tells a computer what we're changing. The right side is called the CSS value. This tells a computer what
we're changing the property to. For example, this style changes
the background color to red. We use a colon to separate the
property and the value and a semicolon at the end to tell the
computer that this is the end of a style.
So that's the basic syntax of css. We tell the computer which elements we
want to change and then how to change the appearance of these elements. The next thing we're going
to review is HTML attributes. Right now this CSS selector
changes the appearance of all buttons on the page. However, what if we only want to
change the appearance of this
one button and we want to style the other button
differently? How do we do that? We're going to review a feature
of HTML called attributes. Attributes change the behavior
of an element. For example, we're going to go to the opening
tag of the first button and then here we're going to add an
HTML attribute by typing space. Title equals double quotes. And then in between the double quotes, we're going to type tool tip. So this is an HTML attribute
and this attribute adds a tool tip to this button.
If you're wondering what a tool tip is, if we hover over some
code in our code editor, it'll show us this sort of
popup with more information. This is called a tool tip. When we
hover over something and this shows up, so if we save our file
and refresh the webpage and now we hover over our button, we can see that the HTML attribute
added a tool tip to our button and then inside the double quotes
is the text inside the tool tip. For example, we can actually change this to good job and if we save and refresh and hover over our button, the text between the double quotes
is what shows up in our tooltip. So that's an example of an HTML attribute. Now let's review the syntax
rules. For attributes, we always put attributes on
the opening tag and we add a space between the element name and
the attribute to separate them. On the left side is the attribute name. This tells the computer What we're
changing about this element on the right side is the attribute value. This tells a computer what we're
changing this attribute to. For example, here we're changing the tool
tip of this element to good job. We separate the name and value with
an EcoSign and make sure there are no spaces around the EcoSign and
we surround the value with double quotes. Now let's go back
to the original problem. How do we style these buttons differently? We can do this using a very important
attribute called the class attribute. Let's review that right now. We're going to go back to our button
and then here we're going to type space class equals double quotes, and then inside the double quotes
we're going to type red dash button. So the class attribute sort
of adds a label to an element. So here we labeled this
button as a red button and now that we label this
element, we can select it in css. To do that, we're going
to go to our CSS code. We're going to remove the
button selector and replace it with.red dash button. When we start the selector with a dot, this means that now we're
looking for a class. So here we're going to look for all
elements with the class red dash button, which is only
this element if we save and refresh. Now only the elements with the
class red button gets these styles. We can also add the same class to
multiple elements. For example, we can go to our other button and add the class equals red dash button if we save and refresh. Now these styles get applied to both
buttons again because they both have the class red dash button. If we want to style this
button differently, we just
give it a different class. For example, we can change this to yellow dash button and then in our CSS we
can add another selector, so we can type dot. This means we're going to select a
class and we're going to select the yellow dash button class, open curly bracket, close curly bracket. And then inside here we can add
some styles for the yellow button. For example, background, dash color, colon, yellow, and semicolon. Now let's save and refresh, and that's how we use the class
attribute in HTML to modify specific elements. The final thing we need to review is
something called the HTML structure. Let's go back to our website. We're going to find a blank area
and then right click and then click inspect. So we already learned
about the console tab here. We can write and
run JavaScript code. Now we're going to go to the elements tab, which is for HTML and css. So in the elements tab we can
see all the HTML on the page as well as all the CSS on the page, and we can play around
with the CSS if we want. Now if we go back to the html, you'll notice that our webpage has some
elements that we didn't add before, the HTML element, the head
element and the body element. So this is the structure that we're
supposed to follow when writing HTML in our code, we didn't
follow the structure, so the browser actually adds it
for us automatically. However, it's still best practice to follow the
structure in our code because it gives us access to some more features of html. Let's review the HTML structure
and add it to our code. We're going to type up here and
we're going to create some new lines. And now every HTML file is
going to start with less than exclamation doc type in capitals and then space HTML and greater than. This is not an HTML element, it's a special line of code that tells
a browser to use a modern version of html. If we don't have this, the browser might fall back to an older
version of HTML that has less features. Next, we're going to
create an H T M L element, so less than H T M L and greater than the H T M L element
represents the entire webpage. So everything on the webpage
should go inside this element and then inside the HTML element, we're also going to split
it up into two sections, the head element and the body element. So the body element is supposed to
contain everything that is visible on the page. In our example that would be
the buttons and the paragraph. So let's actually select this code and we're going to right click and cut. And then inside the body we're going to right click and paste. The head element contains
information about the page. In general, everything that is not visible
on the page goes inside the head. In our example, that would
be the style element. So let's select this as well. We're going to right click and cut, and then inside the head we're going to right click and paste. And at the bottom let's just clean up
by removing all of the extra new lines. So this is a structure that we're
supposed to follow in all of our HTML files. As you can see, this structure uses a lot of
nesting or elements inside elements to organize our code. Okay, so what are the benefits of
following this structure? One benefit is that there are other
elements that we can use inside the head. For example, let's type here, press enter, and we're going to add the title element. So the title element
sets the text in the tabs inside we can type html CSS review. If we save and refresh, the title will show up in the tap. So this is an example of an element
that we can now add in the head. Another benefit that we get from
this structure is the ability to automatically refresh our
webpage when we change our code so far, every time we change our code, we have to save and then
manually refresh the webpage. We can actually automate this by
following the structure and then installing a VS code extension. So let's click the extension area
and we're going to search for the extension live server and click install. Once
we have that installed, we're going to change a setting. Let's open the settings by clicking
this icon in the bottom left and then click settings At the top we're going to search for live server and we're going to look for a setting
called live server custom browser, And we're going to change this to Chrome. Now if Google Chrome is already
your default web browser, you don't need to do this
step, but it's nice to know. Now let's close the settings
and go back to our code next. Instead of opening this
file directly in the browser, like before, we're going to use
live server to open this file. To do that, we're going to right click this file
in our code editor and then click open with live server. If we open a file with Live server, this webpage will automatically
refresh when we change our code. For example, we can go here and change the
background color to green. If we save live server will
automatically refresh the webpage, so we don't have to
do that back and forth anymore. Let's just change it back to red so
that the class name makes sense and save. And we can also
close the previous tab. So this is the H T M L structure. It gives us access to
more features of html, and this is all we need to review
about h, html and css. For now, if you want to learn more, you can check out my HTML and CSS
full course in the video description. Before we add a JavaScript to our website, we're going to review some VS code setup.
So you'll notice that many of these lines have
spaces at the front. These spaces are called
indents, an indent maker code, easier to read. For example, we can easily tell that this
code is inside the brackets because it has an extra
indent in the front. If we didn't have indents, here's
what the code would look like. It's a lot harder to
read. To add an indent, we can type at the beginning
of the line and press tap. To remove an indent, we can press shift tab
or just use backspace. Now by default vs. Code
uses four spaces per indent. However, in html, CSS and JavaScript, we usually use two spaces per indent.
So we're going to update this setting. Let's go to our settings by clicking
this icon in the bottom left and then click settings. And at the top we're
going to search four tab and we're going to change
the tab size from four to two. Now let's close the settings and we're
also going to change the indents for this file. We're going to go down here
and click select indent, and we're going to choose
indent using spaces, and then click two. And now if we type at the
start of a line and press tab, it will only add two spaces per indent. So let's reformat our code to use two
spaces per indent instead of four. First we're going to remove
all the indents in our code. A shortcut for this is to
select all of these lines and press shift tab to remove
one indent for each line. So we're going to keep pressing
shift tab until we remove all the indents. Next we're going to add the indents
back using a similar shortcut. We're going to select the
head element and press tab to add one indent for each line and
then select everything inside the head and press tab
to add another indent and then select everything
inside style and press tab. And then inside each of these brackets, we're going to select the lines press tab, and then here press tab. We'll do the same thing
for the body element. We'll select all these
lines and press tab. We'll select everything
inside the body press tab, and then inside each of these
elements we're going to press tab and press tab. Now if we save, our website will look the same
because all we did was adjust the indents. So there's one other setting in VS
code that we're going to set up, which is line wrapping. If
you look at this line of code, you can see that it's really long and
we need to scroll horizontally to see the rest of the line. Instead, we're going to make this line
wrap around if it gets too long. Let's go back into our settings by
clicking here and then click the settings and then up here we're
going to search for wrap and we're going to look for editor
word wrap and we're going to turn this on. Now if we close our settings
and go back to our code, this line, which is really long will wrap
around to the next line instead of us having to horizontally scroll.
So that's the VS code set up that we need two
spaces per indent and line wrapping. Finally, we're going to add
JavaScript to this website. So we learned that we can use the
console to write and run JavaScript. Well, there's actually another way
to run JavaScript which is inside an HTML file. Let's learn how to do that. So we learned that HTML has a
special element that runs CSS code called the style element, while HTML has another special
element that runs JavaScript code. And this element is
called the script element. So inside our body at
the bottom of the body, we're going to add less
than script, greater than, and the closing tag less than
slash script greater than. And inside the script element
we can put some JavaScript code, we're going to add the code alert, hello and semicolon if we save live server will refresh the page. And now you notice
that the computer now runs our JavaScript code just like
it did in the console. It creates a popup with
a text Hello inside, and we usually put the script element at
the bottom of the body because we want the webpage to be created first and
then we use JavaScript to make it interactive. For the rest of this course, we're going to run our JavaScript
code using an H T M L file. The console that we used in the
previous lessons is more of a way to try out JavaScript code. We wouldn't
use the console for a real website. In addition to the script element, we have another way to run
JavaScript code inside html, and that's by using an attribute. Let's go back to our first button
and here we're going to add another attribute. So let's type space and this
time we're going to add the on click attribute equals double quotes. So this attribute will run
JavaScript code whenever we click this button, that's
what on click means. Between the double quotes,
we can write some JavaScript. For example, let's press enter enter, and then here we're going to type alert. Now if we save live server will refresh the page
and run this line of JavaScript code. Let's press okay and now
if we click this button, it will run this line of JavaScript
code and create a popup with a text. Good job inside. So those are two places where
we can run JavaScript code, the script element and
the on click attribute. The code in the script element
runs first when the page is loaded, the code in the on click attribute
runs after when we click the button on the page, and that's how we use H
T M L CSS and JavaScript together on a website. Notice
that everything starts from h l first creates the website, and then inside the H T M L, we can run CSS code to change
the appearance and we can run JavaScript code to make
the website interactive. Now let's learn some new
features of JavaScript that
we haven't seen yet in this course. The next feature we're
going to learn is called comments, comments or pieces of code
that the computer ignores. So let's create our first comment. We're going to go down to
the script element here and type forward slash forward slash. So this is a comment, anything after the double slash
will be ignored by the computer. So we can type anything we want, like this is a comment if we save it, ignores this line and creates
the popup in the next line. Now let's close this popup
and learn why we use comments. Comments are useful for providing more
information for people reading our code. For example, we can create a comment
above this code like this code creates a pop-up. This comment helps others and
ourselves understand what this code does. So that's one way we use comments. Another way we use comments is if we
don't want to run some code anymore, but we also don't want to
delete it. For example, this code creates a popup
every time we refresh the page and this can be annoying, so I
want to stop running this code, but I also don't want to delete it
because you might want to review this code later. So what we can do here is to add
a double slash in front of this line to turn this code into a comment. Now if we save, the computer will ignore this line
of code and not create the popup. This is called commenting out the code. It's useful if we don't want
to run some code anymore, but we also don't want to delete
it for informational purposes. So JavaScript has another syntax
for writing comments and that syntax is slash star and star slash here. Anything between the stars is a comment. This is called a multi-line
comment because between the stars we can write a comment on
multiple lines. For example, we can type multier line, enter comment on the other hand double slash is
known as a single line comment. Now just like JavaScript, HTML and CSS also have comments, but they use a different syntax. If we scroll up to our HTML here, we can type less than
exclamation dash dash and we also need dash greater than. So anything between these
double dashes is a comment. For example, this is a comment in css to create a comment we can type slash star star slash, so it's the same multi-line
comment as JavaScript between the stars. We can add a comment, so this is a comment if we save our file, nothing changes on our webpage because
comments are ignored by the computer. The last feature of JavaScript we're
going to learn is called console dot log. Let's go back to our code and
at the bottom in the script element, we're going to type the code two plus two. So we learned that this code in
JavaScript does some math. However, if we save this file, where is the result of this math? So we might think that the result
will show up in the console, but if we right click, click inspect and then click the console. You'll notice that the result
doesn't show up here either, and that's because before
we were running two plus two inside the console, so the
result shows up in the console, but now we're not running this
code in the console anymore, we're running this code on the
webpage. So how do we see this result? The solution is we're going to redirect
this result back to the console. To do that, we're going
to use this piece of code console dot log, open bracket, close bracket, and semicolon console dot log will display
whatever's between the brackets back in the console. So if we move
this code between the brackets, so we select this and then right click cut and then between the brackets right click, paste and save. The result of this code is
displayed back in the console and console dot log works for
any code that we learned so far. For example, we can use strings, so let's create a new
line and type console dot log, open bracket close, and then between the brackets,
let's type some strings, some quote plus text quote and save this file. Again, it will display the result of whatever's
between the brackets back in the console. So that's how we see the result of
JavaScript code that is running in a file. We used console dot log
and that's the end of this lesson. In this lesson, we reviewed the basics of HTML and css. We set up our code editor vs code. We learned how to load
JavaScript inside an HTML file using the script element
and the on click attribute, we learned how to create comments
and we learned how to use console dot log. Thanks for watching this course so
far. If you find this content valuable, you can support this
channel by liking the video, clicking subscribe below the video
and recommending this course to your friends. Thanks again and
let's continue with the course. In this lesson we're going to learn
the next feature of JavaScript called variables, and we're going to use variables to build
a simple version of the cart quantity feature of the final project. First, let's create a new HTML
file just for learning variables. We're going to go to our code editor
and click this icon to show our files and then click
this icon to create a new file. And we're going to name this file, zero five dash variables dot html and press enter. So the zero five just means that
this file is for lesson five. Let's also add the lesson
number to website dot html. We'll select this file
and then right click rename and then add the front. We'll add zero four dash and press enter. Next, we're going to copy all the
code in website dot html to variables dot html. So let's click in this file and we're
going to select all of this code by typing control A on
Windows or command A on Mac. And then we're going to right click copy and then inside variables dot html, right click and paste. Let's click this icon to hide
our files for now and we'll prepare this file for this lesson.
So let's scroll up to the top. And first we're going
to change the title to variables. Next we're going to all the CSS
because we're going to start over and we're going to delete all
the HTML except for the script element and let's delete all the JavaScript
from the previous lesson. And finally, let's save and we'll open this file in our
browser by right clicking and then open with live server. And now we can close the previous
tab and the previous code for now. Now we're ready to learn
variables. First of all, what is a variable? A
variable is like a container. We can save a value like a
number or a string inside a variable and then use it later. Let's do an example and
create our first variable inside the script element.
We're going to type the code, let and space the word let creates a new variable, and now we're going to choose
a name for our new variable. Let's name this variable one. So this creates a variable
or a container named variable one, and now we can save a
value inside this variable. To do that, we're going to type space equals space, and then a value, like
a number or a string. So let's save the number
three inside and we'll type a semicolon at the end. So here we used a let to
create a new variable. We named this variable, variable one and we saved
the value three inside this variable. Now that we saved
this value, we can use it later. For example, let's type a new line
and type the code console dot log, open bracket, close bracket and semicolon. Remember from the previous lesson that
this code displays whatever's inside the brackets in the console
so far we put a value inside like the number two if we save and then go to our website
and open the console. So right click inspect
And then click the console. We can see that the number two
was displayed in the console. So now let's try replacing this value
with the variable that we created. So instead of two, we're going to console
dot log variable one. If we save notice that
it now displays three, so it's displaying whatever value
is saved inside the variable. As you can see, we can save a value inside
a variable and then use that variable later on. Let's
do another example. We're going to create another variable. So we're going to create some
new lines and we'll type let, and this time let's name
this variable calculation and we're going to type
space equals space to save a value inside this new variable. And this time instead of just a number, we're going to save a calculation two plus two and semicolon. So this will calculate two plus two
and then save the result which is four into the variable. If we console dot log, open bracket calculation and semicolon and save, it will show us that the value
four is saved inside calculation. Now let's try this code. We're going to type a
new line and then console dot log, open bracket
and calculation again And plus two and semicolon. So here we're using a
variable inside a calculation. What this does is that it takes whatever
value is saved inside the variable right now it is four and then
substitutes that value into the calculation. So this
will be four plus two, which equals six. If we save, we can see that in the
console it displayed six. So we can use a variable
wherever we use a value and JavaScript will substitute whatever
is inside the variable into the code. Let's do another example. We're going to types some new lines
and create a new variable again using let and we're going
to name this variable result and we're going to make
it equal to calculation plus two and semicolon. So this does the same thing
as a code before it will take whatever value is inside
calculation, which is four, and substitute it into this code. So we get four plus two equals six, but this time we have an extra step.
We're going to save this result, which is six into another variable. So if we console dot log, result and save, we can see that six was
saved into the result variable. Again, we can use a variable
wherever we use a value. Now in addition to numbers, we can save any type of value
in a variable including strings. For example, let's create a new variable using let and let's name this message and we're going to save inside
this variable a string this time. So hello and semicolon again. We're going to console
dot log this variable, so console dot log and message and a semicolon at the end. If we save, it will show us that the string
hello is saved inside this variable. Okay, now that we learned how variables work, let's learn the syntax
rules for variables. The word let creates a new
variable and then we give the variable a name. So we can name variables almost
anything we want except for a few restrictions. Number one, we can't use special words
like let as a variable name. That's because let already has
a special meaning in JavaScript, it creates a variable. So let
is a reserved word. However, we can use Let one or let two
as a variable names we just can't use let. Number two, we can't start a variable
name with a number. If we start with a number, JavaScript will think this is a
number instead of a variable name. However, we can use numbers
in the middle or the end. Lastly, we can't use most special
characters like these or a space in a variable name. However, there are two special
characters we can use dollar and underscore. So those are the
rules for naming variables. And then to save something
inside a variable, we just use the equal sign and
then the value we want to save, and that's it. After we create a variable, we can start using it
in the rest of our coat. Now there's one last part of the
syntax that we haven't learned, which is the semicolon. We've seen semicolons in many
places already in JavaScript. A semicolon means this is
the end of an instruction. It's similar to a period in English. In English A period means
this is the end of a sentence. So here this semicolon tells
JavaScript that this is the end of an instruction, and now after this we can
add another instruction like console dot log log, open bracket, and then the string semicolon
and a semicolon at the end. If we save, it will run these two instructions one
after another without any problems. So if we didn't have the
semicolon here and we save, it wouldn't work because JavaScript
thinks that this entire line is one instruction. So we need semicolons to separate
different instructions in JavaScript. If we save, everything goes back to normal. So JavaScript is a little special
because it has a feature called semicolon insertion. That means it will try to insert
the last semicolon in a line of code automatically. For example, if we removed the last semicolon and save, this code will work
without that semicolon, and that's because JavaScript inserts
the last semicolon automatically. However, a lot of companies still prefer to use
semicolons in their JavaScript code because semicolon insertion can sometimes
put the semicolon in the wrong place. For this reason, we're also going to use semicolons in
this course to help you get used to JavaScript code with semicolons. Next, we're going to learn how to change the
value that is saved inside a variable. For example, here we save the number
three inside variable one. Now we're going to change the
value saved inside variable one. To do that, we're going to go to
the bottom and create some new lines and we're type the variable name again, so variable one. And now to change the value saved inside, we're just going to type the
EcoSign and then a different value alike, five and semicolon. And now if we console
dot log this variable console dot log variable one and semicolon and save, it will show us that five is
now saved inside variable One. Notice also that if we
scroll up to the top, the first console dot log
still displays a value three. And that's because at this point in
the code variable one still contained three, we didn't update the variable yet.
So when we first saved a value inside this variable, this is called assigning
a value to a variable. Then when we change the
value inside this variable, this is called reassigning
a value to a variable. Now let's learn the syntax
rules for reassigning a value. Notice that we don't use the
word let when reassigning. That's because let creates a new variable. So if we try to use Let again, it would try to create a new
variable named Variable one. However variable one already
exists and we can't create two variables with the same name.
So this would cause an error. Instead to reassign a variable, we just type out the variable
name and make it equal to something else. So that's the syntax for
reassigning a variable. Now we're going to do one last
example before working on the project, let's go to the end of our code.
We're going to type some new lines, and this time we're going to
reassign variable one again, so we can reassign a variable
as many times as we want. So let's type variable one and then equals, and we're going to type variable one plus one and semicolon. So we learned earlier that we can
use a variable inside a calculation and it will substitute whatever
value is inside the variable. Here we're also using a
variable inside the calculation, but we're using this variable itself. So it's essentially taking this, increasing it by one
and then saving it back. If we console dot log, this variable, variable one and save variable one now contains six. So it took the previous
value in variable one, which was five added one,
and then saved it back. So this is how we increase the value
of a variable by a certain number. Okay, now that we know how to
create and reassign variables, we're ready to work on a project. So I actually prepared a project that
we can do for this lesson and we can see this project by going to our browser, clicking at the top and typing super simple.dev/projects/variables and press enter. So we're going to work on the cart
quantity feature of the final project. So in the final project we have a number
in the top right corner that shows how many products are in our cart. When we click the add to cart
button, this quantity will increase. So what you see here is a simple
version of the cart quantity feature that we can create right now.
Let's go over how it works. First, make sure you have the
console open on this page. Now when we click the
show quantity button, it will show us that there
are zero products in our cart. If we click the add to cart button, it will increase the quantity by
one and display it in the console. If we click add to cart, again, it will increase the
quantity by one again. Now in the final project, we can also add more than one product
at a time using this dropdown. For now, we're going to build
a simpler version of that. We're going to use the plus two and
plus three buttons to add multiple products. So when we
click the plus two button, it will increase the quantity by
two and display it in the console. And when we click the plus three button, it will increase the quantity by three. And finally, when we click
the reset cart button, it will reset the quantity back
to zero and display this message in the console. So now that we understand
how this project works, let's build step by step. First, let's create a new H T M L
file just for this project. We're going to go to our code editor
and click this icon to show our files and then click
this icon to create a new file. Let's name this file, zero five dash cart dash quantity dot html, and press enter. Next, let's open variables dot
html and we're going to copy all the code here into our new file. Let's typer A on windows
or command A on Mac to select all this code. And then right click copy. And then in our new file, right click and paste. Let's close this for now. And in the new file we're
going to change the title to cart quantity and let's remove all
of our JavaScript code, but keep the script element because
we're going to write new JavaScript code. Now we're ready to begin. Let's start by creating these buttons.
Let's go to the body element, going to create a new line. And here as we learn
in the previous lesson, we can create a button
using this HTML code lessen button greater than and the
closing tag lessen slash button greater than inside this button, we're going to have
the text show quantity. And let's save. Now let's open this file in live
server by right clicking and then open with live server. And we can see that we
created the first button. Now let's create the other buttons here. Feel free to pause the video
if you want to try it yourself. We're going to go back to our
HTML and create another button. Inside this one we're going
to have the text add to cart. Let's create another button. This one is going to
have the text plus two, and we'll create another button. This. One is going to be plus three. And finally we'll create the last button, and this one is reset cart. And now let's save. And
if we go back to our tab, we've created all the buttons. Now let's make this webpage
interactive with JavaScript. First of all, we need somewhere
to save the cart quantity. So as we learned in this lesson, variables are the perfect solution
for this variables let us save a value. So let's go into the script element
and we're going to create a variable by typing let, and this variable is going
to save the cart quantity. So let's just name it cart, capital Q quantity. So the cart quantity
will start out at zero, so we're going to type
equals zero and semicolon. Next, when we click the
show quantity button, we want to display the quantity
in the console. To do this, we learned a special H T M L attribute
in the previous lesson called the on click attribute. So we're going to type
in this opening tag here, space on click equals and double quotes. So the on click attribute runs
some JavaScript when we click this button and between the double quotes, we can write JavaScript
code. So let's press enter, enter.
And now when we click this button, we want to display the cart
quantity in the console. So let's type console dot log, open bracket, close bracket, semicolon. And then between the brackets
we're going to display a message. Now if we go back to super simple.dev and we click show quantity, we want to display this
message in the console. So in our code between the brackets, we're going to type the string quote cart, quantity colon zero. Now let's save and go back
to our tab to try it out. So we're going to open the console
first by right clicking and then click inspect and then click the console. And now when we press
the show quantity button, it should display that
message in the console. Okay, so we just made our
project interactive, however, we obviously don't want to display
zero every time we want to display the value inside cart quantity. So we'll need to insert this
value inside this string. Remember from the strings lesson, when
we want to insert a value into a string, we're going to use a template string. So let's switch the single
quotes to back ticks to create a template string. And now instead of zero, we're going to insert a
value using dollar open curly bracket and closed curly bracket. And in between these brackets,
we're going to insert this variable cart, capital Q quantity. Remember that JavaScript
is case sensitive, so make sure you type the
variable name exactly the same. Now let's save and click show quantity again, and now it displays the value
inside cart quantity in the console. So notice that variables also
work with string interpolation. Again, we can use a variable
wherever we use a value and it will just substitute whatever
value is saved inside this variable into the code. Now let's make the rest of
the buttons interactive. So when we click the add to cart button, we're going to add one to this cart
quantity and display it in the console. So again, we're going to type
here and type space on. Click equals double quotes, and between the double quotes
we're going to add JavaScript. Let's also add some new lines here
to make our code easier to read. Okay, so in the on click attribute,
we're going to do two things. The first one is increase
the cart quantity by one. We can do that by reassigning
the cart quantity variable. So we're going to type just the
variable name cart quantity, and we're going to make it equal to itself plus one and semicolon. Next we're going to display the
updated quantity in the console. So let's press enter and we're
going to display this message again, so we can actually just copy this code. So we'll select it and
then right click and copy. And then here, right click and paste. Now if we save and click the add to card button, we'll see that it increased the quantity
by one and displayed the updated quantity in the console. Let's press
it again to make sure it works. So it increases it by one again and
then displays it in the console. So that's basically how the cart quantity
feature works in the final project. First, we need a variable
to save the quantity, and then when we click a button,
we're going to update the quantity. So now let's make the rest
of these buttons interactive. Feel free to pause a video if
you want to try it yourself. For the plus two button, we're going
to add the on click attribute. Again, on click equals double quotes,
And inside we're going to increase
the cart quantity by two, so cart quantity, and then we'll just
make it equal to itself plus two and semicolon. And again, we're going to display the updated
quantity in the console so we can create a new line and just copy
this code. So select it, right click copy, and here, right click and paste. Let's save and click plus two a few times and we can see that it adds two to the
cart quantity and displays it in the console for the plus three
button, we'll do the same. Let's type an on click attribute, click equals double quotes, and here we're going to increase
the cart quantity by three. So cart quantity equals itself plus three and semicolon. And we're going to display this in the
console again. So we'll select this, right click copy, and here, right click and paste. Let's save again and try it
out to make sure it works. So plus three, plus three. And finally let's do
the reset card button. So we'll add the on
click attribute. Again, on click equals double quotes, and inside the double quotes, we're
going to do something a little different. This time instead of
increasing the cart quantity, we'll set it back to zero. To do this, we can just reassign the
cart quantity variable, so cart quantity and just make it equal to zero and semicolon. Now if we go back to super
simple.dev and try out this reset cart button, you'll notice
that it displays two messages. The first message is cart was reset. So we're going to display
that message in our code first console dot log, and the string cart was reset, and the second message is the
same message as the other buttons. So we can just select
this and then right click copy, and then here, right click and paste. And now let's save and go back
to our tab and give this a try. So the cart quantity starts at
zero When we press add to cart increases by one, this increases by two, this increases by three, and
when we click reset cart, it'll display cart was reset and
reset the cart quantity back to zero. And that's it. We just created a simple version of
the cart quantity feature of our final project using everything that we
learned in this course so far. Now we're going to learn some
shortcuts for reassigning variables. So if we look at this line of code
Here, we're increasing the value of this
variable by two and then saving it back. Well, there's actually
a shortcut for this, and that shortcut is cart quantity plus equals two and semicolon. So this does the same thing as the
line above, but it's just shorter. The plus means we're going
to add two to cart quantity and equals means we're going to save
that result back to cart quantity. So we can actually delete this line and the code will work
the same way. If we save and try it out, it will still add a two and then
save it back in card quantity. Let's scroll up and practice
by using this shortcut for cart quantity plus one. So
instead of this line, we can type cart quantity plus equals one and semicolon. So it turns out that in programming
plus equals one is so common that we have an even shorter
shortcut for plus equals one, and that shortcut is cart quantity plus plus and semicolon. So this is the same thing
as plus equals one and all three lines do the same thing. So we can remove these lines and the code will work the same
because it's just a shortcut If we save. So if we click add decart it, it will add one every time. So those are some shortcuts
for reassigning variables. We also have these shortcuts
for the other operators, like minus equals multiply
equals divide equals and minus minus. I'll leave some exercises for these other
shortcuts at the end of this lesson. Next we're going to learn some best
practices for naming variables. So if we scroll down, notice that our variable cart
quantity has two words in it, cart and quantity. We learned earlier that we can't
have spaces in a variable name, so if we want to have multiple words, we have to combine them
together like this. Now you might be wondering why we wrote
it this way with a lowercase C and a capital Q. This is actually a naming
convention called Camel Case. In Camel case, we combine the words together and
capitalize every word except the first word. So for a cart quantity, we capitalize quantity, but we keep cart lowercase
because it's the first word. Camel case is actually the standard
naming convention for JavaScript. All of our variable names
should use Camel Case. Now in programming there are other
naming conventions that exist. Another one is called Pascal Case. Pascal case is the same as Camel
Case except we capitalize the first word. So for cart quantity, Pascal case would be capital
cart and capital quantity. In JavaScript, there is one
feature where we use Pascal case, which we'll learn later in this course. For everything else we use Camel Case.
Another naming convention is Kebab case. Here we keep the words lowercase
and combine them with a dash like cart dash quantity. Kebab case doesn't work in JavaScript
because the dash is already a minus symbol. However, we use kebab case in H
tml and CSS and also in our file names as you can see here. And finally, we have Snake case where we keep
the words lowercase and combine them with underscores. Snake
case is used in other languages, but it's not really used in JavaScript. So those are the common naming
conventions that we use in programming. Now, one more thing I want to note
is that when we name our variables, try to pick a name that is not too
short or too long. For example, instead of cart quantity, we
could have named this variable C, but this name is too short. It's
hard to understand what C means. We could also use a
name like this quantity of products in the cart, but this name is too long. It's
hard to read this in the code. So try to have a balance between a name
that is understandable but not too long, like cart quantity. The last thing we're going to learn in
this lesson is there are three ways to create variables in JavaScript. Let's go back to our
variables dot html file, and we're going to learn those three ways. So the first way is to use
Let, which we already learned. The second way to create a
variable is to use the word cons. So at the bottom we can type const space and then a variable name like variable two and make it equal to three. So Const creates a variable just like let, except we can't change its value later. This value stays constant.
That's why it's called Constant. If we try to change its value, like variable two equals five, and then we save this and we
open this file in the browser by right clicking and then
open with live server and then open the console.
So right click inspect and then click the console. It will give us an error when
we try to change this variable. So this doesn't work. Let's remove this line and save. So why would we ever
use Cons instead of let, while Cons makes our code
safer and easier to understand? When we create a variable with Cons, we know for sure that this
variable will always contain three for let. However, if we create a variable, it's hard to know what value is
inside this variable because later on we can change this value in our code. So in order to keep our code safer, it's actually a best practice to
use cons by default and only use Let When we know that we
need to change the variable. So here it's actually
best practice to use Cons to create this calculation variable
because we're not changing it later. Same thing for the result variable and the message variable. Now for variable one, we have to use Let because we're
changing it later in this code. So that's cons. It creates a
variable that can't be changed later. Finally, the third way of creating a
variable is to use another word var. So at the bottom we can type VAR space and then a variable
name like variable three and make it equal to three. So VAR creates a variable just like Let, and this variable can be changed later. VAR is actually the original way
to create variables in JavaScript. VAR means variable. However, VAR has some issues that we'll
learn later in this course. And because of these issues, we
don't use VAR in new JavaScript code. You might see VAR in older JavaScript
code, so it's still useful to note. So those are three ways to
create variables in JavaScript. Let Const and var, we use Const by default, and if
we have to change a variable, then use Let. So one more thing we're going to
learn is that we can use type of with variables. So remember that type of
tells us what type A value is. For example, if we wrote
Console dot log type of three and save type of will tell us
that three is a number. Well, we can actually use
type of with a variable. So if we change this to variable two and save type of will tell us the type
of value inside the variable, which is a number, and that's
what we see in the console. Now let's check the type
of this variable message. So message contains a string, and if we do console dot log type of message and save, this will tell us that the value
inside the message variable is a string. So we can use type of to check
the type of value that is saved inside a variable. And that's
the end of this lesson. In this lesson, we
learned about variables, which are a way to save
values and use them. Later, we learned how to reassign a variable. We created the cart quantity
feature of the final project. We learned some shortcuts
for reassigning a variable. We learned some naming conventions
and best practices for variable names, and we learned three ways
to create a variable. Let Cons and var. Here's some exercises to help
you practice using variables. In this lesson, we're going to learn two more
features of JavaScript called Bullions and If statements. And we're going to use these features
to build this rock paper scissors project. Let's start by creating a new
HTML file for this lesson. We're going to go to our code editor
and click this icon to show our files and then click this icon
to create a new file. We're going to name
this file zero six dash bullions html and press enter. Let's open variables dot html and we're going to copy all
this code into our new file. Let's select the code using control
A on Windows or command A on Mac. And then right click copy. And in here, right click and paste. Let's close this for now and
prepare this file for this lesson. So we'll scroll to the
top and change this to boos and then remove
all the JavaScript code, but keep the script element. Now let's save and open
this file in live server by right clicking and then
open with live server. And we can close the previous tabs as well as the previous code. For now, we'll start by learning what are
bulls. So far in this course, we learned two types of values in
JavaScript, numbers and strings. Bullying are another type
of value in JavaScript, but bullying are special because
there are only two bullying values. True and false.
Let's click in the script element and type true press enter and type false. So these are the only two bullying
values that exist true and false. So what's the
purpose of bullying values? A bullying value represents
whether something is true or false. For example, in JavaScript
we can compare two numbers. Let's create some new lines
and type the code three less than five. So this code checks whether the
number three is less than five, and of course this is true. So if we console dot
log this code console, dot log and save, and then go to our website
and open the console, right click inspect and console, it will show us that the result of
this code is the boo value. True. Let's try another example. Let's delete this less than
symbol and replace it with a greater than symbol. So now this code checks whether
three is greater than five, and we know that three is not
greater than five. So if we save, the computer will tell us that the
result of this comparison is the bullying value. False. So as you can see, a bullying value represents
whether something is true or false. Now, let's learn these syntax rules
for bullying. To create a bullying, we just type true or false. Note that we don't surround
these with quotes like this. If we surround them with quotes,
this is now a string, not a bullying. We can use type of to check this. So at the front we can type console dot log, type of true. If we save, this will tell us that
this is a string. Now, if we remove the quotes and save, this will tell us that this is now a bull. So when creating a bull, don't put quotes around true or false. Let's save. Now, one way to create a bull
is to compare two numbers, for example, three greater than five.
So this greater than symbol is called a comparison operator. And there are many other
comparison operators we can use. We saw less than earlier, and we also have greater than or
equal to less than or equal to triple equals, which checks if two values are
equal to each other and exclamation double equals, which checks if two
values are not equal to each other. Now JavaScript is a little special
because it has two ways to check if two values are equal, triple
equals and double equals. The difference is that double equals
tries to convert both values into the same type. For example, in our code, let's create some new
lines and console dot log, and let's check if the
number five is equal to the string 5.00. If we save, it will tell us that these two
values are equal to each other, even though one of them is a
number and the other is a string. And that's because the double equals
converts both values into the same type. So converts both of these into
the number five and then compares them. So that's why
they are equal. However, this is not a good idea because
this value is a number and this value is a string. It's a piece of text, so they shouldn't really
be equal to each other. That's why in JavaScript we
always use the triple equals to check if two values are the same, so that we avoid the conversion
behavior of double equals. So if we save, now, it will tell us that these two values
are not equal to each other because one value is a number and
the other value is a string. So this rule also applies to not equal to. In JavaScript we always use
exclamation double equals instead of exclamation equals to avoid
the conversion behavior. All right, so those are
comparison operators. In the order of operations, comparison operators have
a lower priority than math. So if we did something
like five and then minus five, this would calculate
five minus five first, which is zero. And then
compare the two numbers. So three is now greater than zero. So if we save the first
comparison will now be true. So comparison operators have
a lower priority than math operators. Now that we know
what bullying values are, we're going to combine them with a really
useful feature called if statements. An if statement lets us write
multiple groups of code and then decide which code to run. Let's do an example and
create our first if statement. We're going to go to the bottom
and create some new lines and type if and open bracket, closed bracket and open curly
bracket. Closed curly bracket. Between these round brackets, we're going to put a boo value like true and in between the curly brackets
we're going to put some code to run. For example, console dot log. Hello. So the way that an if statement
works is that if this bullying value is true, then we're going to run
the code in the curly brackets. If this bullying value is false,
then we're not going to run the code. If we save the value between the brackets is true. So we're going run this
code and display hello. Now if we change this to false and save, it will not run this code. So an if statement lets us decide
whether or not to run some code based on this bullying value. Now if statements have another
useful feature called else, let's go to the end of
this if statement and type else open curly bracket,
close curly bracket, and then inside these curly brackets
we're going to put some different code like console dot log else. The way else works is if
this bullion value is true, the computer will run this code. Otherwise we will run
the code inside else. Let's give it a try. We'll change this bullying
value to true and save, and because it is true, it will
run this code and display. Hello. Now if this bullying value is false and save
Because it is false, it will not run this code and
it will run the code inside else and display else. So using if and else we can
write two groups of code and then decide which code to run. Now let's do a practical example. We're going to write some code to check
if someone is old enough to drive. Let's go to the bottom
and create some new lines and we're going to type
if brackets and curly brackets and inside here
we're going to compare two numbers. The first
number is a person's age. Let's pretend we have a
person who is 30 years old, so we're going to type 30. Then we're going to check if
this age is greater than or equal to the legal driving age. Let's pretend the legal driving age is 16. Notice that between the brackets we
don't have to just put a bullying value. We can put any code that
results in a bullying value. So this comparison results
in the bullying value. True. That means the computer will run
the code between the curly brackets. So in here, let's type console dot log you can drive. Now if this is not true, let's run some different
code at the bottom or type else and curly brackets
and then inside these brackets will type console dot log. You cannot drive. Now let's save and it will tell me that this
person who is 30 years old can drive If we go back and change
this to a person that is 15 years old and save this comparison will result in false, so it will
display you cannot drive. So that's how we use if statements. We can write multiple groups of code
for different situations and then decide which code to run. Now let's learn the syntax rules
for if statements to create an if statement we type if and then
round brackets with a boo value inside. This is
called the condition. If this condition is true, we will run the code
inside the curly brackets. We can also add an else statement. This code will run if
the condition is false. The else statement is optional.
We don't have to have one. So these curly brackets and the code
inside these are called branches because it's like a tree branch. The code is splitting off into two
directions and we either run this code or we run this code. One more thing to know is in a
branch if we only have one line of code, the curly brackets are actually
optional so we can delete these and the code will still work.
However, if we have more than one line of
code in this branch, for example, if we add another line console dot log, congrats. Now this branch has two lines of code, so the curly brackets are mandatory
so we have to add them back. Now we're going to learn another
feature of if statements, which is we can have more than
one condition. For example, we're going to go to the end
of this if branch and type else if and then brackets and curly brackets else. If let's us add another
branch to our if statement. Between these round brackets
we can add another condition. For example, if a person is
almost old enough to drive, let's display a different
message. So inside this condition, let's check if this person's age, which is 15 is greater than or equal to 14. So we're checking if they're
almost old enough to drive. And now inside the curly brackets we're
going to display a different message console dot log almost there. So the way this works is that the if
statement checks the conditions one by one. First it checks if this is true, if it is it will run this branch.
Then it checks if this is true, if it is, it will run this branch
And if none of the conditions are true, it will run the ELs branch. So here this condition is false, so
we're not going to run this code, but now this second condition is
true, so we're going to run this code. If we save, we display almost there in the console. So using Ls if branches, we can add as many conditions
as we want to an if statement. The next thing we're going to learn is
that we can combine if statements with variables from the previous
lesson. For example, here we wrote the person's age two times. So we can actually save this age in
a variable and then reuse that value. So above the if statement, let's create a variable using cons and let's name this variable
age and we'll make it equal to 15. Remember, the best practice for creating a
variable is to use cons by default and only use Let. If we're going
to change this value later, and now that we saved
this number in a variable, we can use the variable
inside the if statement. So we'll replace 15 with age and here as well with age. So this will take whatever value is
inside the variable and substitute it into the code. If we save the if statement works the same
way as before and we run this line. Okay, now we're ready to use bulls and
if statements to do a project we're going to build a rock
paper scissors game. First, let's take a look at the project. We're going to go to our browser
and at the top create a new tab and we're going to type here super simple.dev/projects/bulls and press enter. Here we can see a simple
version of a rock paper, scissors game and if we click this link, it will take us to the
final version of this game. So in this game we can pick a move and then the computer will pick a random
move and it will show us the result. And we also have a score of
how many times we won lost and tied. So we're going to build
this as we go through the course, but for now, let's go back and we're going
to start by building this simple version of the game. So how this simple version works is we
click one of these buttons to pick a move. So let's pick rock. Then the computer will randomly pick
a move. In this case it's paper, but for you it might be different
and it will compare the two moves and display the results in this popup.
So the rules of rock paper, scissors are rock beats,
scissors, paper beats, rock and scissors beats paper. Let's press okay and we'll
get started on this project. First we'll create a new HTML
file just for this project. Let's go to our code editor and
click here and create a new file and we're going to name this file, zero six dash rock dash paper, dash scissors, do html and press enter. Next, let's copy all the code from
bullions dot html into this new file. So we'll open this again and
then control A or command A to select all the code and
then right click copy. And in here right click and paste. Let's close this and prepare this file. So we'll change this to rock paper scissors and remove all of the JavaScript
code that we had before. Finally, let's save and open this file
in the browser by right clicking and then open with live server. Let's take a look at the project again. So we're going to start by creating
the text first because this text is in the final version of the project. So in our HTML we're going
to create a paragraph element for this text. So less than P, greater than, and the closing
tag less than slash p, greater than insider paragraph.
We're going to have the text, rock,
Paper, scissors. Next, let's create the buttons. So we'll go to our HTML
and create a button. And inside this first button
we'll have the text rock. Let's create another button. This one will be paper and we'll create the last button. This one will be scissors. Now let's save and check our new tab. And now we created all the
elements that we need. Next, let's make these elements
interactive with JavaScript. So when writing JavaScript, a good strategy is to think about
what steps we need to do and then convert those steps into code. So here when we click a button, the first step is the computer
will randomly select a
move and then we're going to compare the moves to get the result. And finally we'll display
the result in a pop-up. By the way, this is called an algorithm. An algorithm is a set of steps
to complete a task or to solve a problem. Now that we know
what steps we need to do, we're going to convert these
steps or this algorithm into code first. We're going to run some
JavaScript when we click these buttons. So let's use the on click attribute again,
We'll go to the opening tag of the button and type on click equals double quotes. And then inside these double
quotes we can add our Java script. So now we have to figure out how to
randomly select a move for the computer. To do this, we need to learn a
new piece of JavaScript code. So here we're going to type capital M math dot random open bracket close bracket math dot random generates a random
number between zero and one. So if we console dot
log this console dot log and save and click this button and then check in our console
by right clicking inspect and the console it will display a random
number between zero and one it we click this button again, it would
generate a different random number. So every time we run math dot random, it generates a different random
number between zero and one. Now to be more precise, it actually generates a number greater
than equal to zero and less than one. Now let's save this random number in
a variable so we can use it later. So we'll replace the
console dot log with const and then a variable name, let's just name it random capital N number and then equals. So we saved this random
number inside this variable. Next we need a way to convert
this random number into a move like rock, paper or scissors. To do this, let's imagine the space between
zero and one and then divide this space into three equal parts. Each part represents a move. If we generate a random number and
it's between zero and one third, the move will be rock. If it's
between one-third and two-thirds, the move will be paper. And if
it's between two-thirds and one, the move will be scissors. This is how we can convert the random
number into a move and this will give the computer an equal
chance of picking rock, paper or scissors.
Now let's convert these steps into code and an if statement is
a perfect solution for this. This already looks like an if statement. So in our on click attribute, let's add some new lines and type if brackets and curly brackets. For this first condition we're going
to check if the random number is between zero and one one-third. So let's check if random number is greater than or equal to zero. But in this case we also
need to check that random number is less than one third because we're checking if the number
is between zero and one third. But how do we do this? How do we check that two
comparisons are both true? To do this we're going to learn another
type of operator in JavaScript called logical operators. Logical operators. Let us combine bull values,
which is what we need to do here. Let's go back into bulls dot
html and we're going to learn logical operators.
So first let's open the tab for this file and we're going to
comment out all the previous code so our console doesn't
get too messy slash star. And then at the bottom star slash Now let's create some new lines and the first logical operator we're
going to learn is called the and operator. Let's type console dot log A bullying value true and another bullying value true. So this is the and operator
and it checks if two bull values are both true. So it checks if the left side is
true and the right side is true. That's why it's called the and operator. So here the left side is true
and the right side is also true. So the and operator will
result in true if we save this displays true. Now if one of these sides
is false, for example, if we change this to false, now let's check is the left side
and the right side both true in this case no so and
will now result in false if we save and now displays false. So that's the logical and operator
it checks if the left side is true and the right side is also true. So this is exactly what we need
for our project. For example, let's create a new line and type console dot log and let's say
that we generated a random number like 0.2 and we
want to check if it's between zero and one third. So we can do 0.2 is greater than or equal to zero and we're also going to check if 0.2 is less than one third. So we're using the logical and operator
to check if the left side is true and the right side is also true. So in this example both sides are true. 0.2 is between zero and one third. So if we save this whole
thing will display true now in the order of operations, logical operators like and have
a lower priority than math and comparisons. So in this example it will
calculate the math first and then it will calculate the comparison on the
left and then the comparison on the right and then at the end the
and operator checks if both sides result in true. Now let's use the and
operator in our project. Let's go back to the file for
our project and then inside this first condition we're going to check
if the random number is greater than or equal to zero and
at the same time is the random number less than one third. So this is how we check if a number
is between zero and one third. In this case the computer will pick
rock. So between the curly brackets, let's just type console dot log rock, let's get some practice and create
the other two branches for picking paper and scissors. Feel free to pause this video if
you want to try it yourself first. So here we're going to type else if to add another branch and then
brackets and curly brackets. And in this condition we're
going to check if random number is greater than or equal to one third and random number is less than two thirds. So if this random number is
between one third and two thirds inside here we're going to console dot log paper. And finally let's create
another branch using else if random number greater than or equal two thirds and random number less than one and console dot log scissors. If we save and then go back
to our rock paper scissors tab and then click the rock
button a few times it will pick some random moves for the computer. So that's how we generate
the computer's move. One thing I want to point out is
that I use the less than comparison instead of less than or equal to. I just did this so that the
comparisons don't overlap. Before we continue in the project, we're going to learn two other
logical operators we can use. Let's go back to bulls
dot html and let's also open the tab for this file. The next logical operator
is called the OR operator. For example, let's type some new lines and type console dot log. True or false. So this is a logical or
operator IT checks if at least one side is true. So it checks if the left side is
true or the right side is true, that's why it's called the OR operator. So here one of these sides is true. So the OR operator will
result in true if we save this displays true. If both sides are true it will also
result in true because at least one side is true. The last logical operator we're going
to learn is called the knot operator. For example, let's create a new line
and type console dot log exclamation true. So the exclamation is called
the knot oper operator. The knot operator only uses
one bull value and it flips it into the opposite value.
So if this value is true, the knot operator will flip
it into false. So if we save, this will result in false.
Now if you think about it, if we say that something is not true, that's the same thing as
saying that it is false. So that's why this is
called the not operator. Now if we change the value to false, again the not operator
will flip this into troop. So if we save, this will now result in troop.
So those are the logical or and not operators. We don't need to use these
in our project right now, but I'll leave some exercises for
these at the end of this lesson. Now let's go back and
continue the project. Let's open the code and open the tab. The next step is to compare the
computer's move to our move, which is rock. So first let's save the computers move
in a variable so we can compare it later. So instead of console dot log, we're going to create
a variable with const computer capital M move and make it equal to the string rock and we'll do the same thing here. Cons, computer move equals paper and here cons, computer move equals scissors. And now at the bottom
let's console dot log the computer move variable
to make sure that it worked. If we save and then click our rock button. Unfortunately it gives us an error
telling us that computer move is not defined even though
we created it right here. So what is happening here, if
statements have a special feature, they create something called a scope, A scope limits where a variable exists. Basically whenever we have
these curly brackets like this, any variable we create inside the
curly brackets will only exist inside the curly brackets and
we can't use these variables outside the curly brackets.
So this is called a scope. Scopes are a feature of many programming
languages and they help us avoid naming conflicts. For example, if I create a variable here called random number equals 0.5 and this didn't create a scope. So if
I delete these curly brackets, this variable name will now conflict
with the variable name up here because we can't have two
variables with the same name. So you can imagine that if we didn't
have scope and we had hundreds or even thousands of lines of code,
we would quickly start to
run out of variable names. So by creating a new scope here, all the variable names inside
the scope only exist between the curly brackets and it won't affect
anything outside in the code. So scopes help us avoid naming conflicts, okay, so I'll delete this example and
we'll learn how to access this variable outside of this scope. So to access this variable
outside of the if statement, we have to create this variable
outside of the if statement. So above here we can create this variable constant computer move and let's just make it equal to the empty string for now. So this variable was not created
inside any curly brackets, so it's accessible from all of
this code inside the on click attribute including
inside the if statement and then inside the IF statement
instead of creating a new variable, we're just going to save the move
inside this variable up here because we can access this variable
anywhere else in the code. So instead of using cons, we're just going to reassign computer
move and we're going to remove it here as well. And here as well. And remember when we reassign a variable, we have to switch from cons to let and now if we save and
then click the rock button, we're able to console dot log
computer move because computer move is no longer inside this scope, it's up here so we can access
it in this line of code. So that's how scope works. Any variable that we create
inside curly brackets will only exist inside the curly brackets. So remember in the previous lesson we
learned a third way of creating variables called var. The issue with VAR is that it doesn't
really follow the rules of scope. For example here if we
create a variable with var, like VAR and random number equals 0.5, this variable will conflict with
the variable up here with the same name even though it's inside a scope. So that's why we don't use a VAR
anymore and we just use cons and let because a var doesn't really
follow the rules of scope. So we can remove this for now
and move on to the next step. So we generated a random
move for the computer, now we have to compare our move which
is rock to the computer's move to get the result and see who wins. To do that we'll use another if
statement. So at the bottom here, let's type if and then
brackets and curly brackets. And then inside this condition, let's check if the computer move is equal to rock. So remember in JavaScript we always
use triple equals instead of double equals to avoid the conversion behavior. And now if the computer's move
is rock and our move is rock, then inside the curly brackets
the result is going to be a tie And let's save the string in a
variable so we can use it later. Again, we have the same situation as before. We don't want to create the variable
inside here because then it only exists in this scope
between the curly brackets. Instead we're going to create the
variable above outside the if statement. So we'll use let to create this
variable because we're going to reassign it in the if statement. Let's name this variable
result and just make it equal to the empty string at the top. And then in the if statement
we'll save the result into this variable. So result equals tie. Now let's create the other
branches of this if statement. So here we'll add else if brackets and curly brackets
and we'll check if the computer move is equal to paper This time, if the computer move is
paper and we picked rock, then we lose. So the result is equal to you lose. And finally we'll add another else if brackets and curly brackets
and we'll check if the computer move is equal to scissors and if the computer picked
scissors and we pick rock, the result is that you win. So that's how we compare our move
to the computer's random move using an if statement. The last step is to display
this result in the popup. So at the bottom let's
create a pop-up using alert, open bracket, close bracket and let's go back to super simple
dev to see the message in the pop-up. So what click this and in
the popup it shows our move, the computers move and then the result. So we can actually just copy this, right click copy and then in here right click and paste. So obviously the computer is not going
to pick this move every time and this is not going to be the
same result every time. Instead we want to insert
computer move into here and we want to insert result into here. So because we want to insert values, we're going to turn this into a
template string using back ticks. And now instead of paper we're
going to insert a value using dollar and curly brackets and we're
going to insert the variable computer move. And instead of this text, every time we're going to insert the variable result. And now if we save and we can click okay to close
this and go back to our tab and click the rock button,
we're going to pick rock, the computer will pick a random move
and it will show us a result in a popup. So that's how we create this simple
version of rock paper scissors in our code we did things step by step. First we generated a random number, we converted it into a move
for the computer and then we compared our move to the computer
move and we displayed the result in a pop-up. So as you can see
when we're writing JavaScript, we first figure out what
steps we need to do. This is called an algorithm and
then we convert these steps or this algorithm into code. So now we can actually remove this
console dot log because we don't need it anymore. And the last step is to make the
other buttons here interactive. So feel free to pause this video if
you want to try it yourself first for the paper button, let's add some new lines to
make it a little easier to read. And again we'll add the on click attribute and then inside here we can actually
make a copy of all the JavaScript we wrote so we can select all of this and then write click copy and then in here right click and paste. If the formatting doesn't look right
we can select all of these lines And press tab to add indents
until the formatting looks good. The one thing we have to change
here is that now we picked paper, so the result is going to be different. If the computer picks
rock and we pick paper, that means you win. If the computer picks
paper now it means that we tie and if the computer picks scissors, that means you lose. And here we'll also change.
You pick rock to paper and that's it. The last step is to make these
scissors button interactive. So again, on click equals double quotes and then we'll make a copy of
the code. So I already have it, so just write click and paste and then again select the code that
we need to fix the formatting for and press tab. And here we pick scissors. So
if the computer picks rock, then the result is you lose. If the computer picks paper, the result is you win and if the computer also picks scissors, the result is a tie and we'll change. You pick rock to scissors. Now if we save and try out our game, if we click rock, we're going to pick rock computer picks
a random move and it will show us the result. Here
Let's press okay and try paper. This also works correctly. Let's press okay and click scissors and this also works
correctly and that's it. We just finished creating a simple
version of this rock paper scissors game. In the rest of this lesson we're going
to learn more details about bulls and if statements. Let's go back to bullions
dot html and open the tab for this file and let's comment out the
previous code using slash star and star slash and create some new lines. The next thing we're going to learn
is called truthy and falsey values. So if statements don't just work
with bullying values like true and false, they actually work with any type
of value including numbers and strings. For example, let's type if brackets and curly brackets and inside this condition, instead of putting a bullion value, we're going to put a number like five. And then inside the curly brackets, let's console dot log the string truthy. If we save the number
five behaves just like true, it causes the if
statement to run this code. So we call this value a truthy
value because it behaves just like true. Now let's change this value
to a different number zero. If we save the number zero behaves just like false, it causes the if statement
to not run this code. We call this value zero
a falsey value because it behaves just like false. So how do we know if a
value is truthy or falsey? In JavaScript, the list of
falsey values are false. The number is zero, the empty string nan undefined and nu, any value that is not on
this list is a truthy value. So why do we use truthy and falsey values? One way we use them is like
a shortcut in our code. For example, let's create a variable
at the bottom using const and let's call it cart
quantity and make it equal to five. Next, let's create an if statement. If brackets and curly
brackets and inside the curly brackets, let's type console dot log. The string cart has products. Now let's say that we only want to
display this message if our cart has products usually inside
this condition we would check if cart quantity is greater than zero, but now instead of doing this
comparison we can actually just type cart quantity and it
will behave the same way. If the cart quantity is not zero,
they will both behave like true. If the cart quantity is zero,
they will both behave like false. So here the cart quantity is five, which is a truthy value if we save, this causes the if statement to
run this code. As you can see, instead of doing comparisons we
can use truthy and falsey values as shortcuts. Truthy and falsey values also
work with logical operators. For example, if we console dot log the knot operator and the number zero zero is a falsey value, it behaves just like false so
the knot operator will flip it into truth.
If we save, this will display truth. Now that we understand
truthy and falsey values, let's go over the list of falsey values
because there are some that we haven't learned yet. We already learned false
zero and the empty string. The next falsy value is nan,
which means not a number. We get nan if we do some
invalid math for example at the bottom, let's type console dot log the string text divided by the number five. So obviously this is not valid math. If we save JavaScript will
tell us that the result of this calculation is not a number or nan the next false value is undefined. Undefined represents that
something doesn't have a value. For example, at the bottom if we
create a variable with let variable one and we
don't give it a value and then we console dot log this variable and we save, it will show us that variable
one contains the value undefined. So undefined represents that this
variable doesn't have a value. One thing to note with undefined is
that we can only use this syntax with let, we can't use it with const. If we really want to use this
with const we have to type out equals undefined directly. The last falsey value is nu. We'll need some extra knowledge to
understand nu so we'll learn about null later in this course. The last thing we're going to learn in
this lesson are some shortcuts for if statements called the turner operator, the guard operator and
the default operator. First, let's comment out this code
so our console doesn't get too messy slash star and then at
the bottom star slash and let's scroll down and we'll start
by learning the turnery operator. We're going to type a
boian value like true and question mark, another value for
example the string truthy and then colon and another
value like the string falsy. So this is the turn operator. This is similar to an if else statement. The first value is like the
condition, if it's truthy, the result of this code is a
value after the question mark. If the first value is falsey, the result of this code is
the value after the colon. So you can think of the question
mark as the IF branch and the colon as the ELs branch.
This is sort of like a shortcut for an IF statement like this. Now an advantage of the ary operator
over an if statement is that we can save a ary operator in a variable. So at the front we can do constant result equals and now if we console dot log the result and save the first value is true. So the value after the question
mark gets saved in the variable. As always we can use truthy and
falsey values instead of just true and false. So here if we change the
first value to a falsely value like zero, this will cause the value
after the colon to get saved inside the variable. If we save, that's exactly what happens. So this is the turn operator, it's sort of a shortcut for an
if else statement like this. The next shortcut is
called the guard operator. Earlier in this lesson we
learned the and operator which checks if two sides are both truthy, the and operator has a special feature. Let's say we have an and operator
and the left side is false. In this situation we already
know it's impossible for both sides to be truth so we don't
even need to check the right side. So the and operator actually
stops early and doesn't even run the code on the right and
this is called a short circuit evaluation. For example, let's go into our code and
create some new lines and we'll type false and console dot log. Hello. If we save, the left side is falsey, so the and operator stops
early or short circuits and it doesn't even run the code on the right. So as you can see we can use
the value on the left to block or guard the code on the right. So when we use the and operator like this, we call it the guard operator. This is sort of like a shortcut
for an IF statement like this and just like the turn operator, we can save the guard operator
in a variable. For example, let's create a variable cons message and make it equal to false and the string, hello. If the first value is falsey, the guard operator will stop early
and the result will be the first value. If we console dot log this message and save the value, false will be saved inside this variable. Now let's change this value to
a truthy value like the number five. Now it will not stop early and
it will give us the second value as the result if we save the string. Hello is now saved inside this variable. This is sort of like a shortcut
for an IF statement like this, so don't worry if it's a bit confusing. All of these are just
shortcuts for an IF statement. They're sort of like an if statement
that we can write on a single line. The last shortcut is called
the default operator, which is similar to the
guard operator but uses or earlier in this lesson we learned
the OR operator which checks if at least one side is truthy. Let's imagine we have an OR
operator and the left side is true in this situation. We already know the result of the
OR operator because the left side is already truthy, we don't even
need to check the right side. So the OR operator also stops
early or short circuits. If the first value is truthy, for example, let's create some new lines and
let's say that in our final Amazon project we can choose a
currency to pay for our order. Let's create a variable with currency and make it equal to the string e u R or euros. Now let's say that choosing
a currency is optional. If we don't choose a currency, we'll use a default value
of U S D or United States dollars to create a default value.
We can go to the end and type or the string U s D. So here the left side is truthy, so the OR operator will stop
early and it will result in the value on the left. If we console dot log the currency and save it will display euros. Now let's say that we didn't choose
a currency because it's optional. So let's go here and we're
going to change this currency to undefined. Now the left side is fy, so the ore operator
does not short circuit. It will continue and the result
will be the value on the right if we save. Now the string U S D is
saved inside currency. As you can see, we can use the ore operator
to set a default value. So when we use the OR operator like this, we call it the default operator. The default operator is sort of a
shortcut for an IF statement like this. So don't worry, remember that everything that we learned
in this last section are basically some shortcuts for if statements. We don't have to use them but
they can save us some typing and that's the end of this lesson. In this lesson we learned about
bullying's and if statements bullying values represent whether
something is true or false. We learned how to use IF statements
to make decisions in our code. We learned how to use comparison
and logical operators. We learned about algorithms and
created a simple version of rock paper, scissors. We learned about truthy and
falsey values and we learned some shortcuts for if
statements, the turn operator, the guard operator, and
the default operator. Here's some exercises to help you
practice bullying and if statements. In this lesson we're going to learn
the next feature of JavaScript called functions and we're going to use
functions to improve our rock paper scissors project. First, let's create a new file for
this lesson we'll go to our code editor and create a new file and let's name this file zero seven dash functions dot html and press enter. Next, let's copy bulls dot html to functions dot html. So we'll click this file and
then select all this code using control A or command A and then right click copy. And in here right click and paste and we'll hide our files and
prepare this file for this lesson. So at the top we'll change the title to functions and we'll remove all the
code in the script element. And let's save and we'll
open this file in live server by right clicking open with live server and we're going to open
the console as well. So right click inspect and then click the console. And finally we can close the previous tabs as well as the previous code. Okay, now we're ready to learn functions. First of all, what is a function? A function let's us reuse code. Let's create our first function. We're going to go to the script element
And type the word function and space. So this creates a new function
and then we're going to give a name to our function. We can
name it almost anything we want, but for now let's just
name it function one and then we're going to type
round brackets and curly brackets. Then inside these curly brackets
we're going to create a new line and we're going to type some code. So console dot log the string, hello, and we'll also type console dot log two plus two and save. So this creates a function. Now let's learn how to use this function.
We're going to type at the bottom the function name, so function one and then open bracket, close bracket and semicolon. When we type the function
name with brackets, this will run the code
inside the function. If we save, notice that it runs the code inside
the function and displays the two lines in the console. So why
do we use functions? A function lets us reuse code. So if we wanted to run both
these lines of code, again, all we have to do is type the
function name again with brackets. So function one and brackets again, if we save,
This will run the code inside the function two times and we can reuse this
code as many times as we want by typing the function name with brackets. So that's what a function
is. It lets us reuse code. Now let's learn the syntax
rules for functions. The word function creates
a new function and then we choose a name for our function. The rules for function names
are the same as variable names. We can't use special words like function. We can't start with a number and
we can't use special characters although dollar sign and
underscore are allowed. And just like variable names, the best practice is to use
camel case for function names. And inside these curly brackets
we put the code that we want to run when we use the function. This is called the function body. Now one very important thing
to remember is that this code only creates a function.
It doesn't run the code in the function or do anything else in order
to actually run the code. We have to use the function
like below by typing the function name with brackets. This is known as calling the function. It's also known as running the
function or executing the function. Now that we learned these
syntax rules for functions, let's do a practical example. We're going to use functions to improve
the code of our rock paper scissors project. First, let's click here to show our files
and we're actually going to make a copy of the project just for this lesson. So we're going to right
click this file copy, and then at the bottom
right click and paste and we're going to rename this
file. So right click rename, remove copy at the end, and then at the beginning
we'll change this to zero seven and press enter. Next we're going to open this
file in live server by right clicking and then open with live server. And let's also open the console
on this page while right click inspect and then click the console. All right, now if we look at the code for
generating a computer move, you'll notice that this code is
the same for all three buttons. So this is a perfect situation
to use a function because a function lets us reuse code. So let's scroll down to the script
element and we're going to make a function here. So let's type function and then a function name.
Let's name this function, pick computer move, and then brackets and curly brackets. So one recommendation for function
names is to use a verb or an action in the name such as pick. So next we're going to move all the
code for picking a computer move into our new function. So let's create a new line
here and we'll scroll up to the scissors button because it's
the closest one and we'll select all of this code for picking a computer move. And then right click cut and inside the function, right click and paste. If we need to fix the formatting, we can select these lines
and press tab to add indents. So the reason we created this function
in the script element is because remember that the script element
runs when the page is loaded. So we want to make sure that we create
the function first and then we use it in the buttons after. Now remember, this code just creates a function. It doesn't actually run the code
inside to run the code inside. We're going to call this function. So let's scroll up to the scissors
button and we're going to call this function by typing the function name, pick computer, move open bracket, close bracket and semi call it if we save and then click the scissors
button. Unfortunately, it now gives us an error saying
computer move is not defined. Now this might seem weird because
down here we actually create the computer move. So what's going on? The reason this happens is
because functions create a scope. In the previous lesson
we learned about scopes, which limit where a variable exists. We learned about if statements and
that if statements create a scope between the currently brackets, this means that any variable created
between the currently brackets only exist between the curly brackets. Functions also create a scope. Any variable that is created
between these curly brackets only exists inside the curly
brackets and we can't use it outside the curly
brackets like we do here. So that's why we're getting this error. So how do we solve this problem?
Remember that with if statements, we solve this by creating the
variable outside of the if statement like this. We can use a similar solution
with functions to make this variable exist outside the function, we just have to create
it outside the function. So let's select this code. We're going to right click and cut and remove these lines. And then outside the function
we're going to right click and paste. So now this variable is no
longer inside the functions scope and it can be used
anywhere else in the code. So variables like this that can be
accessed anywhere are called global variables. If we save and now click the scissors button, everything is working again
because this code above can now access this variable.
Now let's press okay, and let's use this function
to reuse this code. So we'll scroll up to the paper button and now instead of all this code, again, we're just going to remove
it and call the function pick computer, move open
bracket, close bracket, semicolon, and also with the rock button
we'll select all this code and remove it and just call the function, pick computer, move brackets and semicolon. Now if we save and click the rock button, it works just like before, we'll press okay and
click the paper button. It also works just like
before. So as you can see, functions let us reuse code and
they make our code a lot cleaner by removing all the duplication that we had. Another benefit of removing
duplication is that before if we ever wanted to update the code
for picking a computer move, we had to update it in three
places in each of the buttons. But now if we scroll down, we only have to update it in
one place inside this function. So functions also make our code
easier to update in the future. Next we're going to learn a feature of
functions called a return statement. A return statement lets us
get a value out of a function. So at the end of this function,
let's type some new lines and we're going to type return and then a value like the number five and semicolon. Now whenever we call this function, it will result in a value the number five. So up here when we call this function, this will result in the number five. So we can actually console
dot log this console dot log and then save and click
the scissors button and it will show us that calling the
function now results in the number five and we display it in the console. So that's how a return statement works. It lets us get a value
out of this function. Let's press okay and do another example. We'll scroll down and this
time let's change this value to the string rock. Now whenever we call this function, it will result in the
string rock if we save and then click scissors
and scroll up here, calling this function now results
in the string rock and then we display it in the console.
So now let's press okay, and we'll learn these syntax
rules for a return statement. So. We just have to type the word
return and then a value and it will get this value out of the function. Now instead of just a value, we can also return a
calculation or a variable or anything that results in a value. So this is known as returning
a value from a function and this value is known
as the return value. We also don't have to return
anything from a function. If a function doesn't have a
return statement or we return without a value like this, this will return the value undefined. So if we save and then
click scissors again the function will return undefined. And lastly, when we
use a return statement, it ends the function immediately.
So after the return statement, if we type console dot, log the string after and press okay here and save this file and then click the scissors button. Notice that it doesn't run this code. And that's because once we
return the code returns back to where we call the function. That's
why it's called a return statement. So it's not going to run
anything after the return. So we can remove this code and press. Okay, So now that we understand
return statements, we're going to learn a better way of
getting the computer move out of this function. So first, let's actually move this
variable back into the function. So we're right click and
cut, and then in here, right click and paste and delete these lines. So now we're back to the original problem. How do we access computer
move outside of the function? So another solution is to
return this variable because remember a return statement
lets us get a value out of the function. So down here we're going to return the computer move. So this will take whatever value
is saved inside computer move, which is one of these values and
return it out of the function if we save and then click
the scissors button, we were able to get the move
scissors outside of this function. So what happened here is that we
returned this move and then up here we took the move and displayed it
in the console to get scissors. So that's another way of getting
the computer move out of a function using the return statement. However, now we're back to this problem with
computer move not being defined because we moved it back
into the functions scope. So let's scroll up and remember that this return value is just a value. We can use it like any
other value, for example, we can log it or we
can also save this in a variable. So let's do that right now. We're going to remove this and create a new variable with cons. And let's just name this
variable computer move to match what we use down
here and we use equals to save the return value
inside this variable. So note that even though we use
computer move here as well as here, there are different variables. This one is inside the function's scope. So it prevents it from conflicting
with variables outside the function's scope. That's one of the
main benefits of scopes. So now that we save the return
value into this variable, and we're using this variable down here, the code should now work.
If we save and click scissors, everything is back to normal
and let's press. Okay, so don't worry, functions can be a little confusing
at first because the code is no longer simply going from top to bottom. It sort of jumps around a little bit. So let's go through this step by
step. When we click this button, we're going to run this function. So the code is going to jump down
here and then it's going to run all of this code from top to bottom. At the end we're going to return
whatever is inside computer, move back to where we
called this function. So we're going to return
all the way back here, and then we're going to save
that return value into a new variable computer move and then
use computer move down here. So following the code line by line
like this is called tracing the code. It's a useful technique to understand
exactly what the code is doing. Now let's compare the two
solutions that we used a global variable and returning a variable. So returning a variable like
this is actually preferred over using a global variable, and that's because a scope can
help us prevent naming conflicts. So all the variables inside here
will not conflict with anything outside the scope. So generally it's a best practice
to keep things inside a scope if we can. Now let's move on and use this
function in the other buttons. Feel free to pause the video if
you want to try it yourself first. So we'll scroll up to the paper button and then here we're going to
save the returned computer, move into a variable. So cons, computer move so that it matches the code down here. Make it equal
to whatever is returned. And then same thing for the rock button, we're going to save the
return value in a variable. Cons computer move equals if we save and click the rock button, it works.
Let's press okay and click the paper button and this also
works and let's press. Okay, so that's how we use a return statement
to take advantage of the benefits of scope. Next, if we look at the rest of this
code where we compare our move and display the result, you'll notice that this code is very
similar for each of the buttons. The only thing that's different is
the result and the message that we display. So we can actually use functions
here as well to reuse code that has small differences. To do this, we're going to need another feature
of functions called parameters. So let's go back into
functions dot html and let's open the tab for this file. And let's also comment out the
previous code by typing slash star and at the bottom star slash and create some new lines. And now we're ready to learn parameters. So parameters are sort of the
opposite of a return statement. A return statement gets a
value out of a function. A parameter puts a value into a function. So let's do an example. Let's say that we're working on the
final Amazon project and we need to calculate the tax for our order. Let's create a function
to calculate the tax. So function,
Let's name it, calculate late tax brackets and curly brackets, and then inside
the curly brackets, let's say that the cost of our products is 1000 cents or $10 and the tax is 10%. To calculate the tax, we can do 1000 times 0.1, which is 10%. Let's also display
this number in the console. So at the front, we'll type console, dot, log, and brackets. Now let's save and remember, this code only creates a function.
It doesn't run the code inside. To run this code, we're
going to call this function. So down here we're going
to type the function, name, calculate, tax, and then brackets. If we save, it runs this code, and then it displays the tax,
which is 100 cents or $1. However, right now this function only
calculates the tax for 1000 cents. What if we want to calculate
the tax for a different amount? How would we modify this
function to work with any number? To do this, we're going to learn a
feature of functions called parameters. A parameter lets us put
a value into a function. So let's finally create
our first parameter. So inside these round brackets, we're going to choose a
name for our parameter. So let's just name this parameter one. A parameter works the
same way as a variable. We can save a value inside this
parameter and then use it just like a variable. So first, let's save a value inside
the parameter. To do that, we're going to go to where
we call the function, and then inside these brackets
we're going to put a value, for example, 2000. This will save this value
into this parameter, and now we can use it
just like a variable. So instead of 1000, we're going to type parameter one and it will take whatever value
is inside parameter one, in this case 2000 and
substitute it into the code. If we save it now calculates 2000 times 0.1 to give us 200 cents as the tax. Now every time
we call the function, we can save a different value
into the parameter. For example, let's create a new line
and call the function calculate tax. And this time we're going
to save the value 5,000 into parameter one. If we save this line of code will
calculate the tax for 5000 cents and result in 500 cents.
So as you can see, a parameter lets us put
values into a function and this allows our function
to work with any value. Now let's learn the syntax
rules for parameters to create a parameter. We just typed the
parameter name between the brackets, parameter names follow the
same rules as variable names. We can't use special words, we can't start with a number and
we can't use special characters other than dollar sign and underscore. And the best practice is to use camo case. Let's actually change this
parameter name to cost so the code makes more sense and save. Next, when a function has a parameter, we usually say this
function takes a parameter. If this parameter should be a number, we say this function takes a number.
When we put a value into the function like this, we call this passing a
value into the function. Another name for this value
is called the argument. And believe it or not, we've actually used functions
and parameters this whole time. The first code that we learned
in this course was alert. Alert is actually a function. You can tell it's a function because
of the round brackets and between the brackets we put a string. So this is an example of
a parameter. And lastly, a parameter only exists
inside the functions scope. So we can only use this parameter
between the curly brackets, we can't use it outside
the function. Next, a function can actually have more
than one parameter. For example, right now our calculate tax
function can only calculate a 10% tax. But what if we're in a different country
and we want to calculate a different tax percent To solve this, we can add a second parameter
by typing after the first parameter, a comma, and
then another parameter name. Let's name this tax percent. And now to save a value into
the second parameter will go to where we call this function
and also type a comma and a second value like 0.2 or a 20% tax. So the first value gets saved in
the first parameter and the second value gets saved in the second parameter. And now we can use our second
parameter just like a variable. So instead of 0.1 every time
we're going to calculate it with tax percent And it will substitute whatever
value is inside tax percent into the code. If we save, this first line will multiply 2000 by 0.2 and give us 400 cents as the result. So we can have as many parameters
as we want in a function, we just have to separate
them with a comma. Now notice that the second
time we call this function, we didn't give a value
for the second parameter. If we don't save a value
into the parameter, the parameter will get
the value undefined. So here if we console dot log the second parameter tax percent and save it will show us that the
second time tax percent is undefined. And then multiplying the
cost times undefined is not valid math. So we get the result nan or not a number. So now let's remove the console
dot log and we'll learn how to fix this. So to fix this, we can either pass a second value
into the function like this line or we can also set a default
value for the parameter to set a default value. We can just type after
the parameter and then add equals sign and a default value like 0.1 If we save the second function call
will multiply 5,000 by the default value 0.1 and give us 500. So that's how we add a
default value for a parameter. All right, now that we learned parameters, we're going to go back to the rock paper
scissors project and reuse even more code. So let's go back to the file
for the project and also the tab for this project. And now if we look at the code
inside each of the buttons, you'll notice that the code is basically
the same for all three buttons. The only small difference
is the move that we picked. So this is a perfect
situation to use a parameter. So inside the script element, let's create a new function
to reuse all of this code. We'll type function and let's name this function, play game brackets and curly brackets. Next, let's move all of this code inside
the function so we can reuse it. We'll select this code and then right click cut and inside the function right click and paste. And if we need to reformat, we can select these lines and press tap. So the value that is different for
each button is the move that we picked. So we're going to turn this
move into a parameter. So at the top between the brackets
we're going to create a new parameter, let's name it player move. And now let's save a
value into this parameter. So inside our scissors button, we're going to call this
function and run all this code. So let's type play game and call this function. And for the scissors button, let's save the string
scissors into player move. To do that, we'll type between the
brackets here and type the string scissors. So as we learned, this will save scissors into
player move and now we can use player move just like
a variable in the function. Now let's modify the code
based on the parameter. So here this code calculates
the result. However, this only works if the
player move is scissors. So we're going to put
this in an if statement. So we'll type if player move equals scissors, curly brackets inside this if statement, we're going to put this if statement. So let's select this and
then right click cut. And then inside here, right click and paste and select these lines and press tab. So notice that we can put an
if statement inside another if statement and we did this
because this code only makes sense if the player move is scissors.
And finally, let's modify the code
that displays the message. So here instead of displaying scissors, every time we're going to display
whatever is saved inside player move. So we'll replace it with
dollar open curly bracket, close curly bracket and in between insert player move and that's it. We modify this function to use a
parameter instead of always using scissors. Now let's save and click
the scissors button and you notice that it works. We display the move scissors
and we calculated the result correctly. Let's press okay and we're going
to use this function to reuse the code for the other buttons. So we'll scroll up and for the
paper button we're going to use a different if statement
to calculate the result. So let's actually copy
this into the function. We're going to right click, click copy, and then inside the function we're going to create another
branch. If the player move is paper, so here let's type else if brackets and curly brackets. Inside this condition we're
going to check if the player move is equal to paper this time. And then inside these curly
brackets we're going to paste the if statement we copied earlier. So right click and paste And we can select these lines
and press tab to reformat. So now we have the code that
determines the result for paper down here. We don't need to modify this code
because we're always displaying whatever is inside player move. Finally, we can scroll up to the paper
button and remove all this duplicated code and just use our function play game. And we're going to pass paper inside. So now paper will get saved
inside player move and it's going to run this
if statement instead. If we save and click the paper button, in this example I pick paper, computer pick rock in a
calculated the result correctly. Let's press okay and use
this function for the rock button. Feel free to pause a video if you
want to try it yourself first. So let's scroll up to the rock button. And first we need to copy this
if statement into the function. So let's right click copy. And then inside the function let's create a branch for rock else if player move is equal to rock and then curly brackets. And inside here we're going
to right click and paste the if statement we copied earlier.
And now let's select these lines and press tab a
few times to reformat. And again, this doesn't need to change. The last step is to scroll
up to our rock button and instead of duplicating
all of this code, we're going to remove it and
just call our function instead play game brackets and then inside we'll have the string rock. Now let's save and click the rock button. So I picked rock, the computer picked paper and we
calculated the result correctly. Let's press. Okay.
So by using a function with a parameter, we were able to reuse all of the
code in our buttons and you can see that it made our code
a lot cleaner. So lastly, notice that inside a function
we can call other functions. Let's go through the code step by
step so that we understand how it works. So here when we call
the play game function, we go inside here and then we
call the pick computer function. So now we're going to go
inside this function and run all the code and then
when this function returns, we're going to return back to where
we called it and then keep going and run the rest of the code. And then when the play
game function finishes, it's going to return back to here. So inside a function we
can call other functions. Now one last thing we're going to do
for this code is we'll scroll down and we're just going to add some
new lines to this if statement to separate the branches and make
the code a little easier to read and save. And let's scroll up and
that's the end of this lesson. In this lesson we learned about
functions which let us reuse code. We learned how to get a value
out of a function using return. We learned how to put values
into a function using parameters, and we improve the code for our
rock paper scissors project by reusing the code and removing duplication. Here's some exercises you can
do on your own to practice using functions. In this lesson we're going to learn
another type of value in Java script called objects and we're going
to use objects to create a score in our rock paper
scissors project. First, let's create a new file for
this lesson we'll go to our code editor and click this icon and then click this icon to create a new
file and we'll name this file, zero eight dash objects dot html and press enter. Next, we'll copy all the code in
functions dot html to objects dot html. So we'll type here and press
control A or command A to select the code and then right click copy and in here, right click and paste. Now let's hide the files for now
and we'll prepare this for this lesson so we can change this to objects and remove all the code
in the script element. Finally, let's save and open this
in live server by right clicking open with live server. And let's also open the console
on this page. So right click, click inspect and click the console. Let's close our previous tabs and also the previous code. And now we're ready to learn
objects. So what is an object? An object groups multiple values together. Let's do an example and
create our first object. We'll go to the script element
and we'll create a variable using const and we'll name this variable product and make it equal to open curly bracket, closed curly bracket and semicolon.
So this is an object inside this object. We can add some values. So we'll type enter and then name colon and then a value like the string socks. And at the end we'll type a comma and then price colon and another value like the number 1090. So inside our object we
just added two values. So at the bottom here, let's try console dot
logging this object console, dot log product and save and it will display both values into the console. So as you can see, an object lets us group
multiple values together. So for each of these values
we have some code on the left. This code is called the property. And using the property we can access
specific values in the object. For example, let's type and enter and console dot log. We're going to type the
object product and then a dot and then a property like name. So.name will access the
value that is associated with the name property,
which is the string socks. So if we save, it will display the string
socks in the console. Let's do another example and we'll
access this second value using the property price. So we'll type enter console dot log, the object product and then a dot and then a property price. So this will access the
value associated with price, which is 1090. If we save, that's what gets displayed in the console. Now we can also use the property
to change a value inside an object. To do that we're going to
type the object's name, product and then dot and a property like name and just make it
equal to something else like the string cotton socks. So this code will change the
value associated with the name property to cotton
socks. So at the bottom, if we type console dot, log the product again and save. You notice the value associated
with the name property was changed to cotton socks. So that's
how an object works. We group multiple values together
and then we can access or change these values using the
properties on the left. Now let's learn the syntax
rules for objects to create an object, we start with an open curly
bracket and end with a closed curly bracket inside the object. We can put multiple values for each value. The code on the left
is called the property. This is how we access the
value inside the object. We separate the property and
value with a colon and this is called a property value pair. We can have many property
value pairs in an object and we separate them with a comma to access a value inside the object.
We type the object's name and then dot, and then the property we
want to access like name. This will give us the value
associated with the name property. This syntax is called dot notation. If we access a property
that doesn't exist, the value will be undefined. To change a value in an object, we can use the dot notation again, so product.name and just
make it equal to something else. Now using the syntax we can
also add a value to an object. We can type a property that
doesn't exist. For example, here we can type product.new property and make this equal to something
like the bullion value true. If we console dot log the product again and save it will add this value to the
object along with the new property. We can also remove a value
from an object by typing delete, and then the object product dot and then the property we
want to delete like new property. If we console dot log the product again and save this code will delete new
property from the object. And lastly, notice that an object
is just another type of value. We can save an object inside
a variable and we can also console dot log objects if
we check the type of this value. So type of product and save And scroll up in the console, it will tell us that product is an object. So let's remove this and save. And now we'll learn why we use objects. So objects make our code more organized. Instead of creating a bunch of
variables for the products values like the name and the price and other details, we can just group all these
related values together into one object. Objects also allow us to use
multiple values together. Instead of console dot logging
each of these values individually, we can just console log the
whole object and display all the values at once.
So objects, let us group multiple values
together and let us use multiple values together. Next, let's do a practical example with objects. We're going to add a score to
our rock paper scissors game. So I've actually prepared a project
we can use for this lesson to see this project. We're going to go to our
website and then create a new tab. And then up here we're going to type super simple.dev/projects/objects and press enter. So this is our simplified rock
paper scissors game again except in this project when we play the game, it's also going to keep track of a score. So how many times we win lose and tie. And also if we click okay, we have a reset score button. So if we play the game a few times and add to our score and then click the reset score button, this will reset the score back to zero.
So if we play the game again, the score starts from zero again. So we're going to learn how to use
objects to create this feature. Let's press okay. And first let's create
a copy of our project. Just for this lesson we'll go
to our code editor and click this icon to show our files and
we'll make a copy of the rock paper Scissors project
from the previous lesson. So we'll right click and copy and down here right click and paste and we'll right click and rename. This file will, we'll remove the copy at the
end and at the front we'll change this to zero eight and press enter. Now let's hide these files and
we can close the zero seven file for now. And let's open this in live
server by right clicking and open with live server. Let's also open the console on this page. So right click inspect and the console. All right, now let's go into our
code and add a score to our game. So remember when writing JavaScript, a good strategy is to think
about what steps we need to do. This is called an algorithm
and then convert those into code. So we already had an algorithm
for the rock paper scissors game. Let's update this algorithm
to include the score. So first the computer
randomly selects a move. This step will stay the same. Number two, we're going to compare the
moves to get the result. This step will also be the same, but now we're going to add an extra
step. After getting the result, we're going to update a score
and finally we'll display the result and the score in a pop-up. Now let's convert these updated
steps or this algorithm into code. The first thing we need to
change is we added a third step. We're going to save and update a score. So first we need somewhere
to save our score. So one place we can save
it is inside a variable. Let's go to our script
element and at the top we're going to create a variable
for our score using cons score and make it equal to an object. And inside this object we're
going to have the property wins. So this will keep track of
how many wins that we have, what type colon and the
number zero because the score starts at zero and
then a comma and then another property losses. This will be how many losses
we have and then colon and zero and then another comma and ties colon and zero. So we use an object here because these
values are related to each other. You could use separate variables, but
we're using an object for convenience. Another thing you'll notice is that
we're creating this variable outside of a function and outside of a scope. And that's because every time we
make a move we need to update the score from last time. So in order to save the
score from last time, we need to keep it outside the function.
If the score was inside the function, the function would create a new score
every time, which is not what we want. So in this situation, in order
to save a score from last time, we're going to keep this variable outside. Now every time we play the game,
after we calculate the result, we're going to update the score. So let's scroll down to where
we calculate the result, which is here and then below
it we're going to type some new lines and type the code
for updating the score. So we can do that with an if statement. So we'll type if brackets
and curly brackets and inside the condition we're going
to check if the result is a win. If it is a win, we're going to update the wind's
property and increase it by one. So down here, if the result is equal to the string, you win. And make sure that this string
matches the string up here inside the curly brackets
we're going to update score dot wins and will make it equal to itself plus one. So this is how we increase the
wind's property in the score object by one. Now remember from the variables lesson
that we have a shortcut for increasing something by one and that shortcut is plus equals one. Next, let's add another branch to this if
statement for the other two results. So else if brackets and curly brackets. And in the second condition
we're going to check if result is equal to the string you lose. And make sure this string
matches the string up here. So if the result is you lose, we're going to update score dot losses property and increase it by one. So plus equals one. And finally we'll check
if the result is a tie else if brackets and curly brackets result equals to the string tie. And here we'll update score dot ties plus equals one. So we converted this step
in the algorithm to code. The score starts at zero and
every time we play the game after we calculate the result, we're going to update the
score using this code. Now let's convert the last step into code. We're going to display the result and
the score in the popup at the end. So let's actually go back to
the super simple.dev project and we'll see what the popup looks
like. We'll click one of these buttons and in this popup on the second
line we display the score. So in our code this is the
code that displays that popup. So how do we add a
second line to the popup? Remember that template strings
have another special feature called multi-line strings. So we can type at the end of this
template string and press enter to add another line to this string.
So here we can type winds, colon, and we're going to insert a
value using dollar open curly bracket, close curly bracket. And here we're going to insert
the number of wins that we have, which is score wins. So we'll type score wins. Next we're going to show the
number of losses that we have. So after this, let's type a comma and losses colon and insert another value here we'll insert score dot losses. And finally we'll type a
comma and we'll display ties colon and insert value score dot ties and this will display
our score in the popup. So let's save this and give it a try. We'll click okay and
then go back to our tab and play the game. So now on the second line
we will display the score. One small issue here is that we have
a lot of spaces on the second line, so these spaces correspond
to the spaces here. When we use multi-line strings, these extra spaces will
show up in the popup. So to remove these spaces we can
just remove them in the code like this. Now if we save press okay and play the game, it will show our score on the second
line without those extra spaces at the front. Let's press. Okay, we're going to add one more
feature to this project. If we go back to super simple.dev, we have a reset score button
which will reset the score back to zero. When we click it, let's
add this button in our project. So we'll scroll up and inside the HTML we'll add a button with a code less than button greater than, and inside the button have the text reset score. And now when we click this button, we'll run some code using
the on click attribute equals double quotes. And then in here we're going to
write some code to reset this score back to zero. So one way we can do it is
because this score is an object, we can use dot notation to
change everything back to zero. So we can type score dot wins and make it equal to zero.
We'll also type score dot losses and make it equal to zero. And finally score dot ties and make it equal to zero. Now let's save and go back to our tab and play the game a few
times to get a score. Let's press okay and press reset score and then play the game again. And you'll notice that the
score started from zero again. So that's how we create
the reset score button. We just set all of these
properties back to zero and that's it. That's how we add a score feature
to our rock paper scissors project using an object to save the score. Let's press okay and we're going to learn
more details about objects. Let's go back to objects
dot html and we'll open the tab for this file. And let's also comment out
the previous code using slash star and at the bottom star slash and save. Now let's scroll to the bottom
and we'll do some setup. So first let's create
a variable with cons or name it product two and make it equal to another object
Inside. This object will have
the property name colon and the string shirt and
we're going to console dot log this object, so console dot log product two and save. So the next detail we're going to
learn about objects is another way to access the values inside. We previously learned the dot
notation to do this. For example, console dot log product two.name. This will access the value
associated with the name property In JavaScript
we have another way of accessing values inside
objects which is using square brackets. So we'll create a new
line and type console dot log product two. And this time we'll type
square brackets and then inside the square brackets
will have a string with name. So this is called bracket
notation and this does the same thing as dot notation
up here it gets the value associated with the name
property. If we save these two lines of code,
both access the string shirt, which we see here.
So when do we use the bracket notation instead of the dot notation, bracket notation lets us use
properties that normally don't work with dot notation. For example, at the bottom we can type console dot log product two and then use a dot and try to
access a property called delivery dash time. If we save this property
will give us an error and that's because JavaScript thinks
that this dash is a minus sign and it's trying to do math. So in order to use a property like this, we have to use bracket notation. So we're going to replace
the dot with square brackets and turn this into a string. Now if we save it no longer gives us an error
and because delivery time does not exist in the object,
we get the value undefined. So using Bren notation, we can also add values to
the object when we create it. So here we can add a comma
and we'll add another property using bracket
notation and a string delivery dash time and a colon and then a value like the string one day if we save, this lets us add a delivery
dash time property to this object. So as you can see, bracket notation lets us use properties
that normally don't work with dot notation. Another feature of bracket notation
is that between the brackets we don't just have to use a
string, we can use a variable, a calculation or anything
that results in a value. So you might be wondering which
one should we use dot notation or bracket notation. We usually use dot notation by
default because it's shorter and easier to read. But if we need to use properties
that don't work with dot notation, then we use bracket notation. Now a shortcut here is when we
create the object. If we only have a string between the brackets, the brackets are actually
optional so we can just type this If we save the code will still work. Okay, the next detail we're going to learn
is that inside an object we can save any type of value. So this includes numbers, strings, bulls, as well as other objects
because remember objects themselves are also values. For example, we can type a comma and
add a property called rating colon and then an object open curly bracket, close curly bracket. And inside this inner object
we can add more properties like stars, colon 4.5, this is how many stars a
product has and then a comma and a property called count colon 87. This is how many ratings a product has. So this is called a
nested object or an object inside an object. We can use nested objects to
make our values more organized. So inside the product the number
of stars that it has and the number of ratings that it has
are both related to a rating, so makes sense to group them
together further inside the product. Now to access values
inside the inner object, we just use the dot notation or
bracket notation multiple times. For example, at the bottom we can type console dot log product two dot rating. This will get the value
associated with rating. And this is an object, so we can use the dot
notation again, count. So this will get the count
inside the rating object, which is this value right
here. So if we save, it will display 87. And finally, another type of value we can
put in an object is a function. So in this object let's
type comma and another property fun colon. And we're going to create a function
here. So let's type function and we'll name the function function one, brackets and curly brackets. And then inside the function we're
going to have some JavaScript code like usual. So console dot log, the string function inside object. This saves a function inside
the object and this works because a function is actually
just another type of value in JavaScript. But we'll learn more about this feature
of functions later in this course. For now just know that functions
are also values and we can save them in an object.
To access this function, we can use the dot or
bracket notation as usual. So at the bottom we can type the object, product two and then a dot and then the property fun. So this will access the
value associated with the fun property, which is a function. And because this is a function
we can call it as usual using brackets if we save, this will run the function
here and it will display function inside object into the console. So when we save functions
inside an object, this is called a method and we've
actually been using methods this whole time. Console dot log
is actually a method. Console is an object
provided by JavaScript and log is a function that is
saved inside the console object. If we go to the bottom and type console dot log type of console and save, this will confirm that
console is just an object. And if we change this to console dot log and save, this will show us that
console dot log is a function. So log is a function that
is saved inside the console object. So we call this a method. Another example of a
method is math dot random, which we used in the rock paper
Scissors Project Math is also an object provided by JavaScript
and random is a function saved inside the math object. So we call math dot random
a method as well. So we've actually been using objects and
methods all throughout this course and now we understand all the
code that we've been using so far. Next we're going to learn
about built-in objects. So the console object and the
math object are known as built-in objects because they are
built into the language, they are provided by the language. We're going to learn two more
built-in objects called Jason and local storage and we will
use these objects to improve our rock paper scissors project. Let's start with the Jason Builtin object. This object helps us work
with something called Jason. Jason stands for
JavaScript object notation. The easiest way to understand
Jason is it's basically a syntax. It's a similar syntax
to a JavaScript object, but it has less features. For example, the code on the left uses
JavaScript object syntax and the code on the right uses syntax.
So one difference is that all properties
and strings must use double quotes. In Jason, Jason does not
support single quotes. Another difference is that Jason
does not support functions. So as you can see Jason is
basically a syntax that's similar to a JavaScript object
syntax but with less features. So why would we use Jason Syntax
instead of a JavaScript object syntax? A JavaScript object only
makes sense in JavaScript. On the other hand, Jason Syntax can be understood by
almost every programming language. So Jason syntax is more universal. For this reason, we use Jason when we send data
between two computers that might use different programming languages, we'll learn how to do
this later in the course. We also use Jason when we store data. We'll learn how to store
data in this lesson. Now that we understand what Jason is, let's learn about the
built-in Jason object. The Jason object helps us
convert a JavaScript object to Jason. For example, let's convert our object
product two to Jason. So we'll create some new
lines and we'll type the Jason object dot stringy and open bracket close bracket. So stringy is a method
of the adjacent object, so it's a function that is
saved inside this object and we can call this function using
brackets. Between the brackets, we can give it a JavaScript
object we want to convert like product two. This will convert the object into Jason. So now let's console dot log the result And save. And in the console it will display
the product using Jason Syntax. If we scroll up, you notice that the function that we
saved in the object is not inside the Jasons and that's because Jason
does not support functions. So one thing to note about stringy
is that it actually results in a string. So at the front, if we type type of and save, it will tell us that the result
that it gives is actually a string. So if we remove this and save now this Jason string is ready
to be sent to another computer or to be saved in storage. Next, let's learn how to convert the
other way from a Jason back to a JavaScript object. To do that we'll use another
method in the built-in Jason object called Jason dot par. At the end we'll type jason.pars and brackets. And between the brackets we can put a
Jason string that we want to convert. So we actually have a
Jason string up here. So let's just make a copy
of this, we'll select it, write click copy, and let's create an extra
variable to make it more clear. Const jason string and make it equal to right click and paste. And now let's convert this Jason
string back into an object by putting it into pars. And finally we'll console
dot log this result. So console dot log and save and jason.pars will turn
the Jason string back into a JavaScript object. So that's the built-in Jason object. It helps us convert back and
forth between a JavaScript object and Jason. Now we're going to learn the next
built-in object called local storage. Local storage is used to
save values more permanently. So far we've been saving
our values in variables. However, variables are temporary. The only exist on the current page. If we refresh the page or close the page, all the variables are
deleted. For example, if we go back to our rock paper
scissors project and open the tab for this project
and we play a few games and play it again. So we have two games. If we refresh the page notice the score starts from zero again. And that's because when
we refresh the page, all of these variables are deleted
and the score gets reset back to zero. However, if we press okay and
go to super simple.dev and we refresh the page
and we play the game, Notice that the score doesn't start from, it starts from the previous score
even though we refreshed the page. And that's because this project
saves the score in local storage and local storage doesn't get
deleted when we refresh the page. Now let's learn how to use
local storage in our project. Let's press okay and we'll
go back to our code and we'll scroll down to where we update the score. So here after we update the score, we're going to save it in local storage. But first let's learn
how local storage works. So at the bottom here we're
going to type the local capital S storage object to save a value inside local storage. It has a method called set item. So we can type tot set capital i item and brackets because this is a method or a function saved inside the object. And we're going to give two
strings to this method. The first string is a name. This is how we're going to access
the value that we save later. So let's use the string
message as the name and we'll type a comma and then
we'll type the value that we want to save into local storage. So local storage only supports strings. So let's save the string. Hello inside local storage. If we save and then go back to our tab and play the game. It will run all this code and save
the string into local storage. Now let's learn how to get this
string out of local storage. We'll press okay and
we'll scroll to the top. And when we first load the page, we're going to get that value
out of local storage by typing local capital S storage. Get item this time and brackets. So the get item method gets
a value out of local storage and we're going to give it one string. So this string is the name that we
used earlier, which was message. So a type the string message. Now let's console dot log this result. So console dot log and a bracket at the end and save it will get the value that we
saved earlier out of local storage. So we saved the string. Hello. And that's exactly what gets
displayed in the console. So using local storage, we were able to get the value that
we saved earlier even though we refreshed the page. Now let's save our score into
local storage so it doesn't get reset when we refresh the page.
So let's scroll to the bottom and instead of using the name message, we're going to use the name
score to save our score and instead of the string, hello, we're going to save the score object. Now one problem here is that local
storage only supports strings. So we need to convert
our object into a string. And we actually learned how to
do this earlier using Jason dot stringy. So at the front we can type jason dot stringy and then brackets around the score. And this will convert the
JavaScript object score into adjacent string and then it's
ready to be saved in local storage. So if we save this and then play the game, it will run this code and save
our score into local storage. Now let's press okay, and
then scroll up to the top. And now instead of getting the message, we're going to get the score out
of local storage. If we save. Now when we load the page, we're able to get the score that
we saved from last time as a Jason string. The last step is instead of resetting
the score to zero every time we're just going to use the score
from local storage. Before we do that, remember that this is just a string, so we need to convert
this back to an object. We also learned how to do
this earlier using jason.pars. So at the front we can type jason.pars and then open bracket. And at the end a closed
bracket and it will convert this back to an object. If we save It will convert
the score from a Jason string back to an object. So now
we can use it up here. So instead of doing this, we'll remove it and
replace it with this code. So right click cut and then here, right click and paste and we'll remove console dot log and save. So now when we load the page, it will load the score from local
storage. If we play the game, notice that the score
doesn't start from zero, it starts from the score
that we had last time. Let's review what we
did step by step first when we update our score in this code, after we update the score, we're going to save it in local
storage using local storage dot set item. Now local storage
only supports strings, so we have to convert our score
object into a Jason string using Jason stringy. And then after we've saved
this into local storage, when we load the page up here, we're going to load the score that
we just saved from local storage using local storage dot get item.
And the score was saved as a jason string. So we need to convert it
back into an object using jason.pars. So that's how we use the adjacent
object and the local storage object to save our score more
permanently. Let's press. Okay, and the last feature we're going to
add is when we click the reset score button, we also need to remove
the score from local storage. Otherwise if we press reset, score and refresh and then play the game, it will just grab the old
score from local storage. So reset score doesn't really work here. Let's press okay and fix this issue. So here in the reset score
button at the end we're going to remove the score from local storage. So we'll type local storage and then a method called dot remove item and brackets. And between the brackets we're going to
tell local storage which value we want to remove.
So we're going to remove the score. So we'll type the string score if we save and we click the reset button and then we refresh the page
and try to play the game again. Unfortunately it now gives us an
error. So what is happening here? So remember that we remove
the score from local storage. So now when we load the page,
this actually doesn't exist. When something doesn't
exist in local storage, it's going to give us a value called null. And at the bottom, if we try to access any property on nu, it will give us an error.
So that's what we see here. So how do we solve this
problem if we scroll up? One way to solve this problem is
that if there is no score in local storage, we're going to
give it a default value. Let's look at how we can do that. So after this line we're going
to check if the score is null. We can do that using an if statement, if brackets and curly brackets. And we'll check if score is equal to null. And if it is equal to null, we're going to give this a default
score. So inside the curly brackets, we'll just make the score
equal to the default object we had earlier, which was winds zero and then losses zero and ties zero. And remember, if we
need to reassign a variable, we have to change it from cons to let. If we save, the score will be null because
we removed it earlier and now this will give it a default score.
So everything should work as before. If we play the game, you'll notice that the score starts
from zero or this default score and everything is working again. So that's how we create the score feature
in the rock paper scissors project as well as the reset score feature. Next we're going to use some
shortcuts to simplify our code. So these shortcuts are things that
we learned in the bulls lesson. So remember that null is a falsey value. That means it will behave just like false. So a shortcut we can use here is
instead of checking if the score is equal to null, we can also remove this and check if not score. So not score does the same
thing as checking if it's null. If the score is null, not score will flip it into true. So both of these will return true. If the score exists, it's an object, then both of these will return false. So instead of checking if
a value is equal to null, we can just use the knot
operator as a shortcut. Now also from the bullying's lesson, we have an even shorter
shortcut for doing this. So notice here that this
code basically sets a default value if the score doesn't exist. In the bulls lesson we learned
a technique called the default operator, which is
exactly what we need here. So on this line we can
remove the semicolon and type And then a default value. So we want our default
value to be this object. So let's select it and then right click copy. And then here, right click and paste and I'll select these lines
and press shift tab to remove and indent. And I'll add
a semicolon back at the end. So the way that the default operator
works is that if the left side is truthy, so in this case we have a score, it will use the left side. If the left side is falsey or
in this case the score is null, then we will use the right
side as a default value. So this does the same
thing as this code below, but it's just a shortcut. So now let's comment out
this code using slash star and at the bottom star slash. So we'll leave it here just
for reference and then save. And if we click reset
score again and refresh and play the game, it will still work. So this is a perfect situation
to use the default operator to simplify our code. So let's press Okay, And that's all we're going to do
for this project in this lesson. Now let's move on and learn
more details about objects. The first thing we'll
learn is the value null. So NU is one of the falsey
values in JavaScript. It's similar to the value undefined, they both represent that
something doesn't have a value. So what's the difference
between null and undefined? We use null when we intentionally
want something to be empty. For example, in the previous lesson we learned
that if a function has parameters, we can give the parameter a default value. If the parameter is undefined,
it will use the default value. However, if we set this parameter to null, it will not use the default
value and it will just use null. So null means we intentionally
want something to be empty. In most cases though, null and
undefined work the same way. Okay, so the next detail about objects we're
going to learn is called auto boxing. Let's go back to objects
dot html and open the tab for this file. And let's also comment out the previous
code so our console doesn't get too messy. So slash star and at the bottom, star slash and save. So let's scroll down. We learned in this lesson that
objects can have properties and methods, so you might be surprised to
learn that other values also have properties and methods. For example, at the bottom we're going to type console dot log, the string, hello, and then the dot notation
and a property called length. So strings can also have properties. The length property tells us how
many characters or letters are in this string. So hello has five letters. So if we save the length
property will be five. Here's another example, what type console dot log, the string, hello, and then the dot notation
and a method this time two, capital U, upper capital C, case and brackets. So this string also has a
method called two upper case. And this method gives us a copy
of the string with all letters capitalized or in upper case if we save, it will give us hello in capital letters.
So as you can see, simple values like strings
can also have properties and methods. So now you might be wondering, these are strings, not objects. How can strings have
properties and methods? The answer is that JavaScript has a
special feature called auto boxing. JavaScript automatically wraps
this string in a special object first, and this object has the property
length and the method to uppercase. So this is done automatically. We don't see the special object
that's wrapped around this string. So this feature is called
auto boxing because JavaScript automatically wraps the string
in an object like a box. So auto boxing also works with
other types of values like numbers and bulls. The only thing is that auto
boxing does not work with null and undefined. It will just give us an error. The last detail we're going to learn
about objects is a really important detail and that is objects are references.
To demonstrate let's create a new
variable with an object. So const object one and make it equal to an object inside this object. Let's have a property message, colon and the string. Hello. So you might think that when
we create an object like this, we create a value that has other
values inside and we save the whole thing in a variable. However, this actually works a little
differently. When we create this object, the actual value is created
somewhere in the computer's memory, and this variable actually just
gets a reference that points to that location. In the computer's memory, this is like a shortcut on your computer, a shortcut points to where
the actual file or folder is. So there's no way to
actually see this reference, but just know that this is a reference
and the object is somewhere else in the computer's memory. So the reason it works this way is
to make the language more efficient. For example, below this line we can
create a variable cons and call it object two and make it equal to object one. So this code doesn't actually
make a copy of the object, it just makes a copy of the
reference that points to the object. So this makes a language more efficient
because if we had a really big object here, it's not good to copy the entire
object over and over again. Instead, JavaScript just copies
the reference which is much faster. This is called copy by reference. Now that we learned that
objects are actually references, let's learn some interesting
behaviors of references. So at the bottom here, we're going to change the
property message in this object. We can do that by typing
the object object one dot message property and make it equal to something else like the string. Good job. And now if we console dot log object one and save. Notice that we were able to change
the message property even though we created object one with cons. And that's because this variable just
contains a reference that points to the object. So const prevents us from changing
the reference in the variable, but it doesn't prevent us from reaching
into the reference and changing the object that it's pointing to. So just be careful when you're working
with objects. Even though we use cons, we can still change the
values inside the object. Another interesting behavior
is that on this line we're not actually copying the
object into this variable, we're copying the reference. So object two actually has the
same reference as object one. They actually point to the same
object in the computer's memory. So at the bottom, if we type console dot log object two and save, you'll notice that for object two, the message property was also
changed even though we only changed object one. The last interesting behavior is that
we can't compare objects directly. For example, let's go to the bottom and
we'll create a new object using Constant Object three and we'll make it equal to an object. And then inside we're going to
have the same values as object one. So we'll have the property message And the value is the string. Good job. So now let's try comparing
object three to object one. So here we'll type console dot log and check if object three is equal to object one. If we save, it will tell us that these two
objects are not equal to each other even though they have
these same values inside. And that's because remember
objects are references. So Object three also contains a reference, and this code compares the references
and not the values inside the object. So because object three is a
different reference than Object one, that's why this code results in false. If we did console dot log and we check if object two is equal to object one, object two has the same
reference as object one, it points to the same object
in the computer's memory. So if we save, this will tell us that these two
variables have the same reference. So just remember that when
you're comparing two variables
that contain objects, you're actually comparing the
references, not the values inside. If we want to compare the values inside, we would do that manually by checking
the message property against this message property.
So don't worry object references are a little confusing at first,
but the more you work with it, the more you just get used to it. The last thing we're going to learn
in this lesson are some shortcuts for objects. So first let's make a
copy of object three. We'll select the code and right click copy. And then at the bottom we'll scroll down and
right click and paste. And let's rename this variable to object four. So now let's say that we want to
get the message property out of this object. We can do that by typing Object four message. And now let's also say that we want
to save this in a variable also called message. So at the front we'll type const message and make it equal to this value. So now if the variable name and
the property name are the same, we actually have a shortcut
for this. To use a shortcut, we're going to type
constant and curly brackets message and make it equal to object four. So this shortcut is called destructuring. This will take the message property
out of object four and save it in a variable called message. So this line of code does the
same thing as the code above. So let's comment out this line
using double slash and we'll just keep it for reference.
So at the bottom, if we type console dot log message and save, it will display good job. So the Destructuring shortcut took
the property out of the object and saved it in this message variable. Next we can use this destructuring
shortcut for multiple properties. For example, let's add another property
to this object using comma and we'll add a price property colon 7 99. And now we can take the price
property out of this object by typing after message a comma and price. So this will take the price property
out of the object and save it in a variable called price. If we console dot log the price and save it will display 7 99. So that's the destructuring shortcut. It's an easier way to take
properties out of an object. The next shortcut we're going to learn
is called the shorthand property. So at the bottom let's
create some new lines. And let's say we want
to create a new object. So we'll type cons and let's name this object five and we'll make it equal to an object. And inside this object, let's say we want to
create a message property. So we'll type message colon and for the value, let's type the variable message. So what this does is that it takes
whatever is inside the message variable and substitutes it into
this code. So at the bottom, if we console dot log object five and save this object will have a property
called message and the value is whatever is inside
the message variable, which is good job. So now we actually have
a shortcut for this code. If the property and the
variable name are the same, we can actually just type
it out once like message. So this code does the same
thing as message, colon message, and this shortcut is called
the shorthand property. So if we comment out this
line using double slash and save, you can see that this shortcut
creates the same object that we had before. The last shortcut we're going to
learn is called the shorthand method. So at the end let's create a new property and let's name it method colon and we'll save a function in this property. So we'll type function, and let's name it function one brackets and curly brackets. And inside this function let's console dot log method. And now here at the bottom, let's run this function
by typing object five dot method. So this will access this function
and we'll run it by typing brackets.
If we save, this will run the code in the
function and display method in the console. So we actually have
a shortcut for writing this. So at the bottom we can
type method again and just type brackets and curly brackets, console dot log string method. So this code does the same
thing as the code above. So these brackets will create
a function just like here. So this function name
is actually not needed. So if we comment out lines of code and save, it will still display method in
the console because this is a shortcut for these lines of code. So this shortcut is called
the shorthand method syntax, and that's the end of this lesson. In this lesson we learned another
type of value called objects, objects, group related values. Together we added a score to
our rock paper scissors game. We learned about built-in objects
and used the Jason and local storage objects to save
our score more permanently. We learned more details about
objects like null auto boxing and references, and we learned some useful
shortcuts like destructuring shorthand properties
and shorthand methods. Here are some exercises to help
you practice working with objects. In this lesson we're going to learn
one of the most important features of JavaScript called the
document object model or the dom. And we're going to use the DOM to
improve our rock paper scissors project. So first we'll create a
new file for this lesson. Let's go to our code editor
and click this icon to show our files and then
click this icon to create a new file. And we'll name this file, zero nine dash dom dot html and press enter. Next, let's copy objects dot html into dom dot html. So we'll click here to open
the file and then click inside and then type control A or
command A to select the code. And then right click copy. And in here, right click and paste. Now let's hide these and we'll
prepare this file for this lesson. So let's scroll to the top and we'll change the
title to Dom and let's delete all the JavaScript
code from the previous lesson. Now let's save this file and
we'll open it in the browser by right clicking open with live server. And let's also open the
console on this page, we'll right click, click inspect
And then click the console. And now we can close the previous tabs as well as the previous code. For now and for this lesson we're going
to do an extra step in the setup inside the body we're
going to create a button. So here, let's type the code
less than button greater than, and inside the button
we'll have the text. Hello. Now let's save and we should have a button on the page. And now we're ready to learn
the document object model or the dom. In the previous lesson we
learned about objects which group multiple values together. We also
learned about built-in objects, which are objects that are
provided by JavaScript. Some examples of builtin
objects are console math, Jason and local storage. The dom is another
builtin object called the document object. So let's go to our script
element and we're going to type document. So this is a built in object
provided by JavaScript and we've actually seen this document
object before. In the first lesson, one of the first pieces of code
that we learned was document dot body dot inner capital H T M L equals the string. Hello and semicolon. So this code removes everything
on the page and replaces it with a text. Hello. If we save,
It will remove the button and just put hello.
And now that we learned objects in the previous lesson, we can
fully understand this syntax document. Here is a built-in
object and this is the dot notation. This means we're accessing a
property of the document object called body. Now body is also an object, so we can use the dot notation
again to access a property of the body object called inner html. And finally we use an equal
sign to change the inner HTML property to the string. Hello. But as you can see, there's something very special
about the inner HTML property. When we change this property,
it also changes the webpage. So this document object and the
webpage are linked together. Let's do another example. We'll go to the end here and
press enter and we'll type the document object again and we'll
use the dot notation again. And this time let's
access the property title and we'll change the title
property using an equal sign and we'll change it to the string.
Good job if we save changing the title property
will also change the title at the top of the tabs here.
So now this says good job. Again, as you can see, the document object is
linked to the webpage. So from these examples it shows
us that the document object represents or models the webpage. And that's why we call this
feature the document object model or the dom. Now that we know what the dom means, let's learn the syntax rules for the dom. So the dom is just this
built in document object and this object works the
same way as any other object. It contains properties
like body and title that we can access using the dot notation. Now the special thing about the
document object is that it is linked to the webpage. That means if we change certain
properties in this object, it will also change the webpage.
Now in addition to properties, the document object also has
methods we can use and we'll learn about them later in this lesson. Now that we understand the
syntax of the document object, let's learn about the properties
and methods we can use. First, let's comment out this
previous code using slash star, star slash and we'll create
some new lines at the top. So the first property we're going
to learn is called document dot title. So this property will give us the
title at the top of the tabs here. So if we console dot log
this property console dot log and save, this will give us the text at the top, which is Dom and that's what
gets displayed in the console. If we change the document
dot title property, it will change the text
at the top of the tab. So here if we type document dot title and make it equal to the string changed and save.
Now the title at the top of the tab will be changed. So as you can see the title
property is linked to the title at the top of the tab we can
use it to get the title and we can also use it to change the title. Next we're going to learn another
property called document dot body. So let's go into our code and let's type document dot Body. Now document dot body is
a very special property, so this will literally get this body html element and put it inside our JavaScript. So let's actually console dot
log this to see how it works, console dot log, open bracket, and then close bracket and save. And inside the console it will
tell us that document dot body is the body html element. And if I hover over this, it will tell us that it is
exactly the body on our page. If I expand this, you can see that this code is
exactly the code that we have here. And this shows us one of the most
important features of JavaScript. We can have H T M L
elements inside JavaScript. The document object or the
dom combines JavaScript and H T M L together and it gives
JavaScript control of the webpage. So now that we have an HTML
element inside our JavaScript, what can we do with it? A really important thing to know
is that when an HTML element is inside our JavaScript like this, the HTML element is converted
into a JavaScript object. So for example, if we do console dot log type of document dot body A and save it will tell us that the body
H T M L element is just an object when it's inside JavaScript. So just like any other object, this has properties
and methods we can use. So one useful property of
the body element is inner H T M L, which we saw earlier. So down here let's type document dot body dot inner capital H T M L. So the inner HTML
property controls all the HTML inside the body, that's why it's called inner html. So if we access this property, it will give us all the
H T M L inside the body. So let's console dot
log to confirm console dot log and save and inner HTML will
give us all of this HTML inside the body element. And if we change the inner HTML property, it will change the HTML
inside the body element. So let's create a new line and we'll type document dot body dot inner capital T M L, and we'll change it to the string changed. So this will replace all of
the H T M L inside the body with a text changed if we save, that's exactly what it
does and we can actually confirm this by going
into the elements tab. So this tab is for HTML and css. We can find the body element, expand it, and you can see all of the
HTML that we had before was replaced with changed. And
don't worry about this part, this part is just added
by live server after. So this shows that inner
HTML gives us control of all the HTML inside the body. We can get this H T M L
and we can also change this H T M L. Now another feature of inner
H T M L is that we can replace this H T M L with new H T M L code, not just text. So for example, instead of just text, we can replace it with
a code less than button greater than and also
less than slash button greater than.
So this is HTML code for creating a button. And inside the
button, let's put the text. Good job. And now this code will replace
all the HTML inside the body with this new html. If we save, it removes all the previous
HTML and this new HT m L creates this button. So using this inner HTML property, JavaScript can replace the
HTML inside the body to whatever we want. We have
full control of the webpage. All right, now we're going to learn a method of
the document object that we can use. As a reminder, a method is a function that
is saved inside an object. So we're going to learn a very
important method called document dot query selector. We just learned that document
dot body lets us get the body element and put it inside our JavaScript document dot query selector
lets us get any element from the page and put it inside our JavaScript.
Let's give it a try. So first we'll comment out
the previous code using slash star and star slash let's create some new lines at the top and let's type document dot query capital S, selector and brackets. So document dot query selector
lets us get any element from the page and put it inside our
JavaScript between these brackets. We're going to put a string. This string tells JavaScript
which HTML element to get from the page. So if we type button, this will get the first button
element from the page and put it inside our JavaScript. So let's console dot log
this to confirm console dot log, close bracket and save. And let's go back to our console. Now we will tell us that
document doc query selector got this button element and put
it inside our JavaScript, which you can see in the console. And if I hover over this button element, it will tell us that it is
exactly the button on the page. So that's what document
Duck query selector does. It can get any element from the page
and put it inside our JavaScript. This string tells it which element to get. If we type button it will get the
first button element from the page. If we type body, this will now get the first
body element from the page. So it will do the same
thing as document body. But for now, let's just change this back
to button as an example and save. So remember when an HTML
element is inside JavaScript, it's just a JavaScript object. So this button element
is also just an object and it has properties
and methods we can use. Every HTML element actually
has a property called inner html, which lets us control the
HTML inside the element. So for this button element, let's type at the end dot inner html and this will give us the HTML inside the button. If we save, it will give us hello. And again, if we change the inner HTML property, it will change the HTML inside the button. So let's make a copy of this code. We'll select selected
and right click copy. And down here, right click and paste. And let's change the inner
HTML property using an equal sign. And the string changed. So this will only change
the HTML inside the button, which is here to changed. If we save it can see that the text inside
the button is now changed. A little syntax shortcut I'm going
to show you is that for the dot notation, we can actually
put it on multiple lines. So we can type document dot
query selector and then put dot inner html on a separate line
to make it easier to read. And make sure to put a tab at the front
so that we know it's a continuation of the previous line. Okay, so using document doc query selector, we can get any element from the
page, put it inside our JavaScript, and then we can control the
HTML inside that element. And this allows us to only change
the parts of the page that we need. Next, what if we have two buttons on the page?
So let's go up here and we'll create another
button using less than button greater than, and we'll have the text second button and save. So now we have two buttons on the page, but document doc query selector will
only get the first button on the page. How do we get this second button? The solution is that we're going
to add an attribute to this button called the class attribute. So in the opening tag
we're going to type space class equals double quotes. So the class attribute sort of
adds a label to this button. So inside the double quotes we're
going to label this button a js dash button. And now that we labeled this button, we can select it using
document dot query selector. So at the bottom here we'll type document dot query selector again and brackets, and we'll type a string inside. And this time we're going to start
with a dot. When we start with a dot, this means that it's going to
look for a class rather than an element name. So we're going to look
for the class js dash button. And now document dot query selector
will select an element with the class js button, which
is this element here. So let's confirm this by console dot logging this code and save. And now you will see that
this code gives us the second button on the page. So using a class attribute
and then starting with a dot inquiry selector, we can get any specific element
from the page and put it in our JavaScript. By the way,
when we start with a dot, this is called a class selector, and this is also used in CSS to
style elements with a specific class. In fact, anything we use in CSS can
also be used in this string. And also a common practice
is to start the class with JS dash to make it clear
that this class is being used in JavaScript. And again, HTML elements are JavaScript objects. So this second button
is also just an object. And remember, objects are values and we can
save them inside a variable. So instead of console dot log, let's create a variable
using const constant. And we'll name the variable button, capital E element. We usually end the variable
name with Element or lm. To make it clear there's an H T
M L element inside this variable. And finally we'll type an
equal sign to save this element and we can remove this extra bracket. And now if we console
dot log this variable console dot log button element and save it will tell us that the second
button was saved inside this variable. So using the dom, we can get H T M L elements from the page, put it inside our JavaScript
and then save it in a variable. So the DOM combines
JavaScript and HTML together, it gives JavaScript full
control of the webpage. All right, now that we
learned how to use the dom, let's do some practical examples. So I've actually prepared some projects
that we can do for this lesson to open these projects, we'll go to our browser and
create a new tab at the top. And here we'll type super simple.dev/projects/dom and press enter. On this page, we'll be working on three projects,
the YouTube subscribe button, the Rock paper Scissors project we've
been working on for the last few lessons and this Amazon shipping calculator. And you'll notice that these
projects modify the webpage. So we're going to be using the
DOM to create these projects. And in the next lesson we're
going to use CSS to style these projects and make them look nice. And you can preview that by clicking here. So using css, we can make the subscribe button look
like the actual subscribe button on YouTube. And if we click this link to see
the rock paper scissors game, you'll see that will make it look
really nice with these icons. But for this lesson we're only going
to focus on the functionality and not the styling. So let's
go back to the projects, we'll click back and click back again until we're at projects slash
dom and we're going to create the functionality for these projects
first. So before we start, let's create a new file
just for these projects. We'll go to our code
editor and click this icon and then click this icon
to create a new file. Let's name this file, zero nine dash dom dash projects dot html and press enter. Now let's copy dom dot
html into this file. So we'll open it and then
click in here and type ctrl a or command A to select the code. And then right click copy. And in here, right click and paste. Now let's close our files
and we'll prepare this file. So let's scroll up and we'll
change the title to Dom projects and let's remove our html, but keep the script element and we'll also remove the
Java script from before. Finally, let's save this file and we'll
open it in the browser by right clicking open with live server. And let's also open the console
just in case, right click, click inspect, and then click the console. All right, we're ready to
start with the projects. Let's go back to super
simple.dev and we'll start by creating the
YouTube subscribe button. Let's actually press refresh
to get it back to normal. And when we click this button,
it will change to subscribe. First, let's create the HTML
elements for this project. We'll go to the body, we'll create some new
lines and let's create the paragraph first, what's type less than P, greater than. And inside the paragraph
we'll have the text, YouTube subscribe button. And now let's create the
button. So on the next line we'll type less than button greater than. And inside the button subscribe. Now let's save and go back to our tab. And now we have the HTML
elements that we need. So now let's make this
interactive with JavaScript. And remember we have a process for this. First we'll figure out
what steps we need to do. This is called an algorithm, and then we'll convert
these steps into code. So the steps that we need here
are when we click this button. If the text is subscribe,
we'll change it to subscribe, otherwise we'll change it back. Now let's convert these steps into code. Let's go to our button element
and we're going to add an on click attribute. We'll type space on click equals double quotes. And inside here we'll
write some Java script. So first we need to get the
text inside the button and we learned how to do this earlier. We can use document dot query
selector to put this button into our JavaScript and
then use inner html to get this HTML inside the button.
So in our code, let's type document dot query selector brackets and a string. And as we learned, we're going to use a class attribute
to select this specific button. So in the opening tag, let's add a class attribute and let's make the class js dash subscribe dash button. And then inside document
dot query selector, we're going to type a.to select a
class and we're going to select the class js dash subscribe dash button. And now let's console dot log this
to confirm that we got this button. So at the front console dot log and save. And now let's click our button and it will show us that document
dot query selector got the button on the page. So now let's save this button in
a variable so we can use it later. Instead of console dot log, let's type const to create
a variable and we'll name it button element and make it equal to this result. So now that we have the
button inside our JavaScript, we're going to check if the text
inside the button is subscribe. To check the text, we
can use an if statement. So at the bottom here
we're going to type if brackets and curly brackets. And inside this condition, let's get the text inside the button. So we'll type button element dot inner capital H, T M L, and we're going to check
if it's equal to subscribe. So we'll type triple equal the string, subscribe. Now if it is equal to
subscribe inside the curly brackets, we're going to change the text
in the button to subscribe. So let's type the code button element dot inner capital H T M L, and we'll change it with
an equal sign to the string sub described. And the last step is otherwise
we'll change it back. So we'll add an L to this if statement L and curly brackets.
And inside we're going to change the text back to subscribe. So let's type button element dot inner capital H, T M L and make it equal to the string. Subscribe and save. Now before you try out this project, make sure that the text inside
the button has no spaces or new lines around it
and it looks like this. And I'll show you why in a second. Let's go to our project and try it out. So when we click this button, it
will change to the text, subscribe. If we click it again, it will
go back to the original text. So that's how we create the subscribe
button project using the dom. So now let's go back into our
code and I'll show you why. If we add new lines and some
spaces around this text, there's actually going
to be some problems. So if we save this code and
then go back to our project and click the button again, you'll notice that it no longer
changes the text. And that's because now we have a bunch of
spaces around this text and these spaces will show
up in inner html and now inner HTML will not
equal exactly subscribe. So how do we solve this problem when
there are spaces around our text to solve this, we're going to use a different
property of an HTML element. So instead of the inner HTML property, we're going to use the
property inner capital T text. So inner text will give us
the text inside this element, but without all these spaces around it. So now this will equal exactly subscribe. If we save and go back to
our project and click it again, it'll start working again. So that's the inner text
property of an HTML element. It gets us the text
without the extra spaces. So before we move on
to the second project, I'm going to show you how to make
our code cleaner. Right now we're mixing HTML and Java JavaScript together. So to make a code cleaner
and easier to read, we're going to separate
the JavaScript code. And to do that we're going to put
this code in a function instead. So inside the script element, let's create a function using function and we'll name the function, subscribe brackets and curly brackets. And inside these curly brackets,
we're going to move all of this code. So let's select this code and we'll right click cut and in here, right click and paste. And if we need to fix the formatting, we can select these lines
and press tab a few times. And now that we have this function, we're going to go to the on click
attribute and we're going to call this function. So we'll type
the function, name, subscribe and brackets. So this will run all the
code inside the function so it will do the same thing as before, except now our code is cleaner
because we grouped all the JavaScript code at the bottom and we're
no longer mixing as much html and JavaScript together. Now let's move on to the second project. We'll go back to super simple
dev and we're going to work on the rock paper scissors
project. So let's click this link and it will show us the next
version of this project. So you'll notice a few changes here. The first change is that we're going
to show the score on the page instead of in a pop-up. And the second change is that when we
click one of these buttons to play the game, it will show us the result and
the moves that we picked on the page rather than in a pop-up. Let's create a new file for this rock
paper scissors game for this lesson. So let's go to our code editor
and we'll click this icon and click this icon to create a new file. And we'll name this zero nine dash rock dash paper dash scissors dot html and press enter. And let's copy the previous rock
paper scissors, which is here. We'll click here and type
control A or command a right click copy. And here, right click and paste. And let's hide our files and let's save this file
and we can also close zero eight rock paper scissors. And finally we'll open this in
the browser by right clicking open with live server. Now we're ready to begin
the second project. So let's go back to the project at Super
Simple Dev and we're going to start by putting the score on
the page. So to do this, we're going to need
somewhere to put the score. So let's create an HTML element for this. We'll scroll up to our html, which is here. And after
the scissors button, let's add a paragraph element
where we're going to put our score, so less than P, greater then. And let's add a class attribute. So we can select this element in our
Java script. So in the opening tag, we'll type space class equals double quotes JS dash score. Now that we have a class, let's get
this element in our Java script. So let's just do it down here. So we'll type document dot query, selector brackets and a string. And then we're going to type a dot
and we're going to select the class js dash score. So JS dash score. So this will get the paragraph
element from above and put it inside our JavaScript. And now let's put the
score inside the element. To do that we can use inner html dot inner capital H T M L, and we'll make it equal to the score. If we scroll down, We actually create the score
down here so we can actually just copy this string. So we'll select it, right click copy, and let's scroll up to here. And I'll actually put this on a
separate line to make it easier to read. And now here we're going to
type a string using back ticks and inside the string we're
going to right click and paste. So this will put the score that
we used to have in our popup inside this element. So
inside this paragraph, if we save and then go back to our tab, you can see that now it
displays the score on the page. Now before we move on, I want to
point something out with html. So remember that our reset score
button was beside our other buttons and now it's below them. So what determines if an element
appears beside something or below something?
So the paragraph element here is known as a block element. A block element will always
take up an entire line by itself. So this line
already has some buttons, so the paragraph will take up the
entire line under the buttons. That's why this text appears under
the buttons and not beside them. And also because a block element
like this paragraph takes up this entire line, the next
button has to appear below it. So that's why we get this layout here. So this is just a short review of layouts. If you want to learn this in more detail, you can check out my HTML and
CSS full course in the video description. Alright, the next feature we're going
to do is if we play the game. We also want to update
the score right now. If we play it doesn't
update it on the page, let's fix this in our JavaScript.
So let's go down to where we update the score. So we'll scroll down, which is right here. We update the score and
save it in local storage. And after we do this, we're also going to update
the score on the page. So we can actually use the
same code that we used above, which is here. So let's
make a copy of this code, right click copy and down here, right and paste. And I'll add a tab at the front. If we save and then try out our game, we'll click a move press. Okay. And now you'll notice the
score also updates on the page. So let's go back into our
code and do some cleanup. So you notice that this code is
the same as the code we had above. And this is a great situation
to use a function to reuse this code. So at the bottom here, let's create a function using function and we'll call it update score element brackets and curly brackets. And we'll move this code into
the function. So we'll select it, write, click, copy, and in here, right click and paste. And now instead of writing
this code multiple times, we're just going to call the function update score element and brackets. This will run all the code inside the
function so it does the same thing as before, except we can reuse the code. So let's scroll back up and instead of typing
out all this code again, we can just use our function update score element and brackets. Now let's save. It will display the score
on the page at the start. And when we click a move and click okay, it will update the score on the page. So the last feature we're going to do
in relation to the score is when we click the reset score button. We also want to update the score
on the page right now if we click it, it doesn't actually update it.
So let's go into our code and let's go to the reset
button, which is here. And after we reset the score, we're going to call that function again, update score element and brackets if we save. And now let's play the
game and press, okay, so we have a score and
if we click reset score, it will reset everything back to zero. So now we finish the score. Let's go back to super
simple dev and play the game. And now we're going
to work on this section. We're going to show the result and
the moves that we picked on the page. So first, let's create some paragraphs
for these as well. We'll go to our HTML and above the score. Let's add a less than greater than this is going to be the result. So let's give it a class of JS dash result and let's create another
paragraph, less than P, greater than, and we'll give this one a class equals js dash moves.
Now let's use the dom to put the result and the
moves in these paragraphs. Feel free to pause a video if you
want to try it yourself first. So let's scroll down to
where we display the result, which is here. So we display it in a popup
and instead of a popup, we're going to get the paragraph and
put this result inside the paragraph. So we'll type document dot query, selector brackets and a string, and we'll type a dot
and select the class js dash result and then dot inner capital H, T M L. And we'll change this to result. And now let's also display the moves. So we'll types of new lines and document dot query selector, again, brackets and a string dot j s dash moves, dot inner capital H T M L and make it equal to this text right here. So let's type a template string
because we're going to insert our moves inside the string and we'll type you and we'll insert the player move dollar, curly brackets player move and then a dash. And
then the computers move. So dollar curly brackets again and computer move computer at the end. So now that we're
displaying everything on the page, we don't need this popup at the
end so we can actually delete this popup. All right, now let's save and go back to our tab and play our game. Now it will show the result and the
moves that we picked on the page instead of in a pop-up. Let's play
it again to make sure it works. And finally, when we click reset score, it will reset everything
back to zero and that's it. Now we're displaying everything
on the webpage using the dom. Now let's move on to the
third and final project. We'll go back to super simple.dev and we'll click back to go
back to our projects and we're going to create
this third project here, which is an Amazon shipping calculator. The way this works is that inside
this text box we're going to type the cost of an order in dollars. If the order is under $40, for example, $25, and we click calculate, it will add $10 of shipping and
display the total down here. But if we type a cost that is over $40, like 50 and press calculate, it will be free shipping. So it will
display the same total down here. So let's learn how to
create this using the dom. Let's go back to our zero
nine dom projects file, and we'll start by
creating the HTML elements. So under our subscribe button, let's create this
paragraph using less than P, greater than Amazon shipping calculator. And next, let's create this text box. So the HTML element for a
text box is called input. So a type less than input, greater than. So the input element is special
because it doesn't require a closing tag. This is called a void element. And lastly, let's create the button. So here we'll create less than button greater than calculate. Now let's save and open
the tab for this file, which is right here.
And we have the text, the text box, and the button that we need. Now one other thing we're going to
add is that in the final project, if we don't have anything in the text box, we're going to have this gray text. So this is called a placeholder. To add a placeholder to a text box, we're going to use the
placeholder attribute. So inside our input element
we're going to type space, place holder equals double quotes, and inside the quotes we'll put the
text we want as the placeholder, which is cost of order and save. Now if we go
back to our project, we now have a placeholder in our
text box that disappears when we start typing. So that's
all the html that we need. Now let's work on the
JavaScript and again, we'll figure out what steps we need to do. So when we click this button, we're going to get the text
inside the text box. If the amount is below $40, we'll add $10 of shipping and
then we'll display the total on the page. Let's convert
these steps into code. So we'll go to our button and add and on click attribute. And inside here, let's also create a function to
separate our JavaScript code like we did before. So in the script we're
going to create a function function and let's name it calculate total brackets and curly brackets. And inside on click we're just
going to call the function. So calculate total brackets. The next step is to get the
text inside the text box. So first, let's get this input element and
put it inside our JavaScript. To do that we can use document
dot query selector again. So we'll add a class to this
input. So we can select it. Class equals js dash cost dash input. And then inside our
JavaScript will use document dot query selector brackets and a string and a dot. And this class js dash cost dash input. So this code will get the input
element and put it inside our, let's confirm by console dot logging the result and save. And now when we
click the calculate button, it will give us the input
element from the page. Let's save this input element in
a variable so we can use it later. Instead of console dot log, we'll use const and
we'll name the variable input
Element and make it equal to this element and
remove the extra bracket. And next, we need to get the
text inside the input element. So so far in this lesson we've
been using the property inner H T M L to do this. However, for input elements, you notice that there
is no H T M L inside. So for input elements we're going
to use a different property called value. So at the bottom here
we're going to type input element dot value. This is how we get the
text inside a text box. So let's console dot log this
to confirm that it works. So we'll console dot log and save. And now let's type something
in the text box like 50 and click calculate and input value will give us the text inside the text box. Let's save this text in a
variable so we can use it later. Cons and we'll name the variable cost and make it equal to the
text. In the text box. The next step is to check
if this cost is under $40. If it is, we'll add $10. So down here, let's type if brackets and curly brackets. And inside the condition
we'll check if cost is less than 40. And if it is inside the curly brackets, we'll do do cost equals itself plus $10 of shipping. And remember when we change a variable, we have to switch from cost to let. And finally we're going to display
the total cost on the page. So let's create a paragraph
where we can display the cost. So down here we'll create a paragraph less than P, greater than, let's give it a class JS dash total dash cost. And now inside our
JavaScript, let's use document query selector brackets and string and we'll type a dot and the class js dash total dash cost. And we're going to put
the cost inside the paragraph, we can use dot inner capital H T M L and make it equal.
And let's use a template string. So back ticks and we'll have a dollar. And we're going to insert
the cost using dollar and curly brackets cost. Now let's save and try out this project. So first we'll type a
cost that is over $40, like 50. If we press calculate, we're not going to add $10 of shipping
and we'll display the same total on the page. Now let's
try a number under $40, like 25 and press calculate. And this number doesn't look right, it's saying that we have to pay $2,510. So what's going on here? Let's go into our code and let's
use console dot log to figure out what's wrong. So first, let's console dot log the cost to
make sure that we're getting the right number from the text box. So down here, console dot, log, the cost and save. And then let's type 25
again and press calculate and it will give us 25. So we're
getting the correct text from the text box. Now let's console dot log down
here to see if the math is working so we'll type console, dot log, cost and save. And let's try 25 again and calculate. And down here when we add 10, this is where things go
wrong and a result in 2,510. So it's not doing math properly here. So let's check if cost is a number
to make sure that it's doing math. So here we'll type console dot log the type of cost and save. Let's type 25 again and calculate and aha, it's telling us that the cost is a string. So this is actually not
a number, it is a string, that's why it's not doing math. So
remember from the strings lesson, when we add a string with a number, JavaScript will automatically
convert this number into a string and combine them together.
That's why just combines 25 and 10 here. This is called type coercion. So whenever we get a value
from the dom like this, the value will be a string.
So in order to do math, we have to manually convert
the string into a number To do that, JavaScript has a built-in
function called number. So before this code we're
going to type capital N number open bracket and close bracket. So the number function takes whatever's
between the brackets and manually converts it into a
number. So now if we save and we type 25 and press calculate the cost is now a number and
it will do the math properly and give us 35. So remember whenever we
get a value from the dom, the value will be a string. So
if we want to do math with it, we have to manually convert
this value into a number first. So now let's remove the console
dot logs that we use to figure out this problem and save. Okay, we're going to add one
more feature to this project. Let's go back to super simple.dev and inside the text box we're
going to type 25 and press enter. So pressing enter will also
calculate the total and display it on the page. So let's learn
how to create this feature. So if we go back to our code so far
in this course we've been using the attribute on click, which runs some JavaScript
when we click an element, HTML has another attribute
we can use called On Key Down, which runs JavaScript when we
press a key down on our keyboard. So inside the input this time, let's add the attribute on key down equals double quotes. And then inside here, console dot log and the string typing. So now every time we type in
the input it will console dot log this message.
Let's save it and give it a try. We'll go to the tab for this
file and then inside the text box we'll type some numbers and
you can see that every time we type something it will run
this code and display this message. So that's how we do something
when we type in an element. So clicks and key downs
are known as events on click and on key
down are known as event listeners. They check for events and runs
Java script when those events happen. Now in addition
to clicks and key downs, there are many other events we
can listen for in Java script. Okay, so now let's figure out what
steps we need to do for this project. When we press a key down in the text box, we're going to check if the
key is the enter key. If it is, we'll do the same thing
as the calculate button. So how do we know what
key we pressed inside on key down we're actually
given a special object called event. So instead of this string, let's remove it and we'll
console dot log event. So this is an object that's provided
to us by JavaScript and it contains information about the event. Every event listener including
on click also gets an event object. If we save and type in this text box, it will show us that event
is this object and inside the object it has a bunch of
information including the key that we typed. So here let's use the
event object and we'll get dot key and save. So now inside this text box, if we type something it will tell
us the key that we pressed and if we press enter, it will
tell us that the key is enter. So the next step is to
check if the key is enter, and we can do that using an if statement.
So in our code we'll type a new line if brackets and curly brackets. And inside the condition
we'll check if event dot key is equal to the string enter if it is equal to enter, we're going to do the same
thing as the calculate button. So we can actually just use
this function again inside the curly brackets, we'll type calculate total and brackets and save. So now let's go back to
our project and type 25 enter and it will calculate
the total and display it on the page. So that's how we create this
keyboard feature of this project. Lastly, let's clean up our code and move
this into a function like the rest of our code. So
inside the script element, let's create a new function using function and we'll name it, handle cost, key down brackets and curly brackets. And let's move this code into
the function. We'll select it right click cut, and in here right click and paste. If we need to fix the formatting, we
can select these lines and press tab. And let's remove this console dot log. And now up here we're
going to call this function handle cost key down and brackets. Now the last thing we have to
do is that event does not exist inside this function. So we have to put the event
object into the function and remember to put a value
into a function we can use a parameter. So between these brackets we
can create a parameter called event. And now to save
something inside this parameter, we're going to go up to
these brackets and type event. This will take the event object and
put it inside the function where we can use it just like a variable. So now if we save and try out the project 25 enter.
So this still works. And now we finished all three
projects in this lesson. So in the rest of this lesson we're
going to learn some more details about JavaScript. In the last project we learned
how to manually convert a string into a number using the number function. We can also convert the other
way from a number to a string. So let's go to the top
of the script element and we can type capital S string and brackets. So the built-in string function
will convert a value into a string between the brackets. We
can put a number like 25, and this will convert the
number into the string. 25. The next detail we're going to learn
is a special behavior of strings. So below this line we can type console dot log the string 25 minus five. So if a string only contains
a number and we subtract, multiply or divide, JavaScript will automatically
convert the string into a number. So this gets converted into
the number 25 minus five, and if we save it will do math and give us 20. So this is another example
of type coercion or automatic type conversion. However, it's not recommended to do math with
strings like this because adding works differently. For
example, on a new line, let's type console dot log the string 25 plus five and save. This will convert the number into
a string and combine them together into 2 55. So because adding strings
works differently, the best practice is always
do math using numbers, don't do math using
strings. If we need to, we can manually convert the
string into a number using the number function like we did here. The last thing we're going to learn in
this lesson is another built in object called the window object. So in this lesson we learned
about the document object. The document object represents the webpage, the window object represents the browser. So let's go into our script
element and try it out. Below this we'll type window. So this is the window object
and it represents the browser because it represents the browser. Everything inside the browser
is inside the window object. So let's think what's inside the browser. Well the webpage is inside the browser, so the document object is
inside the window object. If we type window dot document, this will give us the same document
object that we've been using in this lesson. So what else is part of the
browser while the console is also part of the browser. So here if we type window dot console, this will give us the same console
object we've been using in this course. So we can actually do console dot log and the string window and save.
And this will do the same thing as console dot log. What else
is part of the browser? Well pop-ups are also part of the browser. So if we type window dot alert, this will give us the same alert function
that we've been using in this course to create pop-ups. However, you might have noticed that we
never type window dot document or window console dot log, and that's because the
window object has a shortcut. We don't have to type window.at the front, we can just type document or
console and JavaScript will automatically add
window.at the front for us. So window is a built-in object
that represents the browser. We don't have to type out window dot
ourselves because JavaScript adds it for us automatically, but it's still nice to know how
this works behind the scenes. And that's the end of this lesson. In this lesson we learned about
the document object model or the dom, which allows JavaScript
to fully control the webpage. We learned how to use document dot
query selector to get elements from the webpage and put them
inside our JavaScript. We learned how to use inner
HTML to modify the HTML inside an element. We worked on three projects using the dom. We learned how to make elements
interactive with the keyboard using on key down. And we learned some more details
about strings as well as the window object, which
represents the browser. Here are some exercises you can do
on your own to practice using the dom. In this lesson we're going to
add CSS to all of our projects and we're going to finish our
rock paper Scissors project. CSS is a different language that
changes the appearance of our website. It's one of the three languages
that we use to create websites. So first let's look at the
projects we're going to work on. In this lesson we'll go to
our browser and create a new tab at the top. And here we're going to type super simple.dev/projects/dom-with-css and press enter. So these are the same three projects
we created in the previous lesson, except this time we're going to
add CSS to make these projects look nice. Let's start by creating a copy
of the project's HTML file from the previous lesson. We'll go to our code editor
and click this icon to show our files. And then here we're going to
select zero nine dash dom dash projects. We're going to right click copy, and down here, right click and paste. And let's rename this
file by right clicking rename. At the end we're going
to remove copy and at the beginning we're going
to change it to 10 and press enter. Now let's hide our files
and we're going to open 10 dom projects in the
browser by right clicking open with live server. Now we can close our previous tabs as well as the previous
code from lesson nine, which is this file and these two. And now we're ready to
add CSS to our projects. We'll start with the
YouTube subscribe button. Let's go to the tab for our project and we're going to
style this button first. So we reviewed CSS in lesson four, and one of the ways we can write
CSS code is using the style element. So inside the head section
we're going to create an element using less than style, greater than. So the style element lets
us write CSS code inside. So inside here we're going to write button open curly bracket, close curly bracket. So the code in front of the
brackets is called the CSS selector. This tells the computer which elements
we want to style or change the appearance. So button will style all
button elements on the page, but in this situation we only
want to style the subscribe button because the calculate button
will be styled differently. So to style a specific element, we can use the class attribute.
So if we look at our button currently, it already has a class
of JS subscribe button, but this class is being
used by our JavaScript. A good practice is to add a
different class that would be used by css. So an element can
have multiple classes, we just separate them with a space. So inside this class attribute, we're going to type space
and add another class, subscribe dash button. Now this element has two classes
and we're going to use this second class in our css. So to
style a specific class, we're going to remove button
and we're going to type a dot. So starting with a dot means we're
going to style a class rather than an element name. So we'll style the class subscribe dash button, which is this button right here. And now inside these curly brackets, we're going to tell the computer how
to style this button. For example, border colon, none. And semicolon, if we save this will remove the border from
the button so it no longer has a border like this button. So that's how we style a
specific element. With css, we add a class to the element. And then inside CSS we
start with a dot and the class. And between the curly brackets, the code on the left is called the
property. This tells a computer. What we want to change on the
right is called the value. This tells a computer what we
want to change the property to. We separate the property and
value with a colon and we end the whole thing with a semicolon. So this is also called
a property value pair. As a reminder, this is
just a review of css. If you want to learn CSS in more detail, you can check out my HTML and
CSS full course in the video description.
So we just added one style to this button. We're going to add more styles so
that it looks like our final design. To make this easier, I'm going to rearrange my windows
and I'm going to put the final design at the bottom and then
our project at the top. This will make it easier to
compare the two designs next to make it look like the final design. We're going to style
our element one by one. Let's go back to our code and press enter. And next, let's change the
background color to black. Do you do that? We'll, type background, dash color, colon, black, and semicolon and save. Now our button has a black background. Let's keep going one by one. We'll change the text color
to white next. So in our code, we'll type color colon, white, and semicolon and save. Now if you're wondering how
I know all these properties, you can usually find them by searching
in Google. Just make sure you search for what you are trying to do. Let's keep going one by one. The next thing will change is
we're going to add spacing on the inside of the button. In CSS space on the inside
of an element is called padding. So we'll create a new line
and we'll use the property padding dash top colon 10 PX and save. So this will add space on the
inside of the element called padding at the top of 10 px. So the PX here means pixels. A pixel is a unit of
measurement in computers. Your screen is made up of
many small little squares. Each of these squares is called a pixel. So a pixel is the smallest thing
that you can have on your screen. Screen sizes are measured in pixels, images and video sizes are
also measured in pixels. And don't worry, the more
you work with pixels, the more you get used to how
big a pixel is. So in this example, 10 pixels is equal to this
amount of space and it looks pretty close to the final
design. So let's keep going. We'll add space on the inside of
the element at the bottom this time. So we'll create a new
line and type padding dash bottom colon 10 PX again and save. And that adds space at the bottom
of the element of 10 pixels. Next, let's increase the space
on the left and the right. We'll go into code and add padding. Dash left colon, 10 pixels and padding. Dash right colon 10 pixels. Let's save. And it added some extra
space on the left and right, but I think our final design has a
little more space on the left and right. So let's go back and increase
our padding. So instead of 10, let's try 15 on both sides. So we'll save.
And now the spacing looks close enough to the final design. So in css, it's normal to do some trial and
error to get the styling right. Let's keep styling this one by one. Next we'll make the text thicker or bold. So let's go into our code and
to change the thickness of the text, we'll use the property font dash weight colon bold. Let's save. And that will make our text
bold. So we're almost there. Now let's make the corners
rounded like in the final design. We'll go back to our css. And the property for making the
corners round is called border radius. And we'll make it colon five pixels. Let's save. And you can see that it
made our corners round. So the pixels here tells the computer
how round we want the corners to be. The higher the pixels, the more round it will get.
So if we change this to 10 pixels and save, it will make the corners even more round. So let's change this to something
really big to make it completely round. We'll change this to 50 pixels and save. And now our button is completely round. The last style we're going to
add is in the final design. If we put our mouses over the
button, it turns into this hand icon. So we call this a pointer and we're
going to do the same thing in our project. So let's go to our code and
to create that pointer icon, we're going to use the property cursor, colon pointer, and let's save and put our mouse over the button and
you'll notice it turns into this hand pointer icon. And that's it. Now our subscribe button looks
like the final design. Next, let's click the subscribe button. You'll notice that it
only changes the text, but if we click the final design, it also changes the background
color and the text color. So we're going to learn how to change
the CSS when we click a button. Let's go back to our code. And this time we're going to
scroll down to our JavaScript, which is here. So we learned in the previous lesson
we can get HTML elements from the page and put them inside our JavaScript. And we also learned that these
HTML elements are just JavaScript objects and they can have
properties like inner text and inner html. Every element has another property
we can use called class list. Class list gives us control
of the class attribute. So one solution we can do
is when we click the button, we can add a class, and then this class will
have different styles. So let's see how we do that in our code. We'll scroll down to
the subscribe function. And when we click the button
and make the button subscribed, we're also going to add a class.
So let's create a new line and we'll type button element dot class, capital L list. So class list itself is an object, which means it has properties
and methods we can use. One method is called dot add, which adds a class to an
element. So after this, let's type dot, add and brackets. And now inside these brackets
we're going to put a string. So this string is a class that we want
to add. When we click this button, let's add a class called is subscribed and save. So now every time we click this button, it will add a class to the
button called is subscribed. Let's give it a try first. We'll right click on the
page and then click inspect and we'll go to the elements tab and
I'll rearrange my windows so you can see it. And then inside the html, pay attention to the class of the button. Now when we click the button, it's going to add an extra
class called is subscribed. So that's what this line of code does. And now that this button
has the is subscribed class, we can style it in our css. So let's go back to our code
and we'll scroll up to our css. And here we'll type.to style a class and will style. The
class is dash subscribed, is dash subscribed and curly brackets. And now inside
these curly brackets, let's change the background color
to gray and the text color to black background dash color colon gray, and then color colon black. And make sure to type these styles
below the subscribe button styles so that these styles will
override the styles above. Now if we save and then click our button, it will add the is subscribe class. And now this button will get our
new styles that we added here. So that's one way to change
the CSS when we click a button. All right, now I'm going to
move this back to the top. And notice that our background color
is different from the final design. The final design uses a much lighter gray. So how do we get this
exact color? To do that, we're going to open
the elements tab again. So on this page we're
going to right click, click inspect, and then click the elements tab
and I'll rearrange my windows so we can see it. So in this section, in the style section, we can see the CSS that the element has. So first let's actually find
this button which is right here and we'll click it And here it will show us
the CSS that this button has and it will show us the background
color that we should use. So let's make a copy of this
color and put it into our code. Right click copy and here we'll remove it. And
right click and paste. Now let's save And go back to our project and try it out. And now we get the exact same
color as the final design. So by the way, this color
is known as an RGB value. RGB means red, green, and blue, and computers can create any
color using a combination of red, green, and blue. So the first number here is how
much red we want in our color. The second number is
how much green we want. And the third number is
how much blue we want. Each number goes from zero to 2 55 0 means less color and darker 2 55 means more color and lighter. So this color here uses two
40 for all of the colors, so it's close to 2 55 and
will give us a very light gray color that you see here. Next, if we go back to the final design
and we click our button again, it will change back to the original style. So we're going to create this
feature in our project as well. So one way to do this is when
we click the button again, we can remove this class. So
let's scroll down to the bottom to the subscribe function. And when we click the button and
we change it back to subscribe, we can remove this class. To do that class list has
another method we can use called remove. So let's create a new line and we'll type button element dot class, capital L, list dot, remove and brackets. So this does the opposite of.ad. It will remove a class from this element. So inside the brackets we'll
type a string and the class we want to remove, which is sub described and save. Now let's try out our project.
We'll click the button, it will get the class is subscribed
and get the extra styles. And now when we click the button
again it will remove the class and it will remove the extra styles. So notice here that when we add a class, we just type the class name. We don't type a dot and the
class name like we did for query selector, typing a dot only makes
sense in query selector. Next we're going to style
the text on the page. Let's scroll up to our css. And one thing we can do is to
style all the paragraph elements on the page using this code P and curly brackets. However, we're
going to use a better solution. Instead of styling all the paragraphs, we're just going to
style the body element. When we change the text
in the body element, it will change the text
in the entire page. So inside these curly brackets,
let's change the text here. So we're going to use a
different style of text. This is called a font. To change the font, we're going to use this property font dash family colon, and we'll change it to aerial, which is what I used in the final design.
So let's save and this will style all the
text inside the body and change the font to aerial. And a good practice is to write
any styles for the body at the top. So if we need to, we
can override it later. So let's move these to the top. We'll right click cut and then up here create some new lines and
right click and paste. And we're going to add one
more style Before moving on, let's add some space between the
subscribe button and the second project. So earlier we learned that space
on the inside of an element is called padding space. On the outside of an
element is called margin. So inside our subscribe
button at the bottom, let's add a property called margin dash bottom colon 30 pixels and save. So this will add space on the
outside of the element at the bottom of 30 pixels. Now let's move on and style the
Amazon shipping calculator with css. Again, we'll add a class to these elements
and then style them in our css. Let's scroll down to the text
box, which is the input element. And we're going to add
another class by typing space. And let's use the class cost dash input. And now we're going to style
this in css. So let's scroll up. And here we'll style
the class using dot cost dash input and curly brackets. And inside we'll style this one by one. Let's look at our final design
and see what styles we need. So first, let's change the text size because
our text is a little smaller than the text here. So the change the text size, we're going to use font dash size colon, and let's try 15 pixels and save. And now our text looks close
enough to the final design. Next, let's add some
space inside the text box. So remember, space inside an
element is called padding. So we're going to type padding dash top of 10 pixels, padding, dash bottom, also 10 pixels. And let's add padding to the left 10 pixels and padding dash right of 10 pixels. So this will add space on the
inside of our text box in every direction if we save. Now it looks just like the final design. Now I'm going to show you a shortcut for
padding that will save us some typing. So if we create a new line, we can actually use a
property called padding and colon and then type 10 pixels. This padding property lets us add
padding on multiple sides at once. If we type one value here, like 10 pixels, it will add 10 pixels to every side. So this line does the same
thing as these four lines above. So let's actually comment
this out using slash star and star slash and save. And you can see that this one
line of CSS did the same thing as the other four lines of css. So this shortcut can save
us some typing. Next, let's move on and style the
calculate button. Again, we'll add a class to this
button so we can style it. So in this button, let's add a class attribute. Class equals calculate dash button. Now let's style this in
our C S s by scrolling up. And here we'll type dot calculate dash button and curly brackets. And inside these curly brackets, we're
going to style this button one by one. So let's start with the background color. So a type background, dash color, colon, green, and semicolon and save. Next, let's change the
text color to white. So we'll type color colon white and save again. Okay, let's keep going and we'll remove
the border around this button. So we'll type border colon, none save. Next, let's make our text a little
bigger like in the final design. So we'll type font dash size and make it 15 pixels and save. Okay, so now let's add the space
on the inside of the button. So we're going to use this shortcut again, we'll type the padding property colon, and this time we're going to
give it two values separated by spaces, 10 pixels and maybe 50 pixels. So it's easier to see what this does. So when we give two values to padding, the first value is the vertical
padding. So the top and bottom. The second value is the
horizontal padding or left and right if we save. So you can see that the left
and right has a lot of padding, which is 50 pixels. So now let's make this
match our final design. So instead of 50 pixels, let's bring it down to 15 pixels and save. Okay, so that looks pretty close. Let's also increase the padding on
the top and bottom so that the text box and the button line up with each
other like in the final project. So let's change the
vertical padding to maybe 12 pixels and save. The last thing we'll style for this
project is when we put our mouse over the button, it turns into the
pointer icon. So to create this, we're going to use the property cursor, colon pointer, and save and give it a try. And that's it. We just finished
styling the Amazon shipping calculator. So now let's give this a try. We'll type 25 in the text
box and press calculate. And at the bottom it will
add $10 of shipping and show $35. Finally, we're going to style the
last project in this lesson, which is the rock paper scissors project. And this will finish the project. Let's go back to super simple.dev
and we'll scroll down on this page and then click this
link to show the final design for rock paper scissors. So I'll rearrange my
windows so we can see this And we're going to change the buttons
to these nice big icons for each of the moves. And when we click a move, it will show the result in
bold and show an icon of the move that we picked and the
move that the computer picked. So we're going to make this
project look really nice. Now let's get started. I'm going to rearrange my windows
back so we have it at the bottom. And let's create a copy of the
Rock paper Scissors project. For this lesson, we'll go to our code editor
and click here to show our files. And we're going to make a copy
of zero nine dash rock paper scissors. So let's click this file
and then right click copy. And down here, right click and paste. And we'll rename this file
by right clicking rename. And at the end we'll remove
copy and at the beginning we'll change it from nine to 10 and press enter. Now let's click here to hide
the files and we can close the zero nine file. And let's open the 10 rock paper
scissors file in the browser. So we'll right click and
then open with live server. And I'll move this tab to
the top here so we can see it side by side. So let's start by styling the body. We want to make the background
color of the entire page, this dark gray color. We'll go into our code and let's
create a style element so we can write some CSS inside the head. Let's type less than style greater than. And then inside here we're
going to style the body. So we'll type body and curly brackets. Now inside here we're going to
change the background color. So background dash color colon, and we're going to get the color
that we see here by right clicking. Click inspect and then go to the elements tab and I'll rearrange it so we can see it. And then here we'll find the
body element and click it. And in this style section we can
find the background color that we need. So let's select this. And right click copy. And in here, right click and paste and a semicolon at the end. Let's save and I'll move
this back to the corner. And now our project has the same
background color as the final design. Next, let's make the tex color white. So in our css we'll use the color property and colon, white and semicolon and save. And that will make our text white. Next, let's change the style
or the font of this text. We'll type font, dash family, colon, aerial, which is what the final
design uses and save. All right, now let's style these elements one
by one to match the final design. We'll start with this
paragraph at the top. So inside the paragraph
element, let's add a class. So we can style it in css, we'll add class equals, let's call this the title.
And then in our css, we can style this class by
starting with a dot and then title and curly brackets. So let's make our title really bake, like the final design will change the font dash size, colon 30 pixels and save. So that looks close enough.
Next, let's make the text bold. In our css, we'll use font dash weight colon bold and save. Now let's move on to styling the buttons. So first we're going to need these
images in our project and I'll show you how to get them. We'll put our mouse over the
rock image and we'll right click and we'll click save image. And now we're going to find the
folder that contains all of our code. So for me, it's on the desktop and
it's this folder right here. So I'll double click this folder
and then leave the file name as the default rock emoji and click save. And now in our code
editor, if we click here, we should be able to see the rock image. Let's do the same with the
paper and scissors image. So we'll hover over it,
right click save image, and in the same folder
that contains our code, we're going to save the
paper image. And finally, right click save image and we'll save the scissors image. All right, now that we have these
images in our code editor, let's learn how to load
them onto the page. So we can do this using an HTML element. So we'll go back to our HTML
code and we'll scroll down an inside the button. We're going to add an image element. So let's type less than I m G and greater than. So this is the
image H T M L element. It loads an image onto the page. The image element doesn't
require a closing tag. This is called a void element.
Now, to load an image, we're going to add an attribute
to this element called src. So SRC stands for source. It tells a computer which
file or image to load. So let's look in our project
For this button we're going to load rock dash emoji png inside the source attribute or type rock dash emoji dot p n g. So what this does is it will
look for the file with this name beside the HTML file and
it finds it right here and it will load it onto the page if we save. Now inside our button,
it loaded the rock image. Right now this image is too big. So let's use CSS to decrease
the size of this image. We'll hide the files and let's
give a class attribute to the image element so we can style it. So we'll type class equals and let's call this a move dash icon. And I'm also just going to add some
new lines to make the code a little easier to read. So we'll
scroll up to the CSS and we're going to style
this class using dot move dash icon and curly brackets. And let's decrease the
height of this image. We can use the property height colon and a pixel value 50 pixels and save. So this will make the height
of this image 50 pixels and it will also resize the width
automatically so that the image keeps its shape. So this size looks pretty close to
the final design so we can move on. Another feature of the source
attribute is that we can put our files into folders. So let's open the files by clicking here. And let's say that we want to organize
all of our images into a folder. So we're going to create a
folder by clicking this icon. And let's name this folder images. And we're going to drag
these images into this folder and drag this in here and in here. Now unfortunately, you can see that
the image doesn't load anymore. And that's because if we look
at our code source tells a computer to look for this
file beside this HTML file. And right now there is no
file called rock emoji dot png because we put it in a folder. So to tell the computer to
look inside this folder, we're going to type the
folder name at the start, which is images, and then we're going to type
a slash to go into the images folder. And then look for this
file, which is right here. If we save the computer is now able to find
this image and load it onto the webpage. So this feature
is called file paths. We can tell the computer to look
for a folder beside the HTML file like images and then use a
slash to tell it to go into the folder and look for a file. Now let's use this code to load
the other images onto our page. So for the paper image, we're
going to go to this button, remove the text, and then create an image
element less than i m G, greater than, and we'll give it an
attribute source equals and we'll locate the image it
is in the images folder, so we'll type images and then slash to go into the folder and we'll
load the file paper dash emoji dot p g. So paper emoji png and save. So our image is really big. Let's give it the same class
that we gave the rock image. So we'll add a class equals move dash icon and save. So these styles get applied to
all elements with a class move dash icon, so it applies
to both of these elements. Now let's do the same thing for the
scissors button. We'll remove the text and we'll replace it with an image element and we'll give it the source attribute images slash scissors dash emoji p n g. And we'll also give this a class Of dash icon to resize the images like up here. Let's save. And now we have all the
images that we need. Now let's make these buttons
look like the final design. We'll scroll up and let's
add a class to these buttons so we can style them with css. So we'll add class equals and let's use move dash button. And for this button we'll
add the same class class equals move dash button as well as for the third button class equals move dash button. Now let's scroll up to our CSS
and we're going to style this class using dot move dash button and curl your brackets. So first let's change the background
color to match the background color of the page. So we'll use background dash color colon and we'll use a special value called transparent and this will
make the button see through if we save. Now these
buttons are see through. Next, let's add this white
border to our buttons. So we'll use the border property colon and we're going to give it three values. The first value is our border
width or how thick the border is. Let's use one pixel for now. The second value is the border
style and we'll use solid because it's a solid border. Other values we can use
here are dotted or dashed. And the third value is the border color. So we're going to use white and semicolon at the end and save. And that will add a border. So let's
make our border a little thicker, like the final design. We'll
change this first value, which is the border width
to three pixels and save. Okay, so that looks pretty close. Now let's change the size of our buttons. Usually we use the padding to
add space on the inside of an element, but in this case our
images have different sizes. So we're going to use width and
height to set an exact size. So in our c s s, we'll type width colon, and let's make it a
hundred pixels and height and also 100 pixels and save. So it looks like our final design is a
little bigger than what we have here. So let's increase the
width and the height. So let's try 120 pixels and save. All right, so that looks pretty close.
Now let's make these buttons route. And the property for that is called border radius, colon. And to know how much we
need to make it round, we can set it to half of
the width or the height. So we'll set it to 60 pixels and save. Okay, so it's
coming along really well. And lastly, we're going to add
some space between the buttons. So remember that space outside
of an element is called margin. So let's add some margin on the right. So what type margin dash right colon and maybe 10 pixels and save. And finally when we put
our mouse over the button, it turns into a pointer. So the property for that is cursor, colon, pointer and save. And now our buttons
match the final design. So let's keep moving and style
the next part of the project, which is the result and the
moves. If you don't see this here, you can just play the game and
it'll give us a new result. So to make this easier to style,
we're going to go into our code, we're going to find the
result which is here, and we're going to add
some fake results like you win. Let's save. And now we have this result
and we're going to style it. So let's give this a class of result. And then in our CSS we're going to style
the class dot result and curly brackets. So let's
make the text bigger. We're going to use font, dash size, colon, and maybe 25 pixels and save. Okay, that looks pretty good.
Let's make the text bold. So we use font dash weight, colon bold and save. And finally we're going to add
extra spaces between this and the buttons. So we'll add margin, dash top and maybe 50 pixels and save. Okay, so I think that looks close
enough. Now let's style the moves. And again, we'll scroll down and we're going
to add some fake moves in here so it's easier to style. So we'll type you and then an image. So let's use the less than image and the source attribute. And let's just load the rock image
and the scissors image for the computer. So to load the rock image will
look inside the images folder slash to go into the
folder and then rock dash emoji png. So rock dash emoji png and greater than. And we'll add another
image less than image source equals images slash the scissors emoji, scissors emoji png and greater than. And finally, the text computer computer. Let's save. And this
will create some results, although the images are really big. So we can use the class
move icon to resize them to be the same size as the buttons.
So for both of these images, let's add the class move dash icon. And here as well, class equals move dash icon and save. And now our images look good. Next, let's style this score section. So the only thing we need here is
to add spaces between these two. So in this score element, let's add a class of score And we'll scroll up and style this element using dot score brackets. And let's add some margin at the top. So margin dash, top colon, 50 pixels and save. And let's compare it. And it looks like our final design
has a little more spacing than this. So let's change this to 60 pixels and save. And that looks close enough. And finally we'll style
the reset score button. So let's go back to our html, we'll add a class to this button. So here class equals reset dash score dash button. Is that the top? What type dot reset dash score. Dash button curly brackets. And we'll make the background color white. So background dash color, colon, white. And let's also remove the
border from our button using border colon, none. Let's save and see how it looks. And then let's increase the size of
this text because the final design looks a little bigger. So we'll add font, dash size, colon, 15 pixels and save. Now let's add some extra space
on the inside of the button. So that's padding, padding, colon, and we'll give it two values. The
first value is the vertical padding. Let's use 10 pixels. And the second value is
the horizontal padding. So let's use 15 pixels and save. And it looks like our final project
is a little shorter than our button. So let's change the
vertical padding to maybe eight and save. And the last step is to add
the cursor pointer. So here, cursor, colon pointer, and save. And that's pretty much it. We finished styling our
rock paper scissors project. So now I'm going to rearrange my
windows so we can see the entire design and it really nice. The last step here is to remove
these fake results and use JavaScript to insert
these results instead. So let's scroll down and we'll remove this result. And let's actually copy this code
because we want our JavaScript to generate this code. So we'll right click and copy. And let's scroll to the bottom
to where we insert the moves onto the page, which is here.
And instead of this text, we're going to right click
and paste the code that we had before. And this time, instead of picking rock every time
we're going to substitute this with the player move. So we'll remove this, and because this is
already a template string, we can insert a value
directly inside using dollar and curly brackets, and we'll insert the player move. Let's also insert the
computer's move in here. So we'll remove this and
insert a value using dollar and curly brackets and
will insert computer move. And now that we're
inserting this with JavaScript, we can scroll up and
remove the fake result, which is here, so we can
select it and delete it. Now let's save and we're not going to have anything in
our results, and when we click a move, it will show us the result and also
show us the moves that we picked. And that's it. We finished the
Rock Paper Scissors project. The last thing we're going to learn in
this lesson is how to organize our code into different files. So notice that right now all of our html, CSS and JavaScript is in one html file, and this makes the code harder to
read because the file is bigger and it mixes three different languages. To make our code more
organized and easier to read, we're going to separate each
language into its own file. So let's scroll down and we'll
start by separating our JavaScript into its own file. We'll click here to show our
files and then click this icon to create a new file
and we'll name this file, 10 dash rock, dash paper, dash scissors dot js, and press enter. So when we end a file with dot js, it tells the computer that this
file contains JavaScript code, not just text. Now let's go back to our
HTML file and we're going to move all of this code
into the JavaScript file. So we'll select this code and then we will right click and copy and inside the JavaScript
file will right click and paste. Now let's save and we'll go back to the HTML
file and we can delete all this JavaScript code. And now we're just going to load our
JavaScript file onto the webpage. To do that, we can use an attribute of
the script element called SRC or source. So we'll make it equal. And this does the same
thing as the image element. It tells a computer which file to load if we type 10 dash rock dash paper dash scissors dot js. This will look for a file called
10 rock paper scissors dot js beside our HTML file, which is this file here, and it will run all the
JavaScript inside this file. So it does the same thing as before, except now our JavaScript
code is in its own file. And this makes our code
cleaner because each file only contains one language and
each file also contains less code.
Now let's go back to the H T M L file and save. And you'll notice that our project
works the same way as before we just organized our code better. Another feature of the source
attribute is that it also uses file paths. So we can put this JavaScript file in
a folder and we'll be able to find it. For example, let's show our files and let's
create a new folder by clicking this icon. And let's name this folder scripts. So this folder will contain
all of our JS files. So we can drag this file into the folder and now we can locate it using
the source attribute by typing the folder name, which is scripts, and then a slash to go inside
this folder and look for this file and it will find it right here if we save. Everything works as normal. Another feature is we can
use multiple script elements. This lets us split our JavaScript
into multiple files and then load them all onto the page from top to bottom. Next we're going to learn how
to separate our CSS into its own file. Let's scroll up to our CSS
so we can do the same thing with css. So let's click the HTML file
And let's create a new folder and we'll call this folder
styles and press enter. So this folder will contain
all of our CSS code. Let's click the folder and we'll
create a new file by clicking this icon. And let's name this file, 10 dash rock dash paper, dash scissors dot css, and press enter. So ending the file with dot
CSS means this file contains CSS code and now we
can go back to our HTML and move our CSS into its own file. So let's select all this code and then right click copy. And in here right click and paste and save this file. Now let's go back to our H
T M L and we can remove this code and we'll learn how to load our
c s s file onto our website. So we're not going to use
the style element for this. We're going to use a different
element called the link element. So we'll type less
than, link greater than, and the link element doesn't
require a closing tag. This is another void element. So the link element uses two attributes. The first attribute is called R E L R E L means relation. This tells a computer what
type of file we're loading. So we're going to set this
attribute to style sheet. This means we're loading a
CSS file and then we will add a second attribute called H Ref. So H ref tells a computer
which file we want to load. So this also supports file paths. So we can type the styles folder. This will look for a folder
beside the HTML called styles, which is this one right here. And then we'll type slash
to go inside the folder and look for this CSS file, which is 10 dash rock dash paper dash scissors dot css. So this will load all the CSS
inside this file and apply it to our page. So it does the
same thing as before, except we separated each
language into its own file. If we save, everything still works and all
the styles get applied. And just like the script element, we can also use multiple link
elements to load multiple CSS files. So that's how we separate
our code into separate files. Using the script element
and the link element, it makes our code a lot easier to
read because each file contains one language and it contains less code. And that's the end of this
lesson. As a final reminder, the CSS we learned in this
lesson is just a review. If you want to learn CSS in more detail, you can check out my H T M
L and CSS full course in the video description. So in this lesson we
reviewed CSS and added CSS to all of our projects. We learned
about the class list property, which lets us control the
class attribute of an element. We finished our rock paper scissors
project and we learned how to organize our JavaScript and
CSS code into separate files. Here are some exercises to
help you practice using html, CSS and JavaScript together. In this lesson we're going to learn
two more features of JavaScript called arrays and loops. And we're going to use these features
to create this to-do list project. First, let's create a
new file for this lesson. We'll go to our code editor
and click up here to show our files. And this time make sure you have
one of these HTML files selected so we don't create the new file
in one of these folders. So now we're going to click this
icon to create a new file and we're going to name this file 11 dash arrays dash and dash loops dot html and press enter. Now let's copy the previous
lesson into this file. So we'll click on 10 dom
projects and we'll type here and type CTRL A or command
A to select the code. And then right click copy. And in here, right click and paste. Now let's hide our files and
we'll prepare this file for this lesson. So we can scroll to the top and we'll change the title to array and loops. And let's remove all of the css and we'll also remove the H T M L, which is right here, and we'll remove all the JavaScript. Now let's save and we'll
open this file in the browser by right clicking open with live server. And let's also open the
console. So we're right click, click inspect and click the console. And now we can close the
previous tabs and the previous code for now Until we just have the lesson 11 file. Now we're ready to learn arrays. And array is another type of
value in JavaScript and it represents a list of other values. So let's do an example and
create our first array. We'll go into the script element
and we're going to type open square bracket and closed square bracket. And inside the square brackets
we'll type a value like the number 10, and then we'll type comma and
another value like the number 20. And then again, and a third value like the number 30. So this is an array and
it represents a list of three numbers, 10, 20, and 30. Now themselves are also values, which means we can save
them in a variable. So at the front we can create
a variable using constant, and let's name it my
array and we'll make it equal to this array and
we'll add a semicolon at the end.
So now we created a list of values and we saved this list in this variable. Let's create a new line and we'll console dot log my array and save, and it will display the list
of values in the console. So that's basically what an
array is. It's a list of values. Now to get a specific value and an
array, we can use square brackets. So let's create a new
line and we'll type my array and square brackets. Inside these brackets we'll
put a number like zero. This number represents
the position in the array. So zero means the first value if we console dot log this code and save my array. Square bracket zero gives us
the first value, which is 10, and that's what's
displayed in the console. Now if we change this to one, this will get us the
second value in the array, which is 20.
If we save, it displays 20. So this number represents
the position in the array. Zero is the first value,
one is the second value, two is the third value, and so on. We can also change a value
in an array also using square brackets. So let's create a new
line and we'll type my array square brackets. And let's say we want to
change the first value, so we'll type zero for the
first value and we just make it equal to something else like 99. Now if we console dot log my array again and save. You can see that this change
the first value to 99. So that's basically how arrays work. We can access a value inside an
array and we can also change a value inside an array. Now that we understand
the basics of arrays, let's learn the syntax
rules To create an array, we start with an open square bracket
and we end with a closed square bracket inside we can put a list of values and we separate each value with a comma. We can also write an array
on multiple lines like this. We just put the new lines after the comma. Now to get a value inside an array, we can use square brackets
and a number like one. This number is called the index. It represents the position in
the array that we want to get. So the first value is index zero, the second value is index one, third value is index two, and so on. Notice that the index starts as zero. This is called a zero indexed array. Now inside an array we
can put any type of value. For example, let's create a new line and
we'll create a new array using square brackets. And inside we can put the
number one and then comma. And we can also put a string like hello and another comma, and we can put a bullion value like true and another comma. And we can even put an
object like curly brackets, name colon socks. Now an array itself is also a value. That means we can save
arrays in variables like this or even save it in an array. For example, in this array, we can add an array inside like one comma two. Next arrays have a weird behavior
when we try to check the type of an array. So on a new line, let's type console dot log type of, and then square brackets one, two and save. This will tell us that
an array is an object, and that's because an array
is actually an object, but it's just a special type of object. If we want to check if something
is specifically an array, we can use this code capital A array.is array brackets and inside the
brackets will put an array like square brackets one comma two. So this will check if
this value is an array. If we console dot log this result an and save it will display true. And finally, because arrays
are just a type of object, they also have properties
and methods we can use. So one useful property
is called dot length. So we'll type console dot log my array length. This will tell us how many
values are in the array. So my array has three values, so if we save, it will display three. Next we'll learn a useful
method of an array called dot push. This adds a value
to the end of the array. If we did my array dot push 100, this will add 100 to the end of my array. If we console dot log my array and save, you can see that 100 was added at the end. The last method we're going to
learn for now is called dot splice. This removes a value from
an array. For example, my array dot splice and brackets. And a splice takes two numbers. The first number is the
index that we want to remove. So let's say we want to
remove the first value, which is index zero. The second number we give to splice
is the number of values we want to remove.
If we give it one, it will remove one value at index zero. If we give it two, it will remove two values
starting at index zero. So for now, let's just remove one value
and let's create a new line and console dot log my array and save. You can see that splice removed
the first value from the array or index zero, which was 99. Alright, now that we understand the basics
of arrays and the syntax rules, let's do some practical examples. So I've prepared a project
we can do for this lesson. We'll go to our browser,
create a new tab at the top, and here we'll type super simple.dev/projects/erase and press enter. So this page contains the to-do list
project we're going to create in this lesson. So down here is the
final version of the project. We can type a name for our to-do like make dinner, give it a due date and
then click add and it will add it to our list. We can add another to-do like wash dishes and then select due
date and click add again and it will add another to-do to our list. And each to-do also has a delete
button so we can delete it when we're finished the task. So this is the final version
of the project and these two up here are simpler versions of the project
that we're going to use to work our way up. So let's start with
the first project up here. We're going to open our
console by right clicking, click inspect and click the console. And the way this first project
works is we can type A to-do in this text box, like make dinner, and when we click add, it will add the to-do to an array
and display it in the console. If we type another to-do like wash dishes and click add, it will add it to the array
and display it in the console. So let's create this project. We'll start
by creating a file for this project. We'll go to our code editor
and click up here to show our files. And click this icon to
create a file and we'll name this 11 dash to do dash list dot html and press enter. Now let's copy the code from
arrays and loops dot html. So we'll click here
control A or command A, and then right click copy. And down here, right click and paste. And let's close this for now. We'll scroll up and change the title to do list and remove all the JavaScript code. And this time, instead of writing
all the JavaScript in here, let's actually put the
JavaScript in a separate file, which we learned in the previous lesson. So we'll open our files again
and this time we'll go to our scripts folder. We'll click this JS file and
we'll click this icon to add a new file to this folder. And let's name it 11 dash to-do dash list dot js and press enter. Next we're going to load
this file into our HTML file. So let's open this. And in the script element we can
remove the spaces and we're going to add an attribute called SRC equals. And we're going to load the
JavaScript file that we just created, which is inside the scripts folder. So we'll type scripts and then a slash to go into this folder
and we'll load the file 11 dash to do dash list js and save. So now I'm going to drag this
file down here so I can see both the HTML and
JavaScript at the same time. Close this for now and I can
close the other code for now as well. And finally, let's
open this in our browser. So we'll right click
open with live server. And let's also open the console
on this page right click, click inspect and click the console. Now one more thing I'm going to do
for this video is I'll rearrange my windows so that we can have
the final design at the bottom. Let's start by creating the HTML elements. Let's go to the body and we'll
actually create a paragraph element to start. Inside the paragraph
we'll put the text to do list. Next, let's create the text box.
So to create a text box, less than input, greater than, and we'll add a placeholder
to this text box. Place holder equals to do name. Finally, let's add this button. So on a new line, let's type less than button greater than, and inside the button
will have the text add. Now let's save and this creates all the
HTML elements that we need. Next, let's write our Java script.
So first we're going to create an array to store our to-dos. And then when we click the add button, we're going to get the text from
the text box and add it to our array. And finally, we will
console dot log the array. Now let's convert these steps into code. Let's create a new array
first using constant, let's name it to do list and we'll make it equal to square brackets. So this is an array with no values inside. We also call this an empty array. Next, when we click the button, let's
get the value from the text box. So let's go to our button and add an on click attribute. And then inside here, let's create a function
for this. So down here, let's create a function. We'll name it, add to-do brackets and curly brackets. And then inside
the on click attribute, we're just going to call this function add to-do and brackets. The next step is to get
the text in the text box. We can do that using
document query selector. So to use query selector, we're going to put a class
on this input element. So we'll type the class attribute js dash name dash input, and then in here
Document dot query selector brackets and a string. And we'll type a.to get a
class and we'll get this class JS dash name dash input. As a reminder, this gets an element with
a class js name input, which is this element and
puts it into our Java script. And now let's save this in
a variable. So at the start, let's type const in input element and make it equal to this result. So now we took this input and
put it into our Java script. To get the text out, we're going to use a property of
the input element called value. So down here input element value, and let's save the value in
the text box in a variable. So we can use it later at the front const name and we'll make it equal
to whatever's in the text box. Before we continue, let's console dot log the name to check if this is working. So let's save this JavaScript
file and let's also save this HTML file. We'll go to our browser and I'll
resize it so we can see the console. And now if we type
something in the text box, like make dinner and click add, It will get the text from the text box
and then display it in the console. Okay, so it's looking good so far. The next step is to add
this name to our to-do list. So we learn how to do this earlier. We can use a method called push. Push will add a value
to the end of the array. So let's remove this for
now. And at the bottom we're going to type our array to do list dot, push brackets. And then between the brackets,
we're going to add our name here. And now the last step is to
console dot log the entire array console dot log to do list and save. Now let's give it a try or type make dinner in the text box and click add. It will take this text,
add it to the array, and then console dot log the array.
And now we have our to-do list. Let's add another to-do we'll type wash dishes and click add. Again, it will get the text in the text
box and then add it to the array. So now our array has two
values and then we display them in the console.
So that's how we create this first version of the to-do list project. Now one more feature we're going to
create is if we add something to our to-do list and click add, it will reset the text box. To do that, let's go into our code and
we'll create some new lines. And remember that the value
property represents the text in the text box. So to change
the text in the text box, we can simply change the value property. So we'll type input element dot value and change it to the empty string. So this will make the text
in the text box become empty if we save. And now type something
in the text box and click add, it will reset the text in the text box.
Let's move on to the second version of the to-do list. So here, when we type something in the text box, like make dinner and click add, it will actually display it on the page. If we type something else like wash dishes and click add, it will
also add it to the page. So how do we take our array
and display each value on the page? To do this, we're going to learn another
feature of JavaScript called Loops. Loops. Let us run some code
over and over, like a loop. So let's go back to our
11 arrays and loops file. And we can close this JavaScript
file for now and we're going to learn loops. So first, let's comment out the
previous code by typing slash star and at the bottom star slash let's scroll down and we'll create our first loop. We'll start by creating a
variable using the word let and we'll name this variable
I and we'll make it equal to one. Next we're going to
type the word while and then brackets and curly brackets. And then inside these curly brackets
we're going to put some code that the computer will run over and
over, just like a loop. Let's put the code console dot log. So this will display the variable
I in the console over and over again. Now obviously we
don't want to loop this forever, so how do we get this loop to stop? We can do that using the
round brackets up here. Inside these round brackets, we're going to put some code
that results in true or false. For example, we can check if I is less than or equal to five. So the way this works is that
if this code results in true, the loop will keep going over and over. Once this results in false, the loop will stop and it
will go to the next line. Now you may notice that this code
will never result in false because I is equal to one and one is
always less than or equal to five. So when does this actually
become false and stop the loop? The answer is inside this loop.
We're also going to update this variable. So we'll type I and we'll
make it equal to itself plus one. So now every time we loop over this code, we're going to increase I
by one and eventually I will be greater than five. This will return false and
it will stop the loop if we save. And then go back to the tab for
this file and I'll rearrange my windows so we can see the console. This loop makes the computer
count from one to five. So let's go over this code step by
step to make sure we understand how it works. First we create a variable
I and we make it equal to one and then we do a loop. So if this condition is true, the computer will keep running
this code over and over again. So the first time it loops, I equals one, and then it displays one in the
console and then we increase I to two. Now we go back to
the top and we check this. Code two is less than or
equal to five. This is true. So we're going to run this code again. This time I equals two and
we display it in the console and then we increase I to three. And now three is still
less than or equal to five. So this is true, which means we keep running
this code and eventually this is going to increase I to six. Once I is six, this will become false, which will cause the loop to stop
and then we go to the next line. So that's why it counts from
one to five and then it stops at five. So this is called a while loop. While this condition is true, it will keep running this code
over and over again just like a loop. As soon as this condition is false, it will stop the loop. All right, now that we understand
how a wild loop works, let's the syntax rules
to create a wild loop. We type the word while and
then round brackets and curly brackets. The code inside the round brackets
is called the loop condition. The code inside the curly
brackets is called the loop body. The variable eye at the top
is called the loop variable. Every time we loop, we're going
to increase the loop variable. This is known as the increment
step. The increment step, make sure that the loop ends at
some point without this increment step, the loop will
just keep going forever. This is known as an infinite loop. Now remember that I
equals i plus one has a shortcut. Instead of this, we can just do i plus equals one. And remember, we actually have an even
shorter shortcut for plus equals one. Instead of this we can also do i plus plus.
So this will increase the value of I by one every time just like before. So those are the three
major parts of a loop, the loop variable, the loop condition, and the increment step. Now each time we run this loop, this is called an iteration. So in this loop we did five iterations, we ran this code five times. And lastly, loops create a scope. Any variable that we create
between these curly brackets will only exist inside the curly brackets. So that's a while loop. While this condition is true, it will keep running this
code over and over again. Once this condition becomes false, it will stop the loop
and go to the next line. So in JavaScript, there's
actually two types of loops. The first type is a wild
loop, which we just learned. Now we're going to learn another
type of loop called a four loop. To create a four loop, we'll create some new lines
and then down here we'll type four and brackets and curly brackets. Inside these brackets we're going
to type three pieces of code. The first piece of code
is a loop variable, which is the same thing
as this line up here. So we'll type let I equals one and then semicolon space, and we'll type a second piece of
code which is the loop condition. So here we'll type I less than equal to five, and then semicolon and space. And the last piece of code
is the increment step, which is this line right here. So we'll type i plus plus, and between these curly brackets we'll
write the code that we want to loop over and over. So let's just type the
code console dot log I and save. So this four loop does the same
thing as the wild loop above. It counts from one to five.
And if we look at this code, we can see that a four loop is
just a shorter version of this wire loop. Instead of writing the loop variable
condition and increment step separately, we group all of
them together at the top. So this loop works the same way. First we create a loop variable, and then as long as this
loop condition is true, we will keep running
this code over and over. And every time we run this code, we're also going to increase
the loop variable by one. So now that we learned two ways of
doing a loop, which one should we use? If we're doing a standard
loop, for example, it has a loop variable, a condition and an increment
step every time it's recommended to use a four loop because a
four loop is shorter and more organized than a wild loop.
However, if it's a non-standard loop, then it might be better
to use a wild loop. So what's an example
of a non-standard loop? So let's say we want to generate random
numbers until we get a number that's at least 0.5. To create this loop, we'll create a variable that will
store the random number using let random number and make it equal to zero to start. And then we'll do a wild loop brackets and curly brackets. Now inside the loop condition, we want to keep running this loop
until random number is at least 0.5. So we'll check if random number is less than 0.5 because if it is less than 0.5, we want to keep running this loop until
we get a random number that's at least 0.5. And then inside this loop we're going
to generate a random number between zero and one and then save
it in the variable up here. So we'll type random number and make it equal to capital M math dot random. So if this random number is less than 0.5, it will keep generating random numbers
until we get a number that is at least 0.5. So at the bottom, if we console dot log random number and save, it will give us a random
number that's at least 0.5. So notice that this is
a non-standard loop. It doesn't really have a loop
variable that we increase every time and it also doesn't
have the increment step. So in this situation when
we have a non-standard loop, it's better to use a wild loop
because they're a bit more flexible. All right, now that we
learn the basics of loops, let's do some practical examples. We're going to learn a technique
called looping through an array. This means we're going to go through
each value of an array one by one and do something with
each value. So first, let's comment out the
previous code using slash star and star slash at the bottom let's create an array of strings.
So we'll create a variable cons to-do list equal to an array, and inside this array
will have the string make dinner, another string wash dishes, and another string watch YouTube. Now let's take each value in
this array and display it in the console. To do that, we're going to run a loop and this
loop is going to count from zero to the last index in the array. So remember that the index is the
position of a value in the array. The first value is index zero, the second value is index
one. Third value is index two, and so on. So below this let's type four brackets and curly brackets. Inside these brackets we're going
to create the loop variable. So here we're going to count the indexes, let index equals zero semicolon space, and we'll
do the loop condition. So we'll keep looping as long as
the index is less than or equal to the last index.
So remember that the index starts from zero. This means that the last index in an
array will be the number of values in the array minus one
or the array dot length minus one to do list dot length minus one. And here we'll add another semicolon
and we'll add the increment step, which is index plus plus. So we'll increase it by one every time. Now inside these curling brackets, we can do something for
each index of this array. For now, let's just console dot log this index and save. So this will count from a zero to two, which is exactly all the
indexes in this array. And now using this index, we can also access the
value at this index. So instead of just the index here, we can do to do list and then square brackets. And between the brackets index, this will take whatever the
index variable is and access that index in the array.
So if the index variable is zero, this will access to-do list index zero, which is the first value.
When the index is one, it will access to-do list index one, which is the second value and so on. So for now, let's save the value in
a variable using cons value and make it equal
to to-do list bracket index. And now let's console dot
log the value. Instead, if we save, this will loop through
each index of the array, get the value at each index,
and then display each value, which is what we see in the console. So this technique is called
looping through an array. We use a loop to go through
each value of an array and then we can something with each value. Now I'm going to show you a few shortcuts
we can use when looping through an array. Instead of checking if index is
less than or equal two to do list dot length minus one, we can shorten this to
index less than to-do list length. So this check does the
same thing as before. The loop will stop at index
equals length minus one, but it saves us some typing. Another shortcut is instead of
naming the loop variable index, we can shorten this to I and we'll shorten this as well and this as well. And that's why we often
name the loop variable I means index. Next we're going to learn a
technique that we can combine with looping through an array
called the accumulator pattern. So first, let's comment out the
previous code using slash star and star slash and at the bottom. Let's say we have an array
of numbers like this. How do we calculate the total
of all the numbers in the array? Let's set up this problem. Let's say we have an
array of numbers, cons, numbs equals array, and then the numbers one, one and three. And we want to calculate the total
of all the numbers in this array. To calculate the total will
learn the accumulator pattern. The first step of the accumulator
pattern is to create a variable to store the result. So below this, let's create a variable constant total and we'll make it equal to zero. And the next step is to loop through
this array and update the result. So down here, four brackets and curly brackets, and inside the round brackets
will create the loop variable, let I or index equals zero semicolon space and
we'll create the loop condition I less than numbs dot length and then
semicolon and the increment step I plus plus.
So as we learned earlier, this loop will go through
each index of this array. And now between these curly brackets, first let's use the
index to get each value. So we'll type numbs and
then square brackets and access the index I. And let's save this in a
variable using constant numb equals this value. And finally, we're going to
add each number to the total. We can type total and make it equal to itself plus each number. And remember, we have a shortcut for this, which is plus equals. And finally, since we're changing this total variable, we have to change from cons to let. All right, so after this loop, we should have added each number
in the array to the total. So at the bottom, let's console dot log the total and save and it will display five, which is the exact total of all
the numbers in this array. So that's the accumulator pattern. We first create a variable
to store the result, and then we loop through the
array and update the result. So notice that as we
loop through the array, we're adding or accumulating
the results into this variable. And that's why this is called
the accumulator pattern. And we call this variable
the accumulator variable. All right, let's do another example
using the accumulator pattern. Let's say we're given this array of
numbers again and we want to create a copy of the array where
each number is doubled. So if the array is 1, 1 3, we're going to create a
new array with 2, 2, 6. So at the bottom we'll create
some new lines and use the accumulator pattern. The first step is to create a
variable to store the result. Let's type const and let's name this numbs doubled and we'll make it equal to an array this time.
So notice in the previous example the accumulator variable was
a number. In this example, the accumulator variable is an array. So we can use different types of
values to accumulate the result. It all depends on the problem
we're trying to solve. So now the next step is to loop
through this array and update the result. At the bottom we'll create a four loop brackets and curly brackets. Inside the round brackets
will create the loop variable, let I equals zero and will create the loop condition I less than numbs dot length, and then the increment step i plus plus. And now between the curly brackets, we're going to get the number
at each index. So cons, numb equals numbs square bracket I, and then we're going
to update the result. So down here we're going to
add this number doubled to this array. So remember to add a value to an array, we can use the method push. So we'll type numbs doubled dot push brackets, and we're going to add to
this array the number numb multiplied by two. And now at the bottom, let's console dot log the result NUS doubled and save. So this second loop will create
an array where each number is doubled. So that's how we
solve this example. All right, now that we understand how to loop through
an array and the accumulator pattern, let's go back and we'll create the second version of our to-do list. So
when we add something to the list, it will appear on the page. Let's go to our code editor
and we'll open 11 to-do list html. And we're also going to
open the JavaScript file. So it's this one. And for the video I'm going to drag
it to the bottom of my code editor so that I can see the files side by side. So I'll close this for now and
I'll rearrange my windows a bit. Let's open the tab for this project. So we'll review what we have so far. We can click in this text
box and type A to do like make dinner and click add. And it will add this to do to this array, which is this array right here. We can type another to-do like wash dishes and click add and it will
add it to the end of the array. So now that we
have this array of to-dos, we want to display it
on the page. To do that, we're going to loop through this array
and we're going to create some HTML code for each to do and
then put that code on the webpage using the dom. So first, let's loop through this
array. To make this easier, let's make a copy of this array. So right click copy, and then here we'll remove
this and right click and paste.
So this will give us some default values to work with. So at the top, let's loop through this
array using a four loop. So we'll type four brackets
and curly brackets. And then inside the round brackets
we're going to create the loop variable, let I or index equal zero semicolon and the loop condition I less than to-do list dot length semicolon, and then the increment step I plus plus. So this will loop through
each index of this array. And then inside the curly brackets, let's get the string for each index. So we'll create a variable to save it, cons to do, and we'll make it equal to do list square brackets. And now for each to do, we're going to create some H T M L code. So we'll create a new line
and create a variable cons H T M L and make it equal.
And we'll create some H T M L code using this to do using a template string. And then inside will
create a paragraph element, so less than P, greater than, and then less than slash
p greater than inside this paragraph, we're going to insert this
to-do so we'll type dollar and curly brackets and to-do, all right, so now we're looping through this array. And for each to-do we
created some HTML code. And now we're going to combine all
of this HTML code together and put it on the webpage. To combine
this HTML together, we're going to use the
accumulator pattern. So at the top of the loop we'll
create a variable to store the result, let to do list capital H T M L, and we'll make it equal to
the empty string at the start. And then as we loop through the array, we're going to add this H T
M L to the variable up here. So let's create a new
line and we'll do to do list capital H T M L plus equals H T M L to combine all of this H T M L code together. So now after the loop, let's console dot log to do list H, T M L to see what we get. If we save, we took this array of strings
generated paragraph elements for each string and then
combine them all together. So now that we have all this html, we can put it on the page using the dom. So first let's create an
element where we can put this html. So inside the HTML file after the button, we're going to create a different type
of element called a diviv element. So what type less than
diviv, greater than. So the diviv element
represents a container. It's purpose is to contain
other elements inside like paragraphs, buttons, and even other divs. So in this situation, we can't actually use a
paragraph element because in HTML we cannot have a paragraph
inside another paragraph. So that's why we have to use
a div element here. For now, let's put some text inside this
element so we can learn more about it. What type text and save. So like the paragraph element, the
diviv element is a block element. That means it will take up an
entire line by itself and that's why it appears below the
text box and the button. Now one difference between a
diviv and a paragraph is that a paragraph adds extra space
above and below the paragraph, while a diviv does not add
any extra space above or below, so it doesn't have any default styling.
All right, so now that we learned the diviv, let's put this HTML
code inside this diviv. First we need to get this
element into our JavaScript. And to do that, we'll add a class to this element class equals js dash to do list. And then down here, let's scroll down and we'll put
this diviv element inside our JavaScript. We can do that using document dot query selector brackets and a string. And we'll type a.to select
a class and we'll select the class JS dash todo dash list. So this will get this diviv
element and put it inside our JavaScript. And then every HTML element
has a property called dot inner capital H T M L, which controls the H T
M L inside this element. And now to put the to-do list H
T M L into this diviv element, we're going to make the
inner h t TML equal to the to-do list html. And now let's save this file and also save the HTML file. So this code will take the
HTML that we created using the loop and put it
into the diviv element, and that's how we make
them show up on the page. So now let's try adding
another to-do we'll type watch YouTube and click add. And unfortunately this new
to-do doesn't show up on the page, and that's because
when we click add, it will run this add to-do
function and update the list, but we didn't actually
update the HTML on the page. So to update the html, we need to run all this code again. Every time we add a to-do so, let's create a function for
this code so we can reuse it. So at the top we'll create a function and let's name this render to-do list brackets and curly brackets. So the word render means to
display something on the page. So we'll put all of this code
into this function so we can delete this curly bracket.
And then at the end we'll type a closed curly bracket
and let's reformat this code by selecting these lines
and then press tab to add an indent. So now let's use this
function at the start. We'll display this to-do list on the page. So we'll call this
function by typing render to-do list and brackets. And then let's scroll down. Every time we add a to-do to the list, we're also going to
display the list again. So at the bottom render to-do list and brackets again. So if we save at the start, it will display the list on the page, and then if we add to the list like watch YouTube and click add, it will add it to the list and
also display it on the page. So that's how we create the second
version of the to-do list project. By the way, if we scroll up to
the render to-do list function, this technique is called
generating the H T M L. Instead of writing all the
H T M L by hand up here, we looped through an array
and we generated the H T M L using JavaScript. Let's take a break before continuing
with the rest of this lesson, here are some exercises you can do on
your own to practice what we learned so far. Now let's create the final
version of the to-do list. We'll go back to super simple.dev and then here we'll scroll down and
we'll create this final version. So in this version we
can type A to-do like make dinner, and we can
also add a due date. And when we click add each
to do will now have a name and a due date, and they will also have a delete
button that we can click to remove it from the list. So let's build this out
one feature at a time. We'll start by creating
this delete button. We'll go into our code and
remember we're generating the HTML for the to-do list. So for each value in the array
we create a paragraph element. So to add a delete button, we just have to add a
delete button inside here. So inside the paragraph
will create a less than button greater than and
then less than slash button greater than. And
then inside this button, we'll put the text, delete, let's save. And in the console you'll see
that the H T M L we generated now has a delete button inside the
paragraph and that's what shows up on the page. Next we're going to reformat this
HTML to make it a little easier to read. So we'll create some new
lines here and at the end, and let's put the content of the
paragraph on its own line like this and also put the delete
button on its own line. So remember that template strings have
a feature called multi-line strings. So this is perfect for
writing html code. Next, let's make our delete button do
something when we click it. To do that, we use the on click attribute as usual. So inside this button
we're going to add an on click attribute equals double quotes. And then inside
these double quotes, we can run some JavaScript
when we click this button. So this works the exact same
way as what we've been doing so far in this course. The only difference now is that
here we're generating this HTML using JavaScript. Okay, so when we click one of
these delete buttons, we want to remove this to
do from the list. Earlier. In this lesson we learn how to
remove a value from an array using a method called splice. So inside this on click attribute, we're going to type the to-do list dot, splice and brackets. So splice takes two numbers. The first number is the
index that we want to remove. So if we click this delete button, how do we know which index to remove?
Well, if we look at our loop up here,
we already have the index. It's this variable I, so we're going to insert I into
this string and we can do that by typing dollar curly brackets. And I now splice also takes another number, so we'll type comma. And the second number is how
many values we want to remove. So here we just want to remove
one value at this index. And finally, because we
updated the to-do list, we need to display the list
again on the page to display the list. We can use this
function render to-do list. So down here we're going to type render to-do list and brackets. Now if we save, you can see that in the
generated html when we click the first delete button, it will remove the value at index
zero, which is the first value. If we click the second button, it will remove the value at index one, which is the second value.
So we're basically generating all this HTML using a loop. So now if we click this delete button, it will remove it from the list and
then display the updated list on the page. So that's how we
create the delete button. Next, let's go back to super simple.dev
and we're going to create the due date feature. So first, let's create this date
selector in our html. We'll go to our HTML file. And then under the text box we're
going to add another input element. So less than input, greater than, and to make it a date selector input
elements have an attribute called type. So this attribute determines
what kind of input it is. If the type is text, which
is the default value, it's going to be a text box. Now if we change the type to date and save, it's going to
create a date selector. Now let's go back into our JavaScript
code and first we're going to scroll up and remember that right
now our to-do list is just an array of strings, but this time each to do is
also going to have a due date. So how do we group the name
and the due date together? We can do that using an object. So here instead of just a string, we're going to create an
object and we'll give it a name property, which is make dinner
and we'll give it a due date property and we'll
make the due date a string. So you can type whatever date
you have on the page for me. It's 2022 dash 12 dash 22, and I'll end this object
with a curly bracket. And I'll turn this second to
do into an object as well. So open curly bracket name and do date 2022 dash 12 dash 22 and closed curly bracket. Now that each to do is an object, we
need to update the rest of our code. Let's scroll down and we'll
start with the render function. So here inside the loop each
to do is no longer just a string, it's an object. So let's change this variable name to do object to make it more clear. And now we need to get the
name and due date out of this object. So type cons, name equals to do object.name and cons, do date equals to do object dot due date. And now instead of inserting
to-do, which no longer exists, we're going to insert the name And we're also going to insert the do date if we save. Now each to do will
also display a due date. Before we continue, we're going to review a shortcut
we can use with objects called destructuring. So here you'll notice the variable
name is the same as the property name. We actually have a shortcut
for this using cons, curly brackets, name equals to do object. So this is called destructuring. This takes the name property out of
the object and puts it in a variable also called name. And this is a shortcut for this
line up here so we can comment out this line. We can also use multiple
properties in this shortcut to also take the due date out of the object. We can just add a comma and do date. So this will do the same thing as
this line of code and we can comment this out if we save everything still works. Next, let's scroll down and we're
going to update our add to do function. So this time when
we click the add button, we're going to get the name and the
due date and put it into our list. So let's get the due date out
of this date selector first. We can do that using the
dom like we did here. So let's add a class attribute
so we can get it using query selector js dash do dash date dash input. And then down here let's create a variable constant date input element and make it equal to document dot query selector and a string dot. And then the class we want to select, which is this class js dash do dash date dash input. So this will get the date selector
element and put it into our JavaScript. And now below this, let's get
the due date out of the element. We can do that using the
value property again. So let's create a variable first, constant due date and we'll make it equal to the date input element dot value. So this will get the date that we
selected and save it in this variable. And now when we add a to-do
to our list instead of just a name, we're going to add an object. So open curly bracket
Will add a name property and the value will be the
name variable up here. So name and then comma and a due date property. And the value will be this
due date variable up here. So do date and then a closed curly bracket. And remember that objects
also have a shortcut for this. If the property and the
variable name are the same, we can just type it out once like this will do the same thing as this line above. Same thing with the second line. If the property and the
variable name are the same, we can just type a comma
and type it out once. This is called the
shorthand property syntax. So these two lines do the same
thing as these lines above. So we can comment this out
using double slash and double slash. So that's all the code
that we needed to update. Now let's save our JavaScript
file and we'll also save our HTML file. And let's go to our project. We'll add a new to-do like watch YouTube and select a date and click add and scroll down. You can see that it added our
new to-do with a name due date and a delete button. If we
click this delete button, it will remove that to-do.
If we click this one, it will also remove the correct
to-do and that's actually all the functionality that
we need for this project. So let's go into our code and we're
going to clean up by removing the console dot log here and the console dot log up here And save. Finally, let's add CSS to our project. To make it look like the final design,
We'll go into our code editor and scroll to the top. And instead of writing
all the CSS in here, let's put the in a separate
file, just like our JavaScript. So we'll click here to show our files and then find the styles folder. And we'll click the styles
folder and click this icon to create a new file inside. And we'll name this file 11 dash to-do dash list dot css and press enter. And for the video I'm going to
take this CSS file and put it at the bottom of my code editor so I
can see these files side by side. And now I'll click here to close it and we will load this CSS into our html. To do that we can use a link element. So inside the head section, let's type less than link greater than, and we're going to give it two attributes equals style sheet and href equals the file that we want to load.
So we created this in the styles folder, so we'll type styles
and then a slash to go into the folder and
we'll load this file 11 dash to-do dash list dot css and save. Now let's style our project one by
one until it matches the final design. We'll start with the text on the
page, we're going to change the font. So in here, let's type body curly brackets and then we'll change the font dash family colon, aerial and save. So that looks pretty good. Now let's work on styling
the to-do list first, let's add some more to-dos to the list. So we'll type watch YouTube and then we'll select
a date and click add. And we're going to learn how to
style our list to look like this. So notice that this list
creates a sort of grid. We're going to create this grid
using a feature called CSS grid. So let's go into our HTML first, we're going to add a class to this
diviv element, so we can style it to dash grid. And let's save. And inside our css, we're going to style
this class using.to do dash, grid and curly brackets.
And to turn this into a grid, we're going to use the
property display and grid. And we're going to add
another property called grid dash template dash columns. So this basically sets how
many columns are in our grid. The number of values that we
give it is the number of columns. For example, if we give it 200 pixels, one 50 pixels and 100 pixels, this will create three
columns in the grid. The first column will be 200 pixels. The second column will be one 50 pixels, and the third column will be 100 pixels. And now each element inside this
div will go into the columns. So the first element will
go in the first column, second element will go in
the second column and the
third element will go in the third column. If we have
more than three elements, it will wrap around and create a new row. So let's save. And unfortunately that didn't
quite work and that's because if we go back to our Java script, remember that each to-do
is one paragraph element. So this entire to-do with the
name due date and delete button will go inside the first
column and then the next entire to-do will go inside the second column. But what we actually want is for
the name to go in column one, due date, column two, and
delete button column three. To do this, we're going to separate this element
into three elements so that each element will go into each column. So instead of one paragraph, let's actually use a diviv
element. So less than diviv, greater than, and less than
slash diviv greater than, and in between will insert the name. So the reason we used a diviv element
is because diviv elements don't have any default styling, so it's a little easier to
style with CSS for the due date. Let's also create a diviv element, so less than diviv and then at the end, less than slash diviv greater than. And finally for the delete button,
we already have an element. So let's just reformat these lines. We'll select these lines and
then press shift tab To remove the indent, let's remove the extra line. And we basically separated
each to do into three elements. If we save, now the grid is working because
this element goes into the first column. This element goes into the second
column and the button goes into the third column. And that's how we lay out these elements
in a grid like the final design. Next, let's also layout out the inputs
and the ad button in a grid. We'll go to our HTML and
let's put these three elements in a diviv. So we can use grid. So we'll create a less
than diviv graded than. And then inside, let's remove this and
we'll add it at the end less than slash diviv. And let's reformat these lines
by selecting them and then press tab to add an IND debt. And now let's make this
diviv a grid as well. Let's go back to our CSS and
we'll add a class to this diviv class equals let's call it to do dash input dash grid. And instead of writing all the css again, we can use a feature of css. So here we're going to
type a comma and enter. So when we type a comma, we can style multiple
classes at the same time. So we're also going to style.to do dash input dash grid if we save the CSS file.
And let's also save the HTML file. Now the input and the add button
are also laid out in the same grid. Next, let's adjust the
spacing inside our grid. So grid has some properties
for this, we'll go to our css, press enter, and we'll use the
property column dash gap. So this sets the spacing
between the columns of the grid. So let's make this colon 10 pixels and save. So now it will add 10
pixels between each column. Let's add some spacing
between the rows as well. And grid has another property for this row dash gap, colon 10 pixels and save. So that will add 10 pixels
of space between the rows. Now notice it didn't add
space between these two rows, and that's because these
two are separate grids. This is the to-do list and
this is the to-do input grid. So to add space between them, we're just going to use
margin at the bottom will style.to do dash input dash grid, and we'll just add some
margin under this grid. So margin dash, bottom colon, 10 pixels, and save. All right, now let's move on to
styling the inputs and the buttons. We'll start with the inputs first, let's add a class so
we can style them here. Let's add a class name, dash input. And down here, let's
also add another class. Do dash date dash input. Let's save. And now insider css while
style, both of these inputs. So a style.name dash input curly brackets. And first
let's make the text bigger, like the final design. We'll set the font dash size colon, 15 pixels and save. Okay, so that looks pretty good. Now let's add spacing on
the inside of this input. So we'll add padding, six pixels and save. And that looks pretty good. Let's
move on to the due date input. So we actually want the same
styles as the name input. So again, we can use that feature of c s s.
We'll type a comma and then.do dash date dash input. So now these styles will be
applied to this class and to this class. Let's save. And that looks pretty good to me. Let's move on and style the buttons. We'll go into our HTML
and find the add button. Let's add a class so we
can style it and we'll use add dash to do dash button. Let's save. And then inside our CSS
will style that class using dot add dash to do dash button curly brackets. And let's start with the
background color will set the background color, colon, green and save. Now let's do the text color, color colon, white and save. Now let's remove the border
around our button using border colon. None save. And let's make the text a little bigger. So we'll do font dash size, colon, 15 pixels and save. And the last thing we'll add is when
we put our mouse over the button, it turns into this pointer icon.
We can do that using cursor, colon, pointer and save. Next, let's dial the delete buttons. So these delete buttons are
created in our Java script. We'll go into our JavaScript
file and then here, let's add a class to each of the
delete buttons so we can style them. So we'll add class equals double quotes and then delete dash to do dash button. Let's save. And then inside our CSS at the bottom we'll style dot delete dash to do dash button curly brackets. And let's start
with the background color. So we'll set background dash color colon. And for this design I
use the color dark red and save. So that will
style our delete buttons. Now let's change the text color to white. So we'll use color colon, white and save. Now let's remove the border using border colon. None save. And let's also make the text bigger using font dash size colon 15 pixels save. Let's add this pointer icon using cursor, colon pointer, save. And let's add some padding at
the top and bottom of the button. So we'll add padding dash top colon 10 pixels and padding dash bottom colon 10 pixels and save. So that's all the styles we
need for the delete button. And we can also close the
console to see the entire list. However, now we have another problem which
is this text and this button are not vertically aligned
in the center to vertically align in the center. We're going
to go back to the grid styles. So we'll scroll up to the to-do grid and css grid has another
property for vertical alignment and that is align dash items colon center to vertically align in the center. If we save, now the text is aligned with the button, but now we have a new problem. Our ad button is no longer stretching
to be the same as the inputs. So by default align items is stretch. That's why this button
stretches to match the inputs. And now that we changed
it to align center, it's no longer going to stretch.
So to solve this problem, we just have to make this grid stretch. So down here in the
to-do input grid styles, we'll change a line dash items back to stretch and save. And that will cause this grid at
the top to stretch vertically again. And that's it. That's all
the styling that we need. And now we've finished this to-do
list project. In the rest of this lesson we're going to learn
more details about arrays and loops. So I'm going to put this
back in the same window and I'll rearrange this window. And now let's go back to
11 arrays and loops dot html and we'll open the tab for that file and we can also close
these other files for now. And first, let's comment
out the previous code using slash star and at the bottom star slash and we'll scroll down and save. The first detail we're going to
learn is that arrays are references. So in the object lesson we learn
that objects are references. Arrays work the same way. So for example, if we create an array, constant array, one equals the array 1, 2, 3. This variable doesn't actually
contain the values. 1, 2, 3. This array is saved somewhere
in the computer's memory. And this variable only contains a
reference that points to where this array is in memory. And that means if we create
a copy of this variable, cons array two equals array one, array two doesn't contain
a copy of the values, it actually just contains
a copy of the reference. So now both of these variables
are pointing to the same array. So if we did array two, push
Four, and then we console dot log array one and we console log array two and save, It will show us that even though
we added four to array two, array one and two were both modified. And that's because arrays are references. So both of these point to
the same array in memory. To avoid this behavior, we can create a copy of the
values in the array using a method called slice. So here if we did array one dot slice instead, this will make a copy of
the values in array one. And now these two variables
point to two different arrays. If we save, now you'll see that this
line only affected array two. The second detail we're going to learn
is a shortcut called destructuring. So at the bottom here,
let's create a new array. Cons array three equals the array. 1, 2, 3. And let's say we want to get the
first value and the second value out of this array. One way to do this is to
use the index like this. Another way is to use a
shortcut called destructuring. So here we're going to replace
this with square brackets, and now we can type some variable names. If we type first value, it will take the first value and
save it in a variable called first value. If we type and second value, it will take the second value
and save it in this variable. So this is an easier way to
get values out of an array and save them inside a variable. Next we're going to learn
more details about loops. So loops have two features
called break and continue. Break lets us exit a
loop early. For example, let's create some new lines and
let's create a loop that counts from one to 10. So as usual, we can use a four loop let I equals one I less than or equal to 10 and i plus plus and will console dot log I and save. So this will count from one to 10. So now let's say that when I is eight, we want to stop this loop early. So first let's check if I is equal to eight. If it is equal to eight, we're going to stop this
loop by typing break and semicolon, if we save once this reaches eight break
will cause this loop to stop and now it only counts up to eight. So that's the break feature of a loop. It lets us stop a loop early. The next feature is
called continue. Continue. Let's us skip one iteration
of the loop or one run of the loop. For example, let's say we want to
skip the number three. So at the top we can check if I is equal to three. And if it is, we can
use the code continue. This will skip the rest of this
code and go back up to the top of the loop. And do I equals four? If we save, this will skip three in the loop. So continue, let's us skip one iteration of the loop.
So now let's say that we want to skip a number.
If it's divisible by three, divisible by three means the number
can be divided evenly into three. For example, three and six are both divisible by three, but seven is not divisible
by three because there's one remaining. This is called the remainder. And we can calculate the remainder
using the remainder operator, which looks like this. So to check if a number
is divisible by three, we can check if the remainder is zero. So here we're going to replace this with I remainder three and we'll
check if the remainder is equal to zero. If we save, this will skip three and
six because they're both divisible by three. Next, let's use continue in a wild loop. So at the end here we'll
create some new lines and let's say we want to count
from one to 10 using a wild loop. So we'll create a loop variable, let I equals one, and we'll create a wild loop I less than or equal to 10 curly brackets. And the increment step I plus plus and inside the loop will just console dot log I and save. So this will count from one to 10 again. And let's say we want to not count
numbers that are divisible by three, so three, six, and nine. So at the top here we can check if I remainder three is equal to zero and curly brackets. And we might just try
to do continue. However, in a wild loop continue will
actually skip the increment step and this will cause an infinite loop. So when using continue in a wild loop, we have to do this
increment step manually. So before continue we have to do i plus plus to avoid an infinite loop. If we save, it will skip the numbers that are
divisible by three, which is three, six, and nine.
So remember in a wild loop if we use continue, always do the increment step
manually in a four loop. However, the increment step is done
automatically after every iteration. All right, the last detail we're going to learn
is how to use loops with functions. So let's say we have an array of
numbers and we want to create a copy of this array where
each number is doubled. So we already have the code for this, we can scroll up and the
code for this is here. So let's actually make a copy
of this code from before. We'll right click copy and scroll down here. And at the bottom right click and paste at the top, let's create an array called numbs. So cons, numbs equals array, and one, one and three. If we save ave, this will create an array
where each number is doubled. Now what if we wanted to use this
loop on a different array other than one, one and three? We can do that using a function. So let's create a
function around this loop. We'll create function, let's name it double array brackets and curly brackets
will remove the closed curly bracket. And at the bottom we'll
add it back and we'll select these lines
And press tap. So now instead of doing this loop
on the same array every time, we can turn this into a
parameter. So at the top here, we'll create a parameter called numbs, and we're going to delete this line and we're going to loop
over this parameter instead. So at the bottom we can
call our function using double array and brackets. And between the brackets we're
going to save an array into nus. So square bracket one, one, and three. If we save, this will do the same thing as before, but now because it's in a function, we can use this loop with
any array, not just one, one and three. So at the end we can do double array brackets and an array 2, 2, 5 this time and save. And it will create an array
where these numbers are doubled. So using a function, we can
reuse this loop for any value. Another feature of using a
function with a loop is that we can break out of this loop
using a return instead. So first, let's actually use
a return in this function. Instead of console dot
log, we're going to return. Now numbs doubled, And here we're going to
console dot log the result console, dot log and console dot log and save. So this does the same thing as before, except we're returning the result
and console dot logging outside of the function. Now let's say
that if we see the number zero, we want to stop this
loop early. To do that, we can click here and check if numb is equal to zero. And if it is, we can
break out of this loop. Now when we're inside a function, we can also use a return statement
to break out of this loop. So we can also do return numbs doubled. So a return statement will
end this function immediately. So this is another way of ending the loop. So down here if we add the number zero and then five and save, you'll notice that the loop stops
when we see the number zero. So return is another way of
breaking out of a loop when it's inside a function. And that's
the end of this lesson. In this lesson we learned about array, which represent a list of
values. We learned about loops, which led us run some code over
and over, just like a loop. We learned a technique we can use with
loops called the accumulator pattern, and we used it to create
a to-do list project. We learned that arrays are references
and the destructuring shortcut, and we learned more features
of loops like break, continue, and using
loops inside a function. Here are some exercises to help
you practice arrays and loops. In this lesson we're going to learn
some advanced features of functions and we're going to use them to
improve our previous projects. First, let's create a
new file for this lesson. We'll go to our code editor
and click here to show our files. And click here to create
a new file and we'll name this 12 dash advanced functions HTML and press enter. Now let's copy 11 arrays
and loops into this file. So we'll click here,
control A or command A, and then right click copy. And in here, right click and paste. And we can close this for now
and let's prepare this file for this lesson. So we'll scroll up and change the title to advanced functions. And let's remove all the
JavaScript code from before. And now let's save and open
this file in the browser by right clicking open with live server. Now let's also open the console on
this page. So we'll right click, inspect and open the console. And now we can close the previous tabs as well as the previous files. And now we're ready to begin. So first we're going to
review how to use functions inside the script element. Let's create a function
using the word function. We'll give it a name, greeting brackets and curly brackets. And inside the function
we'll type the code console dot log the string. Hello. So this is a function
and it lets us reuse code to run the code. Inside this function we
can type the function name, which is greeting, and then brackets if we save this line of code will run the
code inside the function and display. Hello. This is known as calling the
function or running the function. So now that we understand functions, we're going to learn an
advanced feature of functions, which is functions are values. So we learned many types of values
in this course, like numbers, strings, and bulls. And we can save a value in
a variable. For example, let's create some new lines
and will create a variable constant numb equal two. So this will save the value
to inside the variable numb. Now functions are also values
and this means just like a number, we can save a
function inside a variable. So let's give it a try. We'll create a new line and type const function one and we'll make this equal to a function this time. So we'll just type function and a name, greeting brackets and curly brackets and inside the function
we'll type console dot log the string. Hello two. And we'll put a semicolon at the end
since we're saving in a variable. So this variable now contains a function. We're using the exact
same syntax as before, except we're just taking this
function and saving it in a variable because functions are values. So now that this function
is inside this variable, let's actually console dot log it. So well console dot log function one and save. And this will show us that the
variable function one actually contains this function. Now on a new line we can also do console dot log and check the type of function one and save. And it will tell us that the type
of this variable is a function. So as you can see, a function is just another type
of value and we can save it in a variable. We can also run the function
inside this variable by typing the variable name function one. And because this contains a function, we can actually just
call it using brackets. So this will run the code
inside this function if we save it. Displays. Hello two. Now let's do some cleanup
in this code in JavaScript. As long as there's a way
to access a function, this function name is not needed. So here we can access this
function using this variable. So this function name is not needed
and we can actually just delete it like this. And now this is called
an anonymous function, which means a function without a name. Now an interesting thing to know is
that the function syntax that we've been using this entire course up
here is actually a shortcut for this code. Now even though this syntax uses
var and we usually don't recommend var, this syntax actually
has a couple advantages. Number one, it's easier
to read. And number two, it gives us a feature called hoisting, which means we can call
dysfunction greeting brackets before we create it in the code. So using hoisting, we don't have
to worry about what order we write. This code hoisting doesn't work
when we create our function and save it in a variable like this. So in JavaScript functions are values, and just like any other value, we can save it in a variable.
Now let's think, what else can we do with a value? Well, we can save a value in
an object, for example, let's scroll down and
create some new lines and will create an object. Constant object one equals curly brackets and inside
this object will have a property numb with the value two. So this saves the number
two inside this object. Now because functions are values, we can also save a function
inside this object. So we'll type comma
and then a property fun colon. And we'll create
a function this time function greeting brackets and curly brackets. And inside what type console dot log the string. Hello, three. So this saves a function
inside this object under the property. Fun. Now to
access this function, we just use the dot notation as normal. So object one.fun. And because this value is a function, we can call it using brackets if we save, this will run the code inside
the function and display. Hello three. So remember this is called a method. When we have a function
saved inside an object, again, as long as there's a way to
access this function, for example, using object one, fun, then we don't this function name. So we'll delete it and
use an anonymous function. Now let's think, what else
can we do with a value? We can pass a value into
a function. For example, down here let's create a function function dis display brackets and curly brackets. And we'll give
this function a parameter. So in here we'll create a
parameter and name it parameter. And inside the function we can use
a parameter just like a variable. So we'll console dot log the peram, and then down here, let's call this function using display brackets. And two, this will take the value
two, save it inside, and then we can use it just
like a variable. If we save, this will display two in the console. So this is known as passing a value into a function. Now because
functions are values, we can also pass a
function into a function. So let's give it a try. Down here we'll create a new function function, run brackets and curly brackets. And this function will
also have a parameter, let's call it per and down here we'll call this function run brackets. And between the brackets we're going
to give it a function this time. So we'll type function brackets and curly brackets, and inside the function
will type console dot log the string.
Hello, four. So this will take this
function and save it inside. And now up here we can use
peram just like a variable. So we can type peram. And because peram contains a function, we can actually just
call it using brackets. If we save, this code will run the function
that we created down here and display. Hello four. So this is called passing
a function into another function. The function that we're passing
in is called a callback function or a callback. So to summarize, functions are values. Anything we can do with a value
we can also do with a function. Now let's do some practical examples. Using functions as values, we're going to learn a feature
of JavaScript called set timeout. Set timeout allows us to run
a function in the future. First we'll comment out
the previous code using slash star and at the bottom star slash and let's create some new lines and we're going to type
the code set capital T time out. So set time out is a built in function. So we can type brackets
to call this function. Now set timeout takes two
parameters inside these brackets. The first parameter is a function
that we want to run in the future. Let's create a function brackets and curly brackets. And inside this function
let's type console dot log the string time out. So here we're using a function
as a value and we're passing it into another function. At the end we'll type a comma
and we'll give set timeout a second parameter. The second parameter is how long to
wait before running this function. So this is a number in milliseconds, 1000 milliseconds is equal to one second. So if we type 3000 milliseconds, this is equal to three
seconds. So set time out, we'll wait for three seconds
and then call this function. If we save after three seconds, it's going to display
timeout in the console. So that's set timeout, we give it a function and it
will call this function after a certain amount of time. So now we're going to learn an important
concept called asynchronous code. So after set timeout, let's type console dot log the string next line and save. So notice that it displays next
line first and then after three seconds it displays timeout.
So what's happening here? Why are they reversed? Set? Timeout sets up a timer and
after three seconds it will call this function. However, it doesn't actually wait for
the three seconds to finish, it just sets up the timer and
immediately goes to the next line. So that's why this line
is displayed first. So this is called asynchronous code. Asynchronous code means the
computer won't wait for this line to finish before going on to the next line. So for set timeout, it'll just set up the timer and then
immediately go to the next line. Synchronous code on the other hand means
the computer will wait for one line to finish before going to the next line. So all the code we've written in this
course so far has been synchronous code. In addition, all the code inside this function
is also synchronous code. So if we added console dot log the string timeout two and save the code inside the function will still run line by line.
It will wait for each line to finish before going to the next line. And after three seconds it will
display timeout followed by timeout two. So don't worry, all the code that we normally
write will be synchronous code, it will run line by line as usual. The only time that code becomes
asynchronous is when we use certain features of JavaScript like set timeout. So set timeout is the only
part that is asynchronous. Now the advantage of set timeout
being asynchronous is that it doesn't block our code for three seconds
waiting for this timer to finish. It just sets up the timer
in the background and then
goes to the next line of code. So this allows our code to do other
things while this timer is running in the background. And this is
similar to real life. If you set up a timer on your alarm clock, you're not going to stop and
wait for the timer to finish. You're going to go and do something else. Asynchronous code is
the exact same concept. Next we're going to learn a similar
function to set timeout called set interval. So at the bottom let's type the code, set, capital I interval and set interval is
another built-in function. So we can call it using brackets. And set interval takes the same
two parameters as set timeout. The first parameter is a function
that we want to run in the future. So let's type function brackets and curly brackets and
inside will type console dot log the string interval. Now let's add a comma and the
second parameter is also a number in milliseconds. So we'll type 3000
milliseconds or three seconds. So set interval will run this
function three seconds in the future, but this time it will keep running
the function every three seconds. If we save in the console every three seconds, it will run the function
and display interval. So set interval is also asynchronous. Below it if we type console dot, log the string, next line two and save it will set up the interval and
then immediately go to the next line and display next line two.
So that's set interval. We give it a function and it will
keep running this function after a certain period of time. So now let's do a project
using what we learned so far. Let's go to our browser and we'll
create a new tab at the top. And here, let's type super simple dev slash projects slash advanced dash functions and press enter. So this is basically the rock paper
scissors game that we created earlier, except this time it has an
extra button called autoplay. If we click this button every second, the computer will play by itself. So this feature will help us
practice using set interval. So first let's make a
copy of the project files. We'll go into our code
editor and click this icon to show our files. And let's make a copy of 10
rock paper scissors for this lesson. So we'll right click copy and down here, right click and paste. And I'll stop this for now. So here we're going to change
the name by right clicking rename. We'll remove copy at the end
and at the beginning we'll change it to 12 and press enter. And let's also make a copy of
the Java script and CSS files. So we'll click this file
and right click copy and then click the
folder right click paste and we'll rename this
file right click rename, remove copy at the end and
at the beginning change it to 12 and press enter. And let's also make a
copy of the CSS file. Select it right click copy, click the folder, right click and paste. And right click rename, remove copy, and at the front change
it to 12 and press enter. Now let's scroll down to
12 rock paper scissors. And I'll close this for
now and inside the head, let's change this to load
12 rock paper scissors. And we'll scroll to the bottom
and here instead of the lesson 10 file, we'll load the
lesson 12 JavaScript file. Let's save and we'll open
this in the browser by right clicking open with live server. So now we're ready to begin. Let's go back to super simple.dev. And the first thing we're going
to create is this autoplay button. So beside the reset score
button, which is here, we're going to create a new button, less than button, greater than, and inside will have the text auto plate. Let's save and go back to our tab. And now we have this button. So next, let's style this button with css. So we'll give it a class class equals auto dash play button and save. And now let's open the CSS file. I'm going to take this file and then
drag it to the bottom so I can see it side by side. So I'll close this for now and
rearrange this a little bit. And then down here, and we're
going to style the autoplay button. So let's just make the style the
same as the reset score button. So in the CSS we'll scroll down to the reset score button styles. So we'll add a comma at the end and type.auto dash play dash button. So now these styles will apply
to the class reset score button and the autoplay button. If we save, now we styled our project. So next, let's make this button interactive. So at the top here we'll add an on click attribute. And then in here we're going
to run some JavaScript code. Let's actually create a function so we
can separate the JavaScript into its own file.
So we'll run a function called autoplay and brackets. So now let's save. And right now this function doesn't exist, so we have to create this function
in the JavaScript file. So for me, the file's right here, I'll select it and then drag it down
here so I can see it side by side. So let's scroll down and I'm going
to create it just above the play game function. So here we'll create some
new lines and type function, auto play brackets and curly brackets. And now inside this function we
want to play the game every second. So we can use set interval to
run some code every second. So let's type set interval brackets and inside the
brackets will give it a function that we want to run. So brackets and curly brackets. And then at the end let's
type a comma and we'll give it 1000.
So this means it will run this function every 1000 milliseconds or one second. And now inside this function we're
going to automatically play the game. And to play the game we can use
this function right here. Play game. So here we'll type play game brackets. Now we need to provide this
function with a player move. And remember we have another
function pick computer move, which will give us a random
move. So above this line, let's create a variable cons player move and we'll make it equal and we'll pick a random move using pick, computer, move and brackets. And finally we'll take this move
that we picked and pass it into this function. So player move. So now when we click this button, it should play the game every second. Let's save and click autoplay. And it works. The computer is
playing against itself every second. So now let's make this button stop
playing when we click it again. So at the top let's create
a variable to keep track of whether or not we're playing. So we use let is auto playing, and at the start we'll
make it equal to false and save. And now inside this function, what check using an if statement, brackets and curly brackets.
And inside this condition, let's check if we're not playing, so not is auto playing. So if we're not playing then we
want to start playing the game, which is this code down here. So let's select this
code and then right click cut and in here, right click and paste. And also after we start playing the game, we're going to change
this variable to true. So is auto playing and will make it equal to true
because now we are auto playing. So now let's add the ELs
branch to this statement else curly brackets. So now we need to stop this
interval. So how do we do that? The answer is that set interval
actually returns a number and this number is like an id. We can use this ID to stop the interval. So at the front let's create
a variable to save this id d constant interval ID and equals. However, there's another problem here. Every time we run the function
we're going to get a different id. So in order to save the ID from last time, we need to put this variable
outside the function. So let's select this and
remove it for now. And we'll scroll up. And here we'll create the variable let interval ID and we'll leave it undefined to start. And now down here we're going to
save the return value into this variable by typing interval ID equals set interval. And now at the bottom we're
going to use the interval ID to stop the interval. Let's scroll down. And to stop an interval we can
use a function called clear interval. So we'll type clear capital I, interval and brackets. And between the brackets we're going
to give it an ID that we want to stop. So we'll give it this interval id, interval id. And then at the bottom let's
also change is autoplaying to false because we just stopped it. So is auto playing equals false and save. So now if we try out this button, it will start playing the game by
itself every second. And if we click the button again, it will
stop playing the game. So that's how we stop an interval. We need to save the ID and
then call clear interval with this id. So now I'll up the code a little
by removing this extra line and save. And now we're
finished with this feature. So next let's go back to
our advanced functions file. So I'll click up here and
then at the bottom I'll open 12 advanced functions and hide the files for now. And we're going to learn some more
features of functions as values. So let's actually close the
other files that we opened. And first let's comment
out the previous code with slash star. And at the bottom star slash let's scroll down and save. And let's open the tab for this file. So now we're going to learn another
way to loop through an array. First let's create an array. We'll type square brackets and
inside the array we'll have the string make dinner and another string wash dishes. And another string watch YouTube. So in the previous lesson we
learned how to loop through an array using a for loop or a wire loop. Another way to loop through an
array is using a method of the array called four each. So at the bottom let's type dot four capital E each and brackets. So this is the four each
method and it allows us to loop through this array. Inside these brackets we're going
to give for each a function. So we'll type function brackets and curly brackets. So again, we're just passing a function
into another function. However, this function
will be a little different. We're going to give it a parameter. So up here let's create a parameter called value. So what for each does is that
it loops through the array and for each of these values it
will save the value in the parameter and run the function. So let's console dot log value and save. So this will loop through the
array and display each value in the console. So let's go
through this step by step. So it'll take the first value, save it in this parameter
and run the function. Then it will take the second value, save it in the parameter
and run the function. Then it will take the third value, save it in the parameter
and run the function. So the four each method is actually
the preferred way to loop through an array because this is easier
to read than a four loop like this.
And four each also has another feature. We can give this function a
second parameter so we can type comma. And the second parameter
is the index or the position of the value in the array. So for the first value index will be zero. For the second value index
will be one third value, index will be two, and so
on. So above this line, let's also console dot log the index and save. And this will also display
the index of each value. All right, now let's do a practical example
using the for each method we're going to go back to the to-do list
project that we created in the previous lesson. So we'll click up
here to show our files. And let's scroll up
and let's open 11 to-do list dot js. So in this code we used a for loop
to display the to-do list on the page. We're going to switch this to
using A for each method instead. So first let's actually make a
copy of the files for this project. We'll click up here and let's click 11 to-do
list and right click copy. And let's click the script folder, right click and paste. And now we'll rename this
by right clicking rename. Remove copy from the end
and change the beginning to 12 and press enter. Let's also make a copy of the
CSS and HTML file for this project. So we'll click this CSS file, right to click copy, click the styles folder,
right click and paste, right click rename, remove copy, and at the front change
it to 12 and press enter. And finally we'll scroll down, click 11 to-do list dot html, right click copy. And then down here, right click and paste, right click rename, remove copy at the end and
at the beginning change it to 12 and press enter. Now we can hide these files and we can close the lesson 11 files. And now here we're going to
change the CSS file that we load to 12 to-do list and we'll scroll down and we'll also change the JavaScript
file that we load to 12 to-do list. Now let's save and we'll open this in the
browser by right clicking open with live server. Okay, now let's go back to the JS file. So I'll take this file
and drag it to the bottom and I'll rearrange the windows here and we're going to scroll down and we'll
change this four loop to use a four each method. So first, let's type above this four loop
and we'll type the array that we want to loop through, which is to-do list and we'll type dot and use the four each method and brackets inside the brackets
we'll give it a function that we want to run for each. To do so we'll type function brackets and curly brackets. And this function can have two parameters. The first parameter will
contain each value in the array. So we'll call it to do object, we'll type a comma and the
second parameter contains each index in the array. So
we'll just call it index. And now inside this loop we basically
want to do everything that we did here. So let's just
make a copy of this code, right click copy, and then up here inside
for each right click and paste. So now if we scroll up, we already have the to-do object up here, so we don't need to get it
from the array like before. So we can remove this line
and let's also remove these comments. The other thing we have to change is
that previously we were using I for the index, but now the index is called index. So we just changed this to index. So that's how we use a for each
method instead of a four loop, if we compare this code to the
four loop that we had before the four, each method is easier to read. So for the rest of this course we're
going to prefer to use four each instead of a four loop. So we're
going to remove this four loop. Let's scroll back up and save and the project still works. So that's a practical example
of using the for each method. Now let's go back and learn some
more details about for each. We'll close the JavaScript
file for now and go back to advanced functions dot html
and open the tab for this file. So in the previous lesson we
learned a feature of loops called continue. Continue let's us skip to the next
iteration or the next run of the loop for each methods don't have continue, but we can do the same thing
with a return statement. So let's say in this loop we
don't like washing dishes. If the value is wash dishes, we're going to skip it and
not display it in the console. So above we'll create an if statement and then inside the condition
we'll check if value is equal to the string wash dishes. And then in the curly brackets, if it is equal, will return and semicolon. So this return statement will end
this function early and it will go on to the next function. So it basically does the same
thing as continue in a for loop. If we save, you'll notice that it's
skipped wash dishes. In the previous lesson we also learned
a feature of loops called break. Break lets us exit a loop early. Unfortunately there's not an easy
way to break in a four each loop. So if we need to use break
to exit this loop early, then it's better to use
a regular four loop. Let's take a break before continuing
what the rest of this lesson here are some exercises you can do on your own
to practice what we learned so far. So next we're going to move on
and learn a shorter way to write functions called arrow functions. So let's go to the bottom of this code, we'll create some new lines
and let's create a variable cost and we'll name the variable arrow function and we'll make it equal to brackets equal greater than or an arrow. And then curly brackets inside the curly brackets
we'll type some code console dot log brackets and the string, hello. And we'll put a
semicolon at the end. So this is an arrow function. It works the same way as a
regular function. For example, we can call this arrow function
by typing the variable name arrow function and brackets. If we save, this line of code will run the
code inside this arrow function and display. Hello. So arrow functions mostly
work the same way as regular functions. So to compare them, let's actually type above this
code will create some new lines and type const regular function equals the word function. Brackets and curler brackets, console dot log string. Hello. So these two syntaxes do the same thing. The difference is that instead of
using the word function and arrow function just uses an arrow. Now parameters work the same
way in an arrow function we just type the parameter between
these round brackets. So here let's type per and here as well. If we want multiple parameters, it also works the same
way up here we can type two and down here two. And finally, return statements also work the same way. So in this function we can return five and in the arrow function
we can also return five. So now let's learn some differences
between these two arrow functions have a few shortcuts that
regular functions don't have. For example, at the bottom let's create
an arrow function using cons and we'll name it one peram and make it equal
to an arrow function, brackets, arrow and curly brackets. Now in this arrow function we're
going to give it one parameter per and inside the function will console dot log peram plus one. So when an arrow function
only has one parameter, these round brackets are optional
so we can actually remove them if we do one per brackets. Two, if we save it will display two plus one, which is three. Let's
learn another shortcut. We'll create some new lines and type cons. One line and make it equal to an arrow function racks arrow and curly brackets and inside will return two plus three. So when an arrow function
only has one line like this, we can actually put it on
the same line as the arrow. And now that everything's
on the same line, the curly brackets are actually optional. So we can remove them and we can
also remove the return statement. So this is a one line arrow
function. If we just have an arrow, it will automatically return
the result on the right. So at the bottom we can console dot log and call the one line function with brackets. If we save this function will return two
plus three and it will display five in the console. So
that's arrow functions. It's a shorter way of writing a
regular function and it has a few shortcuts for now. Let's get some practice
using arrow functions. So let's scroll up in
this code to the for each method. So let's use
an arrow function here. Instead we just have to
remove the word function. And after the round brackets add an arrow equals greater than if we save the loop still works. So when we're passing a
function into another function, like for each, it's recommended to use arrow functions
because it makes our code easier to read. So now let's use arrow
functions in some of our previous projects. We'll start with
the rock paper scissors game. Let's open our files by clicking here and we'll find the 12
rock paper scissors dot js file. And then inside this file we're
going to scroll down to the autoplay function. So here we're passing
a function into another function. So it's recommended
to use an arrow function. Let's remove the word function and add an arrow. So now this code is
a little easier to read. Now what about this function
up here function autoplay, should we also switch
this to an arrow function? So this situation is more personal
preference. So above this, let's actually create an arrow
function version of this. Cons auto play equals brackets and arrow and curly brackets. So even though we could create
an arrow function version of this, I actually prefer the regular
function syntax here for two reasons. Number one, I think this is
easier to read than this. And number two, this function
syntax enables hoisting, which means we can call this function
before we create it and we don't have to worry about which order we write
the code. So for these reasons, I actually prefer this situation
to use a regular function syntax and not an arrow function. So we'll comment out the arrow
function using double slash and double slash.
Now let's save and let's open the tab for this
project and we'll give it a try. So click autoplay and this still works after
replacing with an arrow function. Next, let's go to the to-do list project
and switch to arrow functions. So we'll go to our code
editor and find the to-do list project, which is here. And let's scroll down. So inside render to-do list
we're using for each and we're passing this function
into another function. So it's recommended to use
an arrow function here. So we'll remove the word
function and after the brackets we'll add an arrow. And again, I'll leave this function syntax as a
regular function because it's easier to read and enables hoisting. So let's save and go
back to our to-do list and everything still works. Next, let's go back to 12 advanced functions dot html and we'll scroll to the bottom and we'll open the tab for this file and we'll review another place. We could use arrow functions
which is inside an object. So at the bottom here,
let's create a new object. Const object two equals object. And then inside let's
type the property method colon and an arrow function brackets arrow and curly brackets.
So even though we could save an arrow function
inside an object like this, objects already have a
shortcut for functions. So at the bottom we could just type method Brackets and curly brackets. So this syntax is called
the shorthand method syntax. So this shorthand method syntax
is actually easier to read than an arrow function. So when saving
a function in an object, it's actually recommended
to use this syntax instead. There's also another difference between
regular functions and arrow functions, but we'll learn about it later in this
course because it's a more advanced feature. Now let's move on and we're going to
learn another improvement we can make to our projects. So let's
comment out this code. We'll scroll up and type slash star and at the bottom star slash and save. And next we're actually going to
scroll up to the very top of this file and we're going to create
a button on the page. So inside the body we'll type less than button greater than, and inside the button
we'll have the text click. Now let's say that we want to run some
JavaScript code when we click this button. So here we can type on click equals double quotes and write
some JavaScript inside this double quotes. Now we're going to learn a better
way of doing this called add event Listener to use add event
listener first we're going to get this button and put it into
our Java script using document dot query selector. So let's add a class to this
button so we can select it and we'll set it to js dash button. And now inside the script element
we're going to use document dot query selector brackets and the string dot js dash button. So now let's save this button in
a variable so we can use it later at the front. We'll type cons button element equals this result. Now every HTML element
has a method called add event listener.
Add Event Listener lets us run some code when we interact with the element, so it sort of does the
same thing as on click. So at the bottom, let's button element dot add, capital E, event, capital L, listener and brackets. So add event listener has two parameters. The first parameter is the event
or what type of interaction we want to listen for. So between these brackets, let's type the string click. So this will run some code
when we click the button. The way to find these event names
is to look at this attribute. The word after on is the event next. The second parameter is a function
that we want to run when we click this element. So we'll type a comma and
because we're passing a function into another function,
we're going to use an arrow function. So we'll type brackets, arrow and curly brackets.
So inside here let's just do console dot log string, click and save. And now when we click this button, it will run this function
and display click. So this code does the
same thing as the on click attribute. However, add event listener has some
advantages over using an attribute. First it lets us add multiple
event listeners for an event. For example, let's add
another click event listener. We can select this code and right click copy. And then down here, right click and paste. And let's change this to log click two. If we save and click the button, it will run both these functions. So at Event Listener let's us
add multiple listeners to one event. Another advantage of doing this is
that we can remove an event listener using a method called
remove event Listener. So under this code we can type button element dot remove, capital E, event, capital L, listener and brackets and remove Event Listener also has two parameters.
The first parameter is the event. So in this case it is the string click and we'll type a comma. And the second parameter is the
function that we want to remove so that when we click this button it
will no longer run that function. Now we can't just type
a copy of this function, we need to use this exact function
inside remove event listener. To do that, we'll save
this in a variable first. So above this, let's create a variable constant event listener equals and we'll select this code right click copy, and in here right click and paste. And now we'll replace
this with the variable event listener. And down here we'll
remove this same variable event listener. If we save and click the button again, it will only display click two
because we added this event listener and then we removed it
so it will no longer run this function when we click the
button. So as you can see, add event listener gives us more
control over event listeners. We can add multiple listeners
to an event and we can also remove a listener from an event.
So because of these advantages, the best practice is to use add
event listener instead of an on click attribute. So let's go back into our projects
and switch to using ad event listener. We'll start with the rock
paper scissors project. So we'll open our files
and we'll open 12 rock paper scissors and click here and save. And we'll scroll up to 12
rock paper scissors dot js. And for the video I'll
drag this down to the bottom and I'll hide the files for now and then rearrange the windows and finally open the tab for this file. Now let's go to the html. We'll scroll up to these move buttons, which is up here. So here we're using the on click
attribute and we're going to switch it to add event listener. So first let's get this
button into our Java script. We'll add a class so we can select it js dash rock dash button and save. And then down here, let's go below the autoplay
function right here and we'll use add event listener. So we'll get this button into
our JavaScript using document dot query selector brackets and a string dot js dash rock dash button. And we're going to use dot add event listener brackets. So we're going to listen for a click and a comma and we'll give it a
function that we want to run. So a comma mistake here is
to actually run the function. For example, play game brackets and the string rock. So we're supposed to give a
function to add event listener. However this doesn't result in a function. This will actually run play game
and give us the return value which is undefined. So this code will actually result
in undefined and then we're giving undefined to add event
listener so it won't work. So in order to give add
event listener a function, we need to create a function here. So let's remove this code and
we'll create a function using brackets, arrow and curly brackets. And then inside this function
we're going to call play game. So we'll type play game brackets and rock. So now when we click the rock button, it will run this function
and play the game. So let's remove the on click attribute and save the HTML and also save the JavaScript. And then go to our project
and click the rock button. You can see that it works except
this time we're using add event listener. So let's do the same for the
paper and the scissors button. Feel free to pause the video
if you want to try it yourself. So we'll scroll down here and
let's add a class to the paper button. So we can select it js dash paper dash button. And then in our java script
we'll make a copy of this code. So right click copy, And then down here, right click and paste. And now we're going to replace
the rock button with paper. And when we click this button, we're
going to play the game with paper. Now let's save and we'll
remove the on click attribute and save the h html. If we click the paper
button, it works as before. Finally, let's do the scissors button. So we'll add a class js dash, scissors dash button, and then inside our java script
we'll make a copy of this, right click copy. And then down here, create some new lines, right click and paste. And now switch to the
scissors button and play game with scissors. Let's save and remove
the on click attribute, save the html and try the scissors button so everything still works. And I'll leave switching the reset
score button and the autoplay button as exercises. So now let's try add event
listener with a different event. We'll use it with key down. So let's say that in our project we want
to make it so we can play the game with our keyboard. If we type
R, it will play rock. If we type P, it will play
paper and if we type S, it will play scissors.
Let's go into our JavaScript and we'll scroll down And we're going to add an event listener
to the body this time so that if we type anywhere on the
page we can run some code. So we're going to get the
body element using document dot body and then dot add event listener and brackets. This time the first parameter
or the event will be the string key down. And let's type comma and give it
a function that we want to run brackets, arrow and curly brackets inside here. Let's just type console dot log key down for now and save. So now if we go to the project
and we open the console, right click and click inspect, click the console and
then click on the page. If we type a key on our keyboard, it will run this function
and display key down. So now we have to check what key
was pressed and play the game. So how do we know which key
that we pressed earlier in this course we used the attribute
on key down and we learned that it gets a special object
called event and the event object contains which key was pressed add. Event Listener also
provides this event object, but it provides it as a
parameter to this function. So inside the round brackets,
let's add a parameter event. Now every time we type on our
keyboard add event listener will save the event object in
here and run the function. And this event object contains
the key that we pressed. So in the console dot log, let's display event dot key this time and save. Now if we click on the page and type R event dot key will contain R. If we press P event dot
key, we'll contain P. So that's how we know which key we
pressed. So now let's close this and instead of console dot log, we'll create an if statement
to check which key we pressed. So if brackets and curly brackets, and here we'll check if event dot key is equal to the string R. If it is, we're going to
play the game with rock. So inside here we can just
run this play game function, play game and brackets and inside we'll type these string rock. Now let's check if we pressed P. So we'll add another branch else if brackets and curly brackets. And in the second condition
we'll check if event dot key is equal to the string P. If it is, we'll play the game with paper. So inside here we'll run play game brackets and the string paper. And finally we check if we pressed S. So at the end we'll add another else if brackets, curly brackets.
And inside here we check if event dot key is equal to the string S. If it is, we'll play the game with the string scissors. Now let's save click our page and type R and it plays a game with rock. If we type P, it will play the game with
paper and if we type S, it will play the game with scissors. So that's an example of using ad event
listener with a different type of event with a key down. If
we need the event object, we can get it using a parameter up here. So those are all the features we're going
to create for our rock paper scissors project. Now let's move on to the to-do list
project and switch To add event listener, we'll go into our code editor, click up here and find 12 to-do list dot html. We'll also scroll up
to the scripts folder, find 12 to-do list js and open this file. And I'm going to put it at the bottom
here so I can see it side by side. I'll close this for now
and close rock, paper, scissors and then open
the tab for this project. Okay, so let's start by switching the ad
button to use add event listener. We'll go into our H T M L and
find the add button which is here. And we're going to add a class. So we can select it in JavaScript js dash add dash to do dash button. Now let's go to our Java
script and scroll down above the add to do function, we'll get this button into
our Java script using document dot query selector brackets and then a string dot. And the class we want to get js dash add dash to do dash button. And then after this we'll use dot add event listener brackets. Inside these brackets
we'll give it the event, the string click and then a function to run
when this event happens. So brackets, arrow and curly brackets. And in here we just want to do the
same thing as the on click attribute, which is add to do and call this function. Let's save. And then in the html, let's
remove the on click attribute and save and let's try it out. So we'll type A to do watch YouTube, select a due date and then click add. And the add button still works as before, but we're just using ad
event listener. Next, let's switch all the delete buttons. Let's scroll up to where we
create these delete buttons, which is here. And first we'll add a class
to all the delete buttons. So we can select them in JavaScript JS dash delete dash to-do dash button. And now we're going to use document
dot query selector and add an event listener to all of these buttons. However, there's two problems here. First is that at this point in
the code, this is just a string. We haven't actually put
this button on the page yet. We do that down here.
In this line of code, we put the HTML that we
generated onto the page. So in order to add an event listener, we need to put the H T
M L on the page first. So we have to do it after this code. So down here we're going
to type document dot query selector brackets and the string dot, and we'll select this class js dash, delete dash to do dash button. However, there's also
a second problem here, which is we're going to
have multiple delete buttons and query selector only gives
us the first one. So how do we select all the buttons on the
page that match this criteria instead of just the first one? To do that, the document object has another
method called query selector all. So query selector all will give
us all the elements on the page that have the class js
delete to do button. So down here let's console dot log
this result to see what it looks like, console dot log brackets and close bracket and save. And then here right click inspect and the console and expand this. You'll see that document dot
query selector all gives us a list of elements. And this list
works just like an array. This is index zero or the first button, and this is index one,
which is the second button. So now let's remove console dot log and add event listeners
to all of these buttons. To do that we're going to loop
through this list of delete buttons. So again, this list works like nra, so we can use a for each
method to loop through it. So at the end, let's type enter and tab and then dot for each and brackets as usual, we'll give for each a function that
we want to run for each of these values. So we'll type brackets, arrow and curly brackets. And now every time we loop through
the list for each will give us two parameters. The first
one is a value in the list, which is a delete button element. So let's name it delete button and we'll type comma. And the
second parameter is index. So index. So now we want to add an event
listener to each delete button. So inside here we'll type delete button dot, add event listener and brackets. Inside these brackets we'll tell
it what event we want to listen to, which is the string click and comma. And then a function that we want
to run when this event happens. So brackets, arrow and curlier brackets. So now when we click a delete button, we want to do the same thing as
this on click attribute above. So let's select this code.
Whoa, right click copy, and then down here, right click and paste. And now we can remove these characters
because we're not in a string anymore and that's all we need
to do. So to summarize, we used query selector all to
get a list of all the delete buttons on the page and then we
looped through the list using for each and for each
delete button we added a click event listener and ran the
same code that we did before. So now we can scroll up
and remove this on click attribute and save. Go back to the page, close a console and try
out the delete button and you can see that it still works. So that's how we switch the to-do list
project to use add event listener. So now we're finished
improving all of our projects. In the rest of this lesson we're going
to learn more features that use functions as values. So let's close this for
now and we'll go back to 12 advanced functions dot html and we'll open the tab for this file. And let's also comment out
this JavaScript code using slash star and star slash Let's save. And now let's scroll to
the bottom of this code And create some new lines. So in this lesson we learned
the array method for each, which lets us loop through an array. Now we're going to learn two more
array methods called filter and map. So let's start with filter. Let's say we have an array of
numbers and we want to create a copy of this array with all
the negative numbers removed. So let's go up here and
create an array of the number one negative three, five and type the method dot filter and brackets. So filter works the same way as for each. We give it a function, so bracket, arrow and curly bracket. And this function has two parameters, the value and the index. So filter will take the first value, save it in here and run the function. Then it will take the second value,
save it in here, run the function, and the third value, save it and run the function.
Now the only difference is that this time this inner
function will return a value. So we'll type return and
we're going to return a bull like true. So now the return value matters. So what filter does is
it creates a new array. If the inner function returns true, it will put this value in the new array. If the inner function returns false, it will not put this value in
the new array. For example, at the front, let's console
dot log the result of this. So we'll type console dot log, open bracket, and down here, close bracket and save. So in this example, the inner
function always returns true. So all three values will
be in the new array. If we change the return
value to false every time and save all three values will not
be added to the new array. So now let's use this to solve
our problem. We want to remove the negative numbers from this array. So inside this inner function we're
going to return true if the number is positive and return false
if the number is negative. So we'll check if value is greater than or equal to zero. Curly brackets will true and include it in the new array else will return false and not include it in the new array. So let's remove this and save. So now only values that are greater
than zero will be in the new copy. So using this we can sort of
filter out values based on a criteria. That's why this
method is called filter. Now we can shorten this
logic by using this code return value greater than or equal to zero. So this comparison will return true
if it's greater than or equal to zero and it will return false otherwise. So this line does the same
thing as this code up here. So we can comment this
out with slash star and star slash and save. And as always we can return
a truthy or falsey value instead of just true or false. The last array method we're
going to learn is called map. So let's create some new
lines and scroll down. And let's say we have an array of numbers, again like the array 1, 1 3, and we want to make a copy of this
array with each number doubled. So at the end what type dot map brackets and map works
just like for each and filter between the brackets, we'll give it a function bracket, arrow and curly brackets. And this function will get two parameters. The first parameter is
each value in the array, and the second parameter
comma is the index. So map will take the first value, save it in this parameter and run
the function. Take the second value, save it in this parameter, run the
function, third value, save it, and run the function. And inside this function
we're going to return a value. So what map does is it
creates a new array and then whatever we return will
be added to the new array. So if we return 10 and then we console dot log this result console, dot log and close bracket and save, it will create an array
where each value becomes 10. Now the interesting thing is that
we can actually use the value itself in the return. So here if we did value plus 10 and save, it will take each value
in the original array, add 10 and put it in the new array. So map will transform an
array into another array based on the return value. So if we want to return an array
where each number is doubled, we just have to multiply each value by two and save.
And this will give us 2, 2 6. Next we're going to review some
shortcuts of arrow functions to make this code more compact. First, let's make a copy of this code, right click copy and down here, right click and paste. So notice in the inner
function we're not using index, so let's just remove it for now. And now that this arrow
function only has one parameter, these round brackets are optional. So we can also remove these to make
the code more compact. Compact. Another shortcut is if we only
have one line of code in an arrow function, we can put the code on one line like this. And now the curly brackets
and the return are optional. So we can actually just
remove all of this code. So if we have just an arrow, it will automatically return this
result on the right and we don't have to type return ourselves. So this code does the same
thing as the code above. But as you can see, these shortcuts make our
code very compact and clean. So let's save and this will
give us the same result. The last thing we're going to learn in
this lesson is a feature of functions called a closure. A closure means if a function
has access to a value, it will always have access to that value. So let's take a look at an example. We're going to go back to
the to-do list project. So we'll click up here
and then scroll up to 12 to-do list js and close this and then open
the tab for the to-do list, which is here. And let's scroll down to
the query selector all. So we're going to focus on
this inner function here. So notice that this function
uses index from above. Now the interesting thing about
index is that as soon as this four, each ends index gets deleted. For example, if we add some new lines
and we try to console dot log index and save and then go into our project, right click Inspect and the console, it'll tell us that the
index is not defined. So as soon as we end the four, each loop index doesn't
exist anymore. However, if we move this into the inner function, so inside here and we console dot log, index and save, and we click a delete button, it will tell us that the index is zero. So even though index gets
deleted right away down here, if we click one of these buttons later on, it still has access to index.
This feature is called a closure. If a
function has access to a value, it will always have access to that value. The value like Index
gets packaged together or enclosed with the function.
That's why we call it a closure. So even if the value index
gets deleted after the loop, we can click the delete button
five seconds later or even five minutes later, and this function
will always have access to index. So closures are something that naturally
happens as we write JavaScript code, and it's nice to know
how this feature works. There are some advanced techniques
that we can do with closures, but they're not used that often, so I
won't be covering them in this course, but maybe in a different video. Now let's remove console dot log and save, and that's the end of this
lesson. In this lesson, we learned that functions
are values. We learned, set, timeout and set interval, which lets us run a
function in the future. We learned an array
method called for each, which is a cleaner way of
looping through an array. We used for each arrow
functions and add event listener to improve our projects. We
learned two more array methods, filter and map, and we learned a feature of
functions called closures. Here are some exercises to help you
practice what we learned in this lesson. Here are some projects you can try
on your own to practice combining everything we learned in this course.
These projects are open-ended, meaning it's up to you
how they look and work. You can find example solutions for
these projects in the video description. So that's the end of
part one of this course. Great job in making it this
far. In this part of the course, we learned all the major features of
JavaScript and now we know everything we need to build projects. In the second part of this course, we're going to focus on building
bigger and more complex projects, and we're going to start and
finish the final Amazon project. Along the way, we're going to learn advanced techniques
like the ones listed here that are useful for bigger projects.
Also, from now on, I'll be posting one lesson at a
time as soon as I finish them, and then combine them
all together at the end. If you want to be notified
of future lessons, you can click the subscribe
button below the video. If you want to learn HTML
and CSS in more detail, you can check out my HTML
and CSS full course here. If you want to support this channel, you can like this video and recommend
this course to anyone you know who is interested in learning
JavaScript. Thanks again, and I'll see you in the next one.
