JavaScript exercise Random Quote Generator

by

Project: Random Quote Generator

Step 1: HTML Structure

Create an HTML file named index.html and set up the basic structure.

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

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

    <title>Random Quote Generator</title>

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

</head>

<body>

    <div class=”container”>

        <h1>Random Quote Generator</h1>

        <p id=”quote”></p>

        <button id=”generateButton”>Generate Quote</button>

    </div>

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

</body>

</html>

Step 2: CSS Styling

Create a CSS file named styles.css for basic styling.

body {

    font-family: Arial, sans-serif;

    background-color: #f0f0f0;

    margin: 0;

    padding: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

}

.container {

    background-color: #fff;

    padding: 20px;

    border-radius: 5px;

    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    width: 300px;

    text-align: center;

}

h1 {

    font-size: 24px;

    margin-bottom: 10px;

}

button {

    display: block;

    margin: 10px auto;

    padding: 8px 16px;

    background-color: #007bff;

    color: #fff;

    border: none;

    border-radius: 3px;

    cursor: pointer;

}

#quote {

    font-size: 18px;

    margin: 20px 0;

}

Step 3: JavaScript Logic

Create a JavaScript file named script.js for the application logic.

const generateButton = document.getElementById(“generateButton”);

const quoteElement = document.getElementById(“quote”);

const quotes = [

    “The only way to do great work is to love what you do. – Steve Jobs”,

    “Innovation distinguishes between a leader and a follower. – Steve Jobs”,

    “Don’t be afraid to give up the good to go for the great. – John D. Rockefeller”,

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

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

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

];

generateButton.addEventListener(“click”, generateRandomQuote);

function generateRandomQuote() {

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

    quoteElement.textContent = quotes[randomIndex];

}

Step 4: Testing

Open the index.html file in a web browser. You should see a Random Quote Generator with a “Generate Quote” button and a space to display the quote.

Congratulations! You’ve successfully created a simple Random Quote Generator using HTML, CSS, and JavaScript. This project demonstrates how you can use JavaScript to display random content and interact with user actions.

Here’s the detailed breakdown of the JavaScript code:

  • We start by getting references to the HTML elements we’ll be interacting with: generateButton and quoteElement.
  • We attach an event listener to the “Generate Quote” button (generateButton). This listener is set to call the generateRandomQuote function when the button is clicked.
  • The generateRandomQuote function is defined. This function:
    • Generates a random index using Math.random() and Math.floor() within the range of the quotes array length.
    • Sets the text content of the quoteElement to the randomly selected quote from the quotes array.

By following these steps, the code creates a simple Random Quote Generator that displays a random quote each time the button is clicked. This project demonstrates how JavaScript can be used to generate and display random content to users.