Comment créer un générateur de CV en ligne professionnel et moderne ?

Prérequis techniques essentiels pour créer un générateur de CV en ligne moderne

La création d'un générateur de CV professionnel performant en 2026 nécessite la maîtrise de plusieurs technologies web modernes et une compréhension approfondie des standards actuels du développement web. Cette application interactive combine des aspects frontend et backend pour offrir une expérience utilisateur fluide et professionnelle.

Voici les compétences techniques fondamentales indispensables pour développer un outil de création de CV efficace :

• HTML5 et CSS3 modernes : Ces technologies constituent l'ossature de votre application de génération de CV. Le HTML5 sémantique permet de structurer intelligemment le formulaire de saisie avec des balises appropriées (fieldset, legend, label) et d'organiser les différentes sections du curriculum vitae : informations personnelles avec photo optionnelle, coordonnées complètes, expériences professionnelles détaillées, formations académiques, compétences techniques et soft skills, langues maîtrisées avec niveaux, certifications professionnelles et centres d'intérêt. Le CSS3 avancé avec flexbox et grid assure un design responsive élégant, des animations fluides et une interface professionnelle adaptée à tous les écrans (desktop, tablette, mobile). Apprenez les bases avec notre tutoriel HTML et CSS complet.
• JavaScript ES6+ et programmation asynchrone : Ce langage est absolument crucial pour implémenter les fonctionnalités interactives avancées de votre générateur : validation en temps réel des champs de formulaire avec messages d'erreur contextuels, ajout et suppression dynamique de sections multiples (plusieurs expériences professionnelles, formations successives), prévisualisation instantanée du CV avec mise à jour en direct, sauvegarde automatique des données dans localStorage pour éviter les pertes accidentelles, gestion des événements utilisateur, manipulation du DOM, et génération du document final au format souhaité. Maîtrisez JavaScript avec notre cours JavaScript complet.
• Bases de données relationnelles ou NoSQL : Pour permettre aux utilisateurs de sauvegarder, modifier et gérer plusieurs versions de leur CV, vous devez implémenter un système de stockage persistant robuste. Les solutions populaires en 2026 incluent MySQL 8.0+ et PostgreSQL 15+ pour les bases relationnelles traditionnelles offrant des transactions ACID, ou MongoDB 7.0+ et Firebase Firestore pour une approche NoSQL flexible avec documents JSON. Découvrez les fondamentaux avec notre introduction aux bases de données MySQL.
• Principes de design UX/UI moderne : L'ergonomie et l'expérience utilisateur sont primordiales pour un générateur de CV efficace et attractif. Vous devez créer une interface intuitive et accessible respectant les standards WCAG 2.1, avec une navigation fluide et logique, des indicateurs de progression clairs montrant l'avancement de la saisie, un design qui inspire confiance et professionnalisme, des micro-interactions engageantes, et une hiérarchie visuelle optimale. Approfondissez vos connaissances en design web professionnel.

Pour accélérer significativement votre développement et garantir la qualité, vous pouvez vous appuyer sur des frameworks CSS modernes et des bibliothèques JavaScript éprouvés. Bootstrap 5.3+ offre un système de grille responsive sophistiqué, des composants UI prêts à l'emploi et personnalisables, tandis que Tailwind CSS propose une approche utility-first très populaire en 2026. Pour JavaScript, React, Vue.js ou Alpine.js peuvent simplifier la gestion de l'état et des composants interactifs. Ces outils fournissent des modèles de formulaires validés, des systèmes de mise en page flexibles et des animations qui vous feront gagner un temps précieux dans la création de votre générateur de CV professionnel moderne.

Méthodologie de développement structurée

Voici la méthodologie complète en 5 étapes pour développer votre générateur de CV performant de manière professionnelle et organisée :

