<form id="question-form">
  <label for="question">Pregunta:</label><br>
  <input type="text" id="question" name="question"><br>
  <button type="submit">Enviar pregunta</button>
</form> 


<div id="answer"></div>

<script>
  
const form = document.querySelector('#question-form');
const answerDiv = document.querySelector('#answer');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  // Obtiene la pregunta ingresada por el usuario
  const question = event.target.elements.question.value;

  // Llama a la función que genera la respuesta a la pregunta
  const answer = getAnswer(question);

  // Muestra la respuesta en el elemento div
  answerDiv.textContent = answer;
});


function getAnswer(question) {
  // Convertir la pregunta a minúsculas
  question = question.toLowerCase();

  // Si la pregunta es "¿cuál es tu nombre?"
  if (question === "¿cuál es tu nombre?") {
    return "Mi nombre es Assistant";
  }

  // Si la pregunta es "¿de qué color es el cielo?"
  if (question === "¿de qué color es el cielo?") {
    return "El cielo es azul";
  }

  // Si la pregunta es "¿cuántos dedos tienes en una mano?"
  if (question === "¿cuántos dedos tienes en una mano?") {
    return "Tengo cinco dedos en una mano";
  }

  // Si no se reconoce la pregunta, devolver una respuesta genérica
  return "No tengo una respuesta para esa pregunta";
}

</script>