1

Dr.Babasaheb Ambedkar Marathwada University,

Aurangabad.
S.B.E.S College of Science,Aurangabad
Department of Computer Science

Project Reported On
“Chatbot”
Presented by
Mr. Vallabh G.Deshpande
Miss. Vaishnavi P. Dahale
Miss. Shubhada M. Kulkarni
Project Guided By
Mrs. K. K. Shevatekar
 2

Dr.Babasaheb Ambedkar Marathawad University,

Aurangabad.
S.B.E.S. College of Science, Aurangabad.
Department of Computer Science 2022-2023
Department of Computer Science &
Information Technology
2022-2023

CERTIFICATE
This is to certify that,
Mr. Vallabh G. Deshpande
Miss. Vaishnavi P. Dahale
Miss. Shubhada M. Kulkarni
Has successfully completed the project on

"Chatbot"
Under the subject Computer Science towards the
Partial Fulfilment of the Bachelor’s Degree in Science
course during the academic year 2022-2023.

Project Guided By Examiner BCS Incharge

Mrs. K. K. Shevatekar Mr. R. P. Raibole

 3

Acknowledgement
We wish to express our deep sense of gratitude to
our guide Mrs. K. K. Shevatekar For their valuable guidance
&kind cooperation through the period of work hard undertaken
which has been instrumental in the success to this project. We
cordially thanks to all those who have contribute their sincere
Co-operation directly and indirectly and material help for
the preparation of this Project. Last but least we also extend
thanks to our B.C.S(HOD) Mr. R. P. Raibole sir whose timely
help made our project a great success. We are also thankful to
all our friends and to all of those who have contributed
intellectually and Materially for the preparation of our project.

Mr. Vallabh G. Deshpande

Miss. Vaishnavi P. Dahale
Miss. Shubhada M. Kulkarni
BCS IIIrd year
Year 2022-2023
 4

INDEX
Sr. INDEX Page.
No. No.
1 Introduction 5
2 Software Model Used 6
3 System Analysis Study Report 7
4 System requirement and 8
specification
5 Problem Defination 9
6 Purposed System 10
7 Software Feasibility Study Report 10
8 ER-Diagram 11
9 Data Flow Diagram(DFD) 12
10 Source Code & Screenshots 13-25
11 Scope of the System 27
12 Conclusion 28
13 Reference 29
 5

INTRODUCTION

Welcome to our chat bot project! Our goal is to create a user-friendly and interactive
chat bot that can assist with a variety of tasks and provide helpful information. Whether you're
looking for answers to common questions, need help navigating a website, or just want to have
a friendly conversation, our chat bot is here to help. Using natural language processing and
machine learning, our chat bot is designed to understand and respond to user input in a way
that feels like you're talking to a real person. We're excited to share our chat bot with you and
hope that it can make your life a little bit easier!
In addition to its user-friendly interface and intelligent design, our chat bot is also highly
adaptable to different use cases. For example, it can be customized to meet the specific needs
of a business or organization, such as providing customer service or helping employees with
internal processes. Our chat bot can also be integrated with other software and platforms,
making it a versatile tool that can be used in a variety of contexts.
Moreover, our chat bot project prioritizes privacy and security. Since all data and
algorithms are stored locally on the device, user information is kept confidential and protected
from external threats. This ensures that users can feel safe and secure when interacting with the
chat bot.
Overall, our chat bot project represents an exciting new frontier in virtual assistant
technology. By providing a user-friendly and secure tool that can assist with a wide range of
tasks, we hope to make people's lives easier and more enjoyable. We can't wait to see what our
chat bot can achieve, and we're excited to share it with the world!
 6

SOFTWARE MODEL USED

Agile Software Model:-

Agile software development is an iterative and flexible approach to software
development that focuses on collaboration between team members, customer involvement, and
the delivery of working software in short time frames. It emphasizes the need for constant
feedback and adaptation, allowing the team to continuously refine and improve the product.
The Agile model promotes communication, rapid response to changes, and a focus on
delivering value to the customer. It is often used for projects with changing requirements or
unclear project scope, as it allows the team to pivot and adjust to the needs of the project as
they become better understood.
 7

SYSTEM ANALYSIS STUDY REPORT

A System analysis study report for a chatbot using HTML,CSS, and Javascript would
typically involve a comprehensive analysis of the chatbot system’s requirements, features,
and functionality. Here’s an outline of what a system analysis study report would include.

