Skip to content

Commit 161d1f0

Browse files
Thilakmani-devthilak-mani-b
Thilakmani-dev
and
thilak-mani-b
authored
feat: add grid generator (#483)
Co-authored-by: thilakmani <[email protected]>
1 parent 2b691e8 commit 161d1f0

File tree

6 files changed

+298
-0
lines changed

6 files changed

+298
-0
lines changed

‎index.html

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -348,6 +348,39 @@ <h1 id="head">Code Magic</h1>
348348
</li>
349349
</ul>
350350
</li>
351+
<li id="layout-generator" class="dropdown">
352+
<div>
353+
<div>
354+
<iconify-icon
355+
inline
356+
icon="ph:layout"
357+
style="color: white"
358+
width="20"
359+
height="20"
360+
></iconify-icon>
361+
<span>Layout Generators</span>
362+
</div>
363+
<iconify-icon
364+
inline
365+
icon="material-symbols:arrow-drop-down-rounded"
366+
style="color: white"
367+
width="20"
368+
></iconify-icon>
369+
</div>
370+
<ul>
371+
<li data-gen="grid-generators">
372+
<iconify-icon
373+
inline
374+
icon="ep:grid"
375+
style="color: white"
376+
width="20"
377+
height="20"
378+
></iconify-icon>
379+
<span>CSS Grid Generator</span>
380+
<span class="tooltip"> Get styling for css grid </span>
381+
</li>
382+
</ul>
383+
</li>
351384
</ul>
352385
<footer>
353386
<a
@@ -1248,6 +1281,65 @@ <h1>Input Range</h1>
12481281
</div>
12491282
<!-- End of Input for Generators -->
12501283

1284+
<!-- Grid Generator -->
1285+
<div data-content="grid-generators" class="grid-generators">
1286+
<label for="grid-generators-preview">
1287+
<p>CSS Grid Preview</p>
1288+
<div
1289+
id="grid-generators-preview"
1290+
class="grid-generators-preview"
1291+
></div>
1292+
</label>
1293+
<div class="rows">
1294+
<label for="grid-generators-rows" class="row full-page">
1295+
<input
1296+
type="number"
1297+
name="grid-generators-rows"
1298+
placeholder="Enter no of rows"
1299+
id="grid-generators-rows"
1300+
class="grid-generators-inputs"
1301+
min="0"
1302+
max="100"
1303+
/>
1304+
</label>
1305+
</div>
1306+
<div class="columns">
1307+
<label for="grid-generator-columns" class="column full-page">
1308+
<input
1309+
type="number"
1310+
name="grid-generator-columns"
1311+
placeholder="Enter no of columns"
1312+
id="grid-generators-columns"
1313+
class="grid-generators-inputs"
1314+
min="0"
1315+
max="100"
1316+
/>
1317+
</label>
1318+
</div>
1319+
<div class="btn-container">
1320+
<div class="btn" data-reset="grid-generators">Reset</div>
1321+
<button class="btn" data-download="grid-generators-code">
1322+
<iconify-icon
1323+
inline
1324+
icon="bx:code-alt"
1325+
style="color: white; margin-right: 5px"
1326+
width="20"
1327+
></iconify-icon>
1328+
Get CSS Code
1329+
</button>
1330+
<button class="btn" data-download="grid-generators-tailwind">
1331+
<iconify-icon
1332+
inline
1333+
icon="bx:code-alt"
1334+
style="color: white; margin-right: 5px"
1335+
width="20"
1336+
></iconify-icon>
1337+
Get Tailwind
1338+
</button>
1339+
</div>
1340+
</div>
1341+
<!-- End of Grid generator -->
1342+
12511343
<!-- Result from Generators -->
12521344
<div class="side-results">
12531345
<div class="header">

‎src/lib/getElements.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,3 +177,24 @@ export const getDegreeSpanElement = (attribute: string) =>
177177
document.querySelector(
178178
`[data-content=${attribute}] .unit-display`
179179
) as HTMLSpanElement;
180+
181+
export const getNumberOfColumns = (attribute: string): HTMLInputElement =>
182+
document.getElementById(`${attribute}-columns`) as HTMLInputElement;
183+
184+
export const getNumberOfRows = (attribute: string): HTMLInputElement =>
185+
document.getElementById(`${attribute}-rows`) as HTMLInputElement;
186+
187+
export const getGridFields = (
188+
attribute: string,
189+
types: string[]
190+
): HTMLSpanElement[] =>
191+
types.reduce(
192+
(acc, type) => [
193+
...acc,
194+
document.getElementById(`${attribute}-${type}`) as HTMLInputElement,
195+
],
196+
[]
197+
);
198+
199+
export const getGridPreview = (attribute: string): HTMLElement =>
200+
document.getElementById(`${attribute}-preview`) as HTMLElement;

‎src/lib/packages/helpers.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import copy from 'copy-to-clipboard';
55
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
66
// @ts-ignore
77
import {Eggy} from '@s-r0/eggy-js';
8+
import {getNumberOfColumns, getNumberOfRows} from '../getElements';
89

910
export function createDownloadLink(fileName: string, url: string) {
1011
const link = document.createElement('a');
@@ -163,6 +164,18 @@ export const actOnGenerator = (
163164
}
164165
`;
165166
break;
167+
case 'grid-generators':
168+
element = outputElement.style;
169+
codeToCopy = `
170+
div {
171+
height: 300px;
172+
width: 300px;
173+
display:${element.display},
174+
grid-template-rows:${element.gridTemplateRows},
175+
grid-template-columns:${element.gridTemplateColumns}
176+
}
177+
`;
178+
break;
166179
default:
167180
codeToCopy = `
168181
Couldn't copy, please try again :(
@@ -338,6 +351,18 @@ function convertInputRangeStylesToTailwind(element: CSSStyleDeclaration) {
338351
return tailwindClasses.join(' ');
339352
}
340353

354+
function convertGridSylesToTailwind(attribute: string) {
355+
const noOfColumns = getNumberOfColumns(attribute).value;
356+
const noOfRows = getNumberOfRows(attribute).value;
357+
const rows = parseInt(noOfRows !== '' ? noOfRows : '0');
358+
const columns = parseInt(noOfColumns !== '' ? noOfColumns : '0');
359+
if (rows > 0 || columns > 0) {
360+
return `grid grid-rows-${rows} grid-cols-${columns}`;
361+
} else {
362+
return '';
363+
}
364+
}
365+
341366
/**
342367
* what should copy when the copy Tailwind button is clicked
343368
*
@@ -383,6 +408,9 @@ export const actOnTailwindGenerator = (
383408
case 'input-range':
384409
codeToCopy = `${convertInputRangeStylesToTailwind(element)}`;
385410
break;
411+
case 'grid-generators':
412+
codeToCopy = `${convertGridSylesToTailwind(attribute)}`;
413+
break;
386414
default:
387415
codeToCopy = `
388416
Couldn't copy, please try again :(

‎src/main.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import {
2424
import {rangeGenerator} from './pages/input-range';
2525
import {picTextGenerator} from './pages/pic-text';
2626
import {addTextShadowListener, textShadowGenerator} from './pages/text-shadow';
27+
import {gridGenerator} from './pages/grid-generator';
2728

2829
// Packages
2930
import * as FilePond from 'filepond';
@@ -261,6 +262,7 @@ function showContent(attribute: string, display: Display): void {
261262
attribute === 'gradient-background' && addGradientBackgroundListener();
262263
attribute === 'animation' && addAnimationListener();
263264
attribute === 'transform' && addTransformListener();
265+
attribute === 'grid-generators' && gridGenerator();
264266
}
265267

266268
/**

‎src/pages/grid-generator.ts

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import {
2+
getAllFields,
3+
getCopyCodeButton,
4+
getGridFields,
5+
getGridPreview,
6+
getNumberOfColumns,
7+
getNumberOfRows,
8+
getResetButton,
9+
getTailwindButton,
10+
} from '../lib/getElements';
11+
import {
12+
copyCSSCodeToClipboard,
13+
copyTailwindCodeToClipboard,
14+
showPopup,
15+
} from '../lib/packages/utils';
16+
17+
const attribute = 'grid-generators';
18+
19+
export function gridGenerator(): void {
20+
const noOfColumns = getNumberOfColumns(attribute);
21+
const noOfRows = getNumberOfRows(attribute);
22+
23+
const preview = getGridPreview(attribute);
24+
25+
const allGridInputs = [noOfColumns, noOfRows];
26+
27+
const allGridInputFields = getGridFields(attribute, ['rows', 'columns']);
28+
29+
const getGridColValue = () => `repeat(${parseInt(noOfColumns.value)}, 1fr)`;
30+
const getGridRowValue = () => `repeat(${parseInt(noOfRows.value)}, 1fr)`;
31+
preview.style.display = 'grid';
32+
preview.style.gridTemplateColumns = getGridColValue();
33+
preview.style.gridTemplateRows = getGridRowValue();
34+
35+
allGridInputs.forEach((input, index) => {
36+
if (index < 4) {
37+
allGridInputFields[index].textContent = `${input.value}px`;
38+
}
39+
input.addEventListener('input', () => {
40+
preview.style.display = 'grid';
41+
preview.style.gridTemplateColumns = getGridColValue();
42+
preview.style.gridTemplateRows = getGridRowValue();
43+
updatePreviewElement();
44+
});
45+
});
46+
47+
const getCSSCodeButtonElement = getCopyCodeButton(attribute);
48+
getCSSCodeButtonElement.addEventListener('click', copyCSSHandler);
49+
const getTailwindCodeButtonElement = getTailwindButton(attribute);
50+
getTailwindCodeButtonElement.addEventListener('click', copyTailwindHandler);
51+
}
52+
53+
function copyTailwindHandler() {
54+
const outputElement: HTMLElement = getGridPreview(attribute);
55+
copyTailwindCodeToClipboard(attribute, outputElement);
56+
showPopup(
57+
'Tailwind Code Copied',
58+
'Code has been successfully copied to clipboard',
59+
'success'
60+
);
61+
}
62+
63+
function copyCSSHandler() {
64+
const outputElement = getGridPreview(attribute);
65+
copyCSSCodeToClipboard(attribute, outputElement);
66+
showPopup(
67+
'Code Copied',
68+
'Code has been successfully copied to clipboard',
69+
'success'
70+
);
71+
}
72+
73+
function resetValues() {
74+
const {inputs} = getAllFields(attribute);
75+
const preview = getGridPreview(attribute);
76+
77+
getResetButton(attribute).addEventListener('click', () => {
78+
inputs.forEach((input) => {
79+
input.value = input.defaultValue;
80+
});
81+
updatePreviewElement();
82+
preview.setAttribute('style', '');
83+
getResetButton(attribute).classList.remove('reset-show');
84+
});
85+
}
86+
87+
function getValues() {
88+
const {inputs} = getAllFields(attribute);
89+
90+
inputs.forEach((input) => {
91+
input.addEventListener('input', () => {
92+
resetValues();
93+
});
94+
});
95+
}
96+
97+
getValues();
98+
99+
function updatePreviewElement() {
100+
const preview = getGridPreview(attribute);
101+
preview.innerHTML = '';
102+
const noOfColumns = getNumberOfColumns(attribute).value;
103+
const noOfRows = getNumberOfRows(attribute).value;
104+
const rows = parseInt(noOfRows !== '' ? noOfRows : '0');
105+
const columns = parseInt(noOfColumns !== '' ? noOfColumns : '0');
106+
if (rows > columns) {
107+
for (let i = 0; i < rows; i++) {
108+
for (let j = 0; j < columns; j++) {
109+
const child = document.createElement('div');
110+
child.style.border = '1px solid white';
111+
preview.appendChild(child);
112+
}
113+
}
114+
} else {
115+
for (let i = 0; i < columns; i++) {
116+
for (let j = 0; j < rows; j++) {
117+
const child = document.createElement('div');
118+
child.style.border = '1px solid white';
119+
preview.appendChild(child);
120+
}
121+
}
122+
}
123+
}

‎src/style.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1094,6 +1094,38 @@ input[type='range']:focus::-moz-range-thumb {
10941094
display: block;
10951095
}
10961096

1097+
/* Grid generators styles */
1098+
1099+
.grid-generators {
1100+
display: flex;
1101+
flex-direction: column;
1102+
gap: 10px;
1103+
}
1104+
1105+
.grid-generators-preview {
1106+
width: 300px;
1107+
height: 200px;
1108+
border: 1px solid white;
1109+
margin-top: 10px;
1110+
}
1111+
1112+
.grid-generators input[type='number'] {
1113+
border-radius: 5px;
1114+
width: var(--generator-width);
1115+
height: 50px;
1116+
border: none;
1117+
background-color: var(--primary-color);
1118+
color: var(--text-color);
1119+
resize: none;
1120+
padding: 1rem;
1121+
margin-bottom: var(--spacing);
1122+
outline: none;
1123+
}
1124+
1125+
.grid-generators input[type='number']::placeholder {
1126+
color: #ffffff;
1127+
}
1128+
10971129
/* FOOTER SECTION */
10981130

10991131
footer {

0 commit comments

Comments
 (0)