Création d’un pomodoro avec du vanilla JavaScript

Comment fonctionne un pomodoro?
Un pomodoro est une application web front-end qui fait un compte à rebours en utilisant la technique de vous concentrer pendant une courte période de temps, puis de faire une pause. avec des paramètres de minuterie personnalisables.

Dans notre cas, nous avons fait une session de 25 minutes et une pause de 5 minutes par défaut.

Technologies utilisées
Pour réaliser notre application nous avons utilisé les technologies suivantes:

HTML5
CSS3
JavaScript ES6+
User Stories
L’utilisateur est capable de :

• Démarrer une session
• Visualiser le statut de la session et de la pause
• Pauser une session
• Réinitialiser une session

Développement de l’application
Il faudra d’abord créer un dossier nommé “Pomodoro”, ensuite dans ce dossier, nous allons créer 3 fichier index.html, style.css et script.js.

Dans notre fichier html, nous allons creer deux sections, l’une qui va contenir le compteur et le progress et l’autre va contenir le le groupe des boutons.

<main>
  <section class="clock">
    <div class="mins">0</div>
    <span>:</span>
    <div class="secs">00</div>
    <audio src="http://soundbible.com/mp3/service-bell_daniel_simion.mp3"></audio>
    <svg class="progress-ring" height="120" width="120">
        <circle class="progress-ring__circle" stroke="rgba(233, 233, 57, 0.631)" stroke-width="12"
            fill="transparent" r="50" cx="60" cy="60" />
    </svg>
  </section>

  <section class="btn-group">
     <button class="start"><i class="fa fa-play"></i></button>
     <button class="pause"><i class="fa fa-pause"></i></button>
     <button class="reset"><i class="fa fa-stop"></i></button>
  </section>
</main>

Pour le progress bar, nous allons utiliser la balise SVG, qu’on va en plus personnaliser avec le JavaScript.

Maintenant notre page est formidable, enfin nous allons manipuler notre DOM avec le JS, nous allons d’abord cibler nos elements HTML avec la methode querySelector de l’objet document, declarer et initialiser nos variables.

const sonnerie = document.querySelector("audio");

const mindiv = document.querySelector(".mins");
const secdiv = document.querySelector(".secs");

const startBtn = document.querySelector(".start");
const pauseBtn = document.querySelector(".pause");

let timerContainer, totalsecs, perc, paused, seconds;
let mins = 25;

const circle = document.querySelector(".progress-ring__circle");
const radius = circle.r.baseVal.value;

Pour realiser notre bar de progression, nous avons utiliser la balise SVG, qu’on va dynamiser avec notre fonction setProgress qui prendra une poucentage en prametre en reference avec le temps ecoulé.

const circumference = radius * 2 * Math.PI;

circle.style.strokeDasharray = circumference;
circle.style.strokeDashoffset = circumference;

function setProgress(percent) {
  const offset = circumference - (percent / 100) * circumference;
  circle.style.strokeDashoffset = offset;
}

Plongeons à dans le coeur de notre application en créant l’une des fonctions utiles notamment la fonction pour decrementer le compteur de temps qu’on va nommer decrement dans cette fonction on va decrementer les secondes, puis on va mettre en place certaines conditions, l’une qui va tester si la seconde arrive à 0 et l’autre qui va tester si nos minutes pour la session sont epuisés et alterner vers la pause.

function decrement() {
  mindiv.textContent = Math.floor(seconds / 60);
  secdiv.textContent = seconds % 60 > 9 ? seconds % 60 : `0${seconds % 60}`;
  if (circle.classList.contains("danger")) {
    circle.classList.remove("danger");
  }

  if (seconds > 0) {
    perc = Math.ceil(((totalsecs - seconds) / totalsecs) * 100);

    setProgress(perc);
    seconds--;
    timerContainer = window.setTimeout("decrement()", 1000);
    if (seconds < 10) {
      circle.classList.add("danger");
    }
  } else {
    mins = 0;
    seconds = 0;
    sonnerie.play();
    let btn = localStorage.getItem("btn");

    if (btn === "focus") {
      startBtn.textContent = "start break";
      startBtn.classList.add("break");
      localStorage.setItem("btn", "break");
    } else {
      startBtn.classList.remove("break");
      startBtn.textContent = "start session";
      localStorage.setItem("btn", "focus");
    }
    startBtn.style.transform = "scale(1)";
  }
}

Afin nous allons mettre en place les evenements sur nos trois bouttons, l’un qui pour but de démarrer le timer, ensuite l’autre aura pour but de mettre le timer en pause afin celui qui va réinitialiser notre compteur.

startBtn.addEventListener("click", () => {

  seconds = mins * 60;
  totalsecs = mins * 60;
  setTimeout(decrement());
  startBtn.style.transform = "scale(0)";
  pauseBtn.style.transform = "scale(1)";
  paused = false;
});

pauseBtn.addEventListener("click", () => {
  clearTimeout(timerContainer);
  pauseBtn.style.transform = "scale(0)";
  startBtn.style.transform = "scale(1)";
});

reset.addEventListener("click", () => {
  clearTimeout(timerContainer);
  perc = 0;
  seconds = 0;
  mindiv.textContent = `00`;
  secdiv.textContent = `0${seconds}`;
  setProgress(perc);
  pauseBtn.style.transform = "scale(1)";
  startBtn.style.transform = "scale(1)";
});

Et voilà ! Maintenant vous avez appliqué les principes du pomodoro, avec du vanilla JavaScript, pour d’explorations et contributions vous pouvez retrouver mon dépot Github ICI.