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

ホームページ

ウェブフロントエンド

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 (Cross-Origin Resource Sharing) ソリューションが必要です。単純な 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 が欠落しているブラウザにフォールバックを提供します。

ステップ 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 サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

スクリーンリーダーの分解：アクセス可能なフォームとベストプラクティスMar 08, 2025 am 09:45 AM

これは、フォームアクセシビリティについて行った小さなシリーズの3番目の投稿です。 2番目の投稿を逃した場合は、「ユーザーフォーカスの管理：Focus-Visible」をご覧ください。で

Smart Forms Frameworkを使用してJavaScript連絡フォームを作成するMar 07, 2025 am 11:33 AM

このチュートリアルでは、Smart Formsフレームワークを使用して、プロフェッショナルなJavaScriptフォームの作成を示しています（注：使用できなくなりました）。フレームワーク自体は利用できませんが、原則とテクニックは他のフォームビルダーに関連しています。

WordPressブロックと要素にボックスシャドウを追加しますMar 09, 2025 pm 12:53 PM

CSS Box-Shadowおよびアウトラインプロパティは、WordPress 6.1でTheme.jsonサポートを獲得しました。実際のテーマでどのように機能するか、そしてこれらのスタイルをWordPressブロックと要素に適用するために必要なオプションのいくつかの例を見てみましょう。

GraphQLキャッシングの使用Mar 19, 2025 am 09:36 AM

最近GraphQLの作業を開始した場合、またはその長所と短所をレビューした場合、「GraphQLがキャッシュをサポートしていない」または

最初のカスタムSvelteトランジションを作成しますMar 15, 2025 am 11:08 AM

Svelte Transition APIは、コンポーネントがカスタムSVELTE遷移を含むドキュメントを入力または離れるときにアニメーション化する方法を提供します。

上品でクールなカスタムCSSスクロールバー：ショーケースMar 10, 2025 am 11:37 AM

この記事では、Scrollbarsの世界に飛び込みます。私は知っています、それはあまりにも魅力的ではありませんが、私を信じてください、よく設計されたページは手をつないで行きます

ショー、Don＆＃039; t TellMar 16, 2025 am 11:49 AM

あなたのウェブサイトのコンテンツプレゼンテーションの設計にどれくらいの時間に費やしますか？新しいブログ投稿を書いたり、新しいページを作成したりするとき、あなたは考えていますか

NPMコマンドは何ですか？Mar 15, 2025 am 11:36 AM

NPMコマンドは、サーバーの開始やコンパイルコードなどの1回限りのプロセスまたは継続的に実行されるプロセスとして、さまざまなタスクを実行します。

See all articles

ホットAIツール

ホットツール

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

メモ帳++7.3.1

使いやすく無料のコードエディター

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。