Comment créer un générateur de citations et proverbes avec JavaScript, Bootstrap et JSON (sans serveur)

Créer son propre générateur de citations et proverbes est un excellent projet pour progresser en JavaScript tout en développant une application web concrète, moderne et utile. Dans cet article, je vais t’expliquer étape par étape comment réaliser cette application entièrement locale, responsive et fonctionnelle, sans base de données ni backend.

Voir la démo du projet sur Youtube

Ce projet repose uniquement sur HTML, CSS (via Bootstrap), JavaScript et JSON. Il est simple, rapide à déployer et parfait pour apprendre à manipuler les données dynamiquement.

Objectif du projet

Nous allons concevoir une application web capable de :

Afficher une citation ou un proverbe aléatoire
Filtrer par type (Citation / Proverbe)
Filtrer par thème (Motivation, Humour, Sagesse, etc.)
Rechercher un mot-clé dans les contenus
Être responsive et agréable à utiliser
Fonctionner 100 % en local, sans connexion internet

Technologies utilisées

Pour ce projet, aucune librairie lourde ni backend n’est requis. On utilise uniquement :

HTML5 : structure de la page
CSS3 + Bootstrap 5 : mise en page responsive
JavaScript (vanilla) : logique, interactions, DOM
JSON : stockage local des citations/proverbes

Aucun serveur, aucun CMS, aucun framework — juste le web natif.

Fonctionnalités principales

✅ Génération aléatoire de contenu
✅ Filtres par type (Citation / Proverbe)
✅ Filtres par thème (Motivation, Sagesse, etc.)
✅ Barre de recherche rapide
✅ Design responsive grâce à Bootstrap
✅ Utilisable sans backend ni base de données
✅ 100 % local, utilisable sans connexion Internet

Organisation des fichiers

Commence par structurer ton projet comme ceci :

citations-proverbes/
├── index.html          → la page principale
├── css/
│   └── style.css       → les styles personnalisés
├── js/
│   └── script.js       → toute la logique JS
├── data/
│   └── content.json    → les données : citations &amp; proverbes

Chaque partie du projet est isolée : le HTML pour la structure, le CSS pour le style, le JavaScript pour le comportement et le JSON pour les données.

👉 Telecharger le Code source sur GitHub

Étape 1 : Créer le fichier HTML de base

Ce fichier HTML est la colonne vertébrale de ton application. Il contient :

Un titre principal
Des filtres (type & catégorie)
Une barre de recherche
Un conteneur où s’affichera le résultat
Deux boutons : générer / effacer

Il utilise Bootstrap via CDN pour avoir des composants stylés, responsives et accessibles dès le départ.

&lt;link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

La structure des composants permet une organisation fluide sur mobile, tablette ou desktop.

Code source du fichier index.php

&lt;!DOCTYPE html>
&lt;html lang="fr">
&lt;head>
  &lt;meta charset="UTF-8">
  &lt;title>Générateur de citations &amp; proverbes&lt;/title>
  &lt;meta name="viewport" content="width=device-width, initial-scale=1">
  &lt;link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  &lt;link rel="stylesheet" href="css/style.css">
&lt;/head>
&lt;body class="bg-light">

  &lt;div class="container py-4">
    &lt;h1 class="text-center mb-4">📝 Générateur de Citations &amp; Proverbes&lt;/h1>

    &lt;!-- Filtres -->
    &lt;div class="row mb-3">
      &lt;div class="col-md-4">
        &lt;select id="type-filter" class="form-select">
          &lt;option value="">Tous types&lt;/option>
          &lt;option value="citation">Citations&lt;/option>
          &lt;option value="proverbe">Proverbes&lt;/option>
        &lt;/select>
      &lt;/div>
      &lt;div class="col-md-4">
        &lt;select id="category-filter" class="form-select">
          &lt;option value="">Toutes catégories&lt;/option>
        &lt;/select>
      &lt;/div>
      &lt;div class="col-md-4 d-flex">
        &lt;input type="text" id="search-input" class="form-control me-2" placeholder="Recherche…">
        &lt;button id="btn-search" class="btn btn-primary">🔍&lt;/button>
      &lt;/div>
    &lt;/div>

    &lt;!-- Résultat -->
    &lt;div id="quote-container" class="card shadow-sm p-4 text-center">
      &lt;p id="quote-text" class="fs-5 fst-italic">Clique sur "Générer" pour une citation !&lt;/p>
      &lt;p id="quote-author" class="fw-bold mb-0">&lt;/p>
      &lt;p id="quote-meta" class="text-muted small">&lt;/p>
    &lt;/div>

    &lt;!-- Boutons -->
    &lt;div class="d-flex justify-content-center mt-3">
      &lt;button id="btn-generate" class="btn btn-success me-2">🎲 Générer aléatoirement&lt;/button>
      &lt;button id="btn-clear" class="btn btn-outline-secondary">🧹 Effacer&lt;/button>
    &lt;/div>
  &lt;/div>

  &lt;script src="js/script.js">&lt;/script>
