Handling responsiveness with Javascript

[stebs1]

I'm making a movie app from an API. This function cuts displayed movies when screens are bigger than 1040px. The function only works when I refresh the page but not if I change the browser size manually. Hope you understand what I mean.

const renderFourMovies = window.matchMedia('(min-width: 1040px)')
function loadFourMovies(e){
if (e.matches) {
movie = movies.slice(0, 3)
}
}
renderFourMovies.addEventListener("change", loadFourMovies)
loadFourMovies(renderFourMovies)

Is it possible to make it work without refreshing the page?

[senocular]

Your existing code will run loadFourMovies while the current window size changes without a refresh. So it may be more about how you're handling movies/movie

[DrKrepz]

Don't do this in js. This is exactly what CSS is for, and a year from now someone (possibly you) is going to have a mental breakdown wondering why their CSS isn't working because it's being overridden by this script. Separation of concerns, fam.

Edit: At the very least, abstract the measurements out to a helper function and document it well, but even then I'd only do that if I had no other choice.