A PROJECT

IN
“REAL TIME CHAT APPLICATION”
A PROJECT SUBMITTED IN PARTIAL FULFILLMENT OF
THE REQUIREMENT FOR THE DEGREE OF

DIPLOMA IN COMPUTER SCIENCE AND INFORMATION TECHNOLOGY

Submitted By-
MUKESH KUMAR MAHATO 20408240026

SANDEEP KUMAR 20408240043

RITESH KUMAR 20408240040

MUSKAN KUMARI 20408240027

Under Guidance of
Miss Momita kundu

DEPARTMENT OF COMPUTER SCIENCE AND INFORMATION TECHNOLOGY

GOVERNMENT POLYTECHNIC JAGANNATHPUR

P.O- KARANJIA, DISTRIC-WEST SINGHBHUM

JHARKHAND 833214, (APRIL 2023)
CERTIFICATE
This is to certify that the project report title

“REAL TIME CHAT

APPLICATION"
submitted by-
MUKESH KUMAR MAHATO (20408240026)

SANDEEP KUMAR (20408240043)

RITESH KUMAR (20408240040)

MUSKAN KUMARI (20408240027)

in fulfilment of the requirement for the final year Diploma project in department of
Computer Science And Information technology. Government Polytechnic Jagannathpur is an
authentic work.
carried out by him under my supervision and guidance.

Date:

Miss Momita kundu Miss Moneera Naaz Mr lakhan singh

(Project guide) (Department) (Head of Dept.) (External Examiner)
(Examiner) coordinator
ACKNOWLEDGEMENT

We would like to express our heartfelt gratitude to our guide Miss

Momita kundu (Lecturer). Department of Computer science and
Information Technology for her valuable time and guidance that
made the project work a success.

She has inspired us such a spirit of devotion, precision and

unbiasedobservation, which is essentially a concern stone of
technical study.
We are highly grateful to Miss Moneera Naaz (Lecturer) and
Head/department coordinator. Department of Computer Science And
Information Technology, for his kind support for the project work.

We thank all our friends and all those who have helped us for
carrying out this work directly or indirectly without whom
completion of this project work was not possible.
DECLARATION

We declare that this written submission represents our ideas in our

own words and where other's ideas or words have been included.

We have adequately cited and referenced the original source. We

also declare that we have adhered to all principles of academic
honesty and integrity and have not misrepresented or fabricated or
falsified any idea/data/fact/source in our submission.

We understand that any violation of the above will because for

disciplinary action by the Institute and can also evoke penal action
from the sources which have thus not been properly cited or from
whom proper permission has not been taken when needed.

MUKESH KUMAR MAHATO 20408240026

SANDEEP KUMAR 20408240043

RITESH KUMAR 20408240040

MUSKAN KUMARI 20408240027

CONTENTS
CHAPTER 1 INTRODUCTION
1.2 Motive of the work
1.3 Problem Statement
CHAPTER 2 HTML
2.1 Introduction of Tags
2.2 HTML Document
2.3 HTML Link & Image
2.4 HTML Comments
2.5 HTML Attributes
2.6 HTML Block And Inline Elements
CHAPTER 3 CSS
3.1 Center Links & Add Borders
3.2 CSS Background Color & image
3.3 CSS Border Color & Styles
3.4 CSS Font Size & Style
3.5 CSS Layout
3.6 CSS Links
3.7 CSS Margins
3.8 CSS Padding
3.9 CSS Setting Height & Width
3.10 Text Color & Decoration
CHAPTER 4 JAVA SCRIPT
4.1 DOM Elements
4.2 DOM Document getElementBy
4.3 DOM Element Classlist
4.4 JS Progress Bar
4.5 Labels
CHAPTER 5 NODE JS
5.1 NODEMON
5.2 PACKAGE.JSON
5.3 SOCKET.IO
1.1 INTRODUCTION
CHATTY is a social networking tool that allow its users
to communicate or share media for keeping peoples in
touch you know. The purpose of making this project is
to provide aclear and comfortable real time chatting
service to users. The main feature of this chat
application is a lot of people can communiacate with
each other in real time.

So in this project we successfully developed an real

time chat where users get a service by which they can
chat using messages with their friends and family all
over the world.

We used HTML, CSS and javascript to develop this

project. First we created the front end of aur chat
application using HTML and CSS and after that we have
done back end work using Javascript, node js and then
we connected the web browser with the local server
using socket.io.
1.2 MOTIVE OF WORK

Real-time chat applications allow users to

communicate with each other in real time
through text, voice, or video. This type of app
allows for more immediate messaging than
other types of communication such as email
or IM.

In this project we provided a clean and ad free chatting

experience without any type of
interruption between chatting between the users.

1.3 PROBLEM STATEMENT

The main objective to develop this project is toprovide
a clean experience of chatting in real time services to
the users.
CHAPTER 2 HTML
2.1 Introduction of TAGS:
•The <!DOCTYPE html> declaration defines that this
document is an HTML5 document
•The <html> element is the root element of an HTML page
•The <head> element contains meta information about the
HTML page
•The <title> element specifies a title for the HTML page
(which is shown in the
browser's title bar or in the page's tab)
•The <body> element defines the document's body, and is a
container for all the
visible contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
•The <h1> element defines a large heading
•The <p> element defines a paragraph
2.2 HTML Documents:
All HTML documents must start with a document type
declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with
</html>.
The visible part of the HTML document is between <body>
and </body>.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

2.3 HTML Links & Images:

• HTML links are defined with the <a> tag:

<a href="https://www.codewithharry.com">This is alink</a>
• The link's destination is specified in the href attribute.
• Attributes are used to provide additional information about
HTML elements.
• HTML images are defined with the <img>tag.
• The source file (src), alternative text (alt), width, and height
are provided as attributes:
<img src="w3schools.jpg" alt=“codewithharry.com"
width="104" height="142">
src - Specifies the path to the image
alt - Specifies an alternate text for the image

2.4 HTML Comments:

HTML comments are not displayed in the browser, but they
can help document
your HTML source code.
You can add comments to your HTML source by using the
following syntax:
<!-- Write your comments here -->
EXAMPLE:
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
2.5 HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about elements
• Attributes are always specified in the start tag
• Attributes usually come in name/value pairs like:
name="value"
• The href Attribute:
• The <a> tag defines a hyperlink. The href attribute specifies
the URL of the page the link
goes to:
• Example:
• <a href="https://www.w3schools.com">Visit
W3Schools</a>

• The src Attribute