1. Introduction:-

▪ Brief overview of the chatbot system and its purpose

▪ Explanation of the motivation behind building the chatbot system
▪ Description of the scope of the study and the methods used

2. Requirements Analysis:-
• Identification of the functional and non-functional requirements of the chatbot
system.
• Definition of the user roles and personas that will be interacting with the
chatbot.

3. System Architecture:-
• Design of chatbot front end and back end architecture using HTML, CSS and
JavaScript.
• Definition of data modules and Sigma that will be used to store and retrieve
chatbot, conversation and user data.

4. Implementation
5. Result of Evaluation
6. Conclusion
 8

SYSTEM REQUIREMENT AND SPECIFICATION

❖ HARDWARE REQUIREMENT:-

➢ 4GB RAM(minimum)
➢ 256GB SSD or 512GB HDD
➢ Intel i3 7th gen.(minimum)
➢ 32 bit system

❖ SOFTWARE REQUIREMENTS:-

➢ Microsoft Access Database

➢ Visual Studio 2010
➢ Windows 10
 9

PROBLEM DEFINATION

A chatbot project using HTML, CSS, and JavaScript involves creating an interactive
conversational interface that can simulate human-like interactions with users. The goal of the
project is to develop a chatbot that can understand user input, process it, and respond
appropriately in a conversational format.
The project requires defining a problem statement, which could include identifying the
purpose and scope of the chatbot, determining the target audience, understanding the user
requirements, and defining the conversational flow. The problem definition could also involve
selecting the appropriate Natural Language Processing (NLP) techniques, designing the user
interface, and integrating the chatbot with other systems or APIs.
Overall, the problem definition for a chatbot project using HTML, CSS, and JavaScript
should aim to develop an efficient and effective conversational agent that can enhance user
experience and meet the intended objectives.
 10

PURPOSED SYSTEM

A chatbot project using HTML, CSS and JavaScript can have the purpose of providing
an interactive conversational experience of user of a website or app. The system can be
designed to respond to user input, answer frequently ask questions, provide recommendation
or suggestions, and even perform basic task and or transactions. The HTML. CSS and
JavaScript can be used to build a user interface, defined a conversational flow and connect to
a backend service or API to retrieve and process data. The purpose of chatbot project may vary
depending on your specific goals and needs of the organization or individual creating it.

SOFTWARE FEASIBILITY AND STUDY REPORT

A software feasibility study for a chatbot project, using HTML, CSS and JavaScript would
typically involve accessing the technical, economic, and operational aspects of project. Some
key point of to consider in such study are:
1. Technical feasibility: This would involve assessing whether the required technical
expertise and resources are available to develop the chatbot using HTML, CSS, and
JavaScript. Considerations may include the availability of the required tools and
frameworks, the level of experience of the development team, and any potential
technical challenges that may need to be addressed.
2. Economic feasibility: This would involve evaluating the costs associated with
developing and maintaining the chatbot. This may include development costs, ongoing
maintenance and support costs, hosting costs, and any potential revenue or cost savings
that may result from the project.
3. Operational feasibility: This would involve assessing whether the chatbot can be
integrated into existing business processes and workflows. Considerations may include
the availability of data and APIs required by the chatbot, and whether it can be easily
integrated with other software and systems.
4. User acceptance: This would involve assessing the likely acceptance of the chatbot by
end users. This may involve conducting user surveys or focus groups to gather feedback
on the proposed chatbot and its features.
 11

ER-DIAGRAM
 12

DATA FLOW DIAGRAM (DFD)

 13

SOURCE CODE

There are many files are created for differciate the source code of different
programming languages.
SUCH AS:-
1. index.html
2. index.js
3. style.css
4. constant.js
5. speech.js
 14

Code of index.html:-
<!DOCTYPE html>
<html>

<head>
<title>Chatbot</title>
<link rel="icon" href="bot.png" />
<link rel="stylesheet" href="style.css" />
<style>
body {
background-image: url("projectbg.jpg");
background-size:cover;
}
</style>
</head>

