Added:liked_movies

dev1abhi · Apr 7, 2024 · f14081c · f14081c
1 parent 9a73496
commit f14081c
Show file tree

Hide file tree

Showing 6 changed files with 180 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -61,7 +61,7 @@
      </li>
 
      <li>
-       <a href="#">
+       <a href="liked_movies/liked_movies.html">
          <i class='bx bx-heart' ></i>
          <span class="links_name">Liked</span>
        </a>

diff --git a/liked_movies/liked_movies.css 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;
+  }
+
diff --git a/liked_movies/liked_movies.html b/liked_movies/liked_movies.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Liked Movies</title>
+    <link rel="stylesheet" href="liked_movies.css">
+</head>
+<body>
+    <div id="moviesContainer" class="movies-container"></div>
+    <script src="liked_movies.js"></script>
+</body>
+</html>
diff --git a/liked_movies/liked_movies.js 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 = `
+                <img src="${this.src}" alt="${this.alt}" style="width: 100%; height: auto; display: block;">
+                <div class="movie-details">
+                    <h3 class="movie-title">${movie.title}</h3>
+                </div>
+            `;
+        };
+        img.onerror = function() {
+            movieCard.innerHTML = `
+                <div class="movie-details" style="padding: 10px;">
+                    <h3 class="movie-title">Image not available</h3>
+                </div>
+            `;
+        };
+
+        return movieCard;
+    }
+
diff --git a/movie_details/movie_details.html b/movie_details/movie_details.html
@@ -50,7 +50,6 @@
       </li>
 
 
-
       <li>
        <a href="#">
          <i class='bx bx-user' ></i>
@@ -60,7 +59,7 @@
      </li>
 
      <li>
-       <a href="#">
+       <a href="../liked_movies/liked_movies.html">
          <i class='bx bx-heart' ></i>
          <span class="links_name">Liked</span>
        </a>

diff --git 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%;