Skip to content

Commit

Permalink
feat: added buttons for Tailwind code options (Dun-sin#410)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Abbeyafolaby
Abbeyafolaby authored Jul 21, 2023
1 parent 6ec5251 commit 4ea2096
Show file tree
Hide file tree
Showing 14 changed files with 626 additions and 234 deletions.
302 changes: 211 additions & 91 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1179,7 +1179,16 @@ <h2>
style="color: white; margin-right: 5px"
width="20"
></iconify-icon>
Get Code
Get CSS Code
</div>
<div class="btn" data-download="input-range-tailwind">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon>
Get Tailwind
</div>
</div>
</div>
Expand Down Expand Up @@ -1228,16 +1237,26 @@ <h2>Results</h2>
Download Svg
</button>
</div>

<button class="btn" data-download="pic-text-code">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon>
Get Code
</button>
<div class="btn-container">
<button class="btn" data-download="pic-text-code">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon>
Get CSS Code
</button>
<button class="btn" data-download="pic-text-tailwind">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon>
Get Tailwind
</button>
</div>
</div>
</div>
<!-- End of Pic Text Result -->
Expand Down Expand Up @@ -1267,118 +1286,209 @@ <h2>Results</h2>
Download Svg
</button>
</div>

<button class="btn" data-download="gradient-text-code">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon>
Get Code
</button>
<div class="btn-container">
<button class="btn" data-download="gradient-text-code">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon>
Get CSS Code
</button>
<button class="btn" data-download="gradient-text-tailwind">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon>
Get Tailwind
</button>
</div>
</div>
</div>
<!-- End of Gradient Text Result -->

<!-- Gradient Border Result -->
<div class="download-output" data-result="gradient-border">
<div class="output gradient-border"></div>
<div class="download-btn">
<button class="btn" data-download="gradient-border-code">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon>
Get Code
</button>
<div class="btn-container">
<div class="download-btn">
<button class="btn" data-download="gradient-border-code">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon>
Get CSS Code
</button>
</div>
<div class="download-btn">
<button class="btn" data-download="gradient-border-tailwind">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon>
Get Tailwind
</button>
</div>
</div>
</div>
<!-- End of Gradient Border Result -->

<!-- Gradient Background Result -->
<div class="download-output" data-result="gradient-background">
<div class="output"></div>
<div class="download-btn">
<button class="btn" data-download="gradient-background-code">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon>
Get Code
</button>
<div class="btn-container">
<div class="download-btn">
<button class="btn" data-download="gradient-background-code">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon>
Get CSS Code
</button>
</div>
<div class="download-btn">
<button
class="btn"
data-download="gradient-background-tailwind"
>
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon>
Get Tailwind
</button>
</div>
</div>
</div>
<!-- End of Gradient Background Result -->

<!-- Animation Result -->
<div class="download-output" data-result="animation">
<div class="output"></div>
<div class="download-btn">
<button class="btn" data-download="animation-code">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon
>Get Code
</button>
<div class="btn-container">
<div class="download-btn">
<button class="btn" data-download="animation-code">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon
>Get CSS Code
</button>
</div>
<div class="download-btn">
<button class="btn" data-download="animation-tailwind">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon
>Get Tailwind
</button>
</div>
</div>
</div>
<!-- End of Animation Result -->

<!-- Border Radius Result -->
<div class="download-output" data-result="border-radius">
<div class="output"></div>
<div class="download-btn">
<button class="btn" data-download="border-radius-code">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon
>Get Code
</button>
<div class="btn-container">
<div class="download-btn">
<button class="btn" data-download="border-radius-code">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon
>Get CSS Code
</button>
</div>
<div class="download-btn">
<button class="btn" data-download="border-radius-tailwind">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon
>Get Tailwind Code
</button>
</div>
</div>
</div>
<!-- End of Border Radius Result -->

<!-- Box-Shadow Result -->
<div class="download-output" data-result="box-shadow">
<div class="output box-shadow"></div>
<div class="download-btn">
<button class="btn" data-download="box-shadow-code">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon>
Get Code
</button>
<div class="btn-container">
<div class="download-btn">
<button class="btn" data-download="box-shadow-code">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon>
Get CSS Code
</button>
</div>
<div class="download-btn">
<button class="btn" data-download="box-shadow-tailwind">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon>
Get Tailwind
</button>
</div>
</div>
</div>
<!-- End of Box-Shadow Result -->

<!-- Transform Result -->
<div class="download-output" data-result="transform">
<div class="output transform-output"></div>
<div class="download-btn">
<button class="btn" data-download="transform-code">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon>
Get Code
</button>
<div class="btn-container">
<div class="download-btn">
<button class="btn" data-download="transform-code">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon>
Get CSS Code
</button>
</div>
<div class="download-btn">
<button class="btn" data-download="transform-tailwind">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon>
Get Tailwind
</button>
</div>
</div>
</div>
<!-- End of Transform Result -->
Expand Down Expand Up @@ -1408,16 +1518,26 @@ <h2>Results</h2>
Download Svg
</button>
</div>

<button class="btn" data-download="text-shadow-code">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon>
Get Code
</button>
<div class="btn-container">
<button class="btn" data-download="text-shadow-code">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon>
Get CSS Code
</button>
<button class="btn" data-download="text-shadow-tailwind">
<iconify-icon
inline
icon="bx:code-alt"
style="color: white; margin-right: 5px"
width="20"
></iconify-icon>
Get Tailwind
</button>
</div>
</div>
</div>
<!-- End Text Shadow Result -->
Expand Down
5 changes: 5 additions & 0 deletions src/lib/getElements.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,11 @@ export const getResultPage = (): HTMLElement =>
export const getCopyCodeButton = (attribute: string): HTMLElement =>
document.querySelector(`[data-download=${attribute}-code]`) as HTMLElement;

export const getTailwindButton = (attribute: string): HTMLElement =>
document.querySelector(
`[data-download=${attribute}-tailwind]`
) as HTMLElement;

export const getPNGButton = (attribute: string): HTMLElement =>
document.querySelector(`[data-download=${attribute}-PNG]`) as HTMLElement;

Expand Down
Loading

0 comments on commit 4ea2096

Please sign in to comment.