Pomodoro

LE HTML

Un libellé, le temps restant, deux boutons. L'élément <output> annonce le temps aux lecteurs d'écran.

<div class="pomodoro">
  <p id="phase">Travail</p>
  <output id="temps" aria-live="polite">25:00</output>
  <button id="lancer" type="button">Démarrer</button>
  <button id="reset" type="button">Remettre à zéro</button>
</div>

L'ÉTAT

On garde la phase en cours, le temps restant, et l'heure de fin quand le minuteur tourne.

const DUREES = { travail: 25 * 60 * 1000, pause: 5 * 60 * 1000 };
let phase = 'travail';
let restant = DUREES.travail;
let fin = null;
let minuterie = null;

const libelle = document.getElementById('phase');
const temps = document.getElementById('temps');
const lancer = document.getElementById('lancer');

L'AFFICHAGE

Des millisecondes vers mm:ss. Le titre de l'onglet suit, pour voir le temps depuis un autre onglet.

function afficher(ms) {
  const s = Math.ceil(ms / 1000);
  const mm = String(Math.floor(s / 60)).padStart(2, '0');
  const ss = String(s % 60).padStart(2, '0');
  temps.textContent = `${mm}:${ss}`;
  document.title = `${mm}:${ss} · ${libelle.textContent}`;
}

LE TIC

On ne retire pas une seconde : on recalcule ce qui reste jusqu'à l'heure de fin.

function tic() {
  restant = fin - Date.now();
  if (restant <= 0) return basculer();
  afficher(restant);
}

DÉMARRER ET METTRE EN PAUSE

Le même bouton fait les deux. On arrête toujours l'ancienne minuterie avant d'en créer une.

function demarrerOuPause() {
  if (minuterie) {
    clearInterval(minuterie);
    minuterie = null;
    lancer.textContent = 'Reprendre';
    return;
  }
  fin = Date.now() + restant;
  minuterie = setInterval(tic, 250);
  lancer.textContent = 'Pause';
  tic();
}

BASCULER

Fin d'une phase : on passe à l'autre, on repart de sa durée, et on prévient.

function basculer() {
  phase = phase === 'travail' ? 'pause' : 'travail';
  libelle.textContent = phase === 'travail' ? 'Travail' : 'Pause';
  restant = DUREES[phase];
  fin = Date.now() + restant;
  bip();
  afficher(restant);
}

LE SIGNAL

Un bip court avec l'API Web Audio, sans fichier son.

let audio = null;
function bip() {
  if (!audio) return;
  const o = audio.createOscillator();
  o.frequency.value = 880;
  o.connect(audio.destination);
  o.start();
  o.stop(audio.currentTime + 0.2);
}

LES ÉCOUTEURS

Le son ne peut naître qu'après un clic : on crée l'AudioContext au premier Démarrer.

lancer.addEventListener('click', () => {
  audio ??= new AudioContext();
  demarrerOuPause();
});
document.getElementById('reset').addEventListener('click', () => {
  clearInterval(minuterie);
  minuterie = null;
  phase = 'travail';
  libelle.textContent = 'Travail';
  restant = DUREES.travail;
  lancer.textContent = 'Démarrer';
  afficher(restant);
});