Add files via upload
This commit is contained in:
Sam
GitHub
parent
18f455d782
commit
9b52796e31
BIN
100_projects/81-emoji-range-slider/emojis/emoji-1.png
Normal file
BIN
100_projects/81-emoji-range-slider/emojis/emoji-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
100_projects/81-emoji-range-slider/emojis/emoji-2.png
Normal file
BIN
100_projects/81-emoji-range-slider/emojis/emoji-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
100_projects/81-emoji-range-slider/emojis/emoji-3.png
Normal file
BIN
100_projects/81-emoji-range-slider/emojis/emoji-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
100_projects/81-emoji-range-slider/emojis/emoji-4.png
Normal file
BIN
100_projects/81-emoji-range-slider/emojis/emoji-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
100_projects/81-emoji-range-slider/emojis/emoji-5.png
Normal file
BIN
100_projects/81-emoji-range-slider/emojis/emoji-5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
28
100_projects/81-emoji-range-slider/index.html
Normal file
28
100_projects/81-emoji-range-slider/index.html
Normal file
@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="wrapper">
|
||||
<div class="section">
|
||||
<ul class="emojis">
|
||||
<li class="slide-emoji"><img src="emojis/emoji-1.png" alt=""></li>
|
||||
<li><img src="emojis/emoji-2.png" alt=""></li>
|
||||
<li><img src="emojis/emoji-4.png" alt=""></li>
|
||||
<li><img src="emojis/emoji-4.png" alt=""></li>
|
||||
<li><img src="emojis/emoji-5.png" alt=""></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="slider">
|
||||
<div class="thumb"><span></span></div>
|
||||
<div class="progress-bar"></div>
|
||||
<input type="range" min="0" value="0" max="100">
|
||||
</div>
|
||||
</div>
|
||||
<script src="main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
34
100_projects/81-emoji-range-slider/main.js
Normal file
34
100_projects/81-emoji-range-slider/main.js
Normal file
@ -0,0 +1,34 @@
|
||||
const body = document.querySelector("body");
|
||||
const emoji = document.querySelector(".slide-emoji");
|
||||
const input = document.querySelector("input");
|
||||
const bar = document.querySelector(".progress-bar");
|
||||
const thumb = document.querySelector(".thumb");
|
||||
input.oninput = ()=>{
|
||||
let sliderValue = input.value;
|
||||
thumb.style.left = sliderValue + '%';
|
||||
bar.style.width = sliderValue + '%';
|
||||
if(sliderValue < 20){
|
||||
emoji.style.marginTop = "0px";
|
||||
body.classList.add("angry");
|
||||
body.classList.remove("confuse");
|
||||
body.classList.remove("like");
|
||||
}
|
||||
if(sliderValue >= 20){
|
||||
emoji.style.marginTop = "-140px";
|
||||
body.classList.add("confuse");
|
||||
body.classList.remove("angry");
|
||||
body.classList.remove("like");
|
||||
}
|
||||
if(sliderValue >= 40){
|
||||
emoji.style.marginTop = "-280px";
|
||||
}
|
||||
if(sliderValue >= 60){
|
||||
emoji.style.marginTop = "-420px";
|
||||
body.classList.add("like");
|
||||
body.classList.remove("confuse");
|
||||
body.classList.remove("angry");
|
||||
}
|
||||
if(sliderValue >= 80){
|
||||
emoji.style.marginTop = "-560px";
|
||||
}
|
||||
}
|
||||
134
100_projects/81-emoji-range-slider/style.css
Normal file
134
100_projects/81-emoji-range-slider/style.css
Normal file
@ -0,0 +1,134 @@
|
||||
*{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Poppins', sans-serif;
|
||||
}
|
||||
body{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(#FD8D58, #DC611E);
|
||||
padding: 20px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
body.angry{
|
||||
background: linear-gradient(#FD8D58, #DC611E);
|
||||
}
|
||||
body.confuse{
|
||||
background: linear-gradient(#FEA954, #DA7315);
|
||||
}
|
||||
body.like{
|
||||
background: linear-gradient(#FED151, #DE981F);
|
||||
}
|
||||
.wrapper{
|
||||
background: #f6f6f6;
|
||||
padding: 30px 40px 40px;
|
||||
border-radius: 10px;
|
||||
max-width: 350px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
|
||||
}
|
||||
.wrapper .section{
|
||||
height: 140px;
|
||||
width: 140px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.wrapper .section .emojis{
|
||||
height: 500%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.wrapper .section li{
|
||||
height: 20%;
|
||||
width: 100%;
|
||||
list-style: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.section li img{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.wrapper .slider{
|
||||
margin-top: 40px;
|
||||
height: 12px;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
background: #d9d9d9;
|
||||
border-radius: 50px;
|
||||
}
|
||||
.slider input{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
-webkit-appearance: none;
|
||||
position: absolute;
|
||||
background: none;
|
||||
outline: none;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.slider input::-webkit-slider-thumb{
|
||||
-webkit-appearance: none;
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
background: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.slider .progress-bar{
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background: linear-gradient(45deg,#FD8D58, #DC611E);
|
||||
border-radius: 50px;
|
||||
position: relative;
|
||||
}
|
||||
body.angry .progress-bar{
|
||||
background: linear-gradient(45deg,#FD8D58, #DC611E);
|
||||
}
|
||||
body.confuse .progress-bar{
|
||||
background: linear-gradient(45deg,#FEA954, #DA7315);
|
||||
}
|
||||
body.like .progress-bar{
|
||||
background: linear-gradient(45deg,#FED151, #DE981F);
|
||||
}
|
||||
.slider .thumb{
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
background: #DC611E;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1;
|
||||
padding: 2px;
|
||||
}
|
||||
body.angry .thumb{
|
||||
background: #DC611E;
|
||||
}
|
||||
body.confuse .thumb{
|
||||
background: #DA7315;
|
||||
}
|
||||
body.like .thumb{
|
||||
background: #DE981F;
|
||||
}
|
||||
.slider .thumb span{
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 2px solid #f6f6f6;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(#FD8D58, #DC611E);
|
||||
display: block;
|
||||
}
|
||||
body.angry .thumb span{
|
||||
background: linear-gradient(#FD8D58, #DC611E);
|
||||
}
|
||||
body.confuse .thumb span{
|
||||
background: linear-gradient(#FEA954, #DA7315);
|
||||
}
|
||||
body.like .thumb span{
|
||||
background: linear-gradient(#FED151, #DE981F);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user