Skip to content

Commit 4b9a4ea

Browse files
alin-trincaalin-trinca
committed
Javascript Box Shadow Generator
1 parent 9b05bf8 commit 4b9a4ea

File tree

8 files changed

+527
-0
lines changed

8 files changed

+527
-0
lines changed

‎016 Javascript Box Shadow Generator/LICENSE.txt

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2023 Alin (https://codepen.io/alin_trinca/pen/dyQeXMb)
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎016 Javascript Box Shadow Generator/README.md

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# 016 Javascript Box Shadow Generator
2+
3+
A Pen created on CodePen.io. Original URL: [https://codepen.io/alin_trinca/pen/dyQeXMb](https://codepen.io/alin_trinca/pen/dyQeXMb).
4+

‎016 Javascript Box Shadow Generator/dist/index.html

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="en" >
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>CodePen - 016 Javascript Box Shadow Generator</title>
6+
<link rel="stylesheet" href="./style.css">
7+
8+
</head>
9+
<body>
10+
<!-- partial:index.partial.html -->
11+
<div class="card">
12+
<div class="preview">
13+
<div class="preview__item" id="preview"></div>
14+
</div>
15+
16+
<div class="settings">
17+
<div class="settings__range">
18+
<label for="x-shadow">Horizontal Shadow:</label>
19+
<input type="range" id="x-shadow" min="-100" max="100" value="5">
20+
</div>
21+
<div class="settings__range">
22+
<label for="y-shadow">Vertical Shadow:</label>
23+
<input type="range" id="y-shadow" min="-100" max="100" value="15">
24+
</div>
25+
<div class="settings__range">
26+
<label for="blur-r">Blur Radius:</label>
27+
<input type="range" id="blur-r" min="0" max="100" value="30">
28+
</div>
29+
<div class="settings__range">
30+
<label for="spread-r">Spread Radius:</label>
31+
<input type="range" id="spread-r" min="-50" max="50" value="5">
32+
</div>
33+
<div class="settings__range">
34+
<label for="border-r">Border Radius:</label>
35+
<input type="range" id="border-r" min="0" max="100" step="1" value="30">
36+
</div>
37+
<div class="settings__range">
38+
<label for="shadow-opacity">Shadow Opacity:</label>
39+
<input type="range" id="shadow-opacity" min="0" max="1" step="0.1" value="0.5">
40+
</div>
41+
42+
<div class="settings__input">
43+
<label for="inset-shadow">Inset Shadow:</label>
44+
<input type="checkbox" id="inset-shadow">
45+
</div>
46+
47+
<div class="settings__color" id="color-wrapper">
48+
<label for="shadow-color">Shadow Color:</label>
49+
<input type="color" id="shadow-color">
50+
</div>
51+
52+
</div>
53+
54+
<div class="code">
55+
<textarea id="styles" rows="2"></textarea>
56+
<button id="copy-styles" onclick="copyStyles()">Copy</button>
57+
</div>
58+
59+
</div>
60+
<!-- partial -->
61+
<script src="./script.js"></script>
62+
63+
</body>
64+
</html>

‎016 Javascript Box Shadow Generator/dist/script.js

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
const preview = document.getElementById("preview");
2+
const styles = document.getElementById("styles");
3+
const ranges = document.querySelectorAll(".settings input");
4+
const copyButton = document.getElementById("copy-styles");
5+
6+
// Add event listener to each range input
7+
ranges.forEach((slider) => {
8+
slider.addEventListener("input", generateStyles);
9+
});
10+
11+
// Function to generate and update styles
12+
function generateStyles() {
13+
const xShadow = getValue("x-shadow");
14+
const yShadow = getValue("y-shadow");
15+
const blurRadius = getValue("blur-r");
16+
const spreadRadius = getValue("spread-r");
17+
const shadowColor = getValue("shadow-color");
18+
const shadowOpacity = getValue("shadow-opacity");
19+
const shadowInset = getValue("inset-shadow") === "true";
20+
const borderRadius = getValue("border-r");
21+
22+
// Create the box shadow CSS property value
23+
const boxShadow = `${
24+
shadowInset ? "inset " : ""
25+
}${xShadow}px ${yShadow}px ${blurRadius}px ${spreadRadius}px ${hexToRgba(
26+
shadowColor,
27+
shadowOpacity
28+
)}`;
29+
30+
// Update the preview element styles
31+
preview.style.boxShadow = boxShadow;
32+
preview.style.borderRadius = `${borderRadius}px`;
33+
34+
// Update textarea with generated styles
35+
styles.textContent = `box-shadow: ${boxShadow};\nborder-radius: ${borderRadius}px;`;
36+
}
37+
38+
// Function to get the value of an input element
39+
function getValue(id) {
40+
return document.getElementById(id).value;
41+
}
42+
43+
// Function to convert hex color and opacity to rgba format
44+
function hexToRgba(shadowColor, shadowOpacity) {
45+
const r = parseInt(shadowColor.substr(1, 2), 16);
46+
const g = parseInt(shadowColor.substr(3, 2), 16);
47+
const b = parseInt(shadowColor.substr(5, 2), 16);
48+
49+
return `rgba(${r}, ${g}, ${b}, ${shadowOpacity})`;
50+
}
51+
52+
// Function to copy the generated styles
53+
function copyStyles() {
54+
styles.select();
55+
document.execCommand("copy");
56+
copyButton.innerText = "Copied!";
57+
setTimeout(() => {
58+
copyButton.innerText = "Copy";
59+
}, 500);
60+
}
61+
62+
copyButton.addEventListener("click", copyStyles);
63+
64+
generateStyles();

‎016 Javascript Box Shadow Generator/dist/style.css

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,400;0,700;1,400&display=swap");
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: inherit;
6+
}
7+
8+
html {
9+
font-size: 62.5%;
10+
box-sizing: border-box;
11+
}
12+
13+
body {
14+
font-family: "Mulish", sans-serif;
15+
color: #b9e0f2;
16+
line-height: 1.5;
17+
min-height: 100vh;
18+
position: relative;
19+
display: flex;
20+
align-items: center;
21+
justify-content: center;
22+
flex-direction: column;
23+
background: #0f172a;
24+
}
25+
26+
.card {
27+
width: calc(100% - 30px);
28+
max-width: 640px;
29+
margin: 15px;
30+
padding: 20px;
31+
border: 1px solid #222f43;
32+
border-radius: 20px;
33+
background-color: #fff;
34+
color: #0f172a;
35+
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.05);
36+
}
37+
.card .preview {
38+
padding: 20px 0 50px;
39+
}
40+
.card .preview__item {
41+
background-color: #222f43;
42+
width: 150px;
43+
height: 150px;
44+
position: relative;
45+
margin: auto;
46+
border-radius: 30px;
47+
box-shadow: 5px 15px 30px 5px rgba(0, 0, 0, 0.5);
48+
}
49+
.card .settings {
50+
display: grid;
51+
grid-template-columns: 6fr 6fr;
52+
gap: 15px 25px;
53+
}
54+
.card .settings__range {
55+
display: flex;
56+
flex-direction: column;
57+
justify-content: space-between;
58+
}
59+
.card .settings__range input[type=range] {
60+
width: 100%;
61+
cursor: pointer;
62+
}
63+
.card .settings__input {
64+
display: flex;
65+
align-items: center;
66+
gap: 5px;
67+
}
68+
.card .settings__input input[type=checkbox] {
69+
cursor: pointer;
70+
}
71+
.card .settings__color {
72+
display: flex;
73+
flex-direction: row;
74+
justify-content: flex-start;
75+
align-items: center;
76+
gap: 5px;
77+
}
78+
.card .settings__color input[type=color] {
79+
width: 25px;
80+
height: 25px;
81+
border: 1px solid #ccc;
82+
cursor: pointer;
83+
}
84+
.card .settings label {
85+
font-size: 1.4rem;
86+
font-weight: 700;
87+
}
88+
.card .code {
89+
display: grid;
90+
grid-template-columns: 6fr 2fr;
91+
gap: 10px;
92+
margin-top: 20px;
93+
}
94+
.card .code button {
95+
background-color: #0ea5ea;
96+
border-radius: 6px;
97+
cursor: pointer;
98+
border: none;
99+
font-size: 1.6rem;
100+
font-weight: bold;
101+
color: #fff;
102+
}
103+
.card .code textarea {
104+
resize: none;
105+
padding: 5px;
106+
border: 1px solid #0ea5ea;
107+
border-radius: 6px;
108+
}
109+
110+
@media (max-width: 575px) {
111+
.card .settings,
112+
.card .code {
113+
grid-template-columns: unset;
114+
}
115+
.card .code textarea {
116+
height: 60px;
117+
}
118+
.card .code button {
119+
padding: 8px;
120+
}
121+
}

