Skip to content

Commit

Permalink
Merge pull request #1147 from KumarKelashMeghwar/master
Browse files Browse the repository at this point in the history
Added CSS project
  • Loading branch information
fineanmol authored Oct 23, 2021
2 parents 7fc72dd + 1f3ae9b commit a8e0b94
Show file tree
Hide file tree
Showing 3 changed files with 155 additions and 0 deletions.
32 changes: 32 additions & 0 deletions css/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!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>Border Radius Generator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

<div class="container">
<div class="shape">
<input class="handle" id="top" type="range">
<input class="handle" id="left" type="range">
<input class="handle" id="bottom" type="range">
<input class="handle" id="right" type="range">
</div>

<h4>Border Radius Property</h4>

<div class="css">
<div class="border">border-top-left-radius: &nbsp;&nbsp;&nbsp; <span id="topLeft">0%</span></div>
<div class="border">border-top-right-radius: &nbsp;&nbsp;&nbsp;<span id="topRight">0%</span></div>
<div class="border">border-bottom-left-radius: &nbsp;&nbsp;&nbsp;<span id="bottomLeft">0%</span></div>
<div class="border">border-bottom-right-radius:&nbsp;&nbsp;<span id="bottomRight">0%</span></div>
</div>
</div>

<script src="script.js"></script>
</body>
</html>
33 changes: 33 additions & 0 deletions css/script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
const leftHandle = document.querySelector("#left");
const rightHandle = document.querySelector("#right");
const topHandle = document.querySelector("#top");
const bottomHandle = document.querySelector("#bottom");
const shape = document.querySelector(".shape");

// For css result

const topLeft = document.querySelector("#topLeft");
const topRight = document.querySelector("#topRight");
const bottomLeft = document.querySelector("#bottomLeft");
const bottomRight = document.querySelector("#bottomRight");

leftHandle.addEventListener("input", (e)=>{
shape.style.borderTopLeftRadius = leftHandle.value+'%';
topLeft.textContent = leftHandle.value + "%";
})

topHandle.addEventListener("input", (e)=>{
shape.style.borderTopRightRadius = topHandle.value+'%';
topRight.textContent = topHandle.value+'%';
})

rightHandle.addEventListener("input", (e)=>{
shape.style.borderBottomRightRadius = rightHandle.value+'%';
bottomRight.textContent = rightHandle.value+'%';
})

bottomHandle.addEventListener("input", (e)=>{
shape.style.borderBottomLeftRadius = bottomHandle.value+'%';
bottomLeft.textContent = bottomHandle.value+'%';
})

90 changes: 90 additions & 0 deletions css/style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
@import 'https://fonts.googleapis.com/css?family=Montserrat:300, 400, 700&display=swap';
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
margin: 0;
font-family: 'Montserrat', sans-serif;
}

.container{
width: 400px;
height: 550px;
background-color: #eee;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}

.shape{
width: 250px;
height: 250px;
background-color: deeppink;
position: relative;
}

.handle{
position: absolute;
width: 265px;
height: 5px;
background-color: black;
}

#top{
top: -7px;
left: -5.5px;
}

#left{
top: 120.5px;
transform: rotate(270deg);
left: -135px;
}

#right{
top: 120.5px;
transform: rotate(270deg);
left: 122px;
color: orange;
}

#bottom{
bottom: -5px;
left: -5.5px;
}

input[type=range]::-webkit-slider-runnable-track{
cursor: pointer;
background-color: pink;
border-radius: 5px;
height: 10px;
}

input[type=range]::-webkit-slider-thumb {
background-color: orange;
color: aliceblue;
cursor: hand;
margin-top: -3px;
}

/* Css Result */
h4{
text-shadow: 0.2px 0.2px 14px deeppink;
}
.css{
background-color: pink;
padding: 20px 40px;
width: 350px;
height: 130px;
}


0 comments on commit a8e0b94

Please sign in to comment.