Complete JavaScript Beginner Course: Projects, Fundamentals, and API Integration

hey everybody today I decided I'm going to teach you everything you need to know to get started working with JavaScript

throughout this course we'll be working on a few projects you could add to your portfolio which include but are not

limited to a digital clock a stopwatch a functioning calculator a game of rock paper scissors an image

slider and our final project will be a weather app that fetches data from an API if that sounds good to you I

encourage you to sit back relax and enjoy the show hey if you don't mind please give this video a like post a

random comment down below and subscribe if you'd like to be a fellow bro it doesn't cost you anything thank

you JavaScript is a programming language used to create Dynamic and interactive web pages JavaScript runs on a web

browser such as Google Chrome Safari Edge whatever you use to browse the internet basically by using JavaScript

we can respond to user actions and transform user input whenever somebody interacts with our site in this example

I have a calculator written with HTML it's not very pretty and it doesn't function we have the framework that we

need at least though by applying CSS we can add color and style to this calculator but unfortunately it still

doesn't function by including JavaScript code this calculator can perform actions and is well useful so in this video I'm

going to show you everything you need to know to get started working with JavaScript I would recommend knowing

HTML and CSS before starting the series I do have a full free course on my channel if you're interested in learning

those or if you need a refresher if you don't know either you could probably still get by watching this video I'll

walk you through both as we go along throughout the series now before we do begin you will need a text editor one

text editor that I recommend is VSS code which you can download from code. visual studio.com for a step-by-step

instruction of how to install it feel free to check out the HTML and CSS series with that out of the way let's

Dive Right In so what we'll need to do is create a new project folder in vs code you can go to

the left toolbar go to explore we will open a folder I'll place this folder on my desktop just for convenience I will

create a new folder which I will name website to contain my website files let's select this

folder and we are now within our website folder we'll need three files an HTML file CSS file and JavaScript file we'll

begin with the HTML file we can close out of this welcome window I will name my HTML file

index.html in a website the index.html file is typically used as the homepage we have our HTML file next

comes the CSS file mine will be named style.css the CSS stylesheet is in charge of the overall appearance of the

web page this can include fonts colors positioning stuff like that then lastly we have the JavaScript file which I will

name index.js the Javascript file is in charge of the interactivity of a web

page so alt together we have structure style and actions so rearrange these tabs however you like I switch back and

forth between the JavaScript and HTML file quite often so I tend to put them right next to each other but do whatever

is most convenient for you so to generate the necessary text to create a web page in your HTML file in vs code

you can type exclamation point then hit tab so here you can change the title of your web page if you want I'll change my

title to be my website and that's all we'll need for

now now we'll need to link the stylesheet to the HTML file now we are going to create a link tag we can link

an external stylesheet to our HTML file within the link tag there is a relationship attribute shortened to re

the relationship ship will be stylesheet we are linking a stylesheet then the next attribute we need is the hre

attribute where is the CSS file located well it's right next to each other we only need the file name so we are

linking the CSS Styles sheet now our CSS stylesheet is linked to our HTML file now we need to link the Javascript file

to our HTML file we can do that by adding a pair of script tags we will set The Source attribute to

be the name of the JavaScript file index.js all right everything should now be linked together the last thing we'll

need is the live server extension in VSS code go to extensions we will search for live

server it should be this one we are going to install this extension so whenever we save any

changes to our files the web page should refresh automatically so now let's test this you

can go to file save or use the shortcut I'm just going to save everything I'm going to rightclick on

our HTML file then open with live server and here is our web page but it currently doesn't have anything uh let

me just minimize this I will readjust this window throughout this course I'll have VSS code alongside a web browser

with our HTML file we can add elements such as an H1 element these are typically used as headers I'm going to

say hello then save and that should update automatically or you can press the refresh button but since we have

live server installed we shouldn't need to then paragraphs are typically used for a paragraph a text in vs code to

generate a random paragraph of text you can type lauram then hit tab now we should have a random paragraph I believe

it's Latin at least it looks like it to change the style of our web page we can go to our stylesheet to change the style

of the body of our document we will select body I'll change the font family to something else font family how about

verdana there we now have a different font to increase the font size you can set the font size property to be either

in pixels or em personally I'm a fan of using em 2 em means 200% where 3 em is 300% but that's a

little too big let's stick with 2 em all right and that is everything we need to get started oh important note you do

want your script element at the bottom of the body of your document just in case there's an error with your

Javascript file you do want all of the HTML elements to at least render first before running any JavaScript code all

right so let's delete our H1 elements and our paragraph element we no longer need them for

now be sure to save everything we'll work with some basic output I'm going to zoom in a little bit to Output some text

you can type console.log add a set of parenthesis then a semicolon at the end within the

set of parentheses to Output some text you can either use double quotes single quotes or back ticks personally I'm a

fan of using these back ticks this is known as a template literal they're helpful with inserting variables which

