feat(gradient-background.ts): add gradient background generator

fix #29

Author: Dun-sin

src/general.ts

@@ -21,6 +21,7 @@ export function copyCodeToClipboard(
 
 	function actOnGenerator() {
 		let codeToCopy: string = '';
+		let element;
 		switch (attribute) {
 			case 'pic-text':
 				codeToCopy = `
@@ -43,14 +44,24 @@ export function copyCodeToClipboard(
 
 				break;
 			case 'gradient-border':
-				const element = outputElement.style;
+				element = outputElement.style;
 				codeToCopy = `
           div {
             border: ${element.border},
             border-width: ${element.borderWidth},
             border-image-slice: ${element.borderImageSlice},
             border-image-source: ${element.borderImageSource},
           }
+        `;
+				break;
+			case 'gradient-background':
+				element = outputElement.style;
+				codeToCopy = `
+          div {
+            height: 100px;
+            width: 100px;
+            background: ${element.backgroundImage};
+          }
         `;
 		}
 		copy(codeToCopy);

src/generators/gradient-background.ts

@@ -0,0 +1,44 @@
+import * as utils from '../general';
+
+type Values = {
+	firstColor: string;
+	secondColor: string;
+	degree: string;
+};
+
+export function gradientBackgroundGenerator() {
+	const attribute = 'gradient-background';
+	// Inputs
+	const color1 = utils.getColorInput1(attribute);
+	const color2 = utils.getColorInput2(attribute);
+	const getDegreeElement = utils.getRange(attribute);
+
+	const getResultElement = utils.getResultButton(attribute);
+	const getOutputElement = utils.getOutput(attribute);
+
+	getResultElement.addEventListener('click', () => {
+		onClickButton();
+	});
+
+	function onClickButton() {
+		const values: Values = {
+			firstColor: color1.value,
+			secondColor: color2.value,
+			degree: getDegreeElement.value,
+		};
+		getGradientBackgroundResult(attribute, values, getOutputElement);
+	}
+}
+
+function getGradientBackgroundResult(
+	attribute: string,
+	values: Values,
+	outputElement: HTMLElement,
+): void {
+	outputElement.style.background = `linear-gradient(${values.degree}deg, ${values.firstColor}, ${values.secondColor})`;
+
+	const getCodeButtonElement = utils.getCopyCodeButton(attribute);
+	getCodeButtonElement.addEventListener('click', () => {
+		utils.copyCodeToClipboard(attribute, outputElement);
+	});
+}

src/main.ts

@@ -1,9 +1,10 @@
 // Generator Modules
 import { picTextGenerator } from './generators/pic-text';
 import { gradientTextGenerator } from './generators/gradient-text';
+import { gradientBorderGenerator } from './generators/gradient-border';
+import { gradientBackgroundGenerator } from './generators/gradient-background';
 
 import * as FilePond from 'filepond';
-import { gradientBorderGenerator } from './generators/gradient-border';
 
 /**
  * All Variables
@@ -81,6 +82,9 @@ function generatorsFunction(attribute: string): void {
 		case 'gradient-border':
 			gradientBorderGenerator();
 			break;
+		case 'gradient-background':
+			gradientBackgroundGenerator();
+			break;
 	}
 }
 
@@ -142,11 +146,10 @@ generators.forEach((generator) => {
 });
 
 // closing modal when user clicks outside
-document.addEventListener("click", function (event) {
-  if (event.target === null) return;
-  const element = <HTMLElement>event.target;
-  if (element.matches(".modal-container")) {
-    closeModalFunction();
-  }
+document.addEventListener('click', function (event) {
+	if (event.target === null) return;
+	const element = <HTMLElement>event.target;
+	if (element.matches('.modal-container')) {
+		closeModalFunction();
+	}
 });
-