ホームページ >ウェブフロントエンド >CSSチュートリアル >ランダム引用ジェネレーターの構築: コード付きのステップバイステップ ガイド
ランダム引用ジェネレーターの構築: コード付きのステップバイステップ ガイド
- DDDオリジナル
- 2025-01-22 04:46:21468ブラウズ
このチュートリアルでは、コーディングの基礎を学ぶのに最適な、実用的なランダム引用符ジェネレーター アプリケーションの構築について説明します。 各ステップを詳細なコード例で説明し、初心者でも簡単に理解できるようにします。
プロジェクト概要
このアプリはパブリック 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 サイトの他の関連記事を参照してください。