🔥 Web Developer Course For 2023 Web Development Full Course In 10 Hours Simplilearn

foreign
and welcome back to Simply learns
YouTube channel I hope you guys are
doing well today we'll take you through
some of the technologies that come under
web development in just one video
this video covers everything you need to
know about the web developer course but
before we begin if you enjoy watching
these videos and find them interesting
then please subscribe to our YouTube
channel because we bring the best videos
for you daily also hit the Bell icon to
never miss any update from Simply load
also if you want to become a full stack
web developer then the postgraduate
program in full stack web development in
collaboration with Caltech ctme can help
you accelerate your career as a software
developer in just few months you will
learn modern coding techniques with
bootcamp level intensity and gain all
you need to be a full stack technologist
this program will give you the
foundation for building full stack web
apps using Java you will begin with the
basics of JavaScript and then Venture
into some of the more advanced concepts
like angular spring boot hibernate jsps
and MVC so now is the perfect time to
get started on your career as a full
stack web developer check out the link
mentioned in the description box below
do you ever wonder how it feels to have
a successful career in the field of web
development so let's take a minute to
hear it from our Learners who have
experienced massive success in their
career through a postgraduate program in
full stack web development learning is
growing and we not only decided to grow
together in life but learn and succeed
together as well I successfully switched
my career to post a Java domain with a
15 salary hike and I was able to grab
new opportunities in my current
organization and also receive a 10
salary hike hey I am swamijit Basu I am
a senior QA engineer at Encore Inc
of scaling together which simply learned
and certainly we made the right choice
after our marriage I had to relocate to
Bangalore and take a year Gap after
working 45 years but I decided to
restart my career again and make a
switch to software domain so I enrolled
myself in full stack Java developer
program from Simply learn seeing my
wife's passion for learning every day
inspired me to take up a course on
simply learn as well I've always been
passionate about technology and learning
devops was always in my bucket list when
I saw simply learns collaboration with
Caltech ctme I decided to take a course
on PG devops after the course I not only
switched my career to full star Java
development with a 15 increment in the
salary but now also I can work from home
since it's a software domain and being
the new mom that's the best thing one
could ask for to spend time with little
one during these early years
for me learning devops was fun and
fulfilling at the same time earlier I
had to rely on others at work but after
upskilling myself I single-handedly can
set up the entire blueprint on my code
base alone and get the desired output
and because of that I could grab new
projects in my organization with a 10
percent salary high we enrolled to
upscale ourselves when we were expecting
our first child so upscaling Journey
with simply learned would be undoubtedly
very special to both of us while doing
the course we did come across a lot of
challenges due to the pregnancy but my
wife showed me was a great inspiration
for me as she was handling it all
together and she kept motivating and
inspiring me all the way moreover the
recorded classes and the weekend class
helped us maintain the balance between
work and learning apart from work we
love to spend time with our little one
learning by simply Learned was quite a
fulfilling experience for both of us we
believe that good doesn't happen
overnight rather it's a journey of
several downstairs and upskilling is one
of them so let's go through the agenda
for this video we'll start this video
with an introduction to HTML and cover
all the important aspects of HTML
following that we'll cover CSS Concepts
that are useful for web development
we'll cover all the basics of cascading
style sheet JavaScript as we all know is
one of the most essential languages in
web development so we'll cover the
basics and intermediate level topics of
JavaScript
following that we'll cover JavaScript
Frameworks like angular and react.js in
react we'll cover topics like react
hooks straight props and many more
topics
we'll also take you through the
differences between angular and react so
once we finish this we'll cover the
differences between the front end and
the back end developer and finally we'll
take you through the roadmap to becoming
a web developer in 2023 we'll end this
video with interview questions from each
technology that we have covered in this
video
so without any further delay let's hand
over this session to our training expert
now what exactly is the basic web
architecture now web architecture is
made up of three essential elements
that's the website that is the front end
of a web application that is visible to
the user then there is the server which
constitutes the backend of a web
application and holds and manages all
the data and finally there's the IP
address that is the address assigned to
a website in order to be accessible on
the internet
first up let's have a look at what
website is so your browser starts by
loading the main HTML file and then the
CSS and JavaScript
the user interacts with the website and
is not concerned with the backend of an
application now secondly we have the
server once you've developed your
website you'll have to host it on your
server to make it accessible on the
internet
server along with the database contains
all the data of a website and
facilitates user interaction
lastly there's IP address which is the
third element of the web architecture
now website is hosted on an IP address
we put a domain name over that IP
address the same way we put names over
people's phone numbers
when you type a domain name in the
browser it will give you the server call
the server will then send over this
website to you
next what is HTML HTML is the most
widely used markup language for
developing and structuring web pages on
the internet
it defines the structure of websites and
formats these web pages
so what exactly is CSS then
now CSS is a simple design language used
for making web pages look more beautiful
and presentable
it can be attached to any HTML element
to style it or even position it
according to the developer's choice
then you must be wondering what exactly
is Javascript
now JavaScript is a powerful interpreted
language targeted for web development it
is used for making web pages interactive
and bringing the web pages to life
so now let's create your first website
now HTML short for hypertext markup
language is the coding standard for
documents designed for web browsers
consisting of a series of elements or
tags and which can be used to structure
a web page right so these elements can
include headings paragraphs div
containers tables and more HTML tags are
nested meaning there are opening and
closing tags with the content in between
those tags so now let's write a simple
HTML code that will help you understand
the basics of the language so for this I
am using the text editor that is Visual
Studio code you can go ahead and
download this text editor from their
official website so here I've created a
simple dot HTML file in my vs code and
I've added the initial HTML files
now let me explain to you uh one by one
now doctype is not so much of a tag but
it is more of an instruction now this
indicates the browser that the document
type to be served to the user is in fact
an HTML document
now this doctype instruction should
always be included at the very top of
your HTML page next up you have the HTML
tag that is used to contain all the web
pages HTML code right so it contains an
opening and closing tag with contents in
between them
the HTML tag can also have attributes
now for example there's the Lang
attribute allowing you to specify the
spoken language of the contents of the
page followed by the HTML tag there's
the head tag now this is the first
section of the code that contains all of
the information about the web pages
properties links and more it could have
Pages title description additional meta
tags and CSS code so here I've used the
title tag and let's give a title say
HTML
in 10 minutes
all right you can also add CSS to the
Head tag by using the style tag and
change the display styles of HTML
elements that are being used the next
section is the body tag now the body tag
contains all the displayable contents of
your web page including headings
paragraphs div containers tables and
more
now the HTML header tags are used to add
headings to a web page there are several
types of headings available for
developers to add to a web page right so
first up let's have a look at them I'm
going to create a simple H1 heading tag
and the message I'm displaying is this
is
the first heading
all right
after this I'm going to add a paragraph
tag which creates padding in the top and
bottom of the element to help separate
the text between each paragraph
right so I'm gonna add a P tag and Save
this is the paragraph tag
[Music]
after this let me add a simple h2 tag
which is
another heading tag and say this is the
second heading
[Music]
and also add line breaks which are
helpful from time to time if you want to
provide a single line break in your
content you can do so by adding the BR
tag so here let me just add one for
better understanding now the HTML div
tag defines a division or a section in
an HTML document that is used as a
container for other HTML elements now
these elements can include content areas
sidebars page bars page headers Footers
Etc
this tag is used to apply styles to HTML
elements that cannot be added otherwise
you can also make use of the HTML image
tag to add images to a web page now
these images in a web page are a very
common site and they can make the
website look more attractive so for that
we can use the image tag so say IMG
within which I mentioned the source
[Music]
adding the HTML logo so let me just
mention that here
and then I'm going to provide width for
it and then a specific height
all right so when you save the file and
when you look at the browser
you can see that the first heading is
displayed then your paragraph tag is
displayed followed by the second heading
and then the image now let me show you
how you can add styles for some of these
headings and paragraph tags so here in
back in my first heading tag let me just
say styles
and let me change the font
of the content that is being displayed
and I'm going to change it to Career new
and for my paragraph tag let me display
the content in italics so I'll say font
style and make it italics
so let me save this and when I look at
the browser
you can see that the font has changed
and so has the font style here
now that you have learned all about HTML
let's move on to CSS here we'll discuss
CSS selectors CSS Box model CSS grid
layout and flexbox CSS display CSS
positioning difference between flexbox
and grid and CSS background image and
colors then we'll move on to discuss CSS
keyframes and animations CSS Transitions
and hover effects CSS navigation bar
after learning this switch we look at
some tricks that come in handy when you
write the code after that we look at CSS
Advanced tutorials and responsive design
at last we learn some important
interview questions that are frequently
asked
what are CSS selectors
CSS selectives allow you to select and
style HTML elements selectors are used
to find elements based on their ID
classes types attributes value of
attributes and much more let's discuss
the most common selectors there are
several different types of CSS selectors
the most common of them are CSS element
selectors CSS ID selector CSS class
selector CSS Universal selector and CSS
group selectors so what is the CSS
element selector
the element selector selects element
based on the element name
this is a CSS selector it means it will
select all the P elements on the page it
will style all the P elements to the
central aligned having blue color
this is a CSS selector
it is set to P this means it will select
all the P elements on the page it will
style all the P elements to be Center
aligned having blue color
let's look at what it looks on a page
so as you can see all the elements are
centrally aligned with the text color
blue
CSS ID selector
the ID selector uses the IDU attribute
of an HTML element to find the specific
element
and ID should be unique within the page
so you should use the ID selector to
find a single unique element to find an
element within a specific ID use a hash
character followed by the ID of the
element
so here we have used the hash paraben so
all the rule will be applied to the HTML
element with ID equal to para1 so this
is an ID selector
it will be applied to all the HTML
element with ID is equal to para1 as you
can see it is applied to the elements
having the ID paragraph and all the
other elements are defaultly styled
CSS class selector the class selector
finds the element with a specific class
set by the HTML class attribute to
select an HTML with a specific class use
a period character followed by the name
of the class so this style will be
applied to all the elements having the
class name class 1. this is a class
selector it is denoted by a period
symbol all the elements having a class
named class 1 will be styled with
centrally aligned and color blue
as you can see the element having the
class name class 1 is tiled and all the
other elements are set to default CSS
Universal selector
the universal selector flips all the
elements on a page the universal
selected is assigned by a star character
the universal selector selects all the
elements on a style sheet as you can see
it is denoted by a star Mark all the
elements inside our web page will be
centrally aligned and the color will be
set to Blue as you can see all the
elements are centrally aligned and the
colors are set to Blue CSS group
selector in stylesheets there are often
elements using the same style to
minimize the code you can group
selectors to group The selectors
separate each selectors with a comma
here we have group selectors for H1 H2
and P
so style is applied to H1 H2 and P
elements only
it is better to group The selectors to
minimize the code
here we have group selectors P H2 and H3
so style will be applied to only element
having PS2 and S3
as you can see so all the elements of P
H2 and H3 are centrally aligned and
colored to Red in this video we will
discuss what is the Box model and its
various properties
we will also do an example to understand
the Box model better
so let's get started
every element that can be displayed on a
web page is comprised of one or more
rectangular boxes CSS Box model
typically describes how this rectangular
boxes are laid out on a web page
these boxes can have different
properties and can interact with each
other in different ways but every box
has a Content area and options
surrounding padding model and margin
areas
the following diagram demonstrates how
the content padding model and margin CSS
properties determine how much space and
element can take on a web page
the content area consists of content
like text images or other media it is
bounded by the content Edge and its
dimensions are given by the content box
width and height
the Border area is the area between the
Box padding and margin its dimensions
are given by the width and height of the
Border
the margin area consists of spaces
between the border and the margin the
dimensions of the margin area are the
margin box width and margin box height
it is useful to separate the element
from its neighbors
the padding area is the area
that includes the elements padding this
area is actually the space around the
content area and within the Border box
its dimensions are given by the width of
the padding box and the height of the
padding box
now let's jump to an example to
understand the Box model better
so we are on the sublime techno to get
started I have created a box theme
simply run background color pink the
font size 30 pixel and we have set the
border to zero solid green
let's see how it looks on our page
so as you can see we have a box named
simply learned with background going all
the way to the end
I have also removed all the padding and
margin from the page so that the boxes
are pushed just at the corner of the
page as you can see
let's start by adding a padding of 20
pixel to the Box
if you save the file you can see the Box
increased by 20 pixel from all the sides
Paddy characters inside the background
of an element it goes around the content
of the element most of the buttons
inside the CSS are designed using
padding so that the background of the
button becomes wider than the actual
text
the next thing you can do is change the
border of the element if you change this
border size to 15 pixel we will get a
nice solid background of color green
the Border goes around the padding of
our element so we have the 20 pixel of
padding around our content and 15 pixel
of border around the padding which is
around the content
now I will see the working of the margin
if you add 30 pixel of margin to an
element you can see the spacing on the
outside of our border
so let's add the 30 pixel margin and
refresh
you can see the spacing on outside of
the Border margin is used to space two
elements apart from each other
now let's change these values to see the
difference
let's make the margin 40 pixels
we'll make the padding 30 pixels
and let's keep the Border 20 pixels and
make it color red
spotty pixels
let's observe the changes
so as you can see our border now has a
red background the padding is 30 pixel
the margin is 40 pixels let's inspect
the elements to understand it better
the kikina inspect you can see the
different
styles here in the computer tab you can
see the Box model
this is a Content area this is the
padding area this is the border and this
is the margin area
we have the margin of 40 pixels around
the border so you can when you click on
this area you can see the margin gets
highlighted
the body area gets highlighted of 20
pixels this is the padding and this is
the content
you can change the size of the content
by adding the height and weight
so let's try adding height and width it
will give the height 50 pixels and will
give the width also 50 pixels
just save the file
now when you refresh you can see the
content Area 15 to 50. in this tutorial
we will discuss everything needed for
you to get started working with grid
layouts
we will start by discussing what is a
grid layout then we will move on to the
features of the grid system and some
basic terminologies which will help you
understand the grid system better
in end we'll work on an example to
understand the grid system
so let's get started
what is the grid
a grid is a setup intersecting
horizontal and vertical lines defining
the rows and columns
and what is the grid layout
so CSS grid layout is the most popular
layout system available in CSS
it is a two-dimensional system meaning
it can handle both columns and rows
unlike flexbox which is largely a
one-dimensional system
you work with grid layout by applying
the CSS rules to both the parent element
which became the grid container and the
elements children which become the grid
items
the CSS grid layout excels at dividing a
page into major regions or defining the
relationship in terms of size position
and layer between parts of a control
built HTML Primitives
you can see this is the basic layout of
a grid system
like tables grid layout enables an
author to align elements into columns
and rows
however many more regular layouts are
either possible or easier with CSS grid
than they were with tables for example a
grid container's child element could
position themselves so they actually
overlap and layer similar to the CSS
positioned elements
so here are the features of the CSS grid
layout
they are fixed and have flexible track
sizes you can create a grid with fixed
track sizes using pixels
for example this sets the grid to the
specified pixel which fits to the layout
you desire
you can also create a grid using
flexible sizes with percentages with the
new FR unit designed for this purpose
you can place the items into a precise
location using the grid line numbers
names over targeting an area of the grid
the grid also contains an algorithm to
control the placement of items not given
an explicit position on the grid
you can define an explicit grid with a
grid layout the grid layout
specification is flexible enough to add
additional rows and columns when needed
features such as adding as many columns
that will fit into a container are
included
it also gives you control of overlapping
content
more than one item can be placed into a
grid cell or area and they can partially
overlap each other
this layering May then be controlled
with the Z index property
so here the basic terminologies you
should know to work with the grid system
better
the grid line is the dividing line that
make up the structure of the grid they
can either be vertical or horizontal and
resides on either side of rows and
columns
a grid column is a space between two
adjacent vertical grid lines
the size of a grid column is determined
with a grid template columns property
on the other hand a grid row is a space
between
two adjacent horizontal grid lines
its size is determined by the grid
template rows property
the grid cell is the single unit of a
CSS grid
and in Grid design a gutter is basically
the width of the space between columns a
gutter Martin is a white space formed by
the adjoining inside margins of two
facing pages in a book or space between
columns on a page
so with this let's now move on to the
Hands-On demo and see how the grid
system works in actual world so we are
on the Sublime Text Editor open with a
project with some basic background
Styles and nothing inside the body
you can see this is a basic background
style we have pre-applied just to have a
good look of the Box model
we'll start by creating a container and
wrapping our grid items in it so let's
create a grid and give it a class name
grid container
and inside of it we'll put our different
grid items so we'll just create
different grid items and give them a
class grid item followed by a clock
number they belong to
so that we can easily distribute between
them
just copy paste this
five times
so we will have the five elements on our
page
let's save the file and see how it looks
on the page
so you can see we have the different
grid items on the screen so there are
easy for us to visualize we have not
applied any styles to them other than
the visual styles
so we'll go back to our code
let's go back to the CSL styling sheet
so to create the grid we'll open our
style sheet we need to display grid on
our grid container so we'll select the
grid container and set the display to
grid
it is save now
you will see nothing changes this is
because the grid itself doesn't Define
any rows and columns for us to work with
it just they give the alignment properly
therefore by default it looks just
exactly the same to make the grid look
actually great we want you need to do is
Define columns and rows for a grid
so to do this you will use a set grid
template and set the column if you want
to set the size of the column we'll set
the size to 100 pixel line 150 pixel
now
if you refresh you have the 100 pixel
column on the left and a 150 pixel
column on the right and then the grid
captures our next row
but what if you want a box to flexible
size themselves according to the items
inside of them here we'll use a fraction
in it so instead of a 150 pixel column
we want one fraction of our size and
instead of 100 pixel we want the two
factors of our size
so we'll just replace with two fractions
and this with one fraction
now if you save the file and go back to
the page
you will see the items on our left here
in our first column are twice as the
largest item on the second column and
that's because of the FR unit we have
defined
you can see the difference in the sizes
item one is the twice the size of the
item two
another thing you can do is with columns
is use repeat
suppose you want four Columns of a size
100 pixel wide you can just write repeat
command and inside of it how many times
you want to repeat the size
so we'll just delete this
and use the repeat
we'll set the number of times we want to
repeat and the size of the
columns
now if you save the file you will see we
have a four Columns of 100 pixel wide
we can do the same things for row just
set the grid template
rows and Define the size you want
now you can see we have the symmetric
size all around our container
if you don't know how large your grid is
going to be you can use the grid Auto
rows and this will determine the size of
all the rows that is added after the
template rows suppose we want all our
rows to be 100 pixels
so we'll just delete the grid template
rows
and set the grid Auto rows to 100 pixels
now you can see all the rows are now 100
pixel tall
let's change our column back to 100
pixel and 150 pixels
so that it will be easier for us for the
just delete this grid Auto rows
now we'll talk about the spacing of the
rows and columns apart from each other
we can do this with the help of the grid
grab property grilled row Gap will give
some spaces between the rows similarly
the grid column will give you the spaces
between the columns
now you can see the gaps between the
rows and columns
now we want the same value for both The
Columns you can use a grid grab property
and mention the space
we'll just delete these two
and instead of it we will use just the
grid Gap
and set the
size to 20 pixel
now you can see the evenly spaces
between the rows and the columns
foreign
this is all you need to know about the
sizing of the different columns and rows
now let's talk about the positioning
items within its grid cells so for
horizontal positioning we could use the
justify items and we can set that to
Center
so that centers each item within the
cell
by default it is set to stretch
you can also set it to start
or end
or space around
we will leave this to Center
to vertically position the content we
could use the Align items
the Ally items also accept the same
values
we can set it to Center
we can also set this one to start or end
just we'll keep this to Center as well
you can also align the entire grid
within the container
so let's get rid of these to just
demonstrate them in a proper manner
we could use a justify content and that
will align the content horizontally
within the container
you can also set this to start or to end
foreign
to align the content vertically we could
use the Align content and the Align
content also accepts the same value we
can set it to Center
or start
inspect the elements
you can see they are aligned centrally
between the container we'll just close
this
okay so this is everything you need to
know to get started with the grid layout
grid works very similar to the flexbox
but it allows you too much in terms of
laying your elements because of its 2D
nature in this video we will learn what
is a flexbox and how it is useful in
designing the layout of the website
we will also try to understand the
different properties of flexbox with the
help of an example
so let's get started
what is a flexbox
also called flexible Box model is
basically a layout mode or model that
provides an easy and clean way to
arrange the items within a container
if you are using a CSS for a while you
must have used the old block model where
you assign width in terms of percentage
or fixed width and then use the float to
arrange the items on the page
suppose for example you want to earn
three boxes in a row
then you have to enter everything
manually from width height and to
padding flexbox can do all these things
with ease
some of the concepts of flexible Box
model is the ability to alter the item
width and height to best fit in the
containers available in the free space
Flex model is the direction agnostic
which is different from the Box model
which is vertically biased and the
inline which is horizontally biased
flexbox works for both
flexbox is more Effectiveness small
scale layouts
so here are the main properties of the
flex
okay
so let's jump to some code and learn how
these Flex properties work
okay so we are in the sublime textator
to get started let's add a div inside a
body here and we'll give a class of
flexbox container since this will be the
container where all our flexbox item
will decide
then inside this container we will add
another div and give it a class flexbox
item and one more class flexbox item one
which will help us to understand which
items we are referring to when we style
our elements individually
let's just save the file and see how it
looks on a page
now if you save the file you can see we
have the box because I have already
applied some of the styles to these
flexbox items let's just see the styling
so you can see we have the items tiled
just a basic styling so that we get the
Box on our page
now let's just copy these and add two
more flexbox items and you will see we
have two more boxes on our page
just copy and paste them below
give them the class name flexbox item 2
and flexbox item three
just save the file
now you can see we have three boxes on
the page
Now to create a flex container
we will add display Flex to our Flex
container and this is how we create a
flex
box container
so here we'll just add
display Flex
just save the file
now you can see all the items are the
same height and they are all in the same
row you will also notice that if you
shrink our browser the items adjust
themselves accordingly to fit within the
browser
now if you want to style the elements on
the mean axis we will use the property
justify content inside of flexbox
container let's make it a center
save the file
now you can see the all the elements are
in the center of the page
another thing we can do is if we want
our layout to have a spaces between the
elements we will set the justify content
to space between
you can see all the items are now evenly
spaced if you want to layout your items
on the cross axis we would use the Align
items property
the default value for this is stretch
if you want to keep the size of our
items we will use the center and then
all our items will be Center vertically
before flexbox aligning the items
vertically inside the container was
nearly impossible with flexbox you can
do it easily
now you can see the items are aligned
vertically inside the container now
let's just delete everything and we'll
just keep the display flag
now if you want to have a column layout
instead we will use the flex direction
and change it to column select Direction
column now if you refresh the page you
will see all the items are shown up in a
column
now we can start talking about the
different properties that can be applied
to our different flexbox items as
opposed to flexbox container items the
text box contains only for laying out
and spacing between your items as well
as the positioning of your item inside
the container
the actual flexbox item properties are
used to override those item Properties
or to apply different sizing to this
element now if we want our first item
that it does not shrink when you shrink
our browser we'll set the flex shrink to
zero to our first item
so we'll set the flex
shrink to zero
now if you go back to the page
and try to shrink this
you'll see the first item Remains the
Same it does not shrink
now in the same way you can set the
items to grow in proportion with the web
browser suppose we want our Flex box
item to to grow with the as the page
grow and cover all the empty spaces so
we'll set this Flex grow to 1.
now you will see the all these empty
spaces are taken by the second item
let's say we want a second box to be the
center of the container instead of
stretching to full height we can use the
Align self property and set it to Center
now you will see that the alliances
property overrides the Align content
property of the container
you can see it is centrally aligned
so this is all you need to understand
and get started to work with the flex
boxes
I hope you guys enjoyed this video and
learned something new about the flexbox
and how you can use the flexbox to
create the dynamic layout for your site
in this video we are going to discuss
one of the most important topics of the
web development which is CSS display so
without wasting any time let's get
started
so what is a display property
the CSS display property controls the
layout of the element on the page
the default value of the display
property is block or inline
let's jump back to our Sublime Text
later to see the various display
Properties by using an example to get
started I have a really simple example
setup as you can see inside my HTML I
have the two paragraph tags and I have a
formatting with the background color of
sand color and font size 30 pixels
as you can see this looks like something
like this on the page
the very first property we are going to
discuss is the display block property
the drug display values make an element
a block element
the block elements start a new line and
span the entire width of the viewport by
default like how P elements behave
there are also line breaks before and
after these elements
the default value of the P element is a
display block
so here this looks something like this
what display blocks does is it means
that it is going to take the entire
width given to it
this is going to force a new line above
and new line below it so you cannot have
something next to here now if we change
here this to
foreign
[Music]
the next property we are going to
discuss is in line the inline display
value turns any element into an inline
element
these elements will appear on the same
line without breaks
now if it says here this to display
inline now all the P tags will behave as
an inline element
now if we go back to our page and
refresh
you can see now this is an inline
element
the inline element takes a minimum
amount of space possible as you can see
here the cyan color takes a minimum
amount of space to fit all the content
inside of this p
so this is what an inline element does
also all the inline elements are on the
same line
they share the space together because
they take the minimum amount of space
possible
there are no line breaks in these
elements and they try to fit as closely
as possible
now one of the demanded fear is we
cannot change the height and width of
the inline element
if you change here height
to 200 pixels
Android 200 pixels and Save
just go back and refresh you'll see
nothing happens this is because in the
inline display property you cannot
change the height and width of the
element
the next property we are going to
discuss is the inline block value the
inline block value is a hybrid of inline
and block element elements assign
display inline block appears on the same
line with the other inline elements a
characteristics of inline elements
however inline block elements also like
block elements in that you can change
the width and height of the CSS
now if here if you try to change the
height and width
of the element
just change this to inline block
now if you go back to the page and
refresh
you will see the height and weight
property works this is one of the major
difference between inline block and the
inline inline display property
the last name type of display we are
going to discuss is the display none and
this is the really straightforward
display property
you just delete this
and change the display to display none
now if you save the file and go back to
refresh you see both the element
disappears
the display name removes the targeted
elements and all its child elements from
the page this causes accompanying
elements to behave as if this element
does not exist
in this video we'll discuss everything
we need to know about CSS positioning
by the time this video is over you will
be able to position the elements in CSS
like a pro
so let's get started
first let's cover the theoretical part
here we will discuss what is the SS
position property and its different
types after that we'll jump to practical
example to learn how to work with these
properties
so let's get started
so what is CSS position property
the CSS position property allows you to
define the position of an element on a
web page the top right bottom and the
left CSS position properties are used to
determine the final location of the
element
there are four values that you can use
to set the position of an element on a
web page they are static fixed selective
and absolute
using one of the four values above you
can specify how an element should be
positioned you can also use the top
bottom left and right property so
further Define the element position on a
page so let's discuss each of the
properties individually
CSS static position
this is a by default position for HTML
elements
it always positions an element according
to the normal flow of the page
it is not affected by the top bottom
left and right properties
it is important to note that having a
static equation is the same as not
setting the position property at all
the next is CSS fixed position
the fixed positioning property helps to
put the text fixed on the browser
the fixed test is positioned relative to
the browser's window and does not move
even when you scroll the window
the next is CSS relative position
the relative position property is used
to set the element relative to its
normal position
the relatively positioned element
behaves the same way as a static element
except that it is now subject to the
values of the four other CSS properties
we will discuss each of them with more
detail in examples
now there is CSS absolute position
the attribute position is used to
position an element related to the first
parent element
that has a position other than static
no such element is found the containing
block is HTML
with absolute positioning you can place
an element anywhere on the page
now let's move on to the example to
understand each of the properties better
to demonstrate the properties I have the
simple example setup currently we have
three elements with just basic curving
Style we have not applied any position
style to them
now let's click on this
element 2 and inspect it
just go to the computed and type here
position to see the position of this
element
so you can see the currently the
position is static
static is a default value of all the
elements of the page in starting
the next position we'll see is the
relative position
it works almost in a similar manner to
static if you go here and change the
position to relative
you can see nothing changes
relative Act is the same as static with
the only difference is that the relative
allows you to change the top left right
and bottom of this element let me show
you an example
now if we change here to
left
20 pixel
and refresh
you will notice the elements move itself
to a 20 pixel from the left
let's set the top to 10 pixel as well
you can see the element has moved 10
pixel from the top and even overflows
the element below
position when applied with the top right
left and bottom actually takes that
element out of the document flow
so let's just reset it
next property we are going to discuss is
absolute position and this property gets
well along with the top right left and
bottom
so let's make this position to Absolute
and you can see the changes made due to
this by just
saving
the absolute value completely removes
the element from the document flow this
is useful when you want a particular
element to be a specific position but
you don't want to disturb the other
elements positioning
absolute position positions the element
inside the some parent container that it
can reference now just
let's shift the top to 10 pixels
you can see the movement of this element
[Music]
the absolute position always position
the element inside some parent container
that it can reference to now if we
change the hair body position to
relative now the this nav bar will
position the element according to this
body so if you go here and refresh this
you can see that this 2 is in relation
to with this container
and this is the relative is very useful
next is fixed positioning which is very
similar to Absolute positioning with
some differences
so let's change this to fixed
and just save this
now you can see it completely ignores
this relative positioning and goes
entirely at the top
this is because fifth position elements
are always fixed based on the entire
HTML element it has nothing to do with
the parent elements one unique feature
of the fields element is they stay in
the same place when you scroll
let's make the height here
to 200 vertical height
now if you scroll down you will see that
the element 2 will stay on the same
position
C
the two elements is stick to the same
position
but absolute does not work that way when
you change this here to Absolute
you can see it does not stay at the top
now
this is one major difference between
absolute and fixed
so that's it you can see the working
with the CSS position super EV in this
video we'll discuss the differences
between both the layouts and we'll
discuss which one you should use
I will also show you both the layout in
a practical example without diving too
deep
so let's first understand this Theory
CSS grid allows developers to construct
custom grids with more flexibility and
control than ever before
it is for two dimensional positioning we
got rows and columns here
whereas flexboxes for one dimensional
layout it is useful in allocating and
aligning the spaces among the items in a
grid container the flexbox layout
pattern makes it easier to design and
flexible and effective layouts
the grid is used for creating a more
complex and organized layouts on your
pages
whereas the flex items is used to design
the responsive Pages without using too
much of positioning or float in our CSS
code to work with the CSS grid layout
you have to add display grid property to
your element
whereas to create the flex container you
have to use the display Flex property
so this is the main difference between
the layout of the
grid and the flexbox
here in the grid layout you can see that
there are rows and columns with all the
header menu main right and the footer
included whereas the flexbox is only for
one dimensional positioning
now let's move on to the example to see
the working of the both the layouts so
here is the example of the web page that
does not have any function other than
some basic styling
here on the page we have a header which
is blue in color this is a sidebar with
a red background this is the main
content and this black color is a footer
of the page here you can see this all
these items are stacked on top of the
each other
in the code you can see um this is the
footer part of the page uh this is the
main content of the page this is for the
sidebar and this is for the header area
of the page
for The Styling part we have used some
basic styling just so as to understand
the example better
now we can turn the body into a grid by
setting the display property to the grid
so here under the body we set the
display to grid
just save the file and refresh
you can see nothing changes because by
default the CSS grid starts creating
rows automatically and adds the content
in these rows that's why it didn't
change
we can change it by adding the grid
template column property in our body in
our case we'll need two columns one for
sidebar and other for the main content
let's set the side area to 30 percent
and we'll keep the main area to Auto to
cover the remaining spaces
now if you save the file and reload you
can see the elements are broken into the
skills we created
we'll also Define the rows for our
header and we will use the grid template
rows
we'll set the grid template rows for the
header to 60 pixels
for the sidebar and for the main content
we'll set it to auto
and also for the footer we will keep it
60 pixels
now if you save the file and reload you
can see the elements adjusted in a 2d
manner just as we wanted
this shows the power of the grid and the
flexibility it provides to the developer
however we can see that the items are
not positioned properly in the header
and the footer
this is where the flex block comes into
play as discussed earlier flexbox is
about positioning elements in a
one-dimensional area
so what we'll do is we'll go back to our
navigation list class here
and we'll add display as Flex
now if you save the file and reload
you can see these are sitting next to
each other
by default the display sets them into
the rows
now we want the contents to be in the
center of the mean axis
so we will use the justify content and
set it to Center
you can see the items are now in the
center of the main axis
to Center them vertically we'll use the
Align items and set it to Center as well
this will position them in the center
across the axis
for this to work we have to specify the
height um so we'll set it to 100 percent
so now you can see the items aligned
centrally both on the main axis and the
cross axis
let's now add some spacing between these
items
so to give some spacing between we'll
add a margin to navigation item class
we'll set the margin to 0 for top and
bottom and 10 pixel to left and right
foreign
you can see we have the spaces between
the items in this video you will learn
how to set a background image on a web
page you will also learn some of the
basic properties of the background that
are used to set the image so let's start
by discussing the agenda for this
tutorial in this tutorial we'll discuss
what is CSS background image after that
we'll discuss some of the basic
properties of the background image in
the end We'll add a background image to
our web page by adding the code to our
text editor
so let's begin by discussing about the
background property of the CSS
the background image property specifies
an image to use as a background of an
element
the background is defined in the body
element of the HTML code
to add a background image on an HTML
element use the HTML style attribute and
the CSS background image property and
mention the path of the image inside the
URL attribute
there are several properties of the
background that are used to define the
image on a page some of the common ones
are background image background repeat
and background position
by default the image is repeated so it
covers the entire element
let's switch to the text editor and see
how we can add the background image to
our page so we are on the Sublime Text
Editor let's start by opening a style
tag
the background image is always set on
the body tag so type body and open the
curly braces
the background image is always set on
the body tag so open the body tag with
curly braces and start typing background
image
use the URL value of the background
image to set the path of the image
make sure the image is in the same
folder as of the HTML file here we have
our file nature3.jpj
so mention the path inside the double
quotes
save the file and let's see how it looks
on a web page
as you can see we have the image on the
web page let's format this image a
little bit we'll start by setting the
background size so type background size
and there are three values to the
background size first one is Auto
it will set the image as it is
save the file and let's see how it looks
on the page
as you can see the size of the images as
same of the original size
the color value will set the image size
that will be fit to the web page
as you can see the image is set to the
whole web page
you can also set the image size to
manual let's say you want the image size
of bit 500 pixels so
now as you can see the width of the
image is 500 pixels next we will set the
background repeat property there are
three values to background repeat first
is no repeat with no repeat value the
images will not be repeated on a page
now as you can see the images are not
repeated
second is repeat X it will set the
images to be repeated on x-axis
as you can see the images are now
repeated on the x axis
similarly repeat the images on the
y-axis
as you can see the images are not
repeated to the y-axis and there is a
default value repeat which will repeat
the images on the web page
so let's keep it to cover
so let's keep the background size to
cover and set the background repeat to
no repeat
let's save the file and look it on our
web page
now as you can see the image is fully
fit to the web page
let's add a text above our image to see
how it looks like
so I'll add a paragraph tag
and type some random text here
let's set the text color to red and
align it to Center
I'll type P and open the curly braces
I'll set the color to red
and I'll set the text align to Center
let's save the file and see how it looks
on a page
as you can see we have a text above our
image which is centrally aligned and the
text color is red in this tutorial we
will learn how we can add colors to our
page using different methods we will
start with discussing colors and then
see the hex value and RGB format of the
colors in the end we'll do an example to
understand how we can add colors to our
page
CSS uses the color values to specify the
colors on a page they can be specified
using predefined color names hex or RGB
format there are nearly 140 standard
color names hexadecimal is a 6 degree
representation of a color the first two
digits RR represents a red value the
next two are green value and the last is
the blue value
all the other colors can be created
using the combination of these three
colors there are several websites
available where you can know the hex
value of the different shades of color
as you can see the black color is
signified by hashtag and the six zeros
the red is hashtag FF and the four zeros
followed by it the RGB color value is
specified using the RGB property this
property takes three values one for red
green and blue the value can be the
integer between 0 to 225 or a percentage
as you can see the black color is
signified by zero zero zero the red by
25500 the blue
y00255 and the green by zero 255 0. now
let's move to your example to understand
how we can add the colors to our page
in this example we will see how we can
add colors in different ways to our HTML
so we are on the Sublime Text Editor as
you can see we have the standard
boilerplate ready with an H2 and a
paragraph on our page open the style tag
and make the font size of the paragraph
to 25 pixels so it is clearly visible
let's start by adding colors to our text
just by color names HTML supports nearly
140 standard color names
we'll make the color of the paragraph
green for that just type color and set
the color to Green
as you can see our paragraph is changed
to Green
let's try one more
this time we will add the color red
just refresh
as you can see the color is not changed
to red
there are nearly 140 HTML standard
colors that is supported by the web
browser
you can also add colors using the RGB
format there are many websites available
to know the RGB or hex value of the
desired color once that is HTML
codes.com
as you can see in the HTML course.com we
have the hex value and the RGB value of
the desired color
let's try one
we'll add this color with the RGB value
171 229 and 27 to our paragraph So for
that just type RGB and the color code
you want
as you can see the color is not changed
to our RGB value let's try one more
this time we'll use this RGB value to
our text
you can see the colors change to a
desired value
in this way you can use the RGB format
to change the colors
the next way is using the hex values
hexadecim is the six representation of a
color the first two digits are red next
one to a green and a last at the blue
value let's see how you can use the hex
values
as you can see the hex value for this
color is hash 31787f
we'll use this value to our text
to add the hex value you have to use the
hashtag followed by the color code
foreign
you can see that color is changed to a
hex value let's try one more
you can see the hex value for this color
hash f14a07
just copy the desired value to your file
you can see the color changes
you can also add color models to our
heading do that just mention the Border
style along with the color code
we'll add the Border color red to our H2
now you can see we have the border
around our S2
I hope you have understand how to use
the color values to your web page there
are mainly three ways by which you can
add the colors to your web page they are
hacks RGB values and the color names in
this video we will discuss what are
keyframes and how you can use them to
add animations to your page
we are going to discuss what are
keyframes and we'll try to understand
the syntax of the keyframes so let's get
started
the kpfs are used to specify the
animation code in the page they are used
to change the animation from one pattern
to another
keep in mind that the keyframes do not
have any selectors on them
they are not nested inside anything
they are on the root of the CSS page you
write at the rate keyframes and the name
you can name it anything you want we are
going to use that name later on to call
the selector in this case we are looking
at from N2 from implies the initial
State and to the ending State here in
this example the element will start from
0 pixel and will go all the way to 100
pixels so what we are going to do right
now is we are going to jump to the
keyframes and work out some examples to
understand the working of the keyframes
better so we are on the sublime text
later and this is a simple setup we have
created one HTML element name box and we
have a CSS body of trading 50 pixel and
the Box element is an inline block
background red with heightened with 200
pixels
and also I have an animation stat
declared on the box currently it's doing
nothing because it is calling keyframes
called my frames but we have not yet
created any keyframe we will discuss
what this animation line means at later
stage but right now I need those lines
to be able to export you to the
functioning of the keyframes
you can see we have a box on our page
with the color red and padding 50 pixels
around it we are going to write add the
keyframes and I am going to use the name
my frames then we'll write prompt
condition to have the starting State and
let's just keep the height 200 pixel and
then we want it to grow and we will set
it to increase till 500 pixels so let's
just create our keyframes
this is a form condition
we'll set it to 200 pixels
and we want it to grow till 500 pixels
just save the file
now as you can see our box is growing
all the way to 500 pixel and when the
animation is done it resets back to 200
pixel and starts again because the
animation is looping you can also put
multiple style declaration for example I
am going to write background pink in the
two condition
just save the file
you can see that the animation is
starting at red and ending at pink now
instead of saying from N2 we can also
say from zero percent to hundred percent
this is as same as doing from N2 but
what it enables you to do is you can add
something in the middle of here say 30
and we will make the color any different
so in the place of prompt we'll write
zero percent
and will replace two with hundred
percent
let's just add one more condition in
between say 40 percent
so at 40 we want the color to change to
say something uh
greed
let's save the file and see how it looks
on the page
so as you can see it starts with red it
turns to Green in the middle and then
all the way converts to Pink as you can
see there are lots of interesting things
you can do with the keyframes
all of the things that I am showing you
today are just like how this works to
really get a great understanding of how
it works you just have to open an editor
and start experimenting on it
okay so now let's go back to our code
and learn about animation property
so here we have the animation name my
frames
the animation name should be as same as
keyframe's name to work it properly
the animation duration specifies for how
long we want our animation to last in
this case two seconds
let's just change this to say
10 seconds
just save the file
now as you can see the animation is
going at a slower speed just to cover
the 10 seconds update
let's just reset it to 2 seconds
the timing function used to mention the
transition there are some keywords such
as easy and linear easy node and some
more the animation delay is interesting
to understand it means how long we are
going to wait once the animation is
triggered before the visual starts
happening
let's change it to 3 seconds
as you can see the animation starts
after the three seconds
iteration count specifies how many times
the animation should happen here we have
set it to infinite
which means animation will keep on going
let's change it to something say 5.
as you can see after the count of five
the animation stops
we'll set it back to infinite
animation learning State can be paused
or the running state in this video we
are going to break down everything there
is to know about the CSS animation
CSS animations make it possible to
animate transitions from one CSS style
configuration to another
animation consist of two components a
style describing the CSS animation and a
set of keyframes that indicates the
start and end states of the animation
style as well as possible intermediate
now to understand this better I have an
example so let's get started now
so we are on a Sublime Text Editor now
to get started I have a very basic
example with HTML and CSS
I have a parent element here
and inside this parent element I have a
div class child
so when you go back to the page it will
look something like this this pink color
is the parent element and the small box
with the red color is a child element
whenever you hover over the element the
child elements move from left side to
the right side of the parent
we want to talk about animation
in case there are two different ways to
animate one is the CSS translation
property which works well with only
simple animation
if you want to learn about CSS
translation property you can refer to
the last video on CSS transition
there is a full-fledged animation
property which is used for more complex
animation
I am going to show you how you can make
this simple transition into animation
for this example we'll make this child
element move all around the Box using
animation
so let's go back to our code
so just like the transition property we
have the several properties in the CSS
animation as well this consists of like
timing function fill in mode and several
other functions in the CSS animation
so to convert the transition into
animation all we need to do is write the
word animation and you write the
animation where you want it to happen in
our case here is our hover so we write
the animation here and as you write you
will notice that you have more
properties in animation than transition
in general you will write everything in
this animation keyword because it is
easier
you can write it separately as well like
animation delay duration animation name
but
we will use the shorthand property of
the animation
so we'll select the animation and the
first thing that the animation leaves is
the animation name so we will give some
name to this animation
say
example
this is just like transition we can
specify our duration in our case we will
use one second
so we have given the name of the
animation
will give the duration we can define a
timing function which will be ease out
this is all the code we need for our
animation
this line is same as writing this
individually like animation name
[Music]
animation duration one second
and animation timing function
which will be ease out
or let's say ease in
so for the better understanding let's
just remove the shorthand property and
use it individual properties
now just save the file
let's understand briefly what each of
these properties blue the animation
duration property defines how long time
an animation should take to complete the
animation duration property is not
specified no animation will occur
because the default value is 0 second
the animation timing function property
specifies the speed curve of the
animation
now comes the keyframes keep frames are
used to define the animation name we
come down here and write at the rate
keyframes
followed by the name of the animation
the keyframes has to be put outside any
selector
keyframes essentially determine what the
animation looks like between the value 0
and 100 percent
so at our animation we want to have this
Translate
so we'll write 100 percent
and we'll write
transform
translate X
100 and save the file
now when you save and go back to the
page
you will notice a smooth transition of
the animation
when you hover over
one thing you will notice that as as
soon as the animation is over the Box
goes back to the original place
the reason for this is all the process
happens inside this keyframe
this one
as soon as the animation is done the
default set kicks in
if you want this to stop in the
transform State like box should be here
is on the right side
we have to specify it in the animation
property we'll set the animation fill
mode to forwards so here
we'll set the animation fill mode to
forwards
just save and then when you go back to
the
page and refresh
you see the Box stops on the right side
and doesn't go back to the original
state
now that you have a basic understanding
of the animation and its different
properties let's work around our main
aim to move this child element all over
the parent element from this to this
side to this side to the side so here at
the keyframes we'll just delete this and
we'll start with zero percent
so here at the zero percent
we'll set the transform and translate X
to 0.
after that added 33 percent
we want
this box to move down so we'll work on
Translate Y
so
we'll translate the Y 200 percent
at 66 percent
we want both the x axis and y axis too
to move from here to this side
so we'll set
translate translate x 200 percent
and Translate
why two hundred percent
and finally at hundred percent
we want to translate X
back 200 percent
on the upward side so when you save and
refresh
you see we have achieved our Target
the child elements move all inside the
parent element
to wash it little bit more slowly let's
change the time here to three seconds
when you go back and refresh
you can see the Box move little bit
slower
so
with the animation property we can go a
step further we can tell our animation
how many times to repeat the order of
the animation
among other things
so the animation iteration count
property specifies the number of times
an animation should be played let's set
it to 3.
so here
you set the animation iteration round to
three
the animation Direction property is
defined whether an animation should be
played forwards backwards or in
alternate Cycles
so for the animation Direction we'll set
it to alternate
now if you save and go back
that's one
two
and three after the three count the
animation will stop and you must have
noticed that the Box were moving on the
alternate rounds
let's go back to see it again
this is the first cycle now it moves alt
on the other direction and now on the
other direction
so this is for animation you can see
animation property is as same as a
transition property with some more
functions answer properties you can add
more complex animations to the page with
the help of this animation property the
CSS transition property is the simplest
way to add the animation to our website
and in this video we are going to see
how to use it
so animation is a good way to catch
attention on the page and if done
properly it increases the user
experience
the most basic way to animate something
is by transition
according to the mdn definition
transition enables you to define the
transition between two states of an
element basically when the state of an
element changes such as hover Focus or
anything else you can change the CSS
property through a transition
there are handful of transition property
let's discuss what they are and how they
work
so we are in our code pen I have a box
that changes the color on the hobo
the first property that we are going to
start is with the transition duration
property
the transition division property
specifies how many seconds or
milliseconds a transition effects takes
to complete
so here I can write transition duration
and I can write here a number take note
that here we can enter time in
milliseconds or seconds I will suggest
you to use the millisecond since
JavaScript does not accept time in
second
so I will enter here 500 milliseconds
now
when you go here and hover over this box
you see the color changes from pink to
Green in about 500 milliseconds
let's change this to say two seconds
and see the difference
now if you hover over this box
you will see it takes two seconds to
change the color from pink to Green
[Music]
the next one we are going to look is a
transition property the transition
property sets the CSS properties to
which the transition effect should be
applied
suppose we want to rotate this box when
hovered over
so first we specify the transform
property here and we'll set it to rotate
45 degrees
now here we'll specify the transition
property and set it to transform
now if you hover over this box you see
it takes about 500 milliseconds for the
box to retrieve to 45 degrees while the
color changes instantly
suppose we set it here to 2 seconds
and Save
now you will notice the Box will take to
about 2 seconds rooted to 45 degrees
while the color will change instantly
you can see the difference here
now the next property is transition
timing function
the transition timing function property
specifies the speed curve of the
transition effect
the default value is ease ease means it
specifies the transition effect with a
slow start and then fast and then ends
slowly
suppose here
will set the transition
timing function
to ease
there are four major values for this
timing function they are e is linear
ease in and ease out
let's see one by one in detail
so the linear function specify the
transition effect with the same speed
from start to end
so if we change here to linear
you see it rotates with the same speed
from start to end
now if we change this to ease in
the easy specify the transition effect
with a slow start so now if you hover
over this
you see the Box rotate in the slow start
and then increases the speed at the end
the ease out specifies a transition
effect with a slow end
so if you set it to ease out
you see at the end the speed decreases
the last property we are going to
discuss is a transition delay the
transition delay property specifies when
the transition effect will start
the transition delay value is defined in
milliseconds or in seconds
let's set the transition
delay to two seconds
and just remove this
now if you hover over this box you will
see it will take two seconds to rotate
the box to 45 degrees
so you can see after the two seconds the
transition property takes place
now if we change here
to background
you see the Box will rotate instantly
while the color will changes from pink
to green after 2 seconds
so this is a transition property is it
as simple as it can be in this video you
will learn how to add interactive horror
effects to your elements we'll do an
example where we will create horror
effects to our buttons
so in this tutorial we will discuss what
is the CSS hover effects and then we'll
do an example to understand it better
so what is the CSS over effect
a CSS hover effect is a style technique
where the user interacts with an element
with a pointing device but it is not
necessarily activates it
it is triggered when the user hovers
over an element with a pointing device
now let's jump to an example
in this example we will create the hover
effects which will look something like
this we have different hover effects for
all the buttons
so let's get started and see how you can
make this all by yourself
so we are on the Sublime Text writer
create two new files index.html and
style.css where we will write our HTML
and CSS code respectively
start by linking the CSS file with the
HTML file
now we will add four anchor tags we will
specify the class name for each of them
so that we can style them separately
later
put all the anchor tag inside the div
tag and name the class
middle
we will name the class BTN vtn1 BTN vtn2
BTN btnc and BTN btn4
just copy paste it four times
foreign
as you can see we have the four text on
our page
with this we are done with our HTML path
now let's shift to CSS and design the
text and add the hover effects so in CSS
you will start by setting the margin and
padding to zero we'll also add the
background body color
as you can see the margin and padding is
now zero and we have a good background
color
now we will Design the buttons and give
them proper formatting we'll start with
the class middle
set the position to Absolute
the top property affects the vertical
position of a position element the left
property affects the horizontal position
of a coefficient element the transform
property applies a 2d or 3D
transformation to an element this
property allows you to rotate scale and
move the elements
as you can see the elements are now in
place
now let's format the buttons
set the position to relative
display block
will keep the color as white
font size 25 pixels
we will use the font family as
montessoret
keep the text decoration to none
we will set the border to two pixel and
solid
we keep the text transformation repeat
we'll keep the text transformation as
the uppercase
transition allows you to change the
property values smoothly over the given
duration
the before selector is used to insert
something before the content of each
selected elements
keep the position to Absolute
foreign
let's save the file and see how it looks
on a page
now as you can see all the elements are
in place with proper background and text
we have the padding and Border properly
formatted and now we can add the horror
effect to this button
now we'll add the hover effects to the
first button
as you can see we have the hover effect
on our first button ready
in a similar manner we can add the
effects to the second and third Button
as well
we'll just copy and paste this above
code below and make changes to this code
we'll set the width to 100 here
and hike to zero
we'll change it to height hundred
percent
just save the file and refresh the page
as you can see both the buttons have the
horror effects now
it's time to add the hover effect to our
third button
now we'll add the hover effect to the
button third
just save the file and go to the page
as you can see all the three buttons are
ready
now it's time to add the hover effect to
the fourth button
we'll set the color to Hash FFF
this will change the text color to red
when we hover over the fourth button
set the position to Absolute
foreign
to hash dcd159
will keep the Z index as -1
keep the transition to 0.8 seconds
foreign
set the height to 180 percent of the
page
now to add the hover effect
write the following code
just save the file
refresh
now you can see we have all the hover
effects on our Pro button
as you know the asset animations is a
powerful concept that is used to make
your web page engaging and attracting
visitors to your website
they make the user experience smooth and
entertaining
so in this video we are going to learn
how to create some cool CSS effects
using just HTML and CSS so without
further wasting any time let's jump to
our Sublime Text Editor so we are on a
Sublime Text Editor for our example
purpose I have used one image from an
unsplash.com I have created a simple
class div clock container for it now
let's go and style these images to get a
3d effect so first let's design the body
part
we'll set the margin and padding to zero
itself
we'll set the width to 100 percent
and will set the height to 100 vertical
Heights
we'll keep the display as Flex
and we'll align the items in the center
and we'll justify the content in the
center as well
now we'll design our container class
so for the container class we'll set the
position to relative
we'll set the width to 360 pixels
and will keep the height to 640 pixels
we'll set the margin top to 150 pixels
and will keep the background to White
we'll use the rgba format
we'll use the transform property to
apply a 2d or 3D transformation to an
element
so we'll use the transform and we'll use
its properties we'll keep this two
30 degrees
we'll set this Q to
say 25 degrees
and we'll scale it to 0.8
let's discuss more about this property
so
the translate profit defines the 2D or
3D translation the scale defines a 2d or
3D Traffic scale transformation
and this Q property is used to skew
transformation along the x or y axis
now let's design the images
we'll keep the position to Absolute
we'll set the width to 100 percent
and will keep the transition time
to 0.5 seconds
let's go back to our page and see how it
looks up to this point
so as you can see we have the images
aligned as we want
on a flat side
milk will create the 3D transformation
when we hover over it
so let's go back to our CSS file
so for the 3D effect we are going to use
the edge child property the entire
selector allows you to take a single
argument to describes a pattern for the
matching element indices in a list of
siblings
we'll design the eat image separately so
for the fourth image
we'll use the transform property and
will translate it to 160 pixels and
minus 160 pixels
let's copy this code
four times
okay we have to set the opacity as well
so we'll set the opacity here
to 1.
the opacity property says the
transparency of the element
just change that number of the nth child
elements so here we'll keep it to 120
pixels
minus 120 pixel will set the opacity
to 0.8
for the second element let's keep the
translate to 80 pixels
minus 80 pixels and we'll set the
opacity
to say 0.6
and for the last image
will translate it to 40 pixels
and minus 40 pixels and we'll keep the
opacity to say 0.4
so now when you save the file and you
will go back to the page
let's see how it looks
so if you refresh and hover over it now
you can see the image has a 3D over
effect over it there are four layers to
the image and we have
designed the opacity according to the
image layer
so this is a 3D image hover
the next property we are going to
discuss is a 3D perspective image
so for this let's use a new set of
images
so we'll go back to the unsplash.com
again
and let's select one image
this one looks critical
so let's copy the image address
and mention it under the image tag
just save
[Music]
now when you go back to the page
you'll see you have your image here
now let's add the 3D perspective Image
Design over it so under our CSS file
let's first design all the elements
let's keep the margin in padding to zero
let's keep the width of the container
elements 200 pixels
or say hundred percent
let's keep the minimum height to save
100 vertical Heights
and we'll use a background color of hash
333
let's design the image as well before
going back to the page
so we'll set the perspective to save
4000 pixels
the perspective property is used to
determine the distance between a z plane
and the user in order to give a 3D
positioned element some perspective
let's keep the width of the image 20
percent
to keep the position to Absolute
keep the left margin to 50 percent
and drop to 50 as well
we'll use the transform property
use the translate value of it to minus
50 percent and plus 50 percent
we'll use a transform style property and
set the value to preserve 3D
the present 3D indicates that the
children of the element should be
positioned in the 3D space
so just save the file and let's go back
to the page to see how it looks up to
this point
so as you can see we have the required
background image and we have the image
over
in a required position
now it's time to style our image
so use a transform property
and we'll rotate
we'll use the rotate X property of it
we'll keep it to 70 degrees
foreign
States
it results in the transform function
data type the transformation is that
size where three dimensional Vector it
coordinates with how much the element
moves in each Direction
let's set the Box shadow
to minus 80 pixels
60 pixels
15 pictures
and rgba value to
0 comma zero comma 0
.4 let's say
let's set the transition to all 0.4
seconds
it will set the transform style to
preserve 3D
so just save the file and let's go back
to our page to see how it looks up to
this point
so as you can see the image is flat for
and ready for 3d effect
now let's Design This 3D horror effect
on it
so for the 3D over effect
we'll use the cover property image
colon over
the image
will set the transform
rotate x 0 degrees
rotate red to zero degrees
and translate through to
zero pixels comma
zero pixel comma 0 pixels let's check
this once again
this is right
now we'll set the Box Shadow to
0 pixels 0 pixels 0 pixels
zero pixels and rgba
0 comma zero comma zero comma zero
just save the file
and refresh
now when you hover over it you will see
that the perspective of the image
changes
so this is a 3D perspective image
now there are many CSS effects that you
can design using these properties in
this video you will learn what is
navigation bar and its importance on a
web page
you will also learn how to create a
basic navbar using HTML and CSS so let's
start by discussing the agenda for this
tutorial
we will start with what is navigation
bar and why navigation bar is required
in a web page you will look at some of
the well-designed navigation bars on
websites after that you will work on the
code to create the basic navigation bar
using HTML and CSS so let us Begin by
discussing what is navigation bar
a navigation bar is a graphical user
interface intended to Aid the user in
accessing the information it is usually
placed at the top of the page a
navigation bar needs standard HTML as
the base navigation bars can be created
either vertically or horizontally
so what makes the navigation bar so
important
a navigation bar is an important element
of website design since it allows user
to quickly visit any sections within the
website if we have ever visited a
website without the navigation bar you
may have found it difficult to locate
the page you need you may have also had
to click back several times in order to
find a link to the next section you
wanted to visit
thankfully web designers became more
standardized in the recent years and
nearly every websites now include a
navigation bar keep in mind that you
want to keep people on a site to explore
further a well-designed navigation bar
is an important part of the user
experience now let us look at an example
of a navigation bar on a website we are
on the home page of Amazon website as
you can see this is the navigation bar
that has several elements on it as the
user clicks on these elements they will
be directed to the different sections of
the website the navigation bar allows
the user to easily boot through any
section of the website
by clicking on the best service button
you will be redirected to the best
sellers page on the Amazon
now we are going to create a navigation
bar with HTML and CSS that's going to
look like this
we'll have the following sections with
sub menus and some of them
make sure you have a text editor to
write the code I'll be using a Sublime
Text letter for this purpose we will
create two new files index.html and
style.css where we will be writing on
HTML and CSS code respectively
let's start by adding the standard
boilerplate
keep the title as CSS nav bar
link your CSS file with the HTML file by
using the link tag and hdf attribute
this navigation bar is going to consist
of a bunch of your tags which means an
another list and list items
let's create our first another list and
this will be our main menu of the
navigation bar
I have options such as home about
contact services and news so this is
going to be our main menu
foreign
let's see what it looks like right now
by opening it inside our browser
you can see it is just an unordered list
with no menu at this point let's go
ahead and add our sub menus home will
not have any sub menus but the about
list item is going to have a sub menu
add another UI tag inside the Ally tag
this will create a sub menu inside the
about item save the file
just copy paste it and paste it inside
the UL tag
name them as team
clients
careers and Legacy
just make the indentation properly
if you see this in the browser you'll
see that we'll have the sub menus inside
the about let's do the same thing for
contact just copy paste this whole
section and place them inside the
contacts list rename them according to
your wish and save the file
if you go back to the browser you will
see that we'll have the sub menus inside
the contacts as well
as you can see this is our complete sub
menus without the styling all the HTML
content is ready now we are going to
write the CSS for it in the CSS file
let's apply the background image first
because it will make the page look a
little bit nicer
I have my file on my computer make sure
the image file is in the same folder as
your HTML and CSS file I am using a
tech.jpg
and for the background size I will set
it to the cover which is going to adjust
it to the image screen and it's going to
cover the whole background of our web
browser
foreign
family as aerial
let's see what it looks like at this
stage you can see we have a background
image and the font is changed to Ariel
now let's make sure our unordered list
does not have any margins or padding by
setting it to zero
also put the list style to run because
we don't want to have any kind of bullet
under our listing
now another list list items they're the
main items that are going to apply the
style to the list items of the main URL
tag
float that all the text to the left
foreign
formatting
we will set the background color with
the hash
value003542 you can choose your own
value from our website known as color
picker.com
we will fix the line height to 40 pixels
this will Center the text vertically
text align to Center
this will align the text horizontally
and font size to 20 pixel
font size 20 pixels
let's see what it looks like now you can
see the text is floated to the left
now let's tell the actual menu link so
the menu link will be ulia
foreign
to none and color white
keep the display as block
now it's time to set the hover effect of
our array the urli hover will set the
formatting when the user hovers over the
menu
we will use the background color of the
hash value de1 FCB
foreign
save the file and let's see what a page
looks like up to this point
you can see we have the hover effect
over our menus and we have the sub menus
under the main menu we want our set menu
should be visible only when we hover our
menus so we will set the UL alike to
display none and we will set the hover
effect to the block
let's save the file and see what our
page looks like up to this point
now you can see our navigation bar is
ready
with all the sub menus and menus at
proper places we have this nice hover
effect over the menus
in this video we will discuss some cool
tricks that every web developer should
be familiar with and which will help you
during the time of your designing of the
web page so let's jump onto the Sublime
Text Editor and see these tricks so the
first trick is called the CSS blend mode
the CSS background blend property sets
the blend mode for each background layer
and you can blend it with image or with
different colors with the help of this
property we can blend background image
or blend them with colors
so here's an example of the CSS blend
mode here you can see the images are
blended with different colors
so let's see how we can achieve this
so for our example purpose I am going to
use this image
to our page
so in the body tag add the image URL and
the location of a file
keep the margin left and margin right to
auto
now let's add some style to a body tag
in the blend mode there are several
modes such as normal multiply darker and
lighter or screen
let's blend that image with one color so
you can select the color from this HTML
color codes I'll use this color for my
purpose so just copy paste here
and in the background blend mode let's
keep it to lightened now if you save
and then refresh here
you can see we have Blended our image
with color
let's go back and change here something
different
let's keep it to docking
let's try something friendly let's keep
it to screen
so as you can see there are several
properties for this blend mode and you
can use according to your needs the next
trick is called clipping the CSS clip
Pass Property creates a clipping region
that specifies the region that should be
shown on the page so let's understand
this with the help of an example here
we'll create a div
and give this class any class say TR
the easiest way to generate the clip
value is to use a generator
there are several websites that give the
value of the clip
so we'll use this
website to generate our clip value
suppose we want a hexagon shaped
image on our page
so here you can adjust it according to
your needs
the any shape that you want
here you can see the clip value just
copy paste it from here
now here we'll use that class that we
are specified
we'll just copy paste the clip value
here
we'll keep the height to say
50 or less than 60 percent
set the width to 60 as well
thank you
select the color you want to give to a
clipped image I'll use the same color
from the previous example
so just copy paste this color code
keep the position to Absolute
and Z index to minus 1.
just save and go back to the page and
refresh
now you can see we have the clipped
image on our page let's try something
different
um let's say I want
a left Arrow
so just copy paste this clip
value clip path value
[Music]
just save the file
and you can see we have the arrow on our
page another must-have for web
developers is animations
CSS allows us to animate almost every
property that we use in the CSS
let's look at one example so here an
HTML file we'll just add one div tag
first
and to start with animation we'll have
to mention a keyframe the keyframes
allows us to create different steps for
our animations
we'll keep the keyframes name to Blink
so here in this example we'll create a
box and we'll add different colors at
different points of animations right so
we'll write zero percent and we'll set
the background
to Indigo
which change the colors five times so
just copy paste this code five times
we want next change at 30 so we'll set
the background here
suppose say red
at fifty percent we want it yellow
at 70 we want it green
and finally we'll change it to say blue
so inside the div tag we'll mention the
height and width of the Box first let's
say 400 pixels and width also 400 pixels
now I'll mention the border of the box
so just set it to say one pixel
solid black
now for the animations part
foreign
for 10 seconds and for infinite number
of times
write this webkit so as to support in a
Google Chrome
now just save the file and go back to
our page
and here you can see we have the
animation on our box
you can style each and every elements in
HTML using animations
another thing you can do is add PSS
gradient the CSS gradient property
allows you to add smooth transitions
between two or more colors
for this purpose you can get the
gradient value from a website called CSS
gradient.io
here in this website you can get the mix
and match other different colors you
want to use let's look at one example to
understand better
so here in this HTML file first let's
set the height
so we'll set the height to 100 percent
now inside the body tag
will keep the height as 100 percent
will mention one background color
let's select different color this time
so we will use save this color
this time
just copy paste the value here
now for the gradient value just go back
here in this website and you can select
the color you want
let's say I want a mix of this color
and you can change the shades from here
now when you're done with the colors
just go back below and copy this
code here
to your page
now when you go back to the page you'll
have a beautiful gradient here
let's try one more
this Tamil linear gradient
just copy this value to your code
just save the file and go back to the
page
and we'll have a linear gradient here
in this video we are going to learn some
of the more advanced features that can
be used to optimize your web page and
add some extra features to it
so let's get started so the first
function we are going to discuss is CSS
sudo class
is a keyword added to a selector let's
specify the special state of the
selected elements
solo class lets you apply a style to an
element not only in relation to the
content of the documentary but also in
relation to external factors like
history of the Navigator the status of
it content or the position of the mouse
like hover which lets you know if the
mouse is over an element or not
so the first sudo class we are going to
discuss is CSS hover
this pseudo class is used to add a
special effect to an element when our
Mouse pointer is over it
let's work an example to understand how
this works
so we are on our Sublime Text Editor and
we have added a standard wall update to
it
so first I'll create a box element
s
foreign
box
[Music]
foreign
let's save this and see right now what's
the status of our page
so as you can see we have this simply
learn tag and the heading that we have
given and the color changes when you go
over me now add a style tag to define
the
styling of the box
so
we'll keep the background color of the
box as
pink
it will keep the width to 300 pixels and
height
to 200 pixels
we'll set the margin to auto
the font size to 40 pixels so that we
can see the text clearly
and will align the text to the center
just save and go back to the page
foreign
we had this box with the tag the color
changes when you go over me
now to add the hover effect you just
have to mention the class with semicolon
and hover so we'll mention the class box
the semicolon and Hoover
we'll mention the background color to
which the Box will change any whoever
Mouse
so we will keep the background color to
say a CN color
just save and go back to the page
so if you refresh and when you hover
over it you can see the color changes
so this is how the pseudo overclass
works
the next photo class we are going to
discuss is an active solo class the
actors for the class represents an
element that has been activated by the
user either while pointing a device or
by a touchscreen device
let's work on an example to understand
how to use the active class to change
the color of active elements the
possible values could be any color name
in any valid format so we'll use the
same example with some minor changes
first
let's change this text here
keep it to click
click here
will keep this part as same and instead
of over here we will use the active
pseudo class so
type active and we'll keep the
background clear to cyan
let's text align this H1 to the center
when you refresh and go back
so
you see here it is click here to see the
effects now
to see the difference now you can see
when we are hovering over it the color
does not change it instead of it when we
click on it the color changes
so this is how the active over class
works the next Advanced Property we are
going to discuss is a CSS pseudo
elements
a CSS pseudo element is a keyword added
to a selector that lets you style a
specific part of the selected element
you can use one pseudo class element in
a selector
it must appear after the simple
selectors in the statement
as a rule double colon should be used
instead of a single column this
distributions the similar classes from
the super element so the first to-do
element we are going to discuss is the
first letter Studio element this pseudo
element applies tied to the first letter
of the first line of the Block Level
element
let's work out an example to understand
this better
just delete everything
so let's add some content to the body
and we'll add an H1
which says welcome
to
which says this is an example
of first
letter
let's add a style tag
we align the text in the body to the
center so we'll use text align
foreign
Center
let's just give proper spacing here
now to this H1 tag will add the first
letters below so to add the first letter
sudo element just use the double colon
and type first
letter
we'll keep the font family of the first
letter as say lucida
calligraphy
there's a spelling mistake
we keep the font size to 370. meters
we keep the color to red
and just add a text shadow
a better animation
so we'll keep the text Shadow to Pi
pixels
and pixels and color cyan
foreign
go back
just refresh so this WC is a first
letter pseudo element
as you can see we have changed this
first letter with the proper shadowing
of a c and color and a different font
size
so this is how the first let us
pseudo element works
the next one we are going to discuss is
the before pseudo element
the before pseudo element can be used to
insert some content before the content
of an element
let's work out an example
so just add the standard boilerplate
inside the body let's add
welcome to Simply learn
we'll add the text inside the Q tag the
Q tag defines a short quotation so
inside the Q tag
we'll add welcome
to get closed
to and away
and again Q tag
now that we have the text inside the
body let's add the styling
foreign
so we'll keep the font size of all the
text 230 pixels this is the all selector
we have used
font size 30 pixels
now before the text we are going to add
some symbols so we'll use double column
Q before
we add the content
will keep the color of this
symbol to Blue
and we'll use the after pseudo class to
add the content
like this
we'll keep this color to red
now that we have everything in place
let's go back to see how it looks
you can see the symbols before and after
our text
so this is how the before Studio element
works
so the next function we are going to
discuss is CSS loader
the CSS loader is an animation that
shows the visitor about the page when it
is loading it is helpful when a page
takes some seconds to load the page
content it is similar to
the so let's see how to create a loader
so I hope you remember the concept of
the keyframes and animations
if you want to revise the concepts you
can watch the previous videos on the
keyframes and animations from the
playlist
so
let's create the loader
we have the standard boilerplate
so inside the body tag just add the
center tag and inside it it will add one
H1 which says
welcome to Simply learn
we'll add five div tags with a class A1
A2 A3 A4 and A5
just copy paste it five times
foreign
let's open our style tag
inside our style tag we'll first add
color to our H1
so let's keep the color of our H1 to
Orange
now comes the div tag so for the dip
tags
to play to block
keep the position to Absolute
we set the width and height to 10 pixels
each so with 10 pixels
and height 10 pixels
we'll use the calc function to determine
the left margin so to use the calc
function that add CLC
50 percent
and minus 1 em
the calc function performs a calculation
to be used as a property value
we'll keep the Border radius to say 1.3
em
is related to the font size of the
element
1.3 em means 1.3 times the size of the
current point
we'll use the transform origin function
with the value 1.3 em
and 2 here
the transfer margin property allows you
to change the position of the
transformed elements
2D Transformations can change the X and
Y axis
and keep the animation to rotate
will keep that animation iteration count
infinite
I will keep the animation duration to 2
seconds
let's save and go back to the page to
see how it looks at this point
so as you can see we have our heading
and you cannot see it but we have a
loader ready
and we just have to add some keyframes
and animations here
so
let's define
frames
with the name of the animation rotate
so at the zero percent
we'll use a transform
function to rotate it to
zero degrees
just copy copy this
100 when it's complete it will rotate to
the complete 360 degrees
so here we'll give the relative degrees
now let's return each of the
classes here that we have defined so
dot K1
the animation delay
will be of 0.1 seconds
so for each of the classes that we have
here we have to Define them with a
different color so that when the loader
appears we can see them clearly with the
different colors so for this
A1 let's keep the background color to
say cyan
just copy paste it
so that you don't have to write a code
again and again
three four and five let's make changes
here so for the A2
wanted to appear after 0.2 seconds
with the color pink
let's equals to 0.3 seconds
Color Purple
foreign
seconds so that the loader appears in a
complete sink with each other
so just save the file and refresh and go
back to the page
now you can see this is the loader we
have our heading and this is like a
buffer and it will show when you have
some content to load
in this tutorial we are going to discuss
what is responsive design and how we can
achieve this using the CSS media queries
so let's get started making a website
with an adaptable layout is called
responsive web design and CSS media quiz
are one of the most important part of
responsive design
in the past building a website was much
simpler today a Website Layout should
adapt itself not only to computers but
also to tablets mobile devices and even
TVs so let's see how we can create
responsive web layout using CSS media
queries with the help of an example so
here we have a Sublime Text writer we
haven't asked our standard wallet ready
to create something
so let's start by creating the food divs
here
we give it a class name box
with an ID box one
we'll name this windows
just copy it four times
let's rename this ID to box two and here
we'll type Mac OS
for the Box 3 will have
linen and the box or
we will have Android
let's add some styling over here
we'll just open this time tag
I will text align the textures we send
the text align to Center
uh we'll set the background color
select some color
so we go to the circle fellow course
choose a book seller
distance
you set the text color to white
and we'll set the font size to say
something different
and just save the file let's go back to
refresh the page
let's do this
so now you refresh you see we have our
games with Windows Mac OS Linux and
Android and with this background color
so to design a responsive web pages use
the media queries so what are media
query let's first discuss this
so a media keys are used when you want
to customize the website's presentation
according to the user screen size with
the help of the media queries you can
display different markups based on the
device's general type mobile desktop
tablet to name it
is a logical operation whenever a media
query becomes true then the related TS
is applied to the Target element
so to start the video query just type at
the rate and media
now here we'll mention the max width
to save 400 pixels
and in status media query you write the
CSS code that should taken effect when
this condition is satisfied
so here
will set the box one
[Music]
play block
now
if you go back to the page and you
refresh
you see nothing happens because we have
not made this display To None So first
go back to the CSS code
and set your display to none
now you can see we don't have any
display here so let's inspect the page
first
so you see we have a contents here now
you can see this is the layout we are
currently using the current width is 685
pixels into high 255 pixels
now we are set here Max bit to 400
itself this means if this width
decreases to less than 400 pixels how
this CSS score will kick in so let's
decrease the width here
so as you decrease
this way
you see as soon as you get less than 400
pixels our CSS kicks in so we have our
Windows displayed here which is the box
id1 so this is how the media query works
let's add some more media queries to
understand it better so just copy this
code down
so now let's set this minimum width
to
401 pixels
to say 600 pixels
now when this condition is true let's
say we want our box to
to display block
with color green
so this is the background color here
to place say green
now we will add one more media query
so just copy this code
paste it here
so when the grid is from 601 pixels to
stay
800 pixels so we'll set the Box 3
display
to block and color
to clicking
so just save this and let's understand
it
on the page
so
let's change the width of the screen
so see as soon as the width goes less
than 400 pixels we have our windows on
display now we're going to increase the
width size
101 pixels we have the Mac OS display
keep on increasing it
now see the width is more than 1500
pixels and we have a Linux on display so
this is how we create the responsive web
design for the different devices also if
you want to become a full stack web
developer then the postgraduate program
in full stack web development in
collaboration with Caltech ctme can help
you accelerate your career as a software
developer check out the link mentioned
in the description box below JavaScript
was developed in the year 1995 by a
person named Brendan Ike Brandon was
working for Netscape Communications
while he developed JavaScript in 10 days
there were a few changes in the name of
JavaScript initially it was mocha which
was later changed to live script and
then it finally became JavaScript the
start of JavaScript wasn't that good as
so many developers who were using Java
at that time
they considered JavaScript as a language
for designers and non-engineers no one
ever knew that this small side scripting
language would have a great future today
more than 90 percent of the websites out
there they are using JavaScript somehow
many of you guys gets confused with Java
and JavaScript let me clear it for you
that both Java and JavaScript they are
different languages they have almost
nothing in common many people say that
JavaScript was named after Java as a
part of a marketing strategy to gain
wider acceptance and recognition in 1995
Java was a buzzword when JavaScript was
developed that's why they renamed
JavaScript after Java let's move on to
what is Javascript
have you guys ever been through a
website where you can see images that
slides automatically one such website is
Amazon the home page of Amazon where we
can see different types of ongoing sales
is an example of JavaScript
in Layman language JavaScript is a
lightweight scripting language used to
make web pages more interactive and more
likely earlier when JavaScript was
developed it was only a side scripting
language to do basic tasks like you can
add pop-ups in your web page or you can
make your web page more interactive
nothing more than that but now the whole
scenario has changed with the help of
JavaScript we can create applications as
well
if we talk about applications let's take
an example let's suppose we want to
create an app we can create it in
Android or in iOS but we have to learn
few different languages to create those
apps for Android we have to learn Java
and XML and Swift We have to learn for
iOS but with the help of JavaScript you
can create hybrid applications which can
work on any platform without any problem
Tech giants like Google PayPal Amazon
and YouTube they are using JavaScript
these days the evolution of JavaScript
in the past few years was unbelievable
suppose you want to create a single page
website every one of us is familiar with
Gmail let's suppose so Gmail is a single
page website which looks more like a
desktop software than a website so Gmail
is based on angular.js it is a popular
framework by Google which is free of
cost and it is totally based on
JavaScript now let's go over some of the
features of JavaScript these features
are actually why it is considered that
using JavaScript is advantages over
other languages
so let's start some of these points
JavaScript is not a proper programming
language indeed it is a scripting
language
which works in the runtime environment
just like python so there are few other
languages like C plus plus and Java they
need a compiler to work but with
JavaScript you don't need a compiler
once you are done with the script it
will interpret and show you the output
in the browser directly next up is
lightweighted Javascript can provide
programming facility to some extent in
JavaScript you don't need to specify any
data type or return type which helps in
making development more quicker that's
why it is known as light weighted
JavaScript is both client-side as well
as server side technology client-side
technology runs on the user's computer
whereas the server side technology runs
on the web browser initially when
JavaScript was introduced it was
introduced as a client-side technology
but with the introduction of node.js in
2009 one can now work in the back end as
well
there is a way to validate the user's
Data before sending it to the web server
and we can do that with the help of
JavaScript the data will be checked for
correct form and value
all we have to do is start a loop give
it the condition
to check the data JavaScript is also
platform independent although originally
designed to work on browsers only but
now it is a platform independent
language which means once you are done
with the script you can use it on any
browser or platform without any problem
JavaScript is an object based scripting
language although many programmers do
not consider JavaScript as a true object
oriented programming language due to its
lack of class concept it does support
other features of object oriented
programming like it supports
encapsulation it supports polymorphism
and also it supports prototypal
inheritance
the last but not the least feature of
JavaScript is case sensitive so when it
comes to keywords identifiers names and
functions JavaScript differentiates
between capital and lowercase letters we
have to keep this in mind while
programming
now I will quickly go over some of the
JavaScript applications where JavaScript
is currently being implemented first one
that comes to every person's mind is web
development it was also the main motive
behind developing JavaScript we have
Technologies like angular we have
node.js we can create beautiful web
pages also JavaScript can be used along
with HTML and CSS to make those static
looking web pages more engaging if we
talk about other applications of
JavaScript we can use it in app
development either mobile app or web app
like we took the example before that how
hybrid apps made with the help of
JavaScript can take over traditional
Android and iOS app one of the most
important and unique application of
JavaScript is in smart watches the
bangle.js is an open sourced Smartwatch
powered by JavaScript Gordon Williams
the man who is currently working on this
project it is said that this new open
sourced stack built around JavaScript
will replace the onboard firmware soon
the next application of JavaScript is
client-side validation as we discussed
earlier JavaScript is used to validate
the user data whether the user's input
is correct or Not by cross checking it
with the given condition like the user
wants to enter in your website and you
want it to be a user with at the rate
gmail.com in his email ID so you will
give that condition to JavaScript and it
will cross check it with the user's
information like when the user will try
to enter in your website it will check
that if at the rate gmail.com is there
or not in the user's email ID
so it can validate the user also apart
from that one more application of
JavaScript is game development
JavaScript can be used to make fully
fledged 2D or 3D games using different
libraries although most JavaScript game
development focuses on creating games
used in browsers only
till now we have an idea about what
JavaScript is its features and its
applications so if you want to learn
JavaScript you need to do some basic
things to make your learning experience
more smoother let's take a look at the
prerequisites to use JavaScript the
first one is the basic knowledge of HTML
and CSS to use JavaScript along with
HTML and CSS you first need to know how
HTML and CSS Works see HTML is used to
create the structure of a web page while
CSS is used to style that web page in
order to use these two with JavaScript
you need to have the basic knowledge of
HTML and CSS because if you want to
learn a new language first of all you
need to know why to use that technology
and to learn JavaScript more efficiently
you need to have the basic knowledge of
HTML and CSS it's better to have a web
browser that supports JavaScript like
Google Chrome or Mozilla Firefox or you
can use Safari as well if you are using
a MacBook you will need an operating
system like Windows Linux or Mac
operating system to learn JavaScript a
computer with minimum 512 MB of ram
would be enough for you to start
learning JavaScript but I will recommend
you a computer with 1GB of Ram or 4GB of
RAM for a better experience you can use
any text editor you have notepad which
is free and is already available for
Windows if you don't want to use notepad
you can use other free softwares like
sublime or you can use visual code in
this particular course we will be using
visual code and I'll tell you how to
install visual code and what are the
features of visual code also suppose you
do not have any prior knowledge about
JavaScript don't worry about it we will
take you through the whole course and we
will ensure that you can understand
before moving forward to statements and
comments here to take a note
while you are performing any calculation
let me show you see if you are
performing any calculation let's copy it
from here and paste it here
so yeah if you want to perform and let's
add two numbers like we want to add 45
and
we'll add let's say 5. we will save it
and here you can see the answer is 50
here right so if you want to perform any
calculation you have to write as it is
you can't write any calculation within
inverted comma or double inverted comma
let's try this if you want to write any
calculation within a single inverted
comma the moment you save it it will
print it as 45 plus 5. what the browser
will do the browser will interpret it as
text and print it as it is so there will
be no change so keep that in mind take a
note of it and we are done with it right
now so let's move on to statements in
JavaScript so guys whenever you use any
programming language you give the
computer
some instruction to perform any task or
activity that's common in all
programming languages present out there
like you are giving computers a few
instructions to do a particular task
these instruction you are giving to the
computer are known as statements you see
the code written over here this
document.write function is an
instructional statement given to the
computer to write something on the
browser like if you are writing hello
world inside this function it will print
it in the browser as it is and same for
addition subtraction multiplication and
whatever you are writing inside it it
will basically print it on browser like
let's suppose if we write here something
else
let's suppose we write here inside
double
inverted comma
welcome to Simply code we save it we are
basically giving it the instruction to
write this on the browser so what it
will do it will write it as it is on the
browser these are the instructions we
are giving to a machine to perform a
basic task or to perform a certain task
so if you are writing a whole program
for designing a website or for anything
you must be using more than one
statement you will use a lot of
statements in a single program
so all these statements are separated by
semicolons like here you can see after
every statement I have written a
semicolon it's necessary let me show you
an example see we'll remove this
statement and we'll copy this line and
paste it in the next line and write
something else here what we can say this
is our first program we will write like
suppose I have written it I'll give it
the semicolon here the moment I'll save
it see you can see here it's written
that hello world the first statement
statement is interpreted and written
over here then second it come to welcome
to Simply code see here you can see that
I have not written any semicolon but
it's still showing the output
so let me tell you something interesting
so if you remove the semicolon from any
of these statement here it will work
fine which means JavaScript will forgive
you for these small errors you do but
it's always a good practice to put a
semicolon after every statement because
while writing a whole program in future
you will use n number of statements and
let's see what happen if you try to
write more than one statement in a
single line without any semicolon let's
do this thing here write more than one
statement in a single line and I'll save
it see it won't work the moment I put a
semicolon here and save it it will work
fine
so that's why I am saying that it is a
good practice to use semicolon after
each statement
hope you guys are getting this let's
move on to comments so a comment is also
common for almost all programming
languages it's a line in programming
language which do not have any effect on
the output of the program see it stays
there in the code but it does not affect
the output by any means a comment may be
a multi-line comment or a single line
comment as well to write a single line
comment we just use double slash in
front of that statement like here if we
see the output is Hello World welcome to
Simply code this is a first program so
to make this first statement a comment
what we'll do we'll use two forward
slashes in front of it and it will
become a comment so the moment we will
save it this hello world is disappeared
from the output
so this is how to use a single line
comment a comment won't affect your
program by any means let's move on to
multi-line comments to write a
multi-line comment you have to use
forward slash along with the asterisk
sign see if you want to make these two
line cells comments to end a comment we
will use asterisk sign with a forward
slash these two statements are comments
now so the moment you will save it
welcome to Simply code is also
disappeared from the output that's how
comment work they won't affect your
programs output but comments are very
useful in programming it's just a note
for the programmers to remember what
they did at that particular part of the
program suppose you write a program see
here the programs are not that large and
the coding is not that much but in
future when you write a program maybe
the program will be of more than 500
lines or more so suppose you write a
program with more than 500 lines and
come back 20 days later so at that time
you can't go through the whole code this
is where comments will help you in
JavaScript it will help you to remember
what you did at that particular part of
the program you can use that stuff later
again and again according to the way you
want to before the introduction of es6
or ecmascript we can say which is the
updated version of JavaScript variables
were declared using a single keyword
only which is where we'll try to declare
a few variables here we'll see how well
keyword works
so let's comment this thing first
so let's declare a few variables let's
suppose where a equals to 15 we will
declare
where B and the value of B will be 6 we
will declare where
C and the value of C would be a plus b
so here we have defined three variables
a b and c
a is a variable with value 15 stored
inside it and so is B the value of B is
6 but C is a variable that will contain
the value of a plus b let's try to print
this on browser
document dot right
and we will print the value of C
save it and here you can see the value
of C is 21.
that's the correct answer so similarly
you can also print a and b as well let's
print a and b as well here
what we will do we'll copy this line
we'll paste it for a n
will update this here as well
so it won't create any confusion
so here you can see the value of C is 21
the value of a is 15 and the value of B
is 6. it shows the value of all the
three variables we declared but with the
introduction of es6 or ecmascript in
2015 two more ways were introduced to
declare a variable these are let end
const we shall discuss these two terms
in the later part of this session let me
show you how to declare a variable there
are a few things you have to keep in
mind while declaring a variable name
here we have seen we use three variables
a b and c that was an easy task to do
but giving a variable any name like
something other than a single alphabet
so you have to keep a few things in mind
while naming them start them with the
letter underscore or a dollar sign you
can't use any sign except underscore or
dollar so if you are giving a variable
name you can't use any other sign except
the underscore or the dollar sign you
can use these two signs on you can't use
any other sign
you can't use a number in the starting
apart from that let's suppose you want
to give it a name as 9be you can't do
that in JavaScript JavaScript won't
allow you this if you try to save it it
will throw you an error invalid or
unexpected token so you can't do this in
JavaScript there is no limit for the
length of the variable name but you
can't use reserved keywords in a
variable name like let's try to create a
variable with name as class class is as
reserved keyword in JavaScript we'll
save it and see here throws an error
unexpected token plus but you can use a
class with capital c let's save it and
here it will work fine why it works
because JavaScript variables are case
sensitive if we try to create a variable
with same name Let's see we try to
create a variable with where girl and
the another variable will be where girl
with capital G this time JavaScript will
treat these two variables differently
these two are different variables for
JavaScript as JavaScript is case
sensitive when it comes to variables
let's declare a few more variables let's
remove it we'll declare a few more
variable let's comment this part as well
it will declare a few more variables
suppose we declare a variable with
keyword where and we'll name this
variable as bikening where byte name
and press enter
if we leave this variable without
assigning it any value the by default
value will be undefined let's try to
print the value of this variable
right we will try to print the value of
byte name
save it here you can see the value it
shows is undefined so the by default
value of a variable if you do not assign
it any value will be undefined
let's try to give it a value let's
suppose we
try to give bike name
we use equals to operator to assign it a
value cosine let's suppose we'll assign
it Yamaha
semicolon and press Ctrl s to save this
and here you can see the output as
Yamaha you can also assign a value to
the variable during declaration as we
have done in the previous examples here
we have assigned the variables value at
the time of Declaration only let's move
on to let and const so we will discuss
let and Cones but first we will compare
let with where let is also used to
declare a variable just like where is
used but there is a limitation to use
let
is not accessible outside the Block in
which it is declared
so we will use let here only let by name
equals and we will change this value as
well we'll change it to Hero let's say
save it and here you can see the output
as hero but if we try to put this code
inside a block let's suppose we put this
code inside this block a pair of curly
braces and we will again try to access
document dot right we will try to access
bike name again from here from outside
the block we try to access this save it
and here you can see bike name is not
defined it is an error in line 18. so
what's happening here basically you
can't access a let variable outside the
scope you can't access it from here but
it will work with where we try to
replace let with where and save it here
you can see it says hero and hero
because first it will interpret this
method and then it will interpret this
as well in case of where due to its
limited scope let variables are used
when there is limited use only like in
for Loop or in while loop we will learn
these Loop in future let will not allow
you to redeclare any variable let's
understand this with an example here's
the code as well we have declared where
bike name and we'll remove this and
first we will try to do this with where
let's suppose where bike name
equals to TVs Control Plus s it says
hero and TVs so the variable name the
bike name is same in both cases here and
here as well these are same but with
where keyword you can do that let will
not allow you to do this if we use let
here in place of where we'll write
letter here as well and we will change
the value as well we will give it as
Kawasaki
and
let's suppose Suzuki here
save it
see bike name has already been declared
so that's what let won't allow you to do
you can repeat the same light variable
in different scope it won't create any
problem but it will not allow you to
redeclare any declared variable so let's
move on to const we use const when there
are values we don't want to change or
that will never change basically so the
keyword const is little misleading as it
defines a constant reference to a value
not the constant value we can't change
the Primitive value but we can change
the properties of constant objects let's
write another piece of code for const
keyword
so let's declare a variable const
X is equal to
5.
comma Y is equal to
7 let's say fonts
so here what we have done we declared a
variable X and a variable y with value
as 5 and 7 we declared this time with
const keyword and variable Z which is X
Plus y we printed Z on the browser and
it shows the value as 12 which is X Plus
y 7 plus 5 is equal to 12. now what we
will do const will let you do this but
if you try to update the value of x
let's suppose we'll try to update the
value of x as x equals to X
Plus 10.
we'll print X this time
document dot right
X let's save this it will throw an error
assignment to a constant variable in
line 24 so here you want to update the
value of x you can't do this with const
keyword you can do this with let and
where as well but you can't do this with
const also cons won't allow you to
re-declare any variable just like let so
if you try to use const x again
equal to 10 save it
so here it says identifier X has already
been declared this thing you can do with
cons the scope of const is the same as
lead it can be used within the block
where it is declared data types is an
essential Concept in every programming
language to work on any variable you
should know its type
it refers to the kind of data which is
being stored inside a variable the type
of variable is holding basically every
programming language has its own set of
data types which is unique in its own
way we discussed earlier that JavaScript
is a lightweight scripting language
because we don't need to specify any
data type in JavaScript after all all
the variables in JavaScript are Loosely
packed or we can say JavaScript is a
dynamically typed scripting language we
shall discuss these properties later in
this video for now let me tell you about
different data types present in
JavaScript
so JavaScript data types are divided
into two categories primitive data types
and non-primitive data types primitive
data types are stored in stack whereas
non-primitive data types they are stored
in Heap I don't want you to go deep in
these two terms as if you are new to
programming so we'll leave it just keep
one thing in mind that primitive data
types are base data types whereas
non-primitive data types are objects or
we can say they are derived
primitive data types they are further
divided into five categories they are
divided as numbers strings Boolean
undefined and null non-primitive data
types or complex data types we can say
on the other hand they are divided into
two parts arrays and objects we'll have
separate videos on these topics for now
let's discuss primitive data types to
understand primitive data types much
better let's declare a few variable here
let's say we declare where X and give it
the value as 16. we'll declare where Y
and will give it value
hello world we'll declare one more let's
say where
flag
and the value will be true
here we can talk about those properties
of JavaScript which I mentioned earlier
JavaScript variables are Loosely packed
and JavaScript is dynamically typed
scripting language these two points
refer to the same thing here you can see
we have defined three variables X we
have defined variable X we have defined
variable Y and flag as well the values
for all three variables is different
from one another
see variable X is holding a value that
is 16 variable Y is holding a value
hello world which is a string so 16 is a
number hello world is a string and
variable flag is holding a value that
refers to a Boolean value in place of
true we can also write false here
so what's happening here here you can
see there is no data type if you are
coming from a C plus plus background or
a Java background this will be a little
bit weird for you guys because in C plus
plus and Java we used to do it like we
will define an integer let let me show
you
so how we will Define integer in C plus
plus or what will say we'll use int x
equals to 5 or something like that we
already had a data type for string as
well we have carrying C plus plus but
here in JavaScript we have no data type
we are only using the where keyword
that's what we call as Loosely typed
this line means that you don't have to
define the data type of the variable
what happens in JavaScript is whatever
the type of value you will pass to the
variable the data type will change
accordingly
so you don't need to worry about if you
are passing a number or if you are
passing in string
just relax just when you pass the value
to the variable it will be determined
automatically so these are the three
basic primitive data types present in
JavaScript which are number
Boolean value and string
so let's move on to the next one which
is undefined it will Define a variable p
and we'll leave it as it is so this
variable P has an undefined data type it
means that any variable which is already
declared but has no value inside it it
has an undefined data type
I'll tell you a basic operator the type
of operator
we'll go through the operators in later
videos but just try to understand the
basic need and use it with me for now
this operator will help you know the
type of value a variable is holding see
let's use it here we have declared a
variable P we'll check the type of P so
to use this operator you have to use it
with document dot right now
so we will do document.write and we'll
use two brackets
and inside it will write
type of and whatever like we want to
know the type of variable X let's
suppose we'll write here x
semicolon save it and you can see here
it says number this means that this
variable has a value which is a number
similarly we will check for all the
variables present here we'll check for
every variable we'll check for y will
check for flag and we'll check for p as
well let's copy this and
paste it three time and let's change the
value here from X to Y in this line
and from X to flag here
and here we'll change it to p
so we have done it we'll save it and see
here it says number first variable y it
says it's a string because you know
hello world is a string it's a sequence
of character for variable flag it says
Boolean so it's defined as true or false
and for variable P it's written here
undefined with this we are left with
only one primitive data type the null
data type there's a difference between a
null value and an undefined value
undefined means lack of value whereas
null means the absence of any value
suppose you are using null as the value
for any variable the type of operator
will return this variable as an object
but if you are not giving any value to
this variable you are leaving it after
declaration the type of operator will
return undefined here's an example for
this C will declare one more variable
here we'll declare where num let's name
this variable num and we will give it
the value as null we will use
document.write type of and we will check
with the help of type of operator that
what type of value the variable num is
holding so let's give here num
we are good to go press Ctrl s and C
here it says it's an object
so a null value will always be shown as
an object type conversion as the name
suggests conversion of value from 1 to
another in the previous video we
declared a few variables we declared
numbers strengths and Boolean as well in
JavaScript you can change the data type
of any variable from one to another you
can change a number to a string or a
string to a number
let's see an example of type conversion
let's declare a variable here
let's suppose we are using a variable
let's say where num equals to and the
value will be 34 and will print it first
and we'll use type of operator to see
the data type of this variable
save it and see here it shows 34 and a
number I have already told you about the
use of console.log in this topic we'll
use console.log just for a change you
can use document.write as well there is
no problem with any method you are using
let's move ahead and we'll declare a few
more variables will declare a string and
a Boolean as well
let's suppose where Str equals to
hello
and we'll print it as well let's copy it
from here and paste it here
and we'll declare one more variable
let's say where Bool equals to
true
let's print these three variables first
see the output is pretty simple we can
see the value and data types as well see
34 is a number hello is a string and
true is a Boolean value
so let's convert this number to a string
first this number 34 this is a number
here right and we'll convert this number
to a string so how to do it that's
pretty simple all you have to do is
write a word here let's write here write
string with a capital s
and put 34 inside a bracket so here we
are done with it save it and see here
you can see 34 which was the number
first and now it's changed to a string
that's how you can change the data type
of any variable let's try to change a
Boolean value to a string now many of
you guys gets confused with Boolean so
Boolean is nothing
if something is true then set it to true
and if something is not true like if
it's false then set it to false see if
we talk about a real life example say if
you know how to drive create a variable
drive and set it to true and if you
don't know how to write set the variable
to false that's pretty simple that's
what Boolean is let's change a Boolean
variable to a string we have to follow
the same steps as we did for numbers
what we did we'll write here string and
put true inside brackets
we are done with it save it and check
the output here you can see the type
changed from Boolean to string like
string function we can also change a
string value to a number
so how to do it let's take a variable
let's say where
str1 will take let's say we are giving
it a numeric value let's say eight nine
six eight
and what we'll do we'll write a console
log and we'll print it basically
str1 and will right here as well
save it and here you can see 8968 is a
string so how to change this string to a
number that's also a simple task all you
have to do is write here number with
capital n and put this value inside
brackets save it and see here you can
see 8968 changed to a number it was a
string earlier and now it's a number so
if it's a number now let's update this
number and we will see if we are adding
something to 8968 the value will change
or not let's update str1 what we'll do
we'll write str1 equals to str1
plus let's add a number say 2.
so the output should be eight nine seven
zero and the type of operator will give
the value as number let's see what's the
output now save it and see here you can
see the output changed to 8970 but if
you add an alphabet or a character in
the value then the output will be
different here we'll copy this whole
code
and we'll paste it here
we'll change the value of str1 equals to
str2 and we'll use an alphabet along
with this number let's suppose it's 8968
a so a is in alphabet and what we'll do
we'll comment this line and we'll go
here and change the value str1
here we are done with it save it here
you can see it says n a n it means that
it's not a number it won't treat this
string as a number because it consists
of both numeric value as well as
character
now let's try to convert a Boolean value
to a number in the case of a Boolean
variable the scenario is a bit different
let's try this
let's declare a variable let's say we
are using where
Bool 2. and the value will be true
what we'll do we'll print the value here
you can see true and the data type of
true is Boolean so let's try to change
this Boolean value to a number that's
pretty simple task write a number and
put true inside brackets
save it and here you can see it says one
in case of Boolean variable the value of
true is 1 and the value of false is zero
remember this guys keep this thing in
mind if you are changing a Boolean
variable to a number then the value of
true will be changed to 1 and the value
of false will be changed to 0.
now let's have a look at percent and
parse float as well after which I'll
tell you one more interesting function
let's move on to percent first here I'll
declare a variable let's suppose I am
declaring a variable let's say where and
we'll name this variable as number
the value will be a string let's suppose
it's 56.
we print it console.log
here you can see that the output is
showing 56 is a string so the data type
here is string because I have used here
single inverted comma so it will take 56
as a string
now let's suppose I want to parse this
as an integer or say I want to change it
to a number I can use percent as well
apart from number if you want to use
number that's fine but apart from number
if you want to use percent you can use
it
let's see what happens if you use
parsint use percent and put 56 inside a
bracket
save it and see here it changed the
string to a number 56 was a string
earlier right and now it's a number just
like percent we have parse float as well
parse float will do the same thing but
what if you are using a decimal number
here let's see if you are using 56.343
save it what percent will do it will
give you let's change 56 first let's
suppose we are using 65 now save it and
see percent will give you the value as
65 only it won't show you the value the
decimal value
but if you are using here number or pass
float it will give you the whole numeric
value let's see what happens if you use
number here
number and save it here you can see the
value is
65.343 like number if you are using here
pass float
let's use parse floatio
and we'll change the value here as well
let's suppose it's 72 point
543 save it and see here it will give
you the whole numeric value of the
variable I hope this is clear for you
guys
now there is one more function you can
use in numbers which is dot two fixed so
this function has by default zero value
let's suppose I am using here we have to
use it here only let's see what happens
if I am using number Dot
to fixed
so inside bracket we are giving it a
value by default the value is 0 Let's
suppose we are giving it the value as 2.
now save it and what will happen it will
give you the value as 72.54 similarly if
you are using here some other number
let's suppose seven you can see we have
only three digits here after the decimal
we have three digits only that is five
four and three what happens if we run
this program now let's save it and see
it says five four three zero zero zero
zero so it will show you the value up to
seven decimal points it doesn't matter
if there are available numbers after
decimal point but it will show you the
value instead of 7 you can also give
here 30 let's save it and see it says
6366 and so on hope this in any
programming language an operator is a
symbol that makes the computer
understand that it needs to do some
specific tasks like if you want to
perform an addition between two numbers
let's say we want to perform addition
between four and five so guys if you see
the plus sign here this is known as the
operator and the two terms which are
four and five these two numbers these
are known as the operands
we have different operators for
different purposes like we have Plus for
addition we have minus for subtraction
we have star or asterisk we can say for
multiplication and many more other
operators as well so there are many more
operators present in almost every
programming language which is present
out there like it operators are present
in Java they are present in C plus plus
in C almost every programming language
out there has the concept of operators
it's essential for you to know how and
where to use any operator despite of the
language you are working on one needs to
understand which operators are available
right so in this particular video I'll
take you through the basic types of
operator present in JavaScript I'll let
you know the types and we'll learn about
how to use them and of course I'll take
you through the different categories of
operators present in JavaScript so in
JavaScript there are basically eight
categories into which operators are
divided which are we have arithmetic
operators we have assignment we have
string we have conditional we have
logical bitwise comparison and type of
operator we'll discuss the first three
types in this video that is we'll
discuss the arithmetic operators we'll
discuss the assignment and the string
operators rest we'll talk about in the
following video
first up here is the arithmetic operator
hope you all are aware of the term
arithmetic right
so arithmetic operators perform
mathematical calculations like it
performs addition subtraction
multiplication and division as well
so here are the few operators you can
see on your screen the plus operator
minus asterisk division we have modulus
we have increment we have decrement so
these are the basic arithmetic operator
we'll see each of these operator with an
example so let's move on to the
programming part first so guys I want to
mention one more thing here I want all
of you to make a separate file for each
topic we'll be covering from now on like
for operators you will create a separate
file will create a separate one for
control statements and other topics
we'll cover in future from today so I
want you to create a separate file
because you know in future if you want
to access these topics it will be easy
for you to access those files instead if
you are using a single file for all the
topics it will be quite confusing so
let's start with the arithmetic
operators first let's take two variables
we are in the Javascript file let's take
two variables let's say where x equals
to 6
and we will take another variable let's
say where y equals to
4.
now we'll perform some arithmetic
operations on these two variables we
have already seen the arithmetic
operators present like we have plus
minus we have increment decrement we
have multiplication division so we'll go
through all of these right so let's
start with it here we are done with our
basic three operators which is addition
subtraction and multiplication I have
commented the division because I have
something to tell you about the division
so let's check the output here first
let's save it and see the output is
addition 10 subtraction 2 and
multiplication 24. for addition it added
the two numbers it's six plus four
similarly for subtraction and
multiplication it is 6 minus 4 and it's
6 multiplied by 4.
for division I have left division
because I hope you guys know the
difference between Division and the
modulus operator let's try to use the
modulus operator along with the division
so what we'll do we'll comment these
three and let's remove it from here and
what we'll do we'll paste this here and
we'll use the modulus here so now let's
check the output what it says for
division and modulus C we have divided 6
by 4 division it says it's 1.5 6 divided
by 4 that is 1.5 it will show the
quotient here for modulus it's saying 2
because
in modulus it gives you the remainder
and in division it gives you the
quotient as the answer so keep this
thing in mind guys keep this in mind
always take a note of it so we are done
with division and modulus next up we
have the increment and The decrement
Operators let me show them to you real
quick so what we'll do we'll declare
another variable let's say where Z
equals to 5.
and we'll use the increment operator
here we'll use again document.write
and here we'll let's say we write
increment how to use increment operator
for increment operator you have to use
plus plus whatever variable you have
used so we'll use plus plus Z
and similarly we'll copy this
paste it here and here we'll use
minus minus 4 decrement
and change here as well
so let's see what happens let me give
some space in between them so that you
won't get confused
let's save it and check the output here
increment is it says 6 and decrement it
says 5. so you can see here the
functioning of decrement and increment
operator the increment operator will
increase the value of Z by 1 and the
decrement operator will do the opposite
of this it'll decrease the value by 1 so
we are done with the arithmetic
operators next up we have the assignment
operators
assignment operators are used to assign
values to different JavaScript variables
let's see the types first and then we'll
see how to use them so we have these
assignment operators here here we have
equals to plus equals to minus equals to
and we have multiplied equals 2 we have
divide equals to modulus equals to and a
few more so let's see each of them with
example maybe not each of them but we'll
try to cover almost every single
operator out there which is present in
your screen so let's move on and see
let's move on to the programming part so
here we are guys let's declare a few
variables let's say we are declaring a
variable a and we are giving it the
value as 10 suppose
and we'll declare another one let's say
where B and give it the value
5. so for assignment operators what
assignment operator mean we have used
here the equal to sign right we have
used a equals to 10. this means whatever
value present on the right side of the
operator like here it is 10 it will be
assigned to the variable a
I hope you guys are getting this keep
this in mind so we have the value 10 and
we are assigning this value to the
variable a
it says let's try to check the output of
a let's try to print a on the screen
okay
document
see here you can see that the value of a
it says 10. and similarly the value of B
is 5. so let's do one more thing we'll
assign the value of a to B how to do
this let's change the value here only
let's suppose we are using the value of
where a is 13. okay and the value of
where we will be providing as let's say
a
so now let's try to print the value of B
here we'll change
will print the value of B only let's
save it and see the output see it says
the value of B is 13. because we have
assigned B the value present at variable
a which is 13. that's why it is showing
the value of b as 13. this is what
assignment operator is let's try other
assignment operators as well
let's take another variable
so let's say where even
equals to let's say 51.
so the next operator we will be using is
let's update the value of A1 first so
how to do this let's say A1 equals to no
it's a 1 plus equals to 9.
and we'll print the value
let's check the output now
see it says the value of A1 is 60 here
we have given that A1 plus equals to 9
see even plus equals to 9 is the same as
if you don't want to write here A1 plus
equals to 9 you can also write it as a 1
equals to A1
Plus 9. both of these lines are same
both these statements means the same
they are performing the same tasks so A1
equals to A1 Plus 9 is same as a 1 plus
equals to 9. that's what I want you to
understand with assignment operators
similarly if you want to perform a 1
minus equals to you can do it as well so
let's say A1 minus is equal to 5 and
we'll copy this line from here paste it
here again and save it now let's see the
output here what it says some of you
guys may get confused that here it shows
the value of 6 is 69 of A1 so in the
first statement when we tried to print
A1 here the initial value was 51 then
this statement was performed and the
value was updated to 60. then after that
one more statement this statement is
also performed and the value updated to
69 it's 51 plus 9 plus 9 and the value
we have here is 69. now what happens if
we are using the minus equals to
operator what it will do it will
decrease the value of A1 by 5. it means
that A1 equals to A1 minus 5 the value
of A1 is 69 and it will subtract 5 from
69 so here it says the value of A1 is
64.
hope you guys are getting this so we
have so many operators we have so many
of them like let's try a few more
so we have multiply equals to we have
division equals to we have modulus
equals to so I'll write these and then
we'll see the output
so we are done with it let's check the
output here for A3 A4 and A5 you can see
for A3 we have used multiply equals to
for A4 we have used divide equals to and
for A5 we have used modulus equals to
let's check the output here
save it and see it says the value of
a350
it here we have taken a3s5 it's 10 into
5 because A3 equals to A3 into 5 so it's
10 into 5 it shows the value as 50.
similarly
here it says the value of A4 is 3.75
because we have used year 4 so instead
of 4 let's try to use 3 and save it see
here you can see it divides it and gives
you the quotient and the value of A4
divided by 3 is 5.
so similarly for A5 it shows the value
of A5 is 6.
because we have used the modulus
operator here N20 divided by 7 we have
6s remainder
so I hope you guys are pretty clear with
assignment operators now next up we have
string operators the plus operator which
we used as the arithmetic operators
earlier right it also operates as a
string operator so we can use it to
concatenate two strings that mean we can
add two strings as well in JavaScript it
is possible with the help of string
operator similarly we have plus equals
to operator for Strings as well like we
have plus equal to for assignment it has
the same functioning for string as well
let's take the example for these two
operators let's move on to the
programming part so here you can see we
have two variables where str1 and where
str2 the value of where str1 is hello
and the value of where str2 is full so
what we'll do we will add str1 and str2
so let's check the output here save it
and see here you can see the output as
hello world but there is no space
between hell low end World keep this
point in mind guys so if you are adding
two strings just like this there will be
no space between the two strings so if
you want to add any space between these
two what you have to do you have to
mention it here separately
and this this is the syntax if you want
to add space between your strings so now
let's save it now and see here you can
see there is a space between hello and
world
so this is the use of plus operator in
strings so the next one we have plus
equals to let's take another string
let's take it as whereas tr3 and we'll
give it the value as
welcome
so what we'll do we'll use the plus
equal to operator here str3 plus equals
to
let's say
to
simply code
and
what we'll do we'll print the value of
str3 here
so save it now
so here you can see the value of str3 if
we remove this this line
let's see what happens now
and we'll give it a space here
save it now see here you can see it says
hello world for the first str1 plus str2
it says hello world for str3 it says
welcome to Simply code see here the
space is already given so it will show
this in the output but between welcome
and two if you want to add space you
have to do the same what you have done
for str1 and str2 so let's do it here as
well plus sign yes
save it now and see here you can see it
says welcome to Simply code with propers
cover the rest of the operators now we
are left with five more these are the
first three operators which we covered
in the previous video now we are left
with conditional operators logical
operators we have bitwise operator and
we have comparison and finally we have
the type of operator
so these are the five operators we are
going to cover today
before we start with the operators let
us first discuss associativity
talking about associativity
it refers to the direction in which the
entire expression is evaluated for
example if you have any expression let's
say you have a plus b so the direction
in which this expression will be
evaluated either it will be from left to
right or from right to left so this is
known as associativity let's understand
it with the help of an example
so here you can see I have taken three
variables I have taken variable a and I
have assigned it value as 12. I have
taken variable B and the value assigned
to B is 8 and finally I have a variable
result which stores the value of a plus
b
lastly what I am doing is I'm printing
out the result variable inside the H1
tag here you can see I have used the H1
tags and I have used the plus operator
to concatenate the strings right I have
concatenated these two strings along
with the result along with the answer of
result so the plus operator here is
doing two different tasks right here you
can see it is performing the addition of
two numbers right and here you can see
it is used to concatenate two strings so
now let's talk about associativity
because I guess you guys are cleared
with string operator till now we have
discussed them in the previous video
right so let's talk about associativity
now so certain operators have right to
left associativity and certain operators
have left to right associativity so when
I say right to left associativity in
this case the value present at the right
side of the operator see if you are
using any operator for example here you
we have used the assignment operator
right we have discussed the assignment
operator earlier so here you can see the
value present at the right hand side of
the operator will be assigned to the
variable which is present at the left
hand side of the operator so
it's going this way like first the
computer will check the for the value
present at the right it's going from
right towards the left this is what we
are known as right to left associativity
and assignment operators like equals to
this have right to left associativity
let's add here one more variable let's
say we are adding a variable variable C
and we are giving it the value as
5 and what we'll do we'll update result
as well let me first show you the output
of this particular program see the
output will be value of result is 20 and
high there high there is concatenated
with the string value of result is N20
is the actual answer the 20 is the value
of result so let's add one more variable
here let's say we are adding a variable
C and the value of C will be 5. what we
will do now we will update result as
well here you can see I have done a plus
b plus c
so
save it and here you can see the value
updated to 25 the value of result is
updated right so the plus operator has
associativity from left to right till
now we have talked about right to left
as for assignment operators but for plus
operators the associativity is from left
to right it means it will first perform
a plus b
and then the value of C will be added to
that of a plus b first it will perform
12 plus 8 and then finally it will add 5
to that value so it will be 20 plus 5
and that's why the output here is 25.
know that JavaScript is a Loosely typed
programming language right
which means that we don't have to
specify data types every time like we
are using if we are using any data type
we don't need to specify it every time
like let's do one thing let's add a
string here so what we'll do we'll add a
string let's suppose I'm adding hello
so practically the answer would be hello
Plus
25 or hello 25 it should be the answer
but let's check the output now save it
and here you can see the output is hello
one two eight five what happened here is
the sensitivity of the plus operator is
from left to right we know this so it
will start from the left and it will see
that okay the first thing to add is a
string so it will assume that everything
ahead of this will be a string that's
why we have the output as hello 12 8 and
5 so 12 8 and 5 all are acting as string
here
let me clear this one for you with a
little bit of modification now what
we'll do we'll remove this string from
here and we'll add it somewhere else
let's say we are adding it here
so
let's add one more variable to make it
more clear let's say we are using
variable D and the value will be 10.
and what we'll do we'll perform a plus b
before the string and then we'll perform
C plus d
right so here you can see when you save
it it says 20 hello 510 so when it
reached out the first variable it finds
out that the first variable is a number
so it added the first two numbers right
it added 12 and 8 the answer is 20 then
it came across this string hello and
then finally it assumed that everything
ahead of this will be a string so that's
the output 20 is the addition of a plus
b and then the string hello and finally
we have the value of c and d as string
so we have the value 5 and 10 not 15
right I hope you guys get this
so let's move on to conditional
operators the conditional operators
assign a value to a variable based on a
certain condition like it contains a
condition and you know for every
condition like there exists only two
possibilities either it can be true or
it can be false there is nothing else
you can do with a conditional operator
so it works the same as if else
statements which we'll cover in further
videos the only difference between if
else and conditional operators that it
takes less time or we can say its usage
is pretty easy
so here is the Syntax for conditional
operators so it seems pretty
straightforward right so here you can
see we have a variable name we have a
condition depending upon the condition
we have two values
here's the example as well C you can see
we have a variable voter next up we have
a condition if age is less than 18 so it
will check for the condition that if the
value of age is actually less than 18
let's suppose the value of age is 15. so
it will check if 15 is less than 18 it's
true then it will print 2m or if the
value of H is greater than 80 then it
will print false or you can say it will
print old in a few
so let's move on to the programming part
so here you can see I have taken a
variable X and the value assigned to X
is 30. what we'll do in variable wire I
have given it a condition so it will
check for X which is 30 if 30 is greater
than or equals to 50.
so if it's true if 30 is actually
greater than 50 then it will print true
else it will print false so we'll check
the output once let's save it and see
here you can see the output as false so
if you update the value of axial let's
suppose we are updating the value of x
let's suppose it's
60 save it now and see the output has
changed to true because 60 is greater
than 50 right also if you want to write
a message here only you can do it write
it here as so we'll copy it from here
we'll copy document.write
and we'll paste it here
let's remove this document dot right and
we what we'll do we'll
use this bracket
here
and if any message you want to write
like you want to write value of
so
and now what we'll do will
save it
see it says value of true so or you can
write any other message here as well you
can write value of x is greater than or
you can write whatever
so if you want to update it like value
is and here we will update true
with
greater
and here we will use
smaller
save it now see here it says value is
greater value of x is greater than y
so that's all for conditional operators
also one more thing and conditional
operators has three different parts
right and that's why it is also known as
ternary operator three different parts
as in it has a condition like here it is
it's a it has a condition and it has two
values right it has true or false so
that's why it is also known as ternary
operator
next up we have the logical operators
so logical operators are used to
determine the logic between two
variables or values we can say we use
logical operators to check whether
multiple conditions are true or false
here on your screen you can see the
three different types of logical
operators present in JavaScript along
with the syntax and example
so the end or note are the three
operators present in JavaScript
the and operator here you can see it it
is holding two values right it it has X
less than 10 and y greater than one so
the end of letter will return true only
if both the conditions are true like X
has to be less than 10 and Y has to be
greater than one so here you can see we
have taken x equals to 7 and Y equals to
4 so both the conditions are satisfying
here so that's why the output of the and
operator will be true for our operator
the case is a bit different so if any
one of these two conditions like we have
two conditions if any one of these two
is true then the output will be true and
if both are false then only the output
will be false
the not operator on the other hand will
check if x is equals to Y if the value X
is holding is equals to that of Y if the
value is not equal then it will return
true
I hope you are getting this that's a
little bit
confusing but if the value X and Y
holding if they are not equal then it
will return true if they are equal then
it will return false
right
we'll understand the programming concept
of logical operators in further videos
when we learn about control statements
we primarily use logical operators with
the if statement through which we'll
come across in the following video in
the next video we will go through the
control statements so we'll understand
the programming part of logical operator
there only
next up we have the comparison operators
so comparison operators are similar to
logical operators in some way
they are also used to check for true and
false as the name suggests we use
comparison operator to compare two
values or we can say to compare two
variables using different operators
so here you can see on your screen these
are the different types of comparison
operators present in JavaScript we have
equals to we have not equals to we have
equal value and data type we have
greater than less than and we have a few
more so I hope you guys must remember
from the previous video that a single
equals to operator is an assignment
operator so if we are using a single
equals to then it will be considered as
an assignment operator for comparison we
have to use double equal to keep this
thing in mind whenever you are using any
operator in JavaScript or especially the
equals to operator so if you want to
compare two values you have to use
double equals to because single equals 2
is used to assign values this is an
assignment operator so let's move on to
the programming part now
so guys here you can see I have taken a
variable X and the value assigned to X
is 10. this code seems a little bit
longer to you but that's a simple piece
of code like I have used almost every
comparison operator we came across in
the previous slide I have used each one
of them and I've used the document dot
right after every comparison operator to
put some spaces in between so that you
guys don't confuse between them so let's
check the output now see you as you can
see I have used the double equals to the
triple equals to I have used X not
equals to it so let's check the output
save it and see here it says false false
true true false true false so for x
equals to equals to it it compared the
value 10 with 8. and 10 and 8 are not
equals to so the output will be false as
similar for 10 and we have used the
triple equals to operator which means
equal value and data type so both 10 and
8 have equal data type they both have
the same data type that is number but
the values are different so it will
print false
for X not equals to it it says 10 is not
equals to it yeah 10 is not equals to it
actually so it will print true similarly
for X not equals to equals to it it will
check that both the values are not equal
but the data types are equal right so it
will print true for this as well for X
greater than 8 yeah 10 is greater than 8
so it will print true similarly for it
will check for X smaller than 8 and it
will check for X greater than equals to
it and also for X less than equals to it
so by now you have understood how
comparison operators work so comparison
operators are the easiest to use in
programming
and that's all for comparison operators
let's move on to the next one we have
the next type of operator we have is the
type of operator you guys have an idea
about the type of operators right as we
have discussed it earlier in case you
haven't watched the previous videos let
me give you a brief introduction about
this type of operator
so the type of operator is used to
provide you with the type of whatever
value you put to the right of it like if
you are using any data type and you want
to know about the data type of a
particular variable let's say so you can
use the type of operator it will tell
you the actual data type of any variable
so in JavaScript as we have discussed
earlier in the video where we have
particularly discussed about the data
types so there are five different types
of primitive data types right we have
the numbers we have strings we have
Boolean we have null and undefined
so let's try to use type of operator
so here you can see I have used four
different variables which are I've used
variable X variable Y and variable flag
and variable P so the values are
different the x is holding 17 why is
holding header and flag has the value as
false and I have defined P but I have
not assigned it any value till now so
what I'll do I've used the type of
operator to find out the type of every
variable like here I have used it for X
for y for flag and for p
let's check the output now
save it and see it says number string
Boolean and undefined see here we have
given X the value as 17. so 17 is a
number then it says it is a number for
hey there it says it is a string for
false it says it is a Boolean value like
in Boolean value we have only two values
like false and true
so for variable P it says undefined
you know there is a difference between
undefined and null data types undefined
means lack of value whereas null means
this absence of value that there is no
value at all
so suppose you are using null as the
value for any variable right the type of
operator will return
object but if you are not giving any
value to any variable like you are using
the variable as it is like here we have
not given it any value so if you are
doing this the type of operator will
return undefined so let's take an
example of null as well let's declare
another variable let's say where ABC
and we'll give it the value as null
so and finally what we'll do we'll
use type of operator
save it and see here it says the type of
variable ABC is an object
so remember this thing guys
and now we are done with almost 7
operators we had and we are left with
one operator only
so let's move on to our last operator
which is the bitwise operator this
operator doesn't have that much of
practical usage in the real world they
are not definitely useless but this is
something like we are not going to use
on a daily basis so in computers if you
know the numbers are stored in binary
format bitwise operators work on 32-bit
numbers and we have decimal numbers like
we understand decimal numbers computer
works on binary numbers right so when
bitwise operators are used any operand
present in the operation
is first converted to a binary number
and then convert it back to a JavaScript
number
so here you can see on your screen we
have four different bitwise operators we
have the and operator we have or we have
node and we have zor or we can say
exclusive or the result and the answers
are also here it's pretty simple see we
have used the and operator before as
well while we were in logical operators
but the syntax was different and
here you can see we have a single
Ampersand sign to use bitwise and
operator
so here you can see
how the decimal number first changes to
a binary number suppose we have X as 5
here you can see access first changed to
a binary number this is the binary
equivalent of 5 and 1 is also changed to
a binary number and finally the result
whatever result we get it is changed to
a decimal number so that's how bitwise
operators work let's take an example of
bitwise operators
so here you can see I have taken two
variables I have taken variable X and
the value of variable X is 5 and another
variable is y and the value of y is 1
and then I have used all the four
bitwise operators like I have used X and
Y I have used X or Y I have used not X
and I have used the xor operator between
X and Y so let's check the output now
here you can see if we talk about the
output C here it says 1 5 minus 6 and 4
so for X and Y see
the value of x is 0 1 0 1 and for and
operators it will return 1 if both the
values are 1. if any one of the two
values are 0 then it will return 0 so
what it will return here it will return
0 for 0 0 for 1 0 it will also return 0.
similarly for 0 0 it will also return 0
and for 1 1 it will return one which is
the binary equivalent of one so the
answer here is 1.
for x or y it will return 1 if any one
of the two values are 1. see if both are
0 it will return 0. if any one of the
two values is 1 it will return 1.
it will return 0 again and finally it
has two ones so it will return one
and 0 1 0 1 is the binary equivalent of
5. that's why the output here is 5.
for not operator it works a little bit
different it gives you the output which
is same as minus x minus 1 so minus x
minus 1 will be
see minus x minus 1 will be minus 5
minus 1 which is minus 6 so this is a
bit different here the not operator here
is a bit different
for xor operator or we can say exclusive
or it will return 4 why it will return 4
it will return 1 when any one of the two
values is one if both are one then also
it will return false it will return 1
only in one condition if any one of the
two values is 1 then only it will return
one that's why the output here
the output here will be 0 1 0 0 that's
why it's written as 4 which is the
binary equivalent of 0 1 0 Z let's
suppose we have a piece of code that has
n number of statements here let's say we
have this code and so the conventional
workflow will be it will first execute
the first statement then second then
third and so on till statement n right
so this is the basic flow right from
statement 1 till statement n and it will
execute each statement in between
however in real world the scenario is
different like we don't write the code
in same menu every time
for example let's suppose you are in
line 5 and you want to print this line
10 times so what should you do you can
write this line 10 times or you can copy
paste it right okay let's forget about
10 times let's suppose you have to use
this code or we can say let's suppose
you have to print this statement 100
times doing this like copy pasting it
for 100 times or writing this statement
for 100 times that's useless and
unnecessary right so that's where
control statements comes into picture
we'll discuss them in a while let's
assume another situation this time you
want to make a choice based on certain
conditions you can use conditional
operators but then it has limitations
right to tackle this problem we have
control statements in JavaScript
so these are the very basic reasons why
we need control statements for
performing a certain activity like if we
want to perform a certain activity n
number of times or if you want to make a
certain decision making kind of
scenarios in your program that's where
we need control statements in JavaScript
in JavaScript we have two different
types of control statements depending
upon what action we are performing so we
have the conditional control statements
and we have the iterative or we can say
looping control statements
talking about conditional statements as
the name suggests we use conditional
statements when we have to make
decisions based on conditions when we
have two choices or when we can say when
we have two different conditions and we
want to make choices accordingly so
that's where we use conditional
statements we have two different types
of conditional statements the if else
statements and the switch case
talking about the iterative statements
as the name suggests if you want to
perform any action more than once or
maybe n number of times instead of
writing them again and again
we use loops so Loops are basically
statements we use Loops to perform any
activity n number of times with specific
conditions
so in JavaScript we have four different
type of Loops we have for Loop while
loop do while loop and foreign Loop
so the for Loop while loop and do while
loop you might have heard about them
earlier because they are also present in
other programming languages but this
foreign Loop this is a new type of loop
present in JavaScript we use foreign
loop with objects we'll go through
objects in upcoming videos and of course
we'll be looking at each of these
control statements in detail
will have a particular video for each of
these topic
now let me introduce to you the break
and the continue statement
they are not the types of control
statements but they do assist in other
control statements the break is used to
exit a switch statement or Loop like
when used in a loop it breaks the loop
and continues executing the code after
it
and on the other hand the continue
statement breaks a single iteration when
used in a loop when we use continue
statement in a loop it breaks a single
iteration and it breaks the iteration
only if the specified condition occurs
and then it will continue with the next
iteration in the loop
also if you want to become a full stack
web developer then the postgraduate
program in full stack web development in
collaboration with Caltech ctme can help
you accelerate your career as a software
developer check out the link mentioned
in the description box below so the if
else conditional statement is used
whenever we work with condition
it can be either a single condition or
maybe more than one condition or
multiple conditions we can work with
so let's try to write a basic program
with a single condition
so then we'll move on to multiple
conditions using the elsif statement so
we'll create a new file today so I hope
you guys know the importance of creating
a separate file for every topic you know
it will be easy for you to work to find
out that separate file later if you want
to revise that topic
so here is the program where we have
taken a variable X and the value of x is
10. so what we are doing in this program
is we are checking if the value the
variable X is holding that is value 10.
and if the value is less than
10 or if the value is greater than 10.
so we have only two conditions either
the value can be less than 10 or the
value can be greater than 10 or equals
to 10 is
so here in this program what we will do
will first will update this value as 8
so the variable X is holding the value
8. so to check the output let's save it
and here you can see it says the value
of x is less than 10. of course the
value 8 is always less than 10 right so
for it that's fine it will say the value
is less than 10 and similarly if we do
the same for let's say 11 save it now
and see it says the value of x is
greater than 10. so that's quite simple
right but what if we are giving the
value as 10 we know 10 is equals to 10
so save it now and see here you can see
it says the value of x is greater than
10.
this is happening because what we did we
as we told The Interpreter to check the
value if the value of x is less than 10.
we didn't mention that if what to do if
the value is equals to 10 so it will
check for only X is less than 10 not for
equals to 10 or greater than 10 so here
what it is doing it is checking if the
value is less than 10 so that it says
okay let's print this statement if the
value is less than 10 or
if the value is not less than 10 or if
the value is equals 2 or greater than 10
it will print the value of x is greater
than 10. to avoid this type of
misunderstanding we use an elsif
statement so the concept of else if
statement is the same as if statement
what we are doing we are using multiple
conditions right we are giving it more
than one condition so how to use else if
it's quite easy and the syntax is also
similar to
the if statement the only difference is
that it contains an else before if so
it's an else if so what we are doing is
we are giving it a condition that else
if x equals to 10.
so now what it will do it will check for
two conditions that if the value X is
holding is less than 10 or equals to 10.
and what we'll do we'll update it as
so let's check the output now
save and see here it says the value of x
is equals to time right so I hope you
guys are getting this the execution flow
for this program will be like it will
check for the first condition if x is
less than 10 if yes it will print the
value of x is less than 10. if no it
will move on the to the following
condition like under the else if
statement it finds a condition that if x
is equals to 10 it will check for it if
yes if x is equals to 10 then it will
print the value of x is equals to 10.
or if not then otherwise it will move to
else statement and print the value of x
is greater than 10 we don't need to
specify any particular condition for
this you know because we have already
specified the two conditions that if x
is less than 10 or if x is equals to 10
now we'll take a look at some basic
programs other than this one we'll take
a look at a few more basic programs
so here's the another program what we
are doing here is we are taking a
variable X and the value of x is 5. so
what we are doing is we are checking if
the number is an even number or an odd
number the thing you have to keep in
mind is the logic to find whether a
number is even or an odd number so to
check uh whether a number is even you
what we do we'll divide that number with
two right but basically we want is we
want the remainder as 0 when we use the
modulus operator so what we'll do here
we have written X mod 2 equals to equals
to 0. so if the reminder is 0
then the number will be an even number
because it is divisible by 2 else it
will be an odd number so that's quite
simple right let's save it and check the
output for 5 it says odd number yeah 5
is of course an odd number right so
that's for even and odd number
so here we are with another program here
it says we have a variable Y and the
value of y is
let's say
eat and
what we are doing here is we are
checking if a number is positive or
negative or zero so we have three
different conditions either number can
be positive or it can be a negative
number Any number greater than 0 is a
positive number right and any number
less than zero is a negative number and
the third one is a number zero it's
neither positive non-negative so let's
check for the number eight save it and
see here you can see it is a positive
number let's see for
minus 2 save it now it says a negative
number for 0 it will say 0.
so these two programs are quite simple
guys right the conditions are pretty
simple we use modulus operator we used
greater than or less than sign and
that's quite easy to use right so let's
move on to the next program which is a
bit tricky than these two
so what we'll do in our next program is
we'll check if a number is positive or
negative and at the same time we'll
check for even an odd also if you are
giving any number as input like let's
suppose we are using 5 we'll check if
the number is positive or negative and
odd or even so we'll do this
simultaneously let's move on to this
program so there are two ways to check
whether a number is positive or negative
in odd or even
so the two methods we'll discuss them
one by one the first one here is
to use nested if and another one is when
we use logical operators along with the
if else if statement so this one here
you can see right in front of your
screen is
the nested if method so here you can see
we have used the if statement we have
given one more condition inside another
if statement so first it will check
whether a number is positive or not for
X greater than 0 it will check if the
number X is greater than 0 then if yes
if it will find it that yes this number
is greater than 0 then it will move on
to the nested if and it will check for
odd or even
for odd number and even number it will
check if it finds that the number is
even it will print that the number is
positive and even
if the number is not even it will print
the number is positive and odd so here
you can see the difference what The
Interpreter is doing is it will check
for the number as positive and if the
number is positive then it will move on
to the nestative and check for the even
or odd so if it finds that the number is
even it will print positive and even
otherwise it will print positive and odd
then it will move on to the next
condition which is for negative number
if x is less than 0 then it will again
move to the nested if and it will check
for even and odd so if it finds that the
number is even it will print negative
and even otherwise it will print
negative and odd and the last condition
is for the number is 0. let's
try to find out the output of this and
what we'll do we'll update the value of
Xs 8. so save it now here it says the
positive and even so 8 is a positive
number and even as well let's update the
value of x is minus 5. save it now it
says negative and odd number minus 5 is
a negative odd number right so that's
how it will check for positive
or negative end odd or even so we are
doing both the things simultaneously in
a program we have an alternate method as
well here you can see on your screen we
have written a program and here we have
taken a variable X the functioning of
both the programs is same
both of these program will check for
positive or negative and odd or even
so here you can see I have taken a
variable X let's say the value of x is
7. it will check for X greater than 0
and x mod 2 is equals to equals to zero
so we have four different conditions
right a number is
greater than 0 that means a number is
positive and even a number is positive
and odd a number is negative and even a
number is negative and odd and the final
one is a number is zero okay we have
five conditions and we have to specify
these four conditions here so here we
you can see we are using the logical and
operator this means it will print this
statement let's suppose for this
statement it will print this only if
both the conditions are true right if
the number if the value X is holding is
both greater than 0 and an even number
so if you try to
find out the output now save it and see
here it says number is positive and out
so the number 7 is greater than zero but
the number 7 is not an even number
that's why this line is not there on the
browser it will print this line because
the number is positive and odd
the switch case is another conditional
control statement and just like the if
else control statement there is a
difference between the usage of if else
and switch case statement
now both if else and switch case works
with conditions and we have to choose
when to use which case over if else
switch case is generally preferred over
the if else when there is n number of
test cases present or we can say when we
are working with a lot of conditions
let's say we are working on a program
and you ask the user for an input
between 50 and 100 a numeric input
basically and in the output we have to
print the textual form of that number
suppose if the user enters 75 right the
output will be like this
so what we are doing we we are taking a
number from the user as an input and we
are printing the textual form of that
number right
so we can use the if else or we can say
else if control statement but the
program will be so lengthy and not so
clean
also switch case is much more efficient
than if else when it comes to execution
time like if we have n number of
conditions then using switch case is a
better option we'll get to know why in a
bit so let's move on to the programming
part and today
we'll write a program where we have to
find the month in a year by accepting
its number so we have 12 months in a
year for example if we enter 4 then the
output will be April and if we enter 8
then the output will be August because
August is the eighth month of the year
right so I hope you guys are clear with
the question of course we can do this
program with the help of if else
statement but we discussed earlier that
using IF else in such cases is not
efficient right we can use switch case
in this scenario so let's create a
variable first let's say we are creating
a variable where month and
you can give any value to this variable
from 1 to 12 you can provide it with any
initial value
so let's create a variable first let's
say we are creating a variable where
month and the value we are providing it
one as the hardcore initial value for
Simplicity again we are not taking the
input from the user or from the browser
to do so we have to first go through the
Dom manipulations and we'll go through
it in later videos so let's start with
the switch case now
the Syntax for switch case is quite
simple just write down
switch and
pass the variable month
so we have to check in this round
bracket for the variable month because
you know any value you are providing to
month the switch will check the program
accordingly so for now we have taken the
value as one for month we can take any
value like we can take 3 we can take 11
12 or any value other than 1 to 12 as
well so whatever value you are providing
to the variable you can provide the
variable to the switch statement right
so next up we have an open-end curly
braces for the body of the switch case
we have to test for 12 different
conditions inside this
starting from 1 to 12 right so the
syntax goes like this you have to write
case
and then the value month variable might
hold like 1 2 3 and so on followed by a
colon right so we have to write the
value 1 and
a colon not a semicolon but a colon keep
this thing in mind guys and below that
we are going to write what we want when
the value is 1 like what the output we
want when the value is 1 so we have to
write document
dot right
and
whatever you want as the output like for
one the first month is January so we are
writing here
January
and a semicolon
so if the value of the month is 1 you
will get the output as January save it
and here you can see the output is
January let me increase the font size
for this as well
so here you can see the output is
January right next we'll use a break
statement
if you guys remember we discussed the
break statement in the control
statements video right the break
statement is not actually a type of
control statement but it assists other
control statements or we can say it
helps us manage the control statements
right what this statement does is once
we are done with the output we get our
output right once we are done with case
1 we get our output as January this
break statement helps us to come out of
the switch keys so to understand this
much better let's write here one more
case so let's say we are writing a one
more case as
case 2
and the output will be document dot
right
the second month is February right
and February we can write so
we'll include one break here like we'll
come in the first case and include a
break statement so here's how you can
write a break statement how you can
include a break statement in your code
so let's check the output now so for now
it says January
so if we don't include this break
statement here when The Interpreter will
execute this code
and it will see that the case is 1 right
so it will print January
but it will print other statements as
well so for example if we remove this
break statement and save it now see you
can see here the output as January and
February January and February both are
getting printed on the output so we need
a break statement to break it here see
the value is 1 and if we include break
statement here
the moment The Interpreter finds the
answer the correct answer as January it
will come out of the switch keys
so I hope you guys are getting this
similarly we'll write all the cases for
all the months let me show you all the
cases
so here you can see on your screen that
we have 12 different cases from 1 to 12
one for each month depending on the
value the variable month is holding
right
the output will be June if the value is
6 and if we say 10 the output will be
October and so on and so forth
now the question here is what if we try
to write a random value for the variable
month
by random value we mean that if we try
to write any value other than these 12
values from 1 to 12 if if you leave
these values then if we try to write
another value like if we write here 13.
so what will be the output now let's
save it and see there is no output and
there might be no error for this as well
so if you try to check for an error go
to inspect and check out
see there's no error right so in that
case we have one more case like we have
default case
so let me show you how to include
default in your program what you have to
do is write here default
with a colon and right
document
dot right and let's suppose we are
writing here
wrong input
what is happening is let's try to run
this program First Press Ctrl s and now
you can see it says raw input for value
13.
so what is happening is the switch case
will first check these 12 cases and any
value other than 1 to 12 will get the
output as wrong input it works the same
as the else statement right in else
statement we don't need to specify any
particular condition any condition other
than the if condition or else if
condition will fall inside the else
statement it's not necessary to add
default in your program it's just if you
want to give the user a prompt that he
has entered a wrong value
so you must include this default case in
your program every time while using
switch case because it's quite useful
you know okay so this is the complete
program to find out the month by
accepting its number
so if you try
six
and save it now it will say Zoom if you
try 10 save it it will say October if
we'll try 12 save it it will say
December so I hope this is clear to you
guys
next up let's discuss about switch case
in detail because the switch case in
JavaScript Works differently from other
languages like switch cases also present
in C plus plus and Java but in
JavaScript it is a bit different so in
JavaScript
switch case can accept numbers it can
accept strings and Boolean values as
well now let's have a look at how the
switch case works with string values
so here is an example of string values
you can see the value variable month is
holding is June right and you can see
use this string in case as well so here
you have to give the case as a string
value right because we are using switch
case statement with
strings so the first case here is when
the value will be June the output should
be sixth month and when the value is
July the output will be seventh month so
let's check it out if this is working or
not let's save this program and see for
June it says sixth month and similarly
we can check it for July as well let's
check for July
save it and see it says seventh month
you can include the default case as well
if you want to it will be similar like
there's no difference for default case
let me show you how
will write here wrong input
save it and now let's try to change the
value here let's say we are using May
save it and see it says wrong input what
if we use a numerical value here let's
try to use two save it now it says wrong
input for two as well it will give you
the output when the value is either June
or July
so any other value you try to use here
it will give the output as wrong input
in the same way it works for Boolean
values as well let me show you how it
works for Boolean values so what you
have to do instead of 2 you have to give
here a Boolean value let's suppose you
are writing here true and for true you
have to change the case as well for true
you have to change the output as let's
say for true it the output will be 1.
okay and similarly for false
the output should be 0.
and the output should be wrong input for
any other case right so save it now and
see here for true it says one the output
you can see here is one and if you try
to do the same for false like let's
write here false
and now try to check the output see here
it says 0.
you can see the output is correct right
so before jumping into the for Loop
let's first understand what exactly a
loop is right so a loop is basically a
programming construct that executes a
piece of code as long as a certain
condition is met
all right and there are two different
types of Loops we have entry control
loops and exit control groups now what
exactly are entry control loops now
these are the loops where the test
condition is checked before executing
the piece of code
for example you have the for Loop and
the while loop so in that case before
entering the loop the condition is
checked and only if the condition is met
it enters the loop and executes the code
all right when it comes to exit control
loops the test condition is checked
after the loop has been executed
all right so in this case the loop at
least gets executed I mean the code in
the loop gets executed at least once
so the example for this is a two while
loop all right with this basic knowledge
let's go ahead and learn about the
different loops
so the first Loop is the for Loop all
right
so what exactly is a for Loop this is
the basic logic and the flowchart in
front of you so what exactly happens is
that say for example you want to print
the word looping say 10 times right so
what you can do is you can start and you
can have a for Loop which goes from 0 to
9. and then you increase the number by
one every time you print the loop once
it's equal to 10 or even greater than 10
it ends the loop right so let me help
you understand this better with an
example so let's go to our editor that
is vs code
here I've created a folder called demo
underscore Loops within which I've
created a file called for Loops all
right so now let's just write down our
initial code for HTML that is
HTML
and then I have a head tag
[Music]
within which I saved JavaScript
loops
all right
now I have a body tag
[Music]
within which I give a heading for
clearer understanding let me have a
heading say
JavaScript
[Music]
for loops
all right
let me just call it for Loop
now let's have the script tag
[Music]
within which
I'll have
a variable say X
and now we have the for Loops so we say
four
x equals
zero
X less than
5 X plus plus
in which I say console DOT log of x
so basically
what happens is
now you have the first readable which is
called the counter variable now this
keeps track of how many times the code
is being executed
right and next I lesson 5 is a condition
now the loop keeps executing as long as
the condition is met
and lastly the counter variable is
incremented and usually it's incremented
by one right so here we've done the same
thing
and inside the loop we print the value
of x
all right so let me save the file
and then execute it
all right it's printed JavaScript Loops
here let me just go back
okay my bad I missed out on the title
tag
so this has to be enclosed within the
title tag
so let me just
change it here
now let's save this
let's go back and just refresh the page
and that is it so whatever is in the
title tag basically appears here all
right so now since we're printing the
value of x on our console we'll have to
inspect our element so let's go here
and here let's check on console
and here you can see all the values have
been printed from 0 to 4. all right now
this is a simple for Loop
so next up is a while loop
now the logic is similar to that of a
for Loop so first the condition is
checked and if the condition holds true
then the code is executed and if it is
false it terminates
all right so moving on let's understand
the general syntax
so here first you have the variable
whose value keeps changing
and then you have the ending condition
which is basically the maximum value a
variable can reach all right so let's go
back to our vs code
and here for better understanding let me
just change this to JavaScript while
loop
all right let's just
delete this and here let's initialize
the value of x to 1.
and now I say while X
less than or equal to 5
within races I
say console.log
dot X
and then I increment the value of x
all right so let me save this
and let's execute the file
all right so it says JavaScript while
loop and let's inspect and here in our
console it displays the values of x
all right so according to the logic
X is initially initialized to 1.
and the value gets executed once it
enters the while loop all right it's
incremented and then checked every time
until the value reaches
6 right and then it breaks from the loop
since the value does not hold true and
then it terminates
so this is a logic behind the while loop
next up is the two while loop
now here
as you can see first the code is
executed and then the condition is
checked if the condition is true then
the code execution continues and if it
falls it's terminated all right so this
is an exit control Loop also in an exit
control Loop the code is executed at
least once so let's go back to our vs
code
and here
let me just delete this
now let's initialize X to say
15 all right and now I use the do
keyword within which I write the code
so first I'm going to print the value of
x
console DOT log of x
and then I increase my value
and here I mentioned my test condition
just while X
less than say 10.
all right so according to the logic
initially the value is X and once it
enters the loop here
it should print the value of x which is
15. all right and then it increments the
value but once it comes out of the loop
it checks for the condition
here the condition says less than 10 but
since X is not less than 10 it prints
the value X that is 15 and then
terminates all right so let's save this
and execute it
so let me execute this
and here
let's check
the console
so there we go it prints 15. so what it
does is that it prints the value 15
first and then checks the condition
now
let's go ahead and change the value of x
to save
5.
all right so now it enters the loop and
then it prints the value of x and then
increments it and when it comes out of
the loop and checks the condition
as long as the value of x remains less
than 10 it prints it okay
so let's save this
go back here
and let's refresh the page
and here you can see the values 5 to 9
are printed so this is how the do while
loop works
moving on to the next concept breaking
out of a loop now as the name suggests
break is the keyword that is used to
break out of a loop now here is a simple
code for you
so according to the logic it prints the
values between 1 to 10. and say at the
value 5 you want to break out of the
loop you can simply use the keyword
break so let's go back to our vs code
and here let me just
make it simple
unsave
for x equals 1 x less than or equal to
10
let's implemented
and within the loop let's
display the value X
on the console and then we're going to
check for the condition if x equals 5.
all right
so if x equals 5 we break out of the
loop
so let's save the file and execute it
and there you go it's displayed the
values from 1 to 5.
so basically the code inside the for
Loop is executed and once the value of x
reaches 5 it breaks from the loop
simple right
all right so let's move on
next up we have skipping a loop cycle
all right so here what exactly we do is
we make use of a keyword continue to
skip a particular Loop cycle
say in this case we have a for Loop
which displays the values of I ranging
from 1 to 10. however we want to skip
the cycle when it reaches the value 3 so
what we do is we make use of the keyword
continue here so basically it displays
one and two and skips the third cycle
and then directly displays four all
right so let me show you in our vs core
editor here
let me just remove this and Save
if x equals
5.
I'm going to continue
all right
after which
I'm going to say console
DOT log f of x
so let me save this and then execute it
so here let me refresh the page
and there we go
as you can see it displays one two three
and four and the fifth cycle
is skipped
all right and the rest of the digits are
displayed so that is how you can skip a
load I highly suggest you also practice
all of this and then play around with
loops to get a better understanding
today we are going to take input from
the user with the help of a text box in
JavaScript what we'll do is we'll create
a text box and any value the user will
write inside the text box will be stored
in a variable and then we will print
that variable in a message using the
alert method or in the control so
whatever we want to do we can do it so
let's create a small login page with no
styling because we'll be focusing more
on the HTML and the JavaScript parts so
for that we have to go to our HTML file
so here's our HTML file and we'll write
here
input
and then we'll write a type is equals to
name and then we'll write here
placeholder is equals to let's say enter
name
this placeholder is an attribute that
gives a slight hint whatever value we
write here will be printed inside the
box so this enter name will be printed
inside this particular text box
so save it and here you can see on the
browser we have a text box here here you
can see how this value is written inside
the text box you can see here enter name
is written inside a text box indicating
the user to write the name here so let's
create another text box here for the
password we are creating a login page
right so we'll be needing name and
password so we'll use the BR tag here
and then we'll write here
input type is equals to
password
and then we'll
use a placeholder here and we'll write
here
enter
password this type attribute here plays
a vital role on this input element
because we have different types of
values we can use inside a text box like
we have numbers strings week time email
password and many more so here we are
using password
to save it and you can see here we have
two text boxes over here in the browser
so we have a text box for name and we
have a text box for password
next up we need a button to perform a
task right so we'll use the on click
method along with this button we can
either use the button tag or we can use
the input tag along with type is equals
to button so we'll write here input
type is equals to button and the value
will be
say submit
or we can write here login essay save it
and here you can see we have a button
over here named as submit so we are done
with the login setup here we have a text
box for the name and one for the
password so we'll write any name here
you can see let's write here question
and then we'll write the password here
let's say any random password and
nothing will happen if we click on the
submit button so let's add some
functionality to this submit button here
so we'll go back to HTML file and we'll
write here
on click so we'll write here a function
name print fine
we'll create this print function now so
we'll go to our JavaScript file and
we'll create a function here so let's
say function name is print and then we
have the body of the function now this
function will be called whenever we
click on this button so whenever we
click on the submit button this print
function will be called now we want this
button to do something right we want it
to perform a certain task what we want
to do is we want the user to write their
name and password and we will print this
name and password in the pop-up with the
help of alert method so we'll use the
document.getelement by ID method for
this task let's give those elements
their IDs so we'll give these two input
tags their ID so we'll write here
ID is equals to let's say you name or
username and then we have the password
for password will give the ID as you
pass fine save it and then we'll go back
to our JavaScript file now both these
elements have their own IDs we'll use
them in the Javascript file so we want
to use the values given by the user
right for that we will create two
variables here inside the function print
to hold the reference of original value
so for that we'll write here where X is
equals to
document dot get element by ID and then
we have the IDS you name for the
username and then we'll write here Dot
when next up we'll take another variable
let's say where Y and then we'll write
here
document Dot get element by ID again
then we have the IDS
you pass
we'll write here dot value now what we
did here is we use the IDS to get the
reference of those values which the user
will input you might have noticed here
that we have used the value property
here after the IDS so this value
property Returns the value attribute of
any text box
so now we have the values here present
inside variables X and variable y the
next thing we want to do is we want to
print these values right so for that
we'll use the alert method so it's quite
easy to use we'll write here alert and
then we'll write here
the name is and then we'll print
X so because variable X is holding the
value of name then maybe
use slash n and after that we'll write
here
the password is and then we'll print the
value of password
so we are done with it we have printed
the values of X and Y here now save it
and now we'll enter the values here
let's say the name is
caution and the password is
simply code
the moment we click on this submit
button there will be a pop-up with a
message you can see it here the name is
kaushal and the password is simply code
so we printed these variables here along
with the alert method
so this is how we can take input from
the user in JavaScript so we already
discussed that we want to create a login
form here with a specific name or
password right let's say we want the
user to be allowed only if the password
is simply cool otherwise the user should
be restricted from entering the web page
so this is a simple task all we have to
do here is we have to use the if else
control statements so for that we'll
write here after this statement we'll
write here if and then we'll write here
except pass we are doing it for password
right so we'll write a y is equal to is
equals to
simply code then we have the body of if
we'll write here alert
login successfully
and then we'll write here else this
the statement will be
alert
wrong password
so we'll keep this line here so what
will happen is the moment we'll press
the submit button it will go to the if
else statement and it will check if the
password entered by the user matches the
correct password or not so if the
password matches it will print login
successful otherwise it will print the
wrong password and then finally it will
print the name entered by the user and
the password as well so let's save it
and we'll write here the name as let's
say caution
and the password let's say the password
will be different this time we'll write
here simply learn
so this password does not matches the
original password right the original
password is simply code so what we are
expecting is it will return wrong
password here so let's save it the
moment we press the submit button you
can see here we have a pop-up with
message wrong password because the
password we entered is simply learn so
if we press OK here in the next message
you can see the name is kaushal and the
password is simply fine so
let's do it again this time we'll enter
the correct password we'll write here
simply code
and we'll change the name as well so
let's say the name is
Rahul
submit it and here you can see we have
the message as login successful
we'll press OK and here you can see the
name is Rahul and the password is simply
cool in this tutorial we will see how we
can use radio buttons to take input from
users now HTML radio buttons are created
with the help of input text and the type
for creating radio buttons is Radio we
can use radio buttons on multiple
occasions for example we can create a
quiz question using a radio button at
one time only a single radio button will
be selected and we can use it to find
the correct answer so today we will use
radio buttons along with the ID
attribute and then we will create a
JavaScript function to find the correct
answer for a quiz so without wasting any
time let's move on to the programming
part
so first we will see how to add radio
buttons to our HTML document
in the HTML file we will write here
input
type is equals to radio
and then we have
value is equals to let's say option one
because we are using multiple options
right we have multiple options for a
single question or we have multiple
options here so we'll write value as
option one and then we'll write here the
value we want to print so we'll write
your option
one
fine save it and we have a radio button
over here you can see we can check it
and it has no functionality till now
so let's add another button first so
what we'll do we'll copy this line from
here and
will paste it and then we'll change the
option as option 2 and the value also as
option 2.
right save it again and here you can see
we have two radio buttons now let's add
a submit button here first so we'll
right here
input type is equals to
button and then we have value is equal
to submit save it and here you can see
we have a submit Button as well one
thing you might notice here is we can
check both the text boxes right we can
check option 1 and option 2 both at the
same time so if we want to select only
one checkbox at a time we have to group
them so we'll use the name attribute and
the same name for these two radio
buttons so the name will remain the same
for both of these
radio buttons so we'll write a name is
equals to let's say
G1 and then we'll write here as well
we'll write here name is equals to G1
now these two radio buttons belong to
the same group
save it and now if you try to check both
these boxes you can see we can't do it
now because we have grouped them and now
we can select only one radio button at a
time right
now the next thing we are going to do is
we'll move to a JavaScript file and
we'll create a function there so we'll
move to a Javascript file so here's our
Javascript file and we'll create a
function here so let's do it first so
we'll write here
function
let's say the function name is
fun one fine and then we have the body
of this function so inside this function
we'll write here we'll take two
variables again for both elements so
we'll write here where X and then we'll
write a document Dot
get element by ID then we'll write here
the ID
so let's provide the ID to those
elements as well so we'll write here
before name will provide the ID so let's
say the ID for the first radio button is
red one and the ID for the second one
will be
let's say Red Two Fine save
and we'll go back to our Javascript file
we'll write here red one
and then we'll take another variable
we'll write here where Y is equals to
document dot get element by ID method
and then we'll write here the ID so the
ID for the second radio button is
red two fine we don't need the value
property here next up we have to use the
if else statement to print something
right so we'll right here we'll use the
if else statement we'll write if
and then we have
x dot checked
is equals to is equals to true
then it will return something right so
we have a condition here as if x dot
check is equal to is equals to true this
particular statement will check if the
radio button whose reference is
available at variable X is selected or
not this dot checked is the property for
a HTML element if the radio button is
checked the output will be something so
let's add the output here as well so the
output will be if the radio button is
checked
will be like we'll write a alert then
we'll write here the
option
selected
is
then we will write here
x dot
value so it will print the value of x as
well
now we have another condition here
we'll write here if y dot checked
is equals to is equals to true
then it will return the options
selected is we'll write here plus y dot
value we are doing this because we have
three different conditions here right if
we select option one or if we select
option two or if we are not selecting
any of these options right so we have a
else condition for that and then we'll
write here else so here we have to write
else if
and then we'll write here else
and else part will print
alert no option
selected save it and let's do one thing
first we'll call this function with the
help of on click method so we'll go back
to HTML file and we'll write here in
this element we'll write here on click
and we'll call this function on click
so we'll write you a fun one and we have
this function here save it and here we
are good to go
so if we move back to our JavaScript
file you can see here we have three
conditions either X is checked or Y is
checked or none of these are checked so
let's
check the output now we'll select option
one first we'll submit it and here you
can see we have the output as the option
selected is option one fine
press ok then we'll refresh this page
and we'll select option 2 and now we'll
press the submit button so here you can
see on selecting option two we have the
output here as the option selected is
option two right so what if we are not
selecting any of these two radio buttons
so
click the submit button here and you can
see we have the output as no option
selected so I hope you guys got it now
the syntax will remain the same if we
want to create a quiz so next up what we
are going to do is we are going to
create a quiz
so here is the code if you want to
create a quiz on your own so we have a
question here we have a question as
JavaScript was developed in the year and
then we have two options for it we have
1998 as first option so if we go here
you can see we have the first option is
1998 and then we have another option is
1995. obviously we know the answer for
it as 1995 will change the function name
here as
fun one
and save it
the Javascript file for this code will
look like this so we have three
conditions here again if x is checked
then the output will be wrong answer and
the correct answer is why and then we
have another condition for y if Y is
checked or we can say if 1995 is checked
we'll have the output as right answer
and then we have another condition if
none of these radio buttons are checked
we have the output as no option selected
so let's see if the code works fine so
save it
and we'll go to the browser so we'll
select option one first so we'll select
this 1998 submit it and here you can see
we have the output as wrong answer the
correct answer is 1995 right we have the
value of y here the value variable Y is
holding is 1995 so we printed it over
here and we have the output as y dot
value which is 1990
so if we refresh it and if we select
1995 here then we'll press the submit
button and here you can see we have the
output as right answer fine press OK and
we are going to do it again so this time
we won't be selecting any of these
options we'll just click on the submit
button and we have the output as no
option selected fine I hope you guys
understood it in the last few videos we
discussed the same thing right we saw
how we could take input using text boxes
and then we saw how we can take input
using radio buttons today we are going
to grab users input with the help of a
select box in JavaScript so without
wasting any time let's move on to the
programming part directly first we'll
see how to create a select box in HTML
and then we'll move on to the JavaScript
part so let's move on to HTML and we'll
create a select box here if you guys
remember we use the input tag in the
previous few videos for text boxes and
radio buttons but for the select box the
scenario is a bit different we have to
use the select element in HTML so we'll
write here
select
so we have the select element here we
have to use this for select box in
JavaScript or in HTML
so this select box is used to create
drop-down list of some elements so we
can add as many elements as we want to
that list so we'll use the option tag
for each component we are going to use
so the code goes like this will
start with the select tag and let's save
this and see if it makes any changes to
a browser so you can see it on the
browser that we have a button over here
now we'll add options to this drop down
list for that we'll use the option tag
we'll write here option
and let's say we have three options we
have three car manufacturers name so
let's say the first name is BMW then
we'll copy this
statement and
we'll paste it again and again and then
we'll change the name of Manufacturers
so let's say another manufacturer is
Audi and the last one is food fine we
have three manufacturers now save it and
you can see it over here we have a drop
down list of three different elements we
have BMW or dn4 here next up we'll add a
button so a submit Button as we did in
the previous few videos for that we will
write here input type is equals to
button and then we have value
is equals to
submit fine
save it and we'll use a br tag here
save it now and here you can see we have
a drop down list here we have a select
box here and then we have a submit
button over here
fine now we want to print the option we
selected by clicking this submit button
for that we have to add functionality to
our HTML document right so we'll follow
the same steps as we did in the last
video wherein we used the radio buttons
and the text boxes so we'll write here
inside this input tag we'll write here
on click so what we want to do is we
want to call a function on clicking a
submit button right so we will write
here a function name so let's say the
function name is selected
and we have to use the ID attribute in
the select element right so we'll use
the ID attribute here we are not going
to use our ID attribute inside the
option tags but we are going to use the
ID attribute inside the select text we
will write here ID
is equals to let's say
1. fine
so we have an ID here now we have to use
the value property here as well so I
hope you guys remember the value
property which we discussed in previous
videos so the value property is used to
access these values right so we'll write
here
value is equals to
BMW and then for Audi the value will be
OD and then for Ford the value will be
food fine save it and here we are done
with the HTML document so next up we'll
create a function in the Javascript file
so let's move on to the Javascript file
and we'll create a function over here
so we'll write here
function and the function name is
selected
then we have the body of this function
right so we are going to repeat the same
steps we are going to take a variable X
which will hold the reference of Select
statement so we'll write here
document Dot
get element by ID and then we'll write
here the ID so the ID is 1
so now we have a variable X which holds
the reference value of Select element
right
now we have used the document.getelement
by ID method to get the reference of the
selected value next up we'll use some
properties for select element while
printing the value with alert method so
if you guys remember in the previous
video wherein we use the dot checked
property for radio buttons so similarly
we have some more properties here for
the select boxes as well so let's have a
look at them
so we'll write here
alert
and then we have a property which will
go like this we'll write here x dot
options
and then we have
this brackets and Dot value
so this options property here is a
collection of all the options we have in
our select tag
we have multiple options right this
property works on arrays so we have an
array of all the elements and we can
access any of them for that we will
write here the index value right so
let's say the index value is 0 we want
to print the element present at number
one so we'll save it and the moment we
press submit button you can see here we
have the output as BMW now one thing to
notice here is
it doesn't matter which option the user
chooses the output will remain BMW for
all those cases because we are using the
first element of the array so no matter
which option the user is selecting the
message will be there with the value
present at index 0.
so we can say now that we can't use
static values right we can't use 0 1 or
2 here because we want
to provide the value dynamically because
we have three different values here and
we want to print the value which the
user selected not the one present at
index 0 1 or 2. so for that we have
another property here we have to write a
x dot
select
Ed index
and one thing you have to remember is we
have to write here x dot selected index
or any variable we are using here so we
are good to go now save it and if we
press submit now while
clicking on BMW so our first option is
BMW let's press the submit button and
here you can see we have the output as
BMW
and next up will be selecting Audi and
we'll press submit so here you can see
we have the output as already now
and finally we have Ford as well so
let's check it as well so press the
submit button and here you can see we
have the output is food
so this is how we can take inputs in
JavaScript from drop down lists next up
we'll go through a simple program as we
did in the last video wherein we'll
Create a quiz question and we'll check
if the option selected by the user is
correct or not so this is the code for
that so we have the question here is
Javascript was developed by we are using
another question different from the one
we used in the last video so we know who
developed JavaScript right so we have a
question here JavaScript was developed
by and then we have two options for the
same question the first one is Brendan
Ike and the second one is Guido win
Rossum
so then we have the IDS one for the
select element and the values are also
the same then we have a button over here
which will call function1 on clicking
and if we move to a Javascript file we
can see here we have a function fun one
and then we have a variable X which
holds the reference of value
returned by document.getelement by ID
method and then we use this value so we
have used a x dot option so what we are
doing is we are basically checking that
if the selected value is equals to
Brendan Ike or not if the value is equal
to Brandon I then the output will be the
answer is correct else the output will
be the answer is wrong so let's save it
and we'll move back to HTML file and
we'll save this file as well so now here
you can see we have a question over here
and we have a select box which has two
options Brendan I can guide you in
Rossum right so let's select Brendan Ike
first press the submit button and here
you can see it says the answer is
correct fine next up we are going to use
gaido and Rossum and we are going to
press submit button so here you can see
the answer is wrong
also if you want to become a full stack
web developer then the postgraduate
program in full stack web development in
collaboration with Caltech ctme can help
you accelerate your career as a software
developer check out the link mentioned
in the description box below we have
been using the document.getelement by ID
method for the past few videos right we
know it is used to access an HTML
element with the help of an ID which is
uniquely provided to each element
so we use that method with text boxes
then with radio buttons and then with
select boxes as well so today we are
going to use a method that is somewhat
similar to document.getelement by ID
method
so we'll be using the
document.getelements by tag name method
in JavaScript
as the name suggests this method is used
to access a bunch of similar elements
with the same text so we have tag name
in our method right so we can access a
bunch of tags with similar name like if
we have a few div tags present in our
program and we want to change each div
tags style we can do it with the help of
this method
so we'll look at the syntax first and
then we'll move on to the difference
between ID and tag name method so let's
move on to the programming part directly
what we'll do is we'll create a few div
tags first and then we'll change this
style of these div tags with specific
styling properties we are not going to
use CSS for that but in JavaScript we
have other styling properties as well so
we'll be using those styling properties
so let's create the div text first
we'll write here div
and then let's say we are writing it
this is section
one so we'll copy this line
and we'll create four similar div tags
right
we have section one two three and
four
save it and you can see over here we
have four different sections present
now this is a very basic example and
here we have different sections present
right next up we'll try to access these
div tags with the help of tag name
method so let's add a button over here
and then we'll move on to the JavaScript
part
so we'll write here let's use the BR tag
and we'll write here input tag again
we'll write a input type is equals to
button and we'll use the on click method
as well so we'll write here on click and
let's say our function name is
fun to
and then we have the
value of this button as let's say submit
close the input tag and save it so here
you can see we have a button over here
submit button and you can see here
nothing is happening on clicking on the
submit button so next up what we are
going to do is we are going to add
functionality to the submit button for
that we have to move to our Javascript
file and we have to create a function
over there
so we'll write here in the Javascript
file we'll write here function
and then we have the body of this
function right so the syntax is a bit
similar to that of the
document.getelement by ID method what
we'll do here is we'll take a variable X
and then we'll write here
document Dot
get Elements by tag name and then we'll
write inside the brackets the name of
tag we want to access right so here we
have added four different div tags so in
this case we'll write here div and we
can similarly access any of the tags
present in our HTML document we can
access paragraph tags we can access
anchor text and any tag we want to
basically
so save it and here now we have a
variable X that holds an HTML collection
of all the div text present inside the
HTML file this means that we have an
array of references of all the div tags
here inside this variable X
so if we try to make changes in a single
array element just like we did in the
select box example wherein we use the
array index to access a particular
element present at a particular array
Index right so we can do the same here
we'll write a x and then we'll write the
index number so this particular
statement will access the element
present at number one
or this particular syntax will access
the
first div tag of HTML document because
we know arrays start from 0 and at 0 the
first element will be present so this
div tag will be present at number 0 and
then we are going to use the style
property so we know that X here is not a
variable only actually X here acts as an
object and we know that different
objects have certain properties in
JavaScript so style is one of those
properties and next up we'll write here
let's say
font family so what we are doing is we
are doing the CSS part with properties
present in JavaScript so let's say we
are changing our font to
Courier new
fine so this is a font name and we can
use any font name over here so save it
what will happen now is on clicking the
submit button the font of this
particular section the font of div 1
will change to Korean so let's try if
it's happening or not on clicking the
submit button you can see over here the
change between this line and other three
div tags clearly the font has changed
the new font is Courier new and what we
did here is we changed the font family
of this particular div tag so similarly
we can make more styling changes to
other div tags as well so let's do it
here
and we'll
make changes to each of the div tags we
have in a HTML file so let's say
here we are using the color property and
we want to change the font color to
blue
fine then we'll do the same for element
present at number three for that we'll
write here x and the index number will
be 2 so then again we'll use the style
property and then
let's say we are writing here
font
type
fine and the font style we want it to be
italic
and then finally we have one more
property
let's say for x
for the uh repeats so let's say for the
last div tag we are using the background
color
fine and we'll write here the color name
is
red
so we are good to go now save it and we
have four different properties over here
for section four we are changing the
background color so three will be the
index number of the last array variable
so save it and on pressing the submit
button you can see the change over here
so for section one the font is changed
to Courier new for section 2 the font
color is blue let me Zoom it out a bit
to show you guys you can see over here
the color is blue and then we have
italic text in section three and finally
for section 4 we have the background
color as four right
so you can see how we are accessing any
particular element of the array now why
we are using these properties separately
for each array element
so if we try to make changes on each
element of the array we simply can't do
it in JavaScript at once so if we try to
write here so let's comment this out
first what we'll do is we'll write a x
dot style dot font family so basically
what we want to do is we want to change
the font family for all the div tags
present right because we know the
variable X is holding an array of all
the div text present in a HTML file
right so we'll save it and you can see
over here if we are clicking on the
submit button you can see nothing is
happening so if we go to our console
and you can see it over here that we
have an error here so it says it cannot
set property font family of undefined so
this is the problem with this get
Elements by tag name method to overcome
this problem we have a solution as well
so the solution for this problem is we
have to use the for Loop View so how
this for Loop works so we'll write here
4
and then we'll take a local variable I
and the initial value will be 0. then
we'll write a i
less than x dot length because we want
to Traverse the whole array right and
then we'll write here the condition I
plus plus so we are going to go then we
have this body of for Loop and inside
here we'll write X and the index number
will be I because it will keep on
changing and we are in a loop so we'll
write here dot style and then let's say
the style we want to do is font
weight and what we want to do is we want
to make our font Boulder fine
so comment this line as well save it now
and you can see over here everything is
clean now what will happen is on
pressing the submit button the font will
change the font weight will change
basically so let me Zoom this and if we
click on this submit button you can see
the font is more bold right so if we are
using another property here let's say
the font
we are using here
background color and we want the
background color to be yellow
fine so save it and on clicking the
submit button you can see the background
color for all the div tags for all the
four section is changed to Yellow fine
so this is how we can access all the
elements of an array at once now what we
did is we started a loop and traversed
every element in the array and applied
the same property to each element
so this is how we can do it with the
help of tag name method in JavaScript
now what if we have hundreds of similar
elements like div tag present in our
website and all of them are present at
different locations so let's try to do
it and what we'll do is we'll insert
certain different elements in between
these div tags
fine so we'll include a form and then
we'll include some radio buttons and
anything we want to do we can do it so
we'll add some more elements in between
these div tags so here you can see we
have inserted two three more elements in
between these div tags so save it and
you can see after each section we have
something else here we have a form with
two different text boxes we have name
and age and then we have a submit Button
as well
then after that we have section two so
this is our section two then after
section two we have radio button and the
value is a then we have another radio
button B and in between we have all the
dev text present so basically what we
want to do is we want to change the
style for each of the div tags right so
we will change the background color here
so let's say we'll write here red and
what will happen is on clicking the
submit button on clicking this submit
button what will happen is the
background color of each div tag
so the background color for section one
two three and four will change to red so
let's try to do it and let's see if it's
working or not we will click on the
submit button and you can see it over
here we have all the div tags with
background color is red so this is
working totally fine
one more thing we'll discuss before
wrapping up this video is the uniqueness
of ID attribute for each element
so we are saying this for a long time
that the ID for each element should be
unique wise although we saw in the past
videos that we can use the same ID for
two different elements when we did the
same for accessing a CSS styling
property using the ID attribute but if
we try to do the same thing with
JavaScript we'll get an error for
example if we try to access the value of
any particular element with the ID
attribute but we have two elements in a
HTML file with the same ID so it will
throw an error in that case basically
and this is the reason why we use the
tag name method in JavaScript so that if
we want to access multiple elements of
the same name we can do it with this
method because it's not possible to use
the ID method separately for each
element present in the HTML document
right because we have certain same HTML
tags present within an HTML document
like we have the div tags here similarly
a website is long enough to have
multiple similar elements present within
it so that's why we use the
document.getelements by tag name method
in JavaScript so guys in the past few
videos we use two different methods of
accessing an element from an HTML file
using JavaScript properties so we know
the difference between the ID method and
the tag name method right today we will
use another method to access a
particular element in JavaScript that is
the class name method or we can say the
get Elements by class name method in
JavaScript so before discussing the
class name method in JavaScript let's
look at why accessing an element is
important in JavaScript
so we know that the document object
model is used to change add or delete
HTML elements we saw earlier that we
could change HTML elements or the CSS
style of any element in the document
with the help of JavaScript properties
so to make specific changes to those
elements we need to access them using
particular methods so we discussed two
such methods before the ID method and
the tag name method right so let's move
ahead and look at the class name method
of accessing an element in JavaScript as
the name suggests the main attribute in
this method will be the class name so we
know the difference between the class
and the ID attribute used in HTML we
know that ID has to be unique for each
element but we know that many elements
in an HTML document can have the same
class right so we used Class to access
specific CSS properties in the previous
videos and that is the only benefit of
using classes in JavaScript so we can
say that a single class can be used by
many elements within an HTML document so
let's dig a bit deeper into this concept
so let's say we have five elements
present on our website and we want to
make changes in three of these elements
right so let's write the code here and
it will be easier for you guys to
understand so will write here in the
HTML file will add five different
elements so let's say we are writing
here
div and
then inside this div we'll write
this is
section one we'll copy this
will paste it here
so we'll use two div elements and two
paragraph element right so here in this
P tag we'll write this is
section three
and then we'll copy this line paste it
again copy this one as well and paste it
here
so we have section one section 2 3
4 in
5. so out of these five different
elements we have three div tags and we
have two paragraph text so we'll discuss
why we have taken two paragraph tags in
between the div tags
so we are done with it here you can see
we have five elements present in a HTML
document three of them are the div text
section one two and five are div text
and two text in between are the
paragraph text so now let's suppose we
want to change the style of three of
these elements let's say 1 4 and 5. so
we can do it in two ways right either we
can use the ID method or we can use the
class method however we can use the tag
name method as well but we have to use
two different variables for that right
that will be a lengthy process why two
different variables because we have two
different tags present here right we
have to create separate variable for the
div tag and separate one for the
paragraph text so that will be a lengthy
process so we'll consider ID method and
the class name method for here
so considering the ID method the
document.getelement by ID method we have
to provide unique ID to each element so
we have to provide unique ID to this div
tag then we have to provide to each and
every element here right because we need
to access
three of these elements so at least we
have to provide the ID to those three
elements which we want to access right
so in such cases we can use the class
name method where we want to access more
than one element but not all the
elements in an HTML file so we'll use
the class attribute in each element we
want to access
so let's say we want to access section
one two and five so we'll write a class
let's say the class name is cls1
we'll copy this paste it here and we are
accessing one two and four because one
two and five are the div text so we can
access these with the help of tag name
method as well so we'll access one two
and four
fine so we have used the class attribute
here
next up we'll create a button and then
we'll add functionality to a HTML
document so let's create a button here
we'll again use input type is equals to
button and then we have
on click
and on clicking it will call
and then we have the value as
submit fine
so save it and here you can see in the
browser we have five sections over here
we have section one two three four and
five then we have a submit button which
will call the function on clicking so we
haven't added functionality till now so
let's move ahead to our Javascript file
and we'll add functionality to a
HTML document
so inside this JavaScript file we'll
write here
function and then we have the function
name is
then we have the body of this function
so the syntax remains a bit same
so we'll take a variable first and then
we'll use the document method to take
references of all the elements from a
HTML file
so we'll write here
where X is equals to
document Dot
get Elements by
class name right and then we'll write
the class name here so the class name is
cls1
till now what we did was we took the
references of all the required elements
and stored them inside a variable named
X in the form of an HTML collection so
now we can make changes to these
elements and what we'll do is we'll
again use the style property to make
styling changes in those three sections
so we have these three sections present
inside an array and we can access any
one or all the three elements right so
we'll write here x and then we'll
provide the index number so let's say we
want to access section one that is the
first div tag so we'll provide the index
number as 0. then we'll write Dot
tile
and this style is a property dot then
let's say we want
to change the font style so we'll write
here
font style
font style will be
italic save it so this piece of code
will change the font style of the
element present at index 0. save it and
on clicking the submit button here on
the browser we can see the change in
this section right so if it's not
visible so let me Zoom it a bit for you
here you can see guys the font at
Section 1 is changed to italic right so
in this case we have all the three
elements present in a array and we can
make changes to each of these elements
so let's try to do it and we'll use
element present at index 1 now
we'll copy this line and we'll paste it
here again two times because we want to
make changes to all the elements right
we'll write it two and we'll write here
1.
and let's say
we want to change the font color for
this one and the font color will be blue
for this we will change the font weight
let's say
and we want to make it
bold
so we'll write here Boulder
save it and on clicking the submit
button you can see we have all the three
sections with some minor changes the
first one is changed and we have italic
over here for the second one we have
blue color as font color and for the
third one which is section four we have
the font readers Bolder so you can see
the change over here so this is how we
can make change to each element
separately and we can also make changes
in all the elements at once as well so
for that we have to use the for Loop
just like we did for the tag name method
right so for that we'll write here so
let's comment these three statements
first
and then we'll write here
four and
it will take a local variable here we'll
write you where I is equals to 0 I will
start from index 0 and I will go till
x dot length
and then we have the condition is I plus
plus
so inside the body of for Loop we'll
write here
X and
instead of index number we'll write here
I because we want to Traverse the whole
array then we'll write Here style Dot
and let's say the style we want is
background color
we want the background color to be let's
say
yellow
fine
so this is how we can use the for Loop
save it and we'll see on clicking the
submit button on a browser the
background color for all the three
sections that is one two and four is
changed to Yellow
this is how we can use the
document.getelements by class name
method to access all the elements
present in an HTML file with a
particular class next up let's discuss
the difference between the ID method tag
name method and the class name method so
we'll discuss when to use which method
so let's start with the ID method so the
ID method is used when we want to access
a single element and we have to provide
a unique ID to that element in order to
access it so the ID method is quite
useful when we want to work on a single
element
apart from that if we want to work on
more than one element we have two other
methods we can either use the class name
method or the tag name method for more
than one element
so the tag name method is also quite
useful when we want to access elements
with the same tag name we can access all
the similar tags present within an HTML
document with the help of tag name
method the only problem is we can access
similar types of tags only at one time
we can't access two different types of
tags with this method so this is where
the class name method comes into play we
can access more than one element with
this method and the elements can be
different just like we did here we had
div tag and paragraph tag right so the
section 1 2 and 5 are from div tags and
the section 4 and 3 are from the
paragraph text so we can access two
different tags with same class name with
the help of class name method in
JavaScript so with this we came to the
conclusion that more than one element in
the HTML file can have the same class
and can be accessed with the class name
method so by now I hope you guys
understood the concept of all the three
methods which we have discussed the ID
method the tag name method and the class
name method in JavaScript we can use any
of these methods according to our needs
we'll be learning all about react.js so
let's jump in and see what's in store
for us so we'll be covering topics on
what is react why react features of
react we add prerequisites and its
industry Trends let's go ahead and begin
with what is react react is a JavaScript
library used to build fast and
interactive user interfaces for both web
and mobile applications now one thing
that makes react extremely powerful is
the fact that it's open source any user
can access its source code modify it and
enhance it in a typical model view
controller architecture react defines
the view part of the application it is
also responsible for how the app looks
and feels fun fact react was built by
Jordan walkie an engineer at Facebook
now let's go ahead and see how react
Works in real time consider a typical
web application say Instagram the entire
UI of the web page is divided into
several components we have the search
component a profile description
component stories component and a
postless component these components make
the code easier to debug and always
remain discrete components also make
development and maintenance of web
applications faster as multiple
developers can work simultaneously on
different components of the same web
application now let's see why react is
so popular these days the ACT helps in
creation of dynamic web applications it
also provides performance enhancements
now there are several performance
enhancements like virtual Dom and
one-way data binding we'll learn about
these topics a little later in the video
react uses reusable components now this
helps decrease the development time
react involves unidirectional flow of
data react also has a small learning
curve compared to other Frameworks like
angular react is much easier to learn
react can also be used for mobile
applications react recently release an
extension called react native that is
used for developing mobile applications
that are cross-compatible it also has
dedicated tools for easy debugging now
let's dive in to the features of react
first let's understand jsx jsx is a
syntax extension to JavaScript using jsx
we can add HTML to the Java Javascript
file all coding in react is done using
jsx it also helps in making the code
easier to understand and debug
ultimately jsx is a combination of
JavaScript and HTML now let's consider a
small example cons simple here is a
JavaScript notation H1 tags indicate
HTML again the semicolon indicates
JavaScript note that the semicolon is
not mandatory however it's a good
practice to include it moving on the
next feature is virtual dom dom dom
which is an acronym for data object
model actually defines how documents are
accessed and manipulated in a web page
it represents the entire structure of
the web page in the form of a tree
now let's see how this actually works
react creates a virtual Dom that is the
exact copy of the real Dom traditionally
whenever something changes in the web
application all objects in the real Dom
are updated this makes it extremely slow
let's see how react counters this now
consider two objects whose states have
been changed react now compares the
virtual Dom with the virtual Dom
snapshot that was taken right before the
update by comparing the new virtual Dom
with the pre-update version react
figures out exactly which virtual Dom
objects have changed now react only
updates those objects on the virtual Dom
this makes a big difference when it
comes to speed coming to the next
feature performance react uses virtual
Dom as discussed earlier virtual Dom
impacts the speed of the web
applications we also took an example of
Instagram and learned how multiple
components can affect the development
time they help improve performance
drastically the next feature is one-way
data binding this means information
Flows In Only One Direction One Way data
binding is specifically used when
information is displayed and not updated
remember that the components of react
are functional in nature that is they
receive information through arguments
and pass information via their return
values the next important feature is
extensions react has many extensions
that we can use to create full-fledged
front-end applications it provides
server-side rendering which means that
the application is rendered on the
server rather than in the browser react
native which is a react extension is
used for developing mobile applications
there are many other extensions that
react provides for every scenario in web
development now let's look at a few of
them react native lets you build mobile
applications using only JavaScript a
react native app is a real mobile
application and not just a web
application running on your mobile
devices thousands of applications like
Facebook Instagram Pinterest Skype use
react native the next popular react
extension is flux flux is the
application architecture that Facebook
uses flux implements a unidirectional
flow which makes it easier to understand
what actually is going on now let's see
how it works when we trigger an action
the dispatcher will get notified the
dispatcher receives actions and
dispatches them to the stores a store is
what holds the data of an application
stores will register with the
applications dispatcher so that they can
receive actions data from stores is
displayed in views actions define the
internal API of your application they
capture how anything might interact with
your application the last feature of
react is debugging react applications
are easy to debug thanks to the large
and active developer Community you can
practically debug react calls within
your browser now notice the small react
extension icon at the top right corner
this developer tool allows the user to
inspect the code and also easily debug
it moving on let's learn about the
building blocks of react components
state weight and props are the essential
Concepts that one should know before
implementing react they are the
foundation on which react is built now
what exactly are react components
components are the building blocks of
any react application react divides the
user interface into multiple components
wherein each component defines how a
particular element is viewed in the
application react components remain
discrete and are processed independently
another feature is reusability
components can be reused multiple times
across the application this reduces the
development time consider the following
code snippet a component is implemented
as a JavaScript class having some State
and a render method state is the data
which we want the component to render
the render method is responsible for how
the UI looks and feels to the user the
next concept is state state of a
component is an object that holds some
data this data influences the output of
a component every time the state of an
object changes the component is
re-rendered onto the screen now let's
see what props are props are short for
properties allow us to pass arguments or
data to components properties help make
confidence more Dynamic it is important
to Define all the properties their types
and their default value props are passed
to components in a way similar to that
of HTML tag attributes now consider the
following code Snippets this shows
exactly how properties are passed to
components also detailed illustrations
on components props and state will be
shown in the upcoming videos so stay
tuned for that moving on let's go
through some of the things that you
should know before you can actually
start working on react you should be
familiar with programming Concepts like
functions objects arrays and classes one
should also have a basic knowledge of
JavaScript and a familiarity with HTML
don't worry if you feel like you're not
good at them once you start working on
them you'll get a good hang of it
finally let's go through the impact of
react on the I.T industry and get
insights into the salaries of react
developers statistics show that react
developers earn way more than other web
developers according to pay scale the
average salary for a react developer in
the United States is a whopping 91 000
US Dollars the average salary for a
react developer in India is 7.25 lakhs
per annum over the recent years react
has gained immense popularity and is
being adopted by many companies
according to the data by Google Trends
Riyadh has had a better growth scale
compared to other Frameworks like
angular and view statistics show that
front-end developers have wholeheartedly
adopted this lightweight framework
foregoing other available options if you
are scared and have a knack for
front-end development react can help you
gain fantastic career opportunities
lastly talking about a few companies
that use react devotionally we have
Facebook Instagram Netflix Dropbox
WhatsApp among others in today's video
we'll be learning all about react
installation on windows so without
further Ado let's get started to set up
the react development environment we
need two things installed node and a
text editor of your choice so let's
begin by installing node.js we can head
to the official node.js website say
download
node.js so here you can see the windows
installer depending on your system you
can either download the 32-bit version
or the 64-bit version so I'm going to go
ahead and click on the 64-bit version
since it's already installed on my
system I'm not again installing node you
can follow the installation guidelines
and download it once you're done with
node installation you can go ahead and
download a text editor of your choice so
I'd suggest vs code so let's head to the
vs code page say download vs code click
on the first link and download the
64-bit version for Windows once you're
done with the installation of both node
and your text editor you can start
creating your first react application so
for that let's create a folder I am
creating it on my desktop while you can
create it in any of your drives let's
call it first react now open your
command prompt now you can type in the
path for the folder that you just
created so say CD
first react now go ahead and type in the
command npm install
hyphen G create react app okay so this
command installs all the necessary
react.js modules now to check if the
version is correctly installed you can
type in create
react app version so you can see the
version here now let's continue and
develop your react application type in
the command create react app and you can
give a name to your application so I say
my app now this should take a couple of
minutes okay once you've successfully
created our application they say to
begin by typing the following commands
so let's do that say CD my app and npm
start this should typically start your
application and here we go
all right you can also open your
application in the text editor that
you've downloaded so let's go ahead and
open vs code vs code file open folder go
to your desktop or the drive that you've
saved your folder in first react my app
and I say select folder so as you can
see all your modules have been imported
you can click on app.js and start
editing in today's video we'll be
learning all about the most basic
infrastructure of react.js or components
without delay let's begin and look at
what's in store for us so we'll be
touching on topics like what are
components types of components nesting
components higher order and pure
components and a brief description about
component life cycle all right to begin
with what exactly are components
components are the building blocks of a
react application wherein each component
represents a part of the user interface
now to make it more understandable
consider the Facebook home page the
entire UI can be broken down into
several elements say we have the
credentials component the sign up
component the image component and the
logo component notice that each
component adds something to how the home
page looks alright reusability is one of
the saline features of react components
one component can be reused several
times across the application and this
improves the development speed
components can also be nested one
component can internally consist of
several other components in its minimal
form a component must Define a render
method that specifies how exactly the
application looks and feels a component
can also receive properties from its
parent components also you'll get a
better understanding of all of these
when we start working Hands-On so don't
worry so moving on let's look at the
different types of components first we
have the stateless functional components
and then we have the stateful class
components now functional components are
typical JavaScript functions that return
HTML now they can be contained in a DOT
JS or a DOT jsx file coming to class
components these are regular ESX classes
however it's mandatory that they contain
a render method that in turn returns
HTML they can also be contained in dot
JX or a DOT jsx file okay then let's go
ahead and build our first react
application using components all right
so I've opened my text editor that is vs
code to build my application Also I
suggest you watch the react installation
on Windows video to help you get started
the video briefly explains how to
install node and how to start building
your first react application in my case
I've opened a folder called react
component tutorial and here in my source
folder I have app.js now app.js is the
main component that gets rendered to the
term let me show you that here in
index.js you pass app.js which is a
component that gets rendered to the
reactor so app.js consists of several
other components that can be nested so
as you can see app.js is a functional
component and before moving on let me
get rid of all the unnecessary code so
let me delete all of this
and return an H1 tag that says hello
welcome to Simply let me save it and if
you look at the browser you'll have
hello welcome to Central on now let's go
ahead and display another message say
this
is about components right
save it and let me check the browser it
gives you an error so jsx uses a
conventional rule which states that all
HTML tags have to be enclosed within a
div tag so for example I say div and I
enclose it so let me save and check my
browser again here you go so multiple
HTML tags have to be enclosed within the
div tag moving on let's create a first
functional component to do that I'll
first create a folder in my source
folder say components within that I'll
create a file say functional component
dot JS all right so the first thing we
have to do is import react so I say
import react from yeah the general
Syntax for a functional component
involves the keyword function and say
functional component now you say return
an H1 tag or I've already used H1 tags
so I'll say pair it off nice here this
is a functional component all right
before explaining to you how these
components are exported and imported let
me show you the general Syntax for a
class component so I create another file
say class component dot JS I again
import react from react the general
notation is using the class keyword
followed by the name of the class
extending from the base class
react.component so going ahead I say
class class component extends react dot
component now the key feature of a class
component is the usage of a render
method so I say render within braces I
say return a paragraph tag saying this
is the class component
so moving on let's see how these
components can be nested into the main
component that is app.js components can
be nested into the main component using
Import and Export keywords so as the
name suggests export feature is used to
export a particular file or a module and
import is used to import a particular
file or a module into the current
existing module so we have two different
types of exports you have default export
and just export or named export so a
default export is used to export just
one object be it a function a class a
variable from the file and there can
only be one default export per file and
when you're importing it you can specify
the address and use the word import
before it so let me show you how it
works let's go back to our editor and
then functional component and here I say
export default and the name of the
functional component that is functional
com so let me save this and going back
to my app.js I say import name of the
functional component that is functional
com from and I pass the path this
components slash functional component
also let me get rid of these unnecessary
files here now let's define functional
component in our app.js component so
here I say functional com let's compile
it and check our browser here it says
this is a functional component moving on
to my class component it's the same
syntax here as well let's say export
default name of my component and in my
app.js I import it import class comp
From the Path and again I'll have to
Define it in my return method I save so
let me compile it and check my browser
it says this is the class component one
unique feature of default export is that
I can rename the file while I'm
importing it so for example I can rename
it as say FC and while I'm defining it
I'll have to make sure I use the same
naming conventions so I say FC again and
when I check it it says this is the
functional component there is literally
no difference the next type of export is
the named export or just export so a
named export can be used to export
multiple objects be it functions class
Etc from a file now there can be several
named exports from a single file one
hack is that while you're importing it
cannot be renamed so let me show you how
this works okay so let's create another
class in our class component so I'll
just copy paste this let me give it
another name say class comp 1 and then
message that I want to display is hey
I'm another class all right so when I'm
exporting it I don't want default so let
me take it off and say export here all
right in my app.js while importing it I
want to import both the classes so I'll
include them within curly braces here I
say class com comma class comp one and
then again I Define it here class comp
one let's compile it and run it and here
we go here you can see hey I'm another
class so we've successfully exported
both the classes from the class
component and imported it back in our
app.js component one advantage of using
named export is the fact that I can
choose to import the classes that I want
to now say for example I do not want to
import class component here so let me
take it off and here let me comment this
now let's compile and see hey I'm
another class the second class got
imported while the first class I was
defined earlier is not imported here
alright so next up we have higher order
and pure confidence now I won't get into
the nitty gritties of it because they're
Advanced topics but to give you a brief
Insight higher order components are
basically functions that take in a
component and return a new component the
whole ideology behind higher order
components is to facilitate the
reusability of component logic okay so
let's see how this works let's go back
to our code editor let's create a
component in our components folder let's
call the component
click dot JS all right so here we define
a class I use this snippet rce here we
go we get the entire format using the
small snippet rce and here I'm going to
make use of a button now see I use the
tab button and I'll say clicked one time
every time the user clicks on the button
the value gets incremented so for this
I'm going to use a variable say count
and I'm going to use the concept of
States so let's go ahead and Define our
variable count and initialize it to zero
so for that I'm going to use another
snippet called R const and here this dot
State equals my variable count
initializing it to 0. so let's define
the count variable in a render method so
I say const count equals this dot state
so every time we click on the button the
count value has to get incremented right
so we make use of an event called on
click equal is this dot update click Now
update click is going to be another
method that we have to Define now so
every time the button gets clicked this
method is called so let's go ahead and
Define the function so it is update
click equals is going to be an arrow
function and I say this dot set state is
nothing but count this Dot state DOT
count plus one okay and here we say
count times all right so once this is
done let's import our component in
app.js so here again I say import click
from components click and let's define
it here so let's check our browser every
time we click on the button the value
gets incremented all right so let's go
ahead and create another component say
counter.js wherein every time the user
hovers the mouse on the button the count
value increases so let's go ahead and do
that I say
counter dot JS I'm again going to use
the snippet rce to create a class
component and here in my div tag I
Define a button and say incremented to
for now I say x so now let's go ahead
and add the event save button on Mouse
enter I'm gonna call the method this dot
increment count okay so once you're done
with that let's go ahead and Define the
increment count method I'm going to copy
the same code that I've mentioned in my
click.js so I say copy this all right so
one change is that I'll change the name
of the method and call it increment
count again let's define the count in
our render method so I say const count
equals this Dot
and here I change X to
now let's go ahead and import it in our
app.js so I say import counter from
components and counter and let's define
it here all right let's save it and
let's run the code okay so as you can
see you see another button here
incremented to 0 and every time I move
my cursor on the button it increments
mind you I'm not clicking I'm just
hovering my mouse okay to learn how
higher order components work we'll have
to pass counter.js and click.js as
parameters to give birth to an entire
new component so for that let's go ahead
and create another component for our SOC
let's call it higher order dot JS okay
so I say import react from react after
that I say cons updated component equals
original component that's going to be an
arrow function again and within curly
braces I Define my class that is class
say new component extends react dot
component inside let's define find a
render method that Returns the original
component with a modification that is I
want to type the user I want to append
the user before the actual message is
displayed all right so let's go ahead
and close the tag and return new
component and let's export this say
export default updated component now we
import higher order.js in our counter.js
and click.js and pass these components
as parameters so let's do that let's go
to our counter.js and here I say import
updated component from dot slash higher
order component and here while exporting
I say updated com and pass this as my
parameter let's do the same to click.js
here I import data.com from higher order
component and here I pass this as a
parameter now here in a higher order
component we've defined a property name
and initialized it to the user so we'll
have to include this in our other
components that's counter and click so
let's do that and here right before
incremented 2 I say this dot props dot
name let me save it let me do the same
thing here and say this dot props dot
name so if you go back to our browser
here you can see it says the user
clicked zero times and the user
incremented to zero okay so this
basically shows how react Implements
reusability of components moving on our
next topic is pure components now
another way to create class component is
by extending pure component from react
to pure component avoid unnecessary
re-renders now how does it do it it does
not implement the should component
update method now you'll learn about
this method a little later in the video
now this method enables re-rendering of
components to the Dom but a pure
component on the other hand ensures a
shallow comparison of states and props
and checks if a re-render is actually
necessary only then does it render to
the Dom a react component can be
considered pure if it renders the same
output for the same state and props so
let's take an example to explain pure
components so let's go back to our vs
code and create two component classes
one for a regular component and the
other for a pure component I'm using
this example I'll show you exactly how
pure component is more helpful okay so
let's create a pure component.js file I
say pure com
dot JS so here I'm going to use a
snippet rpce that is going to create a
pure component class let me get rid of
this export and here in my div tag I'll
display the text say I'm the pure
component all right now let's go ahead
and create a regular component I may
call it regular component.js and here
I'm going to use the snippet rce and the
message that I want to display is I'm
the regular component so to draw a
comparison between the regular component
and the pure component let's create a
parent component for the two so let me
create one here I'll call it parent
component.js and this is again going to
be a regular class component and here I
display the message I am the parent
component to change the state of the
component we're going to make use of a
Constructor so let's use the snippet or
const and here let me create
name you can give anything and I say
simply learn now we make use of the
component did Mount lifecycle method to
set a time interval now don't worry
about this we're going to learn about it
a little later in the video so moving
ahead I'm going to make use of the
method and and say component did Mount
and here I say set interval the first
argument is going to be an arrow
function and the second will be the time
interval and I'm going to be setting it
to 3 seconds now within the arrow
function I'll make use of the set State
function to set the state of my property
however I do not change the name I keep
it simply done itself moving on let's
import your component and the regular
component into our parent component and
then pass name as a property so to do
that first import pure com from your
component and then I say import regular
com from regular com.js and here let's
say regular com name equals this dot
state DOT name and I say pure component
name equals this dot state DOT me now
let's include the property name in both
our regular and pure confidence so to do
that let's just save this Dot Rob dot
name and here I again say this dot drop
dot name and finally let's import parent
component into our app.js component so
here I say import parent come from okay
and here let me Define parent.com
so now if you look at the browser we
have I'm the parent I am regular
component simply learn and I'm the pure
component simply gone we've got the
result as expected now to check if the
pure content is actually re-rendering or
not let's include simple console.log
statements so here I say CLG snippet and
here I say
pure
component render and in my regular
component I do the same thing I say
console.log regular component render now
let's do the same in our parent
component as well I
say parent
component render all right so let's go
back to our browser and inspect it in
our console first the parent component
gets rendered then the regular component
and then the pure component after that
for every three seconds only the pairing
component and the regular component is
rendered for the same state and prop the
pure component is not re-rendered so in
conclusion pure components optimize
react codes and also improves
performance so coming to the last topic
component life cycle so basically
combine life cycle explains the stages
the component goes through the entire
life cycle of a component can be divided
into three parts we have mounting
uptation and unmounting so the first
thing that gets invoked in the life
cycle is component will mount it is
invoked right before the initial
rendering occurs then we have the
rendering method now once a component is
inserted into the Dom component did
Mount gets involved coming to the next
phase we have updation when a complaint
receives props component will receive
props gets invoked set state is called
when the state of the property changes
so every time there is a change react
decides whether the next component State
Should trigger a re-render or not to do
that should component update method is
called component will update is invoked
right before re-rendering after
re-rendering component did update is
called that makes updates to the Dom and
the last phase is unmounted component
will unmount method does all the
necessary cleanup and erases all the
allocated memory and Cycles
in our previous video we learned about
react.js components in detail and now
moving ahead let's learn about another
striking feature of react.js called
props props short for properties allow
the user to pass arguments or data to
components a pairing component can pass
additional information to its children
using props properties help make
components more Dynamic props are passed
to competence in the ways similar to
that of HTML track attributes now we'll
look at this a little later in the video
props in a component are read only and
cannot be changed one thing to remember
is that props are sent by the parent to
the children components hence the
children components cannot make any
changes to these props now that we've
learned about props in brief let's go
ahead and create our application using
props if you're new to this tutorial I
suggest you go to the react installation
and react competence video on our
channel so back in my code editor that
is vs code I've opened a folder called
react props and now I'm going to create
a component a class component and I'll
call it class
props.js so let's create the class
component I give rce the snippet and
here I display a message saying an H1
tag basically
[Music]
all right
now let me get rid of export here and
import it in my app.js main component
here I say import
class props
all right now we Define the class
component in our render method
[Music]
all right
now if we go back to the browser you see
Hello Learners welcome to Simply
learning now let's say we want to
individually welcome every student
instead of retyping the message for
everybody we can pass their names as
props now let's see how to do that now
we pass the name as a property from the
main component that is app.js to the
child component and render this onto the
browser so let's do that so here while
I'm defining my child component I say
name
I save it and here in my child component
instead of learners
I say I use a keyword this
dot crops dot name
let me save it and if you look at the
browser we'll have hello learner1
welcome to Simply learn now let's go
ahead and welcome learner 2 and learner3
so I again say class props name equals
learner 2.
all right so if we save and look at the
browser we'll have all the three
Learners displayed on the browser we can
also pass multiple props to the child
component now say for example we want to
welcome the student from a particular
place so we say welcome learner1 from
Place X so I can hear Define another
property say place
[Music]
say please
similarly I can do it for the rest too
Place y
now let's go back to our class props.js
component and here say hello learner one
from this dot props dot place
let me save it and if you look at the
browser now we have hello learner1 from
Place X Place Y and play Z we can also
display whatever we want between the
opening and closing tags when invoking a
component now this is facilitated using
props.children reserved keyword now let
me explain to you how it's done with an
example here let's split the self and
closing tag into an opening and a
closing tag and in between them let me
display a message within the paragraph
tag let me say
and in my child component
after my H1 tag
let me use a paragraph tag and here
let's use the reserved keyword this dot
props top children
so let's save it
and now if you look at the browser you
can here see the message displayed child
component so prop stop children can be
used when components do not know about
their children ahead of time this is
commonly seen in components like sidebar
and dialog that represent generic boxes
so let's go ahead and create a button
tag and check again
so here I'll split it and add a button
tag
and say click
and let's check our browser
here we go we get the output as expected
all right we saw the usage of props for
class components similarly we can use it
for functional components so let's go
ahead and create a functional component
let me call it
I say import react from
react
and then I say function
function props
and here I return an H3 tag
I'll say this is functional component
and I'll return another H3 tag saying
hello learner
so let me save this
and let's export it export default
function props
[Music]
and import it in our app.js again import
function problem
[Music]
function problem
and here in our render method let's
define it
let me call function prop
name
let me give learner 4.
and
place
say a
let me close it and back in our
functional component instead of learner
I save
prompts dot name
let me save it now if you look at our
browser it gives us an error it says
props is not defined so let's go back to
our code editor and pass props here
to our functional component also let me
Define hello frop start name
from
props dot place
let me enclose it within the div tag
here
[Music]
let me save it and now if you look at a
browser here we go we get the output as
expected
so let's begin and learn what exactly is
a state in react typically a state is an
object that stores the values of
properties belonging to a component now
these values can change over a period of
time either via user interactions or
network changes and the state helps
facilitate this functionality every time
the state changes react re-renders the
component to the browser the state is
initialized in the Constructor a state
can also store multiple properties a
method called set state is used to
update the value of the state object now
this function performs a shallow merge
on the new and the previous state
conventionally a shallow merge ensures
that the previous state values are
overwritten by the new state values
moving on in our previous video we
learned about props and although props
and state dictate and control the
behavior of a component they have
significant differences so let's go
ahead and draw a comparison between the
two firstly props in a component are
used to pass data and event handlers to
its children while State on the other
hand is used to store the data that has
to be rendered on the web page props are
immutable once said by the parent they
cannot be changed State holds volatile
data and can be changed over time props
can be used in functional and class
components while state is restricted to
class components props are set by the
parent component while a state is
generally updated by event handlers now
that we've learned all about State let's
go ahead and build an application to see
the working of State alright so in my
code editor that is vs code I've created
my application say State and here in my
source folder I have my app.js file now
here I'm gonna get rid of all the
unnecessary code that I'm not going to
be using Also I suggest you go through
the react installation on Windows video
to help you get started with creating
your first application so let's create
our class component say class app
extends react top component inside I
have a random method that returns an
HTML tag let's display a message welcome
let's follow the jsx conventions and
enclose all the HTML tags within the div
tag so I say div
class name equals app we also have to
import the app.css file import
app.css and so we save it and if you
look at the browser we have welcome now
let's beautify our code to do that let's
add some styling so here in my app.js
class component I say Styles equals
and I say font style and I set it to say
bold and I say color save teal and here
in my H1 tag I say style equals this dot
Styles so let me save it and if we look
at the browser now we have welcome in
teal and it's bold now let's go ahead
and create a class component to
understand state so first I create a
folder and I call it components and
inside this folder I create a class
component and I call it newcomp dot JS
and I use the snippet rce to create the
class component to give you an insight
into what we're doing today we'll
display a message asking the user to
subscribe to Simply learn once the user
clicks on the Subscribe button we
instruct them to click on the Bell icon
and finally we display a thank you
message now to do all of this we're
going to make use of state and as
mentioned earlier we initialize the
state of object in a Constructor so
let's use the snippet R const to create
a Constructor now in the state object we
initialize a property let's call it
message and we display a message saying
subscribe to Simply learn now let's save
it and here in our render method let's
say class name equals app and let's
create an H3 tag and within the tag I'll
display the message so I save this dot
state DOT message let's save it and now
let's import it in our app.js component
so I'll get rid of export here and here
I say
import new com from components and
Newcomb let's define it here and say new
so we save it and look at the browser it
says subscribe to Simply learn all right
again to make our code look more
presentable let's add in Styles so I'll
just copy the same styles that I've
added here and I'll paste them here and
instead of bold I make it italic and I
change the color to say purple and again
in my H3 tag I Define style and
initialize it to the store Styles so let
me save it and now if you look at the
browser it's in italic and it's in
purple
okay so moving ahead let's create a
button that reads subscribe and once the
user clicks on it the button should read
subscribed and the message displayed
above should instruct the user to click
on the Bell icon to do that let's first
create a button the message that I want
the button to read is subscribe however
this message gets changed once the user
clicks on the button so instead of
explicitly mentioning subscribe here I
create a prop I say sub and I say
subscribe here and back in my render
method I say this dot state DOT sub so
let's save it and if you look at the
browser now you have a button which
displays a message subscribe now once
the user clicks on the button the
message displayed should change to click
on the Bell icon to never miss an update
so let's create an event handler for
that so here button on click I call
another method and let's call the method
button change okay so this method should
update the state and change the message
and sub values to do that we make use of
a set State method now our state can be
updated in response to event handlers
server responses or prop changes now all
the updation can be done using the set
State method now this is the general
syntax used by the method we'll however
look at this further in the demo now the
set State method conventionally enques
all the updates made to the component
State and instructs react to re-render
the component and its children with the
updated State now let's go back to our
code editor and look at the working of
this method now here I Define the arrow
function button change if you are not
familiar with arrow functions I suggest
you read up on them and this is the
general syntax and here I say this dot
set State and inside I change my message
to hit the Bell icon to never miss an
update and myself value changes to
subscribed let's save this and now if
you look at the browser when we click on
the Subscribe button the message changes
to hit the Bell icon to never miss an
update so moving ahead let's use a Bell
icon so that the user can click on it
once he clicks on the image the image
changes and a thank you message appears
on the screen so for that I have two
images I have Bell a and Bell B so I
drag and drop both the images in my
components folder alright now let's
import these images into our newcom.js
file here I say import Bell a from Bell
a DOT PNG and again I say import Bell B
from Bell B dot PNG all right let me
save it to display the image on the
screen we make use of the image tag now
this tag has two attributes one is the
source attribute that specifies the URL
and the other is the alt attribute that
specifies an alternate text for the
image so here in my component I say I
make use of a paragraph tag that will
help display the image in the next line
and then I use the image tag now since
my image changes once it's clicked I
have to define a property and pass the
event handler click that will update the
image so here before specifying The
Source let's go back to our state and
Define another
property that is image URL and let's set
it to Bell a since that is the image
that I want to display first let me save
it and here in my image tag I say Source
equals this dot state DOT image URL and
then we have the all tag and I do not
want to display any message so I leave
it as it is now let's save it and if we
look at the browser we have a bell
displayed however now let's change the
dimensions of the bell I do not want
such a huge bell so back in my vs code I
Define style with width say 30 pixels
and a height with again 30 pixels let me
save this and now if you look at the
browser we have a smaller icon so once
the user clicks on this image the image
changes and the message displayed here
gets updated to do that we'll have to
Define an event so let's go back to our
vs code and here in my image tag let's
say on click and Define a method say
this dot image change and now we Define
this method here as the image change I
make use of a narrow function again and
again I use the set State method I
update the image so I say image URL is
now set to Bell B and the message is
updated to thank you happy learning
so let's save this now and if we look at
the browser we see the image and once
clicked on it the image gets updated and
the message changes so finally Let me
refresh the browser once and show the
full execution Let me refresh following
the instructions let's click on the
Subscribe button and now it says hit the
Bell icon and once I do that the image
updates and the message changes
also if you want to become a full stack
web developer then the postgraduate
program in full stack web development in
collaboration with Caltech ctme can help
you accelerate your career as a software
developer check out the link mentioned
in the description box below we're going
to cover the topic of what is angular
sure all of you use mobile and web
applications
pay it from social media to healthcare
e-commerce and net banking these apps
are used by billions of people across
the globe now the main reason we use
these apps is that they offer seamless
user experience and interface with how
would it developed to provide such
reliability one of the Frameworks that
is widely used to build such robust apps
is angular so let's dive into the
session now so here is a list of topics
that we're going to be covering first up
we'll see why angular was introduced
then what is angular
features of angular
angular architecture advantages and
limitations of angular
the learning curve of angular and
finally we look at some of the companies
that deploy angular so without further
delay let's begin
why angular now JavaScript is the most
commonly used client-side scripting
language it is written in two HTML
documents enabling interactions with web
pages in many unique ways
so as a relatively easy to learn
language with almost pervasive support
it is exceptionally well suited to
develop modern applications
but the question arises
is Javascript ideal for developing
single page applications that require
modularity testability and other
features perhaps not however we have a
variety of Frameworks and libraries
designed to help us with such thing with
respect to front-end development angular
and JavaScript together bring in
structure and consistency to your web
applications and also provide
scalability and maintainability
angular is specifically developed for
single page applications so now the
question arises what exactly is angular
angle angular is an open source
JavaScript framework written completely
in typescript
now it was primarily aimed to develop
single page applications and is
maintained by Google
angular as a framework provides a few
advantages while also providing a
standard structure for Developers
designed for web desktop and mobile
platforms
to doubt here as to what exactly single
page
of r that will help you with that now
these single page applications are
basically applications that get loaded
just once so the main page gets loaded
onto your browser so any further
interactions does not lead to loading of
subsequent Pages anything that has to be
done further is just an addition to the
already loaded page these single page
applications are primarily developed
using angular moving ahead let's look at
the features of angular
we have four features that we're going
to be discussing we have the document
object model typescript data binding and
testing now let's look at them one by
one now the document object model treats
an XML or an HTML document as a tree
structure now here every node in the
tree structure defines an object
representing a part of your document
angular uses the regular Dom now let's
suppose you've made 10 updates on a
single HTML page
so every time you make a change the
corresponding Dom or the tree structure
needs to be updated
now angular updates the entire tree
structure of HTML tags moving on to our
next feature
we have typescript
now typescript defines a set of types to
JavaScript which helps you write
JavaScript that is easier to understand
now all the typescript code compiles
down to basic JavaScript that can run
smoothly on any platform now typescript
is not mandatory for developing an
angular application but it is highly
recommended the main reason is highly
recommended is that it offers better
syntactic structure while making the
code base easier to understand and
maintain now typescript can be installed
as an npm package now to do that you
just have to run the command npm install
hyphen G type script on your command
prompt now stuff is data binding now
data binding is a process that allows
you to manipulate web page elements
using the web browser now it mainly
employs Dynamic HTML and does not
require complex scripting or programming
it is used in web pages that include
interactive components like calculators
tutorials Games Etc now incremental
display of a web page makes data binding
extremely convenient when Pages contain
a large amount of data when it comes to
angular it uses two-way data binding
changes meet in the UI element is
reflected in the corresponding model
state
and conversely any changes made in the
model state are reflected onto the UI
State this allows the framework to
connect to Tom to the model data via the
controller the last feature we're
discussing is testing
angular uses Jasmine to run its various
tests the Jasmine framework allows
various functionalities to write
different kinds of test cases karma is a
task runner for the tests that use a
configuration file to set the startup
reporters and testing framework so with
that we've covered the features of
angular
so let's go ahead and understand
the architecture of angular
angular is a full-fledged MVC framework
it provides a strong opinion on how the
application should be structured and
offers bi-directional data flow and
updates the real Dom MVC short for model
view controller is an architectural
pattern that separates the application
layer into model view and controller the
model here relates to all the data
related logic view on the other hand is
used for UI logic of the application
and controller is the brain of the setup
now it is an interface between the model
and view
moving on let's look at the advantages
of angular
first up we have custom components
angular allows you to build your own
components that can pack functionality
along with rendering logic into reusable
pieces
data binding as discussed angular allows
you to effortlessly move your data from
your JavaScript code to the view and
react to user events without having to
write any code yourself
dependency injection angular allows you
to write modular services and have them
injected wherever they are needed this
greatly improves the testability and
reusability of the same don't worry if
you can't wrap your head around these
topics we're going to discuss them
further in the coming videos
next Advantage is testing angular has
been built from the ground up with
testability in mind
you can literally test every part of
your application
comprehensive angular is a full-fledged
framework and provides out of the box
solutions for Server communication
routing and marketing
lastly we have excellent browser
compatibility angular is cross-platform
and browser compatible
an angular application can typically run
on all browsers with chrome Firefox
Safari and platforms like Windows Mac OS
and Linux now many versions of angular
have been released ever since its
Inception all of these versions have
added to the efficient working of the
framework now here are the different
versions released first up goes angular
1.
built on JavaScript and completely based
on controllers next release was angular
2. now this Incorporated the component
based approach wherein the entire UI was
divided into several components and
lastly integrated to give the final
logic next was angular 4 it included
draft adaptation of angular CLI or
command line interface 1.0 was
introduced however not deployed in this
release the angular CLI was optimized
and commands like NG update and NG add
were added
the angle is 7 release prompts were
introduced which provided tips in CLI
about the functions being used
in angular 8 IV renderer and bazel were
introduced
and finally the most recent release was
angular 9. now this came with the better
framework and angular material now this
completely switched to the IV renderer
as a default compiler now that we've
learned about the pros of using angular
let's look at some of the limitations of
angular
first up is a steep learning curve now
since angular is a complete full-fledged
framework it becomes difficult for
Learners to begin with you need to be
acquainted with simple topics and then
move on to more advanced topics to
become proficient in this language
next up is limited SEO auctions now
angular offers limited SEO options and
poor accessibility to search engine
Crawlers
if we're both and complex
a common issue faced by the angular
Community is the verbosity of the
framework it also poses to be complex
compared to other front-end tools
and lastly migration
now one of the drawbacks of
Aqua migration
now it becomes difficult to Port Legacy
code to angular style architecture also
with each new release it is painful to
upgrade and a lot of them are not
Backward Compatible
next up let's look at the angular
learning curve
now if you wish to learn angular you
need to be acquainted with basic topics
in angular some of them are directors
modules decorators components Services
dependency injection pipes and templates
now once you've mastered your Basics you
will want to go and understand more
advanced topics such as change detection
zones aot compilation and rx.js however
the learning curve of angular is
clear-cut in the beginning it could be a
little intimidating but once you start
using the tool becomes way more easier
to comprehend and understand what is
going on
and lastly let's look at some of the
companies that use angular today
many top tier companies like Nike Forbes
Google HBO Sony upwork among others
readily deploy angular so moving on
let's look at the prerequisites for
angular first up we have node.js angular
uses node.js as its base for a large
part of its build environment
so as a result to get started with
angular you will need to have node.js
installed on your environment so head to
their official website and download the
latest release for your corresponding
operating system next up is the angular
CLI now this command line interface is a
tool that makes it easier to bootstrap
and develop your angular applications
now to install the latest version run
the command npm install hyphen G at
angular front slash CLI you gotta run
this command on your command prompt and
finally to confirm installation check
for its version
now the next thing that you will need is
an IDE or a text editor to type your
code now there are several Ides that you
can choose from but in this series we've
used vs code throughout so it is
available on all platforms so go ahead
and download it if you haven't already
now moving on to the final part is the
demo now that you have a basic
understanding of angular and its
prerequisites I think you're ready to
create your first angular application so
let's head to our vs code and begin here
I've created a folder called angular on
my desktop and opened it on my visual
studio code so to create your app you
need to open the terminal just go here
and
select new terminal
and now type in the command Ng
new
and provide the name for your app so I'm
just gonna say hello world
so now this is going to create
to see yes
so basically what happens is that when
you run the command it will
automatically generate a skeleton
application under the folder that is
Hello World in our case and it includes
a bunch of files and installs all the
necessary dependencies for the angular
application
so this could take a while
so once you've created your application
to run it first change the directory so
let's say CD
hello world
and now use the command NG so
now once it's compiled you need to go to
your browser and type in localhost 4200
and once you do that
you can see your UI
you can see that the application has
been loaded onto your browser and it
says hello world app is running
so this is how you create your
application
so let's go back to our vs code now as
you can see here
there are many files and folders that
are created right so let's look at a few
of them of course we can't explain
everything but I'll brush through a few
of them
so the first main component is basically
the root component now the root
component here is the index.html
so here if you open the file and see
it's a very small crisp code right but
the most important thing in the file is
this app Root element
so what this does is it's basically the
marker for loading your application code
so this is extremely important so the
next important file is the main.ts now
this is a part of the bootstrapping
piece all right so the index.html file
is responsible for deciding which files
are to be loaded correct the main.ts
file on the other hand identifies which
angular module is to be loaded when the
application starts so this is just a
brief explanation as to what they're
doing
next we have the app folder now here we
have the app dot module.ts file now this
application module file can be thought
of as a core configuration of your
application
so here's where the source code starts
from and moving on we have the
app.component.ts these are all
typescript files hence the extension TS
now this file basically is the root
component of your application and then
we have the HTML file for the same which
defines the appearance of what you can
see on your browser so let me just
change the message that is being
displayed
so I'll say hey
welcome to this
angular
tutorial so let's save this and when we
go back to our browser
we can see the message hey welcome to
this angular tutorial being displayed
so like this we can make a simple change
and then it gets rendered onto your
browser so this was just a brief
explanation of what happens in the
background of your application
first we'll get acquainted to what
exactly angular components are then I'll
help you create an angular component by
showing a quick demo and lastly we'll
learn about component decorator metadata
but before we begin make sure to
subscribe to our Channel if you love
watching new and interesting technology
videos also hit the Bell icon to never
miss an update so what exactly are
angular components
now I'm sure everybody uses web
applications and one of the most widely
used applications is Gmail correct now
to help you understand what components
are consider them as Lego blocks now
they basically are combined together to
form the final application
so in this case here we have the logo
component then you have a sign in
component an image component and then a
create account component now all of
these components generally don't affect
the working of each other but however
when embedded they Define the UI of your
application
so I hope you understood what components
are
so to go ahead let's discuss some of its
common features now firstly they are the
building blocks of an application
generally you have a root component
which is basically the app component and
then it branches out into other
components creating a hierarchy
and these components are a subset of
directives now don't worry about what
deductives are because we'll cover them
later on in the series but to give you
an idea there are three types of
directors you have the structural
directives the attribute directors and
the component directives
only one component can be instantiated
per element in a template now components
are typically custom HTML elements and
each of these elements can instantiate
only one component
now don't worry you'll understand this
better when I show you the demo
nextly a typested class is used to
create a component now this class is
then decorated with the at component
decorator Now The Decorator accepts a
metadata object that gives information
about the component now a component must
belong to the NG module in order for it
to be usable by another component or
application
and finally components control their
runtime Behavior by implementing life
cycle hooks so this was just a brief
introduction to what angular components
are
now you will only be able to understand
the working of components when I show it
to you practically so let's head over to
a Visual Studio code now here back in my
vs code I've created a folder called
angular demo within which I've created
an angular application called demo
components once executed the browser
looks something like this so if you
haven't watched a previous video on
getting started with angular that is
angular hello world I highly suggest you
go through that video first it helps you
create your first angular application so
um now let's go ahead and create our
first component now the command used to
create our component is NG GC and your
component name once executed it creates
four different files now let's just see
how this works on RVs code now what you
can do is head to your terminal and type
in the command Ng
g c
and provide a name for your component
for example I'm gonna just call my
component text component all right
so what it does is that it creates four
different files you can see you have
four different files that have been
created and finally it updates the file
that is app.module.ts indicating that
this new component has been created so
here in your Source folder within which
is an app folder and again here you can
see that your four different files have
been created first is the HTML file
wherein you can Define all the code that
you want for your component next you
have the CSS file for your styling then
you have the dot TS file which includes
the component decorator and finally you
have spec dot TS which is basically a
unit test file all right and then in
your app.module.ts you can observe that
the company that you've created that is
text component has been imported that is
what the message conveys here all right
now let's go back to our
app.component.html now this basically
has all the core Fair applications so so
let me just get rid of it
and I'm just gonna display a basic
heading saying
hello
welcome all right so let me save it and
if you go ahead and look at your browser
hello welcome message displayed now
let's go back to our
component.html file and here let me
provide a message
[Music]
let me say h
3
and let me display a message saying
welcome to this tutorial
on angular components all right now in
your text component dot TS file which is
your typescript file the selector
mentioned here is app hyphen text
component now go ahead and copy this
and in your final
component.html go ahead and create your
custom HTML tag with the selector that
you just copied now this indicates that
the component that you just created that
is the text component is being
Incorporated in the final render so what
happens is that whatever is defined in
the component.html file is also being
rendered in your final output so when I
say this let's go ahead and check
our browser you can see that the message
welcome to this tutorial on angular
components is displayed so this was a
simple creation of a component now for
this let's give it some styling so here
go to your dot CSS file and provide some
styling see for example here I just say
text line
and let me say Center and also in my
app.component.cs I'm going to give the
same thing and see each one
text align is Center
all right so let me save this
and there we go
now we can also create multiple
components and Define the tags in the
app component now the components are
executed sequentially
so now let's create another component
just to give you a brief insight into it
let's say NG GC image component
now here I'm going to be adding the
simply learn logo so I'll show you how
that works
now you can see that a new component has
been created with four files again so in
my assets folder here I've added the
logo so what I can do is back in my HTML
file I can go ahead and create an image
tag so first let me just display another
message here
just to avoid any confusion and let me
say this is the image component
and then let me say
image
Source equals so the source is basically
assets
[Music]
slash logo
dot PNG
and class equals
Center
[Music]
all right so you can also head to your
CSS file and provide any sort of styling
that you need so let me just say
text
align
to be Center
and then let's create
a styling for the image
and here I mentioned the code for the
image so let's save this and from the
dot CS file let's copy the selector
and create a custom HTML tag in our
final component.html file
so there we go let's save this and check
the output
and there we go
first the hello welcome message is
displayed next you have the message
displayed from the first component and
then you have the second component so
this is how you can create your own
components and don't forget to
incorporate these selectors into your
final HTML file so moving on to our next
topic component decorator metadata now
as mentioned earlier the at component
decorator accepts a metadata object that
provides information about the component
correct here is a list of properties of
the metadata object first up is the
selector now basically the selector is a
CSS selector that identifies this
particular component in a template now
this corresponds to the HTML tag that is
included in the parent component you can
create your own HTML tag however the
same has to be included in the parent
component so to help you understand that
better let's head back to our vs code
and say for example in our text
component
here the selector says text component
correct for the time being let's change
it to say n component
all right now when you save it and look
at the browser the message is not
displayed so what we can do is you can
copy this
selector and then include this
here
and now you can see that the same
component has been rendered onto your
output
all right so the selector plays a
crucial role in that
next up we have the template now a
template is an inline defined template
for the view now the template can be
used to provide some particular markup
the markup could typically include some
headings or paragraphs that are
displayed on the UI
next up we have template URL now it is
the URL for the external file containing
the template for The View so here you
can see
this is basically the external file that
contains the template for the view next
up you have Styles now these are also
inline defined styles that can be
applied to the components view so any
code that you provide in the dot CSS
file can also be included here next you
have the style URLs now this is a list
of URLs to your style sheets that are
applied on your components View
next up you have providers now this is
again an array where certain Services
can be registered for your component
lastly we have animations as the name
suggests these are animations that can
be listed for your components
first we'll understand what exactly
dependency injection is
then we'll understand the demerit or the
drawback of not using dependency
injection
then we'll understand dependency
injection as a design pattern and
finally I'll help you understand the
entire concept with the help of a demo
so let's begin
what exactly is dependency injection so
let's consider this I'm sure you're
aware that angular uses the concept of
components the entire UI of the
application is divided into several
components now whatever all of these
components perform similar tasks be it
accessing the database rendering images
Etc now instead of writing the same
piece of code for every component you
could write the code once and then
perhaps inject the same code into every
component
now this is supported by dependency
injection
now to give you a better example
consider two classes A and B now let's
assume that a uses the objects of Class
B and normally in object oriented
programming an instance of Class B is
created so that a can access its objects
with using dependency injection we move
the creation and binding of dependent
objects outside of the class that depend
on them so dependency injection or di
keeps the code more flexible testable
and mutable also classes can inherit
external logic without having to create
on its own and lastly di benefits
directives pipes and components
next up let's have a look at the
drawback of not using dependency
injection
now let's consider Class Postal details
that is dependent on the number and the
address class
in the postal details class the
Constructor creates copies of the number
and address
so when you instantiate a new postal
details class the Constructor
instantiates a unique number and address
now although this looks simple there's a
problem with this code let's assume that
the number and address class
Constructors now accept parameters when
we change the numbers class the postal
details class gets broken now to
overcome this what we need to do is we
need to pass parameter to the number
Constructor so this applies to address
as well the first drawback of using this
traditional method is that the code is
not very flexible anytime the
dependencies change the postal details
class needs to be changed as well
and the second drawback is that the code
is not suitable for testing
once you instantiate the new postal
details class you get the same number
and address even if you change the
number and address classes every time
what if these classes are in turn
dependent on other classes
then it's going to be a chain reaction
so to overcome this we make use of
dependency injection
now let's look at di as a pattern
dependency injection as you all know is
a coding pattern where class receives
its dependencies from an external Source
rather than creating them on its own so
here in the above example we have moved
the definition of dependencies from
inside the Constructor to the
constructor's parameters so the postal
details class doesn't create the
dependencies anymore
it just consumes them so the postal
dependencies class doesn't create the
dependencies anymore
so with that we overcome the drawbacks
of not using Di
so now that you know what exactly
dependency injection is and how vital it
is let's look at a simple demonstration
to understand the concept better now
services classes modules components all
of these are benefactors of dependency
injection so in the demo I'm going to be
showing how dependency injection can be
used with the help of services and
injecting these Services into classes so
the main thought behind this is normally
components are used to ensure just a
good user experience these components do
not generally execute tasks so to
execute these tasks we make use of
services so a component can delegate
tasks like fetching data from the server
any network related issues
ETC to a particular service and these
Services can be made available to
components with the same thought what
I'm going to be doing is I'll be
creating a service that performs a task
of displaying an employee list later
we're going to inject the service into
the class using dependency injection so
let's head to our Visual Studio code for
the demonstration
all right so as discussed I'll have to
first create a component that displays a
button for the employee and then I have
to create a service class and inject it
into my component now this service holds
the employee details such as name
employee ID email ID
Etc so first let's go ahead and create a
component
so here let me just type
NG GC and the name of the component I'm
providing is M info
if getting your learning started is half
the battle what if you could do that for
free visit scale up by simply learn
click on the link in the description to
know more
so as you can
you can print with four different files
all right so the next thing we have to
do is we have to create a service so to
create that we make use of the command n
g g s
you can either give s or service and the
service name I'm providing is records so
let me just say record zero
all right here you can see two files are
created there is a spect.ts file and the
dot TS file all right so now the service
contains all the employee data that
needs to be displayed right so let's go
ahead and write the data so first we're
going to make use of three arrays I'm
going to be displaying employee records
for three employees so I'll have to
create three arrays and provide certain
information so let's go ahead and do
that
all right so the array I'm creating is
called info one for the first employee
and I'm going to be passing
information like name employee ID and
the email ID so the arrays of type
string
and within which let me just mention the
details I'm giving random information
I'm just saying Adam Taylor
and some random
employee ID
and let's say 80 at abc.net
all right so I'm going to be creating
three records so I'll just copy the same
thing and paste with the rest too
let's just change here
provide a different name here
and same for the last one
and let me change the name of the area
as well
followed so with the agenda to retrieve
this data in our component we make use
of the method for the same right so this
method Returns the employee data
so let's go ahead and create this method
I'm going to call it get info
and then just say string
and then this will just return
this dot info one
all right I'm gonna be calling it get
info one for better understanding
same for the rest too as well
I'm just gonna return different arrays
here
order and lastly info three all right
now in order to retrieve this
information in our component we need
three more arrays right three more
arrays I will receive this data let's go
back to our component dot TS file here
and then type in the following code
so I've created three arrays again or
info received one two and three
now what we need to do is we have to
accept the information that is being
sent from the service correct now as I
mentioned services are implemented with
the help of dependency injection so what
we need to do is we'll have to first
import the service into the component.ts
file the key reason behind doing this is
that when angular creates this component
and instance of the service class is
also made to perform the necessary tasks
correct so let's go ahead and just
import it here
so I'll say import
[Music]
records
services
I'm sorry service
from
and let's say records.service
all right and what we have to do next is
that we must also declare this instance
that is being created in the provider's
array of the component
all right so
let's just say providers
and then say records
service
all right now we've created the instance
of this class right however to access
this instance an object is also created
so this object will in turn access the
methods and variables of the service
class so for that we have to create
another object so let's do that here in
our Constructor method let's say
Constructor
private
and the object I'm creating is called
our service you can give a name
of your choice and then I'm gonna just
say records service
all right now this object will help me
retrieve data from the service so let's
go ahead and use this in order to get
the employee details all right so I've
created three different methods here get
info from service class 2 1 and 3 and
these methods will retrieve the data and
add it to our array here that is info
received all right and lastly
we'll have to create an unordered list
in our HTML file here we haven't added
anything so let me get rid of this
so now I have to create three different
buttons for three different employees
and when the user clicks on the button
the data is retrieved from the service
and then displayed on the UI right
so as you can see I've created buttons
for three different employees
and then I've made use of a bootstrap
class called list group info and then
I've
interpolated info which displays the
contents
of the info variable all right now in
order to call the methods in the dot TS
file we have to bind them with the
button so since it is bound with the
click event every time you click on the
button the information is displayed
so now the last thing we have to do is
we'll have to create a custom HTML tag
for the component and then add it to the
main component
so let's just do that
let me copy this here
and then in my app component.html let me
get rid of this
and then let me just create this
I've just created the custom HTML tag
for my component
and now just to beautify the code I'll
write a heading
and let's say employee
details
and then I'll also add the simply learn
logo
say image source
[Music]
I've I've added the image here so let me
just say logo
dot PNG
I've also added some styling to it all
right so now let me just save this and
have a look at the browser
so here we go we have the logo here and
then employee details heading and then
we have three different buttons created
that is employee one two and three and
when I click on it
the information of the employee is
displayed the name the ID and their
email address
so yeah so this is how you can make use
of dependency injection and inject a
service class into a component
dependency injection plays a crucial
role in angular
we'll understand what angular forms are
then we look at the different types of
form building supported by angular next
up we'll get acquainted with features
like form control and group control
and we learn all of this with the help
of a simple demo
so without further Ado let's begin
so what exactly are angular forms
now I'm sure every application that you
use comes with certain amount of form
filling correct be it your login
credentials or your sign up forms or any
sort of registration forms Etc so forms
are an integral part of a web
application unique forms to update your
profile or to enter sensitive
information are also to perform any sort
of data related tasks so now let's look
at the different types of form building
supported by angular
first up angular supports two types of
form building
first you have the template driven
approach and second you have the
reactive approach
now let's look at them one by one so
talking about template driven approach
in this method the conventional form tag
is used to create forms so angular
automatically interprets and creates a
form object with the help of the
directors
Now controls can be added to the form
using the NG model tag now multiple
controls can be grouped using the NG
control group module so it basically
uses several module classes to provide
controls now if you don't get this don't
worry you'll understand better when I'm
showing you the demo
next up is Json values so form value can
be generated using the form.value object
form data is exported as Json values
when the submit method is called
lastly basic HTML validations can be
used to validate the form fields in the
case of custom validations directives
can be used so arguably this method is
the simplest way to create an angular
form
so moving on to the active approach now
this approach is the programming
Paradigm revolving around data flows and
propagation of change
now with reactive forms the component
directly manages the data flows between
the form controls and the data models
now reactive forms are code driven
unlike template driven approach
reactive forms eliminate the
anti-pattern of updating the data model
via two-way data binding so it does not
use two-way data binding
and typically a reactive form control
creation is synchronous and can be unit
tested with synchronous programming
techniques
so now let's go ahead and look at form
control and form group
so consider a typical form consisting of
fields like name age and location
now a form control is basically a class
that enables validation of these fields
for each input field an instance of this
class is created now these instances
help check the values of the field and
see if they're either touched untouched
dirty pristine valid invalid and so on
so this allows you to check every field
for the value it makes it easier to
understand which Fields value is invalid
or which field has not been entered
Etc
now moving on to form group
so a form group class represents a group
of controls a form can have multiple
group controls the form group returns
true if all the controls are valid and
provides validation errors if there are
any so I hope this was clear
so moving ahead let's look at the demo
to explain all of these features I'm
sure it will become extremely clear once
you look at the demo so for that let's
head to our vs code
so back in my vs code
I've created a component called form
component
and I've also included the simply learn
logo just to purify the appearance so
once you execute the code
this is what you want to see on your
browser so you just have the logo at the
moment
the first thing we need to do is we'll
have to import to forms module all right
so oh uh but before we begin let me tell
you what the use case is so we're going
to be creating a user registration form
which is going to include four fields
that is the first name and last name
email ID and the password all right so
now let me show you how to import the
forms module so in your main
app.module.ts file you'll have to import
forms module from angular forms
all right and then in your Imports
you'll have to just call it here
all right so this is just a simple step
and now once you're done with that let's
go ahead and start our form creation
so here in my component.html let's
enclose the entire form within a div tag
so here let me say div
class
is a container
within which let me just have one
heading
which says user registration
all right and now let's go ahead and
create our form
so first let me just say form
now I'm going to create a div class for
every field so say div
class
equals form group
I'll explain it to you a little later
now first let's create a label
so label tag
for
basically it's the first name
so let me just say first name
and the tag will basically have
first name again
all right and let me just break the line
next we have the field so let's say
input
type is text
name is
first name
and we have a class which is
the form control class
all right
so this we have to do for all the other
fields so let me just copy this
and
paste it like four times
I'll also add the tag 3 for spacing
let's do that here
and finally we'll have the button
so let's just add that here
with a type submit
and let's just say submit on the button
so now let's go ahead and change these
values here
so here let me just change it to last
name
here as well
and here as well
and in this case it is going to be email
so let me just change it here
and finally we have passwords so
let's add that here
all right so let's save this and just
have a look at our browser
so there we go we have our uh user
registration form ready but I would like
to uh align it to the center so let me
just do that
so here in my CSS file
I'm just going to uh align all the div
tags in the center and the label tag to
the left so let me save this and look at
the browser now
and there we go we have our registration
form was a logo so this is how you
create a simple form
now we'll have to add a directive called
NG model now this directive and added
into the input tag will provide form
controls to every input field
all right so here let's just go ahead
and say NG model
that is it
so let me just copy this and paste it
for every other field
all right let me save this and back in
my browser
let me inspect
and here you can see different types of
classes like NG untouched NG pristine NG
ballot are added right so this indicates
that angular has recognized the form tag
and it has added these classes to the
form as well as all the fields
so this is achieved when you add the NG
model directive in your input tag now
back in my vs code now every form has an
output property attached to it called NG
submit all right so this property can be
bound within a method that method called
the submit method
so once submitted this method is called
right so once we click on the submit
button this method has to be called so
to include that
we'll have to just say
form
and G submit
equals
submit
[Music]
all right so now we have to define the
submit method
in our component.ts file so here let me
just go to our component.ts file and let
me
just get rid of unnecessary code here
and let's define a function
or submit
and then here let me just
console log
form submitted
all right so let me just get rid of this
as well it's unnecessary here
let's save this so what it means is that
every time you click on the submit
button
this method is called all right so let's
just have a look at the browser so first
let's go to our console
and when I click on submit it says form
submitted
all right so the next crucial step is to
generate JavaScript representation now
we'll have to make use of another
directive called NG form that is
assigned to a template variable
okay so this JavaScript representation
helps with validating all the fields so
I'll help you understand that better
so back in our HTML file
let's just create a variable first
let's call it login
all right and say Ng
form
okay now the mg form object includes the
JavaScript representation so now while
you're calling the submit method you're
going to pass login as a parameter
so let's just say login here
and in my ts file again let's just say
login
and along with it
I won't login to be displayed so
I say login again
so now let's save this
and if you have a look at the browser
let's click on submit
and now here you can see the JavaScript
representation So within form
I can
check for email
or say first name and here for this
field first name you can see different
properties attached you can see invalid
is it invalid or is it untouched
which is true or are there any errors so
this basically gives you all information
about the particular field
so we can make use of this feature to
validate the information so we're going
to learn about that in our next segment
moving on to form validation one way to
ensure that incorrect fields are not
submitted is by disabling the submit
button
correct now apart from this you can also
specify certain properties in your input
tag for the corresponding input field
now
um let's say that the fields that
now let's say that the fields can't be
empty and the form only accepts names
with the minimum length of 2 and the
maximum length of 7.
so here in my input tag I just mentioned
a required meaning this field cannot be
empty
and Min length
to 2
and
max length
to say seven
all right
so to check this
let's go to our browser
and here
let me submit the form without filling
the first name
and evidently there has to be an error
so when I submit it
and I look here
within forms and here controls
and my first name you can see that an
error is shown here it says required
equals true that means that there is one
error now you can make use of these form
control objects you can leverage form
control objects to ensure field
validation and display a message
whenever an error occurs
right so to do that you need to access
these objects like errors or invalid or
touched all of these properties or
objects need to be
accessed for that we'll have to create a
template variable
and then this variable is assigned to
this object so back in our vs code
let's create
a variable let me call it
name
and let's say NG model
all right here the variable name
receives the control object
so here back in my browser when I submit
again without the first name
you can see that the invalid property is
set to True correct so this helps us use
this property to alert the user with the
help of a simple if logic
so back in my
vs code let me create
another div tag
within which I mentioned NG if
within which I'm going to use a simple
if logic so let's say MGF
name which is our template variable name
dot touched
and name dot invalid
is true
right then I'm going to alert
so I'm gonna
make use of an alert
here let's say
alert
Danger
all right
so in my CSS file I'll have to mention
the simple styling for alert
so here let me just say
so we're gonna have the background color
red
for danger right and here I'm gonna
display the message
invalid in bold
so now let's go back to our browser and
check it
so let me proceed without entering the
last name it says invalid here
so this was a simple demonstration to
show you form validation
of course you can modify the code
depending on your requirement see
suppose the length of the first name is
too short then you can alert the user
with a different message or uh suppose
they have missed out on filling a form
field then you can again alert the user
so you can basically make use of the
nested if condition right now just to
help you understand that better let me
just show it to you
now back in my HTML file
instead of invalid let me have another
tag a paragraph tag
within which I make use of NG if again
now ngf
name dot errors
[Music]
dot required
is true
then I display the message first
name required
all right
and if
the length of the first name is
not 2.
now if the length of the first name is
less than 2 then I'm going to display
another message so let me just say
name dot errors
dot Min length
if this is true then I'm going to say
sorry
short
first name
all right so let's save this and have a
look at the browser
when I proceed without providing the
name it says first name required but
when I type in one character it says
sorry short first name but if I type in
another character it accepts so I hope
this made you understand how form
validation works
so this was just a simple demonstration
again now I highly recommend you explore
these properties and play around with
these objects uh trust me it's really
fun so I hope this tutorial helped you
out let's have a look at the basics of
routing
now I'm sure that you've observed that
the URL changes every time you click on
a particular link or on an icon on the
user interface correct now this
basically indicates that you are
navigating throughout the application
now to achieve this navigation we use a
mechanism called routing routing is
essentially used to navigate through a
website or a web application
but how is it achieved in angular
especially in angular routing plays a
major role it is used to create a single
page applications now these applications
are loaded just once and new content is
added dynamically applications like
Google Facebook Twitter and Gmail are a
few examples of single page applications
the best part of using single page
applications is that it provides an
excellent user experience and you don't
even have to wait for new pages to load
which by extension makes single page
applications extremely fast but how is
this new content loaded
enter routing now routing is the
mechanism that as discussed earlier that
is used to navigate through the
application and load new content
routing helps angular configure the
route and the component that needs to be
displayed
now I'm sure you're going to understand
the concept of routing better when you
work on it Hands-On
so in the demo we're going to be
navigating to the login and the home
pages of a web application with the help
of routing
so let's head to our Visual Studio code
so basically the objective of our
application is to navigate to home and
the login pages so when I click on the
login icon here it loads the login page
and here you can see the extension
slash login and similarly with home once
you click on it some new information
gets added and the URL changes
with a slash home appended all right so
this is the main objective of our
application so to create it let's head
back to our vs code all right so here
I've created a folder called demo and
underscore angular and I've created a
file called demo routing now the first
thing you want to do is open the
index.html file and make sure that the
base tag is added now although this is
generally added when your app is created
if it is not then add a base tag with
href attribute which is set to a forward
slash
all right now this is generally done to
tell angular to construct the URL while
navigating with a forward slash all
right and the next thing you want to do
is open your app dot module.ts file and
check if the app routing module has been
imported
if not go ahead and import it and then
also mention it in your Imports array
or with that the initial setup is done
Now to create the nav bar the code that
I'm going to be using is already
explained in the previous video that is
angular bootstrap I highly suggest you
go through that video before watching
this
so uh the code is already available I'm
just going to create a component and
write the code for it
and paste the code in it so let's do
that
let me say NG GC
navbar
[Music]
alright so this component is now created
now here in my HTML file
I'll just get rid of this and paste the
code for the nav bar
so here we go I've pasted the code for
the navigation bar
and back in my
app.component.html file I'll just remove
all The Unwanted code here
and just specify the
custom HTML tag for my nav bar
so let me just create one here
all right let me save this let me just
run the application and see if it's
displaying correctly
all right so when I open the browser the
navigation bar has been created
along with these different options
that's home about services and login
all right and we also have the simply
learn icon here all right now the next
step is to generate the components to
display the login page content and the
home page content
now again I have used bootstrap to
define the user interface for these
files you can easily find the code
online just search for a bootstrap login
templates and depending on your
requirements you can choose the
appropriate one
so first let's create the components for
by two files that is for the home
component
and the login component
so let's go ahead and do that
[Music]
nggc
I'm just going to call it login for my
login component
all right and then I'm gonna say nggc
home for the home component
all right
so I'm just going to copy the code for
the login component
so back in my login.html
file
I'll just paste the code here
okay
also note that I've added the simply
learn logo in my assets folder
and then just provided the source for it
here in my login component
all right
so next up is the home component
and if you've seen the previous video
that is angular bootstrap you might have
seen that we created three different
components that is intro courses and
footer which included the content for
the intro message for the courses and
the photo message correct so here we're
gonna just paste the code for all of
these three
and then just display it when the home
button is clicked
alright so what I'm going to do is I'll
just paste it here
[Music]
so this basically has all the content
one thing I want to tell you is that in
the previous video we made sure that the
code was written in three different
components however for this I've just
added all the code in the same component
now I agree that this is not the best
practice so if you want you can go ahead
and create three different components
and separate the code into these three
components and just add the custom HTML
tags in your home component
I'm just hoping you're following me
right now and also here in my assets
folder I have added a video and the
YouTube logo that needs to be displayed
uh when the home icon is clicked all
right so now that we've created the home
and the login components the next step
is to configure the routes for the
application all right so here you can
see that we have a file called app
routing module.ts file
so here we have the routes and the
router module that is imported and we
also have a constant called routes which
is strongly typed to routes from the
router package
all right now this array is used to
define all the possible routes in the
application now each route is basically
an object with a path
so here in my routes array I'm just
going to go ahead and create the paths
that is we have two different routes
right one is for login and one is for
home so I'm just gonna create a path
object so let's say path
sorry within curly braces I say path
[Music]
and then the path that I'm going to give
is login
this is basically what will appear uh on
the URL all right and the component that
needs to be
navigated to is nothing but the login
component
so let me just say login
component as you can see the login
component has been automatically
imported
now same with
uh the Home Path so let me just say
path
home
and the component that needs to be
rendered is the home component
[Music]
all right
now the next step is to link these
routes to a button
in the nav bar that is the home and the
login button right so we're gonna make
use of the nav tag and an anchor tag for
this
you can see that we have a nav tag
and an anchor tag
which encloses the login and the home
components
all right now we're going to make use of
two directives from the router package
called router link and router link
active now these are specified within
the anchor tag the router link basically
holds the path to the page
and the latter that is the router link
active specifies one or more CSS classes
that will be applied when the router
link is active
all right so to do that let me just add
router
link
all right in our case it is home here
and we're gonna have another directive
called router link active
[Music]
and we're just gonna say active here
[Music]
all right
same for the login icon here
let me just copy this
[Music]
and instead of home
the path we created for this was login
[Music]
all right
so this is how you can bind the route to
your specific button on your UI
now despite of all this how are we
specifying where these components are to
be displayed
right the answer to this is using the
router Outlet director now again this
directive is available in the router
package so we have to add that in our
app component.html file
so here just go ahead and type
router Outlet
all right so with that we've created a
simple navigation bar which has
different options that is home about
services and Link and once the user
clicks on the home icon it displays the
content that is in the home
component.html file and once the user
clicks on the login component it
displays the content in the login.html
file
all right it's as simple as that so now
let's go to the browser and see if it
executes correctly
so all right we have the navigation bar
and once I click on the home icon here
all right yes we see that all the
content has been loaded
you can see we have uh the intro section
we have the courses section and the
footer section as discussed and the most
important part is that here in our URL
you can see that slash home has been
appended this shows that a route has
been created that navigates to the home
component so we've successfully created
a route here
and for login component when I click on
this icon you can see that the path
changes here and the login component
gets displayed
all right so this is how routing is
achieved in angular also if you want to
become a full stack web developer then
the postgraduate program in full stack
web development in collaboration with
Caltech ctme can help you accelerate
your career as a software developer
check out the link mentioned in the
description box below and in this video
we will be creating a angularjs project
but before we jump to the coding part if
you haven't subscribed to our Channel
already make sure to hit the Subscribe
button and press the Bell icon so you
will never miss any update from Simply
learn
so without further Ado let's see how our
application will look like at the end of
this video
so let me show you however application
will look like
so
like this our application will look like
here you can add anything like like
share
and comment
you can also remove it
or Mark as done
like this you just have to click
and just remove if you want
from here you can just write anything
and just add like this if it's done
or you want to remove it
so
before we jump to the coding part let me
just tell you about a angular overview
so what is angular angular is an open
source JavaScript framework written in
typescript
Google maintains it and its primarily
purpose is to develop single page
applications as a framework
angular has clear advantage while also
providing the standard structure for
developers on a team to work with it
enables users to develop large
application in a maintainable manner
so there are so many advantages
using angular but the two I love the
most is data binding and browser
compatibility
you can also check out our videos on
angular for deep understanding
so what is data binding angular enables
users to effortlessly move data from
JavaScript code to view and react to the
user in events without having to write
any code manually
and the browser compatibility as angular
is a cross-platform and compatible with
multiple browsers an angular application
can typically run on any browsers for
example Chrome Firefox and others such
as Windows Mac OS and Linux
so
let's open our
Visual Studio code
it's got this
the first thing we're gonna do is we're
gonna create an angular project
for that let's open our command prompt
in this command prompt we'll write a
command
npm
install
hyphen globally
at
angular
CLI
press enter
so for this you must have node.js and
npm install in your system
it'll take a couple of seconds to
install the files
let's wait a minute
meanwhile
let me tell you why we use angular
JavaScript is the most commonly used
client-side scripting language it is
written in HTML documents to enable
interaction with web pages in many
unique ways as it is relatively easy to
learn language it is well suited for
Developers for modern applications
let's wait a couple of seconds more
so whatever angular application is
installed
so now we're gonna create a project for
that
we're going to write NG new and the
project name
here I'm gonna write
angular
ah
press enter
we're gonna ask you a few steps
yes I'm gonna type CSS
and it will install all the necessary
packages
let's wait a couple of seconds more
let's discuss some other things about
angular
JavaScript idle for developing single
page application that we all know but
that requires modularity testability and
developers probability perhaps not
these days we have a variety of
Frameworks and libraries designed to
provide alternative Solutions
with respect to where front-end
Frameworks
angular addresses many if not all of the
issues developer face when using
JavaScript on its own so angular is the
best app or tool to develop applications
so angular is to one thing I love the
most
so let's wait more seconds
so
all the packages are installed
successfully
so now
let's now open our Visual Studio code
let's cut this
and inside this let's open our folder
you can check the path of the file where
you have installed this so in the my
system it's in the user
yeah
and angular wrap is here so I'm gonna
open it
so
this is what
it will open
most of the code we are going to do is
in this source file
so we're going to open this app
so let's delete this we're gonna not
need it and
or application
we don't need routing as well
and
now
let's open style.css
let's
delete this
and let's write some Global styling
here
let's write margin
if it is zero
betting zero
Order Box
and
font friendly
San Andreas
let's save this file
and let's open index.html
so here it's
angular app
now let's just run this and see how it's
looking for that let's type control and
backtick
to open the terminal
or you can also go here
let me just first
zoom out a little
then new terminal
inside this
new terminal
I'm gonna write
ND servers open
let me show you
so we're gonna type
yes
enter
let's wait a couple of seconds
so as it's saying
this can't compiled
so let me see the issue here
it's saying
most of the times the
app routing the file that I have deleted
so because this file is has been called
somewhere
because of this this error is coming
so I'm gonna go here
and see where this file is
called
so we're gonna remove this part
this
app routing module part
now let's save it
now
let's see where are the issues here
again
do the compiling
until it's being compiled
we're gonna see if
where are the
HTML file the CSS component is empty
in this HTML only
the issue is coming so it must be in the
last of this yeah
let's remove this save this file
and as you can see it's compiled
successfully
we're gonna go again to a Wrangler
application
as you can see it's showing this store
to
create a new component we're gonna write
this command NG generate component and
the file or the project name
angular material for that we're gonna
write this command
and like this there are so many other
commands also
if you want to learn angular you can
just click on that and it will open the
angular Iota tutorial part
so we don't need that let's delete this
and the application that we have created
let's delete it also
let's minimize this
and let's work on our code
let's minimize this as well
we don't need components
so let's delete this part
let's delete this
and here it will write app
it's
I'll use a twin tag
and inside this I'm gonna write
from
let's save it and see in our browser
it's saying hello from simple
isn't it amazing
let's write here
angular
to do
app
let's just save it
let's say angular 221
now
let's make it under editor
let's write this one
between this so we'll make this
under header
it's working fine
now
I'll create a component for that
I'll create
a new terminal in here I'll write
a command Ng
globally
component
components in that I'll write
2 2.
enter
so as you can see here
component inside this app
has been created under to do so here as
you can see
so many to-do components and TS file has
been created a typescript file
so everything looks good here we don't
need this file so we're gonna remove it
so
let's minimize this
and inside the components folder
HTML
let's delete it
and create a class
to do
inside this class
I'm gonna create another class
let's name it as to do
let's make this as to lose
and this has two
after that
I'll create a class of
ID
so that we can
fetch the numbers
L for the junk data I'll write zero
not that
we will write F class
content whatever we're gonna post inside
that
so I'm going to write content
and inside this I'm going to write
my to do
after that I don't need it there now we
can create a button
of glass
delete
and then inside that I'm gonna write
oh
it's fine let's see in the browser
oh it's looking
wait a couple of seconds
I'll Loom reader code
so
first we're gonna call it inside this
okay
that's right amp
tutus
so it's not fitting it
let me see
tool okay
let's first see in the modules that
should provide that two two component is
automatically as you can see here
the 2do component is automatically has
been imported in this
see the issue
let's first see the component name
inside this file
okay the component is app.tudo
that's why it's not fitting
let's
lead head now save it
compiled successfully zero my to-do and
remove button
let's move forward now
so this is fine but we need to Loop this
how many times
so because of that
you can't write it so many times for
that we're gonna do
create a array inside this to do
component
under this Constructor
now we can use angular
engine for that I'm gonna write title
here I'm gonna write
two two
not component
okay let's see
so let's save this file in will go back
to our
to do a company.html and inside this
we're gonna call this class
so the name of the class here is title
that's why
I'm calling this here
let's see
you will see to do
if we'll change this to
to amp now let's save this
it will show us to do app
okay so this is how we can inject our
variables inside the Dom
so now
now let's
delete it tools
let's add here
now let's save this
let's compile information
inside this file only
the title
so we have created error so let's create
a file because we don't want to access
it from here so we
create a file let's name it as
to do
well let's
models first
let's just create a folder first
inside this models
will create a file
you to
dot clip screen
inside this we'll export a class
22
yeah well
if the content
a string
and
when it'll get completed
we'll get
so
as you can see here
intent
and
so guys oh
sign
it's looking fine now let's save this
file
let's move forward
let's first import
you do we'll import this module
TS file
so it's in this
tutu
from
tag
modules one two
this is the path of this
so let's
filter
save this
you have to write
doodle array
components are done
so we will
this is a keyword so
this array
exit this
here we'll write content
it's
it's true
complete
completed
okay it's
content
is what we are going to show so it's
Commander
okay
first content
and here we'll write
true
so it's
fine
we'll create two so we'll copy it from
here
paste here under there
it looks
let's save this the error is coming
can't fetch it so I guess
isn't behind it is
yeah
let's save this still
compilation error is coming
it's deleted
let's show similar only
we're gonna have to work on our code
let's minimize this
now
here we'll call it function
attribute for the last trick
to
let
to do
those
and then let
I equals to
index
come the valves so this looks
fine save it
so
it can't fit it so you know
as the index here
it's not fetching
so
okay we have declared here
as I as in X so we're gonna write I
let's save it by successfully
one okay fine
before we go deeper into the code
I'm gonna copy the CSS file
from here
let's copy this
and we're gonna paste it
the component part
there are just simple CSS commands
we'll get this code in the description
box
let's save this
let's cut this
yes it is not fetched
C
oh
mistake
these CSS should come under
doodle company.css let's save this
save and cut this also on this
now we'll open our app
so our application is going to look like
this
is
buttons are not functional right now but
we'll make it functional
so let's
let's style it
remove will remain the same because it
is coming under the button part
now we're gonna call methods
and the methods are like just functions
okay
now
index
all right
to do
it complete
when it will get complete
then Mark as done
otherwise
empty
so
it's done
it's completed
okay
see this
now
what we're gonna do is we're gonna make
method or function
so that whenever we click on this part
will just get cut or Mark as done
so that and
I'm gonna go to this to component
and under this
I'm going to create a method
toggle
done
and I'm gonna pass the ID
and inside this
so this
here
do do is
dot map
don't worry I'm gonna tell you
how this is working and what I'm doing
it's not fetching V and I
just wait
where I'm gonna write
see
if
I is equals to equals to ID
10
P Dot
P did
will get cut
equals to
not V
don't
completed
or if not
then return
V
so what I'm gonna do here is
okay this is
left
I'm gonna pass the number here
foreign
things look
normal
let's find the issue here what's the
issue
okay
we have declared V and I but we can't
fetch it because it's under this only
so to
access this V and I here also
hit me
check this let's
see
it's second and it's coming like this
let's go back to our code
and make it as
only
let's make this also
this both are coming like this
okay
let's clear the click function
side
over
component
HTML okay
here only
clear click whenever we click on any
item
it'll pass through dog
see
and here we're gonna pass
inside toggle hi
so we call this we'll pass through I
save this
here also in the delete path
we're gonna do it later let's save it
first
see
whenever we click on this
LDL leader
like this
fine
let's just
go back to our code
after this we're going to create a
delete method
let's name it as
[Music]
tutorial
this will implement
inside remove
like
so to delete we will not write
again this to do
this
equals to
this
Dot to do
filter method
where we'll call V V I can
stem will not repeat
the whole mistake
run right
not equals to
ID
and I is not equals to ID remove it
this is a function
so
we're going to call it like
we call inside our toggle done so we're
going to save this
going back to a cone
after this right click
when I will click
it will call
eat
dude
and inside this will pass index
save this
coming back to our
component
let's just
create far
add to function
so let's first declare here the number
giving her number is
whenever we'll
put the number only that time it will
work
so we can't add a string here so that's
why we are declaring here
number
let's just delete this from now
save it and see
okay the remove function is also
working now
going back to our code
what will need is
remove or ADD
so now we'll work on
let's
let's create
first thing we're gonna do is
set this
dot HTML
so we're not writing
to do
will help create a class
dove
class name
doodles
and inside this
let's create a form
set this form will create input from the
user
so what
he or she wants to enter in this
or first thing we'll need is the text
next we need is the name
and put
to
to that placeholder
inside that box that will get created
all right
enter
your
after that you get the class
off
put
two two
I have declared here as
true
no your hand
let's
one thing I'm forgetting is the
energy model
will get red because
we are not
so this is coming red because we haven't
created this input to do
the component
so we're gonna create it right now only
first here first let's just save this
okay
and let's
okay
let's just delete this save this
it's coming red okay
it's
to do
is a string of
we're creating
what
will come under the string is
a Boolean only or not Boolean string
value only
let's open this
here
I'm gonna import
ah
in G
module
[Music]
to angular
gor I guess
when the module is already
fetched so we're gonna need
only
import
forms
module
angular
oh
this
hold it inside our
side over
app module
see yes
here we're gonna write
this module
which is after YouTube
even on this
save as
so
I've called this one
so it's working now
this still is not working let's delete
this so everything is working fine now
there is no
nothing
and you can add
it's not adding
now everything is done
we're gonna
create
add two two
and insert this so we'll call this Dot
two-do's
dot push it
content which will come under this will
be content
whatever comes under this
and two two
and then completed
then false
let's close this
and after this
let's create the empty string here
called
to do let's run this
app we are looking for
hello
from
another click on its marking as done
we can also remove it
yeah and we can also add it
like
share
if this is Mark as done
and click here that's done
react is a JavaScript library for UI
development it is managed by Facebook
and has an open source community of
Developers
the framework was introduced in May
2013. it is currently one of the most
popular front-end libraries for web
development
moving on to angular
angular is an open source JavaScript
framework for web development and mobile
development
it is typescript based and is managed by
Google's angular team and the angular
developer community
launched in September 2016 Angela also
known as angular 2.0 is a complete
rewrite of angularjs which was
introduced in 2010. it competes directly
with react front-end Library
moving on let's go ahead and compare the
performance
now reacts performance is greatly
improved with the introduction of the
virtual Dom and is generally better than
that of angular
the ACT uses the concept of virtual Dom
that puts less load on the browser react
was released with the USP of being
faster than other Frameworks available
furthermore since the data binding
process is unidirectional bindings are
not assigned Watchers as in the case of
angular
when it comes to angular it performs
worse especially in complex and dynamic
applications
the performance of angular apps is
negatively affected by bi-directional
data binding angular uses traditional
Dom that updates the whole web page even
if a single element is changed
however the most recent update of
angular has greatly improved its
performance and it does not lose to
react anymore
so moving ahead let me give you a brief
insight into the learning curve
react is a library and not a framework
it is quite simple to understand if
you're familiar with JavaScript
however it takes time to learn how to
set up a project properly so you need to
learn the Redux Library which is used in
more than half of react applications for
State Management react depends on other
libraries to add functionality constant
framework updates also require
additional effort from the developer
complex to understand some complicated
features are embedded into the framework
core which means that the developer
cannot avoid learning and using them
angular itself is a huge Library so
initial learning effort is worth it
since you probably won't have to learn
other libraries like react
moving ahead let's look at the community
support
react framework is one of the most
popular JavaScript Frameworks worldwide
it has larger community support and you
may face a lack of documentation at
times the community support makes up for
the lack in documentation
when it comes to angular even though
angular was released before its adoption
is lesser when compared to react
comparatively it has a smaller Community
Support documentation is on point and
definitely better in the case of angular
also the community support has improved
over the few years
moving on let's look at adoption and
application
react was released in May 2013. react is
more popularly adopted by developers due
to its simplicity
it is an actively used by companies like
Facebook Twitter Netflix Airbnb and many
others
now here New York Times is one of the
many popular websites built using react
every new section acts as a separate
component so if any one of the component
updates the entire web page doesn't have
to reload making the web app feel much
faster and smoother
this is just to give you a brief example
when it comes to angular it was released
in October 2010 even though it is
improved now developers used to ignore
angular due to its complexity at the
time of its release angular is used by
Google Apple Nike McDonald's and other
companies
foreign
websites built using angular only the
initial loading takes time but after
that everything is so smooth because it
is pre-loaded onto the web browser
similarity of reactant angular in the
last five years
we can clearly make out that react's
popularity is increasing over time while
angular's popularity is more of a
straight line
moving on to job Trends a react
developer's average salary in the United
States is around 91 000 US dollars per
annum in India the average salary of a
reactive lapper is around 7.35 lakhs per
annum
when it comes to angular an average
salary of an angular developer in the US
is around 73 000 US dollars when it
comes to India the average salary is
around 4.88 lakhs per annum
so in conclusion angular is a
full-fledged mobile and web development
framework
react is a library only for UI
development which can be turned into a
full-fledged solution with the help of
additional libraries
react seems simpler at First Sight and
it takes lesser time to start working on
a react project however that Simplicity
as the main advantage of react is
neutralized because you have to learn to
work with additional Frameworks and
tools
angular itself is more complex and takes
quite some time to master yet it is a
powerful tool that offers a holistic web
development experience and once you
learn how to work with it you read the
fruits
now there is no better framework both
are updated continuously to keep up with
the competitor for instance while react
was believed to win because of its
virtual Dom angular equal Discord by
implementing change detection in the end
angular versus react is all a matter of
personal preference a matter of skills
and habits as a beginner in programming
you would probably benefit more from
starting with react
as an experienced developer you just
keep working with what you know better
hey guys I'm sure you all have heard
about phrases like web development full
stack development front-end and back-end
development
but if you are not sure about what
exactly they mean or how they're
different then don't worry you're in the
right place
this video on front end versus back-end
development will help you differentiate
the two
but before we begin if you haven't
subscribed to our Channel already make
sure to hit the Subscribe button and the
bell icon to never miss an update
now let's Jump Right In and look at
what's in store for us
so first we look at what exactly web
development is
then we'll look at the different types
of web development
going ahead we'll look at what front-end
development is and understand what
exactly back-end development is
and lastly we'll be comparing the two on
the basis of languages libraries and
Frameworks skills job roles and salary
so now let's begin by understanding what
web development is
web development is the process of
creating a website on the internet
it refers to the non-design aspects of a
website such as creating features and
functionality using programming markup
and scripting languages
developers concentrate on the technical
aspects of web development such as
architecture programming application
integration and graphics
now let's look at the different types of
web development
now web development could include the
front end
and the back end
now together
they form something called as full stack
development now I'm sure you're
wondering what they actually mean so
let's go ahead and understand them
let's begin by understanding what
front-end development is
now front-end development is a part of
the website that codes and creates
front-end elements of a website which
are features that are directly viewable
and accessible by the client
I'm essentially a front-end developer is
in charge of everything you see be it
styling Graphics text alignment
navigation colors Etc and the attempts
and he attempts to improve the user
experience to make it as seamless as
possible
now these front-end developers also
contribute to the overall design and
aesthetic along with debugging
responsiveness and performance are the
two main objectives of front-end
development
then what exactly is back in development
you guessed it right now web development
that occurs at the back end of programs
is accurately termed as backend
development
now this back-end development covers
server-side web application logic and
integration and activities like writing
apis creating libraries and working with
system components as opposed to
front-end development which focuses on
customer facing services and programs
now back in developers create code that
allows database and an application to
communicate with each other
essentially a back-end developer handles
what you don't see we are in charge of
the back end of the website which
includes servers databases and
applications
so now that you have a brief
understanding of what front-end
development is and back-end development
is let's go ahead and compare the two
so we'll be comparing the two
based on five different features that is
languages libraries and Frameworks
skills
job roles and salaries
now let's begin with languages
now front-end development typically
includes coding using languages like
HTML CSS and JavaScript now as you all
know HTML is a markup language that is
standardized system for tagging text
files to achieve font color graphics and
hyperlinks now CSS is used to format the
layout of these web pages
and JavaScript is used to create
interactive elements on the web page
when it comes to backend the languages
include python C hash Java Perl PHP Ruby
and some JavaScript now Java in
particular was built from ground up to
run on the server side so Java is
extremely useful python is also one of
the most popularly used languages and
c-sharp language is the preferred
architecture for backend programming in
Windows environments
now talking about libraries and
Frameworks front-end libraries and
Frameworks include react.js angular view
jQuery and bootstrap while talking about
back-end Frameworks we have expressed JS
node spring Django flask JSF
asp.net and.net MVC
now front end and back-end developers
work very closely so it's helpful to
have a foundational understanding of
front-end developer Technologies like
HTML and CSS as well
moving on to skills now front-end
developers are in charge of bringing
visual elements to a website as well as
interactive elements such as navigation
buttons and anything else that improves
overall usability
HTML JavaScript and CSS are frequently
used to ensure that a site's visual site
operates well so it's crucial to know
these languages and a good understanding
of JavaScript Frameworks and libraries
is also essential
and other General skills include a good
grasp of front-end programming languages
the ability to create a responsive
design the knowledge of testing and
debugging and an understanding of
front-end development tools like
automation content management Version
Control Systems
talking about the skills required for
backend development
now back-end developers deal with
back-end languages and Frameworks like
Java Ruby and rails Etc
now back-end developers deal with
languages like Java Ruby on Rails Etc to
make web pages and applications operate
now it's vital to know commonly used
back-end languages and Frameworks like
Django node.js express.js and so on
other important skills include database
management framework utilization
programming knowledge of accessibility
and security compliance and
understanding requirements in ensuring
data consistency and integrity
now moving ahead let's look at some of
the job roles for front-end and back-end
development
talking about front end we have the
front-end developer the CSS or HTML
developer we have front-end web designer
we have front-end Su expert full stack
developer and a UI developer
talking about backend this back-end
developer Java developer full stack
developer devops engineer
software engineer and an iOS Developer
and lastly let's look at the salaries
offered to these front-end and back-end
Developers
in India the average salary of a
front-end developer is around 6 lakh
rupees per annum
while a back-end developer earns about 7
lakh rupees per annum in the US a
front-end developer earns around 100 000
US dollars per annum while a back-end
developer earns about 121 000 US dollars
per annum also if you want to become a
full stack web developer then the
postgraduate program in full stack web
development in collaboration with
Caltech ctme can help you accelerate
your career as a software developer
check out the link mentioned in the
description box below in 2010 there were
over 2 billion internet users and this
number doubled in 2022 with over 5.07
billion internet users currently
according to the U.S Bureau of Labor
Statistics the employment of web
developers is projected to grow by eight
percent from 2090 to 2029 much faster
than the average for all occupations
this data demonstrates the Unstoppable
demand of web developers worldwide in
the current IT industry
many people are motivated to concentrate
and become experts in web programming
languages that can help them learn their
ideal career because of the sheer demand
of web developers across the world yet
only some know how to rule the field and
secure a position with the tank Giants
now that's the topic for discussion
today hello everyone and you are already
watching simply here we are with the
complete roadmap to become a web
developer in 2023 so what is web
development
web development is a branch of computer
science that deals with creating and
maintaining a website or web application
every website you come across is a mix
of certain methodologies a website is
generally divided into three parts front
end the section that is visible to you
back end the website section is not
accessible to the user database where
all the data of the website is stored a
web developer not only creates the
website but also ensures that the
website should not face any issues right
after the deployment before moving on to
the job profiles it's important to
understand the different fields of web
development web development is further
divided into three parts front-end web
development backend web development and
full stack web development
front-end web development front-end
development is the branch of web
development that concentrates on user
experience the main motive of the front
end is to ensure that the data is
presented in an understandable and
Visually appealing manner without
front-end development you would see
incomprehensible codes on a website or
web application but thanks to front-end
developments loan programmers can easily
use and comprehend websites and web
applications
so how to become a front-end developer
and what technologies do you need to
master to call yourself a full-fledged
front-end web developer the first step
to becoming a front-end developer is to
find yourself a technology that is easy
to understand
many Technologies are present in the
area but which one should you choose
HTML creates the structure of a web page
it shows how the content should be
placed on a web page CSS is used to
style the web page because it's
important to make it look more appealing
to them JavaScript for them adds
interactivity to any web page it can
help you create a dynamically active web
page by adding elements to engage the
user once you learn JavaScript for logic
building as well generally these three
Technologies HTML CSS and JavaScript are
enough to create the basic front end of
any web page you can work on projects
like creating a calculator app an
e-commerce website or even a model game
using JavaScript you can take reference
from the videos mentioned in the
description box below create one of your
own bootstrap is another front-end
technology that is not necessary to
learn but always adds to your skills a
framework based on CSS and JavaScript it
is used to make a web page more
interactive and mobile friendly as well
JavaScript Frameworks like react angular
View and jQuery are also used for
front-end web development it depends on
the learner if they want to pick one or
all of the Frameworks I would suggest
you to go for react as it is the most
widely used JavaScript framework however
some professional developers prefer
view.js because of its ease of use now
these are all the Technologies you need
to master for front-end web development
but possessing the knowledge of any
additional website deployment tool can
act as the cherry on top while applying
furniture
netlify and virtual are free deployment
tools to take your application online it
is rightly said that you can Master a
language only by programming so projects
also play a vital role while you go
through the learning process you can
create Facebook or a YouTube clone with
the help of react.js the link mentioned
in the description box below for the
same so this is what the proper roadmap
for front-end development looks like
what about the salary of a front-end web
developer according to glassdo the
salary of a front-end developer in the
United States ranges between fifty
thousand dollars to hundred thousand
dollars with an average salary of
seventy six thousand dollars per annum
with additional benefits next comes
backend web development
back-end development the backbone of web
architecture is the term used to
describe tasks carried out by executing
programs on the app backend development
handles the server-side functionalities
and activities like designing apis
creating libraries and working with
system components since the backend
makes an API call and the server side
rendering is handled entirely by the
backend functions designed to perform
specific tasks the skills required in
back-end web development differ from
what we came across in front
the first step to entering the back end
is understanding the concept of web
servers web server manages websites and
responds to user requests by storing
processing and delivering online pages
when a web server receives a request
from a user an HTTP server accepts it
and finds and Returns the requested
material to the browser using HTTP open
source platforms that distribute content
in response to queries include web
servers like Apache and ngis the next
step in back-end web development
requires knowledge of programming
languages additionally Frameworks are
collections of libraries that simplify
and facilitate programming although many
programming languages are available only
a few are frequently advised for backend
web development node.js is a JavaScript
framework used for backend API services
the power provided by node.js and the
beauty of JavaScript can be used
together to create the back end of a web
page python engine python is the most
user friendly programming language and
when combined with Django it makes a
fantastic website building too PHP with
learn PHP is a quick adaptable and
practical language that runs the most
well-known websites and looks laravel
and PHP can work on the back end of a
web page as well now it depends on you
to choose the technology set out of
these Technologies to get data from a
database a back-end developer Rights
Code that does the relational mapping
MySQL SQL Server posterior SQL mongodb
and Oracle database are the most popular
database Management Systems you must be
quite familiar with how they operate
using a version control system is the
best practice because it allows you to
alter the source code whenever you want
rapidly get a free and open source
Version Control System may be the ideal
option due to its secure adaptable and
simple to edit characteristics two apps
can communicate with one another thanks
to apis which serve as software
mediators back-end developers utilize
apis to connect services or applications
and start conversations to enhance user
experience you should be familiar with
some apis like rest Json soap and Json
the list goes on but you can start with
any one of your choice everything
including software application services
and products is moving towards cloud
services
a back-end developer should know what
clouds are and how to use mostly used
cloud services are Google Cloud Amazon
web services and Microsoft Azure so you
can pick one of these cloud services and
then you'll be ready to become a
back-end developer you can practice for
projects particularly related to any
language like PHP you can also learn how
Python and Django are used for web
development refer to the videos
mentioned in the description box below
these videos are specifically designed
to make you guys understand the basics
of backend web develop so what salary
can you expect after learning back-end
web development according to glassdo the
salary of a back-end developer in the
United States ranges between forty six
thousand dollars two hundred thousand
dollars with an average salary of eighty
thousand dollars per annum with
additional benefits a little about
front-end development of course the
learning path for backend developers is
slightly harder than the front
now coming to full stack web development
they are individuals capable of
developing a website's front-end and
back-end full stack technology refers to
the total depth of a web application
there's no special technology related to
full stack development a full stack
developer should know about every techno
there is no shortcut for this you should
know Technologies like HTML CSS
JavaScript followed by any framework and
back-end Technologies like node.js PHP
and menu additionally a full stack web
developer should know databases apis and
almost everything they have the
expertise to handle any tasks including
customer interaction system engineering
database management server
Administration and architecture you
cannot follow a specific roadmap to
become a full stack developer if you are
done with both front-end and back-end
confidence you are good enough to call
yourself a full stack web developer
reports from glassdoor.com have shown
that a full stack developer in the
United States earns between 50 thousand
dollars to one hundred and twenty five
thousand dollars per annum with
additional cash benefits the salary of a
full stack developer makes you apply for
a job but the learning curve is also
steep everyone could Master the
programming languages we discussed for
different job roles today but the real
deal is to implement your learnings as
you enter an interview picture yourself
stating I have a respectable portfolio
of projects I learned about the
company's future endeavors which aligned
with my goals now who could possibly
reject that right in particular
businesses that want to think creatively
and break convention to create something
remarkable will never say no to such
candidates web development is a vast one
and the future looks promising now more
than now we are heading towards General
HTML interview questions
now here are a few questions like what
is an attribute in HTML so you can
consider the attribute are the
properties that can be added into the
HTML tag and that changes the way the
tag behaves or it is displayed
okay so you can see here you have a call
Button
okay so attributes are added right after
the name of the HTML tag so button is an
element form it's not an attribute okay
so what is the mark Union HTML file so
Mark is something which keep on rotating
okay let's say
for scrolling down the text Page or the
text on the web page Mark is used
sometimes you might have seen when you
want to display some very important
information okay which needs to scroll
at the bottom or also right after
specific period of time you always use
Marquee it is one of the very very old
element available under the HTML page so
it Scrolls the image top left right
center automatically everywhere so you
always use Marquee tags for rotating it
so the next is what is the semantic in
HTML see semantics are htmls are nothing
but a call another coding style Okay so
when you talk about a semantics so they
are basically reinforcing the meaning of
the contents like typically you have
seen we are using given span tag but the
difference pan tag really don't make
sense to us as an HTML reviewer unless I
go inside those and get to know about
what they're really doing it so
semantics are nothing but these are the
standard tags are we clear so you can
see like here like bold tag is not
useful for the board statement as well
as the italic tag is useful for what for
the italic tag so instead of we are
using strong and EM tags
I'll be clear now so this makes more
sense to us
now the next thing is how do you display
a table in an HTML web page so obviously
we have a got table tag and under the
table tag I can or align the complete
layout of my web page
because of table head table body table
row table columns there are multiple
different type of elements which are
available
okay which are the part of table it's
just to basically align the content in a
proper format
so what is SVG okay so SVG is basically
known as a kind of a graphic which is
written in our typical XML language the
svgs are the high quality Graphics which
doesn't tear off when you basically grow
and increase or Zoom so normally what
happens if image you talk about
jpeg images after Beyond certain point
their pixel get deteriorated but here in
SVG it never happens so you go to any
level when you want to zoom and you're
gonna get accurate contents at any point
of time
okay so these vector graphics are really
typically 2D based diagrams and give you
the X and Y coordinates in a regular
systems
next how do you separate a section of
text in HTML
to separate the sections of text in HTML
we always use what either br
we also use block code or else we use
what a paragraph tag so BR means anyways
it's separate out a text
and break the current line
paragraph is used to again write a
paragraph of text in the block codes is
used to define the large quotated
sections
okay next is how do you create the
nested web page in HTML so obviously we
have a different type of options that
are available like an iframe
okay you need to say page within a web
page okay so we can create a page within
a web page with using iframe so the very
very common questions we used to
let's see at a time of interview
okay the difference between order list
and unordered list so audit list will
give you the different ways to display
the data
in Roman format in numeric digits or
else you can talk about like in
alphabetical order but the unordered
list it completely unordered you don't
get any options like in order list
okay so the audit list start with ol and
unordered list starts with
UL
okay so we have already seen the
difference between order list and
unordered list now it's time to talk
about our another Tapper type of
interview questions which is regards to
your CSS
no in thesis interview the first
question they always ask you like
how do you add CSS styling in HTML
so we are different ways to include
number one we have a call inline CSS
where we use the element and within that
we try to add the CSS content that is
called inline CSS second is called
external style sheet
okay where you can just
use as a secondary or the you know
external CSS file and this included into
your existing HTML page okay that is the
additional file which you write it in a
CSS and you include it in HTML and third
call which is the internal style sheet
which you write it within your HTML but
the only difference happens when you
talk about external it is reusable
across multiple web pages
now the different type of CSS selectors
which are available so we have a
different selectors like a universal
selector which is available where you
use asterisk sign and select all the
elements and offer the common style
second we talk about element type
selector where you have the specific
element name into your mind and you
offer that particular type of selector
ID selector is responsible to select the
particular element which is having the
proper ID
class selector which starts with a DOT
class
okay and having the class name we talk
about dissident selector so in
descendant selective you basically try
to select all the elements which are the
part of that
okay so you are selecting this container
and under that all the child elements of
the box
okay so we're talking about like in what
of your decident selector we talk about
called child combinator so in this case
you are basically trying to select all
those which is a child of this container
so you are using this greater than
symbol of container.box
okay so selecting all those which are
having the child name called Box
available
then you're talking about a general
sibling selectors
with this Tinder sign and finally we
talk about like an attribute selector
where you have a proper attribute
available to you
okay so these are known as call a
general CSS selectors
followed by we have a next question like
in what is SAS lesson stylus
friends these are the advanced level of
thesis used in the industry so we talk
about like it what is a SAS which we
talk about like in systatically awesome
style sheet so we also have a similar
type of option like in less and many
more
okay so it says about the SAS saying
that it is a systematically awesome
style sheet it is basically taking the
complete CSS to the next level
so that is a third party website but
once again it is very
awesome
CSS which can
offer you the mathematical functions as
well as the reusability
you talk about less okay so we talk
about linear style sheet where you can
see all statements which starts with at
the rate sign there in SAS every single
variable start with the dollar sign
then you talk about stylus it is also
flexible CSS so it doesn't use at the
rate or dollar for any defining
variables we can just directly use this
with the name okay and use it at any
point of time so these are the three
very popular
new or next Generation CSS
so explain box sizing property like how
you can offer the property for the Box
sizing
so here so box sizing property actually
defines how to basically Define height
and the width of the box which are
calculated
so you talk about a term name called
content box you talk about padding box
and you talk about border box typically
we use three different type of box
content padding and Border box
in a Content box these are a default
width and the height which can apply to
the elements content which are there
under the content box
okay padding box are here you talk about
the dimensions which are added to the
Box elements of the content padding
third which is available called border
box so here the dimensions added to the
content padding and the Border
now what are the different way to hide
the element in a CSS so we have a
different way either we can use display
none
that means whatever is there inside a
Dom it won't be visible to you
second option is visibility hidden that
is another property through which you
can
eliminate the visibility but the thing
is like it is not visible to the user
but this element is added to the Dom and
takes up the space
but in display none it doesn't load in a
Dom so somewhere to
when you want to talk about performance
display none is anytime better
and second chord position absolute so
this can be made to appear outside the
screen so three different options are
available
next option what does an important CSS
mean so the important keyword actually
indicates that the highest precedence
and it overrides the Cascade properties
okay so like as you can see here we have
a call paragraph where we have a color
called important and this is one ID name
called thing color called Green so when
I talk about PID equal to what thing so
it automatically tried to override
the highest precedence
okay
now what are the CSS is Sprite CSS
Sprites is a technique where you can
basically take a
larger image okay
download in a single shot and try to cut
down to the pieces and utilize the way
you always want
okay so if you're using this small small
images separately
okay so to load those images
independently you would be making
multiple HTTP calls which can be an
overhead so it is good to basically
download this a lengthy image in a
single shot
clear and utilize them as per your
convenience within your application
so it is used to minimize the loading
time of your web page by combining
multiple smaller picture into the single
image
okay that's what the CSS Sprites are so
which property is used to underline and
strike through and the overline text so
we have this option textile textile text
decoration text transform okay so the
text decoration so the text decoration
is the one which will be helping you to
achieve this
okay everyone so our next example is
towards
focus on JavaScript interview questions
now here we have few questions that are
available like what are the various data
types in JavaScript
so JavaScript contains different type of
JavaScript data types like if you think
about
all different types which are there
generally byte short int long
float double character Boolean these are
all different type of
data types are supported inside a
JavaScript
okay now
going ahead what is the Callback in
JavaScript so the Callback means is a
function
okay that is passed with another
function as an argument on a parameter
okay so what is the Callback callback
means don't call me I will call you
clear so the idea is like you are
passing
the function itself is in parameter to
the another function because the
JavaScript is known to be called
non-blocking which never wait for the
code to finish it continues to move on
and due to some reason if your
function it's taking some time to
you know execute so JavaScript won't
wait for that particular function to
finish so you use callback to prevent
such Behavior
okay that's called a JavaScript callback
now what is the difference between
function declaration and function
expression see this is called function
declaration
and you talk about a function expression
function declaration is just to declare
a
snap it statement within a main
JavaScript code and
you can be called before the function is
defined
okay it gives you the better readability
where the function expression are always
created inside expression
okay and it is created when the
execution Point reaches it
'll be clear and it is used when there
is a need of for a conditional
Declaration of a particular function
now what do you understand about the
cookies in a JavaScript so it is one of
the very very common question cookies
are the one which is created by the
servers stored in a client site which is
responsible to store all the necessary
client activities so that the browser or
the application give the better
recommendation to the user
okay so it is just a
a small text file which is stored in a
browser itself
okay good one to record something about
a user activity you always put it like
that and you can also Define the expiry
time for the cookies
okay as per your convenience to decide
how long the cookie wants to be there
inside your browser if you do not offer
any time span by default the GUI will
get lost immediately the moment the
browser closed
next what are the closures in JavaScript
so closures are the JavaScript is the
feature where the inner function has an
access to Outer functions variables and
the properties
okay so you can consider a closure has a
three scope chains number one it has an
access to its own scope
that is defined within its curly braces
second it has an access to the variable
of the outer function and also has an
access to the global variables
now the closure is a JavaScript features
as I told you like which has has an
access to the outer functions variable
simple example I can give it to you is a
function which is known as called inner
function and there is a function defined
on the top is an outer function so it is
having all the functionalities axis of
the outer function inside it
now what are the Imports and export in
JavaScript so import and exports in a
JavaScript is a very very common way how
in Java you use the term name call
import a package but in JavaScript it is
little different unless you export
something you can't import it
okay so if you want to access any of
your files Properties or methods outside
of your file you always use the
statement of Import and Export so here
you can see you have got one property
like an sqrt which you are exporting it
and you have one function which is
called Square this is another function
called
you can say d i AG which you are
exporting it and importing it just the
way you always want so that is how it is
importing and exporting
what is the difference between undefined
Undeclared and null in a JavaScript
see undefined means a variable that is
declared but the value has not been
assigned yet that is called undefined
Undeclared means like it is a null first
of all we talk about null null means it
is an assignment value that we can
assign to any variable that is meant to
contain no value and Undeclared means
the variables are not declared and do
not exist in the program
okay that is called what Undeclared
how to remove the duplication from the
JavaScript array so you basically needs
to use the standard filter methods okay
this is basically responsible to help
you to analyze whether we have some
duplicates available or not
so we'll be using using filter methods
okay so these are basically what is
called array and the current element and
the index of current element and by
using the for Loop it is an empty array
is used for the storing all the repeated
elements
okay so these are known is called a
typical JavaScript discussion which we
have taken place multiple questions are
there which we have already answered
okay everyone so we will go ahead with
the next set of interviews which is
related to your angular
so angular is as popular as I can react
okay so there are some questions which
are usually asked like what are the data
binding okay so the data binding is
actually the process which allows the
application
okay to have some data associated with
your
HTML page
from your typescript classes or the vice
versa
okay so the data binding is the one
through which you bind the data okay so
you can see here it says like angular
uses two-way data binding when the
changes happens in a model it will be
affected in a view and whether changes
happens review it will affect the model
also so it is used to
typically keep the model and view in
sync with each other to have the data
interchange
what is the typescript typescript is a
typical
I would say a language which is used
by angular okay to develop angular
component Services pipes decorators and
multiple things it is a superset of
JavaScript and it supports
JavaScript libraries and apis it is a
pure object oriented in nature uses
object-oriented principles better
development time fast to load and
additional features to the JavaScript
for sure
okay what is an aot compilation how it
is different from jit aot stands for
ahead of time compiler which is
converting all angular and HTML and
typescript code into the JavaScript code
during the build phase before the
browser downloads and run the code Okay
so aot
is far more faster and light weighted in
the size just in time compiler is a by
default compiler Okay so
it is a process where the compiling
computer code is the machine code during
the execution of runtime so this ensures
the faster rendering the browser it also
known is called Dynamic compilation
are we clear so when you want to develop
this aot compiler you always use hyphen
hyphen aot
okay so here you always use jit compiler
because that is a by default compiler
you use when you say NG build
next what are the pipes in angular so
pipes means that they are the decorators
they never change their default value
but just for the representation purpose
they change the values okay to look more
better the way they always want
okay so pipes are ready made or else it
can be customized created angular also
comes with lot many predefined pipes
okay like it comes with the pipe symbol
here okay so you can change the pipes
together it can be provided with some
arguments at a run time with the colon
sign
okay now you pass the input you put the
pipe and get some result
with some decorated outcome now you can
see the pure pipes uses the pure
functions
clear so this pipe doesn't use any
internal State and the output Remains
the Same as long as the parameters pass
to stay the same angle calls the pipe
only when it detects the changes in the
parameters being passed a single
instance of the pure pipe is used
throughout the all components
okay so this is how you see how the
pipes are being used so we have defined
the pipe okay which is the value called
true in Fall for the pure and giving the
class by implementing pipe transform so
you can see here the impure pipes for
the say for every change detection
actually happens in an angular an impure
is called
with regards to the changes in the input
fields
okay they will be calling every time so
multiple pipe instances are created for
the C for these pipes and push pass to
these pipes can be mutable by default
all pipes are pure only if you want to
make it impure you always say like pure
colon true
or
pure colon false
now what are the promising observables
in angular see promises it is a typical
JavaScript object okay it it emits a
single values at a time they execute
immediately after the creation and not
cancelable they are pushed error to the
child promises
okay where the observables are only
executable when subscribed to them they
won't call unless you subscribe to them
using subscribe methods so they help
perform operations like it for each
filter and retrieve and everything when
you unsubscribe this they won't get
called and won't listen anymore
what are the form controls and the form
groups see the form controls and form
groups these are two predefined objects
comes with your
angular
so these all text boxes
from you take the input it may be radio
buttons it may be the drop down it may
be the check boxes are called form
controls
okay so form controls is a class that
enables the validation for every single
input class whichever you are creating
it now so they check the values which
are touched untouched or the dirty
clear now we talk about called form
group they are basically forming a group
which
under which you have a call relevant
Fields joined together are called what a
form group
okay so form group class represents a
group of controls like you talk about
address contains city state and pin code
these all three can be together called
as a form group
okay so the form group class basically
returned true if all controls are
basically what the valid
okay and they are designed to provide
all the necessary validation errors
what is the eager and what is a lazy
loading
okay so eager loading means what it is a
default module loading strategy followed
in an angular
Eagle loadings are used before the
application starts
these are typically useful for the small
scale applications
lazy loading however is designed for
dynamic loads of features only on demand
this makes your application far more
faster so in a bigger application we
really don't make easy eager loading
because it hamper the performance and
you want only when the client asks you
want to use lazy loading
what existing interpolation in angular
see string interpolation is written
under the double curly braces it is a
typically One Way binding where you get
the data from the typescript classes and
display directly over your browser it
denotes with the curly process and it
always display the data comes from the
component to The View
well let's go ahead with the next area
that is called working with reactges
interview questions
now as we know it react.js is as
important as like an other tools which
you've already has seen so what is the
jsx here jsx called JavaScript syntax
extension
okay so this syntax extension to the
JavaScript in reactors is in the way
how you express to bind JS and HTML
together to result a js6
content so by using j6 you can write a
structure in the same file that contains
the JavaScript code that is something
more Innovative way because of that
react.js is creating a more buzz in a
market
so jsx actually helps the making code
more easy to understand and debug and
avoids a lot of boilerplate code okay
inside the Dom structure
now the next thing is what is the
virtual Dom see the virtual Dom is
representing a Dom in a memory
okay that is called virtual Dom so
manipulating the real term is much more
slower and costly Affair okay because
you need to repaint the Dom over and
over the period of time when the user
changes few things so
when the state change virtual Dom
changes and only the objects which are
in real Dom okay
update instead of updating the entire
object so that makes your page to be
load far more faster
okay so virtual Dom what happens this is
the real Dom this is a virtual Dom so
the orange color portions which you're
seeing that is basically the changes
which has been made okay these are
called Changed object okay so virtual
Dom is basically compare it's to the
previous state and understand which area
it needs to send for the updates and
avoid the other areas
okay that's what this virtual Dom really
works
so what are react extension react
extensions are many like you talk about
like in flux it is a third party tool
which is responsible to attach
the State Management feature we'll talk
about react native which is responsible
to develop the hybrid mobile
applications in JavaScript so these are
two very popular and there are many more
which are available okay so like to talk
about
architectural support you talk about
server side rendering okay so Redux and
there are lot many other tools are also
available so what is an event in react
and how you're going to create that so
react is basically offering the ideas of
handing the event very fairly easy so to
talk about clicking anything you talk
about taking your mouse somewhere so
these kind of options generate an event
so for that we typically say alert and
you click on this render you click on
this button in a curly braces you call
the function to trigger to event
now what are the components in react
so friends react components are nothing
but a call View
okay like a complex view can be divided
into the smaller portions
a complex UI can be distributed further
to create more better and reusable views
clear so it splits the user interface
into the independent pieces of code
which can be developed and joins
later on okay so that's how you define
the component in and react so in angular
and react in both the areas the word
component is very much used so the
component meaning is very simple you
talk about a view
so what is the state in a react so state
is react is nothing but is the one which
identify what was and what is now okay
if it stores the value for the specific
period of time with changes and react is
basically detecting those
so it is changing because of some
actions either taken by the users or by
the applications okay so keep tracking
about all those States what it was there
like in I'm talking about an
incrementing encounter so that is also
the state a variable there okay so the
state object is always initialized in
the Constructor so it can contain the
multiple properties so this dot set
state is used to change the value of the
state object and set state is
responsible
two
perform the shallow merge between the
new state and the previous state
now the state holds the data that a
component renders to the web page
certainly because every time the state
changes so it needs to be stored
somewhere so this is how the state is
accessed as you can see this example
here
in the Constructor we are defining the
super props and the state has been
initialized and you're rendering the
states there are three different steps
are involved initialize the state rent
to the state and update the states
what is the higher order component and
pure component react higher components
are the component which are typically a
function okay that takes a component and
return a new component to you by
manipulating few things that basically
designed for the reusing
okay so the higher the components are
typically a function that takes a
component and return a new component
okay so to in order to perform some
reusability
a pure components are the components
okay is a variation of react component
that doesn't
that does a shallow comparison of props
and State
okay shallow comparison basically checks
what the equality are we clear now so
that's what the main job
going ahead what do we Implement and how
do you implement react routing so to
implement a react routing react routing
also comes with inbuild uh react modules
and that particular module to import it
so
here we Define the react modules by
offering the route path where you have a
call left hand side is the name and the
right hand side is a component which you
would like to deliver it now well that's
our app on this web developer full
course 2023 we hope you found this video
informative and helpful if you are
interested in learning more about
different Technologies plenty of
resources are available at simply load
you can also check out our website for
more information on different
certifications so thank you for watching
and we'll see you next time until then
keep learning and stay tuned to Simply
learn
staying ahead in your career requires
continuous learning and upskilling
whether you're a student aiming to learn
today's top skills or a working
professional looking to advance your
career we've got you covered explore our
impressive catalog of certification
programs in Cutting Edge domains
including data science cloud computing
cyber security AI machine learning or
digital marketing designed in
collaboration with leading universities
and top corporations and delivered by
industry experts choose any of our
programs and set yourself on the path to
Career Success click the link in the
description to know more
hi there if you like this video
subscribe to the simply learned YouTube
channel and click here to watch similar
videos turn it up and get certified
click here
foreign