app.js

const arrows = document.querySelectorAll(".arrow");
const movieLists = document.querySelectorAll(".drama-list");

arrows.forEach((arrow,i)=>{
    const itemNumber = movieLists[i].querySelectorAll("img").length
    let clickCounter = 0;
    arrow.addEventListener("click" , () => {
        const ratio = Math.floor(window.innerWidth/320);
        clickCounter++;
        if(itemNumber - (4+clickCounter) + (4 - ratio) >= 0) {
        movieLists[i].style.transform= `translateX(${
            movieLists[i].computedStyleMap().get("transform")[0].x.value
        -320}px)`;
        } else{
            movieLists[i].style.transform = "translateX(0)";
            clickCounter = 0;
        }
    });
});


const ball = document.querySelector(".toggle-ball");
const items = document.querySelectorAll(".container,.drama-list-title,.navbar-container,.sidebar,.left-menu-icon,.toggle");

ball.addEventListener("click",() => {
    items.forEach(item=>{
        item.classList.toggle("active")
    })
    ball.classList.toggle("active")
})