feat: Avoid gradient background results without input. (#439)

Author: saakshiraut28

index.html

@@ -639,7 +639,11 @@ <h2>
 
             <div class="btn-container">
               <div class="reset" data-reset="gradient-background">Reset</div>
-              <div class="btn" data-button="gradient-background">
+              <div
+                class="btn"
+                data-button="gradient-background"
+                id="getResultBtn"
+              >
                 Get Result
               </div>
             </div>

src/pages/gradient-background.ts

@@ -14,6 +14,7 @@ import {
   getCssOrTailwindButton,
 } from '../lib/getElements';
 import {
+  triggerEmptyAnimation,
   copyCSSCodeToClipboard,
   showPopup,
   whatColorButtonShouldShow,
@@ -34,7 +35,7 @@ const attribute = 'gradient-background';
 
 const getNewColorButtonElement = getNewColorButton(attribute);
 const getRemoveColorButtonElement = getRemoveNewColorButton(attribute);
-
+const getResultBtn = document.getElementById('getResultBtn');
 let gradientBackgroundInputs = getAllInputElements('gradient-background');
 
 const getDegreeElement = getRange(attribute);
@@ -46,6 +47,22 @@ export function gradientBackgroundGenerator(
   type: 'newResults' | 'oldResults' | null
 ) {
   if (type === null) return;
+  // Show error when the colors are not entered.
+  var element = gradientBackgroundInputs[0];
+  var value = element.value;
+  if (value.length < 3) {
+    gradientBackgroundInputs.forEach((ele) => {
+      if (getResultBtn) {
+        getResultBtn.style.backgroundColor = 'grey';
+      }
+      triggerEmptyAnimation(ele);
+    });
+    return;
+  } else {
+    if (getResultBtn) {
+      getResultBtn.style.backgroundColor = 'blue';
+    }
+  }
 
   const getOutputElement = getOutput(attribute);
   const resultPage = getResultPage();