‎016 Javascript Box Shadow Generator/src/index.html

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<div class="card">
2+
<div class="preview">
3+
<div class="preview__item" id="preview"></div>
4+
</div>
5+
6+
<div class="settings">
7+
<div class="settings__range">
8+
<label for="x-shadow">Horizontal Shadow:</label>
9+
<input type="range" id="x-shadow" min="-100" max="100" value="5">
10+
</div>
11+
<div class="settings__range">
12+
<label for="y-shadow">Vertical Shadow:</label>
13+
<input type="range" id="y-shadow" min="-100" max="100" value="15">
14+
</div>
15+
<div class="settings__range">
16+
<label for="blur-r">Blur Radius:</label>
17+
<input type="range" id="blur-r" min="0" max="100" value="30">
18+
</div>
19+
<div class="settings__range">
20+
<label for="spread-r">Spread Radius:</label>
21+
<input type="range" id="spread-r" min="-50" max="50" value="5">
22+
</div>
23+
<div class="settings__range">
24+
<label for="border-r">Border Radius:</label>
25+
<input type="range" id="border-r" min="0" max="100" step="1" value="30">
26+
</div>
27+
<div class="settings__range">
28+
<label for="shadow-opacity">Shadow Opacity:</label>
29+
<input type="range" id="shadow-opacity" min="0" max="1" step="0.1" value="0.5">
30+
</div>
31+
32+
<div class="settings__input">
33+
<label for="inset-shadow">Inset Shadow:</label>
34+
<input type="checkbox" id="inset-shadow">
35+
</div>
36+
37+
<div class="settings__color" id="color-wrapper">
38+
<label for="shadow-color">Shadow Color:</label>
39+
<input type="color" id="shadow-color">
40+
</div>
41+
42+
</div>
43+
44+
<div class="code">
45+
<textarea id="styles" rows="2"></textarea>
46+
<button id="copy-styles" onclick="copyStyles()">Copy</button>
47+
</div>
48+
49+
</div>