we will discuss in the next lesson using either double quotes or single quotes or back ticks we can output some text let's

say the word hello be sure to save I'm holding contrl s on Windows there's no apparent output we have to go to Dev

tools so right click on your web page go to inspect then console and here's our

basic output hello for an additional line of output we can console.log again let's print print a different message I

like pizza let's save and here's my second line of text I like

pizza and I'm just going to move these windows a little bit that's better throughout much of the series we will be

working with this window again you have to right click on your web page go to inspect then go to

console now within our web page to create an alert box you can type window. alert at a set of parentheses semicolon

to the end we'll use a template literal we'll need a set of back ticks this is an alert this should

create a pop-up window this is an alert let's create

another let's copy what we have paste it I like pizza let's

save this is an alert okay I like pizza not sure why we need to tell a user that but we can now we have comments to

create a comment you type two forward slashes comments aren't used for output they're used as notes for yourself or

for other developers this is a comment so when I run this program then if we were to go

to our Dev tools we don't see this comment at all they're not displayed as output they're either used for notes for

yourself or for other people for a multi-line comment you can type a slash asterisk anything that comes after will

be a comment this is a comment you can see that the text is green that means it's a

comment again we should not be able to see these comments they're hidden I'm going to turn this JavaScript code into

comments just for the next part because these window alerts are kind of annoying to be

honest all right now what we're going to do is populate our web page page with some text within our HTML file I will

create an H1 element H1s are usually used for headers or titles there will be no text content

yet but I will set an ID I will give this H1 element a unique ID of my H1 feel free to pick a

different ID something you'll remember I will also create a paragraph element I will set the ID to equal my P

meaning my paragraph so remember there is no text content currently using JavaScript we will add some text content

first we need to select these elements by their ID my H1 and my p uh let's do that here we will type

document meaning the document of our web page do get element by ID do pay attention to the

capitalization what id are we getting let's start with my H1 so copy the ID paste it within the set of parentheses

be sure you're including quotes as well follow this with DOT text content we will set this equal to how about the

word hello let me zoom out a little again this can be back ticks single quotes or

double quotes all right let's type the word hello now when I save and and refresh the page that H1 element should

display the word hello now this time let's get our paragraph element with the ID of my P my

paragraph document. getet element by ID the ID that we're getting is my P will change the text content equal to uh what

can we say I like pizza there we go hello I like pizza all right

everybody so that's the basics of JavaScript when working with basic output you can use console.log which we

will be using a lot to create an alert you can use window. alert to change the text content of an HTML element you

first have to select that element then change the text content then set it equal to some text of you're choosing

all right everybody so that is the very basics of JavaScript and in the next topic we will cover

variables all right well it's time that we discuss variables do you remember from middle school or elementary school

when you learned algebra you had to solve for what the value of x was X was some representation of a value well

that's kind of what a variable is in programming it's a container that stores a value the variable behaves as if it

were the value it contains there's two steps to creating a variable declaration and assignment to use a variable we have

to first declare it it we'll use the let keyword then a unique variable name like X then a semicolon so what we've done is

declaration each variable name needs to be unique if I were to declare another variable named X we would run into an

error a syntax error identifier X has already been declared so your variable names need to be unique I can declare

two variables X and Y and they both have different names that is fine but they can't have the same name the next step

to create a variable is to assign it a value once you declare your variable you don't need to declare it again so I'm

going to assign X to equal some number like 100 we can use this variable X and it will behave as if it was the value

100 let me demonstrate so if I was to console.log X well then it's going to display 100 if

I were to change this value to 123 well X is now 123 you you can do both declaration and

assignment together that would look something like this let x equal

123 this is both declaration and assignment if you're creating a program and you know what your value should be

you can assign them a value right away sometimes you may want to accept some user input so then you might do

assignment later in two steps it's really up to how you write your program there's a few different data types in

JavaScript the first is number like 123 let's create a descriptive name for our variable like age we will store a user's

age according to my analytics in YouTube the average age of my viewers is 25 so let's say that my age is

25 then if I was to console.log my age variable it would behave as if it were the number 25 let's

create a few more variables another example of a number could be price let price equal 10 .99 maybe it's

$110.99 or some other unit of currency of you're choosing then we will console.log price

$10.99 what about a GPA a grade point average my grade point average is a solid 2.1 it's not great but C's get

degrees console.log GPA 2.1 using a template literal we can insert a variable using a placeholder

within console.log I will use back ticks let's write a sentence you are then to insert a variable use dollar sign curly

braces place your variable name within the curly braces then we can continue our sentence you are variable age years

old let's create another sentence using console.log the price is dollar sign curly

braces price the price is $10.99 I'm going to insert a dollar sign

before our price and that looks better feel free to choose some other unit of currency okay

let's add a sentence to display our GPA console.log your GPA is colon space we're inserting a variable we need

dollar sign curly braces we're displaying our GPA your GPA is 2.1 now if you need to

