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

feat: ajoute le système i18n frontend (FR/EN)

Browse Source 
- Crée js/i18n/i18n.js : module central avec t(), getLocale(), setLocale()
- Crée js/i18n/locales/fr.json et en.json : traductions FR et EN
- Crée js/i18n/applyTranslations.js : applique les data-i18n au DOM
- Crée js/i18n/langSwitcher.js : sélecteur de langue (boutons FR/EN)
- Modifie index.html : ajoute les attributs data-i18n sur tous les textes
- Modifie js/main.js : intègre i18n et relance l'application des traductions
- Modifie css/form.css : styles pour le sélecteur de langue
- Persistance de la langue dans localStorage (clé cv_lang)
This commit is contained in:
stanig2106
2026-04-05 22:43:44 +01:00
parent f0cf9a605f
commit 4e9746c308
8 changed files with 173 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/form.css
+38
View File
@@ -121,3 +121,41 @@ input:focus {
padding-top: 16px; padding-top: 16px;
font-size: 0.95rem; font-size: 0.95rem;
} }
/* ── Header top row ── */
.header-top {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 10px;
}
/* ── Language switcher ── */
.lang-switcher {
display: flex;
gap: 6px;
}
.lang-btn {
background: transparent;
border: 1px solid #2a2a4a;
color: #a0a0b0;
padding: 4px 10px;
border-radius: 4px;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
letter-spacing: 0.05em;
transition: border-color 0.2s ease, color 0.2s ease;
}
.lang-btn:hover {
border-color: #e94560;
color: #e0e0e0;
}
.lang-btn.active {
border-color: #e94560;
color: #e94560;
}
index.html
+15 -8
View File
@@ -10,8 +10,11 @@
<body> <body>
<div class="container"> <div class="container">
<header> <header>
<h1>CV Generator</h1> <div class="header-top">
<p>Remplissez vos informations pour générer votre CV</p> <h1 data-i18n="header.title">CV Generator</h1>
<div id="lang-switcher" class="lang-switcher" aria-label="Language switcher"></div>
</div>
<p data-i18n="header.subtitle">Remplissez vos informations pour générer votre CV</p>
</header> </header>
<div class="card"> <div class="card">
@@ -20,11 +23,12 @@
<!-- ── Section Identité ── --> <!-- ── Section Identité ── -->
<!-- Voir sections/identite/identite.html pour le découpage complet --> <!-- Voir sections/identite/identite.html pour le découpage complet -->
<div class="form-group"> <div class="form-group">
<label for="nom">Nom</label> <label for="nom" data-i18n="form.nom">Nom</label>
<input <input
type="text" type="text"
id="nom" id="nom"
name="nom" name="nom"
data-i18n-placeholder="form.nom_placeholder"
placeholder="Dupont" placeholder="Dupont"
autocomplete="family-name" autocomplete="family-name"
required required
@@ -34,11 +38,12 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="prenom">Prénom</label> <label for="prenom" data-i18n="form.prenom">Prénom</label>
<input <input
type="text" type="text"
id="prenom" id="prenom"
name="prenom" name="prenom"
data-i18n-placeholder="form.prenom_placeholder"
placeholder="Jean" placeholder="Jean"
autocomplete="given-name" autocomplete="given-name"
required required
@@ -48,11 +53,12 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="email">Email</label> <label for="email" data-i18n="form.email">Email</label>
<input <input
type="email" type="email"
id="email" id="email"
name="email" name="email"
data-i18n-placeholder="form.email_placeholder"
placeholder="jean.dupont@email.com" placeholder="jean.dupont@email.com"
autocomplete="email" autocomplete="email"
required required
@@ -61,11 +67,12 @@
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="titre">Titre du poste</label> <label for="titre" data-i18n="form.titre">Titre du poste</label>
<input <input
type="text" type="text"
id="titre" id="titre"
name="titre" name="titre"
data-i18n-placeholder="form.titre_placeholder"
placeholder="Développeur Full Stack" placeholder="Développeur Full Stack"
autocomplete="organization-title" autocomplete="organization-title"
required required
@@ -81,14 +88,14 @@
- Hobbies → sections/hobbies/ - Hobbies → sections/hobbies/
--> -->
<button type="submit" class="btn-generate">Générer mon CV</button> <button type="submit" class="btn-generate" data-i18n="form.submit">Générer mon CV</button>
<p class="success-message" id="success"></p> <p class="success-message" id="success"></p>
</form> </form>
</div> </div>
<footer> <footer>
<p>CV Generator &copy; 2026</p> <p data-i18n="footer">CV Generator &copy; 2026</p>
</footer> </footer>
</div> </div>
js/i18n/applyTranslations.js
+15
View File
@@ -0,0 +1,15 @@
import { t } from './i18n.js';
export function applyTranslations() {
document.querySelectorAll('[data-i18n]').forEach(el => {
el.textContent = t(el.dataset.i18n);
});
document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
el.placeholder = t(el.dataset.i18nPlaceholder);
});
document.querySelectorAll('[data-i18n-title]').forEach(el => {
el.title = t(el.dataset.i18nTitle);
});
}
js/i18n/i18n.js
+35
View File
@@ -0,0 +1,35 @@
import fr from './locales/fr.json' assert { type: 'json' };
import en from './locales/en.json' assert { type: 'json' };
const LOCALES = { fr, en };
const SUPPORTED = Object.keys(LOCALES);
const STORAGE_KEY = 'cv_lang';
let currentLocale = localStorage.getItem(STORAGE_KEY) || 'fr';
if (!SUPPORTED.includes(currentLocale)) currentLocale = 'fr';
function resolve(obj, path) {
return path.split('.').reduce((acc, key) => acc?.[key], obj);
}
export function t(key, params = {}) {
const messages = LOCALES[currentLocale] ?? LOCALES.fr;
let str = resolve(messages, key) ?? resolve(LOCALES.fr, key) ?? key;
return str.replace(/\{(\w+)\}/g, (_, k) => params[k] ?? `{${k}}`);
}
export function getLocale() {
return currentLocale;
}
export function setLocale(lang) {
if (!SUPPORTED.includes(lang)) return;
currentLocale = lang;
localStorage.setItem(STORAGE_KEY, lang);
document.documentElement.lang = lang;
document.dispatchEvent(new CustomEvent('localechange', { detail: { lang } }));
}
export function getSupportedLocales() {
return SUPPORTED;
}
js/i18n/langSwitcher.js
+17
View File
@@ -0,0 +1,17 @@
import { getLocale, setLocale, getSupportedLocales } from './i18n.js';
export function initLangSwitcher() {
const switcher = document.getElementById('lang-switcher');
if (!switcher) return;
const supported = getSupportedLocales();
switcher.innerHTML = supported
.map(lang => `<button class="lang-btn${lang === getLocale() ? ' active' : ''}" data-lang="${lang}">${lang.toUpperCase()}</button>`)
.join('');
switcher.addEventListener('click', (e) => {
const btn = e.target.closest('.lang-btn');
if (!btn) return;
setLocale(btn.dataset.lang);
});
}
js/i18n/locales/en.json
+20
View File
@@ -0,0 +1,20 @@
{
"header": {
"title": "CV Generator",
"subtitle": "Fill in your details to generate your CV"
},
"form": {
"nom": "Last name",
"nom_placeholder": "Smith",
"prenom": "First name",
"prenom_placeholder": "John",
"email": "Email",
"email_placeholder": "john.smith@email.com",
"titre": "Job title",
"titre_placeholder": "Full Stack Developer",
"submit": "Generate my CV"
},
"success": "CV ready to be generated for {prenom} {nom}!",
"footer": "CV Generator © 2026",
"lang_switcher_label": "Language"
}
js/i18n/locales/fr.json
+20
View File
@@ -0,0 +1,20 @@
{
"header": {
"title": "CV Generator",
"subtitle": "Remplissez vos informations pour générer votre CV"
},
"form": {
"nom": "Nom",
"nom_placeholder": "Dupont",
"prenom": "Prénom",
"prenom_placeholder": "Jean",
"email": "Email",
"email_placeholder": "jean.dupont@email.com",
"titre": "Titre du poste",
"titre_placeholder": "Développeur Full Stack",
"submit": "Générer mon CV"
},
"success": "CV prêt à être généré pour {prenom} {nom} !",
"footer": "CV Generator © 2026",
"lang_switcher_label": "Langue"
}
js/main.js
+13 -1
View File
@@ -3,6 +3,9 @@ import { collectCompetences, renderCompetences } from './sections/competences.js
import { collectFormation, renderFormation } from './sections/formation.js'; import { collectFormation, renderFormation } from './sections/formation.js';
import { collectExperience, renderExperience } from './sections/experience.js'; import { collectExperience, renderExperience } from './sections/experience.js';
import { collectHobbies, renderHobbies } from './sections/hobbies.js'; import { collectHobbies, renderHobbies } from './sections/hobbies.js';
import { t, getLocale } from './i18n/i18n.js';
import { applyTranslations } from './i18n/applyTranslations.js';
import { initLangSwitcher } from './i18n/langSwitcher.js';
function generateCV() { function generateCV() {
const identite = collectIdentite(); const identite = collectIdentite();
@@ -19,12 +22,21 @@ function generateCV() {
const success = document.getElementById('success'); const success = document.getElementById('success');
if (success) { if (success) {
success.textContent = `CV prêt à être généré pour ${identite.prenom} ${identite.nom} !`; success.textContent = t('success', { prenom: identite.prenom, nom: identite.nom });
success.style.display = 'block'; success.style.display = 'block';
} }
} }
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
document.documentElement.lang = getLocale();
applyTranslations();
initLangSwitcher();
document.addEventListener('localechange', () => {
applyTranslations();
initLangSwitcher();
});
document.getElementById('cv-form')?.addEventListener('submit', (e) => { document.getElementById('cv-form')?.addEventListener('submit', (e) => {
e.preventDefault(); e.preventDefault();
generateCV(); generateCV();