ランダム引用ジェネレーターの構築: コード付きのステップバイステップガイド-CSSチュートリアル-php.cn

ランダム引用ジェネレーターの構築: コード付きのステップバイステップガイド

DDD

リリース： 2025-01-22 04:46:21

オリジナル

467 人が閲覧しました

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 (Cross-Origin Resource Sharing) ソリューションが必要です。単純な 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: メイン UI
proxy.js: CORS プロキシサーバー
index.js: 引用符の取得と表示
copyQuote.js: コピー機能
shareQuote.js: 共有機能
styles.css: スタイリング

API クレジット

Quotes API によって提供される引用。

結論

このチュートリアルでは、Random Quotes Generator の構築、API 統合、CORS 処理、ブラウザー API のデモンストレーションについて説明しました。これは、API インタラクション、JavaScript の基礎、ブラウザ API を学ぶのに最適な演習です。フィードバックは大歓迎です!

GitHub |リンクトイン | ×

以上がランダム引用ジェネレーターの構築: コード付きのステップバイステップガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。