From 5214608cdee3916a91f022fc7d78a549948ab413 Mon Sep 17 00:00:00 2001 From: Cathella Date: Thu, 18 Nov 2021 13:34:42 +0300 Subject: [PATCH 01/22] Create meals component dynamically --- src/functions.js | 50 ++++++++++++++++++++++++++++++++++++++++++++++++ src/index.js | 8 ++++++++ 2 files changed, 58 insertions(+) diff --git a/src/functions.js b/src/functions.js index 7857603..5cf9975 100644 --- a/src/functions.js +++ b/src/functions.js @@ -1,6 +1,56 @@ const foodItemsDiv = document.getElementById('food-items'); const mealCount = document.querySelector('#meal-count'); +const mealList = async (data) => { + for (let i = 0; i <= data.length - 1; i += 1) { + const foodDiv = document.createElement('div'); + foodDiv.classList.add('col-lg-4'); + + const mealItem = document.createElement('div'); + mealItem.classList.add('meal-item text-center card shadow mb-4 border-0'); + + const imgContainer = document.createElement('div'); + imgContainer.classList.add('meal-img'); + + const image = document.createElement('img'); + image.src = data[i].strMealThumb; + imgContainer.appendChild(image); + mealItem.appendChild(imgContainer); + + const mealText = document.createElement('div'); + mealText.classList.add('meal-name d-flex pt-3 justify-content-center align-items-center'); + + const mealName = document.createElement('h3'); + mealName.classList.add('fs-6 me-2 pt-1'); + mealName.innerHTML = data[i].strMeal; + + const likeBtn = document.createElement('i'); + likeBtn.classList.add('text-danger bi bi-heart'); + likeBtn.id = data[i].idMeal; + + mealText.appendChild(mealName); + mealText.appendChild(likeBtn); + mealItem.appendChild(mealText); + + const likeCount = document.createElement('div'); + likeCount.classList.add('like-count'); + + const likesNumber = document.createElement('small'); + likesNumber.innerHTML = '0 Likes'; + likeCount.appendChild(likesNumber); + mealItem.appendChild(likeCount); + + const commentContainer = document.createElement('div'); + commentContainer.classList.add('comment mb-4 mt-2'); + + const commentBtn = document.createElement('button'); + commentBtn.classList.add('btn btn-warning rounded-pill px-4 shadow'); + commentBtn.innerHTML = 'Comments'; + commentContainer.appendChild(commentBtn); + mealItem.appendChild(commentContainer); + } +} + const displayMeals = (food) => { const foodDiv = document.createElement('div'); foodDiv.className = 'col-lg-4'; diff --git a/src/index.js b/src/index.js index 895ae03..8f04aa7 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,12 @@ import './style.css'; import getMeals from './functions'; +const likesCounter = (target, likesArr, numOfLikes) => { + likesArr.forEach((obj) => { + if (obj.item_id === target.id) { + numOfLikes.innerHTML = `${obj.likes} Likes`; + } + }); +}; + getMeals(); From cb4731b7505ede1605924256ef366222a6c2153d Mon Sep 17 00:00:00 2001 From: Cathella Date: Thu, 18 Nov 2021 17:35:15 +0300 Subject: [PATCH 02/22] Added getMeals function --- src/createLike.js | 6 +-- src/functions.js | 104 ++++++++++++++++++++++++++-------------------- src/getLikes.js | 2 +- src/getMeals.js | 13 ++++++ src/index.js | 15 +++---- 5 files changed, 82 insertions(+), 58 deletions(-) create mode 100644 src/getMeals.js diff --git a/src/createLike.js b/src/createLike.js index dbe2756..fd75392 100644 --- a/src/createLike.js +++ b/src/createLike.js @@ -1,9 +1,9 @@ -const createLike = async () => { +const createLike = async (mealId) => { const response = await fetch( 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/mfrWKMutGeXBQO8OVg4U/likes', { method: 'POST', - body: JSON.stringify({ - item_id: mealId, + body: JSON.parse({ + "item_id": mealId, }), headers: { 'Content-type': 'application/json; charset=UTF-8', diff --git a/src/functions.js b/src/functions.js index 5cf9975..a68307c 100644 --- a/src/functions.js +++ b/src/functions.js @@ -1,13 +1,26 @@ +import getLikes from "./getLikes"; +import createLike from "./createLike"; + const foodItemsDiv = document.getElementById('food-items'); const mealCount = document.querySelector('#meal-count'); +const likesCounter = (target, likesArr, numOfLikes) => { + likesArr.forEach((obj) => { + if (obj.item_id === target.id) { + numOfLikes.innerHTML = `${obj.likes} Likes`; + } + }); +}; + const mealList = async (data) => { - for (let i = 0; i <= data.length - 1; i += 1) { + + for(let i = 0; i <= data.length - 1; i += 1) { const foodDiv = document.createElement('div'); foodDiv.classList.add('col-lg-4'); const mealItem = document.createElement('div'); - mealItem.classList.add('meal-item text-center card shadow mb-4 border-0'); + mealItem.id = data[i].idMeal; + mealItem.classList.add('meal-item', 'text-center', 'card', 'shadow', 'mb-4', 'border-0'); const imgContainer = document.createElement('div'); imgContainer.classList.add('meal-img'); @@ -18,68 +31,71 @@ const mealList = async (data) => { mealItem.appendChild(imgContainer); const mealText = document.createElement('div'); - mealText.classList.add('meal-name d-flex pt-3 justify-content-center align-items-center'); + mealText.classList.add('meal-name', 'd-flex', 'pt-3', 'justify-content-center', 'align-items-center'); const mealName = document.createElement('h3'); - mealName.classList.add('fs-6 me-2 pt-1'); + mealName.classList.add('fs-6', 'me-2', 'pt-1'); mealName.innerHTML = data[i].strMeal; const likeBtn = document.createElement('i'); - likeBtn.classList.add('text-danger bi bi-heart'); + likeBtn.classList.add('text-danger', 'bi', 'bi-heart'); likeBtn.id = data[i].idMeal; mealText.appendChild(mealName); mealText.appendChild(likeBtn); mealItem.appendChild(mealText); - const likeCount = document.createElement('div'); - likeCount.classList.add('like-count'); + const mealLikes = document.createElement('div'); + mealLikes.classList.add('like-count'); - const likesNumber = document.createElement('small'); - likesNumber.innerHTML = '0 Likes'; - likeCount.appendChild(likesNumber); - mealItem.appendChild(likeCount); + const numOfLikes = document.createElement('small'); + numOfLikes.innerHTML = '0 Likes'; + mealLikes.appendChild(numOfLikes); + mealItem.appendChild(mealLikes); const commentContainer = document.createElement('div'); - commentContainer.classList.add('comment mb-4 mt-2'); + commentContainer.classList.add('comment', 'mb-4', 'mt-2'); const commentBtn = document.createElement('button'); - commentBtn.classList.add('btn btn-warning rounded-pill px-4 shadow'); + commentBtn.classList.add('btn', 'btn-warning', 'rounded-pill', 'px-4', 'shadow'); commentBtn.innerHTML = 'Comments'; commentContainer.appendChild(commentBtn); mealItem.appendChild(commentContainer); + foodDiv.appendChild(mealItem); + foodItemsDiv.appendChild(foodDiv); + + const likesArr = await getLikes(); + likesCounter(likeBtn, likesArr, numOfLikes); + + likeBtn.addEventListener('click', async (e) => { + await createLike(likeBtn.id); + const newLikes = await getLikes(); + likesCounter(e.target, newLikes, numOfLikes); + }); } -} - -const displayMeals = (food) => { - const foodDiv = document.createElement('div'); - foodDiv.className = 'col-lg-4'; - foodDiv.innerHTML = ` -
-
- Meal Image -
-
-

${food.strMeal}

- -
- -
- -
-
- `; - foodItemsDiv.appendChild(foodDiv); }; -const getMeals = async () => { - const url = 'https://www.themealdb.com/api/json/v1/1/filter.php?a=indian'; - const response = await fetch(url); - const data = await response.json(); - data.meals.forEach((meal) => displayMeals(meal)); - mealCount.textContent = data.meals.length; -}; +// const displayMeals = (food) => { +// const foodDiv = document.createElement('div'); +// foodDiv.className = 'col-lg-4'; +// foodDiv.innerHTML = ` +//
+//
+// Meal Image +//
+//
+//

${food.strMeal}

+// +//
+// +//
+// +//
+//
+// `; +// foodItemsDiv.appendChild(foodDiv); +// }; -export default getMeals; +export default mealList; diff --git a/src/getLikes.js b/src/getLikes.js index 457c6af..3ac1864 100644 --- a/src/getLikes.js +++ b/src/getLikes.js @@ -1,6 +1,6 @@ const getLikes = async () => { const response = await fetch( - 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/mfrWKMutGeXBQO8OVg4U/likes' + 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/mfrWKMutGeXBQO8OVg4U/likes', ); return response.json(); }; diff --git a/src/getMeals.js b/src/getMeals.js new file mode 100644 index 0000000..55c3f7e --- /dev/null +++ b/src/getMeals.js @@ -0,0 +1,13 @@ +const getMeals = async () => { + const response = await fetch( + 'https://www.themealdb.com/api/json/v1/1/filter.php?a=indian', + ); + const result = await response.json(); + return result.meals; + // const url = 'https://www.themealdb.com/api/json/v1/1/filter.php?a=indian'; + // const response = await fetch(url); + // const data = await response.json(); + // return data.meals; +}; + +export default getMeals; \ No newline at end of file diff --git a/src/index.js b/src/index.js index 8f04aa7..3ba7b06 100644 --- a/src/index.js +++ b/src/index.js @@ -1,12 +1,7 @@ import './style.css'; -import getMeals from './functions'; +import getMeals from './getMeals'; +import mealList from './functions'; -const likesCounter = (target, likesArr, numOfLikes) => { - likesArr.forEach((obj) => { - if (obj.item_id === target.id) { - numOfLikes.innerHTML = `${obj.likes} Likes`; - } - }); -}; - -getMeals(); +window.addEventListener('load', async () => { + mealList(await getMeals()); +}); \ No newline at end of file From 76b14c319e3e013290278c9d1afb51e6ff858e2c Mon Sep 17 00:00:00 2001 From: Cathella Date: Thu, 18 Nov 2021 18:48:44 +0300 Subject: [PATCH 03/22] refactor getMeals function --- src/functions.js | 101 ----------------------------------------------- src/getMeals.js | 44 ++++++++++++++++++--- src/index.js | 5 +-- 3 files changed, 39 insertions(+), 111 deletions(-) diff --git a/src/functions.js b/src/functions.js index a68307c..e69de29 100644 --- a/src/functions.js +++ b/src/functions.js @@ -1,101 +0,0 @@ -import getLikes from "./getLikes"; -import createLike from "./createLike"; - -const foodItemsDiv = document.getElementById('food-items'); -const mealCount = document.querySelector('#meal-count'); - -const likesCounter = (target, likesArr, numOfLikes) => { - likesArr.forEach((obj) => { - if (obj.item_id === target.id) { - numOfLikes.innerHTML = `${obj.likes} Likes`; - } - }); -}; - -const mealList = async (data) => { - - for(let i = 0; i <= data.length - 1; i += 1) { - const foodDiv = document.createElement('div'); - foodDiv.classList.add('col-lg-4'); - - const mealItem = document.createElement('div'); - mealItem.id = data[i].idMeal; - mealItem.classList.add('meal-item', 'text-center', 'card', 'shadow', 'mb-4', 'border-0'); - - const imgContainer = document.createElement('div'); - imgContainer.classList.add('meal-img'); - - const image = document.createElement('img'); - image.src = data[i].strMealThumb; - imgContainer.appendChild(image); - mealItem.appendChild(imgContainer); - - const mealText = document.createElement('div'); - mealText.classList.add('meal-name', 'd-flex', 'pt-3', 'justify-content-center', 'align-items-center'); - - const mealName = document.createElement('h3'); - mealName.classList.add('fs-6', 'me-2', 'pt-1'); - mealName.innerHTML = data[i].strMeal; - - const likeBtn = document.createElement('i'); - likeBtn.classList.add('text-danger', 'bi', 'bi-heart'); - likeBtn.id = data[i].idMeal; - - mealText.appendChild(mealName); - mealText.appendChild(likeBtn); - mealItem.appendChild(mealText); - - const mealLikes = document.createElement('div'); - mealLikes.classList.add('like-count'); - - const numOfLikes = document.createElement('small'); - numOfLikes.innerHTML = '0 Likes'; - mealLikes.appendChild(numOfLikes); - mealItem.appendChild(mealLikes); - - const commentContainer = document.createElement('div'); - commentContainer.classList.add('comment', 'mb-4', 'mt-2'); - - const commentBtn = document.createElement('button'); - commentBtn.classList.add('btn', 'btn-warning', 'rounded-pill', 'px-4', 'shadow'); - commentBtn.innerHTML = 'Comments'; - commentContainer.appendChild(commentBtn); - mealItem.appendChild(commentContainer); - foodDiv.appendChild(mealItem); - foodItemsDiv.appendChild(foodDiv); - - const likesArr = await getLikes(); - likesCounter(likeBtn, likesArr, numOfLikes); - - likeBtn.addEventListener('click', async (e) => { - await createLike(likeBtn.id); - const newLikes = await getLikes(); - likesCounter(e.target, newLikes, numOfLikes); - }); - } -}; - -// const displayMeals = (food) => { -// const foodDiv = document.createElement('div'); -// foodDiv.className = 'col-lg-4'; -// foodDiv.innerHTML = ` -//
-//
-// Meal Image -//
-//
-//

${food.strMeal}

-// -//
-// -//
-// -//
-//
-// `; -// foodItemsDiv.appendChild(foodDiv); -// }; - -export default mealList; diff --git a/src/getMeals.js b/src/getMeals.js index 55c3f7e..e05cb2b 100644 --- a/src/getMeals.js +++ b/src/getMeals.js @@ -1,13 +1,45 @@ +import getLikes from "./getLikes"; +import createLike from "./createLike"; + +const likesCounter = (target, likesArr, numOfLikes) => { + likesArr.forEach((obj) => { + if (obj.item_id === target.id) { + numOfLikes.innerHTML = `${obj.likes} Likes`; + } + }); +}; + const getMeals = async () => { + const foodItemsDiv = document.getElementById('food-items'); + const response = await fetch( 'https://www.themealdb.com/api/json/v1/1/filter.php?a=indian', ); - const result = await response.json(); - return result.meals; - // const url = 'https://www.themealdb.com/api/json/v1/1/filter.php?a=indian'; - // const response = await fetch(url); - // const data = await response.json(); - // return data.meals; + const data = await response.json(); + console.log(data.meals); + + data.meals.forEach( food => { + const foodDiv = document.createElement('div'); + foodDiv.className = 'col-lg-4'; + foodDiv.innerHTML = ` +
+
+ Meal Image +
+
+

${food.strMeal}

+ +
+ +
+ +
+
+ `; + foodItemsDiv.appendChild(foodDiv); + }) }; export default getMeals; \ No newline at end of file diff --git a/src/index.js b/src/index.js index 3ba7b06..6b734a2 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,4 @@ import './style.css'; import getMeals from './getMeals'; -import mealList from './functions'; -window.addEventListener('load', async () => { - mealList(await getMeals()); -}); \ No newline at end of file +getMeals(); \ No newline at end of file From ae1ec792f41edcaa3a96bfabccd2d69c9e5e4e32 Mon Sep 17 00:00:00 2001 From: Cathella Date: Fri, 19 Nov 2021 07:32:52 +0300 Subject: [PATCH 04/22] refactor meals counter --- src/functions.js | 3 +++ src/getMeals.js | 12 +++--------- src/index.html | 2 +- 3 files changed, 7 insertions(+), 10 deletions(-) diff --git a/src/functions.js b/src/functions.js index e69de29..fa1a18d 100644 --- a/src/functions.js +++ b/src/functions.js @@ -0,0 +1,3 @@ +const mealsCounter = (data) => data.length; + +export { mealsCounter }; \ No newline at end of file diff --git a/src/getMeals.js b/src/getMeals.js index e05cb2b..89e436d 100644 --- a/src/getMeals.js +++ b/src/getMeals.js @@ -1,22 +1,16 @@ import getLikes from "./getLikes"; import createLike from "./createLike"; - -const likesCounter = (target, likesArr, numOfLikes) => { - likesArr.forEach((obj) => { - if (obj.item_id === target.id) { - numOfLikes.innerHTML = `${obj.likes} Likes`; - } - }); -}; +import mealsCounter from "./functions"; const getMeals = async () => { const foodItemsDiv = document.getElementById('food-items'); + const homeCount = document.querySelector('#meal-count'); const response = await fetch( 'https://www.themealdb.com/api/json/v1/1/filter.php?a=indian', ); const data = await response.json(); - console.log(data.meals); + homeCount.innerHTML = mealsCounter(data.meals); data.meals.forEach( food => { const foodDiv = document.createElement('div'); diff --git a/src/index.html b/src/index.html index 198dc08..8bc5067 100644 --- a/src/index.html +++ b/src/index.html @@ -30,7 +30,7 @@

Let's Start Cooking With Popular Recipes

Want to learn but confused of how to start? No need to worry again!

- Explore Meals + Explore Meals
From 9438cc2a2d0372b20984661e3175d7774cb92868 Mon Sep 17 00:00:00 2001 From: Cathella Date: Fri, 19 Nov 2021 11:55:11 +0300 Subject: [PATCH 05/22] Various function updates --- src/createLike.js | 7 +++---- src/functions.js | 10 +++++++++- src/getMeals.js | 17 ++++++++++++++--- src/index.js | 15 +++++++++++++++ 4 files changed, 41 insertions(+), 8 deletions(-) diff --git a/src/createLike.js b/src/createLike.js index fd75392..ebcfedb 100644 --- a/src/createLike.js +++ b/src/createLike.js @@ -1,9 +1,8 @@ const createLike = async (mealId) => { - const response = await fetch( - 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/mfrWKMutGeXBQO8OVg4U/likes', { + const response = fetch('https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/mfrWKMutGeXBQO8OVg4U/likes', { method: 'POST', - body: JSON.parse({ - "item_id": mealId, + body: JSON.stringify({ + item_id: mealId }), headers: { 'Content-type': 'application/json; charset=UTF-8', diff --git a/src/functions.js b/src/functions.js index fa1a18d..143521c 100644 --- a/src/functions.js +++ b/src/functions.js @@ -1,3 +1,11 @@ const mealsCounter = (data) => data.length; -export { mealsCounter }; \ No newline at end of file +const likesCount = (target, likesArr, numOfLikes) => { + likesArr.forEach((obj) => { + if (obj.item_id === target.id) { + numOfLikes.innerHTML = `${obj.likes} Likes`; + } + }); +}; + +export { mealsCounter, likesCount }; \ No newline at end of file diff --git a/src/getMeals.js b/src/getMeals.js index 89e436d..3b299fa 100644 --- a/src/getMeals.js +++ b/src/getMeals.js @@ -1,6 +1,6 @@ import getLikes from "./getLikes"; import createLike from "./createLike"; -import mealsCounter from "./functions"; +import { mealsCounter, likesCount } from "./functions"; const getMeals = async () => { const foodItemsDiv = document.getElementById('food-items'); @@ -10,7 +10,7 @@ const getMeals = async () => { 'https://www.themealdb.com/api/json/v1/1/filter.php?a=indian', ); const data = await response.json(); - homeCount.innerHTML = mealsCounter(data.meals); + homeCount.textContent = mealsCounter(data.meals); data.meals.forEach( food => { const foodDiv = document.createElement('div'); @@ -33,7 +33,18 @@ const getMeals = async () => { `; foodItemsDiv.appendChild(foodDiv); - }) + }); + + const likeBtn = document.querySelector('.like-btn'); + + const likesArray = await getLikes(); + likesCount(likeBtn, likesArray, numOfLikes); + + likeBtn.addEventListener('click', async (e) => { + await createLike(likeBtn.id); + const newLikes = await getLikes(); + likesCount(e.target, newLikes, numOfLikes); + }); }; export default getMeals; \ No newline at end of file diff --git a/src/index.js b/src/index.js index 6b734a2..5024e35 100644 --- a/src/index.js +++ b/src/index.js @@ -1,4 +1,19 @@ import './style.css'; import getMeals from './getMeals'; +import { likesCount } from './functions'; +import createLike from './createLike'; +import getLikes from './getLikes'; + + +// const numOfLikes = document.querySelector('.no-of-likes'); + + // const likesArray = await getLikes(); + // likesCount(likeBtn, likesArray, numOfLikes); + + // likeBtn.addEventListener('click', async (e) => { + // await createLike(likeBtn.id); + // const newLikes = await getLikes(); + // likesCount(e.target, newLikes, numOfLikes); + // }); getMeals(); \ No newline at end of file From 273691669a4a308659ab24195c43fff23c003d29 Mon Sep 17 00:00:00 2001 From: Cathella Date: Fri, 19 Nov 2021 16:10:39 +0300 Subject: [PATCH 06/22] Refactor functions, change app id for likes api --- src/createLike.js | 4 +-- src/functions.js | 11 ------ src/getLikes.js | 2 +- src/getMeals.js | 45 ++---------------------- src/index.html | 49 ++++++++------------------ src/index.js | 22 +++--------- src/mealCounter.js | 3 ++ src/mealList.js | 86 ++++++++++++++++++++++++++++++++++++++++++++++ src/style.css | 4 +++ 9 files changed, 117 insertions(+), 109 deletions(-) create mode 100644 src/mealCounter.js create mode 100644 src/mealList.js diff --git a/src/createLike.js b/src/createLike.js index ebcfedb..d728e3f 100644 --- a/src/createLike.js +++ b/src/createLike.js @@ -1,8 +1,8 @@ const createLike = async (mealId) => { - const response = fetch('https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/mfrWKMutGeXBQO8OVg4U/likes', { + const response = await fetch('https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/8WhiXHgGMaGrsfo6vYsR/likes', { method: 'POST', body: JSON.stringify({ - item_id: mealId + item_id: mealId, }), headers: { 'Content-type': 'application/json; charset=UTF-8', diff --git a/src/functions.js b/src/functions.js index 143521c..e69de29 100644 --- a/src/functions.js +++ b/src/functions.js @@ -1,11 +0,0 @@ -const mealsCounter = (data) => data.length; - -const likesCount = (target, likesArr, numOfLikes) => { - likesArr.forEach((obj) => { - if (obj.item_id === target.id) { - numOfLikes.innerHTML = `${obj.likes} Likes`; - } - }); -}; - -export { mealsCounter, likesCount }; \ No newline at end of file diff --git a/src/getLikes.js b/src/getLikes.js index 3ac1864..3d854d2 100644 --- a/src/getLikes.js +++ b/src/getLikes.js @@ -1,6 +1,6 @@ const getLikes = async () => { const response = await fetch( - 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/mfrWKMutGeXBQO8OVg4U/likes', + 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/8WhiXHgGMaGrsfo6vYsR/likes', ); return response.json(); }; diff --git a/src/getMeals.js b/src/getMeals.js index 3b299fa..c470b56 100644 --- a/src/getMeals.js +++ b/src/getMeals.js @@ -1,50 +1,9 @@ -import getLikes from "./getLikes"; -import createLike from "./createLike"; -import { mealsCounter, likesCount } from "./functions"; - const getMeals = async () => { - const foodItemsDiv = document.getElementById('food-items'); - const homeCount = document.querySelector('#meal-count'); - const response = await fetch( 'https://www.themealdb.com/api/json/v1/1/filter.php?a=indian', ); - const data = await response.json(); - homeCount.textContent = mealsCounter(data.meals); - - data.meals.forEach( food => { - const foodDiv = document.createElement('div'); - foodDiv.className = 'col-lg-4'; - foodDiv.innerHTML = ` -
-
- Meal Image -
-
-

