Thursday, March 4, 2021
Techiexpert.com
No Result
View All Result
  • Login
  • Register
  • Home
  • Tech news
  • Startups
  • AI
  • IOT
  • Big Data
  • Cloud
  • Data Analytics
  • ML
  • Blogging
Techiexpert.com
No Result
View All Result

How to make a chatbot using HTML

Srikanth by Srikanth
December 4, 2019
in Tech news
Reading Time: 7min read
A A
0
Chatbot using HTML
451
SHARES
6.4k
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!

ADVERTISEMENT
<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
Share180Tweet112Share31Pin42
Srikanth

Srikanth

Passionate Tech Blogger on Emerging Technologies, which brings revolutionary changes to the People life.., Interested to explore latest Gadgets, Saas Programs

Related Posts

What Technology is Used in Virtual Reality Gaming
Tech news

What Technology is Used in Virtual Reality Gaming

March 3, 2021
NVIDIA Is Building AI-Based Communications Services for Its Cloud Computing Segment
Cloud Computing

NVIDIA Is Building AI-Based Communications Services for Its Cloud Computing Segment

March 3, 2021
8 Things to Consider Before Redesigning Your Website 1
Tech news

8 Things to Consider Before Redesigning Your Website

March 2, 2021
Winners and finalists for the 11th edition of Aegis Graham Bell Awards
Tech news

Winners and finalists for the 11th edition of Aegis Graham Bell Awards

March 2, 2021
Passwords vs Biometrics: Which one provides more security? Analysis By Francisco D’Agostino
Tech news

Passwords vs Biometrics: Which one provides more security? Analysis By Francisco D’Agostino

March 1, 2021
Ankit Khanna Suraasa
Tech news

How Tech Leaders Can Help Shape the Future of K-12 Education with Ed-tech

February 26, 2021

Leave a Reply Cancel reply

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

I agree to the Terms & Conditions and Privacy Policy.

Latest Stories

BharatPe gave 80x returns to these small-town investors on Venture Catalysts’ platform
Startup news

BharatPe gave 80x returns to these small-town investors on Venture Catalysts’ platform

by Srikanth
March 4, 2021
New startups join the battle against Global Warming
Startup news

New startups join the battle against Global Warming – Alessandro Bazzoni

by Sony T
March 4, 2021
What Technology is Used in Virtual Reality Gaming
Tech news

What Technology is Used in Virtual Reality Gaming

by Sony T
March 3, 2021
NVIDIA Is Building AI-Based Communications Services for Its Cloud Computing Segment
Cloud Computing

NVIDIA Is Building AI-Based Communications Services for Its Cloud Computing Segment

by Srikanth
March 3, 2021
8 Things to Consider Before Redesigning Your Website 2
Tech news

8 Things to Consider Before Redesigning Your Website

by Sony T
March 2, 2021
Load More
Techiexpert.com

© 2020 All Rights Reserved

  • Terms of use
  • Privacy Policy
  • About Us
  • Contact us
  • Write For Us
  • Cookie Policy

  • Login
  • Sign Up
No Result
View All Result
  • Home
  • Tech news
  • Startups
  • AI
  • IOT
  • Big Data
  • Cloud
  • Data Analytics
  • ML
  • Blogging

© 2020 All Rights Reserved

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms below to register

*By registering into our website, you agree to the Terms & Conditions and Privacy Policy.
All fields are required. Log In

Retrieve your password

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

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.