Thursday, June 30, 2022
Techiexpert.com
No Result
View All Result
  • Login
  • Register
Exclusive Videos
  • Tech news
  • Startup news
  • Artificial Intelligence
  • IOT
  • Big Data
  • Cloud
  • Data Analytics
  • Machine Learning
  • Blockchain
  • Social Media
  • Tech news
  • Startup news
  • Artificial Intelligence
  • IOT
  • Big Data
  • Cloud
  • Data Analytics
  • Machine Learning
  • Blockchain
  • Social Media
No Result
View All Result
TechiExpert
No Result
View All Result

How to make a chatbot using HTML

Srikanth by Srikanth
December 4, 2019
in Tech news
Reading Time: 7 mins read
Chatbot using HTML
203
SHARES
2.9k
VIEWS
Share on FacebookShare on Twitter

A chatbot is artificial intelligence (AI) software that can simulate a chat or a conversation with a user in natural language through websites, messaging applications, mobile apps, or through the telephone.

The importance of chatbot lies in the fact that it is often described as one of the most advanced, accurate, and pleasing expressions of interaction between humans and machines. However, from a technical point of view, a chatbot only represents the natural evolution of a Question-Answering system leveraging Natural Language Processing (NLP). Formulating responses to questions in a native language is one of the most typical examples of Natural Language Processing applied in various enterprises’ end-use applications.

Written below is the code to make a basic chatbot using HTML.

Happy chatting!

<html>

    <head><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />

        <title>My first bot</title>

    </head>

    <body  style="text-align:center;">         <textarea readonly="true" id="botChat" style="text-align:left; position:fixed; display:block; top:3vh; border:1px solid black; width:92.5vw; margin-left:1%; margin-right:2.25%; height:75vh; resize:none; font-family:Courier; overflow-y:auto; user-select:none; font-size:3vw;"></textarea>        <p style="position:absolute; border:1px solid black; top:78vh; left:12.25vw; width:75vw;">        <input type="text" placeholder="Ask a question" onKeypress="enterButton(event, document.getElementsByTagName('input')[0].value);" style="color:red; background-color:black; width:79%;">         <button onClick="answer(document.getElementsByTagName('input')[0].value)">Talk To Me</button></p>        <script>

var you = "Me";

botSays("Thanks for checking out my Simple chatBot.\nMy language knowledge is progressing. I recently learned 20 html tags. 6/11/17 \n\nType !name x where x = yourName to change your name.\nTo chat, click Talk to me or press Enter(pc) or Go(android)\nType help for a hint\n\n\n***")

            // Recognized Speech Patterns for Question Responses

var Hello = ["HI", "HEY", "HOWDY", "HEYA", "HOLA", "HELLO", "SUP", "KONNICHIWA", "ALOHA"]
var Goodbye = ["BYE", "SEE YA", "CYA", "LATER", "ADIOS", "SAYONARA", "SEEYA"]
var Greeting = ["WHAT'S UP", "HOW'S IT GOING", "HOW ARE YOU", "NICE DAY", "GOOD MORNING", "GOOD NIGHT"]

var Name = [ "WHAT IS YOUR NAME", "WHAT'S YOUR NAME", "WHO ARE YOU", "WHAT DO THEY CALL YOU", "COMO TE LLAMAS"]

var Actions = ["HELP", "DRINK", "CHALLENGE"]

var Questions = ["QUESTION", "QUIZ", "CODE", "ANSWER", "HTML", "CSS", "JAVASCRIPT"];

var HTMLTags1 = ["<P>", "<I>", "<SPAN>", "<DIV>", "<ARTICLE>", "<IFRAME>", "<A>", "<ABBR>","<ADDRESS>","<AUDIO>"];

        // Skip the CMD Line and learn HTML by reading my code!~~ LMAO, here have fun.

var HTMLTags2 = [

"<A>", //    Defines a hyperlink

"<ABBR>", //Defines an abbreviation or an acronym

"<ACRONYM>", //    Not supported in HTML5. Use <abbr> instead. Defines an acronym

"<ADDRESS>", //    Defines contact information for the author/owner of a document

"<APPLET>", //    Not supported in HTML5. Use <embed> or <object> instead. Defines an embedded applet

"<AREA>", //    Defines an area inside an image-map

"<ARTICLE>", //    Defines an article

"<ASIDE>", //    Defines content aside from the page content

"<AUDIO>", //    Defines sound content

"<B>" // Defines bold text

]

