How to make Random Quote Generator

Hasnain Ali — Wed, 28 Feb 2024 18:20:58 +0000

You might be new in Web Development and after being familiar with HTML CSS and JavaScript you would like to make a Quote Generator as your first Project using JavaScript to add interactivity to your project so let's start with HTML and CSS

<div class="main">
  <div class="container">
      <h1>Quotes</h1>
      <p id="quote">Click on Generate Quote for random quotes </p>
    <button class="btn" onclick="generateQuote()">
      Generate Quote
    </button>
    <p class="para">الخلافة على المنهج النبوي</p>
  </div>
</div>

so let me explain a little bit about the structure of the Quote Generator for the sake of convenience I have taken div with the main class and applied height: 100vh;, flex properties, and justify-content: center; and justify-content: center; for making the Quote Generator align center horizontally and vertically.

.main{
    height: 100vh;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
  }
  .container{
    box-shadow: 2px 2px 100px white;
    border: 1px solid black;
    margin: auto;
    height: 350px;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    background-color: rgba(167, 232, 210, 0.845);
    width: 50%;
  }
  #quote{
    font-size: x-large;
    font-weight: bold;
    padding:10px;
  }
  h1{
    color: rgb(13, 0, 255);
  }
  .btn{
    padding: 7px;
    background-color: rgb(59, 148, 237);
    width: 200px;
    color: white;
    border-radius: 10px;
    border: none;
    font-size: larger;
  }
  .btn:hover{
    background-color: rgb(28, 42, 228);
    transition: all 0.5s linear;
  }
  .para{
      font-size: x-large;
      color: rgb(147, 19, 19);
  }

so now let's go through JavaScript, and make a function with any name you want here I have taken generateQuote() and created an array containing quotes, here I have taken 10 quotes you can take as much as you can.

function generateQuote() {
    let quotes = [
      "The best way to defeat someone is to beat him at politeness. - 'Umar ibn Al-Khattab(RA)'",
      "I have never regretted my silence, as for my speech I've regretted it many times. - 'Umar ibn Al-Khattab(RA)'",
      "Through patience great things are accomplished. - 'Ali Ibn Abi Talib(RA)' ",
      "There is peace in solitude, away from the evils of people.- 'Ali Ibn Abi Talib(RA)'",
      "One should not feel happy at the acquisition of wealth nor should be feel aggrieved at its loss.- 'Usman bin Affan(RA)' ",
      "Silence is the best cure of the malady of anger. - 'Usman bin Affan(RA)'",
      "Beware of pride because you will be returning to the earth, and your body will be eaten up by the worms. - 'Abu Bakr As-Siddiq(RA)'",
      "Life comes to pass, yet death is very much closer. - 'Abu Bakr As-Siddiq(RA)'",
      "When I am in the battlefield, I love it more than my wedding night with the most beautiful of women. ― 'Khalid ibn al-Walid(RA)'",
      "Do not say that! How few are the Romans and how numerous are we ! 'An army's strength lies not in numbers of men but in Allah's help, and its weakness lies in being forsaken by Allah - 'Khalid ibn al-Walid(RA)'",
    ];

//generate a random number using Math.random()
   let randomNumber = Math.floor(Math.random() * 10);
let quote = document.getElementById("quote").innerHTML=quotes[randomNumber];
}

Initially random number generate numbers 0 to 1. This range includes 0, but does not include 1.
To set a random number start from 0(inclusive) to 10(exclusive) multiple obtained random number with 10 and for a round of use Math.floor() to make it integer from 0 to 10(exclusive) as I have 10 Quotes and array start from 0 so 0 - 9 are 10 indices which will return 10 index elements randomly.
for updating the <p id='para'> take a variable and get id='para' element and update its text with a randomly generated number and use this number to return the given index number's value

For source code visit repository Quote-Generator

Feel free to ask questions if you face problem

Forem: Hasnain Ali

How to make Random Quote Generator