По ходу написания сайта столкнулся с подключением js, так как в данном языке я не силен, созревает ряд вопросов. Вот один из них.
Имею данный код, необходимо сделать чтобы при динамическом создании "ячеек" с содержимым в начале добавлялся дополнительный пустой див с уникальным id. от 1 до 20.
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);
}
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) => {
const movieEl = document.createElement("div");
movieEl.classList.add("movie");
movieEl.innerHTML = `
<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>
`;
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 = "";
}
});