Skip to content

Commit 7297e6e

Browse files
abdullah-aleemabdullah-aleem
authored
refactor: move the grid generator input into the input section (#563)
1 parent 492f833 commit 7297e6e

1 file changed

Lines changed: 82 additions & 80 deletions

File tree

‎index.html‎

Lines changed: 82 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1412,97 +1412,99 @@ <h1>Input Range</h1>
14121412
</div>
14131413
</div>
14141414
</div>
1415-
</div>
1416-
<!-- End of Input for Generators -->
1417-
1418-
<!-- Grid Generator -->
1419-
<div data-content="grid-generators" class="grid-generators">
1420-
<div
1421-
id="grid-generators-preview"
1422-
class="grid-generators-preview"
1423-
></div>
1424-
<div class="grid-input-containers">
1425-
<input
1426-
type="number"
1427-
name="grid-generators-rows"
1428-
id="grid-generators-rows"
1429-
placeholder="Rows"
1430-
class="grid-generators-inputs row full-page"
1431-
min="0"
1432-
max="100"
1433-
/>
1434-
<input
1435-
type="number"
1436-
name="grid-generator-columns"
1437-
id="grid-generators-columns"
1438-
class="grid-generators-inputs column full-page"
1439-
placeholder="Columns"
1440-
min="0"
1441-
max="100"
1442-
/>
1443-
<input
1444-
type="number"
1445-
name="grid-generators-row-gaps"
1446-
id="grid-generators-row-gaps"
1447-
placeholder="Row gap"
1448-
class="grid-generators-inputs row-gaps full-page"
1449-
min="0"
1450-
max="100"
1451-
/>
1452-
<input
1453-
type="number"
1454-
name="grid-generators-column-gaps"
1455-
id="grid-generators-column-gaps"
1456-
placeholder="Column gap"
1457-
class="grid-generators-inputs column-gaps full-page"
1458-
min="0"
1459-
max="100"
1460-
/>
1461-
</div>
1462-
<div class="btn-container">
1463-
<div class="reset" data-reset="grid-generators">Reset</div>
1464-
<div class="btn-dropdown-container">
1465-
<button class="btn" data-css-tailwind="grid-generators-code">
1466-
Copy Code
1467-
<iconify-icon
1468-
inline
1469-
icon="material-symbols:arrow-drop-down-rounded"
1470-
style="color: white"
1471-
width="20"
1472-
></iconify-icon>
1473-
</button>
1474-
<div
1475-
class="css-tailwind"
1476-
data-dropdown="grid-generators-dropdown2"
1477-
>
1478-
<!-- dropdown elements go here -->
1479-
1480-
<div class="dropdown-item" data-download="grid-generators-code">
1415+
<!-- Grid Generator -->
1416+
<div data-content="grid-generators" class="grid-generators">
1417+
<div
1418+
id="grid-generators-preview"
1419+
class="grid-generators-preview"
1420+
></div>
1421+
<div class="grid-input-containers">
1422+
<input
1423+
type="number"
1424+
name="grid-generators-rows"
1425+
id="grid-generators-rows"
1426+
placeholder="Rows"
1427+
class="grid-generators-inputs row full-page"
1428+
min="0"
1429+
max="100"
1430+
/>
1431+
<input
1432+
type="number"
1433+
name="grid-generator-columns"
1434+
id="grid-generators-columns"
1435+
class="grid-generators-inputs column full-page"
1436+
placeholder="Columns"
1437+
min="0"
1438+
max="100"
1439+
/>
1440+
<input
1441+
type="number"
1442+
name="grid-generators-row-gaps"
1443+
id="grid-generators-row-gaps"
1444+
placeholder="Row gap"
1445+
class="grid-generators-inputs row-gaps full-page"
1446+
min="0"
1447+
max="100"
1448+
/>
1449+
<input
1450+
type="number"
1451+
name="grid-generators-column-gaps"
1452+
id="grid-generators-column-gaps"
1453+
placeholder="Column gap"
1454+
class="grid-generators-inputs column-gaps full-page"
1455+
min="0"
1456+
max="100"
1457+
/>
1458+
</div>
1459+
<div class="btn-container">
1460+
<div class="reset" data-reset="grid-generators">Reset</div>
1461+
<div class="btn-dropdown-container">
1462+
<button class="btn" data-css-tailwind="grid-generators-code">
1463+
Copy Code
14811464
<iconify-icon
14821465
inline
1483-
icon="skill-icons:css"
1484-
style="color: white; margin-right: 5px"
1466+
icon="material-symbols:arrow-drop-down-rounded"
1467+
style="color: white"
14851468
width="20"
14861469
></iconify-icon>
1487-
<span> Get CSS Code </span>
1488-
</div>
1470+
</button>
14891471
<div
1490-
class="dropdown-item"
1491-
data-download="grid-generators-tailwind"
1472+
class="css-tailwind"
1473+
data-dropdown="grid-generators-dropdown2"
14921474
>
1493-
<iconify-icon
1494-
inline
1495-
icon="devicon:tailwindcss"
1496-
style="color: white; margin-right: 5px"
1497-
width="20"
1498-
></iconify-icon>
1499-
<span> Get Tailwind </span>
1475+
<!-- dropdown elements go here -->
1476+
1477+
<div
1478+
class="dropdown-item"
1479+
data-download="grid-generators-code"
1480+
>
1481+
<iconify-icon
1482+
inline
1483+
icon="skill-icons:css"
1484+
style="color: white; margin-right: 5px"
1485+
width="20"
1486+
></iconify-icon>
1487+
<span> Get CSS Code </span>
1488+
</div>
1489+
<div
1490+
class="dropdown-item"
1491+
data-download="grid-generators-tailwind"
1492+
>
1493+
<iconify-icon
1494+
inline
1495+
icon="devicon:tailwindcss"
1496+
style="color: white; margin-right: 5px"
1497+
width="20"
1498+
></iconify-icon>
1499+
<span> Get Tailwind </span>
1500+
</div>
15001501
</div>
15011502
</div>
15021503
</div>
15031504
</div>
1505+
<!-- End of Grid generator -->
15041506
</div>
1505-
<!-- End of Grid generator -->
1507+
<!-- End of Input for Generators -->
15061508

15071509
<!-- Result from Generators -->
15081510
<div class="side-results">

0 commit comments

Comments
 (0)