Web development broadly refers
to the task related
to your web applications
or web pages it basically adds
up life to your otherwise
ordinary web page.
Hi everyone.
Welcome to this full course
session on web development.
This will give you
a complete crash course and let
you know everything
that you need to know
about web development.
But before we begin,
let's have a look
at today's agenda.
So first we will begin
with the basic language
that you need
for web development.
That is HTML and then we
will move on and learn
how to add more styles
to your web applications
with the help of CSS.
Next up.
We will move on to the
JavaScript programming language
that will help
You know,
how you can add more motions
to your web pages now
once you're well-versed
with these programming languages
for web development you To know
about the jQuery library
and then we will move on
to the different front-end
Frameworks to begin
with we will learn
about the angular 8 framework
and then we will move
on to react JS now.
Once we are done
with the front end part,
we will move on to the back end
and have a look at node.
Js now.
Once we are done
with all these Frameworks.
We will move
onto applications such as
the mean stack application
and then the months
that application now
that you're well versed with all
of these programming languages
and their Frameworks.
We will see how to become
a full stack web developer.
But before this don't forget
to subscribe to Edureka's
YouTube channel
and stay connected.
Hi folks, my name is Aryaa
and I welcome you
all to this HTML tutorial.
So today we are going
to learn all about HTML.
So without wasting much time.
Let's Dive Right
In.
So the idea behind HTML
was a modest one
when Tim berners-lee was putting
together his first Elementary
browsing and authoring
system for the web.
He created a quick
little hypertext language
that would serve his purposes.
He imagined dozens
or even hundreds
of hyper text formats
in the future and smart clients
that could easily negotiate
and translate documents
from servers all across
the internet now HTML stands
for hypertext markup language
and it is the standard markup
language for creating web pages
and web applications.
It is used to describe
the structure of the web pages
using a process called
markup now HTML mostly
constitutes of elements
and these elements
are the building blocks
of any HTML page
and are represented by tags.
Now, let me just give
you a brief introduction
to the structure of HTML.
Now this is also called
an HTML boilerplate.
So firstly an HTML boilerplate
begins with the HTML tags,
which tells the browser
that this is an HTML page.
And this is where
it begins from.
Next comes the head tag,
which contains most
of the meta information
about the document the head tag
normally also contains the link
to the styling sheets The Fawns
that you might be using
on your webpage
and even the JavaScript
that you might be using.
Now the head tag also
has the title element
which specifies a title
for the document
and can be seen as
a text on the tab
that you open on a browser.
Now next comes the body tag,
which mostly
contends the content
that is visible
to the viewer of your page
and these contains
elements like H1 tags
or paragraph tags,
which are known by P tags
and they make up the mass
of your content Now
to create an HTML page.
There are a few steps
the firstly you need to open
any sort of text editor.
It could be notepad
plus plus notepad Sublime Text
or even Visual Studio code.
You have the freedom to use I
would text editor you want next
you have to write
up some HTML code
that you want to show
on your webpage.
And then you just save
your file as a DOT HTML
and to open the file.
All you have to do is just
view it on your browser.
Now.
Let me just give you
a quick demonstration
on how that is actually done
if you still not understood
that so let us create
a folder first.
So let's call
this folder HTML demo.
And now we're just going
to use Sublime Text
because that's my favorite
text editor out here.
All you have to do
is create a new file
and I'm going to be saying
that it's a HTML type.
Then you just fit
in your HTML boilerplate.
I'm going to tell my title
is going to be my first web page
and that is the title
of our webpage.
Now let's put
in some content into this.
So it's going to have an H1
which says this is
just some text
that save this this is going
to be saved into our HTML demo.
So let's open it.
Let's save it
as index dot HTML now,
once you've saved it all you
have to do to view it is going
to your folder and just
open it on your browser.
So as you guys can see the title
is written out here on the tab.
And this is our H1
that we just create.
Okay, so that's how you
basically create an HTML page.
So let's move on now.
There are some elements
that I want to tell you all
about which is very important.
So first is the doctype element.
So the doctype
Declaration represents
that the file you're working
is a document type
and helps the browser
to display web pages correctly
and it only appears once
at the top of the page
before any HTML tag
and the doctype Declaration
is not case sensitive.
Okay.
So this is what HTML
actually looks like now
before we move further
with some HTML coding.
I want to make you all aware
that a webpage is fundamentally
made up of three constituents.
The first is HTML.
The second is CSS
or cascading style sheets
and the third is Javascript.
Now HTML will only give
the structure of the web page.
It has nothing to do
with the styling
while CSS is completely
responsible for how beautiful
your webpage looks what colors
you're using as the background
how your images
are actually lined up
and all those sorts of things
to learn more about CSS.
You can always refer
to our CSS tutorial
on the same page
of Eddie record.
And thirdly JavaScript is
for making your page
much more Dynamic
if you're clicking on a button
your posts are being actually
submitted that's all
being done by JavaScript.
And if I want to learn
about JavaScript,
we also have tutorials for that
and you can surely
check them out.
Okay.
So now let's go ahead
and create some elements and see
how they look like
on an HTML page.
So let's go back
to our HTML page.
So this is what
an H1 looks like.
So let me just copy
this down now and let me show
you all the types of headings
that HTML provides us is
actually H1 through H6.
So H2 H3 H4 H5
and H6 salsa jeans.
I'm here at 6 H5 @ 4 3 2 now,
let's save it.
Let's go ahead
and reload our page.
So this is how the different
types of headings look like.
This is H 1 being the biggest
and at six being the smallest.
Okay, so that
was about headings.
Now.
We have some other tags also
that I want to make
aloe vera so there's a P
tag first soapy normally stands
for paragraph now paragraph
is basically what it looks
like and it normally
contains random text
or paragraphs of your web page.
And this is what they look like.
This is what
a paragraph looks like.
Okay.
So that was all
about adding a paragraph So
how do you add images
so you can simply add image
with the image tag?
And all you have
to say is a source now,
I already have a beautiful
picture of a Pokemon
that I really loved as a kid.
So let me just copy
that down into the folder.
Okay.
So now that we've copied down
our image into our folder.
All you have to do is give
the source now this can be
nine tails dot B and G.
That's the name of our image.
Let's go back to our page.
Let's reload it.
Okay.
Now you can also put
an attributes like height.
And you could see the height
is going to be 7 or 500 pixels
and then you can also put an
attribute called width and say
that's also going
to be 500 pixels.
Yeah, so that changes the height
and width of your image.
You can also make it smaller
by saying something
like hundred pixels.
So let me just show you
that save it.
Let's reload it
and yet now we have a much
smaller 90s of them now suppose.
You don't have a picture.
You can also put an ALT tag,
so just to say there was
supposed to be an image here.
So let's save
that now you will not be able
to see the alt tag
because our image is working.
Let's suppose I misspelled
the name of my image
and now you'll see something
like that out there.
So there were supposed
to be an image out here.
So it's showing the alternate
thing right we can also have
line breaks in our HTML.
So you do that simply
by saying / BR
and there will be a line break
between this word
Alam KO and laborious.
So, let's save that.
Let's cancel this out.
Okay, so now lamb Co
and laborious are
on different lines.
We can also make stuff bold.
So suppose you want to make
this first word bold
so you can go B. / B
and I'll make it bold
Yep.
Now alarm is bold.
You can also for making things
bold you can use the strong tag
and now let's sit.
This is also bold.
And now this is also bold
comes up right there.
Then you can change
the size of text.
So let's just create
some other text.
So it not so that it
done get cluttered up.
So we have tax like big and we
also have tags like small.
Let me just show
you the difference.
This text is big.
This is small student.
This text is Big
while this is small.
So let me just put
a line break here.
save that That's also put
a line break here.
And now let's put
back our image.
Yeah, this text is Big
while this is small now.
You can also put
in horizontal lines
inside your HTML.
I have to say as HR
and that'll put in horizontal
line out there right like that.
You can also put the width
and height out here so
wits there's no reason
to put a height
because it's not there and width
is going to be something
like 70% you can say 70%
and you have a line
that goes 70 percent
through the screen next
we can also put in links
into our HTML to suppose
you want to go to a site.
So let's say you want
to go to Eddie Rekha.
Now we can put some text
like say this is a link
to a website save
that spurred Hill
and now this will take us
to a Tracker dot go.
Yep.
So that's how it works.
You can also put
links on images.
So suppose we were to move
this text out here copy
this image from here
and just put it out here.
Now if we were to click
on the image will take us
to add your record on coke.
Okay, you can also add lists
into your HTML page.
So there are two types
of lists one is an ordered list.
So ordered lists
are numbered lists
and you can put in
list items like this.
So let's put in a bunch
of list items.
Okay, so let's type
in some text.
So this is a random list.
So list items are actually
going to be the things
that you're going to list out.
So these could be anything
that your listing our you could
list all your favorite dogs.
You can list out
your favorite chocolates
or anything like that.
Let me just show you what
that looks like.
Let's go back to our page
and this is what it looks like.
So as you guys can see
we have a list out here,
which says this is
a random list.
This is a random list
and just to make it
a little more creative.
Let's go and put in
some stuff like that.
So firstly let's put
an edge to out here.
These are some
of my favorite dogs.
Let's say I love some words.
I also love corgis.
I love huskies,
and I also love
golden retrievers.
So now we will have
an actually good list out here.
So these are some
of my favorite dogs now
if I were to just make
this an unordered list so we
could also have unordered list.
So this is how you create
an unordered list.
You just go ul and then
you put in your list items.
So I'm going to say so
let's put an H2 again
and these are some
of my favorite heroes in Dota 2.
So list item this
is going to be let's see.
I really love
playing Shadow fiend.
Then let's put
in some other Heroes
like storm spirit in Boca and
let's say Templar Assassin.
Let's save that and let's see.
So these are some
of my favorite heroes in Dota 2.
Now, if you see our H2 is
kind of indented that is
because we have put it
inside our list now
if you were to just
cut it out and put it
outside this region is
my lines and let's see.
So now it's probably showing
that these are some
of my favorite heroes in Dota 2.
You can also put in images
in these list items.
So suppose we were
to put in some images
of Shadow fiend storm Spirit you
would just put an image out here
and you would put
the source now,
I don't really have images
but you can also put
in the URL of images.
So let me just show you
how to do that.
So, let's see Shadow fiend.
It's going to the images.
Let's find something small.
Like let's say it's 300 X 300.
Okay.
So this looks like
a nice cartoonish figure
so you open this image
in the new tab
and we copy down this link
so you can see
the source is this link?
Let's save it.
Let's see if it shows up.
Yep.
And now this thing shows up
just outside shadow fiend.
You can also put in some styling
or some attributes
like it's a width is going
to be a hundred pixels
and height is going
to be a hundred pixels.
So let's save
that now and now it's much
smaller image of Shadow
fiend.
Now we have other types
of tags also,
so these are called div tags so
div tag stands for division.
So to divide your page
into separate parts,
you could say this
will contain the footer.
So footer tags are normally
coming in the end.
Now you can also have a div tag
in the beginning and this
could contain the header.
So these tags will
contain the header.
This is so let me just put
in some header so Is the head
of and this is the footer.
So this is the header head
is always come on top
and this is the photo.
Now you can also create
forms using HTML.
So let's go ahead
and create one.
So our farm is going to be
called a registration form.
Okay.
So now let's put our form
and a div first of all,
so let's give our div an ID.
So IDs and classes are actually
used to select stuff
or an SDM a page
when you're styling.
So to understand more
about ideas check
out our CSS tutorial
that if this ID form
or registration form
rather and let's go into our div
and create a form
or form will always stay
inside our form tags.
Now that we have done
that that's understands
the elements of a form
firstly we need an input.
So first input will be
of type text.
Let's say its name
is going to be first name
and will help placeholders.
I sound like this see REO
and we will always be requiring.
So if you say required
that means somebody will
if he's actually in putting
stuff into the form.
This is a mandatory field.
Okay.
So let's save
that and see so now we have
a registration form called Aria.
Okay.
So we also need labels.
So let's go ahead
and create one so label.
So for first name,
and this is going
to say first name.
That's gonna have a:
so now there's a label called
first name now we can do this
for last name also.
So let's control C control V.
So it's going to be last
it's going to be lost
and this is also
going to be last
and you want to put
a placeholder for pause
and this is also
a required field.
So now we have a last name
with this placeholder.
We can submit stuff into that.
Now form also takes
into important attributes.
I forgot it mention.
So one is the action
and the other is a method
now action is something
that will happen
when you submit this form
so you can run a script
something like script dot PHP,
but for now that's
for another session.
Okay.
Now there are other
types of inputs.
So let's see, let's create
another div now suppose you want
to input the gender also,
so, let's see,
let's first create a label.
And that's also
created input type.
So in vertebra type of radio
and it's going to be called
gender male and let's
also give us a value
of Choice One save it now
you want to label
and you want to give
it the attribute for
and you want to give
in the name of here.
So let's put in that so
gender male save
that and let's write
meal out here.
So let's see
if that now and let's see
what it looks like.
Now.
We have the sink
on meal we can check it
and we can uncheck it now.
Let's create for female
also and others.
So, let's see.
Let's call this female.
I'm just going to be
of type choice, too.
Now we have meal.
Yeah female if you see we
can actually select both of them
or all of them.
So that's not something we want.
Right.
So let's make this choice three.
Let's make this other Okay.
Now we have a gender submission
going on so male
or its female or saddle now,
we can't really
select everything.
So how do we actually solve
that so let's give
them all the same name.
So you can call it
gender Choice save it.
Now you either go
male ego female
or you go other you can't really
select the same thing.
So that's how you
make that happen.
Okay.
Now let's look
into some other types
of input types we
can taken so let's create
another div suppose you want
to take in the email address?
Let's go ahead and copy
that spread out here.
Let's say celeb will
for let's see.
First of all,
we need to change
this type to email
and we will also give
this a name of email.
Let's burn a placeholder instead
of a value and it's going
to be something like
let's put XYZ
after eight email.com Now
we have the sing going on.
So let's change this label
to email and let's change
the label to email too.
Now we have the sing going
and we can type in our email
and we will also need to type
in a password for registrations.
It's called this password also
make this password.
The type is going
to be password.
And let's remove a placeholder
because passwords don't
really have placeholders.
Save that and now you see
when you type in a password
you can't really see anything.
That's how you make a foam
that inputs a password.
Okay, so that was
how you taken emails
and passwords in a form now.
There are some other stuff
that I want to show you.
So let's Dive Right into that.
So let's create another div.
Okay.
So first of all,
we need a select tag
to select tags are used
for making selections.
So let me show you
how that works.
Firstly.
Let's give this a name
and it's called this birthday
or let's call this the month
now we'll also need a label
for this screen label.
So a label is for month.
It's called Birthday.
Now I select can
have various options.
So you're basically going
to put it in a bunch
of options out here.
That's the option now.
We need 12 options actually.
That's three.
That's six.
That's nine.
That's 12 lead these out.
Just redone my lines.
Now our options are
going to have values.
So our value will be
something like fine.
So let's say Chan Fab
March April May June July
August September October,
November and December.
And you can see
January 02 February.
Let me just create
this quickly March.
Let's save this now.
Let's see what this looks like.
So we have this birthday thing
and it has all
the months in there.
Okay now out here
if you see it already comes
with a default value
of January now,
you can also mitigate
that by putting in
another option called default.
Let's put another option or So
now that we have an option,
let's give this a value 0
and say select it to save old.
I hit reload.
This does nothing but you got
all these different values.
Now instead of just making
it blank you could say
that this could see month.
It's another sales month
and you could create something
similar for this also.
So four days,
you need to create 30 of these
and I hope you get the logic
of creating this thing now.
Now our form also needs
a button to submit.
So let's go
and create that also.
Let me show you
another type of input.
So let's say input
and the type will be check box
and the name will be agree
and let's put a label
for this a for agree
and I agree to all
the conditions of form.
No, we will have
this thing going
and we have a check box.
You can check it we could
uncheck it something like that.
Then all we need is an input
and on an input.
We don't need a button is
a button and you say submit
and you also have
to give this a type.
This is going to be
of type submit.
So once that's done,
we see this button
and we can submit it.
So if you go and submit you'll
see please fill out this field
because it's a required field
and that's all
that is dead forms.
So that's how you create
a form in HTML.
You can also create
tables in HTML.
So let me show you
how to do that.
Let's reload and make
this blank save it.
Yeah, so a tables are created
with table tags your table
and tables have tabled
at has okay,
so we can also create
tables in HTML for that.
We need table tank
now table comes with
the table header first of all,
so this will contain
all your table headers.
So suppose you are creating
a table for dogs
and the breeds the th dog
and you can say the dog
was has a name and breed.
So this has created
a table header now,
so let me just show you what
that looks like.
So now we have the dog named
and breed now we can just
simply go in and put
in some table rows.
So fortunate row you say TR
and in every row you will have
to put in some table data.
So for that you use
a table data tags, otd.
So let's say our dog is called.
So let's make this rather
dog owner name, right?
I had a dog and my dog's name
was Stoner Scott him Stoner
and Stoner was a street dog.
So let's just keep
the breed a street.
Okay, so that was one table
did a rule save it now,
we'll be needing
multiple table rows.
So let's just copy
that paste it multiple times.
So let's say my friend shabam.
He has a dog called Goldie
and it's a retrieval
and then I also have
this friend called ayushman.
Yeah the dog called Duke
and it's Husky and then
there's this guy called ishaan.
He has a dog called
Monster but it's a pug.
Yeah.
So now we have successfully
created a table and you guys you
guys can see dog owners are
Aria shubham ayushman
and ishaan their name
of their respective dogs
is total goalie Duke
and monster and the breeds are
Street retriever Husky and pug
so that's how You create
a table now with CSS.
You can add a border
to The Stables.
We just show you how that's done
with a little bit of CSS.
So it says style let's say text
/ CSS now out here you could
just this one little styling.
Let's say let's give our table
a border of 1px solid black.
Now, I table will have border
and we can also
give TD's a border
and in they're going
to have 1 PX solid black to so
now everything has a bottle
and our table looks much neater.
Yep.
So that's how you create
a table in HTML.
OK guys.
So now it's time.
I actually show you
how HTML can be
really polished sometimes.
So let's go ahead
and create a blog.
The first blog I've already
created the CSS out here,
so I'm not really going to be
explaining the styling part,
but we are going
to be creating our blog.
So let's go ahead and see how
that looks like.
So first of all,
let's delete everything.
Let's create a page now.
So let's call this blog.
Now we'll be linking
our style sheet out here.
So for licking a stylesheet
all you have to say something
like this and then we go ahead
and copy my style sheets.
The desktop we're doing
a stuff in sgml demo.
Let's copy this here right now.
Our blog dot CSS
is going to be here.
Now.
Let's go start creating our blog
so firstly let's put
everything inside a div.
Now this is going to have
a class called post
because I've used the class
to actually style
some stuff now that's done.
So let's have another div.
So this is going to have
a class called date
and we're going to be
putting in the date.
So let's say our date is going
to be October 24th 2018.
Now, let's say we have
a heading so let's say
a Vancouver my favorite City
Then let's put
in some paragraphs
because every article needs
a paragraph for paragraphs.
You're just going to be filling
it with some lorem ipsum.
Now a paragraph will have
a class called coat.
Okay.
Now let's reload and see
what's being made.
Okay.
So if you guys can see
a blog post is coming up now we
can also add some images
to our blog post.
So let's say let's
add a link first.
So we link to https.
W dot Ed u-- record dot go now.
We are going to use an image for
actually making it clickable.
So we already have an image
that's called image 1 dot jpg.
So that's there.
It's also put an ALT tag
out here just in case
it doesn't load up.
So alt and say
Vancouver image now,
let's put in
some another paragraphs.
So not a lot of Epsom
and more paragraphs,
I guess because this is
a block so let's make
it look like a block.
Save that and let's also give
it a horizontal line
to make it look neat.
Save this let's load it.
Okay, so we have
this nice looking article
and it has this image.
If you click on this image will
take us to Eddie wreck our site.
So we go to edit record
if you click that image,
let's add another article
into this just to make
it a little longer.
So let's copy down the stiff.
So let's change the date first
because let's say
we posted on the next day
as shins title.
So the my second
blog post save it.
Let's remove the image
from this one to make
a little different.
Yeah.
Now if you see ya this
nice-looking blog post going
on it has this horizontal line.
We have some code
out here and that's
how you can do stuff with HTML.
Hi guys, my name is audio
and I welcome you all to the CSS
tutorial in this tutorial.
We'll be covering
from the basics of CSS
to some Advanced CSS
which includes animation.
Okay.
So before we actually start
with coding our own bit of CSS,
let's go through some
of the basics.
So what exactly is CSS?
Well CSS stands
for cascading style sheets
and is generally used to control
how HTML tags and elements
are displayed on your screen.
So this means basic styling
of your web page
is controlled by CSS.
Now CSS was actually
made to solve problems
that were introduced
in HTML 3.2 now HTML
3.2 gotten some new attributes,
like font color
background color,
which generally was put
into styling of element
on a web page.
Now while this did add some very
very needed functionality
into HTML 3.2 it cluttered
up your code as a developer
and media life pretty miserable.
So to keep the structure
of your web page,
which is The sgml and to make
the styling a different
aspect CSS was made by w3c.
So w3c stands for the World
Wide Web Consortium.
And CSS till date is still
being maintained by
the w3c developers.
Okay, so that was
a general introduction to CSS.
Now, let's move ahead.
So this is the basic
syntax of CSS.
You basically have
selectors which selects
or targets the place
that you want to attach
your styling to then you
have basic properties
and value pairs.
Now, you can include your CSS
into your HTML with a link tag
while putting the href
attribute as the file name
or you can do some inline CSS,
but that's not
actually recommended
because that's the problem
that we are actually
trying to mitigate
by putting CSS as
a different file.
Also, if you don't want
to create another CSS file,
you can do some internal CSS
by putting in some style tags
in your head tag and just
writing some normal CSS to it.
Okay.
So now let's see
the different type
of CSS selectors.
So these are all
the different type of CSS.
Electors and basically
a selector is a way
of targeting an element
on a web page.
So the star selector
selects all the elements
and applies the CSS
that you would apply to it.
And then if you would say div
then it would apply your CSS
to all the divs now div
comma P will apply
to all the dips
and paragraphs div
space p will put your styling
to all the paragraphs
inside those now going
through all the CSS selectors
is a pretty cumbersome job.
So I recommend
that you go through
this page on w3schools,
which has all the different
types of selectors
and the different types
of pseudo selectors
all this shit out.
So this will very much help you
when you're doing your own CSS.
So always keep
this page open now just
for basic sake let me just tell
you about pseudo selector.
So we also have pseudo selectors
which is defined
something like this.
So pseudo selectors include
stuff like overactive visited
and stuff like that now suppose
you are hovering over an a tag
so you can say there is supposed
to be some specific styling
when you're hovering over it.
So how would you do that?
You would just say a colon hover
and then you would actually
specify The Styling
that you want.
Now you could also
find all these types
of pseudo selectors out here
and it's all listed out here.
So a visited like select
all visited link
something like that.
Now I also want to make
you aware of the Box model
that is very much used in CSS.
Now Box model has four things
the content padding border
and margin so content is
a basic content of the web page
that you want to show to
you your general audience
and the padding is space
between your body
and the content itself.
The border is a line
that can be of any size color
and width and then
there's a margin
which is this distance
from the edge of the screen
to the bottom.
Okay, and now the Box model
looks something like this.
So the content comes in
between then comes the padding
which is between the border
and the content
and then there's the margin
which is between the screen
and the Border
itself the screen Edge
and the bottom, right?
So that's all
the Box model works.
Now.
The last bit
of Basics is CSS units,
so there are four kinds of units
firstly we have the pixel.
So pixel is represent
any pixel on a device
so you could say something like
font size is equal to 25 pixels.
So it'll make it
actually 25 pixels.
Then there's also points
which is mostly used
in print media and all
you need to remember
to use points correctly.
That's 72 points equals
1 inch now the last two types
of units are relative units now,
these are relative
to your current font size.
So 1e M or hundred
percent is actually equal
to your current font size.
So if you want something
to be double your font size,
all you have to say is 2E M.
So these are
how relative units work in CSS.
Okay.
So that was all the basics
of CSS and how you select staff
and all the units now,
let's get ahead and code
some of our own CSS.
So far this time,
I've actually created
a bunch of HTML pages
and we are going
to style these SEO
and Pages by adding
some CSS into them
and this will stand as
good practice for CSS alone.
Okay.
So for the first page we have
this page called page 1 dot HTML
and it's a pretty basic page.
Let me just open it up
and show it to you guys.
So this is what it looks
like without any sort
of CSS being attached to it.
Now.
We are going to create some CSS
and we're going to try
and practice first
of all selecting stuff
in different ways possible.
Okay, so firstly let's do
some very random CSS.
Okay, firstly let's star get
all the divs in this HTML.
So how would you
actually do that?
Well, you'd say div by going
selectors and let's actually
save this as a CSS file first
so that our syntax
is colored properly.
Okay, so that's a div.
So that's how you select
any element and CSS
now suppose we were to say back.
Own color rather
just background.
It will be posted
and the text or the color
of the text will be white.
So now everything inside a div
will look like that.
So now let's just save
this speech one as you see
if that's page one dot CSS.
Let's reload our page
and everything that is inside.
The div now has a white text
and it also has
a purple background.
Okay.
Now, let's see how we
actually select IDs.
So we select IDs with the hash.
So we have an ID
called coat out here
if you go and see so,
where is that thing gone?
Okay.
So this paragraph
out here that you see
as the ID called coat.
So we're going to select
that and put in some
of our own CSS.
So let's see now
that we've selected our ID.
We can say suppose we want
to change the font family
so we could say font family is
where Donna and you
could also put in alternate
font families just in case
where Donna doesn't
In your system,
like kills hands fine.
So that's how you set
up your phone family.
Let's also set
the color to be black.
Let's see what changes now.
So this is the code that
I was talking about.
So that's van should change
now, let's reload.
Oh, yes.
Now the font has become
verdana and that's
what we exactly wanted.
And the text is
also black knife.
Okay.
So how do we select classes now?
So if you go here and see
we should have a class
called movies, right?
So all these have a class
called movie all these a tags.
So let's select them.
First of all to select
the class you say dot
and then you say the class name
now we could put in
some random CSS into this again.
So let's make the color.
Let's keep it white and let's
make the background steel blue.
Let's see.
So where are movies?
Let's see where the
movies actually exist.
Oh, yeah DOTA Splinter
Cell and God of War.
These are the movies.
So this should now
change let's save it
and now they have
a background color of Steel
blue and they have a text color
of fight and that's exactly
what we do find out here fine.
Now, let's try out
some other types of selectors.
So suppose in the span out
here we have this idea
called Auto so what
if we only want to Target
that what would we see
so we could say expand
and hashtag author now,
you could put any type of CSS.
So let's say text transform.
So this is how you transform
any sort of text
and you can see uppercase now
the auto will be changed
to uppercase out here
and this is the auto
the pope Alexander park
now watch that now,
it's just uppercase
and we have selected it
with the selector called span
and hashtag autumn.
We can also do some other
kinds of selecting.
Let me just show it to you
so we can select the allies
of the unordered list
or the ordered list.
So our skills is the ID is
the ID of skills.
So let's select
that now so we have skills
and we could go the ordered list
and then the Li
and what we want to say out
here is color will be purple.
We can do the same thing
for the unordered list
to let me just copy
that down put this here say
unordered list and let's say
we change the text color
to white save
that let's reload up H.
So we first of all
let me uncommon this.
Now let's say
that again reload our page
and see the differences now
since we had given
it a purple color.
It's now all purple and let me
just put background or white.
So that you can see it.
Yeah.
Now these are purple
and these background
white we can do the same
for the unordered list
to let me just uncomment
that let me also give
it a background
of purple or actually,
let it be like that.
Let's just make it blue.
Now SAS & Hamill
have turned into blue
as you see here.
This is the blue thing fine.
Now that was selectors.
Okay.
Now let's go ahead
and select some other stuff.
So what if we want
to select all the paragraphs
that are off to the H3 tags?
So if you remember we can do
that by saying it's 3
plus b and let's say
we want a background
of black and some text color.
That is white so color flight
not being very creative
with my CSS at this moment
because this is
just about selecting.
So, let's see how that reloads.
Yep.
Now, we have a color of white
and the background of black
and that only selected
the paragraph just after the S3,
which is my
favorite video games.
Okay, we can also
select every paragraph
that has a class by just
saying something like B
and class we don't even
need to specify the color
or I mean the class name
so you go background.
Let's say we want to give
a gray background.
Let's see all the paragraphs
of the class.
So this is the only Paragraph
with the class.
Now, you can do the same thing
for IDs just say idea out
here and let's see
all the paragraphs.
It's an ID.
So this is the only
paragraph it's an ID.
Okay.
So now that we're done
with selecting stuff.
Let's go and actually see
how text can be transformed
with the use of CSS.
Fine.
First of all,
I already have a page
created for that.
So this is going to be our page
that we are going to use to see
how Texas transform
if you see I have an ordered
list with all the types
of text Transformations
or the text tilings
that I want to show and we
also have a paragraph out here
which will show
the basics box elements like
the borders margins and padding.
So I'm going to demonstrate
that through this PID
out here, right?
So let's get started.
First of all,
let's create our CSS file
and in the CSS file,
we're going to save it
and we'll call it page
2 dot CSS, right then.
Yeah, it's connected
as page two.
So let's get started.
So first of all,
let's star get
this ID with lorem.
So lorem ipsum is just
some Latin paragraph
that is normally used
in web development to fill
in spaces with text
where you can always come back
and delete that text and fill it
with something more meaningful.
Now we are going to be using
this lorem ipsum thing.
So it's in a paragraph tag
with an ID of lorem.
So let's go ahead and select it.
So we are going
to select it with the help
of the ID call it Lauren.
Now.
First of all,
let me just show you
what the page looks
like without any CSS
attached to it.
So this is what
the page looks like, right?
So this is the part
that we are going
to Target right now.
First of all,
let's give it a background.
Of black let's make the color
of the text white lets
me show you what
that looks like.
Okay, right.
Now, let's give some borders
and pairing its first
of all to give a porter
we could say we use
the Border act for property.
Then we give three parameters
the type of the bottle
the size of the body
and then the column
and you do it something
like this 3px solid red
now apart from solid.
There are a lot
of types of borders
and those include dashed
dotted rigged and many more.
These are the ones that are just
from the top of my head
so you can try at them out
and you can find other types
of CSS body just
by going to Google
and saying CSS border types.
So these are all
the types of bottles
that you get and you
can definitely check them out.
It's impossible to show
everything in one
video like that.
So, let me just show
you the solid tip.
So let's save it and
let's see what kind
of board we actually get.
Let's go This town.
Yeah.
Now we have this neat little
border of three pixels in size
and resin column.
Now, let me just show you
how taught it would look like.
So this is what brought it looks
like and this is what -
looks like fine.
And this is what - has.
Okay.
Now let's also give this thing
some padding now padding exists
between the content
and the bottle.
So I just explained
the Box model
when we were discussing
the basics of CSS.
So I hope you remember that so
for padding there are
four parameters actually
the right top left and bottom
so you can Define your Paddock
something like this.
You can go 13 pixels 13 pixels
13 pixels and 20 pixels.
Now, these are just
very arbitrary numbers.
But what I want to explain is
that this first part will mean
that the stirring pixels
of padding from the top
and then we move
via in a clockwise fashion.
So this is on the right.
This is in the bottom.
So 13 pixels of padding
on the bottom and 20 pixels
of padding on the left now you
could also This really easily
if you want to give equal amount
of padding suppose.
Now.
This means that there
will be 13 pixels
of padding on the top and bottom
and this second part would mean
that the stirring pixels
of padding on the left
and the right and
if you just put one digit
that means there's 13 pixels
of padding all around now,
let's go and put
these different padding's
around lorem ipsum.
Now, it looks much neater.
We can also put a margin
so let's put a margin
and the margin also
works in the same way.
So suppose you
would say five pixels.
That means it would give
a five pixel margin all
around your content.
If you were to put
10 pixels and 20 pixels.
This means that 10 pixels
of margin on the top and bottom
and 20 pixels a margin
on the left and right
and there's also
another key word
that I want to make you aware
of and that is auto.
So what Auto does is it gives
equal amount of margin?
However, you specify it
so out here it will give
10 pixels of margin
on the top and bottom
and equal amounts margin
on the left and So,
let's see how that works.
Yep.
So that's how it changed it.
No, that was all
about the Box modeling.
So let me just remove this part
from the HTML and let's remove
this part from the CSS.
Now as you guys can see I have
this ordered list out here.
First of all,
let me reload the page.
Now.
I have this ordered list
out here which shows us all
the types of styles
and weights and sizes
that I'm going to be showing
right now and this will include
a lot of the units
that we discussed like Em's
points pixels and percentages.
So let's move ahead
so to select these
I'll be using these IDs.
So let me just remember
the first varieties.
It's normal italic oblique
and small Gap.
So let's go ahead
and create them firstly.
Let's select our normal ID and
say what are we going to try
and show you is font style.
So all you have to say
is font style is normal.
So normal basically means
that the font style will be
normal instead of something.
Lift then I think we had italic.
So you go font-style:italic
then we also had oblique.
So we go font style oblique
and we also had small caps.
So let me just see that again.
Yep, it's small cap.
So you go small cap.
And what are we
trying to show in?
Small-cap is the font variant?
So font variant small caps.
Let me just reload and see
how that change stuff.
Okay.
So font-style:normal
just stays normal
while italic and oblique
are almost similar then
informed variant small caps.
This is how it would look
like at first letter has
a bigger font size
and the last have
a smaller font size
but everything is in capital
and next is the font weight.
So, let's see the IDS.
It's normal bold Boulder.
So let's go with that now
so firstly we have normal.
So font size is the size
or weight it sweet so
font weight will be normal.
Next part is
bold Boulder lighter.
Okay.
So we select Boulder like
that we go font weight is bolder
and we can say again.
Let's Force after Boulder.
It's bold.
Okay, we so w bold
and you go font weight is bold.
Let's see how
that changes stuff.
So yeah
bold is bold
and font-weight:bold.
ER is slightly more Bolder
while font-weight:normal is
absolutely normal right time
for some more.
So the next is the font size
which goes from extra
large large medium small
extra extra small.
So let's do that.
So first is extra extra large
and this is the font size
of you're talking about
so it's extra extra large.
There's also extra large.
So extra extra large look
something like this
while only extra-large look
something like this fine.
Then we also have large so
font size will be large.
That's fun size large next.
We have medium small
and extra extra small so medium
small and extra extra small.
So this is going
to be fun size medium.
It's going to be font-size:small
and this is going to be
font size extra small.
So let's see how
that changes stuff.
So this is extract the small.
This is small
and this is medium.
Now the next thing
that we're going to see is
how points work.
So our size is going
to be 25 points.
So instead of just doing that.
Let me just change the extra
extra small and let's say it's
25 points should remember
that one point is
around 2 inches.
So that's how font size extracts
are small would look like
if it was 25 points,
then we could also say
the font size is 150 percent.
So that shows us
how percentages books
where hundred percent means
the current font size look
at it change and that's
how one fifty percent
means the next thing
that we want to
show is line height.
So let's say what is the ID.
Let me just check the ID.
So the line height IDs are
line normal high 25 points.
So let's just select one line
normal and this is going
to have a line height
of normal specific:
save it up and that's
how line-height:normal is.
That is the normal line height
now you could say
Line height is 25 points.
And that's how it
would change also.
You could say your line
height is around 25 GM
or just five Yen.
Let's say that and that's
how it would change you
with more with EDM
with one year being
the constant font size of you
're using or you could say
line height is 200 percent
that is basically twice of what
our line height or font is
so that's how it
would change right?
So that was all
about text styling.
Now, let's move ahead and see
how positioning and
stuff takes place in CSS.
So for positioning I have again
gone ahead and created
this Space 3 dot HTML.
So in here we will be
including a CSS page
called page 3 dot CSS.
So let's go ahead
and create that.
first of all,
we have to set this
to CSS save it as page
3 and let's get started.
First of all,
we have three types
of positioning in CSS
absolute fixed and relative.
So first of all,
I'm going to show up
Salute positioning to you guys.
Now before I show
up Salute positioning,
let me just show you guys
how texts and stuff
can be centered first of all,
so let's start doing
some random CSS.
So first of all,
we are going to Target
this ID called container.
So let's go hashtag container
and let's go to background
some random color.
So for Color Picker,
we just go Color Picker.
Let's go see this background go.
Okay, that's the
background we chose.
Let's also give it
some borders body
will be 2 pixels solid
and black we can also set
up a border radius.
So border-radius gives
you a coke bottle.
So you can say border radius is
around 5 pixels.
Let's see.
Now, let me just open
up the HTML file
that is concerned
and this moment so
this is base 3.
Okay.
So this is what some CSS now,
let me just uncomment
that CSS first.
So this is what
our page would look
like without any sort of CSS.
Now.
This is what it looks
like with the CSS
that we just included
now to make you aware
of how box radius works.
Let me just
uncomment that first.
Let's comment it out.
The box really should not work
and we should get ya a knife.
You see let's zoom
in out here see
that this border
is pointed suppose.
We don't want that to happen.
Let's remove that first and
let's uncomment this save it.
Let's reload.
And now we have this slight
little curved body
which looks much neater.
Okay.
Now we can also Center stuff.
So neat way to do
that is let me
just show it to you.
Let's take this
part called centered.
Now the center it
let me just give you
the first background
to make it look different.
So this background
will be lets say 89 C FF 0
that's our color.
Let's see what
a color looks like.
So that is the color
that you're gonna center.
Now.
Let's say our wits is going
to be we can set the width
of elements like this.
So you save it is 50%
and then you go
margin is going to be Auto.
So what is auto do input
equal margin on all sides.
Let's reload our page.
Yep.
And now it's Center
we can also Center
without actually centering
the element we can just
Center the text
by just saying text line
and Center fine.
Now that will remove
the background and just
keep the text out here.
So that's why exactly
what we wanted and that's
how you align your text.
Okay.
Now let's move ahead
with absolute positioning now
absolute positioning means Being
based on the document itself,
which means this
whole web browser.
So our sir is basically
the document that you
are actually manipulating.
So it's called
document object manipulation
if you've heard of that term,
so let's go ahead and let
me just show you
how absolute positioning works.
First of all,
we have this element
called top left
and we're going to try and put
it on the top left.
So let's select that first.
So you go top left and
let's give it a background.
Okay, that'll be the background.
That's also good Bordeaux.
So let's pour the be
one pixel solid and black.
Let's say now
this position something
with absolute positioning.
All you have to say is
position is absolute.
Now.
Let's also keep the widths
around 200 pixels
and the height also
around 200 pixels.
Let's save it.
Let's see how Stuff changes let
me just zoom out.
Yeah, so that is our element.
So this is what top left and
bottom right is going to look
like now we are going to try
and select this element and put
it in the bottom right
of this pattern.
So let me just show you
how that is done.
So to select
that I've already created an ID
for it and it's called bottom
right?
Let me give it
a background of white.
And you say the position
is absolute now.
We want to change the position
to actually inside the element.
So we have to say is going
to be 0 pixels from the bottom
and also 0 pixels
from the right.
So since it is had absolute
positioning it's going
to position this inside of this.
So first of all,
let's go to background white
and also make the color black.
All right,
and now we have this right
when we won't now.
There's also something
called these that index.
So Z index is what comes first
on your screen basically,
so if you have multiple things
that are stacked
on top of each other
with absolute positioning
the one with the most
said index will be the one
that is shown on top
so you can set as that index
like this and say
the set index is 5 training
with the z-index
of for will actually come
underneath this thing, right?
So that was all
about absolute positioning.
Now, let's go ahead
and do some fixed positioning.
So for fixed positioning we
have this ID called fixed
which contains a paragraph
saying I'm staying right here.
So let's select that first.
Let me just remove all the stuff
so that it's
not cluttered anymore.
Let me reload the page say
that reload it and
that's also I'm staying here.
First of all,
this is what is going
to change fixed positioning.
Right?
Is that for we call
it fixed position?
Okay.
Now first of all,
all you have to say is
position is going to be fixed.
Let's make it more prominent by
giving it a background of black
and a text color of white.
So let's see.
This has become black
and position is fixed.
What do I do?
If I'm scrolling?
It just stays there.
It doesn't really matter
what I do to this thing.
Okay, so that was all
about fixed positioning.
Now.
The next thing
that we're going to see is
relative positioning for that.
I already have
two elements created.
So let's say these are the divs
which says this
is going to be relative.
So relative positioning
as I was just saying
is positioning based
on the relative position
of the element.
So, let me just show
you so relative on now,
let's go to background first.
So let's just select some color.
Let's make the screen
the screen out here.
Okay, that's going
to be a color.
Let's go to Bordeaux
from of one pixel
solid block and let's say
the height is going to be
r a hundred pixels.
Now, we're going
to select another element
and position it relative
to this element.
Okay.
So that is this element right
out here is going to be relative
to so to set something
with the position
of relative all we have to say
that the position
is relative and the -
rest of the CSS
is just arbitrary.
So let's say left
not padding left.
So you want to position
it somewhere left of it.
And the positioning
is going to be relative.
So 20 pixels from the original
positions 20 pixels to the left
from the original position.
I mean and you could say
from the top it
would be 30 pixels.
You could also say
negative 30 pixels move
it the other way around.
Let's give it background.
I'm already given
in the background.
Okay.
Let's go to
background off yellow.
So you see background equals
yellow and you can also get
border and say 1px solid blue.
That's good blue background.
Okay.
So this relative layout is going
to be positioned relative
to this thing fine.
Let's just reload and see.
Yep, and that's
how relative positioning works.
Now.
This might just not look neat
at this moment,
but I'm trying to drive
a point home fine.
Okay.
Now let me just see
if I have dog dot jpg because
as a PNG file called Edge Rekha,
so let me just
show you something.
First of all,
let me just remove
everything from here.
Okay.
So now that are
things are less cluttered
and lets me just rename
this now to the image
that is already there.
So Eddie record or PNG
and Eddie record dot PNG fine.
Let's save this.
Let's see what
our page looks like now.
So this is what it looks like.
Now, you can float stuff like
images to the left and right.
So just select the image tag
and suppose you say float
them to the right.
These will float everything
to the right now.
That's how you position stuff
or images with the float tag.
So I guess I was all
about positioning of stuff now,
let's move ahead.
Okay.
So in this part we are going
to be learning about overflows.
So for overflows
what we can do let's say let's
go back to page 2 dot HTML
and we have this text out here
or this unordered list
and this list is
pretty big right.
First of all,
let's open up
a new page or rather.
Let's open up.
Okay.
I'm just close these out.
So let's save this
as page 2 dot CSS rather.
Let's just call it
something you first of all,
let's set this to CSS right save
it and let's call it overflow.
Now what I want to show you
guys something really cool.
So let's select
the ordered list.
So that's where
we're going to select.
Let's say it has width
of round hundred pixels.
It has some padding
on the top, right?
So let's get some padding
of 10 pixels and 10
pixels all around Rado.
Let's give it a margin
of hundred pixels and auto
so bring it right to the center.
Let's see there was page
to that were fiddling around
with so this page
2 dot HTML now,
let me just replace this
with overflow dot CSS.
Let's see now.
Yeah.
So this is what it looks like.
Now if you see the scroll
through this list
is quite cumbersome
because you have
to actually scroll
like this get a background also
background is going to be black
as I just love black
and the color of a font is going
to be quite see how Change.
Yep.
So this is what it looks like.
Now.
What if you do and say
Max height is equals
to 500 rather only 200 pixels.
Yeah, so that doesn't
really tell much so
if you say or flow is auto
you got a scrolling bar.
Or you could say
or flow is Kroll.
Let's remove this Max height.
Now you see we have these little
scroll bars out here and that's
what exactly overflow
does is basically
shows the items
and you can scroll through them.
Yeah, basically like that.
So if you were to say
that the width is
only suppose 50 pixels.
Let's say it's even smaller.
Yeah, so that's
how I know you have
this scroll bar and lets
you scroll through stuff.
So that's how overflow works.
Okay.
Now let's look
at some pseudo selectors
or some pseudo classes
that we can select and style.
So first of all
that we open up the page
that is going to be
responsible for that.
So we have this page out here
that I've created
and it also has some new tags
that you might be seeing.
These are some HTML5 tags.
So header tag now of tags
and then the main tag,
these are just some new tags
that you see in HTML5 and you
can also Target them to css3.
So targeting them
is pretty easy.
But what I want to show
is something pretty cool.
Let's save it first.
Let's create a new page.
Let's call it.
Right.
So let's save this first
as page five dot CSS.
Okay, so now it's time
to practice some more CSS
and we'll be doing
it on this page
that I have created.
So this page is kind of
a big page to be honest.
It has quite a lot
of photographs Carlo
links a few images.
Also, I guess and they use
a lot of the HTML5 tags
that have been newly introduced
like the header tag
the nav ID or the nav tag,
the main tag,
we have section tags
and a lot of other tags
like these now these tags
can also be selected
with the help of let's say css3.
That's what we are learning in
our let me just remove this part
because we won't be
needing that now,
let's go ahead and save
our content and let me just show
you what this actually looks
like on the web page.
So let's go ahead and open up
page 5 and this is what it looks
like on a web browser rather
without any CSS attached to it.
So let's transform this thing
with the help of some CSS.
So firstly we've created this
page called page five dot CSS,
and we've already attached it
to this page out here
with the link tag
and the href attribute.
Let's get started.
So first of all,
let me just actually make use
of some pseudo selectors.
So we have already
discussed you the selectors
while going over the basics.
Now, let me show you
how they work.
So a hover is going
to Target all the A Links
while we are hovering over them.
Now when we are
hovering over them.
We want the background
to become black
and text becomes light right.
So let's save it.
Let's reload.
Now if you hover over these
the background becomes black
in the text becomes white right
now the same thing can be done
with a lot of other selectors
like this active.
So when you click on a link
that means it's going
to turn like that.
So let's save it.
Let's see.
Let's reload our page.
First of all now you see
when we hover nothing happens,
but once you click it,
it becomes that black
and white kind of thing,
right we can also
do this for visited
and that will actually
change the link
when once it's been visited.
So if we go and do
this open link in new tab, well,
it's not working out here but
if there Actually a database
connected you would actually
see the student now suppose
we want to select our body.
Let's go to background.
First of all get out
the Color Picker.
Let's give it
an ice cream background.
Okay, and that's going to be
our background for the body.
Now.
We also have a div
with the ID of rubble.
So let's go ahead
and select that first.
So we say rapo now,
let's give it some CSS
so we can say margin
is going to be 0
and auto now whenever
you see a 0 you do not need
to actually specify the units
so we can just do that.
We will go to background color
of white then we will give
it a bit of round 800 pixels.
Give it a height
of around 2,000 pixels.
Okay.
Now let's save
that and let's see what
it looks like know.
So this is what it
has turned to know.
We can also do some more stuff.
So let's select some HTML
5 elements like the header tag
and let me just show you
that CSS still works
as we wanted to so let's give
it some simple padding:0 pixels
on the tops your pixels
on the right
and we want to get
some 10 pixels on the bottom
and your pixels on the left tube
see what changes now
we got a little change we
can also select stuff
like with the 80s
as I just showed you now,
let's select the navigation
which has the ID of horse nav.
Let me just check if I'm right.
Yep.
It's called horse.
Now if it's n being Capital now,
we can say stuff like so there's
also the display attribute
this shows how elements
will be displayed now,
they can be blocked
or inline block
which means it will be converted
into an inline element.
Now we could say display
is All cooked and you could just
give it some background just
to make it more apparent.
So let's go to
background color block
and make a color white.
Let's see.
Yep.
That's how it's selected.
Now.
You can also give a pseudo tags
like this one out here
like visited to ID student.
So let's say
once we are hovering
over the navbar.
We want this to happen.
So let's save it.
Now if you only hover
over it will change happen.
So that's how that works.
Now let's go over and see
some word spacing now
word spacing is used
for mostly specifying the words.
So let me just remove
some stuff from here.
First of all,
let's remove all this right.
Let's remove the header tags
and we just need the spot
where we have all
these paragraphs.
So I'll be targeting
the first paragraph to show
you all the word spacing.
So it's going to be this one
out here right here fine.
Let's save it.
Go ahead.
Yo reload the page.
This is what it looks like.
Let's remove everything
that we have already created and
let's just select parallel one.
I hope that's what it
was called out here.
So it is called Power one indeed
now we can go word spacing
and just say let's say
let's go 10 pixels
between the words.
Right.
So the spacing
between these words
in this paragraph
should change now
that we've saved it.
It's go ahead and reload.
So yeah.
Now you can see
that the word spacing
for this this out here is
much more different now,
we can also do letter
spacing the same way.
So let's select
paragraph to for that.
So for letter spacing all we
have to say is letter spacing
and then we can say
something like 10 pixels.
Now, this was specified letters
and how they're spaced.
Now you can see it looks
this horrible thing
is having 10 pixels
of their spacing also put
some word spacing into this.
So, let's see how that looks
like spur word spacing
of 20 pixels make
this even more ugly.
Yep.
So that's where it would look
like with word spacing
and letter spacing.
So that was just
for experimentation purposes
and you can use that whenever
you feel free to okay.
So another property
that I want to make you
all aware of that is
in CSS is actually a property.
So the clear property makes sure
that nothing actually
appears before it.
So in this case
the footer tag,
which is right about here,
which says only the copyright
part now it is shown here.
This is a footer tag that
we are talking about.
So you want to say
something like let's say
so you can say clear
and both so Tell
you specify Cleo's.
Okay.
So let's go to background
color of black.
That's also say the color
of the text should be white
just to make it more prominent.
Yeah, so nothing actually
appears to heard that so that's
how you use clear now.
So there's also styled types
also list style type.
So let me just see we have
these lists out here.
First of all,
which says random
123 random one, two, three.
Now, let's say first of all,
let's convert this into
an unordered list so find all
that's going to replace
that with unordered list, right?
I just want to show it
with unordered list first.
So let's say let's select
all the URLs and let's say
list style is going to be none.
Now if you see out here,
we have these bullet points
and now we don't okay,
so you can also do these
with ordered lists.
So let's go back
and let's do control
and you LL find all that.
Select them.
Let's make them
all Wells ordered lists.
Let's see now.
Oh, well doesn't work
with list type.
None.
If you just realized now
we can do something
like Alpha lower Alpha.
So let's see
that how that works.
Okay.
So for lower Alpha we
are say list-style-type,
please remember that.
That was my mistake right now.
Okay, if you have
to select the oils again,
Now you see
that we have these lists types
that is saying but small caps.
Now, there are other stuff like
lower Latin lot slower Latin.
So let me just show you what
that looks like save it.
Okay, that doesn't really change
because I don't think
I'm Latin installed,
but we can also go Greek.
There's a bunch of stuff
that you can do.
It's pretty fun.
So I have Greek install
now it goes Alpha Beta
gamma instead of ABC
and that's how you
can change stuff.
You can also change the position
of the list style.
So let's start position.
You could say outside.
So let's see what that means
and don't really
change much out here.
But that's one of the properties
that I just want to show.
Okay.
Now you can also Place contents
before an element.
So let me just show you
how to do that.
Let's clear all
of these things now.
So let's say we want
to select power 1 and say
so this is going to be
a pseudo selector again.
So you say after you say content
and your content is going
to be lets say address a all
these ad rates are going to be
before this little
thing out here.
So let me just show
you the change.
Yep.
So since we said after it has
all these attributes after but
if you say before this
how to change so now
it's all before them.
Right.
Okay.
Now let's go ahead and see
how we can use
the end child elements.
So for that we're going to
select our UL again, actually.
Let me go ahead and delete
everything first of all, okay.
So let me create
another HTML boilerplate
and this is going
to be called list.
First of all,
let's say we have an unordered
list with a bunch of list items.
So allies all around.
Let me just copy that down
and paste it a few times right?
So now we have all
these list items here.
Let's just fill them up
with some random text.
Okay.
So let's just say
something random like cats.
So let's save this.
Let's go out here.
Now we have these
things called cats.
Okay.
So what if we want them
to have alternate paragraphs,
I mean alternate
background colors.
So first of all,
let's go ahead
and select the allies
and give them a background.
Let's say this gray color.
That I have selected
ff7 ff7 ff7.
Now.
You see we have okay,
this doesn't seem
to be working allies.
Looks like I've
deleted my link tag.
That's why the CSS
was not working.
So let's see now we have that.
Okay.
So first of all,
let's go back and change
this to ff7 ff7 ff7.
Right?
This will give it
this gray color
that you see out here.
It's also give the width.
Off around 360 pixels
so that will bring it there.
Let's also give it a margin
of hundred pixels from the top
and equal on the side spring
to the center right now suppose
you want to say hell I and child
and you could say
something like do
n so this will select
all the even child's
and you can say they have
a background color of white.
So, let's see how
that changes things for us.
Now, you see that all
these things out here have
alternating background color
where it's grape.
I grieve I'd rewrite and that's
how you select all
the even chance.
Now, you can also
select the first child
by saying first child
that we do not really need
this to encounter.
And now only the first is black
you could also say last child
and not the last you'll be white
That's How Stuff changes
with CSS, okay.
Now you can also
change first line.
So let's go ahead
and change our HTML up a bit.
So let's create a paragraph
and it's going to have
some lorem ipsum in it.
So, let me just show you
something really cool.
Let's lead all of this stuff.
Let's select our paragraph
and we're going to say
the cereal selector called
first line and let's say
text transform uppercase.
So let's reload
that first of all,
let me just comment this out
just to show you what the page
looks like without any CSS.
So this is our page
without any CSS and let
me uncomment this now save it
and there you go.
The first line has been
completely made uppercase
now instead of first line
you can also say last night.
Lash line and
that will transform
the last line to uppercase.
You could also say something
like first letter and okay,
so just to show you
that it does indeed work.
Let me just reload this
without any CSS first.
Okay.
Now you see
that lorem ipsum begins
with the lowercase L. Let me
just uncom this out save it.
And now you see
that the first thing is
a capital you could also change
it to say stuff like deck size
or other font size and say
a hundred pixels
that the first letter will be
hundred pixels big and that's
how you can do stuff like that.
Okay.
So another thing is you
can also change the pointer
or the cursor.
So let's see
when you're hovering
over a paragraph.
Let's say we
and hover first of all we want
the background to become black.
We also want the color
to become white and we
want the cursor becomes pointer.
So, let's see.
So you're hovering over it.
It becomes his hand like thing
and when you go out
it comes back normal.
So that's how you can change
the cursor also now,
let me show you all something
called box Shadow first of all,
so let's remove
this cursor part.
So without the cursor
looks something like this.
Let's remove the
whole were tagged.
So that's always there, right?
Okay.
Now let's also change
this to the gray color
that I really like and
that's all the changes to Black.
So this is what
it looks like now.
Let's give it a bit
of around 400 pixels.
So this is what it looks like.
Now, let's also Center it
so that I can show
you some cool stuff.
So margin, let's say
zero and Otto.
So this is going to center it
on the top of the screen now
that it's centered.
Okay.
So this is what our thing looks
like now suppose you were
to give it a board.
So water is a really neat.
So 2px solid black.
So this is where bar looks like
but there are other stuff also
like a box Shadow.
So this is our box
Shadow books takes
three parameters so ones that x
and y axis and not really
in that order is XY
and Z axis and then
it also takes a color.
So let me just show you
how that happens.
So suppose we say zero X
zero Y and let's say 3 pixels
on the Z axis rather 5 pixels
to make it more prominent
and then takes an rgba
of 0 we want to make it
really really invisible.
So 0.5.
So that gives it
a half a paucity.
Now you can see this is
really neat little Shadow going
all across our So
that is what box Shadow does
it's a neat little trick
for when you don't want to use
a border or something like that.
Now other than borders
that also outline see
an outline is black in color.
So outline completely negates
our box Shadow and you could
also say outline equals none.
So let's remove that now
because box shadow
looks really neat.
Yep.
Okay.
So now let's talk
about text decorations.
So since we have some text
already going up,
let's decorate it.
Now.
There are a few kinds
of text decoration
that I want to show.
So the text decoration
let's say so first say is line
through put a line
through all of the content.
So now it's all strikethrough.
It also say something
like over line or underlined.
So let's see that underlined
will underline your text.
Yep, and over line
as you might have guessed well
over line our text now
everything has a line
on top of it fine.
Now we can also set
the visibility of our text
or any other tag to be honest.
Visibility so let's check out
all the other visibilities
that are there.
So do that always go
on Google and type
visibility and CSS and let's see
the visibility property
and how it goes.
So you must understand
that knowing everything
in CSS is kind of impossible.
So you should always
have a go to or a backup.
So my backup is normally
W3 school and they have
everything regarding CSS
and its properties.
These are all the properties
that you want to go through
and I'm mostly going
through the most important ones
in this tutorial
that you may use in your
day-to-day projection topics.
But sometimes you
might need the rare ones
like counter reset empty
cells Flex Flex paces
and all these stuff and you
can always go back to w3schools
and go through them.
Now you can say
visibility is visible
or something like that
and should make it visible.
Yeah, right.
So that was all about
the miscellaneous types of CSS
that we were handling.
Now let's go ahead and see
some gradients and
how we can create some beautiful
gradients using CSS.
Okay.
Now before we move on to create
Ian's let me just show you
some white spaces or some more
text Transformations, right?
So I already showed you all
these texts transformation
that's capitalized as lowercase
as over lines through uppercase
in online now capitalized
we'll just capitalize it
so I don't think I'm going
to show that to you guys.
Now, let's close
these two pages out here.
Let's create a new CSS file.
And first of all,
let's set this to CSS.
Let's do it and let's say
it's going to be paid
six dot CSS No, I'll tear
if you see you have a bunch
of white spaces right now.
Let's see how you can handle
white spaces using CSS.
So there is a thing called
the ID called White space
pre I think that's exactly
what it's called White space pre
yep.
That's select that
and you could say
white space is pre let's see
how that changes stuff.
So first of all,
let me load up a six
for you guys.
Right.
Let's remove the CSS save it.
Let's reload it again.
And what we are actually
targeting is this spot
by space will be preserved.
Right?
So wide space will be preserved
now go ahead and comment
that save it and let's reload
now see the white spaces are
in the HTML is preserved.
No, white spaces can also
be handled in other ways.
So there are two things
that I want to show.
So let's select this thing
called Never wrap never wrap.
Right and we say
that the white space
is going to be no rap.
So, let's see how that looks.
So first of all,
this is what we are actually
targeting this lorem ipsum part
out here and it's
somewhat like this
and that see how it changes now
and now you see that goes
completely out of here.
So no wrap it
doesn't wrap it around.
So you also have pre-wrap.
So let me just show you
how that works.
So I'm going to be targeting
this part out here
with these weird kind
of fight spacing.
So, let's see.
Preserve rap so with
preserve wrap you go pre-wrap.
Okay, and that's the property.
So let's see.
Yep lorem ipsum run
the rap has been preserved.
Okay.
Now you can also set
up the direction.
So let me just show you
how that's done.
So we're going to select
these two things are left.
Right and right left.
So hash left right
and also control C and
let's make this right left.
Fine, let's remove all
the stuff for now and
let's move everything
before right left
to have you removed that.
Let's remove this.
Let's save it see.
Okay.
So this is what it looks
like right now and all
you have to say is
direction is L to R.
So that means left
to right now here you see
direction is RTL and see
how that changes stuff.
So I prefer right left
and I prefer left to right.
So that's how it's working fine.
So that was all about white
spacing and directions.
Now, let's move on
to gradients and animations.
This is going to be
the last part and the most
interesting part in my opinion.
So gradients are
those beautiful backgrounds
you see on most websites
and generate your gradient.
You can always use this thing
called creatine generator.
So this gradient generator
out here is a really
nice created generator.
You have to select the direction
and you select any calls.
So I've already selected
a gradient out here.
It's going to
create this gradient.
Now, let's see repeat
7 right now.
Let's select the body tag.
Let's close this off.
Let's close this off
or save this and let's
create a new page.
First of all and this
is going to be our CSS.
So we are save it and say
page seven right now.
We select our body
and just based on the let me
just explain how this happens.
So there's a linear gradient
and there's also another thing
called radial gradient.
So I'll just show you
that now the stakes
in a few parameters.
The first is to the right
that's Direction and this is
how the colors will change.
So let's just see
how that works.
First of all,
let me comment this Out I mean
just open page seven for you.
If you see it's going
to be a blank page.
Okay, this is a gradient.
I'm sorry.
Let me save that.
Right?
So this is what it looks
without a gradient
and you already saw her looks
with a greeting but let
me just shoot you again.
This is where it looks
with the gradient.
Now, you can also set
the background with other stuff
like image for that you go URL
and you can paste in the URL.
So let's go and search
for a beautiful image.
I really like Dragon Ball Z.
So Goku Super Saiyan 3,
so that should be a good image
to save as a background.
So let's see this looks
like a really nice image.
So you go here.
Let me just save this image
as so this is going to be Goku
and it's going to be saved
in desktop and CSS tutorial.
We Goku dot jpg,
right so you can say
Goku dot jpg or ight.
Now that saved let's go
back to our page
and it should have
a picture of Goku Okay,
so And work I think
I got something wrong.
Let's go and analyze
that so open up
our CSS tutorial.
Okay, so it's a JPG file
and not jpeg.
So that was our mistake
small mistake nonetheless.
And now we have
this picture of Goku.
Now you can also set
the background repeat.
Let's close this off
say background repeat
and you could say no repeat
and will not repeat
the background anymore,
or you can say
background repeat'
is going to be let's check out
all the background repeats are
actually available now
background and Pete.
So if you're going to background
repeat' and see the properties,
you can just try yourself.
So you can repeat it
according to the Y axis.
You can repeat it
according to the x axis.
So, let's see how that works.
So repeat X,
so if we say that I think it
should repeated on the x-axis
like it was or you could repeat
it on the y-axis and taking
that will show about here,
but let's see.
Yep.
It's not repeating
on the y-axis.
So that's how background
repeat' also works.
So we've covered that too.
Now.
We've also covered
the gradients now it's time.
We do some radial gradient now
if you remember,
let me just go back
to the gradient part.
So if you have
a radial gradient,
all you have to say is
that it's a radial
gradient out here.
And read gradient
doesn't really need direction
because it's going
to be radial save it Paige.
Let's reload it.
Okay.
Now we have agreed already.
Now, you see all
these lines going in but
if I just zoom out you can see
that it starts from the center
and spreads out
where it's white on the side
and white on the sides.
So that's our
radial gradients work.
Okay.
So now that we've
covered the gradients,
let's go into admission.
So I think animation is
most interesting thing
that you can do with CSS.
So we have selected the div.
So first of all,
let's give div a border.
Hmm.
So this border is going to be
Do pixel solid and black now?
Let's get a background begin
with let's say it's going
to be a Fred now.
This is how you do
animations and CSS.
Okay, so before
animations actually,
let me show you
how you can move
this thing around.
Fine, so there are some stuff
that I want to show you guys.
So let this be let me just show
you what this looks like.
So let me give this a bit first.
It's going to be 400 pixels
or other 200 pixels
and the height will
also be 200 pixels.
Now, let's see.
Okay, we have this div out here.
Let's make a little bigger 500
and fire save it.
Yeah, it's also make
this much more prominent.
Let's go to 10 pixel background.
I mean 10 pixel border
and now you see we have a really
prominent Square out there.
Now, let's try some really
interesting stuff.
So let's say div
and when we hover
over the div you want to scale
this so scale and let's say
you want to scale.
Okay, so that's not
how you scale first.
You say transform
and how do you want to transfer
you want to scale it
and you want to scale it twice?
So when we hover over it,
it should scale twice.
Let's reload.
And as you see
it scaling twice now,
we can also transform
some other stuff
like this so we can rotate
so we can say Rotate 45 degrees.
Let's see when I hover
it rotating 45 degrees.
You can also skew it.
So skewing is how it works.
Let's see you can ski
at 20 degrees to the x-axis
and 10 degrees to the y-axis
save it and this is
how it gets queued
is the skewing works.
You can also translate stuff.
So just let me show you
how translation work
so translate and let's say
you want to translate it
20 pixels and 20 pixels.
So, let's see hover over it
and it translates
a little it's translated
around 120 pixels just to make
it more clear 120 and 120.
Let's save that.
Let's reload this
and you see that now
it's translating so much
right?
So that's how translate works.
Okay.
Now that I'm sure you scale
rotation skewing and translate.
Let's see we can also set
up the transitions.
So we're transitions you
can set up a lot of stuff.
So now that we're done
with transitions,
let's go ahead and
see some animation.
So for animation,
I'm going to be actually
targeting this div out here.
So let's actually
style this div.
I've given it the width
of a hundred pixels
and a height of hundred pixels
the background of red
and a border of three pixels
solid and black let's say right.
Let's see what that looks like.
That's what it looks like fine.
Let's zoom in a bit now.
All we need to do is actually
set up some keyframes.
So we do that
by saying keyframes.
Now, we named our key frames.
Let's call it anime
and we have to set up
actually what it will look like
at different points in time.
So we do that by saying 0%
and it'll have let's say
a background color
or Fred and then
it'll move the soul of we
want to move it in the Square.
So let's say it'll be
not padding rather just be
0 pixels from the left
and from the top.
It's going to be 0
Let's let's save
that copy that down.
Let's base out a bunch of times.
Now we want to say is
this is going to be 25.
It's going to be 50.
It's going to be 75
and this is going to be hundred.
Let's save that.
Let's change their colors.
So this is going to be yellow
first then change to Green
some pretty basic colors
blue them and in the end,
we'll change it to Red.
So that brings us back
to the original position.
That's first also move it
by 300 pixels then let's move
it 300 pixel both ways.
Now, it's only going
from 300 pixel this way
and the end comes back
to the original position now to
use this key frames animation.
We have to give
this animation name.
It's going to be
using that animation
with the keyframe steam anime.
Now, we can say
the animation delay
is going to be two seconds.
You can also see how many times
it's going to be iterating
so you can say that I hundred
let's save that.
Okay, so our animation
is not working
because we haven't
said the positioning.
So now let us just save
this and let's say our position
is going to be relative.
Let's save that.
Let's uncomment our animation.
Now, you see
that our animation will work
as we intended to do.
So after 2 seconds
our animation starts working
and this will just
keep going on and on
if you want to actually
repeat that animation.
There's a way you can do
that and that is with
the animation iteration count.
Let's see when I
traded a hundred times.
Let's reload.
Let's wait for two seconds
and voila our animation
will keep going on and on and on
so that's how you animate
stuff with CSS guys
and that brings us
to the end of this tutorial.
Hi everyone.
This is the lake are from
madurai car in today's session.
We are going to discuss
about the most
popular programming language,
which is Javascript.
So without any further Ado,
let's get started.
Now.
Let me run you
through today's agenda.
We're going to begin
with what is Javascript
what it can do various
JavaScript Frameworks and
how it's used with HTML and CSS
to build a creative website.
Next.
We look at the benefits
of JavaScript and why
you must learn it.
Finally we're going to look
at a few fundamental concepts
like variables data types as
arrays if-else statements and so
on we'd also be running
basic JavaScript code snippets
on Visual Studio code,
which is an editor used
to run a JavaScript.
All right guys,
let's get started
with our first topic.
So what is Javascript now,
the first thing
that pops into your head
is probably it is Java.
So guys, let me tell you
that JavaScript has absolutely
nothing to do with Java.
So, why was it name JavaScript?
Well, it was sort of
a marketing strategy when
JavaScript was first released.
It was called mocha.
It was later renamed to live
script and then to JavaScript
when Netscape and son
did a license.
Amen, now, let's not get
into the details of that.
Now.
What is Javascript
in simple terms?
JavaScript is a language
of the web.
So basically every browser PC
and mobile phone
understands JavaScript.
It's like a universal language.
So what is Javascript used
for it is used to make
web pages more interactive.
Let me tell you that majority
of websites use JavaScript
and all major web browsers have
a JavaScript engine
to execute it.
Another feature is that it's
an interpreted language,
which means that it
doesn't have to be compiled
like languages such as C
and Java this makes
it a lot easier for us
because we can just run our code
and we don't have to run it
through a compiler.
Now another important feature
of JavaScript is
that it is mainly a
client-side scripting language.
Thanks to JavaScript Frameworks.
You can now run JavaScript even
on the server side.
So let me tell you a few more
things about JavaScript.
So where does JavaScript run
JavaScript runs on a browser?
So all you need To do
is open up your Google Chrome
or Internet Explorer and start
running your JavaScript.
All right.
So how do these
browsers run JavaScript?
So these browsers have
a JavaScript engine
embedded into them.
Now this engine will just
convert your JavaScript
into machine language
and then run the code.
All right moving on.
We all know
that there are hundreds
of programming languages a new
languages are being created
every single day and among these
that are very few
powerful programming languages
that bring about big changes in
the market and let me tell you
that JavaScript is definitely
one of them JavaScript
has always been in the list
of popular programming languages
and developers are falling
in love with this language.
They practically use it
everywhere the use it on the web
mobile servers applications.
And even in iot now,
this is probably why it's
the most popular language
in the world according
to stack Overflow
for the sixth year
in a row JavaScript
has remained the most popular
and commonly used programs.
Ming language now,
let's look at a few common
applications of java script.
So what can JavaScript do
JavaScript is known mainly
for creating beautiful web pages
and web applications an example
of this is Google Maps.
So if you want to explore
a region or a specific area
in Google maps,
all you have to do is click
and drag with the mouse
and what sort
of language could do
that you guessed it.
It's JavaScript.
Next JavaScript is also used
in smart watches
an example of this is
the popular smart watch maker
called Pebble Pebble
has created Pebble dot J's,
which is a small
JavaScript framework
which allows a developer
to create an application
for the pebble line
of watches in JavaScript.
So a lot of developers
have actually built
Smartwatch applications features
and such things using
the JavaScript up next
we have websites.
Now, let me tell you that most
of the popular websites
like Google Facebook Netflix
and Amazon make
use of JavaScript.
That websites.
I think that's enough proof
for why you should
be learning JavaScript.
Now among other things
like mobile applications
digital art web servers
and server application.
JavaScript is also used to make
games isn't that amazing now?
We are all aware
that the browser has not been
a traditional games platform.
But recently it has become
a robust host four games.
A lot of developers
are building small-scale games
and applications using
JavaScript and I'm sure all
of you can do it too.
It's quite simple.
Now, let's talk about some
popular JavaScript Frameworks,
which are the most
favored platforms for developers
and business in two days time.
Angularjs is Google's
web development framework
that has exploded
with popularity in recent years
angularjs provides a set
of modern development
and design features for
Rapid application development.
Let me tell you
that a lot of developers
swear by this framework
because it has a rapid
development Pace another top.
Group framework is a react.js.
It stands behind the user
interface of Facebook
and Instagram showing
off its efficiency
in maintaining such high
traffic applications despite.
The fact that react has
a higher learning curve.
It makes application
development straightforward
and easy to understand it
also performs very good
in search engine optimization.
So guys by now,
all of you are aware
that JavaScript is used as
a universal scripting language
in browsers mainly
on the client side using it
on the back end to save time
and build expertise is one
of the major ideas
behind the meteor.
So finally front-end
developers can also work
on the backend comfortably
with meteor without switching
contacts between Java
python PHP and whatnot.
So it basically gives
the flexibility to use
one language everywhere.
I'm sure you all have heard
a jQuery before whenever someone
wants to extend their website
or the application
and make it more attractive
and The make use
of jQuery now this Library
transforms the whole web
into an entertaining experience
a fun fact about jQuery is
that over 70% of the world's
leading websites have something
to do with jQuery companies
like WordPress Google
and IBM rely on jQuery
to provide a one-of-a-kind
web browsing experience.
Now anybody who's heard
of JavaScript knows
that it has something to do
with HTML and CSS?
So what is this relationship
between these three now,
let me put it down
to you in simple words.
Now think of heads
together Mel with stands
for hypertext markup language
as a skeleton of the web.
So basically had three ml
is used for displaying the web.
Next CSS is like our clothes
we put on fashionable clothes
to look better.
Similarly.
The web is quite stylish.
It uses CSS
which stands for cascading
style sheets to look better
or for styling purpose.
Then there is Javascript
now JavaScript puts life
into a I page just
like how kids move
around using the skateboard
the web also motions
with the help of JavaScript.
So JavaScript is basically
for interacting with the web now
before getting into
the advantages of JavaScript.
Let's look at a few
common websites that
a building the JavaScript
and JavaScript Frameworks.
So we have Amazon
which is an e-commerce website.
I'm sure or if you
have shop from here,
then there's PayPal
there is YouTube.
We all are addicted to YouTube.
There is eBay
Netflix and Reddit.
So guys, this is enough proof
that JavaScript is
a very important language
in such a beauty companies
and Brands make
use of JavaScript.
It means that it has
something really nice
about it or something.
Very Advantage is
about it with this in mind.
Let's look at a few benefits
of JavaScript now,
it's quite easy to learn.
In fact, it's one of the
simplest programming languages.
It is not have a strict syntax
and it's totally readable.
You don't have to be
some hardcore programmer
to learn JavaScript.
Let me tell you
that it is a week type language
unlike the strong
type programming languages
like Java and C++
which has strict
rules for coding.
Now.
The next feature is PDF guys.
It's all about being
faster in today's world.
And since JavaScript
is mainly a client-side
programming language.
It is very fast
because any code functions
can run immediately instead
of having to contact
the server send a request
get an acknowledgement
and then wait for an answer.
All right now JavaScript comes
with a rich set of Frameworks,
like node.js angularjs react
and there are hundreds
of such Frameworks earlier
in the session I discussed about
how efficiently these Frameworks
are used to build web
application server applications
and perform different tasks.
JavaScript framework is one
of the major reasons behind
the popularity of JavaScript.
Now, the next Advantage is
that it makes web pages
more interactive.
So guys, we are all attracted
to beautifully designed
and interactive websites
and JavaScript is the reason
behind Such attractive website
building such interactive
websites not only makes
the web prettier.
It also attracts leads
and customers to
e-commerce websites.
So like I mentioned
earlier JavaScript is
an interpreted language
that does not require a compiler
because the browser
interprets the JavaScript.
So all you need is
a browser to run JavaScript
and you can do all sorts
of stuff in your browser
without the pain of setting up
an environment score editors
downloading compilers
and then learning
how to use them.
So instead of all of this you
can just open up your browser
and start running JavaScript.
So among many other
advantages is the fact
that JavaScript is platform
independent JavaScript
is supported by all browsers
like Internet Explorer
Mozilla Firefox Google
Chrome Safari Etc.
So any JavaScript enabled
browser can understand
and interpret JavaScript code
so you can run it
on any platform.
All right.
So now that you have a good idea
about what JavaScript is
and how it works.
Let's get on
with the coding part.
I'm going to cover
a few basic programming concepts
of JavaScript and these concepts
are quite similar
to the C language.
So let's get started.
So guys, let me tell you
that every browser has
a JavaScript engine
and we can easily write
JavaScript code over here
without any editors or tools.
So this practice is not meant
for real-world applications,
but I'll just quickly
show it to you.
All right, open up
your browser Internet Explorer
or Google Chrome will also do
and right click on the page
click on inspect.
So this is open up
the Chrome developer page.
All right now go to console.
This is basically
the JavaScript console.
Now, let's see
how to run JavaScript
on the browser itself.
So let me just type a statement
and then I'll explain
what it does.
Now basically, this is
a statement in Java script.
So what I'm doing here
is I'm going to log
this message hello world
onto the console.
All right, so I'm going to log
hello world onto the console.
That's what this function does.
Okay.
Now this hello world
is enclosed within brackets
and within quotation marks
and in JavaScript,
we always practice to terminate
a statement with a semicolon.
Now, let's press enter.
So here you can see that
it's displaying hello world.
All right.
So this means the JavaScript
works on our console.
So this is
how browsers are embedded
with JavaScript engine
so that they can run
JavaScript code now
to write JavaScript code
you require a code editor,
you can choose from
a variety of options
like Visual Studio code
Sublime Text and so on
but for today's demo I'll be
using the visual studio code,
but feel free to use
whichever editor you want
Visual Studio code is basically
a simple light weighted editor.
And guys are leave a link
in the description box.
If you want to download
the visual studio code
you can go ahead
and check the description box.
Alright, so I've already
downloaded the visual
studio code now,
let's create a folder.
Okay, we'll create
a new folder to store the code
that will be executing.
So create a new folder.
You can name it whatever you
like now just drag this folder
and drop it over here.
Alright, so you can see
the folders created
and we've got the folder open.
Let's add a new file index
dot HTML to this folder.
Now you don't need to know
HTML to follow this tutorial.
I'm just pasting
a basic HTML code here.
You don't have to care
about this code.
It's just for creating
a simple webpage.
All right now over here.
I'm just using a header in order
to display JavaScript tutorial
and then within paragraph Tags,
I'm just displaying
with Ed Eureka.
All right, you don't need
to have knowledge about HTML
for this tutorial.
Now, what we're going
to do is we're going to use
this HTML page as a host
for our JavaScript code.
All right.
Now make sure to save
the changes Now open
up extensions tab over here.
This is the extensions tab
Now search for live server.
So guys have already
installed the live server,
but make sure you go ahead
and install this right away
live server is basically
a lightweight web server
that we're going to use
to serve our web application.
All right, install this and
restart your Visual Studio code.
Once you open Visual Studio code
go to your index dot HTML file.
Okay, and right click on this
and now you can see
this option open
with live server.
You're going to get
this option only
after you install live servers.
So make sure you do that first.
So open with live server.
Yeah, you can see this page.
The HTML page is over here.
Now.
You can even check
the console from here.
This is the JavaScript console.
All right, so this will just
open up your default browser
and direct it to this address.
All right.
Now this address is
where our application
is served from.
Okay.
So here you can see
the console as well.
Now, let's write
our first Java Script code.
So go back to visual studio.
Okay.
Now guys, let me tell you
that there are two ways
of adding your JavaScript code
in the HTML file.
First of all,
you need to know
that your JavaScript code is
always written in the HTML file
or it is at least link
to the HTML file.
Okay.
So like I said,
there are two ways
of adding a JavaScript code
in the HTML file.
Now the first is to use
script tags in the body section
and type your JavaScript code
within the script tag.
So let me show you
how that's done.
Now.
This is the body section
the body section starts here
and it ends here.
Okay.
So you have to make sure
that your script tags are
within the body section.
Now, let's open script tags.
Now in the first method
you're going to type your entire
Java Script over here.
So within the script tags,
you're going to type
your entire JavaScript.
So let's just type
a simple line.
So we executed this earlier.
Let's just do that.
Let's log a message
to our console.
All right, so let it be hello.
We'll see if this works guys
don't Get to terminate
a statement with a semicolon.
All right now save the file
and open up your browser here.
You can see that it's displayed.
Hello.
All right, this means it works.
Now.
Let's go and try
the second method now
in real-world application.
The JavaScript code
will have hundreds
and thousands of lines
and it is not a good practice to
type your entire code over here.
All right.
So what we can do is we
can open up a new file
from the Explorer window.
All right, let's go
here open up a new file.
Let's name it Hello dot JS.
All right.
It's a Javascript file.
Now.
What we'll do is we'll copy
this code and let's
paste it over here.
Now, you have to reference this
Hello dot JS file in your hedge.
Tml file.
So how do you do that?
Okay.
So let's add
an attribute over here.
This attribute is SRC.
All right, Sr.
C stands for Source
now SRC equal to
within the quotation marks.
We're going to write down
the name of the Javascript file.
So hello Dot JS is the name
of my Javascript file.
Let's close the Tans.
Okay with this
is opened up again.
Okay, let's close the tags.
And this is the second way.
So we're basically referencing
Hello dot Js from the HTML file.
Okay.
Now, let's save
the changes here
and now let's check our browser.
Yeah, you can see that.
It's printing hello.
So both the methods work.
So I hope you understood
that there are two ways
of adding your JavaScript code
to your HTML file.
The first way is
to write the entire code
within script tags.
And the second way is
to reference a Javascript file
in your HTML file.
So guys, I hope you have
a brief idea about
how JavaScript works
and how you can use
your browser to run JavaScript.
Okay.
So now let's get on with
our JavaScript fundamentals.
I'm going to discuss
variables constants
and a few other
Concepts over here.
Okay.
So what are variables variable
is a name given to
a memory location
which acts as a container
for storing data.
Now, what does this mean?
Let's say that I want to Define
a variable called name
and I want to store
a name in it.
That's a the name is Ed Eureka.
Okay, so I'm going to declare
a variable called name
and I'm going to store
at Eureka in that variable.
So name is the name
of the variable.
And Erica is the value
of this variable.
Okay.
So what's happening here is
a temporary memory location
is assigned to the name variable
and this name variable
is going to contain a value
which is Eddie Rekha.
Okay.
Now let's perform
this practically so
that you understand it better
which is constant.
So what are constants constants
are fixed values
that do not change
during execution time.
Now, there are times
when we don't want the value
of a variable to change
because it might disrupt
the whole workflow
in such situations.
We make use of constants
instead of variables.
Okay.
Now here you can see
the syntax of constants now
in order to declare a constant
you use the keyword constant.
Alright, you use
this key words now,
let's practically do
this and see how it works.
Right?
So I'm going to create
a new file to do this.
I'll name it constant.
Okay.
Now let's declare
a variable so for declaring
a constant variable make sure
that you use const keyword.
Okay, so I'm declaring
a constant variable here.
Now.
Let's say its pile.
Okay.
I'm going to assign a value
to Pi 3.14159 appens.
If you try to change the value
of a constant variable.
Let's try to do that.
Okay, we change the value now.
Let's okay.
Let's log this to the console.
Save the changes
and make sure you change
the path in the HTML file.
So here it's still linked
to variable dot JS change it
to constant GS
if you're creating a new file
that is all right.
Now since the changes
here is well now open
up your browser here.
You can see type Arrow
assignment to constant variable.
All right this errors
because we try to change the
value of the constant variable.
It is declared as
constant using the value 3.14
and then we try
to change it to 3.12.
That's why we have the arrow.
So guys you use
constant variables only
when you want to keep the value
of a certain variable fixed.
All right, it cannot change so
that's when you use constants.
Okay.
I hope you all are clear.
Let's get on
with our next topic.
Okay, primitive data now guys,
there are different types
of values that you can assign
to a variable.
All right now in JavaScript,
we have two categories
of data types one is
primitive data type and the Do
is reference data types.
Now primitive data types
include numbers strings
Boolean null and undefined
reference data type
on the other
hand includes objects
and arrays and functions.
All right.
So now let's look
at these primitive data types
from Visual Studio code.
So I'm going to create
a new file again.
Give it any name you like.
Alright.
So for this you'll have
to Define a variable
how to define a variable
you use the let keyword.
This is the name
of my variable now
in this I am going to store
the value Harry Potter.
All right terminated
with a semicolon.
So guys here it's a string
because we are
using quotation marks
when closing the value
within quotation marks.
So the computer is going
to consider this as a string.
So even if I had let's see
if I have something like this.
What do you think?
This is do you think
this is a string
or do you think it is or number?
Okay, let's check.
All right now let's log this
on our console and see.
that's long age as
well as let's log name.
Save the changes make sure you
change the reference over here.
Alright, so it's constant.
Let's change it to primitive.
See if the change is here as
well open up your browser.
So it's displaying
the two values.
Okay.
Now let's check the type
of these variables type of age.
It's a string even
though it is one over here.
It's still a string.
Why is that that is
because we enclose this one
with in quotations.
So whatever is enclosed
within quotations is going
to be considered as a string.
All right, so we discuss numbers
and strings so far.
Let's look at Boolean.
Let's Define a
variable called option.
Okay.
So basically guys are Boolean
is used Whenever there is
a logical situation
or a logic code
that needs to be executed.
So if a particular
condition is met
or if a particular
condition is true,
then the following code will
be executed in such situations.
You make use of Boolean
and Boolean can have
only two values.
True or false?
So this is a Boolean.
Now the next type
of data type is undefined.
Now.
What is undefined?
I'll show you.
Let's Define a variable height.
Now, let's log both
of these variables
and we'll see the type
of these variables.
Okay.
So option then let's also log
height save your changes
open up your browser.
Now, you can see through
and you can see under fine
instead of printing anything.
It says undefined.
Why do you think that is it's
because we've defined height
without initializing it at all.
So we have not set it
to any number or any value.
That's why it's undefined.
So this is
an undefined data type.
So if you don't initialize
a data type,
it's called undefined.
Okay.
Now the last one is null now,
let me show you an example.
So here I am just defining
a variable called eye color
and I'm setting it to null now.
We use null whenever we
want to explicitly clear
the value of a variable.
Okay, that's when we use null.
So I hope you guys are clear
with the primitive data types.
Now.
Let's move on
to our next topic arrays.
So what are our is add?
These are basically used
to store multiple values
in a single variable.
So if you have a list of items,
let's see that you went shopping
for some art supplies and you
got a paint brush you got
can miss you got
some pallid you got pencils
and you got spray paint.
Now you want to list these down
in one variable now
to understand this better.
Let's go to visual studio code
and let's execute some code.
So add a new file called array.
I'm going to Define
an array called shopping.
All right.
Now in order to Define
a variable you will have
to use the let keyword
and you'll have to use
the square brackets over here.
This is how you define an array.
Okay now square brackets are
because you have to store
multiple values in an array.
So an array is basically
used to store multiple values
of a single variable.
Okay.
So shopping is a variable
it has multiple values.
Now, let's define the values
in the shopping variable.
So the first value
let's say it's paintbrush.
I'm going to add a comma and add
another value a comma is needed
to separate two values.
Okay.
Let's add color palette.
and canvas Okay,
so we have three items
in our shopping list.
Now.
Let's just log this
on the console.
Save your changes.
Make sure you change the path
in the HTML file re all right,
save it open up your browser
now here you can see
that it's displaying
the entire array now guys,
let me tell you
that arrays are numbered from 0.
So 0 is the first element 1 is
the second element
2 is a third element,
even though there are
three elements in the array.
The number of the last
element is 2 that's
because you start numbering
an array from zero.
Okay.
So guys now how do you
access an array element?
Let's say you want to access
color palette you want
to display color palette.
How are you going to do
that now in order to do that?
You are going to write
the name of the array
and within square brackets,
you're going to put the number
of the array element.
So if you want to
display color palette,
the number of color
palette is one.
So you're going
to type one over here.
Okay, so the parentheses
semicolon and don't see
it displays color palette.
So this is how you
access array elements.
Okay.
So if you want to access only
one element then just mention
the number of that element
and that element
will get displayed now.
Let's just play
a little bit with arrays.
Let's define a few other arrays.
Let's see what
else at is can do.
So, let me show
you another example.
No, I'm defining
an array call numbers.
So guys this is
how you declare an array use
the let keyword name
of the array equal to square
brackets and you terminated
with a semicolon?
Okay.
Now let's add array elements.
So I'm going to randomly
add some numbers.
All right.
These are my array elements.
Now.
Let's add two numbers
and display them on the console.
Okay.
So how do you do that?
So let's add one.
Let's add this element
and this element.
All right.
So how do you
access this element
which is have to write
the name of the array
open square brackets.
And I the number of the array 0
Plus numbers at position 1 so
you're basically adding 1 and 3.
All right save changes go
to your browser here.
You can see the answers
for all right.
Now, let's try some other thing.
Let's try to sort these elements
for that you use a function
called sort now sort is
a predefined function.
So this sort function
is going to sort this array.
All right, save your changes.
Let's look at the log.
Yeah, so it's sorting
this array in order.
One, two, three,
four five seven.
Now, we know
that 6 is missing here.
So let's add an element
to the array.
So how do you add
an element to the array?
So first you type the name
of the array dot push?
All right, a bush is a function
which pushes an element
to the array.
All right.
Now which element you want
to push is going to be written
Within These parentheses.
So six let's push.
Okay now let's check the array.
Save the changes go
to your browser.
Now, there are seven elements.
All right, see you
can see six over here.
Now guys, let me show
you another example
now with a arrays
in JavaScript you
can have variables
with different data types
in one array itself.
So single array
can have variables
with different data back.
Let me explain this
with an example.
So I'm declaring
an array called mixed.
All right.
Now, let's list out
the elements of mix.
So first I'm going
to list out a string.
Okay, then on number
then again a string.
Okay.
Now let's log this
to our console and
see what happens.
Okay.
So this is the mix a day.
So here you can see
that it has elements.
Let's check the type
of the first element.
How do you do that?
So you write the name
of the array and you
open up brackets
and you write the number
of the array which is 0 so,
this is a string
correct now similarly,
let's check the type
of the second element.
This is a number.
So now we know
that within an array
we can have variables
of different data types.
Okay.
All right guys with this
we are done with arrays.
Now, let's look
at our next topic now
our next topic is objects.
Now.
What is an object an object
in JavaScript is a lot
like an object in real life.
For example, let's
consider a girl.
Okay.
Now this girl has a name.
She has a huge
she has eye color.
Let's say her name is Emily
or age is 15 years old
and she has brown eyes.
So what did I just do I
basically declared an object
which was a girl.
And I list down her properties,
which is her name
her age and her eye color.
So girl is the object name
age eye color on her property.
So this is how an object works.
Okay.
Now what are objects objects
are variables to but they
contain many values
or many properties.
Okay, and each property
will have some value now.
Let's look at this
with an example.
So guys, I'm going to create
a new file called objects.
Now, how do you
declare an object?
So I'm going to declare
an object called pain equal
to you're going to use curly
brackets to Define an object.
Okay, as soon as you use
these curly brackets,
it means that you're creating
an object called pain.
Okay, and this object
can store a lot of properties
and each property
will have some type.
It's like key value pairs
where key is a property value
is the value of that property.
So now let's say
that this pain has
the first property
of the pain is a type.
Okay, so I'm going
to write ballpoint.
Now you separate different
properties with a comma.
Okay.
Now the second property is
probably the color black.
Alright now let's define
another property called
cost now know that over here.
I have an enclosed 10
in quotation marks
because this is a number
it's not a string.
Okay guys remember
that so guys also terminate
this with a semicolon.
Now, what did I do here?
I created an object called pen.
This pen has three properties.
Okay, the three properties
are type color and cost.
Now the property type
has a value ballpoint.
Similarly.
The property color
has the value black
and the cost is 10.
Okay.
So this is how you
define an object.
So the object is a pen.
It has three
properties and values.
What if I want to display
the cost of this pain,
I just want the cost
of this pain.
Not the entire object.
Okay.
So, how do you
access an object now?
This is the syntax
for accessing an object
object name dot property name.
Okay.
Now there is another way
of accessing this is known
as The dot notation
and the other way is
like this object name
you use square brackets
within which you write
the property name.
All right.
This is the other way now,
I honestly prefer
the dot notation
because I feel it's simpler.
Okay.
So now let's try to display
the cost of the pin.
Okay.
So, how do you do that?
First you write the object name,
which is Penn DOT the property
name which is color.
Sorry, then the property name
which is caused.
Okay now I want to display this.
So I'm going to put this
in the console DOT log function.
I'm going to put this in
the console DOT log statement.
All right now save
the file make sure
you change the reference
in the index or HTML.
So change this
to objects save this.
Open up your browser.
Here you can see
it's displaying 10.
Okay, so that's how you
access object properties.
Okay.
Now let me show you
another example of objects.
Okay.
So now let's define
an object called Emily.
Okay.
Now this object has
a few properties so
properties and the value
of those properties
because it's a number
I'm not putting it
in quotation marks
then let's define cool,
which is another property see
if she goes to DPS.
Then there is class.
Let's say 10th standard.
Alright now, the next
property is subjects.
Now.
I have more than one subjects.
That means I have
more than one value
to this variable.
Now, how do I store more
than one value in this variable?
So guys, do you remember I spoke
about arrays arrays are used
to store multiple values
of the same variable.
So let's define this as a array.
So this is
how we Define an array.
Add physics now add comma
after every value so
physics and chemistry.
Let's add biology.
Let's and months.
So don't forget to
terminate this over here.
Now.
I have typed out the wrong
spelling for physics.
Okay, so guys,
let's say I want
to display a chemistry.
How would I do that?
So how would I do this?
So like I said first
you're going to write
the object name dot the name
of the property name
of the properties subjects.
Now, this is an array element.
So in subjects,
we're going to access
the second element.
All right, the number of
the second element would be one.
Okay.
Now in order to display
this let's put it
in this statement.
Now save your file
open up Chrome.
All right, there is an error.
What exactly is the arrow?
Okay guys, so
the error is over here.
I forgot to put a comma
so after every property
is supposed to put a comma so I
forgot to put a comma here
and that was the error now,
let's save the file and
let's open up our Chrome.
So here you can see
that it's displaying chemistry.
Okay.
So that's how it works with this
we're done with objects.
Let's move on to our next topic.
Now.
The next topic is
functions functions are basic
building blocks in JavaScript.
It is basically
a set of statements
that perform some task.
Now.
Let's see this
with a few examples.
Let's go to our vision
Studio code now.
Let's add a new file.
I'm going to name
it function dot Js.
So how do you define
or declare a function?
So in order to declare
a function you have to use
a keyboard function space
the name of the function.
So let's say hello.
All right.
Now after this you need
to add parentheses, all right,
and then curly braces
and within the curly braces,
you're going to define
the body of the function.
Now, let's just say
that this is just
logging some message
on the console like hello.
All right.
Now I've created
a function for this now.
Let's call this function.
So how do you do that?
You write the name
of the function with the parent.
This is and then you
end it with a semicolon.
Okay now save the changes
make sure you add function
over here in the HTML file.
Seems of changes here as
well now here on the browser.
You can see that it's printed.
Hello Okay.
Now what's the point
of this function?
Let's do something better.
Okay, let's make
a better function.
Let's say we
will create a function
for multiplying two variables.
Okay.
So let's say that we
will create a function
for finding the product
of two numbers.
Okay.
So for that you use
a keyword function,
I'm going to name
my function product now
Within These parentheses,
I'm going to
declare two variables.
Okay.
Now these variables
are called parameters.
So I'm going to pass
two parameters to my function.
Now, let me get on with it.
You'll understand it better.
Now what this function
is going to return is
the product of A and B.
So a star B. Alright now,
let's call this function.
So how do you call
a function name
of the function and over here?
You're going to pass the value?
You ought to these variables.
Now these variables have
not been given any value here.
I just Define these variables
and they are just
known as parameters.
These variables are
known as parameters.
Okay.
Now let's pass some value
to these variables.
Let's past 2:00 and 6:00.
Okay, and it with a semicolon.
Now these values
are known as arguments.
Okay, so when you call
a function you pass arguments
to that function,
but when you define
a function you pass
parameters to that function.
Okay, let's see
if this and let's
open our console.
Wait a second.
Yeah, I forgot to print it.
Now.
Let's tour the product
in some variable.
Let's Define a variable.
Let's say x.
Okay, so I'm storing my product
in a variable called X. Now.
Let's log this variable
on my console save the changes
go to your browser here.
You can see 12.
All right, so this is
how Your boss functions
with different parameters, okay.
Next we have
conditional statements now
condition statements are used
to perform different actions
on different conditions.
So if is used to execute
a block of code only
if the condition is true, okay.
So basically if a condition
is met then the statements
within this block
will get executed.
This is the syntax
of the if statement.
So basically if is a keyword
and within brackets are going
to define the condition now
if this condition is met
then this statement
is executed or a set
of statement is executed.
Okay?
So this is how it works
in the program
and you start the program
and when the execution
comes to a condition
if the condition is true
the code within the
if block gets executed.
All right, and it ends there
but if the condition is false
you just exit from the if block.
All right, let's look
at this practically.
So let's create a new file
called if So first,
what I'm going to do is I'm
going to Define an array now.
Let's add numbers
into the array some randomly
want to add some numbers.
Now, let's add
some condition over here.
Now if you're I'm going
to define the condition,
which is number and 0
is equal to equal to.
Number at place to then
just display some statement.
All right, let's see, correct.
Okay.
So what is happening here now?
I'm basically defining
a condition within the
if statement over here.
And this is a statement
that's going to get executed
if this condition is met
so the condition is
that the number at location
0 which is this number
if this number is equal
to number at location 2,
which is this number
so these two numbers
are equal then it's going
to print out correct.
All right.
Now these equal to equal
to sign is used for comparison.
So it's used to check
the value of this variable
and value of this variable
if these two values are the same
then the condition is met.
All right.
Now, let's save
the changes we made here.
Also, remember to go
to your HTML file change
the reference to if dot JS.
Okay, save the changes go
to your browser here.
You can see
that it's displaying correctly.
Now this was the
if conditional statement now,
where do I use the else
statement now else is used
to execute a block of code
if the same condition is false.
Okay.
So this is the syntax
of Ethel's so
if there's some condition there
if that condition is met then
this statement is executed.
Now if this condition
is not met then
if you want to do something
else you use the else statement.
So when this is false,
this will happen Okay,
so instead of exiting
you're going to perform
another operation,
let's look at the flowchart
when you're executing
the condition and
if the condition is true,
we're going to execute the block
of code within the if block.
Okay.
Now if the condition is false,
you're not going to exit instead
you're going to execute
another block of code,
which is in the else if block.
Okay.
Now let's look
at this practically now
within the same file itself.
I'm going to show you
how this is done.
Now.
Let's define a condition
if numbers This place
is equal to equal to.
Then it's going
to print correct.
Otherwise now if
this condition is false,
then it's going to print
this console DOT log wrong.
Try again.
All right, that's simple.
Let's see if this works.
Okay.
Save your file open
up your browser.
Okay.
There is some problem over here.
Let's go back to the code.
Okay, my mistake.
Save the file open
the browser now,
it should work now
just comment this out.
Otherwise, you'll get confused.
I'll just write here.
This is the if/else block
if else example.
All right, let me save
it open your browser.
See it says wrong try again.
So this is
how the else statement works.
All right.
Now you can even play around
with a few other examples.
Let me show you
a few other examples.
Okay.
Now, let's give two conditions
within the if block.
Okay.
Now let this be
the first condition.
So how do you add
another condition you
just use the and operator?
Okay, and add another
condition over here.
Okay, I'm making a mistake here.
The array name is numbers.
So added to
conditions over here.
Now only if both
of these conditions
are met this statement
is going to be executed.
Okay?
as we are going to now,
let's see if this okay.
We'll just comment this out
so that you don't get confused.
Alright, so see the changes
open up your console.
Okay, that is some Arrow.
So it's basically
something I did
while naming so this is an arrow
because I forgot
to add an S everywhere.
Okay.
Now I'm saving the changes
this should work.
Okay, so it says
wrong try again.
Now this is wrong because both
of these conditions want met.
I'm using the and operator here.
So it's compulsory
that this condition is true
and this condition is true.
Okay.
So if you use the or
operator here instead,
this is the or operator.
Okay, if you use the or
operator here instead,
this should work see
it displays, correct?
Okay, or means
that one even if one
of these statements
or one of these conditions
is true then this is correct.
Okay, so guys with that
we are done with if-else.
Now let's move on to Loops.
So what are loops loops
are basically used
when you want to run the same
code over again each time
with a different value.
So that's when Loops are used.
Now Loops are of three kinds.
There is for Loop
there is while loop
and there is do-while Loop.
Okay.
Now, let's look
at each Loop one by one.
So first we have
the while loop now
what happens here is
while basically Loops
through a block of code,
as long as the specified
condition is true.
Okay.
So while this condition is true
this Loop code is executed
when you execute the condition
and if the condition is true,
the conditional code
will get executed.
Otherwise if the
condition is false,
you're just going to end
or you're going to exit
from the loop.
Okay.
Now, let's look
at a practical example
of this so create
a new file called
while dot JS.
So guys before moving
on to an example.
Let's discuss the do-while.
Loops.
Also a basically do
while is just a Gradient
of the while loop now this Loop
will execute the code block
once before checking
if the condition is true,
then it will repeat the loop.
As long as the
condition is true.
Okay.
So we are you can see
the syntax within the do
Loop you have some code.
Now this code is executed once
and only after that
the condition is checked.
Now if the condition is true,
then you're going
to execute it again.
What are the condition is false?
You're not going to execute it.
But this code is definitely
executed at least once.
Okay, that's the difference
between do while and
while so the loop code
is executed at least once
in the do-while loop.
Okay.
Now let's do
this practically now,
let's Define a variable I
and initialized it to zero.
Okay now within my while loop,
I'm going to define
a condition which is
while I is less than 5
it has to do this now
the statement here is It has
to display this the number is
and it has to display I
okay.
So plus I and let's increment
the value of I okay.
Now.
Let's see if this now let's look
at the while loop now
within the while loop.
I've defined a
condition which says
while I is less than 5
it has to perform
the following code first
of set I to 0 so then
I is less than 5 meaning
zero is less than 5 now.
This is true.
So it's going to execute
these two statements.
So I just want to print
the number is zero
and then it's going
to increment the value of I
so now I will become
1 over here.
Lll go back to this Loop
and it will check
if one is less than five
which is true.
So it'll execute
these two commands similarly
and keep going
till I is equal to 4 is equal
to 4 L execute this
but when I becomes
5 5 is not less than 5
so this will not be executed.
Okay.
Now, let's just save this
and let's change our path in.
Index dot HTML to
while save this as well
open up your browser.
See it print still number
for 012340 K. It is
not print number 5
because 5 is not less than 5.
Okay.
Now let's do the same thing
using the do-while
loop now for the do
while loop first.
You're going to define
the do block now over here.
Let's copy paste
this code over here.
Okay.
Now after the do Loop
you're going to put
the while condition.
Okay.
So let's give the condition is
I greater than 5 let's
see what happens.
Okay.
So what is going to happen here
is first it's going to execute
these two statements.
Okay.
It's going to print
the number is zero.
We are because we
have initialized I-20 over here.
Okay, then it's going
to increment I to 1.
Okay, then it's going
to come out of the loop.
And then it's going
to check the condition is
one greater than 5 now
that is false.
So it's going to end
over here itself.
Okay.
Now let's just comment this out.
That you don't get confused.
Okay will comment
this whole thing out
now save the changes
open up your browser.
See the number is 0
its printed only once okay
now that's the difference
between while and
do-while loop now.
Next we have for Loop.
Let's look at for Loop.
So what is for Loop?
So for look basically repeatedly
executes the loop code
while a given condition is true.
So test the condition
before executing the loop body
now here you can see the syntax
of for Loop within the for Loop.
There is a condition
which is begin separated
with a semicolon.
Then there is condition
semicolon and this step
and then there is Loop code.
Okay.
Now this begin statement
is executed one time
before the execution
of this code block.
Okay.
So before this Loop
code is executed.
This condition will
be executed one.
Okay.
Now, let's look at the Syntax
for the for Loop now this
for Loop has Three statements
within the parentheses.
Okay.
Now begin is executed one time
before the execution
of this code.
Okay.
Now this condition
defines a condition
for executing this Loop code.
The next is the step.
This is executed every time
after the code block
has been executed.
Okay.
So after this has been executed
this is executed.
So guys, I know this is
sort of confusing.
Let's practically do this.
You'll understand it better.
So now I'm going to create
a new file called for Now
let's declare of for Loop.
So use the keyboard
for and then you put
the first statement
or the first condition,
which is I is equal to 0.
Okay.
Now the next one is I is
less than 5 next one is I
plus plus make sure
you separate these conditions
or these statements
with a semicolon.
Okay, you have to put
a semicolon over here.
Now open up your Loop code now
within the loop for just
let's perform the same thing
that we did in the while loop.
All right, so the number is
I'll be back to be forgotten
to declare I hear
so let's declare
I first let I say
I've declared I over here.
So guys you don't have
to declare it over here
specifically you can do
that of course, but you
can just declare I over here.
It's F let I is equal
to 0 you're initializing I
and you're declaring it.
Okay.
So what happens here
is first I is equal
to 0 you're defining a variable
I and you're
initializing it 2-0.
Once you initialize I
to 0 it's going to execute
this statement once
okay, so it's going
to execute this statement.
Once after that it will go
to this condition is I
less than 5 is 0 less than 5
which is true.
So it's going to
execute this statement.
Okay.
Now after this is executed
it's going to execute
this third statement,
which is I plus plus.
Okay.
So the value of I
is going to become one
and the same thing
is going to happen again.
And again, let me explain
this one more time.
So first you're
initializing I to You
when you execute
the first statement,
this code block
is executed once all right
after this it wrecks
this condition is I less than 5
if the condition and only
if the condition is true,
this statement
will get executed.
Now after this statement
is executed this third statement
over here will get executed.
All right.
I hope that is clear.
Let's save the changes
and let's also change
the reference over here.
All right save
the changes here as well.
Yeah here you can see
that it's displaying
it five times.
Okay, so that is
how for Loop works.
Okay.
Now you can do a lot
of things with for Loop.
So let's say that your teacher
is punished you
because you talk
too much in class
and she's asked you to write
I'm sorry 50 times.
So can you use
for Loop to do that?
Well, you can definitely use
for lucre do that.
Let's try and see
how that works.
Okay.
Now we're going to do
the same thing set I-20
Then I is less than 50 nylon.
If your teachers kind enough,
she'll ask you
to write a 50 times.
Otherwise hundred times
is the minimum.
All right now within
the code block.
Let's log this message.
Okay, so first we're
going to I'm sorry,
and let's put a smiley as well.
Okay, so I made
a mistake over here.
Okay.
So this is how it works.
Let's save this code
and you know,
let's comment this out.
Okay.
Now let's check our browser
so you can see that I'm sorry
is displayed so many times.
So guys that's
a simple hack with this.
We complete our for Loop.
Now the last topic
of discussion is switch cases.
So switch statements
are used to perform
different actions based
on different conditions.
Okay.
Now how does switch statement
work now here you can see that.
This is a syntax now after this
which there is an expression
and there are few cases case
one case two case three
and default and so on.
Okay, whenever case
one is true the code block
one will get executed similarly
if taste to strew code block
3 will get executed.
Now, how does this work?
Now?
What happens is the expression
within this switch statement
is executed one.
Okay, after that the value
of the expression is compared
with the value of E.
Of these cases again.
So this is the value
of the cases.
This expression is compared
with the value of the cases.
So if there is a match
this block will get executed.
So basically the value
of the expression is compared
with the value of the cases.
So if there is a match
then the associated block
will be executed.
So if the value
of this expression
and the value of this case is
the same then this code block
will be executed.
Okay, let's try this
with an example.
So let's create a new
file called switch.
Okay.
Let me type out the code
and then you'll understand
what I'm saying?
Okay.
Okay, so that's a long code
for this is very simple.
Now what I've done
here is I've defined
a variable called games
and the value
of that variable is football.
Okay.
Now I'm passing this variable
into the switch statement.
So basically the value
of games is football over here.
Now if the value
of this expression
matches with any case,
then that block will get
executed now here the value
of games is football, correct.
So you're going to look
for football now the case
over here is football.
So basically this
is going to get executed.
Okay.
Now, let's just save
and let's run the code.
You'll understand what
I'm talking about.
So guys, make sure to change
the reference over here save
it and let's check the logs.
See it prints.
I love football.
So why did it do this exactly
now it did this because
the value of this expression
matched with This case
Okay, because it matched
with this case the statement
with in that case got executed.
Okay.
Now if I change the value
to foosball, okay,
let's see what happens
when you save it.
It says I like other games now.
This was the default statement.
Now this is default statement
is executed whenever
this expression does not match
with any case Okay,
because I'm not Givin foosball
anywhere over here.
It executes the
default statement.
So this is how the
switch statement Works.
Hi everyone.
This is the lake are from
Ed Rekha in today's session.
We are going to
discuss about jQuery
which is the most popular
and the most use
JavaScript library.
So without any further Ado,
let's get started.
So first of all, let me run you
through today's agenda now
before we start off
with what is jQuery,
we're going to discuss.
What is Javascript after that.
We will see why you should use
And what is jQuery next
we'll see how to install jQuery
which barely takes a minute
after which we'll discuss Dom
which stands for
document object model
and jQuery selector,
then we'll discuss
jQuery methods.
We look at methods like before
after text HTML CSS attributes
and many other
commonly used methods.
All right, then we'll move on
to jQuery events now
here we will see
how to use the click event
on event and the keypress event
moving on to jQuery effects.
There are hundreds
of jQuery effects
and we'll discuss the most
commonly use effects
like hide/show toggle Fade Out
slide up slide down and so on
finally we look at jQuery UI
or user interface
where we will discuss
droppable draggable
and the date picker UI.
All right.
So guys, I hope all
of you are clear
with the agenda now
before I move on
to our first topic
I wanted to tell you
that I'd be making use
of Visual Studio code,
which is basically a code Editor
to run code Snippets
that are be explaining
in this session.
If you don't have Visual Studio
code you all can go ahead
and download it or use
any other editor of your choice.
I leave a link
in the description so
that you all can download visual
studio code now guys before I
start off with the session.
Let me show you
how Visual Studio code looks
so I'm just going to open
up this editor now guys,
this is a very simple
editor and you know,
I think it's my most favorite
editor you can use Sublime Text
or any other editor that
you are comfortable with.
All right.
So this is how it looks now.
What I've done is I've already
copied a folder called jQuery.
All you have to do is create
a folder on your desktop
and then drag it
and paste it over here.
Okay.
So Bob already created a folder
because I think it's
a good practice to have a folder
that contains all
your code Snippets.
All right now guys,
if you downloaded Visual Studio
code you need to make sure
that you have installed
an extension called live server.
Alright, so I've already
installed this live server.
Now this would basically
host our webpage.
So whatever we type out
or whatever code
we have over here
in get hosted using this lives.
So make sure you install
the live server in order
to host your web page
or whatever you create.
Okay, so that's
about Visual Studio code now
without any further Ado.
Let's get started
with our first topic.
So what is Javascript now
in simple words JavaScript is
a universal language of the web
which every PC every mobile
phone and browser understands
now JavaScript is mainly
used to make a web page
or an application look
more alive and interactive.
So every time you see a really
cool web page with a lot
of motions in graphics.
It's because JavaScript
was used to design it.
Now.
Another important feature
of JavaScript is
that it is
an interpreted language
unlike the high-level
languages such as C C++
and Java now these high-level
languages require a compiler now
when it comes to JavaScript,
you don't need a compiler
because JavaScript
runs on the web
and most of the web browsers
like Google Chrome Safari
Internet Explorer Mozilla
Firefox already have
Our script engine embedded
into them apart from
that JavaScript is mainly a
client-side scripting language.
So guys, I hope
with this your clear
with what is Javascript.
I hope you have a brief
idea about JavaScript.
Now if you want to learn
more about JavaScript,
I'm going to leave a link
in the description.
You can check out
our content on JavaScript
so you can learn more about it.
All right.
So why use jQuery now,
we all know
that there are hundreds
of JavaScript Frameworks
and libraries out there.
But why must you use jQuery well
for starters jQuery makes it
extremely easy to manipulate
the Dom now Dom basically stands
for document object model guys.
Don't get intimidated
by the name.
I know it sounds
like it's a very complex concept
but it's very easy.
All right, I'll be explaining
the Dom in the further slides.
So stay tuned.
Now Dom is basically
like a tree structure
of the head 30ml elements.
Now in order to make
a webpage interactive web
developers manipulate the Dom
and jQuery makes it
extremely easy to do
that now apart from that
the If its contributors
is more diverse and bigger than
any other JavaScript library,
it has detailed
and comprehensive documentation,
which gets better every day.
Now another bonus point is
that jQuery has thousands
of plugins available for free
and they can easily
be added to our project.
So these plugins add value
by enhancing user experience.
Now one such example is
the age of technology
which develops a responsive
and feature Rich site.
Okay moving on jQuery also
provides cross browser support.
So basically every time
you write a code
on your local machine
and you want to run
it on a browser
like Google Chrome Safari
and all of that you
don't have to worry about
whether your code will run
on different browsers
because jQuery takes care
of the dependency issues.
Now this is
because it supports almost
all the commonly used browsers.
All right now guys,
I hope all of you are clear
with why we should use jQuery.
Now, let's look at
what is requiring now
jQuery is basically a fast
concise JavaScript library.
With a nice Moto with says
right less and do more now
that is very apt
because it's entire
functionality revolves
around simplifying each
and every line of code.
It simplifies the Dom
manipulation event handling
and basically every other thing
now jQuery offers
a very effective way
to capture wide variety
of events such as a user
clicking on a link
without the need to clutter
the HTML code jQuery takes care
of all the complex
things in between.
Also an add-on is
that jQuery is
a lightweight library
of about nineteen kilobytes
in size after compression.
So this makes it faster
to load the library
and also takes
up minimal resources.
Now jQuery also
comes with hundreds
of built-in animation effects,
which you can use
in your website to make
it more interactive.
All right, so guys,
I hope all of you are clear
with water jQuery.
Now, let's move on
to installing jQuery now, there
is no installation perceived.
This is just downloading
jQuery and let me tell you
that there are two ways
of doing this.
The first is the local
insolation wherein you
copy the jQuery library
on your local machine
and you include it
in your HTML code
and the other one is linked
to a CD and now Syrian stands
for Content delivery Network.
So you can include jQuery
Library into your HTML code
directly from the Syrian.
So basically this is like a link
to your jQuery Library.
Okay.
Now, let me show you
how you can do this All right.
So this is how the official
website of jQuery looks
like now here you can go
on download So over here,
you can see download
the compressed production jQuery
three point three point one.
So this is probably
the latest version of jQuery.
So what you can do is you
can either click on this
and you can copy
this entire Library.
This is basically
the jQuery Library.
You can copy
this entire Library.
And you can paste it
within a file over here.
Okay, so I'm going to paste it
within this jQuery folder
that I created.
Okay, you can paste
it in a file.
Let's name a jQuery.
So what you can do is you
can copy that entire code
and paste it in this file.
But this is not something
that we're going to do
because I me tell you that
if you copy this entire thing
and you paste it in your folder,
you can easily go
and edit it by mistake.
Let's say by accident
you click on something
and a small line gets deleted
or a small element gets deleted.
So your entire core
is going to get messed up
because your jQuery library
was tinkered with okay.
Alright, so we are now going to
follow the first method instead.
We're going to do the link
to a CD and Method now,
I've created an index dot
HTML file within which I
have the link copied over here.
Now, this is basically
the jQuery Library you
can see the version is
three point three point one.
And also I have another link
which is for the UI jQuery UI.
All right now guys,
this integrity and cross origin
is just so that Nobody man,
you played the contents
of these libraries.
All right, so I
have copied this link
from somewhere on the web.
I don't remember
but I'm just going to paste
this link in my description box.
So y'all can go
ahead and use this.
Otherwise, if you find
a better link then y'all can use
that as well.
Okay.
So this is basically
my HTML file.
So guys, I'm now going
to obviously discuss the basics
of HTML and CSS
because that's not under
the scope of this session.
So I hope all of you have
a basic understanding
if y'all don't have
a basic understanding
of HTML CSS and JavaScript,
like I said earlier,
I'll leave a link
in the description box.
Y'all can go and check out
that video and then come
back to this video.
All right, so guys,
that's how you download jQuery.
It's not like an installation.
It's basically
downloading the jQuery.
Okay.
So now let's look
at the document object model.
Now the document object model
is a tree structure
of the various elements
of HTML here.
You can see that it
begins with document.
This is basically
this this document is
basically the ancestor of
every other element in this File
and this HTML again
is the ancestor of all
of these other elements.
Okay.
Now the head
and the body elements are
children of the HTML element.
So this is basically
like a tree structure.
So basically title is
a descendant of head
similarly H 1 and the P tags
are children of body.
Okay, so they are just
descendants now guys,
this is a simple tree structure
and this is what
document object model is.
It's not any complex concept.
It's a very simple structure
of your HTML file.
Now, let's move
on to jQuery selectors.
Now.
The first thing we're going
to learn in jQuery is
the selectors now,
why do we need selectors these
selectors allow you to select
and then manipulate
the HTML elements
or the Dom elements now all
that the web developer has to do
in order to make
a webpage more interactive
or just create a web page
for that matter is to make sure
that the Dom is
easily manipulated only
when you add effects
into the Dom you
can make any changes.
On your web.
So that's why we use selector.
So basically selectors
with select a particular
HTML element and then
you can use other functions
on this HTML element and man,
you played that element.
All right.
So what we're going to do
is we look at examples
will type out codes
and we look at examples,
so don't get too confused.
Okay, so I'm going
to open up my file.
So let's open a body tag.
Now within the body tag.
I'll have a header.
I'm gonna have a H1 tag,
which will basically
say jQuery tutorial.
Okay, guys, the queue
is always caps in jQuery.
So we'll have a header which is
jQuery tutorial and let's have
a simple paragraph by Ed Eureka.
All right,
in order to make things
a little more interesting.
I'm going to create
an unordered list now
within which I'm going to have
a few elements in the list tag.
So let's say I'm going
to list my favorite dogs.
I know there are no favorites
when it comes to dogs
because all dogs
are really cute.
But if I had to list
down three favorites,
I would definitely go
with these three,
okay golden retriever
quite old-fashioned
when it comes to dogs.
I really like golden retriever,
even though there are
new breed's right now,
but I think this one's really
cute and then Siberian Husky
So guys you can make
it interesting and put in a list
of whatever you would like
like you can put in list
of your favorite fruits
or your favorite colors
anything like that?
Okay, and that's it boxer
close the hatch tml tag.
So I'm just going
to save this file.
And what I'm going to do is
I'm going to reveal an Explorer.
So basically this is
how our webpage looks now,
like I mentioned earlier
most of the browser's
like Google Chrome Safari
Internet Explorer have
a JavaScript engine
embedded into them.
So this is the
Google Chrome browser
like y'all can see now
what I'm going to do
is I'm going to right click
on anywhere on the page
and I'm going to click
on inspect over here.
Okay.
So this opens up
my JavaScript engine now,
this is basically the file.
All right one second.
Okay, there was a small error
because I had opened up
a CSS file which I'd link.
Okay guys just ignore
that are off.
So now what I did here was
I open up the JavaScript engine.
And we have a JavaScript
console over here.
It says JavaScript contacts.
Now, what you can do is you
can manipulate the Dom elements
through this console.
So basically you can run
different commands over here.
You can type something
and you can run it now just
like in the vanilla JavaScript.
We need to select things
and manipulate them in jQuery.
We can select anything we want
by using this dollar sign.
All right.
So this is the dollar sign
or the dollar function
that you can use
to select anything now
and regular JavaScript.
We have functions
like document dot get element
by ID query selector all
then there is get element
by class get Elements by tag
and a hundreds
of such functions,
but when it comes to jQuery
the dollar function
basically replaces all
of these other functions, okay.
Now, let's look at an example.
So let's say I want
to select this header header
1 this is hedge one tag, right?
So what I'm going to do
is I'm going to type
the dollar sign first.
We'll open up brackets
and within quotation marks,
we're going to type Whatever
we want to select.
All right.
So what I'm doing over here
is abused the selector function
and within the quotation marks
and mentioned heads one.
So what this does is it
will basically select
the H1 tag for me.
Okay.
So let's click on enter.
Now when I click on hedge one,
you can see that it highlights
my header one tag.
Okay.
It also shows me the dimensions
of the tag and this is
how to select a basically works.
Now.
Let's try selecting the body.
Now that I've selected
the body you can see
that it highlights
the entire body
and it shows me the dimensions
of the body as well.
Okay, so guys this is
how the selector works now,
let's make things
a little more interesting.
Okay.
Let's just go back
to our Visual Studio code.
Now.
What I'm going to do here is
within my first list element.
I'm going to add an anchor tag.
Okay, let's say we
randomly add an anchor tag
and we're basically directing
this to google.com and
let's call it Google.
So guys.
I hope you
all understand basic HTML
because I'm now going
to explain the HTML.
It's going to be
a very lengthy video
if I sit and explain
how HTML to y'all.
So for that I told you all
that I'm going to leave a link
in the description.
Y'all can refer that link
and you all can understand HTML.
So I save the file now.
I'm just going to refresh.
Okay.
So here you can see
the anchor tag,
which is Google now.
Let's see that I wanted
to select this anchor tag.
Okay.
Now we previously saw
how to select the H1 tag.
We saw how to select
the body, okay.
What if I want to select
this particular anchor tag?
So what I can do is
I'm first going to type
out unordered list.
You have to type out the path
to your anchor tag.
Now in order to specify
the anchor tag.
What I'm going to do
is I'm going to specify
that the anchor tag is
within a list and I
and in turn this list is
within an unordered list.
Okay, so it's basically
like specifying the path
to this anchor tag now
because there's only one
anchor tag in this entire list.
It's going to select
this anchor tag only.
Let's see how that's done.
So you simply type
out UL l i and e
so your this is
your unordered list.
This is your list item
and this is your anchor tag now,
let's click on enter.
So when I click on a you can see
that it highlights
my anchor tag,
it also gives me
the dimensions along with it.
So guys, this is how it works.
Now.
Let's make it a little
more interesting.
Now.
Let me just type
out this code first
and then I'll explain
what it's doing.
So what I'm going to do first,
Is I'm going to
select the header.
Okay, H1 tag,
and then I'm going
to apply a method to this.
I'll just type it out first
and then you all can understand
what I'm saying.
So what I'm doing here is
I'm selecting the H1 tag
using this dollar function
after that to this H1 tag.
I'm going to apply
this method dot CSS method now
within this method
I passed a parameter
and a value to that parameter.
So the parameter is color
or the property is color
and the value
of the property is red.
So what this line is going
to do is it's going to change
the color of the H1 tag to read.
Okay.
Let's see if that works.
All right, you saw
that this turn to Red.
So guys this is how you can play
with the selector it basically
manipulate the Dom.
Okay.
So this is what I meant when I
say manipulating the Dom now,
let's make it a little more fun.
And let's say we change
the background color also.
Okay, we change
the background color to Black.
So here you can see the result.
So guys basically the selector
is just to select a Dom element
and then manipulate it
in whichever way you want.
Okay.
So this is the most basic
concept of jQuery understanding
the selector is very important
because you're going
to use selector
at every line of jQuery.
So with that we are done
with our selectors.
Now, let's look
at our next topic now
we're going to discuss
a few jQuery methods.
Now one of the methods
that I already discussed
is the CSS method.
I just showed you all
how CSS is used to style
a particular header.
Okay, but we'll come back
to this later on now
similar to that.
We have other jQuery methods
like the before
method after matter.
Now, what is a before method
do now this method inserts
a specified content
before the selected element.
Now, this is
the selected element now
before the selected element.
It's going to add this content.
So whatever content
you want to add.
Before the particular element
you mentioned that content
Within These parentheses.
Okay.
Now let's look at it.
Practically.
I'm going to open up my browser.
All right.
So what I'm going to do
is I'm going to select
my unordered list
and before my unordered list.
I want to add something
before my unordered list.
So how I can do
that is I'm just going to
mention whatever I want to do.
So within H2 tags,
I want that same
my favorite dogs.
And let's close
the hatch to tag.
So what I did here was
I basically selected
my unordered list first
and on my unordered list.
I'm going to
perform this function.
Now what this does is it
adds whatever I type
Within These quotation marks
before my unordered list.
Okay, let's just see
how it works.
So here you can see that right
before my unordered list.
I have my favorite dogs
now similar to this is
the after method.
Okay, let's go back
to the slides.
Now the jQuery
after method inserts
a specified content
after the selected elements.
Okay.
So this is the selected
elements and after
the selected elements.
It's going to
enter this content.
Okay, let's look at
how this works will look
at the same example.
So what I'm going to do is
I'm going to change
this to after okay
and let's say I type
Are adorable and okay.
So you saw
that it says my favorite dogs
blah blah blah are adorable.
Okay, so guys this is
how before and
after functions work.
So these are just
simple examples of how before
and after work.
So up.
Next we have text now
a text function is used to set
or return the text contents
of the selected element.
So let's say we have
a selected element over here.
And if we pass this text method
on that selected element it
just going to return the text
of this element.
You can also set
or replace the text
of a particular element
by using the text function.
Okay, let's not
get too confused.
I'll just open up my browser
and show you how this is done.
Let me just refresh my page.
Okay, let's look at an example.
So what I'm going to do is
I'm going to use a selector
and I'm going to select
the list of elements
within the unordered list.
So I've selected a lie,
and I'm going to use
the text function over here.
Okay, let's see
what this returns.
Okay.
So over here you can see
that it's returned
golden retriever Google
Siberian Husky and boxer.
Okay, let's do one thing first.
Let's remove this anchor tag
because it does not make sense.
Okay, so I'm just going to save
my file and let's open up
the browser refresh and
let's run this command.
Okay.
So you saw that it returned
golden retriever Siberian
Husky and boxer.
Okay.
Similarly.
Let's say I just want
to return the first element
of my list then I would do
something like this.
So what I did here
was I selected list
and in that I mentioned first.
Okay, so I basically
mentioned the first element
of the list now this returned
only the golden retriever to me,
which is exactly
the first element of my list.
You can see
that golden retriever.
Now, let's say that I want
to replace some content.
Okay, let's say I want
to replace this by adding.
Erica with something else.
Okay.
Let me just refresh.
All right.
So how I'm going to do this is
first always start off
with the selector.
So I'm selecting my P
which is my paragraph tag.
Now since I have
only one paragraph
within this entire HTML file,
it knows that it's
this paragraph Okay.
So let's say there was
another paragraph over here.
Then what you would do is
you would mention paragraph:
first and you'd perform
an action on it.
Okay.
So yeah, let's coming
back to this.
I'm going to say text
welcome to this fun tutorial.
So what I've done here is
I've selected the paragraph tag,
and then I've applied the dot
text function on this tag.
Now.
Let's see what this does.
Okay, let's click on enter.
What happened here
was by Eddie Rekha
was replaced by welcome
to this fun jQuery tutorial.
So this is how you use
the text function to either set
or to return some Intent.
All right.
So guys, I hope all
of you are clear with this now.
Let's look at our next function.
Okay.
The next one here is heads DML.
Now the HTML method is
very similar to the text.
It is used to set
or return the Hedge tml content
of the selected elements.
Now, let's look at
the difference between the two
a first let's look
at an example of how HTML
is used to return the content
of a particular element.
So let's say I lie
last dot HTML.
So what I've done here
is I've selected the list
and from the list
of selected the last element
and I'm running
has tml tag on it.
So this returns
boxer y'all can see
that it returns boxer.
Now.
Let's see how you can set
the content using HTML.
Now what we're going to do is
we're going to change
this last element over here
with says boxer will change it
to something else.
So guys bear with me
when I type the code,
so I'm going to replace boxer
with German shepherd.
Now.
Let's click enter here.
You saw that it got changed
to German Shepherd.
Okay.
So this is how you set
the content using HTML.
Now, what is the difference
between HTML and text?
Okay.
Let me show you what
the difference is.
Let's say I'm going to select
the entire unordered list
and I want to return
the value using text
when I return
the value using text.
You see I get this but when I do
the exact same thing using HTML,
let's see what happens.
So I'm selecting
the unordered list
and I'm running the HTML
function on this now here
you saw that it's returning
the HTML tags to me
along with the text content over
here reduce Returns
the text content
but over here,
it will return
the HTML content as well.
Okay, so you can see
that Ally and an ally is
not there over here.
That's It Returns
on either text content.
This will return
the HTML content as well.
Okay, so guys,
I hope all of you are clear
with the difference between HTML
and text moving on
to our next function is
the CSS function.
Now, I already showed you
an example of this CSS function.
But what exactly
this function does is it
Styles a particular element.
So whatever element you
select is styled using CSS.
So if you see any color
or any pop in your page
or any sort of design medic
ready design on a web page,
it's because CSS was used.
Okay.
Now what is jQuery CSS method
does is it sets or returns
one or more style properties
for the selected elements now,
let's quickly look
at an example.
So what I'm going to do is
let's clear this unordered list.
What I'm doing here is
I'm creating a script tag.
Now guys script tag
is always used in order
to run some JavaScript
or some jQuery script
so over here,
I'm going to create an object
using the let keyword.
So I'm using the left keyboard
to create an object
and the name of the object
is design and let's define
some properties of this object.
Let's say that the color is blue
and let's define another
property like background.
Let's set background to Green
Let's Define another property
which is border.
We will set this to let's say
3 pixels solid black.
What I did here was
I created an object.
I created an object called
design and I've given
this object three properties
color background and Border.
Okay.
Now these three properties
have particular values.
So colors value is blue.
Similarly background
color is green.
And the border is so on now.
Let's just save this file.
I know y'all are confused
wondering why I'm doing this,
but just give me a second.
So what I did was
I save this file now,
let's open up our terminal
and we will select let's say
we select the header one tag.
Sorry, I forgot to add
the select a function.
So we've selected
the header one bag.
And on this we're going
to apply a CSS function.
And what we're going to do is
we're going to pass an argument
to this CSS function.
Now, what we're going to pass is
we're going to pass the object
that we just defined.
So we created an object
called design wherein we
had three different
set of properties
which had different values.
So we're just going
to apply these values
and properties to this H1 tag.
Let's click on enter
and see what happens.
So you saw
that the background color
the font color and a border
was added to this
now this happened
because we had created an object
with color background
color and border.
So we just applied all
of these properties
to our hedge one.
Okay, it's as simple as that.
So guys this is
how the CSS function works.
It's basically for
styling your web page.
Okay.
So your webpage looks more
prettier with the help of CSS.
Now, let's look
at our next topic
which is attributes.
All right.
Now the attribute
method is used to set
or return attribute values
of the selected element.
So let's say you select
a hedge tml element
and that has Ram element
may have hundreds of attributes.
So you're going to select
a particular attribute
of that HTML element
and you can return it using
the attribute function.
You can also use
this attribute function to set
an attribute to the element
that you selected.
So let's not get too confused
with definitions of here.
Let's just execute
this and see how it works.
All right.
Let's go back
to the visual studio code now
in order to make it
a little more interesting.
Let me just clear
this entire thing.
So what I'm going to do is
I'm going to display pictures
of three puppies and we're going
to work on those three puppies.
Okay, we're gonna work
on the images.
We are going to try and add
borders to those images.
Okay.
Alright.
So first thing
what I've done is I've created
a folder called Puppy
where I have three cute pictures
of a golden retriever a boxer
and a husky.
Okay.
So what I'm going to do is
I'm going to drag this folder
and I'm going to paste it over
here within the jQuery folder.
Alright, so here you can see
that I've added the puppy folder
which has three
different images.
Now, what we're going to do
is we're going to display
these images now
in order to do that.
I'm creating a div
and I'm assigning
a class to this.
Let's name it up first.
So now I'm just going
to add these three images.
So I'm going to use the IMG tag.
I'm going to set the source.
So the name
of the folder is puppy.
/ let's say Goldie dot jpg.
It's a JPG image.
So let me just copy paste
this and similarly.
I'm going to add
the other two images also
so the other image is Husky.
And then there is
a boxer as well.
Now.
Let's go ahead
and save this first
and I'm getting so
what I've done is
I've moved this
to the root folder.
So let's just save
this and let's refresh.
All right, so guys,
I was facing a problem.
It wasn't loading
for some reason.
So I just open my jQuery folder
on my computer and I just copied
the puppy folder into that.
Okay.
So this is basically
the index dot HTML file
where I think
and I've also copied
the puppy folder within this
which has three images.
Okay.
Now this should work.
So here you can see
that within jQuery folder.
I have a puppy folder
and I have the HTML file.
Okay, let's save this now.
This should definitely run.
Let's reveal an Explorer.
So you now you see
that we get three
cute puppies guys.
How adorable are they to make it
look a little more presentable.
I'm just going to align
these images horizontally.
Okay, so that
it's clearly visible.
So in order to align
them to the left
and also I'm going to set their
with and their Dimension.
So what To do is
an open another file.
So guys like I told you earlier
that CSS is used
for styling purpose.
So I'm going to open
a CSS file over here.
Okay.
So this is the symbol this means
that it's a CSS file.
So what I'm going to do is
I'm going to select
the class puppers
and within this class
I'm going to say float:left.
So what I did was I selected
the purple's class
which are defined
within the HTML file.
So here you can see that
the class of the divorce papers
from just selecting
this entire div,
and I'm just floating it
to the left meaning
that I'm going to align
it to the left.
And also let's set
the dimension of the images.
So I'm going to mention
the image tag over here.
I'll set the width.
Let's set it to 300 pixels
and also the height.
All right, let's say 250.
So let's save this file
and we need to link
this CSS file in our HTML file.
So guys, don't forget
to do that.
A lot of people miss out on Step
and then they wonder why
the code is not working.
Okay, and then so I'm just
going to add a link
of my CSS over here.
So it is a style sheet.
So for those of you
who don't know CSS stands
for cascading style sheet also
going to write the type.
It's a good practice
to mention the type.
So it is text / CSS.
And also let's mention the path.
So the name of my file is
in next or css, correct?
So that's about it.
Now.
Let's save this file
and let's open it up.
All right.
So guys now you can see
that they're beautifully
aligned to the left
and they all look so adorable.
So guys don't get distracted.
Let's focus on
our task over here.
Now, what I'm going to do
is I'm going to open
up the console over here.
So let's apply this attribute
function to these images.
Now.
First of all,
let's select these
images for that.
You're going to use
the select a function
and within the quotations.
I'm going to write I am
g dot attribute function.
So what I've done here
is I've selected all
of these images
and I'm applying
the attribute function
with the following properties.
The attribute that I'm going
to change is the border
from adding a border
and I am setting
the border to this value.
So it's a five pixels
solid black border.
Okay.
So guys, this is
how the attribute works now,
let's click on enter.
Let's see what happens.
So yeah, you can
clearly see that.
I have added a black
border one second.
Let me make it more visible.
Yeah, see it looks much better.
So what I've done is
I've added a border
black border of five pixels
and a solid border.
Okay.
So guys, this is
how the attribute
function box now,
let's go back
to our next method.
Alright, so our next method
is the Value method now,
this is basically used to set
or return the values
of the selected elements.
Okay.
So here you're just going
to return the value.
You're not going to return
the attribute or you know,
you just specifying
the value of the attribute
and you're going to return this.
So we're going to try
something different over here.
So in order to run a code
on this Value method,
I'll have to tell you
what is a click function.
Okay.
So what is a click event?
So let's go to the clicks line.
Alright, so here is
the jQuery events list.
And the first one
is the click event.
Now this event is executed
when the user clicks
on the HTML element.
Okay, so you basically
select element using
the dollar function.
And then when you click
on this element some function
is performed some
briefly telling you
what this does
because I'm going to be using
the click function now,
let's open up a file.
So we're going to type in
something different over here.
Okay.
So what I'm going to do is
I'm going to clear
this entire thing.
Let's clear the div element
and I'm just going to add script
over here now script tag
is used to add your jQuery
or your JavaScript code.
So just open up
my script tag now over here.
I'm going to type a function.
All right.
So what I'm doing
is I'm selecting
the entire document dot ready
and then there's
a function over here.
All right, so guys
before moving on let me tell you
what this document
not ready function does now
it's a very good practice
to have this function
in every file of yours,
but I forgot to
mention it earlier.
So it's a very
good practice now up.
You cannot be manipulated safely
until the entire
document is ready.
So basically what jQuery
does is it protects the state
of Readiness now,
whatever code you include
inside this document
not ready function.
So whatever code I'm going
to type over here basically
in these lines it will run only
once the page is ready.
Okay.
So basically the code
that you include
within this function.
So let's say I type something
over here Kim whatever code
I'm typing over here.
All of this code
will be executed on me
after all of this is executed.
So only after loading all
of these jQuery libraries
and Frameworks only
after that whatever is mentioned
within this document
or ready function
will get executed
because let's say
that I wanted to run
a jQuery function over here.
Okay, some jQuery function
and I just ignored this line
and I didn't have
a document dot ready function.
Now what happened was let's say
that for some reason
this Library took a lot
of time to load.
And by the time it loaded
this jQuery function
was already executed now,
obviously that's going
to return an error
because it's going to say
that there is no jQuery library
or something like that
because this library
was not entirely loaded.
Okay, so that's why you need
a document ready function.
Okay.
So as I hope you
all are clear now,
this is a good practice
to include it's
not mandatory of course,
but it's always good
to have document ready function
at the beginning itself.
Okay.
So after your title
after you load the libraries,
you should always add in
this document already function.
It's a good practice.
All right.
So before we type out
the code over here,
I'm just going to create
a button and an input type.
Okay now input type
will basically create
space for user input.
So my input type
is going to be text.
So the people
who are familiar
with HTML CSS know
what I'm doing exactly.
So I'm giving some ID
to this input and also
let's give it some value.
Okay, it's blank values
of whatever you enter
here is going to be saved.
Okay, so I created
an input type over here now.
Also, I'm going
to create a button.
Okay, so you use
the simple keyboard button
and you just type
the name of the button
that says submit now,
let's come back
to this function.
Now what I want to type here
is I'm going to start off
with selecting the button.
Okay, so it's selecting
the button and now I'm adding
The Click function over here.
So guys pay close attention
to what I'm doing here.
Okay.
So basically I'm selecting
the button using
the dollar function.
What I'm saying is
when you click this button
a particular function
will get executed.
Now, let's type out the function
that gets executed
on the click of the button.
So click is basically an event.
So on executing this click
function some event occurs
and that event.
I'm going to type over here.
Okay.
So what it's going to do
on the click of a button is
it's going to give out
an alert with the value.
Dot val so this is
where I'm using
the value function.
Alright now, let's close.
All right.
So what I'm doing here is
on the click of the button
this event is going to occur.
Okay, so you're going
to get an alert saying value
and we're in the value is going
to be this some text identifier.
So whatever value
the user types in is going
to get passed over here.
Okay, and then
this dot value function is going
to return that value to you
now don't get too confused.
Let's save this
and we'll run this
and you'll understand exactly
what I'm saying.
All right.
So what I'm going
to do here is see,
this is the input.
We're in the user types input
and this is the submit button
that we created.
So let's say hello
now let's click on submit.
Okay.
So when I clicked on submit,
this is what happens
using the click event.
So basically an alert is shown
where in the value is returned.
So whatever input is given
by the user is return
using the Val function.
Over here.
Okay.
So you see it says hello.
Let's see and Eureka.
How are you doing?
Okay, damn it.
So this is just
returning the value
that I'm typing in the input.
So guys, this is
how the value function works.
All right, it's very simple.
It just Returns the value
similarly you can set
the value as well.
So I want you all to try
something with setting the value
and please comment down
whatever you've tried
or any new program
that you've run using
the Val function
or any other function will be
very interested to know
how you have used
these functions to build
your own program.
Now, the next function
I'm going to talk about is
the add class method.
Now this basically
adds one or more class
to the selected elements.
So you're going to select
an element using
the dollar function
and whatever element you select
you're going to add a class
to it by simply using
the add class method now,
let's look at this
through an example.
So first of all,
let's just clear
this entire thing.
Okay.
So now similar
to the previous example,
we are going to load the images
of all the puppies.
So it has a class
called pup worse.
Okay, and we're going
to add all the images.
Okay, so puppy Goldie.
Okay.
Similarly.
I'm going to have the other
two images over here.
Okay, and the last image
which is a boxer.
I'm selecting the puppy folder
and then the boxer image.
All right, so I created
a div similar to what we did
in the previous examples.
Now, I'm going
to open a script tag
before I type out
the entire script.
I'm going to have a button
that so let's add
a button over here.
Okay, let's name
it try add class.
Now that we have the script.
All right.
Now within the script
what I'm going to do
is I'm going to start off
with the document ready function
now all you're already
explained the use
of this ready function.
So I'm that's exactly
what I'm doing here.
All right.
Now over here.
I'm going to first
start off with selecting
the button on the click
of the button sum function
is going to be performed.
And what is that function?
So basically on the click
of a button and event
is going to occur
and I'm going to type
out that event over here.
Okay.
Now before I type
out the event,
let's define a style class.
Okay.
Now the style tag is used
if you want to specify
some CSS code now,
you can obviously open
another file called CSS
and enter the entire thing
but it's a small code.
So I'm just going to type
it over here itself.
So I'm creating a class
called style class.
All right, and what I'm going
to do is I'm going to Define
some property called border
and I'm going to assign
a value to this property.
Let's say 5 PX solid green.
So this is what is
that in the style tag?
Okay now coming back
to this function.
So on the click of this button
and even has to occur
and I'm going to type
out that event over here.
So what I'm doing is I'm
selecting all the images first
and then I'm using
the add class method
and I'm passing
this style class function
that we just created.
Okay.
All right.
Now let's close
our parentheses over here.
So what I'm doing here is
on the click of this button
and on these images,
you're going to run
the ad class method now
to this method of passed
a class called style class
and within this style class.
I have created a border
of five pixel solid green.
Okay, so don't get too confused.
Let's save and open the file.
Okay.
So what happened was
on the click of this button
all these The selected
and a border was applied
to all of these images.
Okay.
Now this border was specified
within a class
called style class
which we had created over here.
Okay.
So guys, this is
how the add class method works.
Now.
Let's go back over here
and let's refresh first.
Okay.
Now along with ADD class,
we have removed class and we
have toggle clasp as well.
Now remove class will basically
remove that class
which you just added
and toggle clasp
will toggle between adding
and removing the class.
Okay.
Let's just look
at how this works.
Okay the same example,
let's open up the console.
All right.
Now, what I'm going to do
is I'm going to select all
of these images.
Okay, and then I'm going
to do remove class start class.
Now.
What I did here was I
selected all of these images.
I'm running the remove class
method on all of these images
and I'm passing the style class
as an argument to this method.
So first of all,
let's add it and then we'll see
how the removeclass works
and you can see
that every image has
a green border now,
let's do remove class.
Okay.
So you saw that the Border
was it a mode now,
let's do toggle clasp.
I'll get so
when I did toggle clasp
it got added again.
Okay, if I do toggle again,
it will remove
the Border similarly again,
it will add remove.
Okay, so guys this is
how add class removeclass
and toggle clasp works.
Now, let's get back
to our next topic
which is jQuery events.
Okay.
Now I've already explained
the click event to you,
but we still going
to run a program and see
how this works.
Now what the click method does
is it's basically an event
when you apply the click event
to a selector some function
occurs or some event occurs.
Okay, and that event
is specified within
this function now,
let's look at an example.
So first of all,
I'll just remove the style
which is not needed
and then this button
is also not needed.
So we do require these images.
Let's just keep this as it is.
Now, what we're going to do
is we're going to edit
the script path.
So instead of having
button over here,
we're going to select images.
So on the click of images
some event is going to occur
that event is specified
within this function.
So let's type out that event.
What I'm doing is
I'm using a this keyword
and I'm adding
an effect called hide.
All right.
Now, let me tell you
what this does.
So basically on the click
of an image this event
is going to occur.
Now this basically
denotes whatever element
you're currently selecting
and that element will be hidden
using the hide effect now higher
is basically a jQuery effect.
Now, this is used to hide
a particular element.
So whichever element
you've selected, Did over
here is going to get hidden
using this High defect now,
I'll be explaining
how you'd show and all
of these other effects
in my father slides.
So for basic understanding
just know that this High defect
is just going to hide
a particular element
that you've selected.
Okay, so I've saved
the file now.
Let's just open it up.
So what I'm going
to do is let's Click
on each of these images
because we have added an event
on each of these images, right?
So let's click on this image.
So you saw
that it got hidden similarly the
other two images also get heard
in now this is happening because
on the click of an image.
I'm going to hide that image.
Okay.
Now this is just used
to record my current event.
So basically on the click
of the images those images
are going to get hidden.
Okay, that's exactly
what we did here.
Let me show it to
you once again,
so I'm clicking this image,
it gets hidden similarly this
and this so guys,
I hope all of you are clear
with a click event now
similarly we have on
okay now this I thought attached
is one or more event handlers
to the selected elements.
Now whenever you have
on a lot of people
get confused between click
and the on event now on is used
to specify other event handlers.
So you can use on along
with click and along
with key press now key.
Press is the next method
that I'm going to discuss.
So I'm going to be running
an example where I'll show you
how to use key press and
how to use the on event as well.
Now keypress basically executes
whenever character is entered.
So basically whenever you
press a key on the keyboard
some event is going to occur
with the help of key, press ok.
So guys, it's quite explainable.
If you just read the name
of the event itself,
you'll understand what it says.
Okay.
Now key press is a combination
of keydown and keyup.
Let's not get
into too much detail.
So I'm just going
to create an example
where I'll be showing you
how to use key press
and how to use this on event.
Okay.
So let's open up
our Visual Studio code.
Okay.
So what I'm going to do is
let's clear this entire div.
You do not require this
for this example.
Okay.
So what we're going to do is
we're going to create a input
we're going to give it an ID.
Let's say press.
All right, and also
it will have a type.
Okay, and the type is text
and we'll also set
some size to this.
Okay, and let's see it then.
All right now here
we have a script now
within the script instead
of selecting images.
We're going to select the input.
First of all,
let's clear this entire block.
So we have the document
dot ready function.
Now after this,
let's select the input.
So here we are selecting the
input using the dollar function
and I'm going to add
the on event here.
So here I'm also going
to add the keypress event
and some function
is going to be performed.
Okay, so guys,
let me just type this out.
Don't worry.
I'll explain what
I'm doing P dot height.
So what is happening
here is on keypress.
So as soon as you start typing
on this input some function
is going to get performed
this p is going to get hidden.
So let's create
a paragraph another paragraph.
Let's call it.
Let's enter this code
here start typing.
Okay.
Now there are
two paragraphs here.
So I want to
edit this paragraph.
So I'm going to pass in
a parameter called last.
Okay.
So this is basically going
to select the last paragraph
which is this one.
Okay now guys,
I know this is
sort of confusing.
Okay.
There's a small Arrow
somewhere over here.
Okay, so I haven't closed this.
Now let us save the file.
I'll show you what's happening.
So don't worry if you
haven't understood anything.
Okay now basically I
Define an input there.
And what I'm going to do is
when I start typing so
when I start typing
this paragraph is going
to get hidden.
So let's see how that works.
Let's see.
Hello.
Yeah.
See you soon.
As I press the first character
the whole paragraph got hidden.
Now, how does that
happen that happens?
Because we use
the key press function.
So on the Press
of a particular character
on your keyboard this last
paragraph will get hidden.
So guys, this is how the on
and the key press work now
on is used to specify
other events as well.
So on is an event
and key press is also an event.
Okay.
So this is how on work and this
is the difference between click
and on so with this
we're done with events.
Now we have to
discuss jQuery effects.
Alright guys, so now
let's discuss the hide effects.
Now.
There are a lot
of effects over here.
We have hide.
We have show
toggle Fade Out fade
in fade toggle and similarly.
We have a few other effects now
like the name says
it's sort of an effect.
So basically hide is
like an effect so it
and select a particular element
and it will hide it.
Okay, you can have parameters
for how long you want
to hide an element or for
how long you want
to fade an element.
Now, we've already seen
several examples of hide.
So let me just show
you a basic example
where in will discuss
hide we will discuss
show we will discuss toggle.
Okay now show we'll just make
that particular element visible
and toggle will toggle
between hide and show so
don't get too confused.
Let's just open up
our Visual Studio code.
So what I'm going to do is I'll
just clear this entire thing.
Okay, so we'll remove any sort
of confusion now
within the body.
I'm going to have two buttons
over here now each
of these buttons
will have a class.
Call button and I'm going
to give an ID to each
of these buttons.
So the first ID is hide
and the name of this
button is also hide.
Okay, and let's just copy
this entire thing
and we're going
to create another button
and we're going to give
it an ID called show
and that's name the button show.
Alright, so here I've just
created two buttons
and I've given a different ID
to each of these buttons.
Now, what I'm going to do is
let's load a single image.
Okay, so let's not waste time
and load three images.
So we're just going to load
the same puppy images.
So the name
of the class is puppers.
Alright, and let's add an image.
I guess so happy and
let's select anyone.
That's it Goldie.
Okay.
So yeah, let's close this
and this is our div section.
Okay.
So now let's add a script tag.
Now over here we are going
to begin with the document
dot ready function.
Okay.
So let's select the document.
I've already explained
what this does now within this.
Let's define some code.
Now first.
What I'm going to do is
I'm going to select the ID hide.
So sorry, I forgot to put this
in quotation marks.
So what I'm doing
here is I'm selecting
this hide identifier.
So basically this button hide.
Okay, so we have
two buttons here.
That's why I've given each
of them an identifier
so that you know,
you can differentiate
between these two buttons.
So basically this
is selecting the hide button.
Okay, I'm selecting
the hide button and on click
of this hide button some event
is going to occur that event.
I'm going to specify
in this function.
So what is going to happen
is I'm going to select
the image over here first
now select the image.
I'm just going
to hide that image.
So on clicking the hide button
the image gets hidden.
Now, let's close this
now similarly for sure.
We're going to do
the exact same thing.
Okay.
Let me just copy paste this
it's going to be easier.
So instead of selecting
the hide button.
We're going to select
the show button and on click
on the show button.
The image will get visible.
So we using the show
function over here.
So guys, it's as simple as that.
Alright, so I hope all
of you understood
what I'm doing here.
So let me just run you
through what I did.
So first of all,
I created two buttons.
I gave a different identifiers
to each of these buttons hide
and show okay,
and then I'm displaying
this image a single image.
So what's happening
over here is on clicking
the hide button that image
is going to get hidden.
Okay, and on clicking
the show button the image
is going to get visible.
All right, let's save and let's
just run it and see
how this works.
So let's click
on hide it gets hidden.
Let's click on
show it's visible.
Okay.
Now what we can do
is we can also use
the toggle function over here.
So let's just select the images.
Sorry, the only image
that we have and I'm going
to perform toggle on it.
So it gets hidden.
Now if I click on toggle
its visible similarly,
it gets hidden and visible.
So toggle toggles
between hide and show.
Okay, so guys
that was about hide/show
and toggle so we covered all
of these three in that example.
Now, let's look at Fade Out fade
in and fade toggle now just
like the name says it basically
Fades a particular element.
So either it will fade out
that element or it'll fade in
or it'll fade toggle.
Okay.
Now, let's just execute
an example and see
how this works.
Alright, so first of all,
let's clear this entire script
path including this entire thing
and also we don't need buttons.
So let's clear
these two lines as well.
Now, what I'm going
to do is I'm going
to add the other images
over here as well.
Now for each of these images.
I'm going to give ID.
Okay.
So let's define the idea
of these images.
Okay, let's say this image has
an ID 1 and similarly
I'm going to do it for
the other two images as well.
So this image has an ID to
and we'll change this to a ski.
Okay, and The third image.
I'm going to give it
an ID 3 and I'm going
to change this to boxer.
All right.
So basically I have
assigned an ID to all
of these images now in a short
while your understand
why I'm doing that now,
let's create a script tag script
and we're going to have
some code in this
so we're going to start off
with the document
dot ready function.
Okay, so document.ready
some function on it.
So I forgot to create a button.
Let's create a button.
So we are only
Al create a button.
Let's say the name
of the button is by
because if fading out, okay,
so I'm going to create
a button called by.
Okay.
And now what we're going to do
is on the click of the button.
So we're selecting
the button over here
and on click of the button
some event is going to occur
which we're going to mention
in this function Okay,
so, The event I'm basically
going to select all
of the images one by one.
So first I'm
selecting this image.
All right.
So basically it's
the goldie image
that I'm selecting
and I'm going to fade it out.
I'm going to use
the Fade Out effect over here so
we can also pass parameters
to these methods.
So if I say figured out slow,
then it will slowly Fade Out.
Okay, then similarly.
I'm going to do it
for my other two images, right?
So here let's select
the second image and you know,
let's keep it fast over here.
Okay, it will be
it out really quick
and then I'll select
the third image.
And we'll say slow.
Okay for this.
Let's just keep it slow.
Okay now just close
the parentheses and we are done
with the code over here.
All right.
So what I'm doing here is
I'm loading three images
and I'm giving an identifier
to each of these images.
Okay, then I'm selecting
each of these images
and I'm fading them out.
Okay.
Now, let's see how this works.
So let's open it up.
Alright now, let's say bye
so here you can see
that the first one
and the last one
fade out slowly.
So the first one to fade
out with this image
because we passed
a fast parameter.
Okay for these two
we mentioned slow.
Okay, let's look at it again.
Yeah, so guys this is
how fair out works.
Okay.
Now let's look
at an example for fade in.
Okay.
So what we're going
to do here is we're going
to clear this div.
So let's not use
puppy images anymore,
even though that's sad name.
But yeah, okay.
So what we're going to do
is we're going to have
a script function now
within this we're going
to have three divs.
Okay.
So instead of keeping this
as Fade Out let's
keep it fade in.
So we make it fade in over
here similarly for this
also will make it fade in
and for this also fade in now.
What are we going
to fade out and fade in?
Let's look at what
we're going to fade out.
Now.
First of all,
let me create a button.
I'm gonna let say namaste.
Okay the typical
Indians over here.
All right.
Now what I'm going to do is
I'm going to create a div
and I'm going to create
a class called.
Let's see if fade.
Okay.
Now what I'm going to do is
within this div Al have
three different boxes
or squares and will give ID
to each of these terms.
So that is one now.
This is the ID
that I've mentioned over here.
Okay, so i d
1 we're going to style it
and we'll give it
some sort of width.
Okay, let's say width is so much
and similarly will give it some
height and let's say 60 pixels.
Those will keep
the display as none for now
because initially nothing
should be visible
when you're fading
in it starts with nothing
to everything gets visible.
Okay, so that's why we're
keeping the display as none
and also will set
the background color.
Means that it too
orange for this one.
Alright, so you can see
that I've set
the display To None
because we're fading
in the image.
Okay, then the background
color upset too.
Orange.
All right.
Now what we're going to do is
that's the end of this div.
Just close the div over here.
And we're going
to add another division.
Now within the div.
I'm going to give a small break
so you can use the BR
to give a break now.
Let me just copy
this entire thing.
We're going to have
three divisions like these so
I'm just copying this whole
thing now for the second div.
What we're going to do
is we only going to change
the background color some sort
of trying to display
our flag the Indian flag.
I won't be able to get
the chakra in between
but apart from that.
I think it should work.
Okay, I'm this.
I'm going to change it to Green.
So we've created
three dips over here.
And on these three divs.
We're going to fade in.
Okay the slowly going
to appear on the screen.
So for this also upset
slow fast and all of that.
Let me just change this.
So the first one
can appear by default.
Okay, when I want to pass
any parameter the second one,
we'll put slow and the third one
that's actually give
it some value.
Okay.
So this is basically time
in terms of milliseconds.
So I'm going to give this value.
Let's save the file and
let's see how this runs.
Okay at so I forgot
to remove the buy button.
Let's take that off.
Okay, we have
the Namaste button.
Let's see if the file
and now let's check.
Okay, let's say namaste.
So I made a stupid
mistake over here.
I forgot to change the ID.
So this is 2 and this is 3.
Okay, so now it
should definitely work.
Let's save the changes
and I'm just going
to open up my browser.
Let's refresh.
Okay, so here you
can see the white one
because it's totally white.
It's not visible.
But here you can see
that there is this looks thought
of looks like the Indian flag.
So obviously I couldn't get
the chakra where but
yeah.
So this is how it works.
So guys that was
about fade in and fade out.
So I hope all of you understood
how a fade-in fade-out works.
Okay.
Now let's move on
to our next topic
which is slide down slide up
and similarly we're going
to do slide toggle as well.
Now just like the name says
this effect is used to slide
down a selected element
and it's similarly has a speed
and of callback parameter
similar to that is light up.
We're in the selected
element slides up
and then we have slide toggle
which toggles between slide up
and slide down.
So let's look at an example.
Okay.
So first of all,
let me just clear
this entire thing.
Okay.
I'm going to clear
this whole thing.
And so I'm going to start off
with having a button.
So let's say the name
of the button is we
can name it slide.
All right, and then we can
what we're going to do is we're
going to add a div over here.
Okay or division.
We're gonna have an ID for that.
Let's call it div 1.
Okay.
This is not necessary.
But it's a good practice to have
an ID over here is not necessary
because there's going
to be only one div.
So we're going to style it.
Let's say we have the width
will set the width to 90 pixels.
Okay.
Similarly, we will have
height parameter and we'll set
that to 60 and will also give
it a good background color
will give it pink.
Okay, and okay,
I've misspelled background.
So basically this is
the div let's close
the dividends over here.
Alright, so we basically
created a div over here.
It's basically a small square
or a rectangle.
Okay of color pink.
Now, let's have a script tag.
Now within the script tag.
What I'm going to do
is I'm going to select
the button over here
and we're also going to add
on event over here and
let's also add click.
Ok, so on click
and event is going to occur
and that event is defined
within this function.
Now, what we're going to do
is we'll select the div.
Okay using the identifiers
that we gave it div 1 Okay,
and we are going to apply
the slide up or the slide
down function to this.
Okay, let's apply slide up first
and then we can also
pass a parameter
say slow.
Let's close this up
and this should work.
Okay, let's save so
what I did here was I created
a small rectangle using this div
and I styled it.
Okay, so I created
a small rectangle over here
and I have a button called slide
and on click of that button.
This square is gonna
slide up slowly.
Okay.
So, let's see how it works.
Okay, let's see slide.
So let's see it again.
So it slowly sliding up.
Okay.
So guys, this is
how slide up works now
for it to slide down.
What we're going to do is
if it has to slide
down then initially
the display has to be none.
So we're going to set
the display to none.
And we're going to change
this to slide down.
Okay, let's save and let's see
if this works.
Okay, let's click on slide.
See it sliding down slowly.
So guys this is how slide up
and slide down works.
Okay, you can also toggle it
in the same manner.
Okay.
So if you toggle this
it'll either slide up
or slide down.
Okay, so guys with that we
are done with jQuery effects.
Now, let's finally move
on to our last topic
which is jQuery user interface.
Okay, this is just the UI now.
I'm just going to discuss
three functions over here,
which is draggable droppable
and date pick up now
like the name suggests.
You can drag
any selected element
using the draggable method
and similarly the droppable
method is used to drop
the selected element
at a specified Target.
This is how draggable
and droppable work.
Now, let's look at an example.
All right, so I'm going
to begin with clearing
everything over here.
Whereas I don't know why
I remove the first header.
Okay, let's just keep
it as jQuery tutorial.
Now what we're going
to do is first of all,
we're going to begin
with the Earth style tag.
So basically we're going
to style an element
that we're going to drag around.
So this is just going
to be a small square
or something like that.
So I'm going to give this style
of ID called drag all right.
Now within this
we're going to have
a few properties like width.
Let's have it 150 pixels.
Then we will have height
similarly so which is going
to design an element
that we're going to drag
around over here.
Okay, 60 pixels
and then we have will give it
a background background color.
Let's say blue.
Let's click on Blue Violet.
All right.
So this is basically
the style tag now basically
we have a rectangle over here
with the background
color blue violet
and we've given it
an identifier called drag.
Okay, so guys one thing I
forgot to mention was
If you know CSS,
then you know that when you
use a hash it's basically
for an identifier,
but whenever I mentioned dot
with some name, it means
that I'm selecting a class.
Okay, so just extra information.
So yeah now let's
just open up a script tag.
And so what I'm going to do
here is I'm going to have
a function over here.
All right now guys,
you can use function as
a shorthand for document
dot ready function.
Okay.
So this is like
a shorthand for function.
I forgot to
mention this earlier,
but you can use this now
what you want to do here
is I'm going to select
the drag identifier
and to that element whatever
we designed over here.
Sorry, I forgot
to put quotation marks.
Now this drag identify a
basically selects this rectangle
that we created.
So that rectangle
is getting selected
and we're going
to make it draggable.
Okay, we're going to use
the drag will function and
yeah.
All right.
Okay, so this is the script now
what I am doing here
is I am creating.
A Dev of ID drag?
Okay.
So basically this drag
and I'm creating a div
of ID drag so it's
basically the same division
and I'm just going
to have some text on it.
Let's say drag me around.
Okay, so yes,
let's save this and this
should definitely work.
All right.
So this is basically
what we style we
created a rectangle
of violet blue color.
And now you can just
drag it around.
Okay, you can see
that I can simply drag it around
the entire HTML page over here.
Okay.
So guys this is
how draggable works.
I know it looks
really cold to drag it.
It's like a small game.
So this is how draggable works.
Okay.
Now let's look at droppable now.
Let me just clear
this entire thing.
So what we're going to do is
we're going to have an image
of a puppy when we want
to drop off at his house.
So basically we're gonna have
an image of a puppy
and we're going to drag it
and drop it into his house.
So we're gonna involve draggable
and drop a bill over here.
That's a cute concept.
So, whereas yeah,
I'm first of all going to start
with displaying the image.
So, okay.
I'm going to select
Goldie and alright.
So now that I've selected
the image now,
let's have a style function.
Okay.
Now we need a house
for this puppy.
So we're going
to design the house.
Now.
I'm going to give
an identifier to this.
Let's call it drop.
Now within this I'm
going to have a bit.
Okay, we'll set it
to 400 pixels similarly
height 400 and we'll make
it float to the right
because I'll tell you why and so
when I display this you'll
understand why I'm floating it
to the right background color
as let's give it a quick Murray.
Okay.
So this is the end of style.
So what we did here is we
basically created a square
of the color aquamarine.
Now, let's add the script tag
over here where all
the work happens now over here.
I'm going to
begin with function.
All right.
Now, I'm going to start off
by selecting the image.
There's only one image
or you can either say image
or you can give
the identify of the image.
It's the same thing
and this image
should be draggable.
Okay draggable.
Right.
Now I'm going to
select this square
that we created which has
an identifier called bra.
So I'm going to select
that square and I'm going
to make it droppable.
All right, let's just close
the parentheses over here.
All right.
So this is it for script.
Now, let's also add
a small text of the here.
So victim creating a div
with the ID drop okay
within this div,
let's have a small paragraph
which says my home.
All right.
Okay.
So what we did here
was we started off
by displaying this image
and then we created a square
with the following
properties after that.
We're going to assign
the draggable method
to the image and the droppable
method to this square
that we created over here.
Okay.
Now let's just look
at the output you
will understand it much better.
Alright, so basically
this guy wants to go home.
All right.
Give me a second.
Okay?
So the reason it
wasn't getting dragged was
because I did not mention
our hash over here.
When you give an identifier.
You have to mention
hashtag over here.
Okay.
So let's save this and
let's open that up.
It should work refresh
now see it's draggable.
So this guy wants to go home
and this is his house.
So drop a bill over here.
Okay, it is not move
around and go back.
It's droppable.
So his house is droppable.
So just we're just
taking him to his house.
I know this is silly
but this was a good way
of showing you how draggable
and droppable works.
Alright, so I hope
you all understood
draggable droppable now
lastly we're going to look
at date picker.
So guys, this is
an inbuilt function
is an inbuilt widget in jQuery
wherein you can enter a date
and then you can easily
visualize the date.
We're now going to go
into detail with this.
I'm just going to show
you a simple example of
how the date picker works.
Okay, let me just start off
by clearing this entire thing.
Okay, right up to here.
Okay.
Now what I'm going to do is
I'm going to have an input
where in the user
will enter the date.
Let's give it an ID.
Let's say date is the ID
and the type is text
will also assign it some sighs.
Okay, right then.
All right.
Now what we're going
to do is we're going
to open up a script tag.
Now within the script tag,
it's very simple guys.
What I'm going to do
is I'm going to select
the input some typing
the input ID over here.
And on that going to call
the date picker widget.
Okay, so let's save this
so guys, this is all.
Alright, so I'm just
creating an input.
And as soon as you type
the input you're going
to get a date picker.
Okay.
So this is an inbuilt widget is
not much to code over here.
Alright, so as soon
as I clicked on it
the date picker got visible.
So let's say I give some date
you can give some data randomly
or if you select
on some particular date
that data is visible over here.
Okay, so it's just works
normally like this.
All right.
So guys, I hope all
of you are clear
with the date picker.
Hi guys.
My name is Arya and yet again,
I welcome you all to a video
that we at the editor icon.
Do you and today we
are going to be taking
a deeper look into angular.
So most of you out
there probably know
what angular is you've heard
about anger at some point
of time in your life
when you are especially
discussing web development
with your friends.
So this is the angular tutorial
that we are presenting
from Eddie Rackham.
We are going to be taking
a deeper look into angular
how it is written
how we can write angular apps.
And in this tutorial we
will be covering the very
ground hot basics of actually
creating any apps of them.
Most of the YouTube videos
out there that teach
you angular kind of assume
what you already know
and they kind of
start up with an app
and you kind of learn
on the way of creating that up.
But this video is going
to be very different.
We are going to be taking
a very classroom like approach
to learning angular
through this video.
So this is the first video
that is going to be out there
in a list of videos that we
have planned out for tea.
You guys angular
and we are aiming
the latest versions of angular
and we will be always updating
these videos in any case
when angular has changed.
So this is going
to be targeted to angular 8.
So as I just said we are going
to be taking a very classroom
like approach now,
what do I mean
when I say we are going to be
taking classroom like approach?
Well, it's just that
like in a classroom
after you've launched a chunk of
what you are meant to learn
you are given an assignment
which tests your ability is
to apply those fundamentals
in a very practical fashion.
So we are going to be having
to practice assignments
in this thing.
Actually.
We are going to be having
probably three assignments.
We will decide
that on the way
if I deem necessary
that you go
through an assignment,
you will get 1 so these are
the topics that we are going
to be covering throughout
this angular tutorial.
So first of all,
we are going to be targeting
what is angular
where I will give you guys
a very brief introduction
to what angular is
what it does we are.
To be going to look into
what's new and angular 8.
So this is angular 8 and some
of you guys might be thinking
that I've missed out
on a lot of things.
How am I gonna catch up?
Don't worry.
I'll get to that
just in the second
after we have gone
through a little bit
of a theory of what is angular.
And what's new in angular 8.
We are going to jump right
into the Practical parts
and the Practical part start up
with you setting up
your local angular project.
So we will go through
the project setup.
We will also be writing
our first very basic
and simple application.
We are not going
to be incorporating a lot of
complicated modules into this.
This is going to be a very
very simple application just
so that you know
how everything works
how angular as
a big jigsaw puzzle fits
all the pieces together
after we have written a little
of our first application
you will soon realize
that angular uses a superset
of JavaScript called typescript.
So we will be taking a very
brief look into typescript.
I will not get into much
about teaching you
guys typescript you
can basically look up another
That this is meant for angular
and that is exactly
what we will be doing
after I have given
you guys a very brief
introduction to typescript.
We will be also looking at how
you can integrate external CSS
into your angular application.
So we will mostly
be using bootstrap
3 and we will be learning
how to actually integrate that
into your angular applications.
After that.
We will be looking at a very
basic fundamental and that is
how an angular app
gets loaded most of the people
who learn angular today
and they're very beginner.
Like they will go ahead
and write an application
but most of them
will not even know
how the application
is getting loaded and
how it is brought to your screen
and what are the file systems
that are actually being invoked.
So we will be actually
addressing this very
important topic as
to how an angular app
gets loaded after that.
We will also jump right into
the building blocks of angular
and that is a component
we will be looking
at how you can create
a component from a CLI.
We will also be looking
at how you can create
your custom components manually.
Above that we will be
targeting data binding
so data binding will include
two-way data binding
string interpolation
and property binding after that.
We will also do event
binding we will be looking
at directives what they are
how they do it,
but we will be not looking
into how you can write
your own custom directives.
So if you're here
on this video expecting to learn
about custom directives
and how you can write them.
Well, this is not the video
meant for you.
We will be releasing a video
on how you can build
your custom directives.
In fact, we will be
releasing a video
on all these topics separately
that is components
where we take a much much deeper
look into what a component is
how it is made
every piece of code
that goes into a confident.
We will be doing the same
with data mining event binding
and directives last
but not least about
this particular video.
We will be learning
some inbuilt directors that ship
with angular mostly ng-if
ng4 and stuff like that.
So those are pretty useful stuff
and we will be creating
some really simple.
So as I said,
I will be giving you guys
some small small assignments
as we go along the way so
let's plan the sinus out.
So after I've taught you guys
how a component is made.
I'm going to go ahead and get
you guys to make
your own components
and you can go ahead and then
check your Solutions with mine.
We will also be having
assignment on data binding
and event finding
and we will also
be having an assignment
for inbuilt directives
and how you can use them
in your application.
So that's about it.
So to make the most
of this video I will suggest
that when I give you
these assignments and
after you have properly
understood the concept
only then you should
attempt the assignment.
So when you are
attempting the assignment,
please do not go too
long with me mostly
use the code long part
of the assignment just to check
if you have done the solution
properly not only will this
give you a better omph
at learning angular.
It will also shown
your brains get them
to think in a very
angular sort of way now
that I have put down everything
that I need to tell you guys
before we start
with the And this angle
of tutorial let's get started.
Basically just
another small thing.
I want to get out of the way.
If you don't know angular 7
anger five or anything like that
that goes up too late.
Don't worry.
You can still follow
along with this course
because you will understand
just in a while why?
So the first topic
that we are going to cover today
is a very theoretical topic.
So that is what is angular.
So it only makes sense to start
with what exactly is Anglo.
So for viewers
who are watching any angular
video for the first time
you deserve an introduction
to what you are learning.
Now, most of you I
assume actually already
have done your research
before coming onto YouTube
and typing out angular tutorial.
So it's only mandatory
that I give you
this introduction.
The first of all angular is a
front-end development framework.
Now, that's out of the way.
Let's get into what front-end
development framework means.
So when if you have
any web developer friends,
you will constantly hear
two words back-end and front-end
back-end and front-end.
So what do these two words mean?
Well the roles
of a web developer Poked
in the two very distinct
branches in this industry.
The first is
that of a back-end developer
and the second is
that of a front-end developer
now a back-end developer
is responsible for
mostly everything
that happens on the back end.
So basically stuff like routing
well routing is also done
by front-end developers,
but that's another thing
but routing is basically
the job of a back-end
developer fetching things
from a server writing the
JavaScript for all that things.
That is a complete back-end
developer sing setting up
the server for in fact setting
up the database schema.
That's everything
a back-end developer does
what the front end developer
does mostly entails
what you see
on your screen right now.
So the way you see
Facebook the way
it's designed how everything
how the news feed
is actually placed
like that that is
a job front end developer.
You make sure that everything
on the website looks tipped up
and smack perfect
and he does this
with a lot of optimization.
So mostly back in the day
front-end more Used to be done
by HTML and CSS and CSS
used to get very complicated
in this fashion.
It still is
a little complicated.
If you want to present
a very polished website,
but creating the HTML
and making it much
more reactive is
what the framework does for you.
So most online sites will say
that front end development
framework is also referred
to as the CSS framework.
Well while this is very true,
it's not so perfect
of a thing to say
that is a CSS framework.
It is more of
a reactive HTML framework
and I will explain just now
how so the second thing
that you should know
about angular is
that it is maintained
and developed by Google.
So angularjs is a JavaScript
based open source,
front-end framework mainly
maintained by Google and by
a community of individuals
and corporations to dress
many of the challenges
encountered in developing
single page applications.
We also get to what single
page applications mean
in a moment it aims
to simplify both development
and the testing of such
applications by providing
a framework for client-side
model view controller
that The MVC architecture on the
model view viewmodel controller
on the mvvm architectures
as you might know it
so basically it's maintained
and developed by Google Now,
if you don't Google, you know,
things are give you
as a product is amazing things
like flutter really
took off Android.
You know, what it is today
and angular G has has been
out there since a long time.
It's got an amazing Community.
If you have any sort of doubt,
you can go ahead and push
it out on stack Overflow
under the angular Tab
and you will probably get
an answer almost immediately.
Other than that your problems
might already be there post
by somebody else
who is developing
and face the same problem.
So basically you have
a great Community great support
from Google and it's a breeze
to work with angular today.
The third thing
that you need to know
about angular is that it is
a JavaScript based framework.
Now if that was not already
obvious from angular 1,
which is named angular GS.
Well, I'm just
putting it out there.
It is javascript-based.
So why is it a good thing
that Javascript-based.
Well JavaScript is commonly
known as the language
of the web.
So if you are interacting
with any part of the web,
you're probably going
to use JavaScript
or the JavaScript engine,
you might be doing unknowingly,
but you are definitely doing it.
For example, you're watching
this video on YouTube right?
Now.
You are using
a JavaScript engine
that runs a video framework.
So yeah,
so if you know JavaScript,
you basically know
how to talk to the web.
So when you're trying
to learn angular,
you don't really have
to learn a new language.
For example, when
you're learning flutter,
you have to learn about Dart
so Dart is a new language
that is developed by Google
and is used in flutter
that is their mobile application
development framework.
If you want to go learn flutter,
you can check out my flutter
tutorial on Eddie Rekha,
but for now you need
to know that angular
is based on JavaScript.
Well, not exactly JavaScript.
It is based on typescript
typescript is the main language
that is used in angular scripts
and typescript is basically
a superset of JavaScript.
We will get into what I
stripped is later on.
So basically the fact
that it is made up
of it is based
on JavaScript makes
it much more common
and easy to reach out for
developers like us after that.
We just discussed
that angular is main first
single page applications.
So we are not trying to create
multi page applications
with angular angular is made for
making single page applications.
So what exactly is
a single page application?
Well, it does not read
require a page reloading.
So for example
Gmail is a wonderful
single page application.
So let me just go ahead
and show it to you.
So if you go ahead and open up
your Gmail account and let's say
you are straight-up going
to open on the inbox page.
Now if you were
to go into drafts,
let the site stop loading.
Okay.
So if you were to go into draft,
you see that there is basically
no load out here your screen
isn't going into that whole
whoopty whoop of loading.
But if you are not on
a single page application,
for example, go to webinar,
which is a Guarding service
so out here we are
in the my webinars tab.
And if I were to go
to my recording out here,
you see that this goes
into a loading fashion.
This is loading up a new page.
So this means
that gotowebinar is
not a single page application
while Google is
a single page application
and you just saw how much
faster Google can be my God.
This is still loading and Google
was done with it already.
So yeah, single page
applications certainly have
the performance and speed
that you required today to all
your things very seamlessly.
So it's great to have
a framework that lets you create
single page applications
with so much ease.
Okay, so that was
all about angular
and what you need to know
about it to actually go ahead
and start developing
apps using angular.
Now.
Another elephant in
the room is angular 8,
most people I actually teach
angular are very flustered
with the fact
that angular is on version
eat at this moment.
They are mostly flustered
because they think they have
to go through everything
from version to version 7
and then learn it.
Well that is The case
first of all angular
was released as angularjs
and angularjs was
the very first released
and everything changed
with angular 2 itself.
The whole engine changed
how angular written is change.
So basically the major overhaul
was done in angular 2 and since
angular 2 after every six months
Google actually releases
and update to angular
and since then it's been
like angular 2 3 4 5 6 7
and now we're eight.
So those funny half years
that have gone.
So it's basically
being four years.
I guess if my math is correct.
So now we're at angular
8 and every update
that they make out there is
basically backwards compatible.
So think you've learn angular 5.
Well, you can still work
with angular 8 because most
of the stuff that's been changed
are backwards compatible.
So now that being
out of the way,
let's go ahead and see
what is new in angular 8 now,
if you're a beginner
to angular most
of this will not exactly
make sense to you.
So I recommend you skip it,
please use the time stamps
that then the description
to skip The next topic
and that is Project setup
and I'll be way more
interesting for you.
But if you're a guy
who is tech savvy
and like to know
what he's working with
what's new in that version?
Well this part
for you so angular,
it came with a few changes
and one breaking change.
Most of angular updates
have a few breaking changes.
So the changes
that are very relevant
in angular 8 firstly
is the IV engine.
So angular uses
a visual rendering engine
and that is going
to be replaced with
V it is still in its testing
phases to be honest.
It's a Beta release
and angular 8.
It will become very
much prominent in angular 9,
I guess so IV is the most
hype thing out there
because you are visual
rendering API remains unchanged.
So basically you're cute.
You don't need to change a code,
but the way it gets rendered
is completely different.
It's faster much more optimized
and it's basically a breeze
to work with the next thing
that's new in angular
is the basil engine.
So vassal is your
way of orchestrating
how your dependencies are there.
So basically it's like webpack,
but don't get this confused.
It's not going to be replacing
webpack webpack is the god
of their part it is going
to make webpack job
a lot more easier.
It's going to orchestrate
and really serialize out
what dependency you need
to actually really a projects.
So the coolest feature
of Basil is
that it has a very
smart algorithm for determining
the bill dependencies
and injecting them
into your project.
Another thing.
That is cool about
angular 8 is Loading
so this is just to make sure
that there is a different type
of loading for legacy browsers
and the modern
browsers out there.
So basically the modern browsers
use more in JavaScript
and Legacy ones
use Legacy JavaScript.
So basically there is
a load time difference
and when you are using
Legacy JavaScript,
it tends to be a little slower
while modern ones
are way faster.
They're much more quick
to even write as
a developer's perspective.
So differential loading
the basil engine and Ivy so
these are the three changes
that are there in angular 8,
there is also a very
breaking change in angular 8.
I have not listed
that out out here.
Well that has to do
with the HTTP Library.
So to invoke the HTTP Library
you would mostly have to import
angular slash HTTP,
but that has been changed and
that is the most breaking change
and that to now use
the HTTP libraries.
You have to import
at the rate angular /
comment / HTTP and
if you've used SE debe before,
you know what I'm talking
about so with that
out of the way This
is all the theory pot.
Let's go ahead and start up
with our own angular project.
So the first thing
that you need to do is
to start off with angular is go
ahead do your browser
open up a new tab
and search for no GPS.
No, I am assuming
that you don't have no GS
installed on your computer.
So click on the first link and
go ahead and download the one
that is recommended
for most users
after you downloaded.
You will get a setup file.
Go ahead click the setup file
and just follow the instruction.
It's a pretty easy install
and I don't think there
should be much problems with it.
But just in case our the
you got a problem
with it some configuration
problem goes wrong,
please go ahead
and check out another video
that actually explains
how to install node.js
on your computer
because this video
is meant for angular.
I have a lot to do
and I can't waste time
where stuff like
how to install node.
There are a lot
of videos out there
including Eddie records itself,
and you can go ahead
and check them out.
And once you have installed
note on your computer,
you can go ahead and check
if note is installed
by just typing.
No, Don York.
On prompt and this should open
up a JavaScript console.
You can say stuff like print
or let's say VAR x equals 5
and if you just call X it
will say five out there.
I know my text isn't very clear
because I have this weird blue
background in my command prompt.
But yeah,
if you can open up JavaScript
console with just typing node,
you have installed node
in proper fashion now to exit
from this console,
you can just type dot X it
and I will exit you
from that console.
So let's go ahead
and clear up our Command Prompt
and the next thing
that we are going to do is
install angular on our computer.
So to install angular.
Let's see what we have to do.
So the best place that you have
for any doubts of this sort
is the angular documentation.
So go ahead and search
for the angular Doc's
so this will open up
the angular Doc's it's
at angular dot IO /
docks go ahead
and check the set apart.
So I'll show you see
that you need nodejs now
that you have done
it you can go ahead.
And install angular
2 an npm command.
So npm is a node package manager
and all you have
to say to npm is
that you need to install
so install or you can just
simply say I and then -
gee which basically means
that it is going
to be a global install
and not pertaining
to any particular folder
or any project setup.
So we are going to be
installing this globally
so that you can access
the angular CLI from almost
anywhere on your computer.
So after that,
all you have to say is angular /
CLI from correct?
Okay.
It's at the rate Anglo.
So for stuff like this always
keep the documentation open
and you should go ahead
and press enter after that.
So this command will go ahead
and install angular
on your local machine.
So let's just wait
for this to finish.
Okay.
So as you guys know I
already had angular installed
on my computer.
So nothing new has
actually been changed.
It just says it
updated one package.
So that doesn't really matter.
So this means
that angular has been installed
on our computer and you
can go ahead and check
that with just creating
an angular project.
Now.
I'm in my
default user directory.
So let me just go
ahead and change it
to the desktop directory and out
in the desktop directory.
I want to make folder
called angular tutorial
so angular underscore tutorial.
So this is where I'm going
to be saving all the projects
and all the setups
that we will be needing
for the various assignments
and simple applications
that we will be looking
at and the concepts
so this is going to be
the folder for the day.
So let's go ahead and quickly
change into that folder
and so angular tutorial
and we are in our angular
tutorial folder so out here
what you can do to start
up a new angular project is
as you guys can see I'll tell it
is it says to create a workspace
and initial application you
can use the engine new command.
So NG new basically
tells angular CLI
that you want to start a new
project and then you basically
give your project a name.
Okay.
So Angie knew and
what do we name our project?
Well, let's think
of some appropriate name.
Let's go back and see what are
we actually going to do next.
So we are going to be
writing our first app.
So it's very simple
that we are going to be calling
this our first app.
So engine you will go ahead
and create folder
which has everything that you
need to create your first app
so you can opt out
for routing for now
because we will not be going
for routing in this tutorial
and we will also be using
CSS for our file.
So just press enter twice
and I'll be using
the default settings for setting
up your angular project
and there it goes
so that completes
our project setup and for
this project setup.
We are also missing
on one thing so Firstly we
are missing our code editor.
So I'm going to be using
visual studio code
but you can use
other paid applications
like web storm out there
webstorm is amazing.
If you can pay for it,
please go for it.
But for now for a very free way
of making a tutorial I'm going
to be sticking to my cheap ways
and just use Visual
Studio code now just
because Visual Studio code is
free doesn't mean it takes away
from any other functionalities
that come from the paid apps.
It has all the functionalities
like syntax highlighting
for creating and
generating components.
It's really good.
You even get a built-in
terminal to actually run
your angular CLI commands Okay.
So let's just wait
for this project to get set up.
It kind of takes a couple
of minutes from some time.
So let's just give it some time.
Okay.
So now that our angular app
is set up and up and running.
All we need to do
now is go ahead
and just download
visual studio code.
So to download visual
studio code go ahead
and type in Visual Studio code
on your browser.
Go to the first link and also
the second link out here
the download visual studio code
that should give you a set
of file and you should just
go ahead and set it up
that's very easy to do.
So, let's not waste more time
and get started
with writing our first app.
Okay, so out here
if you were to go
to your desktop and
if you made a folder like me
like angular tutorial,
you will see
that there's a folder
that says first app now
if you were to open
the folder you see a lot
of things you probably
don't understand out here.
So there is a TS lint
which is a Json source file.
There's also the package file.
There's a package lock.
There's also this implies very
important angulardart Json file,
which basically includes
all your dependencies.
Now this e 2 e file
is not really going to be useful
for us in this Earlier tutorial
it we basically means end to end
and this is made for end-to-end
testing of angular apps.
What we are going
to be interested
in is mostly the node modules
and the SRC so Archer and SRC
you see that there is this index
page there is an index page
which is our HTML file.
There's also the style sheet,
which is your basic
styling of the web app
that comes built in when you
basically make any angular app.
So first of all,
let's go back and let's open
this folder particularly
with Visual Studio code.
So as you guys can see I
have opened up our first app
and we can go into our SRC
and we can see
that there's an app folder
and we get a lot
of files out here.
So we have an app
component CSS file.
We have an app
component dot HTML file.
We have an app component
dot spec dot DS file.
So all of these dots pecked
RTS files are basically used
for Testing purposes
and I'm going to be
concentrating on testing
but rather more
on developing an app.
So this is none
of our concern for now.
You can feel free to actually
go ahead and delete it.
If you go ahead
and open up app dot component
of TS you can go ahead and see
that there is a bit
of code written out here.
So there is an import line
from the first thing we can see
that it's importing something
called components from a library
called angular / core.
There is also this decorator
out here that tells angular
that this is a component
it has a selector and has
a template URLs.
It has tiles URLs
in in the class.
You can see that there is
a variable that says title
and it says first app now
this really doesn't make
sense to a beginner,
but just wait on
when we will know
what all of these things mean
from components to a class
and everything else.
So first of all,
let's go ahead and see
what this app that angular ships
with looks like so to do that.
Go ahead and open
up your terminal.
You can simply do
that by dragging it up
and down and out here.
What do you want to see is NG -
- open which basically
makes your default
browser open up and all
you want to say is serve.
So this command
basically serves the app
that is in development mode
right now and it will serve it
on a local host at Port number
four thousand two hundred.
So it's compiling at the moment.
So let's go ahead and see
what it actually looks like.
Let's give it some time
to compile and should open
up the app for us automatically.
Close off this one.
Let's keep the
documentation open.
Let's close off.
The node.js is closed
off my mail.
Okay.
So this is the first app.
Okay.
So as you guys can see we are
greeted with the welcome screen
as you guys can also see it's
on a local server.
This is not hosted
at a global scale.
This is just for your testing
purposes as a developer
so you can see
that it says welcome
to the first app.
Now if you go ahead and see
out here it says
title equals first app.
Now if you go ahead and
the HTML part you can also see
that there is this little place
where title is
referenced back again.
So as a developer,
I think you can make some sense
that these three files
app component DS
the app component of HTML
and the app component dot CSS
is kind of interconnected
with each other.
So yeah, this is basically what
an angular app looks like Okay.
So this is
basically the application
that angler ships with it's
a very welcoming application.
It says welcome to First up.
It has some useful links
such as the tour of Heroes link.
It has a link to the command
line interface documentation
and a few of the angular blogs.
Now.
This is of really no use to us
if you want to learn
so let's go ahead
and actually fiddle
around with this file
that comes along with angular
when you create your app.
So if you go ahead and look
at the app component HTML page,
it looks deceivingly similar
to what we see
on our screen out here
when with this app
that angular ships with so
as you guys can see
it has an edge one
that says welcome to
and title and out here.
You can see welcome to First up.
So basically we can say
that the title out here
which we saw
in the typescript file,
which is said title
equals to First app
and that gets converted
out here above that.
We also have a few links
and basically it's
an unordered list and also
if Necessary there is some
styling that goes along too.
But at this moment
there is no styling
that is available.
So let's go ahead
and Tinker around
with this application
just to give you an idea
of how angular actually works.
So angular is basically
divided into components
and angular app so out here
what you see is
the app component.
So every component
has three files.
It's basically it's a template
so it has its own styling.
So that is app dot
component dot CSS.
It also has its template.
So The Styling is CSS.
The template is up
dot component of HTML
and the logic the business logic
that goes inside this thing is
in the app dot company
dot DS file now,
there is also this app
dot module dot EPS file
and I'll get to that
just in a moment.
But for now,
what you want to do is go ahead
and just delete all these stuff
that is there and app.com
pin it on HTML file now,
don't forget to keep
your terminal running
which is serving
this application.
So Time you go ahead
and save it basically saves it
and you can go ahead and see
that it has reloaded it
and we have nothing
out here to be honest.
So let's make the speech
a little more interesting.
So firstly let's give
this just an input.
Let's say so we want a div
and in this div,
we are going to have an input
of type text now every input
should also go with the label
and this label is for name
so we can give this type name
equals name out here, right?
So let's make this a little
less confusing for you guys.
Let's call this first name
right and out here.
You see if you go
ahead and save it.
We should get an input out here.
We can type stuff out here,
but it really does nothing even
if we press enter and stuff
like that so we can also
have a paragraph out here
which an output
out our name for us.
Please don't pay much attention
to the Syntax for now just try
and understand what is happening
in the background
because we will get
to the syntax just
in a few moments.
So we want to display
the name out here.
So to display the name
we need to create
a variable called name.
So go ahead and go to
your app dot competent RTS file
and change this name the title
to name and out here.
Let's change it to my name.
So we're going to say Aria.
So let's save that.
Let's go back and save
our HTML file and
as you guys can see
RL is coming out here.
But if we still type
something in the input
nothing actually happens.
Now, what I want to do is what
if I type in the input should
automatically be reflected
in this paragraph below it
so we can do that very simply
with so-called tools
and angular ships
it now these tools
are called directives
and we will get into directives
just in this tutorial.
I'll be teaching you
how to make use
of inbuilt directives
like the one I'm going
to be using right now.
So let's go ahead and use
this directive now pay
no attention to the way
I am writing this
because syntax is something
that can be dealt with later.
So for now what we
want to do is start
up square bracket and then
an open parenthesis bracket,
that is the normal bracket.
And all I want to say is
NG model is equals to name.
So name should be
in your double quotes.
Now.
This will tell angular
that whatever is being typed
out here is going to be stored
in a property called name
and we are also going
to be displaying the same name
down here in this paragraph
So let's go ahead
and save this and let's go ahead
and reload our file
and you surprisingly see
that the input quad that we
had has suddenly disappeared.
Now what we want to do
to realize our mistake
is go ahead and say inspect
if you go into the console,
it says uncaught error
template parse error,
so it can't bind to ng-model
since it isn't known
property of input.
Okay.
So basically angular
can't figure out
what NG model is now this is
because we have not Imported the
functionalities of ng-model now
I said that this is
an input model and it
comes shipped with angular.
But the way typescript works is
that you have to go
and tell typescript
everything you are importing
that you will be needing
for your app to be running
now all your Imports
to this is actually done
in the module file.
So things that need
to be imported
when you are running this
is done in the modules file.
So as you guys can see
we are importing
a few stuff already
that is by default.
So we are importing the NG model
from angular / core
and we are also importing
the browser module
from angular /
platform browser now
to actually make the magic
of ng-model happen.
We need to import something
and this is at the rate
angular / forms.
So everything entered
the semicolon so
basically in typescript,
you need to tell typescript
where everything is
particularly so angular /
forms and what we need
to import is forms module.
Now this was telling typescript
that we are going
to be using this
but you also need
to tell angular
that your forms module
needs to be imported.
So you can do
that by just copying
this name and putting it
in the Imports array out here.
So put a comma
or press enter and type
in forms module go ahead
and save your HTML page
also just in case and now
what we see out here is
we do not get any error.
First of all and we have
this nice little input box.
So let's close this.
We also have this nice
little input box.
It says Aria in the paragraph It
also says Aria in input box now
if I were to delete
that everything in
the paragraph also
automatically gets deleted.
So if this was not a single
page application for example,
reflecting the changes A
to the input would probably
take you to reload the page
that that is not with angular.
You can go ahead
and simply type your name
and everything will happen
like it's magic
and it will appear down
in the paragraph below.
So that was all about installing
angler setting up your project
and we set up a project we saw
how the shipping app actually
looks like and then we
kind of fiddle with it.
And this is
how an angular app basically
works you have components
and then you also have modules
so modules are
like sub-packages like
any app would be divided
into sub packages
and angular app is divided
into modules now molecules
contain components and this
is the component out here
that we worked with just now
it is called the app component.
Also another thing
that I want to bring
to your notice is
if we go ahead and open
up the source code
what you see out here is
it's basically an HTML page
but there's this weird
app Root element out here.
It's almost seems
like we I've built
our own custom element below
that what you see is a bunch
of script Imports
that angular does for you
so that angle works properly
but the main interesting part
is this app Root element now,
if you remember we had seen
this app Root element
in our app dot component
RTS file and we see
that we have
a selector called uproot.
Now the page that gets loaded
into the browser is actually
this index dot HTML page now,
I'll tell you see
that we have created
this app Root thing.
So basically uproot out
he'll is like a selector.
So basically this
will help you understand
how an angular app gets loaded
when we get to that
so index dot HTML is
basically the file
or the source code
that you see out here.
It also happens to have this app
route custom element now,
we built this custom element
using our components
and we told our confident
that the selector
for this custom element.
We uproot and the template
of that component is stored
in app component
that HTML which is
basically this file
and also the component
has some styling which it
at the moment doesn't have any
if we would have any styling it
would be in this app dot
competent dot CSS file
and basically that's it.
And we have our app
dot component TS file
which makes sure of the logic
that is working properly.
So basically this is
how angular works it's
a bunch of components.
Now, let's go ahead
and this was our first app
that we created now,
let's go ahead
with our next topic
and that is what is typescript.
Now, you really saw
that we are using
something a little
different from JavaScript.
It's basically not JavaScript.
It's typescript.
So what exactly is typescript
well typescript is just
a superset of JavaScript.
It is a strongly typed object
oriented compiled language.
It was designed by Microsoft
and it is basically
A superset of JavaScript.
So anything that is included
in JavaScript is definitely
included in typescript,
but the reverse
can be actually said
so everything in JavaScript is
there in typescript
because it is a superset
but everything in typescript
is not there in JavaScript.
So typescript is basically used
when you want to create
a JavaScript based application
that can actually scale
at an industrial level
because when we're talking
about typescript it basically
compiles down to JavaScript
and this compilation
is done by the angular CLI.
So if you want to go ahead
and learn the
nitty-gritties of typescript,
you can go ahead
and check out typescript
tutorial out there on the web.
There are plenty
of them typescript is
really easy to learn and even
if you don't want
to learn typescript,
I think it's easy enough
if you know JavaScript,
you can catch it up
along the way it's
basically like JavaScript
but having classes interfaces
and stuff like that.
So with that out of the way,
we can move ahead
to our next topic and
that is integrating external CSS
into Will angular application.
Okay.
So for the purpose
of integrating and external CSS,
we're going to be working
with bootstrap 3 so bootstrap,
if you don't know
is a CSS framework.
So let's go and see
what bootstrap does.
So this is bootstrap.
We are on bootstrap version
for right now,
but I will be using version
3 for this purpose of this demo.
So you can go ahead and see
what bootstrap does out here
on bootstraps official site.
I also have a bootstrap tutorial
you can go ahead and check
that out too.
I'll leave a link to that
in the description below.
It's basically will show you
how to use bootstrap and
its various forms and formats.
Okay.
So now we are only going
to integrate bootstrap
into our project.
So to do that.
All you have to do
is go out here
and open up another Powershell
the mound out here.
What do you want to do is type
in the commands
npm install and -
does save and you want to say
bootstrap 383 what this will do
is download all the files
of bootstrap 3 and store it
in this node modules folder.
So node modules
folder is anything
that you use from the know?
Package manager if you
download some external package,
it will be saved
in your node modules
after that after its downloaded.
I will show you
how you can integrate it
into your project that
you are working on.
Let's give it some time
to actually download
the node modules or
what we have here.
That is bootstrap 3 Okay,
so we have actually
downloaded bootstrap 3 now,
you can check that by actually
opening the node modules folder
and going down to be oo.
So ABCD be should
be somewhere here.
Okay, it seems I
cannot find it there.
Let's go ahead and check
it out on our desktop.
So we have angular tutorial
first up no modules,
and there should be
a bootstrap out here.
Yep below bonjour,
so it should be below bonjour.
So let's go ahead
and find bonjour out here.
So this is our bootstrap folder
that we had just downloaded now
out here we have a few folders.
So under this bootstrap folder
going to the dist folder
that stands with
distribution go to CSS.
And all you have to do
is copy this right click on it
and copy the relative path.
Now, all you have to do is go
into let's let's
minimize this a little
so that it becomes easier
to work with Now
all you have to do is go
out here going to Styles.
This is the angular the Json
file on almost line number 27,
you'll see that there is
a Styles array so out here.
All you do is put a comma s
press enter and put
in the address of the bootstrap
CSS file now be aware
that when you copy
the relative path you
have to actually go ahead
and change this
all to a backslash.
So this change all
of these two backslashes
and you should be ready to go.
So, let me just show you guys
this is without actually
having bootstrap installed.
So this is the app
that we have created now,
if you were to just go ahead
and inspect we
can go ahead and see
that in the Head bar.
There is only one Styles
at the size deck / CSS.
This other styles is just
a way of telling angular
that there's a source mapping
of All the CSS Styles
at this moment.
You can see that this is
the global styles
to this file now
once we actually go ahead and
save our angular dot Json file
and then we have to do
is actually go ahead and node
where we were actually
serving hit control C.
And then what you want
to do again is serve it
again to basically save
your angular geojson file
stop serving your application
onto the server
and then save all your files
and then start up
a new Fresh So process again,
so to start a new
Fresh serving process.
All you have to do is go
ahead and tie Angie knew
or you can just say n
Oh wait, we're not creating
a new component
or we want to do is say
n g - o and serve so
remember this has only
one style at this moment.
So now let's see how we
can actually integrate bootstrap
if We actually could integrate
bootstrap into our project.
Okay, so our application
has actually compiled and let's
go ahead and see let's go ahead
and inspect our page and
if you go into your head part,
you will see
that there is a new style
that has been added.
So this says
that bootstrap version
three point four point one
has been added and now you
can use all the styling
that comes along with bootstrap.
For example,
if I were to put this division
inside a can clasp called
Jumbotron this would give
it a specific type
of styling a Jumbotron
is not exactly meant
to be used like that.
So let's go ahead
and change it to a container.
Now if you want to know about
all these bootstrap glasses
that I'm using you can very
well go ahead and check out
my bootstrap tutorial
that I have up
on a direct course site.
Okay.
So let's remove this.
We are not doing the styling
properly at this moment.
Let's get back to this.
Okay.
Looks like we have
actually broken something.
But what I wanted to show you is
that we actually have
bootstrap going on
and I bootstrap
is completely working.
This is bootstrap version three
point four point one for us.
So that is guys
how you would add
an external CSS file
to your project.
Okay.
So our next topic for today is
how angular actually loads
so if we go back
to our code at The Germ
and we analyzed all the files
that we've seen.
So first of all,
you have three component files
that is the component
styling file click
on print template file
and the component
type script file now,
if you were to go
back to your page
where your application
is loaded you would inspect it
or to be honest
if we go and see the source,
so in the source,
you see that there is
this app Root element.
Now, how does the up
root element know
that it has to end?
Third an input box
and a paragraph or two.
Well, let me just
explain that first
because this is
a very important concept.
This will help you
how in learning angular
because you're getting
to the root and fundamentals
of how angular is working.
So firstly the page
that is getting served
by the NG serve process.
Is this index dot HTML file now
in this index dot HTML file.
We have somewhat
of a custom element
with the selector
of a brute now,
if you would realize we have
died in this app route selector
out here in this app
dot component dot t--
s file in this app dot
competent RTS file.
We have a decorator method.
We have a decorator class.
I'm sorry and in this decorator
class we have said
that the selector
is going to be uproot.
Basically, it saves
a string as a selector
and it gives it a value
that if this is going to be used
for recognizing an element
or an HTML page we
have then also said
that the element will have
its Temple thing in app dot
comprehend dot HTML file.
Very basically when
a nap root component is present
on your HTML file angular knows
that it has to serve
this three files out
here these three files out here
the app component files it knows
because it's tied in
with the selector.
Now if you go ahead and see it
out here there is a module file
also now before we get
to the module file,
I'd like to tell you
that the first piece of code
that is actually run is always
the main file so out here
the main file is the main
dot DS file and out here.
You see this line out here
so out here in this file.
Basically, there
are few Imports.
The one is to enable production
mode for development purposes.
But the most important line out
here is platform browser Dynamic
and it's a bootstrap module.
So in this bootstrap module,
we are passing in the app
module as an argument.
So since the app module
is being passed as an argument.
The app module part is actually
invoked out here and out here.
You see it has
another bootstrap.
Re so this boot shop
doesn't actually refer
to our bootstrap CSS framework.
We just included bootstrap means
what should be done first
when you are actually
running an application so
out here we are saying
that we want to run
the app component
and the app component
here happens to have
this HTML file the CSS file
and this types file,
which are also tied
into the index dot HTML,
which is a fruit selector.
So whenever this approach
selector is found
on this HTML page it is going to
actually serve these three files
and that is exactly
how an angular app is loaded
onto your screen.
So this workflow
is very important
for you to understand such
that you know,
where you are going
wrong just in case
in future debugging processes.
We will be having
a very detailed lecture
on debugging in the future.
So please hang on for that.
So this part
that I just explained well acts
as a precursor of knowledge
for the future videos,
which will need
you to understand.
An angular application
is actually being presented
to you on your screen.
Now moving ahead.
We are going to go ahead
to our next topic
and that is confidence.
And what we have here
under this app folder is
a component now components
are the building blocks
of angular everything
that you see on your screen
using angular is
basically a component.
So imagine there.
Is this website
that you see
on your mobile phone
and it is a website built
by angular now everything
on angular will be starting
with the root component
and they will obviously
contain subcomponents and even
more subcomponents after that.
So basically it is a tree
of components now
if you would remember
my flutter tutorial
if you haven't watched that,
please go ahead and check
that out flutter is amazing and
you should be learning it today.
Well in flutter I had said
that application built using
flutter is a tree of widgets.
Now the same analogy
can be put to web page
that is built using.
As a tree of components
it's basically a unit
or a building block
and each framework gives
it gives its building blocks
a different name.
So for flutter,
it's a widget and for angular.
It's a root component
or just components in himself.
So what we did out here is
that we had a component now,
let's say that we want
to create another component.
How do we do that?
Well, all you have to do
is go ahead and right-click
on your applications folder.
And what you want to say is
you want to put in a new folder.
Now, let's call this folder.
Let's say we want to have
a component called servers.
So let's call the servers
and out here.
What we want to do is we want
to create the server files so
out here we are going
to create a new file.
So we are going to create
a new file and this file
is going to be called the server
dot component dot HTML.
So why did we Choose
this naming process.
Well, when you are building
an industry level applications
you tend to forget
what is what so naming something
appropriately so out here,
you know that this is the server
dot component HTML file.
This gives us very
good information.
For example, it is a server
it is a component and this
is the template HTML file now
in this template HTML file,
we could be putting anything
for example at just been H3
and we could say that this is
the server component
that you are viewing.
So if this is coming
on our screen,
we will know that their this is
a server component now we
can we also need to add
a new file out here.
So just save this file.
We need a type script
file first of all,
so what we need to do
is create a new file
and this will be the server
dot component TS file.
So TS stands
for Stipe script now
if you were to go ahead
and check Out the app component
that ES file out here you see
that there is an import
and then there's a class.
So first of all,
we are going to try
and replicate this because
that is also a component and we
are making a competent manually
so we will know
what we want to do.
So first of all,
we want to say export class.
Let's say server out here.
Let's see the naming fashion
of what how it is used.
So it says app component.
So to make it more clear
that this is a component
we could just use something
of a naming structure
like server component
is our brackets.
Now, we said export
because we want to be using
this glass everywhere else.
So this was your way
of telling angular
that this is a component
but this is not
where it actually ends.
You also need to tell angular
by actually putting a decorator.
So as rate component
will tell angular
that this is indeed
a decorator so out here
if you would go ahead.
And again look into
your components file out here.
You see that we have
to open the confidence bar
and type in the selectors now.
Basically we want to put in
in this component is want to say
how I want to select this.
So we're going to say selector
and I selector will
be lets say a server.
I'm sorry.
That's not how you do it.
Let's just go back and
as you guys can see our things
are becoming much more easier
because of this IDE things
are getting imported
into our file system.
Now I want to say out
here is our selector will be
we have to pass a string
so it is going to be server.
No, we can actually call
this a server but that is
not the proper naming fashion.
So just to make sure
your selector doesn't
actually go ahead
and clash with any inbuilt
selector or some selector
that might probably ship
with angular or you want
to do is call this app server.
So you just put a hyphen in
between and you call this app.
So now another thing
that we need to do is parse
the HTML file so you
can say template URL.
So let's see
how we can actually use
the template URL pain.
So you see
that it is a template URL and we
have to pass in the components
that HTML so out here,
let's go back and
let's say template URL
and all we have to do is
pass server dot component.
Dot HTML now,
let's see if we are missing
out on anything.
You can always go back
and check their
so we have to do put the dot
and the / just tell it
that it is in the same
Parent Directory so
dot slash server dot component
of HTML and for now we
can skip on The Styling
because there is
no styling involved.
So we did not put
a semicolon here
because this is basically
like an array.
So let's go ahead and save
that so that saved
successfully and now
what we can do is go back
into our app component file
and HTML file.
Let's go ahead
and delete all this now
what we can see is let's put
an H1 just know that we are
in the app component file.
So this is app component
that we are looking at now.
If you guys remember we
have used to select the out here
that are selected
for this will be app server.
So whenever we put
an app server type of selector
then H3 should be rendered
with says this is a server.
And then that you are viewing so
let's go ahead and do that.
So let's go back to our app
component and let's say server.
So since we have put
our apps over here,
but we should be able to do
is so since we have put it
up server there and S3 should
be actually rendered there.
Now.
Let's go ahead and check
if that actually happens.
Let's save all our files save
that let's see if this
And what do you see
out here is nothing
is actually getting loaded.
There is no h 1 and there
is no S3 either now.
This is because we
have forgotten to actually
put it in our modules.
So if we see
that nothing has actually
getting loaded there is
no h 1 there is no x
3 so let's go ahead
and inspect and let's go
into the console.
And if you go ahead there,
you'll see that app server is
not a known element
and the Beautiful part
of angular is
that it also gives you
a solution most of the time.
So if app server is
an angular component,
then verify that it is
a part of this module.
So this gives us an idea
that there is something
missing in the app module spot
out here to know
that what this actually does.
So if we were to look at our app
modules type script file,
we would see
that there it kind of looks
like a normal type script file.
There are bunch of imports
in the beginning then
there is a decorator
which is the engi module
decorator and it has a bunch
of Is now in these are
days we have understood
what the boot strap ba.
Does it basically tells
which component should be loaded
or with service should be loaded
when our app is noting
for the first time now,
we also need to tell angular
that there is another component
that you should be aware of.
This is not done automatically.
If you are creating your servers
and components manually.
So what we need to do is
go ahead and tell angular
that there is
a server component.
So if we put a server component,
we also see that there is
another import line
that has been added so out here.
This is typescript.
This is the way
you tell typescript
that there is a server component
and this is the way
you tell angular
that there's a server component
now if you were to go ahead
and save that we can now see
that there is two
parts loaded one says
that up component
and the other said this is
the server component
that you are viewing
if you want to go ahead
and inspect you would see
that This is a head
then this is a body
and inside the a fruit.
We will have
the app server component
that is running inside the app.
So we see
that there is an H3,
which is basically this part.
So this is how you can create
your components manually
and then add them
to your project and add them
successfully do so that angular
and typescript both understand
how your compliments
are being made.
Now.
You can also add a styling
to your component
by just adding a styling folder
I mean styling file
so you will be calling this the
server dot component dot CSS.
So this is going
to be a CSS file
and out here we can just say
since we have an H3,
you can say color will be lets
say blue.
Let's go ahead and save that.
And now what we need to do is go
into the typescript file
and we also need
to give the Styles URL
and this is going to be
so let's go ahead and see
how the styles are actually
put this is put in an area.
So that's exactly
what we're going to do or to
so we want to say is
this is copy this hour
because it's going
to be the CSS file
in the similar fashion
go ahead and paste
that in and just
jeans is just CSS.
Let's go ahead and save that.
And now if we go
ahead and load it,
we will see
that our styling I has also
been applied to our components.
So this is a server component.
This is the app component
which makes it very clear.
Now, if you are actually a guy
who likes things to be much
more automatic and seamless
like me worry not
because angular gives you
the power to create components
and not worry about
if they're included
in your Everything
just through the CLI.
So if we were to go
to our partial bar and we
were to actually run a command
that says NG generate component
and we could say let's say
so we have a server
so we need somebody
to let's say sub server.
So stop.
Now what the CLI will do
is it will go ahead
and create everything
that you need
for your component.
So we see we have
a sub server folder out here.
The sub server has a sub server
that CSS file
and this also has a sub server
that component file only we
can go and put the sews it has
a component file has a paragraph
that sets up server works is
also the testing file
which we didn't create this also
the components file out here.
I mean the typescript file and
as you guys can see
it says apps Observer.
So that is a selector
that you use it with.
So let's go ahead and use this
so we go ahead and put this
into our servers HTML file
and we can just say
app some server.
Let's go ahead and save that.
Now what you should see is
that there is a sub server
works out here.
So basically what you did
was you created a component
through the Ally and you
basically just used it this is
how you are going to be using
most of your components creating
most of it complements
and that is through the CLI,
I just wanted to show you
how you can do it
manually to just
so that you know,
how a server is written.
I mean how a confidence
is written and
what each line of code means
when a component
is also written now
if you were to go ahead
and compare this there
is a Constructor function
and there is this NG on in it.
We will get to these parts later
in our playlist because for now
if I were to go into the nuances
of engine in it
and a Constructor,
it would only create chaos
and confusion in your mind.
So that was about
components for now.
So it's time for our first
assignment OK guys.
So that is how you use
and create components using
the angular CLI now coming back
to the server component
that we created.
I would like to bring to your
notice a few different things
that you can do.
So Of all let's go ahead
and analyze the selected part.
So if you have any experience
with web development,
you will know
that a selector is basically
a way of selecting stuff
or elements on your HTML page.
Now when we say app server
like this out here this
could be anything.
This could be a property.
This could be a class
or this could be
an HTML element to for now.
This is an HTML element,
but let me just show you this
can also be used as a class.
So let's see we say it's
dot app server and let's go
ahead and save that.
So this is going
to be dot app server.
Now.
Let's go ahead and find very
actually used our server.
So we have used
Observer like this.
Now if you would comment
this out and let's say we put
in a div that Hal class
and it said app server.
Now you see this is
a silver confident
that you are viewing
and the sub server works.
So let's go ahead
and inspect that.
Let's go into the body.
That's the a fruit
and then there's a div
which has a class
app server instead of
an app server competent.
So what we did was
that we created
an App server and we
meet the class a selector.
So the select is basically
a class numb then the class
can also have its own styling
and that is basically
how you do it.
Now instead of actually writing
your temple to URLs like this.
You could also
its command this out.
You could also say something
like a template see a template
could be just a template
and you are going to put
your template in these goats.
Now this could be something
like sub server.
Okay, so this will basically
put the apps observer
in this template.
So instead of a template URL
you could be using a template to
and instead of hairstyles URL.
Basically, you can do
some inline styling.
Now before we go ahead
with our next topic.
What I would like you all to do
is solve an assignment for me.
So this assignment will test
how good you are
at creating your components.
So let's go back
and just change everything
back to the way it was.
So let's save it.
Save this save
this save everything.
So out here we can just
say app server again,
and now that creates
an observer for us.
Okay.
So this is save
and now I want you guys to do
a basic assignment actually,
so let me just write
down the instructions
for the assignment.
Okay.
So your for
your first assignment,
this is exactly
what you are going to do.
So as you guys can see
on the screen,
I have put down
three instructions.
So first of all,
what you have to do is
create three components
called red green and yellow now,
we have to use them
in the app component part
and then we have to give them
some appropriate styling and
probably an appropriate message.
So you guys can pause
the video out here
and go ahead and try and create
these three components
and then come back
if you actually are successful
or not also and check
out the solution
that I will provide you guys.
OK guys, so that was the first
assignment I just gave you
so I hope you guys had balls
to screen when I told you
that I'm giving you
guys an assignment
and I hope you guys
actually try to solve it
because in this part
we are going to try
and solve the assignment.
I just gave you so this part
you can use to see
how correct you will well
it was a pretty easy assignment.
So I hope most
of you guys got it
because that means I
could successfully teach you
how to actually use components.
So for the solution we have
created out here angular folder
that says assignment
1 and it has nothing in it.
So, let me just go
ahead and open it
with Visual Studio code.
Out here if I would go ahead
and go to my source folder
into the app folder
and just go ahead
into the spec dot DS
into the typescript file rather
and we would go ahead out here
and I would serve
this you would see
that there is nothing.
Okay, so if we were to just
serve this file out here you
would see that it is
the normal application
that ships with angular.
So let's just NG open and serve.
Okay, so as you guys can see
it says welcome to assignment 1
and this is
the basic application
that angler ships with now
what we're going to do is
we're going to delete everything
and we are going
to start from scratch.
Now.
Let's go back and see
what we actually wanted to do.
So what we have to do is
create three components
called red green and yellow.
So let's go ahead
and do that first.
So to do create these elements.
First of all,
let's go ahead and delete
all this garbage that we
do not need save it again
and let's just keep the title.
So to keep the title
just pay attention to
what I'm doing keep the title.
This is very you don't need
to do this to get
the assignment correct.
All you need to do is
make the components.
So this is just me being
Fancy with you guys.
So this or we could say welcome
to assignment one
make this an H1
so that it looks better.
Yeah, so welcome
to assignment 1.
So that's it.
Now, what we have to do is
create three components.
So to create three components
what we want to do is
create a new terminal
in Visual Studio code
so that we can create
the confidence really
easily and out here.
We want to type
NG generate component red
and we're going to do this
for three different times.
So we're going to have
the red component.
We are also going to have
the blue component.
And we are also going
to have the yellow confident.
Now since we're doing this
for the CLI are AB dot module
automatically gets updated
with red blue and yellow now.
All we need to do
out here is use them
because that is a second part.
We have to use them
in app component.
So our app component
is out here.
This is our app component.
So what we can do
is say app read this
will produce the red part.
This will produce
the app and blue port.
And this will produce
the app yellow.
Let's go ahead and save it.
Obviously is read books
blue Works yellow looks
so we have successfully
created three components
and we have put them
in our app confident.
But now what we need to do
is give them their styling.
So let's go ahead and go
and do the separate components.
Let's open up
their styling files.
We want to say
because we already know
that it's a paragraph
that works there.
So paragraph will
have border or of
since this is the blue component
will give it a blue border.
So we 1px solid and blue
and maybe we can also turn
the color to Sky Blue.
I'm using very
basic colors out here.
That's also copy this
because we're going to be using
a very similar type of styling
for red and yellow.
So let's go into
red and let's face
that we want this to be red
and this to be
crimson and let's go
into yellow and let's
say the same thing.
This is going to be yellow.
We could use heal
and you could also
use another color.
Maybe much more pale yellow.
Let's keep it dark
because fonts need
to be dark actually.
So let's see
if these let's save this file.
Let's save this file
and let's see
if this file now.
Let's go back and see
how it actually is working.
So blue Works yellow box.
We need to go and put
up some more styling
for the yellow part
because that seems to be
kind of going haywire.
So let's go to Yellow dot CSS,
lets go here.
So we have actually done this
in the app component.
Let's save this go back
to Yellow go back
a yellow dot CSS faces out
here and let's save it.
So now our yellow is yellow
or blue is blue and I read
I read you can also add
some new styling to them
by adding a background color.
So this is also
going to be a yellow.
Or we can rather or choose
some different yellow.
Maybe it's making much pelo
on the yellow side.
Let's copy this line then
red component that CSS.
Okay.
So for red we can choose
something of Peel red sorts
that makes it like that
and in blue we can choose
something of a blue sot.
So the blue we can go
for a paler blue
and that should be
much more pillow.
Let's save all of this now.
Let's see.
So yeah, we have a blue
background a yellow background.
Why isn't a red
background working?
We haven't saved it it seems
and I read background is working
to so we have successfully
completed our assignment 1.
So I hope you guys are satisfied
with the solution.
I hope you guys could do it
on your own do it because
that's exactly what matters.
Okay.
So now that we have learned
about how confident
are the building blocks we even
made our own custom components
and we even did
an assignment on one.
So it's time we move on
to the next topic
and that is data binding.
So data binding is
like communication.
Well, what are we
communicating its communication
between your type script file?
And your template so basically
your business logic and your
and what basically the user sees
so suppose you click
a button on the screen
and you want to take some action
according to that or you
are retrieving some information
from a calculation
or from a server
and you want to put
that on the screen.
Well, you do that with the help
of data binding now,
there are two types
of data binding.
The first one is
string interpolation
and second one
is property binding.
So this is the way
of you out putting
something on to the screen.
So string interpolation
and property binding.
So let's go ahead and see
how we can do them.
So let's go back
to our assignment
that we had just done.
So first of all,
what we want to do out
here is go to the modules
and we actually want to remove
all these components.
Let's go ahead and just
remove these components.
Let's go ahead
and remove these Imports
and then we can go ahead
and just delete these files out.
Let's leave that sleep this.
Let's also delete this.
Now, let's go back
to our app component
and we have removed these.
So app module we have
to actually save the stew.
Now that we have saved
it we go ahead and see
that it's just
that it says welcome
to assignment 1 now.
I'll tell you see
that we are using this double
curly braces and this
is string interpolation.
So what the string
interpolation mean?
Well, it converts anything any
variable any string like this
into an interpolated format
and it shows it
to you on the screen.
So let me just give you a rather
better example of a usage
of string interpolation.
So let's go back
to our app component
that HTML and out here you want
to say there is a paragraph
and in this paragraph We are
outputting some server status.
So let's say server is
a server with be ID is offline.
So we want to actually put
out something like this.
So at this moment it
will just simply say server
with PID is offline, right?
But what if a server
had Certain name
so server name let's see -
- - with be IDE - -
is at the status of - laughs
- lets see now.
What we need to do
is go ahead and go
into our app component DS file.
So that is our dark script file.
And now if you're going
to do is create a few of
what of these variables
that we need.
So first of all is
server name and let's say
the server name is Apollo.
Okay, and we also
need a server PID.
So server PID is going
to be let's say 11,
and we also need
a server status.
And then we can set
the server status to offline.
So this will be a string.
So that's why we just surround
them with our single quotes.
So now we can say
something like this
on our components dot HTML page.
So if you remember we
were getting the title
of our General application
that ships in with angular
when you make
a new angular project,
you see that it says welcome
to so-and-so application.
So that was done
with string of depilation.
If you remember
it was a curly braces
that held something
like title in there,
right so out here
what we can do is put
some variable or even a function
that will return
a string or anything.
Basically that can be converted
into a string and
that will be displayed out here
between these curly braces.
So what we can do is we
can reference the server name.
So server name is basically
Captain like this
and then with pi D
so we can put the PID out here.
So this is a number
so the number can Also
be converted into a string.
So therefore string
interpolation will work
in this process and we can also
put in the server status,
of course, so we put
in the server status
by referencing the variable
that holds the server status.
Okay.
So now we have done
the string interpolation.
So let's go ahead and see
what our output looks like.
So server named Apollo
with PID 11 that is
process ID 11 is offline.
Now.
I had also said
that we could put in
a function out here.
So let's go ahead
and create a function.
So in this function,
we will basically
toggle the server ID
so we can say toggle.
So in this function,
we will basically be toggling
the server status.
So we will say something
like toggles server status
and this will return
this dot server status
equals to not okay.
So what we do out here is
for talking this we
will say equals to false.
So if it's false,
let's just understand
that it is going to be offline.
We could put in some logic
to say that falls
will print out offline,
but let's not get into that
for now so we can say
something like or rather.
Let's not deal with this.
Let's do it the way.
Should be done
not be lazy people.
Now we can say
there is a status flag
and it is set to true
or false in this case
because it is offline.
Now this dot service status flag
will be made throughout here.
So status equals to true.
So we're going to make it true
or rather we could make it
not of this dot server
status status flag.
And Status flag now
that will work properly
because this will
basically convert it
and there should be no spaces
out there and we can say
if this start server
status flag equals to true
so we can say if this does
that is flag equals true.
We have to open more braces
and we'll say server status
this dot server status
will be set to online.
Okay, and there we go.
And after this has been done
we can just return
this dot server status.
Right.
So basically what is happening
out here is we have set a flag.
Okay missing white
space Quick Fix
so we can put in a triple equals
just to make sure it's
exactly true and not only
check the equivalence
that is and also check
the value so out here
what we are doing is we
are setting up status flag
to false and according
to that state is flag.
We are changing
the server status
to online or offline.
Okay.
So now that we have put
in this function we can use
that function by calling it in
our string interpolation method.
So just instead
of putting our variable
we can put in the function
and this will change
the server status to online now.
Basically what we are doing
here is really simple is
it's returning a string and it's
being converted into a string.
Okay.
So now that we have toggled
the server status
to online and we did
that through passing a function
in the string interpolation.
So now let's understand
how we can do property binding
so every HTML element
has some property
or the other these Lists
can be easily found on MD
n that is the Mozilla
developer Network.
So let me just give you
an example of a property.
So let's say we had
a button to toggle
the server status further
from offline to online again,
and again instead
of just being toggled
from offline to online
hard-coded into the code.
So let's say we had
a button and let's say this said
toggle server status, right?
So if we had something
like a button
like toggle server status,
so we have a button
like this out here,
but it really doesn't do
much at this moment.
But let's say just
for the sake of showing
property binding let's say
the button was disabled
and you wanted this button
to be actually enabled
after 2 seconds
that your website
has loaded up just so
that there are no discrepancies
in the button, press.
Ok, so we can achieve
that by writing a Constructor
function in our class component
so out here you
can make a Constructor
so we can say set timeout So
we have to first give the time
after which it will be enabled.
So let's say two
and a half seconds.
So it's two and a half seconds.
And now we have to put in
of logic of actually turning
this button to be enabled.
So let's say we have
a variable called
button state so button State
at this moment should be true
because our button
is disabled first.
It's just a the Sable
and then it should get enabled
so we have to say this dot
button State equals to false.
Right?
So now that we have done
that all we have
to do is go ahead
and bind this property.
So we do property binding
by putting the property
in between the square bracket
and then binding it
to the outcome of a variable
or a function
so out here we can say
we are going to bind
the two button State.
Okay.
We need double quotes for this.
I'm sorry not single quotes
So button State now.
Is happening out here
after the Constructor is going
to get executed I bought
in state is going
to become false.
So disabled will become false.
And first of all,
it will be true because a
but instead being true
for the first two
and a half seconds.
And actually let's see
this in action.
So our page is loading
and after two and a half seconds
are button becomes active.
So let me just show
that to you again.
It's inactive for two and a half
seconds and then it
suddenly becomes active.
So this is how you
perform property binding.
So what we just
saw here is we saw
string interpolation in action.
We passed a string interpolation
arguments with variable names
and he even did
a function then following
that we did property binding so
for property binding we
first created a button
so that we can toggle
the server status,
but we haven't really
added that functionality
yet yet to do that.
But what we did was we binded
the disabled property
of the button
to a certain variable now,
this could have also
been a Ocean and it
will be the same way.
You just fasten the function
with the brackets and the work.
And now what we
will see is something
that is our next topic
and that is event binding.
So event binding is basically
binding Dom events
to certain logic
that will reside
in your typescript.
So we want to bind
our toggle service status
that we had created out here
because we are basically
toggling the server status
and then returning
the server status
so we can basically do
that by passing an event.
So every button has
an event called click
and to click we will pass
the event toggle server status
with the brackets now
this will become active
after 2.5 seconds.
And basically it's not working
as we wanted it to so
let's go ahead and inspect it.
Okay, so it's not working
because we are talking
the server status out here.
And what we want to do is
return the server status,
so it should actually
work to be honest.
So this top server status?
So if we were to just output
the server status out here.
Okay, so we do not have
a logic out here.
So to make it back
to go offline.
So else we can just add
something like else this start
server status equals offline.
So now that we have set
up our function to even
display offline and
because we will first
changing it back to online
and there was no real logic to
change it back to offline again.
So let's do
that and now we can have
a talking happening out here
so we can change it
to online teaching it offline.
So now we have a button
that can actually toggle
our service status
from online to offline
and so forth and so on so
that was event binding
and property binding
and we also saw
string interpolation.
So with the help
of event binding
and property binding now,
we have a button
that can actually make
it offline and online
but there's another way
that we can do this
and that is two way binding.
So for two-way binding
what we're going to see
is basically we are going
to combine property binding
and event binding.
So let's try and do that.
So for event binding let's go
back to our code editor
and out here.
Let's go to our HTML page
and what we want to say.
Till okay.
So let's remove all this
so we can make
this server information.
So first of all,
we can have a form.
So basically we can have
an input of type text
and this will take in
let's say let's put a place
holder and let's put
in server name.
Let's also put a button
below this and this
will be a submit button
or rather instead of a button
what we can do to show
Two Way binding is put
in a paragraph
and we are going to type
out our server name out here
and we are going to put
in the server name here.
So server name
is going to be here.
So this is basically
string interpolation.
And what I am interpolating
is the server name
that we had created.
Okay.
So this has a capital S.
So let's not forget
that so our capital S
should be out here
and what we are going to do
is basically use NG model.
So to use NG model
what you need to do.
Is go into your app
module out here.
So in your app module
what you need to import is
basically the forms module.
So to import the forms module
you have to say
import forms module from
other eight angular / forms.
So that's it.
And we have to put this
in single quotes and out here.
What we need to do is
let's go ahead and see
what is saying disabled
rule import spacing.
So we basically important
the forms module
and this forms module will have
a functionality called ngmodel.
So anti model will let us bind.
Whatever is being typed
to be actually bind
to a certain variable
so we can put that ng-model
property to our input.
So this NG model
will be binded as an event
and also as a property so we
need to pass in the server name.
So, let's see.
We have a server name
called Ebola out here.
So it's already prefilled
with Apollo and let's say
we want to name
our server something else.
So let's call it the Gixxer.
So Jackson could be
their name of a server.
And as you guys can see it
is being automatically
updated out here.
So that is two way binding.
So just to give you
guys the difference
between two way binding
and one way binding
if we can do out here
is say put a placeholder.
So this is the same part we
will have server name.
So what we can do is
make another input
and this time around we
are going to put ngmodel
as just the property.
So edgy model with camel casing
and we are going to say it
will be binder to server name.
So let's bind it to server
name and let's see what happens.
So now we have two inputs
and everything is
filled with Apollo.
Now if you see out here
if I go ahead and change
a poll out here.
It is not automatically changing
in the Have to because it
is only one way binded
while out here.
If we were to give
the name Paul to our server
it would automatically
updated everywhere.
But if you were to go ahead
and delete little bit
it's not really updating
at the out here because it's
not two-way binding.
You need a event to actually
go ahead and submit this
so that your event
and your property
gets binded together.
And basically you have
two way binding them.
Okay, so that does it
and just to make this
a little more interesting.
Let's make this something
like H1 so we can put an x
2 and the say input server.
Information.
Okay.
So once we have that ready
so we can say server name
and the server ID will be
the PID basically
so we have an input
server name part
and then we can display
so information out
here so display.
This place so information
what we can do is let's
just copy this out.
So server PID the surf PID I
constantly forget it server PID.
So that's why so be
ID will be presented
and server status.
So now we basically have a small
little son of a bitch going on
and we have a button
that can toggle
the server status.
We have a place
where we can input
the server name.
So what we just saw
out here is basically
we saw string interpolation.
So all this output
is being shown to you
through string interpolation.
We are buying a property do
this button and with
the help of that we
are talking it for the first
two point five seconds.
This is disabled now
and this will become enabled
then we saw a event binding
where we actually
toggle the server status
with the help of a button
and then we also sought
to way prevent binding
where we put in an input method
or an input element
and we are constantly displaying
what is there in the input with
the help of two way binding.
So this brings us to our second
assignment for today.
And in this video,
I would like
to say that again,
please try and solve this
and mint on your own
and these are the instructions
for your second assignment.
So for assignment What you
have to do is create a page
that can take the input
of a first name using
two-way data binding
and you have to Output the name
using string interpolation.
So again for using
two-way data-binding
remember you have to use
NG model and use NG model.
You have to go
and import the forms module
and to your app into
your apps dot module the TS file
and in that app start
module dot ES file,
you will also have
to declare it out there.
So don't forget to do all
that and in the output
you have to actually
use string interpolation.
Then we have to add
a button to reset the name
to a blank string.
So this should be something
like property binding.
I guess I won't know
until I solve it myself.
And again this button
should be disabled
if the name field
is currently empty.
So I would suggest
that you pause the video
right here and you go ahead
and solve this
and if you can't solve it you
can always follow along with me
because I will be going
to the solution
of this assignment right now.
So let's go back
to our code editor
and what we want
to do now is It's try
and solve assignment number two.
So I'm going to keep on
editing the assignment project
that we had made.
I'm not going to make
new assignment project.
So what we're going
to do is basically
remove everything from here.
Let's remove everything.
We will also be needing
some New Logic.
So this is not going
to work for us.
So let's go ahead
and remove that.
We also don't need
a Constructor function.
We don't need anything.
We just need
the class to be there.
That's all at this moment.
I will also let entry module be
there in our app start module
because we will be needing it.
So I'm not going
to edit this out.
So let me just say
that I have saved everything
and now all we have
is a blank canvas
that we can start developing on.
So our first instruction says
that we have to create a page
that can take the input
of the first name using
two-way data binding.
So let's see you want
the user to know
that he is in putting
his first name so label
and this will be 4 so
going to be for first name
so we can say
F name something like this
and then we can say
First name and out here.
What we can do is put an input
that has type text
and it also has a name of fname.
So the label is now
bind it to our input.
This is how you should
probably always code.
We also should put
in a placeholder even
though we have a label
because that is
just good practice.
So we are going to say
first name in the placeholder
and now we have a place
that we can put
in our first name in
so we can also put
in a space out here.
First name is going to be here.
Right?
And we also need
to input our first name
in a paragraph according
to the second instruction
so we can put it out
in a paragraph and we can use
string interpolation for this
and we can just use
variable called name
because we are only
dealing with one name.
There's no last name
so we can just create
a variable called name
now we go back to our typescript
and we create a variable called
name and let's keep
it blank for now.
Okay, we are not going
to use double quotes.
We are going to use
single quotes and let's keep
it blank for now.
So now we can say our name
which should be
displayed out here.
So basically what we need
to do is do a binding.
So that is pretty simple.
We learned that really easily
that we can do this
to the NG model
and we can bind it
to the property of name
or rather the variable name
that we just created so out
here we will have a name
and we can just go ahead
and start typing now and
our name gets typed out here.
Now.
The other thing
that we need to do is
we need to add a button to reset
the name to a blank string.
So first let's go
ahead and create
that button for ourselves.
So we need a button
and this button
should said reset name
and basically it should have
a function or an event
whenever it's clicked.
So whenever this click
it should have a function
that basically goes ahead
and turns the name blank again
so we can have a function
called reset name.
So reset name is going
to be our function.
So let's go ahead
and create that function now.
So reset name is going
to be our function.
And what we want to do is
set this dot name equals
to blank again.
We can actually do this
without the event.
I guess we can fix
the missing white space.
Let's see if we are actually
if you do reset name,
it goes ahead and recites
the name to blank so we
have minded it to an event
and that is the click event,
and we need reset name out here.
We are not passing anything
because it is directly being
by the to the property
or rather the event out here.
So now we need to bind
it to a property.
So the property
that we are going to bind
the two is disabled.
So the disabled property
is going to now check
a function basically to see
if the name has
any value or not.
So this can be really
easily done by actually saying
something like named length 0,
but we are not going
to try and add cold out here.
So let's just stick
to the functions.
Actually.
We could actually have done
a tertiary operation
and basically down
it in one line,
but why do that?
So, let's see check name.
Check name is either going
to return true or false.
So now we have check name
and what we can say is
if this dot name
equals to equals 2
and we can also set state.
So state is true wheeler need
the state variable
to actually handle
the disabled functionality.
So if this dot name is equals
to equals to equals to blank
or want to say is
the start state will remain true
or what we can do is
if it is unequal to this
what we can do is say
this dot State equals 2.
So let's go over
our logic again.
So if our state is true and
if it is not an empty string
rather we are going to turn
our disabled to false.
So if it is false out there
what we need to do out
here is a check name.
Okay, so we made a mistake.
We can't do that.
Let's see inspect console and
template can't bind the disabled
since it isn't a known
property of button.
Okay.
So disabled is
not the known property
because it's disabled.
So that was the silly error
that we had made now.
Let's see.
What's go ahead and load it.
Okay.
So check name is not a function.
Okay.
So let's go ahead
and use check name.
We actually forgotten to save
this out here go ahead and put
the white space there.
So now we have a button
that can actually set the string
to a blank string again.
But according to
our assignment it says
that this button
should be disabled
if the name is empty.
So this way we can actually
practice our property binding.
So basically we have
to bind the property
disabled to a function
that will basically
return the state.
So let's say it is a function
that is called check.
Name and now let's go ahead
and create this function.
So check name is going
to be our function and put
that in double quotes.
Now, let's go back
to our app module out here.
So let's create
a state first down.
The state is going to be false.
First of all,
and let's say we are going
to have another function
called check name
and in check name,
what we want to do is check
whether so we can do
the checking part
with an if statement.
So this dot name we
are checking for the name
if it is empty string and
if it is an empty string
what we want to do is
make our button disabled
and that can be done
by just returning true
in our state variable.
So we're going to set it to true
and we are going to return it.
So return this talk state.
So if you return the start
State out here we are going
to have a button now
that is basically
the Sable dough.
Okay.
First of all,
we need to go ahead and check
what we have done wrong.
So we need to go ahead
and save this so check name
is actually being passed.
Now.
Let's go ahead and load
that so now we see
that we have a button
that is disabled.
But as soon as we start
typing the button gets enabled
and we can click it to basically
put it back into disabled State
and also making
the first name String
into a blank string.
So this is the solution
to assignment number two.
I hope you guys
had followed along with me.
And if you had any doubts
when solving it on your own
the doubts have been cleared
now now let's move
ahead and let's look
at the last topic
for our angular Basics today
and that is directives.
So what exactly
are directives well,
let's head over to angular's
site and let's see what they
are saying about directors.
Well, it says
that there are two types
of directives out here.
So one is attribute
directive and one is
a structural directive.
So an attribute directive
changes the appearance
or behavior of a Dom element.
So in short a directive is
basically an instruction
The Dome now this instruction
may be to change the Dom
due to some attribute
or it could structurally
change the Dome tube.
So that is
a structural director.
So structural directives
are basically used in places
where you want
to input a certain.
Let's say a Division I got
here division is being used
with the directive ng-if
and we are outputting
hero dot name out here.
So what this is is basically
there is an if statement
and we will get to what ng-if
means just in a moment,
but this is a directive
and this has instructions
written in a module
which we will also get into
future lectures about directives
where we take a much
much deeper look
into what directives are
and how custom directives
can be built by you
but for now we are just
going to understand
what a directive does.
So in short a directive
is a structure
and this structure gives
instructions to the Dom.
So let's look what
a directive looks like and
how directives can be made by
just reading the documentation
so To build a directive
what we have to say is
let's say we give
a directive as app highlight.
So we have created directives
Ang generate directive.
So this is a CLI
command out here
so we can generate
directives like that.
But for now,
what we are going to do is we
are going to use some built-in
directives to understand
how attribute directors
and how structural directives
are actually working.
So the directives
that we are going to be using
our ng-if NG else.
So basically if
and else and ng4,
so these are
the three directives that we
are going to be using today.
And after I show you
how to use these directives
I will also be giving
you an assignment
and that will be
your last assignment
for this angular tutorial
and we will wrap it up
after that in the future.
We will be actually
discussing every single bit
that we have learnt
about the day
that is components data binding
two-way data-binding directives.
Everything will be done
in much more detail.
And when we are doing
this in detail,
we will have an In project,
so we will be building a project
through the course
of this playlist
and by the end you
will feel pretty confident
that you can go out there
and pretty much crack angular
interview job out there
because we will be teaching you
how to build an app
and in the end we
will also train you
for angular interview questions.
Okay, but for now let's
just focus on how to use
the built-in directives
that ship with angular.
So do you use
the built-in directives?
Let's see what we can do.
So the first directive that we
want to use is basically an NG
if directive so,
let's see what we
can do to show ngf.
So ngf is basically
to show something structurally.
Let's put up an edge one
that says this is an example
of ng-if now we want
to show something
if a variable is true and we
want to show something else
if it is false, right
so we can do
that by simply saying B,
so we will Paragraph
and let's say ng-if
so we are going to tie
it up to an expression
and we're going to call
this expression of flag
and we are going
to say flag is true
and we are going
to say flag is false.
Otherwise so out here
to show flag is false.
Otherwise, we are going
to use something called
a local reference.
So a local reference is used
within the NG template.
So for the NG template,
we have to give
a local reference name.
So let's call it the else block.
And in the else block we
want to put out a paragraph
that says flag is false.
Now.
We need some way to actually
toggle this flag.
So let's create a button.
So we are going to say something
like toggle flag and I'll cheer
for toggling flag.
We are going to put an event
and we are going to bind
this event to a function
that toggles our flag.
So we are going to call
this function toggle flag.
Okay, so we have
our template created now.
All we need to do is add
the business Logic for this.
So for all the logic
that we need to do is create
a variable called flag.
First of all,
so let's go ahead
and delete all this
that we don't need so
we are going to have
a variable called flag
and flag will be first
of all set to true now.
There is also going to be
a function called toga flag
and in this function
what we are Do is we
are just going to toggle
it now to toggle this.
All we can do is this dot flag
equals 2 not off this dot flag.
So this is a really easy way
to toggle a variable
and just now we can just
return this dot flag.
So since we're doing
that so now what we can do
is save this and let's see
how that actually works.
So says flag is true
and flag is false.
So flag is false is actually
not being displayed
because we have not referenced
this local reference
that we have created.
So we have a local reference
and we need to create it
and we do that by saying else
we create the else block.
Now, let's go ahead
and save that.
Let's see flag is true.
And now flag is false flag is
true flag is false.
So to make sure
that we are actually putting
up two different paragraphs.
So let's go ahead
and inspect this.
Let's go into our body.
Let's go in to uproot.
Let's see this button.
So this has a paragraph
created out here.
So let's toggle this
and a new paragraph gets created
which says flag is false.
Now flag is true flag is false
flag is true flag is false.
So this is a brilliant way
to actually show
something very conditionally.
Now I can show you
this is a other block
that we are actually
showing instead of one block
being constantly just modified.
It is a separate
Block in itself.
So that is a very
important thing to know.
So let's go ahead
and do that again.
So let's save it.
And now let's go ahead and see
what we can get.
So in our head
or rather in the body,
we have the uproot
and now we have paragraph
that says flag is true.
And now there is
another paragraph at the I d--
flash which is a very
wrong way to spell false
but it proves the point
that this is a new
Block in itself.
So this is how you
can use ng-if now,
let's look at another
interesting inbuilt directive
that ships with angular
and that is edgy style.
So with any style
what you can do is you can give
Dynamic styling depending
on a certain condition.
Now if you analyze
what we have out here,
we do have a certain condition
which is where the flag is true
or flag is false.
Now, what we want to do
is we want to color this.
This is an example
of ngif into red or green
if flag is true
or false respectively
so we can do
that very easily with the help
of something called NG style.
So with any style oppa
do is we A property now
this property may not be
in single quotation marks.
So you can say color
and what you can do is
you can put an expression.
Now you can say something
like a function
that is get color.
And you could execute that.
Now what we need to do
is we need to go ahead
and create this function
called get color.
So we are going to get the color
and we are going
to return a color
that is probably a string
according to the flag.
So if so, what we want to say is
if this dot flag is equal
to equal to true we want
to return You want to turn green
and if it is false we
wanted to turn red.
So let's go ahead and see so
as you guys can see
this is green right now
and this turns red and then
turns green and red again.
So what we did basically
we passed an expression
and in this expression,
we are putting in a color
and the get color method
is returning a string
which either says red or green.
So this is how you
can dynamically add styles
to your elements
on your HTML page.
Now another way to do
Dynamic styling is
with the help of NG class.
So what we can do out
here is we can add a class
to an element dynamically.
So let's say we have
another H2 and let's say this is
just an example of NG class.
Now, what I want to do
is we want to turn this.
So the clasp you want to add is
basically let's call it white
and we want to add this
when get color returns true.
Let's say so we
just want to go ahead
and paste that logic out there.
And now what we have to do is go
into the app component CSS file
and create a class called White
and this class will basically
put a black border
border:1px solid black.
It will rather let's make
it a red and then we want
a background color
of let's say black
and we want the font
color to go white.
So this is a bunch of styling
that we are adding
which is basically the real
reason you use classes in CSS
so that you can use a bunch
of styling together now
that we have created the class.
Let's go ahead
and save all our files.
Let's go ahead and see
what it looks like.
So this is what it looks like.
This is just an example
of ing class.
Now when this is set
to false so class is removed.
Let me just show that to you.
So if we go ahead
in the body part
and go in to uproot
and just look at this class
that will be added.
So we add a class called White
and then we remove a class
called White class
called White and this is
how Angie class can be used
to put in all sorts
of dynamic styling
into your HTML elements
with the help of NG glass.
Okay.
So the next directive
that we are going to have
a look at is called ng4.
So let me just give you
guys a quick example of
how to use NG for before I dive
into the last assignment
of this tutorial.
So Angie for is used
when you actually want
to iterate through an array.
So let me just show
you what I mean.
So let's say you had a bunch
of names or let's make
something very viable.
So first of all,
let's call this something
like the student roster.
So H1 So this is called
the student roster
now suppose you had
a method so input
and what we are going
to say is placeholder is name
and out here.
We also want
to display the name.
So all the name
of the students we want
to display so student roster
and there will be
a button to say submit.
So this is a sub
MIT student name
and this will have a function.
So whenever we click it,
we want to add the name
that we just entered into.
Let's say another
so we can say that is
the name of the function.
Now if we want to do is go ahead
and first of all
create a student roster
so student roster is equal
to let's say let's add
some pre-built students.
So Aria and let's say
Rohit and let's say oh Pasadena.
Now, what we want to do
is let me just fix
these white spaces up.
Now, what we want to do
is we want to display
the student roster.
And then we also want to add
to the student roster every time
the button is clicked.
So we have a function for that
and it's called ad and
basically what we want to do
is we want to push an element
so that could be a current name
so current name
could be Blank for now.
And let's leave it like that.
And what we want to say is
this dot student roster
dot push want to push
in this start current name.
So what this will do is this
will push in the current name.
Let's go ahead and make a place
so that we can display it.
Now.
The whole point is
that we want to display it
in one single item.
We do not want to create
let's say a paragraph
for every time this list
has to be populated.
So what we can do is we
can simply create a list item
and out here we can just say Ang
for let's say names
in the student roster.
So student roster,
so is that how we
had named it student roster
and that's exactly
how we are named it and what we
want to display out is names.
So what we have done right now
is we are pushing in something
but what exactly
are we pushing in?
Well, we need to add
that to our input.
So what you need to do is say
NG model and we are going
to ng-model this
into the current name.
So now that we have done
that now if we want to do is
we just want to interpolate
the name out here.
So this will just
display the names.
So this is going to be names.
Let's go ahead and save that.
Let's see that if it's
dips faces names.
So we have names are
arrowheads and a pasta.
So let's say someone
like Rahul also joins the class
and we can see some ID student
and Rahul is now added
to the student roster.
Okay.
So this is how you
can basically use NG
for we have one list item.
And basically it
is going around.
And circulating through
everything that is there
in this array just out here.
So now that we have seen
the usage of NG f and g
if else and ng4,
let's go ahead and do
our last assignment.
Let's not forget.
We also saw how we
can use Dynamic styling.
So we are also
going to incorporate
that into our assignment.
So let me just go ahead
and type out the instructions
for your assignment.
Okay guys, so this is
your last assignment I
will again remind you
that for assignments.
You have to pause
the screen and try and do
the assignment on your own
and then you can
compare Your solution
with the code along part
that comes after the assignment.
So for assignment number three,
we have create a button
to toggle a paragraph display.
The paragraph could
be saying anything.
So after that we have
to lock the number
of times the button was clicked.
Ok, so it says barn out here
but it's button was clicked and
after the fifth
click we have to give
some specific style to the log.
Okay.
So this seems
like a pretty easy.
Thing to do.
What we have to do out
here is basically get rid
of everything that is here.
And let's first create a button
that says toggle display
and then we can add a paragraph
that says lorem ipsum.
So lorem ipsum is just
a random paragraph So
let's go ahead and see this.
So this is toggle display
but toggle display
at this moment does nothing
so we have to put
a functionality into the click
the click will basically
return true or false
so we can bind us to a function
that lets say toggle display.
So this will return
true or false.
So we have to go ahead
and create the toggle
display method first.
So toggle display.
And what we want to say,
is this start State, let's see.
So let's create
a state variable first.
So state is going to be true
and toggling is basically
what we had learned
that we have to turn
it into something
that it is not so this state
equals to not of this state
and that should do it for us.
So this will toggle the display.
So now that we have toggle
the display now,
all we have to do
is bind this logic
so we say ng -if
and we only want to show this
if state is equal
to equal to true.
So if that is what we
have done correctly,
we are talking the display
and this is true.
Now what we need to do.
Another thing is
according to the instructions
of the assignment is
that if the log the number
of times the button was clicked.
So what we need is basically
a counter to count the number
of times we have click
the button now every time
the button is clicked we want
to actually increase the counter
and we can simply do
that with an
incremental statement.
So this dot counter now
what we want to do is
we want to say out here.
We want to create a paragraph
and this will have n G4
and so click of Click
so rather counter.
So for n G4 this needs
to be pushed into an array,
so we are going
to say button click.
Ok.
So there's another way
to do this.
We don't really need a counter
or rather we can make counter
into an array itself.
and when this is clicked,
all we need to do is say
this dot counter dot push
counter dot length plus 1
So we're going to say this dot
countered at length plus
1 so the length initially is 0
so this should just
go ahead and add it
to this counter.
Now, what we want to do
is we also want to cycle
through this array of counters.
So Clicks in counters.
And what we want to do
is we want to print out
the click information.
So let's see.
So now that we have actually
put the logic to push
the length of a counter
into our array we need to do
and cycle this array.
So to cycle the array we
are going to create a paragraph
and we're going to say ng4.
And we're going to say clicks
of counter and what we
are going to try
and interpolate out here
is the counter or rather
the clicks and let's see
if that works.
So out here we have a display
are going to click it
once click it twice
and we can see it goes
on and on and on
and we have kind of
created a counter
and this is kind of logging
into all down now
that we have set up
our counter for our toggling.
All we need to do is follow
the last instruction and that is
after the fifth click.
We have to give
some specific style to the log.
Okay, so we can do this
with the help of NG Styles.
So NG Styles Let's see.
We want to make the color
of our font blue only
when get length is more than 5
so get length is a function.
So this will return
some value or the other.
So let's go ahead
and create that too.
So get length is going
to react and create
if it's see this dot counter
dot length is greater
than 4 Then we want to return
the string blue else.
We want to return string black.
So now we have function
that returns something
and we have binded that function
with the color Style with use
of NG style director.
So let's go ahead and see
if this works for us.
So let's toggle the display 1
2 3 4 5 and that has turned
our list into a blue list
just after 5:00.
So this is
how you would approach
the solution to assignment 3
and this brings us to the end
of this angular tutorial.
We learnt a lot today.
We saw what is angular.
We saw the differences
that angular 8 has brought about
in the industry after that.
We also started with
our installation of angular.
Then we went ahead and
set up our project.
We learned how to create our own
custom confidence manually
and through the CLI,
then we came to know
how to use these components.
We did data binding
did property binding
and then we did event binding
which of course includes
two way binding then of course,
we saw the inbuilt directives
and what exactly did Tips are
and this brings us
to the end of the basics
that you need to actually make
an application through angular.
Welcome everyone.
This is Swati from Eureka
in today's session
will go through react.
Yes tutorial.
So if you guys are familiar
with the term react chairs,
then you might know
that it's a front-end Library
developed by Facebook.
So today we'll learn
in and out of reactors.
But before we start let
Explorer youngjae's application.
I'm sure all of us spend a lot
of time on Facebook.
If not a lot at least some so
all of you can easily relate
that this application looks
exactly like Facebook comment
section in this complication.
We can add a new comment delete
an existing comment
or even can reply
to some other common.
Let me show you
how here I'm adding a comment.
I can delete my comment.
I can even delete
some others comment
if I have the authority
and then I can reply
to others comment like this
perhaps you would have noticed
whether I'm adding
or deleting comments only
that section is getting updated
instead of the entire page.
So what I'm trying to say is
that we do not have to reload.
Refresh the entire application
to see the updates.
So how exactly
is this happening?
Well, this is the magic
of react.js and that is
what we are going
to learn today.
But here some of you might ask
that why the anxious
when there are so
many other Frameworks available
out there to understand this.
Let's take up
Facebook as example.
So let's go back to the year
of 2009 2010 when Facebook used
to look somewhat like this.
If you guys remember
during this time,
you have to repeatedly reload
the page for new updates
at the back end the Facebook was
using the operational data flow
as you can see from
this diagram the data came
from various sources,
like the initial leader
the real-time data
or the user input data.
Now this data was passed
to the dispatcher then
to the store and then
ultimately came to the view now,
we will the part
where the user is actually
interacting with the application
and being a user whatever
you see on the browser
as a web page is
the view itself.
So if there is a change
in data from any These sources
from the back end
in order to reflect
those changes on The View you
have to refresh the entire page
and then it seemed by the user.
This surely was
not user-friendly
and moreover this traditional
data blue had some drawbacks
like it use the Dom now.
What is a dom dom stands
for document object model.
It is an object
that is created by the browser.
Each time a web page has loaded
what does don't it was
it can dynamically add
or remove elements
from a webpage at the bakit?
But each time it did
that the browser had
to create a new Dom object
for the same webpage this led
to more memory consumption
which ultimately made
our application slow.
Let's take another example
to understand this suppose.
This is an application
in which we have
four blocks 1234 Suppose.
There is a change in Block
one from the back end,
but in order to
see those changes,
we had to reload the entire page
and then only we
can see the changes.
Now as you can see
after reloading the one became
one over so guys this is
where the reality is comes
into the picture with react.
Our entire application is
divided into various components.
Now each time data is added
it will automatically update
the specific component whose
state has actually changed.
So if we have changed
in Block one,
it will automatically
change the block one
only without reloading
the entire page this reduced
our page reloading Dusk
and because of this
the you I became
more user-friendly moreover
the react uses a virtual Dom
instead of the real Dom
which makes our applications
lighter and faster.
Now, what is virtual Dom
will understand it later
in this tutorial for now.
Let's see how we act
change Facebook's UI.
So Facebook started
implementing react.js
in its Newsfeed section
since 2011 after this, it's you
I became more user-friendly now
whenever new updates gathered
a new stories button
popped up at the top
of the page now clicking
on this button will
automatically reload only
the newsfeed section
without even touching the rest
of the page this
drastically improve
the applications performance.
So what changed at the back end
at the back and it still use
the traditional leader flow,
but now instead of loading
the entire page again,
what reacted was it blue
of the previous View
when did the components
for the update
and then place the new view
in place of the whole one.
This was possible
because unlike other Frameworks
react don't have any explicit
data binding in react.
The only thing we have
is a render function,
which gets called once
for each component
in this render function.
We tell how our component will
look like at any point of time.
Then this render function
returns a An overview
since the component
can compose a real component.
The render function gets
called recursively resulting
in building up the whole view.
So now that you have understood
that why we use real chairs,
let's now proceed
with our tutorial
before we start off.
Let's take a quick look
on today's agenda today
will first understand
what exactly is reactive
and then we'll find out some
of its major advantages
then I'll show you
how to install reactors
on your systems.
Once we are done
with the installation
will start coding with reactors
by taking up a simple program
of hello world,
then we'll jump onto
the various fundamental concepts
which all night
behind react cheers.
So without any delay,
let's take up our very
first topic that is
what is react to use
as I have already told you
that react.js is an open-source
JavaScript front-end library
that is used to develop
interactive you is the Facebook
was using it since 2011,
but it was introduced
to the rest of the word on me.
2030 and later on March 2015.
It was open sourced.
Moreover the reality is
is concerned with the component
that utilizes the expressiveness
of JavaScript along
with the HTML a template syntax.
That is it combines the features
of JavaScript and the HTML
and then provides us
a dynamic language.
It is basically the view in MVC
is the model view controller.
It is not concerned with
anything except for the view.
That is it handles
a representation of our web page
at any point of time.
But what aspects make it handle
a dynamic view so effectively,
let's proceed further
and find out will react has
three main aspects first.
It uses the virtual Dom second.
It has one-way data binding
and third it provides
a server-side rendering.
Let's now discuss
them in details.
The first is the virtual Dom.
So as I have told
that it uses the virtual dog.
Now many of you
might be wondering that.
What is a virtual Dom
and how it is different
from the actual dog.
Well, like an actual down
the virtual Dom is also no tree
that lists the element
and attribute and
contents as object
and the properties reactor in
your function creates a notary
out of the react component
and then updates the street
in response to the mutations
in the data model
which are caused by
various actions done.
Maybe by the user
or by the system.
Now this virtual Dom Works
in three simple steps
first will be whenever
any underlying data changes.
The entire UI is rear-ended in
the virtual Dom representation
after this the difference
between the previous
round representation.
And the new one is calculated.
Once the calculations are done.
Only after that the real
Don will be updated
with the only the things
that have actually Teach you
can think it as a patch
as the patches are applied only
to the affected area.
Similarly the virtual
dog acts as a patch
and is applied to the elements
which have actually updated
or changed in the real dumb.
This makes our application
faster and more over there is
no memory wastage unlike other
Frameworks react follows,
the unidirectional data flow.
Let's now move on
to a next aspect that is
one-way data binding unlike
other Frameworks react follows,
unidirectional DW
or one-way data binding
as you can see from this diagram
in whole of the process.
The data is flowing
in the same direction.
The major advantage
of one we did a binding is
that throughout the application
the data flows
in a single Direction
which gives you a better control
over it and because of
this the application state
is contained in specific stores.
And as a result of this the rest
of the components
remains Loosely coupled
so our third and last aspect
is the server side rendering
server-side rendering Allows
you to present the initial state
of your react component
and the server side
only because of this
the page loads faster
with the server side rendering
the server's response
to the browser is
the HTML of the page
that is ready to be rendered.
Thus the browser
can now start rendering
without even having to wait
for all the JavaScript
to be loaded
and executed all
of these features
together makes react to use
a powerful and robust language
which provides us
with some major advantages
like because of the use
of virtual Dom the applications
performance increases moreover.
It can be used on client
as well as server-side
the reacts j6 file increases
the readability of the code,
so it becomes easy
to debug and maintain
and lastly the reality
is can be easily integrated
with Frameworks like meteor
or angularjs So now
that we have already understood
that what is react cheese
and whatever it advantages.
Let's now proceed
to its installation.
Well installing react.js
is very easy.
You just need to add
the react.js dependencies
to your code.
And then you are good to go.
You can add these
dependencies even directly
from online repositories
or you can also download them
and then add them
to your project folder
as you can see from this code.
I have added
the dependencies here
from the online repositories.
Now, let me show you
how to add the dependencies
after downloading them for that.
You need to go back
to your project folder.
So now this is my project folder
inside this I will be pasting
all my dependencies for that.
I'll go to my downloads here.
I have already downloaded
the dependencies.
I just have to copy this.
And then I'll go back
to my project folder
and paste them here like this.
So inside this I have
all my dependencies
which all I need.
So now to start coding
with react you can use
any text editor
or any ID you want so here I
am using the web some ID here
inside my project folder.
You can see that I have
already all my dependencies.
So now what I will do I
will create one HTML file here.
Let me name it as index.
Now in this HTML file,
we have to provide
it with some title.
Like I've given it demo.
Okay.
So now inside the head
of this file now we have to tell
that we have the dependencies.
So using the script tag,
we will add
the dependencies one by one.
So, let me see the source
and my dependency sources
the build folder
in this first dependency,
which I need to add is
the reactor Minn dot J's.
Now, this is the main react
dependency that you will need.
Like this I have to add the rest
of the dependencies.
Okay.
So now I am done
with adding my dependencies.
So next thing
what I have to do is I have
to create one Division.
I have to create one division
so that I can display
my react code over here.
So I will give this division
when ideas will okay.
So here I have given
the ID as content.
So for now we are done
with this HTML file.
Now we have to create
one react jsx file.
So for that we
will create one file.
Let me name it
as script dot JS X.
So this j6 file is the file
in which we will add
our all the react code.
Now Jesus is a type of sentence
that you can just type
and it's very easy
to understand and react
as you know
that everything is a component
and each component needs
a class to survive.
So first we have
to create a component
and then provide a class for it.
So, let me just
create one component.
Okay, so as you
can see I've created
when component name
my component and then I
have created one class.
So now I have created
when comparing with the name
my component and then I
have provided one class
for it to survive.
Now inside this class.
I will be adding all
the functions as attributes
that my class is going to do.
So now each component
has one render function
which returns an
HTML representation.
So here we'll add
the render function
which will contain
what we want to display.
So since we are going
to return the hello world
just so here first.
Let me just create
the render function.
So render this is a function.
Okay, since this
will be returning
an HTML representation.
So inside the written after
right we are returning
only the hello world.
So I will write hello world.
Okay, so just save it.
So now we are done
with creating a component.
Now you have to tell react
that you want this component
to be displayed over here.
So for that.
Okay.
So here we are calling
the render function
of react Dom now
inside this function.
I will tell that I want
my component to be displayed
on the HTML P.
So for that I will
fetch it by its ID.
So I'll call document
dot get element by ID
since we have given
the ID and it's
ID is content.
Okay.
So now here we are done
with our j65 just save
it go back to the HTML way.
So now you can think
this j6 file as
external CSS or JavaScript
as we refer this file
in our HTML file.
Similarly.
We have to tell her HTML file
that we have are reactive code
in some other files.
So for that I'll say script
and it's sources
scripted Chase X. Ok.
So one thing we need
to add here is its type.
So it's type is text Babel.
Okay.
Now we are done
with both of the Now
what I need to do
is just run this file.
So now you can see
that hello world.
It's showing that means we have
successfully compiler program.
And this is
how the reactor uses working.
So here you will see
that I've written
the same program here.
Okay, and this is the my HTML
file and then this is
what we saw in the up
since we are done
with our first program.
Let's now find out
the biggest fundamental concepts
working behind it here
first will understand.
What is a j65 and how it
is used then we'll learn
about the component
and its different forms
after this we'll find out
what our props followed by
the states then we'll have
a quick look on different phases
of components life cycle next.
We'll learn about the react
events and how they
are triggered after this.
We'll see what are
the references and keys
and understand the importance
in react finally will understand
what is react router
and then we'll proceed to add
So without wasting
any more time,
let's take up
our very first topic
that is the chase X.
So J 6 times for
the JavaScript example.
It's an XML HTML like syntax
that is used by react this
index exchange the ecmascript
so that the examination table
like ticks can coexist
with JavaScript react code.
This syntax is used by
the preprocessors to transform
the HTML like syntax
that is found
in JavaScript files
into standard JavaScript objects
with this fine instead
of just embedding
the JavaScript into HTML.
We can embed the HTML
into the JavaScript as well.
This makes the HTML code easy
and also boosts of the
JavaScript performance moreover.
It makes our application robust.
Let's now see
how this j6 can be used.
Well, the first is
the regular use of j6,
which we already saw
in our hello world program.
Next is the j6 nested elements.
Now as you know,
in react the render function
can render only one issue.
Element at a time.
So in case you want to render
multiple HTML elements,
then you need to put them
inside the one in closing tag.
Let's see it how Okay.
So let's try and add
one more HTML element
inside this render function.
So here let me say I have
a ch3 you can see as
soon as I add this H3 tag.
It's showing that here
something is expected.
That means it can't compile.
Well error symbol is coming.
So that's why we need to include
this inside one in closing tag.
So I will be using div here.
So let me say div.
Okay, so I'll just
cut it from here
and paste it now inside this
that I can add as many lemons
as I want.
So let me just use H 1 you
can use any tag you want.
So just okay.
So now inside this I
will say And Eureka,
I'll just save it go
to my browser.
Here you can see Eddie Rekha
and hello world.
So this is how we can use
multiple HTML element inside.
Rj6 code.
So the next is
the specifying attributes.
You can always make
your code Beautiful
by adding the attributes to it.
Let's see it
how so inside this
what you need to do.
You have to create one variable
with the csis element.
So here I'll say
that I have a variable.
Let me name it Styles
and I will just say
that in this the color
will be okay.
Let me say the color is red.
Okay.
So here I will add this Styles
as a style to my HTML element.
So like this style he'll say
it will follow the Styles.
So now the entire division
will be in Red.
So just save it go
to the browser and reload it.
Now, you can see
everything is in red.
You can specify side
for a single element as well.
So you just It's just see
that we have a states
to and here let me say
the color is yellow.
Okay, and I'll see my H1 tag
will come in yellow color.
So I will say
that it will follow the side
to just save it go back
to the browser and reload.
You can see the editor
a guy isn't yellow color?
Okay.
So this is
how our row attributes work.
So next is embedding JavaScript
into j6 as in normal HTML.
We embed the JavaScript
expression similarly here.
Also, we can add
the JavaScript Expressions
directly into the code.
Let me show you okay.
I'll go to the ID
and I will just say
I'll take one H3 tag
and inside I will say just
some is something I'll throw in
some random numbers over here.
So let me just say save
it go back and here it
will give me the sum.
So the sum is 30.
So like this we can use j6
in different forms.
Okay.
So here we are done
with all the users of j6.
Let's now move
to our next topic.
That is the component
since the beginning I'm saying
that in react
everything is a component.
So now let's find out
what actually this component is
to understand this.
Let's again go back to Facebook
as you can see.
This is a Facebook page.
Now.
This page is divided
into various components.
Like this is a component.
This is also a component.
And again, this is also
a component like this.
There are many more components
over here since then react
everything is a component
and each component
returns a Dom object.
It results in speeding
up the entire UI
into various independent
and reusable pieces
to understand this better.
Imagine the entire UI as a tree
here the starting compound
becomes the root
and each of the independent
pieces becomes the branches
and which are further divided
into sub branches.
Now this pattern
keeps our UI organized
and moreover it
allows the details.
Changes to logically flow
from the root to the branches
and then to the sub branches
moreover the compound can always
refer to other components.
Let's see how this is happening.
Okay.
So here I have one component
named my component.
So let me just create
few more complaints
over here for this again.
I'll use the variable and let
me name it as header.
So here I'll call the reactor
not create create class.
So inside this again,
I will create
one render function.
Now what I wanted
this render function
should return me just well
HTML representation to show
that this is
my separate component.
So therefore I will just
simply write return
and I'll put 1 h2 tag
over here and I will say
that this is hidden component
Okay like this so I'll create
one more component like this.
So for that I'll just copy this
and I'll paste it up here
and I'll change
its name to put okay
and here it will say.
This is foogtor competent.
So now how I can
refer these components
from my component for that.
I just need to go
inside the enclosing Tab
and here I'll just say header
and moreover again.
I'll can just say footer
like this save it go back
to your browser and reload.
So this is
how our components work.
We can call one comment
from other component
as we have seen.
Okay.
I hope this thing
is clear to you.
Now.
Let's go further in our Peabody.
Okay.
So here a valid react component
can always accepted
single object argument
and then produce
a reactive element.
Now, these are called
the functional elements
as they are literally
the JavaScript functions
as you can see.
So here we are calling
one handle click function.
Now whenever this function
is called it will always return
a 1 inch team representation.
So that's why these are called
the functional elements.
On addition to this
we can simply Define
a competent through JavaScript
as you can see here.
We are creating one function
which is named prob demo.
It is accepting one props
and then it is returning
one HTML representation.
So this is how the components
work moving further
in this the component
in reactions can be
in two forms the stateful
and stateless components
the stateful components
are those components
which remembers
everything it does
whereas the stateliest
components are those components
which doesn't remember
anything it does.
So let's not discuss
these components in detail.
So first we have
the state full component.
These are the core components
with store information
about this component state
in the memory.
Now, these components
can change the states as well.
They contain the knowledge
of the past current
and future possible changes
in state of the component
in case there is a change
in state they will always
receive the information
from the Stitches components.
These components are called
the smart or active confidence.
Next we have
the stateless components.
These are the
state list component
which always calculate
the internal state
of a complaint.
They can never change
the state moreover.
They do not contain
any knowledge of the past
current as well as
possible future changes
of the state of a component
these details components provide
the referential transparency
that is for same set of inputs.
It will always
generate same output.
The these combinations are
called the dumb components now,
I hope you have
the fear understanding
about the component.
So now let's move on
to our next topic
that is props.
The simplest way of describing
process would be to say
that the function
similar to HTML attributes.
These are the read-only
components which provide
configurational values thus
by using the props.
We can always pass data
from Pain component
to a child component whenever
the component is declared as
a function or a class.
It must never change its props
all the Components are therefore
called the pure functions.
If you see this function
as I have seen in this demo,
we have the function called
thumb which is accepting
argument X and Y.
So it's prop is
to always return the sum.
So whenever this function
is called it will never change
it from in react
the Only Rule we have and
that we must follow is
all react components must act
like pure functions
with respect to their props.
So let's find out
how it's happening
with the help of practical demo.
Okay.
So now here what I'll do
I'll use the header
and here I'll provide the prop.
But before that
inside this header
since we have to provide
information from the parent
to the child,
let me say
that my component is
the parent component
and header is
the child completely.
So from here,
I will say
that header has a name.
Let me say name is
let me see Alex.
Okay now What I'll do,
I'll just copy and provide
one more hedral prop.
So I will just change
its name to else a Max.
Okay.
So now how we can
provide this information
to child component for that.
What we need to do here is
I'll just use one H3 tag
and inside this I'll
refer my component.
So here I'll say
this dot props dot
since I've given the name
so I'll say name here.
Okay, here are we have
to create one division as well?
Okay.
So what I'm doing here is
that I'm passing the name
from my component
from here from my company
to the header component,
which is just printing
out the representation.
So this is how the props
for whatever you give as input.
It will always display the same.
So let's just save this go back
to the browser and reload.
So here you can see
Alex and Max its print.
So each time.
The header component
is referred.
It will print this element.
I hope you are clear
with the props.
Let's now move to our next topic
that is States.
So what is the state
and how they can be
a sign here in react
the states are the heart
or we can see the core
of react components though.
Most of the component simply
taken props and render them,
but they can
also provide States.
These states are used
to store information.
Nation or data
about the component
which can change over time
because of user or system evens.
You can say that
the determine the components
rendering and behavior
and therefore the state
must be kept as simple
as possible using the state.
It leads to a dynamic
and interactive components
which adjust themselves
according to the changes.
So let's now see
how the States can be assigned
with the help of the demo.
Okay.
So since we have already
used the props,
I'll use this putter
to show the state now
to access the state first.
We need to assign One initial
state to the component
because by default it state
will be set to null so
for that I'll call one function
called get initial state.
Auntie inside this class.
I have two functions,
so I need to separate them.
So I'll put one calm
over here inside putter.
I'll say I have user and let
me set its initial state
to and say it Eureka.
So it's the user
initial state is at Eureka.
So now whenever we call
this user it will always
display the at Eureka now,
how can we refer
to this for this?
What we need
to do is okay now,
I'll add one div.
We were here you just cut this
from here and paste it
and now here I'll say
I have one H1 tag
and here I'll refer
to the state.
So to refer to the current state
what you need to call
is this dot State
and our element name is user.
So here you'll see use them
like this save it go back
to the browser and reload
it see so our user is either
a car to make it more clear.
Let's go back to the
and here I'll say user is
Eddie Reka morvay,
you can put any number
of elements you want.
Let me just say I have an idea.
Also whose default state is 101.
I'll save it and
inside the cell say,
okay here are we use one brick
and then I will say
ID is And again,
I'll refer this thing
with the this dot state DOT ID.
So now again go back
to the browser and reload it.
So here you can see user is
in Eureka and ID's 101.
So this is how we set
the initial state
but as I have told you
that we can change
the state as well.
So let me just say
that after some time these two
elements change their state.
So in order to do that,
what we have to do is we need
to call one other function,
which will automatically
change its state
after let's say
after 2 seconds,
it will change the state.
So I'll call
the settimeout function
and it will automatically
after two seconds.
Let me see the two seconds
it will change the state.
So I'll write tooth seconds
and after 2 seconds it
will call one function.
So let me write
that function as well.
Okay.
So now inside this function,
I'll call this Dot.
It State inside, huh set state.
So inside this state function
what I will say
that my username should change
from Eureka to let
me say Swati and my ID
should change from 1012.
Let me say 303.
Okay.
So let's now just save
it go back to the browser
and reload this.
So now you can see the user is
and Eureka and ID swathi.
Okay, let me just go back
and I will increase
it's time to let me change
it after 5 seconds.
So here.
Okay.
So let's now write C.
So here the user is
in Eureka and ID swathi,
but after five seconds,
it will automatically
update to Swati and 303.
So this is how to react works.
It will automatically
update the Dom manipulations
for us and because of
this the applications
become extremely fast.
So this stage is mainly used
if the component has
some internal value and moreover
which doesn't affect
any other component then
only we can use the states.
So I hope you guys are clear
with the state.
Okay.
So let's move to our next topic
that is life cycle
of the components.
So react provides
various methods which notifies
Venice 33 of life cycle
of a component occurs,
and these methods are called
the life cycle methods.
Now these methods are
not very complicated.
You can think these methods as
the specialized even handlers
which are called
at various points
during components life.
You can add your own code
to these methods
to perform various tasks
when we are talking
about the life cycle.
The life cycle is divided
into four phases.
They are the initial phase
the updating face
the props change phase
and the last is
the unmounting face now each
of these ways contain
some life cycle methods
which are specific only to them.
So let's find out
what happens during each
of these phases.
The first phase
in the components life cycle
is the initial phase
or the initial rendering phase.
This is the phase
when the component
is about to start its life
and make its way
towards the door.
So in order to do
so all these methods
are invoked in order.
So first order method we have
is the get default props.
This method allows you
to specify the default value
of this dot props.
It gets called
before your competition.
When does even created
or any props from the parent
our past the next we have
the get initial State
now this method allows you
to specify the default value
of this dot State
before you're confident
is created just
like the previous method
it took with called
before the component is created.
So next method we
have is the component
will Mount method now.
This is the last method
that gets called
before your component
gets rendered to the dog.
There is an important
thing to note here.
If you were to call set
treat method inside this one
your component won't re-render.
Then we have our render method.
Now.
This is a method you
should be familiar
with every comment must have
this method defined
and this method is responsible
for returning a single
root HTML note though.
This single route may have
many child note inside it.
So if you don't wish to render
anything simply written null
or false then we have
our final method in this phase.
That is the component did
But that this method
will get called immediately
after the components renders
and gets placed
on the dorm at this point.
You can safely perform
ain't on quitting operations
without worrying about
whether your component
has made it or not.
Now one thing you need
to remember here is
that except for this render
method all of these life cycle
methods can fire only one.
So this concludes
our initial phase then we
can move on to our next phase.
That is the updating face.
So after the components
get added to the Dome they
can potentially update
and re-render only
when a prop or a state change
occurs during this time
a different collection of
life cycle methods gets called.
Let's see what happens
when a state changes whenever
a state change occurs.
The component will call
its render method again.
Now any component
that is relying on the output
of this component will also
called a render function again.
Well, this is done to ensure
that our compound
is always displaying
the latest version of itself.
So when a state change occurs,
all of these methods
gets involved in order.
So here our first method is
should comprehend update method.
Sometimes you don't want
your company to update
when a state change occurs.
Now this method
will allow you to control
this updating Behavior.
If you use this method
and return a true the component
will update else it will skip
the updating part.
Next we have the component
will update method this method
gets called just
before your component is about
to update one thing
you should note here is
that you can't change your state
by calling this dot set state
from this method now again,
we have the render method.
So if you didn't overwrite
the update by a should
comment update method the code
inside the render method
will get called again to ensure
that your component
displease itself properly.
Again, the last method
we have is the component
did update method.
Now this method gets called
after your component update
and the render method
has been called.
If you need to execute any code
after the update takes place.
You can put it
inside this method.
So now let's move on
to our next phase.
That is the props change phase
after a component has been
rendered into the tongue.
The only other time
the component will update is
when a prop changes
its value now,
this is when all these methods
will be called the only method
that is new here is the
component will receive props.
If you want to compare we can go
back to the previous slide
and you can see we have
the should component
update method component
will update method render method
and component did update method
and in next phase.
We have should complete update
complaint will update render
and component did update.
So here only this method
is new now this method
returns one argument
and this argument
continues the new prop.
That is about to
be assigned to it.
The rest of the life cycle
methods behave identical
to the methods which we saw
in the previous phase.
So this is how the props change
phase is completed now move on
to our last piece.
That is the unmounting phase.
Now.
This is the phase
when the component is destroyed
and removed from the dog.
There is only one life
cycle method over here.
That is the component
will unlock method.
You can perform any cleanup
related tasks here such as
removing the even listener
stopping the timers Etc
after this method gets called
your component is completely
removed from the door.
So here we are done
with all the phases
of the components life cycle
along with their methods.
So now let's move on
to our next topic.
That is the evens.
Well, if you guys are familiar
with HTML and JavaScript,
then you might know
that what are evils
in reactor also even saw
the triggered reactions
to specific actions like Mouse
hover Mouse clay keypress Etc.
Hi, I'm leaving these even
czar's very similar
to handling the theevans and dog
but here are
some syntactical differences
in react the events are named
using the camel Keys instead
of using the lowercase moreover.
In fact, the even surpassed
as functions rather
than the strings here
the even document contains
a set of properties
which are specific to an event.
What I'm trying to say is
that each even type contains
its own properties and behavior,
which can be exist only
via its event handler moreover.
In other you eyes.
Well even Handler
is assigned for each event,
which leads to more
memory consumption
and also makes our work tedious.
But in react the event handler
is not attached to the Dom
elements directly rather.
It only uses the route even
Handler which is responsible
for listening to all the events
and then calls the appropriate
event handler as per need.
Let's now see how the event
is created and triggered.
Really?
So to make you understand I'll
be using one demo code here.
Let me show you
how it should be looking.
So I'll show you
how the events work by the help
of this example here.
I have one Bull
and one button with me.
So clicking on this button
will turn on the bulb and again
when we click it will turn off.
So, let's see how this
is happening for this.
Let's go back to our code.
Okay.
So now what I'll do,
I'll leave this file
like this and I will create
one more j6 file.
So here I'll see even
script dot j 6 okay.
So now inside this file
what I'll do,
I'll create one variable and let
me just say its name as well.
Okay.
So again, we'll call
free app dot create class
and inside this will first
we have to mention
our render function.
Okay.
Now inside this render function,
I will say that I have one image
and just close it and I'll say
that it's coming
from some source and name
that Source later then we
have one button over here.
Okay, so I forgot to put it
inside the division so here too.
Just got to it and piece to it.
Okay, so it's final
and now I'll admin
button over here.
Okay here I'll say
that this button on clicking
this button something happens.
So what will happen?
I'll write it later for now.
Let me just name it as quickly.
Okay.
So here we have
one button clicking
on which it will do something
and here is one image
which will be shown.
Okay.
So here we are done
with the render function
since we want on our HTML page.
We want one button
plus one bulb.
So we here we have described
both of the things now,
we have to set up
an initial state
for our bulb status.
So let me say get initial state.
And this is a function and since
inside this bulbs class.
We have two functions.
We have to again separate these
and inside this we
will say that okay,
let's return the status.
Let me set the status first.
So I will say the bulb status is
by default its false.
So now inside this I
have to add two images as
well because on the page,
we are displaying
the images for that.
I'll go to my downloads.
Okay here I have already
downloaded two images.
I'll copy them come back
to my project and here I'll say
that I need one directory
and I'll let
me name it as image.
Now inside this I'll just
paste them now here you can see
I have both one and two in each.
So this is the initial state,
but now we want
that on clicking
this thing this button
something should happen.
So let us create
one function to tell
what exactly will happen
on clicking the button.
So for that I'll say
that we have one
function name switch.
So this is a function
looking super ated.
So now this function
will change the status
from false to true
and true to false
because we want on each click
the status should change.
So here what I will see
is this dot set State.
Okay inside this I'll say
that my status should change.
So for that I'll say
status status should
always change from whatever
the current state is.
So for that this dot
state DOT status,
And we want each time
the state to change.
So for that I will say not so
whatever the current status is,
it will always change it
to the opposite one.
So if it is true,
it will change it to false.
And if it's false it
will change it to true.
Now.
We have to provide
the source for this.
What I need to do is
inside this render function.
Okay.
So here we have to put
this code inside the return
which I forgot.
Okay, return since returned.
It will return as
the HTML representation.
You must remember this thing.
Okay.
So now inside this one
what I'll do I'll see
I have one variable
and I'll say disp bulb
means display bulb.
So which bulb will it display?
So here I will put
the sources along
with a conditional operator
whatever the condition is
according to that.
It will display the bulb.
So I'll say this dot
state DOT stay.
If the students are false,
it will show the image one.
And if it's true,
it will return the image
to so for that I'll give
the path of the image
that is image to dot PNG.
So this is the folder
where am I images?
And this is the name
of my File versus
when my condition is false.
It will show image / first image
that is image / paint.
Okay, just save it.
Okay.
So like this this
is we are changing
the image over here.
So here I'll say
that image source is dispersal.
So depending on the condition
it will automatically
retrieve the image.
Okay, here we are done.
So here what is happening
depending on the condition
the image will change
but now we have to tell it also
that on clicking the button
you have to do this thing.
So for that here,
I'll say that this dot switch
that whenever I click
on my button then switch
function should be called so for
that I have written this dots
which here we'll call
the react Dome dot render.
Okay, and inside this else say
that grab this bulk component
and display it
over the HTML page
whose ID is content.
So here we are done.
So see if this go back
to the HTML file and tell it
that rd6 file is
now even script 36.
So just save this now and run it
now you can see we have a bulb
along with a button
now clicking on this
will turn this on and again
if we click it
will again turn off.
So this is
how the events are created
and react so now I hope
that you can create
your own evens.
So let's take up our next of it
that is riffs riff stand
for the references now
in react a parent
compound can interact
with its style component
only through props.
So if you want
to modify the child,
you need to re-render
it with the new props.
This is the typical data flow.
So in case you want to modify
the child without following
the typical flow,
what you need to do is
make the child and instance
of the react component
or the Dom element in such cases
only you can use a reference.
Now this the Riff attribute
makes it possible
to store a reference
to a particular react element
or component written by
its components render function.
Now this can be valuable.
When you need to reference it
from within another
component render function
as you can see here.
One of my render function
is written in one reference,
which is then used by another
components render function.
So let's now see
how this works practically.
So here I'll go back
to my code here.
What I'll do,
I'll create one more script file
because I don't want
to confuse you guys
with all these stuff.
So here I'll create
one more file
and I'll just name
it as a ref script.
Dot j.
So what I'll do here,
I'll create one variable.
Let me name it as
a ref component.
And again, I have to create
one class for this.
I'll call react
dot create class.
Okay.
So inside this I'll be
putting my functions.
So here first of all,
I have to create
one render function.
So this render function
will always return me something.
Okay, so here let me create
one division first.
So what here I'll do.
I'll create one input text box
along with a button.
So inside this text box.
You have to type your name,
which I'll take and display
it back to the webpage.
So how we can do it with help
of reference will see
so first let me say
that I will use
when h2 tag here
and I'll see the name.
So here inside this Al
create an input element.
Okay, so it's type will be
'text only and and next.
I'll create one button for this.
Let me see.
Click that's it.
And here whenever we
click this button,
something will happen.
That is it should retrieve
the name from this input box
and then displayed for that.
I'll say that on click
it will do something.
So for now we
are done with this.
So how the references
are created now so here
whatever we get as input.
I want this to refer
by this method
so for that I need
to create one ref here.
So here I'll say
that we have a riff and in this
we have to take the input.
So from here,
we'll grab the input
whatever the value
with the user is passing.
It will take that input
and it will be then
referred by the function
which will be called
on on click.
So here I'll just
name this reference
as let me name it as input demo.
So let's say
this Dot Input them.
Okay, and it will be referred
by the input like this.
Okay.
So now let me say that.
Okay, let me put
one brake function over here
so that this input text box
and the button should appear
in different lines.
Okay.
So here we are done
with the render function.
Now, what we want to do is we
will call one function over here
that whenever with
this is click.
It should retrieve
the value from this thing.
So for that I will
create one function.
Let me say display function.
So what this function
will do whatever
the user gives that input.
It will take the name
and it will display
to what the HTML page
so for that I need
to create one more.
Let me say I have H1 tag
over here and I'll say hi
to whatever the name is.
So here I want to
display my username.
So for that I will create
one span over here
and I will provide
one ID to this.
So I'll just say this name.
Okay.
So now what my display function
will do it will take
this input value
and it will display
it on this area.
So for that let me create
one variable and set name.
So here are any here now
this function can refer
to my reference.
So to refer this will see
this dot whatever
our reference name.
And as input demo,
I'll just copy this
and paste it here
and then I'll say
that receive its value.
So here we are done.
So one thing here
which we need to do is we have
to display this name whatever.
The value is in name.
We have to display it over here.
So for that
what we need to do is
as you know to display it
on the web page we have
to use the inner HTML
and for that we have
to get the span by its ID.
So get element by ID
and the ID name is display
name this pool name
and then we'll say dot
inner HTML and here we
want to display the name.
Okay.
So this thing is done here.
Now again,
since we need to tell react
that you have to render
this drift component
over the content area.
So here call the react
Dom dot render inside this
you have to call ref component
and again get the dividend
by its ID so document.
Dot get element by ID
where the ID is content?
Okay.
So here we are done.
Just save this file.
Okay.
No here.
We are still left
with this thing.
We have to tell
that on clicking.
You have to call
the display function
on each button click.
This display function should
be called so now we are done.
So we'll I'll just save this
and I'll go back to the HTML
and a little that rj6 file
has again changed
and now it's like rough script.
So save this and run this
so here you can see
that I have named
and I have one button
and then it says hi.
So as soon as I put
my name over here
and just click it
it will say hi spot.
So this is
how the references are used.
But one thing you
should remember is references
should be used in the Darr need
only so references can be Used
when you are trying
to manage the focus
or text selection
or media playback,
then it can be used
while triggering the imperative
animations and moreover
when we are integrating with
a third-party Dome libraries
then also we can use the ribs.
So I hope now the refs
concept is clear to you.
So let's take up our next topic
that is keys will
keys are the elements
which helps react to identify
different components uniquely.
They are especially helpful
when we are working with
dynamically created components
assigning the key value
will help you identify
the components Unity even
after they have changed.
As you can see
from this diagram here.
We have two components
with different key values one
with key 101 and one
with key one or two.
Now these are in it
for the first time.
So the reactor will render them
without any problem.
But next time when we try to
render them hear the complaint
once key value is same
whereas comparing to
ski value has changed.
So now the reactor will render
only the second component
not the first one as the first
components Chi is sick.
So here the react will think
that as the key haven't changed.
So the element is same so
no need to render this one
and it will go ahead
and render the second component.
So this is how the key works
in react now finally we come
to our last topic
that is router in react router
is a powerful routing library
that is built on the top
of react framework
using the router.
We can quickly add new screens
and flows to the application.
It keeps the entire URL
in sync with the data.
Being displayed in
the web page moreover.
It provides us some
of the major advantages
like it can easily
understand different views
of the application.
It can restore any state
and view of the application just
by using a simple URL
along with this it
can efficiently handle
the nested views
and resolution with
reactor outer the state
of the components
can be easily restored
by the user himself just
by navigating backward
or forward moreover
by the router.
We can maintain
a standardized structure
and behavior of the application.
Also, it can do
implicit CSS transitions
while navigating only so here
we are done with our router.
Also.
I hope now you understand about
react.js thoroughly what it is
how it is implemented
and what all things
we can do with it.
You know now so I think you
guys are ready to create
one application with reactors
thus without any more delay.
Let's now find out Code behind
our Facebook comment application
which I used in the beginning.
So if you guys remember I showed
the demo of this application.
So now we will see
what are the codes
which are working
behind this application.
Okay guys, so here
we are with our code.
So to save time I
have already created HTML
the PHP and the CSS files which
all I am going to use
in my application
and moreover.
I have already downloaded
the pictures also
so that I can display
the profile pictures if you
remember from that application.
Okay.
So this is our HTML file.
I have included the dependencies
here and I have told
that I have one scripted.
J6 since I'll be naming
my 3658 a script only
and here I have added
the CSS style sheet as well.
So now next step
what we have to do
is create a j6 file.
So without any delay,
let's get started.
So inside this
as we were doing earlier
where create one noscript GSX.
Okay.
So now inside this file
I'll be creating some components
along with their functions.
And these all components
will be doing some
or the other work.
So here first,
we'll start off
by creating the base means
first really create one wall
in which all our comments
will be posted for that.
I will create one component
named Wall form.
And then inside this I
will be putting some functions
like get initial State means
to set different states.
I'll be setting different states
inside this and then finally
I'll use one render function
which will be displaying
one text area.
So without any delay,
let's quickly start.
Okay.
So here we are done
with our first component now,
let's move on and create
one another component and let
me just name it as
where comment form.
So now what this
comment is doing
that it will accept all
the new comments and it will at
the back end process them
and integrate them
with this wall.
So for that again will set
the initial State and then tell
that how many cases
it will go through
and then we'll put it
to the render function.
So let's quickly do that.
Okay, so we are done with
our second component as well.
Now.
Let's move on to
our third component.
That is where let me see.
How meant grid.
Okay.
So now this component
will be taking the comments
and then it will link them
to a particular user
as specified for users
in my PHP files.
Now, whichever the user
will add the comment it
will take the comment
and it will just integrate
with it at the back end.
So for that what we
have to do is again
create the class and put
some initial State
and then give a render function
to it and just add some methods
in order to integrate them.
So let's proceed.
So here as you can see
in this range of function
will provide one division
in which we will place
our comments along
with its related profile pic.
So this is how we
are integrating the comments
along with the pick.
So now we'll create
another component
and now let me name
this as comment block.
So now this comment
will be displaying the comments
along with its user
in the in order.
They are inserted like in this
what we are doing we are
presenting one representation.
This component will be taking in
the comment and integrating it
with its related profile pic.
And then this block
what we'll do it will displayed
back on the HTML page.
So for that, let's see.
So now we have done
with our comment block.
So since this component is done
after this will create
one more component
and what this component
will be doing is it
will be responsible for updating
our comment wall like whenever
a comment is deleted
or any comment is added
at that time.
This component will
get activated since we
are updating the ball on this.
So let me just name
it as wall update.
Okay, so I hope
you can understand
what's going on.
So let's just quickly create
this component and see
inside this complaint.
We will have some functions
and along with that.
We will have the render function
which will keep on updating
the HTML representations.
Like whenever the comments are
updated on that is above added
or deleted at that time.
It will assign the particular
profile pic and we'll link it
with the computer
and then displayed.
So, let's see how it's doing.
Okay.
So here we are done
with our update Paul
updates and then ok.
So here we will create
one more component
that is wall feet.
And now this component
will be responsible
for maintaining all
the comments on the wall.
So whether we are
adding the comment
or we are deleting it
from there this component
will Rend it accordingly.
So let's just get on it.
Okay, so finally I will create
one final component.
So this will be the component
which will be triggering
the render function
from this component dressed.
All the components
will be triggered.
So basically this
is the component
which will be responsible
for our view.
So let's get started
with this one.
So this is our final
and mean component.
So here will tell react
at first you have to render
this wall container.
Then this wall container
will call the wall feed.
Okay?
So this is
our wall feet component.
Now this Wall Street
will in return then it
will call the wall form
and wall updates like
this internally one component
will call another component
and this will build
up our whole view.
So let's just quickly render
this wall Contino.
So for this we have to call
the react Dom dot render
and now inside this will tell
that you need to render
the wall container
and you have to put it
in the place of container.
So here we'll see
document dot get element
by ID and let me
just cross take the ID.
So IDs continue
just copy this one.
And go back and pissed finally
we are done with our whole
of the reactive code.
So there is nowhere no errors.
Are there I hope
yeah, okay.
So here I'm on my browser.
So what I will do I
will just say Local Host.
Okay.
Look I will host its cheesy
081 and my application is react.
Yes.
So, okay, so you can see
that my application is
up and running.
So let's just test it out
whether it's working or not.
So I'll say hi.
Yeah, it's accepting
the comments.
I can delete my comment
and let me try replying
so we'll say hello.
So as you can see
our application is
perfectly working.
So I hope I was able
to make it clear
how it's working
how the codes are working.
So now I will conclude
this tutorial here.
Hello everyone and welcome
to the node.js tutorial
from at Eureka.
I'm Ravi.
Juelia, and I'm
your trainer for today.
Let's check out
the agenda for today.
So if we see
the agenda we would see
that what node js is you'll see
the node js architecture.
We would see what
node.js package manager
that is npm is node.js modules.
What is a package.json file
then we'd go more
into node.js Basics,
which is any language
Basics that is there.
We will also move
into the file systems.
There is an f s
module in node.js
that would enable
us to read file
and write files on our server
and then there is
an events module
in node.js there is also
something called HTTP module
and there is also
something called Express
that we would be going for which
is a node.js framework.
So at the end we would be going
through the entire code
and we'd be going
through a small demo as well
which would be something
of a mix of all the Yes Concepts
that we go forward.
So let's go ahead and see
what node js is actually
so if we speak
about node.js it's
a powerful JavaScript framework
or I might say it's a runtime
where you can run
JavaScript on the console.
It is developed
on Chrome's V8 engine.
So if anyone doesn't know
what a V8 engine is,
let me just tell you what it is.
So if I check out the V8 Dev
the official website of chromes
V8 engine you would see
that it is an open source
high-performance JavaScript
in webassembly engine
written in C++
and you know more
or less this is the engine
that runs on the Chrome browser.
So you would see that whatever
your Chrome browser understands.
It would be the same thing
that node.js also understands.
So the creator of node.js
thought that okay.
This is an open-source
JavaScript engine.
Why not Implement
that in a platform
which enables you to run
JavaScript on the server.
So this is the reason
why node.js understands.
So that is one thing
that we would like
to also keep in mind.
So it's something
that runs on Chrome's V8 engine
and it compiles JavaScript
natively into the machine code
that is all because of
chromes V8 compiler
that we have and it
is basically used for creating
server-side web applications
and also Network applications
actually so mainly node.js
is used for and basically
if it is a data intensive
application node.js is something
that is specifically
made for that.
Let's see how that happens.
Basically if you talk
about the features
of node.js it is open source,
it is simple and fast it
is asynchronous highly scalable.
You would face
no problems in scaling
your node.js application.
It basically works
on something called a micro
service architecture as well.
And it facilitates that micro
service architecture really.
Well, it is
a single-threaded model
which means it is
not resource intensive
and yet it is fast,
you know yet it allows things
to be done in parallel.
We'll see.
How that is done and then
there is no buffering.
Basically, there is no waiting
as far as node.js is concerned
and that is because of
a concept in JavaScript,
which is called event Loop.
We'll see more about that
as well and it works
on so many platforms.
So that is some brief
of the feature.
Let's see node.js architecture
and before going
into the architecture of node.js
we would also like to see
the traditional architecture.
So traditional architecture
if we speak about traditional
server architecture is basically
where every client request
is managed by separate threads.
So there is a multi-threaded
model going on in normal
server architectures like Java,
for example, it's
a multi-threaded application
or a multi-threaded
set up altogether.
So where your web application
runs on multiple threads
and various client requests
are processed parallely now,
there is nothing to take
away from this model
because it is really good
and it has been working
throughout years when Java is
at this point of time.
Java is actually one
of the best language.
Is and secure language
has to be programmed in.
However, this is resource
intensive because you can see
that there are so many threads
going on in parallel
which means your server
or your machine
as should be something
which is capable of running
these many threads.
However, if you talk
about node.js it only runs
on single thread
and still it processes
requests in parallel.
So one thing that I would also
like to clarify here is
in the background
or maybe under the hood
if you may say no
just doesn't process
any requests in parallel,
but it goes
through an event Loop
where once the request comes
it goes into the process
and node.js doesn't wait
for the output
of the request to come in
while it takes in
the next request.
So as and when the first request
for example gets the output it
would just respond
for the output
or with the output to
the respective client basically,
so, you know in the background
or under the hood it
is basically running
only one thread,
which is not resource intensive
and At the same time
processing requests
from so many clients
and it provides a virtual feel
that everything is
running in parallel,
but everything is not so
that is all because of
event Loop that is going on.
So that is basically the
architecture and then we talk
about something very important
as far as node.js is concerned
which is called
node package manager now,
it is called npm in short
and it was primarily known
as node package manager,
but nowadays it is not known
as node package manager
because it is doing
so many things then
package management is doing
so many other things as well.
We'll see what it is.
So if we talk about
the official definition,
it's a package manager
for node.js packages or modules,
which has been added as
a default installation
from node.js version
6 or 0.6 onwards
and then it's stuck.
It is already there
in any installation
that you do in node.js
if you are a Java programmer,
you can relate this with Maven
and if you are a PHP programmer,
you can relate
it with composure.
So it is the same.
Mechanism where npm
has a repository
of so many libraries
and then the repository
serves whatever the package
you need for your project.
And if we talk about
the features it provides
and hosts online
repositories for node.js
which can easily be downloaded
in our project using
a command line.
So it provides a command
line utility as well.
And it also allows you
to manage the repositories
or the versions of libraries
that your project may use.
So we'll see
what are the versions
and what are the libraries
that we are talking about.
So the library is
that I'm talking about when I
say libraries it is just node.js
modules so node.js modules
or if we talk about
the module system.
There are core modules.
There are local modules and then
there are third-party modules.
So code modules are the ones
that are actually available
in the default installation
of no chairs.
You don't have
to program anything.
You don't have to
install anything else.
Node.js to get
the core modules working few
of them are listed in here
like HTTP URL query string
will be using them
and there are
some others as well,
which we'll be using today
and then local modules.
It is something
that a programmer builds.
It could be a function.
It could be an object P
anything the programmer builds
and the programmer exports
so that other team members are
other programmers can import
that module and use them.
So it's something
that a programmer would build
like a custom module
and then third party module.
This would be installed
through the npm repository.
So if we speak about npm
in this particular case,
let me just also open
up the npm website.
So it is basically n PM J s.com.
And you can see that it has
so many repositories.
There are so many companies
that it is serving and all there
are so many repositories
available as well.
Let's just search
a few repositories
in this particular case.
I'll search one of them.
If we talk about react
you might have heard
of react react is one
of the repositories it
is available in npm.
You might have heard of Angela.
That's also one of the libraries
that is available
in the npm repository.
You might have heard of jQuery.
You might have
heard of bootstrap.
These are like naming
just a few of them.
There are so many
so many repositories
that are available even express
that we are going to use is
one of the libraries
that is available
in this particular
proposed ettore of nbm.
So you can see here
that Express is one
of the libraries
that is to be used.
So we'll be installing
expression C. By the way.
This is the way you install
any third party library
from the npm repository.
Alright, so that is
the 3rd party modules and you
would be using npm install
or in PMI to be in short to
install this particular poetry.
Now, let us see the package.json
file package for Json file
in node.js is the heart
of the entire application is
basically the Manifest file
that contains the metadata
of the project now
at this point of time.
Let me just create a node.js.
Project and see
what this package dot.
Json file looks
like and then we'll analyze
what this file actually is.
So let me just create
a folder here at Eureka
and in this folder.
I'm willing to you know,
initialize a node.js project.
So let's say I'll call
it nodejs demo,
or maybe I'll call it
task manager even better.
We'll try to create some
of the task manager
functionalities in here
and it will be an API
that will be creating
or a web service
that will be created
will see what it is.
So in this task manager,
I am going to initialize
a node.js project.
And in order to initialize
a node.js project you need
to have node js installed
in your computer,
which means you have to go
to node.js dot org website
and you can download
this LTS version.
This is a currently release
which is basically experimental.
It'll have all
the latest features
but it is prone to be
erroneous at some time.
So, you know generally
for You don't use this one
but you use this one but say
if you want to check
out the new features,
you can also install
the current release
but will always go with the LDS
and I already have this
installed now clicking
on this will allow you
to download the MSI file
that is the setup file
and then you can just
double-click on that set up
in just install it on Windows
and in Mac as well.
The setup is really simple
and in Linux as well probably
will give you a tip file.
For example, if you're going
for a boon to so the setup
of node.js would be
really straightforward.
But after the setup is done,
what you have to do
is you have to just check
whether node.js is installed
in your computer or not.
And you'd be checking
it this way node -
we will give you the version
of node.js and you can see
that I already have it installed
and I have the version 10.15
point three that is the LDS
and then I'd also check npm.
If you recall we saw
that npm is something
that comes in inherently
with node.js all together.
So we'll be going for npm -
be that will give you.
Npm version so we're all set in
we're all ready to go.
So let's go for creating or
initializing a no chase project.
It is something
like this and p.m.
In it dot which means
current directory.
So if we just hit enter
I think dot is something
that is not to be done.
Right?
So this would ask
you certain questions.
Like what is the package name?
Let's say I want the same
package name as task manager.
I want the version 2 B1.
Okay, the description let's say
this is a task manager project.
Right entry point
would not be significant
at this point of time.
So we'll just keep it as it is.
No test command as
of now no git repositories.
I'm not going to even commit
that to a git repository
and no keywords as well author.
I can say at Eureka
and license no meaning as
of now for a license
because we are not going
to make it public or anything.
So it tells us that is it?
Okay and also tells you
that it's about Right
to this particular file package
of Chase on inside
our task manager folder.
So which means after I say, yes,
there is a possibility
of this being written
into a file called package.json
inside my project.
So let's go for hitting enter.
Let's say yes, and if I now
check out my folder you see
that the package.json file is
in let's just open
this up in our editor.
You see that here is
the package dot Json
available with every information
that we provided.
Now.
This is a very basic
package dot Json.
There'll be so many things
inside a package.json file
and a normal
or a real world Baxter.
Json might look
something like this
where there are so
many things like the name
of the project is
there then there is
something called version as
well description of the project.
What is the starting point
of the project which is
Humane script to run first.
There are certain scripts.
We saw that we didn't provide
any test command and then there
are certain engines.
What all tools do you
use to run this project?
Who is the author?
What is the license?
There are certain
third-party modules
that we would like
to have you can see
in this particular example
that there is Express
that is there as
a third-party modules
which will be using and then
there is Dev dependencies.
Like when you go
into a development environment,
like for example our computer,
they'll be certain dependencies
that will be there and
that will be tested
inside the dependency.
Then there is repository
related information.
Shouldn't which we
didn't provide actually
if you want to see
what are the bugs and all
there has to be a separate URL
and the homepage.
So that is
your package.json file
which got created.
By the way,
when we initialize
the node.js project
and you can also manually
created but it's better
that we go for npm
in it as a process.
So now let's go
for node.js Basics.
So if we talk about Basics,
it's like any language
Basics and the main thing
that we need to check out as
a basic is the data types.
So there are certain
primitive data types.
There are certain
abstract data types,
like non primitive data type.
So primitive data types as
string number Boolean null
and undefined abstract
data types are object array
and date to name
a few by the way.
There are so many others
but these are to name
a few so say for example,
if I create an application,
let's just create a string
as a variable and let's see
how that works.
So, let me just create
an app dot JS file
and in this I'll
create a variable
and I'll be very specific.
I'll say first name
and I'll say first
To be and Rica.
This is a variable that we
declared and if I want to show
this variable in my console,
I'll just do console
DOT log first name.
So when I do this
the main perception is basically
if I want to run this app to JS.
I might have to
create an HTML file
where I might have to include
this app as a script file
and then I might have
to execute the HTML file
and open the console to see
this particular output.
But if you have installed
node.js on your computer,
which we have you
would actually be able
to run this particular
app dot JS really easily.
Let's run this one for that.
I would have to go
into my project.
Let me just clear
the screen and run this one
and really simple to run
a node.js application.
It's simply node.
And the file name
that is app dot JS
and you can see
that it displays
the first name in my console.
So whatever I do
as console DOT log
gets displayed in my terminal
that is something that I
would like to keep in mind.
And remember this is a string
that we have created
but there is no concept
of a strict data type.
So basically the first name
can also be something like this.
The first name can be reassigned
to let's say a number
and that will not be
a problem for JavaScript.
That is the core nature
of JavaScript is
not strictly typed.
So that is something
that I would also like
you to keep in mind.
So there are so many data types
that are available which
we have created a string
and then there are
so many others.
This is how you create
a variable that we already saw
and then there are operators.
Now as I say like
there is something
that is already similar
to all the other programming
languages variables are one
of them operators as well.
However, there is one operator
that is pretty unique and that
is the triple equal to sign.
So say for example,
if I go for something
like this bar,
let's say h 1 is equal to 30
and for H2 is equal to 30
and then let's say
VAR result is equal to H1.
Double equal to h 2 I'm using
this double equal to similar
to any other binary operator
like I might go
for plus and similarly.
I'm going for double equal
to now this is
because it is
a comparison operator.
This would return
either true or false
and this will get stored
inside the result variable.
So this time I know
that you might have guessed it
it would be returning as true.
And if I do the result
if I go for console log
of result and
if I execute this after chase,
you see that it
returns as true now
if I go for a string, all right,
and when I declared a variable
in the previous example,
we saw that there is
no strict data type.
So this would not actually
check for the data type.
This will just check the value
and though it may seem
that it should give us false.
This would give us true
and the fact is
like JavaScript doesn't care
about data types.
So if say for example you want
to also compare the data types
along with the value instead of
double equal to use triple equal
to And that way this
would give us false.
There is so much
going on inside or in
this particular two examples
that we have but for now,
you can remember
that double equal to
doesn't compare the data types
while triple equal to also
checks the data types,
but then again there is so
much going on under the hood,
which it's not in the scope
of this particular session,
but just keep this
in mind as a unique operator
that is available for JavaScript
specifically and then there
are certain other languages
that might have these operator.
But JavaScript is the one
that came up with this.
All right.
So this is one thing
and by this time you
might have got an idea on
how we run an application
or how we run a file in node.js.
So this is one other thing
that I would also
like to mention
where functions are created
say, for example,
if I have a function to create
let's say function say hello
and I pass in name inside it
and I return let's say
hello plus name
a plus here is
a concatenation operator
and that would return Name
our Hello message with the name
whatever we have lasting
so I can do this
like console DOT log say hello
and let's say hello to Ravi.
All right.
So if I run
this particular file,
it will give me whatever output
we expect which is fine.
Now one thing I would also like
to tell you is in JavaScript.
There is a provision
where you can create
a function without a name
an anonymous function,
which is also something
that JavaScript came up
with a function with no name.
And if this is the case then
how would you call the function
so for that you can do something
like this VAR say hello is equal
to a function
something like this.
And then there is something
Remains the Same function
gets called as as normal.
What we have done is we
have created a variable
and inside this variable.
We have assigned a function
rather than a value.
So and then we are calling
the variable as a function.
So again,
if I run this particular code
the output would be
the same just keep
in mind that function here
can be an This in JavaScript.
All right, and then
objects now object.
There are two ways you
can create objects one is
through object literals.
Like were let's say
a student is equal
to a constant object
which has let's say name Ravi
and email robbery at gmail.com.
For example, right
and then we can do a something
like this console DOT
log student dot name,
right and then
student email and so on
and that would display
whatever the name is
basically so an object
dot property can be done
and then there is a Constructor
pattern as well available,
but it's okay
if we don't go for that but then
there is another pattern
which uses object Constructor
to create an object now going
into node js core modules.
One of the modules
is file system.
That is the fs module FS module
if you want to include
or any module
if you want to include you go
for this syntax a variable
is equal to require.
And the module name
and this would be something
like this for example par FS
is equal to require FS.
Now for this FS module you don't
have to install anything else
but node.js has to be there
and which is there and
if is module would be available.
It's a core module in node.js
so let's say for example
if I have a file
called hello Dot txt,
and it has some data.
All right, and if I
want to read this file,
I'd be able to do this
like FS dot read file
and it asks me the path
of the particular file.
So let's just give the path.
Basically I can try
with the relative path
first so it will be
basically Hello dot txt.
Let's see what it gets
and the second argument
that we need to pass is
the Callback function so node.js
or any JavaScript platform
would work more on the basis
of callback function.
That's how it creates
the virtualization of so
many things working
at the same time.
All right, so,
I would go for a callback
function and this function
Anonymous function would go
for two arguments one is error
and one is data.
Let's see if there is
no error then we'd go
for logging the data
inside the console.
Let's see.
What data we get.
All right.
So if I run this file now,
hopefully I should
get the contents
of Hello dot txt file.
Let's see.
Here, I don't get the content
but I get something called
a buffer that buffer is
basically some container
that contains raw data
out of this buffer.
I can get the string basically.
So let's say
if we go for buffer dot tostring
which is a function
which would convert
the data to a string.
So now it will give me
whatever the content
hello world has and similarly
if I for example have to write
something inside a file.
Let's say if I want to write
something inside a file and then
once the file is written
I would like to read out
the file we do something
like this FS dot right file
and write file would again
go for the path.
And I would be going
for the data as well.
And the data is something
like something like this and
once I go for the data data
could be any data type
by the way could be Boolean
could be object could be
any data type and then I go
for a callback function.
The Callback function
would have something only
one argument here,
which is error
if there is no error
like if no error then I
would like to read the file
right so then I can go
for f s dot read files.
I can just take this whole thing
and I can put it in here.
So what I have done is I
have written something
into the file and
if there is no error after
writing whatever I have written,
I would be trying to read
that file and in here
if there is no error I
would like to display
the content the hopefully
this should give me
how are you or maybe let's see
whether it overrides
whether it appends.
Let's see what happens.
If I check out this you
can see it gives me
how are you and if I go
into Hello dot txt,
you can see
that it has overwritten
the particular content
that was there before.
So this is an f s module demo.
This is how you would be reading
and writing files.
I might like to also try
and read and write Json
in some Json file
that might actually
give me a feel of an API
that is being created.
Let's see how that goes.
Then there is
something called events,
but before going for events,
I would like to create
a server first.
So let's just create
a server and you know,
the events are basically
something that we
would be working with
where we would be
emitting certain events.
And then we'll be listening
to those events.
Let's see how
that whole mechanism works
and how the event handlers
would work and all
but before events.
I would like to go
into creating the server
through the HTTP module
because server is also
a network application,
which is something
that node js would enable us
to create so Create a server
through the hdp modules and then
I'll come back to the events.
Let's see how that goes.
All right, so let's just get rid
of this FS related code
and I will again go
for the fs code in sometime.
I'd also get rid
of the Hello dot exe.
I don't need this.
Right.
And then what I'll do is
I'll create a server in
here before the server.
I'll go for VAR H DP
is equal to require HTTP
and then there is something
which is really simple
to create a server in node.js
as opposed to all
the other languages.
So is something
that a programmer would create
so say for example,
if you compare no TS
with JSP or Java,
there is Tomcat
Apache web server
that is already available.
If you compare notes as
with.net there is is server
that is already available.
If we talk about PHP
there is Apache server
that is already there compiled
and available in node.js
there is no server.
So the concept
of node.js being a server.
It's something that is not true
in node.js it is just a runtime
which enables us to run
JavaScript on your machine
so that you can create a server
if you want to
and creating a server.
It's not a big deal
in node.js this is
how you create a server
HTTP dot create server.
That's it.
And I'd save it.
A variable called server
and my server would listen
to the port number
3000 the server Dot listen 3000.
Alright, so this is what
your server would listen to and
if you want you can also provide
the hostname here
which is by default localhost.
/ if you want explicitly
can provide Local Host
as the host name.
So your server
would be listening to Local Host
and 3000 and after it,
you know starts listening.
I'd also like
to provide a message
and again the Callback function
or an anonymous
function would come
into the picture so function.
So log will go
for our server started
on Port 3000, right?
Okay.
So what have we done?
We have simply created
the server by HTTP create server
and we're listening
on port number 3000.
So that is what it is.
And then at the end we
are displaying some message
on the console.
So let's see one thing
that you'd notice is
in the other programs.
The application actually ended
like once you are done
with the whole program.
You see that you get
the command prompt back.
But in this case
when we are listening the server
is constantly listening
to the port number 3000.
So the application would not end
in this particular case you
may have to end the application
forcefully by hitting Ctrl C.
So, let's see now
if I run it you see
that server started
on port number 3000 and
the application is not ending.
All right.
So if I go for say localhost
port number 3000 Something
that might happen you see here
that the request is sent
to the server the server
is not responding
because we have not
programmed our server
to respond with something.
So here the server
is not responding
while the server is running.
All right,
so if I stop my server you
would see it would tell you
that the site can't be reached.
So basically what
that meant was previously
the server was running.
So if I for example run
the server this would again let
me just open up localhost 3000
this would again start to load
but the messages the side
country reached won't come
because the server
is still there.
The site is Rich with the server
is not responding to us.
So let's program our server
so that it responds
to us in which you go
for a callback function
inside your create server method
and this callback function
has two things request
and response to arguments.
And if I want to send a response
in this particular case you go
for response dot end.
All right, and I
let's say server works.
That's the message
that I want to send.
All right.
So what this would do
is it would send
a message to your browser
saying server works.
So let's just take that message.
So for that
because I have changed
something in my app doj's
I might have to stop this and I
might have to restart my server.
So server listening
on Port 3000 and
if I now refresh you see
that it gives me
the message server works.
So this is pretty cool.
We have created a server in like
almost three statements, right?
So that is something on
how you create a server.
But generally what people do
is people use this functionality
of creating a server
long with Express
and then create a server
through Express the framework
that we are talking about.
So we will see how to create
a server through Express.
But before that let's move back
to the events and let's see
how events would work
in this particular case.
Now when you talk about events,
there are two methods.
It's that you would be generally
going for one is called M it
and one is called on so
remember these two methods
Emmet and on let's see
how we can make it work
and what our events basically
or how an event ID
system would work.
So in that case we
again use a core module
which is called events.
So far events is equal
to require events again,
a node.js code module.
You don't have to do
anything to include this one
and in this particular case,
but also create an event emitter
so far event emitter is equal
to events dot event emitter.
And it should be a new event
demented actually right now.
If we go for the presentation
you would see
that they have also
emphasized on to things
that is on and Emmet.
So we will see what
these things are.
All right.
So now in this particular case,
let's go for something
called event dot on even dot
on or not even taught
on actually even Demeter dot
on this function.
It's basically
an event listener.
Now whenever an event occurs
this function would listen
to that particular event.
All right.
So this would listen
to the event and event dot
on we would have the name
of the event and let's see
what we can do as a function.
There's a callback function
that is also something
that is involved in here.
So we will see even diameter
where it will go for event dot
on and something
inside as arguments.
But as of now,
I'll just keep it this way.
And I'll simply go for something
on the image side of things.
I would like to emit
an event and let's see
how that goes.
All right.
So in this particular case,
what I would do is
whenever there is
some requests on the server,
I would like to emit an event
and then I would like to listen
to the event and log something
on the console, right?
So, let's see in
this particular case.
I'll go for event emitter dot m
it and I can name the event
anything the event
that I'm trying to You Know M.
It is basically someone
has requested to the server.
So what I would say is
on request maybe just
someone I can name it anything.
That's why I'm naming
it a very bizarre names
or someone requested.
It is an event name and
if I want I can pass
in some data as well.
But as of now I'll just
keep it this way.
I'll just omit someone requested
and when I would like
to do something
when someone requested
so I would go for even diameter
dot on someone requested
and That is a callback function.
Let's just go
for console DOT log
and I'll just say a request
has been done on the server.
Something like this
on the console.
All right.
So this is an event emitter
and basically on is
an event listener.
Alright, so we are
triggering an event
or maybe I can call
trick even trigger
that will be a better name.
So this is an event trigger
and this is an event listeners
or even admitted it m
it is an event trigger
and even tomato dot on
is an event listener.
So whenever this
would be triggered
this event will be executed and
this function would be executed.
So, let's see.
So if I now read on my server
because I have changed
something in my node.js app.
I'd have to rerun this.
It says server started
on Port 3000.
I will just refresh
and we'll give me server works.
That is fine.
But if I check out
on the console, you'll see
that a request has been done.
If I refresh again, you see
that a request has been done
and then there are
two requests that is
because one is checking
whether the method get
is available on the server
or And thus the other request
is basically executed
with the method get'
actually so there
are two requests
but we don't need to you know,
go into detail
in that particular case.
However, one thing is
for sure that whenever
the event emitter is triggered
we can execute the on method
and we can listen
to that particular event.
All right,
and if say for example,
I want to pass in some data,
let's say test,
right this data can be taken
into the function the anonymous
function as an argument
and again just display
that for example data
that should display test to me.
So whatever you pass in could be
a string could be a Boolean
and object anything
would be taken into the function
as an argument can name it
anything and you can display
that particular argument
as well inside the console.
Let's rerun our program
and let's refresh
the server is requested
and you can see request
has been done on the server
and test this particular data
is also been displayed.
So that is the event diameter
you can emit events
and you can listen
to events whenever
the event would be emitted
the listening would happen.
All right.
So this way, you know,
our node.js server
becomes an invented server
and this is really good.
If you want to create
a chat application
or any real-time
application event handling
would actually help us create
a good real-time application.
So that is where this
would basically come
into the picture.
So, you know,
you can check out socket IO
there is a library called
socket IO which helps you
to create a chat server.
This would heavily
use event amateur
on and emit methods.
All right.
So this is the one now
we have created the server
using the HTTP module and
if we talk about the server
you can always see
that the client would be either
a web browser or mobile browser
or an application
that might request
to your web server.
The web server would contain
your server file.
That is the app dot JS
that we created
plus some application logic
as well if you want
and the Might be taking data
from the data layer
or any external system
and it might be serving
the request back to the client.
So basically this data would be
taken into the business layer
and to the web server
and the web server respond,
like response dot end sort
of thing would happen
in this particular case.
So this is
how the request response cycle
would go on and then we see here
that it's creating a web server
using node.js you can pause
this particular portion.
You can also try out
this whole thing.
I think you would know
how a server is created.
You already know
that and then there are
certain other things
that are listed in here
which you can try now we'd go
for third-party module
or a third party package.
You may say or even we
can call it a library.
It is called Express JS
next press JS.
It is an OG s framework
which is basically facilitating
the management of data flow
and routing as well.
It is very
lightweight and nowadays
if you create a node application
for an a By order of
Observer expressjs is something
that you definitely have so it's
like basically the part
of the language itself
right.
Now.
It facilitates faster
application development.
It provides applications
with template engines
two of them are Jade
which is nowadays
known as pug and ejs
to of the very popular ones,
but then there are so
many others it helps, you know,
building single page
applications building
multi-page applications as well.
It helps you to connect
with any database MySQL
mongodb red is ETC.
The configuration is
really simple will see
how you create a server
in express its really simple
and it also helps
you to handle errors
or maybe it gives you
a good facility to
Define error handling processes
so that your maintainability
of the application is something
that would work.
So let's just create a demo
in Express and let's see
how that goes.
And as I said and be using HTTP
and express together
Create a server.
That is an ideal way
of doing it.
So let's just get rid of
everything and let's just start
with the express server for that
and have to include express.
Our Express is equal
to require Express.
Now when I do this and if I
execute this, you might expect
that this might work
but remember Express is
a third-party Library.
It's a third-party module.
So in that case you would have
to install that particular
module on your system.
Obviously, if I run this,
let's say if I try to run
this this will give me
an error cannot find
the module Express.
So let's install Express in here
in order to install expression.
Remember the file structure
that we have.
We have an app dot JS
file a package.json.
There's nothing else in here.
So let's just install Express.
Let's say npm install Express.
You can go for install
the whole word
or I as a short form.
It's all fine.
I didn't stall Express
and this would actually download
Express from the npm Repository.
And install it
on your local machine
and you'd be able to also see
where that Express
exactly gets installed.
So you can see
that expresses installed
48 packages installed.
All right,
and now you can see a change
in the file structure there
was already package dot Json
an app dot JS in my file system
while there is a folder
called node modules created
and package underscore.
Dr. Jason also created
the node modules folder
would actually have
the library Express
and then there are so
many other libraries
that Express depends on which
are also imported and installed.
So now if I execute this this
will not give me an error.
However, we have
not created a server.
We have not listened
to a port number.
So we'll be doing
that through Express.
Let's do that.
What we would do is Express.
And brackets like be calling
expressed as a function
and we'd be saving it in silver
a variable called server.
So this is
how you create a server
in Express pretty simple.
And what we would do is
server Dot listen 3000
and then the same drill like
3,000 and not specify Local Host
because I know
that it is localhost and at
the end a function that tells
that the server is listening
to 3000 so console.log,
so listening to Port 3000.
All right.
So the express is required like
included a server is created
and the server is listing now,
let's just rerun
the application and
because the server
is listening the application
would not stop it will keep
on listening and let's go
into our browser and let's
refresh this time around
when we refresh you.
Do not get that
whole loading thing.
But instead you would get
an error and it says
that it cannot get /
this is actually not an error
on the server side the sir.
Is all okay.
The thing is
that we have not programmed
as server in a way
that it would address the get
request on the root path.
This is our root path.
There is no get request
addressed on the route,
but that's what it says.
So what we'll do is
we'll address the get request.
I will do something like this.
We'll go for Server dot
get well actually rub
the naming it a server
because I would like to use
this server identifier somewhere
else in some time.
I'll go for app now go for app
Dot listen this time around.
All right, so app
and this also tells you
that you don't have to name
it server can name it anything
that you want.
So this is my Express app
and app dot get /
and a function request
and response the same
request response function
that we had but it is now
specifically for the root path
and in here I can go
for a response dot
either I can go for end
or I can go for send
and response that send.
Let's say X This works
I can also let's
say have an H1 tag
so that I had browser
displays it as a heading
that can be done.
And now let's
rerun the application
and hopefully the root path
get request is addressed.
So let's go for it.
I'll stop this we
run the application.
By the way,
there is a utility called Node
1 which would help you to run
your application automatically
once there are some changes
but this time around
we'll just you know,
read and the
application manually.
So if I now refresh you see
that it gives you an H1
which says express works.
So which means this is all done.
Your root path is addressed.
Your route get request is done.
But what I would like
to do is I would like to go
for something called tasks.
Okay, there is no route
that is tasks
that is defined yet
not programmed our application
so that it addresses
the get request on the tasks
in this get requests.
Let me just go
for the get request first
sap dot get slashed asks is
what I want to have
the server address
and Request and response
request and response.
So now I can go
for response dot send
I can go for another H
1 which says tasks work
if I now restart my server
and remember to stop myself.
I'm just pressing in control C.
And if you are
a Mac User is command C
that is stopping the server.
And now if I refresh to see
that tasks work this works.
Now what we have done here is we
have created two routes one is
app dot get for the root
and one is apt-get
for the tasks.
It could be a blog post.
It could be about put up
dot delete AB dot patch anyone
who is familiar with
the rest API would be familiar
with all these words your server
can address any requests get put
post delete patch any requests
that you want to address here.
We are just going
for get requests.
All right.
So now what I would like
to do in here is I
would like to return
something from a file.
Like for example,
I'd create something called
DB dot Json Json file.
And in this Json file,
I'd like to go for let's say
a key called tasks
and tasks would be
basically an array of tasks
which would be learn node.
Js now in JavaScript.
You can create area
with square brackets similarly
in Jason's in text
that will will work.
Let's say learn
JavaScript learn Express.
So these are the three tasks
that I have.
And what I would like to do is
from this Json file,
I would like to read
these three tasks
and I would like to return
them as a response.
So, let's see what we do
in this particular case.
Let's see how that works.
And that response has to be
in this particular case right
in this particular response dot
send I'd like to read the file
and then send the response
so we know that what we use
for reading the files,
which is the fs module
and also we know what we use
to create a server as well.
Here we have Created
a server by Express
but generally people
always use a mix of Express
and HTTP to create a server.
Let's see how that happens.
What I'll do is our first
I'll go for H DP
is equal to require HUD
p and for this week,
obviously, we don't have
to install anything.
It's a core module and I'd go
for VAR server is equal
to HD P dot create server.
All right,
and app is something that I'll
be passing in as an argument.
So my server is created
which has all
the goodness of Express.
So instead of app Dot.
Listen, I'll go for Server Dot.
Listen.
All right.
Again, this is all stay
the same will it will listen
to the port 3000
and then go for a message.
It is server is listening
to poetry thousand and so
on and so forth.
So what we have done is we
have included Express.
We have included HDPE
you created an Express app.
We have created a server
with the create server method.
We have passed on the express
app as an argument,
which means all these routes
would be something
that would be addressed.
And then at the end we are
listening to poetry thousand.
Now, this is the common way
that people would use
to create a server
and an Express app together.
Alright, so now
let's rerun our program.
Let's see what happens.
It gives me an error
and that is a typo.
So let me just resolved that.
Right, and now let me
just rerun the program.
So again listening
to Port 3000 this would
not probably give me anything.
You can see that it
is still loading
because there's no response
that I have programmed in here
which I would like to but say,
for example,
if I go to my root path,
it gives me Express work.
So that is all working fine,
which is cool actually
to be using Express
and node.js server together.
Alright, so now I'd like to read
from the DB dot Json.
So obviously I would need
VAR f s is equal to require fs.
And in here at go
for f s dot read file
and go for the path
that is T V Dot Json the
relative path and the Callback
which has two things
as far as read file
is concerned one is error
and one is data.
Let's go for console DOT log
or not even console DOT log,
let's just do
a response dot send.
Once you have the data you go
for data dot tostring
would be something
that we'd be going for.
Let's see what we get
in this particular case.
I would have to restart
my server and this works
and if I go for tasks
this gives me an object
that has an array of tasks.
So I don't like to have
the whole object
but I just want the array
of tasks to be there.
So one would think that okay.
I can do something like this.
Like let's say
War tasks is equal
to Theta dot tostring dot tasks.
That is the object
that we want to get
but the thing is
like this tostring would convert
the whole data to a string
which would not have
that property called task.
So if I want to convert
this string to a Json
I'd like to do something
like Json dot parse.
One of the codes have
a script methods this would then
have the property called tasks.
Json dot parse data or two
string which we are passing.
As an argument and that will
convert this string to a Json
and then I'm going for tasks
as a property at the end.
I can simply send in tasks.
So that will give
me the plane are a
that we require.
All right, and specifically
if I want to send Json
I'll just do response dot Json
rather than going
for response to its end.
So I am being specific in here.
So let's just stop this
and start the app again
and refresh and now you see
that you get the array now,
you might not get
the same output
that I am getting as
far as the color is concerned
because I have a an extension
which is running
in my Chrome browser
that is adjacent reader
or something like that.
I had installed it years ago.
So that is the thing.
But the more important thing is
you're getting the plane are a
from the file that we have.
So in this case we have used
almost all the things
that we have learned.
We went for Express.
We went for HTTP combined.
It was a server that was created
and then the fs module to read
something from the file this
would probably be Something
that we would like to go
for from a database
like we'd like to get a database
connectivity done and get all
the data in and then read data
from this particular case.
But as of now read file
would be enough
and this might give you
a good introduction to node js.
So this is what it is
and further down.
You can try out more routing
and more database connectivity
in node.js see how
that goes for you.
Hi everyone.
This is a she's from Erica.
And today we are going to learn
how to build a mean stack
application from scratch.
So before moving ahead,
let us discuss the agenda
for today's session.
So we start with what is
a Min application then
we'll talk about mongodb
Express anger to a node.js
basically mean is an acronym
for Mongo DB Express angular
2 and no dot j.
So we were talking about all
these four Technologies.
They will talk
about credit operation.
And at last we'll start
building our application
which is contact list mean app.
So let us start with very
first topic of today's session
which is what is
the main application means
that refers to a collection
of JavaScript based Technologies
used to develop web application.
So from client to server
to database everything
will be based on JavaScript.
If you see the diagram
which shows a simple
client server architecture
that will be following
in our main application.
If you see there you will find
angular 2 that we'll be using
for our client side development.
Then we will using Express
which is based on no dot DS
for server-side development
and at last we'll be using
mongodb as our database.
So this is the architecture
that will be following.
So let us talk about
this for Technologies
starting with mongodb.
So mongodb is an open
source schema list
nosql database system.
So if you are working
on Mongo DB you
will be working on Collections
and documents a collection
is a group of documents.
Whereas document is a set
of key value pairs.
You can refer to a collection
as that of a table
in our dbms system.
So basically all the data
that will be working
on inside mongodb will be
in the form of chi
and values mongodb saves data
in binary Json format,
which makes it easier to pass
data between client and server.
So next on our list is Express.
So Express is a lightweight
framework used to build
web application based
on node dot JS.
It provides your
setup robust features,
which you can use to build
single page application as
well as multi page application.
The idea of Express
came from Sinatra,
which is a very
popular framework based on
who be so basically Express
provides you boilerplate
by encapsulating
the functionalities
of node or chairs.
So that the whole app building
process becomes easier
and fast now,
let us talk about angular
2 using angular 2 you
can make application
for your mobile as well as
your desktop angular 2 is by far
the most popular JavaScript
framework available today.
And with the introduction of
typescript angular 2 is bringing
a true object-oriented
web development into mainstream.
So we'll be using our interface
through which our client will
be interacting using angular 2.
So at last let us talk
about no dot JS.
So no dot J's is a server-side
JavaScript execution environment
built on Google Chrome's
V8 JavaScript engine.
It follows an
event-driven architecture
where there is a single thread
mechanism to process your events
and even can be
a clicking a button
or filling a form
in our website.
So all these events
are then sent back
to your server for processing
and then the server
after the processing is done
generate the response.
The processing of
these events are done.
Asynchronously that is
if we have multiple events
in our event queue our node
Server doesn't wait
for a particular
event to complete
so it can process
or serve multiple requests
at the same time.
So these very whole
event-driven architecture makes
our node.js server
highly optimized and scalable.
So I hope guys you have a clear
overview of All the technologies
that will be using
in our mean Stacker.
So now let us talk about credit
operation prayer is an acronym
that stands for create
read update and delete.
So basically these four
operations will be performed
on our database.
So we will be using post method
for inserting new data into
a database will be using get
for retrieving data
from a database will be using
put for modifying
or updating any data
that is there in our database
and at last we'll be
using delete method
for deleting resources
or deleting any data
that is there in our database.
So we will be implementing all
of these for functionalities
or operations using restful apis
that will be learning
while building our
whole application.
So guys let us start
with building our
application before that.
We need to install manga TV,
and no dot JS locally
into our system.
So let us go ahead and do that.
So for installing
know dot JS you need to visit.
This website called
node.js dot o-- r-- g--
go to the download section then
according to your
operating system choose
the correct installer
and download it.
So I'm going to go
ahead with Windows.
So basically installing
no dot years or longer.
Even your system is pretty easy.
You just have
to go through setup.
Click a bunch of next button
and specify your location
where you want to install
it or go with the default
and that's it.
So my download is complete.
I'm installer.
I have already downloaded
and install node
or chairs in my system.
So I'm not gonna install it
but I'm gonna show
you the procedure
or way to do it.
It's pretty easy.
And then we're
gonna stall mongodb.
I think I have also installed
a mongodb in my system,
but I'll tell you
how to do that.
So specify your location here
then click on next next
and then finally install.
So once your installation
is completed click
the Finish button and open
the node dot JS command prompt.
So basically we will be using
this command prompt.
No dot S. Command prompt
to build our entire project.
So let's check out
the node version.
Then you can go ahead
and check out the npm version.
Npm stands for
node package manager,
which is there for
managing your dependencies
and their versions.
So whatever dependencies you
need to run your application
or for your project,
even I use NTM to manage
that now let us install
mongodb into our system.
So you go to mongodb.com.
You click on download then again
as per your operating system
choose the correct installer.
I'm going to go ahead
with this very version
and I'm going
to download the MSI.
It's a big file 148 m b
so I have already downloaded it.
So I'm not gonna go ahead
with the download.
You have to run this setup.
Click on next I have Mama TV
already installed in my system.
So I'm gonna remove it
first then you can show
you the installation.
I could have done
that with no dot J's as well.
But it's pretty same
like you just have
to click bunch of next have
to specify your path.
And that's it installed it
then go next agree next.
I want complete install.
You can go ahead
with the custom options as well
where you can
specify the location
and other configurations,
but I'm going to go ahead
with the default mode
or the complete installation
and the mongodb files
will be installed
in my program files
if you're using Windows and you
can go ahead and check out
that so I'm going to show you
that once the installation
has been completed.
Yeah, so click on finish.
Your father will be installed by
default in your program files.
If you're using Windows go
to Mongo DB server 3.4
then so this is
where you're all the files
reside in your system.
Now for running
your mongodb service,
for example, whenever you
are creating a mean app,
you need to run
the mongodb service
so that you can make
a connection to it
and performed it operations.
So for that
what you can do is go
to dogs in mongodb.com
because you will get
the whole procedure or step
by step process to do that.
Welcome 1tb.
Soho installation manual
Community Edition windows.
We have already
computed this very step
that is install
mongodb Community Edition.
Now, we need to run
this mongodb service.
So for that we need to create
two directories called as data
and one subdirectory steamy.
So let's go ahead and do
that will open command prompt.
Let me delete the data file
because I had a mongodb
already installed in my system.
I'm gonna delete it.
So yeah, DB has been created
now the next step
is to tell mongodb
that this is the part
where my database data
or data for the database
will be deciding.
I'm going to copy this command
and I'm gonna paste it here.
I'm going to change my path
which is see / data,
that's it.
So my connection
has been started.
My service has been started
and sweating poor connections
on port 27 0 17,
which is the default port
for mongodb to connect
if in case
like if you go ahead
with this very step
and it doesn't work out
and you have to execute
the Mongo d dot exe,
which is the third step you
can do that as well.
So we have mongodb ID
and no dot JS ready.
So now we need to
create our project.
So I'm going to go ahead
and start building
my application for that.
I'm going to go
to my project directory
which is in 3 Drive.
Yeah, so I'm going
to make a folder
where I'll be putting
all my source code.
Server side as well
as my client side.
So let's name it as the name
of our application
which is contact list.
Now I'm going to use npm
and it command to build
my project as well as
create package dot Json thyroid
which will contain
all my dependencies
and their version.
So you'll go ahead
and rip and p.m.
And it will ask you
your project name.
Version description
of the project
that you are building.
simple mean application entry
point is the file from with
where your server side
exhibition will start.
So let's name it as AB dot JS.
You can go ahead
with index dot J's as well.
I always use app dot j.
So it's up to you to name.
Whatever you want
to name that file.
You can do that.
You can put your name as author.
I'm going to put mine right now.
Let's open this folder.
So it project.
Okay, I have already
opened in my vs code.
So I'm gonna use
vs code as an editor.
You can use any editor
of your choice.
So this is
your package.json file
which contains all the
information regarding projects.
We haven't installed
any dependencies yet.
That's why you're
not seeing any dependencies
or anything like that.
We're going to go
ahead and do that.
So for that I'm going to use
the command + V app installed.
So for installing any dependency
or module you use
npm install command
followed by the name
of that particular module,
which is Express.
Then you can use -
that's a flag
in that way whatever
dependencies or modules.
You're installing.
It will be written
to your packages on fire.
So I haven't told my Express
and you can see over here
in the dependencies section.
We have Express
of version 4.1 5.2 and oh,
so this is how you do things.
So now if you want
to share your project
with your friend or colleague,
so you don't need to send
the entire project
along with the dependencies.
So you just need to send
them the source code
and this package
for this one file
so that they can
download the dependencies
or install dependencies
and start working
with your project.
You can also install
multiple dependencies
or modules or at the same time.
What I mean to say is using
a single command install go
ahead with Mongoose
and then we need cars
we need body parts.
So Mongoose is
an object document mapper
for using mongodb
and body parts are used for
forcing the incoming Json data
and course is power
because we will be having
our server code running
at Port 3000.
Whereas our client side code
run on 4,200 4,200.
So that's why we need
to enable course
so that we don't get any error,
which is not allowed by default.
As I told earlier we have
our entry point file
called AB dot J's from
where our server side
execution is start.
So you start server side code
by making that verify locating
that verify the first place.
So we'll go ahead and do that.
app dot DL then
what we will do we will import
the modules or dependencies
that we need
to build our project
or our server side code.
So importing modules.
So first we need Express.
We need mongoose.
We need body parcel.
We need cars.
And we need part.
We haven't installed part
because it's one
of the code module.
So you don't need
to install it separately.
Now now for making
a express application
now using Express we need
to use express method
and assign it to some variable.
So we'll assign it to app.
Okay.
Now we need to define
a port number.
Now we need to bind our server
with this port so.
These are callback
you can go ahead
and I'm using Arrow function.
You can use function as well
the JavaScript function.
After a successful connection,
we need we want to say
that server started at home.
Concatenate the port number.
Now what we need to do is
we need to add our out so that
if we go to localhost 3000
then way to specify our server
what it needs to render
for that home page route.
Testing server because we're
gonna hit on create all
our doubts in a separate file
called route dot J's
or something like that
so that all our hours are
in particular file,
and it's not in
our app dot J's file.
For creating route you
need to use get method.
For example, like this is
how I am defining a route
and the route is
for my homepage.
That's why I'm using /
the next argument
is request response.
Stockton now, let's go
ahead and run our server.
For that you need
to execute note space
your entry point filename.
So our server has been started
go ahead and check that.
So we have a full bar.
So everything is
running fine now.
So remember I told you
that I want all my routes to be
in a particular folder.
So I'm going to create
a folder called route.
We can simply put it
in a file because it's
a simple application.
So we do that or we
can create a folder as well.
your outdoor chair
Now we want to use
this very particular folder.
So what I'm gonna do
is I'm gonna
Define this particular file
with a variable.
So first I'm going to use Rao.
four we need out slash.
Now we need to use it.
So.
So I want all my heart
which is proceeding with /
contact or / API or /
ABCD to be forwarded to that
for a particular file.
So for that,
for example, I want
it to be / API.
So all the routes with /
API slash ABC let's say
will be directed
to my route dot J's file
and where I have defined
what to do with that
particular route called.
For example, I'm having /
API slash at contact
for adding the contact.
So whenever a client
needs to add contact it
will make a power to this very
API slash API slash add contact
and I would be defining my Logic
for adding contact
to my database over there
in my route dot J's file beside
that very particular route.
That is / API slash add contact.
So that's how things work.
Right, so we need Find out
so that we can make call to it
and we can perform
our data operation.
So for now this is the reason
that we are making the roads.
So it's done now we need
to add our middleware
so that we can parse our data
and we can use korres.
So let's go ahead and do that.
So we need cars.
We need body powder as well.
So you want to parse
the Json data?
sad and we need
to do one more thing.
We want all our static files
to be in a particular folder.
So for that I'm going
to create a folder called.
Public and inside
that I'm gonna create
my file index dot HTML,
which will be rendered by
our front-end application.
so static files join Basically,
I'm defining the path here.
You can directly go
and specify the path
of this folder public folder
or can use underscore
underscore dir name
which will point
to your current directory
and you want to join
it with public.
So guys we are done here now.
Let's create some route.
So we need to bring Express.
You can use cost
or wear whatever you want.
But in general we use cost
because the value of Express
is not going to change.
I mean the value
of variable Express is not going
to change in our code.
Same with router we're
gonna use express routers.
I told you that we'll
be adding routes here.
So whatever call
I'm making two / API,
which is there.
Let me show you /
API slash contact.
It will be directed to this very
particular dot get method.
The quest is bouncing next.
Now this is
my / contacts folder.
So.
And I'm gonna use
this very route
for retrieving the contact list.
Okay.
So every time you make changes
to your server side code you
need to restart your server
or what you can do.
You can go ahead
and install node mode,
which will continuously
watch your source code files
for any changes Whenever there
is a change it will restart
your server on Stone.
So we don't do that.
Now you go ahead with node mon.
Come on.
Just start your server.
So getting an error,
so whenever you're creating
route, you need to export
your router as well.
So basically what it
does it goes
to your package dot Json file
and where it finds the node one
that our main entry point file
is uploaded tears
and finally start the server
using this very particular file.
So if you see over
here the same command
that we use to
execute for starting
a server node app dot JS
has been used by note mode.
Now if I go ahead with /
API slash contacts See
we can have the data.
So now what we're gonna do
you're gonna connect
to our database
and then here we want
to write our Logic
for retrieving data
from a database and that's
how we will send data to
our client-side application,
which will make a call
to this very particular API
and it ripped
the list of contact.
We need few methods
for example for reading data.
We need a method
to add data at contact.
For that we'll be
using post method.
Then we need a method
for deleting contact.
pretty similar the syntax
or the signature
of these method So
how I'm going to delete
a particular contact is
by referring to that very
particular contact using its ID.
So today know what we need.
We need to create
schema for our contact
that will be inserted
into our database and we need to
make connection to our database.
So we're going to make
a folder called models.
inside that we need
a file contacts got tears
So this very particular file
will be having all our schema
or contact schema.
So that is the reason
I am making this file.
So we need to bring
in Mongoose for
since we are going to make
schema for a mongodb.
So in to bring mom goes through
which will be talking to mongodb
or through that will be using
our mongodb database.
contact schema Mongoose schema
So this is our function
and I'm going to pass the schema
that I'm going to use
for my contact.
So I'm going to go ahead
with first name and last name.
Drive strength but crew
then we need last name.
Let's make it required also.
You can make it false as well.
But since it's a demo,
so I'm going to go
ahead with true.
Last field will be
for contact number
or phone number.
So let's keep it string only.
Now we need to export
this very schema.
So it's done.
Now what we need is we need
to create connection
or way to connect
to our mango TV.
So we're going to go
ahead and do that.
So we have
Mongoose already here.
So now for connection
will be using Mongoose
dot connect function.
So let's go ahead and do that.
connect to Mongo DB Mongoose
dot connect then we need
to pass the URL along
with port number through which
we gonna connect to our mongodb.
So it is mongo DB.
Local Host two seven
zero one seven,
so we're going to go ahead
with our default port.
Now on successful connection
we need to display
a message that yeah,
the connection has
been established successfully.
on connection we
need to say mongoose.
connection dot on connected
then we want to say that.
Connected to the database.
Mongo DB at yeah,
that's it now in case of error.
Suppose we have an error
while doing the connection
or while establishing
the connection.
if you are we need to know
that what is the error
that we are having?
Prints a message as well.
is connection Yeah,
we don't need.
So it's done.
I think now we can check out
if we have made the successful
connection or not yet.
So we have been connected
to our database at Port to 7017.
Now, what we need
to do is create apis
for retrieving contacts
are adding contact
or database or deleting
contact from our database.
So you're going to do that.
So first we need to bring
the schema the contact schema
that we have created
in our contacts dot JS file.
Now for retrieving
contact we're going to use
find method or function.
Then we're going
to pass a callback.
So this is one other way
to define a callback
or function the JavaScript way.
Yes torches on contact.
So after achieving
the contact all the contact
or the contact list will be
saved in our contacts variable
which we are sending
or responding back
to our client in Json format.
No, we need our post.
So first what we need,
we need to create a new contact
which will be adding
to our database.
So I'm going to make
an object in contact.
Let's go to new contact.
It will be of type contact.
name I won my first name to be
from my request body.
dog first name Then last name?
So it will be lost.
Then we need phone number.
That's it guys.
Now we want to insert this very
new contact into our database.
So for that we're going
to use new contact dot safe
and we need a call back.
Let's go ahead
with the arrow function.
if error Way to send
all we want to send.
Let's search.
fail to add contact
else contact added
successful That's it guys.
Now for delete what I'm trying
to show you is that
if you are inserting any data
into your database,
what are mongodb does it
creates an ID for each document
or each contact?
So using that for
a particular ID,
we gonna refer
to that particular contract
which we want to delete and
will perform art-lete operation.
So that's how we
want to do things.
So from client side
will be receiving that very
particular request for deleting
a particular contact then
using that very ID,
we're gonna issue
or delete command
so Contact dot the move.
Now as I said,
we need to retrieve the ID.
This ID and then a call back.
pepper hose That's it guys.
So our delete method
has been added
to our layout file successfully.
So we have 3 methods now
later on we will also
add our update method.
So it's done.
We have no error
or no issues now for checking
our apis we gonna use Postman
which is a Chrome extension,
which you can add
to your web browser
Chrome browser and go ahead
and check your apis.
You want to go
with post nine crew?
Here you will get an option
for adding it to your browser
or to your Chrome.
Now first of all,
we need to insert some data
so that we can fetch it.
So, you know
what with our post method
then we want our header
as content type to be Json Then
we need to send draw later.
So.
first name Bruce last name
whale then phone number
Okay, I'm gonna go
ahead with string.
But yeah, let's add
some random number here.
Now.
We have to enter the URL
or URL of the API
that you want to make the call
to so that it can be directed
to that particular post method.
So we're going to go ahead
with Local Host 3000 /
API slash contact
so contact added successfully.
Let's add some
more contact Peter.
Now let us retrieve the contacts
that we have already added
into our database.
For that we'll be using
API slash contact.
So we have these two contact.
So that's what I
was talking about.
You can see over here.
We haven't added any ID field
while inserting our contact.
So this is automatically
generated by mongodb.
And this is what
we are referring
to in our delete method.
So what we're going to do is
copy this very particular ID.
No, we're gonna issue
a delete command.
So now our method
will fetch this very
particular ID from our URL
and it will refer
to that very particular document
for that very particular
contact and deleted
so the contact has been deleted.
Now let's check that.
We are having issues here
so we can see
that our Peter Parker
has been deleted.
So this is how you
can check your apis.
Now what we're going to do.
We're going to make
our client application
and where we will be making call
to our apis for performing
various kind of data operations
that we have to find
in our server file
or server side code.
So that's it guys are
server-side code is complete.
Now, we're gonna go ahead
with a client-side application
using angular 2 and
we'll be creating
view templates and all to show
a contact list will add buttons
for delete for adding contact
and all that.
Let's go ahead and do that.
So for that I will
be using angular CLI
or command line interface
that will be using to build
our entire client side project.
So go ahead and open
a new instance of node.
Js e MD then go
to the project directory.
So now we need to install
angular CLI for
that you'll be using
again npm install add
the rate angular.
/ CLA
So basically angular CLI
will help you to provide
all the boilerplate
or all the files
which is necessary to run your
client side angular application.
It will also provide you
the core node modules
or core modules,
which we are going to use
in our angular app.
Yeah, so npm
install has completed
and our angular CLI
has been stalled.
Now.
We're gonna go ahead
with creating a angular project.
So for that you will use NG new
and the folder name
where your angular app will
be deciding so ingenue client.
I'm gonna name this kind because
it's a client-side application.
So as I said,
it will provide
your boiler plates
or all the files.
So these are the files
that will be created using
your ingenue command.
So you'll have a basic component
called as AB dot component
and you will have a basic model.
I've got module
where you will be specifying
all the modules
which you're going to use
across the application as well
as your components and services.
Then we'll have index dot HTML
which is the file
that will be rendered
in the first place
to your web browser.
So which we have specified
in our public folder then
we have packages own.
There are other files as well.
If you see over here,
we have protractor
for testing and for linking
we have t es Lindo Json
and although configuration
for our angular CLI
is in angular -
CLI dot Json so
couple others are there so
which is not required for now,
like don't need
to know all of that.
So our project has been
created successfully now,
let's go inside that very
particular folder.
No what we need we need
to create components.
Okay, let me just give
you a quick walkthrough.
So inside our client folder,
we have Source then app.
These are component
our basic component
called as AB dot component.
So if you look
at index dot HTML file,
which I told you it's gonna
render in the first place.
So here in body.
We have app - truth.
So this is a selector or tag
which will load
our app dot component
for their so basically we
will have AB dot component
or app component class to be
rendered in the first place.
So here you can see
we have AB -
route as selector.
So for building an angular
2 application we use typescript
as language of which is based
on object-oriented features.
So here you can see
that it's a typescript class
called as app component.
Now, we have something
called as decorator
at the red component decorator
which tells angular
that this very class
is Component and we
have template URL over here
which specify the template
for our component
which is over here.
And then we have
CSS for styling.
So let's run this very
particular application.
So npm start is the command
or you can go ahead
with NG serve.
now you go ahead
and What 200 you are having
that for a particular
thing as app works?
So basically first our index
dot HTML file is rendered
which is calling are approved
or app component.
So if you check out
the app dot component template
to in this template,
we have what we
call as interpolation
or one-way data binding
so we are winding this value
as app works so left.
Let's make it welcome
to El Dorado.
It has been changed.
So like for in case
of server-side applications
while we were creating
the express app,
we had to run server every time
whenever there is a change
and for that we use
node more similarly
in our angular side application.
There's a difference is
that we don't need
to restart our application
or it continuously
watches for any changes
that we make in our source code
and it re-enters or restart
the whole application each time
so you can go ahead
and check that.
So if you see over here,
then we had a change over here.
So it recompile it
and start the whole application.
All these TS files are converted
to JavaScript files or
transferring to JavaScript file.
And then our render now
we need a basic component
called as a contact
for listing our contact
as well as there will be
a form of over there
which will have three for adding
contact then we'll have button
for deleting contact.
So Let's go ahead
and do all of these.
So first of all,
we need to create a component.
So I'm going to stop it for now.
We'll be using NG G or NG
generate for generating
component or services.
Name of our component will be
contact we need a service
to so basically it's considered
to be a good practice
to separate your business logic
or your data retrieving
or data operation logic
in a separate file,
which we call as a service.
Then what we do is
we inject those Services
into a component over
where it is necessary.
So as to use those services No,
you can see a warning here
that service is generated
but not provided.
So basically whenever
you have to use or in
whichever component,
you have to use the service
you have to provide it in your
at the rate component accurate.
So there will be a field
here called as providers
and we will add the service
that we will be dating now.
So we have contact
or service dot DS
or contact service class
where we'll be writing
our business logic
or our data retrieving
or write operation logic.
Then we'll have
contacts component
where we'll be creating
our template and all
the logic behind up.
So we'll start
with creating our service
so that we can retrieve
the data first then
we'll start with creating
these contacts dot compound.
No, one more thing we
need is we need a schema
for our contact.
So let us go ahead and make
a file called as contact
or chairs or Ts
that will transfer into jai's
so you do that contact dot DS?
now we'll have a class called.
contact which will
have four fields.
I-80 we have tried string.
Then we need first name.
print last name String
and phone optional field now.
We need to import our HTTP model
for all getting all HTTP methods
for retrieving data
or for sending data or in
other words contacts.
so import http We
need headers as well.
from angular http then we
need our contact class
to be imported here
so that we can use
the schema boat.
contact from Then
we need reactive
just operators basically
will be using nap operator.
So it's done now.
We need to use our HTTP
module so for that.
Done.
Now, let's create the methods
for retrieving contacts.
Then we will add contacts
and we will delete contacts
so we will have
grieving contact.
So which is get contacts.
And I want to return.
All the contact
call the contacts
or cut the contact list,
which I will be getting through
while I'm calling to my API.
Then the API URL you
can see over here.
This is the signature or syntax
of your get method or signature.
You can call
like we will have first argument
as a URL string so we'll have
as HTTP / localhost.
/ 3,000 total number
then we'll have a pi
then we have contacts then
you want to map it to?
Json format So we have our
get contact method radio here.
Now we need add contact method.
Add contact.
Which will be taking
new contact as an argument.
We are now up
and content type in our header,
which is So now
I want to return.
the response and I want to make
a call to my add contact API,
which is / API slash contact.
I'm going to copy
this very same thing.
and then I'm going
to pass the new contact.
Then the headers.
Will map it response as Json.
now either delete
method Tim I told you
that for deleting a contact will
be using ID so as to our effort
that's very particular contact
in our database,
so we need ideas are parameter.
Then I'm going to append
or concatenate the ID.
So we have
our service ready now,
we will be using
all of this method
or injecting these Services
into our component
and then we want to use all
of his method to retrieve data
and finally do something on it.
For example, if you want
to show the contact list,
so we'll do that then
for adding contact will use
this add contact method.
So that's how
we're doing things.
So let's go ahead
and create our component.
So we'll go to our contacts
dot component TS.
Private contact service.
Yeah, but we need
to import it first.
So we have contact service.
from dot slash contact Yeah,
so now we need
our contact class for schema.
That's it.
Now.
We're going to initialize
our contact service
or we want an instance
of that for you
contact service class
so that we can use the method
that we have defined there.
So for that what we will do
will We'll pass the argument
as private contact service
of type contact service class.
So this very process is called
dependency injection or that's
how we inject our services
into our compound
and second thing is you need
to provide your service.
So as to use it.
providers now let us go ahead
and retrieve data.
So we'll be quoting
are retrieving data logic
inside NG on init method
which will be initiated.
Once your component is being
loaded into your browser.
So every time you
load your component,
it will automatically call
this very particular method
to retrieve all the data.
So we'll be having
this dot contact service
and we want to use
get contact method
so you can see over here
that we have 3 methods
add contact list contact
and get contacts.
We're going to use get contacts
and since it will be turning
an observable in to subscribe
that we want
our contacts to be saved
as restore contact now
it's showing an error
because I haven't made
any variable for contact.
So let's go ahead and do that.
So it will be
one tax type contact
and it will be an error.
Yeah, so we have done that.
Let's get some more variable
that will be needing it wrong.
We need one then
we need first name.
texting Then last name?
then phone number
that's it guys.
Remember, I told you
that the bootstrap component is
AB got component.
So we need to specify
in our app dot component
that this particular component
should be loaded.
So we'll go to template
and we're going
to use app - contacts.
Because if you go
and look at the selector,
it's app - contact
so contacts works.
So guys, we have retrieved
the data here.
Now, let's get our template
so that we can display
this very particular data.
So I'm going to go ahead
with my contacts dot
component dot HTML.
and so before doing
this we need to refer
to our bootstrap style sheet
so that we can incorporate it
into our template.
So we'll go ahead
with boots watch.
then these are
the size that's available
which you can use.
So I'll go ahead
with something super hero.
So you can go ahead
and click the download
and copy this very thing and put
it into your HTML
or index dot HTML file.
So we'll go there.
Will copy this very thing.
And they sit here
and then we need
to write stylesheet.
And will you move
this very particular field
and we'll copy it
here in our HAF
so that it can refer to it.
So it's done.
Now we can go to our component
and here what we want is we want
to iterate over our list.
So for that we will be using
something called as n G4
which is a structural directive.
So the strick and G.
electric contact contacts
so we'll be iterating over
contacts using contact variable.
So each contact
in our contacts array
will be retrieved
in this very particular variable
and that variable we
will be displaying as a list
so Let's go ahead and do that.
So we need our class.
md3 again until closing div tag.
So now again,
we will be using
that very interpolation
or one big data binding.
To display our contact DOT.
First name then we need similar
columns for our last name
and phone number So it's done.
So let's check out our yeah,
so we can see over here
that our list
is being generated.
We'll put some more style
so that it will look
good in the end.
So what we'll do right now,
it's will add
a delete button using
that we can delete any contact.
So we'll go ahead and do that.
So for that I'll be copying
this very thing again,
and I need my foot type.
Be a button.
Even click which we'll call
a method call as deal contact.
- we haven't created yet,
but we'll do it soon.
Now what we want is we
will be referring to that very
particular contact using ID
as I told you earlier,
so Eddie so the value should be
the we'll be using a class.
Call us.
button Danger So it's done
so we have this very
particular thing over here.
Now, what we need is
will add few breaks
so that we are iterating
over the list.
So yeah, we'll do it
later on this stylings.
So now we'll add
our delete method over here
which will be using
and we also need
something called as adding
contacts add method
or contact method.
So let's go ahead
with our delete first.
We need delete contact.
Let's assign ID as
any type of type any
now so basically we'll be
calling our service again.
So this dot yes contact service
dot delete contact and then
we'll passing the ID and
since it returns an observable.
We need to subscribe
that very particular observable.
So we'll go ahead and do that.
Now what we need to do is even
if we have polluted the data
or the contact from our back
inside of my database.
I need to remove it
from my contact at as well.
This very particular contact
where all the contact
has been safe.
So we'll go ahead and do that.
if the delete operation
was successful then straight
over apps dot length then okay,
so I'm having an error
because I haven't defined
the variable contact
so contact skull to
this dot contacts So it's done.
Now we need to
increment our iterator.
so if contact I dot underscore
ID is equal to the idea
that has been provided
to my method.
Then I want to remove it.
splice iPhone so
our delete contact is done.
No, we need to add our new
method for adding contact.
So delete functionality is done.
So let's add our add contact
method so that we can add more
contact and delete them and see
if everything's working
fine or not.
So what that I'll be
using that contact.
and This will be
creating new contact.
Here I need first name
to beat the start.
First name then I need last name
to bring this dot last name
and I need phone to be.
this dot pool Now I need to
provide this particular contact
that I have created
to my service or in other words.
I need to call the method
that is defined in our service.
So for that will be going ahead
with a contact service.
Doc add contact
and will you pausing
this particular variable?
We're going to subscribe it.
Just start contact dot push.
So we are pushing
the new contact into our array.
We are having here, okay.
So it's not able to find
any not finding the contact
and I don't know why we
are having this error.
Okay, let's check it out.
So yeah.
So it's done.
So this is our add
contact method now.
We need to call it
from our template.
So we're going to
modify our template
so that we can add a form
on top of our class
and which will have three Fields
14 name one for last name
and then 414 phone
and then I submit mutton
for adding the contact finally.
So far form we need to use
form tag or submit event.
And then we'll add add contact.
So this is the method
that we're going to call
when the form
has been submitted.
Close the tag form tag now.
We need three field guys.
So the first one will be
of power first name.
So let's go ahead and do that.
So for that will be using
the class equal to the classical
to form group now we need
to close this particular tag,
and I want my label
as first name Yeah,
now I need input type
equal to text.
Then we gonna use something
called as NG model
for two-way data binding.
So whatever changes
that we're going to make
there should be reflected
in our list as well.
Where will be showing
the contact list.
So we're gonna use that.
and G model goes to name
equals 2 first name class
equal to from So it's done
we have our first three four.
The first name similarly.
We need it for our last name
and then for our phone number,
so we'll treat it as last name
and then we need to write
it as last name here.
Finally we need
for phone number.
So phone number so you
want to put this value
to our phone variable?
Yeah, everything is done here.
Now we can add
something goal is required.
So if you are not putting
that very or feeling
that very feel then it
will pop up a message
or they will be a message
popped up stating
that you need to fill
that very particular form
or particular field
so we can use
this require here now.
We need one button also
for our submit button
for submitting our form Now
on top of that we need
to add some heading stating
that this is the section
for our add contacts.
Oh It's done.
Now.
We have everything here.
All we need is a horizontal line
or too low Yeah,
so basically these are
at contact form using
which we can add our contact
and these are delete button
everything is there let's try
my name you're having a tear
but yeah, it's there
and the second thing is that
if you are seeing this
that every time we
are adding a data we need
to reload it is happening
because our this very method
for retrieving the contacts.
So basically whenever you
are retrieving the contact
and displaying it
at that particular time,
like your browser never allows
you to block your UI,
so that is
what is happening right now.
So what we can do to fix it
is we can copy this very
particular thing over here
and we're going to put it
inside our a contact.
To be called just after we
have pushed the contact.
So now if we go ahead
and Do that then.
Yeah, you can see where okay,
we should add some BR tag
so that it looks good
or present table over here.
So we're going to do that here.
So this is so far now.
Let's check the
our delete button.
It's working as well.
So our whole
application is working.
Let me give you
a quick walkthrough
or a quick recap
so that we can do fresh
all the things that we did
for creating this very
particular mean application.
So what we did we start
with our server side coding
where we had our AB dot J's
or entry point file
where we imported all
the models that we
required for application.
Then we use middleware
for applying cores
and body parser
to parse the Json data
and then we put all our routes
in a separate file call
as rho dot J's,
which is over here.
Now there we created routes
for each grid operation
and then we created schema
for database for contact.
Like for example,
first name will be
like this last name will be this
and phone this No,
we have our client side
or client folder.
There we started
with creating our component.
So these are component
and then we had a service
called as contact service
where we have mentioned all
the data operation logic
and we have injected this way
service in pure component
that we need to buy use
or we want to use
so that's it guys.
This was the whole
angular application
and express and Mongo DB.
So we have created
our main app successfully.
I hope you find this whole
session to be informative.
Hey everyone on behalf
of Eddie Rica.
I'm going to be bringing you a
full stack application tutorial
now many of you may be familiar
with What's called
the mean stack
which is mongo DB angularjs
Express and node.js
we're going to be doing
a couple twists
on this very popular stack
and introducing graphql,
which is a technology
from A book
that makes it easy
to query fields
and send data between the server
and client and we're also
going to be replacing
angular with react
and this is called
the mern stack.
So what exactly
is the mern stack?
Well, it's the same thing as
the mean stack but replacing
angular with react.
So here is what it looks
like we're going to be using
react js on the front end
for the web application
and the middle is going
to sit our server
which is going to take requests
from their web app.
And this is going to be running
node.js with Express.
And then we're also
going to communicate
between the web app
and the server using graphql
and then in the very
back is our database.
We're going to store all
the data and we're going
to be using mongodb for this
you guys may be wondering
why might you want
to use react curious
over something like angular
or just JavaScript itself.
Well, this is a very
popular framework right now.
It is currently
what Facebook uses
on their very own website
and it's very nice
to build applications
with it has somewhat
of a steeper learning curve.
I would say in some
of the other Frameworks,
but once you learn it,
you can be very productive
and build very
high quality production
ready web applications,
which is very cool and then
graph ql is going to help us.
Optimized and sent
really good queries.
That's another thing
that is used by Facebook
as a Facebook technology
and then mongodb is just really
solid database for no sequel.
So that means it's very easy to
store different types of data.
And as our database changes
in our application changes,
it's very easy
to change our schema
or what our data looks
like in the database
and then Express is very nice
to make a server with very fast.
So that's our choice here.
So there's really
four main operations
when building an
application like this
and they're known as crud.
So what crud stands
for is create read update
and delete so we're going
to be using mongodb and
Mongoose Mongoose is a library
to basically do operations
on the mongodb database
and node.js and to create
we're going to basically add
something to our database.
We're going to be using the save
command then there's reading
which is viewing objects
or viewing data
from our database
which is fine command
and then update
which is changing some values in
the database using update again,
and then finally delete
removing data from our database
in this is going to be remove
so that application
that we're going to be building
to try the stack out.
Ameren stack is
a to-do list app.
So without further Ado,
let's go ahead
and get started.
So there are a few
pure prerequisites
for this tutorial first off.
Make sure you have
a editor of some sort.
I'm going to be using
visual studio code
where I can edit files
and then you want to make sure
you have a terminal I'm going
to be using the terminal built
into Visual Studio code
and we're just going to be doing
some things with that.
So make sure you have both
of those and then we're going
to be using mongodb.
So you're going
to want to install
that and the recommended way
to install mangu.
B I'm using a Mac,
I would recommend something
called Homebrew Homebrew
is a package manager
makes it really fast really
nice to install dependencies.
If you just copy this URL
right here you can paste
that into terminal and
run it Arie have it
so I'm not gonna do
that right now,
but then you have Homebrew and
then with Homebrew I
can Brew install Mongo DB
and that will just install
Mongo DB on my computer
and then to verify
that you have mongodb.
You can just type mongo
and you can see here's
the version of my Mongo shell
and then you can see
whether you connect it to it.
So the other thing
is make sure you do start
your Mongo database.
So I already had mine started.
So I was able to connect
to this these Brew
can just do Brew services
and then instead of restart.
We're going to start to brew
services start Mongo DB
if you installed this
with home brew,
the other thing we're going
to need is node.js.
So again,
once you have Homebrew you
can do Brew install node,
so you See,
it's really nice to just install
things with home-brewed makes
it super easy.
And if you type no -
be in terminal you
should see a value
and here's the version I'm
currently on node 9.11.
And then with that
you should get em p.m.
Which is node package manager.
I'm using 5.8.
So you just want to verify both
of those guns stalled now,
if you're not running on a Mac,
you can't use Homebrew.
I just recommend going
to the official websites
for mongodb and node.js
and downloading them that way.
All right.
So we're ready to get started.
We're going to be starting
from a blank directory.
So I have just an empty folder
right here called server.
I do an LS.
There's nothing in
there right now
and I'm going to start off
the project with npm in it,
and I'm just going to do -
why this accepts
all the defaults
and just creates
a package.json file.
So we have one file now
in our project and this
is going to hold basically
where our configuration stuff
for the project.
So what dependencies we need
mainly So we're going to start
off by adding a dependency
called graphql yoga.
This is a really
nice graphql server
that makes it super easy.
We're going to install it.
So we're going to copy this.
I'm just going to say
npm install graphql.
Yo and you want to make
sure and run this command
inside these server directory
and it's going to go ahead
and install this for us now
here is a little quick start
that we're going to use
and we're going
to copy the quick start
and paste it into a file.
I'm going to create
a new file called index dot JS
and paste it in here.
So let's go through exactly.
What all this stuff is doing
first line is importing
the package we're going
to use the require syntax
because we're just
going to use node.
So here we
are importing graphql.
Yoga, which is
that Library here is
what's known as the schema.
So we're using graphql.
So with graphql you
have to set up a schema
and our schema right now
has this thing called
a query type Inside
of query type we have hello
and hello takes one argument
the kind of looks
like a function.
This argument is named name
is the name of the argument
and then string is
the data type for it.
And then this is the return type
which is a string as
well the exclamation mark
at the end means
this is a string
that is mandatory.
You have to pass it in
and then here are what known
as the resolvers for this.
So the resolvers
you'll notice the kind
of the shape of it matches.
So query than hello
query then hello
and here there's
argument called name
so you can see
we're D structuring
this second parameter, which
is called just the arguments
and we're going the name
and here we're returning
a string and we're using
a string template here.
So we're saying hello
and if they give us a name we
say hello that person's name
or we do just hello world.
If they didn't give us
a name right and then here
we're specifying the type deaths
in the river solvers
and we're going to do
server dot start to
At the server now,
we're going to get more
into what the type deaths
in these resolvers are
but want to go ahead
and just run this
so you can see what happens.
So I'm going to say node
and then index dot JS
to start it up.
And now we have a graph
ql server running
on Locos 4000 and we're
not using expressed directly.
But under the hood
graphql yoga uses Express.
So, all right, let's go
to localhost 4000 and see
what's going on there.
So we'll get this thing
that says loading
graphql playground.
I've been here before so I
have some junk just going
to clear that off.
And so if I click on schema
I can see on the right.
What thing is I can run
or what things I can do here.
This is a graph ql playground
and what this is is you
can run your queries
& queries are read.
So we talked
about crud operations
before queries are
Or reading things or finding
or viewing the data you
have stored so last we want
to query this hello thing.
So, how would we do that?
Well, we would do
curly braces like that.
And then we say hello and I
can either pass an argument
or I don't have
to pass an argument
so we can prettify this.
So if I don't pass an argument
and I hit run I get data
hello and then hello world.
So by default the argument
would be null or undefined
king passed in and then we saw
that that would go to world,
but here I can
specify an argument
if I want to and I
could say been so hello Ben.
Let me run that and we
can see it changes.
So you can notice this argument
we can change and we get
different results out of it.
I can just do a random string
if I want and I get that back.
So with graphql we
can pass different things
in and get different results
that kind of
like a function call
and we're just
getting a string back.
And you'll notice
the shape is very similar
to the shape over here,
which is nice.
That's how graphql works.
So we have this outer data
and then after that matches
so hello is the name
of the query so
that's why those two match up
and then here's the string
that that equals and
we're going to
get more complicated
as we add to dues and whatnot.
All right.
So this is the basics of
how the graph ql is working.
There's those other things
which are called mutations.
So there's two main things
in graphql queries
and mutations queries are
for looking at the data,
which I already said and that's
what we ran right here.
We could prefix this
with the word query
to be more explicit.
Those are doing the same things.
The other thing
is called mutations.
These are when we add
data we update data
or we delete data we're going
to be running mutations
and we'll get into
those very shortly.
When we add
our Mongo DB connection.
So our service
good we're going to move on
to connecting to mongodb
and To do this
we're going to be using
something called Mongoose.
So first off we need
to install this.
So I'm going to come over
here to terminal stop.
My server do npm
install Mongoose.
So Mongoose is going
to allow us to connect
to our mongodb database
and then run queries create data
or whatnot and we're just going
to follow the getting started.
So here is how we
make a connection.
So I'm just going to add
this at the very top
and it changes the cost.
So I am first grabbing
this from the package
or importing it.
So here I have
the Mongoose object
and I'm first connecting
to the database.
So I'm at local host
and I'm going to
connect to the test
and I'm just going
to call this test 5
because I don't know
if I already have
a test database or not.
I'd like to connect
to a fresh database.
So this is the name
of your database
at the very end here
and then after that
we want to do is first
connect to the database
and then start the server
so it doesn't immediately
connect when we run this.
It actually runs
in the background
and we can use a callback
so DB dot once and wait for it
to open or it get connected now,
we don't they to get
this DB variable.
They did mongoose.
Connection and then inside
of that they're going
to pass the server dot start.
So once we connect
to the Mongo DB database we
then start our graphql server.
Alright.
So next thing we want
to do is create a schema,
which is then going to be
our basically our database model
or what we're going
to store in the database.
So we're going to grab
this Mongoose model
and we're going to change
it up a little bit.
So they are doing a kitten
for us we are going
to do a to do so
the model is going to be to do
and we're going
to have a few things.
So the first is text
and here we passed we put
on a pass the data type.
So the text is going to be
a string so we say string
and then we want
to have a complete
which is going to be
not a string but a Boolean Okay,
so we have two Fields text and
complete on this to do object
so we can save this
in our database
if we want to and we can pass
to fields in the text.
And whether the to do
is complete or not.
So I'm first going to add
a type called mutation
and I'm going
to say create to do
and I'm going to
have two arguments.
I want to get passed
in the text and that's
actually it by default.
I want to say complete is false
because when you first created
to do it is not complete.
So text here is going to be
a string and I'm going to say
you have to pass in a parameter
and to force them
to pass an argument.
You do the the bang sign there.
And then what we're going
to do is return a to do instead
of just like a string
or a Boolean we're going to
return a type called to do so,
I can create this type to do
and it's going to have text
which is a Which
is required and complete
which is a Boolean
which are required.
So T required Fields text
and complete and inner mutation.
We're going to create a to-do
and assuming you gave us
a good text will pass you
back a to do the other field.
This is going to have
and this is a field
at Mongo ads by default
which is an ID and there's
a special type for this
and graphql called ID.
So that's required as well.
So we don't have to pass
the ID here it's going
to be automatically
generated for us.
So now we can try
creating this to do so,
I'm going to say mutation
and create to do
and we don't care
about the first argument
to this graph ql function.
So these are called
resolver functions right here
the first thing layer Pastor
the parent which you
don't have to worry
about for this the second
argument is the argument.
So for this we expect
an argument called text,
so I'm going to say 10.
Steer and from this
what we're going to do
and I'm going to make
this an async function.
We're going to first create
a to do some this a const
to do is equal to Nu to do
and here I pass in the text
and complete so pass in text
and complete and by default
I'm going to say complete
is false that the
to do is not complete
and then we're going
to return the to do
but before we return it,
we have to save it
to the database with DOT save
and Dot save returns a promise.
So we want to wait
that and we'll wait this
to do from being saved
to the database.
So we're creating an instance
of it saving it to the database
and then returning it
so I can start my server
and we can see
if this code works
and if it does
what we should do is be able to
create a to do in our database.
So we're going to say
node index such a s alright
so it started up so it looks
like it was able to connect
to the Mongo DB instance.
Okay and bring
the playground over.
Here and I'm going
to say mutation.
So for queries,
we could say
the word query there
or leave it off for mutations.
We have to say
the word mutation here
and then I'm going to say create
and we can see it
in our schema over here
whether it's there or not
and it's not that usually
just means you have to refresh
whenever we restart the server.
So now under mutations we
can see the create to do
and this is kind of
like our own documentation
that was automatically
generated for us.
So that's really cool
and nice feature of graphql.
So create to do we now have
text so create to do text
and I'm going
to say my first item
now you can see it's
kind of mad at us.
But this is the exact same thing
that we did with the hello.
Right?
Well, it expects a little bit
different return type to do
which is an object.
So we have to actually
specify which fields
that we want back.
So there's text there's ID
and there's complete right?
So if I specify all
Here I'm going to get
all three Fields back.
So when I run this we can see.
Hey look our item was created.
We can see an ID and it's false.
I can run this again.
You'll notice we should get
a different ID there.
Looks like the bees
incrementing at the end
and here you'll see what
the power of graphql is.
If I only want
a single field back,
so maybe I only care
about the ID I only have
to select the ID here
and I'll only get
the ID back here.
So I only get one field back
or maybe I only care
about the name
or not the name text
so you don't get
extra Fields Back,
which is really nice grab kill.
You just get exactly
the data that you want.
But all right cool.
We just add a bunch
of to do items to our database.
Let's go ahead and fetch them
or read them or query them.
So to do this,
we're going to add a query
we first update the schema
and then you add
the implementation of
how the data is getting fish.
So here I want to get all
the to do so I'm going
to call it to do.
And it just returns
an array of to dues now
to return an array you
do brackets like that.
So to do so,
this means we return
an array of to do
of the type to do so then
in my query over here.
I'm going to say to deuce
and I don't really care
about any arguments
because I'm just
returning all of them.
I'm just going to say
to do dot find and this
will find all the sidhu's
and it'll return them
and then we can see them all.
So that's all we needed to do.
So, I'm going to Ctrl C
restart the server
and now we can head back over
to our application
and refresh we should
now have a new query
and we can see right
here called to deuce
and we should be able to see
all the different to dues
that we created earlier.
So miss a to dues and I don't
need to pass it any arguments,
but I do need to
select which attributes
that I want to get back.
So ID text and then complete.
So if I run this I can see
all the different items
that we created earlier.
I give them all
the same name know.
So that's why it looks
like this if we want
to we could create
a new one so mutation.
Create to do and I could give
it a different text
like item to for example,
and maybe I only want
to see the ID back.
And now if I clearly that again,
you can see at the very bottom
are new item item to so perfect.
And again, we don't have
to query all the fields.
For example, I could just do ID
and text and then complete
would be removed from all
these items just like that.
Alright, so that's perfect.
We now have two
of the crud operations done
creating to-do items
reading to-do items
with this query right here.
The next thing we want
to do is updating an item.
So the way we're going to do
that is we're going
to create a new mutation
called update to do.
This will have two arguments
the ID and this is
what we'll use to know
what to do to update
and then also complete
and this is going
to be a Boolean we
could also specify the text
but we don't really need
to update the text at least
in this application.
Just whether this to do
has been completed or not.
And then we're going
to return a Boolean
and this is going
to be true or false
whether we were able to update
the to do so now we're going
to add the implementation
for this update to do and a sink
and this is going to have
those two arguments ID
and complete and here we're
going to do to do dot find by ID
and update and here
we're going to specify the ID
of the first argument
and the second we
satisfy what changed.
So the thing
that changed is complete
and we're going to pass
that in and this is
the new value for what complete.
In this returns back,
I believe I guess
a document query is looks
like what it comes back.
I was thinking this
might be a promise as
well that we might have
to await it will see
if this works.
I think it should
and then lastly
if that works.
We just return true.
So if this doesn't work,
we'll get an error or something
and that will be thrown back
and that's fine.
So let's go back
over and see this
in action and I make sure
to restart the server.
So anytime throughout this
if you don't see something
we're looking right
when you cut over here.
Just remember to refresh
and also restart your server.
So we see in our mutations
down update to do you can see
the two arguments right here
and we expect bullying back.
So why don't we change
this one right here?
So I'm going to copy that ID.
I'm going to say mutation
and I'm going to say
update to Du by D
is going to be that string
that I copied
and It's going to be true
and we can run
that and we get true
back meaning it worked
and now I can query
all the to dues
so we can go back.
And I can grab it
and we need to grab complete and
this first value is now true.
So perfect so update works.
So now we can update any item.
NR database based on the idea
that we are given the last thing
we want to do is delete it.
So pretty much the same way we
did update to do we're going
to do remove to do
and here we don't need to know
whether it needs
to be complete or not.
So we can just remove that part
and have only one argument
which ID that we need to remove
and then a Boolean true or false
whether the operation
was successful so we can copy
this I'm going to do remove
to do we get rid
of that argument
and then here we're going
to say find by ID.
But now it's going
to be removed.
And now we don't need
this second argument.
We just need to pass in the ID.
So I'm going to restart
the server and we're going
to try this one last time
the last operation
that we need and let's say
I want to delete
this item right here.
That is so we see a remove
to do they're perfect.
And the other thing is
you can create tabs.
So I'm going to go ahead
and pop tab open here.
That way we can do this
in a separate Tab
and not have to redo this.
So remove to do ID pass that ID
in we get true,
which means it should be gone.
So now when I re run
this query here,
we should not see
this first one right there
and sure enough it is gone.
So delete also works.
So that's perfect.
We have all
our credit operations
that we want to do
and we're done with
our server now really
what we want to do
is create a client
or a web app using react
that allows us to do these
so we can view our
to Deuce we can click on it
to cross it all out we can add
to dues or we can just
straight-up delete them
if we're no longer need.
So let's get into doing that.
So I'm going to keep
this server running
and open up a new tab.
And what I'm going
to do is I'm going to go
to a different folder
and I want to create a folder
for my react application.
Now we're going to be
using something called
create react app.
So this is a CLI tool and you
can download it using npm.
So mpm install -
gee create react app.
If you go ahead and run that
they'll download it for you.
And then what you can do is
do create react app
and then the name that you want,
so I'm going to call
mine client now.
I've already run this
and when you run this
you're going to get a folder
and I can just do LS
right here a folder
called client or whatever.
You named it and it's going
to download this this operation
also takes a little bit of time
because it's going
to download all
the dependencies and whatnot.
This is a boilerplate for
creating a react applications
that If you set up really nicely
so I have it open right here
and we can check out
what's going on here.
We can look at package.json.
We have dependencies react
and we can see we have
some couple scripts
that we're going to be using so
just right off the bat
if we wanted to I
could CD into my folder
and Run npm start and what
that will do is it will run
the scripts start command
which runs this
thing right here.
And what that does is
it starts to my server
and this is a different server.
So this is a development server
and this is just going
to be allow you to see
your react application
as you develop it.
So here's the basically
the hello world
and we can go in and change it.
So if you go to Source
should see app dot JS
and you should see some stuff.
So instead of Welcome to react
we could say welcome
to graphql save this
and what's going to happen
is it's going to refresh
and we see in our browser
welcome to graphql.
So it's kind of cool.
So as we do this it's going
to just Automatically refresh
as we're typing so already
start adding some stuff
to our application now,
I guess I should go
over the structure real quick.
So the important parts
are the source.
This is where all
our JavaScript code is going
and we're all the react
there's a folder called public
which you can see
has HTML in it.
And this HTML file is
what our JavaScript
or react application runs
in or gets run plaid to
if you will so here we
can see this div root.
This is where our entire
react application is going
to be put so an index dot JS
when I say react Dom render app,
our application is being
rendered in the element
which is root 2 which we just
saw and if we look at what act
out Jas is we can see this is
what's getting rendered.
So when I changed
welcome to graphql,
that's why we saw
a change over there
and you can see this is just
kind of similar to HTML.
This is called jsx this allows.
He to mix pretty much
JavaScript with HTML
and we'll see more of this
when we actually do
some more coding with this
but we can go ahead
and delete some
of these extra files
because we don't need
them first off app DOT test.
We don't need we
don't need app dot CSS.
We don't need index dot CSS
and we don't need logo to SVG.
So those are just
some extra files.
We don't need we can clear
out all this code right here
and simplify it a little bit
we can just say div hello
and get rid of these things
at the top things at the top
or just import statements using
a fancier JavaScript syntax,
and we just need to import
react and index such
as you can just remove
the index that CSS.
So if we come back over here,
which should now
be blank just hello
and we can start
adding our code.
So what we want to do is
to run the same queries
and whatnot that we ran
and graphql playground.
So for example,
I would like to render
these two dues
and my react application.
And to do that I want
to run this query
and to run graphql queries
from react into server.
We're going to be using
something called Apollo.
So Apollo graphql
allows us to this.
It's very easy to get started.
We're going to be downloading a
few things here to help us out.
So Apollo boost,
which is the library.
They created react Apollo
graphql tag and graphql.
Here's some little descriptions
about what each one does
but basically graphql graphical
tag or for parsing the query.
So basically what we write
here parses this into an object
that basically
they can understand
and then react Paulo is
the bindings to react gives
you some react components
and we'll see that
and then Apollo boost is
for actually just setting up
and making the queries.
So we're going
to copy this in p.m.
Statement and I'm
going to Ctrl C
the server that started and add
this in and the first thing
that we need to do is create
what's called a Apollo client.
I'm going to copy this
and we're going to add
that to our index
actually getting at to our
yeah index dot JS is fine.
We could add it to either place.
But the reason why I
want to do it here is
because we also need
to get a Palo Provider
from react Apollo and pass in
our client Sao Paulo provider,
and this is just going
to wrap our whole application.
And we need to pass
in our client.
So our client is
this thing right here
that we create
and basically the only thing
we're still spying here is
the URL to our server.
So our server is not running
at this location.
It's running at issue P /
Local Host 4000.
So it knows
where to make requests.
So it's now going to send
graphql request all
to the server which is perfect.
That's where server is running
and we need to be able
to access this client
throughout our whole react
application in the way we do
that is by using react
Apollo's Apollo provider.
So this wraps our entire app
and now we have access
to this client
and we can make requests
throughout our app
and we'll see that
so let's make sure adding
that didn't break anything.
So I'm gonna do mpm start
and we should still
see just the word hello
and nothing different
because this doesn't actually
do anything yet.
We didn't tell it what to query
always said was this is
where we You to make queries.
I had this client equal
new Apollo client
before these import statements,
you know, make sure
that comes afterwards.
So just like that
and cool so refreshes and hello.
Is there nice now,
we can start
doing some stuff.
So an app JS.
Why don't we run
a query in the query
that I want to run is
that same one we have here
in our playground.
So what I usually like
to do is run it here
and then just copy it so const
and will say this to Deuce query
and paste it at so this is
just a string of the query now.
We added a library to help us
parse this called graphql tag.
So we're going to import
gql from graphql tag,
and this is actually going
to parse this query right here
and the way we do
that is gql right there.
Now, you may be thinking I
might have missed type this I
meant to do something like this
in the past in the function
and that is not the case.
You actually call it just
like this we're gql
is right up against it.
This is a string template
calling and it will pass
to this function.
Okay, and it
will parse this out.
Next thing is we need
to basically bind it
with our component
in the way we do that is
with higher order component.
So import graphql
from react Apollo
and this is coming
from the react Paulo package.
So we say graphql we specify
what query we want
or what mutation we want
in this case I want
the to do is query
and we wrap our app
and now injected into
the apps props are some stuff.
So now when I say
this top crops,
I have a few things I have data
and loading so loading
and why don't we
actually I'm just going
to console DOT log this
so we can take a look at what
actually the values are and
if we come over here
if you just right-click
and inspect you can see
in the console
what these are so Let's do
a before and after
so this is export default app.
So before we actually
call this higher
or component graphql,
you'll notice your the props
just an empty object.
But now when we add
this thing back,
we have some stuff in our props
that are going to help us out.
So first you notice
we have dot data
and inside a data
there is loading.
So loading is true and there's
basically nothing else.
There's a bunch of functions we
can call but those don't look
how full right on those
are three other things
which some more complex
but once it's done loading,
it'll say loading false
and it should get some to do
so we can see this to do is here
and we can actually see wow,
look this looks like the data
that we had over here.
Right?
Well it's exactly that.
So what we can do in our code
now is we can say kant's data
and we can get loading
and to Deuce.
So this is just D structuring
it from the props.
I'm getting the loading
that we saw in the two deuce
and I'm saying
if it's loading just return null
and if it's not what I want
to do is just to do this dot map
and for each to do I
want to just render it.
So I'm going to render a div
and I'm just going
to display the
to do Dot txt
and we can come back over
here going to load for a second
and we got to see all our items.
Now.
We need to add a key.
And the reason
for this is we need to have
every single one be unique
and this helps
for loading purposes
with react it'll load faster
and have less conflicts
in your list.
So I'm going to say
pass in the to dude
ID to make this unique
I'm going to say to do I
so this is a unique string
that identifies each to do
and then that are goes
but we can see
our items right here.
And now if I want to I
can change one of these items.
So for example,
I could remove a to do so,
we have one to do
down here called item
to I could remove him.
And if we refresh it now
fetches it it's gone.
So pretty cool.
So those are connected
to the same database
same server all that stuff.
All right.
So this is a little teaser
a little intro and to Apollo
and how we're going
to do our queries.
But now what I want to do is
add some material UI
to make this look pretty
and then we're going
to continue on with some more
mutations and whatnot.
So we're going to be
adding this package.
This is material UI from Google
and it just makes
everything look really nice
and it's a nice utility.
So we're going to install go
through the installation.
So we need to install
the core of it again.
Just going to control C and add
that and then we need
to add some things
to our header some links.
So to Port the Roboto font.
And that's when we just go
to the public index dot HTML
and we can put that right here.
And the reason this material
UI needs this font.
So we're just
importing the font.
So it has access to it.
And then the other thing is we
also want to add some SVG icons.
So I'm going to go ahead and
install that package as well.
All right.
And the first thing I want
to do is render some paper
and the reason why I want
to render some paper.
This is a component
from Material UI is
so I can put a list
on that paper.
So we're going to come back
over here and the nice thing
about materialize they
have great demo
so I can actually just take this
and grab what I want from it.
So we're going to import paper.
So to do that we have to import
paper from aperture you like
or paper and then we
can actually render this.
So I'm going
to have an outer div
and I want to Center this guy
and the way I'm going to Center
this is by creating two divs.
And you can actually add styling
to these using the style prop
and this is kind of like CSS,
but it's all camel cased.
I'm going to say display flex
and then the style here.
I'm going to say margin Auto.
I'm also going to give
it a width of 400.
So now I've created
this basically inner div
and I'm going to
render my paper here
and then I'm going to give it
an elevation and let's give
an elevation of one.
So let's see
that paper and action
that we just added and
once we get this paper the way
we like it we're going
to then turn the list
that we have here and to
it actual material UI list
that looks like this
and looks more like to do
items or check items.
All right, so I reran the server
and we can see
it's nicely centered
and it's on some paper.
Perfect.
Let's go ahead
and now add a list.
So this is the list
that I want to add
and we're going
to just copy this
and I'm actually just going
to copy this entire example here
and we're going to take
the bits and pieces
that I want from that.
So let's grab that
and we're going to paste it in.
I'm just going
to paste it in below.
First thing that I want
to do is remove some
of these things that
I don't care about.
So the first three Imports we
don't need but I do need list
all this list associate things
and I do want the icons.
So I want to copy those
and just move them to the top
where my other Imports are
and then I basically just want
to merge these two I don't care
about the style.
We're going to add
our own style.
So when we're he was adding
Styles here, I just want
to move their outer div,
and I'm going to replace
it with my stuff.
So this is what we added
and I want to just add
the stuff in there.
I guess the best way is
we're going to copy these two
and we're just going to go
through what this code does
and just one second.
I first want to make sure
it renders, okay.
So we're going to add
these two state is
kind of interesting
and this is just
another function will talk
about state in the second.
We don't care about the props.
This is our list
and we don't care
about these things either.
Okay, so we're going
to take our list
and plop it down here.
And they're going
over their mapping
and they're doing
this thing, right?
So that's exact same
thing we did here.
So we want to just replace
that map with to deuce
and instead of value.
This is going to be to do
and here's our key.
I'm just going
to call it to to ID.
We could just pass ID,
or we could do it like this
since our applications.
Not too big.
I'm just going
to pass in the ID.
Now anywhere we see
a value we're gonna have
to change this stuff.
I'm not gonna worry
about the class name stuff.
I'm going to remove that.
So handle toggle.
We're going to pass
in our to-do item
and then here going
to pass in to do
I guess this is
a separate thing checked.
I'm going to say
to do doc complete.
So if the to do is complete,
I would like to check
box to be checked.
Value I want this to be.
Line item.
I think that's
what their rendering.
You can come back over here.
Yep line.
I don't want this is a text
that's getting rendered.
The text that I would like to
get rendered is to do Dot txt.
And get rid of that.
Alright, let's go ahead and see
if this actually shows up.
Okay, and then we're going
to walk through the code.
All right.
So this looks pretty good
and I can see my items
and nothing happens
when I click
but we're going to go over
how we can get stuff to happen
Okay, so let's go over the code.
So starting at the top we
have this thing called state.
So this is
where we store information
about our application
that could change.
So for example,
they are keeping
something called checked
and this changes.
So depending on what is checked
in the application.
They're keeping track of here.
Now, we don't really need state.
So I'm going to go ahead
and get rid of it
because we're storing everything
and the mongodb is our state
if you will and we're fetching
everything with graphql
this handle toggle thing.
This I believe is okay.
Yes.
So when we click
on a list item for us,
what we want to do is actually
just mark it off right
when Click on this
it should be whoops.
We crash it
because we were not supposed
to click on things.
When I click on this we
should complete it and we
don't need any more right?
It should check off or whatnot.
So here I'm going to just add
a to do basically we're going
to remove all the stuff here
is going to be update to do
and it's just going to toggle
whether it's complete or not.
And this is going
to be a to do okay.
So next bit.
We can just go down
the code right here.
So we have a list item.
I don't know why they have
a role of undefined.
This stuff is probably
a specific to material UI
and how The Styling looks
checkbox disable Ripple.
I guess that's when you check
to these are some CSS things
that you can take on off
depending on what you
want to look checked.
This is a value of
whether or not the check
boxes are checked.
So for example,
if I say true all the checkboxes
are going to be checked here.
They were all false.
Because all of them to do
doc complete are false,
but if I were to say
update one of them,
so let's say the first one
and just remove this update
to do ID complete is true.
All right, so it's now
been updated in the database
if I refresh can now see
the checkbox checks there.
So all we need to do
is update our database
and this stuff changes.
You can see our primary.
This text is just going
to take whatever the text is
for the to do and then
this second part here is just
this rough whole right side.
This is how we get this thing
on the right now for us.
We don't really like
this comment icon.
Really what we want is
instead of a comment
like an X to delete it right
and I'm just going to remove
I guess I'm going
to remove this aria-label.
We don't need it.
So let's go ahead and do
that replace this icon
with a new one.
So we did all of these
and we want next is
to pick out an icon.
So here it is
the website for material.
I that you can actually search
and find all the icons
that are available
in which one you want to pick.
This is the one I want
to do this close right here,
which is an X and it's
under navigation.
So to add this we're going
to scroll to the top
and save a comment icon
on this a close icon
and I'm just going to replace
comment with clothes
and we'll see if that works
close icon refresh.
And sure enough icon
shows up as an ex.
Perfect.
So now I just want
to hook this up.
So this icon button
should have an on click
and we're just going to pass in.
And here what we're going
to do is delete this to do
right so we can create one.
So this is called handle toggle.
I'm going to call this.
And I want to just do this
in a slightly different way.
I'm just going to create
the Lambda like this.
So it's a little bit simpler.
Alright, so I'm going
to call this function update.
To do and this is a function
that is going to update
the to do and I also
want to do remove to do
which takes it to do
and we're going
to remove to do so,
those are two things
we need to do.
So here I made a little Lambda
that's going to call
this dot remove to do
passing in our to do so,
it should remove it whenever
that gets clicked
and then we every click this
we're going to call
this dot update to do
and the reason why we
want to do the functions
like this you may have seen
stuff like this.
And we want to access
something called this
and we can actually not access
this and functions like that
unless we do an extra
thing called binding
but this automatically binds
so that's the reason why
I like using a function
like this and general
I would just recommend writing
your functions like this
if you add functions,
all right, so let's get
into the logic of how update
and remove work.
So I guess let's
do update first.
So to actually update we come
to our playground we
have the code right here.
So I'm going to copy
this and I'm going
to say update mutation.
So what I want to do is
pass in a variable ID
in a variable complete
or not in the way you do this
with graphql is I'm going
to say dollar sign ID
and dollar sign complete.
So these are variables
and I have to specify
my variables up here.
So I'm have an ID
and specify the type ID is going
to be an ID and complete.
This variable is going
to be a Boolean.
Both of these are mandatory
and you need to make sure
the types here match
the types in your schema.
So if we come here we
expect an ID required
in a Boolean required.
So I need to put
those here as well.
So now I need to inject my app
with this mutation.
Now I could do this
in a very ugly Way by doing this
and then I could wrap
that entire application
like so mutation oops,
not mutation of it,
but our update mutation,
but you can see this will
slowly grow and get super ugly.
There's a function
that react Paulo gives
us called compose
that's going to help us out.
So I just leave
the whole application accident.
There we go.
Welcome back.
So composed what we're going
to do is have graphql like that.
So now we pass graphql all
our graphql us are all are
higher order functions
to the compose function
which basically squishes
them together and then
we wrap our app.
This is just a little bit
nicer way to write it.
They're equivalent
JavaScript though.
Alright, so now
what we can do is we've added
a new thing to our props
and we can give it a name.
I'm going to call
it update to do.
So now in my update
to do function I can say
this dot props that update to do
in this function is
available in my props
because I specified
it here in the name.
I specified matches.
All right.
So what I need to do to pass
this is those variables and this
is a asynchronous function.
So I'm going to await it.
And the variables
that I need to pass in our an ID
and complete so the ID I'm going
to say to do dot ID
and then complete I'm going
to do the opposite so
to do dot complete.
Some of the opposite of
the current value of complete.
So if it is complete right now,
I uncomplete it
if it hasn't been completed
I now complete it.
So, yep my server started
if I come over here
and I click on this.
It'll look like
it's not working.
Right I clicked
on every single one
of these nothing happened,
right you may be oh
an error occurred
or something, right?
It actually worked
if we refresh we'll see
all the items are there and
if I click those to refresh
I see those items changed.
So why didn't update
right away, right?
Why did we have to refresh
the page for this happen?
Well Apollo caches all
your stuff by default,
which is really nice
because it saves you request
and basically optimizes things
but it doesn't re fetch
the data whenever we update it.
So what we need to do is
we need to tell Apollo to update
so there is
something called update
that we can pass our mutation
or our function
that looks like this
and this allows us
to update the cache.
So let's copy this in and
how this works is the store is
where the cash so you could
think of this is the Apollo cash
and right here.
This is us getting the data.
And then this is the name
of our mutation.
So the name of this mutation
is update to do
and this name should match
what we have right here,
which it does.
So this data is
what I get back from the
to do update to do so,
this should be true
or false Boolean of
whether or not it worked.
So we actually
don't even need this
if we were don't want to
because we don't need
the response to update
the cache we could just do that.
So first thing we do is read
the data from the cache.
And the thing
that we need to update
is this to do is query.
So I'm going to say
to Deuce query so we
now have read this into a cache
and if we look down here
what we were doing
we're saying data to do
So here I want to do
data dot to deuce.
And what I want to do is
update one of the items.
So I want to look through
the two deuce and update the one
that has an ID
that matches and change
whether it's complete or not.
So to do this,
what I'm going to do is I'm
going to say data to do stop map
and I'm going to search
for the correct to do
and I'm going to say if x
that ID matches to dude
ID then I want to create
a new to do or update
the completion value of to do.
Otherwise, I just
want to turn X.
So basically what this mapping
is doing is it's looping all
through all the to dues
until it finds the one
we needed to update.
And what we want to do is
keep all the same values
that to do as so this variable
is coming from up here
that to do has
but change complete equal
to to do dot complete.
So just updating
the value of to do.
So we're saying
data got to do so,
we're updating what
this value is looping
through we're changing this one.
So it now is equal
to the opposite of complete
and then we're just writing
it back to the store.
And then we just have
to say our query here is
to do is query and our data
that we're writing
back is right here.
So now if we come back here
when I click on this item
it actually updates
the cash which then
propagates and renders.
So I now get real time
updating of my items
and these are actually
persisting to write I
refresh they're still there.
So it actually is
in fact updating
the database to so nice.
So when do the same thing
with deleting items,
so we're going to come back up
here and do delete mutation.
And we have basically
the code for that too.
So remove to do
and we just pass it an ID
so we can copy
that const remove mutation.
Pass that in and here
we want to pass in
a variable called ID similar
to what we did with update
and it's going to be an ID.
And we're just going to call
that and I want to basically
pass the same do
the same function.
So I'm going to copy
it and paste it.
So there's going to be
a few differences.
The name of our function
is going to be different.
So I'm going to scroll down here
and I say graphql.
This is going to
be removed mutation.
And the name.
I'm going to call
it remove to do.
And come back up here.
I'm going to say remove to do.
And variables we want to pass
in we only care about the ID
and then the update the store
instead of this mapping stuff.
We want to remove
an item from the list.
So to remove an item from
the list we're going to filter.
So we're going
to look for the ID
that is not equal to Du Dy D.
So we're going to filter
through the items
and only remove the item
where these two match up.
So in other words
if the IDS don't match
we want to keep
that so we're comparing it
against the one we need to
remove another important thing.
I did not mention
about this update function is
you want to make sure to
when updating this not mutate
and create a new instance of it.
So with Filter we create
a new instance of that array.
So let's see this and oh,
will you just make
this an async function?
Just like we did update
and let's go ahead
and delete this.
So when I delete it,
we should see these two Reds
match up and sure enough.
We do and Ali another one
and our delete function looks
like it's working properly.
I refresh we should see
those items gone and nice.
So there's one last thing
that I want to do
and that is creating to deuce
and so we want to create just
like an input field at the top
where I can type
stuff and submit.
So I'm going to create
a new file called form dot JS
and this is going
to store our form
and keep track of the value
as the person types it out.
So I'm going to import react
from react whenever
you create a component
in react you always
start off like this
and we're going
to export default.
And we export this like that
so you can import it in our app.
So I'm going to say
form extends react component
and we're going to render and
what we want to render is an
input field in the input field
that we want to render is
the nice material UI one.
So this one looks really nice.
We're just going
to do the basic one.
We can just grab
the import statement.
And we can grab this
just this first one.
Okay, so we're going
to talk about on change
in value in a second.
I'm going to remove
those three fields
in the ID the label I'm going
to call this to do dot dot dot
and I'm now just going to render
and our app that form.
So first I guess we
should import it.
So import form from
dot slash form capitalization
is important there
and we're going to render it
and when I render it
between the paper and the list.
So now we should see
an input field and we do hey
and I want to make
this full width.
So it extends the whole thing.
And I don't know.
Yep.
So there's a property
called Full width we
can just pass on that.
And now it should extend
this whole length.
Perfect.
So now we can even see this is
where the helper text is.
I just call that to do,
but you could call
it whatever you want
to type all that stuff in
and then hit enter
and then add or item right?
So we need to add
some more stuff to a form.
So we need to keep track
of what the user is typing
in to keep track of that.
We're going to use state.
So I talked about earlier
that we wanted to manage
stuff in our state
and data that changes.
So this is going to be text
that changes at first.
It is just an empty string
and I can get that text
from this dot State
and a pass that value in.
So the value of the text field
is equal to this text.
All right whenever someone Types
on changes called,
so there's an event
called on change
and when this is called
and I'm going to call
this handle on change
or we could just
call handle change.
And I'm passing this function.
Okay, so I want this function
to be called whenever this one
is it's going to be passed
an event and if we do.
New text is going to be
e dot Target value.
So e dot Target that value
is going to be have the new text
that the user just typed in.
So this new text do you want
to now store in the state?
And the way you update
this state is with this dot set
State and then you
pass in the new value.
So I'm going to say
text is equal to new text.
So This Is Us updating the state
with this new text value.
So whenever I'm typing
on change will update
the value in the state
in the state will propagate
in the state now is going
to change the text field value.
So now as we're typing this
you can see the value and
if I were to Console DOT
log this new text.
We can see the value each letter
that we type you can see
each letter that I type.
It kind of makes a little
pyramid here and it adds
on the new text value
and then whenever
the user hits enter
what I'd like to do
is submit this
if you will or create
a new item here now,
I'm just going to defer to
whatever app dot JS wants to do.
So I'm going to pass a prop.
I want to call it
from App dot JS.
So to do that.
What I'm going to do is
create a function called
handle key down.
And here I'm going to say
on key down handle key down.
So now every time
I press a letter
both key down inhale change
you're going to get called.
Now.
What I want to do is listen
for when the person
hits the enter key.
So whenever they hit the enter
key we want to submit the form.
So to be able to know
this we have access
to what Q is pressed.
We get this by doing e dot key
and we can check
if it's equal to enter
and if it's equal dinner,
what we want to do is call
this dot props dot submit
and I want to pass in
the current value of text.
So this is something I want
to pass down from App dot JS.
So when I call this
I want to say submit
and give it a function
called this dot create
to do so up here.
I'm going to say create to do.
And we know it's going to have
one value in here called text.
So this is the function
that we're passing to submit
and then our form we're calling
submit passing in a string
which is text.
So here is we want
to create to do
and we want to come over
here to our playground
and do create to do
and really there's
only one value for this
which is the text
and then what stuff you want to
get backslid the text complete
and we want to get it
all back in this case
and we'll see why in a second.
I'm going to say
const create to do mutation.
Pass it in and then we're going
to have one variable here.
I'm going to call
it dollar sign text.
And by the way,
you do not have to call
it the same name as
what you have here just
a good convention
that I like to follow
so text string and
that's going to be mandatory.
Come down here
and actually all the way down
because we want
to add another one.
So this is going
to be create to do mutation
and I would say create.
So in here now,
I'm going to say and we
can I guess copy this
because we're going
to be doing similar things.
I need to make
this asynchronous.
I'm going to say create
to do the variables
that I'm going to pass in is
just the text and now I want
to update the store
after we create the to do
because I want to update the
to do query and add my new to do
but here I care
about the second thing
because the second thing
here data and then create
to do this is going
to have three values.
It's going to have the ID
the text and complete
which is what we need.
So I'm just going to push it
on so plush and we're going
to add this create.
So we read what to do is we
have cashed we add the new item
that we added and then we
write it back to the query.
So usually what I
like to do is just add
a console log statement to see
if this is not getting called
or what could possibly
be going wrong e dot key.
This might be an uppercase
enter not a lowercase.
Yep, and that was the case.
So watch out for that
and you'll notice
this did not clear.
So two things I
notice first off.
This is not clear
at the top we want to do
that and secondly it added
at the very bottom.
I want to add it at the top so
we know this was getting called
and after we submit we're just
going to say this dots
that state and set it
to an empty string
and that will clear it
and then our app dot JS
were pushing to the end.
There's a function called
and shift this adds it
to the beginning.
So if I say first we now
have an item at the beginning
and now I can just
rapid-fire create items
if I want to can check
them off and delete them
if I want and we have
a whole to-do list create it
so that is it for this tutorial.
We did all the operations
creating reading updating
and deleting to-do items.
I hope that was helpful
and you got a good grasp
of how to do this.
Will taste of how graphql
and react works.
Hi guys, this is Alia call
from Eddie Rekha.
Today.
We're going to learn
how to become a superhero just
kidding now becoming a full
stack web developer is no less
than becoming a superhero.
It was continuous dedicated
practice and a strong will
to learn with this in mind
in today's session.
We are going to discuss
how to become a full
stack web developer.
So let me run you
through today's agenda.
We're going to begin with what
is full stack web development.
Next we will discuss
the different layers
of full stack web development.
After that.
We look at the different types
of web developers over here.
We'll discuss front-end back-end
and full stack
web developers next.
We'll discuss a few reasons as
to why you should practice
full stack development.
Once we're done with that.
We'll see how to become a full
stack web developer over here.
We'll see what exactly
a full stack web developer
does will discuss
how the front-end back-end and
the database management works.
All right now moving on
we'll finally discuss
some important web
development tools and Allergies
that you must know
in order to become
a successful web developer.
So guys, I hope all
of you are clear
with the agenda without wasting
any further time.
Let's get started.
So what is full
stack web development?
I'm sure you all must
have heard a front
and in back in web development,
but what is full stack
web development now
full stack web development
basically involves front-end
and back-end web development.
It requires in-depth knowledge
of the different
scripting languages
like HTML JavaScript CSS,
which make the web look
more interactive and Alive.
It also requires
high-level programming languages
such as Java Python
and so on to code
the server side apart
from this you also require
experience in working
with JavaScript Frameworks,
like node.js and libraries
such as jQuery and so on now
in the further slides,
I'll be covering
the different aspects
of becoming a full stack
web developer in depth.
So stay tuned.
So before we move onto Water
full stack developer does
and how a front-end
and back-end developer Works.
Let's look at the Ben layers
of full-stack first we have
the presentation layer
or the front end of the web
this layer helps you interact
with the web watch videos
perform actions like register
to when online shopping site,
so guys, whenever
you serve a website
the different fonts images
and the content of the website
forms a presentation
or the front end
of that website.
So basically the design look
and feel of the web
is accomplished with the help
of HTML CSS and JavaScript,
then comes the logic layer
or the back end layer.
Now this layer forms
a dynamic connection
between the front end
and the database.
So every time you search
the web it's the logic layer
that transmits your requirements
to the database and Returns
what you searched for all
of this is powered
by a web server.
Now in order to get
this layer working.
It's important to know at least
one of the programming languages
such as python Java or C, hash.
Okay.
Now lastly we have
the database layer.
This layer is
a massive Warehouse
of information it Contains
a database repository
which captures and stores
information from the front end
through the back end.
Now a prerequisite
over here is to have
knowledge of how data
is stored edited retrieved
and so on languages
such as MySQL Mongo DB
are a must to know now,
let's look at the type
of web developers.
So guys front-end developers are
responsible for a websites look
and feel these developers
must be Masters
at three main languages,
which is HTML
CSS and JavaScript.
They also need to be familiar
with Frameworks like
bootstrap angularjs and ember.js
which make the website
look more interactive
and Alive libraries,
like jQuery also help to package
code into a lightweight
and compatible form now moving
on to the back end developers.
Now the back end
of a website consists
of three components
the server the application
and a database
a back-end developer creates
and maintains the web server
application and the database
which allows the front end
of the website 20 Great
to make the server application
and a database to communicate
with each other
back end developers
use server-side languages
like PHP Ruby python Java
and.net to build an application.
They also required to operate
on tools like MySQL SQL Mongo DB
in order to fetch tour
or edit data and then
serve it back to the user
in the front end now guys,
this is how back end developers
work now moving on
to full stack developers.
The term full stack developer
was popularized in a meeting
around eight years ago
when Facebook announced
that they are looking
to hire only full stack
web developers now basically
a full stack developer
should be knowledgeable
enough to work on both the front
and technology and
the backend technology.
So he needs to have
an understanding of
how the web works at each and
every level including setting up
and configuring Linux
or Windows servers
coating server-side apis
running the client side
of the application
by using JavaScript.
Structuring and designing
the web page with CSS
and HTML a full stack developer
is like the Jack of all trades
one must have enough knowledge
to run both the client
and the scripting side.
Now, let's discuss
a few key points
about why one must practice
full stack web development.
One of the reasons is the first
and developers can choose
from a rich set of tools
and Technologies for creating
and designing unique code.
They are not restricted
to a certain set
of tools for development
because there are n number
of Frameworks and libraries
that will assist a full
stack developer and achieving
an effective web application.
Now, the next reason is
design and development.
Now one of the best things
about working as
a full stack developer is
that you're not restricted
to only development as a full
stack developer you can design
and style your application.
And then if you're
bored of Designing,
you can probably switch
to your developer mode now
develop skills come into handy
when you want to
create a functional
and a bug free application
a full stack developer is
basically Create a person
who can both develop
and design an application.
So guys I'm now going to lie
to you a full stack developer is
like the Stephen Hawkings
of web development
after mastering very scripting
and programming languages
and working alongside
several Frameworks
and libraries a full
stack developer is
no less than a master.
Of course one requires
to have work experience
and a lot of knowledge
but nothing is unachievable.
If you have the will
to do it apart from
that a full stack developer
is highly valued in all parts
of the world in the US
the average salary
of a full stack developer is
over a hundred and ten thousand
dollars not only
in the US all around the world
full-stack developers are
in high demand.
Now that you have
a basic understanding about
what a full stack developer
is let's dive deep
into how to become
a full stack developer.
Let's look at the
responsibilities of a developer.
And what exactly does he do?
All right, so guys to begin
with you must have
a decent understanding of
how a website or a web.
Application is built
and what tools and Technologies
are used to do so,
so let's begin with a front-end
web development to master
front-end web development.
You need to know
many Technologies,
but the main Technologies are
HTML CSS and JavaScript now HTML
which stands for hypertext
markup language is the skeleton
of every web page.
It defines the structure
of the web without it.
The web would be as
shapeless as a lump
of clay by using HTML
you tell the browser
how you want your content
to be structured by defining
the different parts
of a web page.
For example, you define
the content of your web page
within HTML tags.
Now these facts tell
the browser which part are
headings body sidebars
and Footers this not only helps
to structure the web page.
It also lets you style
each HTML element
by selecting them
and then adding different
style parameters now CSS,
which stands for cascading
style sheets is
like the clothes we wear
to look stylish and attractive.
That's DML elements.
We Define can now
be styled using CSS.
For example, you can change
the color of the header add
in style various buttons.
You can also use CSS to adjust
the width of the HTML elements.
You can style them
by adding color and design
you can also play around
with buttons and make them
look colorful and attractive.
So guys, you can style
a web page in any way you
want CSS has thousands
of styling functions,
which let you design
and make a webpage look
like a beautiful painting.
Next up is Javascript.
Now before I get on
with half would suck
developers use JavaScript.
It is important to understand
how JavaScript Works
JavaScript is basically
a language of the web
which every browser PC
and mobile phone understands now
JavaScript can natively run
on the browser by natively.
I mean that most
of the web browsers
like Google Chrome Safari
and Internet Explorer have
a JavaScript engine embedded
into that browsers.
Okay.
Now this JavaScript engine
interprets the But script code
so that it can run
on the browser.
So guys, this is exactly
how JavaScript runs
on the web browser.
Now where is
Javascript used now?
Let's look at an example.
So guys when you're browsing
on a webpage you come
across many buttons on clicking
these buttons some event occurs.
Now JavaScript has
event listeners with perform
specific actions on the click
of a button like for example
on the click of a button
another page might open up
or a personal detail
form can pop up.
All of this is Possible
only to JavaScript.
It is basically used man
you play the HTML elements add
motions and Graphics to them.
So any sort of motion
that you see on your web page
is all JavaScript now
that you have a good idea of
how food sack developers work
on the front end.
Let's look at the back end now
when a user opens up a webpage
and clicks on a link
or submit some form
or let's say he enters our URL
where does this data
gets stored and
how does the browser return in?
Mission to the user.
So basically the browser
connects to a web server now
a web server is just a computer
running an application
or a software
that delivers resources
to the web pages.
So guys when a web server
receives a request
for a resource,
it has to respond
with that resource.
So how does it do
that now basically back
end developers program
the web servers to respond
with the right resources.
So the main aim
of the web server
here is to respond
with the correct resources.
But where do they get
these resources the web server
is connected to a database
which is continues the cold
on receiving some requests.
So the role of a full stack
developer here would be
to create an application
that fills a web page
with the required resources,
but pulling data
from the database.
Now this application
is programmed using
server-side languages
like Java python PHP node.js
and the database is also
programmed using languages
such as MySQL Mongo DB and SQL.
So guys, basically
The back end of a web page
is used to serve the required
resources to a user.
So here we just discussed
how the front-end development
is used to design.
The user facing
part of a web page
that lets us interact
with the web page.
We also discuss
how the back end is used
to deliver a web page
to the browser along
with the requested resources,
which are retrieved
from a database.
So guys, this is what
a full stack developer does.
He has to create
both the front end
and the back end of a web page.
All right.
Now, let's look at some of the
important Technologies and tools
that a full stack developer
must know first of all
a full stack developer
must choose a code editor
that is best suitable for him.
There are hundreds of code
editors out there personally,
I switch between
Visual Studio code
and Sublime Text.
They're the most
user-friendly code editors,
but you guys can go ahead
and choose whichever code
editor you like now.
The second tool is
a Version Control System
a Version Control System
basically is used to keep
a track of all the changes
that you make
to your code files.
Any sort of documents now
like the name suggests
it creates versions of your code
or your file every time
you change something.
So let's say that you created
a web application and added
an additional feature to it.
But for some reason this feature
slow down your website
and you want to go back
to the old version
of your website.
So usually it is
very hard to revert back
to an older version
but a version control system
takes care of this
because it has a track
of all the code changes
that you've made
and it can easily revert back
to any code change some
of the popular Version
Control Systems include get
and subversion now guys
that are thousands of JavaScript
Frameworks and libraries
which will come handy during
web development Frameworks,
like node.js can have with back
and development of a webpage
and JavaScript libraries
such as jQuery can help
at the front end
to design a web page.
Then there is angular
react backbone meteor,
which are all very useful
to a full stack developer
a full stack web developer
is Reese familiar
with a couple
of JavaScript Frameworks
and the best part
of these Frameworks is
that after learning JavaScript
which you will definitely need
while developing the front
and they are very easy
to understand next up.
We have had 3 TP protocols.
Now HTTP is basically
a stateless application protocol
on the internet
which allows clients
to communicate with a server.
So basically it enables
communication between the front
end of your webpage
and the back end guys.
Let me tell you
that there are a lot
of web developers out there
who don't know much about HTTP,
but it is quite essential to
have an understanding about HTTP
and how the internet works.
It is also
necessary to understand
what is rest and why is
it important in regards
to the HTTP protocol in
web applications apart from all
of this a full stack developer
obviously needs to
have prior knowledge
about running the application
on operating systems such as
Linux windows and so on
because at the end of the day
all of this is running on top
of an operating system
also a lot of fools
Developers have brushed up
on various project management
tools like jira teamwork base
camp to effectively carry out
the web development process.
So guys becoming
a full stack web developer
requires good amount
of effort and dedication,
but is it worth all the effort?
I would say definitely it is it
is the most value designation.
And once you practice
full stack web development,
you'll become a master
of the web and a Tedder
a copy provide a full stack
web development course
that has all the required
tools and technologies
that you need to learn
and we also make sure
that you don't just
learn it you master it.
So guys if you're interested
in learning the full stack
web development master course or
any other training Technologies,
let us know
in the comment section
and we'll get back
to you at the earliest.
So guys, thank you so much
for watching this video.
Have a great day.
I hope you have enjoyed
listening to this video.
Please be kind enough to like it
and you can comment any
of your doubts and queries
and we will reply them.
At the earliest do look out
for more videos in our playlist
And subscribe to Edureka
channel to learn more.
Happy learning.