• Étape 1 - Définir le cahier des charges détaillé : Analysez précisément les besoins fonctionnels et techniques. Déterminez quel type de CV votre générateur produira (chronologique classique, fonctionnel par compétences, mixte hybride, créatif pour secteurs artistiques). Listez toutes les informations à collecter : coordonnées complètes avec photo professionnelle optionnelle, profil LinkedIn et portfolio web, compétences techniques avec niveaux de maîtrise (débutant, intermédiaire, expert), compétences comportementales, langues parlées avec certifications (TOEIC, DELF), centres d'intérêt pertinents, références professionnelles. Définissez les formats d'export à proposer (PDF haute résolution pour impression, Word DOCX modifiable, HTML pour intégration web).
• Étape 2 - Concevoir l'architecture HTML/CSS responsive : Développez une structure HTML5 sémantique et accessible avec des sections bien délimitées et logiquement organisées : en-tête avec photo de profil uploadable et coordonnées, bloc résumé professionnel (elevator pitch), section compétences avec système d'évaluation visuel (barres de progression, étoiles), timeline chronologique d'expériences professionnelles avec descriptions détaillées des missions et réalisations, parcours de formation académique avec mentions et distinctions, et sections optionnelles personnalisables (certifications professionnelles, projets personnels significatifs, publications, conférences). Utilisez CSS Grid et Flexbox pour une mise en page moderne et adaptative.
• Étape 3 - Implémenter l'interactivité JavaScript avancée : Ajoutez des fonctionnalités modernes comme la validation en temps réel avec regex pour email et téléphone, messages d'erreur contextuels non intrusifs, ajout/suppression dynamique de sections avec animations fluides, drag-and-drop pour réorganiser les éléments, sauvegarde automatique progressive dans localStorage toutes les 30 secondes pour éviter les pertes de données, système de prévisualisation en temps réel du CV final avec switch entre différents templates, export PDF côté client avec bibliothèques comme jsPDF ou html2pdf.js, et possibilité d'importer des données depuis LinkedIn via API.
• Étape 4 - Configurer l'infrastructure backend et base de données : Choisissez votre stack backend selon vos compétences : Node.js avec Express pour un environnement JavaScript full-stack, Python avec Flask/Django pour rapidité et simplicité, ou PHP moderne avec frameworks comme Laravel ou Symfony. Pour la base de données, optez pour une solution cloud managée comme Firebase (gratuit jusqu'à certaines limites, authentification incluse), MongoDB Atlas (tier gratuit disponible), Supabase (alternative open-source à Firebase), ou installez votre propre serveur avec MySQL 8.0+ ou PostgreSQL 15+. Créez un schéma de données normalisé optimisé pour stocker les profils utilisateurs avec authentification sécurisée (hash bcrypt), plusieurs versions de CV par utilisateur, historique des modifications avec timestamps, et métadonnées utiles.
• Étape 5 - Tester rigoureusement et optimiser les performances : Effectuez des tests approfondis sur différents navigateurs modernes (Chrome, Firefox, Safari, Edge) et versions mobiles, validez l'accessibilité selon les normes WCAG 2.1 niveau AA minimum avec outils comme Lighthouse et axe DevTools, mesurez les performances avec PageSpeed Insights et WebPageTest (visez un score >90), testez la sécurité contre les injections SQL et XSS, implémentez un système de feedback utilisateur avec analytics pour identifier les points de friction, et optimisez continuellement le parcours utilisateur en fonction des données récoltées.

Objectifs et fonctionnalités essentielles d'un générateur de CV performant en 2026

L'objectif principal d'un générateur de CV en ligne moderne est de démocratiser la création de CV professionnels attractifs en permettant à tout utilisateur, même sans compétences techniques ou graphiques, de produire rapidement un curriculum vitae esthétique, bien structuré, optimisé ATS (Applicant Tracking Systems) et adapté aux standards actuels du recrutement digital. En 2026, les recruteurs utilisent massivement des systèmes automatisés de tri qui nécessitent des CV structurés et avec mots-clés pertinents.

Fonctionnalités indispensables pour un outil complet

Voici les fonctionnalités clés avancées que doit absolument intégrer un générateur de CV complet et moderne :

