Créer un générateur de devis aléatoires : un guide étape par étape avec du code-tutoriel CSS-php.cn

Créer un générateur de devis aléatoires : un guide étape par étape avec du code

DDD

Libérer： 2025-01-22 04:46:21

original

519 Les gens l'ont consulté

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

Ce tutoriel vous guide dans la création d'une application pratique de générateur de citations aléatoires, parfaite pour apprendre les bases du codage. Nous couvrirons chaque étape avec des exemples de code détaillés, ce qui permettra aux débutants de suivre facilement.

Aperçu du projet

Cette application récupère des citations aléatoires à partir d'une API publique, les affiche et permet aux utilisateurs de les copier ou de les partager. Décomposons le processus et explorons la logique du code.

Étape 1 : Structure HTML

Nous commençons par créer la mise en page 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>

Copier après la connexion

Cela définit la structure de base, y compris les éléments pour afficher le devis, les boutons pour les nouveaux devis et les icônes pour la copie et le partage.

Étape 2 : Gestion du CORS avec un proxy

Pour accéder à l'API externe, nous avons besoin d'une solution CORS (Cross-Origin Resource Sharing). Un simple serveur proxy Express.js gère cela :

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

Copier après la connexion

Ce proxy local récupère les devis et évite les problèmes CORS.

Étape 3 : Récupérer des devis avec JavaScript

Le bouton "Nouveau devis" déclenche une récupération de devis :

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

Copier après la connexion

Ce script récupère les données, met à jour la citation et l'auteur dans l'interface utilisateur.

Étape 4 : Fonctionnalité de copie

L'API Clipboard permet la copie de devis :

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

Copier après la connexion

Cliquer sur l'icône de copie copie la citation et l'auteur.

Étape 5 : Partager les fonctionnalités

L'API Navigator facilite le partage :

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

Copier après la connexion

Ceci gère le partage, fournissant une solution de secours pour les navigateurs manquant de navigator.share.

Étape 6 : Styliser avec CSS

CSS stylise l'application pour son attrait visuel et sa réactivité (exemples de styles omis par souci de concision).

Étape 7 : Lancement de l'application

Clonez le référentiel : (remplacez par l'URL réelle de votre référentiel)
Installer les dépendances : npm install
Démarrez le serveur proxy : node proxy.js
Ouvrez index.html dans votre navigateur.

Structure du projet

index.html : interface utilisateur principale
proxy.js : serveur proxy CORS
index.js : Récupération et affichage des devis
copyQuote.js : Fonctionnalité de copie
shareQuote.js : Fonctionnalité de partage
styles.css : Stylisme

Crédit API

Citations fournies par l'API Quotes.

Conclusion

Ce didacticiel couvrait la création d'un générateur de citations aléatoires, démontrant l'intégration des API, la gestion CORS et les API du navigateur. C'est un excellent exercice pour apprendre l'interaction avec les API, les principes fondamentaux de JavaScript et les API du navigateur. Les commentaires sont les bienvenus !

GitHub | LinkedIn | X

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!