DEV Community

Cover image for ๐ŸŸจ JavaScript 2 | Random Quote
Gregor Schafroth
Gregor Schafroth

Posted on

1

๐ŸŸจ 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.

  1. 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.
  2. 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.
  3. 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.
  4. 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>
Enter fullscreen mode Exit fullscreen mode

Yea I am still a total noob in JS, so youโ€™ll probably see me do many more small daily exercises here ๐Ÿ˜‰

Image of Docusign

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

Top comments (2)

Collapse
 
robinamirbahar profile image
Robina โ€ข

Great

Collapse
 
gregorschafroth profile image
Gregor Schafroth โ€ข

Thanks Robina :)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

๐Ÿ‘‹ Kindness is contagious

Please leave a โค๏ธ or a friendly comment on this post if you found it helpful!

Okay