HTML coding for digital clock
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Digital Clock and Weather</title>
<style>
/* Style for clock */
#clock {
position: fixed;
top: 10px;
right: 10px;
font-size: 24px;
color: red;
}
/* Style for weather and wind */
#weather {
position: fixed;
top: 40px;
right: 10px;
font-size: 18px;
color: red;
}
</style>
</head>
<body>
<!-- Digital Clock -->
<div id="clock"></div>
<!-- Weather and Wind Speed -->
<div id="weather">
Weather: Sunny<br>
Wind Speed: 10 mph
</div>
<script>
// Function to update the digital clock
function updateClock() {
const now = new Date();
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');
document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;
}
// Update the clock every second
setInterval(updateClock, 1000);
// You can fetch and update weather and wind speed information here using JavaScript/ajax.
// For simplicity, I've hardcoded the values in this example.
</script>
</body>
</html>
Weather: Sunny
Wind Speed: 10 mph
Wind Speed: 10 mph
Comments