In this article, I'm going to explain how you can create your own random quotes generator using HTML, CSS, and JavaScript. I'm going to be using motivational quotes and we'll go step by step. Apart from motivational quotes, you can decide to use any type of quote you like. You can find a demo of the random quotes generator here.
First, let's work on the HTML.
Using any editor of your choice, create a basic HTML structure. In Atom you can do that by typing html and in vs code, shift+1 then enter.
<DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
Next, create a div with an id of container to wrap the contents of the web page.
<div id="container">
</div>
Inside we'll have an h1 with a title of Quote Generator,
<h1>Quote Generator</h1>
Next, create a div with an id of showquotes. This div holds a default quote, it can be any quote of your choice, mine is make hay while the sun shines.
<div id="showquotes">Make hay while the sun shines</div>
Lastly for our HTML, we need a button that when clicked on, will generate our random quotes.
<button id="generate">Generate</button>
Moving on to the CSS style (feel free to use your preferred styles). First, let's remove the basic styling of the web page, i.e.
html {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Next, I'll provide some styles for the body of the web page. You can find the background image here.
body {
font-family: monospace;
background-image: url(clematis.jpg);
background-size: cover;
background-repeat: no-repeat;
display: flex;
align-items: center;
justify-content: center;
}
Let's make our h1 text bigger
h1 {
font-size: 6vw;
}
For the container div, I'll be using the CSS box model, (remember you can style yours the way you like). Don't know much about the CSS box model? check this out. So we have the container style looking like this
#container {
width: 80%;
height: 80vh;
margin:8vh;
border: 1px solid black;
border-radius: 50px;
padding: 10px;
text-align: center;
background-color: #ffffff;
opacity: 0.6;
}
I added the opacity to give the box a transparent background, and also a faint background color.
For our showquotes div, I'll increase the font size to 30px.
#showquotes {
font-size: 30px;
}
I used viewport width for the h1 because I want it to adjust according to the viewport of any device, but for the showquotes, I used pixels, so the size does not change (it's our main focus).
For the generate button, I'll just apply some basic styles
#generate {
margin-top: 10vh;
width: 150px;
height: 50px;
border-radius: 50px;
font-size: 20px;
}
Finally! we are done with the CSS styles. Now to our JavaScript code. I'm going to be very basic in my explanation of the JavaScript code because my aim is the ease of understanding. We need to have a variable that holds the generate button and a variable that will get the showquotes div. Since our divs had an id attribute, we will use the JavaScript getElementById. First, we'll get the generate button and store it in a variable;
let generate = document.getElementById('generate');
Also, we'll get the showquotes div and store it in a variable;
let showQuotes = document.getElementById('showquotes');
We need quotes right?. Next, we'll store our quotes in an array and also write a function to access our array indexes. I have some quotes copied already, you can find more here. Here we have our array
let quotes = [
'Push yourself, because no one else is going to do it for you.',
'Great things never come from comfort zones.',
'Success doesn’t just find you. You have to go out and get it.',
'Sometimes later becomes never. Do it now.',
'Dream it. Wish it. Do it.',
'The harder you work for something, the greater you’ll feel when you achieve it.',
'Dream bigger. Do bigger.',
'Do something today that your future self will thank you for.',
];
Don't forget to separate the quotes with a comma.
Now about the function, there are a few things I'm going to explain. I'll give a brief rundown before we go to the code.
We will be using the JavaScript addEventListener. The addEventListener is going to listen for a click event on the generate button.
The click event makes it possible for the quotes to change when the generate button is clicked.
Also, we need a variable inside our function that we'll call to give our random quotes, and also it will have the Math.random() function. For a proper random function, we'll use the Math.floor() method to round down to the nearest integer.
We have the addEventListener function looking like this
generate.addEventListener('click', function(){
})
We are calling it on the generate button. I'll pass the length of the array into a variable because we'll need to call it.
let QLength = quotes.length;
var randomQuotes = quotes[Math.floor(Math.random() * QLength)]
Lastly, we will attach the randomQuotes variable to the showQuotes variable so that the quotes can be displayed and then pass it back to the div in our HTML where our quotes will appear.
showQuotes.innerHTML = randomQuotes;
Altogether, this is our JavaScript code
let generate = document.getElementById('generate');
let showQuotes = document.getElementById('showquotes');
let quotes = [
'Push yourself, because no one else is going to do it for you.',
'Great things never come from comfort zones.',
'Success doesn’t just find you. You have to go out and get it.',
'Sometimes later becomes never. Do it now.',
'Dream it. Wish it. Do it.',
'The harder you work for something, the greater you’ll feel when you achieve it.',
'Dream bigger. Do bigger.',
'Do something today that your future self will thank you for.',
];
generate.addEventListener('click', function(){
let QLength = quotes.length;
let randomQuotes = quotes[Math.floor(Math.random() * QLength)]
showQuotes.innerHTML = randomQuotes;
});
Hope it was helpful and easy to understand, feel free to tell me what you think.