Pomodoro avec Html, CSS et Javascript.

#watercooler

Dans l article,On va créer un compteur à rebours.
Le compteur est double en ce sens qu'il passe 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.Que l on peut personnaliser selon le desire.
La partie gauche, contient le réglage de minuteur et la partie droite c est pour le réglage de la pause!! la pause est dans l intervalle de 5 à 15 minute et le minuteur d une minute à une heure ou 60 minutes!!

Pour la realisation de ce pomodoro,On a utiliser 3 feuilles:

Une feuille Html,
Une feuille de style et
Une feuille JavaScript

1.Feuille Html
Cette feuille contient les balyses Html

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/6f3103b13c.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./style.css">


</head>
<body>
    <section>


                <div class="setMin painel">
                    <button class="btnPlus btn">+</button>
                    <p class="comptnumber">25</p>
                    <button class="btnMines btn">-</button>
                </div>

        <div class="container">

            <div class="painel">
                <p id="work">work</p>
                <p id="break">break</p>
            </div>

            <div class="timer">
                <div class="circle">
                    <div class="time">
                        <p id="minutes"></p>
                        <p>:</p>
                        <p id="seconds"></p>
                    </div>
                </div>
            </div>

            <div class="controls">
                <div>
                    <button id="start" onclick="start()"><i class="fa-solid fa-play"></i></button>

                <a id="reset"><i class="fa-solid fa-arrow-rotate-left"></i></a>
                </div>
                <div>
                    <div class="pause">
                    <button id="pausebtn" onclick="pause()"><i class="fa-solid fa-pause"></i></button>


                    </div>
                </div>
            </div>
            <span class="dots"></span>
        </div>
        <div class="setMin painel breakmn">
            <button class="btnPlusB btn">+</button>
            <p class="comptnumberB">5</p>
            <button class="btnMinesB btn">-</button>
        </div>
    </section>
    <script src="./script.js"></script>
</body>
</html>

Dans cette feuille, on a utiliser les liens CDN pour les fonts, et icons.

<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600&display=swap" rel="stylesheet"> <script src="https://kit.fontawesome.com/6f3103b13c.js" crossorigin="anonymous"></script>

2.Feuille de style CSS

:root {
    font-size: 62.5%; /* 1rem = 10px */

    --color-primary: hsla(115, 19%, 87%, 0.87);
    --color-secondary: hsl(253, 77%, 47%);
    --color-font: hsl(0, 0%, 0%);

    --color-shadow: hsl(240, 6%, 20%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    background-image: url("https://cdn.pixabay.com/photo/2019/05/19/23/47/clouds-4215608_960_720.jpg");
    background-position: center;
  background-size:cover;
    font-size: 1.6rem;
    font-family: 'Open sans', sans-serif;
}

p,
i,
h1 {
    color: var(--color-font);
}

i {
    font-size: 3.2rem;
}

h1 {
    font-size: 3.2rem;
}

/* ==== CONTENT ==== */

section {
    display: flex;
    align-items: center;
    height: 100%;
    width: 95vw;
}

.container {
    width: min(42.5rem, 100%);
    margin-inline: auto;
    padding-inline: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.painel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
    width: 20rem;
    margin-block: 5rem;
    padding: 1rem;
    border-radius: 10rem;
    box-shadow: 0px 0px 15px 10px var(--color-shadow);
}

.painel p {
    opacity: 1;
    transition: 1s ease-in;
}

.painel p.active {
    opacity: 1;
    color: var(--color-secondary);
}

.timer {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    -webkit-box-shadow: 0px 0px 15px 10px var(--color-shadow); 
    box-shadow: 0px 0px 15px 10px var(--color-shadow);
}

.circle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 26rem;
    height: 26rem;
    border-radius: 50%;
    background-color: var(--color-secondary);
    position: relative;
}

.circle::before {
    content: '';
    position: absolute;
    width: 95%;
    height: 95%;
    border-radius: 50%;
    background-color: var(--color-primary);
}

.time {
    position: relative;
    display: flex;
    flex-direction: row;
}

.time p {
    font-size: 5.6rem;
}

.time p:nth-of-type(2) {
    position: relative;
    top: -.5rem;
    margin-inline: 1rem;
}

.controls {
    margin-top: 3rem;
    display: flex;
    gap: 30rem;
}

.controls button {
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.controls #reset {
    display: none;
}
.setMin{
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr 1fr 1fr;
    text-align: center;
    position: relative;
    left: 3rem;
    bottom: 13rem;
    gap: 5px;
}
.breakmn{
    position: relative;
    left: -6rem;


}
.btn{


    width: 2rem;
}

3.Feuille JavaScript
Dans cette feuille nous va contenir les Scripts;


