Merge pull request #50 from arpitghura/main

gantavyamalviya · web-flow · commit b40d831eea6d · 2022-10-03T02:46:54.000+05:30
Added Realtime Date and Time Web App
diff --git a/realtime-time-date/index.html b/realtime-time-date/index.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- Bootstrap CSS -->
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
+      crossorigin="anonymous"
+    />
+    <title>Realtime Date and Time</title>
+  </head>
+
+  <body>
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+      <div class="container-fluid">
+        <a class="navbar-brand" href="#">Realtime Date and Time</a>
+      </div>
+      <div class="d-flex p-2" style="width: 350px;">
+        <p class="fs-5 m-auto" style="color: lightgreen;">Created With &hearts; By Arpit</p>
+      </div>
+    </nav>
+    <div class="container-fluid">
+      <div class="p-3 mb-4 bg-light rounded-3">
+        <div class="container-fluid">
+          <h1 class="display-5 fw-bold py-3">
+            Current Time : <span id="time" class="text-primary"></span>
+          </h1>
+          <p class="col-md-12 fs-4 my-4">
+            "Lost time is never found again." –
+            <small class="text-muted">Benjamin Franklin.</small>
+            <br />
+            "Time is the most valuable thing a man can spend." –
+            <small class="text-muted">Theophrastus.</small>
+            <br />
+            "Time is free, but it’s priceless. You can’t own it, but you can use
+            it. You can’t keep it, but you can spend it. Once you’ve lost it you
+            can never get it back." –
+            <small class="text-muted">Harvey Mackay</small>
+          </p>
+        </div>
+      </div>
+    </div>
+    <script src="main.js"></script>
+  </body>
+</html>
diff --git a/realtime-time-date/main.js b/realtime-time-date/main.js
@@ -0,0 +1,9 @@
+let a, date, day, times;
+const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
+setInterval(() => {
+  a = new Date();
+  date = a.toLocaleDateString(undefined,options);
+  times = a.toLocaleTimeString();
+  //day =a.toLocaleString();
+  document.getElementById("time").innerHTML = times + " on " + date;
+}, 1000);
