🟨 JavaScript 2 | Random Quote

Alright after the Color Mixer yesterday I decided to ask ChatGPT for a second JavaScript exercise for beginners today. First I’ll share with you the exercise I got and below my solution 👨‍💻

Exercise: Display a Random Quote of the Day

The objective is to show a randomly selected quote from a predefined list each time the user visits or refreshes the page.

Create an Array of Quotes: Start by creating an array that contains a few inspirational or funny quotes. Each quote will be a string within the array.
Randomly Select a Quote: Write a function to randomly select one quote from the array. Remember, arrays are zero-indexed in JavaScript, so you'll need to generate a random number between 0 and the length of the array minus one.
Display the Quote: Use JavaScript to display the selected quote on your webpage. You might want to create a dedicated HTML element (like a div or p tag) for the quote.
Styling (Optional): Add some basic CSS to make your quote look nice on the page.

Here's a structure to guide you:

HTML: Create a simple structure with an element to hold the quote.
JavaScript:
- Create an array of quotes.
- Write a function to select a random quote.
- Display the quote in the HTML element.
CSS (optional): Style your quote display.

My Code

Need to confess I again had to use tons of ChatGPT help for this. Think about it, I never defined an array in JS, so I even had to check that. Glad it’s almost like Python so this one will be easy to remember.

What I found most interesting today is the way to get a random int. In Python I’ll just import the ‘Random’ library and directly use a method. But here in JS I use kind of ‘raw math’ to round down from a float.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Quote</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: Arial, sans-serif;
        }

        #quoteDisplay {
            color: #880000; /* Red color */
            font-size: 1.5em;
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- HTML element to display the quote -->
    <div id="quoteDisplay"></div>

    <script>
        // Create an Array of Quotes
        let quotes = [
            "The only way to do great work is to love what you do. – Steve Jobs",
            "The purpose of our lives is to be happy. – Dalai Lama",
            "Life is what happens when you’re busy making other plans. – John Lennon",
            "Get busy living or get busy dying. – Stephen King",
            "You only live once, but if you do it right, once is enough. – Mae West"
        ];
        console.log(quotes)

        // Randomly Select a Quote
        function selectRandomQuote() {
            let randomIndex = Math.floor(Math.random() * quotes.length);
            return quotes[randomIndex]
        }
        let randomQuote = selectRandomQuote();
        console.log(randomQuote)

        // Display the Quote
        document.getElementById('quoteDisplay').textContent = randomQuote;

    </script>
</body>

</html>