• The <img> tag is used to embed an image in an HTML page.
• The src attribute specifies the path to the image to be
displayed:
• Example
<img src="img_logo.jpg">
1. Absolute URL - Links to an external image that is hosted
on another website.
Example:
src="https://www.w3schools.com/images/img_girl.jpg".
Notes: External images might be under copyright. If you do
not get permission to use it, you
may be in violation of copyright laws. In addition, you cannot
control external images; it can
suddenly be removed or changed.
2. Relative URL - Links to an image that is hosted within the
website. Here, the URL does
not include the domain name. If the URL begins without a
slash, it will be relative to the
current page. Example: src="img_girl.jpg". If the URL begins
with a slash, it will be relative
to the domain. Example: src="/images/img_girl.jpg".

The width and height Attributes

The <img> tag should also contain the width and height
attributes, which specifies the
width and height of the image (in pixels):
Example
<img src="img_girl.jpg" width="500" height="600">
The alt Attribute
The required alt attribute for the <img> tag specifies an
alternate text for an image, if
the image for some reason cannot be displayed. This can be
due to slow connection,
or an error in the src attribute, or if the user uses a screen
reader.
Example
<img src="img_girl.jpg" alt="Girl with a jacket">
The style Attribute
The style attribute is used to add styles to an element, such
as color, font, size, and more.
Example:
<p style="color:red;">This is a red paragraph.</p>
The title Attribute
The title attribute defines some extra information about an
element.
The value of the title attribute will be displayed as a tooltip
when you mouse over the element.
Example:
<p title="I'm a tooltip">This is a paragraph.</p>
The <Span> Element:

• The <span> element has no required attributes, but style,

class and id are common.
• When used together with CSS, the <span> element can be
used to style parts of the
text:
Example
<p>My mother has <span style="color:blue;font-
weight:bold">blue</span> eyes and
my father has <span style="color:darkolivegreen;font-
weight:bold">dark
green</span> eyes.</p>

HTML class Attribute:

• The class attribute is often used to point to a class name in
a style sheet. It can also be
used by a JavaScript to access and manipulate elements with
the specific class name.
• EXAMPLE:
• <html><head><style>
.city {
background-color: tomato; color: white; border: 2px solid
black; margin: 20px; padding: 20px;
}
</style></head><body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div></body></html>

HTML id Attribute:
• The HTML id attribute is used to specify a unique id for an
HTML element.
• You cannot have more than one element with the same id
in an HTML document.
• EXAMPLE:
<html><head><style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style></head><body>
<h1 id="myHeader">My Header</h1>
</body>
</html>

HTML Iframes:
• An HTML iframe is used to display a web page within a web
page.
• The HTML <iframe> tag specifies an inline frame.
• <iframe src="url" title="description"></iframe>
• Iframe - Set Height and Width
• <iframe src="demo_iframe.htm" height="200" width="300"
title="Iframe
Example"></iframe>
• Iframe - Remove the Border
• <iframe src="demo_iframe.htm" style="border:none;"
title="Iframe
Example"></iframe>
• Iframe - Target for a Link
• <iframe src="demo_iframe.htm" name="iframe_a"
title="Iframe
Example"></iframe>
HTML File Path:
• File Path Examples

Absolute File Paths

• An absolute file path is the full URL to a file:
• Example
• <img src="https://www.w3schools.com/images/picture.jpg"
alt="Mountain">
Relative File Paths
• A relative file path points to a file relative to the current
page.
• In the following example, the file path points to a file in the
images folder located at the root of the current web:
• Example
• <img src="/images/picture.jpg" alt="Mountain">
HTML - The Head Element
• The HTML <head> element is a container for the following
elements: <title>, <style>, <meta>, <link>, <script>, and
<base>.
• The <head> element is a container for metadata (data
about data) and is placed between the <html> tag and the
<body> tag.
• HTML metadata is data about the HTML document.
Metadata is not displayed.
• Metadata typically define the document title, character set,
styles, scripts, and other meta information.

The HTML <title> Element

• The <title> element defines the title of the document. The
title must be text-only,
and it is shown in the browser's title bar or in the page's tab.
The <title> element:
•defines a title in the browser toolbar
•provides a title for the page when it is added to favourite.
•displays a title for the page in search engine-results.
•<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>

The HTML <style> Element

The <style> element is used to define style information for a
single HTML page:
• Example
• <style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
The HTML <link> Element
The <link> element defines the relationship between the
current document
and an external resource.
The <link> tag is most often used to link to external style
sheets:
EXAMPLE:
<link rel="stylesheet" href="mystyle.css">
• Some characters are reserved in HTML.
• If you use the less than (<) or greater than (>) signs in your
text, the browser might mix them with tags.
• Character entities are used to display reserved characters in
HTML.

HTML ENTITIES:

• A character entity looks like this:

&entity_name;OR
&#entity_number;

Some Useful HTML Character Entitie

Code of HTML

<!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>talk</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link

href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500&family=Poppins
&display=swap" rel="stylesheet">

<link rel="stylesheet" href="styles/index.css">

</head>
<body>
<main>
<header>
<div class="tittle">
<img src="icons/logo.jpg" width="35px">
<h1>talk</h1>
</div>
<button type="button" onclick="show_hide()">
<img src="icons/hamburger.jpg" width="50px">

</button>
</header>
<div class="container">
<div class="users-window">
<div class="users-head">
<h3>people</h3>
<h4>3</h4>

</div>
<div class="users-list">
<p>jarvis</p>
<p>ultron</p>
<p>veronica</p>
</div>
</div>
<div class="chat-window">
<div class="chats">
<div class="user-join">
<p><b>jarvis</b> joined the chat</p>
</div>
<div class="message incoming">
<h5>jarvis</h5>
<p>hello ultron</p>
</div>
<div class="message outgoing">
<h5>veronica</h5>
<p>welcome jarvis</p>
</div>
</div>
<div class="user-input">
<input type="text" placeholder="type your message...">
<button>send</button>
</div>
</div>
</div>
</main>
<script>
var window=document.querryselector('.users-window');
function show_hide(){
if(uwindow.style.display=="block"){
uwindow.style.display="none";
}
else{
uwindow.style.display="block";
}
}
</script>
<script src="/socket.io/socket.io.js"></script>
<script src="/js/client.js"></script>
</body>
</html
CHAPTER 3 CSS
3.1 Center Links & Add borders
A common task for CSS is to center text or images. In fact, there are three kinds of centering:

Centering lines of text

Centering a block of text or an image

Centering a block or an image vertically

In recent implementations of CSS you can also use features from level 3, which allows centering
absolutely positioned elements:

Centering vertically in level 3

Centering vertically and horizontally in level 3

