├── 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 | [](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 | 
25 |
26 | #### JSON Data Smaple
27 |
28 | #### Postman
29 |
30 | 
31 |
32 | ## Wireframe
33 |
34 | ### Desktop
35 |
36 | 
37 |
38 | ### Mobile
39 |
40 | 
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 |
36 |
37 |
38 |
39 |
40 |
41 | #StayHomeCookHome
42 |
45 |
46 |
47 |
48 | Search for a recipe
49 |
56 |
57 |
58 |
59 |
60 |
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 |
--------------------------------------------------------------------------------