var HTMLTags3 = [

"<BASE>", // Specifies the base URL/target for all relative URLs in a document

"<BASEFONT>", //    Not supported in HTML5. Use CSS instead. Specifies a default color, size, and font for all text in a document

"<BDI>",    // Isolates a part of text that might be formatted in a different direction from other text outside it

"<BDO>",    //Overrides the current text direction

"<BIG>",    //Not supported in HTML5. Use CSS instead. Defines big text

"<BLOCKQUOTE>", //    Defines a section that is quoted from another source

"<BODY>",    //Defines the document's body

"<BR>",    //Defines a single line break

"<BUTTON>",    //Defines a clickable button

"<CANVAS>"    //Used to draw graphics, on the fly, via scripting (usually JavaScript)

]

var HTMLTags4 = [

"<CAPTION>",    //Defines a table caption

"<CENTER>", //    Not supported in HTML5. Use CSS instead. Defines centered text

"<CITE>", //Defines the title of a work

"<CODE>",    //Defines a piece of computer code

"<COL>",    //Specifies column properties for each column within a <colgroup> element 

"<COLGROUP>",    //Specifies a group of one or more columns in a table for formatting

"<DATALIST>",    //Specifies a list of pre-defined options for input controls

"<DD>",    //Defines a description/value of a term in a description list

"<DEL>",    //Defines text that has been deleted from a document

"<DETAILS>",    //Defines additional details that the user can view or hide

"<DFN>" //    Represents the defining instance of a term

]

var colors = ["BLUE", "RED", "GREEN", "YELLOW", "WHITE", "BLACK", "SILVER", "GRAY" ];

var Else = true;

var questions = [colors, HTMLTags4, HTMLTags3, HTMLTags2, HTMLTags1, Hello, Goodbye, Greeting, Name, Actions, Questions];



var reactions=[BotHello, BotGoodbye,BotGreeting];

var BotHello = ["HI", "HEY", "HOWDY", "HEYA", "HOLA", "HELLO", "SUP", "KONNICHIWA", "ALOHA"]

var BotGoodbye = ["BYE", "SEE YA", "CYA", "LATER", "ADIOS", "SAYONARA", "SEEYA"]

var BotGreeting = ["WHAT'S UP", "HOW'S IT GOING", "HOW ARE YOU", "NICE TO SEE YOU", "GOOD MORNING", "WELCOME"]

var BotPleasant = ["Thanks.", "Good job.", "Cool.", "I see.", "Anyway.", "right-o."]