${food.strMeal}

- -
- -
- -
-
- `; - foodItemsDiv.appendChild(foodDiv); - }); - - const likeBtn = document.querySelector('.like-btn'); - - const likesArray = await getLikes(); - likesCount(likeBtn, likesArray, numOfLikes); - - likeBtn.addEventListener('click', async (e) => { - await createLike(likeBtn.id); - const newLikes = await getLikes(); - likesCount(e.target, newLikes, numOfLikes); - }); + const result = await response.json(); + return result.meals; }; export default getMeals; \ No newline at end of file diff --git a/src/index.html b/src/index.html index 8bc5067..8e526b1 100644 --- a/src/index.html +++ b/src/index.html @@ -1,11 +1,13 @@ - - - - FoodMood - - + + + + + + + FoodMood + - +
@@ -36,44 +38,21 @@

Let's Start Cooking With Popula

- +
- -
- - - -
-

Meals Name Here

-

Category Name

-
-

Instructions:

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque ipsa repellat fuga, veritatis voluptatum eos dolore ipsam sequi, animi, impedit repudiandae excepturi ea suscipit beatae nam cumque esse maxime inventore.

-
- -
-
- Watch video -
-
-
-
- +
© 2021 FoodMood.
- + - - + \ No newline at end of file diff --git a/src/index.js b/src/index.js index 5024e35..b381e04 100644 --- a/src/index.js +++ b/src/index.js @@ -1,19 +1,7 @@ import './style.css'; -import getMeals from './getMeals'; -import { likesCount } from './functions'; -import createLike from './createLike'; -import getLikes from './getLikes'; +import getMeals from './getMeals.js'; +import mealList from './mealList.js'; - -// const numOfLikes = document.querySelector('.no-of-likes'); - - // const likesArray = await getLikes(); - // likesCount(likeBtn, likesArray, numOfLikes); - - // likeBtn.addEventListener('click', async (e) => { - // await createLike(likeBtn.id); - // const newLikes = await getLikes(); - // likesCount(e.target, newLikes, numOfLikes); - // }); - -getMeals(); \ No newline at end of file +window.addEventListener('load', async () => { + mealList(await getMeals()); +}); \ No newline at end of file diff --git a/src/mealCounter.js b/src/mealCounter.js new file mode 100644 index 0000000..1974c26 --- /dev/null +++ b/src/mealCounter.js @@ -0,0 +1,3 @@ +const mealCounter = (data) => data.length; + +export default mealCounter; \ No newline at end of file diff --git a/src/mealList.js b/src/mealList.js new file mode 100644 index 0000000..782e85a --- /dev/null +++ b/src/mealList.js @@ -0,0 +1,86 @@ +/* eslint-disable no-await-in-loop */ +import createLike from './createLike.js'; +import getLikes from './getLikes.js'; +import mealCounter from './mealCounter.js'; + +const mainDiv = document.querySelector('#food-items'); + +const likesCount = (target, likesArray, numOfLikes) => { + likesArray.forEach((obj) => { + if (obj.item_id === target.id) { + numOfLikes.innerHTML = `${obj.likes} likes `; + } + }); +}; + +const mealList = async (data) => { + const mealCount = document.querySelector('#home-count'); + mealCount.innerHTML = mealCounter(data); + + for (let i = 0; i <= data.length - 1; i += 1) { + const foodDiv = document.createElement('div'); + foodDiv.classList.add('col-lg-4'); + + const listItem = document.createElement('div'); + listItem.id = data[i].idMeal; + listItem.classList.add('meal-item', 'text-center', 'card', 'shadow', 'mb-4', 'border-0'); + + const itemImage = document.createElement('div'); + itemImage.classList.add('meal-img'); + + const image = document.createElement('img'); + image.src = data[i].strMealThumb; + + itemImage.appendChild(image); + listItem.appendChild(itemImage); + + const itemText = document.createElement('div'); + itemText.classList.add('meal-name', 'd-flex', 'pt-3', 'justify-content-center', 'align-items-center'); + + const mealName = document.createElement('h3'); + mealName.classList.add('fs-6', 'me-2', 'pt-1'); + mealName.innerHTML = data[i].strMeal; + + const likeBtn = document.createElement('i'); + likeBtn.classList.add('bi', 'bi-heart', 'like-btn', 'text-danger'); + likeBtn.id = data[i].idMeal; + + itemText.appendChild(mealName); + itemText.appendChild(likeBtn); + listItem.appendChild(itemText); + + const mealLikes = document.createElement('div'); + const numOfLikes = document.createElement('small'); + numOfLikes.innerHTML = '0 likes'; + mealLikes.appendChild(numOfLikes); + listItem.appendChild(mealLikes); + + const commentContainer = document.createElement('div'); + commentContainer.classList.add('comment', 'mb-4', 'mt-2'); + + const button = document.createElement('button'); + button.classList.add('btn', 'btn-warning', 'rounded-pill', 'px-4', 'shadow', 'comment-btn'); + button.setAttribute('id', `${data[i].idMeal}`); + button.setAttribute('type', 'button'); + button.setAttribute('data-bs-toggle', 'modal'); + button.setAttribute('data-bs-target', '#staticBackdrop'); + button.innerHTML = 'comments'; + + commentContainer.appendChild(button); + listItem.appendChild(commentContainer); + + foodDiv.appendChild(listItem); + mainDiv.appendChild(foodDiv); + + const likesArray = await getLikes(); + likesCount(likeBtn, likesArray, numOfLikes); + + likeBtn.addEventListener('click', async (e) => { + await createLike(likeBtn.id); + const newLikes = await getLikes(); + likesCount(e.target, newLikes, numOfLikes); + }); + } +}; + +export default mealList; \ No newline at end of file diff --git a/src/style.css b/src/style.css index 1b0494b..4bdf830 100644 --- a/src/style.css +++ b/src/style.css @@ -79,3 +79,7 @@ body { .meal-img img { width: 100%; } + +.like-btn { + cursor: pointer; +} From 9f36a9bb72f5049c48a57db6a5985eb4b44ad4ea Mon Sep 17 00:00:00 2001 From: Cathella Date: Fri, 19 Nov 2021 16:17:05 +0300 Subject: [PATCH 07/22] Remove linter errors --- src/index.js | 4 ++-- src/mealList.js | 6 +++--- webpack.config.js | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/index.js b/src/index.js index b381e04..36a28db 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,6 @@ import './style.css'; -import getMeals from './getMeals.js'; -import mealList from './mealList.js'; +import getMeals from './getMeals'; +import mealList from './mealList'; window.addEventListener('load', async () => { mealList(await getMeals()); diff --git a/src/mealList.js b/src/mealList.js index 782e85a..bdbd25a 100644 --- a/src/mealList.js +++ b/src/mealList.js @@ -1,7 +1,7 @@ /* eslint-disable no-await-in-loop */ -import createLike from './createLike.js'; -import getLikes from './getLikes.js'; -import mealCounter from './mealCounter.js'; +import createLike from './createLike'; +import getLikes from './getLikes'; +import mealCounter from './mealCounter'; const mainDiv = document.querySelector('#food-items'); diff --git a/webpack.config.js b/webpack.config.js index c4ce423..a13f891 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -25,4 +25,4 @@ module.exports = { }, ], }, -} +}; From 90ad760a830531b1c3665c184ad5c0fad3523876 Mon Sep 17 00:00:00 2001 From: Qoosim Date: Fri, 19 Nov 2021 16:48:43 +0100 Subject: [PATCH 08/22] Resolve conflict --- src/createLike.js | 12 +----------- src/functions.js | 4 +--- src/getLikes.js | 1 - src/index.js | 4 +--- src/style.css | 2 ++ 5 files changed, 5 insertions(+), 18 deletions(-) diff --git a/src/createLike.js b/src/createLike.js index b0b7d35..b2814ca 100644 --- a/src/createLike.js +++ b/src/createLike.js @@ -1,13 +1,3 @@ -const createLike = async () => { - const response = await fetch( - 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/mfrWKMutGeXBQO8OVg4U/likes', { - method: 'POST', - body: JSON.stringify({ - item_id: mealId, - }), - headers: { - 'Content-type': 'application/json; charset=UTF-8', - }, const createLike = async (mealId) => { const response = await fetch('https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/8WhiXHgGMaGrsfo6vYsR/likes', { method: 'POST', @@ -17,7 +7,7 @@ const createLike = async (mealId) => { headers: { 'Content-type': 'application/json; charset=UTF-8', }, - ); + }); return response.text(); }; diff --git a/src/functions.js b/src/functions.js index 961c089..c1d4ab3 100644 --- a/src/functions.js +++ b/src/functions.js @@ -127,6 +127,4 @@ closeBtn.addEventListener('click', () => { mealDetailsContent.parentElement.classList.remove('showComment'); }); -export { - getMealList, -}; +export default getMealList; diff --git a/src/getLikes.js b/src/getLikes.js index fed5c6b..78b56bd 100644 --- a/src/getLikes.js +++ b/src/getLikes.js @@ -1,6 +1,5 @@ const getLikes = async () => { const response = await fetch( - 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/mfrWKMutGeXBQO8OVg4U/likes', 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/8WhiXHgGMaGrsfo6vYsR/likes', ); return response.json(); diff --git a/src/index.js b/src/index.js index de9bec7..f904e82 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,5 @@ import './style.css'; -import { - getMealList, -} from './functions'; +import getMealList from './functions'; getMealList(); import getMeals from './getMeals'; diff --git a/src/style.css b/src/style.css index 2823f2e..d0134ff 100644 --- a/src/style.css +++ b/src/style.css @@ -92,6 +92,8 @@ body { ::placeholder { font-style: italic; +} + .like-btn { cursor: pointer; } From 1ec3c1313a3b7c0b3cb10d0253948030d8891abf Mon Sep 17 00:00:00 2001 From: Qoosim Date: Fri, 19 Nov 2021 18:52:05 +0100 Subject: [PATCH 09/22] Resolve conflict --- dist/index.html | 55 +++++++++++++++--------------------------------- dist/main.js | 54 +++++++++++++++++++++++++++++++++++++++++++++-- src/functions.js | 3 ++- src/getMeals.js | 2 +- src/index.html | 2 +- src/index.js | 2 ++ src/mealList.js | 2 +- 7 files changed, 76 insertions(+), 44 deletions(-) diff --git a/dist/index.html b/dist/index.html index 8e0ddf3..e9ba674 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,11 +1,13 @@ - - - - FoodMood - - + + + + + + + FoodMood + - +
@@ -37,13 +32,13 @@

Let's Start Cooking With Popular Recipes

Want to learn but confused of how to start? No need to worry again!

- Explore Meals + Explore Meals
- +
@@ -51,37 +46,21 @@

Let's Start Cooking With Popula - -
-

Meals Name Here

-

Category Name

-
-

Instructions:

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque ipsa repellat fuga, veritatis voluptatum eos dolore ipsam sequi, animi, impedit repudiandae excepturi ea suscipit beatae nam cumque esse maxime inventore.

-
- -
-
- Watch video -
-
-
+

- +
© 2021 FoodMood.
- + - - - + \ No newline at end of file diff --git a/dist/main.js b/dist/main.js index 807ccf0..edcef13 100644 --- a/dist/main.js +++ b/dist/main.js @@ -16,7 +16,7 @@ \*************************************************************/ /***/ ((module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Roboto&display=swap);\"]);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"* {\\n padding: 0;\\n margin: 0;\\n box-sizing: border-box;\\n font-family: 'Roboto', sans-serif;\\n}\\n\\nh1, h1 span, h2, h3, h4, h5, h6, .btn, .navbar-brand, .navbar-brand span {\\n font-family: 'Poppins', sans-serif;\\n}\\n\\nbody {\\n background: bisque;\\n}\\n\\n.meal-details {\\n position: fixed;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n color: white;\\n background: rgb(197, 99, 20);\\n width: 70%;\\n border-radius: 1rem;\\n text-align: center;\\n padding: 2rem 0;\\n display: none;\\n}\\n\\n.meal-details::-webkit-scrollbar {\\n width: 10px;\\n}\\n\\n.meal-details::-webkit-scrollbar-thumb {\\n background: #f0f0f0;\\n border-radius: 2rem;\\n}\\n\\n.showRecipe {\\n display: block;\\n}\\n\\n.meal-details-content {\\n margin: 2rem;\\n}\\n\\n.close-btn {\\n position: absolute;\\n right: 2rem;\\n top: 2rem;\\n font-size: 1.8rem;\\n background: #fff;\\n border: none;\\n width: 35px;\\n height: 35px;\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.meal-img {\\n height: 200px;\\n overflow: hidden;\\n}\\n\\n.meal-img img {\\n width: 100%;\\n}\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://webpack-boilerplate/./src/style.css?./node_modules/css-loader/dist/cjs.js"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Roboto&display=swap);\"]);\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css);\"]);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"* {\\n padding: 0;\\n margin: 0;\\n box-sizing: border-box;\\n font-family: 'Roboto', sans-serif;\\n}\\n\\nh1,\\nh1 span,\\nh2,\\nh3,\\nh4,\\nh5,\\nh6,\\n.btn,\\n.navbar-brand,\\n.navbar-brand span {\\n font-family: 'Poppins', sans-serif;\\n}\\n\\nbody {\\n background: bisque;\\n}\\n\\n.meal-details {\\n position: fixed;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n color: #000;\\n background: rgb(255, 215, 0); /* rgb(197, 99, 20) */\\n width: 50%;\\n height: 100%;\\n overflow-y: scroll;\\n border-radius: 0.2rem;\\n text-align: center;\\n padding: 2rem 0;\\n display: none;\\n}\\n\\n.meal-details::-webkit-scrollbar {\\n width: 10px;\\n}\\n\\n.meal-details::-webkit-scrollbar-thumb {\\n background: #fff;\\n border-radius: 2rem;\\n}\\n\\n.showComment {\\n display: block;\\n}\\n\\n.meal-details-content {\\n margin: 2rem;\\n}\\n\\n.close-btn {\\n position: absolute;\\n right: 2rem;\\n top: 2rem;\\n font-size: 1.8rem;\\n background: #fff;\\n border: none;\\n width: 35px;\\n height: 35px;\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.meal-img {\\n height: 250px;\\n overflow: hidden;\\n}\\n\\n.meal-img img {\\n width: 100%;\\n}\\n\\n.recipe-meal-img img {\\n width: 150px;\\n height: 150px;\\n border-radius: 50%;\\n margin: 0 auto;\\n display: block;\\n}\\n\\n::placeholder {\\n font-style: italic;\\n}\\n\\n.like-btn {\\n cursor: pointer;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://webpack-boilerplate/./src/style.css?./node_modules/css-loader/dist/cjs.js"); /***/ }), @@ -110,13 +110,63 @@ eval("\n\n/* istanbul ignore next */\nfunction styleTagTransform(css, styleElem /***/ }), +/***/ "./src/createLike.js": +/*!***************************!*\ + !*** ./src/createLike.js ***! + \***************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nconst createLike = async (mealId) => {\n const response = await fetch('https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/8WhiXHgGMaGrsfo6vYsR/likes', {\n method: 'POST',\n body: JSON.stringify({\n item_id: mealId,\n }),\n headers: {\n 'Content-type': 'application/json; charset=UTF-8',\n },\n });\n return response.text();\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (createLike);\n\n\n//# sourceURL=webpack://webpack-boilerplate/./src/createLike.js?"); + +/***/ }), + +/***/ "./src/getLikes.js": +/*!*************************!*\ + !*** ./src/getLikes.js ***! + \*************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nconst getLikes = async () => {\n const response = await fetch(\n 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/8WhiXHgGMaGrsfo6vYsR/likes',\n );\n return response.json();\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (getLikes);\n\n\n//# sourceURL=webpack://webpack-boilerplate/./src/getLikes.js?"); + +/***/ }), + +/***/ "./src/getMeals.js": +/*!*************************!*\ + !*** ./src/getMeals.js ***! + \*************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nconst getMeals = async () => {\n const response = await fetch(\n 'https://www.themealdb.com/api/json/v1/1/filter.php?a=indian',\n );\n const result = await response.json();\n return result.meals;\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (getMeals);\n\n\n//# sourceURL=webpack://webpack-boilerplate/./src/getMeals.js?"); + +/***/ }), + /***/ "./src/index.js": /*!**********************!*\ !*** ./src/index.js ***! \**********************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./style.css */ \"./src/style.css\");\n\n\nconst getMeals = async () => {\n fetch('https://www.themealdb.com/api/json/v1/1/search.php?f=b')\n .then(res=>res.json())\n // .then(data=> console.log(data))\n .then(data=> displayMeals(data))\n}\n\nconst displayMeals = foods => {\n const foodItemsDiv = document.getElementById('food-items');\n\n foods.meals.forEach(meal => {\n const foodDiv = document.createElement('div');\n foodDiv.className = 'col-lg-4';\n const foodInfo = `\n
\n
\n \"\"\n
\n
\n