display the data type of a variable you can use console.log then preedee the variable

with the type of keyword what is the type of age age is a number type price is also a number type same

thing with GPA they're all numbers let's go over a different data type let's go over strings a string is a

series of characters let's say we have a user's first name to create a string you can either

use double quotes or single quotes personally I like double quotes then you can type in some characters like a first

name let's say my first name is bro feel free to pick your own first name I will display the type

of my first name variable and it says it's a string a series of characters then I will display my name

console.log first name and it is bro or whatever your first name is whatever you put here

let's include our variable within a template literal your name is add a placeholder

first name your name is bro what are some other examples of string maybe somebody's favorite food

favorite food my favorite food is pizza type in your favorite food

console.log you like at our placeholder favorite food you like pizza maybe if I like

something else like sushi well you like sushi okay another example of a string could be an email let email equals then

type in your email I'm just going to make one up bro

gmail.com console.log your email is email

your email is bro gmail.com let me make the G lowercase now an important thing with strings is that strings can contain

numbers after bro I'll add 1 two 3 so a string is a series of characters they can include numbers but we can't use

these numbers for any sort of math strings have a different behavior from numbers numbers we can use in arithmetic

Expressions strings not so much all right let's turn these lines into comment

then I will discuss booleans okay booleans are either true or false typically they're used as Flags

in your program let online equal true booleans are either true or false is somebody

online or are they offline this is either true or false I will display the type of my

variable online console.log type of online so online is a Boolean variable let's display our variable

within a template literal type in whatever your first name is bro is

online then I will insert a placeholder add my Boolean variable of online bro is online that is true if I

were to change this to false bro is online is false booleans are typically used as a sort of flag so another

example could be for sale is something for sale or not let's say that we are

selling I don't know cars is this car for sale I could set this to be true or

false let's console.log is this car for sale then I will add my Boolean variable

for sale is this car for sale that is true another example let's say that somebody

is enrolled in school like in college courses we could say let is student is somebody a student are they enrolled

this can be true or false console.log

enrolled colon space is student is the student enrolled in

classes that is true so those are booleans they're either true or false typically we don't use

them as direct output like you see here we usually use them with if statements to check something like if somebody's

online do this if not do something else is a car for sale if that's true then display the car if it's not then hide it

we'll have more practice with booleans when we reach if statements all right now what we're going to do is we will

close out a Dev tools we'll display some variables within our web page so let's delete everything we

have I'll create three variables let full name equals type in your full name feel free to add a space between

your first name and last name let age type in your age and

let student equals if you're a student type true if you're not in school type false

I am not in school anymore so I will type false we will go to our HTML file then add some HTML

elements I will add three paragraph elements so that's one 2 3 I will give my first paragraph an ID of

P1 then let's do the same with the other two paragraphs let's rename the second as P2 and the third as

P3 so to change the text content of an HTML element we're going to type document meaning the document of our web

page then we will get our element by its ID get element by ID then within a set of parentheses within a set of quotes we

will select the ID that we need let's start with P1 then add do text content to change the text content

then we will set this equal to a variable or a template literal let's begin with a variable so full

name our P1 element should display your full name let's do this with P2 I'm going to zoom out a little

bit P2 textcontent equals age it says that I'm 25 and then P3 let's display student or

better yet is student let's change that is student false I am not a student but you

might be though that might be true then let's display our variables along with some text using a template

literal let's copy our full name your name is add a placeholder place our variable name your name is Bro

Code or whatever your name is let's cut our age variable you

are variable age years old you are 25 years old and then let's cut is

student add a template literal let's say enrolled are you enrolled in

school add a placeholder paste our variable enrolled that is false I am not in school anymore more all right

everybody so those are variables it's a container that stores a value the variable behaves as if it were the value

it contains there's a couple different basic data types you have strings which is a series of text numbers and booleans

there's more advanced data types but we'll cover that later and well those are variables in

JavaScript yeah what's going on everybody so today I need to explain arithmetic operators because well

programming can sometimes involve a lot of M operand are values variables Etc in this equation 11 x and 5 are all operand

operators they can include but are not limited to addition subtraction multiplication and division in this

equation the addition sign would be the operator so there's a few things you should know regarding arithmetic

operators in JavaScript so let's begin let's pretend that in the scenario we are a teacher we have a group of

students let students equals what's a good class size maybe 30 students then I will

console.log my students variable and it should be 30 let's say that a new student joins the class and I

need to change this variable to increase students by one I can say students equals this will reassign my variable

equals the current value of students + 1 now we have 31 students now for subtraction that is the minus sign to

subtract a student we can reassign our variable students equals students minus one now we have

29 then we have multiplication which is represented by an asterisk we will double the number of

students we have students equals students as Risk 2 to multiply by two we have 6

students division is a forward slash we will split our class of students into two students divided two we now have

15 all right then we have exponents exponents is represented by double

