TP 17 : Découper une application en modules

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Carnet de notes</title>
  <style>
    body { font-family: system-ui, sans-serif; max-width: 900px; margin: 30px auto; padding: 0 16px; }
    form { display: flex; gap: 8px; margin: 10px 0; flex-wrap: wrap; }
    table { border-collapse: collapse; width: 100%; margin-top: 16px; }
    th, td { border: 1px solid #ccc; padding: 6px 10px; text-align: left; }
    th { background: #e3f2fd; }
    #message { min-height: 1.4em; font-weight: bold; }
    .erreur { color: #c62828; } .succes { color: #2e7d32; }
    #stats { background: #f5f5f5; padding: 10px; border-radius: 6px; margin-top: 16px; }
  </style>
</head>
<body>
  <h1>Carnet de notes</h1>

  <form id="form-eleve">
    <input id="nom-eleve" placeholder="Nom de l'élève">
    <button>Ajouter l'élève</button>
  </form>

  <form id="form-note">
    <select id="choix-eleve"></select>
    <select id="choix-matiere"></select>
    <input id="valeur-note" type="number" step="0.25" placeholder="Note /20">
    <button>Ajouter la note</button>
  </form>

  <p id="message"></p>
  <table id="tableau"></table>
  <div id="stats"></div>
  <p><button id="btn-export">Exporter en CSV</button></p>

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

// =====================================================================
//  Carnet de notes — version MONOLITHIQUE (tout dans un seul fichier)
//  TP 17 : découpez ce fichier en modules. Ne changez pas le comportement.
// =====================================================================

const CLE_STOCKAGE = "carnet-notes";
const NOTE_MIN = 0;
const NOTE_MAX = 20;
const MATIERES = ["Maths", "Physique", "Informatique"];

let eleves = [];

// ---------- Calculs ----------
function arrondir(x, decimales = 2) {
  const p = 10 ** decimales;
  return Math.round(x * p) / p;
}

function moyenne(liste) {
  if (liste.length === 0) return null;
  return arrondir(liste.reduce((s, x) => s + x, 0) / liste.length);
}

function mention(moy) {
  if (moy === null) return "—";
  if (moy >= 16) return "Très bien";
  if (moy >= 14) return "Bien";
  if (moy >= 12) return "Assez bien";
  if (moy >= 10) return "Passable";
  return "Insuffisant";
}

function noteValide(note) {
  return Number.isFinite(note) && note >= NOTE_MIN && note <= NOTE_MAX;
}

// ---------- Stockage ----------
function charger() {
  try {
    eleves = JSON.parse(localStorage.getItem(CLE_STOCKAGE)) ?? [];
  } catch {
    eleves = [];
  }
}

function sauvegarder() {
  localStorage.setItem(CLE_STOCKAGE, JSON.stringify(eleves));
}

// ---------- Données ----------
function ajouterEleve(nom) {
  nom = nom.trim();
  if (!nom) throw new Error("Le nom est obligatoire.");
  if (eleves.some((e) => e.nom.toLowerCase() === nom.toLowerCase())) {
    throw new Error(`${nom} existe déjà.`);
  }
  eleves.push({ id: crypto.randomUUID(), nom, notes: {} });
  sauvegarder();
}

function supprimerEleve(id) {
  eleves = eleves.filter((e) => e.id !== id);
  sauvegarder();
}

function ajouterNote(id, matiere, note) {
  if (!noteValide(note)) {
    throw new Error(`La note doit être comprise entre ${NOTE_MIN} et ${NOTE_MAX}.`);
  }
  const eleve = eleves.find((e) => e.id === id);
  if (!eleve) throw new Error("Élève introuvable.");
  (eleve.notes[matiere] ??= []).push(note);
  sauvegarder();
}

// ---------- Statistiques ----------
function moyenneEleve(eleve) {
  return moyenne(Object.values(eleve.notes).flat());
}

function moyenneClasse() {
  const moyennes = eleves.map(moyenneEleve).filter((m) => m !== null);
  return moyenne(moyennes);
}

function meilleurEleve() {
  let meilleur = null;
  for (const e of eleves) {
    const m = moyenneEleve(e);
    if (m !== null && (meilleur === null || m > meilleur.moyenne)) {
      meilleur = { nom: e.nom, moyenne: m };
    }
  }
  return meilleur;
}

// ---------- Export CSV ----------
function versCSV() {
  const entete = ["Nom", ...MATIERES, "Moyenne", "Mention"];
  const lignes = eleves.map((e) => {
    const m = moyenneEleve(e);
    return [e.nom, ...MATIERES.map((mat) => (e.notes[mat] ?? []).join(" ")), m ?? "", mention(m)];
  });
  return [entete, ...lignes].map((l) => l.join(";")).join("\n");
}

function telechargerCSV() {
  const blob = new Blob([versCSV()], { type: "text/csv;charset=utf-8" });
  const lien = document.createElement("a");
  lien.href = URL.createObjectURL(blob);
  lien.download = "carnet-notes.csv";
  lien.click();
  URL.revokeObjectURL(lien.href);
}

// ---------- Affichage ----------
function afficherMessage(texte, type = "succes") {
  const zone = document.querySelector("#message");
  zone.textContent = texte;
  zone.className = type;
}

function afficherSelects() {
  document.querySelector("#choix-eleve").innerHTML = eleves
    .map((e) => `<option value="${e.id}">${e.nom}</option>`)
    .join("");
  document.querySelector("#choix-matiere").innerHTML = MATIERES
    .map((m) => `<option>${m}</option>`)
    .join("");
}

function afficherTableau() {
  const entete = `<tr><th>Nom</th>${MATIERES.map((m) => `<th>${m}</th>`).join("")}
    <th>Moyenne</th><th>Mention</th><th></th></tr>`;
  const lignes = eleves.map((e) => {
    const m = moyenneEleve(e);
    const cellules = MATIERES.map((mat) => `<td>${(e.notes[mat] ?? []).join(", ")}</td>`).join("");
    return `<tr><td>${e.nom}</td>${cellules}<td>${m ?? "—"}</td><td>${mention(m)}</td>
      <td><button data-supprimer="${e.id}">Supprimer</button></td></tr>`;
  });
  document.querySelector("#tableau").innerHTML = entete + lignes.join("");
}

function afficherStats() {
  const meilleur = meilleurEleve();
  document.querySelector("#stats").innerHTML = `
    Élèves : <strong>${eleves.length}</strong> ·
    Moyenne de la classe : <strong>${moyenneClasse() ?? "—"}</strong> ·
    Meilleur élève : <strong>${meilleur ? `${meilleur.nom} (${meilleur.moyenne})` : "—"}</strong>`;
}

function rafraichir() {
  afficherSelects();
  afficherTableau();
  afficherStats();
}

// ---------- Événements ----------
document.querySelector("#form-eleve").addEventListener("submit", (ev) => {
  ev.preventDefault();
  const champ = document.querySelector("#nom-eleve");
  try {
    ajouterEleve(champ.value);
    afficherMessage(`${champ.value.trim()} a été ajouté.`);
    champ.value = "";
    rafraichir();
  } catch (err) {
    afficherMessage(err.message, "erreur");
  }
});

document.querySelector("#form-note").addEventListener("submit", (ev) => {
  ev.preventDefault();
  const id = document.querySelector("#choix-eleve").value;
  const matiere = document.querySelector("#choix-matiere").value;
  const note = parseFloat(document.querySelector("#valeur-note").value);
  try {
    ajouterNote(id, matiere, note);
    afficherMessage(`Note ${note} ajoutée en ${matiere}.`);
    rafraichir();
  } catch (err) {
    afficherMessage(err.message, "erreur");
  }
});

document.querySelector("#tableau").addEventListener("click", (ev) => {
  const id = ev.target.dataset.supprimer;
  if (id) {
    supprimerEleve(id);
    afficherMessage("Élève supprimé.");
    rafraichir();
  }
});

document.querySelector("#btn-export").addEventListener("click", telechargerCSV);

// ---------- Démarrage ----------
charger();
rafraichir();