add responsiveness

Author: devxprite

README.md

@@ -0,0 +1 @@
+coming soon ...

index.js

@@ -198,8 +198,8 @@ const sendAnswer = async (req, res) => {
       isFallback = true;
     } else if (action != "wikipedia") {
       responseText = responseText
-        .replace(/(\[NAME\])/g, developerName)
-        .replace(/(\[EMAIL\])/g, developerEmail)
+        .replace(/(\[DEVELOPER_NAME\])/g, developerName)
+        .replace(/(\[DEVELOPER_EMAIL\])/g, developerEmail)
         .replace(/(\[BUG_URL\])/g, bugReportUrl);
     }
 
@@ -243,6 +243,5 @@ app.get("/api/welcome", sendWelcomeMessage);
 app.get("/api/allQuestions", sendAllQuestions);
 app.use(serveStatic(path.join(__dirname, "public")));
 app.get("*", notFound);
-app.get("");
 
 app.listen(port, () => console.log(`app listening on port ${port}!`));

intents/support.json

@@ -18,9 +18,7 @@
       "I want to contact your developers by email",
       "your developers email"
     ],
-    "answers": [
-      "My developer email is [EMAIL]."
-    ]
+    "answers": ["My developer email is [DEVELOPER_EMAIL]."]
   },
   {
     "questions": [
@@ -58,7 +56,7 @@
       "who is your developer",
       "I said who made you tell me"
     ],
-    "answers": []
+    "answers": ["I am developed by [DEVELOPER_EMAIL]"]
   },
   {
     "questions": [
@@ -79,8 +77,6 @@
       "I need to report a bug that I've found in you",
       "send problem to developers"
     ],
-    "answers": [
-      "You can report your bug here."
-    ]
+    "answers": ["You can report your bug at [BUG_URL]."]
   }
 ]

public/index.html

@@ -7,19 +7,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>JavaScript ChatBot</title>
 
-  <link rel="apple-touch-icon" sizes="180x180" href="./assets/apple-touch-icon.png" />
-  <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png" />
-  <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon-16x16.png" />
-  <link rel="manifest" href="./site.webmanifest" />
-
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 
   <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap"
     rel="stylesheet" />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;1,100;1,200;1,300;1,400&display=swap"
-    rel="stylesheet" />
 
   <link rel="stylesheet" href="./src/css/normalize.min.css" />
   <link rel="stylesheet" href="./src/css/sweetalert2.dark.min.css" />
@@ -36,7 +28,7 @@ <h2>JavaScript ChatBot</h2>
       <p class="typing">bot is typing. . .</p>
     </div>
     <div onclick="toogleShowQuestions()">
-      <div class="status"></div>
+      <img src="./src/images/chat_icon.png" alt="" srcset="">
     </div>
   </header>
 

public/src/css/app.css

@@ -34,6 +34,11 @@ header {
   box-shadow: #000 2px 0px 4px;
   justify-content: space-around;
   transition: all 1s;
+  font-family: "Comfortaa", cursive;
+}
+
+header h2 {
+  font-size: 1.35em;
 }
 
 .typing {
@@ -42,6 +47,10 @@ header {
   display: none;
 }
 
+body > header > div:nth-child(2) > img {
+  width: 2em;
+}
+
 .status {
   width: 0.6em;
   height: 0.6em;
@@ -127,6 +136,7 @@ section.all-questions .question:nth-child(1) {
   border-radius: 0.4em;
   box-shadow: #000 2px 2px 6px;
   font-size: 14px;
+  background: linear-gradient(223deg, #616161, #454545);
 }
 
 .question p::selection {
@@ -141,7 +151,7 @@ footer {
   position: fixed;
   bottom: 0;
   width: 100vw;
-  height: 3.5em;
+  height: 3em;
   display: flex;
   align-items: center;
   box-shadow: #000 -2px 0px 4px 1px;
@@ -223,6 +233,15 @@ footer {
   }
 }
 
+@media screen and (max-width: 680px) {
+  div p{
+    font-size: 14px;
+  }
+  .chat-input{
+    font-size: 14px;
+  }
+}
+
 @-webkit-keyframes sk-bouncedelay {
   0%,
   80%,

public/src/images/chat_icon.png

@@ -102,10 +102,12 @@ window.onresize = () => {
 const toogleShowQuestions = () => {
   if ($("main").css("display") == "none") {
     $("section.all-questions").hide();
+    $("header img").attr("src", "./src/images/chat_icon.png");
     $("main").show();
     $("footer").show();
   } else {
     $("section.all-questions").css("display", "flex");
+    $("header img").attr("src", "./src/images/close.png");
     $("main").hide();
     $("footer").hide();
   }