JavaScript – Why can’t I put a space between two movie items and an arrow so I can’t slide the item.

const arrow = document.querySelectorAll(".arrow");
const movieList = document.querySelectorAll(".movie-list");

arrow.forEach((arrow,i)=>{
    const itemNumber = movieList[i].querySelectorAll("img").length;
    let clickCounter=0;
arrow.addEventListener("click",()=>{
    const ratio = Math.floor(window.innerWidth/270);

    clickCounter++;
    if(itemNumber-(4+clickCounter +(4-ratio))>=0){
        movieList[i].style.transform=`translateX(${movieList[i].computedStyleMap().get("transform")[0].x.value-300
    }px)`;

    }else{
        movieList[i].style.transform="translateX(0)";
        clickCounter=0;
    }
   
});
console.log(Math.floor(window.innerWidth/270));
});



//Toggle
const ball = document.querySelector(".toggle-ball");
const items= document.querySelectorAll(".content-container,.navbar-container,.logo,.menu-list-item,.icon,.profile-text-container,.toggle,.container,.movie-list-item,.movie-list-title");

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




//TMDB

const API_KEY='api_key=c63b222797fcafec10a38c8fc986d2c5';
const BASE_URL='https://api.themoviedb.org/3';
const API_URL=BASE_URL+'/discover/movie?sort_by=popularity.desc&'
+API_KEY;
const IMG_URL=`https://image.tmdb.org/t/p/w500`;

const main=document.getElementById(`main`);
getMovies(API_URL)

function getMovies(url){
    fetch(url).then(res => res.json()).then(data => {
       console.log(data.results)
        showMovies(data.results);
    })
}



function showMovies(data){
main.innerHTML='';

    data.forEach(movie => {
        const {title,poster_path,vote_average,overview}=movie;
        const movieE1= document.createElement('div');
        movieE1.classList.add('movie');
        movieE1.innerHTML=`
        <img class="movie-list-item-img" src="https://stackoverflow.com/questions/69416741/${IMG_URL+poster_path}" alt="${title}">
                    <div class="movie-title">${title}
                        <span class="${getColor(vote_average)}">${vote_average}</span>
                    </div>
                    <div class="movie-icon">
                        <span class="movie-list-item-icon"><i class="fas fa-play"></i></span>
                        <span class="movie-list-item-icon"><i class="fas fa-plus"></i></span>
                        <span class="movie-list-item-icon"><i class="far fa-thumbs-up"></i></i></span>
                        <span class="movie-list-item-icon"><i class="far fa-thumbs-down"></i></i></span>
                        <span class="movie-list-item-icon"><i class="fas fa-chevron-down"></i></i></i></span>
                    </div> 
                    <div class="movie-list-desc">
                        <p >${overview}</p>
                    </div>
                        <div class="movie-list-type">
                            <p > Romantic . Action</p> 
                        </div>

             `
             main.appendChild(movieE1);
    });
}


function getColor(vote) {
    if(vote>=8){
        return 'green'
    }
    else if (vote >= 5){
        return `orange`
    }else{
        return `red`
    }
}
*{
    margin: 0;
}

body{
    font-family: 'Roboto', sans-serif;
    line-height: 1.2;
    -webkit-font-smoothing: antialiased;
    user-select: none;
    cursor:default;
}

main{
    display: flex;
    
}

.navbar{
    width: 100%;
    height: 65px;
    background-color: rgb(20,20,20);
    position: fixed;
}

.navbar-container{
    display:flex;
    align-items: center;
    background-color:rgb(20,20,20);
    padding: 0 50px;
    height: 100%;
    font-family: 'Roboto', sans-serif;
}

.logo-container{
    flex:1;
    align-items: center;
}

.logo{
    font-family: 'Ephesis', cursive;
    font-size: 30px;
    color: rgb(76, 240, 76);
    cursor: pointer;
}

.menu-container{
    flex:6;
}

.menu-list{
    display: flex;
    list-style: none;
    color:rgba(255, 255, 255, 0.863);
}

.menu-list-item{
    font-size: 15px;
    margin-right: 20;
    cursor: pointer;
    color:lightgreen;
}



.profile-container{
    flex:2;
    color: white;
    display: flex;
    align-items:center;
    justify-content: flex-end;
    margin-right: 10;
}

.profile-picture{
    width: 35px;
    height: 35px;
    border-radius: 10%;
    object-fit: cover;
    margin-right: 10;
}

.icon{
    margin-right: 30;
    align-items: center;
    justify-content: center;
    font-size: larger;
    cursor: pointer;
}

.profile-text-container{
    cursor: pointer;
}

