feat(index.html, gradient-text.ts): add functionality to pick colors in gradient text generator

fix #52

Author: Dun-sin

index.html

@@ -130,6 +130,18 @@ <h2>Gradient Border Generator</h2>
 								id="gradient-text-text"
 								placeholder="Enter the text"
 							/>
+
+							<p>Pick Your Colors:</p>
+
+							<label for="colorPicker">
+								<input type="color" value="#1DB8CE" id="gradient-text-color1" />
+								<span>First Color</span>
+							</label>
+
+							<label for="colorPicker">
+								<input type="color" value="#1DB4CE" id="gradient-text-color2" />
+								<span>Second Color</span>
+							</label>
 							<div class="btn" data-button="gradient-text">Get Text</div>
 						</div>
 						<div class="download-output">

src/general.ts

@@ -131,7 +131,7 @@ export const getColorInput1 = (attribute: string): HTMLInputElement =>
 
 export const getColorInput2 = (attribute: string): HTMLInputElement =>
 	<HTMLInputElement>document.getElementById(`${attribute}-color2`);
-  
+
 export const getOutput = (attribute: string): HTMLElement =>
 	<HTMLElement>document.querySelector(`[data-modal = ${attribute}] .output`);
 

src/generators/gradient-text.ts

@@ -1,5 +1,10 @@
 import * as utils from '../general';
 
+type Colors = {
+	firstColor: string;
+	secondColor: string;
+};
+
 /**
  * @function gradientTextGenerator
  * @summary handles functionality of the gradient text generator
@@ -17,11 +22,23 @@ export function gradientTextGenerator(): void {
 	getOutputElement.style.placeItems = 'center';
 
 	const getTextButtonElement = utils.getResultButton(attribute);
+	const getFirstColor = utils.getColorInput1(attribute);
+	const getSecondColor = utils.getColorInput2(attribute);
 
 	getTextButtonElement?.addEventListener('click', () => {
 		if (getInputElement.value.length === 0) return;
 
-		getGradientTextResult(attribute, getInputElement.value, getOutputElement);
+		const colors = {
+			firstColor: getFirstColor.value,
+			secondColor: getSecondColor.value,
+		};
+
+		getGradientTextResult(
+			attribute,
+			getInputElement.value,
+			colors,
+			getOutputElement,
+		);
 		getInputElement.value = '';
 	});
 }
@@ -36,14 +53,14 @@ export function gradientTextGenerator(): void {
 function getGradientTextResult(
 	attribute: string,
 	text: string,
+	colors: Colors,
 	outputElement: HTMLElement,
 ): void {
 	const createTextElement = () => {
 		const wordElement = document.createElement('p');
 		wordElement.innerText = text;
 		wordElement.style.fontSize = '2rem';
-		wordElement.style.background =
-			'linear-gradient(to bottom, rgb(119, 118, 248) 50%, rgb(94, 238, 94))';
+		wordElement.style.background = `linear-gradient(to bottom, ${colors.firstColor} 50%, ${colors.secondColor})`;
 		wordElement.style.webkitBackgroundClip = 'text';
 		wordElement.style.backgroundClip = 'text';
 		wordElement.style.webkitTextFillColor = 'transparent';

src/style.css

@@ -233,12 +233,11 @@ textarea:focus {
 	width: var(--input-width);
 	overflow-y: hidden;
 }
-
-[data-modal='gradient-border'] .input p {
+.input p {
 	margin-bottom: 0.5em;
 }
 
-[data-modal='gradient-border'] .input label {
+.input label {
 	background-color: #fff;
 	display: flex;
 	padding: 10px;