Hello everyone, today we are going to create Box Shadow Generator with JS and HTML. We are using almost the same concepts that we used to create Blob Generator. So, let's get started with HTML part.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Box Shadow Generator </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="head">
<h1>Box Shadow Generator</h1>
</div>
<div class="container">
<div class="wrapper">
<div id="box"></div>
<div class="sliders">
<input type="range" id="sldr1" value="0" min="-5" max="5">
<input type="range" id="sldr2" value="0" min="-5" max="5">
<input type="range" id="sldr3" value="10" min="0" max="10">
<input type="range" id="sldr4" value="0" min="0" max="10">
</div>
<div class="colors">
<label>
Shadow Color:
</label>
<input type="color" id="shadowcolor">
</div>
<div id="outputCode">
<label>
CSS-Code:
</label>
<input type="text" id="css-code" readonly>
<button id="copy">Copy</button>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
• We created <div class="container"> ,<div class="wrapper"> to wrap whole content in that and <div class="box"> this for the box (for visualizing box shadow).
• <div class="sliders"> with 4 sliders.
Format of box-shadow: {offsetX}px {offsetY}px {blurRadius}px {spreadRadius}px color;
So, these 4 sliders are for getting input from user and color picker for shadow color.
• Then there is a read only text area to display the value of box-shadow: and a button to copy that css-code .
That's it for HTML.
CSS
Now it's time to make our project look cool. So let's see the CSS part.
*{
left: 0;
top: 0;
}
body {
display: grid;
background-color: #333;
place-items: center;
}
h1{
color: #ffffff;
z-index: 1;
}
.container {
display: grid;
place-items: center;
background: #ffffff;
width: 98vw;
height: 80vh;
left: 0;
margin-top: 0;
padding-top: 0;
}
.wrapper {
display: grid;
place-items: center;
background: #f9f9f9;
width: 50vw;
height: 75vh;
}
#box {
background: #ffffff;
width: 180px;
height: 180px;
box-shadow: 5px 10px 10px 2px #333;
margin-bottom: 3%;
}
#outputCode{
display: flex;
flex-direction: row;
}
#css-code {
width: 65%;
}
input[type=text] {
border-radius: 5px;
}
#copy {
color: #ffffff;
font-weight: bolder;
border-radius: 10px;
margin: 5px;
background: rgb(242, 79, 241);
background: linear-gradient(90deg, rgba(242, 79, 241, 1) 30%, rgba(0, 237, 255, 1) 72%);
}
Important Note:-
I just do the simple CSS and this is not responsive . You can do that part on your own.
JavaScript
let outputCode = document.getElementById("css-code");
let sliders = document.querySelectorAll("input[type='range']");
sliders.forEach(function (slider) {
slider.addEventListener("input", createBox);
});
let color = document.querySelectorAll("input[type='color']"); {
color.forEach(function (colors) {
colors.addEventListener("change", createBox);
});
}
function createBox() {
let X = sliders[0].value;
let Y = sliders[1].value;
let blurRadius = sliders[2].value;
let spreadRadius = sliders[3].value;
let shadowcolor = color[0].value;
let boxShadow = `${X}px ${Y}px ${blurRadius}px ${spreadRadius}px`;
document.getElementById("box").style.cssText = `box-shadow: ${boxShadow} ${shadowcolor}`;
outputCode.value = `box-shadow: ${boxShadow};`
}
let output = document.getElementById("css-code");
let btnCopy = document.getElementById("copy");
btnCopy.onclick = function () {
output.select();
document.execCommand("Copy");
alert("Code Copied");
}
createBox();
This code is for copying the value of box-shadow
btnCopy.onclick = function () {
output.select();
document.execCommand("Copy");
alert("Code Copied");
}
If you love it then make sure to like this post and save it for future
You can check my demo work here
Top comments (0)