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
Top comments (0)