diff --git a/index.html b/index.html index 3eeafb3..9415d64 100644 --- a/index.html +++ b/index.html @@ -1,75 +1,79 @@ - + - - - - + + + + + Timer - - - - + + +
-

00:00:00.000

+

00:00:00.000

-
+
-

+

- -

+ +

- -

+ +

-

- +

-


+


- Alarm Sound by - kwahmah_02 | License: Attribution 3.0 + Alarm Sound + by kwahmah_02 | + License: + Attribution 3.0
- - \ No newline at end of file + + diff --git a/main.js b/main.js index 4817c98..d031f10 100644 --- a/main.js +++ b/main.js @@ -7,188 +7,206 @@ let displayMs = true; let controller = new AbortController(); window.addEventListener("load", () => { - const dropdown = document.querySelector("#dropdown"); - dropdown.value = "incremental"; - dropdown.addEventListener("change",() => { - const decrementalOptions = document.querySelector("#decrementalOptions"); - stopTimer(); - if (isIncrementalTimer()) { - decrementalOptions.classList.add("hidden"); - } else { - decrementalOptions.classList.remove("hidden"); - } - }); + const dropdown = document.querySelector("#dropdown"); + dropdown.value = "incremental"; + dropdown.addEventListener("change", () => { + const decrementalOptions = document.querySelector("#decrementalOptions"); + stopTimer(); + if (isIncrementalTimer()) { + decrementalOptions.classList.add("hidden"); + } else { + decrementalOptions.classList.remove("hidden"); + } + }); - const checkbox = document.querySelector("#msCheckbox"); - checkbox.addEventListener("click", () => { - displayMs = checkbox.checked; - if (!timerActive) { - setTimerText(0); - } - }); + const checkbox = document.querySelector("#msCheckbox"); + checkbox.addEventListener("click", () => { + displayMs = checkbox.checked; + if (!timerActive) { + setTimerText(0); + } + }); - const themeDropdown = document.querySelector("#theme"); - themeDropdown.addEventListener("change", setStyle); - setStyle(); + const themeDropdown = document.querySelector("#theme"); + themeDropdown.addEventListener("change", setStyle); + setStyle(); - addInputListeners(); + addInputListeners(); }); function setStyle() { - const themeDropdown = document.querySelector("#theme"); - const themeStylesheet = document.querySelector("#themeSheet"); - - switch (themeDropdown.value) { - case "light": - themeStylesheet.href = "simpleLight.css"; - break; - case "dark": - themeStylesheet.href = "simpleDark.css"; - break; - case "green": - themeStylesheet.href = "greenscreen.css"; - break; - } + const themeDropdown = document.querySelector("#theme"); + const themeStylesheet = document.querySelector("#themeSheet"); + + switch (themeDropdown.value) { + case "red": + themeStylesheet.href = "simpleRed.css"; + case "light": + themeStylesheet.href = "simpleLight.css"; + break; + case "dark": + themeStylesheet.href = "simpleDark.css"; + break; + case "green": + themeStylesheet.href = "greenscreen.css"; + break; + } } function addInputListeners() { - const hourInput = document.querySelector("#hourInput"); - hourInput.addEventListener("change", () => highlightRedIfBad(hourInput)); - const minuteInput = document.querySelector("#minuteInput"); - minuteInput.addEventListener("change", () => highlightRedIfBad(minuteInput)); - const secondInput = document.querySelector("#secondInput"); - secondInput.addEventListener("change", () => highlightRedIfBad(secondInput)); - const msInput = document.querySelector("#msInput"); - msInput.addEventListener("change", () => highlightRedIfBad(msInput)); + const hourInput = document.querySelector("#hourInput"); + hourInput.addEventListener("change", () => highlightRedIfBad(hourInput)); + const minuteInput = document.querySelector("#minuteInput"); + minuteInput.addEventListener("change", () => highlightRedIfBad(minuteInput)); + const secondInput = document.querySelector("#secondInput"); + secondInput.addEventListener("change", () => highlightRedIfBad(secondInput)); + const msInput = document.querySelector("#msInput"); + msInput.addEventListener("change", () => highlightRedIfBad(msInput)); } function setDecrementTime(ms) { - if (timerActive) { - return; - } - timerDecrementTime = ms; - setTimerText(ms); + if (timerActive) { + return; + } + timerDecrementTime = ms; + setTimerText(ms); } function startTimer() { - if (timerActive && !timerPaused) { + if (timerActive && !timerPaused) { + return; + } + controller = new AbortController(); + timerActive = true; + timerPaused = false; + const startTime = Date.now() - timerIncrementTime; + const pauseButton = document.querySelector("#pause"); + + if (isIncrementalTimer()) { + timer = setInterval(() => { + setTimerText(Date.now() - startTime); + }, 1000 / 60); + + pauseButton.addEventListener( + "click", + () => { + timerPaused = true; + timerIncrementTime = Date.now() - startTime; + clearInterval(timer); + }, + { once: true, signal: controller.signal }, + ); + } else { + let ms = timerDecrementTime; + const endTime = new Date(startTime + ms).valueOf(); + + timer = setInterval(() => { + ms = endTime - Date.now(); + + if (ms <= 0) { + stopTimer(); + if (document.querySelector("#audioCheckbox").checked) { + new Audio("250629__kwahmah_02__alarm1.mp3").play(); + } return; - } - controller = new AbortController(); - timerActive = true; - timerPaused = false; - const startTime = Date.now() - timerIncrementTime; - const pauseButton = document.querySelector("#pause"); - - if (isIncrementalTimer()) { - timer = setInterval(() => { - setTimerText(Date.now() - startTime); - }, 1000/60) - - pauseButton.addEventListener("click", () => { - timerPaused = true; - timerIncrementTime = Date.now() - startTime; - clearInterval(timer); - }, {once: true, - signal: controller.signal}); - - } else { - let ms = timerDecrementTime; - const endTime = new Date(startTime + ms).valueOf(); - - timer = setInterval(() => { - ms = endTime - Date.now(); - - if (ms <= 0) { - stopTimer(); - if (document.querySelector("#audioCheckbox").checked) { - new Audio('250629__kwahmah_02__alarm1.mp3').play(); - } - return; - } - - setTimerText(ms); - - }, 1000 / 60); - - pauseButton.addEventListener("click", function decrementPauseListener() { - timerPaused = true; - timerDecrementTime = ms; - clearInterval(timer); - }, {once: true, - signal: controller.signal}) - } + } + + setTimerText(ms); + }, 1000 / 60); + + pauseButton.addEventListener( + "click", + function decrementPauseListener() { + timerPaused = true; + timerDecrementTime = ms; + clearInterval(timer); + }, + { once: true, signal: controller.signal }, + ); + } } function stopTimer() { - clearInterval(timer); - controller.abort(); - setTimerText(0); - timerActive = false; - timerPaused = false; - timerIncrementTime = 0; - timerDecrementTime = 0; + clearInterval(timer); + controller.abort(); + setTimerText(0); + timerActive = false; + timerPaused = false; + timerIncrementTime = 0; + timerDecrementTime = 0; } function manualTimeSubmit() { - const hours = document.querySelector("#hourInput"); - const minutes = document.querySelector("#minuteInput"); - const seconds = document.querySelector("#secondInput"); - const ms = document.querySelector("#msInput"); - if (inputIsValid(hours) && inputIsValid(minutes) && inputIsValid(seconds) && inputIsValid(ms)) - setDecrementTime(3600000 * parseInt(hours.value) + 60000 * parseInt(minutes.value) + 1000 * parseInt(seconds.value) + parseInt(ms.value)); - else - alert("Invalid value(s)!"); + const hours = document.querySelector("#hourInput"); + const minutes = document.querySelector("#minuteInput"); + const seconds = document.querySelector("#secondInput"); + const ms = document.querySelector("#msInput"); + if ( + inputIsValid(hours) && + inputIsValid(minutes) && + inputIsValid(seconds) && + inputIsValid(ms) + ) + setDecrementTime( + 3600000 * parseInt(hours.value) + + 60000 * parseInt(minutes.value) + + 1000 * parseInt(seconds.value) + + parseInt(ms.value), + ); + else alert("Invalid value(s)!"); } function isIncrementalTimer() { - return document.querySelector("#dropdown").value === "incremental"; + return document.querySelector("#dropdown").value === "incremental"; } function highlightRedIfBad(element) { - if (element.value === "") - element.value = 0; + if (element.value === "") element.value = 0; - if (inputIsValid(element)) { - element.classList.remove("redBorder"); - } else { - element.classList.add("redBorder"); - } + if (inputIsValid(element)) { + element.classList.remove("redBorder"); + } else { + element.classList.add("redBorder"); + } } function inputIsValid(inputElement) { - const elementValue = parseInt(inputElement.value); - const elementMax = parseInt(inputElement.max); - const elementMin = parseInt(inputElement.min); - return !(isNaN(inputElement.value) || elementValue > elementMax || elementValue < elementMin) + const elementValue = parseInt(inputElement.value); + const elementMax = parseInt(inputElement.max); + const elementMin = parseInt(inputElement.min); + return !( + isNaN(inputElement.value) || + elementValue > elementMax || + elementValue < elementMin + ); } function getTime(ms) { - const map = new Map(); - - map.set("hours", Math.floor(ms / 3600000)); - let excessMs = ms % 3600000; - map.set("minutes", Math.floor(excessMs / 60000)); - excessMs %= 60000 - map.set("seconds", Math.floor(excessMs / 1000)); - map.set("ms", excessMs % 1000); - return map; + const map = new Map(); + + map.set("hours", Math.floor(ms / 3600000)); + let excessMs = ms % 3600000; + map.set("minutes", Math.floor(excessMs / 60000)); + excessMs %= 60000; + map.set("seconds", Math.floor(excessMs / 1000)); + map.set("ms", excessMs % 1000); + return map; } function setTimerText(ms) { - const textElement = document.querySelector("#timerText"); - const time = getTime(ms); - - if (displayMs) { - textElement.innerText = - `${time.get("hours").toString().padStart(2, "0")}:` + - `${time.get("minutes").toString().padStart(2, "0")}:` + - `${time.get("seconds").toString().padStart(2, "0")}.` + - `${time.get("ms").toString().padStart(3, "0")}`; - } else { - textElement.innerText = - `${time.get("hours").toString().padStart(2, "0")}:` + - `${time.get("minutes").toString().padStart(2, "0")}:` + - `${time.get("seconds").toString().padStart(2, "0")}`; - } -} \ No newline at end of file + const textElement = document.querySelector("#timerText"); + const time = getTime(ms); + + if (displayMs) { + textElement.innerText = + `${time.get("hours").toString().padStart(2, "0")}:` + + `${time.get("minutes").toString().padStart(2, "0")}:` + + `${time.get("seconds").toString().padStart(2, "0")}.` + + `${time.get("ms").toString().padStart(3, "0")}`; + } else { + textElement.innerText = + `${time.get("hours").toString().padStart(2, "0")}:` + + `${time.get("minutes").toString().padStart(2, "0")}:` + + `${time.get("seconds").toString().padStart(2, "0")}`; + } +} diff --git a/simpleDark.css b/simpleDark.css index 5e25e0f..f4c30e2 100644 --- a/simpleDark.css +++ b/simpleDark.css @@ -1,10 +1,10 @@ #timer { - background-color: black; - color: white; - padding: 1rem; - width: fit-content; + background-color: black; + color: white; + padding: 1rem; + width: fit-content; } #timerText { - font-family: "DejaVu Sans", sans-serif; -} \ No newline at end of file + font-family: "DejaVu Sans", sans-serif; +} diff --git a/simpleRed.css b/simpleRed.css new file mode 100644 index 0000000..824fd70 --- /dev/null +++ b/simpleRed.css @@ -0,0 +1,10 @@ +#timer { + background-color: #c30010; + color: #ff746c; + padding: 1rem; + width: fit-content; +} + +#timerText { + font-family: "DejaVu Sans", sans-serif; +}