diff --git a/77.digital_clock/index.html b/77.digital_clock/index.html new file mode 100644 index 0000000..24557cb --- /dev/null +++ b/77.digital_clock/index.html @@ -0,0 +1,16 @@ + + + + + + + Digital Clock + + + +
+

00:00:00

+
+ + + diff --git a/77.digital_clock/script.js b/77.digital_clock/script.js new file mode 100644 index 0000000..8178e0c --- /dev/null +++ b/77.digital_clock/script.js @@ -0,0 +1,20 @@ +function updateClock() { + const clockElement = document.getElementById('clock'); + const now = new Date(); + + let hours = now.getHours(); + let minutes = now.getMinutes(); + let seconds = now.getSeconds(); + + hours = hours < 10 ? '0' + hours : hours; + minutes = minutes < 10 ? '0' + minutes : minutes; + seconds = seconds < 10 ? '0' + seconds : seconds; + + clockElement.textContent = `${hours}:${minutes}:${seconds}`; +} + +// Update the clock every second +setInterval(updateClock, 1000); + +// Initialize the clock display +updateClock(); diff --git a/77.digital_clock/styles.css b/77.digital_clock/styles.css new file mode 100644 index 0000000..6dfce2a --- /dev/null +++ b/77.digital_clock/styles.css @@ -0,0 +1,26 @@ +body { + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #282c34; + color: #fff; + font-family: 'Arial', sans-serif; +} + +.clock-container { + display: flex; + justify-content: center; + align-items: center; + background-color: #333; + padding: 20px; + border-radius: 10px; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); +} + +#clock { + font-size: 4rem; + letter-spacing: 2px; +}