Add files via upload

arijiiiitttt · Feb 28, 2024 · 0b6fc9f · 0b6fc9f
commit 0b6fc9f
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title> Digital Clock </title>
+  <link href="style.css" rel="stylesheet" type="text/css" />
+</head>
+  <body>
+<div class="container">
+  <div class="header"></div>
+  <h2>
+       Digital Clock
+  </h2>
+  <div class="timer">
+    00:00:00
+  </div>
+</div>
+
+  <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,20 @@
+const timer = document.querySelector('.timer');
+
+console.log(timer,"timer");
+
+function getTime() {
+    console.log("getTime");
+    const now = new Date();
+    console.log(now,"now");
+    let h = now.getHours();
+    let m = now.getMinutes();
+    let s = now.getSeconds();
+    console.log(h,m,s);
+    h = h < 10 ? "0" + h : h;
+    m = m < 10 ? "0" + m : m;
+    s = s < 10 ? "0" + s : s;
+    const timerstr = h + ":" + m + ":" + s;
+    timer.textContent = timerstr;
+}
+
+setInterval(getTime, 1000);
diff --git a/style.css b/style.css
@@ -0,0 +1,35 @@
+* {
+    margin:0;
+    padding:0;
+    box-sizing:border-box;
+}
+
+body{
+    background-color: antiquewhite;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;    
+}
+
+.container {
+    border: 1px solid #f21707;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0,0,0,0.5);  
+    width: 250px;
+    background-color: white;
+    text-align: center;
+}
+
+.header {
+    background-color: #ed0707;
+    padding: 18px;
+    font-size: 1.2rem;
+    color:white;
+}
+
+.timer {
+    font-size: 3rem;
+    font-weight: bold;
+    padding: 10px;
+}