Articles, Blog

Web Development Full Course – 10 Hours | Learn Web Development from Scratch | Edureka

October 24, 2019


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.

100 Comments

  • Reply edureka! July 28, 2019 at 7:49 am

    Got a question on the topic? Please share it in the comment section below and our experts will answer it for you. For Full Stack Training curriculum, click here: http://bit.ly/2AUZv2y Below are the topics covered in this video:
    1:46 HTML

    2:03 What is HTML?

    2:45 Structure of HTML

    3:38 HTML Editors

    4:21 Writing a HTML program

    5:14 Doctype Declaration

    6:30 Elements

    15:40 HTML Forms

    30:55 CSS

    30:54 What is CSS?

    31:59 CSS Syntax

    32:32 CSS Selectors

    33:54 CSS Box Model

    34:31 CSS Units

    1:34:26 JavaScript

    1:35:01 What is Javascript?

    1:36:46 JavaScript Stats

    1:37:34 What can JavaScript do?

    1:38:58 JavaScript Framework

    1:41:44 Top Websites Built Using JavaScript

    1:42:10 Benefits of JavaScript

    1:44:21 JavaScript Fundamentals

    1:51:23 JavaScript Variables

    1:52:59 JavaScript Constants

    1:52:58 JavaScript Data Types

    2:03:31 JavaScript Objects

    2:09:30 JavaScript Functions

    2:12:38 JavaScript Conditional Statements

    2:18:35 JavaScript Loops

    2:27:36 JavaScript Switch Case

    2:30:34 jQuery

    2:34:21 Why use jQuery?

    2:36:51 Getting started with jQuery

    2:39:31 DOM

    2:40:19 jQuery Selectors

    2:47:58 jQuery Methods

    3:20:58 jQuery Effects

    3:36:46 jQuery UI

    3:45:25 Angular

    3:51:56 What is Angular?

    3:56:44 Single Page Application

    3:58:31 Angular 8: What's new?

    4:02:03 Angular Project Setup

    4:06:16 Writing the Angular First App

    4:21:32 What is Typescript?

    4:22:59 Integrating Ext CSS

    4:32:53 Angular Components

    4:55:38 Data Binding

    5:06:51 Event Binding

    5:25:20 Using Built-in Directives

    5:44:37 React.js

    5:45:57 Why ReactJs?

    5:50:14 Introduction to ReactJS

    5:53:39 Advantages of ReactJS

    5:54:10 ReactJS Installation

    5:59:37 RasctJS Fundamentals

    6:00:17 JSX

    6:04:30 React Components

    6:09:12 React Props

    6:11:49 React States

    6:16:54 React Lifecycle

    6:22:34 React Events

    6:31:06 React Refs

    6:38:47 React Keys

    6:39:48 React Routers

    6:52:14 Node.js

    6:53:24 What is Node.js?

    6:54:43 Features of Node.js

    6:55:34 Node.js Architecture

    6:57:27 NPM

    6:58:58 Node.js Modules

    7:01:04 JSON File

    7:06:00 Node.js basics

    7:08:12 Node.js Operators

    7:10:21 Node.js Functions

    7:11:42 Node.js Objects

    7:12:34 Node.js File System

    7:16:21 Node.js Events

    7:27:11 Node.js HTTP Module

    7:28:14 Express.JS

    7:29:29 Node.js Demo

    7:41:13 MEAN Stack Application

    7:44:51 CRUD Operations

    7:44:56 RESTful API

    7:45:39 Contact List MEAN App

    9:00:49 MERN Stack Applications

    9:03:15 MERN CRUD

    9:04:02 MERN Application To-Do List App

    10:05:10 How to Become a Full Stack Web Developer?

  • Reply Let's Rock July 28, 2019 at 12:40 pm

    After learning this should I become SD or should I purchase it after? And cost of the course?

  • Reply Fadhel Suryana Putra July 28, 2019 at 12:48 pm

    Table of content, anyone?

  • Reply Vinothkumar S July 28, 2019 at 1:18 pm

    Thanks a lot… I need a full fledged course on react.. And here it is… Thanks a lot…

  • Reply MANDROID DOTCOM July 28, 2019 at 3:16 pm

    You are really awesome edureka,Lot of Thanks 💝

  • Reply Tasadduq Hussain July 28, 2019 at 3:28 pm

    thanx

  • Reply WTF_Wong July 28, 2019 at 4:20 pm

    Nice! Thanks

  • Reply Balaji Hotte July 28, 2019 at 6:20 pm

    Thank u edureka

  • Reply Muhammad Fajri July 28, 2019 at 6:22 pm

    Amazing channel and tutorial.

  • Reply joshua Adese July 28, 2019 at 7:33 pm

    great job, awesome tutorial, it was really helpful, more power to your elbow…

  • Reply 9.5M views July 29, 2019 at 3:09 am

    Insane

  • Reply Kim Official Channel July 29, 2019 at 3:21 am

    Awesome. This is awesome. Thanks so much for sharing the resources! 🙂

  • Reply vaseem babul July 29, 2019 at 4:43 am

    Thanks

  • Reply 009994f6234 July 29, 2019 at 4:52 am

    extremely grateful to you. I will begin studying this in a few months. Right now doing another course.

  • Reply Shafiuddin Choudhary July 29, 2019 at 5:02 am

    Thanks

  • Reply Mohammad Anas July 29, 2019 at 9:15 am

    Boom 10h❣️❣️🦅🦅✌️✌️

  • Reply Vinayaka kallur TP July 29, 2019 at 10:27 am

    Nice Video…So much of contents to learn…May God shower his lot of blessings to Edureka Teaching staffs….Students Community are really blessed to get Edureka Channel for High Quality Learning…"DON'T JUST LEARN IT, MASTER IT" I like this Slogan very much…Love you Edureka Team

  • Reply Arman Ahmed July 29, 2019 at 11:31 am

    Awesome but please make a video on full Django

  • Reply Ranju Alam July 29, 2019 at 11:32 am

    Wow awesome

  • Reply Muhammad Adnan July 29, 2019 at 3:16 pm

    Please make #laravel Web Development tuts thanks

  • Reply Pradeep kumar July 29, 2019 at 7:53 pm

    Sir please make a video on Java web application development 🙏🙏🙏

  • Reply vineet kumar July 30, 2019 at 1:35 am

    Thank u so much for making a education free

  • Reply Jonathan Lomotei Oko July 30, 2019 at 6:42 am

    Thank you edureka! For responding to my question with these full packed video. Its well explained and helpful. This worth a fortune

  • Reply Aravind Subramani July 30, 2019 at 9:51 pm

    Hats Off to @edureka! for sharing this video. You are doing a great service to the society and that too free of cost. God bless!

  • Reply Yashraj Patidar July 31, 2019 at 12:31 am

    Such a very long video, I never ever have seen about the WEBSITE field. Thanks for making a video with in-depth knowledge. This is not possible to see in a single sitting. So, I want to take out my time to watch the full video. I really need to say Awesome video.

  • Reply My Support Modern July 31, 2019 at 12:36 am

    Good teaching

  • Reply Assam TeleMedia July 31, 2019 at 8:51 am

    I am BCA student and i love web designing…development….and thanks a lot for ur superb video!!

  • Reply Sourav Bhowmick July 31, 2019 at 1:54 pm

    Loved Edureka since I found out the channel many months ago.. I am extremely thankful for the costly courses given by Edureka for free on youtube. Love you guys.

  • Reply radnus tech July 31, 2019 at 4:10 pm

    From Nepal ..I have subscribed you to study from your video

  • Reply Abu Kamara July 31, 2019 at 4:24 pm

    Wow so Great Thank you very very much for this Lectures , i relay appreciate you guys May GOD bless u all.

  • Reply CODE WITH ZKSOFTWARE July 31, 2019 at 7:09 pm

    is this full course or we've to purchase full course.

  • Reply ravi kiran August 1, 2019 at 5:04 am

    1:46 HTML
    2:03 What is HTML?
    2:45 Structure of HTML
    3:38 HTML Editors
    4:21 Writing a HTML program
    5:14 Doctype Declaration
    6:30 Elements
    15:40 HTML Forms
    30:55 CSS
    30:54 What is CSS?
    31:59 CSS Syntax
    32:32 CSS Selectors
    33:54 CSS Box Model
    34:31 CSS Units
    1:34:26 JavaScript
    1:35:01 What is Javascript?
    1:36:46 JavaScript Stats
    1:37:34 What can JavaScript do?
    1:38:58 JavaScript Framework
    1:41:44 Top Websites Built Using JavaScript
    1:42:10 Benefits of JavaScript
    1:44:21 JavaScript Fundamentals
    1:51:23 JavaScript Variables
    1:52:59 JavaScript Constants
    1:52:58 JavaScript Data Types
    2:03:31 JavaScript Objects
    2:09:30 JavaScript Functions
    2:12:38 JavaScript Conditional Statements
    2:18:35 JavaScript Loops
    2:27:36 JavaScript Switch Case
    2:30:34 jQuery
    2:34:21 Why use jQuery?
    2:36:51 Getting started with jQuery
    2:39:31 DOM
    2:40:19 jQuery Selectors
    2:47:58 jQuery Methods
    3:20:58 jQuery Effects
    3:36:46 jQuery UI
    3:45:25 Angular
    3:51:56 What is Angular?
    3:56:44 Single Page Application
    3:58:31 Angular 8: What's new?
    4:02:03 Angular Project Setup
    4:06:16 Writing the Angular First App
    4:21:32 What is Typescript?
    4:22:59 Integrating Ext CSS
    4:32:53 Angular Components
    4:55:38 Data Binding
    5:06:51 Event Binding
    5:25:20 Using Built-in Directives
    5:44:37 React.js
    5:45:57 Why ReactJs?
    5:50:14 Introduction to ReactJS
    5:53:39 Advantages of ReactJS
    5:54:10 ReactJS Installation
    5:59:37 RasctJS Fundamentals
    6:00:17 JSX
    6:04:30 React Components
    6:09:12 React Props
    6:11:49 React States
    6:16:54 React Lifecycle
    6:22:34 React Events
    6:31:06 React Refs
    6:38:47 React Keys
    6:39:48 React Routers
    6:52:14 Node.js
    6:53:24 What is Node.js?
    6:54:43 Features of Node.js
    6:55:34 Node.js Architecture
    6:57:27 NPM
    6:58:58 Node.js Modules
    7:01:04 JSON File
    7:06:00 Node.js basics
    7:08:12 Node.js Operators
    7:10:21 Node.js Functions
    7:11:42 Node.js Objects
    7:12:34 Node.js File System
    7:16:21 Node.js Events
    7:27:11 Node.js HTTP Module
    7:28:14 Express.JS
    7:29:29 Node.js Demo
    7:41:13 MEAN Stack Application
    7:44:51 CRUD Operations
    7:44:56 RESTful API
    7:45:39 Contact List MEAN App
    9:00:49 MERN Stack Applications
    9:03:15 MERN CRUD
    9:04:02 MERN Application To-Do List App
    10:05:10 How to Become a Full Stack Web Developer..

  • Reply RichuRich August 1, 2019 at 10:51 am

    Awesome

  • Reply Abdhafeedh Oladapo August 1, 2019 at 9:51 pm

    Good work, you guys are blessing form Allah to the less privileges. Thanks alot

  • Reply Shan Iqbal Adviser August 2, 2019 at 2:15 am

    People should say Thanks to God, Then Internet, Google, and to these guys who are making youtube so useful and educated. So beautiful information you have shared with us. I'm really amazed that such a long video you just uploaded without taking money or getting paid. I know you can sell or sold on udemy but you deserve a good star with 5 rating. I'm a web developer just wanted to leave a comment for you. Stay blessed. team

  • Reply VISHWANATH T S August 2, 2019 at 7:04 am

    Thank you soo much this is very helpful!!

  • Reply sharyar life August 2, 2019 at 9:51 am

    love you eduerka please make tuts on php with project

  • Reply Anthony Sopah August 2, 2019 at 12:34 pm

    Thanks a lot, very amazing lessons

  • Reply iShuvam August 2, 2019 at 1:57 pm

    Thank You for this video

  • Reply Zahir Mirzamammadli August 2, 2019 at 2:35 pm

    nice video

  • Reply pankaj rawat August 2, 2019 at 2:57 pm

    Love u edureka

  • Reply Щақая Ғқ August 2, 2019 at 5:48 pm

    Thank you very much edureka…. 👌👌

  • Reply Taufique Official August 2, 2019 at 7:25 pm

    Very helpful video
    web devlopment..
    Thank you so much #edureka

  • Reply Zanith August 3, 2019 at 2:29 am

    I hope tomorrow you make a video with additional Indonesian subtitles <good job>

  • Reply virendra Verma August 3, 2019 at 7:32 am

    I am very thankful to edureka uploading the video…it is very helpful for those who cann't afford the fee.. please upload some project video on php python or java…

  • Reply sandeep negi August 3, 2019 at 9:01 am

    great work guys

  • Reply ഒ. പി. ഒളശ August 3, 2019 at 11:16 am

    Thanks edureka for the great content ❤
    Request: Please do a web development part 2

  • Reply Mohd aslam August 3, 2019 at 8:50 pm

    you deserve millions of subscribers and likes

  • Reply #Team_Alara Joel August 3, 2019 at 11:35 pm

    This is very wonderful thank you for taking the time to do this. I am already on a full-stack course, but I will definitely learn this to solidify my knowledge

  • Reply Sumaya Kabir Shifa August 4, 2019 at 3:20 am

    i subscribe your channel by ur one video….. You are great

  • Reply Stock Market August 4, 2019 at 5:06 am

    Perfect Perfect Perfect Perfect

  • Reply Mahmoud Fikry August 4, 2019 at 12:23 pm

    Html
    Css
    Bootstrap 4
    JavaScript
    jQuery
    Angular js
    React
    Sql
    Php7
    Node.js
    If you learn these languages you will be a professional web developer

  • Reply Borrell Belief August 4, 2019 at 1:02 pm

    wow

  • Reply kazi shakil August 5, 2019 at 8:08 pm

    tnx sir

  • Reply Shereen Reda August 6, 2019 at 10:59 pm

    Please add Arabic subtitles and really thank u so much😄

  • Reply Bashir Suleiman Sani August 6, 2019 at 11:47 pm

    thank you alot

  • Reply Bibhushan karki August 10, 2019 at 6:24 am

    React is also js library not framework, right?

  • Reply Shashi Kala August 10, 2019 at 7:12 am

    Thank you #edureka! For ur awesome video 👍

  • Reply nagadamudi sri hari August 10, 2019 at 2:17 pm

    @HTML guy fan of cowboby bebop 😉

  • Reply Abdulkerim Hasen August 11, 2019 at 1:37 am

    very very nice video! thabk you very much I love U

  • Reply Talha khan August 12, 2019 at 3:36 am

    One of the longest video on web development…

  • Reply ᴛᴀғɪᴅᴀ km August 12, 2019 at 4:44 pm

    Today you made me to be web developer thanks alot ❤

  • Reply Timothy Westerkamp August 13, 2019 at 12:20 pm

    This is gold

  • Reply Avijoy Bhowmick August 16, 2019 at 6:54 am

    Thanks a lot for this video, You guys are doing great job… Keep it up

  • Reply Ever Shine August 16, 2019 at 8:43 pm

    I am truly thankful 🙏💕

  • Reply Joydeep Ghosh August 18, 2019 at 5:41 pm

    Great mam ,do u have videos on php and different frameworks. If you have plz share mam these videos are helping a lot

  • Reply ANONYMOUS HOME August 22, 2019 at 7:46 pm

    Love From Bangladesh 😘😘😘😘

  • Reply ĹoveŹone August 23, 2019 at 4:58 am

    Please hindi video banaye full web development ke liye

  • Reply Beere Srinath August 26, 2019 at 6:23 am

    Great job,bro it's useful for more students and do videos for software testing and selenium please

  • Reply salnie ramirez August 27, 2019 at 4:49 am

    amazing…

  • Reply THAMIZHAN August 27, 2019 at 1:29 pm

    how is the content only tutorial or with project????

  • Reply Piyush Singh Rawat August 30, 2019 at 3:47 am

    Thank you very much brother… I want this type of videos… And I found here edureka💥😍😎

  • Reply Avro Ahsan September 1, 2019 at 8:25 pm

    Hats off bro. This is very helpful for me. Again many many thanks. Keep it up bro.

  • Reply Russell Pramanik September 1, 2019 at 8:37 pm

    This is really admirable video. I've learnt a lot from this informative video. But, one thing knocking in my mind. What's the model of the PC you've used in this video for web design & developing.

  • Reply lyric DEsign September 2, 2019 at 1:51 pm

    is it gonna teach me full html??

  • Reply positive thoughts September 7, 2019 at 12:28 pm

    Upload a video how to develop e-commerce website from scratch
    With full course … Please 🙏 response

  • Reply Owlss September 8, 2019 at 12:16 am

    You guys deserve more than a subscribe! thanks for this <3 <3 <3 please continue to make more content like this!

  • Reply Lorna Muccio September 8, 2019 at 2:40 pm

    Best video ever

  • Reply crk September 9, 2019 at 7:28 am

    What kind of software r u using to code please URL

  • Reply Suraiya Ritu September 10, 2019 at 3:57 pm

    Just for this video I'm gonna subscribe your channel .

  • Reply Abdul Basith September 12, 2019 at 5:58 am

    Will it be from scratch?
    Or a bit high level?
    What do I do if I already know the basics…?

  • Reply Seng Ly September 14, 2019 at 2:14 pm

    Nice videos thank in advance

  • Reply Rishi Raj September 16, 2019 at 6:34 pm

    I want to learn web development from basics. should I watch this video?

  • Reply Ashish Kumar September 19, 2019 at 7:31 am

    Does this course also teach about back end development?

  • Reply Satyam Srivastava September 22, 2019 at 10:24 am

    If I go through the entire video and learn, would that be enough? Or should I join master's program on your website. Please let me know edureka.

  • Reply WHY SO SERIOUS ? September 23, 2019 at 2:33 pm

    Can you please make a video on CSS Flexbox and Grid layouts ? Please. And yes, AWESOME VIDEO !!!

  • Reply Dude Buzz September 24, 2019 at 5:49 am

    Thanks #Edureka for This video.💕
    You deserve millions of subscribers and likes🔥
    From BD🇧🇩

  • Reply zaheer afsar September 24, 2019 at 2:56 pm

    Thank you Edureka😊😊😊

  • Reply ng t Mink September 25, 2019 at 6:10 am

    This is for a well-know developer

  • Reply Rutvik Bhalekar September 25, 2019 at 7:05 am

    U are truly a kind person to give such a knowledge for free . You are the best ♥️

  • Reply zaheer khan September 25, 2019 at 7:24 am

    I have done BE in civil engg.. So may i eligible to join this coarse

  • Reply sivasowjanya gorantla September 25, 2019 at 4:12 pm

    All in one

  • Reply Balanjaneya Sharma September 26, 2019 at 3:38 pm

    Really awesome

  • Reply Akinkunmi Israel September 26, 2019 at 9:49 pm

    God Bless edureka!

  • Reply ROYAL_AB_07 September 27, 2019 at 12:40 pm

    Thanks a lot @edurea…👍

  • Reply Peter Zhou September 28, 2019 at 7:05 pm

    thanks for sharing!

  • Reply ATOMY GlobalBusiness INDIA October 4, 2019 at 3:21 pm

    Nice video Dear
    Thanks…..

  • Reply Atul Kumhar October 5, 2019 at 4:17 am

    Thank you

  • Reply Aldi Satrio October 9, 2019 at 6:35 am

    Thanks very much edureka

  • Reply Baby Subs October 17, 2019 at 3:14 am

    A chemistry student can learn web designing?
    If yes then what knowledge he should have?

  • Leave a Reply