<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div id='bodybox'> <div id='chatborder'> <p id="chatlog5" class="chatlog"> </p> <p id="chatlog4" class="chatlog"> </p> <p id="chatlog3" class="chatlog"> </p> <p id="chatlog2" class="chatlog"> </p> <p id="chatlog1" class="chatlog"> </p> <p id="chatlog0" class="chatlog"> </p> <input type="text" name="chat" id="chatbox" placeholder="Hi there! Type here to talk to me." onfocus="placeHolder()"> </div> <!--<input type="file" id="myFile" multiple size="50" onchange="myFunction()">--> <input type="file" id="file" name="files[]"/> </div>

body { font: 15px arial, sans-serif; background-color: #d9d9d9; padding-top: 15px; padding-bottom: 15px; } #bodybox { margin: auto; max-width: 550px; font: 15px arial, sans-serif; background-color: white; border-style: solid; border-width: 1px; padding-top: 20px; padding-bottom: 25px; padding-right: 25px; padding-left: 25px; box-shadow: 5px 5px 5px grey; border-radius: 15px; } .chatlog { font: 15px arial, sans-serif; } #chatbox { font: 17px arial, sans-serif; height: 22px; width: 100%; }

function placeHolder() { document.getElementById("chatbox").placeholder = ""; } var messages = [], lastUserMessage = "", botMessage = "", botName = 'sree', talking = true; function chatbotResponse() { talking = true; botMessage = "I'm confused"; if (lastUserMessage === 'hi') { botMessage = 'Hello:)!'; } if (lastUserMessage === 'name') { botMessage = 'My name is ' + botName; } } function newEntry() { if (document.getElementById("chatbox").value != "") { lastUserMessage = document.getElementById("chatbox").value; document.getElementById("chatbox").value = ""; messages.push(lastUserMessage); chatbotResponse(); messages.push("<b>" + botName + ":</b> " + botMessage); for (var i = 1; i < 6; i++) { if (messages[messages.length - i]) document.getElementById("chatlog" + i).innerHTML = messages[messages.length - i]; } } } document.onkeypress = keyPress; function keyPress(e) { var x = e || window.event; var key = (x.keyCode || x.which); if (key == 13 || key == 3) { newEntry(); } } /*function fun() { document.getElementById("chatlog0").innerHTML = "Paragraph changed!"; }*/