This tutorial guides you through building a practical Random Quotes Generator application, perfect for learning coding fundamentals. We'll cover each step with detailed code examples, making it easy for beginners to follow along.
This app retrieves random quotes from a public API, displays them, and lets users copy or share them. Let's break down the process and explore the code logic.
We begin by creating the HTML layout:
<code class="language-html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Random Quotes Generator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="app">
<!-- Content will be added here -->
</div>
<script src="index.js"></script>
</body>
</html></code>This sets up the basic structure, including elements to display the quote, buttons for new quotes, and icons for copying and sharing.
To access the external API, we need a CORS (Cross-Origin Resource Sharing) solution. A simple Express.js proxy server handles this:
<code class="language-javascript">// proxy.js
const express = require("express");
const fetch = require("node-fetch");
const cors = require("cors");
const app = express();
app.use(cors());
app.get("/api/quote", async (req, res) => {
try {
const response = await fetch("https://qapi.vercel.app/api/random");
const data = await response.json();
res.json(data);
} catch (error) {
res.status(500).json({ error: "API fetch failed" });
}
});
const PORT = 4000;
app.listen(PORT, () => console.log(`Proxy running on http://localhost:${PORT}`));</code>This local proxy fetches quotes and avoids CORS issues.
The "New Quote" button triggers a quote fetch:
<code class="language-javascript">// index.js
const quoteDisplay = document.getElementById("quote");
const authorDisplay = document.getElementById("author");
async function getQuote() {
try {
const response = await fetch('http://localhost:4000/api/quote');
const data = await response.json();
quoteDisplay.textContent = data.quote || "No quote found.";
authorDisplay.textContent = data.author || "Unknown";
} catch (error) {
console.error("Quote fetch error:", error);
quoteDisplay.textContent = "Error fetching quote.";
}
}</code>This script fetches data, updates the quote and author in the UI.
The Clipboard API enables quote copying:
<code class="language-javascript">// copyQuote.js
async function copyQuote() {
try {
const quoteText = `${quoteDisplay.textContent} - ${authorDisplay.textContent}`;
await navigator.clipboard.writeText(quoteText);
alert("Copied to clipboard!");
} catch (error) {
console.error("Copy failed:", error);
}
}</code>Clicking the copy icon copies the quote and author.
The Navigator API facilitates sharing:
<code class="language-javascript">// shareQuote.js
async function shareQuote() {
const quoteText = `${quoteDisplay.textContent} - ${authorDisplay.textContent}`;
try {
await navigator.share({ text: quoteText });
} catch (error) {
console.error("Share failed:", error);
// Fallback for unsupported browsers
alert(`Share this quote: ${quoteText}`);
}
}</code>This handles sharing, providing a fallback for browsers lacking navigator.share.
CSS styles the app for visual appeal and responsiveness (example styles omitted for brevity).
npm install
node proxy.js
index.html in your browser.index.html: Main UIproxy.js: CORS proxy serverindex.js: Quote fetching and displaycopyQuote.js: Copy functionalityshareQuote.js: Share functionalitystyles.css: StylingQuotes provided by the Quotes API.
This tutorial covered building a Random Quotes Generator, demonstrating API integration, CORS handling, and browser APIs. It's a great exercise for learning API interaction, JavaScript fundamentals, and browser APIs. Feedback is welcome!
GitHub | LinkedIn | X
The above is the detailed content of Building a Random Quotes Generator: A Step-by-Step Guide with Code. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
