Commit 25f12448 authored by Victor Friboulet's avatar Victor Friboulet
Browse files

correction problèmes et amelioration affichage

parent d6cd4a37

sripts/script.js

+29 −19
Original line number Diff line number Diff line 
const horloge = document.getElementById("timer");

var state = "travail";

let work = true;

var r = document.querySelector(':root');

let duree_travail=5;

let duree_pause=5;

let timer = duree_travail;

let timerproperty ;

let playButton = document.getElementById("play");

let stopButton = document.getElementById("stop");

horloge.innerHTML = new Date(1000 * timer).toISOString().substring(14, 19);

document.getElementById("play").addEventListener("click", function(){

playButton.addEventListener("click", function(){

    clearInterval(timerproperty);

    timerproperty=setInterval(passe_temps, 1000);

    playButton.style.setProperty("display","none");

    stopButton.style.setProperty("display","block");



});

document.getElementById("stop").addEventListener("click", function(){

stopButton.addEventListener("click", function(){

    clearInterval(timerproperty);

    if (state="travail"){

        timer = duree_pause;

    if (work){

        timer = duree_travail;

    }else{

        state="travail";

        work = true;

        timer = duree_travail;

    }

    horloge.innerHTML = new Date(1000 * timer).toISOString().substring(14, 19);

    stopButton.style.setProperty("display","none");

    playButton.style.setProperty("display","block");

});



function passe_temps(){

    timer--;

    if (timer<=0){

        if (state="travail"){

            state="pause";

    if (timer<0){

        if (work){

            work = false;

            timer = duree_pause;

            change_color();

            

        }else{

            state="travail";

            work = true;

            timer = duree_travail;

            change_color();

        }
@@ -39,15 +47,17 @@ function passe_temps(){ 
}



function change_color(){

    if (state="travail"){

        document.documentElement.style.setProperty('--main-bg-color','#e13d3d');

        document.documentElement.style.setProperty('--affichage-bg-color','#aa0000');

        document.documentElement.style.setProperty('--button-hover-color','#e13d3d');

        document.documentElement.style.setProperty('--button-color','#e13d3d');

    if (work){

        horloge.style.setProperty("color","red");

        document.body.style.setProperty('--main-bg-color','#e13d3d');

        document.body.style.setProperty('--affichage-bg-color','#aa0000');

        document.body.style.setProperty('--button-hover-color','#ff9999');

        document.body.style.setProperty('--button-color','#aa0000');

    }else{

        document.documentElement.style.setProperty('--main-bg-color','#94c7a8');

        document.documentElement.style.setProperty('--affichage-bg-color','#69967b');

        document.documentElement.style.setProperty('--button-hover-color','#c0f0d3');

        document.documentElement.style.setProperty('--button-color','#e13d3d');

        horloge.style.setProperty("color","seagreen");

        document.body.style.setProperty('--main-bg-color','#94c7a8');

        document.body.style.setProperty('--affichage-bg-color','#69967b');

        document.body.style.setProperty('--button-hover-color','#c0f0d3');

        document.body.style.setProperty('--button-color','#69967b');

    }

}
 
 No newline at end of file

styles/style.css

+17 −7
Original line number Diff line number Diff line 
:root{

body{

  --main-bg-color: #e13d3d; /* background du body */

  --affichage-bg-color: #aa0000; /* background de l'affichage */

  --button-hover-color: #ff9999; /* background des boutons au hover */

  --buton-color: #aa0000; /* background des boutons */

  --button-color: #aa0000; /* background des boutons */

}



body {
@@ -16,6 +16,14 @@ body { 
  padding: 20px; 

  margin: 0 auto; 

}

header {

  text-align: center;

  font-family: Arial, sans-serif;

  color: #ffffff;

  font-size: 24px;

  font-weight: bold;

  margin-top: 20px;

}



#affichage p {

  display: inline-block;
@@ -46,7 +54,7 @@ body { 


button {

  display: inline-block;

  padding: 12px 24px;

  padding: 10px 19px;

  border: none;

  border-radius: 30px; 

  font-size: 16px;
@@ -55,8 +63,9 @@ button { 
  text-align: center;

  text-decoration: none;

  transition: background-color 0.3s, color 0.3s;

  text-align: center;

  margin: 0 auto;

  margin-top: 20%;

  

  width: 50px;

  height: 50px;

  display: flex;
@@ -78,7 +87,7 @@ button:hover { 




button {

  background-color: var(--buton-color); 

  background-color: var(--button-color); 

  color: #fff; /* White text color */

  

}
@@ -100,5 +109,6 @@ button { 
  align-items: center;

  justify-content: center;

}



#stop{

  display: none;

}
 
 No newline at end of file