Générateur de citations en JavaScript et JSON : tuto en 5 étapes

Dans ce tutoriel, tu vas créer un générateur de citations en JavaScript, avec Bootstrap et un fichier JSON, sans aucun serveur : affichage aléatoire de citations et de proverbes, filtres par catégorie et design responsive. Un projet léger pour apprendre fetch(), la manipulation du DOM et la gestion de données en JSON.

Niveau : débutantDurée : ~45 minHTML · Bootstrap · JavaScript · JSONCode source gratuit

Générateur de citations et proverbes en JavaScript avec Bootstrap : carte affichant une citation — Le résultat final : le générateur de citations et proverbes

Télécharger le code source du projet sur GitHub

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.

Sommaire

Objectif du générateur de citations en JavaScript

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

Télécharger le code source du projet 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.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

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

index.html

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

Code source du fichier index.html

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

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

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

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

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

  <script src="js/script.js"></script>
</body>
</html>

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

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

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

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

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

  <script src="js/script.js"></script>
</body>
</html>

index.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"
}

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

data/content.json

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

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

data/content.json

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"
  }
]

[
  {
    "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"
  }
]

data/content.json

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 du générateur de citations en 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();
  });

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

js/script.js

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) &&
    (!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);

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) &&
    (!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);

js/script.js

É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;
}

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

css/style.css

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

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

css/style.css

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

python -m http.server

terminal

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 :

Télécharger le code source du projet sur GitHub

Conclusion : ton générateur de citations en JavaScript

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 !

Pour aller plus loin

Découvre comment interroger une vraie API au lieu d’un fichier JSON avec le moteur de recherche texte et images en JavaScript
Ajoute une sauvegarde des citations favorites avec localStorage, comme dans l’application de gestion de tâches
Continue avec la Quiz App en JavaScript, qui repose aussi sur des données structurées

FAQ : questions fréquentes

Pourquoi faut-il un serveur local pour tester le projet ?

Les navigateurs bloquent fetch() sur les fichiers ouverts directement (file://) pour des raisons de sécurité. Un petit serveur local comme python -m http.server résout le problème.

Comment ajouter mes propres citations ?

Ajoute de nouvelles entrées dans data/content.json en respectant la même structure (texte, auteur, catégorie). Elles apparaîtront automatiquement, sans toucher au JavaScript.

Puis-je héberger ce générateur gratuitement ?

Oui, le projet est 100 % statique : tu peux le publier gratuitement sur GitHub Pages, Netlify ou Vercel.

Le fichier JSON peut-il contenir des milliers de citations ?

Oui, mais au-delà de quelques milliers d’entrées, le chargement initial ralentit. Tu pourras alors découper les données par catégorie ou passer à une API.

2 Comments

Shannick


décembre 10, 2025, 6:04 pm

Comment réduire le width des citations ?
- LM-Code
  
  
  décembre 10, 2025, 9:06 pm
  
  Hello Shannick,
  
  Navré du rtard. Tu peux le faire en recherchant juste width et modifier sa valeur.
  
  Bien à toi

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

Objectif du générateur de citations en JavaScript

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 du générateur de citations en 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 : ton générateur de citations en JavaScript

Pour aller plus loin

FAQ : questions fréquentes

2 Comments

Laisser un commentaire Annuler la réponse

Ne rate plus aucun tutoriel 🚀

Faille EMBRACE : 5 assistants de code IA piégés, le guide essentiel

Jeu de combat React : crée Cyber Arena Fighter avec Canvas (tutoriel 2026)

Jeu Snake en Python : crée Snake Néon avec Pygame (tutoriel complet 2026)

Gestionnaire de scripts IT en Java : crée ScriptPro avec JavaFX et SQLite