added a link to the movie image so you can click it and take you to t…

…he reviews page
martinvibes · Apr 5, 2024 · 344b1d5 · 344b1d5
1 parent ccef320
commit 344b1d5
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 5 deletions.
diff --git a/index.js b/index.js
@@ -55,11 +55,15 @@ const getMainMovie = function (url) {
           .map((known) => {
             return `
             <div class="card">
-            <img src="${
+            <a href="reviews.html?id=${known.id}&title=${
+              known.title
+            }" data-movie-id="${known.id}">
+            <img class='card-image' src="${
               person && known.poster_path
                 ? `https://image.tmdb.org/t/p/w500${known.poster_path}`
                 : "./img/far-away.jpg"
             }" alt="${known.title}" />
+            </a>
             <div class='vote-container'>
               <p>Title: ${
                 known.title && known.title.split(" ").length > 20
@@ -192,11 +196,14 @@ const getMovieBy = function (url) {
         <div class="row">
             <div class="column">
               <div class="card">
-              <img src="${
+              <a href="reviews.html?id=${movie.id}&title=${
+          movie.title
+        }" data-movie-id="${movie.id}">
+              <img class='card-image' src="${
                 movie && movie.poster_path
                   ? `https://image.tmdb.org/t/p/w500${movie.poster_path}`
                   : "./img/far-away.jpg"
-              }" alt="poster of a movie" />
+              }" alt="poster of a movie" /></a>
                <div class='vote-container'>
                 <h3>Title: ${
                   movie.title && movie.title.split(" ").length > 20

diff --git a/reviews.html b/reviews.html
@@ -8,7 +8,7 @@
     <link rel="icon" href="./img/favicon.ico" type="image/ico" />
     <script defer src="reviews.js"></script>
   </head>
-  <body>
+  <body style="padding: 20px; margin-left: -10px;">
     <div class="top-nav review-top">
       <button id="backButton" class="btn--inline">
         <svg class="search__icon">

diff --git a/style.css b/style.css
@@ -276,7 +276,7 @@ body {
   filter: hue-rotate(16deg);
 }
 
-.card img {
+.card-image {
   width: 250px;
   border-radius: 10px;
 }