Random Quote Generator JavaScript Mini Project

by

JavaScript code Example Random Quote Generator

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”>Click the button to generate a random 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;

}

button {

    display: block;

    margin: 10px auto;

    padding: 8px 16px;

    background-color: #007bff;

    color: #fff;

    border: none;

    border-radius: 3px;

    cursor: pointer;

}

Step 3: JavaScript Logic

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

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”

];

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

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

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 the “Random Quote Generator” with a button. Clicking the button will replace the quote with a random quote from the quotes array.

// An array of quotes to display

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”

];

// Get references to the HTML elements

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

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

// Attach an event listener to the “Generate Quote” button

generateButton.addEventListener(“click”, generateRandomQuote);

// Define the function to generate a random quote

function generateRandomQuote() {

    // Generate a random index within the range of the quotes array

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

    // Display the randomly selected quote in the quoteElement

    quoteElement.textContent = quotes[randomIndex];

}

Step by Step Explanation:

  1. We start by defining an array called quotes. This array contains a list of quotes as strings. Each quote includes both the quote itself and its attributed author.
  2. We get references to the HTML elements we’ll interact with: generateButton and quoteElement. The generateButton represents the “Generate Quote” button, and quoteElement represents the paragraph where the quote will be displayed.
  3. 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.
  4. The generateRandomQuote function is defined. This function generates a random quote and displays it on the webpage.
  5. Inside the generateRandomQuote function:
    1. We use Math.random() to generate a random decimal between 0 (inclusive) and 1 (exclusive).
    2. We multiply the random decimal by the length of the quotes array using quotes.length to get a random number within the range of the array indices.
    3. We use Math.floor() to round down the random number to a whole number, which will be a valid index for the quotes array.
  6. We set the textContent of the quoteElement to the randomly selected quote from the quotes array using the randomIndex.

By following these steps, the code creates a simple “Random Quote Generator” that displays a new random quote each time the “Generate Quote” button is clicked. This is a great example of how JavaScript can be used to create dynamic and interactive content on a webpage.

JavaScript-Code-Example-Random-Quote-GeneratorDownload