EXPOSYS DATA LABS

A TRAINING REPORT

SUBMITTED IN PARTIAL FULFILLMENT OF THE REQUIREMENTS FOR THE AWARD OF

THE DEGREE OF

BACHELOR OF TECHNOLOGY

Computer Engineering

SUBMITTED TO
Dr. Jyoti Chaudhary

MAHARSHI DAYANAND UNIVERSITY, ROHTAK

SUBMITTED BY

Name of Student Roll No.

Vanshika Kakkar 20CE027
22-07-23 to 21-08-23

THE TECHNOLOGICAL INSTITUTE OF TEXTILE & SCIENCES, BHIWANI

HARYANA
 EXPOSYS DATA LABS
A TRAINING REPORT

SUBMITTED IN PARTIAL FULFILLMENT OF THE REQUIREMENTS FOR THE AWARD OF

THE DEGREE OF

BACHELOR OF TECHNOLOGY

Computer Engineering

SUBMITTED TO
Dr. Jyoti Chaudhary

MAHARSHI DAYANAND UNIVERSITY, ROHTAK

SUBMITTED BY

Name of Student Roll No.

Vanshika Kakkar 20CE027
22-07-23 to 21-08-23

THE TECHNOLOGICAL INSTITUTE OF TEXTILE & SCIENCES, BHIWANI

HARYANA
 ACKNOWLEDGEMENT

I would like to place on record my deep sense of gratitude to Mr. Y Vishnuvardhan , the Founder and
Chief Director at Exposys Data Labs, for his generous guidance, help and useful suggestions.

I am extremely thankful to Dr. Jyoti Chaudhary, HOD, Computer Engineering Department, The
Technological Institute of Textile & Sciences, Bhiwani for valuable suggestions and encouragement.

I am also thankful to Dr. Akhil Kaushik & Mr. Sanjay Sharma, Training and Placement Officer at,
The Technological Institute of Textile & Sciences, Bhiwani for providing the opportunity to get the
knowledge.

Signature of Student

Vanshika Kakkar (20CE27)

 CERTIFICATE

I hereby certify that I have completed the Four weeks Training in partial fulfillment of the requirements
for the award of Bachelor of Technology in Computer Engineering. I did my training as a Web
Development and Designing Intern at Exposys Data Labs from 22-07-23 to 21-08-23.

The matter presented in this Report has not been submitted by me for the award of any other degree
elsewhere.

Signature of Student

Vanshika Kakkar (20CE027)

Signatures

HOD

Dr. Jyoti Chaudhary

Department of Computer Engineering

 About

Exposys Data Labs is one among the forerunners who launched the new generation of Digital
Learning platform in India. We strategies technology-enhanced educational instructional practice by
grooming Aspirants domain skills with cutting edge technologies and processes to help them become
industry ready Technocrats and Business Managers.

Exposys Data Labs is one among the forerunners who launched the new generation of Digital
Learning platform in India.

Exposys Data Labs is a world leader in Robotics, Universe Intelligence (UI), Artificial Intelligence
(AI) research and its applications that directly impact Planet Earth and human life.

MISSION
Exposys Data Labs is not about only humans our mission is to build technology for all beings on
mother earth and our focus is to make sure all our technology is harmless to our mother earth in all
possible ways.

The primary objectives of this project were:

 Develop a user-friendly online chat application.

 Enable real-time messaging and multimedia sharing.
 Implement robust security measures to protect user data.
 Ensure cross-platform compatibility.

Founders

Mr. Y Vishnuvardhan is the Founder of Internshala.

They have done their studies in B.Tech from Quantum University. Have more than 5+ years
of experience in guiding and teaching the students and professionals who want to make their
career in cyber security, web development and more. Till now more than 7500+ students have
done their training with their company. They have taken more than 92 free webinars and
sessions in schools and colleges.
They provide The Greatest Platform Of Cybersecurity And Development Stuffs For Learning
And Your Business, Please Visit their website. If You Need To Contact For Any Query, Go
To contact page For More Information. There are many courses and field of internship training
provide by Slytherin

Cyber Security Course.

Web Development Course.

Programming Courses.

We deliver awareness programs in cyber security and aware people about cyber crime. We
have covered different platforms to aware people and teach them to prevent online frauds.

Web Development Service.

IT Security Service.

Awareness Programs.
 Abstract

The key to having successful and fully functional web applications is in their communication
with the user. It is of no surprise that human/machine interaction is a popular topic of research
and development, as is the goal of my training as a web developer and designer at Exposys
Data Labs, where I had the honor to spend my first training period.

A solution has been proposed for the internationalization and customization of web
applications in general. Taking into account web standards and the front-end architecture of
web development, a method for providing a multi-language web interface has been planned
from scratch and explained in detail in this report.
 Table of Contents

Title Page No.

i. Acknowledgement 3

ii. Certificate 4

iii. Abstract 8

1. Introduction 9

1.1 Intro web Development

1.2.HTML 12

1.3.CSS 16

1.4.JavaScript 20

2. Project Work 20

2.1 Code & Implementation

3. Results 69

4. References 70
1. Introduction

A web developer is at heart an interactive artist. They’re someone driven by a deep desire to create
things. A web developer’s canvas is a user’s web browser.

Much like how a curious child takes pleasure in making toys by joining LEGO blocks—and then
experiences a similar joy in taking things apart to see how they’re made, a web developer’s job is to
use the basic building blocks of the web (like HTML, CSS and JavaScript) to create something
complex like a webpage. Don’t sweat it! We’ll get into all of those terms soon.

It is also the web developer’s job to diagnose problems in a website’s functionality, to understand
how something works by reading the code behind it, and to make changes to fix any issues. That
essentially makes web developers the physicians of the world wide web. When we talk about the
world wide web, we’re mainly referring to websites and web applications. At this point, the curious
aspiring developer in you might be wondering, “What’s the difference between the two?”

Well, we’re glad you asked! A website is usually a simple page or a group of pages (the popular web
comic site, xkcd, for example). However, modern websites are much more than that. Take Google
Docs, for example. It has a nice interface that, once opened, looks very much like a desktop software
like Microsoft Office. Such complex websites are often termed web applications. A web developer
today is expected to know how to create and work with web applications. Having said that, most
people use the terms interchangeably, so don’t get too hung up on the terminology!

Types of web developers

There are different types of web developers who focus on different areas. These include:

● Frontend developers: Frontend developers implement web page designs using HTML and
CSS. They make sure the website looks pretty on different devices, and that the forms and
buttons work.
● Backend developers: Backend developers create the backbone of the web application. They
write code logic that handles a user’s input (for example, what should happen when you click
the signup button after filling in a form).
● Full stack developers: Full stack developers do bits of both backend and frontend. Depending
on the problem at hand, they can switch cape 🦸‍♀️🦸‍♂️and move stacks.

Frontend Development

The part of a website that the user interacts directly is termed as front end. It is also referred to as the
‘client side’ of the application.
 ● Frontend Roadmap:

● HTML: HTML stands for HyperText Markup Language. It is used to design the front end
portion of web pages using markup language. It acts as a skeleton for a website since it is used
to make the structure of a website.
● CSS: Cascading Style Sheets fondly referred to as CSS is a simply designed language intended
to simplify the process of making web pages presentable. It is used to style our website.
● JavaScript: JavaScript is a scripting language used to provide a dynamic behavior to our
website.

Frontend Frameworks and Libraries:

● AngularJS
● React.js
● VueJS
● jQuery
● Bootstrap
● Material UI
● Tailwind CSS
● jQuery UI
● Some other libraries and frameworks are: Handlebar.js Backbone.js, Ember.js etc.

Backend Development

Backend is the server side of a website. It is the part of the website that users cannot see and interact.
It is the portion of software that does not come in direct contact with the users. It is used to store and
arrange data.
 ● Backend Roadmap:

