Commit c084c71f authored by Victor Friboulet's avatar Victor Friboulet
Browse files

final version

parent 6f0aa315

index.html

+6 −6
Original line number Diff line number Diff line
@@ -10,7 +10,7 @@ 
        <link rel="stylesheet" href="styles/style.css">

    </head>

    <body>

        <header>TIMER POMODORO</header>

        <header><h1>TIMER POMODORO</h1></header>

        <main>

        <div id="affichage">

            <p id="travail">travail</p>
@@ -20,19 +20,19 @@ 
            <div id="timer">00:00</div>

        </div>

        <div id="boutons">

            <button id="play"><i class="fa-solid fa-play"></i></button>

            <button id="stop"><i class="fa-solid fa-stop"></i></button>

            <button title="play" id="play"><area alt="play" class="fa-solid fa-play"></i></button>

            <button title="stop" id="stop"><area alt="stop" class="fa-solid fa-stop"></i></button>

        </div>

        </main>

        <button id="parametres_button"><i class="fa-solid fa-cog"></i></button>

        <button title="parametres" id="parametres_button"><area class="fa-solid fa-cog"></i></button>

        <div id="parametres">

            <p>Temps de travail(<div id="tempsTravail">25</div>min)</p>

            <div  class="slidecontainer">

                <input id="SliderTempsTravail" type="range" min="1" max="180" value="25" class="slider">

                <input aria-label="temps de travail" id="SliderTempsTravail" type="range" min="1" max="180" value="25" class="slider">

            </div>

            <p>Temps de pause(<div id="tempsPause">25</div>min)</p>

            <div class="slidecontainer">

                <input id="SliderTempsPause"type="range" min="1" max="180" value="25" class="slider">

                <input aria-label="temps de pause" id="SliderTempsPause"type="range" min="1" max="180" value="25" class="slider">

            </div>

        </div>

        <footer>Exercice Javascript - @VictorFriboulet</footer>

sripts/script.js

+16 −11
Original line number Diff line number Diff line 
let duree_travail = 1800;

let duree_pause = 1800;

try {

    const stockage = window.localStorage;



    if (stockage.getItem("duree_travail") !== null) {

        duree_travail = parseInt(stockage.getItem("duree_travail"));

    if (localStorage.getItem("duree_travail") !== null) {

        duree_travail = parseInt(localStorage.getItem("duree_travail"));

    }



    if (stockage.getItem("duree_pause") !== null) {

        duree_pause = parseInt(stockage.getItem("duree_pause"));

    if (localStorage.getItem("duree_pause") !== null) {

        duree_pause = parseInt(localStorage.getItem("duree_pause"));

    }

} catch (error) {

    console.log(error);

    console.log("localStorage n'est pas supporté");

}
@@ -108,16 +107,22 @@ slider_travail.oninput = function() { 
    work = true;

    output_travail.innerHTML = this.value;

    duree_travail = this.value*60;

    if(typeof stockage !== 'undefined'){

        stockage.setItem("duree_travail", duree_travail);

    }

    try{

        localStorage.setItem("duree_travail", duree_travail);

    }catch (error){

        console.log(error);

        console.log("localStorage n'est pas supporté");

    };

    timer = duree_travail;

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

}

slider_pause.oninput = function() {

    output_pause.innerHTML = this.value;

    duree_pause = this.value;

    if(typeof stockage !== 'undefined'){

        stockage.setItem("duree_pause", duree_pause);

    try{

        localStorage.setItem("duree_pause", duree_pause);

    } catch (error){

        console.log(error);

        console.log("localStorage n'est pas supporté");

    };

}
 
 No newline at end of file

styles/style.css

+1 −2
Original line number Diff line number Diff line
@@ -86,7 +86,7 @@ button { 
  

  width: 50px;

  height: 50px;

  display: flex;

  display: block;

}



#buttons{
@@ -107,7 +107,6 @@ button:hover { 
button {

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

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

  

}

#circle {

  width: 125px;