update

index.html

@@ -38,15 +38,15 @@ <h1>Random Disco Light Simulator</h1>
             </div>
             <div class="button">
                 <button id="submit" onclick="run()">Submit</button>
+                <a href="https://github.com/sk66641/Random-Disco-Light-Simulator" target="_blank">
+                    <img src="github.jpeg" alt="github">
+                </a>
                 <button id="reset" onclick="window.location.reload()">Reset</button>
             </div>
             <div id="error"></div>
-            <div style="display: flex; justify-content: center;">
-                <a href="https://github.com/sk66641/Random-Disco-Light-Simulator">
-                    <img src="github.jpeg" alt="github">
-                </a>
+            <div class="screen">
+                <button id="screen">Enable Fullscreen</button>
             </div>
-
         </div>
     </div>
 

script.js

@@ -1,3 +1,15 @@
+document.body.addEventListener("click", () => {
+    if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
+        document.exitFullscreen();
+        document.getElementById("screen").innerHTML = "Enable Fullscreen";
+    }
+    else {
+
+        document.documentElement.requestFullscreen();
+        document.getElementById("screen").innerHTML = "Exit Fullscreen";
+    }
+})
+
 function run() {
 
     function getRandomColor() {

style.css

@@ -61,18 +61,34 @@ h1 {
 
 }
 
+#screen {
+    border-radius: 10px;
+    background: linear-gradient(yellow, green);
+    cursor: pointer;
+}
+
+#screen:hover {
+    background: linear-gradient(green, yellow);
+
+}
+
 .button {
-    margin-top: 50px;
-    margin-bottom: 20px;
+    margin-top: 40px;
+    margin-bottom: 16px;
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 20px;
 }
 
+.screen {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 #error {
     display: flex;
-    /* color: brown; */
     align-items: center;
     justify-content: center;
 }