Simple pomodoro avec Html, CSS et Javascript

Dans le présent article, je vais créer un compteur à rebours.
Mon compteur est double en ce sens qu'il passe sans transition de la séance de travail à la séance de repos.
Le période initiale de travail est de 25 minutes et celle de repos est de 5 minutes.

L’interface utilisateur du projet est composé de 3 grandes parties; l'afficheur, la barre de progression et les boutons de commande

L'AFFICHEUR

Il s'agit de cette partie supérieure de l'application; c'est ici qu'est signalé dans quelle séance on est(travail ou repos) et c'est ici qu'est signalé le temps restant pour la séance en cours(minutes et secondes)

html

<div id="afficheContainer">
    <span id="titre">WORK SESSION</span>
    <span id="afficheur">25 : 00</span>
</div>

css

#afficheContainer{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    background-color: black;
    border-radius: 10px;
    padding: 5px;
}
#titre{
    font-weight: bold;
    opacity: 1;
    font-size: large;
    color:  #1E90FF;
}
#afficheur{
    font-weight: bold;
    opacity: 1;
    color:  #1E90FF;
    font-size: large;
}

javascript

//Les variables du titre et chrono
let titre = document.getElementById("titre")
let afficheur = document.getElementById("afficheur")
//Texte du tire, sa couleur et la couleur du chrono selon la séance à laquelle nous sommes 
titre.innerText = 'WORK SESSION'
titre.style.color =     '#1E90FF' 
afficheur.style.color = "#1E90FF" 
//Affichage du temps restant pour la séance dans le chrono
afficheur.innerText = `${workSession} : ${seconde}`

LA BARRE DE PROGRESSION

Il s'agit de l'arc en progression au milieu de l'interface utilisateur.
Son rôle est de donner à l'utilisateur l'idée sur le temps qui est déjà écoulé dans la séance en cours
Cette fonctionnalité à été rendue possible grâce à la puissance de l’élément canvas, l'une de nouveautés de HTML5.
Canvas présentant la possibilité de dessiner les arcs dans la page web, nous nous en sommes servi pour dessiner progressivement cet arc dans notre page.

Pour le travail, à 360° correspond 1500 secondes(d'ici on peut facilement trouver l'angle de progression à chaque seconde)

html

        <canvas id="w" width="300" height="300"></canvas>

javascript

//Configuration de canvas
let w = document.querySelector("#w");
let work = w.getContext("2d");
work.lineWidth = 10
//Initialisation des angles de progression
let progression = -Math.PI / 2
let progression2 = -Math.PI / 2
//Progression de l'arc dans la seance de travail
progression = progression + 0.24 * Math.PI / 180
work.beginPath();
work.arc(centreX, centreY, 100, -Math.PI / 2,progression);//centreX et centreY sont le centre de l'arc,100 est le rayon 
work.stroke(); 

LES BOUTONS DE COMMANDE

Il s'agit de 2 boutons dans la partie inférieure du projet, l'un servant à l'actualisation et l'autre à jouer ou pauser

html

<div id="buttonContainer">
     <button id="stop">
            <img src="refresh.svg" alt="" />
     </button>
     <button id="play">
            <img src="pause.svg" alt="" />
     </button>
</div>

css

#buttonContainer{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-around;
    margin-bottom: 20px;
}
button{
    background-color:   #1E90FF;
    border-style: none;
    border-radius: 25px;
}

javascript

//Variables de 2 boutons
let stop = document.getElementById("stop")
let play = document.getElementById("play")
//Actions aux 2 boutons
stop.addEventListener('click', (e) => {
    document.location.reload()
})

play.addEventListener('click', (e) => {
    progress = !progress
    chrono()
})

Merci d'avoir pris de votre temps pour lire cet article, pour une bonne compréhension des codes, veillez récupérer le code complet du projet sur https://github.com/GloiMir/pomodoro-html.git