stanig2106/cv-generator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: ajoute la section Formations au formulaire

Browse Source 
Closes #3
This commit is contained in:
stanig2106
2026-04-05 13:00:11 +01:00
parent 18ec285002
commit 8d8109f4e8
1 changed files with 163 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+163
View File
@@ -119,6 +119,79 @@
font-size: 0.8rem;
color: #4a4a6a;
}
/* --- Section Formations --- */
.section-title {
font-size: 1.1rem;
font-weight: 600;
color: #e94560;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 1px solid #2a2a4a;
}
.section-formations {
margin-bottom: 28px;
}
.formation-item {
background: #1a1a2e;
border: 1px solid #2a2a4a;
border-radius: 8px;
padding: 16px;
margin-bottom: 12px;
position: relative;
}
.form-row {
display: flex;
gap: 12px;
}
.form-row .form-group {
flex: 1;
}
.btn-remove {
position: absolute;
top: 10px;
right: 10px;
background: transparent;
border: 1px solid #4a4a6a;
color: #a0a0b0;
border-radius: 4px;
width: 24px;
height: 24px;
font-size: 0.75rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.2s ease, color 0.2s ease;
}
.btn-remove:hover {
border-color: #e94560;
color: #e94560;
}
.btn-add {
background: transparent;
color: #e94560;
border: 1px dashed #e94560;
border-radius: 6px;
padding: 9px 16px;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
width: 100%;
margin-top: 4px;
transition: background 0.2s ease, color 0.2s ease;
}
.btn-add:hover {
background: rgba(233, 69, 96, 0.08);
}
</style>
</head>
<body>
@@ -185,6 +258,48 @@
>
</div>
<!-- Section Formations -->
<div class="section-formations">
<h2 class="section-title">Formations</h2>
<div id="formations-list">
<div class="formation-item">
<div class="form-row">
<div class="form-group">
<label for="formation-diplome-0">Diplôme / Titre</label>
<input
type="text"
id="formation-diplome-0"
name="formation-diplome[]"
placeholder="ex: Master Informatique"
>
</div>
<div class="form-group">
<label for="formation-etablissement-0">Établissement</label>
<input
type="text"
id="formation-etablissement-0"
name="formation-etablissement[]"
placeholder="ex: Université Paris-Saclay"
>
</div>
</div>
<div class="form-group">
<label for="formation-annee-0">Année d'obtention</label>
<input
type="text"
id="formation-annee-0"
name="formation-annee[]"
placeholder="ex: 2023"
pattern="[0-9]{4}"
title="Entrez une année à 4 chiffres"
>
</div>
</div>
</div>
<button type="button" class="btn-add" id="add-formation">+ Ajouter une formation</button>
</div>
<button type="submit" class="btn-generate">Générer mon CV</button>
<p class="success-message" id="success"></p>
@@ -216,6 +331,54 @@
console.log('Données du CV :', formData);
});
// Gestion des formations dynamiques
let formationCount = 1;
document.getElementById('add-formation').addEventListener('click', function () {
const list = document.getElementById('formations-list');
const index = formationCount++;
const item = document.createElement('div');
item.className = 'formation-item';
item.innerHTML = `
<button type="button" class="btn-remove" aria-label="Supprimer cette formation">✕</button>
<div class="form-row">
<div class="form-group">
<label for="formation-diplome-${index}">Diplôme / Titre</label>
<input
type="text"
id="formation-diplome-${index}"
name="formation-diplome[]"
placeholder="ex: Master Informatique"
>
</div>
<div class="form-group">
<label for="formation-etablissement-${index}">Établissement</label>
<input
type="text"
id="formation-etablissement-${index}"
name="formation-etablissement[]"
placeholder="ex: Université Paris-Saclay"
>
</div>
</div>
<div class="form-group">
<label for="formation-annee-${index}">Année d'obtention</label>
<input
type="text"
id="formation-annee-${index}"
name="formation-annee[]"
placeholder="ex: 2023"
pattern="[0-9]{4}"
title="Entrez une année à 4 chiffres"
>
</div>
`;
item.querySelector('.btn-remove').addEventListener('click', function () {
this.closest('.formation-item').remove();
});
list.appendChild(item);
});
</script>
</body>
</html>