建立隨機報價產生器：帶有程式碼的逐步指南-css教學-PHP中文網

專案概況

第 1 步：HTML 結構

第 2 步：使用代理處理 CORS

第 3 步：使用 JavaScript 取得報價

第 4 步：複製功能

第 5 步：共享功能

第 6 步：使用 CSS 設計樣式

第 7 步：啟動應用程式

專案結構

API 積分

結論

首頁

web前端

css教學

建立隨機報價產生器：帶有程式碼的逐步指南

DDD

Jan 22, 2025 am 04:46 AM

Building a Random Quotes Generator: A Step-by-Step Guide with Code

本教程將指導您建立實用的隨機報價產生器應用程序，非常適合學習編碼基礎知識。我們將用詳細的程式碼範例來介紹每個步驟，讓初學者可以輕鬆遵循。

專案概況

此應用程式從公共 API 檢索隨機報價，顯示它們，並允許使用者複製或共用它們。我們來分解流程，探究一下程式碼邏輯。

第 1 步：HTML 結構

我們先建立 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>

登入後複製

這設定了基本結構，包括顯示報價的元素、新報價的按鈕以及用於複製和共享的圖示。

第 2 步：使用代理處理 CORS

為了存取外部API，我們需要一個CORS（跨來源資源共用）解決方案。一個簡單的 Express.js 代理伺服器可以處理這個問題：

// 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}`));

登入後複製

此本地代理取得報價並避免 CORS 問題。

第 3 步：使用 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.";
    }
}

登入後複製

此腳本取得數據，更新 UI 中的引用和作者。

第 4 步：複製功能

剪貼簿 API 支援複製報價：

// 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);
    }
}

登入後複製

點選複製圖示可複製引用和作者。

第 5 步：共享功能

Navigator API 促進分享：

// 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}`);
    }
}

登入後複製

這處理共享，為缺少navigator.share的瀏覽器提供後備。