I want to fetch data but I want it to show less data each time the screen gets smaller. How can I do that?
I tried this, but I have no idea whether it’s correct or not:
const catagory = async() => {
try {
let movie = document.querySelector(".catagory");
const mediaQuery = window.matchMedia('(min-width: 992px)')
var picture = document.getElementsByClassName('.movies');
function media(mediaQuery) {
if (mediaQuery.matches) {
movie.classList.add("movie:nth-child(odd) ")
}
}
movie.classList.add("movie");
let data = await fetch("http://localhost:3000/movies");
let res = await data.json();
let movies = res.map((elem) => {
return `
<div class="picture">
<div class="overlay"></div>
<img src=${elem.image} alt=${elem.alt}>
</div>
`;
});
document
.querySelector(".movies")
.insertAdjacentHTML("beforeend", movies.join(""));
} catch (error) {
console.log(error.message);
}
};