● PHP: PHP is a server-side scripting language designed specifically for web development.
● Java: Java is one of the most popular and widely used programming language. It is highly
scalable.
● Python: Python is a programming language that lets you work quickly and integrate systems
more efficiently.
● Node.js: Node.js is an open source and cross-platform runtime environment for executing
JavaScript code outside a browser.
● Back End Frameworks: The list of back end frameworks
are: Express, Django, Rails, Laravel, Spring, etc.

2. What are the skills required to become a web developer?

What does it take to become a web developer? Essentially, just three things: HTML, CSS and
JavaScript—the three pillars of the web, which we’ll be learning about over the next few days.
Together, these three pillars make every website work, defining the content to be displayed (HTML),
telling a browser how to display that content (CSS), and making the content interactive (JavaScript),
respectively.

A web developer is well versed in these three technologies. They can read other people’s code and
make changes to it. They can find and debug bugs (shortcomings in existing code). A web developer
might, at times, work on a new project (a new website) from scratch, or may have to work on an
existing website and make it better. A typical day in the life of a web developer involves fixing bugs,
developing new features (that is, enhancements) and webpages, and working with other developers to
discuss ways to solve problems.

1.2 HTML
HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of HTML. Our HTML
tutorial is developed for beginners and professionals. In our tutorial, every topic is given step-by-step
so that you can learn it in a very easy way. If you are new in learning HTML, then you can learn
HTML from basic to a professional level and after learning HTML with CSS and JavaScript you will
be able to create your own interactive and dynamic website
The major points of HTML are given below:
o HTML stands for HyperText Markup Language.
o HTML is used to create web pages and web applications.
o HTML is a widely used language on the web.
o We can create a static website by HTML only.
o Technically, HTML is a Markup language rather than a programming language.

HTML Example with HTML Editor

In this tutorial, you will get a lot of HTML examples, at least one example for each topic
with explanation. You can also edit and run these examples, with our online HTML editor.
Learning HTML is fun, and it's very easy to learn.
What is HTML
HTML is an acronym which stands for Hyper Text Markup Language which is used for creating
web pages and web applications. Let's see what is meant by Hypertext Markup Language, and Web
page.
Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a hypertext.
Whenever you click on a link which brings you to a new webpage, you have clicked on a hypertext.
HyperText is a way to link two or more web pages (HTML documents) with each other.
Markup language: A markup language is a computer language that is used to apply layout and
formatting conventions to a text document. Markup language makes text more interactive and
dynamic. It can turn text into images, tables, links, etc.
Web Page: A web page is a document which is commonly written in HTML and translated by a web
browser. A web page can be identified by entering an URL. A Web page can be of the static or
dynamic type. With the help of HTML only, we can create static web pages.
Hence, HTML is a markup language which is used for creating attractive web pages with the help of
styling, and which looks in a nice format on a web browser. An HTML document is made of many
HTML tags and each HTML tag contains different content.
Let's see a simple example of HTML.
<!DOCTYPE>
<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>

Features of HTML
1) It is a very easy and simple language. It can be easily understood and modified.
2) It is very easy to make an effective presentation with HTML because it has a lot of formatting
tags.
3) It is a markup language, so it provides a flexible way to design web pages along with the text.
4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it enhances the
interest of browsing of the user.
5) It is platform-independent because it can be displayed on any platform like Windows, Linux, and
Macintosh, etc.
6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which makes
it more attractive and interactive.
7) HTML is a case-insensitive language, which means we can use tags either in lower-case or upper-
case.
1.3 CSS

CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look
and formatting of a document written in markup language. It provides an additional feature to HTML.
It is generally used with HTML to change the style of web pages and user interfaces. It can also be
used with any kind of XML documents including plain XML, SVG and XUL.
CSS is used along with HTML and JavaScript in most websites to create user interfaces for web
applications and user interfaces for many mobile applications.
What does CSS do
o You can add new looks to your old HTML documents.
o You can completely change the look of your website with only a few changes in CSS code.

Why use CSS

These are the three major benefits of CSS:
1) Solves a big problem
Before CSS, tags like font, color, background style, element alignments, border and size had to be
repeated on every web page. This was a very long process. For example: If you are developing a large
website where fonts and color information are added on every single page, it will be become a long
and expensive process. CSS was created to solve this problem. It was a W3C recommendation.
2) Saves a lot of time
CSS style definitions are saved in external CSS files so it is possible to change the entire website by
changing just one file.
3) Provide more attributes
CSS provides more detailed attributes than plain HTML to define the look and feel of the website.
CSS Syntax
A CSS rule set contains a selector and a declaration block.
Selector: Selector indicates the HTML element you want to style. It could be any tag like <h1>,
<title> etc.
Declaration Block: The declaration block can contain one or more declarations separated by a
semicolon. For the above example, there are two declarations:
1. color: yellow;
2. font-size: 11 px;

Each declaration contains a property name and value, separated by a colon.

Property: A Property is a type of attribute of HTML element. It could be color, border etc.
Value: Values are assigned to CSS properties. In the above example, value "yellow" is assigned to
color property
Selector{Property1: value1; Property2: value2; ..........;}
CSS Selector
CSS selectors are used to select the content you want to style. Selectors are the part of CSS rule set.
CSS selectors select HTML elements according to its id, class, type, attribute etc.
There are several different types of selectors in CSS.
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector
1) CSS Element Selector
The element selector selects the HTML element by name.

2) CSS Id Selector

The id selector selects the id attribute of an HTML element to select a specific element. An id is
always unique within the page so it is chosen to select a single, unique element.

3) CSS Class Selector

The class selector selects HTML elements with a specific class attribute. It is used with a period
character . (full stop symbol) followed by the class name.
CSS Class Selector for specific element
If you want to specify that only one specific HTML element should be affected then you should use
the element name with class selector.
4) CSS Universal Selector
The universal selector is used as a wildcard character. It selects all the elements on the pages.
5) CSS Group Selector
The grouping selector is used to select all the elements with the same style definitions.
Grouping selector is used to minimize the code. Commas are used to separate each selector in
grouping.
Advantages of CSS:
● CSS plays an important role, by using CSS you simply got to specify a repeated style for
element once & use it multiple times as because CSS will automatically apply the required
styles.
● The main advantage of CSS is that style is applied consistently across variety of sites. One
instruction can control several areas which is advantageous.
● Web designers needs to use few lines of programming for every page improving site speed.
● Cascading sheet not only simplifies website development, but also simplifies the maintenance as
a change of one line of code affects the whole web site and maintenance time.
● It is less complex therefore the effort are significantly reduced.
● It helps to form spontaneous and consistent changes.
● CSS changes are device friendly. With people employing a batch of various range of smart
devices to access websites over the web, there’s a requirement for responsive web design.
● It has the power for re-positioning. It helps us to determine the changes within the position of
web elements who are there on the page.
● These bandwidth savings are substantial figures of insignificant tags that are indistinct from a
mess of pages.
● Easy for the user to customize the online page
● It reduces the file transfer size.

Disadvantages of CSS:
● CSS, CSS 1 up to CSS3, result in creating of confusion among web browsers.
 ● With CSS, what works with one browser might not always work with another. The web
developers need to test for compatibility, running the program across multiple browsers.
● There exists a scarcity of security.
● After making the changes we need to confirm the compatibility if they appear. The similar
change affects on all the browsers.
● The programing language world is complicated for non-developers and beginners. Different
levels of CSS i.e. CSS, CSS 2, CSS 3 are often quite confusing.
● Browser compatibility (some styles sheet are supported and some are not).
● CSS works differently on different browsers. IE and Opera supports CSS as different logic.
● There might be cross-browser issues while using CSS.
● There are multiple levels which creates confusion for non-developers and beginners.

