CSS for movie list

0zzy0sbourne · Aug 28, 2022 · fda527b · fda527b
1 parent fab4626
commit fda527b
Showing 1 changed file with 58 additions and 2 deletions.
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -15,7 +15,20 @@
       <input type="submit" value="Search" />
     </form>
 
-    <div class="movies-list">MOVIES</div>
+    <div class="movies-list">
+      <div class="movie" v-for="movie in movies" :key="movie.imdbID" >
+        <router-link :to="'/movie/ + movie.imdbID'" class="movie-link"> 
+          <div class="product-image"> 
+            <img :src="movie.Poster" alt="Movie Poster" />
+            <div class="type"> {{movie.Type}} </div>
+          </div>
+          <div class="detail">
+            <p class="year">{{movie.Year}}</p>
+            <h3 class="title">{{movie.Title}}</h3>
+            </div>
+        </router-link>
+      </div>
+    </div> 
 
   </div>
 </template>
@@ -33,7 +46,9 @@ export default {
         fetch(`http://www.omdbapi.com/?apikey=${env.apikey}&s=${search.value}`)
         .then(response => response.json())
         .then(data => {
-          console.log(data);
+          movies.value = data.Search; 
+          search.value = "";  
+          console.log(movies.value)
         })
       }
     }
@@ -128,6 +143,47 @@ export default {
       }
     }
   }
+
+  .movies-list {
+    display: flex;
+    flex-wrap: wrap; 
+    margin: 0px 8px; 
+
+    .movie {
+      max-width: 50%;
+      flex: 1 1 50%; 
+      padding: 16px 8px; 
+
+      .movie-link {
+        display: flex; 
+        flex-direction: column;
+        height: 100%; 
+        
+        .product-image {
+          position: relative; 
+          display: block;
+          
+          img {
+            display: block; 
+            width: 100%;
+            height: 275px;
+            object-fit: cover; 
+          }
+
+          .type {
+            position: absolute;
+            padding: 8px 16px; 
+            background-color: #42B883;
+            color: #FFF;
+            bottom: 16px; 
+            left: 0px; 
+            text-transform: capitalize;
+          }
+        }
+
+      }
+    }
+  }
    
   }
 </style>