-- HTML CODE --
<!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>PHOTO EDITOR</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- cool programming projects -->
<div class="main-container">
<div class="first-container">
<input type="text" id="search-box" placeholder="Enter Image URL">
<button id='search-btn' onclick="search_img()">Search</button>
</div>
<div class="second-container">
<div class="control-menu">
<div class="box1">
<label for="brightness-slider">brightness</label>
<input type="range" min="0" max="170" value='100' id="brightness-slider" oninput="updateImage()">
</div>
<div class="box2">
<label for="contrast-slider">contrast</label>
<input type="range" min="0" max="170" value='100' id="contrast-slider" oninput="updateImage()">
</div>
<div class="box3">
<label for="hue-slider">hue</label>
<input type="range" min="0" max="360" value='0' id="hue-slider" oninput="updateImage()">
</div>
<div class="box4">
<label for="blur-slider">blur</label>
<input type="range" min="0" max="10" id="blur-slider" value='0' oninput="updateImage()">
</div>
<div class="box5">
<label for="saturation-slider">saturation</label>
<input type="range" min="0" max="300" id="saturation-slider" value='100' oninput="updateImage()">
</div>
<div class="box6">
<label for="sepia-slider">sepia</label>
<input type="range" min="0" max="100" id="sepia-slider" value='0' oninput="updateImage()">
</div>
</div>
<div class="img-container">
<img src="img/bk3.jpg" alt="" id="img">
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
-- CSS CODE --
*{
padding:0;
margin:0;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.main-container{
width:100%;
height:100vh;
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: linear-gradient(rgba(0, 0, 0, 0.6),rgba(0, 0, 0, 0.6)),url(img/bk3.jpg) no-repeat center center/cover;
}
.first-container{
width:90%;
height:7%;
position:absolute;
display: flex;
align-items: center;
justify-content:space-between;
top:3%;
}
#search-box{
position: relative;
width:85%;
height:90%;
padding-left: 10px;
box-sizing: border-box;
font-size: 18px;
background: transparent;
border:none;
border-bottom: 1px solid rgb(255, 255, 255);
outline:none;
color:white;
}
#search-btn{
position: relative;
width:13%;
height:90%;
background-color: rgb(255, 255, 255);
border:1px solid black;
font-size: 20px;
}
.second-container{
position:absolute;
width:90%;
height:80%;
top:15%;
display: flex;
align-items: center;
justify-content: space-between;
padding:10px;
}
.control-menu{
width:20%;
height:100%;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.835);
display: flex;
align-items: center;
padding-top: 40px;
flex-direction: column;
box-sizing: border-box;
border-radius: 3%;
}
.control-menu div{
width:80%;
display: flex;
flex-direction: column;
color:white;
font-size: 18px;
text-align: center;
letter-spacing: 1px;
margin-bottom: 10px;
margin-top:10px;
}
.control-menu div input{
margin:10px;
}
.img-container{
width:75%;
height:100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
border-radius: 3%;
}
.img-container #img{
position: absolute;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.863);
max-width: 100%;
height:100%;
object-fit: contain;
border-radius: 5%;
}
-- JAVASCRIPT CODE --
var brightness = document.getElementById('brightness-slider');
var contrast = document.getElementById('contrast-slider');
var hue = document.getElementById('hue-slider');
var blur = document.getElementById('blur-slider');
var saturation = document.getElementById('saturation-slider');
var sepia = document.getElementById('sepia-slider');
var img = document.getElementById('img');
function search_img() {
let inputURL = document.getElementById('search-box');
if(!inputURL.value){
return;
}
img.src = inputURL.value;
setDefaultValue();
setTimeout(() => {
inputURL.value = "";
}, 10);
}
function updateImage() {
let val = `brightness(${brightness.value}%)` + ' ' + `contrast(${contrast.value}%)` + ' ' + `blur(${blur.value}px)` + ' ' + ' ' + `hue-rotate(${hue.value}deg)` + ' ' + `saturate(${saturation.value}%)` + ' ' + `sepia(${sepia.value}%)`;
img.style.filter = val;
}
function setDefaultValue() {
brightness.value = 100;
contrast.value = 100;
hue.value = 0;
blur.value = 0;
saturation.value = 100;
sepia.value = 0;
updateImage();
}
-- RESOURCES --
background Image download it and place in the 'img' folder
Post a Comment