🟨 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>

Yea I am still a total noob in JS, so you’ll probably see me do many more small daily exercises here 😉

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site