Comments

dist/index.html

@@ -26,9 +26,8 @@ <h1 class="appTitle">Movie Library</h1>
         </div>
     </header>
     <hr>
-
-    <main class="Shows">
     <div class="modal"></div>
+    <main class="Shows">
     </main>
 </body>
 </html>

src/comments.js

@@ -0,0 +1,18 @@
+export function submitComment() {
+  fetch('https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/p0Upap7Zse2e8Jq92I1x/comments', {
+    method: 'POST',
+    headers: { 'Content-type': 'application/json' },
+    body: JSON.stringify({ item_id: '2', username: 'John', comment: 'This is an OK movie.' }),
+  })
+    .then((res) => res.ok);
+// .then((data) => console.log(data));
+}
+
+export function getComments() {
+  fetch('https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/p0Upap7Zse2e8Jq92I1x/comments?item_id=2')
+    .then((res) => res.json());
+  // .then((data) => console.log(data));
+}
+
+submitComment();
+getComments();

src/fetchAPI.js

@@ -0,0 +1,12 @@
+export const movieID = [];
+
+export function getMovies() {
+  fetch('https://api.tvmaze.com/shows')
+    .then((res) => res.json())
+    .then((data) => {
+      for (let i = 0; i < 20; i += 1) {
+        movieID.push(data[i]);
+      }
+      // console.log(movieID);
+    });
+}

src/getMovies.js

@@ -1,29 +1,97 @@
+// import createModal from './comments.js';
+export const showsList = [];
 const frontMovies = document.querySelector('.Shows');
-
-const showsList = [];
+const modalPopUp = document.querySelector('.modal');
 
 const popShow = (arr) => {
   frontMovies.innerHTML = '';
   arr.forEach((movie) => {
     const eachMovie = `<div class=movie id=${movie.id}>
-           <h1 class="movie-title">${movie.name}</h1>
+           <h2 class="movie-title">${movie.name}</h2>
            <img class="movie-image" src=${movie.image.medium}>
            <div class= "userInterAct">
-             <button class="commentBtn btn-${movie.id}">comment</button>
+             <button class="comment-btn" value="${movie.id}">Comment</button>
              <i class="fas fa-heart" data-id="${movie.id}"></i>
           </div>
         </div>`;
     frontMovies.insertAdjacentHTML('beforeend', eachMovie);
   });
 };
 
-export default function getShows() {
-  fetch('https://api.tvmaze.com/shows')
-    .then((res) => res.json())
-    .then((data) => {
-      for (let i = 0; i < 20; i += 1) {
-        showsList.push(data[i]);
-      }
-      popShow(showsList);
+export function createModal(showID) {
+  const closeBtn = document.getElementsByClassName('close-btn');
+  modalPopUp.style.display = 'block';
+  modalPopUp.style.width = '90vw';
+  modalPopUp.style.height = '90vh';
+  modalPopUp.style.backgroundColor = '#f6f6f6';
+  const content = `
+  <div class="show-container">
+    <span class="close-btn">×</span>
+    <div class="show-info">
+      <div class="poster">
+        <img src="${showsList[showID].image.medium}", alt="movie poster">
+      </div>
+      <div class="details">
+        <h1>${showsList[showID].name}</h1>
+        <h2>Summary:</h2>
+        <p>${showsList[showID].summary}</p>
+        <div class="meta">
+          <div class="left-side">
+            <span>Language: ${showsList[showID].language}</span>
+            <span>Genre: ${showsList[showID].genres}</span>
+          </div>
+          <div class="right-side">
+            <span>Rating: ${showsList[showID].rating.average}</span>
+            <span>Premiered: ${showsList[showID].premiered}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="comments-section">
+      <h2>Comments <span class="comments-count"> </span></h2>
+      <div class="comments-list"></div>
+      <h3>Add a new comment</h3>
+      <form id="form">
+        <input type="text" placeholder="Your name" id="name">
+        <textarea id="comment-text" placeholder="Your comment" maxlength="500" rows="4"></textarea>
+        <button id="submit-btn" type="submit">Comment</button>
+      </form>
+    </div>
+  </div>
+  `;
+  modalPopUp.innerHTML = content;
+  closeBtn[0].addEventListener('click', () => {
+    modalPopUp.style.display = 'none';
+  });
+  // When the user clicks anywhere outside of the modal, close it
+  // window.onclick = (event) => {
+  //   if (!event.target === modalPopUp) {
+  //     modalPopUp.style.display = 'none';
+  //   }
+  // };
+}
+
+export default async function getShows() {
+  // fetch('https://api.tvmaze.com/shows')
+  //   .then((res) => res.json())
+  //   .then((data) => {
+  //     for (let i = 0; i < 20; i += 1) {
+  //       showsList.push(data[i]);
+  //     }
+  //     popShow(showsList);
+  //   });
+  const res = await fetch('https://api.tvmaze.com/shows');
+  const data = await res.json();
+  for (let i = 0; i < 16; i += 1) {
+    showsList.push(data[i]);
+  }
+  popShow(showsList);
+  const commentBtns = document.querySelectorAll('.comment-btn');
+  commentBtns.forEach((btn) => {
+    const ID = btn.value;
+    btn.addEventListener('click', () => {
+      createModal(ID - 1);
     });
+  });
+  return showsList;
 }

src/index.html

@@ -26,9 +26,8 @@ <h1 class="appTitle">Movie Library</h1>
         </div>
     </header>
     <hr>
-
-    <main class="Shows">
     <div class="modal"></div>
+    <main class="Shows">
     </main>
 </body>
 </html>