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.
Top comments (0)