.toggle{
    width: 40px;
    height: 20px;
    background-color: white;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
    margin-right: 30;
}

.toggle-icon{
    color: goldenrod;
}

.toggle-ball{
    width: 18px;
    height: 18px;
    background-color: #151515;
    position:absolute;
    right: 1px;
    border-radius: 50%;
    cursor: pointer;
    transition: 1s ease all;
}

.container{
    background-color: rgb(31, 29, 29);
    height:auto;
    width: auto;
}

.content-container{
 color:white;
background-color: rgb(31, 29, 29);
}

.featured-content{
    padding: 60px;
    height: 87vh;
    color: white;

    
}

.featured-title{
    margin-top: 130px;
    font-family: 'Ephesis', cursive;
    color: white;
    width: 50px;
    background-color: rgb(31, 29, 29);
}

.movie-title span{
    background-color: var(--primary-color);
    /* padding: 1.5rem 0.5rem; */
    border-radius: 3px;
    font-weight: bold;
    
}
.movie-title span.green{
    color: rgb(76, 240, 76);
}

.movie-title span.orage{
    color: orangered;
}

.movie-title span.green{
    color: red;
}

.featured-description{
    width: 600px;
    color: lightgrey;
    margin: 30px 0;
    background-color: red;
}

.featured-button{
    font-family: 'Roboto', sans-serif;
    background-color:white;
    color:black;
    padding: 10px 10px;
    width: 130px;
    border-radius: 5px;
    font-weight: bold;
    font-size: 20px;
    cursor: pointer;
    align-items: center;
    justify-content: space-around;
    display: flex;
    margin-right: 30;
}



.movie-list-container{
    margin-left: 50px;
    margin-top: -16vh;
    height:80vh;
    overflow:hidden;
    padding: 20px;
}

.movie-list-wrapper{
   position: relative;
   display: flex;
   /* overflow: hidden; */
}

.movie-list{
    position: relative;
    /* position: absolute; */
    padding-top: 50px;
    display: flex;
    align-items: center;
    height:600px;
    transform: translateX(0);
}

.movie-list-title{
    font-size: 23px;
}

.movie-list-item{
    position: absolute;
    margin-top: -200px;
    /* margin-right: 50px; */
    position: relative;
    border-radius: 10px;
}

.movie-list-item:hover .movie-list-item-img {
    margin-top: -140px;
    padding-left:58px;
    padding-right: 58px;
    transform: scale(1.5,1.5);
    opacity: 1;
    position: relative;
}

.movie-list-item:hover{
    background-color: black;
    padding: auto;
 
}

.movie-list-item:hover .green{
    margin-left: 300px;
}

.movie-list-item:hover .movie-list-item-icon{
    opacity: 1;
}

.movie-list-item:hover .movie-title{
    opacity: 1;
}

.movie-list-item:hover .movie-list-desc{
    opacity: 1;
}

.movie-list-item:hover .movie-list-type{
    opacity: 1;
}

.movie-icon{
    padding-left: 37px;
    margin-left: 20px;
    margin-top: 1px;
    cursor:pointer;
    align-items: center;
    justify-content: space-around;
    /* position: relative; */
    transform: scale(1.5,1.5);
}

.movie-title{
    padding-left: 15px;
    margin-top: 50px;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    /* overflow:hidden; */
}

.movie-list-item-icon{
    padding-left: 13px;
    border-radius: 50%;
    width: 50px;
    margin-right: -5px;
    opacity: 0;
    transition: all 0.5s ease-in-out;

}

.movie-list-item-img{
    transition: all 0.5s ease-in-out;
    width: 235px;
    height: 136px;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
}

.movie-list-desc{
    font-size: 10px;
    padding-left: 15px;
    margin-top: 25px;
    cursor:pointer;
    align-items: center;
    justify-content: space-around;
    position: relative;
    opacity: 0;
    transition: all 0.5s ease-in-out;
}

.movie-list-type{
    padding-left: 15px;
    margin-top: 7px;
    cursor:pointer;
    align-items: center;
    justify-content: space-around;
    position: relative;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    /* overflow: hidden; */
}

.arrow{
    font-size: 80px;
    position: absolute;
    top: 45px;
    right: 0;
    color: whitesmoke;
    opacity: .5;
    cursor: pointer;
}

.content-container.active{
    background-color: white;
}

.navbar-container.active{
background-color:whitesmoke;
color:black;
}


.toggle.active{
    background-color: black;
}

.toggle-ball.active{
    background-color: white;
    transform: translateX(-20px);
}

.logo.active{
    color: rgb(189, 26, 26);
}

