A simple chatbot designed to just respond to only 3 statements, for now. I saved the language as javascript, but if you paste in your SDE, it will respond as it should.
License: Only to be used personally, not to be published on a public site. You may not edit the name at the bottom.
<html>
<head>
<script>
var know = {
"What is your name?":"I'm Batman... Just joking, I am Chatbot 1.0, designed to chat with you. So? What are you waiting for? Talk to me!",
"Who built you?":"What is your business? Anyway, for what it's worth, I was designed by Ndubisi Obidigbo, Mainly in Javascript. You happy?",
"he":"her"
};
function talk() {
var user = document.getElementById("userBox").value;
document.getElementById("chatLogs").innerHTML += "You: " + user + "<br>";
if (user in know) {
document.getElementById("chatLog").innerHTML += "Bot: " + know[user] + "<br>";
} else {
document.getElementById("chatLog").innerHTML += "Bot: I wasn't programmed to respond to such... Please say something I can understand.<br>";
};
var today = new Date();
var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
var dateTime = date+'| '+time;
document.getElementById("timeDate").innerHTML = dateTime;
};
</script>
<style>
body {
font-family: sans-serif !important;
}
.bg-funky {
background-image: linear-gradient(to left, rgb(215, 246, 253), rgb(166, 230, 245), rgb(166, 245, 238));
}
.heading {
color: #fff;
margin: 30px;
font-weight: 600;
}
img {max-width: 100%;}
.inbox_msg {
border: 1px solid #c4c4c4;
clear: both;
overflow: hidden;
}
.top_spac{ margin: 20px 0 0;}
.recent_heading {float: left; width:40%;}
.headind_srch{ padding:10px 29px 10px 20px; overflow:hidden; border-bottom:1px solid #c4c4c4;}
.recent_heading h4 {
color: #05728f;
font-size: 21px;
margin: auto;
}
.chat_ib h5{ font-size:15px; color:#464646; margin:0 0 8px 0;}
.chat_ib h5 span{ font-size:13px; float:right;}
.chat_ib p{ font-size:14px; color:#989898; margin:auto}
.chat_img {
float: left;
width: 11%;
}
.chat_ib {
float: left;
padding: 0 0 0 15px;
width: 88%;
}
.chat_people{ overflow:hidden; clear:both;}
.chat_list {
border-bottom: 1px solid #c4c4c4;
margin: 0;
padding: 18px 16px 10px;
}
.inbox_chat { height: 550px; overflow-y: scroll;}
.active_chat{ background:#ebebeb;}
.incoming_msg_img {
display: inline-block;
width: 6%;
}
.received_msg {
display: inline-block;
padding: 0 0 0 10px;
vertical-align: top;
width: 92%;
}
.received_withd_msg {
background: #e4e8fb none repeat scroll 0 0;
border-radius: 3px;
color: #646464;
font-size: 14px;
margin: 0;
padding: 5px 10px 5px 12px;
width: 100%;
}
.time_date {
color: #747474;
display: block;
font-size: 10px;
margin: 3px 0 0;
}
.received_withd_msg { width: 70%;}
.mesgs {
float: left;
padding: 40px;
}
.sent_msg {
background: #3F51B5 none repeat scroll 0 0;
border-radius: 3px;
font-size: 14px;
margin: 0; color:#fff;
padding: 5px 10px 5px 12px;
width:100%;
}
.outgoing_msg{ overflow:hidden; margin:26px 0 26px;}
.sent_msg {
float: right;
width: 70%;
text-align: right;
}
.input_msg_write input {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
color: #4c4c4c;
font-size: 15px;
min-height: 48px;
width: 100%;
}
.type_msg {border-top: 1px solid #c4c4c4;position: relative;}
.msg_send_btn {
background: #05728f none repeat scroll 0 0;
border: medium none;
border-radius: 50%;
color: #fff;
cursor: pointer;
font-size: 17px;
height: 33px;
position: absolute;
right: 0;
top: 11px;
width: 33px;
}
.messaging { background: #fff;}
.msg_history {
max-height: 516px;
overflow-y: auto;
}
.credit {
margin-bottom: 20px;
margin-top: 20px;
}
.credit a {
color: #fff;
font-weight: 300;
letter-spacing: 2px;
border-bottom: dotted 1px;
}
.inPut {
width: 500px;
}
</style>
</head>
<body class="bg-funky">
<div class="container">
<h3 class="heading text-center">Lucy</h3>
<div class="messaging">
<div class="inbox_msg">
<div class="mesgs">
<div class="msg_history">
<div class="incoming_msg">
<div class="incoming_msg_img"> <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil"> </div>
<div class="received_msg">
<div class="received_withd_msg" id="chatLog">
<p></p>
<span class="time_date" id="timeDate"></span></div>
</div>
</div>
<div class="outgoing_msg">
<div class="sent_msg" id="chatLogs">
<p class=""></p>
<span class="time_date" id="timeDate"></span> </div>
</div>
<p><textarea type="text" id="userBox" onkeydown="if (event.keyCode == 13) {talk()}" placeholder="Ask Lucy" class="inPut"></textarea></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="credit text-center">
<i>Made by Ndubisi Obidigbo</i>
</div>
</body>
</html>
// TODO: Add your tests here
// Starting from Node 10.x, [Mocha](https://mochajs.org) is used instead of our custom test framework.
// [Codewars' assertion methods](https://github.com/Codewars/codewars.com/wiki/Codewars-JavaScript-Test-Framework)
// are still available for now.
//
// For new tests, using [Chai](https://chaijs.com/) is recommended.
// You can use it by requiring:
// const assert = require("chai").assert;
// If the failure output for deep equality is truncated, `chai.config.truncateThreshold` can be adjusted.