asterisks what is students to the power of two 900 students that is a very large

class maybe it's a lecture or something in a college so students to the power of three that would be students to the

power of three would be 27,000 double asterisks is the exponent operator here's another helpful one it

is the modulus operator it gives you the remainder of any division so let's say we are going to divide our class into

two so modulus which is represented as a percent sign two well 30 divides by two evenly so the

remainder is zero if we had a class of 31 students well there's one remainder one

student students modulus 3 would divide my class of 31 students into three we would still have one student remaining

since we're reassigning students we would be replacing 31 students with the value of one if you're using the modulus

operator I would recommend creating a separate variable entit ly let extra students equal our students modulus 3 we

have one extra student just one okay that is the modulus operator there is a shortcut for writing

these Expressions because it can be kind of tedious to write the variable name twice so let's set students back to 30 I

will console.log students we'll use what is known as augmented assignment operators to increase students by a

number if we're reassigning it we can say students plus equals 1 or some other number students is now 31 if I were to

change one to be2 it's now 32 and 33 let's do the same thing with subtraction students minus equals

1 we now have 29 students multiplication students times equals 2 that would give

us 60 students students divided by equals 2 we have 15

students all right then exponents students to the power of equals 2 900

students then modulus students modulus equals 2 we have no remaining students 30

divides by 2 evenly so another place where modulus could be helpful is if you're determining if a number is even

or odd 30 is an even number divided by two the remainder is zero 31 is odd the remainder is one there's also the

increment and decrement operator there's a couple different ways to add one to a variable but you should be aware of all

of them to increase a variable by only one you can take the name of the variable then add Plus+ Plus+ is the

increment operator 30 incremented by 1 is 31 then there is the decrement operator which is minus

minus 30 decremented by 1 is 29 all right then lastly we're going to cover operator

precedence this is pretty important given a very complex equation such as this example in which order do you solve

each part of this equation so with operator precedence beginning with the left working our way to the right you

would solve anything with parentheses then exponents multiplication and division and modulo otherwise known as

modulus then lastly addition and subtraction let's go through the step by step let's see what the result variable

is I will console.log result so the result is 23 so if we were to walk through this

step by step let's solve anything with parentheses es starting from the left and then working our way to the right

there are no parentheses we can skip this step next is exponents there is one exponent here so we would solve 4 to ^

of 2 which is 16 then we will solve multiplication and division and modulus that's addition we

skip that we have multiplication 2 * 3 is 6 there is no more multiplication

division or modulus then lastly addition and subtraction 1 + 6 is 7 7 + 16 is our

result of 23 all right I'll give you a few more exercises how about this

equation the result is going to be six so there's no parenthesis no exponents we do have a modulus operator

here so we solve that first 12 modulus 5 gives us a remainder of two we have some division we would solve

that next 8 divid 2 is four then addition and subtraction the result is six all right here's a challenge

round the result is going to be 0468 we solve anything with parenthesis first 2 + 5 that is

7 then exponents 2 the^ of 7 I might need a calculator 2 * 2 3 4 5 6 7 that's 128

then we have 6 / 128 then we have 6 / 128 which is 046 875 and that is our result all right

everybody so that is everything you need to know about arithmetic operators you have operand which are values and

variables and arithmetic expression and operators there's also augmented assignment operators which is a shortcut

to writing these equations if you're you're going to reassign a variable then you have increment and decrement

operators to increase a variable by one or decrease it by one then with operator precedence if you're solving a complex

equation you solve each part of the equation following this order and well that is everything you need to know

regarding arithmetic operators and JavaScript yeah what's going on people so uh today I'm going to show you how we

can accept some user input in JavaScript generally there's two good ways of doing this the easy way is to create a window

prompt the professional way is to create an html text box of some sort and you'll likely need a button to submit the user

input let's begin with the easy way we'll create a window prompt the first thing we should do is declare all of the

variables we're going to use let's create a variable named username we'll declare it but not yet assign it then

when we assign it we can set username equal to then to create a window prompt we can type

window. prompt parentheses then within the parentheses

our window prompt can contain some text let's ask what's your username okay let's run this and see

what happens what's your username I will type in my username press

okay we have this variable username it will have a value but we should do something with it let's

console.log our username let's try that

again what's your username I'll type in my username feel free to type in yours let's check our Dev

tools and here is my username so that's the easy way to accept user input with this window

prompt you could assign declaration and assignment together if you want to you know that would also work now we will

accept user input the Prof profal Way by creating an html text box we will navigate to our HTML

file okay let's create an H1 element that says welcome we'll need a text box we'll use

a self-closing input tag I will set the ID of this text box to be my

text I'll create a label for this text box too because if we're a user we don't know what we're supposed to to type in

here I will create a label the text within the label will be username then a submit

button button the text will be submit I'll put this on a new line I'll

add a Break Tag maybe two to make it look nice for the ID of the button I'll set the ID to

