diff --git a/index.html b/index.html index 94898b6..be27b12 100644 --- a/index.html +++ b/index.html @@ -6,45 +6,46 @@ Cronometro +
- + : - + : - +
+ +
+ +
+
- - - -
+
- -
-
- 10 - -
diff --git a/script.js b/script.js index a0b7180..8380fd2 100644 --- a/script.js +++ b/script.js @@ -1,189 +1,205 @@ let timerStarted = false; -let seconds = 30; -let minutes = 0; -let hours = 0; +let seconds = 0; +let sec = 0; +let min = 0; +let hour = 0; let intervalInstance; -function formatTime(value) { - return value < 10 ? `0${value}` : value.toString(); -} - -function validateInput(input, maxValue) { - let value = parseInt(input.value) || 0; - - if (value < 0) value = 0; - if (value > maxValue) value = maxValue; - - input.value = formatTime(value); -} - -document.getElementById("hour").disabled = true; -document.getElementById("min").disabled = true; -document.getElementById("sec").disabled = true; - -document.getElementById("hour").value = formatTime(hours); -document.getElementById("min").value = formatTime(minutes); -document.getElementById("sec").value = formatTime(seconds); - -document.getElementById("hour").addEventListener("input", function () { - validateInput(this, 99); -}); - -document.getElementById("min").addEventListener("input", function () { - validateInput(this, 59); -}); - -document.getElementById("sec").addEventListener("input", function () { - validateInput(this, 59); -}); - -document.getElementById("startBtn").addEventListener("click", function () { - if (!timerStarted) { +// CAPITURANDO ELEMENTOS DA DOM (HTML) +const divTimeInputs = document.querySelector('.input-stopwatch'); +const allTimeInputs = document.querySelectorAll('input'); +const secFinals = document.getElementById("secFinals"); +const hourInput = document.getElementById("hour"); +const minInput = document.getElementById("min"); +const secInput = document.getElementById("sec"); +const timeInputsFinals = document.querySelector('.input-stopwatch-finals'); + +const startBtn = document.getElementById("startBtn"); +const pauseBtn = document.getElementById("pauseBtn"); +const resetBtn = document.getElementById("resetBtn"); +const editBtn = document.getElementById("editBtn"); +const cancelEditBtn = document.getElementById("cancelEditBtn"); +const confirmEditBtn = document.getElementById("confirmEditBtn"); +const fullscreenBtn = document.getElementById("fullscreenBtn"); + +const jsStopwatchButton = document.querySelector('.js-stopwatch-button'); +const jsEditContainerStopwatch = document.querySelector('.js-edit-container-stopwatch'); + +// EVENTOS DOS ELEMENTOS DA DOM +startBtn.addEventListener("click", function () { + if( !timerStarted ){ timerStarted = true; run(); } }); -document.getElementById("pauseBtn").addEventListener("click", function () { +pauseBtn.addEventListener("click", function () { pause(); }); -document.getElementById("toZeroBtn").addEventListener("click", function () { - pause(); - hours = 0; - minutes = 0; - seconds = 30; - - document.getElementById("hour").value = formatTime(hours); - document.getElementById("min").value = formatTime(minutes); - document.getElementById("sec").value = formatTime(seconds); +resetBtn.addEventListener("click", function () { + reset(); }); -document - .querySelector(".js-edit-stopwatch") - .addEventListener("click", function () { - document.getElementById("hour").disabled = false; - document.getElementById("min").disabled = false; - document.getElementById("sec").disabled = false; - - document.querySelector(".js-stopwatch-button").classList.add("hide"); - document - .querySelector(".js-edit-container-stopwatch") - .classList.remove("hide"); - }); +editBtn.addEventListener("click", function () { + toggleElementVisibily( [jsStopwatchButton, jsEditContainerStopwatch] ); -document - .querySelector(".js-cancel-button") - .addEventListener("click", function () { - document.getElementById("hour").value = formatTime(hours); - document.getElementById("min").value = formatTime(minutes); - document.getElementById("sec").value = formatTime(seconds); - - document.getElementById("hour").disabled = true; - document.getElementById("min").disabled = true; - document.getElementById("sec").disabled = true; - - document.querySelector(".js-stopwatch-button").classList.remove("hide"); - document - .querySelector(".js-edit-container-stopwatch") - .classList.add("hide"); - }); + allTimeInputs.forEach(input => input.disabled = false); -document - .querySelector(".js-finish-edit-button") - .addEventListener("click", function () { - hours = parseInt(document.getElementById("hour").value) || 0; - minutes = parseInt(document.getElementById("min").value) || 0; - seconds = parseInt(document.getElementById("sec").value) || 0; - - document.getElementById("hour").disabled = true; - document.getElementById("min").disabled = true; - document.getElementById("sec").disabled = true; - - document.querySelector(".js-stopwatch-button").classList.remove("hide"); - document - .querySelector(".js-edit-container-stopwatch") - .classList.add("hide"); - }); + hour = Number(hourInput.value); + min = Number(minInput.value); + sec = Number(secInput.value); +}); -document - .querySelector(".js-active-fullscreen") - .addEventListener("click", function () { - if (document.documentElement.requestFullscreen) { - document.documentElement.requestFullscreen(); +allTimeInputs.forEach(input => { + input.addEventListener('input', function () { + let max = input.id === 'hour' ? 99 : 59; + let min = 0; + + const value = Number(input.value); + + if( value >= 0 && value < 10 ){ + input.value = '0' + value; + } else { + input.value = value; } + + if( value < min ) + input.value = '00'; + + if( value > max ) + input.value = max; }); +}); + +cancelEditBtn.addEventListener("click", function () { + toggleElementVisibily( [jsStopwatchButton, jsEditContainerStopwatch] ); -document.getElementById("restartBtn").addEventListener("click", function () { - hours = 0; - minutes = 0; - seconds = 30; + allTimeInputs.forEach(input => input.disabled = true); - document.getElementById("hour").value = formatTime(hours); - document.getElementById("min").value = formatTime(minutes); - document.getElementById("sec").value = formatTime(seconds); + hourInput.value = hour >= 0 && hour < 10 ? '0' + hour : hour; + minInput.value = min >= 0 && min < 10 ? '0' + min : min; + secInput.value = sec >= 0 && sec < 10 ? '0' + sec : sec; +}); + +confirmEditBtn.addEventListener("click", function () { + toggleElementVisibily( [jsStopwatchButton, jsEditContainerStopwatch] ); - document.querySelector(".input-stopwatch").classList.remove("hide"); - document.querySelector(".js-stopwatch-button").classList.remove("hide"); - document.getElementById("countdown").classList.add("hide"); + allTimeInputs.forEach(input => input.disabled = true); +}); - document.body.classList.remove("zero"); +fullscreenBtn.addEventListener("click", function () { + if( !document.fullscreenElement ){ + document.documentElement.requestFullscreen().catch(e => { + console.error(`Não foi possível colocar em tela cheia: ${e.message}`) + }); + } else { + document.exitFullscreen(); + } }); +// FUNÇÕES JAVASCRIPT function run() { - hours = parseInt(document.getElementById("hour").value) || 0; - minutes = parseInt(document.getElementById("min").value) || 0; - seconds = parseInt(document.getElementById("sec").value) || 0; - - intervalInstance = setInterval(function () { - if (timerStarted) { - if (seconds === 0) { - if (minutes === 0) { - if (hours === 0) { - timerStarted = false; - clearInterval(intervalInstance); - - document.getElementById("countdown").classList.remove("hide"); - document.getElementById("countdown-number").textContent = "0"; - - document.body.classList.add("zero"); - - document.querySelector(".input-stopwatch").classList.add("hide"); - document - .querySelector(".js-stopwatch-button") - .classList.add("hide"); - } else { - hours--; - minutes = 59; - seconds = 59; - } + if( timerStarted ) { + toggleElementVisibily( [startBtn, pauseBtn] ); + editBtn.disabled = true; + + intervalInstance = setInterval(function () { + convertInputsToSeconds(); + seconds--; + + if( seconds >= 0 ){ + convertSecondsToHour(); + + if( (seconds >= 0 && seconds <= 10) && !(hourInput.value > 0 || minInput.value > 0) ){ + divTimeInputs.classList.add('hide'); + jsStopwatchButton.classList.add('hide'); + timeInputsFinals.classList.remove('hide'); + + secFinals.value = sec >= 0 && sec < 10 ? '0' + sec : sec; + secInput.value = sec >= 0 && sec < 10 ? '0' + sec : sec; } else { - minutes--; - seconds = 59; + hourInput.value = hour >= 0 && hour < 10 ? '0' + hour : hour; + minInput.value = min >= 0 && min < 10 ? '0' + min : min; + secInput.value = sec >= 0 && sec < 10 ? '0' + sec : sec; } } else { - seconds--; + timerStarted = false; + clearInterval(intervalInstance); + + let blinkCount = 0; + let blinkEffect = setInterval(() => { + document.body.classList.toggle('blink-background'); + divTimeInputs.classList.toggle('blink-font'); + secFinals.classList.toggle('blink-font'); + blinkCount++; + + if( blinkCount >= 8 ){ + clearInterval(blinkEffect); + + toggleElementVisibily( [startBtn, pauseBtn, divTimeInputs, jsStopwatchButton, timeInputsFinals] ); + secInput.value = '00'; + editBtn.disabled = false; + } + }, 500); } + }, 1000); + } +} - if (hours === 0 && minutes === 0 && seconds <= 10) { - document.querySelector(".input-stopwatch").classList.add("hide"); - document.querySelector(".js-stopwatch-button").classList.add("hide"); +const convertInputsToSeconds = () => { + hour = Number(hourInput.value); + min = Number(minInput.value); + sec = Number(secInput.value); - document.getElementById("countdown").classList.remove("hide"); - document.getElementById("countdown-number").textContent = seconds; - } + seconds = sec; - document.getElementById("sec").value = formatTime(seconds); - document.getElementById("min").value = formatTime(minutes); - document.getElementById("hour").value = formatTime(hours); - } - }, 1000); + if( min > 0 ) + seconds += min * 60; + + if ( hour > 0 ) + seconds += hour * 3600; +} + +const convertSecondsToHour = () => { + hour = 0; + min = 0; + sec = 0; + + if( seconds >= 3600 ){ + hour = Math.floor( seconds / 3600 ); + seconds = seconds % 3600; + } + + if( seconds >= 60 ){ + min = Math.floor( seconds / 60); + sec = seconds % 60; + } else { + sec = seconds; + } } function pause() { timerStarted = false; - if (intervalInstance) { - clearInterval(intervalInstance); - intervalInstance = null; + clearInterval(intervalInstance); + startBtn.classList.remove('hide'); + pauseBtn.classList.add('hide'); + editBtn.disabled = false; +} + +function reset() { + timerStarted = false; + clearInterval(intervalInstance); + hourInput.value = '00'; + minInput.value = '00'; + secInput.value = 30; + startBtn.classList.remove('hide'); + pauseBtn.classList.add('hide'); + editBtn.disabled = false; +} + +function toggleElementVisibily( elements ) { + for( const element of elements ){ + element.classList.toggle('hide'); } } diff --git a/style.css b/style.css index 22f9e14..ea7ce2c 100644 --- a/style.css +++ b/style.css @@ -38,6 +38,18 @@ body.zero { color: inherit; } +.input-stopwatch-finals { + display: flex; +} +.input-stopwatch-finals input { + font-family: "Orbitron", sans-serif; + font-size: 200px; + width: 350px; + background-color: transparent; + border: none; + color: #46ffbe; +} + button { background-color: transparent; border: 1px solid white; @@ -48,11 +60,13 @@ button { align-items: center; justify-content: center; cursor: pointer; - color: inherit; } - -.js-restart-button { - border: 1px solid inherit; +button:hover { + background-color: #2e2e2e; +} +button:disabled { + background-color: transparent; + cursor: default; } .button-wrapper { @@ -65,6 +79,14 @@ button { display: none !important; } +.blink-background { + background-color: #46ffbe; +} + +.blink-font { + color: #1e1e1e !important; +} + input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; @@ -74,24 +96,4 @@ input::-webkit-inner-spin-button { input[type=number] { /* ta aparecendo um warning aqui pra mim, mas não sei arrumar, talvez eu seja burro */ -moz-appearance: textfield; -} - -#countdown { - display: flex; - justify-content: center; - align-items: center; - position: fixed; - flex-direction: column; - font-size: 112px; - top: 0; - left: 0; - width: 100%; - height: 100%; - background-color: inherit; - color: inherit; - z-index: 1000; -} - -#countdown.hide { - display: none; -} \ No newline at end of file +}/*# sourceMappingURL=style.css.map */