1.4 JavaScript
JavaScript is a lightweight, interpreted programming language. It is designed for creating network-
centric applications. It is complimentary to and integrated with Java. JavaScript is very easy to
implement because it is integrated with HTML. It is open and cross-platform.

Why to Learn Javascript

Javascript is a MUST for students and working professionals to become a great Software Engineer
specially when they are working in Web Development Domain. I will list down some of the key
advantages of learning Javascript:
● Javascript is the most popular programming language in the world and that makes it a
programmer’s great choice. Once you learnt Javascript, it helps you developing great front-
end as well as back-end softwares using different Javascript based frameworks like jQuery,
Node.JS etc.
● Javascript is everywhere, it comes installed on every modern web browser and so to learn
Javascript you really do not need any special environment setup. For example Chrome,
Mozilla Firefox , Safari and every browser you know as of today, supports Javascript.
● Javascript helps you create really beautiful and crazy fast websites. You can develop your
website with a console like look and feel and give your users the best Graphical User
Experience.
● JavaScript usage has now extended to mobile app development, desktop app development,
and game development. This opens many opportunities for you as Javascript Programmer.
● Due to high demand, there is tons of job growth and high pay for those who know
JavaScript. You can navigate over to different job sites to see what having JavaScript skills
looks like in the job market.
● Great thing about Javascript is that you will find tons of frameworks and Libraries already
developed which can be used directly in your software development to reduce your time to
market.
There could be 1000s of good reasons to learn Javascript Programming. But one thing for sure, to
learn any programming language, not only Javascript, you just need to code, and code and finally
code until you become expert.
There are many useful Javascript frameworks and libraries available:
● Angular
● React
● jQuery
● Vue.js
● Ext.js
● Ember.js
● Meteor
● Mithril
● Node.js
● Polymer
● Aurelia
● Backbone.js
It is really impossible to give a complete list of all the available Javascript frameworks and libraries.
The Javascript world is just too large and too much new is happening.
Applications of Javascript Programming
As mentioned before, Javascript is one of the most widely used programming languages (Front-end as
well as Back-end). It has it's presence in almost every area of software development. I'm going to list
few of them here:
● Client side validation - This is really important to verify any user input before submitting
it to the server and Javascript plays an important role in validting those inputs at front-end
itself.
● Manipulating HTML Pages - Javascript helps in manipulating HTML page on the fly.
This helps in adding and deleting any HTML tag very easily using javascript and modify
your HTML to change its look and feel based on different devices and requirements.
● User Notifications - You can use Javascript to raise dynamic pop-ups on the webpages to
give different types of notifications to your website visitors.
● Back-end Data Loading - Javascript provides Ajax library which helps in loading back-
end data while you are doing some other processing. This really gives an amazing
experience to your website visitors.
● Presentations - JavaScript also provides the facility of creating presentations which gives
website look and feel. JavaScript provides RevealJS and BespokeJS libraries to build a
web-based slide presentations.
● Server Applications - Node JS is built on Chrome's Javascript runtime for building fast
and scalable network applications. This is an event based library which helps in
developing very sophisticated server applications including Web Servers.
This list goes on, there are various areas where millions of software developers are happily using
Javascript to develop great websites and others softwares.
Audience
This tutorial has been prepared for JavaScript beginners to help them understand the basic
functionality of JavaScript to build dynamic web pages and web applications.
Prerequisites
For this Javascript tutorial, it is assumed that the reader have a prior knowledge of HTML coding. It
would help if the reader had some prior exposure to object-oriented programming concepts and a
general idea on creating online applications.

What is JavaScript ?
JavaScript is a dynamic computer programming language. It is lightweight and most commonly used
as a part of web pages, whose implementations allow client-side script to interact with the user and
make dynamic pages. It is an interpreted programming language with object-oriented capabilities.
JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly
because of the excitement being generated by Java. JavaScript made its first appearance in Netscape
2.0 in 1995 with the name LiveScript. The general-purpose core of the language has been embedded
in Netscape, Internet Explorer, and other web browsers.
The ECMA-262 Specification defined a standard version of the core JavaScript language.
● JavaScript is a lightweight, interpreted programming language.
● Designed for creating network-centric applications.
● Complementary to and integrated with Java.
● Complementary to and integrated with HTML.
● Open and cross-platform

Client-Side JavaScript
Client-side JavaScript is the most common form of the language. The script should be included in or
referenced by an HTML document for the code to be interpreted by the browser.
It means that a web page need not be a static HTML, but can include programs that interact with the
user, control the browser, and dynamically create HTML content.
The JavaScript client-side mechanism provides many advantages over traditional CGI server-side
scripts. For example, you might use JavaScript to check if the user has entered a valid e-mail address
in a form field.
The JavaScript code is executed when the user submits the form, and only if all the entries are valid,
they would be submitted to the Web Server.
JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and other
actions that the user initiates explicitly or implicitly.
Advantages of JavaScript
The merits of using JavaScript are −
● Less server interaction − You can validate user input before sending the
page off to the server. This saves server traffic, which means less load
on your server.
 ● Immediate feedback to the visitors − They don't have to wait for a page
reload to see if they have forgotten to enter something.
● Increased interactivity − You can create interfaces that react when the
user hovers over them with a mouse or activates them via the keyboard.
● Richer interfaces − You can use JavaScript to include such items as drag-
and-drop components and sliders to give a Rich Interface to your site
visitors.

Limitations of JavaScript
We cannot treat JavaScript as a full-fledged programming language. It lacks the
following important features −
● Client-side JavaScript does not allow the reading or writing of files. This has been kept for
security reason.
● JavaScript cannot be used for networking applications because there is no such support
available.
● JavaScript doesn't have any multi-threading or multiprocessor capabilities.
Once again, JavaScript is a lightweight, interpreted programming language that allows you to build
interactivity into otherwise static HTML pages.
JavaScript Development Tools
One of major strengths of JavaScript is that it does not require expensive development tools. You can
start with a simple text editor such as Notepad. Since it is an interpreted language inside the context
of a web browser, you don't even need to buy a compiler.
To make our life simpler, various vendors have come up with very nice
JavaScript editing tools. Some of them are listed here −
● Microsoft FrontPage − Microsoft has developed a popular HTML editor
called FrontPage. FrontPage also provides web developers with a
number of JavaScript tools to assist in the creation of interactive
websites.
● Macromedia Dreamweaver MX − Macromedia Dreamweaver MX is a very
popular HTML and JavaScript editor in the professional web development
crowd. It provides several handy prebuilt JavaScript components,
integrates well with databases, and conforms to new standards such as
XHTML and XML.
● Macromedia HomeSite 5 − HomeSite 5 is a well-liked HTML and
JavaScript editor from Macromedia that can be used to manage personal
websites effectively.

Where is JavaScript Today ?

The ECMAScript Edition 5 standard will be the first update to be released in over four years.
JavaScript 2.0 conforms to Edition 5 of the ECMAScript standard, and the difference between the
two is extremely minor.
The specification for JavaScript 2.0 can be found on the following site: http://www.ecmascript.org/
Today, Netscape's JavaScript and Microsoft's JScript conform to the ECMAScript standard, although
both the languages still support the features that are not a part of the standard.
JavaScript can be implemented using JavaScript statements that are placed within the <script>...
</script> HTML tags in a web page.
You can place the <script> tags, containing your JavaScript, anywhere within your web page, but it is
normally recommended that you should keep it within the <head> tags.
The <script> tag alerts the browser program to start interpreting all the text between these tags as a
script. A simple syntax of your JavaScript will appear as follows.
<script ...>
JavaScript code
</script>
The script tag takes two important attributes −
● Language − This attribute specifies what scripting language you are
using. Typically, its value will be javascript. Although recent versions of
HTML (and XHTML, its successor) have phased out the use of this
attribute.
● Type − This attribute is what is now recommended to indicate the
scripting language in use and its value should be set to
"text/javascript".