.menu-list-item.active{
    color: rgb(235, 17, 50);
    font-weight: bold;
}

.icon.active{
    color: rgb(235, 17, 50);
}
.profile-text-container.active{
    color: rgb(235, 17, 50);
}

.movie-list-title.active{
    color:rgb(235, 17, 50);
}

.movie-list-item:hover.active{
    background-color: whitesmoke;
    color: rgb(235, 17, 50);
    border-color: tomato;
}

@media only screen and (max-width:940px){
    .menu-container{
        display: none;
    }
}
<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">
    <link rel="stylesheet" href="https://stackoverflow.com/questions/69416741/style.css">
    <link href="https://fonts.googleapis.com/css2?family=Ephesis&family=Roboto:ital,wght@0,100;0,300;1,300;1,400;1,700&family=Sen:wght@400;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
    <title>Movie Website</title>
</head>
<body>

    <div class="navbar">
        <div class="navbar-container">
        <div class="logo-container"><h1 class="logo">Matcha Lattee</h1></div>
        <div class="menu-container">
           <ul class="menu-list">
               <li class="menu-list-item">Trang Chủ</li>
               <li class="menu-list-item">Thể Loại</li>
               <li class="menu-list-item">Phim Đề Cử</li>
               <li class="menu-list-item">TV Shows</li>
               <li class="menu-list-item">Phim Bộ</li>
               <li class="menu-list-item">Phim Lẻ</li>             
               <li class="menu-list-item">Anime</li>
               <li class="menu-list-item">Tủ Phim</li>
           </ul>
        </div>
        <div class="profile-container">
            <div class="toggle">
                <i class="fas fa-moon toggle-icon"></i>
                <i class="fas fa-sun toggle-icon"></i>
                <div class="toggle-ball"></div>
            </div>
            <div class="icon">
                <span><i class="fas fa-search"></i></span>
            </div>
            <div class="icon">
                <span><i class="fas fa-bell"></i></span>
            </div>
            <img class="profile-picture" src="img/0.jpg" alt="">
        <div class="profile-text-container">
            <span class="dropdown-profile"></span>
            <i class="fas fa-caret-down"></i>         
        </div>
        </div>
        </div>
    </div>

    <div class="container">
        <div class="content-container">
          <div class="featured-content"
          style="background:linear-gradient(to bottom, rgba(0,0,0,0),#151515),url('img/0.jpg')">
            <div class="featured-title">Matcha</div>  
        <p class="featured-description">What is movie description?
            A movie, or film, is a type of visual communication which uses moving pictures and sound to tell stories or teach people something. Most people watch (view) movies as a type of entertainment or a way to have fun.What is movie description?
            A movie, or film, is a type of visual communication which uses moving pictures and sound to tell stories or teach people something. Most people watch (view) movies as a type of entertainment or a way to have fun.What is movie description?
            A movie, or film, is a type of visual communication which uses moving pictures and sound to tell stories or teach people something. Most people watch (view) movies as a type of entertainment or a way to have fun.</p>
         <button class="featured-button"><i class="fas fa-play"></i>Play</button>   
    </div>  
    
    <div class="movie-list-container">
        <h1 class="movie-list-title">Phim Mới Ra</h1>
        <div class="movie-list-wrapper">
            <div class="movie-list">
                <div class="movie-list-item">
                    <main id="main">
                    <img class="movie-list-item-img" src="img/2.jpg" alt="">
                    <div class="movie-title">SQUID GAME
                        <span class="green">6.8</span>
                    </div>
                    <div class="movie-icon">
                        <span class="movie-list-item-icon"><i class="fas fa-play"></i></span>
                        <span class="movie-list-item-icon"><i class="fas fa-plus"></i></span>
                        <span class="movie-list-item-icon"><i class="far fa-thumbs-up"></i></i></span>
                        <span class="movie-list-item-icon"><i class="far fa-thumbs-down"></i></i></span>
                        <span class="movie-list-item-icon"><i class="fas fa-chevron-down"></i></i></i></span>
                    </div> 
                    <div class="movie-list-desc">
                        <p > 13+</p>
                    </div>
                        <div class="movie-list-type">
                            <p > Romantic . Action</p> 
                        </div>  
                        </main>                                              
                </div>
                
                                                
</div>
<i class="fas fa-chevron-right arrow"></i>    
        </div>
    </div>
        </div>
    </div>
      <script src="TMDB.js"></script>      
   <script src="Toggle-And-Sliding-List.js"></script>
</body>
</html>

Write a Comment

Your email address will not be published. Required fields are marked *