Random Quote Generator Coding Exercise

by

Exercise 3: Random Quote Generator

HTML (index.html):

<!DOCTYPE html>

<html lang=”en”>

<head>

  <meta charset=”UTF-8″>

  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

  <link rel=”stylesheet” href=”styles.css”>

  <title>Random Quote Generator</title>

</head>

<body>

  <div class=”quote-container”>

    <blockquote id=”quote”>Click the button to get a random quote!</blockquote>

    <button onclick=”getRandomQuote()”>Get Quote</button>

  </div>

  <script src=”script.js”></script>

</body>

</html>

CSS (styles.css):

body {

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

  margin: 0;

}

.quote-container {

  text-align: center;

}

blockquote {

  font-size: 18px;

}

button {

  padding: 10px;

  font-size: 16px;

}

JavaScript (script.js):

const quotes = [

  “The only limit to our realization of tomorrow will be our doubts of today. – Franklin D. Roosevelt”,

  “The future belongs to those who believe in the beauty of their dreams. – Eleanor Roosevelt”,

  “Do not wait to strike till the iron is hot, but make it hot by striking. – William Butler Yeats”,

  “Believe you can and you’re halfway there. -Theodore Roosevelt”,

  “Success is not final, failure is not fatal: It is the courage to continue that counts. – Winston Churchill”,

];

function getRandomQuote() {

  const randomIndex = Math.floor(Math.random() * quotes.length);

  const quoteElement = document.getElementById(‘quote’);

  quoteElement.textContent = quotes[randomIndex];

}

Explanation:

  • The HTML file contains a button and a blockquote element to display the random quote.
  • The CSS file provides simple styling for better presentation.
  • The JavaScript file includes an array of quotes and a function (getRandomQuote) to randomly select and display a quote when the button is clicked.
JavaScript-Guide-V2-2Download