Your First JavaScript Code

Let us take a sample example to print out "Hello World". We added an optional HTML comment that
surrounds our JavaScript code. This is to save our code from a browser that does not support
JavaScript. The comment ends with a "//-->". Here "//" signifies a comment in JavaScript, so we add
that to prevent a browser from reading the end of the HTML comment as a piece of JavaScript code.
Next, we call a function document.write which writes a string into our HTML document.
This function can be used to write text, HTML, or both. Take a look at the following code.
Whitespace and Line Breaks
JavaScript ignores spaces, tabs, and newlines that appear in JavaScript programs. You can use spaces,
tabs, and newlines freely in your program and you are free to format and indent your programs in a
neat and consistent way that makes the code easy to read and understand.
Semicolons are Optional
Simple statements in JavaScript are generally followed by a semicolon character, just as they are in
C, C++, and Java. JavaScript, however, allows you to omit this semicolon if each of your statements
are placed on a separate line. For example, the following code could be written without semicolons.
Case Sensitivity
JavaScript is a case-sensitive language. This means that the language keywords, variables, function
names, and any other identifiers must always be typed with a consistent capitalization of letters.
So the identifiers Time and TIME will convey different meanings in JavaScript.
NOTE − Care should be taken while writing variable and function names in
JavaScript.

Comments in JavaScript
JavaScript supports both C-style and C++-style comments, Thus −
● Any text between a // and the end of a line is treated as a comment and is ignored by
JavaScript.
● Any text between the characters /* and */ is treated as a comment. This may span multiple
lines.
● JavaScript also recognizes the HTML comment opening sequence <!--. JavaScript treats
this as a single-line comment, just as it does the // comment.
● The HTML comment closing sequence --> is not recognized by JavaScript so it should
ascript" type = "text/javascript">

JavaScript Advantages
Following are the advantages of JavaScript −

● Simple − JavaScript is simple to comprehend and pick up. Both users

and developers will find the structure to be straightforward.
Additionally, it is very doable to implement, saving web developers a
tonne of money when creating dynamic content.
● Speed − JavaScript is a "interpreted" language, it cuts down on the
time needed for compilation in other programming languages like Java.
Another client-side script is JavaScript, which accelerates programme
execution by eliminating the wait time for server connections.
No matter where JavaScript is hosted, it is always run in a client environment to reduce
bandwidth usage and speed up execution.
● Interoperability − Because JavaScript seamlessly integrates with other
programming languages, many developers favour using it to create a
variety of applications. Any webpage or the script of another
programming language can contain it.
● Server Load − Data validation can be done within the browser itself
rather than being forwarded to the server because JavaScript is client-
side. The entire website does not need to be reloaded in the event of
any discrepancy. Only the chosen area of the page is updated by the
browser.

JavaScript Disadvantages
Following are the disadvantages of JavaScript −
 ● Cannot Debug − Although some HTML editors allow for debugging,
they are not as effective as editors for C or C++. Additionally, the
developer has a difficult time figuring out the issue because the
browser doesn't display any errors.
● Unexpected stop of rendering − The website's entire JavaScript code
can stop rendering due to a single error in the code. It appears to the
user as though JavaScript is absent. The browsers, however, are very
forgiving of these mistakes.
● Client-side Security − The user can see the JavaScript code; it could be
misused by others. These actions might involve using the source code
anonymously. Additionally, it is very simple to insert code into the
website that impair the security of data transmitted via the website.
● Inheritance − JavaScript does not support multiple inheritance; only
one inheritance is supported. This property of object-oriented
languages might be necessary for some programs.
● Browser Support − Depending on the browser, JavaScript is interpreted
differently. Therefore, before publication, the code needs to run on
various platforms. We also need to check the older browsers because
some new functions are not supported by them.
1.5 Bootstrap

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end
web development. It contains HTML, CSS and (optionally) JavaScript-based design templates
for typography, forms, buttons, navigation, and other interface components.

Features
Bootstrap is an HTML, CSS and JS library that focuses on simplifying the development of
informative web pages (as opposed to web applications). The primary purpose of adding it to a web
project is to apply Bootstrap's choices of color, size, font and layout to that project. As such, the
primary factor is whether the developers in charge find those choices to their liking. Once added to a
project, Bootstrap provides basic style definitions for all HTML elements. The result is a uniform
appearance for prose, tables and form elements across web browsers. In addition, developers can take
advantage of CSS classes defined in Bootstrap to further customize the appearance of their contents.
For example, Bootstrap has provisioned for light- and dark-colored tables, page headings, more
prominent pull quotes, and text with a highlight.
Bootstrap also comes with several JavaScript components which do not require other libraries
like jQuery. They provide additional user interface elements such as dialog boxes, tooltips, progress
bars, navigation drop-downs, and carousels. Each Bootstrap component consists of an HTML
structure, CSS declarations, and in some cases accompanying JavaScript code. They also extend the
functionality of some existing interface elements, including for example an auto-complete function
for input fields.

The most prominent components of Bootstrap are its layout components, as they affect an entire web
page. The basic layout component is called "Container", as every other element in the page is placed
in it. Developers can choose between a fixed-width container and a fluid-width container. While the
latter always fills the width with the web page, the former uses one of the five predefined fixed
widths, depending on the size of the screen showing the page:[citation needed]

● Smaller than 576 pixels

● 576–768 pixels
● 768–992 pixels
● 992–1200 pixels
● Larger than 1200 pixels
Once a container is in place, other Bootstrap layout components implement a CSS Flexbox layout
through defining rows and columns.
A precompiled version of Bootstrap is available in the form of one CSS file and three JavaScript files
that can be readily added to any project. The raw form of Bootstrap, however, enables developers to
implement further customization and size optimizations. This raw form is modular, meaning that the
developer can remove unneeded components, apply a theme and modify the uncompiled Sass files.

History
Early beginnings[edit]
Bootstrap, originally named Twitter Blueprint, was developed by Mark Otto and Jacob Thornton
at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various
libraries were used for interface development, which led to inconsistencies and a high maintenance
burden. According to Otto:
A super small group of developers and I got together to design and build a new internal tool and saw
an opportunity to do something more. Through that process, we saw ourselves build something much
more substantial than another internal tool. Months later, we ended up with an early version of
Bootstrap as a way to document and share common design patterns and assets within the company. [3]
After a few months of development by a small group, many developers at Twitter began to contribute
to the project as a part of Hack Week, a hackathon-style week for the Twitter development team. It
was renamed from Twitter Blueprint to Bootstrap and released as an open-source project.

2. Project Work
2.1 Code & Implementation

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools">
<application

android:allowBackup="true"

android:dataExtractionRules="@xml/data_extraction_rules"

android:fullBackupContent="@xml/backup_rules"

android:icon="@mipmap/ic_launcher"

android:label="@string/app_name"

android:roundIcon="@mipmap/ic_launcher_round"

android:supportsRtl="true"

android:theme="@style/Theme.Chitchat20"

tools:targetApi="31">

<activity

android:name=".setting"

android:exported="false" />

<activity

android:name=".chatwin"

android:exported="false" />

<activity

android:name=".registration"

android:exported="false" />

<activity

android:name=".login"

android:exported="false" />

<activity

android:name=".splash"

android:exported="true">
 <intent-filter>

<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />

</intent-filter>

</activity>

<activity

android:name=".MainActivity"

android:exported="false" />

</application>

</manifest>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="325dp"

android:layout_height="234dp"

android:orientation="vertical"

android:layout_gravity="center"

android:layout_margin="@dimen/_13sdp"

android:background="@drawable/shapedialog">

<ImageView

android:id="@+id/logoutdia"

android:layout_width="45dp"

android:layout_height="45dp"
 android:src="@drawable/logout"

android:layout_gravity="center"

android:layout_margin="@dimen/_13sdp"

