Add LESS

Author: devxprite

public/index.html

@@ -10,14 +10,9 @@
   <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 rel="stylesheet" href="./src/css/normalize.min.css" />
-  <link rel="stylesheet" href="./src/css/sweetalert2.dark.min.css" />
-  <link rel="stylesheet" href="./src/css/app.css" />
-
-  <script src="https://kit.fontawesome.com/7b4d67b6f2.js"></script>
+  <link rel="stylesheet" href="./src/styles/normalize.min.css" />
+  <link rel="stylesheet/less" type="text/css" href="./src/styles/styles.less" />
+  <script src="./src/javascript/less.js"></script>
 
 </head>
 
@@ -27,8 +22,8 @@
       <h2>JavaScript ChatBot</h2>
       <p class="typing">bot is typing. . .</p>
     </div>
-    <div onclick="toogleShowQuestions()">
-      <img src="./src/images/chat_icon.png" alt="" srcset="">
+    <div id="toogle-chat" >
+      <img src="./src/images/chat_icon.png" class="suggest-chat" >
     </div>
   </header>
 
@@ -43,6 +38,8 @@ <h3>JavaScript ChatBot</h3>
   </div>
 
   <section class="all-questions">
+    <h2>Suggested Chats</h2>
+    <div class="questions container"></div>
   </section>
 
   <footer>
@@ -58,9 +55,7 @@ <h3>JavaScript ChatBot</h3>
   </footer>
 
   <script src="./src/javascript/jquery.min.js"></script>
-  <script src="./src/javascript/sweetalert2.min.js"></script>
   <script src="./src/javascript/typed.min.js"></script>
-  <script src="./src/javascript/notyf.min.js"></script>
   <script src="./src/javascript/app.js"></script>
 </body>
 

public/src/css/app.css

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 // submit form
 const submitForm = () => {
   const chatInput = $(".chat-input").val();
@@ -46,8 +47,6 @@ window.onload = () => {
     if (document.querySelectorAll(".chat-msg-box").length == 0) {
       $.ajax({
         url: "./api/welcome",
-        method: "GET",
-        cache: false,
         beforeSend: () => {
           $(".typing").show();
           $("main").append(`
@@ -78,10 +77,10 @@ window.onload = () => {
   }, 3000);
 
   $.ajax({
-    url: "./api/allquestions",
+    url: "http://javascript-chatbot.vercel.app/api/allquestions",
     success: (data) => {
       data.forEach((qus) => {
-        $("section.all-questions").append(`
+        $(".questions.container").append(`
         <div class="question">
           <p>${qus}</p>
         </div>
@@ -101,18 +100,22 @@ window.onresize = () => {
 
 const toogleShowQuestions = () => {
   if ($("main").css("display") == "none") {
-    $("section.all-questions").hide();
+    $(".questions.container").hide();
     $("header img").attr("src", "./src/images/chat_icon.png");
     $("main").show();
     $("footer").show();
   } else {
-    $("section.all-questions").css("display", "flex");
+    $(".questions.container").css("display", "flex");
     $("header img").attr("src", "./src/images/close.png");
     $("main").hide();
     $("footer").hide();
   }
 };
 
+$("#toogle-chat").on("click", () => {
+  toogleShowQuestions();
+});
+
 $("#chat-form").submit((e) => {
   e.preventDefault();
   submitForm();