首页 >web前端 >css教程 >构建随机报价生成器：带有代码的分步指南

构建随机报价生成器：带有代码的分步指南

DDD原创: 2025-01-22 04:46:21471浏览

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

本教程将指导您构建实用的随机报价生成器应用程序，非常适合学习编码基础知识。我们将用详细的代码示例来介绍每个步骤，使初学者可以轻松遵循。

项目概况

此应用程序从公共 API 检索随机报价，显示它们，并允许用户复制或共享它们。我们来分解一下流程，探究一下代码逻辑。

第 1 步：HTML 结构

我们首先创建 HTML 布局：

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

这设置了基本结构，包括显示报价的元素、新报价的按钮以及用于复制和共享的图标。

第 2 步：使用代理处理 CORS

为了访问外部API，我们需要一个CORS（跨源资源共享）解决方案。一个简单的 Express.js 代理服务器可以处理这个问题：

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

此本地代理获取报价并避免 CORS 问题。

第 3 步：使用 JavaScript 获取报价

“新报价”按钮会触发报价获取：

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

此脚本获取数据，更新 UI 中的引用和作者。

第 4 步：复制功能

剪贴板 API 支持复制报价：

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

单击复制图标可复制引用和作者。

第 5 步：共享功能

Navigator API 促进共享：

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

这处理共享，为缺少navigator.share的浏览器提供后备。

第 6 步：使用 CSS 设计样式

CSS 样式应用程序以提高视觉吸引力和响应能力（为简洁起见，省略了示例样式）。

第 7 步：启动应用程序

克隆存储库：（替换为您的实际存储库 URL）
安装依赖项： npm install
启动代理服务器： node proxy.js
在浏览器中打开index.html。

项目结构

index.html：主界面
proxy.js：CORS 代理服务器
index.js：报价获取并显示
copyQuote.js：复制功能
shareQuote.js：共享功能
styles.css：造型

API 积分

由 Quotes API 提供的报价。

结论

本教程涵盖了构建随机报价生成器、演示 API 集成、CORS 处理和浏览器 API。对于学习 API 交互、JavaScript 基础知识和浏览器 API 来说，这是一个很好的练习。欢迎反馈！

GitHub |领英 | X

以上是构建随机报价生成器：带有代码的分步指南的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript css html npm express Resource for break public copy JS this display github ui Access Quotes Generator

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Top eadless UI Libraries for React Developers下一篇：Day Javascript Introduction

查看更多