├── HTML └── recipeDetails.html ├── assets ├── ._favicon_io └── favicon_io │ ├── ._favicon.ico │ ├── favicon.ico │ ├── ._site.webmanifest │ ├── favicon-16x16.png │ ├── favicon-32x32.png │ ├── ._favicon-16x16.png │ ├── ._favicon-32x32.png │ ├── apple-touch-icon.png │ ├── ._apple-touch-icon.png │ ├── ._android-chrome-192x192.png │ ├── ._android-chrome-512x512.png │ ├── android-chrome-192x192.png │ ├── android-chrome-512x512.png │ └── site.webmanifest ├── CSS ├── queries.css ├── mediaQ.css ├── main.css └── style.css ├── README.md ├── JS └── app.js └── index.html /HTML/recipeDetails.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/._favicon_io: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/-StayHomeCookHome/master/assets/._favicon_io -------------------------------------------------------------------------------- /assets/favicon_io/._favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/-StayHomeCookHome/master/assets/favicon_io/._favicon.ico -------------------------------------------------------------------------------- /assets/favicon_io/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/-StayHomeCookHome/master/assets/favicon_io/favicon.ico -------------------------------------------------------------------------------- /assets/favicon_io/._site.webmanifest: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/-StayHomeCookHome/master/assets/favicon_io/._site.webmanifest -------------------------------------------------------------------------------- /assets/favicon_io/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/-StayHomeCookHome/master/assets/favicon_io/favicon-16x16.png -------------------------------------------------------------------------------- /assets/favicon_io/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/-StayHomeCookHome/master/assets/favicon_io/favicon-32x32.png -------------------------------------------------------------------------------- /assets/favicon_io/._favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/-StayHomeCookHome/master/assets/favicon_io/._favicon-16x16.png -------------------------------------------------------------------------------- /assets/favicon_io/._favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/-StayHomeCookHome/master/assets/favicon_io/._favicon-32x32.png -------------------------------------------------------------------------------- /assets/favicon_io/apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/-StayHomeCookHome/master/assets/favicon_io/apple-touch-icon.png -------------------------------------------------------------------------------- /assets/favicon_io/._apple-touch-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/-StayHomeCookHome/master/assets/favicon_io/._apple-touch-icon.png -------------------------------------------------------------------------------- /assets/favicon_io/._android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/-StayHomeCookHome/master/assets/favicon_io/._android-chrome-192x192.png -------------------------------------------------------------------------------- /assets/favicon_io/._android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/-StayHomeCookHome/master/assets/favicon_io/._android-chrome-512x512.png -------------------------------------------------------------------------------- /assets/favicon_io/android-chrome-192x192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/-StayHomeCookHome/master/assets/favicon_io/android-chrome-192x192.png -------------------------------------------------------------------------------- /assets/favicon_io/android-chrome-512x512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/AbeTavarez/-StayHomeCookHome/master/assets/favicon_io/android-chrome-512x512.png -------------------------------------------------------------------------------- /assets/favicon_io/site.webmanifest: -------------------------------------------------------------------------------- 1 | {"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"} -------------------------------------------------------------------------------- /CSS/queries.css: -------------------------------------------------------------------------------- 1 | /*iPad Pro 1024px to 1366 or other large tables*/ 2 | @media only screen and (min-width:1024px) and (max-width:1366px) { 3 | 4 | html, 5 | body { 6 | background-color: red; 7 | } 8 | } 9 | 10 | /* iPad 736px to 1024px*/ 11 | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 12 | 13 | html, 14 | body { 15 | background-color: green 16 | } 17 | } 18 | 19 | /*Iphone X */ 20 | @media only screen and (min-device-width: 375px) and (max-device-width: 812px) { 21 | 22 | html, 23 | body { 24 | background-color: orange; 25 | } 26 | } 27 | 28 | 29 | /*iPhone PLus 667px to 736px*/ 30 | @media only screen and (min-width: 414) and (max-width: 736px) { 31 | 32 | html, 33 | body { 34 | background-color: yellow; 35 | } 36 | } 37 | 38 | /*iPhone 6,7,8 481px to 667px Portrait*/ 39 | @media only screen and (min-width: 375px) and (max-width: 667px) { 40 | 41 | html, 42 | body { 43 | background-color: blue; 44 | } 45 | } -------------------------------------------------------------------------------- /CSS/mediaQ.css: -------------------------------------------------------------------------------- 1 | /*Iphone X */ 2 | @media only screen and (min-device-width: 375px) and (max-device-width: 812px) { 3 | 4 | html, 5 | body { 6 | box-sizing: border-box; 7 | 8 | } 9 | 10 | 11 | .display-random img { 12 | width: 200px; 13 | border-radius: 50px; 14 | } 15 | 16 | .search-article { 17 | display: flex; 18 | flex-direction: column; 19 | } 20 | 21 | .search-bar { 22 | 23 | width: 200px; 24 | height: 35px; 25 | border-radius: 5px; 26 | padding: 5px; 27 | margin: 5px; 28 | } 29 | 30 | footer { 31 | display: flex; 32 | background-color: #a7e9af; 33 | border-radius: 10px; 34 | padding: 5px; 35 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); 36 | margin: 0; 37 | color: white; 38 | 39 | } 40 | 41 | .contact { 42 | font-size: 12px; 43 | margin-bottom: 10px; 44 | } 45 | 46 | .social-media { 47 | margin-top: 5px; 48 | font-size: 14px; 49 | } 50 | 51 | .result { 52 | background-color: #40e0d0; 53 | margin: 10px; 54 | width: 350px; 55 | border: 2px solid #f1fcfc; 56 | border-radius: 10px; 57 | margin-bottom: 20px; 58 | box-shadow: 0 2px rgba(0, 0, 0, 0.5); 59 | } 60 | 61 | .result img { 62 | margin: 10px; 63 | width: 300px; 64 | border: 2px solid #f1fcfc; 65 | border-radius: 75px; 66 | margin-bottom: 80px; 67 | box-shadow: 0 2px rgba(0, 0, 0, 0.5); 68 | } 69 | 70 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Stay Home Cook Home 2 | 3 | [![Netlify Status](https://api.netlify.com/api/v1/badges/910d26dd-1614-447b-b4d3-a642b6e39b95/deploy-status)](https://app.netlify.com/sites/vibrant-yonath-0cbbfa/deploys) 4 | 5 | #StayHomeCookHome 6 | (https://www.stayhomecookhome.com/) 7 | 8 | ## Project Description 9 | 10 | Now that you're working from home, this is the best time to learn how to cook. 11 | 12 | - Get easy, fast and healthy recipes to make at home while you stay safe. 13 | 14 | - See random and delicous food ideas of what to cook at home. 15 | 16 | - Search thousands of recipes on the website and get a full list of ingredients, and a short how-to video. 17 | 18 | ## API and Data Sample 19 | 20 | #### The Meal DB API 21 | 22 | This site is build with The Meal DB API: 23 | (https://www.themealdb.com/api.php) 24 | ![alt text](https://res.cloudinary.com/abetavarez/image/upload/v1586143923/Screen_Shot_2020-04-05_at_11.30.23_PM_e5cyb5.png "JSON DATA") 25 | 26 | #### JSON Data Smaple 27 | 28 | #### Postman 29 | 30 | ![alt text](https://res.cloudinary.com/abetavarez/image/upload/v1586121154/postman_ulhuhm.png "postman json data") 31 | 32 | ## Wireframe 33 | 34 | ### Desktop 35 | 36 | ![alt text](https://res.cloudinary.com/abetavarez/image/upload/v1586127786/sitewire_ti4yi2.png "wireframe image desktop") 37 | 38 | ### Mobile 39 | 40 | ![alt text](https://res.cloudinary.com/abetavarez/image/upload/v1586180975/Screen_Shot_2020-04-06_at_9.49.11_AM_rnbqpw.png "wireframe image mobile") 41 | 42 | ## Code Snippet 43 | 44 | The JSON format was a little hard to work with because all the key were together on a single object. 45 | One of the solutions was to filter the keys I needed with the method .includes() and checking that the value wasn't null or undefind. 46 | 47 | ``` 48 | for (m in meal[x]) { 49 | if (m.includes("Meas") && meal[x][m] != "" && meal[x][m] != " ") { 50 | 51 | let li = document.createElement('li'); 52 | li.innerHTML = meal[x][m]; 53 | ulResult.appendChild(li); 54 | measArr.push(meal[x][m]); 55 | }; 56 | }; 57 | 58 | ``` 59 | 60 | ## Change Log 61 | 62 | The layout of the page had to change because of issues with data coming back from the API. 63 | -------------------------------------------------------------------------------- /CSS/main.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Permanent+Marker|Roboto+Slab&display=swap'); 2 | 3 | :root { 4 | --main-purple: #400082; 5 | --main-green: #00bdaa; 6 | } 7 | 8 | * { 9 | box-sizing: border-box; 10 | } 11 | 12 | body { 13 | background-color: var(--main-green); 14 | font-family: 'Roboto Slab', serif; 15 | margin: 0; 16 | padding: 0; 17 | min-height: 100vh; 18 | font-size: 20px; 19 | } 20 | 21 | main { 22 | size: 600px; 23 | } 24 | 25 | header { 26 | background-color: var(--main-purple); 27 | display: flex; 28 | flex-direction: column; 29 | justify-content: center; 30 | height: 70px; 31 | } 32 | 33 | nav { 34 | color: white; 35 | font-size: 22px; 36 | } 37 | 38 | ul { 39 | display: flex; 40 | flex-direction: row; 41 | justify-content: flex-end; 42 | margin: 0; 43 | padding: 10px; 44 | 45 | } 46 | 47 | li { 48 | list-style: none; 49 | padding: 0 10px; 50 | font-family: 'Permanent Marker', cursive; 51 | } 52 | 53 | .site-name { 54 | color: white; 55 | margin-right: auto; 56 | } 57 | 58 | /*END of Header*/ 59 | 60 | 61 | /*Random Meals Section*/ 62 | h1 { 63 | color: white; 64 | font-family: 'Permanent Marker', cursive; 65 | font-size: 40px; 66 | margin: 0 auto; 67 | padding: 15px; 68 | } 69 | 70 | article { 71 | display: flex; 72 | flex-direction: column; 73 | /* justify-content: center; */ 74 | background-color: #fe346e; 75 | } 76 | 77 | section { 78 | margin-top: 40px; 79 | /* background-color: #400082; */ 80 | box-sizing: border-box; 81 | display: flex; 82 | flex-direction: row; 83 | justify-content: space-evenly; 84 | } 85 | 86 | .display-random { 87 | box-sizing: border-box; 88 | color: white; 89 | display: flex; 90 | flex-direction: column; 91 | /* justify-content: center; */ 92 | align-items: center; 93 | /* flex-grow: 1; */ 94 | /* height: 100px; */ 95 | /* margin: 10px; */ 96 | /* width: 60%; */ 97 | transition: all 0.5s; 98 | } 99 | 100 | 101 | 102 | .display-random:hover { 103 | border: 1px solid var(--main-purple); 104 | flex: 1.5; 105 | } 106 | 107 | /*END of Random Meals Section*/ 108 | 109 | 110 | 111 | #aside-left { 112 | display: flex; 113 | flex-direction: column; 114 | justify-content: right; 115 | } 116 | 117 | #aside-right { 118 | padding: 10px 20px; 119 | width: 250px; 120 | border: 1px solid #111; 121 | display: flex; 122 | flex-direction: right; 123 | 124 | } 125 | 126 | 127 | 128 | 129 | 130 | /*Search Bar*/ 131 | .search-container { 132 | display: flex; 133 | justify-content: center; 134 | /* background-color: white; */ 135 | } 136 | 137 | button { 138 | /* cursor: pointer; */ 139 | background-color: #400082; 140 | border: 2px solid #400082; 141 | border-radius: 4px; 142 | color: #fff; 143 | font-size: 16px; 144 | /* padding: 10px; */ 145 | /* margin-top: 20px; */ 146 | width: 50px; 147 | height: 50px; 148 | } 149 | 150 | .search-bar { 151 | border: 4px solid #f0f0f0; 152 | border-radius: 4px; 153 | width: 250px; 154 | height: 50px; 155 | padding: 10px; 156 | font-size: 14px; 157 | } 158 | 159 | h2, 160 | h3 { 161 | color: white; 162 | font-family: 'Permanent Marker', cursive; 163 | font-size: 40px; 164 | margin: 0 auto; 165 | padding: 15px; 166 | 167 | } 168 | 169 | .random-h {} 170 | 171 | /* Serach Bar END */ 172 | 173 | 174 | 175 | /* Search Results */ 176 | 177 | .search-results { 178 | display: flex; 179 | justify-content: center; 180 | margin: 0 auto; 181 | padding: 20px; 182 | color: white; 183 | } 184 | 185 | 186 | /* About Us */ 187 | 188 | 189 | .about-us { 190 | color: white; 191 | margin: 0 auto; 192 | padding: 20px; 193 | } 194 | 195 | 196 | 197 | footer { 198 | display: flex; 199 | color: white; 200 | justify-content: space-evenly; 201 | } -------------------------------------------------------------------------------- /CSS/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Permanent+Marker|Roboto+Slab&display=swap'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: 'Roboto Slab', serif; 9 | background-color: #f1fcfc; 10 | } 11 | 12 | h1 { 13 | /* text-decoration: underline; */ 14 | font-family: 'Permanent Marker', cursive; 15 | display: flex; 16 | justify-content: center; 17 | } 18 | 19 | header { 20 | color: #6a8caf; 21 | background-color: #a7e9af; 22 | /* background-color: #633a82; */ 23 | display: flex; 24 | flex-direction: column-reverse; 25 | justify-content: flex-end; 26 | border-radius: 10px; 27 | padding: 10px; 28 | box-shadow: 0 2px rgba(0, 0, 0, 0.5); 29 | } 30 | 31 | .site-name { 32 | display: flex; 33 | justify-content: flex-end; 34 | } 35 | 36 | a { 37 | padding: 0 10px; 38 | font-family: 'Permanent Marker', cursive; 39 | text-decoration: none; 40 | } 41 | 42 | a:visited { 43 | background-color: white; 44 | } 45 | 46 | a:hover { 47 | font-size: 110%; 48 | } 49 | 50 | a:link { 51 | color: #6a8caf; 52 | } 53 | 54 | a:active { 55 | color: red; 56 | } 57 | 58 | h1 { 59 | color: #633a82; 60 | ; 61 | } 62 | 63 | .display-random { 64 | display: flex; 65 | flex-direction: column; 66 | align-items: center; 67 | background-color: #40e0d0; 68 | color: white; 69 | font-weight: bold; 70 | border: 2px solid #f1fcfc; 71 | border-radius: 10px; 72 | margin: 10px; 73 | box-shadow: 0 2px rgba(0, 0, 0, 0.5); 74 | } 75 | 76 | .display-random img { 77 | margin: 10px; 78 | width: 400px; 79 | border: 2px solid #f1fcfc; 80 | border-radius: 75px; 81 | margin-bottom: 80px; 82 | box-shadow: 0 2px rgba(0, 0, 0, 0.5); 83 | } 84 | 85 | .display-random img:hover { 86 | border-color: #633a82; 87 | ; 88 | } 89 | 90 | .search-article { 91 | margin: 10px; 92 | display: flex; 93 | justify-content: space-evenly; 94 | align-items: center; 95 | border-radius: 10px; 96 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); 97 | padding: 10px; 98 | } 99 | 100 | .search-article h2 { 101 | color: #633a82; 102 | font-family: 'Permanent Marker', cursive; 103 | } 104 | 105 | .search-bar { 106 | 107 | width: 400px; 108 | height: 35px; 109 | border-radius: 5px; 110 | padding: 5px; 111 | margin: 5px; 112 | } 113 | 114 | #search-button { 115 | width: 75px; 116 | height: 35px; 117 | border-radius: 5px; 118 | border: 2px solid #633a82; 119 | } 120 | 121 | .result { 122 | display: flex; 123 | flex-direction: column; 124 | align-items: center; 125 | justify-content: space-evenly; 126 | background-color: #40e0d0; 127 | color: white; 128 | font-size: 22px; 129 | box-shadow: whitesmoke; 130 | border-radius: 10px; 131 | margin: 10px; 132 | } 133 | 134 | .result h1 { 135 | display: flex; 136 | align-items: flex-start; 137 | } 138 | 139 | .result img { 140 | margin: 10px; 141 | width: 300px; 142 | border: 2px solid #f1fcfc; 143 | border-radius: 75px; 144 | margin-bottom: 80px; 145 | box-shadow: 0 2px rgba(0, 0, 0, 0.5); 146 | } 147 | 148 | .result img:hover { 149 | border-color: #633a82; 150 | } 151 | 152 | 153 | 154 | .safety-tips-session { 155 | background-color: #6a8caf; 156 | padding: 40px; 157 | color: white; 158 | font-size: 18px; 159 | border-radius: 10px; 160 | margin: 10px; 161 | } 162 | 163 | .stay-safe { 164 | font-size: 22px; 165 | background: linear-gradient(180deg, rgba(255, 255, 255, 0) 85%, #F7ff00 85%); 166 | } 167 | 168 | .highlight { 169 | background: linear-gradient(180deg, rgba(255, 255, 255, 0) 75%, #F7ff00 75%); 170 | } 171 | 172 | 173 | footer { 174 | display: flex; 175 | justify-content: space-evenly; 176 | align-items: center; 177 | background-color: #a7e9af; 178 | border-radius: 10px; 179 | padding: 10px; 180 | box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3); 181 | margin: 10px; 182 | color: white; 183 | height: 150px; 184 | } -------------------------------------------------------------------------------- /JS/app.js: -------------------------------------------------------------------------------- 1 | // console.log('Running Scripts...') 2 | 3 | //* Constants 4 | const DOMAIN = "https://www.themealdb.com/api/json/v1/"; 5 | const API_KEY = 1; 6 | const BASE_URL = `${DOMAIN}${API_KEY}/search.php?s=`; 7 | const SearchByFirstLetter_BASE_URL = `${DOMAIN}${API_KEY}/search.php?f=`; 8 | const GET_RANDOM_MEAL_BASE_URL = `${DOMAIN}${API_KEY}/random.php`; 9 | const SearchByID_BASE_URL = `${DOMAIN}${API_KEY}/lookup.php?i=`; 10 | const SearchByMainIngredient = `${DOMAIN}${API_KEY}/filter.php?i=`; 11 | 12 | //* DOM Variables 13 | const randomMealDIV = document.getElementById("random-div"); 14 | const searchInput = document.getElementById("search-input"); 15 | const searchButton = document.getElementById("search-button"); 16 | 17 | //* Gets random meal from DB 18 | async function getRandomMealData() { 19 | try { 20 | //randomMeal obj of random meal 21 | let randomMeal = await axios.get(`${GET_RANDOM_MEAL_BASE_URL}`); 22 | // console.log('data---->', randomMeal) 23 | const meal = randomMeal.data.meals[0]; 24 | // console.log('meal--->', meal.strMeal); 25 | renderRandomMeal(meal); 26 | } catch (error) { 27 | console.error(error); 28 | } 29 | } 30 | getRandomMealData(); 31 | 32 | //* Render the random meal to top of the page 33 | function renderRandomMeal(meal) { 34 | randomMealDIV.innerHTML = ""; 35 | //Meal variables 36 | const imgURL = meal.strMealThumb; 37 | const mealName = meal.strMeal; 38 | //HTML Elements 39 | const h3 = document.createElement("h2"); 40 | const img = document.createElement("img"); 41 | //setting attributes 42 | h3.innerText = mealName; 43 | // para.setAttribute('class', 'random-h ') 44 | img.setAttribute("src", imgURL); 45 | img.setAttribute("class", "display-random"); 46 | //appending to the dom 47 | randomMealDIV.appendChild(h3); 48 | randomMealDIV.appendChild(img); 49 | } 50 | 51 | //* Event Handlers for search meals 52 | async function searchMeal(value) { 53 | //Check for value 54 | if (searchInput.value === "undefined") { 55 | console.log("search input is empty dont do anything"); 56 | } else { 57 | value = searchInput.value; 58 | } 59 | //Get Request 60 | try { 61 | let result = await axios.get(`${BASE_URL}${value}`); 62 | renderResults(result); 63 | searchInput.value = ""; 64 | } catch (error) { 65 | console.error(error); 66 | } 67 | } 68 | 69 | //* Renders Search Results 70 | function renderResults(result) { 71 | //Data 72 | let meal = result.data.meals; 73 | 74 | for (let x = 0; x < meal.length; x++) { 75 | console.log(meal[x]); 76 | // Main DIV 77 | let resultsDiv = document.getElementById("search-results"); 78 | resultsDiv.setAttribute("class", "result"); 79 | if (result.data.meals == null) { 80 | console.log("No Matches"); 81 | const h2NoResult = document.createElement("h2"); 82 | h2NoResult.innerHTML = "No matches"; 83 | resultsDiv.appendChild(h2NoResult); 84 | } 85 | //////////////////////////////// 86 | // Meal title 87 | let h2MealName = document.createElement("h1"); 88 | h2MealName.innerHTML = meal[x].strMeal; 89 | resultsDiv.appendChild(h2MealName); 90 | 91 | let videoURL = meal[x].strYoutube; 92 | let link = document.createElement("a"); 93 | link.setAttribute("href", videoURL); 94 | link.innerHTML = "watch video"; 95 | resultsDiv.appendChild(link); 96 | //create append img 97 | let img = document.createElement("img"); 98 | let imgURL = meal[x].strMealThumb; //here 99 | img.setAttribute("src", imgURL); 100 | img.setAttribute("class", "result"); 101 | resultsDiv.appendChild(img); 102 | // UL Display Ingredients and Measuments 103 | let ulResult = document.createElement("ul"); 104 | resultsDiv.appendChild(ulResult); 105 | //H2 to display Ingredients 106 | let h2Ingredients = document.createElement("h2"); 107 | h2Ingredients.innerHTML = "Ingredients"; 108 | ulResult.appendChild(h2Ingredients); 109 | // Built Object 110 | //Loops on ingredients creates lis appends them to ul 111 | for (i in meal[x]) { 112 | //here 113 | if (i.includes("Ing") && meal[x][i] != "" && meal[x][i] != " ") { 114 | let li = document.createElement("li"); 115 | li.innerHTML = meal[x][i]; 116 | ulResult.appendChild(li); 117 | } 118 | } 119 | //Creates H2 to display Measurements 120 | let h2Meas = document.createElement("h2"); 121 | h2Meas.innerHTML = "Measurements"; 122 | //apends it to ul 123 | ulResult.appendChild(h2Meas); 124 | for (m in meal[x]) { 125 | if (m.includes("Meas") && meal[x][m] != "" && meal[x][m] != " ") { 126 | let li = document.createElement("li"); 127 | li.innerHTML = meal[x][m]; 128 | ulResult.appendChild(li); 129 | } 130 | } 131 | } 132 | } 133 | //* SEARCH BAR 134 | searchButton.addEventListener("click", searchMeal); 135 | searchInput.addEventListener("keyup", function () { 136 | if (event.keyCode === 13) { 137 | event.preventDefault(); 138 | document.getElementById("search-button").click(); 139 | } 140 | }); 141 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | StayHomeCookHome 23 | 24 | 25 | 26 |
27 | 35 |
36 | 37 |
38 | 39 |
40 | 41 |

#StayHomeCookHome

42 |
43 |
44 |
45 |
46 | 47 |
48 |

Search for a recipe

49 |
50 |
51 | 52 | 53 | 54 |
55 |
56 |
57 | 58 |
59 | 60 |
61 |
62 | 63 |
64 |
65 |
66 | 67 | 68 |
69 | 70 |

Stay Safe

71 |
72 |
73 |

How to Protect Yourself From Coronavirus When Grocery Shopping

74 |

Here are precautions to take whether you shop in-store or online

75 |

With the Centers for Disease Control and Prevention now recommending that people wear 76 | cloth, non-medical face coverings in public to help contain the spread of the coronavirus, you may wonder 77 | whether that's enough to keep you safe when you shop for food. 78 | 79 | The new CDC advisory, which is voluntary, specifically mentions groceries and pharmacies as public 80 | settings 81 | where it can be difficult to practice social distancing—that is, staying 6 feet from others—to prevent the 82 | spread of the coronavirus. In those locations, the CDC recommends wearing simple cloth face coverings "to 83 | slow the spread of the virus and help people who may have the virus and do not know it from transmitting 84 | it 85 | to others." 86 | 87 | Many consumers are trying to avoid visiting grocery stores entirely, by turning to delivery services. 88 | 89 | But whether you buy groceries online or in stores, there are several steps that you can take to limit your 90 | exposure to coronavirus, and they’re not so different from what CR recommends you typically do. Be sure 91 | to: 92 | 93 | Wash nonporous containers. The FDA says there's no current evidence to support the transmission of the 94 | virus 95 | from food packaging. But if you're concerned, it can't hurt to wipe down non-porous containers like glass 96 | or 97 | cans with disinfectant wipes. 98 | 99 | 100 |

101 |

If You’re Getting Your Groceries Delivered

102 |

103 | Even if a grocery store or warehouse is thoroughly cleaned on a regular basis, the delivery person needs 104 | to 105 | take the same precautions to prevent the spread of a virus to you. 106 | 107 | Among the six services in our review of grocery delivery services, AmazonFresh, Amazon Prime Now, 108 | Instacart, 109 | and Shipt employ independent contractors for deliveries. Instacart has begun offering up to 14 days of pay 110 | to all shoppers—including independent contractors—sidelined by coronavirus, plus sick pay to its part-time 111 | in-store shoppers. (In response to a recent walkoff by some of its shoppers who demanded more workplace 112 | protections, Instacart also announced it was providing free "health and safety kits" including a washable 113 | cloth mask, hand sanitizer, and a reusable forehead thermometer that workers could order from the 114 | company.) 115 | 116 | FreshDirect and Peapod delivery personnel are company employees. Walmart, which wasn't part of our 117 | ratings, 118 | uses DoorDash for deliveries. 119 | 120 | While those companies might recommend that deliverers wash their hands often, practice other hygiene 121 | measures, and stay home when they’re feeling sick, they can’t monitor whether drivers are actually taking 122 | those precautions, says Erin Hatton, an associate professor of sociology and a labor scholar at the 123 | University of Buffalo. “And without paid sick leave, workers are going to try to push through as much as 124 | they can,” Hatton says. 125 |

126 |

If You’re Picking Up Prepacked Groceries

127 |

The steps are basically the same for this option as for delivery. If you’ve ordered and are merely having 128 | someone put the groceries in your car in a parking lot—an option at about 3,000 Walmart locations 129 | nationwide—consider opening your car door yourself rather than having the person bringing the items to 130 | your 131 | car touch the handle. And if you can tip on a supermarket’s app, do so rather than handing over cash. 132 | (Walmart’s employees aren’t permitted to take tips.)

133 |

If You're Buying Groceries in a Store

134 |

A key way to prevent the virus’s spread is to stay 6 feet away from other people. The CDC notes that's 135 | generally the distance within which people pick up coronavirus droplets through the air from a cough or 136 | sneeze. Such “social distancing” is a good strategy in any situation outside the home, Rogers says. Other 137 | ideas: 138 | 139 | Go shopping at a time that’s less busy. If you type in the store’s name and location in Google search, a 140 | box 141 | often will pop up showing when foot traffic there is highest. 142 | 143 | Wear a face covering. The new advice from the CDC on face masks is voluntary. The agency says the 144 | non-medical coverings can be "basic cloth or fabric masks." The New York City Health Department, which 145 | recently put out a directive to citizens to cover their faces when outside their home, defines a face 146 | covering as "any well-secured paper or cloth (like a bandana or scarf) that covers your mouth and nose," 147 | and 148 | offers best practices for how to put it on, wear it, and remove it. 149 | 150 | It's not necessary to use surgical masks or N-95 respirators, the CDC stresses. "Those are critical 151 | supplies 152 | that must continue to be reserved for healthcare workers and other medical first responders," the agency 153 | says. 154 | 155 | Take germicide with you. Use it to wipe your hands and the cart before and after you shop. 156 | 157 | Use a credit or debit card. That way, you don’t have to hand over bills or receive change. Also, use your 158 | own pen to sign receipts. If you can, use a virtual payment system like Apple Pay so that you don't have 159 | to 160 | open your wallet at all. 161 | 162 | Editor’s Note: This article, originally published on March 9, 2020, has been updated to clarify our 163 | guidance 164 | on how to handle produce and food packaging, as well as news on Instacart's delivery service, how long 165 | coronaviruses live on cardboard, and whether to use a face covering. 166 |

167 | Article: Source 169 | Link 170 | 171 |
172 |
173 |
174 |
175 | 176 | 177 | 190 | 191 | 192 | --------------------------------------------------------------------------------