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

Introduction to Jest: Unit Testing, Mocking, and Asynchronous Code

How to use Cookie Consent in a React App with react-cookie-consent

String - JavaScript Challenges

What’s the Best Way to Market Your SaaS as a Solo Developer?