parametres et slider+ passage à un affichage h:m:s (d3c1b6aa) · Commits · Victor Friboulet / Pomodoro_Timer

index.html

+6 −5

Original line number	Diff line number	Diff line
		@@ -24,15 +24,16 @@
		<button id="stop"><i class="fa-solid fa-stop"></i></button>
		</div>
		</main>
		<button id="parameters"><i class="fa-solid fa-cog"></i></button>
		<button id="parametres_button"><i class="fa-solid fa-cog"></i></button>
		<div id="parametres">
		<p>Temps de travail(<div id="tempsTravail">0</div>min)</p>
		<p>Temps de travail(<div id="tempsTravail">25</div>min)</p>
		<div class="slidecontainer">
		<input id="SliderTempsTravail" type="range" min="1" max="100" value="50" class="slider" id="myRange">
		<input id="SliderTempsTravail" type="range" min="1" max="180" value="25" class="slider">
		</div>
		<p>Temps de pause(<div id="tempsPause">0</div>min)</p>
		<p>Temps de pause(<div id="tempsPause">25</div>min)</p>
		<div class="slidecontainer">
		<input id="SliderTempsPause"type="range" min="1" max="100" value="50" class="slider" id="myRange">
		<input id="SliderTempsPause"type="range" min="1" max="180" value="25" class="slider">
		</div>
		</div>
		<footer>Exercice Javascript - @VictorFriboulet</footer>
		<script src="sripts/script.js" async defer></script>

sripts/script.js

+61 −5

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 (stockage.getItem("duree_pause") !== null) {
		duree_pause = parseInt(stockage.getItem("duree_pause"));
		}
		} catch (error) {
		console.log(error);
		}




		const horloge = document.getElementById("timer");
		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);
		horloge.innerHTML = new Date(1000 * timer).toISOString().substring(11, 19);
		playButton.addEventListener("click", function(){
		clearInterval(timerproperty);
		timerproperty=setInterval(passe_temps, 1000);
		@@ -23,7 +41,7 @@ stopButton.addEventListener("click", function(){
		work = true;
		timer = duree_travail;
		}
		horloge.innerHTML = new Date(1000 * timer).toISOString().substring(14, 19);
		horloge.innerHTML = new Date(1000 * timer).toISOString().substring(11, 19);
		stopButton.style.setProperty("display","none");
		playButton.style.setProperty("display","block");
		});
		@@ -42,7 +60,7 @@ function passe_temps(){
		change_color();
		}
		}
		horloge.innerHTML = new Date(1000 * timer).toISOString().substring(14, 19);
		horloge.innerHTML = new Date(1000 * timer).toISOString().substring(11, 19);

		}

		@@ -61,3 +79,41 @@ function change_color(){
		document.body.style.setProperty('--button-color','#69967b');
		}
		}
		//boutons paramètres
		let parametres = document.getElementById("parametres");
		let parametres_button = document.getElementById("parametres_button");
		parametres.style.display = "none";
		parametres_button.addEventListener("click", function(){
		if (parametres.style.display == "none") {
		parametres.style.display = "block";
		} else {
		parametres.style.display = "none";
		}
		});




		// Slider paramètres

		let slider_travail = document.getElementById("SliderTempsTravail");
		let slider_pause = document.getElementById("SliderTempsPause");
		let output_travail = document.getElementById("tempsTravail");
		let output_pause = document.getElementById("tempsPause");
		slider_travail.value = duree_travail/60;
		slider_pause.value = duree_pause/60;
		output_travail.innerHTML = slider_travail.value;
		output_pause.innerHTML = slider_pause.value;
		slider_travail.oninput = function() {
		work = true;
		output_travail.innerHTML = this.value;
		duree_travail = this.value*60;
		stockage.setItem("duree_travail", duree_travail);
		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;
		stockage.setItem("duree_pause", duree_pause);
		}
		No newline at end of file

styles/style.css

+37 −2

Original line number	Diff line number	Diff line
		@@ -110,8 +110,8 @@ button {

		}
		#circle {
		width: 100px;
		height: 100px;
		width: 125px;
		height: 125px;
		background-color: rgb(198, 198, 198);
		border-radius: 50%;
		margin-right: auto;
		@@ -130,3 +130,38 @@ button {
		#stop{
		display: none;
		}
		#tempsTravail{
		display: inline;
		}
		#tempsPause{
		display: inline;
		}
		#parametres p{
		display: inline;
		}
		/* Define the track styles */
		input[type="range"] {
		width: 100%; /* Set the width of the slider */
		height: 10px; /* Set the height of the slider */
		-webkit-appearance: none; /* Remove the default styles on Safari */
		appearance: none;
		background: #FCB005; /* Use an orange background to contrast with red and teal*/
		border-radius: 5px; /* Rounded corners for the track */
		}

		/* Style the thumb (the draggable part of the slider) */
		input[type="range"]::-webkit-slider-thumb {
		-webkit-appearance: none; /* Remove the default styles on Safari */
		appearance: none;
		width: 20px; /* Set the width of the thumb */
		height: 20px; /* Set the height of the thumb */
		background-color: #bc8300; /* Thumb color */
		border: 2px solid #333; /* Border around the thumb */
		border-radius: 50%; /* Rounded shape for the thumb */
		cursor: pointer; /* Show a pointer cursor on hover */
		}

		/* Style the slider when it's in its active (dragged) state */
		input[type="range"]:active::-webkit-slider-thumb {
		background-color: #333; /* Change thumb color on active state */
		}
		No newline at end of file