Create a Random Quotes App Using JavaScript

Create a Random Quotes App Using JavaScript

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 in JavaScript

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,

Share link