• Formulaire intelligent d'informations personnelles avec validation : Le système doit collecter les données essentielles avec champs intelligents : nom et prénom avec détection automatique de la casse, adresse complète avec auto-complétion géolocalisée (API Google Places), numéro de téléphone avec format international et validation selon le pays (bibliothèque libphonenumber), email avec vérification de format et détection de domaines invalides, profil LinkedIn avec parsing automatique des données publiques, URL portfolio/site web personnel avec preview, réseaux sociaux professionnels pertinents (GitHub pour développeurs, Behance pour créatifs). Upload de photo professionnelle avec recadrage et optimisation automatique.
• Gestion flexible et dynamique des sections multiples : Permettez aux utilisateurs de créer, organiser par drag-and-drop et personnaliser toutes les rubriques pertinentes : compétences techniques avec système d'évaluation visuel (barres de progression, graphiques radar, notation par étoiles), expériences professionnelles détaillées avec dates précises (mois/année), nom de l'entreprise avec logo auto-récupéré, poste occupé, missions principales avec puces éditables et réalisations quantifiées (chiffres d'affaires, KPIs atteints), formations académiques avec établissement, diplôme, mention obtenue, période et spécialisation, certifications professionnelles avec organismes certificateurs et dates de validité, langues parlées avec niveaux selon référentiel CECRL (A1 à C2), projets personnels significatifs avec descriptions et liens, publications scientifiques ou articles de blog, interventions en conférences, activités bénévoles valorisantes et centres d'intérêt pertinents pour le poste visé.
• Mise en forme automatique intelligente et optimisation ATS : Le générateur de CV moderne doit appliquer automatiquement des règles de typographie professionnelle éprouvées (hiérarchie visuelle claire avec tailles de titres cohérentes, espacements optimaux selon principes de design, alignements harmonieux, marges équilibrées), adapter intelligemment le contenu pour éviter les débordements de page ou sections orphelines inesthétiques, et garantir la compatibilité avec les systèmes ATS en évitant les tableaux complexes, images avec texte, polices exotiques et mises en forme trop créatives qui empêchent le parsing automatique.
• Bibliothèque étendue de templates professionnels personnalisables : Proposez une variété de modèles de CV modernes adaptés à différents secteurs d'activité et niveaux d'expérience : corporate sobre pour finance/conseil, créatif coloré pour marketing/design, minimaliste moderne pour tech/startups, académique traditionnel pour recherche/enseignement, avec possibilité de personnaliser finement les couleurs primaires et secondaires, polices de caractères (combinaisons harmonieuses testées), dispositions en une ou deux colonnes, présence ou non de photo, niveau de couleur (sobre à coloré), et prévisualisation en temps réel des changements.
• Export multiformat de qualité professionnelle : Le système doit générer des CV au format PDF haute résolution (300 DPI minimum, standard universel pour candidatures avec métadonnées optimisées), proposer des exports au format Word DOCX (.docx) avec styles éditables pour modifications ultérieures faciles, en HTML responsive pour intégration sur sites web personnels ou portfolios en ligne, et même en JSON structuré pour interopérabilité avec d'autres systèmes ou plateformes de recrutement.
• Système de sauvegarde cloud et versionnage intelligent : Implémentez un mécanisme robuste et sécurisé permettant aux utilisateurs authentifiés de sauvegarder automatiquement leur progression, créer et gérer plusieurs versions de leur CV adaptées à différents postes ou secteurs (CV développeur backend, CV chef de projet, CV consultant), modifier à tout moment leurs documents, conserver un historique complet des changements avec horodatage et possibilité de restauration de versions antérieures, dupliquer un CV existant pour créer rapidement une variante, et partager via lien sécurisé avec recruteurs.

Structure HTML5 sémantique et design CSS3 pour un générateur de CV responsive moderne

L'architecture technique de votre générateur de CV professionnel repose sur une structure HTML5 sémantique rigoureuse couplée à un design CSS3 moderne et responsive. Cette approche garantit l'accessibilité, la maintenabilité du code et une expérience utilisateur optimale sur tous les appareils.

Développement du formulaire HTML5 structuré

La première étape consiste à développer le formulaire HTML5 sémantique complet qui servira d'interface de saisie. Créez une page web structurée avec des balises HTML5 appropriées pour une sémantique optimale : utilisez des éléments <fieldset> pour regrouper logiquement les sections thématiques (informations personnelles, expériences, formations), des <legend> pour titrer chaque groupe, des <label> explicites systématiquement liés aux champs via attribut for, et des attributs ARIA (aria-label, aria-describedby, aria-required) pour renforcer l'accessibilité et compatibilité avec lecteurs d'écran.

Le formulaire doit inclure tous les champs nécessaires avec types HTML5 appropriés : <input type="text"> pour nom et prénom, <input type="email"> avec validation native pour l'adresse email, <input type="tel"> pour le téléphone, <input type="url"> pour les liens web, <input type="date"> pour les dates de début et fin, <textarea> avec compteur de caractères pour descriptions longues des missions et réalisations, <select> pour listes déroulantes (niveau de langue, type de diplôme), et <input type="file"> avec accept="image/*" pour l'upload de photo professionnelle.

Stylisation CSS3 moderne et responsive

Utilisez les propriétés CSS3 les plus récentes pour créer un design professionnel, élégant et parfaitement responsive : CSS Grid et Flexbox pour des layouts sophistiqués et adaptatifs, CSS Custom Properties (variables) pour centraliser les valeurs de design (couleurs, espacements, polices) et faciliter la maintenance et personnalisation, transitions et animations CSS pour des interactions fluides et engageantes, media queries mobile-first pour garantir une expérience optimale sur smartphones et tablettes, pseudo-classes avancées (:focus-visible, :invalid, :valid) pour feedback visuel immédiat. Intégrez un framework CSS moderne comme Bootstrap 5.3+ pour bénéficier de composants éprouvés et d'un système de grille responsive robuste, ou Tailwind CSS pour une approche utility-first flexible, ou créez votre propre système de design personnalisé avec Sass/SCSS pour modularité maximale.

Exemple de formulaire HTML5 complet et commenté

Voici un exemple de code HTML5 détaillé pour structurer le formulaire principal de collecte de données de votre générateur de CV interactif. Chaque section est soigneusement organisée pour une logique de saisie intuitive :

<!-- Formulaire principal du générateur de CV avec validation HTML5 -->
<form id="cv-form" method="post" action="#" novalidate>
  <!-- Section 1: Informations personnelles de base -->
  <fieldset class="form-section">
    <legend><h2>Informations personnelles</h2></legend>
    <div class="form-row">
      <label for="nom-complet">Nom complet <!-- Champ obligatoire pour identité --><span class="required">*</span></label>
      <input type="text" id="nom-complet" name="nom" required aria-required="true" placeholder="Ex: Marie Dupont" autocomplete="name">
    </div>
    <div class="form-row">
      <label for="adresse-complete">Adresse complète <!-- Adresse postale pour contact --><span class="required">*</span></label>
      <input type="text" id="adresse-complete" name="adresse" required aria-required="true" placeholder="Ex: 15 rue de la République, 75001 Paris" autocomplete="street-address">
    </div>
    <div class="form-row">
      <label for="telephone-contact">Téléphone <!-- Format international recommandé --><span class="required">*</span></label>
      <input type="tel" id="telephone-contact" name="telephone" required aria-required="true" placeholder="Ex: +33 6 12 34 56 78" pattern="[\+]?[0-9\s\-\(\)]+" autocomplete="tel">
    </div>
    <div class="form-row">
      <label for="email-professionnel">Email professionnel <!-- Validation automatique du format --><span class="required">*</span></label>
      <input type="email" id="email-professionnel" name="email" required aria-required="true" placeholder="Ex: marie.dupont@email.com" autocomplete="email">
    </div>
  </fieldset>
  <!-- Section 2: Compétences professionnelles -->
  <fieldset class="form-section">
    <legend><h2>Compétences professionnelles</h2></legend>
    <div class="form-row">
      <label for="competences-cles">Compétences clés <!-- Séparez par virgules, max 10 compétences --><span class="required">*</span></label>
      <input type="text" id="competences-cles" name="competences" required aria-required="true" placeholder="Ex: JavaScript, React, Node.js, MongoDB, Git" aria-describedby="aide-competences">
      <small id="aide-competences" class="form-help">Séparez vos compétences par des virgules</small>
    </div>
  </fieldset>
  <!-- Section 3: Expériences professionnelles -->
  <fieldset class="form-section">
    <legend><h2>Expériences professionnelles</h2></legend>
    <div id="conteneur-experiences">
      <div class="experience-item">
        <div class="form-row">
          <label for="entreprise-1">Nom de l'entreprise <!-- Raison sociale complète --><span class="required">*</span></label>
          <input type="text" id="entreprise-1" name="entreprise[]" required placeholder="Ex: Google France">
        </div>
        <div class="form-row">
          <label for="poste-occupe-1">Poste occupé <!-- Intitulé exact du poste --><span class="required">*</span></label>
          <input type="text" id="poste-occupe-1" name="poste[]" required placeholder="Ex: Développeur Full Stack Senior">
        </div>
        <div class="form-row-group">
          <div class="form-row">
            <label for="date-debut-1">Date de début <!-- Format MM/AAAA --><span class="required">*</span></label>
            <input type="date" id="date-debut-1" name="date_debut[]" required>
          </div>
          <div class="form-row">
            <label for="date-fin-1">Date de fin <!-- Laissez vide si poste actuel --></label>
            <input type="date" id="date-fin-1" name="date_fin[]" placeholder="En cours">
          </div>
        </div>
        <div class="form-row">
          <label for="description-missions-1">Missions et réalisations <!-- Détaillez vos responsabilités et résultats --><span class="required">*</span></label>
          <textarea id="description-missions-1" name="missions[]" required rows="4" placeholder="Ex: - Développement d'applications web React/Node.js
- Gestion d'équipe de 5 développeurs
- Réduction du temps de chargement de 40%"></textarea>
        </div>
      </div>
    </div>
    <button type="button" id="ajouter-experience" class="btn-add">+ Ajouter une expérience professionnelle</button>
  </fieldset>
  <!-- Section 4: Formation académique -->
  <fieldset class="form-section">
    <legend><h2>Parcours de formation</h2></legend>
    <div id="conteneur-formations">
      <div class="formation-item">
        <div class="form-row">
          <label for="etablissement-1">Établissement <!-- Nom complet de l'école ou université --><span class="required">*</span></label>
          <input type="text" id="etablissement-1" name="ecole[]" required placeholder="Ex: Université Paris-Saclay">
        </div>
        <div class="form-row">
          <label for="diplome-obtenu-1">Diplôme obtenu <!-- Type et spécialité du diplôme --><span class="required">*</span></label>
          <input type="text" id="diplome-obtenu-1" name="diplome[]" required placeholder="Ex: Master Informatique mention Très Bien">
        </div>
        <div class="form-row-group">
          <div class="form-row">
            <label for="annee-debut-1">Année de début <!-- Format AAAA --><span class="required">*</span></label>
            <input type="number" id="annee-debut-1" name="annee_debut[]" required min="1950" max="2026" placeholder="Ex: 2020">
          </div>
          <div class="form-row">
            <label for="annee-fin-1">Année de fin <!-- Format AAAA --><span class="required">*</span></label>
            <input type="number" id="annee-fin-1" name="annee_fin[]" required min="1950" max="2030" placeholder="Ex: 2022">
          </div>
        </div>
        <div class="form-row">
          <label for="specialite-1">Domaine de spécialisation <!-- Spécialité ou majeure --><span class="required">*</span></label>
          <input type="text" id="specialite-1" name="specialite[]" required placeholder="Ex: Intelligence Artificielle et Big Data">
        </div>
      </div>
    </div>
    <button type="button" id="ajouter-formation" class="btn-add">+ Ajouter une formation</button>
  </fieldset>
  <!-- Bouton de soumission principal -->
  <div class="form-actions">
    <button type="submit" id="generer-cv" class="btn-primary">🎓 Générer mon CV professionnel</button>
  </div>
</form>

Feuille de styles CSS3 professionnelle

Voici les styles CSS3 modernes et optimisés qui accompagnent le formulaire de votre générateur de CV responsive. Ces styles créent une interface élégante et professionnelle :

/* Variables CSS pour personnalisation facile */
:root {
  --couleur-primaire: #3498db;
  --couleur-primaire-hover: #2980b9;
  --couleur-texte: #333;
  --couleur-bordure: #ddd;
  --couleur-fond: #f9f9f9;
  --espacement-base: 1rem;
  --rayon-bordure: 8px;
}
/* Conteneur principal du formulaire - centré et responsive */
#cv-form {
  max-width: 800px;
  margin: 2rem auto;
  padding: 2rem;
  background: white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  border-radius: var(--rayon-bordure);
}
/* Sections du formulaire avec espacement cohérent */
.form-section {
  margin-bottom: 2.5rem;
  padding: 1.5rem;
  background: var(--couleur-fond);
  border-radius: var(--rayon-bordure);
  border: 1px solid var(--couleur-bordure);
}
.form-section legend h2 {
  font-size: 1.5rem;
  color: var(--couleur-primaire);
  margin-bottom: 1rem;
  font-weight: 600;
}
/* Lignes de formulaire avec layout flexible */
.form-row {
  margin-bottom: 1.25rem;
}
.form-row label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--couleur-texte);
  font-size: 0.95rem;
}
.required {
  color: #e74c3c;
  margin-left: 0.25rem;
}
/* Champs de saisie avec design moderne */
.form-row input,
.form-row textarea,
.form-row select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--couleur-bordure);
  border-radius: var(--rayon-bordure);
  font-size: 1rem;
  transition: all 0.3s ease;
  box-sizing: border-box;
}
/* Effet focus pour meilleure UX */
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--couleur-primaire);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}
/* Validation visuelle des champs */
.form-row input:valid {
  border-color: #27ae60;
}
.form-row input:invalid:not(:placeholder-shown) {
  border-color: #e74c3c;
}
/* Textarea redimensionnable verticalement */
.form-row textarea {
  min-height: 120px;
  resize: vertical;
  font-family: inherit;
}
/* Groupe de champs côte à côte (dates) */
.form-row-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
/* Texte d'aide sous les champs */
.form-help {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.875rem;
  color: #7f8c8d;
  font-style: italic;
}
/* Boutons d'ajout de sections */
.btn-add {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, var(--couleur-primaire), #5dade2);
  color: white;
  border: none;
  border-radius: var(--rayon-bordure);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.btn-add:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
/* Bouton principal de génération */
.form-actions {
  text-align: center;
  margin-top: 2rem;
}
.btn-primary {
  padding: 1rem 2.5rem;
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  color: white;
  border: none;
  border-radius: var(--rayon-bordure);
  font-size: 1.125rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(39, 174, 96, 0.3);
}
.btn-primary:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(39, 174, 96, 0.4);
}
/* Responsive design pour tablettes et mobiles */
@media (max-width: 768px) {
  #cv-form {
    padding: 1.5rem;
    margin: 1rem;
  }
  .form-row-group {
    grid-template-columns: 1fr;
  }
  .form-section {
    padding: 1rem;
  }
}

