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.