Introduction:
You will be building a simple quote generator using HTML to structure your project, CSS to style and make it look beautiful, and Javascript for the logic. The quote will be randomly generated at the click of the button. This is a beginner project that will help you learn how to use an array and object in javascript.
Prerequisite:
- Have a good knowledge of HTML
- Have a good knowledge of CSS
- Have a good knowledge of Javascript.
HTML :
In every web application, the HTML structure is quite important. It will help you when you are styling your project.
- Create an HTML file called index.html.
- In the body tag, create two divs and give the first a class of container.
- This first div will contain the h3 element with an id called quote for the quotes and the p element with an id called author for the name of the author.
- The second div will contain the button element used to randomly choose a new quote.
- Give the button an onClick event handler with a function called handleSubmit.
...
<body>
<div class="container">
<div class="quotes">
<h3 id="quote">Quotes</h3>
<p id="author">Author</p>
</div>
</div>
<div>
<button onclick="handleSubmit()">Generate Quote</button>
</div>
<script src="./js/app.js"></script>
</body>
...
CSS :
You will be styling your HTML elements, to do this link the CSS to your HTML as seen below.
<link rel="stylesheet" href="css/style.css" />
You won’t be using a CSS framework to style this project, here is the CSS file
body {
background-color: #09b37d;
}
.container {
width: 85%;
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: auto;
}
.quotes {
width: 900px;
height: 450px;
margin: auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 50px;
color: #333333;
background-color: #0ae59f;
border: 10px solid #055139;
}
.quotes p,
h3 {
font-size: 1.5rem;
}
.quotes p {
font-family: "Redressed", cursive;
}
.quotes h3 {
font-family: "Roboto Mono", monospace;
}
button {
display: block;
margin: auto;
background-color: #055139;
color: #0ae59f;
padding: 20px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
You are building this project for mobile screens, to make it responsive on a larger screen you will be using the media query as seen below.
@media screen and (min-width: 992px) {
.container {
width: 80vw;
height: 85vh;
margin: auto;
}
}
Javascript:
You have been able to create a structure and style it. Now you are to add functionality to it. If you click on the button, it doesn't generate code yet. To do this,
Link your external javascript file to your HTML as seen below.
<script src="./js/app.js"></script>
- In your javascript file create a function called handleSubmit.
- Create a variable called quotes and assign an object that has some selected quotes and their authors in it.
- To make the quote pick an author, create another variable called randomAuthors, assign an object with an object key that has the quotes variable in it.
- To randomly select an author create a variable called authorPicker and assign the randomAuthors with an array that has the math. floor and math. Random in it.
- Multiply by randomAuthors.length.
function handleSubmit() {
let quotes = {
"— Henry Ford":
'"Whether you think you can or you think you can’t, you’re right."',
" — Alice Walker":
'"The most common way people give up their power is by thinking they don’t have any."',
"— Herb Brooks": '"Risk something or forever sit with your dreams."',
"— Steve Jobs":
'"The only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle.”"',
"— Theodore Roosevelt": '"Believe you can and you’re halfway there."',
" — Vince Lombardi":
'"Perfection is not attainable, but if we chase perfection we can catch excellence."',
" — Audrey Hepburn":
'Nothing is impossible, the word itself says ‘I’m possible’!."',
" — Nelson Mandela":
'"There is no passion to be found in playing small — in settling for a life that is less than you are capable of living."',
" — Mahatma Gandhi": '"The future depends on what you do today."',
" — Stephen Covey":
'"I am not a product of my circumstances. I am a product of my decisions."',
" — Albert Einstein":
'"Strive not to be a success, but rather to be of value."',
" — Farrah Gray":
'"Build your own dreams, or someone else will hire you to build theirs."',
};
let randomAuthors = Object.keys(quotes);
let authorPicker =
randomAuthors[Math.floor(Math.random() * randomAuthors.length)];
}
- Next, create a variable called quote assign the quote object with an array that has the authorPicker in it.
- To get the id for both the h3 and p elements, you will use the document.getElementById to get the id of the quote and the author as seen below.
...
let quote = quotes[authorPicker];
document.getElementById("quote").innerHTML = quote;
document.getElementById("author").innerHTML = authorPicker;
Here is the code base in CodePen:
Conclusion:
There are several other ways you can get your quote in javascript. One of which is creating custom data and fetching it into your javascript file. Another way is to get an actual quote generator API and fetch it into your project. You could also create an array containing the quotes and their authors without using an object. Whichever way you decide on using it, I will love to get your feedback. I hope this article was helpful.
Happy coding!!!🙌,🙌,
Top comments (0)