Ce code CSS établit un système de design cohérent, moderne et responsive pour votre générateur de CV professionnel. Il utilise des variables CSS personnalisables pour faciliter l'adaptation à votre charte graphique, implémente un design mobile-first avec media queries adaptatives, intègre des animations fluides pour améliorer l'engagement utilisateur, et assure une excellente accessibilité avec des contrastes suffisants et des états focus visibles. Le formulaire s'adapte automatiquement aux écrans de smartphones, tablettes et ordinateurs pour une expérience optimale sur tous les appareils.

Interactivité JavaScript et génération dynamique du CV

La couche JavaScript est essentielle pour transformer votre formulaire statique en un générateur de CV interactif et dynamique. Elle gère l'ajout de sections multiples, la validation des données et la génération du document final.

Script JavaScript pour ajout dynamique de sections

Voici un exemple de code JavaScript commenté qui permet d'ajouter dynamiquement des expériences professionnelles et des formations au formulaire :

// Compteurs pour générer des IDs uniques
let compteurExperiences = 1;
let compteurFormations = 1;
// Fonction pour ajouter une nouvelle expérience professionnelle
document.getElementById('ajouter-experience').addEventListener('click', function() {
  compteurExperiences++;
  const conteneur = document.getElementById('conteneur-experiences');
  // Création du template HTML pour une nouvelle expérience
  const nouvelleExperience = `
    <div class="experience-item" data-index="${compteurExperiences}">
      <h3>Expérience ${compteurExperiences}</h3>
      <div class="form-row">
        <label for="entreprise-${compteurExperiences}">Nom de l'entreprise <span class="required">*</span></label>
        <input type="text" id="entreprise-${compteurExperiences}" name="entreprise[]" required>
      </div>
      <div class="form-row">
        <label for="poste-occupe-${compteurExperiences}">Poste occupé <span class="required">*</span></label>
        <input type="text" id="poste-occupe-${compteurExperiences}" name="poste[]" required>
      </div>
      <div class="form-row-group">
        <div class="form-row">
          <label for="date-debut-${compteurExperiences}">Date de début <span class="required">*</span></label>
          <input type="date" id="date-debut-${compteurExperiences}" name="date_debut[]" required>
        </div>
        <div class="form-row">
          <label for="date-fin-${compteurExperiences}">Date de fin</label>
          <input type="date" id="date-fin-${compteurExperiences}" name="date_fin[]">
        </div>
      </div>
      <div class="form-row">
        <label for="description-missions-${compteurExperiences}">Missions et réalisations <span class="required">*</span></label>
        <textarea id="description-missions-${compteurExperiences}" name="missions[]" required rows="4"></textarea>
      </div>
      <button type="button" class="btn-remove" onclick="supprimerExperience(${compteurExperiences})">✖ Supprimer cette expérience</button>
    </div>
  `;
  // Insertion du nouveau bloc dans le DOM
  conteneur.insertAdjacentHTML('beforeend', nouvelleExperience);
});
// Fonction pour ajouter une nouvelle formation
document.getElementById('ajouter-formation').addEventListener('click', function() {
  compteurFormations++;
  const conteneur = document.getElementById('conteneur-formations');
  // Template HTML pour une nouvelle formation académique
  const nouvelleFormation = `
    <div class="formation-item" data-index="${compteurFormations}">
      <h3>Formation ${compteurFormations}</h3>
      <div class="form-row">
        <label for="etablissement-${compteurFormations}">Établissement <span class="required">*</span></label>
        <input type="text" id="etablissement-${compteurFormations}" name="ecole[]" required>
      </div>
      <div class="form-row">
        <label for="diplome-obtenu-${compteurFormations}">Diplôme obtenu <span class="required">*</span></label>
        <input type="text" id="diplome-obtenu-${compteurFormations}" name="diplome[]" required>
      </div>
      <div class="form-row-group">
        <div class="form-row">
          <label for="annee-debut-${compteurFormations}">Année de début <span class="required">*</span></label>
          <input type="number" id="annee-debut-${compteurFormations}" name="annee_debut[]" required min="1950" max="2026">
        </div>
        <div class="form-row">
          <label for="annee-fin-${compteurFormations}">Année de fin <span class="required">*</span></label>
          <input type="number" id="annee-fin-${compteurFormations}" name="annee_fin[]" required min="1950" max="2030">
        </div>
      </div>
      <div class="form-row">
        <label for="specialite-${compteurFormations}">Domaine de spécialisation <span class="required">*</span></label>
        <input type="text" id="specialite-${compteurFormations}" name="specialite[]" required>
      </div>
      <button type="button" class="btn-remove" onclick="supprimerFormation(${compteurFormations})">✖ Supprimer cette formation</button>
    </div>
  `;
  // Ajout du nouveau bloc formation dans le conteneur
  conteneur.insertAdjacentHTML('beforeend', nouvelleFormation);
});
// Fonctions de suppression d'éléments avec confirmation
function supprimerExperience(index) {
  if(confirm('Voulez-vous vraiment supprimer cette expérience ?')) {
    const element = document.querySelector(`.experience-item[data-index="${index}"]`);
    element.remove();
  }
}
function supprimerFormation(index) {
  if(confirm('Voulez-vous vraiment supprimer cette formation ?')) {
    const element = document.querySelector(`.formation-item[data-index="${index}"]`);
    element.remove();
  }
}
// Sauvegarde automatique dans localStorage toutes les 30 secondes
setInterval(function() {
  const formData = new FormData(document.getElementById('cv-form'));
  const data = Object.fromEntries(formData);
  localStorage.setItem('cv-brouillon', JSON.stringify(data));
  console.log('Données sauvegardées automatiquement');
}, 30000);
// Restauration des données au chargement de la page
window.addEventListener('load', function() {
  const sauvegardeJson = localStorage.getItem('cv-brouillon');
  if(sauvegardeJson && confirm('Voulez-vous restaurer votre brouillon sauvegardé ?')) {
    const sauvegarde = JSON.parse(sauvegardeJson);
    // Remplissage automatique des champs avec les données sauvegardées
    Object.keys(sauvegarde).forEach(key => {
      const champ = document.getElementById(key);
      if(champ) champ.value = sauvegarde[key];
    });
  }
});

Ce code JavaScript moderne et commenté implémente des fonctionnalités essentielles pour votre générateur de CV dynamique : ajout illimité d'expériences professionnelles et formations avec IDs uniques, suppression sécurisée avec confirmation utilisateur, sauvegarde automatique toutes les 30 secondes dans localStorage du navigateur pour éviter les pertes de données, et restauration automatique du brouillon au rechargement de la page. Ces fonctionnalités améliorent significativement l'expérience utilisateur et la fiabilité de votre application.

Par carabde | Publié le 25 décembre 2020 | Mis à jour le 14 février 2026