// javascript
let root = document.documentElement;
let num = 0;

const btn_next = document.getElementById("next");
btn_next.style.backgroundColor = "green";

const btn_previous = document.getElementById("previous");
btn_previous.style.backgroundColor = "green";


btn_next.addEventListener("click", ()=>{
    console.log(`Clicked btn_next`);
    
    if(num > -880) {   
        num-=220;
        console.log(num);    
        root.style.setProperty(`--num`, num + "px");
    }
       
     if(num < 0) {
       btn_previous.style.opacity = '1';
    } else {
       btn_previous.style.opacity = '.3'; 
    }
    
    if(num === -880) {
        btn_next.style.opacity = ".3";
    } else {
        btn_next.style.opacity = "1";
    }
    
})

btn_previous.addEventListener("click", ()=>{
    console.log(`Clicked btn_previous`);   
    
    if(num < 0) {
        num+=220;
        console.log(num);
        root.style.setProperty(`--num`, num + "px");
    }
    
    if(num < 0) {
       btn_previous.style.opacity = '1';
    } else {
       btn_previous.style.opacity = '.3'; 
    }
    
    if(num === -880) {
        btn_next.style.opacity = ".3";
    } else {
        btn_next.style.opacity = "1";
    }
    
})