E-liza Chatbot

by val_p

HTML

<h1 id="title">
  Is E-liza a bot who chats? 
</h1>

<textarea id="chat">
  Hello, how are you feeling today? 
  ---------
</textarea>

<form id="user">

  <input type="text" id='msg' placeholder="Chat here">
  <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

// EVENT (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();

}

//FUNTIONS (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 = "valerie.poon/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(9999999999);

}