Merge branch 'refactor/use-arrow-function-for-short-functions' into main

Author: Dun-sin

index.html

@@ -150,8 +150,25 @@ <h2>Gradient Border Generator</h2>
 					<div class="modal-main-content" data-modal="gradient-border">
 						<div class="input">
 							<p>Pick Your Colors:</p>
-							<input type="color" id="gradient-border-color1" />
-							<input type="color" id="gradient-border-color2" />
+
+							<label for="colorPicker">
+								<input
+									type="color"
+									value="#1DB8CE"
+									id="gradient-border-color1"
+								/>
+								<span>First Color</span>
+							</label>
+
+							<label for="colorPicker">
+								<input
+									type="color"
+									value="#1DB4CE"
+									id="gradient-border-color2"
+								/>
+								<span>Second Color</span>
+							</label>
+
 							<div class="btn" data-button="gradient-border">Get Result</div>
 						</div>
 						<div class="download-output">

src/general.ts

@@ -42,6 +42,16 @@ export function copyCodeToClipboard(
         `;
 
 				break;
+			case 'gradient-border':
+				const element = outputElement.style;
+				codeToCopy = `
+          div {
+            border: ${element.border},
+            border-width: ${element.borderWidth},
+            border-image-slice: ${element.borderImageSlice},
+            border-image-source: ${element.borderImageSource},
+          }
+        `;
 		}
 		copy(codeToCopy);
 	}
@@ -121,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-border.ts

@@ -17,16 +17,22 @@ export function gradientBorderGenerator(): void {
 			firstColor: color1.value,
 			secondColor: color2.value,
 		};
-		getGradientBorderResult(colors, getOutputElement);
+		getGradientBorderResult(attribute, colors, getOutputElement);
 	});
 }
 
 function getGradientBorderResult(
+	attribute: string,
 	colors: Colors,
 	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})`;
+
+	const getCodeButtonElement = utils.getCopyCodeButton(attribute);
+	getCodeButtonElement.addEventListener('click', () => {
+		utils.copyCodeToClipboard(attribute, outputElement);
+	});
 }

src/style.css

@@ -237,13 +237,28 @@ textarea:focus {
 [data-modal='gradient-border'] .input p {
 	margin-bottom: 0.5em;
 }
-[data-modal='gradient-border'] [type='color']:last-of-type {
-	margin-bottom: 1em;
+
+[data-modal='gradient-border'] .input label {
+	background-color: #fff;
+	display: flex;
+	padding: 10px;
+	margin-bottom: 5px;
+	border-radius: 10px;
+	color: black;
 }
 
-[data-modal='gradient-border'] [type='color'] {
-	height: 40px;
-	width: 100%;
+[type='color'] {
+	width: 30px;
+	height: 30px;
+	border: none;
+	margin-right: 10px;
+}
+
+[type='color']::-webkit-color-swatch-wrapper {
+	padding: 0;
+}
+
+[type='color']::-webkit-color-swatch {
 	border: none;
 }