In this tutorial, we will create a random quotes app in JavaScript. We see see JavaScript Random Quotes Project with fake api using html css and JavaScript.
Create a Random Quotes App Using JavaScript
Create random quotes app using html css and JavaScript.
HTML
<!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>Random Quotes Project</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Random Quote Generator</h1>
<p id="quoteDisplay"></p>
<button id="newQuote">New Quote</button>
</div>
<script src="app.js"></script>
</body>
</html>
CSS
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
font-family: Arial, sans-serif;
}
.container {
text-align: center;
}
button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
}
JavaScript
const quotes = [
"The greatest glory in living lies not in never falling, but in rising every time we fall. -Nelson Mandela",
"The way to get started is to quit talking and begin doing. -Walt Disney",
"Life is what happens when you're busy making other plans. -John Lennon",
// add as many quotes as you like
];
const quoteButton = document.getElementById('newQuote');
const quoteDisplay = document.getElementById('quoteDisplay');
quoteButton.addEventListener('click', displayRandomQuote);
function displayRandomQuote() {
const randomIndex = Math.floor(Math.random() * quotes.length);
quoteDisplay.innerText = quotes[randomIndex];
}
// Display an initial quote
displayRandomQuote();
Random quotes app with html css and JavaScript using Random Quotes API.
JavaScript
const quoteButton = document.getElementById('newQuote');
const quoteDisplay = document.getElementById('quoteDisplay');
quoteButton.addEventListener('click', displayRandomQuote);
async function displayRandomQuote() {
const response = await fetch('https://api.quotable.io/random');
const data = await response.json();
const quoteText = data.content;
const quoteAuthor = data.author;
quoteDisplay.innerText = `${quoteText} -${quoteAuthor}`;
}
displayRandomQuote();
Jameel Rathore
Hello! My name is Jameel Rathore, and I’m excited to share insights on web development topics. With expertise in HTML, CSS, and WordPress, I blend creativity with technical know-how in every article. My goal is to offer valuable insights and tips,