<div id="main">
  
  <div class="image-container">
    <img src="https://cdn.pixabay.com/photo/2018/11/07/05/24/grand-prismatic-spring-3799785_1280.jpg" class="img" id="my-img">
  </div>
  
  <div class="controls">
    <h4 class="text"> Controls </h4>
    
    <label class="label"> Opacity</label> <br>
      <input type="range" class="control" id="opacity">
      
    <label class="label"> Blur</label> <br>
    <input type="range" class="control" id="blur" min="0" max="5">
         
 <label class="label"> Contrast        </label> <br>
    <input type="range" class="control" id="contrast">
 
 <label class="label"> Grayscale</label> <br>
    <input type="range" class="control" id="gray-scale">
   
 <label class="label"> Saturation</label> <br>
    <input type="range" class="control" id="saturation">
   
 <label class="label"> Brightness</label> <br>
    <input type="range" class="control" id="brightness"> 
    
 <label class="label"> Sepia</label> <br>
    <input type="range" class="control" id="sepia"> 
    
 <label class="label">Invert</label> <br>
    <input type="range" class="control" id="invert"> 
    
 <label class="label"> Hue Rotate</label> <br>
    <input type="range" min="0" max="360" class="control" id= "hue-rotate"> 
    
  </div>
  
</div>

#main{
  display: flex;
  height: 650px;
  width: 850px;
  background-color: #42FAEF;
  justify-content:center;
  padding: 10px;
}

 .image-container{
  height: 650px;
  width:550px;
  background-color: #F0F2FE;
  padding: 5px;
  
}


img.img{
  width:545px;
  height:645px;
}

.controls{
  width: 150px;
  height: 630px;
 
}

  h4.text {
  color: white;
  font-family: gill sans, sans-serif;
  padding: 5px;
  text-align: center;  
}


input.control{
  margin: 10px;

  
}

label.label{
  color: #516AF2;
  font-family: ui-monospace;
  padding: 10px;
}

let myImage = document.getElementById('my-img');

let opacity = document.getElementById('opacity');

let blur = document.getElementById('blur');

let brightness = document.getElementById('brightness');


let contrast = document.getElementById('contrast')

let grayScale = document.getElementById('gray-scale');

let saturation = document.getElementById('saturation');

let sepia = document.getElementById('sepia');

let invert = document.getElementById('invert');

let hueRotate = document.getElementById('hue-rotate');




// Change Events
opacity.addEventListener('change', opacityChange);

blur.addEventListener('change', blurEffect);

contrast.addEventListener('change', changeContrast);

grayScale.addEventListener('change', changeGray);

saturation.addEventListener('change', saturate);

brightness.addEventListener('change', bright);

sepia.addEventListener('change', changeSepia);

invert.addEventListener('change', invertImage);

hueRotate.addEventListener('change', rotateHue);










//functions

function opacityChange(e){

  myImage.style.filter= 'opacity(' + opacity.value + '%)';
}

function blurEffect(){
   myImage.style.filter = "blur(" + contrast.value + "px )";
  
}

function changeContrast(e){
  e.preventDefault();
  
  myImage.style.filter = "contrast(" + contrast.value + "% )";
  
    
}

function changeGray(e){
  e.preventDefault();
   myImage.style.filter = "grayscale(" + grayScale.value + "% )";
}

function saturate(e){
  e.preventDefault();
  myImage.style.filter = "saturate(" + saturation.value + "% )";  

}

function bright(e){
  e.preventDefault();
  myImage.style.filter = "brightness(" + brightness.value + "% )";
  
}

function changeSepia(e){
  e.preventDefault();
  myImage.style.filter = "sepia(" + sepia.value + "% )";
  
}

function invertImage(e){
  
  e.preventDefault();
  
  myImage.style.filter = "invert(" + invert.value + "% )";
}

function rotateHue(e){ 
  
  e.preventDefault();
  
  myImage.style.filter = "hue-rotate(" + hueRotate.value + "deg )";
  
}