‎016 Javascript Box Shadow Generator/src/script.js

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
const preview = document.getElementById("preview");
2+
const styles = document.getElementById("styles");
3+
const ranges = document.querySelectorAll(".settings input");
4+
const copyButton = document.getElementById("copy-styles");
5+
6+
// Add event listener to each range input
7+
ranges.forEach((slider) => {
8+
slider.addEventListener("input", generateStyles);
9+
});
10+
11+
// Function to generate and update styles
12+
function generateStyles() {
13+
const xShadow = getValue("x-shadow");
14+
const yShadow = getValue("y-shadow");
15+
const blurRadius = getValue("blur-r");
16+
const spreadRadius = getValue("spread-r");
17+
const shadowColor = getValue("shadow-color");
18+
const shadowOpacity = getValue("shadow-opacity");
19+
const shadowInset = getValue("inset-shadow") === "true";
20+
const borderRadius = getValue("border-r");
21+
22+
// Create the box shadow CSS property value
23+
const boxShadow = `${
24+
shadowInset ? "inset " : ""
25+
}${xShadow}px ${yShadow}px ${blurRadius}px ${spreadRadius}px ${hexToRgba(
26+
shadowColor,
27+
shadowOpacity
28+
)}`;
29+
30+
// Update the preview element styles
31+
preview.style.boxShadow = boxShadow;
32+
preview.style.borderRadius = `${borderRadius}px`;
33+
34+
// Update textarea with generated styles
35+
styles.textContent = `box-shadow: ${boxShadow};\nborder-radius: ${borderRadius}px;`;
36+
}
37+
38+
// Function to get the value of an input element
39+
function getValue(id) {
40+
return document.getElementById(id).value;
41+
}
42+
43+
// Function to convert hex color and opacity to rgba format
44+
function hexToRgba(shadowColor, shadowOpacity) {
45+
const r = parseInt(shadowColor.substr(1, 2), 16);
46+
const g = parseInt(shadowColor.substr(3, 2), 16);
47+
const b = parseInt(shadowColor.substr(5, 2), 16);
48+
49+
return `rgba(${r}, ${g}, ${b}, ${shadowOpacity})`;
50+
}
51+
52+
// Function to copy the generated styles
53+
function copyStyles() {
54+
styles.select();
55+
document.execCommand("copy");
56+
copyButton.innerText = "Copied!";
57+
setTimeout(() => {
58+
copyButton.innerText = "Copy";
59+
}, 500);
60+
}
61+
62+
copyButton.addEventListener("click", copyStyles);
63+
64+
generateStyles();

0 commit comments

Comments
 (0)