Random Answer Generator JavaScript Coding Project

HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Random Answer Generator</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1>Random Answer Generator</h1>
  <input type="text" id="question" placeholder="Enter your question">
  <button id="generateBtn">Generate Answer</button>
  <div id="message"></div>

  <script src="script.js"></script>
</body>
</html>

CSS (styles.css):

body {
  font-family: Arial, sans-serif;
  text-align: center;
}

h1 {
  color: #333;
}

input[type="text"] {
  padding: 8px;
  margin-top: 10px;
  font-size: 16px;
}

button {
  padding: 10px 20px;
  margin-top: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

#message {
  margin-top: 20px;
  font-size: 18px;
  color: #333;
}

JavaScript (script.js):

const question = document.getElementById("question");
const generateBtn = document.getElementById("generateBtn");
const message = document.getElementById("message");

const answerArray = [
  "Yes",
  "No",
  "Maybe",
  "I'm not sure",
  "Ask again later"
];

generateBtn.addEventListener("click", function() {
  console.log(question.value);
  
  if (question.value === "") {
    alert("Please enter a question!");
    return; // Exit the function if the question is empty
  }
  
  // For random answer
  let res = Math.floor(Math.random() * answerArray.length);
  console.log(answerArray[res]);
  
  // Output display with answer
  if (question.value.trim() !== "") {
    message.innerHTML = question.value + " " + answerArray[res];
  } else {
    message.innerHTML = answerArray[res];
  }
  
  question.value = "";
});

Make sure to save the HTML code in an HTML file (e.g., index.html), the CSS code in a CSS file (e.g., styles.css), and the JavaScript code in a JavaScript file (e.g., script.js). Link the CSS file in the <head> section of your HTML file using the <link> tag, and include the JavaScript file at the end of the <body> section using the <script> tag.

With this setup, the JavaScript code will listen for a click event on the “Generate Answer” button, and when clicked, it will generate a random answer based on the input question and display it in the message div. If the question field is empty, it will display an alert asking the user to enter a question.

HTML:

The HTML code sets up the basic structure of the page. It includes a <h1> heading for the title, an <input> field for the user to enter their question, a <button> with the id “generateBtn” to trigger the event, and a <div> with the id “message” to display the generated answer.

CSS (styles.css):

The CSS code provides some basic styling for the elements in the HTML. It sets the font family to Arial, aligns the text in the center, and defines the styles for the input field, button, and message div.

JavaScript (script.js):

The JavaScript code starts by obtaining references to the necessary HTML elements using the document.getElementById() method.
The answerArray variable is an array that contains a list of possible answers.
The generateBtn button element is assigned an event listener using the addEventListener() method. It listens for a “click” event and triggers the provided callback function when the button is clicked.
Inside the event listener callback function, the code first logs the value of the question input field to the console.
It then checks if the value of the question input field is an empty string. If it is, an alert is displayed, informing the user to enter a question, and the function returns early, preventing the rest of the code from executing.
Next, a random number between 0 and the length of the answerArray is generated using Math.random() and Math.floor(). This random number is used as an index to select a random answer from the answerArray.
The selected answer is logged to the console.
The code then checks if the trimmed value of the question input field (without leading and trailing spaces) is not an empty string. If it’s not empty, it sets the innerHTML of the message div to the concatenation of the question value, a space, and the randomly selected answer.
If the question field is empty or contains only spaces, it sets the innerHTML of the message div to just the randomly selected answer.
Finally, it clears the value of the question input field by setting it to an empty string.

That’s a detailed explanation of the provided code. It sets up the necessary HTML structure, applies basic CSS styling, and defines JavaScript logic to handle the button click event, generate a random answer based on the entered question, and display it on the page.

Share this:

Related