Skip to content

Commit

Permalink
Made shadow generator responsive (#91)
Browse files Browse the repository at this point in the history 
fixes  #54 
### **Add responsiveness to Shadow generator app and made it more
accessible.**
### Laptop view

![image](https://github.com/Git21221/JS-beginner-projects/assets/122476829/e0e5c75c-3b0b-40e7-b7ab-834676cf62af)
### **Tab view**

![image](https://github.com/Git21221/JS-beginner-projects/assets/122476829/7c5a1641-372c-4cea-92a3-9a533ba245c1)
### **Moblie view**

![image](https://github.com/Git21221/JS-beginner-projects/assets/122476829/8a3e3b32-4c20-4cf8-a771-1b1d8df9ac9c)
  • Loading branch information
@Git21221
Git21221 authored Oct 2, 2023
2 parents 01068ae + 65945d2 commit 6f8f589
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 43 deletions.
92 changes: 69 additions & 23 deletions css shadow generator/css/style.css
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,142 @@
@import url('https://fonts.googleapis.com/css2?family=Outfit&display=swap');
*{

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Outfit', sans-serif;
}
html , body{

html,
body {
height: 100%;
width: 100%;


}

.title {
padding-left: 2rem;
font-size: 3rem;
font-weight: 600;
}
.box{

.box {
background: rgb(0, 0, 0);
height: 200px;
width: 200px;
margin: 50px;
box-shadow: -2px -1px 26px 1px grey;
}
body{

body {

background: #000;
color: white;
min-height: 100vh;
position: relative;
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
#full-panel{

#full-panel {
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
justify-content: center;
width: fit-content;
}
#full-panel h1{

#full-panel h1 {
font-size: 50px;
color: #fff;
margin-bottom: 30px;
}

#main{
#main {
display: flex;
align-items: center;
justify-content: center;
column-gap: 20px;
width: 100%;

flex-wrap: wrap;

}
.parameter-lable{

.parameter-lable {
display: flex;
flex-direction: column;

}

.parameter-content {
width: 100%;
padding: 0 2rem;
}
.parameter{

.parameter {
/* padding: 15px; */
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
max-height: 0;

overflow: hidden;
transition: all ease 0.8s;
}
.block{

.parameter div {
margin: 0 1rem;
}

.block {
display: flex;
flex-direction: column;
width: 100%;
padding: 0 3rem;
}
.block code{

.block code {
max-height: 0;
overflow: hidden;
transition: all ease 0.8s;
}
.lable{

.lable {
padding: 5px 10px;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #fff;
margin-bottom: 10px;
}
.color-width{
width: 100%;
cursor:crosshair;

.color-width {
width: 20rem;
cursor: crosshair;
}

input {
width: 20rem;
}
.lable-container{

.lable-container {
border: 1px solid #fff;
padding: 10px;
margin-bottom: 10px;
}
.lable-container h2{

.lable-container h2 {
font-size: 16px;
}
.lable h2{

.lable h2 {
font-size: 22px;
}
.lable i:hover{

.lable i:hover {
cursor: pointer;
}
45 changes: 34 additions & 11 deletions css shadow generator/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,25 +9,48 @@
</head>
<body>
<div id="full-panel">
<h1>Box Shadow Generator</h1>

<div id="main">
<div class="title">Box Shadow Generator</div>
<div class="box"></div>
<div class="parameter-content">
<div class="parameter-lable">
<div class="lable-container">
<h2>Change Manually<i class="bi bi-plus-lg" style="margin-left: 10px; cursor: pointer;"></i></h2>
</div>
<div class="parameter">
Background Color: <input type="color" name="" id="bgColor" class="color-width">
Box Color: <input type="color" name="" id="boxColor" class="color-width">
Shadow Color: <input type="color" name="" id="shadowColor" value="#878787" class="color-width">
DistanceX: <input type="range" name="" id="distanceX" class="ranges" value="-2" min="-100" max="200">
DistanceY: <input type="range" name="" id="distanceY" class="ranges" value="-1" min="-100" max="200">
Blur: <input type="range" name="" id="blurr" class="ranges" value="26" min="0" max="200">
Spread: <input type="range" name="" id="spread" class="ranges" value="1" min="-100" max="200">
Box Height: <input type="range" name="" id="bxheight" class="ranges" value="200" min="0" max="500">
Box Width: <input type="range" name="" id="bxwidth" class="ranges" value="200" min="0" max="500">
border-radius: <input type="range" name="" id="bxrad" class="ranges" value="0" min="0" max="500">
<div>
Background Color:<br> <input type="color" name="" id="bgColor" class="color-width">
</div>
<div>
Box Color:<br> <input type="color" name="" id="boxColor" class="color-width">
</div>
<div>
Shadow Color:<br> <input type="color" name="" id="shadowColor" value="#878787" class="color-width">
</div>
<div>
DistanceX:<br> <input type="range" name="" id="distanceX" class="ranges" value="-2" min="-100" max="200">
</div>
<div>
DistanceY:<br> <input type="range" name="" id="distanceY" class="ranges" value="-1" min="-100" max="200">
</div>
<div>
Blur: <br><input type="range" name="" id="blurr" class="ranges" value="26" min="0" max="200">
</div>

<div>
Spread:<br> <input type="range" name="" id="spread" class="ranges" value="1" min="-100" max="200">
</div>
<div>
Box Height:<br> <input type="range" name="" id="bxheight" class="ranges" value="200" min="0" max="500">
</div>
<div>
Box Width:<br> <input type="range" name="" id="bxwidth" class="ranges" value="200" min="0" max="500">
</div>
<div>
border-radius: <br><input type="range" name="" id="bxrad" class="ranges" value="0" min="0" max="500">
</div>

</div>
</div>
</div>
Expand Down
18 changes: 9 additions & 9 deletions css shadow generator/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,23 +22,23 @@ let parameterLable = document.querySelector(".lable-container h2 i");
let codeLable = document.querySelector(".lable i");
let parameterBox = false;
let codeBox = false;
parameterLable.addEventListener('click',function(){
if(parameterBox===false){
parameterLable.addEventListener('click', function () {
if (parameterBox === false) {
document.querySelector(".parameter").style.maxHeight = 800 + "px";
parameterBox = true;
}else{
} else {
document.querySelector(".parameter").style.maxHeight = 0 + "px";
parameterBox= false;
parameterBox = false;
}

})
codeLable.addEventListener('click',function(){
if(codeBox===false){
codeLable.addEventListener('click', function () {
if (codeBox === false) {
document.querySelector("code").style.maxHeight = 800 + "px";
codeBox = true;
}else{
} else {
document.querySelector("code").style.maxHeight = 0 + "px";
codeBox= false;
codeBox = false;
}
})
bxrad.addEventListener('input', () => {
Expand Down

0 comments on commit 6f8f589

Please sign in to comment.