Hey everyone I hope you are all fine, today we are going to learn how to build a random quote generator with JavaScript. It’s a API-based project inside the project you will learn how to get the API data and display it inside the application.
In the ever-evolving landscape of web development, creating interactive and engaging features for websites is crucial. One popular and user-friendly addition is a Random Quote Generator.
This simple yet effective tool can provide visitors with a daily dose of inspiration, motivation, or even a touch of humor. In this article, we will explore the concept of building a Random Quote Generator using JavaScript, one of the most versatile and widely used programming languages for web development.
A Random Quote Generator is a script that randomly selects and displays a quote each time a user interacts with a designated area on a webpage. This dynamic element not only enhances the user experience but also adds an element of surprise and novelty to the website.
To build a Random Quote Generator, you’ll need a basic understanding of HTML, CSS, and JavaScript. Begin by creating a simple HTML structure to host your project. Use CSS to style the webpage and make it visually appealing. Then, dive into the JavaScript to handle the logic behind generating random quotes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
/>
<script defer src="js/script.js"></script>
<title>Random Quote Generator | OnlineITtuts</title>
</head>
<body>
<div class="container">
<h2>Quote of the Day</h2>
<div class="quote_content">
<i class="fa fa-quote-left quote-icon"></i>
<p class="quote">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis
perspiciatis possimus dolorum deleniti quae corporis.
</p>
<i class="fa fa-quote-right quote-icon"></i>
</div>
<p class="author">Lorem, ipsum dolor.</p>
<div class="social_icons">
<ul>
<li class="speech"><i class="fas fa-volume-up"></i></li>
<li class="copy"><i class="fas fa-copy"></i></li>
<li class="twitter"><i class="fab fa-twitter"></i></li>
</ul>
<button type="button" class="btn-quote">New Quote</button>
</div>
<p class="message">Quote Copied!</p>
</div>
</body>
</html>
You can source quotes from various places, including APIs (Application Programming Interfaces) that provide a collection of quotes. Alternatively, you can manually create an array of quotes within your JavaScript code. Ensure that your quotes are diverse and cater to the theme or purpose of your website.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Ruda:wght@400;600;700&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #074e99;
font-family: "poppins", sans-serif;
}
.container {
max-width: 600px;
width: 100%;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
padding: 2rem;
position: relative;
overflow: hidden;
}
.container h2 {
font-size: 2rem;
text-align: center;
color: #2c3e50;
}
.quote_content {
display: flex;
justify-content: center;
margin: 1.5rem 0;
}
.quote_content p {
font-size: 1.2rem;
text-align: center;
padding: 0.2rem;
word-break: break-all;
}
.quote-icon {
font-size: 1.2rem;
color: #ddd;
}
.quote_content i:first-child {
margin: 3px 10px 0 0;
}
.quote_content i:last-child {
display: flex;
align-items: flex-end;
margin: 0px 0px 3px 10px;
}
.author {
text-align: center;
font-weight: 600;
padding: 1rem 0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #707b7c;
}
.social_icons {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0.5rem 0;
}
.social_icons ul {
list-style-type: none;
display: flex;
}
ul li {
width: 50px;
height: 50px;
border: 1px solid #707b7c;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 10px 0px 0;
cursor: pointer;
}
ul li i {
color: #074e99;
font-size: 1.2rem;
}
.social_icons button {
outline: none;
border: none;
font-family: "poppins", sans-serif;
background-color: #074e99;
color: #fff;
padding: 0.9rem 2rem;
border-radius: 30px;
cursor: pointer;
}
.social_icons button:active,
ul li:active {
transform: scale(0.98);
}
.message {
position: absolute;
top: 10px;
right: 0;
padding: 0.5rem;
background-color: #2c3e50;
color: #fff;
border-radius: 3px;
transform: translateX(200%);
transition: all 0.4s ease-in;
}
.message.active {
transform: translateX(-10%);
}
The heart of your Random Quote Generator lies in the ability to randomly select and display a quote. JavaScript provides built-in functions, such as Math.random(), which you can leverage to achieve this randomness. By associating each quote with an index in an array, you can generate a random index and display the corresponding quote.
You May Also Like:
Once you’ve randomly selected a quote, it’s time to update the Document Object Model (DOM) to reflect the new quote on the webpage. JavaScript allows you to manipulate the DOM, making it dynamic and responsive to user interactions. Use functions like document.querySelector to target the HTML element where the quote will be displayed and update its content accordingly.
"use strict";
const quoteTxt = document.querySelector(".quote");
const btnQuote = document.querySelector(".btn-quote");
const authorEl = document.querySelector(".author");
const speechEl = document.querySelector(".speech");
const copyEl = document.querySelector(".copy");
const twitterEl = document.querySelector(".twitter");
const messageEl = document.querySelector(".message");
//=============== Random Quote Generator================
async function randomQuote() {
btnQuote.textContent = "loading";
const data = await fetch("https://api.quotable.io/random");
const result = await data.json();
const { content, author } = result;
quoteTxt.textContent = content;
authorEl.textContent = author;
btnQuote.textContent = "New Quote";
}
function speechTxt() {
let speechText = new SpeechSynthesisUtterance();
speechText.text = `${quoteTxt.textContent}`;
speechText.voice = window.speechSynthesis.getVoices()[0];
window.speechSynthesis.speak(speechText);
}
//============== Btn Events==================
copyEl.addEventListener("click", () => {
navigator.clipboard.writeText(quoteTxt.innerText);
messageEl.classList.add("active");
setInterval(() => {
messageEl.classList.remove("active");
}, 2500);
});
twitterEl.addEventListener("click", () => {
let tweet = `https://twitter.com/intent/tweet?url=${quoteTxt.innerText}`;
window.open(tweet, "_blank");
});
speechEl.addEventListener("click", speechTxt);
btnQuote.addEventListener("click", randomQuote);
To enhance the user experience, consider adding interactivity to your Random Quote Generator. This could include a button that users can click to generate a new quote or an automatic refresh feature at set intervals. This level of engagement ensures that users keep coming back for more inspiration.
Conclusion:
Building a Random Quote Generator with JavaScript is a rewarding endeavor that not only adds flair to your website but also provides value to your audience.
By understanding the basics of HTML, CSS, and JavaScript, you can create a simple yet effective tool that leaves a positive impression on your visitors. As you delve into the world of web development, remember that innovation and creativity are key, and a Random Quote Generator is just one of many exciting possibilities you can explore.