Chatbot Javascript | How To Build A Chatbot From Scratch In Javascript

Chatbot Javascript | How To Build A Chatbot From Scratch In Javascript

Chatbot Javascript | How To Build A Chatbot From Scratch In Javascript


Welcome🎉 to Code With Random blog. In this blog, we learn how we create Chatbot Javascript. We use HTML, Css, and javascript for this Chatbot Javascript. I hope you enjoy our blog so let's start with a basic HTML structure for the Chatbot Javascript.

HTML Code

 <!DOCTYPE html>  
 <html lang="en">  
  <head>  
   <meta charset="UTF-8" />  
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />  
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
   <title>Chatbot Javascript </title>  
   <link rel="stylesheet" href="style.css" />  
  </head>  
  <body>  
   <div class="glass">  
    <h1>Ask Your Question??</h1>  
    <h2>Yeah,ask Some Question</h2>  
    <div class="input">  
     <input  
      type="text"  
      id="userBox"  
      onkeydown="if(event.keyCode == 13){ talk()}"  
      placeholder="Type your Question"  
     />  
    </div>  
    <p id="chatLog">Answer Appering Hear</p>  
   </div>  
   <script src="app.js"></script>  
  </body>  
 </html>  
There is all the HTML code for the Chatbot Javascript. Now, you can see an output with CSS, then we write javascript for the Chatbot Javascript.
output
Chatbot Javascript | How To Build A Chatbot From Scratch In Javascript

CSS code

 * {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
 }  
 body {  
  width: 100vw;  
  height: 100vh;  
  font-family: sans-serif;  
  padding: 10em 10em;  
  background: url(./bg.jpg);  
  opacity: 0.5;  
  background-position: center;  
  background-repeat: no-repeat;  
  background-position: 100% 20%;  
  background-size: cover;  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
 }  
 .glass {  
  width: 500px;  
  height: 400px;  
  background-color: rgba(255, 255, 255, 0.1);  
  padding: 50px;  
  color: #000;  
  border-radius: 9px;  
  backdrop-filter: blur(50px);  
  border: 2px solid transparent;  
  background-clip: padding-box;  
  box-shadow: 10px 10px 10px rgba(45, 55, 68, 0.3);  
  line-height: 1.5;  
  transform: translatey(-5%);  
  transition: transform 0.5s;  
 }  
 .glass-1 {  
  width: 500px;  
  height: 400px;  
  background-color: rgba(255, 255, 255, 0.1);  
  padding: 50px;  
  color: rgb(122, 82, 82);  
  border-radius: 9px;  
  backdrop-filter: blur(50px);  
  border: 2px solid transparent;  
  background-clip: padding-box;  
  box-shadow: 10px 10px 10px rgba(45, 55, 68, 0.3);  
  line-height: 1.5;  
  transform: translatey(-5%);  
  transition: transform 0.5s;  
  font-size: 1.7rem;  
 }  
 .glass h1 {  
  font-size: 1.5rem;  
  text-align: center;  
 }  
 .glass h2 {  
  font-size: 1rem;  
  margin-top: 20px;  
 }  
 .input {  
  width: 100%;  
  height: 70px;  
  overflow: hidden;  
  margin-top: 40px;  
 }  
 .input input {  
  width: 100%;  
  height: 70px;  
  border: none;  
  padding-left: 30px;  
  padding-top: 0;  
  outline: none;  
  font-size: 1.5rem;  
  border-radius: 20px;  
 }  
 .glass p {  
  font-size: 1.6rem;  
  margin-top: 30px;  
 }  
Css Updated output
Chatbot Javascript | How To Build A Chatbot From Scratch In Javascript

Javascript code 

 function talk(){  
   var know = {  
    "Who are you" : "Hello, Codewith_random here 💙",  
    "How are you" : "Good :)",  
    "What can i do for you" : "Please Give us A Follow & Like.",  
    "Your followers" : "I have my family of 5000 members, i don't have follower ,have supportive Famiy👪 ",  
    "ok" : "Thank You So Much ",  
    "Bye" : "Okay! Will meet soon.."  
   };  
   var user = document.getElementById('userBox').value;  
    document.getElementById('chatLog').innerHTML = user + "<br>";  
   if (user in know) {  
    document.getElementById('chatLog').innerHTML = know[user] + "<br>";  
   }else{  
    document.getElementById('chatLog').innerHTML = "Sorry,I didn't understand <br>";  
   }  
  }  
Final output
Chatbot Javascript | How To Build A Chatbot From Scratch In Javascript

Chatbot Javascript | How To Build A Chatbot From Scratch In Javascript


Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the Chatbot Javascript. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create Chatbot Javascript using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by - Code With Random/Anki 

Post a Comment

Previous Post Next Post