function answer(x) {

    var botOut = botChat.value;

    document.getElementsByTagName("textarea")[0] = botChat

    //RESPONSES//


                document.getElementsByTagName("input")[0].value = ""

                if (x.charAt(0).includes("!") === false){

                youSay(x); botChat.scrollTop = botChat.scrollHeight;

                } 

                question = x.toUpperCase()

                for (i = 0; i < 10; i++) {

            /*          EMPTY RESPONSE          */                    

                if (question === "" || null) {

                    setTimeout( function() { botSays("\nBot : What? You shy?"); botChat.scrollTop = botChat.scrollHeight;}, 600);

                return; }

                /*          COMMAND MENU RESPONSES         */                    

                else if (question === "!MENU" ) {

                botSays("\n\n**Commands are !Name yourName, !Bgcolor backgroundColor, !Text textColor, !Menu, !Secrets, !Tutorial, !Botsay textSays, and !Me textDoes,. Play around."); botChat.scrollTop = botChat.scrollHeight;

                return;

                }else if (question.slice(0,9).includes("!BGCOLOR ") ) {

                    botSays("\n\n**Changed the background color to " + x.slice(9) ); botChat.scrollTop = botChat.scrollHeight; botChat.style.backgroundColor = x.slice(9);

                return;

                } else if (question.slice(0,6).includes("!TEXT ") ) {

                    botSays("\n\n**Changed the text color to " + x.slice(6) ); botChat.scrollTop = botChat.scrollHeight; botChat.style.color = x.slice(6);

                return;

                } else if (question.slice(0,6).includes("!NAME ") ) {

                    you = x.slice(6);

                    botSays("\n\n**Your name is " + you); botChat.scrollTop = botChat.scrollHeight;

                return;

                } else if (question.slice(0,9).includes("!SECRETS") ) {

                    botSays("\n\n**What? I don't have any secrets. I've got nothing to hide."); botChat.scrollTop = botChat.scrollHeight;

                return;

                }

                else if (question.slice(0,10).includes("!TUTORIAL") ) {

                    botSays("\n\n**What? I don't have a tutorial. Read my code, I'm not going to explain myself."); botChat.scrollTop = botChat.scrollHeight;

                return;

                }

                else if (question.slice(0,10).includes("!BOTSAY") ) {

                    botSays("\nBot : " + x.slice(8)); botChat.scrollTop = botChat.scrollHeight;

                return;

                } else if (question.slice(0,4).includes("!ME") ) {

                    youDo(x.slice(4)); botChat.scrollTop = botChat.scrollHeight;

                return;

                }

 /* Questions, Answers and Responses */

                if (question.includes(Goodbye[i])) {

                    Else = false;

                    setTimeout(botSays, 600, "\

                                 Bot : Godspeed. Leave an upvote?")

                } else if (question.includes(Name[i])) {

                    Else = false; setTimeout(botSays, 600, "\nBot : My name is BotOne. You can call me tonE.")

                } else if ( question.includes(HTMLTags1[i]) ) {

                    /*HTML Tag Definitions Courtesy of W3Schools.com*/

                    Else = false; if (HTMLTags1[i] === "<P>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<p>' Defines a paragraph.") } else if (HTMLTags1[i] === "<I>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<i>' Defines a part of text in an alternate voice or mood. Italics.") } else if (HTMLTags1[i] === "<SPAN>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<Span>' Defines a section in a document.") } else if (HTMLTags1[i] === "<A>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<Span>' Defines a section in a document.") }

                } else if ( question.includes(HTMLTags2[i]) ) {

                    /*HTML Tag Definitions Courtesy of W3Schools.com*/

                    Else = false; if (HTMLTags2[i] === "<ABBR>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<abbr>' Defines an abbreviation or acronym.") } else if (HTMLTags2[i] === "<ACRONYM>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<acronym>' Not supported in HTML5, use '<abbr>' instead.") } else if (HTMLTags2[i] === "<ADDRESS>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<address>' Defines contact information for the author/owner of a document.") } else if (HTMLTags2[i] === "<APPLET>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<applet>' Not supported in HTML5, use '<embed>' or '<object>' instead.") }else if (HTMLTags2[i] === "<AREA>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<area>' Defines an area inside an image map") } else if (HTMLTags2[i] === "<ARTICLE>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<article>' Defines an article.") } else if (HTMLTags2[i] === "<ASIDE>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<aside>' Defines content aside from the page content.") }  else if (HTMLTags2[i] === "<AUDIO>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<audio>' Defines sound content.") } else if (HTMLTags2[i] === "<B>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<B>' Defines bold text.") }

                } else if ( question.includes(HTMLTags3[i]) ) {

                    Else = false;

                    if (HTMLTags3[i] === "<BASE>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<base>' Specifies the base URL/target for all relative URLs in a document") } else if (HTMLTags3[i] === "<BASEFONT>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<basefont>' Not supported in HTML5. Use CSS instead.  Specifies a default color, size, and font for all text in a document. ") } else if (HTMLTags3[i] === "<BDI>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<bdi>' Isolates a part of text that might be formatted in a different direction from other text outside it. ") } else if (HTMLTags3[i] === "<BDO>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<bdo>' Overrides the current text direction. ") } else if (HTMLTags3[i] === "<BIG>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<big>' Not supported in HTML5, use CSS instead. Defines big text. ") } else if (HTMLTags3[i] === "<BLOCKQUOTE>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<blockquote>' Defines a section that is quoted from another source. ") } else if (HTMLTags3[i] === "<BODY>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<body>' Defines a document's body. ") } else if (HTMLTags3[i] === "<BR>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<br>' Defines a single line break. ") } else if (HTMLTags3[i] === "<BUTTON>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<button>' Defines a clickable button. ") } else if (HTMLTags3[i] === "<CANVAS>" ) { setTimeout(botSays, 600, "\nBot : The HTML tag '<canvas>' Used to draw graphics, on the fly, via scripting. Usually Javascript. ") }         

                /*} else if ( question.includes(HTMLTags4[i]) ) {

                } else if ( question.includes(HTMLTags5[i]) ) {

                } else if ( question.includes(HTMLTags6[i]) ) {    */

                /*} else if ( question.includes(HTMLTags7[i]) ) {

                } else if ( question.includes(HTMLTags8[i]) ) {

                } else if ( question.includes(HTMLTags9[i]) ) {    */

                }else if (question.includes(Actions[i])) {

                    Else = false; if (question.includes("CHALLENGE")) { setTimeout(botSays, 600, "\nBot : Challenge my creator. Go for it.") } else { setTimeout(botSays, 600, "\nBot : How can I help?  Use my commands !Menu & !Tutorial to see what I can do.") }

                } else if (question.includes(Questions[i])) {

                    Else = false; if (Questions[i].includes("HTML")) { setTimeout(botSays, 600, "\nBot : Ask my creator. Go for it. Post your question in the comments, he'll try to help you. I'm just a code, I don't know HOW to code.") } else { setTimeout(botSays, 600, "\nBot : How can I help? Use my commands !Menu & !Tutorial to see what I can do.") }

                } else if ( question.includes(Greeting[i]) ) {

                    Else = false; if (Greeting[i].includes("HOW")&&Greeting[i].includes("YOU")) {

                    var reactHello = "How am I";

                    var reactGreeting = "I would say I am 40% complete." }

                    else {

                   num = Math.ceil(Math.random()*3)

                    var reactHello = Greeting[num]

                    reactHello = reactHello.toLowerCase();

                    reactHello = reactHello.charAt(0).toUpperCase() + reactHello.slice(1);

                    var reactGreeting = "Same old. Getting coded mostly.";

                    }

                    var reactPleasant = BotPleasant[num]

                    setTimeout(botSays, 600, "\nBot : " + reactHello + ". " + reactGreeting + " " + reactPleasant )

                  } else if (question.includes(Hello[i])) {

                  var reactHello = Hello[i];

                  reactHello = reactHello.toLowerCase();

                  reactHello = reactHello.charAt(0).toUpperCase() + reactHello.slice(1);

                  var reactGreeting = "";

                  var reactPleasant = ""

                    Else = false;

                      setTimeout(botSays, 600, "\nBot : " + reactHello + ".")

                } else { } }  setTimeout( function() { if (Else === true) {botSays("\n\n**Error 404: Response Not Found."); } } , 700);  setTimeout( function() {Else = true; botChat.scrollTop = botChat.scrollHeight;}, 730)

            } function botSays(x) {

                document.getElementsByTagName("textarea")[0].innerHTML += x;

            } function youSay(x) { botSays("\n"+ you + " \ : " + x)

            }

            function youDo(x) { botSays("\n"+ you + " " + x)                                            

            } function enterButton(e, x) { if (e.keyCode == 13) { answer(x); }   }   
 </script></body></html>

