OybekKayumov · fahdrahali · Apr 13, 2022 · Apr 12, 2022 · Apr 12, 2022 · Apr 12, 2022
diff --git a/modules/modalMovieDetails.js b/modules/modalMovieDetails.js
@@ -0,0 +1,79 @@
+import {
+  displayComments,
+} from './moviesComment.js';
+
+const commentsLength = 0;
+
+const modalTemplate = (movie, commentsLength) => `
+    <button class="btn-close-modal">x</button>
+    <div class="modal-header">
+
+        <img src="${movie.image.medium}" alt="image title"/>
+
+      <h2 class="movie-title">${movie.name}</h2>
+    </div>
+    <div class="info-container">
+      <h3>Genres</h3>
+      <p class="genres">${movie.genres}</p>
+      <p class="rating">Rating: ${movie.rating.average}</p>
+      <p class="description">${movie.summary}</p> 
+    </div>
+    <div class="info-container comments">
+      <h3>Comments (<span class="counter">${commentsLength}</span>)</h2>
+      <ul class="comment-container"></ul>
+      <h3>Add a comment</h3>
+      <div class="msgErrorContainer"></div>
+      <form class='form' action="index_submit" method="POST" accept-charset="utf-8">
+        <input type="text" placeholder="Name" name="Your name" maxlength="20" required/>
+        <textarea
+          name="text-area"
+          maxlength="220"
+          placeholder="Your Comments" cols="50" rows="10" required></textarea>
+        <button type="submit" class="btn btn-add-comment">Comment</button>
+      </form>
+    </div>
+  `;
+
+const modalSection = document.querySelector('.modal-container');
+const container = document.querySelector('.container');
+
+const openModal = () => {
+  modalSection.classList.add('show-modal');
+  container.classList.add('bg-body-modal');
+};
+
+const closeModal = () => {
+  modalSection.classList.remove('show-modal');
+  container.classList.remove('bg-body-modal');
+  modalSection.innerHTML = '';
+};
+
+const createModal = (movieData, commentsLength) => {
+  const modalArticle = document.createElement('div');
+  modalArticle.className = 'modal-card';
+  modalArticle.innerHTML = modalTemplate(movieData, commentsLength);
+  modalSection.appendChild(modalArticle);
+  const closeModalBtn = document.querySelector('.btn-close-modal');
+  closeModalBtn.addEventListener('click', closeModal);
+};
+
+const handleModal = (movies) => {
+  const openModalBtn = document.querySelectorAll('.card-comments');
+  // const openModalBtn = document.querySelectorAll('.card__comments');
+
+  openModalBtn.forEach((btn, index) => {
+    btn.addEventListener('click', async () => {
+      openModal();
+      const urlBase = 'https://api.tvmaze.com/shows/';
+      const url = `${urlBase}${movies[index].id}`;
+      const movieData = await fetch(url)
+        .then((response) => response.json())
+        .then((data) => data);
+
+      createModal(movieData, commentsLength);
+      displayComments(movies[index].id);
+    });
+  });
+};
+
+export default handleModal;
diff --git a/modules/moviesComment.js b/modules/moviesComment.js
@@ -0,0 +1,43 @@
+const baseURL = 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps';
+
+const appID = 'Ngyhlqhta3I7behhBDEq';
+
+const getComment = async (id) => {
+  const resolve = await fetch(`${baseURL}/${appID}/comments?item_id=${id}`);
+  const result = await resolve.json();
+
+  if (!result.length) {
+    return [];
+  }
+
+  return result;
+};
+
+const commentTemplate = (date, name, comment) => `
+    <li>
+      <span>${date}</span>
+      <span>${name}: </span>
+      <span>${comment}</span>
+    </li>
+`;
+
+const displayComments = async (id) => {
+  const ul = document.querySelector('ul');
+  const commentArr = await getComment(id);
+  ul.innerHTML = '';
+  let html = '';
+
+  commentArr.forEach((elem) => {
+    const commentItem = commentTemplate(
+      elem.creation_date,
+      elem.username,
+      elem.comment,
+    );
+    html += commentItem;
+  });
+  ul.insertAdjacentHTML('beforeend', html);
+};
+
+export {
+  displayComments, getComment,
+};
diff --git a/src/index.html b/src/index.html
@@ -6,7 +6,7 @@
     <title>JavaScript Capstone</title>
 </head>
 <body>
