Api-Kaamelott

L'histoire de sa construction

Api-Kaamelott est mon tout premier script JavaScript, et à ce titre il a une place particulière dans mon parcours. L'idée était simple : consommer une API publique de citations de la série Kaamelott et les afficher dynamiquement dans une interface minimaliste. Derrière la légèreté du sujet, c'est un projet fondateur : première manipulation du DOM, première requête fetch(), premier traitement d'une réponse JSON, première gestion d'erreur asynchrone. Toutes les bases que l'on utilise quotidiennement dans le développement front-end, apprises ici sur un cas concret et amusant. Pas de framework, pas de librairie — du JavaScript pur et dur. Ce projet m'a donné le goût des APIs et l'envie d'aller plus loin vers des intégrations plus complexes.

Technologies utilisées

• Git
• JavaScript
• HTML
• CSS

J'en ai bavé mais j'y suis arrivé 🚀

// Fetch d'une citation Kaamelott aléatoire
async function fetchCitation() {
  try {
    const res  = await fetch('https://kaamelott.chaudie.re/api/random');
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const data = await res.json();

    document.getElementById('citation').textContent  = data.citation.citation;
    document.getElementById('personnage').textContent = `— ${data.citation.infos.personnage}`;
    document.getElementById('episode').textContent    =
      `${data.citation.infos.saison} · ${data.citation.infos.episode}`;
  } catch (err) {
    document.getElementById('citation').textContent = 'La Table Ronde est indisponible.';
    console.error(err);
  }
}

document.getElementById('btn-citation').addEventListener('click', fetchCitation);
fetchCitation();