feat(general.ts): add shake animation for when a user doesn't input a text

Author: Dun-sin

src/general.ts

@@ -96,6 +96,22 @@ export function downloadSVG(attribute: string, outputImage: HTMLElement): void {
 	});
 }
 
+export function triggerEmptyAnimation(inputElement: HTMLInputElement): void {
+	inputElement.style.borderColor = 'red';
+	inputElement.animate(
+		[
+			{ transform: 'translate(10px, 0)' },
+			{ transform: 'translate(-10px, 0)' },
+			{ transform: 'translate(0, 0)' },
+		],
+		{ duration: 300 },
+	);
+
+	setTimeout(() => {
+		inputElement.style.borderColor = 'white';
+	}, 1000);
+}
+
 /**
  * @function getCopyCodeButton
  * @summary Get the button element for copying code to clipboard
@@ -138,6 +154,9 @@ export const getOutput = (attribute: string): HTMLElement =>
 export const getRange = (attribute: string): HTMLInputElement =>
 	<HTMLInputElement>document.getElementById(`${attribute}-degree`);
 
+export const getInputText = (attribute: string) =>
+	<HTMLInputElement>document.getElementById(`${attribute}-text`);
+
 function createDownloadLink(fileName: string, url: string) {
 	const link = document.createElement('a');
 	link.download = fileName;

src/generators/gradient-text.ts

@@ -13,9 +13,7 @@ type Values = {
  */
 export function gradientTextGenerator(): void {
 	const attribute = 'gradient-text';
-	const getInputElement = <HTMLInputElement>(
-		document.getElementById(`${attribute}-text`)
-	);
+	const getInputElement = utils.getInputText(attribute);
 	const getOutputElement = utils.getOutput(attribute);
 	getOutputElement.style.display = 'grid';
 	getOutputElement.style.height = 'fit-content';
@@ -27,7 +25,10 @@ export function gradientTextGenerator(): void {
 	const getRangeElement = utils.getRange(attribute);
 
 	getTextButtonElement?.addEventListener('click', () => {
-		if (getInputElement.value.length === 0) return;
+		if (getInputElement.value.length === 0) {
+			utils.triggerEmptyAnimation(getInputElement);
+			return;
+		}
 
 		const values = {
 			firstColor: getFirstColor.value,

src/style.css

@@ -221,6 +221,7 @@ textarea:focus {
 	border: 0.5px solid var(--text-color);
 	border-radius: 3px;
 	font-size: 1.3rem;
+	position: relative;
 }
 
 ::placeholder {