> let minutes=document.getElementById('minutes');
let secondes=document.getElementById('seconds');
let btnPlus= document.querySelector('.btnPlus');
let btnMines= document.querySelector('.btnMines');
let btnPlusB= document.querySelector('.btnPlusB');
let btnMinesB= document.querySelector('.btnMinesB');
let comptnumber= document.querySelector('.comptnumber');
let comptnumberB= document.querySelector('.comptnumberB');
let pausebtn= document.querySelector('#pausebtn');
let reset=document.getElementById('reset')
let interval;
console.log(btnPlus);
console.log(btnMines);
console.log(comptnumber);


let workTittle = document.getElementById('work');
let breakTittle = document.getElementById('break');
let setMunit=parseInt(comptnumber.innerHTML);
let setbreak=parseInt(comptnumberB.innerHTML);

console.log(setbreak)

let workTime = 25;
let breakTime = 2;

let seconds = "00"


// display
window.onload = () => {
    minutes.innerHTML = workTime;
    secondes.innerHTML = seconds;

    workTittle.classList.add('active');
}

// start timer
let start = ()=>{

    // change button
    document.getElementById('start').style.display = "none";
    document.getElementById('reset').style.display = "block";

    // change the time
    seconds = 59;

    let workMinutes = workTime - 1;
    let breakMinutes = breakTime - 1;

    breakCount = 0;

    // countdown
    let timerFunction = () => {
        //change the display
        minutes.innerHTML = workMinutes;
        secondes.innerHTML = seconds;

        // start
        seconds = seconds - 1;

        if(seconds === 0) {
            workMinutes = workMinutes - 1;
            if(workMinutes === -1 ){
                if(breakCount % 2 === 0) {
                    // start break
                    workMinutes = breakMinutes;
                    breakCount++

                    // change the painel
                    workTittle.classList.remove('active');
                    breakTittle.classList.add('active');
                }else {
                    // continue work
                    workMinutes = workTime -1;
                    breakCount++

                    // change the painel
                    breakTittle.classList.remove('active');
                    workTittle.classList.add('active');
                }
            }
            seconds = 59;
        }
    }

    // start countdown
    interval= setInterval(timerFunction, 1000); // 1000 = 1s

}
const pause=()=>{

    document.getElementById('start').style.display = "block";
    document.getElementById('reset').style.display = "none";
    clearInterval(interval);

}
const resetbtn=()=>{

    document.getElementById('start').style.display = "block";
    document.getElementById('reset').style.display = "none";
    minutes.innerHTML = workTime;
    secondes.innerHTML = '00';

    workTittle.classList.add('active');
    clearInterval(interval);

}
reset.addEventListener('click',()=>{
    resetbtn();
})
pausebtn.addEventListener('click', ()=>{
    pause();
});

btnPlus.addEventListener('click', () =>{
    comptnumber.innerHTML =parseInt(comptnumber.innerHTML)+1;
    setMunit=comptnumber.innerHTML;
    minutes.innerHTML=comptnumber.innerHTML
    workTime=setMunit
    if(comptnumber.innerHTML==61){

        comptnumber.innerHTML=60
    }

});
btnMines.addEventListener('click', () =>{
    comptnumber.innerHTML =parseInt(comptnumber.innerHTML)-1;
    setMunit=comptnumber.innerHTML;
    minutes.innerHTML=comptnumber.innerHTML
    workTime=setMunit;
    if(comptnumber.innerHTML==-1){

        comptnumber.innerHTML=0;
        minutes.innerHTML=0;
    }
})
btnPlusB.addEventListener('click', () =>{
    comptnumberB.innerHTML =parseInt(comptnumberB.innerHTML)+1;
    setbreak=comptnumberB.innerHTML;
    breakTime=setbreak
    console.log(setbreak)
    if(comptnumberB.innerHTML==11){

        comptnumberB.innerHTML=10
    }

});
btnMinesB.addEventListener('click', () =>{
    comptnumberB.innerHTML =parseInt(comptnumberB.innerHTML)-1;
    setbreak=comptnumberB.innerHTML;
    breakTime=setbreak
    console.log(setbreak)
    if(comptnumberB.innerHTML==4){

        comptnumberB.innerHTML=5
    }



})

Merci de votre Attention!! et merci de vous abonner pour recevoir plus des notifications.

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

DEV Community

Pomodoro avec Html, CSS et Javascript.

See why 4M developers consider Sentry, “not bad.”

Top comments (0)

This site is powered by Heroku

Read next

Building Robust Plugin Systems in Python: A Developer's Guide

Study Shows AI Language Models Give Different Answers to Same Questions Based on Minor Wording Changes

Standard AI Tool Search Falls Short: New Study Shows 43% Performance Gap in Finding Right Tools

AI Breakthrough: New Flexible Diffusion Model Improves Text, Image and Music Generation

Okay