From f14081cd0c7d916a83f830b033db76ef3d985082 Mon Sep 17 00:00:00 2001 From: BlckDragonXabhi Date: Mon, 8 Apr 2024 01:23:04 +0530 Subject: [PATCH] Added:liked_movies --- index.html | 2 +- liked_movies/liked_movies.css | 105 +++++++++++++++++++++++++++++++ liked_movies/liked_movies.html | 13 ++++ liked_movies/liked_movies.js | 58 +++++++++++++++++ movie_details/movie_details.html | 3 +- style.css | 4 +- 6 files changed, 180 insertions(+), 5 deletions(-) create mode 100644 liked_movies/liked_movies.css create mode 100644 liked_movies/liked_movies.html create mode 100644 liked_movies/liked_movies.js diff --git a/index.html b/index.html index a279233..afc29b0 100644 --- a/index.html +++ b/index.html @@ -61,7 +61,7 @@
  • - + Liked diff --git a/liked_movies/liked_movies.css b/liked_movies/liked_movies.css new file mode 100644 index 0000000..82abba6 --- /dev/null +++ b/liked_movies/liked_movies.css @@ -0,0 +1,105 @@ +body, html { + margin: 0; + padding: 0; + font-family: 'Arial', sans-serif; + background-color: rgb(0, 0, 0); +} + +.movies-container { + display: flex; + flex-wrap: wrap; + justify-content: center; + gap: 20px; + padding: 20px; +} + +.movie-card { + width: 200px; + border: 1px solid #ddd; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 2px 8px rgba(0,0,0,0.1); +} + +.movie-card img { + width: 100%; + height: auto; + display: block; +} + +.movie-details { + padding: 10px; +} + +.movie-title { + font-size: 16px; + font-weight: bold; + margin: 0; + color: #ddd; +} + +.movie-overview { + font-size: 14px; + margin-top: 5px; + color: #666; +} + +/* Responsive adjustments */ +@media (max-width: 600px) { + .movie-card { + width: 100%; + } +} + + +/* .shimmer { + height: 300px; + background: #e6e8e9; + background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%); + background-repeat: no-repeat; + background-size: 800px 104px; + display: inline-block; + position: relative; + overflow: hidden; +} + +@keyframes placeHolderShimmer{ + 0%{ + background-position: -468px 0 + } + 100%{ + background-position: 468px 0 + } +} + +.shimmer-effect { + animation-duration: 1s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-name: placeHolderShimmer; + animation-timing-function: linear; +} */ + +@keyframes shimmer { + 0% { + background-position: -800px 0; + } + 100% { + background-position: 800px 0; + } + } + + .shimmer-bg { + height: 300px; + background-color: #223860; /* Base color */ + background-image: linear-gradient( + to right, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 0.2) 50%, + rgba(255, 255, 255, 0) 100% + ); + background-repeat: no-repeat; + background-size: 800px 100%; /* Control the width of the shimmer effect */ + animation: shimmer 2s infinite linear; + } + \ No newline at end of file diff --git a/liked_movies/liked_movies.html b/liked_movies/liked_movies.html new file mode 100644 index 0000000..2da1cc7 --- /dev/null +++ b/liked_movies/liked_movies.html @@ -0,0 +1,13 @@ + + + + + + Liked Movies + + + +
    + + + diff --git a/liked_movies/liked_movies.js b/liked_movies/liked_movies.js new file mode 100644 index 0000000..8e12fbe --- /dev/null +++ b/liked_movies/liked_movies.js @@ -0,0 +1,58 @@ + + + + document.addEventListener('DOMContentLoaded', function() { + + const apiKey = '68e094699525b18a70bab2f86b1fa706'; + const moviesContainer = document.getElementById('moviesContainer'); + const likedMovies = JSON.parse(localStorage.getItem('likedMovies')) || []; + + likedMovies.forEach(movieId => { + const movieCard = document.createElement('div'); + movieCard.classList.add('movie-card'); + + // Initially set the shimmer effect + const shimmerDiv = document.createElement('div'); + shimmerDiv.classList.add('shimmer-bg'); + movieCard.appendChild(shimmerDiv); + + moviesContainer.appendChild(movieCard); + + fetch(`https://api.themoviedb.org/3/movie/${movieId}?api_key=${apiKey}`) + .then(response => response.json()) + .then(data => { + // Create the movie card once the data is fetched + const movieElement = createMovieCard(data); + // Replace the shimmer div with the actual content + moviesContainer.replaceChild(movieElement, movieCard); + }) + .catch(error => console.error('Error:', error)); + }); + }); + + function createMovieCard(movie) { + const movieCard = document.createElement('div'); + movieCard.classList.add('movie-card'); + + const img = new Image(); + img.src = `https://image.tmdb.org/t/p/w500${movie.poster_path}`; + img.alt = `${movie.title}`; + img.onload = function() { + movieCard.innerHTML = ` + ${this.alt} +
    +

    ${movie.title}

    +
    + `; + }; + img.onerror = function() { + movieCard.innerHTML = ` +
    +

    Image not available

    +
    + `; + }; + + return movieCard; + } + \ No newline at end of file diff --git a/movie_details/movie_details.html b/movie_details/movie_details.html index 77617ba..fc550ca 100644 --- a/movie_details/movie_details.html +++ b/movie_details/movie_details.html @@ -50,7 +50,6 @@
    • -
  • @@ -60,7 +59,7 @@
  • - + Liked diff --git a/style.css b/style.css index a126b75..9e5aadf 100644 --- a/style.css +++ b/style.css @@ -44,8 +44,8 @@ .item { /* margin-left: 50px; */ - width: 200px; - height: 300px; + width: 180px; + height: 250px; list-style-type: none; position: absolute ; top: 50%;