From 135d7830f0f5c1f99e1d6b72b4ae77276f54acd0 Mon Sep 17 00:00:00 2001
From: sk66641 <sanukumar66641@gmail.com>
Date: Sun, 26 May 2024 17:16:58 +0530
Subject: [PATCH] update

added units for time
---
 README.md  | 15 +++--------
 index.html | 13 ++++++---
 script.js  | 79 +++++++++++++++++++++++++++++++-----------------------
 style.css  |  3 ++-
 4 files changed, 61 insertions(+), 49 deletions(-)

diff --git a/README.md b/README.md
index 333efba..5ea8207 100644
--- a/README.md
+++ b/README.md
@@ -19,35 +19,28 @@ On the basis of these three inputs, it simulates conic or linear view for given
         <td>
             <ul>
                 <li>1000</li>
-                <li>1</li>
+                <li>1 milliseconds</li>
                 <li>conic</li>
             </ul>
         </td>
         <td>
             <ul>
                 <li>1000</li>
-                <li>1</li>
+                <li>1 milliseconds</li>
                 <li>radial</li>
             </ul>
         </td>
         <td>
             <ul>
                 <li>2</li>
-                <li>500</li>
+                <li>500 milliseconds</li>
                 <li>linear</li>
             </ul>
         </td>
-        <td>
-            <ul>
-                <li>7</li>
-                <li>500</li>
-                <li>conic</li>
-            </ul>
-        </td>
         <td>
             <ul>
                 <li>1000</li>
-                <li>1</li>
+                <li>1 milliseconds</li>
                 <li>linear</li>
             </ul>
         </td>
diff --git a/index.html b/index.html
index b813c6a..718b033 100644
--- a/index.html
+++ b/index.html
@@ -13,17 +13,22 @@
         <div class="box">
             <h1>Random Disco Light Simulator</h1>
             <div>
-                <label>1. Number of Colors:</label>
+                <label for="color">1. Number of Colors:</label>
                 <input type="number" id="color" placeholder="Enter">
             </div>
             <div>
-                <label>2. Time interval (<em>'in milliseconds'</em>), <br>with which the color changes
-                    randomly:</label><br>
+                <label for="time">2. Time interval <em>(with which the color changes
+                        randomly)</em>:</label><br>
                 <input type="number" id="time" placeholder="Enter">
+                <select id="unit">
+                    <option style="background-color: lightslategray; color: white;" value="unit">Unit</option>
+                    <option value="milliseconds">milliseconds</option>
+                    <option value="seconds">seconds</option>
+                </select>
                 <br><strong>[Negative interval or no input will be treated as 0 interval]</strong>
             </div>
             <div>
-                <label>3. View:</label>
+                <label for="view">3. View:</label>
                 <select id="view">
                     <option style="background-color: lightslategray; color: white;" value="select">Select</option>
                     <option value="conic">Conic</option>
diff --git a/script.js b/script.js
index 1fa7222..d776f5b 100644
--- a/script.js
+++ b/script.js
@@ -15,6 +15,7 @@ function run() {
 
     let n = document.getElementById("color").value
     let set_time = document.getElementById("time").value
+    let unit = document.getElementById("unit").value
     let view = document.getElementById("view").value
 
     if (Number(n) < 0) {
@@ -35,16 +36,21 @@ function run() {
 
     }
 
+    else if (unit == "unit") {
+        document.getElementById("error").innerText = "Please select 'Unit'!"
+        document.getElementById("error").style.color = "red"
+    }
+    
     else if (view == "select") {
         document.getElementById("error").innerText = "Please select 'View'!"
         document.getElementById("error").style.color = "red"
     }
 
     else {
-        document.body.children[0].style.display = 'none';
-
         alert("Double click on the screen to reload!")
 
+        document.body.children[0].style.display = 'none';
+
         document.body.style.cursor = "pointer";
 
         document.body.addEventListener("dblclick", () => {
@@ -55,53 +61,60 @@ function run() {
         })
     }
 
-    function number(n) {
-        let ch = `${getRandomColor()}, `;
-        if (n == parseInt(n)) {
-            while (n >= 2) {
-                ch += `${getRandomColor()}, `;
-                n = n - 1;
-            }
-            return ch;
+    if (unit != "unit") {
+
+        if (unit == "seconds") {
+            set_time *= 1000;
         }
-    }
 
-    setInterval(() => {
-        random_color = `${getRandomColor()}`;
-    }, `${set_time}`);
+        function number(n) {
+            let ch = `${getRandomColor()}, `;
+            if (n == parseInt(n)) {
+                while (n >= 2) {
+                    ch += `${getRandomColor()}, `;
+                    n = n - 1;
+                }
+                return ch;
+            }
+        }
 
-    if (n == 1 && view != "select") {
-        document.body.style.backgroundColor = `${getRandomColor()}`
         setInterval(() => {
-            document.body.style.backgroundColor = `${getRandomColor()}`
+            random_color = `${getRandomColor()}`;
         }, `${set_time}`);
-    }
 
-    else if (n > 1) {
+        if (n == 1 && view != "select") {
+            document.body.style.backgroundColor = `${getRandomColor()}`
+            setInterval(() => {
+                document.body.style.backgroundColor = `${getRandomColor()}`
+            }, `${set_time}`);
+        }
 
-        if (view == "conic") {
+        else if (n > 1) {
+
+            if (view == "conic") {
 
-            document.body.style.background = `conic-gradient(${random_color}, ${number(n - 1)} ${random_color})`;
-            setInterval(() => {
                 document.body.style.background = `conic-gradient(${random_color}, ${number(n - 1)} ${random_color})`;
-            }, `${set_time}`);
+                setInterval(() => {
+                    document.body.style.background = `conic-gradient(${random_color}, ${number(n - 1)} ${random_color})`;
+                }, `${set_time}`);
 
-        }
-        else if (view == "linear") {
+            }
+            else if (view == "linear") {
 
-            document.body.style.background = `linear-gradient(${number(n - 1)} ${random_color})`;
-            setInterval(() => {
                 document.body.style.background = `linear-gradient(${number(n - 1)} ${random_color})`;
-            }, `${set_time}`);
+                setInterval(() => {
+                    document.body.style.background = `linear-gradient(${number(n - 1)} ${random_color})`;
+                }, `${set_time}`);
 
-        }
-        else if (view == "radial") {
+            }
+            else if (view == "radial") {
 
-            document.body.style.background = `radial-gradient(${number(n - 1)} ${random_color})`;
-            setInterval(() => {
                 document.body.style.background = `radial-gradient(${number(n - 1)} ${random_color})`;
-            }, `${set_time}`);
+                setInterval(() => {
+                    document.body.style.background = `radial-gradient(${number(n - 1)} ${random_color})`;
+                }, `${set_time}`);
 
+            }
         }
     }
 
diff --git a/style.css b/style.css
index edd5395..7408a9d 100644
--- a/style.css
+++ b/style.css
@@ -26,7 +26,8 @@ h1 {
     box-shadow: 0px 0px 15px 10px black;
 }
 
-#view {
+#view,
+#unit {
     text-align: center;
     border-radius: 10px;
 }