Pomodoro avec Html, CSS et Javascript.

#javascript #html #css

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.

DEV Community

Pomodoro avec Html, CSS et Javascript.

Top comments (0)

Read next

How to animate objects on scroll with Tailwind CSS and the JavaScript intersection observer API

Understanding the Factory Method Design Pattern

Tracking Order Status in Node.js: A Deep Dive

Git Cheat Sheet – Git Commands You Should Know