Merge pull request #25 from kwekubright/movie-modal-popup

Add movie modal popup
kwekubright · Jun 22, 2022 · 16234c0 · 16234c0
2 parents cc92966 + 5e88624
commit 16234c0
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 3 deletions.
diff --git a/src/index.html b/src/index.html
@@ -27,6 +27,34 @@
       </div>
     </footer>
   </main>
+
+  <section id="movie-modal" class="hide flex flex-justify-center flex-align-center">
+    <div class="modal-wrapper">
+      <div class="modal-content">
+        <div class="modal-header flex flex-justify-right margin-bottom-3 ">
+        <svg class="close-modal" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="64" height="64" viewBox="0 0 512 512"
+          style=" fill:#000000;">
+          <path fill="#E04F5F"
+            d="M504.1,256C504.1,119,393,7.9,256,7.9C119,7.9,7.9,119,7.9,256C7.9,393,119,504.1,256,504.1C393,504.1,504.1,393,504.1,256z">
+          </path>
+          <path fill="#FFF"
+            d="M285,256l72.5-84.2c7.9-9.2,6.9-23-2.3-31c-9.2-7.9-23-6.9-30.9,2.3L256,222.4l-68.2-79.2c-7.9-9.2-21.8-10.2-31-2.3c-9.2,7.9-10.2,21.8-2.3,31L227,256l-72.5,84.2c-7.9,9.2-6.9,23,2.3,31c4.1,3.6,9.2,5.3,14.3,5.3c6.2,0,12.3-2.6,16.6-7.6l68.2-79.2l68.2,79.2c4.3,5,10.5,7.6,16.6,7.6c5.1,0,10.2-1.7,14.3-5.3c9.2-7.9,10.2-21.8,2.3-31L285,256z">
+          </path>
+        </svg>
+        </div>
+      </div>
+      <div class="modal-body flex flex-column flex-gap-20 flex-align-center flex-justify-center">
+        <img id="modal-movie-img" src="" alt="">
+        <h2 id="modal-movie-title"></h2>
+        <div class="stats flex flex-justify-center width-100">
+          <p><b>Release Date:</b> <span id="modal-movie-release-date"></span></p>
+          <p><b>Rating:</b> <span id="modal-movie-rating"></span></p>
+          <p><b>Language:</b> <span id="modal-movie-language"></span></p>
+        </div>
+        <span id="modal-movie-description"></span>
+      </div>
+    </div>
+  </section>
 </body>
 
 </html>
diff --git a/src/index.js b/src/index.js
@@ -3,3 +3,8 @@ import display from './modules/display.js';
 import { showcase } from './modules/variables.js';
 
 showcase.innerHtml = display();
+
+const closeBtn = document.querySelector('.close-modal');
+closeBtn.addEventListener('click', () => {
+  document.getElementById('movie-modal').classList.add('hide');
+});
diff --git a/src/modules/display.js b/src/modules/display.js
@@ -1,8 +1,8 @@
 import fetchData from './fetctData.js';
 
-const display = async () => {
+const display = () => {
   // Execution
-  await fetchData();
+  fetchData();
 };
 
 export default display;
diff --git a/src/modules/processResult.js b/src/modules/processResult.js
@@ -1,5 +1,24 @@
 import { showcase } from './variables.js';
 
+const registerEvents = () => {
+  const commentBtn = document.querySelectorAll('.movie-comment');
+  commentBtn.forEach((btn) => {
+    btn.addEventListener('click', (e) => {
+      fetch(`https://api.tvmaze.com/shows/${e.currentTarget.dataset.id}`)
+        .then((res) => res.json())
+        .then((data) => {
+          document.getElementById('modal-movie-img').src = data.image.original;
+          document.getElementById('modal-movie-title').innerHTML = data.name;
+          document.getElementById('modal-movie-release-date').innerHTML = data.premiered;
+          document.getElementById('modal-movie-description').innerHTML = data.summary;
+          document.getElementById('modal-movie-rating').innerHTML = data.rating.average;
+          document.getElementById('modal-movie-language').innerHTML = data.language;
+          document.getElementById('movie-modal').classList.remove('hide');
+        });
+    });
+  });
+};
+
 const processResult = (prop) => {
   for (let i = 0; i < prop.length; i += 1) {
     const { show } = prop[i];
@@ -13,11 +32,13 @@ const processResult = (prop) => {
         <small>0 likes</small>
       </div>
     </div>
-    <button>Comments</button>
+    <button class="movie-comment" data-id="${show.id}" data-title="${show.name}" data-img="${show.image.original}">Comments</button>
     <button>Reservations</button>
   </div>
   `;
   }
+
+  registerEvents();
 };
 
 export default processResult;
diff --git a/src/styles/index.css b/src/styles/index.css
@@ -78,6 +78,14 @@
   flex-basis: 25%;
 }
 
+.flex-gap-10 {
+  gap: 10px;
+}
+
+.flex-gap-20 {
+  gap: 20px;
+}
+
 /* Borders */
 .border {
   border: 1px solid #e6e6e6;
@@ -331,10 +339,54 @@ a {
   cursor: pointer;
 }
 
+.hide {
+  display: none !important;
+}
+
 /* Footer */
 .footer-wrapper {
   padding: 20px;
   border-top: 1px solid #e6e6e6;
   margin-top: 50px;
   background-color: #e6e6e6;
 }
+
+/* Movie Modal */
+
+#movie-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 99;
+  backdrop-filter: blur(8px);
+}
+
+.modal-wrapper {
+  width: 40%;
+  height: 80%;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 20px;
+  box-shadow: 2px 2px 15px rgb(113, 113, 113);
+  overflow: scroll;
+}
+
+.close-modal {
+  width: 25px;
+  height: 25px;
+}
+
+#modal-movie-img {
+  width: 100%;
+  height: 300px;
+}
+
+#modal-movie-description p {
+  font-size: 13px;
+}