diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..a9a5337 --- /dev/null +++ b/.babelrc @@ -0,0 +1,8 @@ +{ + "env": { + "test": { + "plugins": ["@babel/plugin-transform-modules-commonjs"] + } + } +} + diff --git a/README.md b/README.md index 3dd2328..8ebfbbf 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,53 @@ # JavaScript Group Capstone Project -> This is a simple but powerful webpack boilerplate where I configured basic settings for webpack like HtmlWebpackPlugin, css, local dev server and much more. This will be used as a template for any JavaScript Project. +> This is a JavaScript capstone project. It is a web application based on an external API. A selected API provides data about different recipes. The webapp has two interfaces. 1. A home page showing a list of items that you can "like." 2. A popup window with more data about an item that you can use to comment on the item. -## Getting Started +![screenshot](./src/assets/home_page_2.jpeg) + +## ⚒️ Built with + +- Html +- Css +- JavaScript + +## 🎞️ Frameworks and Technologies used + +- Bootstrap +- Webpack +- HTML +- CSS +- JAVASCRIPT -**This is an example of how you may give instructions on setting up your project locally. -Modify this file to match your project, remove sections that don't apply.** +## 🖥️ Live Demo +- [Demo](https://laughing-hodgkin-321112.netlify.app/) :point_left: +- [Project Presentation](https://youtu.be/QIpw0E4BlwE) :point_left: + +## Getting Started To get a local copy up and running on your machine, follow these simple steps. Enter this in your terminal 👇 ``` - git clone git@github.com:Qoosim/webpack-boilerplate.git + git clone git@github.com:Qoosim/JavaScript-Group-Capstone.git ``` -and you can start building your own project on it. - +## 🛠️ Prerequisites +``` + Install Node.js on your machine +``` + +## 🕹️ Setup +``` + Clone the repository on your machine and cd into it + run npm install + run npm run build + run npm run start +``` ## Authors +👤 **Nakitto Catherine** + +- GitHub: [Catherine](https://github.com/Cathella) +- LinkedIn: [Catherine](https://linkedin.com/in/nakitto-catherine-2020) + 👤 **Qoosim AbdulGhaniyy** - GitHub: [Qoosim](https://github.com/Qoosim) @@ -33,9 +65,8 @@ Give a ⭐️ if you like this project! ## Acknowledgments -- Hat tip to anyone whose code was used -- Inspiration -- etc +- [TheMealDB](https://www.themealdb.com/api.php) for the external API used in the project +- [Involvement API](https://www.notion.so/Involvement-API-869e60b5ad104603aa6db59e08150270) API provided by Microverse ## 📝 License diff --git a/dist/index.html b/dist/index.html index 8e0ddf3..cd6273e 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,28 @@

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 -
-
-
+ +

- + - + + - - diff --git a/dist/main.js b/dist/main.js index 807ccf0..884ad7c 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);\\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,73 @@ eval("\n\n/* istanbul ignore next */\nfunction styleTagTransform(css, styleElem /***/ }), +/***/ "./src/commentCounter.js": +/*!*******************************!*\ + !*** ./src/commentCounter.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 commentCounter = (myComment) => {\n const count = myComment.length ? myComment.length : 0;\n return count;\n};\n\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (commentCounter);\n\n\n//# sourceURL=webpack://webpack-boilerplate/./src/commentCounter.js?"); + +/***/ }), + +/***/ "./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

${meal.strMeal}

\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\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/* harmony import */ var _commentCounter__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./commentCounter */ \"./src/commentCounter.js\");\n/* eslint-disable no-await-in-loop */\n\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(${(0,_commentCounter__WEBPACK_IMPORTED_MODULE_3__[\"default\"])(myComment)})`;\n if (!myComment.length) myComment = [];\n myComment.forEach((comment) => {\n ul.innerHTML += `\n

${comment.creation_date}

${comment.username}

${comment.comment}

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

${meal.strMeal}

${meal.strCategory}

Instructions:

${meal.strInstructions}

\n $\"\"$ \n

\n \n