${meal.strMeal}

\n
\n
\n `;\n foodDiv.innerHTML = foodInfo;\n foodItemsDiv.appendChild(foodDiv);\n});\n}\n\ngetMeals();\n\n//# sourceURL=webpack://webpack-boilerplate/./src/index.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./style.css */ \"./src/style.css\");\n/* harmony import */ var _getMeals__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./getMeals */ \"./src/getMeals.js\");\n/* harmony import */ var _mealList__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./mealList */ \"./src/mealList.js\");\n\n// import getMealList from './functions';\n\n// getMealList();\n\n\n\nwindow.addEventListener('load', async () => {\n (0,_mealList__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(await (0,_getMeals__WEBPACK_IMPORTED_MODULE_1__[\"default\"])());\n});\n\n\n//# sourceURL=webpack://webpack-boilerplate/./src/index.js?"); + +/***/ }), + +/***/ "./src/mealCounter.js": +/*!****************************!*\ + !*** ./src/mealCounter.js ***! + \****************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\nconst mealCounter = (data) => data.length;\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (mealCounter);\n\n//# sourceURL=webpack://webpack-boilerplate/./src/mealCounter.js?"); + +/***/ }), + +/***/ "./src/mealList.js": +/*!*************************!*\ + !*** ./src/mealList.js ***! + \*************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _createLike__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./createLike */ \"./src/createLike.js\");\n/* harmony import */ var _getLikes__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./getLikes */ \"./src/getLikes.js\");\n/* harmony import */ var _mealCounter__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./mealCounter */ \"./src/mealCounter.js\");\n/* eslint-disable no-await-in-loop */\n\n\n\n\nconst mainDiv = document.querySelector('#food-items');\n\nconst likesCount = (target, likesArray, numOfLikes) => {\n likesArray.forEach((obj) => {\n if (obj.item_id === target.id) {\n numOfLikes.innerHTML = `${obj.likes} likes `;\n }\n });\n};\n\nconst mealList = async (data) => {\n const mealCount = document.querySelector('#home-count');\n mealCount.innerHTML = (0,_mealCounter__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(data);\n\n for (let i = 0; i <= data.length - 1; i += 1) {\n const foodDiv = document.createElement('div');\n foodDiv.classList.add('col-lg-4');\n\n const listItem = document.createElement('div');\n listItem.id = data[i].idMeal;\n listItem.classList.add('meal-item', 'text-center', 'card', 'shadow', 'mb-4', 'border-0');\n\n const itemImage = document.createElement('div');\n itemImage.classList.add('meal-img');\n\n const image = document.createElement('img');\n image.src = data[i].strMealThumb;\n\n itemImage.appendChild(image);\n listItem.appendChild(itemImage);\n\n const itemText = document.createElement('div');\n itemText.classList.add('meal-name', 'd-flex', 'pt-3', 'justify-content-center', 'align-items-center');\n\n const mealName = document.createElement('h3');\n mealName.classList.add('fs-6', 'me-2', 'pt-1');\n mealName.innerHTML = data[i].strMeal;\n\n const likeBtn = document.createElement('i');\n likeBtn.classList.add('bi', 'bi-heart', 'like-btn', 'text-danger');\n likeBtn.id = data[i].idMeal;\n\n itemText.appendChild(mealName);\n itemText.appendChild(likeBtn);\n listItem.appendChild(itemText);\n\n const mealLikes = document.createElement('div');\n const numOfLikes = document.createElement('small');\n numOfLikes.innerHTML = '0 likes';\n mealLikes.appendChild(numOfLikes);\n listItem.appendChild(mealLikes);\n\n const commentContainer = document.createElement('div');\n commentContainer.classList.add('comment', 'mb-4', 'mt-2');\n\n const button = document.createElement('button');\n button.classList.add('btn', 'btn-warning', 'rounded-pill', 'px-4', 'shadow', 'comment-btn');\n button.setAttribute('id', `${data[i].idMeal}`);\n button.setAttribute('type', 'button');\n button.setAttribute('data-bs-toggle', 'modal');\n button.setAttribute('data-bs-target', '#staticBackdrop');\n button.innerHTML = 'comments';\n\n commentContainer.appendChild(button);\n listItem.appendChild(commentContainer);\n\n foodDiv.appendChild(listItem);\n mainDiv.appendChild(foodDiv);\n\n const likesArray = await (0,_getLikes__WEBPACK_IMPORTED_MODULE_1__[\"default\"])();\n likesCount(likeBtn, likesArray, numOfLikes);\n\n likeBtn.addEventListener('click', async (e) => {\n await (0,_createLike__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(likeBtn.id);\n const newLikes = await (0,_getLikes__WEBPACK_IMPORTED_MODULE_1__[\"default\"])();\n likesCount(e.target, newLikes, numOfLikes);\n });\n }\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (mealList);\n\n\n//# sourceURL=webpack://webpack-boilerplate/./src/mealList.js?"); /***/ }) diff --git a/src/functions.js b/src/functions.js index c1d4ab3..49aaebd 100644 --- a/src/functions.js +++ b/src/functions.js @@ -1,5 +1,5 @@ const foodItemsDiv = document.getElementById('food-items'); -const mealCount = document.querySelector('#meal-count'); +const mealCount = document.querySelector('#home-count'); const mealDetailsContent = document.querySelector('.meal-details-content'); const closeBtn = document.querySelector('.close-btn'); @@ -10,6 +10,7 @@ const getMealList = async () => { const response = await fetch(url); const data = await response.json(); data.meals.forEach((food) => { + console.log(food); const foodDiv = document.createElement('div'); foodDiv.className = 'col-lg-4'; foodDiv.setAttribute('data-id', `${food.idMeal}`); diff --git a/src/getMeals.js b/src/getMeals.js index c470b56..a04b78f 100644 --- a/src/getMeals.js +++ b/src/getMeals.js @@ -6,4 +6,4 @@ const getMeals = async () => { return result.meals; }; -export default getMeals; \ No newline at end of file +export default getMeals; diff --git a/src/index.html b/src/index.html index 51144fb..75ca5b0 100644 --- a/src/index.html +++ b/src/index.html @@ -63,4 +63,4 @@

Let's Start Cooking With Popula > - \ No newline at end of file + diff --git a/src/index.js b/src/index.js index f904e82..1f10a6c 100644 --- a/src/index.js +++ b/src/index.js @@ -2,9 +2,11 @@ import './style.css'; import getMealList from './functions'; getMealList(); +/* import getMeals from './getMeals'; import mealList from './mealList'; window.addEventListener('load', async () => { mealList(await getMeals()); }); +*/ diff --git a/src/mealList.js b/src/mealList.js index bdbd25a..f6ec704 100644 --- a/src/mealList.js +++ b/src/mealList.js @@ -83,4 +83,4 @@ const mealList = async (data) => { } }; -export default mealList; \ No newline at end of file +export default mealList; From a9beb1397bf0d1b2e20d267602be0f60150c710c Mon Sep 17 00:00:00 2001 From: Cathella Date: Fri, 19 Nov 2021 20:57:57 +0300 Subject: [PATCH 10/22] declare more variables in the mealist --- src/mealList.js | 97 ++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 96 insertions(+), 1 deletion(-) diff --git a/src/mealList.js b/src/mealList.js index bdbd25a..38e5d96 100644 --- a/src/mealList.js +++ b/src/mealList.js @@ -4,6 +4,8 @@ import getLikes from './getLikes'; import mealCounter from './mealCounter'; const mainDiv = document.querySelector('#food-items'); +const mealDetailsContent = document.querySelector('.meal-details-content'); +const closeBtn = document.querySelector('.close-btn'); const likesCount = (target, likesArray, numOfLikes) => { likesArray.forEach((obj) => { @@ -23,6 +25,7 @@ const mealList = async (data) => { const listItem = document.createElement('div'); listItem.id = data[i].idMeal; + foodDiv.setAttribute('data-id', `${data[i].idMeal}`); listItem.classList.add('meal-item', 'text-center', 'card', 'shadow', 'mb-4', 'border-0'); const itemImage = document.createElement('div'); @@ -83,4 +86,96 @@ const mealList = async (data) => { } }; -export default mealList; \ No newline at end of file +const postComment = async (data) => { + const url = 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/8WhiXHgGMaGrsfo6vYsR/comments'; + const response = await fetch(url, { + method: 'POST', + headers: { + 'Content-type': 'application/json', + }, + body: JSON.stringify(data), + }); + return response.ok; +}; + +const getComment = async (item) => { + const url = `https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/8WhiXHgGMaGrsfo6vYsR/comments?item_id=${item.idMeal}`; + let myComment = await fetch(url).then((response) => response.json()); + const ul = document.querySelector('#list-comment'); + ul.innerHTML = ''; + const h3 = document.querySelector('.comment-count'); + h3.innerHTML = `Comments(${myComment.length ? myComment.length : 0})`; + if (!myComment.length) myComment = []; + myComment.forEach((comment) => { + ul.innerHTML += ` +
  • +

    ${comment.creation_date}

    +

    ${comment.username}

    +

    ${comment.comment}

    +
    • + `; + }); +}; + +const mealModal = async (meal) => { + [meal] = meal; + mealDetailsContent.innerHTML = ` +

    ${meal.strMeal}

    +

    ${meal.strCategory}

    +
    +

    Instructions:

    +

    ${meal.strInstructions}

    +
    +
    + +
    +

    +
    +
      +
    +
    +

    Add a comment

    +
    + + + +
    + `; + mealDetailsContent.parentElement.classList.add('showComment'); + + const commentBtn = document.querySelector('.commentBtn'); + commentBtn.addEventListener('click', () => { + const username = document.querySelector('#commentator').value; + const comment = document.querySelector('#comment').value; + const itemId = meal.idMeal; + const newData = { + item_id: itemId, + username, + comment, + }; + postComment(newData); + document.querySelector('#commentator').value = ''; + document.querySelector('#comment').value = ''; + setTimeout(() => { + getComment(meal); + }, 1000); + }); + getComment(meal); +}; + +const getMeal = async (e) => { + e.preventDefault(); + if (e.target.classList.contains('comment-btn')) { + const mealItem = e.target.parentElement.parentElement.parentElement; + const url = `https://www.themealdb.com/api/json/v1/1/lookup.php?i=${mealItem.dataset.id}`; + const response = await fetch(url).then((response) => response.json()).then((data) => data); + mealModal(response.meals); + } +}; + +mainDiv.addEventListener('click', getMeal); +closeBtn.addEventListener('click', () => { + mealDetailsContent.parentElement.classList.remove('showComment'); +}); + +export default mealList; From 3ba070c745a986a550663b28d818a320b76155f1 Mon Sep 17 00:00:00 2001 From: Cathella Date: Fri, 19 Nov 2021 21:08:18 +0300 Subject: [PATCH 11/22] Fix style.css conflict --- src/style.css | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/src/style.css b/src/style.css index a261c4a..d0134ff 100644 --- a/src/style.css +++ b/src/style.css @@ -82,13 +82,6 @@ body { width: 100%; } -<<<<<<< HEAD -.like-btn { - cursor: pointer; -} - -======= ->>>>>>> 1ec3c1313a3b7c0b3cb10d0253948030d8891abf .recipe-meal-img img { width: 150px; height: 150px; @@ -99,11 +92,8 @@ body { ::placeholder { font-style: italic; -<<<<<<< HEAD -======= } .like-btn { cursor: pointer; ->>>>>>> 1ec3c1313a3b7c0b3cb10d0253948030d8891abf } From 069eb7df56dfa3ffa72ddddc837fd4208a718329 Mon Sep 17 00:00:00 2001 From: Cathella Date: Fri, 19 Nov 2021 21:23:23 +0300 Subject: [PATCH 12/22] Remove function.js --- src/functions.js | 134 ----------------------------------------------- src/style.css | 2 +- 2 files changed, 1 insertion(+), 135 deletions(-) delete mode 100644 src/functions.js diff --git a/src/functions.js b/src/functions.js deleted file mode 100644 index 2436ead..0000000 --- a/src/functions.js +++ /dev/null @@ -1,134 +0,0 @@ -const foodItemsDiv = document.getElementById('food-items'); -const mealCount = document.querySelector('#home-count'); -const mealDetailsContent = document.querySelector('.meal-details-content'); -const closeBtn = document.querySelector('.close-btn'); - -// const appId = 'Fp12eL7c25FQ3gxVeMCZ'; -const appId = '8WhiXHgGMaGrsfo6vYsR'; - -const getMealList = async () => { - const url = 'https://www.themealdb.com/api/json/v1/1/filter.php?a=indian'; - const response = await fetch(url); - const data = await response.json(); - data.meals.forEach((food) => { - console.log(food); - const foodDiv = document.createElement('div'); - foodDiv.className = 'col-lg-4'; - foodDiv.setAttribute('data-id', `${food.idMeal}`); - foodDiv.innerHTML = ` -
    -
    - Meal Image -
    -
    -

    ${food.strMeal}

    - -
    - -
    - -
    -
    - `; - foodItemsDiv.appendChild(foodDiv); - mealCount.textContent = data.meals.length; - }); -}; - -const postComment = async (data) => { - const url = 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/8WhiXHgGMaGrsfo6vYsR/comments'; - const response = await fetch(url, { - method: 'POST', - headers: { - 'Content-type': 'application/json', - }, - body: JSON.stringify(data), - }); - return response.ok; -}; - -const getComment = async (item) => { - const url = `https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/8WhiXHgGMaGrsfo6vYsR/comments?item_id=${item.idMeal}`; - let myComment = await fetch(url).then((response) => response.json()); - const ul = document.querySelector('#list-comment'); - ul.innerHTML = ''; - const h3 = document.querySelector('.comment-count'); - h3.innerHTML = `Comments(${myComment.length ? myComment.length : 0})`; - if (!myComment.length) myComment = []; - myComment.forEach((comment) => { - ul.innerHTML += ` -
  • -

    ${comment.creation_date}

    -

    ${comment.username}

    -

    ${comment.comment}

    -
    • - `; - }); -}; - -const mealModal = async (meal) => { - [meal] = meal; - mealDetailsContent.innerHTML = ` -

    ${meal.strMeal}

    -

    ${meal.strCategory}

    -
    -

    Instructions:

    -

    ${meal.strInstructions}

    -
    -
    - -
    -

    -
    -
      -
    -
    -

    Add a comment

    -
    - - - -
    - `; - mealDetailsContent.parentElement.classList.add('showComment'); - - const commentBtn = document.querySelector('.commentBtn'); - commentBtn.addEventListener('click', () => { - const username = document.querySelector('#commentator').value; - const comment = document.querySelector('#comment').value; - const itemId = meal.idMeal; - const newData = { - item_id: itemId, - username, - comment, - }; - postComment(newData); - document.querySelector('#commentator').value = ''; - document.querySelector('#comment').value = ''; - setTimeout(() => { - getComment(meal); - }, 1000); - }); - getComment(meal); -}; - -const getMeal = async (e) => { - e.preventDefault(); - if (e.target.classList.contains('comment-btn')) { - const mealItem = e.target.parentElement.parentElement.parentElement; - const url = `https://www.themealdb.com/api/json/v1/1/lookup.php?i=${mealItem.dataset.id}`; - const response = await fetch(url).then((response) => response.json()).then((data) => data); - mealModal(response.meals); - } -}; - -foodItemsDiv.addEventListener('click', getMeal); -closeBtn.addEventListener('click', () => { - mealDetailsContent.parentElement.classList.remove('showComment'); -}); - -export { - getMealList, -}; diff --git a/src/style.css b/src/style.css index d0134ff..e39f30d 100644 --- a/src/style.css +++ b/src/style.css @@ -31,7 +31,7 @@ body { left: 50%; transform: translate(-50%, -50%); color: #000; - background: rgb(255, 215, 0); /* rgb(197, 99, 20) */ + background: rgb(255, 215, 0); width: 50%; height: 100%; overflow-y: scroll; From b881efd31159e4ea2e3ed012ffcbc17fc8f90837 Mon Sep 17 00:00:00 2001 From: Qoosim Date: Fri, 19 Nov 2021 19:51:29 +0100 Subject: [PATCH 13/22] Modify the footer --- dist/index.html | 16 +++++++++++++++- dist/main.js | 6 +++--- src/index.html | 14 ++++++++++++++ 3 files changed, 32 insertions(+), 4 deletions(-) diff --git a/dist/index.html b/dist/index.html index e9ba674..20f13f3 100644 --- a/dist/index.html +++ b/dist/index.html @@ -51,11 +51,25 @@

    Let's Start Cooking With Popula + +
    +
    + + Copyright © + + Built by Nakitto Catherine & Qoosim AbdulGhaniyy
    + All Rights Reserved +     +
    +
    - \ No newline at end of file + diff --git a/dist/main.js b/dist/main.js index edcef13..ea7dff5 100644 --- a/dist/main.js +++ b/dist/main.js @@ -16,7 +16,7 @@ \*************************************************************/ /***/ ((module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Roboto&display=swap);\"]);\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css);\"]);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"* {\\n padding: 0;\\n margin: 0;\\n box-sizing: border-box;\\n font-family: 'Roboto', sans-serif;\\n}\\n\\nh1,\\nh1 span,\\nh2,\\nh3,\\nh4,\\nh5,\\nh6,\\n.btn,\\n.navbar-brand,\\n.navbar-brand span {\\n font-family: 'Poppins', sans-serif;\\n}\\n\\nbody {\\n background: bisque;\\n}\\n\\n.meal-details {\\n position: fixed;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n color: #000;\\n background: rgb(255, 215, 0); /* rgb(197, 99, 20) */\\n width: 50%;\\n height: 100%;\\n overflow-y: scroll;\\n border-radius: 0.2rem;\\n text-align: center;\\n padding: 2rem 0;\\n display: none;\\n}\\n\\n.meal-details::-webkit-scrollbar {\\n width: 10px;\\n}\\n\\n.meal-details::-webkit-scrollbar-thumb {\\n background: #fff;\\n border-radius: 2rem;\\n}\\n\\n.showComment {\\n display: block;\\n}\\n\\n.meal-details-content {\\n margin: 2rem;\\n}\\n\\n.close-btn {\\n position: absolute;\\n right: 2rem;\\n top: 2rem;\\n font-size: 1.8rem;\\n background: #fff;\\n border: none;\\n width: 35px;\\n height: 35px;\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.meal-img {\\n height: 250px;\\n overflow: hidden;\\n}\\n\\n.meal-img img {\\n width: 100%;\\n}\\n\\n.recipe-meal-img img {\\n width: 150px;\\n height: 150px;\\n border-radius: 50%;\\n margin: 0 auto;\\n display: block;\\n}\\n\\n::placeholder {\\n font-style: italic;\\n}\\n\\n.like-btn {\\n cursor: pointer;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://webpack-boilerplate/./src/style.css?./node_modules/css-loader/dist/cjs.js"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"./node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ \"./node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@600&family=Roboto&display=swap);\"]);\n___CSS_LOADER_EXPORT___.push([module.id, \"@import url(https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.1/font/bootstrap-icons.css);\"]);\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \"* {\\n padding: 0;\\n margin: 0;\\n box-sizing: border-box;\\n font-family: 'Roboto', sans-serif;\\n}\\n\\nh1,\\nh1 span,\\nh2,\\nh3,\\nh4,\\nh5,\\nh6,\\n.btn,\\n.navbar-brand,\\n.navbar-brand span {\\n font-family: 'Poppins', sans-serif;\\n}\\n\\nbody {\\n background: bisque;\\n}\\n\\n.meal-details {\\n position: fixed;\\n top: 50%;\\n left: 50%;\\n transform: translate(-50%, -50%);\\n color: #000;\\n background: rgb(255, 215, 0);\\n width: 50%;\\n height: 100%;\\n overflow-y: scroll;\\n border-radius: 0.2rem;\\n text-align: center;\\n padding: 2rem 0;\\n display: none;\\n}\\n\\n.meal-details::-webkit-scrollbar {\\n width: 10px;\\n}\\n\\n.meal-details::-webkit-scrollbar-thumb {\\n background: #fff;\\n border-radius: 2rem;\\n}\\n\\n.showComment {\\n display: block;\\n}\\n\\n.meal-details-content {\\n margin: 2rem;\\n}\\n\\n.close-btn {\\n position: absolute;\\n right: 2rem;\\n top: 2rem;\\n font-size: 1.8rem;\\n background: #fff;\\n border: none;\\n width: 35px;\\n height: 35px;\\n border-radius: 50%;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n}\\n\\n.meal-img {\\n height: 250px;\\n overflow: hidden;\\n}\\n\\n.meal-img img {\\n width: 100%;\\n}\\n\\n.recipe-meal-img img {\\n width: 150px;\\n height: 150px;\\n border-radius: 50%;\\n margin: 0 auto;\\n display: block;\\n}\\n\\n::placeholder {\\n font-style: italic;\\n}\\n\\n.like-btn {\\n cursor: pointer;\\n}\\n\", \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://webpack-boilerplate/./src/style.css?./node_modules/css-loader/dist/cjs.js"); /***/ }), @@ -146,7 +146,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac \**********************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./style.css */ \"./src/style.css\");\n/* harmony import */ var _getMeals__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./getMeals */ \"./src/getMeals.js\");\n/* harmony import */ var _mealList__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./mealList */ \"./src/mealList.js\");\n\n// import getMealList from './functions';\n\n// getMealList();\n\n\n\nwindow.addEventListener('load', async () => {\n (0,_mealList__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(await (0,_getMeals__WEBPACK_IMPORTED_MODULE_1__[\"default\"])());\n});\n\n\n//# sourceURL=webpack://webpack-boilerplate/./src/index.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _style_css__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./style.css */ \"./src/style.css\");\n/* harmony import */ var _getMeals__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./getMeals */ \"./src/getMeals.js\");\n/* harmony import */ var _mealList__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./mealList */ \"./src/mealList.js\");\n\n\n\n\nwindow.addEventListener('load', async () => {\n (0,_mealList__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(await (0,_getMeals__WEBPACK_IMPORTED_MODULE_1__[\"default\"])());\n});\n\n\n//# sourceURL=webpack://webpack-boilerplate/./src/index.js?"); /***/ }), @@ -166,7 +166,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac \*************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { -eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _createLike__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./createLike */ \"./src/createLike.js\");\n/* harmony import */ var _getLikes__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./getLikes */ \"./src/getLikes.js\");\n/* harmony import */ var _mealCounter__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./mealCounter */ \"./src/mealCounter.js\");\n/* eslint-disable no-await-in-loop */\n\n\n\n\nconst mainDiv = document.querySelector('#food-items');\n\nconst likesCount = (target, likesArray, numOfLikes) => {\n likesArray.forEach((obj) => {\n if (obj.item_id === target.id) {\n numOfLikes.innerHTML = `${obj.likes} likes `;\n }\n });\n};\n\nconst mealList = async (data) => {\n const mealCount = document.querySelector('#home-count');\n mealCount.innerHTML = (0,_mealCounter__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(data);\n\n for (let i = 0; i <= data.length - 1; i += 1) {\n const foodDiv = document.createElement('div');\n foodDiv.classList.add('col-lg-4');\n\n const listItem = document.createElement('div');\n listItem.id = data[i].idMeal;\n listItem.classList.add('meal-item', 'text-center', 'card', 'shadow', 'mb-4', 'border-0');\n\n const itemImage = document.createElement('div');\n itemImage.classList.add('meal-img');\n\n const image = document.createElement('img');\n image.src = data[i].strMealThumb;\n\n itemImage.appendChild(image);\n listItem.appendChild(itemImage);\n\n const itemText = document.createElement('div');\n itemText.classList.add('meal-name', 'd-flex', 'pt-3', 'justify-content-center', 'align-items-center');\n\n const mealName = document.createElement('h3');\n mealName.classList.add('fs-6', 'me-2', 'pt-1');\n mealName.innerHTML = data[i].strMeal;\n\n const likeBtn = document.createElement('i');\n likeBtn.classList.add('bi', 'bi-heart', 'like-btn', 'text-danger');\n likeBtn.id = data[i].idMeal;\n\n itemText.appendChild(mealName);\n itemText.appendChild(likeBtn);\n listItem.appendChild(itemText);\n\n const mealLikes = document.createElement('div');\n const numOfLikes = document.createElement('small');\n numOfLikes.innerHTML = '0 likes';\n mealLikes.appendChild(numOfLikes);\n listItem.appendChild(mealLikes);\n\n const commentContainer = document.createElement('div');\n commentContainer.classList.add('comment', 'mb-4', 'mt-2');\n\n const button = document.createElement('button');\n button.classList.add('btn', 'btn-warning', 'rounded-pill', 'px-4', 'shadow', 'comment-btn');\n button.setAttribute('id', `${data[i].idMeal}`);\n button.setAttribute('type', 'button');\n button.setAttribute('data-bs-toggle', 'modal');\n button.setAttribute('data-bs-target', '#staticBackdrop');\n button.innerHTML = 'comments';\n\n commentContainer.appendChild(button);\n listItem.appendChild(commentContainer);\n\n foodDiv.appendChild(listItem);\n mainDiv.appendChild(foodDiv);\n\n const likesArray = await (0,_getLikes__WEBPACK_IMPORTED_MODULE_1__[\"default\"])();\n likesCount(likeBtn, likesArray, numOfLikes);\n\n likeBtn.addEventListener('click', async (e) => {\n await (0,_createLike__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(likeBtn.id);\n const newLikes = await (0,_getLikes__WEBPACK_IMPORTED_MODULE_1__[\"default\"])();\n likesCount(e.target, newLikes, numOfLikes);\n });\n }\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (mealList);\n\n\n//# sourceURL=webpack://webpack-boilerplate/./src/mealList.js?"); +eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _createLike__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./createLike */ \"./src/createLike.js\");\n/* harmony import */ var _getLikes__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./getLikes */ \"./src/getLikes.js\");\n/* harmony import */ var _mealCounter__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./mealCounter */ \"./src/mealCounter.js\");\n/* eslint-disable no-await-in-loop */\n\n\n\n\nconst mainDiv = document.querySelector('#food-items');\nconst mealDetailsContent = document.querySelector('.meal-details-content');\nconst closeBtn = document.querySelector('.close-btn');\n\nconst likesCount = (target, likesArray, numOfLikes) => {\n likesArray.forEach((obj) => {\n if (obj.item_id === target.id) {\n numOfLikes.innerHTML = `${obj.likes} likes `;\n }\n });\n};\n\nconst mealList = async (data) => {\n const mealCount = document.querySelector('#home-count');\n mealCount.innerHTML = (0,_mealCounter__WEBPACK_IMPORTED_MODULE_2__[\"default\"])(data);\n\n for (let i = 0; i <= data.length - 1; i += 1) {\n const foodDiv = document.createElement('div');\n foodDiv.classList.add('col-lg-4');\n\n const listItem = document.createElement('div');\n listItem.id = data[i].idMeal;\n foodDiv.setAttribute('data-id', `${data[i].idMeal}`);\n listItem.classList.add('meal-item', 'text-center', 'card', 'shadow', 'mb-4', 'border-0');\n\n const itemImage = document.createElement('div');\n itemImage.classList.add('meal-img');\n\n const image = document.createElement('img');\n image.src = data[i].strMealThumb;\n\n itemImage.appendChild(image);\n listItem.appendChild(itemImage);\n\n const itemText = document.createElement('div');\n itemText.classList.add('meal-name', 'd-flex', 'pt-3', 'justify-content-center', 'align-items-center');\n\n const mealName = document.createElement('h3');\n mealName.classList.add('fs-6', 'me-2', 'pt-1');\n mealName.innerHTML = data[i].strMeal;\n\n const likeBtn = document.createElement('i');\n likeBtn.classList.add('bi', 'bi-heart', 'like-btn', 'text-danger');\n likeBtn.id = data[i].idMeal;\n\n itemText.appendChild(mealName);\n itemText.appendChild(likeBtn);\n listItem.appendChild(itemText);\n\n const mealLikes = document.createElement('div');\n const numOfLikes = document.createElement('small');\n numOfLikes.innerHTML = '0 likes';\n mealLikes.appendChild(numOfLikes);\n listItem.appendChild(mealLikes);\n\n const commentContainer = document.createElement('div');\n commentContainer.classList.add('comment', 'mb-4', 'mt-2');\n\n const button = document.createElement('button');\n button.classList.add('btn', 'btn-warning', 'rounded-pill', 'px-4', 'shadow', 'comment-btn');\n button.setAttribute('id', `${data[i].idMeal}`);\n button.setAttribute('type', 'button');\n button.setAttribute('data-bs-toggle', 'modal');\n button.setAttribute('data-bs-target', '#staticBackdrop');\n button.innerHTML = 'comments';\n\n commentContainer.appendChild(button);\n listItem.appendChild(commentContainer);\n\n foodDiv.appendChild(listItem);\n mainDiv.appendChild(foodDiv);\n\n const likesArray = await (0,_getLikes__WEBPACK_IMPORTED_MODULE_1__[\"default\"])();\n likesCount(likeBtn, likesArray, numOfLikes);\n\n likeBtn.addEventListener('click', async (e) => {\n await (0,_createLike__WEBPACK_IMPORTED_MODULE_0__[\"default\"])(likeBtn.id);\n const newLikes = await (0,_getLikes__WEBPACK_IMPORTED_MODULE_1__[\"default\"])();\n likesCount(e.target, newLikes, numOfLikes);\n });\n }\n};\n\nconst postComment = async (data) => {\n const url = 'https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/8WhiXHgGMaGrsfo6vYsR/comments';\n const response = await fetch(url, {\n method: 'POST',\n headers: {\n 'Content-type': 'application/json',\n },\n body: JSON.stringify(data),\n });\n return response.ok;\n};\n\nconst getComment = async (item) => {\n const url = `https://us-central1-involvement-api.cloudfunctions.net/capstoneApi/apps/8WhiXHgGMaGrsfo6vYsR/comments?item_id=${item.idMeal}`;\n let myComment = await fetch(url).then((response) => response.json());\n const ul = document.querySelector('#list-comment');\n ul.innerHTML = '';\n const h3 = document.querySelector('.comment-count');\n h3.innerHTML = `Comments(${myComment.length ? myComment.length : 0})`;\n if (!myComment.length) myComment = [];\n myComment.forEach((comment) => {\n ul.innerHTML += `\n
  • \n

    ${comment.creation_date}

    \n

    ${comment.username}

    \n

    ${comment.comment}

    \n
    • \n `;\n });\n};\n\nconst mealModal = async (meal) => {\n [meal] = meal;\n mealDetailsContent.innerHTML = `\n

    ${meal.strMeal}

    \n

    ${meal.strCategory}

    \n
    \n

    Instructions:

    \n

    ${meal.strInstructions}

    \n
    \n
    \n \"\"\n
    \n

    \n
    \n
      \n
    \n
    \n

    Add a comment

    \n
    \n \n \n \n
    \n `;\n mealDetailsContent.parentElement.classList.add('showComment');\n\n const commentBtn = document.querySelector('.commentBtn');\n commentBtn.addEventListener('click', () => {\n const username = document.querySelector('#commentator').value;\n const comment = document.querySelector('#comment').value;\n const itemId = meal.idMeal;\n const newData = {\n item_id: itemId,\n username,\n comment,\n };\n postComment(newData);\n document.querySelector('#commentator').value = '';\n document.querySelector('#comment').value = '';\n setTimeout(() => {\n getComment(meal);\n }, 1000);\n });\n getComment(meal);\n};\n\nconst getMeal = async (e) => {\n e.preventDefault();\n if (e.target.classList.contains('comment-btn')) {\n const mealItem = e.target.parentElement.parentElement.parentElement;\n const url = `https://www.themealdb.com/api/json/v1/1/lookup.php?i=${mealItem.dataset.id}`;\n const response = await fetch(url).then((response) => response.json()).then((data) => data);\n mealModal(response.meals);\n }\n};\n\nmainDiv.addEventListener('click', getMeal);\ncloseBtn.addEventListener('click', () => {\n mealDetailsContent.parentElement.classList.remove('showComment');\n});\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (mealList);\n\n\n//# sourceURL=webpack://webpack-boilerplate/./src/mealList.js?"); /***/ }) diff --git a/src/index.html b/src/index.html index 75ca5b0..2e5e7bb 100644 --- a/src/index.html +++ b/src/index.html @@ -51,11 +51,25 @@

    Let's Start Cooking With Popula + +
    +
    + + Copyright © + + Built by Nakitto Catherine & Qoosim AbdulGhaniyy
    + All Rights Reserved +     +
    +