<body>
<button>Jarvis Chatbot</button>
<div id="container" class="container">
<div id="chat" class="chat">
<div id="messages" class="messages"></div>
<div id="input-container" class="input-container">
<input id="input" type="text" placeholder="Say something..." autocomplete="off"
autofocus="true" />
</div>
</div>
<img src="bot2.png" alt="Robot cartoon" height="500vh">
</div>
</body>
<script type="text/javascript" src="index.js" ></script>
<script type="text/javascript" src="constants.js" ></script>
<script type="text/javascript" src="speech.js" ></script>

</html>
 15

Code of index.js:-

document.addEventListener("DOMContentLoaded", () => {
const inputField = document.getElementById("input");
inputField.addEventListener("keydown", (e) => {
if (e.code === "Enter") {
let input = inputField.value;
inputField.value = "";
output(input);
}
});
});

function output(input) {
let product;

// Regex remove non word/space chars

// Trim trailing whitespce
// Remove digits - not sure if this is best
// But solves problem of entering something like 'hi1'

let text = input.toLowerCase().replace(/[^\w\s]/gi, "").replace(/[\d]/gi, "").trim();

text = text
.replace(/ a /g, " ") // 'tell me a story' -> 'tell me story'
.replace(/i feel /g, "")
.replace(/whats/g, "what is")
.replace(/please /g, "")
.replace(/ please/g, "")
.replace(/r u/g, "are you");

if (compare(prompts, replies, text)) {

// Search for exact match in `prompts`
product = compare(prompts, replies, text);
} else if (text.match(/thank/gi)) {
product = "You're welcome!"
} else if (text.match(/(corona|covid|virus)/gi)) {
// If no match, check if message contains `coronavirus`
product = coronavirus[Math.floor(Math.random() * coronavirus.length)];
} else {
// If all else fails: random alternative
product = alternative[Math.floor(Math.random() * alternative.length)];
}

// Update DOM
addChat(input, product);
}
 16

function compare(promptsArray, repliesArray, string) {

let reply;
let replyFound = false;
for (let x = 0; x < promptsArray.length; x++) {
for (let y = 0; y < promptsArray[x].length; y++) {
if (promptsArray[x][y] === string) {
let replies = repliesArray[x];
reply = replies[Math.floor(Math.random() * replies.length)];
replyFound = true;
// Stop inner loop when input value matches prompts
break;
}
}
if (replyFound) {
// Stop outer loop when reply is found instead of interating through the entire array
break;
}
}
return reply;
}

function addChat(input, product) {

const messagesContainer = document.getElementById("messages");

let userDiv = document.createElement("div");

userDiv.id = "user";
userDiv.className = "user response";
userDiv.innerHTML = `<img src="useravtar.png" class="avatar"><span>${input}</span>`;
messagesContainer.appendChild(userDiv);

let botDiv = document.createElement("div");

let botImg = document.createElement("img");
let botText = document.createElement("span");
botDiv.id = "bot";
botImg.src = "bot-mini.png";
botImg.className = "avatar";
botDiv.className = "bot response";
botText.innerText = "Typing...";
botDiv.appendChild(botText);
botDiv.appendChild(botImg);
messagesContainer.appendChild(botDiv);
// Keep messages at most recent
messagesContainer.scrollTop = messagesContainer.scrollHeight - messagesContainer.clientHeight;

// Fake delay to seem "real"

setTimeout(() => {
botText.innerText = `${product}`;
textToSpeech(product)
 17

}, 2000
)

}
 18

Code of style.css:-

*{
box-sizing: border-box;
}
html {
height: 100%;

button {
display: inline-block;
position: relative;
position:fixed;
color: #19aae6;
background: #ffffff;
font-family: inherit;
font-weight: 500;
font-size: 17px;
padding: 16px 24px;
margin: 100px;
margin-left: 30%;
border: 2px solid #19aae6;
border-radius: 8px;
z-index: 1;
overflow: hidden;
transition: 0.1s;
width: auto;
}
button::before {
content: "";
position: absolute;
background: #19aae6;
height: 150px;
width: 200px;
border-radius: 50%;
z-index: -1;
}
button:hover {
color: #ffffff;
}
button::before{
top: 100%;
left: 100%;
transition: 0.7s;
}
 19

button:hover::before{
top: -30px;
left: -30px;
}
button:active::before{
background: #3a0ca3;
transition: 0s;
}

body {
font-family: 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', Arial, Helvetica,
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: rgba(99, 101, 174, 0.5);
height: 100%;
margin: 0;
}

span {
padding-right: 15px;
padding-left: 15px;
}

.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}

