#javascript #html #css
Вопрос:
Я использовал JavaScript для сбора данных из TMDB, чтобы создать свой собственный веб-сайт фильмов. Но перед этим я создал код JavaScript, чтобы щелкнуть стрелку, чтобы переключаться между img моего фильма (элемент списка фильмов). Проблема в том, что после того, как я использовал JavaScript для сбора данных из TMDB, стрелка больше не реагирует. Затем, после того как я собрал данные из TMDB, я не смог найти способ освободить место до и после наведения img между двумя фильмами img (элемент). Вот мой код:
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.descamp;'
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="${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:defau<
}
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="style.css">
<link href="https://fonts.googleapis.com/css2?family=Ephesisamp;family=Roboto:ital,wght@0,100;0,300;1,300;1,400;1,700amp;family=Sen:wght@400;700;800amp;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>