-
+    <div class="container">
     <header>
         <a href="#">
             <h1 class="logo">456movies</h1>
@@ -20,7 +20,6 @@ <h1 class="logo">456movies</h1>
             </ul>
         </nav>
     </header>
-
     <section class="cards"></section>
 
     <footer>
@@ -32,5 +31,8 @@ <h1 class="logo">456movies</h1>
         </ul>
         <h1>Copyrigth &copy; 2022</h1>
       </footer>
+    </div>
+    <div id="modal-container" class="modal-container"></div>
+    <script type="module" src="index.js"></script>
 </body>
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,7 +1,9 @@
 import './style.css';
-import getMovies from '../modules/movies.fetch';
-import moviesDisplay from '../modules/moviesDisplay';
+import getMovies from '../modules/movies.fetch.js';
+import moviesDisplay from '../modules/moviesDisplay.js';
+import handleModal from '../modules/modalMovieDetails.js';
 
 getMovies().then((movieList) => {
   moviesDisplay(movieList);
+  handleModal(movieList);
 });
diff --git a/src/style.css b/src/style.css
@@ -74,3 +74,139 @@ h1 {
 }
 
 /* end main */
+
+/* modal start */
+.modal-container {
+  position: fixed;
+  width: 80%;
+  height: 95%;
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border: 1px solid #bec4c1;
+  border-radius: 10px;
+  background-color: #12232e;
+}
+
+.bg-body-modal {
+  background-color: #000000e6;
+  filter: blur(5px);
+}
+
+.modal-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 15px;
+  margin-top: 5px;
+}
+
+.show-modal {
+  display: flex;
+}
+
+.modal-header h2 {
+  font-size: 40px;
+}
+
+.btn-close-modal {
+  position: absolute;
+  top: 8px;
+  right: 38px;
+  align-self: flex-end;
+  border-style: none;
+  border-radius: 50%;
+  background-color: #fff;
+  font-size: 3rem;
+  cursor: pointer;
+  outline: none;
+  width: 4rem;
+  height: 4rem;
+  margin: 2rem 2rem 0 0;
+  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
+  z-index: 10;
+}
+
+.btn-close-modal:hover {
+  color: #4da8da;
+  background-color: #203647;
+}
+
+.btn-close-modal:active {
+  color: #eefbfb;
+  background-color: #4da8da;
+}
+
+.modal-card img {
+  width: 15%;
+  border-radius: 5px;
+}
+
+.modal-card .info-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 50px;
+  row-gap: 5px;
+  margin-top: 10px;
+}
+
+.modal-card h3 {
+  color: #007cc7;
+  font-size: 25px;
+  font-weight: 700;
+  text-align: center;
+}
+
+.modal-card p {
+  text-align: center;
+  font-size: 16px;
+  line-height: 20px;
+}
+
+.rating {
+  color: #007cc7;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  row-gap: 8px;
+  margin-top: 10px;
+  padding: 10px;
+}
+
+.form input {
+  padding: 5px;
+  height: 35px;
+  border-radius: 5px;
+  font-size: 20px;
+}
+
+.form textarea {
+  height: 100px;
+  padding: 5px;
+  border-radius: 5px;
+  font-size: 20px;
+}
+
+.form button {
+  width: 120px;
+  height: 40px;
+  font-size: 20px;
+  border: none;
+  border-radius: 5px;
+  background-color: #007cc7;
+  color: white;
+  cursor: pointer;
+}
+
+.form button:hover {
+  border: 1px solid white;
+}
+
+/* modal end */