Comment réaliser un Timer en Javascript

Pour créer un Timer en Javascript, tout d'abord il faut commencer par créer 3 fichiers dans votre dossier: un fichier HTML, Un fichier CSS pour le style et un fichier Javascript pour interagir avec le DOM ( Notre fichier HTML ).

Index.html
app.css
index.js

Ensuite, nous allons vite créer un div qui va contenir notre Timer. Le Timer que nous allons créer va décrémenter à partir de 25min, lorque vous le lancez.

 <div class="container">  
        <h1 id="counter">
            <span id="text"> 25 : 00 </span>
        </h1>
 </div>

N'oubliez pas de relier vos fichiers pour qu'ils interagissent entre eux ! Dans notre cas ici, nous allons relier notre fichier Javascript à l’intérieur de notre HTML comme ceci :

 <script src="./index.js"></script>

Ce qui nous reste maintenant, c'est d'aller écrire du code dans notre index.js.
Pour interagir avec le DOM, nous devons sélectionner l'élément que nous souhaitons modifier, à partir de notre fichier Javascript. Et cela, nous allons le faire comme ceci :

document.getElementById("counter").textContent = "00 : 00"

Ce code, nous allons le mettre à l'intérieur de la fonction setInterval. En JavaScript, setInterval est plus utilisé pour déclencher des action après un intervalle de temps donné, ou de la répéter après un intervalle de temps. Voici ce que cela va nous donner:

setInterval(function () {
    if (minutes == 0 && secondes === 1) {
        document.getElementById("counter").textContent = "00 : 00"
    } 

À ce niveau nous avons crée une fonction avec la méthode setInterval. Nous avons posé une condition qui est tel que, les minutes lorqu'ils serons à 0 et les secondes à 1, que l'élément "counter" qui est sélectionné puisse afficher "00 : 00", dans le cas contraire, il va décrémenter !

else {
        secondes--;
        if (secondes == 0) {

            minutes--;
            secondes = 60;
            if (minutes == 0) {
                minutes = minutes

            }

Puis Ceci :

if (minutes.toString().length == 1) {
            minutes = "0" + minutes;
        } if (secondes.toString().length == 1) {
            secondes = "0" + secondes;
        }
        document.getElementById("counter").textContent = minutes + ":" + secondes;
    }
}, 1000)

et enfin voilà, la décrémentation de notre Timer va débuter à partir de 25 min et les seconde décrémenterons à partir de 60min..