Hello guys, today I am going to show you How to build a JavaScript Random Quote Generator using HTML CSS & JavaScript, in this video, I will create a simple quote generator.
JavaScript Random Quote Generator step by step
Step 1 — Creating a New Project
In this step, we need to create a new project folder and create files(index.html, style.css, quotes.js) inside the folder. for creating a Random Quote Generator. In the next step, you will start creating the structure of the webpage.
You may like these also:
- 🔥 Best 25+ Stunning CSS Fire Animations 2021
- How to create code compressor in JavaScript | HTML Minifier
Step 2 — Setting Up the basic structure
In this step, we will add the HTML code to create the basic structure of the project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to build a JavaScript Random Quote Generator</title>
<link rel="stylesheet" href="style.css">
<script src="quotes.js"></script>
</head>
<body>
</body>
</html>
This is the base structure of most web pages that use HTML.
Add the following code inside the <body> tag:
<section class="randomQuote">
<header>
<h2>Quote of the Day</h2>
<p>Press the below button to receive a random quote!</p>
</header>
<div class="quotesOutput">
<p id="generatedQuote">"The greatest glory in living lies not in never falling, but in rising every time we fall."</p>
<span id="AuthorName">--Nelson Mandela</span>
</div>
<button onclick="generateQoute()">New Quote</button>
</section>
Step 3 — Adding Styles for the Classes
In this step, we will add styles to the section class Inside style.css file
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
* {
padding: 0;
margin: 0;
font-family: 'Poppins', sans-serif;
}
header {
text-align: center;
background: #4b00ff;
color: #fff;
padding: 10px 0;
margin-bottom: 10px;
}
.quotesOutput {
text-align: center;
background: #dde1ff;
padding: 20px;
min-height: 50px;
margin-bottom: 20px;
}
button {
display: block;
width: 150px;
height: 40px;
font-size: 16px;
font-weight: 600;
background: #4b00ff;
color: #fff;
border: transparent;
margin: auto;
cursor: pointer;
}
p#generatedQuote {
font-size: 16px;
font-weight: 800;
}
Step 4 — Adding some lines of JavaScript code
In this step, we will add some JavaScript code to build Quote Generator.
const arrayOfQuotes = [
{'author': 'Nelson Mandela',
'quote': 'The greatest glory in living lies not in never falling, but in rising every time we fall.'
},
{'author': 'Walt Disney',
'quote': 'The way to get started is to quit talking and begin doing.'
},
{'author': 'Eleanor Roosevelt',
'quote': 'If life were predictable it would cease to be life, and be without flavor.'
},
{'author': 'Oprah Winfrey',
'quote': 'If you look at what you have in life, you`ll always have more. If you look at what you don`t have in life, you`ll never have enough'
},
{'author': 'James Cameron',
'quote': 'If you set your goals ridiculously high and it`s a failure, you will fail above everyone else`s success'
},
{'author': 'Elbert Hubbard',
'quote': 'Do not take life too seriously. You will not get out alive.'
},
{'author': 'John Lennon',
'quote': 'Life is what happens when you`re busy making other plans.'
}
];
// Create a function to generate quote from array
function generateQoute(){
const random = Number.parseInt(Math.random()*arrayOfQuotes.length + 1);
document.querySelector("#generatedQuote")
.textContent = `\"${arrayOfQuotes[random].quote}\"`;
document.querySelector("#AuthorName")
.textContent = `--${arrayOfQuotes[random].author}`;
}
Random Quote Generator Final Result
Top comments (9)
Come on, this ain't a thing. You can create an API for serving quotes and a simple Json db for storing and updates, which is a better approach. Plus, this is just a client to such API where you had hard coded quotes.
Thanks :) You are right, but this is only how we can deal with the array, also we can use API and db
So, you are saying you wrote this post to show how to handle an array. Not, right!
This post is How to build a JavaScript Random Quote Generator with array not any api or db
Don't get me started on heading, according to the former, it should construct a quote from random words because being a generator. A generator takes raw materials and process it into a useful form. Bro, I'm done with this and now I take this post as your side/fun tutorial for newbies. Concluded, not worth for anyone above the bar.
With regards and respect,
AshishK
[thread ended]
Yeah, there's already API available for generating quotes on the internet. It's a better approach for this project.
Just a suggestion, you should add a codepen to the blog, so the user get to interact and see what you have built.
Nice article. Keep up the good work brother. An alternative to hard coding quotes is to query quotes from an API. You will be able to get a much larger selection.
Thanks :) You are right, but this is only how we can create simple with the array, also we can use API