.chat {
height: 350px;
width: 50vw;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

::-webkit-input-placeholder {
color: .711
}

input {
border: 0;
 20

padding: 15px;
margin-left: auto;
border-radius: 10px;
}

.messages {
display: flex;
flex-direction: column;
overflow: scroll;
height: 90%;
width: 100%;
background-color: white;
padding: 15px;
margin: 15px;
border-radius: 10px;
}

#bot {
margin-left: auto;
}

.bot {
font-family: Consolas, 'Courier New', Menlo, source-code-pro, Monaco,
monospace;
}

.avatar {
height: 25px;
}

.response {
display: flex;
align-items: center;
margin: 1%;
}

/* Mobile */

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

.container {
flex-direction: column;
justify-content: flex-start;
}
.chat {
width: 75vw;
margin: 10vw;
}
}
 21

Code of constants.js:-
// Options the user could type in
const prompts = [
[""],
["hi", "hey", "hello", "good morning", "good afternoon"],
["how are you", "how is life", "how are things"],
["what are you doing", "what is going on", "what is up"],
["how old are you"],
["who are you", "are you human", "are you bot", "are you human or bot"],
["who created you", "who made you"],
[
"your name please",
"your name",
"may i know your name",
"what is your name",
"what call yourself"
],
["i love you"],
["happy", "good", "fun", "wonderful", "fantastic", "cool"],
["bad", "bored", "tired", "No"],
["help me", "tell me story", "tell me joke"],
["ah", "yes", "ok", "okay", "nice"],
["bye", "good bye", "goodbye", "see you later"],
["what should i eat today"],
["bro"],
["what is team m"],
["what", "why", "how", "where", "when"],
["no","not sure","maybe","no thanks"],
["what is computer"],
["what is keyboard"],
["what is monitor"],
["what is cpu", "what is central processing unit"],
["what is mouse"],
["what is printer"],
["vallabh deshpande", "who is vallabh deshpande"],
["who is leader of team","who is your team leader","team leader name"],
["tell me a joke in marathi","marathi joke"],
["details of bcs","deails of computer science","details of cs"],
["haha","ha","lol","hehe","funny","joke"]

// Possible responses, in corresponding order

const replies = [
["hi,i'm chatbot.."],
["Hello!", "Hi!", "Hey!", "Hi there!","Howdy"],
 22

[
"Fine... how are you?",
"Pretty well, how are you?",
"Fantastic, how are you?"
],
[
"Nothing much",
"About to go to sleep",
"Can you guess?",
"I don't know actually"
],
["I am infinite"],
["I am just a bot", "I am a bot. What are you?"],
["TEAM m"],
["My name is Jarvis"],
["I love you too", "Me too"],
["Have you ever felt bad?", "Glad to hear it"],
["Why?", "Why? You shouldn't!", "Try watching TV"],
["What about?", "Once upon a time..."],
["Tell me a story", "Tell me a joke", "Tell me about yourself"],
["Bye", "Goodbye", "See you later"],
["Pizza","gujrati thali"],
["Bro!"],
["TEAM m is collection of three students."],
["Great question"],
["That's ok","I understand","What do you want to talk about?"],
["A computer is a device that accepts information (in the form of digitalized data) and manipulates it for
some result based on a program, software, or sequence of instructions on how the data is to be
processed."],
["A computer keyboard is a peripheral input device modeled after the typewriter keyboard which uses an
arrangement of buttons or keys to act as mechanical levers or electronic switches."],
["A computer monitor is an output device that displays information in pictorial or textual form. A discrete
monitor comprises a visual display, support electronics, power supply, housing, electrical connectors, and
external user controls."],
["A central processing unit, also called a central processor, main processor or just processor, is the
electronic circuitry that executes instructions comprising a computer program. The CPU performs basic
arithmetic, logic, controlling, and input/output operations specified by the instructions in the program."],
["A computer mouse is a hand-held pointing device that detects two-dimensional motion relative to a
surface. This motion is typically translated into the motion of a pointer on a display, which allows a
smooth control of the graphical user interface of a computer."],
["In computing, a printer is a peripheral machine which makes a persistent representation of graphics or
text, usually on paper. While most output is human-readable, bar code printers are an example of an
expanded use for printers."],
["a great person","a team leader"],
["it's vallabh deshpande :)"],
["दोन वेडे घराच्या छतावर झोपलेले असतात.(तेवढ्यात पाऊस सुरू होतो.)पहहला वेडा : घरात जाऊन
झोपू…आकाशाला भोक पडलय वाटतं.(तेवढ्यात वीज चमकते.)दु सरा वेडा : चल झोप…वेल्डं गवालेसुद्धा आलेत
वाटतं."],
 23

["BCS stands for Bachelor of Computer Science. It is an undergraduate academic degree in the field of
computer science. The program usually takes 4 years to complete and covers a wide range of computer
science topics including programming, algorithms, data structures, computer architecture, database
systems, software engineering, computer networks, and more."],
["Haha!","Good one!"]
]

// Random for any other user input

const alternative = [

"I don't understand :/",

"I don't know about it, try with simple question :|"
]

// Whatever else you want :)

const coronavirus = ["Please stay home", "Wear a mask", "These are uncertain times"]
 24

Code of speech.js:-

// Text to Speech

const synth = window.speechSynthesis;

const textToSpeech = (string) => {

let voice = new SpeechSynthesisUtterance(string);
voice.text = string;
voice.lang = "en-IN","mr-IN";
voice.volume = 1;
voice.rate = 1;
voice.pitch = 1; // Can be 0, 1, or 2
synth.speak(voice);
}
 25

SCREENSHOTS
26
 27

SCOPE OF THE SYSTEM

The scope of a chatbot project using HTML, CSS, and JavaScript will depend on
the specific goals and requirements of the project. However, some possible
features and functionalities that could be included in a chatbot system are:
Chat Interface: A chat interface allows users to interact with the chatbot. This
interface can be designed using HTML and styled using CSS.
Response Generation: Once the chatbot understands the user's intent, it needs
to generate an appropriate response. Response generation can be done using pre-
defined templates or dynamically generated based on the user's input. JavaScript
can be used for implementing response generation.
Integration with Backend Services: Depending on the requirements of the
project, the chatbot may need to integrate with external APIs or databases. This
can be achieved using JavaScript.
Multi-lingual Support: If the chatbot needs to support multiple languages, it
can be implemented using JavaScript and CSS for language switching and
translation.
Personalization: Chatbots can be personalized based on user input or
behavior. This can be implemented using JavaScript and CSS.
Analytics: It's essential to track user behavior and usage patterns of the
chatbot. Analytics can be implemented using JavaScript.
Overall, the scope of a chatbot project using HTML, CSS, and JavaScript can
range from simple chatbots with limited functionality to complex chatbots that
require integration with external systems and advanced NLP capabilities.
 28

CONCLUSION
In conclusion, a chatbot project using HTML, CSS and JavaScript has a wide scope of
functionalities and features that can be implemented to meet specific project requirements.
The project success relies heavily on the proper implementation of natural language
processing, response generation, and integration with backend services. The chatbot’s user
interface is also essential, requiring a well-designed chat interface that interface that can be
easily navigated by the user. Personalization. Multi-lingual support, and analytics are
additional features that can add value to the chatbot and enhance the user experience. The
scope of the project can range from simple chatbots to complex chatbots with advanced
capabilities, and the project’s success will depend on how well the requirements are met and
HTML,CSS, JavaScript can be a valuable asset of business and organizations, providing
efficient and effective customer service and improving engagement with users.
 29

REFERENCE

As an AI language model, I am not able to provide specific references for a project

without knowing the specific details and requirements of the project. However, in general,
when creating a project using HTML, CSS, and JavaScript, it's essential to ensure that you use
reliable sources to ensure best practices and maintain code quality. Some recommended
resources include:
Mozilla Developer Network: This is a comprehensive resource for web developers,
which provides documentation, guides, and tutorials on HTML, CSS, and JavaScript.
W3Schools: A popular online resource for learning web development, offering a wide
range of tutorials and guides on HTML, CSS, and JavaScript.
Stack Overflow: A popular forum for asking and answering questions related to web
development, where you can find solutions to common problems and connect with other
developers.
Online courses: Platforms like Udemy and Great Learning offer online courses on web
development that cover topics like HTML, CSS, and JavaScript.
It's important to cite any resources or references used in the project to give credit to the
original source and avoid plagiarism.
Internet Sources:-
www.w3school.com
www.kashipara.com