Centering in the viewport in level 3

Centering lines of text

The most common and (therefore) easiest type of centering is that of lines of text in a paragraph or
in a heading. CSS has the property 'text-align' for that:

P { text-align: center }

H2 { text-align: center }

renders each line in a P or in a H2 centered between its margins, like this:

The lines in this paragraph are all centered between the paragraph's margins, thanks to
the value'center' of the CSS property 'text-align'.

Center Links & Add Borders

• ul {

border: 1px solid #555;

li {

text-align: center;

border-bottom: 1px solid #555;

}
3.2 CSS Background Color
The background-color property sets the background color of an element.

The background of an element is the total size of the element, including padding and border (but not
the margin).

Tip: Use a background color and a text color that makes the text easy to read.

• Example:

<!DOCTYPE html>

<html><body>

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper

suscipit lobortis nisl ut aliquip ex ea commodo consequat.

</p>

</body></html>

CSS background-image
he background-image property sets one or more background images for an element.

By default, a background-image is placed at the top-left corner of an element, and repeated both
vertically and horizontally.

Tip: The background of an element is the total size of the element, including padding and border (but
not the margin).

Tip: Always set a background-color to be used if the image is unavailable.

• <!DOCTYPE html>

• <html><head><style>

• body {

• background-image: url("paper.gif");

•}

• </style></head>

• <body>

• <h1>Hello World!</h1>

• <p>This page has an image as the background!</p>

• </body></html>

3.3 CSS Border Color:

The border-color property is used to set the color of the four borders.

The color can be set by:

name - specify a color name, like "red"

HEX - specify a HEX value, like "#ff0000"

RGB - specify a RGB value, like "rgb(255,0,0)"

HSL - specify a HSL value, like "hsl(0, 100%, 50%)"

transparent

Note: If border-color is not set, it inherits the color of the element.

Example

Demonstration of the different border colors:

p.one {

border-style: solid;

border-color: red;

}
p.two {

border-style: solid;

border-color: green;

p.three {

border-style: dotted;

border-color: blue;

• Example:

• p.one {

border-style: solid;

border-color: red;

p.two {

border-style: solid;

border-color: green;

• Example:

• p.one {

border-style: solid;

border-color: red green blue yellow; /* red top, green right, blue bottom and yellow left *

CSS Border Color

• <h1 style="border:2px solid Tomato;">Hello World</h1>

<h1 style="border:2px solid DodgerBlue;">Hello World</h1>

<h1 style="border:2px solid Violet;">Hello World</h1>

CSS Borders Styles:

The border-style property specifies what kind of border to display.

The following values are allowed:

•dotted - Defines a dotted border

•dashed - Defines a dashed border

•solid - Defines a solid border

•double - Defines a double border

•groove - Defines a 3D grooved border. The effect depends on the border-color value

•ridge - Defines a 3D ridged border. The effect depends on the border-color value

•inset - Defines a 3D inset border. The effect depends on the border-color value

•outset - Defines a 3D outset border. The effect depends on the border-color value

•none - Defines no border

•hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border, right

border, bottom border, and the left border)

• <!DOCTYPE html>

• <html><head><style>

• p.dotted {border-style: dotted;}

• p.dashed {border-style: dashed;}

• p.hidden {border-style: hidden;}

• p.mix {border-style: dotted dashed solid double;}

• </style></head>

• <body>

• <p class="dotted">A dotted border.</p>

• <p class="dashed">A dashed border.</p>

• <p class="hidden">A hidden border.</p>

• <p class="mix">A mixed border.</p>

• </body></htmlss

3.4 CSS Font Size

The font-size property sets the size of the text.

Being able to manage the text size is important in web design. However, you should not use font size
adjustments to make paragraphs look like headings, or headings look like paragraphs.

Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.

The font-size value can be an absolute, or relative size.

Absolute size:

Sets the text to a specified size

Does not allow a user to change the text size in all browsers (bad for accessibility reasons)

Absolute size is useful when the physical size of the output is known

Relative size:

Sets the size relative to surrounding elements

Allows a user to change the text size in browsers

Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px
(16px=1em).

Set Font Size With Pixels

Setting the text size with pixels gives you full control over the text size:

Example

h1 {

font-size: 40px;

h2 {

font-size: 30px;

p{

font-size: 14px;

Tip: If you use pixels, you can still use the zoom tool to resize the entire page.

Set Font Size With Em

To allow users to resize the text (in the browser menu), many developers use em instead of pixels.
CSS Font Style

Font Selection is Important

Choosing the right font has a huge impact on how the readers experience a website.

The right font can create a strong identity for your brand.

Using a font that is easy to read is important. The font adds value to your text. It is also important to
choose the correct color and text size for the font.

Generic Font Families

In CSS there are five generic font families:

Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and
elegance.

Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic
look.

Monospace fonts - here all the letters have the same fixed width. They create a mechanical look.

Cursive fonts imitate human handwriting.

Fantasy fonts are decorative/playful fonts.

All the different font names belong to one of the generic font families. S

• This property has three values:

• <style>

• p.normal {

font-style: normal;

p.italic {

font-style: italic;

p.oblique {

font-style: oblique;

• </style>
3.5 CSS Layout - The position Property
position: static;

HTML elements are positioned static by default.

Static positioned elements are not affected by the top, bottom, left, and right properties.

An element with position: static; is not positioned in any special way; it is always positioned
according to the normal flow of the page:

This <div> element has position: static;

Here is the CSS that is used:

Example

div.static {

position: static;

border: 3px solid #73AD21;

position: relative;

An element with position: relative; is positioned relative to its normal position.

Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be
adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by
the element.

This <div> element has position: relative;

Here is the CSS that is used:

Example

div.relative {

position: relative;

left: 30px;

border: 3px solid #73AD21;

}
ADVERTISEMENT

position: fixed;

An element with position: fixed; is positioned relative to the viewport, which means it always stays in
the same place even if the page is scrolled. The top, right, bottom, and left properties are used to
position the element.

A fixed element does not leave a gap in the page where it would normally have been located.

Notice the fixed element in the lower-right corner of the page. Here is the CSS that is used:

Example

div.fixed {

position: fixed;

bottom: 0;

right: 0;

width: 300px;

border: 3px solid #73AD21;

This <div> element has position: fixed;

position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead
of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body,
and moves along with page scrolling.

Note: Absolute positioned elements are removed from the normal flow, and can overlap elements.

CSS Layout - width and max-width

Using width, max-width and margin: auto;

As mentioned in the previous chapter; a block-level element always takes up the full width available
(stretches out to the left and right as far as it can).
Setting the width of a block-level element will prevent it from stretching out to the edges of its
container. Then, you can set the margins to auto, to horizontally center the element within its
container. The element will take up the specified width, and the remaining space will be split equally
between the two margins:

This <div> element has a width of 500px, and margin set to auto.

Note: The problem with the <div> above occurs when the browser window is smaller than the width
of the element. The browser then adds a horizontal scrollbar to the page.

Using max-width instead, in this situation, will improve the browser's handling of small windows. This
is important when making a site usable on small devices:

This <div> element has a max-width of 500px, and margin set to auto.

Tip: Resize the browser window to less than 500px wide, to see the difference between the two divs!

Here is an example of the two divs above:

Example

div.ex1 {

width: 500px;

margin: auto;

border: 3px solid #73AD21;

div.ex2 {

max-width: 500px;

margin: auto;

border: 3px solid #73AD21;

Note: The problem with the <div> above occurs when the browser window is smaller

than the width of the element. The browser then adds a horizontal scrollbar to the
page.

Using max-width instead, in this situation, will improve the browser's handling of

small windows. This is important when making a site usable on small devices:

EXAMPLE:

<body>

<h2>CSS Max-width</h2>

<div class="ex1">This div element width: 500px;</div>

<br>

<div class="ex2">This div element </div>

<p><strong>Tip:</strong> Drag the browser window to

smaller than 500px wide, to see the difference between

the two divs!</p>

</body>

CSS:

<style>

div.ex1 {

width: 500px; margin: auto; border: 3px solid #73AD21;

}

div.ex2 {

max-width: 200px; margin: left; border: 3px solid #73AD21;

</style>
3.6 CSS Links
Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

Example

a{

color: hotpink;

In addition, links can be styled differently depending on what state they are in.

The four links states are:

a:link - a normal, unvisited link

a:visited - a link the user has visited

a:hover - a link when the user mouses over it

a:active - a link the moment it is clicked

Example

/* unvisited link */

a:link {

color: red;

/* visited link */

a:visited {

color: green;

/* mouse over link */

a:hover {

color: hotpink;

/* selected link */
a:active {

color: blue;

When setting the style for several link states, there are some order rules:

a:hover MUST come after a:link and a:visited

a:active MUST come after a:hover

• a:link { color: red; } /* unvisited link */

a:visited { color: green; } /* visited link */

a:hover { color: hotpink; } /* mouse over link */

a:active { color: blue; } /* selected link */

• Link Buttons

• a:link, a:visited {

background-color: #f44336;

color: white;

padding: 14px 25px;

text-align: center;

text-decoration: none;

display: inline-block;

a:hover, a:active {

background-color: red:

3.7 CSS Margins

The CSS margin properties are used to create space around elements, outside of any defined
borders.

With CSS, you have full control over the margins. There are properties for setting the margin for each
side of an element (top, right, bottom, and left).

CSS has properties for specifying the margin for each side of an element:

•margin-top

•margin-right

•margin-bottom

•margin-left

To shorten the code, it is possible to specify all the margin properties in one property.

The margin property is a shorthand property for the following individual margin properties:

•margin-top

•margin-right

•margin-bottom

•margin-left
So, here is how it works:

If the margin property has four values:

•margin: 25px 50px 75px 100px;

•top margin is 25px

•right margin is 50px

•bottom margin is 75px

•left margin is 100px

3.8 CSS Padding

The CSS padding properties are used to generate space around an element's content, inside of any
defined borders.

With CSS, you have full control over the padding. There are properties for setting the padding for
each side of an element (top, right, bottom, and left).

Padding - Individual Sides

CSS has properties for specifying the padding for each side of an element:

padding-top

padding-right

padding-bottom

padding-left

All the padding properties can have the following values:

length - specifies a padding in px, pt, cm, etc.

% - specifies a padding in % of the width of the containing element

inherit - specifies that the padding should be inherited from the parent element

Note: Negative values are not allowed.

• Set different padding for all four sides of a <div> element:

• div {

padding-top: 50px;

padding-right: 30px;
padding-bottom: 50px;

padding-left: 80px;

If the padding property has four values:

•padding: 25px 50px 75px 100px;

•top padding is 25px

•right padding is 50px

•bottom padding is 75px

•left padding is 100px

• div {

padding: 25px 50px 75px 100px;

CSS Setting height

3.9 CSS Setting height and width

The height and width properties are used to set the height and width of an element.

The height and width properties do not include padding, borders, or margins. It sets the
height/width of the area inside the padding, border, and margin of the element.

CSS height and width Values

The height and width properties may have the following values:

auto - This is default. The browser calculates the height and width

length - Defines the height/width in px, cm, etc.

% - Defines the height/width in percent of the containing block

initial - Sets the height/width to its default value

inherit - The height/width will be inherited from its parent value

CSS height and width Examples

This element has a height of 200 pixels and a width of 50%

The height and width properties may have the following values:

•auto - This is default. The browser calculates the height and width

•length - Defines the height/width in px, cm etc.

•% - Defines the height/width in percent of the containing block

•initial - Sets the height/width to its default value

•inherit - The height/width will be inherited from its parent value.

•div {

height: 200px;

width: 50%;

background-color: powderblue;

3.10 CSS Text Color

he color property is used to set the color of the text. The color is specified by:

a color name - like "red"

a HEX value - like "#ff0000"

an RGB value - like "rgb(255,0,0)"

Look at CSS Color Values for a complete list of possible color values.

The default text color for a page is defined in the body selector.

Example

body {

color: blue;

h1 {

color: green;

• Example:

• <h1 style="color:Tomato;">Hello World</h1>

<p style="color:DodgerBlue;">Lorem ipsum...</p>

<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

CSS has a lot of properties for formatting text.

TEXT FORMATTING

This text is styled with some of the text formatting properties. The heading uses the text-align, text-
transform, and color properties. The paragraph is indented, aligned, and the space between
characters is specified. The underline is removed from this colored "Try it Yourself" link.

3.10.1 CSS Text Decoration

The text-decoration property specifies the decoration added to text, and is a shorthand property for:

CSS Syntax

text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-

thickness|initial|inherit;

text-decoration-line (required)

text-decoration-color

text-decoration-style

text-decoration-thickness

• The text-decoration property is used to set or remove decorations from text.

• h2 {

text-decoration: overline;

h3 {

text-decoration: line-through;

h4 {

text-decoration: underline;

• The value text-decoration: none; is often used to remove underlines from links:

•a{

text-decoration: none;

Definition and Usage

The cursor property specifies the mouse cursor to be displayed when pointing over an element.

Example

CSS can generate a bunch of different mouse cursors:

.alias {cursor: alias;}

.all-scroll {cursor: all-scroll;}

.auto {cursor: auto;}

.cell {cursor: cell;}

.col-resize {cursor: col-resize;}

.context-menu {cursor: context-menu;}

.copy {cursor: copy;}

.crosshair {cursor: crosshair;}

.default {cursor: default;}

.e-resize {cursor: e-resize;}

.ew-resize {cursor: ew-resize;}

.grab {cursor: grab;}

.grabbing {cursor: grabbing;}

.help {cursor: help;}

.move {cursor: move;}

.n-resize {cursor: n-resize;}

.ne-resize {cursor: ne-resize;}

.nesw-resize {cursor: nesw-resize;}

.ns-resize {cursor: ns-resize;}

.nw-resize {cursor: nw-resize;}

.nwse-resize {cursor: nwse-resize;}

.no-drop {cursor: no-drop;}

.none {cursor: none;}

.not-allowed {cursor: not-allowed;}

h1 {

color: navy;

margin-left: 20px;

• Each HTML page must include a reference to the external style sheet file

inside the <link> element, inside the head section.

• Example:

• <!DOCTYPE html>
<html>

<head>

<link rel="stylesheet" href="mystyle.css">

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

</body>

</html>

Font Weight
The font-weight property specifies the weight of a font:

p.normal {

font-weight: normal;

p.thick {

font-weight: bold;

Font Variant

The font-variant property specifies whether or not a text should be displayed in a small-caps font.

p.normal {

font-variant: normal;

p.small {

font-variant: small-caps;

Code of CSS
*{
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
main {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 80%;
overflow: hidden;

border-radius: 10px;
}

main header {
background-color: #2791cf;
color: #ffffff;
padding: 7px 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

main header div.tittle {

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}

main header botton {

background-color: transparent;
border: none;
outline: none;
display: none;
}

main div.container {
background-color: #7E878c;
padding: 20px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-webkit-box-align: stretched;
-ms-flex-align: stretched;
align-items: stretched;
}

main div.container div.users-window {

width: 350px;
color: #ffffff;
background-color: #3f3f3f;
padding: 15px 20px;
border-radius: 10px;
margin-right: 20px;
}

main div.container div.users-window div.users-head {

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 15px;
}

main div.container div.users-window div.users-head h4 {

background-color: #7E878c;
padding: 0 8px;

border-radius: 50px;
}

main div.container div.users-window div.users-list p {

font-size: 0.9rem;
letter-spacing: 0.5px;
font-weight: 600;
margin-bottom: 15px;
}

main div.container div.chat-window {

width: 100%;
border-radius: 10px;
background-color: #3f3f3f;
}

main div.container div.chat-window div.chats {

min-height: 65vh;
padding: 20px;
}

main div.container div.chat-window div.chats div.user-join {

font-size: 0.9rem;
color: #3f3f3f;
background-color: #ffffff;
border-radius: 50px;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
padding: 7px 20px;
margin: 0 auto;
margin-bottom: 15px;
}

main div.container div.chat-window div.chats div.message {

color: #3f3f3f;
background-color: #ffffff;
padding: 5px 15px;
max-width: 400px;
margin-bottom: 15px;
border-radius: 10px 50px 50px 10px;
}

main div.container div.chat-window div.chats div.message p {

font-size: 16px;
}

main div.container div.chat-window div.chats div.outgoing {

margin-left: auto;
color: #ffffff;

background-color: #2791cf;
border-radius: 50px 10px 10px 50px;
text-align: right;
}

main div.container div.user-input {

display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;

-ms-flex-direction: row;

flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: stretched;
-ms-flex-align: stretched;
align-items: stretched;
padding: 20px;
}

main div.container div.user-input input {

font-size: 16px;
background-color: #ffffff;
padding: 10px 20px;
outline: none;
border: none;
width: 100%;
border-radius: 50px 0 0 50px;
}

main div.container div.user-input button {

font-size: 16px;
font-weight: 600;
padding: 5px 15px;
border: none;
outline: none;
letter-spacing: 0.5px;
color: #ffffff;
background-color: #2791cf;
border-radius: 0 50px 50px 0;
}

@media screen and (max-width: 900px) {

main {
width: 95%;
}

main header button {

display: block;
}
main div.container {
position: relative;
}
main div.container div.users-window {
position: absolute;
top: 0;
left: 0;
width: 100%;
border-radius: 0 0 10px 10px;

height: -webkit-max-content;
height: -moz-max-content;
height: max-content;

z-index: 11;
-webkit-box-shadow: 0 15px 20px -20px black;
box-shadow: 0 15px 20px -20px black;
padding-bottom: 0;
display: none;
}
main div.container div.chat-window div.chats div.message {
max-width: 300px;
}
}
/*# sourceMappingURL=index.css.map */
CHAPTER 4 JAVA SCRIPT

4.1 JavaScript HTML DOM

Elements
This page teaches you how to find and access HTML elements in an HTML
page.

Finding HTML Elements

Often, with JavaScript, you want to manipulate HTML elements.

To do so, you have to find the elements first. There are several ways to do
this:

• Finding HTML elements by id

• Finding HTML elements by tag name
• Finding HTML elements by class name
• Finding HTML elements by CSS selectors
• Finding HTML elements by HTML object collections

Finding HTML Element by Id

The easiest way to find an HTML element in the DOM, is by using the element
id.
This example finds the element with id="intro":

Example
const element = document.getElementById("intro");

If the element is found, the method will return the element as an object (in
element).

If the element is not found, element will contain null.

Finding HTML Elements by Tag Name

This example finds all <p> elements:

Example
const element = document.getElementsByTagName("p");

This example finds the element with id="main", and then finds all <p> elements
inside "main":

Example
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");

Finding HTML Elements by Class Name

If you want to find all HTML elements with the same class name,
use getElementsByClassName().

This example returns a list of all elements with class="intro".

Example
const x = document.getElementsByClassName("intro");
If you want to find all HTML elements that match a specified CSS selector (id,
class names, types, attributes, values of attributes, etc), use
the querySelectorAll() method.

This example returns a list of all <p> elements with class="intro".

Example
const x = document.querySelectorAll("p.intro");

Finding HTML Elements by HTML Object

Collections
This example finds the form element with id="frm1", in the forms collection,
and displays all element values:

Example
const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

The following HTML objects (and object collections) are also accessible:

• document.anchors
• document.body
• document.documentElement
• document.embeds
• document.forms
• document.head
• document.images
• document.links
• document.scripts
• document.title
Exercise:
Use the getElementById method to find the <p> element, and change its text to
"Hello".

<p id="demo"></p>

<script>
= "Hello";
</script>

4.2 HTML DOM Document

getElementBy
Example
Get the element with the specified id:

document.getElementById("demo");

Get the element and change its color:

const myElement = document.getElementById("demo");

myElement.style.color = "red";

Or just change its color:

document.getElementById("demo").style.color = "red";

Definition and Usage

The getElementById() method returns an element with a specified value.
The getElementById() method returns null if the element does not exist.

The getElementById() method is one of the most common methods in

the HTMLDOM. It is used almost every time you want to read or edit
an HTML
element.

Note
Any id should be unique, but:

If two or more elements with the same id exist, getElementById() returns the
first.

Syntax
document.getElementById(elementID)

Parameters

Parameter Description

id Required.
The id value of an element.

Return Value

Type Description
Object The element with the specified id.
null if the element does not exist.

4.3 HTML DOM Element

classList
Example
Add a "myStyle" class to an element:

const list = element.classList;

list.add("myStyle");

Remove the "myStyle" class from an element:

const list = element.classList;

list.remove("myStyle");

Toggle "myStyle" on and off:

const list = element.classList;

list.toggle("myStyle");

More examples below.

Definition and Usage

The classList property returns the CSS classnames of an element.

The classList property returns a DOMTokenList.

Syntax
element.classList

Return Value

Type Description

Object A DOMTokenList.
A list of the class names of an element.

Note
The classList property is read-only, but you can use the methods listed
below, to add, toggle or remove CSS classes from the list:

classList Properties and Methods

Name Description

add() Adds one or more tokens to the list

contains() Returns true if the list contains a class

entries() Returns an Iterator with key/value pairs from the list

forEach() Executes a callback function for each token in the list

item() Returns the token at a specified index

keys() Returns an Iterator with the keys in the list

length Returns the number of tokens in the list

remove() Removes one or more tokens from the list

replace() Replaces a token in the list

supports() Returns true if a token is one of an attribute's supported tokens

toggle() Toggles between tokens in the list

value Returns the token list as a string

values() Returns an Iterator with the values in the list

More Examples
Add multiple classes to the an element:
element.classList.add("myStyle", "anotherClass", "thirdClass");

Remove multiple classes from an element:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

How many class names the element have:

let numb = element.classList.length;

Get the class names of the "myDIV" element:

<div id="myDIV" class="myStyle anotherClass thirdClass">

<p>I am myDIV.</p>
</div>

const list = document.getElementById("myDIV").classList;

Get the first class of an element:

let className = element.classList.item(0);

Does an an element has a "myStyle" class?

let x = element.classList.contains("myStyle");

Remove "anotherClass" if an element has a "myStyle" class.

if (element.classList.contains("mystyle")) {
element.classList.remove("anotherClass");
}

Toggle between classes to create a dropdown button:

document.getElementById("myBtn").onclick = function() {myFunction()};

function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
Create a sticky navigation bar:

// Get the navbar

const navbar = document.getElementById("navbar");

// Get the offset position of the navbar

const sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll
position
// Remove it when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}

JavaScript Let
The let keyword was introduced in ES6 (2015).

Variables defined with let can not be redeclared.

Variables defined with let must be declared before use.

Variables defined with let have block scope.

Cannot be Redeclared
Variables defined with let can not be redeclared.

You can not accidentally redeclare a variable declared with let.

With let you can not do this:

let x = "John Doe";

let x = 0;
With var you can:

var x = "John Doe";

var x = 0;
Block Scope
Before ES6 (2015), JavaScript had Global Scope and Function Scope.

ES6 introduced two important new JavaScript keywords: let and const.

These two keywords provide Block Scope in JavaScript.

Variables declared inside a { } block cannot be accessed from outside the

block:

Example
{
let x = 2;
}
// x can NOT be used here

Variables declared with the var keyword can NOT have block scope.

Variables declared inside a { } block can be accessed from outside the block.

Example
{
var x = 2;
}
// x CAN be used here

Redeclaring Variables
Redeclaring a variable using the var keyword can impose problems.

Redeclaring a variable inside a block will also redeclare the variable outside
the block:

Example
var x = 10;
// Here x is 10

{
var x = 2;
// Here x is 2
}

// Here x is 2

Redeclaring a variable using the let keyword can solve this problem.

Redeclaring a variable inside a block will not redeclare the variable outside
the block:

Example
let x = 10;
// Here x is 10

{
let x = 2;
// Here x is 2
}

// Here x is 10

Browser Support
The let keyword is not fully supported in Internet Explorer 11 or earlier.

The following table defines the first browser versions with full support for
the let keyword:

Chrome 49 Edge 12 Firefox 44 Safari 11 Opera 36

Mar, 2016 Jul, 2015 Jan, 2015 Sep, 2017 Mar, 2016

Let Hoisting
Variables defined with var are hoisted to the top and can be initialized at any
time.

Meaning: You can use the variable before it is declared:

Example
This is OK:

carName = "Volvo";
var carName;

If you want to learn more about hoisting, study the chapter JavaScript
Hoisting.

Variables defined with let are also hoisted to the top of the block, but not
initialized.

Meaning: Using a let variable before it is declared will result in

a ReferenceError:

Example
carName = "Saab";
let carName = "Volvo";

4.4 How to - JavaScript Progress

Bar

how to create a progress bar using JavaScript.

Creating a Progress Bar

Step 1) Add HTML:
Example
<div id="myProgress">
<div id="myBar"></div>
</div>

Step 2) Add CSS:

Example
#myProgress {
width: 100%;
background-color: grey;
}

#myBar {
width: 1%;
height: 30px;
background-color: green;
}

Step 3) Add JavaScript:

Create a Dynamic Progress Bar (animated) Using JavaScript:

Example
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 1;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval(id);
i = 0;
} else {
width++;
elem.style.width = width + "%";
}
}
}
}
4.5 Add Labels
If you want to add labels to indicate how far the user is in the process, add a
new element inside (or outside) the progress bar:

Step 1) Add HTML:

Example
<div id="myProgress">
<div id="myBar">10%</div>
</div>

Step 2) Add CSS:

Example
#myBar {
width: 10%;
height: 30px;
background-color: #04AA6D;
text-align: center; /* To center it horizontally (if you want) */
line-height: 30px; /* To center it vertically */
color: white;
}

Step 3) Add JavaScript:

If you want to dynamically update the text inside the label to the same value
of the width of the progress bar, add the following:

Example
var i = 0;
function move() {
if (i == 0) {
i = 1;
var elem = document.getElementById("myBar");
var width = 10;
var id = setInterval(frame, 10);
function frame() {
if (width >= 100) {
clearInterval
(id);i = 0;
}
els
e {
wid
th+
+;
elem.style.width = width +
"%";elem.innerHTML = width
+ "%";
}
}
}
}

Code of JS
Client side js code

const socket=io();

var username;
var chats=document.querySelector(".chats");
var users_list=document.querySelector(".users_list");
var users_count=document.querySelector(".users_count");
var msg_send=document.querySelector(".user_send");
var user_msg=document.querySelector(".user_msg");

do{
username=prompt("enter your name:");
}while(username);

socket.emit("new-user-joined",username);

socket.on('user_connected',(socket_name)=>{
userJoinLeft(socket_name,'joined')
});

function userJoinLeft(name,ststus){

let div=document.createElement("div");
div.classList.add('user_join');
let content='<p><b>${name}</b> ${ststus} the chat</p>';
div.innerHTML=content;
chats.appendChild(div);
}
socket.on('user-disconnected',(user)=>{
userJoinLeft(user,'left');
});
socket.on('user-list',(users)=>{
users_list.innerHTML="";
users_arr=Object.values(users);
for(i=o;i<users_arr.length;i++){
let p=document.createElement('p');
p.innerText=users_arr[i];
users_list.appendChild(p);
}
users_count.innerHTML=users_arr.length;
});
/* for sending message */
msg_send.addEventListener('click',()=>{
let data={
user: username,
msg: user_msg.value
};
if(user_msg.value!=''){
appendMessage(data,'outgoing');
socket.emit('message',data);
user_msg.value='';
}
});
function appendMessage(data,status){
let div=document.createElement('div');
div.classList.add('message',status);
let content='
<h5>${data.user}</h5>
<p>${data.msg}</p>
';
div.innerHTML=content;
chats.appendChild(div);
};

Server side js code

const http=require("http");
const express=require("express");

const app=express();

const server=http.createServer(app);
const port=process.env.PORT || 3000;

app.use(express.static(__dirname+'/public'));

app.get('/',(req,res)=>{

res.sendFile(__dirname+'/index.html');
});
/*socket.io setup */

const io=require("socket.io")(server);
var users={};

io.on("connection",(socket)=>{
socket.on("new-user-joined",(username)=>{
users[socket.id]=username;
socket.broadcast.emit('user-connected',username);
io.emit("user-list",users);

});
socket.on("disconnect3ed"()=>{
socket.broadcat.emit('user-disconnected',user=users[socket.id]);
delete users[socket.id];
io.emit("user-list",users);
});
socket.on('message',(data)=>{
socket.broadcast.emit("message",{user: data.user,msg: data.msg})
});
});
CHAPTER 5: NODE JS
5.1 NODEMON:
nodemon is a tool that helps develop Node.js based applications
by automatically restarting the node application when file changes
in the directory are detected.
nodemon does not require any additional changes to your code or
method of development. nodemon is a replacement wrapper
for node. To use nodemon, replace the word node on the
command line when executing your script.

Installation
Either through cloning with git or by using npm (the recommended way):
npm install -g nodemon # or using yarn: yarn global add nodemon

And nodemon will be installed globally to your system path.

You can also install nodemon as a development dependency:

npm install --save-dev nodemon # or using yarn: yarn add nodemon -D

With a local installation, nodemon will not be available in your system path or you can't
use it directly from the command line. Instead, the local installation of nodemon can be
run by calling it from within an npm script (such as npm start) or using npx nodemon.

Usage
nodemon wraps your application, so you can pass all the arguments you would normally
pass to your app:
nodemon [your node app]
For CLI options, use the -h (or --help) argument:
nodemon -h

Using nodemon is simple, if my application accepted a host and port as the arguments, I
would start it as so:
nodemon ./server.js localhost 8080

Any output from this script is prefixed with [nodemon], otherwise all output from your
application, errors included, will be echoed out as expected.

You can also pass the inspect flag to node through the command line as you would
normally:
nodemon --inspect ./server.js 80

If you have a package.json file for your app, you can omit the main script entirely and
nodemon will read the package.json for the main property and use that value as the app
(ref).

nodemon will also search for the scripts.start property in package.json (as of nodemon
1.1.x).

Also check out the FAQ or issues for nodemon.

Automatic re-running
nodemon was originally written to restart hanging processes such as web servers, but
now supports apps that cleanly exit. If your script exits cleanly, nodemon will continue to
monitor the directory (or directories) and restart the script if there are any changes.

Manual restarting
Whilst nodemon is running, if you need to manually restart your application, instead of
stopping and restart nodemon, you can type rs with a carriage return, and nodemon will
restart your process.

Config files
nodemon supports local and global configuration files. These are usually
named nodemon.json and can be located in the current working directory or in your home
directory. An alternative local configuration file can be specified with the --config
<file> option.

The specificity is as follows, so that a command line argument will always override the
config file settings:

• command line arguments

• local config
• global config
A config file can take any of the command line arguments as JSON key values, for
example:
{

"verbose": true,

"ignore": ["*.test.js", "**/fixtures/**"],

"execMap": {

"rb": "ruby",

"pde": "processing --sketch={{pwd}} --run"

The above nodemon.json file might be my global config so that I have support for ruby files
and processing files, and I can run nodemon demo.pde and nodemon will automatically
know how to run the script even though out of the box support for processing scripts.

A further example of options can be seen in sample-nodemon.md

package.json
If you want to keep all your package configurations in one place, nodemon supports
using package.json for configuration. Specify the config in the same format as you would
for a config file but under nodemonConfig in the package.json file, for example, take the
following package.json:
{

"name": "nodemon",

"homepage": "http://nodemon.io",
"...": "... other standard package.json values",

"nodemonConfig": {

"ignore": ["**/test/**", "**/docs/**"],

"delay": 2500

Note that if you specify a --config file or provide a

local nodemon.json any package.json config is ignored.

This section needs better documentation, but for now you can also see nodemon --help
config (also here).

Using nodemon as a module

Please see doc/requireable.md

Using nodemon as child process

Please see doc/events.md

Running non-node scripts

nodemon can also be used to execute and monitor other programs. nodemon will read
the file extension of the script being run and monitor that extension instead of .js if
there's no nodemon.json:
nodemon --exec "python -v" ./app.py

Now nodemon will run app.py with python in verbose mode (note that if you're not
passing args to the exec program, you don't need the quotes), and look for new or
modified files with the .py extension.

Default executables
Using the nodemon.json config file, you can define your own default executables using
the execMap property. This is particularly useful if you're working with a language that isn't
supported by default by nodemon.
To add support for nodemon to know about the .pl extension (for Perl),
the nodemon.json file would add:
{

"execMap": {

"pl": "perl"

Now running the following, nodemon will know to use perl as the executable:
nodemon script.pl

It's generally recommended to use the global nodemon.json to add your

own execMap options. However, if there's a common default that's missing, this can be
merged in to the project so that nodemon supports it by default, by
changing default.js and sending a pull request.

Monitoring multiple directories

By default nodemon monitors the current working directory. If you want to take control
of that option, use the --watch option to add specific paths:
nodemon --watch app --watch libs app/server.js

Now nodemon will only restart if there are changes in the ./app or ./libs directory. By
default nodemon will traverse sub-directories, so there's no need in explicitly including
sub-directories.

Nodemon also supports unix globbing, e.g --watch './lib/*'. The globbing pattern must
be quoted.

Specifying extension watch list

By default, nodemon looks for files with the .js, .mjs, .coffee, .litcoffee,
and .json extensions. If you use the --exec option and monitor app.py nodemon will
monitor files with the extension of .py. However, you can specify your own list with the -
e (or --ext) switch like so:

nodemon -e js,pug
Now nodemon will restart on any changes to files in the directory (or subdirectories) with
the extensions .js, .pug.

Ignoring files
By default, nodemon will only restart when a .js JavaScript file changes. In some cases
you will want to ignore some specific files, directories or file patterns, to prevent
nodemon from prematurely restarting your application.

This can be done via the command line:

nodemon --ignore lib/ --ignore tests/

Or specific files can be ignored:

nodemon --ignore lib/app.js

Patterns can also be ignored (but be sure to quote the arguments):

nodemon --ignore 'lib/*.js'

Important the ignore rules are patterns matched to the full absolute path, and this
determines how many files are monitored. If using a wild card glob pattern, it needs to be
used as ** or omitted entirely. For example, nodemon --ignore '**/test/**' will work,
whereas --ignore '*/test/*' will not.

Note that by default, nodemon will ignore

the .git, node_modules, bower_components, .nyc_output, coverage and .sass-cache directories
and add your ignored patterns to the list. If you want to indeed watch a directory
like node_modules, you need to override the underlying default ignore rules.

Application isn't restarting

In some networked environments (such as a container running nodemon reading across a
mounted drive), you will need to use the legacyWatch: true which enables Chokidar's
polling.

Via the CLI, use either --legacy-watch or -L for short:

nodemon -L

Though this should be a last resort as it will poll every file it can find.
Delaying restarting
In some situations, you may want to wait until a number of files have changed. The
timeout before checking for new file changes is 1 second. If you're uploading a number of
files and it's taking some number of seconds, this could cause your app to restart
multiple times unnecessarily.

To add an extra throttle, or delay restarting, use the --delay command:

nodemon --delay 10 server.js

For more precision, milliseconds can be specified. Either as a float:

nodemon --delay 2.5 server.js

Or using the time specifier (ms):

nodemon --delay 2500ms server.js

The delay figure is number of seconds (or milliseconds, if specified) to delay before
restarting. So nodemon will only restart your app the given number of seconds after
the last file change.

If you are setting this value in nodemon.json, the value will always be interpreted in
milliseconds. E.g., the following are equivalent:
nodemon --delay 2.5

"delay": 2500

Gracefully reloading down your script

It is possible to have nodemon send any signal that you specify to your application.
nodemon --signal SIGHUP server.js

Your application can handle the signal as follows.

process.once("SIGHUP", function () {

reloadSomeConfiguration();
})

Please note that nodemon will send this signal to every process in the process tree.

If you are using cluster, then each workers (as well as the master) will receive the signal.
If you wish to terminate all workers on receiving a SIGHUP, a common pattern is to catch
the SIGHUP in the master, and forward SIGTERM to all workers, while ensuring that all
workers ignore SIGHUP.
if (cluster.isMaster) {

process.on("SIGHUP", function () {

for (const worker of Object.values(cluster.workers)) {

worker.process.kill("SIGTERM");

});

} else {

process.on("SIGHUP", function() {})

Controlling shutdown of your script

nodemon sends a kill signal to your application when it sees a file update. If you need to
clean up on shutdown inside your script you can capture the kill signal and handle it
yourself.

The following example will listen once for the SIGUSR2 signal (used by nodemon to
restart), run the clean up process and then kill itself for nodemon to continue control:
process.once('SIGUSR2', function () {

gracefulShutdown(function () {

process.kill(process.pid, 'SIGUSR2');

});

});
Note that the process.kill is only called once your shutdown jobs are complete. Hat tip
to Benjie Gillam for writing this technique up.

Triggering events when nodemon state

changes
If you want growl like notifications when nodemon restarts or to trigger an action when
an event happens, then you can either require nodemon or add event actions to
your nodemon.json file.

For example, to trigger a notification on a Mac when nodemon

restarts, nodemon.json looks like this:
{

"events": {

"restart": "osascript -e 'display notification \"app restarted\"

with title \"nodemon\"'"

A full list of available events is listed on the event states wiki. Note that you can bind to
both states and messages.

Pipe output to somewhere else

nodemon({

script: ...,

stdout: false // important: this tells nodemon not to output to

console

}).on('readable', function() { // the `readable` event indicates that

data is ready to pick up

this.stdout.pipe(fs.createWriteStream('output.txt'));

this.stderr.pipe(fs.createWriteStream('err.txt'));

});
5.2 SOCKET.IO
Sockets.IO :
Earlier, websites used to reload every-time a resource was requested. This
introduced unnecessary delays which increased average wait time. Often users
had to wait for minutes to fetch a particular page or file. Real-time
applications(Instant messenger, Online gaming, push notification etc), on the
other hand, are those applications which run within a given time-slot such that
user is presented with immediate and up-to-date copy of the resource. Latency
in these applications is kept as low as possible to give smooth and consistent
user experience. Socket.IO is one such JavaScript library that programmers use
in developing real-time “Web Applications”.

Installing:
Required for Installation of Sockets.IO
• Node Installed
• npm (node package manager) installed
As mentioned earlier, there are two different libraries to include in a project.
• Server:
To install it in the Node.js project, run the following command,
$ npm install --save socket.io
• JavaScript Client:
A standalone build of the client is exposed by default by the server
at /socket.io/socket.io.js. Otherwise, it can also be served from any of the
CDN providers.
To use it from Node.js, install it via this command,
$ npm install --save socket.io-client
OUTPUT: