Skip to content

Commit 5156223

Browse files
hegdepavankumarhegdepavankumar
committed
chatbot
0 parents  commit 5156223

6 files changed

Lines changed: 261 additions & 0 deletions

File tree

‎.vscode/settings.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"editor.tabCompletion": "on",
3+
"diffEditor.codeLens": true
4+
}

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# My_Chatbot

‎chatbot.js‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
// Get chatbot elements
2+
const chatbot = document.getElementById('chatbot');
3+
const conversation = document.getElementById('conversation');
4+
const inputForm = document.getElementById('input-form');
5+
const inputField = document.getElementById('input-field');
6+
7+
// Add event listener to input form
8+
inputForm.addEventListener('submit', function(event) {
9+
// Prevent form submission
10+
event.preventDefault();
11+
12+
// Get user input
13+
const input = inputField.value;
14+
15+
// Clear input field
16+
inputField.value = '';
17+
const currentTime = new Date().toLocaleTimeString([], { hour: '2-digit', minute: "2-digit" });
18+
19+
// Add user input to conversation
20+
let message = document.createElement('div');
21+
message.classList.add('chatbot-message', 'user-message');
22+
message.innerHTML = `<p class="chatbot-text" sentTime="${currentTime}">${input}</p>`;
23+
conversation.appendChild(message);
24+
25+
// Generate chatbot response
26+
const response = generateResponse(input);
27+
28+
// Add chatbot response to conversation
29+
message = document.createElement('div');
30+
message.classList.add('chatbot-message','chatbot');
31+
message.innerHTML = `<p class="chatbot-text" sentTime="${currentTime}">${response}</p>`;
32+
conversation.appendChild(message);
33+
message.scrollIntoView({behavior: "smooth"});
34+
});
35+
36+
// Generate chatbot response function
37+
function generateResponse(input) {
38+
// Add chatbot logic here
39+
const responses = [
40+
"Hello, how can I help you today? 😊",
41+
"I'm sorry, I didn't understand your question. Could you please rephrase it? 😕",
42+
"I'm here to assist you with any questions or concerns you may have. 📩",
43+
"I'm sorry, I'm not able to browse the internet or access external information. Is there anything else I can help with? 💻",
44+
"What would you like to know? 🤔",
45+
"I'm sorry, I'm not programmed to handle offensive or inappropriate language. Please refrain from using such language in our conversation. 🚫",
46+
"I'm here to assist you with any questions or problems you may have. How can I help you today? 🚀",
47+
"Is there anything specific you'd like to talk about? 💬",
48+
"I'm happy to help with any questions or concerns you may have. Just let me know how I can assist you. 😊",
49+
"I'm here to assist you with any questions or problems you may have. What can I help you with today? 🤗",
50+
"Is there anything specific you'd like to ask or talk about? I'm here to help with any questions or concerns you may have. 💬",
51+
"I'm here to assist you with any questions or problems you may have. How can I help you today? 💡",
52+
];
53+
54+
// Return a random response
55+
return responses[Math.floor(Math.random() * responses.length)];
56+
}
57+
58+
//window.onblur = function (tabs) {
59+
//alert('trying to switch tabs eh !');
60+
//};
61+
62+

‎index.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Ask Your Questions!</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="chatbot-container">
12+
<div id="header">
13+
<h1>Chatbot</h1>
14+
</div>
15+
<div id="chatbot">
16+
<div id="conversation">
17+
<div class="chatbot-message">
18+
<p class="chatbot-text">Hi! I,m Pavankumar👋 it's great to see you!</p>
19+
</div>
20+
</div>
21+
<form id="input-form">
22+
<message-container>
23+
<input id="input-field" type="text" placeholder="Type your message here">
24+
<button id="submit-button" type="submit">
25+
<img class="send-icon" src="send-message.png" alt="">
26+
</button>
27+
</message-container>
28+
29+
</form>
30+
</div>
31+
32+
</div>
33+
34+
<script src="chatbot.js"></script>
35+
</body>
36+
37+
<div>
38+
<p>Copyright © 2023 Mr.Pavankumar. All Rights are reserved</p>
39+
</div>
40+
41+
</html>

