Added more clock functionality.

Click the clock to go to a larger clock page.
JackVania · Oct 29, 2024 · 735272d · 735272d
1 parent 5a67aa8
commit 735272d
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -20,7 +20,7 @@ Keep it, replace it, remove it.
 Remove if you wish. It's just my site.
 
 ## Top Anchor
-Holds the clock.
+Holds the clock. Click the clock to go to the clock page for a large clock on blank screen.
 
 ## Font
 This template uses Jetbrains Mono FOSS: https://www.jetbrains.com/lp/mono/

diff --git a/clock.html b/clock.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<link rel="icon" type="image/x-icon" href="favicon.png">
+<link rel="stylesheet" href="homepage.css">
+<title>Clock</title>
+
+<script>
+// TIME SCRIPT
+  const timeDiv = document.getElementById("time");
+
+  function updateTime()
+  {
+    const now = new Date();
+    const formattedTime = now.toLocaleTimeString(); //with seconds
+    // const formattedTime = now.toLocaleTimeString([], {timeStyle: 'short'}); //no seconds
+    document.querySelector('#time').textContent = formattedTime;
+  }
+  setInterval(updateTime, 1000);
+// TIME SCRIPT
+</script>
+
+</head>
+
+<style>
+  .clockness
+  {
+    font-size: 100px;
+    font-weight: bold;
+  }
+</style>
+<body class="element">
+
+<div class="outside">
+  <div class="inside">
+  <!-- START COLUMNS -->
+    <div class="row">
+      <!-- TIME DISPLAY -->
+      <div class="clockness"><span id="time"></span></div>
+      <!-- TIME DISPLAY -->
+    </div>
+    <!-- END COLUMNS -->
+  </div>
+</div>
+
+</body>
+</html>
diff --git a/home.html b/home.html
@@ -27,7 +27,7 @@
 
 <div class="outside">
   <!-- TIME DISPLAY -->
-  <div class="anchortop"><span id="time"></span></div>
+  <div class="anchortop"><a href="clock.html"><span id="time"></a></span></div>
   <!-- TIME DISPLAY -->
 
   <div class="inside">