be my submit let's see if this works this is a little Advanced when we click on this button we're going to

execute a function but we need to select this button we will access the document of our web

page get element by ID the ID that we're getting is the ID of the button my

submit So within quotes type the name of the ID follow this with DOT onclick

equals here we'll write everything we're going to do after clicking the button we need a function function parenthesis

curly braces everything between this set of curly braces is everything we'll do when we click on the button so first we

need a username variable outside of the function when we click on the button get the text from this text box we will

reassign our username then set this equal to the text from the text box we'll use document. getet element by

ID the ID that we're getting this time is my text we need the value of the text box

so follow this with DOT value all right then to test this let's console

log the username all right let's type in our username press submit then check Dev

tools yeah there it is okay let's replace console.log we'll change the text

content of our H1 element I will give this H1 element a unique ID let's say my

H1 we need to select my H1 ele El document. getet element by ID the ID was my

H1 we are changing the text content equal to let's use a template literal

hello username all right let's try this again type in your username press submit and

that should change the H1 element hello whatever your name is all right everybody so those are two different

ways to accept user input you can use a window prompt or you can use an html text boox and that is how to accept user

input in JavaScript all right so uh yeah type conversion type conversion is the

process of changing the data type of a value to another data type for example we can convert strings to numbers

numbers to booleans booleans to Strings numbers to strings booleans to numbers I think you get the idea why might we want

to do this well when we accept user input the data type of that input is a string if we need to use it for any sort

of math we need to convert it to a number here's an example let's say we have variable age I will create a window

prompt window. prompt we will ask a user how old are you I'm going to add one to our age age

plus equals 1 then console.log age how old are you let's say I'm 25 press

okay let's inspect our page go to console it shows that age is 251 when we accept user input it's a

string data type a series of characters by adding one we appended one to the end of our string we're not increasing our

age by one we're doing string conation we are going to convert our user input into a number and this is how so after

accepting our user input and before making any changes to it let's reassign age equal to and this is a function the

number function it will convert another data type such as a string or Boolean into a number then we'll place our age

variable within that function so now this should work how old are you let's say I'm 25 press okay

26 so that's the reason you may want to type convert because different data types behave differently along with my

age variable I'm going to display the type of age what's the data type how old are you 25 press okay 26 and it shows

that the data type of age is number if we removed this type conversion and then run this

again it shows that our age is 251 and it's a string which is not exactly what we would like that's a

reason why type conversion is important let me give you another example let's create three variables

let X let Y and let Z I'll show you what happens when we convert different values into different data types let's say x is

the word Pizza same thing with Y and Z I will typ Cast X as a

number then we need to place X within the number function I kind of want to see what happens when we try and convert

pizza into a number it's probably not going to go well let's convert Y into a string then Z will be a

Boolean let's console.log X as well as the type of X let's do the same thing with y and

z all right what's going to happen if you attempt to convert

alphabetical characters into a number that variable will be Nan which means not a number the data type is still

number though as you can see the word Pizza is already a string so converting it into a string really doesn't do

anything that's why for this line the value is still pizza and the data type is still a string if you convert a

string into a Boolean booleans again are either true or false converting the word pizza into a Boolean returns true and

the data type is Boolean so basically as long as there's some value here and you convert it into a Boolean it will always

be true let's replace pizza with zero what will happen we can convert zero into a number

it doesn't contain any alphabetical characters X contains zero it's a number Y is zero but it's treated as a

string Z contains true and it's a Boolean what about empty strings just a set of quotes typ casting an empty

string as a number is still zero we have an empty string for y then with our Boolean it's false why might you want to

typ cast a string as a Boolean that's one way in which you can check to see if user input is empty like did somebody

type something in if a user skipped user input it's it's most likely going to be an empty string then you can check to

see like if this is false then the user didn't type in anything and you can let them know what about a variable that's

declared but not assigned a value converting an undefined variable to a number results in not a number our

string is undefined and our Boolean variable returns false so that's the basics of

type conversion it's the process of changing the data type of a value to another it's pretty important when you

accept user input because when you accept user input it's a string data type at times you may want to convert it

to a number if you need to include that number with any sort of arithmetic expressions or a Boolean if you're

checking to see if that user input was completed we'll have more practice with this in the future and well that is type

conversion in JavaScript why hello so today I need to explain const const short for constants

are variables that can't be changed changed once you assign them in this example we're going to create a program

to calculate the circumference of a circle given a radius let's define our variables first we have Pi we'll begin

with using let then I'll show you the benefit of using const so let pi equals I'll use the first few digits of pi

3.14159 then we have let radius which we will assign later we'll ask for user input then let

circumference I think I spelled that right I can never spell circumference all right now we need to

ask the user what the radius is I will just use a window prompt radius equals window.

prompt enter the radius of a circle then once we have our radius when we accept user input it's a string data

type we need to convert our radius into a number by using the number function then once we have our radius we

