Skip to content

Commit dcd989b

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1882 from Parul1606/test
Chatbot
2 parents a71487f + 9616b4d commit dcd989b

14 files changed

Lines changed: 250 additions & 406 deletions

‎Projects/ChatBot/README.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
# Chatbot
2+
3+
Welcome to Simple Chatbot! This is a basic chatbot application built using HTML, CSS, JavaScript, and integrated with the GPT API. The purpose of this project is to demonstrate how to create a functional chatbot interface using common web technologies and leverage the power of the GPT API to generate human-like responses to user inputs.
4+
5+
Tech Stack Used:
6+
HTML: Used for creating the structure of the chatbot interface and defining its elements.
7+
8+
CSS: Employed for styling the chatbot interface, making it visually appealing and user-friendly.
9+
10+
JavaScript: The core programming language used to implement the chatbot's functionality, handle user interactions, and communicate with the GPT API.
11+
12+
GPT API: Integrated the GPT (Generative Pre-trained Transformer) API provided by OpenAI to generate responses to user messages based on the input data.
13+
14+
Want to Clone it?
15+
16+
![Screenshot (67)](https://github.com/Parul1606/Chatbot/assets/80768852/183cf8fc-c97d-48ef-a30d-6fd3d6ce4d81)
17+
![Screenshot (68)](https://github.com/Parul1606/Chatbot/assets/80768852/90e62ff1-abe0-44ba-a33b-d758a7609f14)
18+
![Screenshot (69)](https://github.com/Parul1606/Chatbot/assets/80768852/518c2173-8468-40be-9199-c447408a5a14)

‎Projects/ChatBot/favicon_io/android-chrome-192x192.png‎

12.1 KB
Loading

‎Projects/ChatBot/favicon_io/android-chrome-512x512.png‎

31.7 KB
Loading

‎Projects/ChatBot/favicon_io/apple-touch-icon.png‎

10.7 KB
Loading

‎Projects/ChatBot/favicon_io/favicon-16x16.png‎

749 Bytes
Loading

‎Projects/ChatBot/favicon_io/favicon-32x32.png‎

1.58 KB
Loading

‎Projects/ChatBot/favicon_io/favicon.ico‎

15 KB
Binary file not shown.

‎Projects/ChatBot/images/chatbot.png‎

-73.6 KB
Binary file not shown.

‎Projects/ChatBot/images/user.png‎

-26.9 KB
Binary file not shown.

‎Projects/ChatBot/index.html‎

Lines changed: 28 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,36 @@
11
<!DOCTYPE html>
22
<html lang="en" dir="ltr">
33
<head>
4-
<meta charset="utf-8">
5-
<title>ChatGPT Clone</title>
6-
<link rel="stylesheet" href="style.css">
4+
<meta charset="UTF-8">
75
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8-
<link rel="stylesheet"
9-
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
10-
<script src="script.js" defer></script>
6+
<title>JS Chatbot | CodeJunkie</title>
7+
<link rel="stylesheet" href="style.css">
8+
<link rel="icon" type="image/x-icon" href="./favicon_io/favicon-32x32.png">
9+
<!--Google fonts link for icons-->
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
11+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,1,0" />
1112
</head>
12-
13-
<body>
14-
<div class="chat-container"></div>
15-
<div class="typing-container">
16-
<div class="typing-content">
17-
<div class="typing-textarea">
18-
<textarea id="chat-input" spellcheck="false" placeholder="Enter a prompt here" required></textarea>
19-
<span id="send-btn" class="material-symbols-rounded">send</span>
20-
</div>
21-
<div class="typing-controls">
22-
<span id="theme-btn" class="material-symbols-rounded">light_mode</span>
23-
<span id="delete-btn" class="material-symbols-rounded">delete</span>
24-
</div>
13+
<body class="show-chatbot">
14+
<button class="chatbot-toggler">
15+
<span class="material-symbols-outlined">mode_comment</span>
16+
<span class="material-symbols-outlined">close</span>
17+
</button>
18+
<div class="chatbot">
19+
<header>
20+
<h2>Chatbot</h2>
21+
<span class="close-btn material-symbols-outlined">close</span>
22+
</header>
23+
<ul class = "chatbox">
24+
<li class = "chat incoming">
25+
<span class="material-symbols-outlined">smart_toy</span>
26+
<p>Hi there 👋🏼 <br> How may I help you?</p>
27+
</li>
28+
</ul>
29+
<div class="chat-input">
30+
<textarea placeholder="Enter a meesage..." spellcheck="false" required></textarea>
31+
<span id = "send-btn" class="material-symbols-rounded">send</span>
2532
</div>
26-
33+
</div>
34+
<script type="text/javascript" src="script.js"></script>
2735
</body>
28-
2936
</html>

0 commit comments

Comments
 (0)