&lt;/body>
&lt;/html>

Étape 2 : Créer un fichier JSON de données

Le JSON contient une liste d’objets. Chaque objet représente une citation ou un proverbe. Chaque entrée suit la même structure :

{
  "type": "citation",
  "category": "Motivation",
  "content": "Le succès, c’est d’aller d’échec en échec sans perdre son enthousiasme.",
  "author": "Winston Churchill"
}

Tu peux facilement ajouter, modifier ou supprimer des entrées sans écrire de code JS.

Exemple d’extension :

{
  "type": "proverbe",
  "category": "Vie",
  "content": "C’est au bout de la vieille corde qu’on tisse la nouvelle.",
  "author": "Proverbe africain"
}

Le fichier JSON est local, rapide, sécurisé et personnalisable.

Code source du fichier /data/content.json

[
  {
    "type": "citation",
    "category": "Motivation",
    "content": "Le succès, c’est d’aller d’échec en échec sans perdre son enthousiasme.",
    "author": "Winston Churchill"
  },
  {
    "type": "proverbe",
    "category": "Sagesse",
    "content": "Petit à petit, l’oiseau fait son nid.",
    "author": "Proverbe populaire"
  },
  {
    "type": "citation",
    "category": "Inspiration",
    "content": "La créativité, c’est l’intelligence qui s’amuse.",
    "author": "Albert Einstein"
  }
]

Tu peux enrichir ce fichier autant que tu veux. Chaque objet JSON contient :

le type (citation ou proverbe)
la catégorie
le contenu
l’auteur

Étape 3 : Écrire la logique JavaScript

C’est ici que tout se passe : chargement des données, filtres, affichage, recherche…

Étapes clés :

Chargement des données JSON
Initialisation des filtres dynamiques
Affichage d’une citation aléatoire
Recherche dans les contenus
Affichage intelligent et interactif

fetch('data/content.json')
  .then(res => res.json())
  .then(json => {
    data = json;
    initCategories();
  });

L’affichage se fait dynamiquement en injectant le contenu HTML dans la carte Bootstrap.

Ce fichier est lisible, commenté, et facilement modifiable. Il ne contient aucune dépendance externe.

Code source du fichier /js/script.js

let data = [];

fetch('data/content.json')
  .then(res => res.json())
  .then(json => {
    data = json;
    initCategories();
  });

function initCategories() {
  const categories = [...new Set(data.map(item => item.category))];
  const categorySelect = document.getElementById('category-filter');
  categories.forEach(cat => {
    const opt = document.createElement('option');
    opt.value = cat;
    opt.textContent = cat;
    categorySelect.appendChild(opt);
  });
}

function generateRandom() {
  const type = document.getElementById('type-filter').value;
  const category = document.getElementById('category-filter').value;
  const filtered = data.filter(item =>
    (!type || item.type === type) &amp;&amp;
    (!category || item.category === category)
  );
  if (filtered.length === 0) return;

  const item = filtered[Math.floor(Math.random() * filtered.length)];
  displayQuote(item);
}

function displayQuote(item) {
  document.getElementById('quote-text').textContent = `"${item.content}"`;
  document.getElementById('quote-author').textContent = `— ${item.author}`;
  document.getElementById('quote-meta').textContent = `${item.type} | ${item.category}`;
}

function clearQuote() {
  document.getElementById('quote-text').textContent = 'Clique sur "Générer" pour une citation !';
  document.getElementById('quote-author').textContent = '';
  document.getElementById('quote-meta').textContent = '';
}

function searchQuote() {
  const keyword = document.getElementById('search-input').value.toLowerCase();
  const result = data.find(item =>
    item.content.toLowerCase().includes(keyword) || item.author.toLowerCase().includes(keyword)
  );
  if (result) displayQuote(result);
  else alert("Aucun résultat trouvé !");
}