‎send-message.png‎

882 Bytes
Loading

‎style.css‎

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
body {
2+
display: flex;
3+
justify-content: center;
4+
}
5+
6+
.chatbot-container {
7+
width: 500px;
8+
margin: 0 auto;
9+
background-color: #f8e0e0;
10+
border: 1px solid #0a0101;
11+
border-radius: 5px;
12+
box-shadow: 0 2px 4px rgba(39, 8, 214, 0.1);
13+
}
14+
15+
#chatbot {
16+
background-color: #47788b;
17+
border: 1px solid #000000;
18+
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
19+
border-radius: 4px;
20+
}
21+
22+
#header {
23+
background-color: rgb(93, 109, 109);
24+
color: #ffffff;
25+
padding: 20px;
26+
font-size: 1em;
27+
font-weight: bold;
28+
}
29+
30+
message-container {
31+
background: #9aa171;
32+
width: 100%;
33+
display: flex;
34+
align-items: center;
35+
}
36+
37+
38+
#conversation {
39+
height: 400px;
40+
overflow-y: auto;
41+
padding: 20px;
42+
display: flex;
43+
flex-direction: column;
44+
}
45+
46+
@keyframes message-fade-in {
47+
from {
48+
opacity: 0;
49+
transform: translateY(-20px);
50+
}
51+
to {
52+
opacity: 1;
53+
transform: translateY(0);
54+
}
55+
}
56+
57+
.chatbot-message {
58+
display: flex;
59+
align-items: flex-start;
60+
position: relative;
61+
font-size: 16px;
62+
line-height: 20px;
63+
border-radius: 20px;
64+
word-wrap: break-word;
65+
white-space: pre-wrap;
66+
max-width: 100%;
67+
padding: 0 15px;
68+
}
69+
70+
.user-message {
71+
justify-content: flex-end;
72+
}
73+
74+
75+
.chatbot-text {
76+
background-color: rgb(234, 237, 238);
77+
color: #000000;
78+
font-size: 1.1em;
79+
padding: 15px;
80+
border-radius: 5px;
81+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
82+
}
83+
84+
#input-form {
85+
display: flex;
86+
align-items: center;
87+
border-top: 1px solid #196bd6;
88+
}
89+
90+
#input-field {
91+
flex: 1;
92+
height: 60px;
93+
border: 1px solid #7f9bbe;
94+
border-radius: 4px;
95+
padding: 0 10px;
96+
font-size: 14px;
97+
transition: border-color 0.3s;
98+
background: #e9dce6;
99+
color: #000000;
100+
border: none;
101+
}
102+
103+
.send-icon {
104+
margin-right: 10px;
105+
cursor: pointer;
106+
}
107+
108+
#input-field:focus {
109+
border-color: #000000;
110+
outline: none;
111+
}
112+
113+
#submit-button {
114+
background-color: transparent;
115+
border: none;
116+
}
117+
118+
p[sentTime]:hover::after {
119+
content: attr(sentTime);
120+
position: absolute;
121+
top: -3px;
122+
font-size: 14px;
123+
color: gray;
124+
}
125+
126+
.chatbot p[sentTime]:hover::after {
127+
left: 15px;
128+
}
129+
130+
.user-message p[sentTime]:hover::after {
131+
right: 15px;
132+
}
133+
134+
135+
/* width */
136+
::-webkit-scrollbar {
137+
width: 10px;
138+
}
139+
140+
/* Track */
141+
::-webkit-scrollbar-track {
142+
background: #f1f1f1;
143+
}
144+
145+
/* Handle */
146+
::-webkit-scrollbar-thumb {
147+
background: #888;
148+
}
149+
150+
/* Handle on hover */
151+
::-webkit-scrollbar-thumb:hover {
152+
background: #555;
153+
}

0 commit comments

Comments
 (0)