Add triggerEmptyAnimation when input is not provided.

Dun-sin · Aug 18, 2023 · 9365e75 · 9365e75
1 parent 6b98c6d
commit 9365e75
Show file tree

Hide file tree

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

diff --git a/src/pages/gradient-background.ts b/src/pages/gradient-background.ts
@@ -12,9 +12,9 @@ import {
   getCssOrTailwindDropdown,
   getTailwindButton,
   getCssOrTailwindButton,
-  getInputText,
 } from '../lib/getElements';
 import {
+  triggerEmptyAnimation,
   copyCSSCodeToClipboard,
   showPopup,
   whatColorButtonShouldShow,
@@ -25,7 +25,6 @@ import {
   getColorsValue,
   closeDropdown,
   copyTailwindCodeToClipboard,
-  triggerEmptyAnimation,
 } from '../lib/packages/utils';
 
 type Values = {
@@ -48,10 +47,12 @@ export function gradientBackgroundGenerator(
   type: 'newResults' | 'oldResults' | null
 ) {
   if (type === null) return;
-
   var element = gradientBackgroundInputs[0];
   var value = element.value; // Get the value of the input field
   if (value.length < 3) {
+    gradientBackgroundInputs.forEach((ele) => {
+      triggerEmptyAnimation(ele);
+    });
     return;
   }