Welcome to wearetoday.in blog managed by TechHandlers. In this blog, we will learn how to create Chatbot Using HTML, CSS, JavaScript. I hope you will enjoy this blog so let’s initiate with a basic HTML structure for the Chatbot.

This is the chat bot app created by TECHHANDLERS using HTML, CSS, JavaScript

HTML Snippets:

Table of Contents

Ask Your Question??

Yeah,ask Some Question

Answer Appearing Here

Designed by: TechHandlers

<!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 || TechnicalHandlers</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 Appearing Here</p>
  <h5>Designed by: TechHandlers</h5>
    </div>
    <script src="app.js"></script>
  </body>
</html>

CSS Properties:

CSS properties determine a characteristic or aspect to be enforced to an HTML element. Examples include: background-color, border-width, margin, padding and font-style.

“CSS is the design language of the web, and it’s not an easy to use it as it ought to be, and it can be confusing, especially if you are new to it.”

CSS Snippets:

//folder name is style.css
* {
    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;
    }
    h5{color: blueviolet;}
    .glass {
    width: 500px;
    height:400px;
    background-color: rgba(234, 230, 230, 0.1);
    padding: 50px;
    color: rgb(0, 0, 0);
    border-radius: 9px;
    backdrop-filter: blur(50px);
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: 10px 10px 10px rgba(75, 92, 114, 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;
    }

JavaScript:

JavaScript is a Scripting language that enables you to create dynamically updating content, animating images, controlling multimedia, and pretty much everything else. JavaScript makes web pages dynamic. It’s a text-based programming language.

function talk(){
    var know = {
    "Who are you" : "Hello, This is TechnicalHandlers  ",
    "How are you" : "Good :)",
    "What can i do for you" : "Please Subscribe our channel and give follow and like in Instagram.",
    "Your followers" : "I have my family members, i don't have follower ,have supportive Family ",
    "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>";
    }
    }

Links to follow for more Information:

Instagram: TechHandlers (@techhandlers)

Telegram: https://t.me/techhandlers

Youtube: Tech Handlers – YouTube