>

</ImageView>

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="Do You really want \n to logout?"

android:textSize="19dp"

android:textColor="@color/black"

android:gravity="center"

android:layout_margin="@dimen/_8sdp"

android:fontFamily="@font/poppins_regular"

>

</TextView>

<LinearLayout

android:layout_width="match_parent"
android:layout_height="wrap_content"

android:orientation="horizontal">

<Button

android:id="@+id/nobtn"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_margin="13dp"

android:layout_weight="1"

android:gravity="center"

android:text="No"

android:backgroundTint="@color/black">

</Button>

<Button

android:id="@+id/yesbtn"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_margin="13dp"

android:layout_weight="1"
 android:gravity="center"

android:text="Yes"

android:backgroundTint="@color/black">

</Button>

</LinearLayout>

</LinearLayout>

LOGIN

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="@drawable/one"

tools:context=".login">
<ImageView

android:id="@+id/imageView"

android:layout_width="105dp"

android:layout_height="73dp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.173"

app:srcCompat="@drawable/av2" />

<TextView

android:id="@+id/textView5"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:text="Login"

android:textColor="@color/green"

android:textSize="@dimen/_46sdp"

android:textStyle="bold"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.474"

app:layout_constraintStart_toStartOf="parent"
 app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.39" />

<TextView

android:id="@+id/textView6"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:text="Sign in to continue"

android:textColor="@color/green"

android:textSize="@dimen/_20sdp"

android:textStyle="normal"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.485" />

<TextView

android:id="@+id/textView7"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="20dp"

android:layout_marginTop="10dp"

android:layout_marginRight="20dp"
 android:gravity="center"

android:paddingLeft="10dp"

android:text="Email"

android:textAlignment="center"

android:textColor="@color/green"

android:textSize="@dimen/_20sdp"

android:textStyle="normal"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.0"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.571" />

<TextView

android:id="@+id/textView8"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="20dp"

android:layout_marginTop="10dp"

android:layout_marginRight="20dp"

android:gravity="center"

android:paddingLeft="10dp"

android:text="Password"

android:textAlignment="center"
 android:textColor="@color/green"

android:textSize="@dimen/_20sdp"

android:textStyle="normal"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.016"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.716" />

<EditText

android:id="@+id/editTextLogEmail"

android:layout_width="@dimen/_260sdp"

android:layout_height="@dimen/_46sdp"

android:ems="10"

android:hint="Email"

android:inputType="textEmailAddress"

android:textColor="@color/black"

android:textSize="@dimen/_15sdp"

android:textStyle="bold"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.345"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"
 app:layout_constraintVertical_bias="0.641" />

<EditText

android:id="@+id/editTextLogPassword"

android:layout_width="@dimen/_260sdp"

android:layout_height="@dimen/_46sdp"

android:ems="10"

android:hint="Password"

android:inputType="textPassword"

android:textColor="@color/black"

android:textSize="@dimen/_15sdp"

android:textStyle="bold"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.345"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.782" />

<Button

android:id="@+id/logButton"

android:layout_width="@dimen/_150sdp"

android:layout_height="@dimen/_38sdp"

android:backgroundTint="@color/green"

android:gravity="center"
 android:text="Login"

android:textSize="@dimen/_21sdp"

android:textStyle="bold"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.45"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.866" />

<TextView

android:id="@+id/textView9"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

android:text="Need an account?"

android:textSize="@dimen/_15sdp"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.487"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.917" />

<TextView
 android:id="@+id/logsignup"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:autoSizeMaxTextSize="@dimen/_16sdp"

android:gravity="center"

android:text="Sign Up"

android:textSize="@dimen/_15sdp"

android:textStyle="bold"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintHorizontal_bias="0.478"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.981" />

</androidx.constraintlayout.widget.ConstraintLayout>

CHATWIN

package com.example.chitchat20;

import androidx.annotation.NonNull;

import androidx.appcompat.app.AppCompatActivity;

import androidx.cardview.widget.CardView;

import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

import android.annotation.SuppressLint;

import android.os.Bundle;

import android.view.View;

import android.widget.EditText;

import android.widget.LinearLayout;

import android.widget.TextView;

import android.widget.Toast;

import com.google.android.gms.tasks.OnCompleteListener;

import com.google.android.gms.tasks.Task;

import com.google.firebase.auth.FirebaseAuth;

import com.google.firebase.database.DataSnapshot;

import com.google.firebase.database.DatabaseError;

import com.google.firebase.database.DatabaseReference;

import com.google.firebase.database.FirebaseDatabase;

import com.google.firebase.database.ValueEventListener;

import com.squareup.picasso.Picasso;

import java.lang.ref.Reference;

import java.util.ArrayList;

import java.util.Date;

import de.hdodenhof.circleimageview.CircleImageView;
public class chatwin extends AppCompatActivity {

String receiverImg,receiverId,receiverName,senderId,senderUID,receiverUid;

CircleImageView profile;

TextView receiverNName;

CardView sendbtn;

EditText textmsg;

FirebaseAuth firebaseAuth;

FirebaseDatabase database;

public static String senderImg;

public static String receiverIImg;

String senderroom , receiverroom;

RecyclerView messageadpter;

ArrayList<msgmodelclass> messagesArrayList;

messagesAdpter mmessagesAdpter;
@SuppressLint("MissingInflatedId")

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_chatwin);

getSupportActionBar().hide();

messageadpter=findViewById(R.id.msgadpter);

LinearLayoutManager linearLayoutManager= new LinearLayoutManager(this);

linearLayoutManager.setStackFromEnd(true);

messageadpter.setLayoutManager(linearLayoutManager);

mmessagesAdpter = new messagesAdpter(chatwin.this,messagesArrayList);

messageadpter.setAdapter(mmessagesAdpter);

receiverName = getIntent().getStringExtra("nameeee");

receiverImg = getIntent().getStringExtra("reciverImg");

receiverId = getIntent().getStringExtra("uid");

messagesArrayList=new ArrayList<>();

sendbtn = findViewById(R.id.sendbtn);
 textmsg = findViewById(R.id.textmsg);

profile = findViewById(R.id.profileimgg);

receiverNName=findViewById(R.id.receivername);

Picasso.get().load(receiverImg).into(profile);

receiverNName.setText(""+receiverName);

DatabaseReference reference =
database.getReference().child("user").child(firebaseAuth.getUid());

DatabaseReference chatreference =
database.getReference().child("user").child("senderroom").child("message");

