<!DOCTYPE html>
<html lang="fi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time and Date Display</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
#timeOfDay {
background-color: #0000FF; /* Sininen */
padding: 20px;
border-radius: 10px;
margin-top: 20px;
font-size: 4em;
}
#weekday {
background-color: #FF0000; /* Punainen */
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
font-size: 4em;
}
#date {
background-color: #D3D3D3; /* Harmaa */
padding: 20px;
border-radius: 2px;
font-size: 4em;
}
#time {
background-color: #FFFFFF; /* Sininen */
padding: 20px;
border-radius: 10px;
margin-top: 20px;
font-size: 8em;
}
</style>
</head>
<body>
<div id="weekday"></div>
<div id="timeOfDay"></div>
<h2 id="time"></h2>
<h1 id="date"></h1>
<script>
function updateTime() {
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const day = now.getDate();
const month = now.getMonth() + 1; // Months are zero-based
const year = now.getFullYear();
const weekdayNames = ["Sunnuntai", "Maanantai", "Tiistai", "Keskiviikko", "Torstai", "Perjantai", "Lauantai"];
const weekday = weekdayNames[now.getDay()];
// Format time
const formattedTime = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
document.getElementById('time').textContent = formattedTime;
// Format date
const formattedDate = `${day.toString().padStart(2, '0')}/${month.toString().padStart(2, '0')}/${year}`;
document.getElementById('date').textContent = formattedDate;
// Display weekday
document.getElementById('weekday').textContent = weekday;
// Determine time of day
let timeOfDay = '';
if (hours >= 5 && hours < 12) {
timeOfDay = 'Aamu';
} else if (hours >= 12 && hours < 15) {
timeOfDay = 'Päivä';
} else if (hours >= 15 && hours < 18) {
timeOfDay = 'Iltapäivä';
} else if (hours >= 18 && hours < 21) {
timeOfDay = 'Ilta';
} else {
timeOfDay = 'Yö';
}
document.getElementById('timeOfDay').textContent = timeOfDay;
}
setInterval(updateTime, 1000);
updateTime(); // Initial call to display time immediately
</script>
</body>
</html>