diff --git a/src/components/Clock.tsx b/src/components/Clock.tsx index 1f099fc..c285152 100644 --- a/src/components/Clock.tsx +++ b/src/components/Clock.tsx @@ -1,27 +1,54 @@ -import { useState, useEffect } from 'preact/hooks'; +import { useState, useEffect } from "preact/hooks"; -const Clock = () => { +const CurrentTime = () => { const [currentTime, setCurrentTime] = useState(''); - - useEffect(() => { // Hell - const updateCurrentTime = () => { + const [currentMinutes, setCurrentMinutes] = useState(''); + const [opacity, setOpacity] = useState(0); + + useEffect(() => { // LITERAL HELL + const updateCurrentTime = () => { const now = new Date(); const dayOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'][now.getDay()]; let hours = now.getHours(); - hours = hours % 12 || 12; - + hours = hours % 12 || 12; // 12 hour format + const minutes = now.getMinutes(); + const formattedTime = `${dayOfWeek}, ${hours < 10 ? '0' : ''}${hours}`; - setCurrentTime(formattedTime); - }; - updateCurrentTime(); - const intervalId = setInterval(updateCurrentTime, 1000); - return () => clearInterval(intervalId); + }; + + const updateCurrentMinutes = () => { + const now = new Date(); + const minutes = now.getMinutes(); + const formattedMinutes = `${minutes < 10 ? '0' : ''}${minutes}`; + setCurrentMinutes(formattedMinutes); + }; + + updateCurrentTime(); + updateCurrentMinutes(); + + const timeIntervalId = setInterval(updateCurrentTime, 60000); + const minutesIntervalId = setInterval(updateCurrentMinutes, 1000); + return () => { + clearInterval(timeIntervalId); + clearInterval(minutesIntervalId); + }; }, []); + useEffect(() => { + const intervalId = setInterval(() => { + setOpacity((prevOpacity) => (prevOpacity === 0 ? 1 : 0)); + }, 1000); + return () => clearInterval(intervalId); + }, []); + return ( -

{currentTime}

+
+
{currentTime}
+
:
+
{currentMinutes} PM
+
); -}; - -export default Clock; \ No newline at end of file + }; + + export default CurrentTime; \ No newline at end of file