Add items in home page

src/index.html

@@ -21,33 +21,10 @@ <h1>MyLogo</h1>
         <li>Contact</li>
       </ul>
     </div>
-      <section class="content">
-        <div class="item">
-          <div class="img">
-            Its image 😁
-          </div>
-          <h6>Photo1</h6> <h6>Likes<i class="fa fa-heart"></i></h6><br>
-          <button class="btn btn-info">Comment</button>
-          <button class="btn btn-success">Reservetion</button>
-        </div>
-        <div class="item">
-          <div class="img">
-            Its image 😁
-          </div>
-          <h6>Photo1</h6> <h6>Likes<i class="fa fa-heart"></i></h6><br>
-          <button class="btn btn-info">Comment</button>
-          <button class="btn btn-success">Reservetion</button>
-        </div>
-        <div class="item">
-          <div class="img">
-            Its image 😁
-          </div>
-          <h6>Photo1</h6> <h6>Likes<i class="fa fa-heart"></i></h6><br>
-          <button class="btn btn-info">Comment</button>
-          <button class="btn btn-success">Reservetion</button>
-        </div>
+      <section class="content" id="content">
+
+
 
-
       </section>
       <div class="footer">
         <span>Created by Microverse under CC license</span>

src/index.js

@@ -1,12 +1,24 @@
 /* eslint-disable camelcase */
 import commentsPop from './modules/comments.js';
-import { postComment } from './modules/API.js';
+import { addLikes, postComment } from './modules/API.js';
+import homePage from './modules/home.js';
 
 import './styles/comments.css';
+import './styles/home.css';
 
-window.addEventListener('load', 'home');
+window.addEventListener('load', homePage);
 
 const content = document.querySelector('#content');
+// Event for like
+content.addEventListener('click', (e) => {
+  const clicked = e.target.closest('.fa-heart');
+  if (!clicked) return;
+  const animeId = +clicked.dataset.likeid;
+  const likes = {
+    item_id: animeId,
+  };
+  addLikes(likes);
+});
 
 // Event: Open comments popup
 content.addEventListener('click', (e) => {

src/modules/API.js

@@ -7,7 +7,6 @@ const getAnime = async () => {
   const url = `${BASE_URL_ANIME}`;
   const response = await fetch(url);
   const data = await response.json();
-
   return data.data.slice(0, 6);
 };
 
@@ -29,4 +28,24 @@ const getComments = async (commentId) => {
   return JSON.parse(data);
 };
 
-export { getAnime, postComment, getComments };
+const addLikes = async (like) => {
+  const response = await fetch(`${Base_URL_INVOLVEMENT}/apps/${APP_ID}/likes`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(like),
+  });
+  const data = await response.text();
+  return data;
+};
+
+const getLikes = async () => {
+  const response = await fetch(`${Base_URL_INVOLVEMENT}/apps/${APP_ID}/likes`);
+  const data = await response.text();
+  return JSON.parse(data);
+};
+
+export {
+  getAnime, postComment, getComments, addLikes, getLikes,
+};

src/modules/home.js

@@ -0,0 +1,29 @@
+import { getAnime, getLikes } from './API.js';
+
+const section = document.querySelector('.content');
+
+const homePage = async () => {
+  const data = await getAnime();
+  const likesData = await getLikes();
+  let numLike = 0;
+  data.forEach((anime) => {
+    likesData.find((like) => {
+      if (like.item_id === anime.mal_id) {
+        numLike = like.likes;
+      }
+      return numLike;
+    });
+    section.innerHTML += `<div class="item">
+        <div class="img-container">
+         <img src='${anime.images.jpg.image_url}' alt='${anime.title} image '>
+        </div>
+        <h6>${anime.title}</h6> 
+        <h6><i class="fa fa-heart" data-likeid='${anime.mal_id}'></i>${numLike} Likes</h6>
+        <br>
+        <button class="btn btn-info">Comment</button>
+        <button class="btn btn-success">Reservetion</button>
+      </div>`;
+  });
+};
+
+export default homePage;

src/styles.css → src/styles/home.css

@@ -1,65 +1,67 @@
-.navbar-list {
-  background-color: #56adbf;
-  height: 90px;
-  width: 100%;
-}
-
-.navbar-list h1 {
-  color: #fff;
-  margin: 24px 0 0 117px;
-  position: absolute;
-}
-
-.nav-list {
-  float: right;
-  list-style: none;
-  margin-top: 30px;
-  margin-right: 6%;
-}
-
-.nav-list li {
-  display: inline;
-  color: #fff;
-  font-size: 20px;
-  padding: 30px;
-}
-
-.content {
-  display: grid;
-  grid-template-columns: auto auto auto;
-  justify-content: center;
-}
-
-.item {
-  padding: 20px;
-}
-
-.img {
-  height: 100px;
-  width: 100px;
-  border: 1px solid black;
-}
-
-.item h6 {
-  display: inline;
-  float: left;
-  padding: 10px;
-}
-
-.item h6 i {
-  color: red;
-}
-
-.footer {
-  position: absolute;
-  bottom: 0;
-  width: 99%;
-  height: 60px; /* Height of the footer */
-  background: #56adbf;
-}
-
-.footer span {
-  color: #fff;
-  margin: 24px 0 0 20px;
-  position: absolute;
-}
+.navbar-list {
+  background-color: #56adbf;
+  height: 90px;
+  width: 100%;
+}
+
+.navbar-list h1 {
+  color: #fff;
+  margin: 24px 0 0 117px;
+  position: absolute;
+}
+
+.nav-list {
+  float: right;
+  list-style: none;
+  margin-top: 30px;
+  margin-right: 6%;
+}
+
+.nav-list li {
+  display: inline;
+  color: #fff;
+  font-size: 20px;
+  padding: 30px;
+}
+
+.content {
+  display: grid;
+  grid-template-columns: auto auto auto;
+  justify-content: center;
+}
+
+.item {
+  padding: 20px;
+}
+
+.img-container {
+  width: 100%;
+  height: 50vh;
+}
+
+.img-container img {
+  height: 100%;
+  width: 100%;
+}
+
+.item h6 {
+  display: inline;
+  float: left;
+  padding: 10px;
+}
+
+.item h6 i {
+  color: red;
+}
+
+.footer {
+  width: 99%;
+  height: 60px; /* Height of the footer */
+  background: #56adbf;
+}
+
+.footer span {
+  color: #fff;
+  margin: 24px 0 0 20px;
+  position: absolute;
+}