document.getElementById('btn-generate').addEventListener('click', generateRandom);
document.getElementById('btn-clear').addEventListener('click', clearQuote);
document.getElementById('btn-search').addEventListener('click', searchQuote);

Étape 4 : Appliquer un style simple et clair

Même si Bootstrap fait 90 % du travail visuel, ce fichier permet :

d’ajouter une identité visuelle propre (couleurs, effets)
d’appliquer un fond personnalisé
de styliser la carte de citation
de gérer l’aspect responsive plus finement

Exemple :

.card {
  background-color: #ffffffdd;
  border-left: 5px solid #0d6efd;
}

Ce fichier peut aussi contenir un mode sombre, des animations ou un thème plus avancé si tu veux l’améliorer.

body {
  font-family: "Segoe UI", sans-serif;
}
.card {
  background-color: #ffffffcc;
}
button {
  min-width: 150px;
}

Tu peux bien sûr personnaliser les couleurs, ajouter un thème sombre, etc.

Voir la démo du projet sur Youtube

Étape 5 : Lancer le projet en local

Aucune installation n’est nécessaire ! Pour tester l’app en local :

Place tous les fichiers dans un dossier
Lance ce dossier avec un serveur local :

python -m http.server

3. Ouvre ton navigateur sur http://localhost:8000

Recommandations pour améliorer le projet

Si tu souhaites aller encore plus loin, voici plusieurs pistes concrètes :

Fonctionnalités avancées

Ajout de favoris via localStorage
Historique des citations affichées
Partage social (Facebook, Twitter, WhatsApp, Email)
Copie rapide pour Instagram ou LinkedIn
Traduction multilingue (i18n : anglais, espagnol, arabe…)
Ajout de citations personnalisées par l’utilisateur

Expérience utilisateur

Mode sombre / clair avec détection automatique
Animation de transition entre les citations
Icônes interactives (avec FontAwesome)
Optimisation mobile (PWA installable)

Sécurité & performance

Compression des fichiers .json pour les gros volumes
Préchargement des données en cache (serviceWorker)
Ajout d’un manifest.json pour rendre l’app installable (Progressive Web App)

Usage professionnel

Générateur de citations pour écrivains ou coachs
Intégration dans un dashboard d’entreprise
Outil pédagogique pour classes ou formations

Déploiement

Tu peux héberger ce projet :

localement (fonctionne hors ligne)
sur GitHub Pages gratuitement
sur n’importe quel serveur web (aucun PHP requis)

Lien GitHub

Tu peux télécharger le projet complet ici :

👉 Telecharger le Code source sur GitHub

Conclusion

Tu sais maintenant comment créer ton propre générateur de citations et proverbes, entièrement en JavaScript + Bootstrap + JSON, 100 % local et sans backend. Ce projet est un excellent point de départ pour mieux comprendre les bases du DOM, de l’interaction utilisateur et de la manipulation de données JSON.

C’est aussi une app idéale pour ton portfolio. En plus, elle est légère, rapide, et ne dépend d’aucune technologie lourde. Que demander de plus ?

Si tu veux d’autres projets dans le même style ou si tu as une question technique, n’hésite pas à t’inscrire à notre NewsLetter ou à me contacter dans les commentaire ou via le formulaire de contact. A bientôt !

Comment créer un générateur de citations et proverbes avec JavaScript, Bootstrap et JSON (sans serveur)

Objectif du projet

Technologies utilisées

Fonctionnalités principales

Organisation des fichiers

Étape 1 : Créer le fichier HTML de base

Étape 2 : Créer un fichier JSON de données

Exemple d’extension :

Étape 3 : Écrire la logique JavaScript

Étapes clés :

Étape 4 : Appliquer un style simple et clair

Étape 5 : Lancer le projet en local

Recommandations pour améliorer le projet

Fonctionnalités avancées

Expérience utilisateur

Sécurité & performance

Usage professionnel

Déploiement

Lien GitHub

Conclusion

Comments

Laisser un commentaire Annuler la réponse

Comment créer un générateur de citations et proverbes avec JavaScript, Bootstrap et JSON (sans serveur)

Comment empêcher les captures d’écran et enregistrements vidéo sur son site Web

Interface e-commerce moderne et responsive avec HTML, CSS, Bootstrap 5

Créer une base de données SQL complète pour gérer une bibliothèque (cas concret expliqué pas à pas)