From f039b786f60aef6b658160f5512be604eb6d00c5 Mon Sep 17 00:00:00 2001
From: HAPPY YADAV <happy.hy0017@gmail.com>
Date: Sun, 9 Jun 2024 12:40:16 +0530
Subject: [PATCH] added the dynamic background

---
 assets/css/style.css    |  1 +
 assets/js/background.js | 27 +++++++++++++++++++++++++++
 index.html              |  2 +-
 3 files changed, 29 insertions(+), 1 deletion(-)
 create mode 100644 assets/js/background.js

diff --git a/assets/css/style.css b/assets/css/style.css
index 50ab9b3cca..7587c4c83e 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -4,6 +4,7 @@ width: 100%;
 height: 100%;
 margin: 0px;
 padding: 0px;
+transition: background-color 4s ease;
 overflow-x: hidden;}
 #about {
   color: white;
diff --git a/assets/js/background.js b/assets/js/background.js
new file mode 100644
index 0000000000..0f181a473e
--- /dev/null
+++ b/assets/js/background.js
@@ -0,0 +1,27 @@
+const randomColor = () => {
+    const hex = '0123456789ABCDEF';
+    let color = '#';
+    for (let i = 0; i < 6; i++) {
+        color += hex[Math.floor(Math.random() * 16)];
+    }
+    return color;
+};
+
+let id;
+
+const startChanging = () => {
+    if (!id) { // better practice 
+        id = setInterval(change, 2500); // Set interval to 2000 milliseconds (2 seconds)
+    }
+    function change() {
+        document.body.style.backgroundColor = randomColor();
+    }
+};
+
+const stopChanging = () => {
+    clearInterval(id);
+    id = null; // flushes out the value after stop and hence no overriding
+};
+
+// Start changing colors when the page loads
+window.onload = startChanging;
diff --git a/index.html b/index.html
index f32891a0f5..0c9d78d098 100644
--- a/index.html
+++ b/index.html
@@ -391,7 +391,7 @@ <h2 id="total-contributors" style="text-align: center; font-family: 'Agency FB',
   <script src="./assets/js/contributors.js"></script>
   <script src="./assets/js/cursor_transition.js"></script>
   <script src="./assets/js/contributors.js"></script>
-  
+  <script src="./assets/js/background.js"></script>