// Function to display movies function displayMovies() const filteredMovies = filterMovies(); const container = document.getElementById("moviesContainer"); if (filteredMovies.length === 0) container.innerHTML = ` <div class="no-results"> <p>😔 No movies found matching your criteria</p> <p style="font-size: 0.9em; margin-top: 10px;">Try adjusting your filters or search term</p> </div> `; return; container.innerHTML = filteredMovies.map(movie => ` <div class="movie-card" onclick="showMovieDetails($movie.id)"> $movie.isNew ? '<div class="badge">NEW</div>' : '' <img class="movie-poster" src="$movie.poster" alt="$movie.title" onerror="this.src='https://via.placeholder.com/300x450/667eea/white?text=No+Image'"> <div class="movie-info"> <div class="movie-title">$movie.title</div> <div class="movie-year">$movie.year</div> <div class="movie-genre">$movie.genre.join(" • ")</div> <div class="movie-rating"> <span class="stars">$renderStars(movie.rating)</span> <span class="rating-value">$movie.rating/5</span> </div> </div> </div> `).join("");
.filter-btn padding: 10px 25px; border: none; background: #f0f0f0; border-radius: 25px; cursor: pointer; font-size: 1em; transition: all 0.3s ease; font-weight: 500; new malayalam movies list
.header h1 font-size: 3em; margin-bottom: 10px; animation: fadeInDown 0.8s ease; // Function to display movies function displayMovies() const
// Function to render stars based on rating function renderStars(rating) const fullStars = Math.floor(rating); const hasHalfStar = rating % 1 >= 0.5; let starsHTML = ""; for (let i = 0; i < fullStars; i++) starsHTML += "⭐"; if (hasHalfStar) starsHTML += "½"; return starsHTML; const container = document.getElementById("moviesContainer")