chatreference.addValueEventListener(new ValueEventListener() {

@Override

public void onDataChange(@NonNull DataSnapshot snapshot) {

messagesArrayList.clear();

for (DataSnapshot dataSnapshot:snapshot.getChildren()){

msgmodelclass messages = dataSnapshot.getValue(msgmodelclass.class);

messagesArrayList.add(messages);

mmessagesAdpter.notifyDataSetChanged();
 }

@Override

public void onCancelled(@NonNull DatabaseError error) {

});

reference.addValueEventListener(new ValueEventListener() {

@Override

public void onDataChange(@NonNull DataSnapshot snapshot) {

senderImg= snapshot.child("profilepic").getValue().toString();

receiverIImg=receiverImg;

@Override

public void onCancelled(@NonNull DatabaseError error) {

});

senderUID= firebaseAuth.getUid();

senderroom = senderUID+receiverUid;
 receiverroom = receiverUid+senderUID;

sendbtn.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

String message = textmsg.getText().toString();

if (message.isEmpty()){

Toast.makeText(chatwin.this, "Enter The Message First",

Toast.LENGTH_SHORT).show();

return;

textmsg.setText("");

Date date = new Date();

msgmodelclass messagess = new msgmodelclass(message,senderUID,date.getTime());

database= FirebaseDatabase.getInstance();

database.getReference().child("chats").child("senderroom").child("message").push().setValue("messa
ge").addOnCompleteListener(new OnCompleteListener<Void>() {

@Override

public void onComplete(@NonNull Task<Void> task) {

database.getReference().child("chats").child("receiverroom").child("messages").push().setValue("me
ssage").addOnCompleteListener(new OnCompleteListener<Void>() {

@Override

public void onComplete(@NonNull Task<Void> task) {

}
 });

});

});

LOGIN PAGE

package com.example.chitchat20;

import androidx.annotation.NonNull;

import androidx.appcompat.app.AppCompatActivity;

import android.annotation.SuppressLint;

import android.app.ProgressDialog;

import android.content.Intent;

import android.os.Bundle;

import android.text.TextUtils;

import android.view.View;

import android.widget.Button;

import android.widget.EditText;
import android.widget.TextView;

import android.widget.Toast;

import com.google.android.gms.tasks.OnCompleteListener;

import com.google.android.gms.tasks.Task;

import com.google.firebase.auth.AuthResult;

import com.google.firebase.auth.FirebaseAuth;

public class login extends AppCompatActivity {

TextView logsignup;

Button Button;

EditText email,password;

FirebaseAuth auth;

String emailPattern = "[a-zA-Z0-9._-]+@[a-z]+\\\\.+[a-z]+" ;

android.app.ProgressDialog progressDialog;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_login);

progressDialog=new ProgressDialog(this);

progressDialog.setMessage("Please Wait");

progressDialog.setCancelable(false);

getSupportActionBar().hide();
auth=FirebaseAuth.getInstance();

Button=findViewById(R.id.logButton);

email=findViewById(R.id.editTextLogEmail);

password=findViewById(R.id.editTextLogPassword);

logsignup=findViewById(R.id.logsignup);

logsignup.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Intent intent=new Intent(login.this, registration.class);

startActivity(intent);

finish();

});

Button.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

String Email = email.getText().toString();

String Pass = password.getText().toString();

if ((TextUtils.isEmpty(Email))){
 progressDialog.dismiss();

Toast.makeText(login.this, "Enter The Email", Toast.LENGTH_SHORT).show();

} else if ((TextUtils.isEmpty(Pass))) {

progressDialog.dismiss();

Toast.makeText(login.this, "Enter The Password ", Toast.LENGTH_SHORT).show();

} else if (!Email.matches(emailPattern)) {

progressDialog.dismiss();

email.setError("Give Proper Email Address");

} else if (password.length()<6) {

password.setError("More than 6 character");

Toast.makeText(login.this, "Password should be longer than 6 character",

Toast.LENGTH_SHORT).show();

}else {

auth.signInWithEmailAndPassword(Email,Pass).addOnCompleteListener(new
OnCompleteListener<AuthResult>() {

@Override

public void onComplete(@NonNull Task<AuthResult> task) {

if (task.isSuccessful()){

progressDialog.show();

try {

Intent intent = new Intent(login.this , MainActivity.class);

startActivity(intent);
 finish();

}catch (Exception e){

Toast.makeText(login.this,e.getMessage(),Toast.LENGTH_SHORT);

}else{

Toast.makeText(login.this,task.getException().getMessage(),
Toast.LENGTH_SHORT).show();

});

});

}}

package com.example.chitchat20;

import androidx.annotation.NonNull;

import androidx.appcompat.app.AppCompatActivity;

import androidx.recyclerview.widget.LinearLayoutManager;

import androidx.recyclerview.widget.RecyclerView;

import android.annotation.SuppressLint;
import android.app.Dialog;

import android.content.Intent;

import android.os.Bundle;

import android.provider.MediaStore;

import android.view.View;

import android.widget.Button;

import android.widget.ImageView;

import com.google.firebase.auth.FirebaseAuth;

import com.google.firebase.database.DataSnapshot;

import com.google.firebase.database.DatabaseError;

import com.google.firebase.database.DatabaseReference;

import com.google.firebase.database.FirebaseDatabase;

import com.google.firebase.database.ValueEventListener;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

FirebaseAuth auth;

RecyclerView MainUserRecyclerView;

UserAdpter adapter;
FirebaseDatabase database;

ArrayList<Users> usersArrayList;

ImageView imglogout;

@SuppressLint("WrongViewCast")

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

getSupportActionBar().hide();

database=FirebaseDatabase.getInstance();

usersArrayList = new ArrayList<>();

auth = FirebaseAuth.getInstance();

View cumbut = findViewById(R.id.camBut);

View setbut = findViewById(R.id.settingBut);

DatabaseReference reference= database.getReference().child("user");

reference.addValueEventListener(new ValueEventListener() {

@Override

public void onDataChange(@NonNull DataSnapshot snapshot) {

for (DataSnapshot dataSnapshot: snapshot.getChildren()){

Users users=dataSnapshot.getValue(Users.class);

usersArrayList.add(users);

adapter.notifyDataSetChanged();

@Override

public void onCancelled(@NonNull DatabaseError error) {

});

imglogout = findViewById(R.id.logoutimg);

imglogout.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Dialog dialog=new Dialog(MainActivity.this,R.style.dialoge);

 dialog.setContentView(R.layout.dialog_layout);

Button no,yes;

yes=dialog.findViewById(R.id.yesbtn);

no=dialog.findViewById(R.id.nobtn);

yes.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

FirebaseAuth.getInstance().signOut();

Intent intent=new Intent(MainActivity.this,login.class);

startActivity(intent);

});

no.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

dialog.dismiss();

});

dialog.show();

});

setbut.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

 Intent intent = new Intent(MainActivity.this,setting.class);

startActivity(intent);

});

cumbut.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Intent intent = new Intent(android.provider.MediaStore.ACTION_IMAGE_CAPTURE);

startActivityForResult(intent,10);

});

MainUserRecyclerView = findViewById(R.id.MainUserRecyclerView);

MainUserRecyclerView.setLayoutManager(new LinearLayoutManager(this));

adapter= new UserAdpter(MainActivity.this,usersArrayList);

MainUserRecyclerView.setAdapter(adapter);

