Personal Assistant

by wizviper

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<body>
  <div id='headerbox'>
    <h1 id='answerfield'>How can I help you?</h1>
  </div>
  <input id='textboxfield' type='text'>
  <input id='textboxenter' type='submit' class='btn btn-primary'>




</body>

CSS

#headerbox {
  height: 40vh;
}

h1 {
  text-align: center;
  font-family: Helvetica;
}

#textboxfield {
  width: 100vw;
  height: 20vh;
}

#textboxenter {
  width: 100vw;
}

JavaScript

var answertext = document.getElementById('answerfield')

function AskQuestion(textval) {

  if (textval == 'What\'s your name' || textval == 'what\'s your name' || textval == 'Whats your name' || textval == 'whats your name' || textval == 'What\'s your name?' || textval == 'What\'s your name?' || textval == 'whats your name?' || textval == 'Whats your name?') {
    answertext.innerHTML = 'My name is by default assistant, but you can change that.'
  } else if (textval == 'What\'s the date?') {
    answertext.innerHTML = new Date();
  } 


   else {
    answertext.innerHTML = 'Sorry, I can\'t understand what you said.';
  }

}


$('#textboxenter').click(function() {
  AskQuestion($('#textboxfield').val());
});