Completed Chatbot

by RolloRallo

HTML

<h1 id="title">
 Chatbot
</h1>

<textarea id="chat">
Welcome to our chat application. Please speak with our bot.
  ---------------
</textarea>

<form id="user">

<input type="text" id="msg" placeholder="Chat here">
<br>
<button id="send">Send</button>

</form>


<button id="speak">
Speak
</button>

CSS

body
{
  font-family: Courier New;
  text-align: center;
}

#title
{
  font-size:24px;
}

#chat
{
  width:400px;
  height:200px;
}

#msg
{
  width:400px;
}

#send
{
  font-size:16px;
  width:400px;
  background-color:black;
  color:white;
  margin-top:10px;
}

#speak
{
  font-size:16px;
  width:400px;
  background-color:blue;
  color:white;
  margin-top:10px;
}

#speak.activated
{
  background-color:red;
}

JavaScript

// EVENTS (THINGS TO WATCH OUT FOR)
$(document).on("click", "#speak", recognize);
$(document).on("submit", "#user", send);


// VARIABLES (THINGS THAT DEFINE THE EXPERIENCE)
var recognition = new webkitSpeechRecognition();

// SECONDARY EVENTS
recognition.onresult = function(e){

console.log(e.results);
  
 var transcript = e.results[0][0].transcript;
  
 $("#msg").val(transcript);
 recognition.stop();
 $("#speak").removeClass("activated");
 $("#user").submit();
 
 }

// FUNCTIONS (THINGS TO DO)

function recognize(){

recognition.start();
$(this).addClass("activated");
  
}

function send(e){

  e.preventDefault();

  var msg = $("#msg").val();

  if (msg == "") {

    return false;

  }

  $("#chat").append("YOU: ");
  $("#chat").append(msg);
  $("#chat").append("\n");

  $("#msg").val("");

  var path = "hochan.ryu/eliza/chat.py";
  var url = "https://ocadu.goodcodeclub.com/chat/?path="+path+"&msg="+msg;

  $.ajax({
    url: url,
    success: insert
  });

}

function insert(output) {

  $("#chat").append("BOT: ");
  $("#chat").append(output);
  $("#chat").append("\n");
  $("#chat").scrollTop(999999999);

}