├── README.md
├── app.js
├── images
├── chatbot.png
├── cwt.jpg
└── send.svg
├── index.html
├── response.js
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | Detailed Explanation Video :https://youtu.be/C2bKXt1yuPE
2 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | const chatBody = document.querySelector(".chat-body");
2 | const txtInput = document.querySelector("#txtInput");
3 | const send = document.querySelector(".send");
4 |
5 | send.addEventListener("click", () => renderUserMessage());
6 |
7 | txtInput.addEventListener("keyup", (event) => {
8 | if (event.keyCode === 13) {
9 | renderUserMessage();
10 | }
11 | });
12 |
13 | const renderUserMessage = () => {
14 | const userInput = txtInput.value;
15 | renderMessageEle(userInput, "user");
16 | txtInput.value = "";
17 | setTimeout(() => {
18 | renderChatbotResponse(userInput);
19 | setScrollPosition();
20 | }, 600);
21 | };
22 |
23 | const renderChatbotResponse = (userInput) => {
24 | const res = getChatbotResponse(userInput);
25 | renderMessageEle(res);
26 | };
27 |
28 | const renderMessageEle = (txt, type) => {
29 | let className = "user-message";
30 | if (type !== "user") {
31 | className = "chatbot-message";
32 | }
33 | const messageEle = document.createElement("div");
34 | const txtNode = document.createTextNode(txt);
35 | messageEle.classList.add(className);
36 | messageEle.append(txtNode);
37 | chatBody.append(messageEle);
38 | };
39 |
40 | const getChatbotResponse = (userInput) => {
41 | return responseObj[userInput] == undefined
42 | ? "Please try something else"
43 | : responseObj[userInput];
44 | };
45 |
46 | const setScrollPosition = () => {
47 | if (chatBody.scrollHeight > 0) {
48 | chatBody.scrollTop = chatBody.scrollHeight;
49 | }
50 | };
51 |
--------------------------------------------------------------------------------
/images/chatbot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewelltech/chatbot-css-js-1/a77fbabe9f84f554ecda9475b0b3890ed4eb599c/images/chatbot.png
--------------------------------------------------------------------------------
/images/cwt.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/codewelltech/chatbot-css-js-1/a77fbabe9f84f554ecda9475b0b3890ed4eb599c/images/cwt.jpg
--------------------------------------------------------------------------------
/images/send.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Chatbot
8 |
9 |
10 |
11 |
12 |
13 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/response.js:
--------------------------------------------------------------------------------
1 | const responseObj = {
2 | hello: "Hey ! How are you doing ?",
3 | hey: "Hey! What's Up",
4 | today: new Date().toDateString(),
5 | time: new Date().toLocaleTimeString(),
6 | };
7 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | @import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Poppins:wght@200;300&display=swap");
2 | * {
3 | margin: 0;
4 | padding: 0;
5 | box-sizing: border-box;
6 | font-family: "Poppins", sans-serif;
7 | }
8 | body {
9 | background: #4b5c66;
10 | }
11 | .container {
12 | --light-color: #fff;
13 | height: 420px;
14 | width: 350px;
15 | background: var(--light-color);
16 | position: fixed;
17 | bottom: 50px;
18 | right: 10px;
19 | box-shadow: 0px 0px 15px 0px black;
20 | }
21 | .chat-header {
22 | height: 60px;
23 | display: flex;
24 | align-items: center;
25 | padding: 0px 30px;
26 | background-color: #0652c0;
27 | color: var(--light-color);
28 | font-size: 1.5rem;
29 | }
30 |
31 | .chat-header .logo {
32 | height: 35px;
33 | width: 35px;
34 | box-shadow: 0px 0px 10px 0px black;
35 | }
36 | .chat-header img {
37 | height: 100%;
38 | width: 100%;
39 | }
40 | .chat-header .title {
41 | padding-left: 10px;
42 | }
43 | .chat-body {
44 | height: 300px;
45 | display: flex;
46 | flex-direction: column;
47 | padding: 8px 10px;
48 | align-items: flex-end;
49 | overflow-y: auto;
50 | }
51 | .chat-input {
52 | height: 60px;
53 | display: flex;
54 | align-items: center;
55 | border-top: 1px solid #ccc;
56 | }
57 | .input-sec {
58 | flex: 9;
59 | }
60 | .send {
61 | flex: 1;
62 | padding-right: 4px;
63 | }
64 | #txtInput {
65 | line-height: 30px;
66 | padding: 8px 10px;
67 | border: none;
68 | outline: none;
69 | caret-color: black;
70 | font-size: 1rem;
71 | width: 100%;
72 | }
73 |
74 | .chatbot-message,
75 | .user-message {
76 | padding: 8px;
77 | background: #ccc;
78 | margin: 5px;
79 | width: max-content;
80 | border-radius: 10px 3px 10px 10px;
81 | }
82 | .chatbot-message {
83 | background: #0652c0;
84 | color: var(--light-color);
85 | align-self: flex-start;
86 | border-radius: 10px 10px 3px 10px;
87 | }
88 |
--------------------------------------------------------------------------------
17 | 
27 |