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

Demystifier les lecteurs d'écran: formulaires accessibles et meilleures pratiquesMar 08, 2025 am 09:45 AM

Ceci est le 3ème article d'une petite série que nous avons faite sur l'accessibilité. Si vous avez manqué le deuxième article, consultez "Gestion de la mise au point des utilisateurs avec: Focus-visible". Dans

Ajout d'ombres de boîte aux blocs et éléments WordPressMar 09, 2025 pm 12:53 PM

Le CSS Box-Shadow et les propriétés de contour ont gagné le thème. Laissez regarder quelques exemples de la façon dont cela fonctionne dans des thèmes réels et des options que nous devons appliquer ces styles aux blocs et éléments WordPress.

Travailler avec GraphQL CachingMar 19, 2025 am 09:36 AM

Si vous avez récemment commencé à travailler avec GraphQL ou examiné ses avantages et ses inconvénients, vous avez sans aucun doute entendu des choses comme "GraphQL ne prend pas en charge la mise en cache" ou

Faire votre première transition Svelte personnaliséeMar 15, 2025 am 11:08 AM

L'API de transition Svelte fournit un moyen d'animer les composants lorsqu'ils entrent ou quittent le document, y compris les transitions Svelte personnalisées.

Barbars CSS personnalisés chics et cool: une vitrineMar 10, 2025 am 11:37 AM

Dans cet article, nous plongerons dans le monde des barres de défilement. Je sais, ça ne semble pas trop glamour, mais croyez-moi, une page bien conçue va de pair

Show, ne dit pasMar 16, 2025 am 11:49 AM

Combien de temps passez-vous à concevoir la présentation de contenu pour vos sites Web? Lorsque vous écrivez un nouveau blog ou créez une nouvelle page, pensez-vous à

Construire une application Ethereum à l'aide de Redwood.js et de la fauneMar 28, 2025 am 09:18 AM

Avec la récente montée du prix du bitcoin sur 20k $ USD, et pour lui, récemment en train de briser 30k, je pensais que cela valait la peine de reprendre une profonde plongeon dans la création d'Ethereum

Que diable sont les commandes NPM?Mar 15, 2025 am 11:36 AM

Les commandes NPM exécutent diverses tâches pour vous, soit en tant que processus unique ou en cours d'exécution pour des choses comme le démarrage d'un serveur ou la compilation de code.

See all articles