diff --git a/README.md b/README.md index f3ca865..5f7195c 100644 --- a/README.md +++ b/README.md @@ -7,3 +7,6 @@ ## Background Color Generator - simple background gradient generator + +## Simple Clock +- simple javascript clock diff --git a/index.html b/index.html index fefdecd..82866b9 100644 --- a/index.html +++ b/index.html @@ -13,6 +13,7 @@

PREVIEW

JS

\ No newline at end of file diff --git a/simple-clock/georgiyev-unsplash.jpg b/simple-clock/georgiyev-unsplash.jpg new file mode 100644 index 0000000..47aea11 Binary files /dev/null and b/simple-clock/georgiyev-unsplash.jpg differ diff --git a/simple-clock/index.html b/simple-clock/index.html new file mode 100644 index 0000000..b408666 --- /dev/null +++ b/simple-clock/index.html @@ -0,0 +1,15 @@ + + + + + + + Digital Clock + + +
+
12:00:00
+
+ + + diff --git a/simple-clock/script.js b/simple-clock/script.js new file mode 100644 index 0000000..cec4063 --- /dev/null +++ b/simple-clock/script.js @@ -0,0 +1,11 @@ +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'); + const timeString = `${hours}:${minutes}:${seconds}`; + + document.getElementById('clock').innerText = timeString; +} + +setInterval(updateClock, 1000); // Update the clock every second diff --git a/simple-clock/styles.css b/simple-clock/styles.css new file mode 100644 index 0000000..99b63a0 --- /dev/null +++ b/simple-clock/styles.css @@ -0,0 +1,26 @@ +@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap'); +body { + margin: 0; + padding: 0; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background-image: url('georgiyev-unsplash.jpg'); + background-size: cover; + background-position: center; +} + +.container { + text-align: center; +} + +.clock { + font-family: 'Source Code Pro', monospace; + font-size: 2em; + color: #fff; + background: rgba(8, 8, 8, 0.5); + padding: 10px; + border-radius: 10px; + display: inline-block; +}