show movie details on the favorite page

ALPHACamp · Nov 26, 2019 · b1ac508 · b1ac508
1 parent 21f07e0
commit b1ac508
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 0 deletions.
diff --git a/favorite.html b/favorite.html
@@ -39,6 +39,33 @@
     </div>
   </div>
 
+  <!-- Modal -->
+  <div class="modal fade" id="show-movie-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
+    <div class="modal-dialog modal-lg" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="show-movie-title">Modal title</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body" id="show-movie-body">
+          <div class="row">
+            <div class="col-sm-8" id="show-movie-image">
+            </div>
+            <div class="col-sm-4">
+              <p><em id="show-movie-date"></em></p>
+              <p id="show-movie-description"></p>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
     crossorigin="anonymous"></script>

diff --git a/favorite.js b/favorite.js
@@ -7,6 +7,12 @@
 
   displayDataList(data)
 
+  dataPanel.addEventListener('click', (event) => {
+    if (event.target.matches('.btn-show-movie')) {
+      showMovie(event.target.dataset.id)
+    }
+  })
+
   function displayDataList (data) {
     let htmlContent = ''
     data.forEach(function (item, index) {
@@ -27,4 +33,28 @@
     })
     dataPanel.innerHTML = htmlContent
   }
+
+  function showMovie (id) {
+    // get elements
+    const modalTitle = document.getElementById('show-movie-title')
+    const modalImage = document.getElementById('show-movie-image')
+    const modalDate = document.getElementById('show-movie-date')
+    const modalDescription = document.getElementById('show-movie-description')
+
+    // set request url
+    const url = INDEX_URL + id
+    console.log(url)
+
+    // send request to show api
+    axios.get(url).then(response => {
+      const data = response.data.results
+      console.log(data)
+
+      // insert data into modal ui
+      modalTitle.textContent = data.title
+      modalImage.innerHTML = `<img src="${POSTER_URL}${data.image}" class="img-fluid" alt="Responsive image">`
+      modalDate.textContent = `release at : ${data.release_date}`
+      modalDescription.textContent = `${data.description}`
+    })
+  }
 })()