feat(gradient-border.ts, gradient-text.ts): add option to pick your degree

Author: Dun-sin

index.html

@@ -142,6 +142,15 @@ <h2>Gradient Border Generator</h2>
 								<input type="color" value="#1DB4CE" id="gradient-text-color2" />
 								<span>Second Color</span>
 							</label>
+							<label id="degree">
+								<span>Slide to change the degree</span>
+								<input
+									type="range"
+									max="360"
+									min="0"
+									id="gradient-text-degree"
+								/>
+							</label>
 							<div class="btn" data-button="gradient-text">Get Text</div>
 						</div>
 						<div class="download-output">
@@ -181,6 +190,16 @@ <h2>Gradient Border Generator</h2>
 								<span>Second Color</span>
 							</label>
 
+							<label id="degree">
+								<span>Slide to change the degree</span>
+								<input
+									type="range"
+									max="360"
+									min="0"
+									id="gradient-border-degree"
+								/>
+							</label>
+
 							<div class="btn" data-button="gradient-border">Get Result</div>
 						</div>
 						<div class="download-output">

src/general.ts

@@ -135,6 +135,9 @@ export const getColorInput2 = (attribute: string): HTMLInputElement =>
 export const getOutput = (attribute: string): HTMLElement =>
 	<HTMLElement>document.querySelector(`[data-modal = ${attribute}] .output`);
 
+export const getRange = (attribute: string): HTMLInputElement =>
+	<HTMLInputElement>document.getElementById(`${attribute}-degree`);
+
 function createDownloadLink(fileName: string, url: string) {
 	const link = document.createElement('a');
 	link.download = fileName;

src/generators/gradient-border.ts

@@ -1,8 +1,9 @@
 import * as utils from '../general';
 
-type Colors = {
+type Values = {
 	firstColor: string;
 	secondColor: string;
+	degree: string;
 };
 
 export function gradientBorderGenerator(): void {
@@ -11,25 +12,27 @@ export function gradientBorderGenerator(): void {
 	const color2 = utils.getColorInput2(attribute);
 	const getResultButtonElement = utils.getResultButton(attribute);
 	const getOutputElement = utils.getOutput(attribute);
+	const getRangeElement = utils.getRange(attribute);
 
 	getResultButtonElement.addEventListener('click', () => {
-		const colors = {
+		const values = {
 			firstColor: color1.value,
 			secondColor: color2.value,
+			degree: getRangeElement.value,
 		};
-		getGradientBorderResult(attribute, colors, getOutputElement);
+		getGradientBorderResult(attribute, values, getOutputElement);
 	});
 }
 
 function getGradientBorderResult(
 	attribute: string,
-	colors: Colors,
+	values: Values,
 	outputElement: HTMLElement,
 ): void {
 	outputElement.style.border = 'solid';
 	outputElement.style.borderWidth = '5px';
 	outputElement.style.borderImageSlice = '1';
-	outputElement.style.borderImageSource = `linear-gradient(100deg, ${colors.firstColor}, ${colors.secondColor})`;
+	outputElement.style.borderImageSource = `linear-gradient(${values.degree}deg, ${values.firstColor}, ${values.secondColor})`;
 
 	const getCodeButtonElement = utils.getCopyCodeButton(attribute);
 	getCodeButtonElement.addEventListener('click', () => {

src/generators/gradient-text.ts

@@ -1,14 +1,14 @@
 import * as utils from '../general';
 
-type Colors = {
+type Values = {
 	firstColor: string;
 	secondColor: string;
+	degree: string;
 };
 
 /**
  * @function gradientTextGenerator
  * @summary handles functionality of the gradient text generator
- * @param attribute - The attribute name of the generator element
  * @return {void} Nothing
  */
 export function gradientTextGenerator(): void {
@@ -24,22 +24,24 @@ export function gradientTextGenerator(): void {
 	const getTextButtonElement = utils.getResultButton(attribute);
 	const getFirstColor = utils.getColorInput1(attribute);
 	const getSecondColor = utils.getColorInput2(attribute);
+	const getRangeElement = utils.getRange(attribute);
 
 	getTextButtonElement?.addEventListener('click', () => {
 		if (getInputElement.value.length === 0) return;
 
-		const colors = {
+		const values = {
 			firstColor: getFirstColor.value,
 			secondColor: getSecondColor.value,
+			degree: getRangeElement.value,
 		};
 
 		getGradientTextResult(
 			attribute,
 			getInputElement.value,
-			colors,
+			values,
 			getOutputElement,
 		);
-		getInputElement.value = '';
+		// getInputElement.value = '';
 	});
 }
 
@@ -53,14 +55,14 @@ export function gradientTextGenerator(): void {
 function getGradientTextResult(
 	attribute: string,
 	text: string,
-	colors: Colors,
+	values: Values,
 	outputElement: HTMLElement,
 ): void {
 	const createTextElement = () => {
 		const wordElement = document.createElement('p');
 		wordElement.innerText = text;
 		wordElement.style.fontSize = '2rem';
-		wordElement.style.background = `linear-gradient(to bottom, ${colors.firstColor} 50%, ${colors.secondColor})`;
+		wordElement.style.background = `linear-gradient(${values.degree}deg, ${values.firstColor}, ${values.secondColor})`;
 		wordElement.style.webkitBackgroundClip = 'text';
 		wordElement.style.backgroundClip = 'text';
 		wordElement.style.webkitTextFillColor = 'transparent';

src/style.css

@@ -212,14 +212,15 @@ main {
 input[type='text'],
 textarea,
 textarea:focus {
-	height: 30px;
+	height: 40px;
 	outline: none;
 	padding: 5px;
 	caret-color: var(--text-color);
 	color: var(--text-color);
 	background: transparent;
 	border: 0.5px solid var(--text-color);
 	border-radius: 3px;
+	font-size: 1.3rem;
 }
 
 ::placeholder {
@@ -251,6 +252,7 @@ textarea:focus {
 	height: 30px;
 	border: none;
 	margin-right: 10px;
+	cursor: pointer;
 }
 
 [type='color']::-webkit-color-swatch-wrapper {
@@ -261,6 +263,14 @@ textarea:focus {
 	border: none;
 }
 
+#degree {
+	flex-direction: column;
+}
+
+#degree > span {
+	font-size: 0.7em;
+}
+
 .count {
 	position: absolute;
 	right: 24px;