From 1a086832af86175a62c3e7d295b13aa1b063e5dc Mon Sep 17 00:00:00 2001
From: VincinChristmas <VincinChristmas@hotmail.com>
Date: Wed, 24 Apr 2024 12:47:08 +0800
Subject: [PATCH] made a seperate javascript stylesheet for better performance
 in case otheer features, such as ability to change watch face/style are added
 later

---
 Beautiful JS Clock/index.html | 18 +-----------------
 Beautiful JS Clock/main.js    | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 17 deletions(-)
 create mode 100644 Beautiful JS Clock/main.js

diff --git a/Beautiful JS Clock/index.html b/Beautiful JS Clock/index.html
index 45593d9f..b5fd54ed 100644
--- a/Beautiful JS Clock/index.html	
+++ b/Beautiful JS Clock/index.html	
@@ -15,23 +15,7 @@
         <div class="minuteHand"></div>
         <div class="secondHand"></div>
     </div>
-    <script>
-        function runClock() {
-            let currentTime = new Date();
-            let secondRotate = (currentTime.getSeconds() / 60) * 360;
-            let minuteRotate = (currentTime.getMinutes() / 60) * 360;
-            let hourRotate = ((currentTime.getHours() + (currentTime.getMinutes() / 60)) / 12) * 360;
-
-            let secondHand = document.querySelector(".secondHand");
-            let minuteHand = document.querySelector(".minuteHand");
-            let hourHand = document.querySelector(".hourHand");
-            secondHand.style.transform = `rotate(${secondRotate}deg) translateY(-30%)`;
-            minuteHand.style.transform = `rotate(${minuteRotate}deg) translateY(-50%)`;
-            hourHand.style.transform = `rotate(${hourRotate}deg) translateY(-50%)`;
-        }
-
-        setInterval(runClock, 1000);
-    </script>
+    <script type="text/javascript" src="main.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/Beautiful JS Clock/main.js b/Beautiful JS Clock/main.js
new file mode 100644
index 00000000..cc00e580
--- /dev/null
+++ b/Beautiful JS Clock/main.js	
@@ -0,0 +1,15 @@
+function runClock() {
+    let currentTime = new Date();
+    let secondRotate = (currentTime.getSeconds() / 60) * 360;
+    let minuteRotate = (currentTime.getMinutes() / 60) * 360;
+    let hourRotate = ((currentTime.getHours() + (currentTime.getMinutes() / 60)) / 12) * 360;
+
+    let secondHand = document.querySelector(".secondHand");
+    let minuteHand = document.querySelector(".minuteHand");
+    let hourHand = document.querySelector(".hourHand");
+    secondHand.style.transform = `rotate(${secondRotate}deg) translateY(-30%)`;
+    minuteHand.style.transform = `rotate(${minuteRotate}deg) translateY(-50%)`;
+    hourHand.style.transform = `rotate(${hourRotate}deg) translateY(-50%)`;
+}
+
+setInterval(runClock, 1000);
\ No newline at end of file