Prevent Result Page display when colors are not entered

Dun-sin · Aug 16, 2023 · 6b98c6d · 6b98c6d
1 parent 68c1005
commit 6b98c6d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -587,6 +587,7 @@ <h2>
                   placeholder="Tap to pick a color"
                   id="gradient-background-color1"
                   class="gradient-background-inputs"
+                  required
                 />
               </label>
 
@@ -597,6 +598,7 @@ <h2>
                   placeholder="Tap to pick a color"
                   id="gradient-background-color2"
                   class="gradient-background-inputs"
+                  required
                 />
               </label>
             </div>

diff --git a/src/pages/gradient-background.ts b/src/pages/gradient-background.ts
@@ -12,6 +12,7 @@ import {
   getCssOrTailwindDropdown,
   getTailwindButton,
   getCssOrTailwindButton,
+  getInputText,
 } from '../lib/getElements';
 import {
   copyCSSCodeToClipboard,
@@ -24,6 +25,7 @@ import {
   getColorsValue,
   closeDropdown,
   copyTailwindCodeToClipboard,
+  triggerEmptyAnimation,
 } from '../lib/packages/utils';
 
 type Values = {
@@ -47,6 +49,12 @@ export function gradientBackgroundGenerator(
 ) {
   if (type === null) return;
 
+  var element = gradientBackgroundInputs[0];
+  var value = element.value; // Get the value of the input field
+  if (value.length < 3) {
+    return;
+  }
+
   const getOutputElement = getOutput(attribute);
   const resultPage = getResultPage();