Many of us read Quote to motivate ourselves. However, if you want, you can create your own Quote Generator. I'm not kidding. If you know some basic html, css and javascript then you can easily create a random quote generator.
Now you are wondering where we will get the quote. There are two ways to do this. You can manually add all the quotes to your project. However, there are many problems.
There is another way you can do this easily. You can fetch content from any other website using api link.
JavaScript Quote Generator
Here I have shared a Quote Generator tutorial using api. You can easily create this Random Quote Generator with some html, css and javascript. Watch its live demo to learn how it works.
HTML Code
I have added all the information using the following html. There is a heading, a display and a generate button.
<div class="wrapper">
<!-- heading -->
<h2>Random Quote Generator</h2>
<div class="container">
<!-- result box -->
<div class="display">
<p id="quote">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptas,magni.</p>
<h3 id="author">Lorem, ipsum.</h3>
</div>
<!-- generate button -->
<button id="btn">Get Quote</button>
</div>
</div>
CSS Code
Now it's time to design it. Some basic css has been used for this.
- I have designed the first webpage and added background color.
- Then the headings here are designed.
- Box-shadow arrangement has been made to whiten and highlight the background of Quote Generator.
- Then the text in the result box is designed.
- The button at the end of all is designed. Button's
background-color: # 17203dand text color white.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #aed7eb;
}
.wrapper {
width: 400px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.wrapper h2{
padding: 10px;
width: 100%;
color: rgb(3, 64, 153);
text-align: center;
margin: 0px 30px 50px 0px;
background: white;
}
.container {
width: 100%;
position: relative;
border-radius: 5px;
text-align: center;
background-color: #ffffff;
padding: 50px 30px;
box-shadow: 0 20px 65px rgba(87, 11, 16, 0.3);
}
.display{
box-shadow: 0 0 20px rgba(0,139,253,0.25);
padding: 10px;
border: 1px solid rgba(9, 82, 158, 0.29);
}
.container p {
color: #142350;
line-height: 2;
font-size: 19px;
}
.container h3 {
font-weight: 600;
color: #570c9d;
margin: 35px 0 10px 35%;
text-transform: capitalize;
}
.container h3::before{
content: "- ";
color: rgb(12, 94, 210);
}
.container button {
background-color: #17203d;
border: none;
font-size: 18px;
font-weight: 600;
color: #ffffff;
cursor: pointer;
padding: 15px 45px;
border-radius: 5px;
margin-top: 40px;
}
JavaScript
If you know html and css then the above code is not very difficult for you. But now you need to activate Quote Generator using some JavaScript.
- First the constant of some id function has been determined.
- Then all the data has been collected using
apilink. Then the data is stored in the'url'. - Then store all the calculations in
'getQuote'. Here only the Quote and the author's name have been fetched and then the information has been arranged to be displayed in the webpage with the help of'innerText'. - Button and onload function has been activated at the end.
//refer div
let quote = document.getElementById("quote");
let author = document.getElementById("author");
let btn = document.getElementById("btn");
//api link
const url = "https://api.quotable.io/random";
let getQuote = () => {
//fetch all data
fetch(url)
.then((data) => data.json())
.then((item) => {
//innerText is used to print the plain text information
quote.innerText = item.content;
author.innerText = item.author;
});
};
//Activate the calculation at page load(onload)
window.addEventListener("load", getQuote);
//active the button
btn.addEventListener("click", getQuote);
Hopefully the above html, css and javascript you have no difficulty in understanding.
Please comment on how you like this Random Quote Generator. If there is any problem, you can let us know by commenting.
Related Post:
Top comments (0)