Tags: ChatbotsHTML
Share80Tweet50Share14Pin20

Related Posts

Ways Data Analysis has changed customer reward programs
Tech news

Ways Data Analysis has changed customer reward programs

Digital Learning face recognition
Tech news

Here’s why Deep Learning might not be enough for celebrity face recognition

VPS Helps Forex Trading
Tech news

Staying Safe When Trading on a Trading App

Mozilla launches Thinderbird for android
Tech news

Mozilla launches Thinderbird for android

Is Signal an alternative to Whatsapp?
Tech news

Is Signal an alternative to Whatsapp?

Comments 4

  1. Karuna Singh says:
    7 months ago

    very nice content. I was exactly searching for article like this. Thank you so much!!!!

    Reply
  2. Jesaya Bless says:
    3 months ago

    Thanks!!!

    Reply
    • Santy says:
      3 months ago

      How to run this Jesaya

      Reply
  3. Kerstin Thorson says:
    1 week ago

    I got this website from my friend who shared

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Most Read

  • How to Track Someone’s iPhone by Phone Number?

    How to Track Someone’s iPhone by Phone Number?

    291 shares
    Share 116 Tweet 73
  • Top 5 car automation trends to know

    126 shares
    Share 50 Tweet 32
  • What is windows modules installer ? How to Enable/Disable

    1232 shares
    Share 493 Tweet 308
  • Is Parody Coin investment a Good Investment?

    56 shares
    Share 22 Tweet 14
  • How to Track Activities an Instagram account?

    80 shares
    Share 32 Tweet 20
  • Tips to Reduce Your Website Hosting Costs

    868 shares
    Share 347 Tweet 217

Recent Stories

Does domain extensions impact SEO standards

Does domain extension impact SEO standards
Share4Tweet2Share1Pin1

How Enterprise Blockchain can enable Privacy Preservation

How Enterprise Blockchain can enable Privacy Preservation
Share5Tweet3Share1Pin1

How to flip NFT’s

How to flip NFTs
Share4Tweet3Share1Pin1

Data Analytics startup USEReady launches a new centres

Data Analytics startup USEReady launches a new centres
Share5Tweet3Share1Pin2
  • Terms of use
  • Privacy Policy
  • About Us
  • Contact us
  • Write For Us
  • Cookie Policy

© 2022 All Rights Reserved

No Result
View All Result
  • Tech news
  • Startup news
  • Artificial Intelligence
  • IOT
  • Big Data
  • Cloud
  • Data Analytics
  • Machine Learning
  • Blockchain
  • Social Media

© 2022 All Rights Reserved

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms below to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In
Cookie Law Notice
This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Cookie settingsACCEPT
Privacy & Cookies Policy

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these cookies, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may have an effect on your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT