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

Maison

interface Web

tutoriel CSS

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

DDD

Jan 22, 2025 am 04:46 AM

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 :

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

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 :

// 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}`));

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 :

// 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.";
    }
}

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 :

// 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);
    }
}

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 :

// 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}`);
    }
}

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!

Déclaration

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article connexe

Qu'est-ce que CSS Grid?Apr 30, 2025 pm 03:21 PM

CSS Grid est un outil puissant pour créer des dispositions Web complexes et réactives. Il simplifie la conception, améliore l'accessibilité et offre plus de contrôle que les méthodes plus anciennes.

Qu'est-ce que CSS Flexbox?Apr 30, 2025 pm 03:20 PM

L'article traite de CSS Flexbox, une méthode de mise en page pour l'alignement et la distribution efficaces de l'espace dans les conceptions réactives. Il explique l'utilisation de Flexbox, la compare à la grille CSS et détaille la prise en charge du navigateur.

Comment pouvons-nous rendre notre site Web réactif à l'aide de CSS?Apr 30, 2025 pm 03:19 PM

L'article traite des techniques de création de sites Web réactifs à l'aide de CSS, y compris des balises de méta de la fenêtre, des grilles flexibles, des médias fluides, des requêtes multimédias et des unités relatives. Il couvre également l'utilisation de la grille CSS et de Flexbox ensemble et recommande le cadre CSS

Que fait la propriété CSS Box-Sizizing?Apr 30, 2025 pm 03:18 PM

L'article traite de la propriété CSS-Box-Sizing, qui contrôle comment les dimensions des éléments sont calculées. Il explique des valeurs telles que la boîte de contenu, la boîte de bordure et la boîte de padding, et leur impact sur la conception de la disposition et l'alignement de la forme.

Comment pouvons-nous animer à l'aide de CSS?Apr 30, 2025 pm 03:17 PM

L'article discute de la création d'animations à l'aide de CSS, de propriétés clés et de combinaison avec JavaScript. Le principal problème est la compatibilité du navigateur.

Pouvons-nous ajouter des transformations 3D à notre projet en utilisant CSS?Apr 30, 2025 pm 03:16 PM

L'article discute de l'utilisation de CSS pour les transformations 3D, les propriétés clés, la compatibilité du navigateur et les considérations de performances pour les projets Web. (Compte de caractère: 159)

Comment pouvons-nous ajouter des gradients dans CSS?Apr 30, 2025 pm 03:15 PM

L'article discute de l'utilisation des gradients CSS (linéaire, radial, répétant) pour améliorer les visuels du site Web, l'ajout de profondeur, de concentration et d'esthétique moderne.

Que sont les pseudo-éléments dans CSS?Apr 30, 2025 pm 03:14 PM

L'article traite des pseudo-éléments dans CSS, de leur utilisation dans l'amélioration du style HTML et des différences par rapport aux pseudo-classes. Fournit des exemples pratiques.

See all articles