if (auth.getCurrentUser() == null) {

Intent intent = new Intent(MainActivity.this, login.class);

startActivity(intent);

package com.example.chitchat20;
import static com.example.chitchat20.chatwin.senderImg;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.TextView;

import androidx.annotation.NonNull;

import androidx.recyclerview.widget.RecyclerView;

import com.google.firebase.auth.FirebaseAuth;

import com.google.firebase.database.core.Context;

import com.squareup.picasso.Picasso;

import java.util.ArrayList;

import de.hdodenhof.circleimageview.CircleImageView;

public class messagesAdpter extends RecyclerView.Adapter {

Context context;

ArrayList<msgmodelclass> messagesAdpterArrayList;

int ITEM_SEND=1;

int ITEM_RECIVE=2;
 public messagesAdpter(chatwin chatwin, ArrayList<msgmodelclass> messagesAdpterArrayList) {

this.messagesAdpterArrayList = messagesAdpterArrayList;

public messagesAdpter(Context context) {

this.context = context;

public messagesAdpter(Context context, ArrayList<msgmodelclass> messagesAdpterArrayList) {

this.context = context;

this.messagesAdpterArrayList = messagesAdpterArrayList;

@NonNull

@Override

public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int

viewType) {

if (viewType == ITEM_SEND){

View view = LayoutInflater.from(context).inflate(R.layout.sender_layout,parent,false);

return new senderVierwHolder(view);

}
 else {

View view = LayoutInflater.from(context).inflate(R.layout.receiver_layout, parent, false);

return new reciverViewHolder(view);

@Override

public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {

msgmodelclass messages = messagesAdpterArrayList.get(position);

if (holder.getClass()==senderVierwHolder.class){

senderVierwHolder viewHolder = (senderVierwHolder) holder;

viewHolder.msgtxt.setText(messages.getMessage());

Picasso.get().load(senderImg).into(viewHolder.circleImageView);

}else { reciverViewHolder viewHolder = (reciverViewHolder) holder;

viewHolder.msgtxt.setText(messages.getMessage());

int reciverIImg = 0;

Picasso.get().load(reciverIImg).into(viewHolder.circleImageView);

}
@Override

public int getItemCount() {

return 0;

@Override

public int getItemViewType(int position) {

msgmodelclass messages = messagesAdpterArrayList.get(position);

if (FirebaseAuth.getInstance().getCurrentUser().getUid().equals(messages.getSenderId())) {

return ITEM_SEND;

} else {

return ITEM_RECIVE;

class senderVierwHolder extends RecyclerView.ViewHolder {

CircleImageView circleImageView;

TextView msgtxt;

public senderVierwHolder(@NonNull View itemView) {

super(itemView);

circleImageView = itemView.findViewById(R.id.profilerggg);

msgtxt = itemView.findViewById(R.id.msgsendertyp);

}
 }

class reciverViewHolder extends RecyclerView.ViewHolder {

CircleImageView circleImageView;

TextView msgtxt;

public reciverViewHolder(@NonNull View itemView) {

super(itemView);

circleImageView = itemView.findViewById(R.id.pro);

msgtxt = itemView.findViewById(R.id.recivertextset);

package com.example.chitchat20;

public class msgmodelclass {

String message;

String senderId;

Long timestamp;
public msgmodelclass() {

public msgmodelclass(String message, String senderId, Long timestamp) {

this.message = message;

this.senderId = senderId;

this.timestamp = timestamp;

public String getMessage() {

return message;

public void setMessage(String message) {

this.message = message;

public String getSenderId() {

return senderId;

public void setSenderId(String senderId) {

this.senderId = senderId;

}
 public Long getTimestamp() {

return timestamp;

public void setTimestamp(Long timestamp) {

this.timestamp = timestamp;

REGISTRATION

package com.example.chitchat20;

import androidx.annotation.NonNull;

import androidx.annotation.Nullable;

import androidx.appcompat.app.AppCompatActivity;

import android.app.ProgressDialog;

import android.content.Intent;

import android.net.Uri;

import android.os.Bundle;

import android.text.TextUtils;

import android.view.View;

import android.widget.Button;

import android.widget.EditText;
import android.widget.TextView;

import android.widget.Toast;

import com.google.android.gms.tasks.OnCompleteListener;

import com.google.android.gms.tasks.OnSuccessListener;

import com.google.android.gms.tasks.Task;

import com.google.firebase.auth.AuthResult;

import com.google.firebase.auth.FirebaseAuth;

import com.google.firebase.database.DatabaseReference;

import com.google.firebase.database.FirebaseDatabase;

import com.google.firebase.storage.FirebaseStorage;

import com.google.firebase.storage.StorageReference;

import com.google.firebase.storage.UploadTask;

import de.hdodenhof.circleimageview.CircleImageView;

public class registration extends AppCompatActivity {

TextView logButton;

EditText rgUserName , rgPassword , rgReEnterPassword , rgEmail;

Button rgSignUpButton;

CircleImageView rg_profileImg;

FirebaseDatabase database;

FirebaseStorage storage;

FirebaseAuth auth;
Uri imageURI;

String imageuri;

String emailPattern = "[a-zA-Z0-9._-]+@[a-z]+\\\\.+[a-z]+" ;

FirebaseDatabase Database;

FirebaseStorage Storage;

ProgressDialog progressDialog;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_registration);

progressDialog=new ProgressDialog(this);

progressDialog.setMessage("stabilishing the account ");

progressDialog.setCancelable(false);

getSupportActionBar().hide();

logButton = findViewById(R.id.logButton);

rgUserName = findViewById(R.id.rgUserName);

rgPassword = findViewById(R.id.rgPassword);

rgReEnterPassword = findViewById(R.id.rgReEnterPassword );

rgEmail = findViewById(R.id.rgEmail);
rg_profileImg = findViewById(R.id.rg_profileImg);

rgSignUpButton = findViewById(R.id.rgSignUpButton);

database=FirebaseDatabase.getInstance();

storage=FirebaseStorage.getInstance();

auth=FirebaseAuth.getInstance();

logButton.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

Intent intent = new Intent(registration.this,login.class);

startActivity(intent);

finish();

});

rgSignUpButton.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

String namee = rgUserName.getText().toString();

String email = rgEmail.getText().toString();

String Password = rgPassword .getText().toString();

String ReEnterPassword = rgReEnterPassword .getText().toString();

String status = "hey i am using this application";

if (TextUtils.isEmpty(namee) || TextUtils.isEmpty(email) ||

TextUtils.isEmpty(Password) || TextUtils.isEmpty(ReEnterPassword)){

progressDialog.dismiss();

Toast.makeText(registration.this, "Please Enter Valid Information",

Toast.LENGTH_SHORT).show();

} else if (!email.matches(emailPattern)) {

progressDialog.dismiss();

rgEmail.setError("type a valid Email");

} else if (Password.length()<6) {

progressDialog.dismiss();

rgPassword.setError("password must be 6 character or more");

} else if (!Password.equals(ReEnterPassword)) {

progressDialog.dismiss();

rgReEnterPassword.setError("password does ot match ");

}else {

auth.createUserWithEmailAndPassword(email,Password).addOnCompleteListener(new
OnCompleteListener<AuthResult>() {
@Override

public void onComplete(@NonNull Task<AuthResult> task) {

if(task.isSuccessful()){

String id = task.getResult().getUser().getUid();

DatabaseReference reference = database. getReference().child("user").child("id");

StorageReference storageReference = storage.getReference().child("Upload").child(id);

if (imageURI!=null){

storageReference.putFile(imageURI).addOnCompleteListener(new
OnCompleteListener<UploadTask.TaskSnapshot>() {

@Override

public void onComplete(@NonNull Task<UploadTask.TaskSnapshot> task) {

if (task.isSuccessful()){

storageReference.getDownloadUrl().addOnSuccessListener(new OnSuccessListener<Uri>() {

@Override

public void onSuccess(Uri uri) {

imageuri = uri.toString();

Users users = new Users(email,namee,Password,id,ReEnterPassword, status);

Task<Void> voidTask = reference.setValue(users).addOnCompleteListener(new

OnCompleteListener<Void>() {

@Override

public void onComplete(@NonNull Task<Void> task) {

if (task.isSuccessful()){
progressDialog.show();

Intent intent = new Intent(registration.this,MainActivity.class);

startActivity(intent);

finish();

}else {

Toast.makeText(registration.this, "Error in creating the user", Toast.LENGTH_SHORT).show();

});

});

});

}else{

String status = "hey i am using this application";

imageuri = "https://firebasestorage.googleapis.com/v0/b/chitchat2-0.appspot.com/o/man.png?
alt=media&token=91f34d65-3af5-4582-8e17-44423a384e7a";

Users user = new Users(namee,id,Password,imageuri,status, status);

Task<Void> voidTask = reference.setValue(user).addOnCompleteListener(new

OnCompleteListener<Void>() {

@Override

public void onComplete(@NonNull Task<Void> task) {

if (task.isSuccessful()){

progressDialog.show();

Intent intent = new Intent(registration.this,MainActivity.class);

startActivity(intent);

finish();

}else {

Toast.makeText(registration.this, "Error in creating the user", Toast.LENGTH_SHORT).show();

});

}else {

Toast.makeText(registration.this, task.getException().getMessage(),
Toast.LENGTH_SHORT).show();

});

});

rg_profileImg.setOnClickListener(new View.OnClickListener() {
@Override

public void onClick(View view) {

Intent intent = new Intent();

intent.setType("image/*");

intent.setAction((Intent.ACTION_GET_CONTENT));

startActivityForResult(Intent.createChooser(intent,"Select Picture"),10);

});

@Override

protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) {

super.onActivityResult(requestCode, resultCode, data);

if (requestCode==10){

if (data!=null){

imageURI = data.getData();

rg_profileImg.setImageURI(imageURI);

}
package com.example.chitchat20;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;

import android.os.Bundle;

import android.os.Handler;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.ImageView;

import android.widget.TextView;

public class splash extends AppCompatActivity {

ImageView logo;

TextView name, own1, own2;

Animation topAnim, bottomAnim;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_splash);

logo = findViewById(R.id.logoImg);

name = findViewById(R.id.logoNameImg);
 own1 = findViewById(R.id.ownone);

own2 = findViewById(R.id.owntwo);

topAnim= AnimationUtils.loadAnimation(this,R.anim.top_animation);

bottomAnim = AnimationUtils.loadAnimation(this,R.anim.bottom_animation);

logo.setAnimation(topAnim);

name.setAnimation(bottomAnim);

own1.setAnimation(bottomAnim);

own2.setAnimation(bottomAnim);

logo.setAnimation(topAnim);

name.setAnimation(bottomAnim);

own1.setAnimation(bottomAnim);

own2.setAnimation(bottomAnim);

new Handler().postDelayed(new Runnable() {

@Override

public void run() {

Intent intent = new Intent(splash.this, login.class);

startActivity(intent);
 finish();

},4000);

package com.example.chitchat20;

public class Users {

String profilepic,email,username,password,userid,lastmessage,status;

public Users(String email, String name, String password, String id, String reEnterPassword, String
status){

this.userid = userid;

this.username = username;

this.email = email;

this.password = password;

this.profilepic = profilepic;

this.status = this.status;

public String getProfilepic() {

return profilepic;

}
public void setProfilepic(String profilepic) {

this.profilepic = profilepic;

public String getEmail() {

return email;

public void setEmail(String email) {

this.email = email;

public String getUsername() {

return username;

public void setUsername(String username) {

this.username = username;

public String getPassword() {

return password;

}
public void setPassword(String password) {

this.password = password;

public String getUserid() {

return userid;

public void setUserid(String userid) {

this.userid = userid;

public String getLastmessage() {

return lastmessage;

public void setLastmessage(String lastmessage) {

this.lastmessage = lastmessage;

public String getStatus() {

return status;

public void setStatus(String status) {

 this.status = status;

The Online Chat Application project was initiated to address the need for real-time
communication and collaboration in an increasingly digital world. It aimed to create a
user-friendly and secure platform for users to chat, share files, and connect with others
seamlessly.
Objectives

The primary objectives of this project were:

 Develop a user-friendly online chat application.

 Enable real-time messaging and multimedia sharing.
 Implement robust security measures to protect user data.
 Ensure cross-platform compatibility.

Scope

The scope of the project encompassed the development of core chat functionality, user
authentication, user profiles, and basic group chat features. While the initial version
focused on essential features, future enhancements were planned to expand the
application's capabilities.

Project Description
Features

The Online Chat Application boasted the following features:

 User Registration and Authentication

 One-on-One Messaging
 Group Chat Functionality
 Multimedia Sharing (Images, Documents)
 Real-time Notifications
 User Profiles
 Search and Contact Management
 Database: [e.g., MySQL, MongoDB]
 Real-time Messaging: [e.g., WebSockets]
 Security: [e.g., SSL, Encryption]
 Hosting: [e.g., AWS, Heroku]

Architecture

The application followed a client-server architecture with a RESTful API for

communication between the client and server. Real-time messaging was achieved through
WebSocket connections, ensuring low latency.

Development Process
Planning

 Defined project scope, objectives, and deliverables.

 Created a project timeline and allocated tasks to team members.
 Conducted research on technologies and frameworks.
 Designed user interfaces (UI) for web and mobile platforms.
 Developed wireframes and prototypes for user testing.
 Defined the application's database schema.

Implementation

 Developed the front-end using [Front-end Framework].

 Implemented the back-end using [Back-end Framework].
 Integrated user authentication and real-time messaging features.

Testing

 Conducted unit tests and integration tests.

 Performed user acceptance testing (UAT) with selected beta users.
 Fixed bugs and optimized performance.

Deployment

 Deployed the application to [Hosting Platform].

 Configured domain and SSL certificates for security.
 Monitored server performance and scalability.

Challenges Faced
Technical Challenges

 Overcoming real-time messaging complexities.

 Ensuring data security and privacy.
 Cross-platform compatibility and responsiveness

Timeline Constraints

 Managing tight project deadlines.

 Balancing feature development and bug fixes.

Achievements
Completed Features

 Successfully delivered core chat functionality.

 Received positive feedback from beta testers.
 Achieved a user base of [Number] users within [Timeframe].

Future Enhancements
Feature Additions

 Video calling and conferencing.

 Message encryption and security enhancements.
 Integration with third-party services (e.g., file sharing).

This project report provides an overview of the Online Chat Application project, including
its objectives, features, development process, challenges faced, achievements, and future
enhancements. It reflects our commitment to delivering a high-quality product and our
dedication to ongoing improvement.

3. Results
The Chit-Chat project is divided into sections as follows:

1. Home Page
2. Login Page
3. User can upload and update their profile photos.
4. Online Chit-Chat
4. References

1. "W3C Html".
2. ^ "HTML 4.0 Specification — W3C Recommendation — Conformance: requirements
and recommendations". w3. World Wide Web Consortium. December 18,
1997. Archived from the original on July 5, 2015. Retrieved July 6, 2015.
3. ^ Tim Berners-Lee, "Information Management: A Proposal." CERN (March 1989,
May 1990). W3.org
4. ^ Tim Berners-Lee, "Design Issues"
5. "CSS developer guide". MDN Web Docs. Archived from the original on 2015-09-25.
Retrieved 2015-09-24.
6. ^ Flanagan, David (18 April 2011). JavaScript: the definitive guide. Beijing;
Farnham: O'Reilly. p. 1. ISBN 978-1-4493-9385-4. OCLC 686709345.
7. ^ "What is CSS?". World Wide Web Consortium. Archived from the original on 2010-
11-29. Retrieved 2010-12-01.
8. ^ "Web-based Mobile Apps of the Future Using HTML 5, CSS and JavaScript".
HTMLGoodies. 23 July 2010. Archived from the original on 2014-10-20.
Retrieved 2014-10-16.
9. Press release announcing JavaScript, "Netscape and Sun announce JavaScript", PR
Newswire, December 4, 1995
10. ^ "ECMAScript® 2021 language specification". June 2021. Retrieved 27 July 2021.
11. ^ https://tc39.es/ecma262/; retrieved: 27 July 2021; publication date: 22 July 2021.
12. ^ "nodejs/node-eps". GitHub. Archived from the original on 2020-08-29.
Retrieved 2018-07-05.
13. ^ Jump up to:a b Seibel, Peter (September 16, 2009). Coders at Work: Reflections on
the Craft of Programming. ISBN 9781430219484. Archived from the original on
December 24, 2020. Retrieved December 25, 2018.
14. ^ Jump up to:a b c d e "Chapter 4. How JavaScript Was
Created". speakingjs.com. Archived from the original on 2020-02-27.
Retrieved 2017-11-21.
15. ^ "Popularity – Brendan Eich".
16. "Bootstrap 5.2.3". November 22, 2022. Retrieved November 22, 2022.
17. ^ Otto, Mark (January 17, 2012). "Bootstrap in A List Apart No. 342". Mark Otto's
blog. Archived from the original on October 28, 2016. Retrieved February 23, 2017.
18. ^ Otto, Mark (August 19, 2011). "Bootstrap from Twitter". Developer Blog.
Twitter. Archived from the original on February 23, 2017. Retrieved February
23, 2017.
19. ^ "About". Bootstrap. Retrieved February 23, 2017.