can calculate the circumference by setting circumference equal to and here's the Formula 2 * pi * our radius

that the user enters in then once we have our circumference let's console.log our

circumference let's see if this works enter the radius of a circle I'll enter 10 press okay their circumference is

62.8 so why might you want to use a const in this program you may accidentally or somebody else may

maliciously change the value of a variable so that the program doesn't behave as intended for example somewhere

within my program I will set pi to be a new number pi equal 420.69 let's run this program again enter the

radius of a circle I'll enter 10 press okay and my circumference is 8,413 I may not realize that this is the

incorrect answer just for an extra security measure I can turn any variables that shouldn't change to be a

const a constant replace let with const and it is a good practice if you have any constants to make all of the letters

in the variable name uppercase so Pi is now Capital Pi hey this is bro from the future there's one thing I needed to

clarify that I forgot to mention capitalizing your constants is usually only done with primitive data types such

as numbers in booleans reference data types such as strings don't normally followed this convention you'll see this

in the next few upcoming videos Pi is a constant and we're assigning a number that's why I'm making it all uppercase

but if this was a string normally we wouldn't that is all let's try and change that variable again Pi = 420.69

so we have an uncaught type error assignment to constant variable so JavaScript won't let us reassign

constants once they are assigned once we can't make any changes to it once you declare a constant you can't change the

value and that's pretty helpful in a lot of circumstances it's an extra security measure what we'll do this time is

within our web page we will accept some user input via a text box we'll rewrite the same

program let's create an H1 element I will set the ID of the H1 element to be my

H1 and the text will be enter the radius of a circle I'll create a text box

input I'll set the type equal to text the ID equal to my text I'll create a label for this input

text box let's say radius I'll add a

button the button will say submit the ID will be my submit then I'll add to break

right after the text box to make it look nice let's get rid of console.log when we click on the submit

button we will execute a function we need to select the button let's take our

document get element by ID the ID is my submit follow this with DOT onclick

equals a function parentheses curly braces when we click on the button we'll execute any code within the curly braces

we can eliminate our window prompt we need to get the value from the text box again we can use document.

getet element by ID but the ID is going to be my text the text from the text box dot value get the value from the

text box box and we will assign that to radius then we will typ cast our input as a

number then we will calculate the circumference but since Pi is a constant make sure that the letters are uppercase

uppercase Pi once we have our circumference let's change an H3 element so let's add that

as well H3 the ID will be my H3 there will be no

text content then again we will get element by

ID the ID will be my H3 change the text content of this element to equal our

circumference okay let's try this the radius is 10 press submit and here is our circumference maybe this will be in

centimet so let me change that I'll use string concatenation and just add plus CM so 10 submit 62.83 CM if I attempt to

change the value of pi maybe I'll do that here pi equal 420.69

rerun the program 10 submit there doesn't appear to be a result so if we go to Dev tools go to

console we have that uncaught type error assignment to constant variable so again we can't change the value of a constant

there are more graceful ways of handling this we'll learn about that when we get to exception handling however this is

what we wanted we do not want to be able to change the value of a constant all right everybody so those are constants

it's just a variable that can't be changed once you assign it a value and well those are constants in

JavaScript hey what's going on everybody so in today's video we're going to create a counter program using

JavaScript HTML and CSS so sit back relax and enjoy the show all right let's begin everybody so what we're going to

do is start with our index.html file We'll add any necessary elements then we will style those elements with our CSS

file then lastly we will add functionality via JavaScript so let's begin with our HTML file within the body

of our document I will create a label to store the count so I will create a label with an

ID of count label the text will be zero it's a little small but that's okay we'll increase the font size with

CSS I'll add a break afterward with the Break Tag we'll need three buttons decrease reset and

increase so we have button one let's copy this button paste it two additional times the ID for the first button will

be decrease btn4 button the text will be

decrease then for the second button the ID will be reset button the text will be

reset then increase ID increase

button the text will be increase what I'm also going to do is place our buttons within a div

section let's let's cut our buttons then place the buttons within the

div I will give the div a unique ID of button container we'll Center align our button

container so it's in the middle of the window okay that is everything we need with our HTML file let's move to our CSS

file let's style the count label it's a little small right now I will select the ID count

label I will display the label as a block level element I will text align Center so it's

in the center of our screen let's increase the font size I tend to like to use the EM unit

of measurement the text will be 10 times the size

then let's change the font family pick a font of your choosing for this example I'll use

helvetica let's Center the button container that should surround all three buttons as you can see

here the ID was Button container text align Center okay the buttons should be in the

middle one thing I forgot to do uh let's actually add a class to our buttons too class

equals buttons there all right we will select the

buttons class I'll add some padding padding

10 pixels and 20 pixels let's increase the font size font size 1.5 em that translates to

150% let's pick a font color I'll just pick white then a background color for the

buttons background- color I'll use hsl values

how's that not feeling it that's pretty

good let's round the corners with border radius five pixels I'll change the cursor into a

pointer when we hover over a button cursor

pointer then we'll add a transition animation transition

background-color after 0.25 seconds then we'll apply the hover sudo class when we hover over one of the

buttons take our buttons class use the hover PSE sudo class we will change the back ground

color after a quarter of a second then change the background color to something slightly

darker yeah that looks good there should be a delay when you hover over one of the

buttons our HTML file is done same with our CSS now we need to add functionality because well these buttons don't do

anything I will individually assign all of these buttons so that each is stored within a

constant so const decrease button equals then we need to

select each button by accessing our document. getet element by ID what's the id we're selecting we will

begin with our decrease button all right then we need our reset button

reset button the ID is reset button then increase button increase button the ID is

increase button we need our count label okay then we will set

const count label equals then we need to get the of our count label so document. getet element by ID

count label then we will use let count equal

zero we'll be reassigning count we'll be incrementing and decrementing count with our HTML elements we do not plan on

reassigning them so we can set them as constants now we need a few functions three

functions one for each of these buttons decrease reset increase let's begin with increase so we are taking our increase

button that we assigned with the onclick attribute of this button set this equal to a

function what's it going to do when we want to increase this value of our count label let's increment count by one count

Plus+ then we will set the text content of our label count

label. text content equals whatever the count currently is let's see if this works it looks like I misspelled on

click all right let's see if this works yep every time we press the button our counter label increases by

one okay let's work on decrease really we can just copy this function

paste it let's change increase to decrease count minus minus save

everything and we should be able to increase and decrease then the reset

button let's copy one of these functions change decrease button to reset button when we want to reset we

will set count back to zero then update our count label with the current count which should be zero we

can increase we can decrease and we can reset then increase and decrease again

all right everybody so that is a counter program with JavaScript HTML and CSS hey what's going on everybody so

today I'm going to explain math math is a built-in JavaScript object that provides a collection of math related

properties and methods for example if you ever need the value of pi you would type math with a capital

m.p then let's console.log this console.log math.pi Pi is 3.14 and the rest of the

digits if you need e e is known as ul's number it's used for the base of natural logarithms we won't really using e in

the series but if you ever need it it's there math does give you access to a lot of useful math related methods let's

create a few variables let X = 3.21 let y equal to and let Z will be undefined if you need to round a number

let's say Z equals you can type math.round method Place whatever value or Vari variable you would like to round

within the round method let's round X store the result within Z then display z console.log z so 3.21 rounded is three

even there's also floor floor will always round down let's change 3.21 to

3.99 let's copy this line paste it change round to floor floor always rounds down so 3.99 rounded

down is again three to always round up you can use seal as in sealing the opposite of

floor c l let's change 3.99 to 3.21 3.21 rounded up is four then there's

truncate trunk short for truncate will eliminate any decimal portion 3.21 truncated is three another way to raise

a base to a given power is to use the pow method P let's raise 3 to the power of 2 so x

to the power of Y which would be 9 y to the power of X would be 8 there's a square root function

sqrt let's find the square root of how about 81 the square root of 81 is 9 if you ever need to find the natural

logarithm of a number you can use the log function math.log let's set X to be 10 the natural logarithm of 10 is

2.3 if you need to do anything with trigonometry there's s cosine and tangent functions

let's begin with sign s n within this function you will place radians I'll set X to be

45 so Z is going to be 0.85 so that's s let's do cosine which is

cosos 0.52 then tangent

T and that is 1.61 let's change X to be 3.21

again to find the absolute value of a number you can use the absolute value function

math.abs it's basically going to give you the same number but it's going to be

positive the absolute value of - 3.21 is 3.21 basically we're eliminating the negative

sign to find the sign of a number you can use the sign function s i g

n so the sign of - 3.21 is1 If This Were a positive number it would be one if it's

zero then the sign is zero here's a pretty helpful method we can find the maximum or minimum value from a set of

values or variables let's set Z to be one y will stay as two and X will be three I will create a new variable named

Max it will store the maximum value from these three variables math.

Max comma separate each of the variables x y z then display the maximum within our console.log method the maximum value

from these three variables is three then there's Min for the minimum let

Min do min so the minimum of these three variables is one all right everybody so that's math it's a built-in JavaScript

object that provides a collection of properties which was pi and d and methods such as round truncate power

methods related to trigonometry and Max and Min methods they're pretty helpful if you ever need them and well that is

what math is in JavaScript hey hey what's going on everybody so in today's video we're

going to create a random number generator but first I need to explain how to create a random number in

JavaScript let's store our random number within a variable which we will name random num to create a random number in

JavaScript we can use the random method of math math. random method this will generate a random number between zero

and one uh but it looks like we forgot to Output our random number so let's do do that with

console.log console.log random num this will generate a random number between zero and one it will give us a number

with a long decimal portion most likely let's say we would like to roll a six-sided dice I need a random number

between 1 and six not including the decimal portion so the first step is that we will multiply math. random *

6 what this will do is give us a random number between 0 and 6 exclusive now I don't want the decimal portion I would

like a whole integer we'll enclose this equation with the floor method of math math. floor then we will enclose our

equation so now we have oops it looks like I misspelled math it should be Capital there so far a random number is

going to be between zero and five so there's zero and there's

five but I need one through six well we can increase the minimum by adding plus one or whatever you want the minimum to

be so now that should give us a random number between one and six there's

six and there's one for a random number between 1 and 100 I can set the maximum to be 100 math. random * 100 + 1 so now

the number is going to be between 1 and 100 if you're looking for a random number between a certain range let's say

50 and 100 well we're going to change our equation just to make this easier to

read I'm going to set two constants const Min what's the minimum let's say 50 and the max const max will be 100

let's replace 100 with our maximum and one with our minimum there's one additional change we need to make for

example our random number is 139 we're multiplying math. random times 100 our maximum then adding an

additional 50 to it so one change we're going to make is that we will subtract our minimum from our maximum then I will

surround this portion of our equation with the set of parentheses just to force operator precedence now the random

number should be between 50 and 100 so depending on the range of numbers you're looking for you can change the minimum

and the maximum all right now with that out of the way let's create our random number generator let's go to our HTML

file I will create a button the ID will be my button the text on the button will be roll we will roll

a six-sided dice within our CSS stylesheet I will set the text of the body of our document the font family I

will set to be verdana cuz I like that font two to Center align everything to make this easy I will set text align

Center all right we're getting somewhere let's work on the button I will select the ID of my button I will change the

font size of the button to be three em meaning 300% I'll add a little bit of padding

within our button 5 pixels by 25 pixels and I will set the Border radius to be 5 pixels

just to smooth the corners we're also going to need a label so let's go back to our HTML file I will

add a label with an ID of my label within our CSS stylesheet I will

select the ID of my label then change the font size to be 3 em so be sure to save your CSS file save your HTML file

then within our JavaScript file we will need to get our button and the label we'll store those within some

constants const my button equals document. getet element by ID the ID of the element we're getting is my

button then we will need to get my label my label the ID is my

label let's set a minimum const Min equals I'll set that to be one as if we're rolling a six-sided dice const Max

equals 6 then let random num we'll declare a random number variable but not assign it

quite yet okay when we click on the button we'll execute a function we will take my button

with the unclick attribute I will set this equal to a function what's the function going to do it's going to roll

a random number random num equals math. random times our maximum we'll enclose this equation with

math. floor to round it math. floor then add our minimum then we will change the text

content of my label to display it my label. text content equals our random num when we click on the button it

should roll a random number uh what are we missing not a number oh okay it looks like I made a

mistake I forgot to add a set of print this is after random there we go I'm going to put the

number on a new line so within our HTML file I'm just going to add a Break Tag there we go let's save everything roll

again so I roll a 6 3 1 2 5 3 let's say we would like to roll three dice not just one we'll make a few

changes I will replace my label with label one for the ID then I'm going to add a break after

okay let's copy our label paste it two times we'll need labels two and three I'll also give the labels a class

of my labels we can apply CSS styling to an entire class to make it easy all right

within our CSS stylesheet let's replace the ID of my label with the class of my labels be sure to save all of your files

then within our Javascript file let's replace my label with label one the ID is label one

copy this line of code then we need labels two and three label two label three let's rename random num as random

num one copy it paste it two times then we need random number two random number

three within our function for our button change random num to be random num one copy this line paste it two times then

we need random number two random number three we'll change the text content of my label to be label

one equals random num one copy this line paste it two times change one to B2 then for the third line change one to

be three what we'll do now is generate three random numbers between 1 and six as if we're rolling three dice 232 361

225 all right everybody that's how to create a random number generator in JavaScript Hey so uh what's going on

everybody today I got to explain if statements so in JavaScript if a condition of our choosing is true we can

execute some code if it's not true we can do something else that's how to put it simply for example let's say we have

a user's age let age equals 25 to write an if statement we can type if a set of parentheses then a set of

curly braces within the set of parenthesis we can check a condition let's check to see if our age variable

is greater than or equal to 18 if this condition is true we can execute whatever code is within the set of curly

braces if this condition is true let's console.log a message you are old enough to enter

enter this site my age is 25 this condition is true we will execute this code within the curly braces you are old

enough to enter this site what if my age was 13 well if this condition is true we

don't do this we don't execute it we skip over it if you would rather take a different course of action if you would

rather do something else you can write an else clause

if this is not true we will do whatever is within the else Clause let's display a different

message you must be 18 plus to enter this site my age is

13 we will end up displaying you must be 18 plus to enter this site basically speaking if this condition is true do

this else if not do this instead it's kind of like a fork in the road which path are we going to take here's

another example let's say we have variable time time will be in hours in military time if our time is 9 as in 9