Simple clock in Javascript

arieltahimik · Feb 6, 2024 · 5cc3e74 · 5cc3e74
1 parent 4339e21
commit 5cc3e74
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 0 deletions.
diff --git 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
@@ -13,6 +13,7 @@ <h1>PREVIEW</h1>
     <h2>JS</h2>
     <ul>
         <li><a href="bg-color-generator\index.html" target="_blank">Background Color Generator</a></li>
+        <li><a href="simple-clock\index.html" target="_blank">Simple Clock</a></li>
     </ul>
 </body>
 </html>
diff --git a/simple-clock/georgiyev-unsplash.jpg b/simple-clock/georgiyev-unsplash.jpg
diff --git a/simple-clock/index.html b/simple-clock/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="styles.css">
+    <title>Digital Clock</title>
+</head>
+<body>
+    <div class="container">
+        <div class="clock" id="clock">12:00:00</div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/simple-clock/script.js 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
@@ -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;
+}