<div id="wrapper">
<div class="img-container">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/32/rose-729509_1280.jpg" class="img" id="my-image">
</div>
<div class="controls">
<h3 class="text"> Photo Editor</h3>
<label class="label"> Opacity </label> <br>
<input type="range" class="control" value="100" id="opacity"> <span id="op-value"> </span><br>
<label class="label"> Contrast </label> <br>
<input type="range" class="control" id="contrast" value="100" min="0" max="500"> <span id="contrast-value"> </span><br>
<label class="label"> Brightness </label> <br>
<input type="range" class="control" id="brightness" value="100" min="0" max="300"> <span id="b-value"> </span><br>
<label class="label"> GrayScale</label> <br>
<input type="range" class="control" id="gray-scale" value="0"> <span id="g-value"> </span><br>
<label class="label"> Saturation </label> <br>
<input type="range" class="control" id="saturation" value="100" min="0" max="300"> <span id="sat-value"> </span><br>
<label class="label"> Blur </label> <br>
<input type="range" class="control" id="blur" min="0" max="10" value="0"> <span id="blur-value"> </span><br>
<label class="label"> Sepia </label> <br>
<input type="range" class="control" id="sepia" value="0"> <span id="sepia-value"> </span><br>
<button class="btn" id="reset"> Original Image</button>
</div>
</div>
#wrapper{
display: flex;
height: 770px;
width: 750px;
background-color: #8AD1FA;
justify-content: space-around;
}
.img-container{
width: 550px;
height: 700px;
background-color:#D6EEFB;
margin: 5px;
}
.controls{
width: 220px;
height: 700px;
background-color: #B8E4FC;
margin: 5px;
}
img.img{
height: 500px;
width: 540px;
margin: 2px;
}
h3.text{
color: #2D62C4;
text-align: center;
font-family: system-ui;
font-size: 120%;
text-shadow: 2px 1px 1px;
}
label.label{
margin: 15px;
font-family: system-ui;
font-size: 100%;
color: #244A90;
}
input.control{
margin: 3px;
}
.btn{
width: 150px;
height: 35px;
padding: 3px;
margin: 10px;
font-family: system-ui;
background-color: #6AC4F1;
border-radius: 10px;
}
.btn:hover{
opacity: 0.7;
box-shadow: 5px 3px 2px #64C3F3;
font-size: 125%;
}
let myImage = document.getElementById('my-image');
let opacity = document.getElementById('opacity');
let opValue = document.getElementById('op-value');
let contrast = document.getElementById('contrast');
let contrastValue = document.getElementById('contrast-value');
let brightness = document.getElementById('brightness');
let brightnessValue = document.getElementById('b-value');
let grayScale = document.getElementById('gray-scale');
let grayValue = document.getElementById('g-value')
let saturation = document.getElementById('saturation');
let saturationValue = document.getElementById('sat-value');
let blur = document.getElementById('blur');
let blurValue = document.getElementById('blur-value');
let sepia = document.getElementById('sepia');
let sepiaValue = document.getElementById('sepia-value');
let reset = document.getElementById('reset');
//Event Listeners
opacity.addEventListener('change', changeOpacity)
contrast.addEventListener('change', changeContrast);
brightness.addEventListener('change', changeBrightness);
grayScale.addEventListener('change', changeGray);
saturation.addEventListener('change', changeSaturation);
blur.addEventListener('change', changeBlur);
sepia.addEventListener('change', changeSepia);
reset.addEventListener('click', resetImage);
//Functions
function changeOpacity(){
myImage.style.filter = 'opacity(' + opacity.value + '%)' + 'contrast(' + contrast.value + '%)' + 'brightness(' + brightness.value + '%)' + 'grayscale(' + grayScale.value + '%)' + 'saturate('+ saturation.value + '%)'+ 'blur('+ blur.value + 'px)'+ 'sepia('+ sepia.value + '%)';
opValue.textContent = opacity.value + ' %';
contrastValue.textContent = contrast.value + ' %';
brightnessValue.textContent = brightness.value + '%';
grayValue.textContent = grayScale.value + '%';
saturationValue.textContent = saturation.value + '%';
blurValue.textContent = blur.value + 'px';
sepiaValue.textContent = sepia.value + '%';
}
function changeContrast(){
contrastValue.textContent = contrast.value + ' %'
opValue.textContent = opacity.value + '%';
grayValue.textContent = grayScale.value + '%';
brightnessValue.textContent = brightness.value + '%';
saturationValue.textContent = saturation.value + '%';
blurValue.textContent = blur.value + 'px';
sepiaValue.textContent = sepia.value + '%';
myImage.style.filter= 'contrast('+ contrast.value +'%)' + 'opacity(' +opacity.value + '%)' + 'brightness('+ brightness.value + '%)' + 'grayscale('+ grayScale.value + '%)'+ 'saturate(' + saturation.value + '%)' + 'blur('+ blur.value + 'px)' + 'sepia('+ sepia.value + '%)';
}
function changeBrightness(){
brightnessValue.textContent = brightness.value + '%';
contrastValue.textContent = contrast.value + ' %'
opValue.textContent = opacity.value + '%';
grayValue.textContent = grayScale.value +
'%';
saturationValue.textContent = saturation.value + '%';
blurValue.textContent = blur.value + 'px';
sepiaValue.textContent = sepia.value + '%';
myImage.style.filter = 'brightness(' + brightness.value + '%) ' + 'contrast(' + contrast.value + '%)'+ 'opacity(' + opacity.value + '%)' + 'grayscale(' + grayScale.value + '%)' + 'saturate(' + saturation.value + '%)' + 'blur('+ blur.value + 'px)'+ 'sepia('+ sepia.value + '%)';
}
function changeGray(){
grayValue.textContent = grayScale.value + '%';
opValue.textContent = opacity.value + '%';
contrastValue.textContent = contrast.value + ' %'
brightnessValue.textContent = brightness.value + '%';
saturationValue.textContent = saturation.value + '%';
blurValue.textContent = blur.value + 'px';
sepiaValue.textContent = sepia.value + '%';
myImage.style.filter = 'grayscale('+ grayScale.value + '%)' + 'opacity(' + opacity.value + '%)' + 'contrast('+ contrast.value + '%)'+ 'brightness(' + brightness.value + '%)'+ 'saturate('+ saturation.value + '%)' + 'blur(' + blur.value + 'px)'+ 'sepia(' + sepia.value + '%)';
}
function changeSaturation(){
saturationValue.textContent = saturation.value + '%';
grayValue.textContent = grayScale.value + '%';
opValue.textContent = opacity.value + '%';
contrastValue.textContent = contrast.value + ' %'
brightnessValue.textContent = brightness.value + '%';
blurValue.textContent = blur.value + 'px';
sepiaValue.textContent = sepia.value + '%';
myImage.style.filter = 'saturate('+ saturation.value + '%)' + 'opacity('+ opacity.value + '%)' + 'contrast(' + contrast.value + '%)' + 'brightness(' + brightness.value + '%)' + 'grayscale(' + grayScale.value + '%)'+ 'blur(' + blur.value + 'px)' +'sepia('+ sepia.value + '%)';
}
function changeBlur(){
blurValue.textContent = blur.value + 'px';
saturationValue.textContent = saturation.value + '%';
grayValue.textContent = grayScale.value + '%';
opValue.textContent = opacity.value + '%';
contrastValue.textContent = contrast.value + ' %'
brightnessValue.textContent = brightness.value + '%';
sepiaValue.textContent = sepia.value + '%';
myImage.style.filter = 'blur(' + blur.value + 'px)' + 'opacity('+ opacity.value + '%)'+ 'contrast('+ contrast.value + '%)' + 'brightness('+ brightness.value + '%)' + 'saturate('+ saturation.value + '%)' + 'grayscale('+ grayScale.value + '%)'+ 'sepia(' + sepia.value + '%)';
}
function changeSepia(){
sepiaValue.textContent = sepia.value + '%';
blurValue.textContent = blur.value + 'px';
saturationValue.textContent = saturation.value + '%';
grayValue.textContent = grayScale.value + '%';
opValue.textContent = opacity.value + '%';
contrastValue.textContent = contrast.value + ' %'
brightnessValue.textContent = brightness.value + '%';
myImage.style.filter = 'sepia('+ sepia.value + '%)' + 'opacity('+ opacity.value + '%)' + 'contrast('+ contrast.value + '%)' + 'brightness('+ brightness.value + '%)' + 'grayscale('+ grayScale.value + '%)' + 'saturate('+ saturation.value + '%)' + 'blur(' + blur.value + 'px)';
}
//Reset Image
function resetImage(){
myImage.style.filter = 'none';
opacity.value = 100;
contrast.value = 100;
brightness.value = 100;
grayScale.value = 0;
saturation.value = 100;
blur.value = 0;
sepia.value = 0;
// Displaying the Original Values
opValue.textContent = opacity.value + '%';
sepiaValue.textContent = sepia.value + '%';
blurValue.textContent = blur.value + 'px';
saturationValue.textContent = saturation.value + '%';
grayValue.textContent = grayScale.value + '%';
contrastValue.textContent = contrast.value + ' %'
brightnessValue.textContent = brightness.value + '%';
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.