2023-09-26 15:17:22 +02:00
|
|
|
---
|
|
|
|
import Layout from "layouts/primary.astro"
|
|
|
|
---
|
|
|
|
|
|
|
|
<Layout>
|
2023-09-26 16:55:04 +02:00
|
|
|
<style>
|
|
|
|
.side {
|
|
|
|
display: inline-flex;
|
|
|
|
}
|
2023-09-26 15:17:22 +02:00
|
|
|
|
2023-09-26 16:55:04 +02:00
|
|
|
.container {
|
|
|
|
margin: auto;
|
|
|
|
display: grid;
|
|
|
|
width: min-content;
|
|
|
|
}
|
|
|
|
|
|
|
|
.time {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<h1 id="currentTime">Your Time</h1>
|
|
|
|
<h2 id="timezone">Your Timezone</h2>
|
|
|
|
<p id="watchDisplay">0:000</p>
|
|
|
|
<script>
|
|
|
|
document.getElementById("timezone").innerText =
|
|
|
|
`${Intl.DateTimeFormat().resolvedOptions().timeZone} (${new Date().toLocaleDateString(undefined, {
|
|
|
|
day: '2-digit',
|
|
|
|
timeZoneName: 'short'
|
|
|
|
}).substring(4)})`
|
|
|
|
setInterval(() => {
|
|
|
|
const currentTime = new Date();
|
|
|
|
document.getElementById("currentTime").innerText = currentTime.toLocaleTimeString()
|
|
|
|
}, 100)
|
|
|
|
</script>
|
|
|
|
<div class="container">
|
|
|
|
<span class="side">
|
|
|
|
<input type="time" id="alarm" class="time" value="0" pattern="[0-9]{2}:[0-9]{2}"/>
|
|
|
|
<button id="alarmAdd">Add Alarm</button>
|
|
|
|
</span>
|
|
|
|
<span class="side">
|
|
|
|
<input type="text" id="timer" class="time" value="00:00"/>
|
|
|
|
<button id="timerAdd">Add Timer</button>
|
|
|
|
</span>
|
|
|
|
<span class="side">
|
|
|
|
<button id="startWatch">Start Stopwatch</button>
|
|
|
|
<button id="stopWatch">Stop Stopwatch</button>
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<p id="events"></p>
|
|
|
|
<audio id="sound" src="/alarm.wav" hidden loop></audio>
|
|
|
|
<script>
|
|
|
|
const alarmTime = document.getElementById("alarm")
|
|
|
|
const timerTime = document.getElementById("timer")
|
|
|
|
const events = document.getElementById("events")
|
|
|
|
let watchInterval = 0
|
|
|
|
|
|
|
|
let timerOff = false
|
|
|
|
|
|
|
|
alarmTime.value = 0
|
|
|
|
timerTime.value = "00:00"
|
|
|
|
|
|
|
|
const blareAlarm = () => {
|
|
|
|
if (!timerOff) {
|
|
|
|
timerOff = true;
|
|
|
|
document.getElementById("sound").play()
|
|
|
|
events.innerText += "Your alarm has went off! Reload the page to stop it.\n"
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
document.getElementById("alarmAdd").onclick = () => {
|
|
|
|
const alarmValue = alarmTime.value
|
|
|
|
const alarmDate = new Date();
|
|
|
|
alarmDate.setHours(alarmValue.split(":")[0])
|
|
|
|
alarmDate.setMinutes(alarmValue.split(":")[1])
|
|
|
|
alarmDate.setSeconds(0)
|
|
|
|
alarmDate.setMilliseconds(0)
|
|
|
|
|
|
|
|
const millisecondsUntilAlarm = alarmDate.getTime() - new Date().getTime()
|
|
|
|
|
|
|
|
setTimeout(blareAlarm, millisecondsUntilAlarm)
|
|
|
|
events.innerText += `Alarm set for ${alarmValue}\n`
|
|
|
|
}
|
|
|
|
|
|
|
|
document.getElementById("startWatch").onclick = () => {
|
|
|
|
const startTime = new Date();
|
|
|
|
watchInterval = setInterval(() => {
|
|
|
|
document.getElementById("watchDisplay").innerText = ((new Date().getTime() - startTime.getTime())/1000).toString().replaceAll(".", ":")
|
|
|
|
}, 1)
|
|
|
|
}
|
|
|
|
|
|
|
|
document.getElementById("stopWatch").onclick = () => {
|
|
|
|
clearInterval(watchInterval)
|
|
|
|
}
|
|
|
|
|
|
|
|
document.getElementById("timerAdd").onclick = () => {
|
|
|
|
const currentDate = new Date()
|
|
|
|
const futureTime = new Date()
|
|
|
|
let mode = undefined;
|
|
|
|
if (typeof timerTime.value.split(":")[2] != "undefined") {
|
|
|
|
mode = "hour"
|
|
|
|
futureTime.setSeconds(currentDate.getSeconds() + parseInt(timerTime.value.split(":")[2]))
|
|
|
|
futureTime.setMinutes(currentDate.getMinutes() + parseInt(timerTime.value.split(":")[1]))
|
|
|
|
futureTime.setHours(currentDate.getHours() + parseInt(timerTime.value.split(":")[0]))
|
|
|
|
} else if (typeof timerTime.value.split(":")[1] != "undefined") {
|
|
|
|
mode = "minute"
|
|
|
|
futureTime.setSeconds(currentDate.getSeconds() + parseInt(timerTime.value.split(":")[1]))
|
|
|
|
futureTime.setMinutes(currentDate.getMinutes() + parseInt(timerTime.value.split(":")[0]))
|
|
|
|
} else {
|
|
|
|
mode = "second"
|
|
|
|
futureTime.setSeconds(currentDate.getSeconds() + parseInt(timerTime.value.split(":")[0]))
|
|
|
|
}
|
|
|
|
|
|
|
|
events.innerText += `Timer will go off in ${Math.round((futureTime.getTime() - new Date().getTime())/1000)} seconds.\n`
|
|
|
|
|
|
|
|
setInterval(() => {
|
|
|
|
const dateDifference = futureTime.getTime() - new Date().getTime()
|
|
|
|
const setDate = new Date(dateDifference)
|
|
|
|
setDate.setHours(setDate.getHours() - 18)
|
|
|
|
if (!timerOff) {
|
|
|
|
timerTime.value = setDate.toLocaleTimeString(undefined, {hour12: false})
|
|
|
|
} else {
|
|
|
|
timerTime.value = Math.round(dateDifference/1000)
|
|
|
|
}
|
|
|
|
|
|
|
|
if (dateDifference < 0) {
|
|
|
|
blareAlarm()
|
|
|
|
}
|
|
|
|
}, 1)
|
|
|
|
}
|
|
|
|
</script>
|
2023-09-26 15:17:22 +02:00
|
|
|
</Layout>
|
2023-09-26 16:55:04 +02:00
|
|
|
|