Generate Random Quotes using JavaScript

Create a program to generate a random quote in javascript. Let’s create a simple web page to design and perform generate random quotes using HTML, CSS, JS.

Problem statement

In this task, we have to create a web application to generate random quotes using javascript. For that create HTML file and use a javascript function that displays the output.

Solution

Create html file
Create a division class generator in that use paragraph tag to display the quotes and the writer <p id=”quotes”></p>
<p id=”writer”></p>
Use button which onclick we will generate random new quotes <button id=”generate”>Next Quotes</button>
Use CSS to design the page
Create function generateQuote() and call that function on window load , store quotes and writer name in const quotes = []
Create an array index and multiply the random number with array length and use math. floor which will return an integer and save that value in an variable var arrIdx = Math.floor(Math.random() * quotes.length);
Use index generated to display quotes and writer into paragraph tag using inner.html for that use document.getElementById(“quotes”).innerHTML = quotes[arrIdx].quote;
document.getElementById(“writer”).innerHTML = quotes[arrIdx].writer;
Call the function which will onload window display new quotes window.onload = function() {
generateQuote();
Display the quotes and generate new quotes which on click document.getElementById(“generate”).addEventListener(‘click’, generateQuote);

JavaScript code to generate random quotes using js function

<!Doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Random Quotes Generator</title>

    </head>
    <body>
       <div class="geenrator">
            <p id="quotes"></p>
            <p id="writer"></p>
            <button id="generate">Next Quotes</button>
       </div>

    </body>
    <style type="text/css">
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}

body{
    min-height:100vh;
    transition: 0.5s;
    transition-timing-function: ease-in;
    background-image: linear-gradient(to right bottom, rgb(255, 128, 128), #ffedbca8);
    display: flex;
    align-items: center;
    justify-content: center;

}

</style>
    <script type="text/javascript">
const generateQuote = function() {
    const quotes = [
    {
        quote: "'We choose our destiny in the way we treat others.'",
        writer: "-Wit"
     },
     {
        quote: "'No snowflake in an avalanche ever feels responsible.'",
        writer: "-Voltaire"
     },
      {
        quote: "'Fortune favours the brave.'",
        writer: "-Virgil"
     },
     {
        quote: "'I believe in one thing only, the power of human will.'",
        writer: "-Joseph Stalin"
     },
     {
      quote: "'The best way out is always through.'",
        writer: "-Robert Frost"
     },
     {
        quote: "'The mind unlearns with difficulty what it has long learned.'",
        writer: "-Seneca"
    },
      {
        quote: "'I destroy my enemies when I make them my friends.'",
        writer: "-Abraham Lincoln"
     },
    {
        quote: "'Do not pity the dead, Harry. Pity the living, and, above all those who live without love.'",
        writer: "-Albus Dumbledore"
    },
    {
        quote: "'It is impossible to manufacture or imitate love.'",
        writer: "-Horace Slughorn"
    },
    {
        quote: "'Being different isn't a bad thing. I means that you are brave enough to be yourself.'",
        writer: "-Luna Lovegood"
    },
    {
        quote: "'If you want to know what a man’s like, take a good look at how he treats his inferiors, not his equals.'",
        writer: "-Sirius Black"
    },
    {
        quote: "'Never trust anything that can think for itself if you can’t see where it keeps its brain.'",
        writer: "-Arthur Weasley"
    },
    {
        quote: "'Every human life is worth the same, and worth saving.'",
        writer: "-Kingsley Shacklebolt"
    },
    {
        quote: "'Have a biscuit, Potter.'",
        writer: "-Minerva McGonagall"
    },
    {
        quote: "'Happiness can be found even in the darkest of times, if one only remembers to turn on the light.'",
        writer: "-Albus Dumbledore"
    },
    {
        quote: "'Socks are Dobby’s favorite, favorite clothes, sir!'",
        writer: "-Dobby"
    }
];

    var arrIdx = Math.floor(Math.random() * quotes.length);
    document.getElementById("quotes").innerHTML = quotes[arrIdx].quote;
    document.getElementById("writer").innerHTML = quotes[arrIdx].writer;

}
window.onload = function() {
    generateQuote();
    document.getElementById("generate").addEventListener('click', generateQuote);
}
    </script>
</html>

Output

In this way, we will create the random quote generator using the javascript function.