|
Сообщение от b3ng3r
|
|
все остальные div info скрывались.
|
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.movie__cover {
height: 70px;
width: 50px;
}
.info + .film, .info.hidden{
display: none;
}
.info.open + .film{
display: block;
}
.film__poster{
margin: 0 auto;
width: 200px;
}
</style>
</head>
<body>
<div class="movies"></div>
<script>
const API_KEY =
"1576af80-f100-440b-94bb-d19fb8e90583";
const API_URL_POPULAR =
"https://kinopoiskapiunofficial.tech/api/v2.2/films/top?type=TOP_100_POPULAR_FILMS&page=1";
const API_URL_SEARCH =
"https://kinopoiskapiunofficial.tech/api/v2.1/films/search-by-keyword?keyword=";
const API_FILM = "8498e5fa32d80e669ddc10908de7e3bd";
getMovies(API_URL_POPULAR);
async function getMovies(url) {
const resp = await fetch(url, {
headers: {
"Content-Type": "application/json",
"X-API-KEY": API_KEY,
},
});
const respData = await resp.json();
showMovies(respData);
document.addEventListener("click", event => {
let {target} = event;
if (target = target.closest(".info")) {
event.preventDefault();
let open = document.querySelector(".info.open");
target.classList.toggle("open");
document.querySelectorAll(".info").forEach( elem => {
if(target != elem) {
elem.classList.toggle("hidden", target != open)
}
})
}
})
}
function getClassByRate(vote) {
if (vote >= 7) {
return "green";
} else if (vote > 5) {
return "orange";
} else {
return "red";
}
}
function showMovies(data) {
const moviesEl = document.querySelector(".movies");
// Очистка фильмов
document.querySelector(".movies").innerHTML = "";
data.films.forEach((movie, i) => {
const movieEl = document.createElement("div");
movieEl.classList.add("movie");
movieEl.innerHTML = `
<div class="info">
<div class="movie__cover-inner">
<img
src="${movie.posterUrlPreview}"
class="movie__cover"
alt="${movie.nameRu}"
/>
<div class="movie__cover--darkened"></div>
</div>
<div class="movie__info">
<div class="movie__title">${movie.nameRu}</div>
<div class="movie__category">${movie.genres.map(
(genre) => ` ${genre.genre}`
)}</div>
${
movie.rating &&
`
<div class="movie__average movie__average--${getClassByRate(
movie.rating
)}">${movie.rating}</div>
`
}
</div>
</div>
<div class="film">
<div class="film__name">${movie.nameRu}</div>
<div class="film__poster"><img src="${movie.posterUrlPreview}" class="film__poster"></div>
<div class="film__movie"><iframe src="https://v1630850415.bazon.site/kp/${movie.filmId}" frameborder="0" scrolling="no" allowfullscreen="" referrerpolicy="origin" width="800" height="452" class="film__movie"></iframe></div>
<div class="film__description">${movie.description}</div>
</div>
`;
moviesEl.appendChild(movieEl);
});
}
/*const form = document.querySelector("form");
const search = document.querySelector(".header__search");
form.addEventListener("submit", (e) => {
e.preventDefault();
const apiSearchUrl = `${API_URL_SEARCH}${search.value}`;
if (search.value) {
getMovies(apiSearchUrl);
search.value = "";
}
});*/
</script>
</body>
</html>