<h1><span class="grocery">Grocery</span> <span class="list">List</span></h1>
<a href="#" onclick="find('#groceryform').innerHTML = '';">Clear</a>
<form id="groceryform" method="get" target="_blank" action="grocery.php"></form>
<div class="recipe-container">
<ul class="recipes">
<li id="id508" data-servings="4" draggable="true">44-Clove Garlic Soup</li>
<li id="id449" data-servings="1" draggable="true">Adult Lunchable with Veggies, Salami, and Boursin</li>
<li id="id494" data-servings="24" draggable="true">Aged Eggnog</li>
<li id="id298" data-servings="6" draggable="true">All-day minestrone (slow cooker)</li>
<li id="id27" data-servings="2" draggable="true">Almond Caesar salad with croutons</li>
<li id="id351" data-servings="21" draggable="true">Almond cloud cookies</li>
<li id="id479" data-servings="1" draggable="true">Almond latte overnight oats</li>
<li id="id506" data-servings="1" draggable="true">Almond muffin in a minute</li>
<li id="id256" data-servings="4" draggable="true">Antipasto Chef's Salad</li>
<li id="40" data-servings="2" draggable="true">Apple Carrot Salad</li>
<li id="id480" data-servings="6" draggable="true">Apple cheddar bacon egg muffins</li>
<li id="id20" data-servings="1" draggable="true">Apple-Brie Panini</li>
<li id="id309" data-servings="4" draggable="true">Apple-cheddar baked sweet potatoes</li>
<li id="id369" data-servings="4" draggable="true">Arroz non pollo (slow cooker)</li>
<li id="id374" data-servings="6" draggable="true">Artichoke Risotto with Mascarpone, Lemon, and Thyme</li>
<li id="id57" data-servings="6" draggable="true">Artichoke, Leek, and Potato Casserole</li>
<li id="id387" data-servings="4" draggable="true">Arugula Salad with Figs, Prosciutto, Walnuts, and Parmesan</li>
<li id="id259" data-servings="4" draggable="true">Asparagus and lemon risotto</li>
<li id="id436" data-servings="8" draggable="true">Asparagus pesto</li>
<li id="id513" data-servings="1" draggable="true">Avocado, olive tapenade, and chedder toast</li>
<li id="id89" data-servings="8" draggable="true">Baby Brussels sprouts with wild rice and pecans</li>
<li id="id486" data-servings="8" draggable="true">Bacon cheddar chive scones</li>
<li id="id354" data-servings="24" draggable="true">Bagel and lox deviled eggs</li>
<li id="id220" data-servings="10" draggable="true">Baked Beans</li>
<li id="id434" data-servings="12" draggable="true">Baked English Muffins</li>
<li id="2" data-servings="6" draggable="true">Baked Shrimp Scampi</li>
<li id="id482" data-servings="4" draggable="true">Baked Tofu Banh Mi Salad</li>
<li id="id291" data-servings="4" draggable="true">Baked Ziti with Crunchy Italian Salad and Garlic Bread</li>
<li id="id105" data-servings="4" draggable="true">Baked eggs and beans on toast</li>
<li id="id329" data-servings="4" draggable="true">Baked eggs and grits</li>
<li id="id526" data-servings="6" draggable="true">Baked macaroni and cheese</li>
<li id="id403" data-servings="1" draggable="true">Baked tofu</li>
<li id="id465" data-servings="1" draggable="true">Basic bento: tofu and egg</li>
<li id="id6" data-servings="2" draggable="true">Basil-Lime Vinaigrette</li>
<li id="id277" data-servings="1" draggable="true">Bavarian kartofflepuffer (potato pancakes)</li>
<li id="id300" data-servings="1" draggable="true">Berry Granola Parfait</li>
<li id="48" data-servings="1" draggable="true">Berry Sauce</li>
<li id="55" data-servings="1" draggable="true">Best Oatmeal Ever</li>
<li id="id339" data-servings="4" draggable="true">Black bean and brown rice cakes</li>
<li id="id32" data-servings="2" draggable="true">Black bean and cheese tacos</li>
<li id="id518" data-servings="2" draggable="true">Black bean and zucchini enchiladas</li>
<li id="id510" data-servings="6" draggable="true">Black bean mini burgers</li>
<li id="id173" data-servings="4" draggable="true">Black bean salad with avocado lime dressing</li>
<li id="id400" data-servings="4" draggable="true">Black-eyed pea burgers with summer squash slaw</li>
<li id="47" data-servings="2" draggable="true">Blueberry Bliss Smoothie</li>
<li id="id455" data-servings="1" draggable="true">Breaded and fried shrimps</li>
<li id="54" data-servings="1" draggable="true">Breakfast Mediterranean Scramble</li>
<li id="id136" data-servings="8" draggable="true">Broccoli soup with cheddar toasts</li>
<li id="id58" data-servings="4" draggable="true">Broccoli with Parmesan and Walnuts</li>
<li id="id321" data-servings="4" draggable="true">Broiled halibut with ricotta-pea puree</li>
<li id="id46" data-servings="2" draggable="true">Brown rice, chickpea, feta, and mint salad</li>
<li id="id305" data-servings="4" draggable="true">Bruschetta baked potatoes</li>
<li id="id112" data-servings="8" draggable="true">Caesar Salad Dressing</li>
<li id="id380" data-servings="24" draggable="true">Cannoli</li>
<li id="id373" data-servings="24" draggable="true">Caprese Skewers</li>
<li id="id423" data-servings="8" draggable="true">Caramelized onion and brie pizza</li>
<li id="id456" data-servings="8" draggable="true">Carrot and celeriac (celery root) salad</li>
<li id="id527" data-servings="2" draggable="true">Cavatelli and kale with fried rosemary and walnuts</li>
<li id="id433" data-servings="2" draggable="true">Charred Eggplant and Walnut Pesto Pasta Salad</li>
<li id="id501" data-servings="1" draggable="true">Cheesy mushroom omelette</li>
<li id="id269" data-servings="1" draggable="true">Cherry almond smoothie</li>
<li id="id177" data-servings="10" draggable="true">Cherry lime granola</li>
<li id="id73" data-servings="6" draggable="true">Cherry-lime cups</li>
<li id="id497" data-servings="2" draggable="true">Chirashi-Style Rice Bowls</li>
<li id="id484" data-servings="1" draggable="true">Chocolate covered strawberry quick oatmeal</li>
<li id="id243" data-servings="1" draggable="true">Chocolate dipped coconut macaroons</li>
<li id="id293" data-servings="16" draggable="true">Chocolate-Pumpkin Cheesecake Bars</li>
<li id="id347" data-servings="1" draggable="true">Chopped antipasto salad</li>
<li id="id17" data-servings="4" draggable="true">Citrus Rice Salad</li>
<li id="id327" data-servings="8" draggable="true">Classic cheese fondue (for Cuisinart Fondue Pot)</li>
<li id="id50" data-servings="6" draggable="true">Cocktail Sauce</li>
<li id="id359" data-servings="4" draggable="true">Coconut shrimp with tropical rice</li>
<li id="id176" data-servings="10" draggable="true">Coffee, hazelnut, and banana granola</li>
<li id="id344" data-servings="4" draggable="true">Couscous stuffed bellpeppers with basil sauce</li>
<li id="id514" data-servings="2" draggable="true">Cozy bean and egg skillet for two</li>
<li id="id284" data-servings="4" draggable="true">Creamy Broccoli & Sun-Dried Tomato Orzotto</li>
<li id="id138" data-servings="8" draggable="true">Creamy caramelized onion soup</li>
<li id="id525" data-servings="4" draggable="true">Creamy chipotle salad dressing</li>
<li id="id35" data-servings="4" draggable="true">Creamy tomato soup</li>
<li id="id151" data-servings="4" draggable="true">Dang cold Asian noodle salad</li>
<li id="id352" data-servings="3" draggable="true">Double-shot mocha chunks</li>
<li id="id196" data-servings="8" draggable="true">Drop biscuits (Cook's Illustrated)</li>
<li id="id207" data-servings="6" draggable="true">Easy chickpea and vegetable curry</li>
<li id="id399" data-servings="2" draggable="true">Egg sauce</li>
<li id="id249" data-servings="1" draggable="true">Eggnog glazed spritz cookies</li>
<li id="id389" data-servings="4" draggable="true">Eggplant involtini</li>
<li id="id271" data-servings="1" draggable="true">Eggs</li>
<li id="id427" data-servings="4" draggable="true">Eggs with mushrooms and tomatoes</li>
<li id="id341" data-servings="1" draggable="true">English muffin with apple and cheddar</li>
<li id="id23" data-servings="2" draggable="true">Exercise Rejuvenator</li>
<li id="42" data-servings="2" draggable="true">Extreme Green Salad</li>
<li id="16" data-servings="12" draggable="true">Flaky Buttermilk Biscuits</li>
<li id="id370" data-servings="10" draggable="true">Flan</li>
<li id="id376" data-servings="1" draggable="true">French Onion Dip</li>
<li id="id132" data-servings="4" draggable="true">French onion soup</li>
<li id="id481" data-servings="2" draggable="true">French toast popcorn seasoning</li>
<li id="id236" data-servings="4" draggable="true">French-Onion Stuffed Potatoes</li>
<li id="id273" data-servings="1" draggable="true">Frozen Dinner</li>
<li id="id428" data-servings="1" draggable="true">Fruit and cheese breakfast</li>
<li id="id386" data-servings="16" draggable="true">Fruity oatmeal topping</li>
<li id="id350" data-servings="24" draggable="true">Fudge brownies</li>
<li id="id238" data-servings="6" draggable="true">Ghirardelli Ultimate Double Chocolate Cookies</li>
<li id="id356" data-servings="4" draggable="true">Go green salad with mochi croutons</li>
<li id="id272" data-servings="12" draggable="true">Goat cheese, sun dried tomato, and pesto torta</li>
<li id="id301" data-servings="2" draggable="true">Golden Granola</li>
<li id="id485" data-servings="4" draggable="true">Golden-crusted Brussels sprouts</li>
<li id="15" data-servings="4" draggable="true">Greek Salad</li>
<li id="id361" data-servings="10" draggable="true">Greek layered dip with pita chips</li>
<li id="id134" data-servings="4" draggable="true">Green pea soup with cheddar scallion panini</li>
<li id="id19" data-servings="2" draggable="true">Green-packed Stir Fry with Fresh Herbs</li>
<li id="id289" data-servings="8" draggable="true">Grilled Cheese & Tomato Skillet</li>
<li id="17" data-servings="4" draggable="true">Grilled Portobello Mushrooms Stacked with Fresh Spinach and Shaved Manchego Cheese</li>
<li id="id414" data-servings="6" draggable="true">Grilled cheese and romesco sandwiches</li>
<li id="id14" data-servings="4" draggable="true">Grilled garlic-lime fish tacos</li>
<li id="id156" data-servings="8" draggable="true">Grilled salmon gyros</li>
<li id="id159" data-servings="4" draggable="true">Grilled salmon sushi rice bowl</li>
<li id="28" data-servings="8" draggable="true">Guacamole</li>
<li id="id304" data-servings="4" draggable="true">Guacamole baked potatoes</li>
<li id="id51" data-servings="2" draggable="true">Heinz Chili Sauce</li>
<li id="id167" data-servings="4" draggable="true">Herb crusted salmon with spinach salad</li>
<li id="id375" data-servings="6" draggable="true">Herbed biscuits with smoked salmon</li>
<li id="id157" data-servings="4" draggable="true">Homemade ponzu sauce</li>
<li id="id22" data-servings="4" draggable="true">Hot Cocoa</li>
<li id="id462" data-servings="12" draggable="true">Hot buttered rum</li>
<li id="id421" data-servings="1" draggable="true">Hot cereal with apple butter and walnuts</li>
<li id="id492" data-servings="1" draggable="true">Hummus vegetable sandwich</li>
<li id="id228" data-servings="4" draggable="true">Indian Chickpea Wrap</li>
<li id="id296" data-servings="4" draggable="true">Jamie's Old-Fashioned Ginger Crinkle Cookies</li>
<li id="id150" data-servings="4" draggable="true">Japanese style grilled salmon</li>
<li id="id478" data-servings="2" draggable="true">Kale & White Cheddar Quesadillas with Radishes & Fried Eggs</li>
<li id="id237" data-servings="4" draggable="true">Kale Salad with Marcona Almonds and Sherry Vinaigrette</li>
<li id="id247" data-servings="4" draggable="true">Kale and feta salad</li>
<li id="id246" data-servings="4" draggable="true">Kale caesar salad</li>
<li id="id279" data-servings="4" draggable="true">Kale panzanella</li>
<li id="id401" data-servings="4" draggable="true">Korean scallion pancakes with vegetable salad</li>
<li id="id221" data-servings="8" draggable="true">Lemonade</li>
<li id="id332" data-servings="2" draggable="true">Lemony walnut chickpea salad with goat's cheese</li>
<li id="id8" data-servings="8" draggable="true">Lentil Soup</li>
<li id="id452" data-servings="1" draggable="true">Less-mess oven bacon</li>
<li id="id174" data-servings="4" draggable="true">Linguine with asparagus and egg</li>
<li id="56" data-servings="2" draggable="true">Lovely Lentils</li>
<li id="id530" data-servings="2" draggable="true">Malted hot cocoa</li>
<li id="id384" data-servings="18" draggable="true">Maple shortbread sandwich cookies</li>
<li id="id391" data-servings="16" draggable="true">Maple-bacon potato skins</li>
<li id="19" data-servings="4" draggable="true">Margherita Salad</li>
<li id="id34" data-servings="4" draggable="true">Marinara Sauce</li>
<li id="id195" data-servings="4" draggable="true">Marinated feta, spinach & poached egg salad</li>
<li id="id355" data-servings="1" draggable="true">Mayonnaise</li>
<li id="id378" data-servings="1" draggable="true">Mediterranean Grain Salad</li>
<li id="id290" data-servings="6" draggable="true">Mediterranean Patio Pizza</li>
<li id="id489" data-servings="1" draggable="true">Mediterranean Salad with Artichokes, Penne, and Sun-Dried Tomatoes</li>
<li id="id435" data-servings="48" draggable="true">Mesquite chocolate chip cookies</li>
<li id="21" data-servings="2" draggable="true">Mexican Ensalada</li>
<li id="id483" data-servings="2" draggable="true">Mexican caprese salad</li>
<li id="id500" data-servings="1" draggable="true">Mexican egg roll up</li>
<li id="id519" data-servings="5" draggable="true">Mexican spice blend</li>
<li id="id245" data-servings="4" draggable="true">Mexican wedding cookies</li>
<li id="id398" data-servings="1" draggable="true">Microwave mug brownie</li>
<li id="id292" data-servings="8" draggable="true">Millet bread (Corn-free cornbread)</li>
<li id="id372" data-servings="36" draggable="true">Mini Tostadas</li>
<li id="id531" data-servings="10" draggable="true">Miso-ginger dressing</li>
<li id="id252" data-servings="8" draggable="true">Mocha chip cookie scones</li>
<li id="id429" data-servings="1" draggable="true">Morning pizza</li>
<li id="id260" data-servings="2" draggable="true">Moroccan lentil salad</li>
<li id="id524" data-servings="6" draggable="true">Mulled cranberry apple cider</li>
<li id="id40" data-servings="2" draggable="true">Muscle Maximizer</li>
<li id="id475" data-servings="2" draggable="true">Mushroom & Broccoli Casserole with Baked Pastry</li>
<li id="id222" data-servings="4" draggable="true">Mushroom and lentil soup</li>
<li id="id430" data-servings="2" draggable="true">Mustard, Avocado, and Dill on a Whole-Wheat Muffin With Boiled Egg</li>
<li id="id9" data-servings="1" draggable="true">Natural sports drink</li>
<li id="id523" data-servings="2" draggable="true">Niçoise-Style Salad with Fingerling Potatoes, Summer Squash, & Fried Eggs</li>
<li id="12" data-servings="6" draggable="true">Old Fashion Vegetable Soup</li>
<li id="id488" data-servings="2" draggable="true">Olive and Pepper Grilled Cheese Sandwiches</li>
<li id="13" data-servings="6" draggable="true">Onion Pie</li>
<li id="id331" data-servings="2" draggable="true">Open face egg and tomato sandwich</li>
<li id="id171" data-servings="4" draggable="true">Orecchiette with roasted cauliflower</li>
<li id="id30" data-servings="6" draggable="true">Oregano Marinated Chicken</li>
<li id="id493" data-servings="4" draggable="true">Oregano halloumi with orzo salad</li>
<li id="id463" data-servings="8" draggable="true">Overnight Cinnamon Rolls</li>
<li id="id262" data-servings="1" draggable="true">PB&J smoothie</li>
<li id="id408" data-servings="4" draggable="true">Panko-crusted tofu with black bean salad</li>
<li id="id43" data-servings="6" draggable="true">Parker's split pea soup</li>
<li id="id121" data-servings="4" draggable="true">Pasta with roasted vegetables and bacon</li>
<li id="id517" data-servings="2" draggable="true">Peach & Pickled Pepper Grilled Cheese</li>
<li id="id55" data-servings="4" draggable="true">Peanut Noodle Salad</li>
<li id="id353" data-servings="22" draggable="true">Peanut butter-oatmeal sandwich cookies</li>
<li id="id118" data-servings="1" draggable="true">Pecan Pie</li>
<li id="id185" data-servings="10" draggable="true">Pecan molasses granola</li>
<li id="id281" data-servings="4" draggable="true">Pecan-Crusted Mozzarella Salad</li>
<li id="id476" data-servings="2" draggable="true">Penne & Arrabbiata Sauce with Roasted Carrot & Tangelo Salad</li>
<li id="id244" data-servings="24" draggable="true">Peppermint crunch bark</li>
<li id="id417" data-servings="1" draggable="true">Perfect soft cooked egg</li>
<li id="id99" data-servings="10" draggable="true">Pesto</li>
<li id="id509" data-servings="2" draggable="true">Pesto Cavatelli w/ Mushrooms and Spicy Breadcrumbs</li>
<li id="id25" data-servings="4" draggable="true">Pesto Orzo with Peas</li>
<li id="id313" data-servings="6" draggable="true">Pinto bean and poblano tacos</li>
<li id="id64" data-servings="4" draggable="true">Pizza bianca</li>
<li id="51" data-servings="1" draggable="true">Popeye's Muscle Salad</li>
<li id="11" data-servings="4" draggable="true">Pot Roast Carbonnade</li>
<li id="id191" data-servings="4" draggable="true">Potato hash with spinach and eggs</li>
<li id="id495" data-servings="2" draggable="true">Purple rice and miso spinach bowls</li>
<li id="id326" data-servings="1" draggable="true">Ranch dip with vegetables</li>
<li id="id86" data-servings="2" draggable="true">Raspberry-lemon thumbprint cookies</li>
<li id="id133" data-servings="4" draggable="true">Red lentil soup with sage and bacon</li>
<li id="id499" data-servings="2" draggable="true">Roasted Brussels sprouts and freekeh salad</li>
<li id="id45" data-servings="4" draggable="true">Roasted Salmon with Walnut-Pepper Relish</li>
<li id="id53" data-servings="1" draggable="true">Roasted Shallot Vinaigrette</li>
<li id="id521" data-servings="2" draggable="true">Roasted Sweet Potato Quesadillas</li>
<li id="id26" data-servings="6" draggable="true">Roasted potatoes and tomatoes</li>
<li id="id345" data-servings="1" draggable="true">Roasted vegetable salad with goat cheese</li>
<li id="62" data-servings="4" draggable="true">Roquefort Cheese Sauce</li>
<li id="id337" data-servings="4" draggable="true">Salad with Radishes and Spicy Pumpkin Seeds</li>
<li id="id348" data-servings="1" draggable="true">Salad with egg, nuts, and veggies</li>
<li id="id280" data-servings="4" draggable="true">Salmon Tuscano with Herbed Orzo</li>
<li id="id187" data-servings="4" draggable="true">Salmon and potatoes in tomato sauce</li>
<li id="id172" data-servings="2" draggable="true">Salsa fresca</li>
<li id="id461" data-servings="8" draggable="true">Salt-baked walnut brioche scones</li>
<li id="id308" data-servings="4" draggable="true">Samosa baked potatoes</li>
<li id="id437" data-servings="1" draggable="true">Savory Oatmeal and Soft-Cooked Egg</li>
<li id="id254" data-servings="12" draggable="true">Scalloped Yukon Gold and Sweet Potato Gratin</li>
<li id="id29" data-servings="2" draggable="true">Schnitzel</li>
<li id="id450" data-servings="1" draggable="true">Seitan and three-color pepper stir-fry bento</li>
<li id="id365" data-servings="4" draggable="true">Shakshuka with chickpeas</li>
<li id="id248" data-servings="4" draggable="true">Shaved Brussels Sprout and Kale Slaw with Pecorino and Toasted Hazelnuts</li>
<li id="18" data-servings="1" draggable="true">Sherry Vinaigrette</li>
<li id="id21" data-servings="4" draggable="true">Shredded Green Beans</li>
<li id="id163" data-servings="4" draggable="true">Shrimp and cabbage stir fry</li>
<li id="id75" data-servings="4" draggable="true">Shrimp and edamame with lime</li>
<li id="id383" data-servings="2" draggable="true">Simple candied orange peel</li>
<li id="id125" data-servings="1" draggable="true">Simple syrup</li>
<li id="id336" data-servings="4" draggable="true">Skillet shrimp and orzo</li>
<li id="id286" data-servings="2" draggable="true">Slow-Cooker Greek Stuffed Peppers</li>
<li id="8" data-servings="3" draggable="true">Smoked Salmon Ebelskivers</li>
<li id="id302" data-servings="4" draggable="true">Smoked salmon baked potatoes</li>
<li id="id477" data-servings="2" draggable="true">Smoky Seared Cod with Roasted Potatoes & Dates</li>
<li id="id65" data-servings="10" draggable="true">Smoky Sweet-Potato Soup</li>
<li id="id206" data-servings="4" draggable="true">Smoky white bean and arugula panini</li>
<li id="id255" data-servings="4" draggable="true">Soba Noodle Salad</li>
<li id="id38" data-servings="4" draggable="true">Soba salad with asparagus and shrimp</li>
<li id="10" data-servings="4" draggable="true">Spaetzle</li>
<li id="id28" data-servings="4" draggable="true">Spiced Apple Sauce</li>
<li id="id15" data-servings="2" draggable="true">Spicy Rice Casserole</li>
<li id="id358" data-servings="4" draggable="true">Spicy orange tofu and vegetable stir-fry</li>
<li id="id496" data-servings="2" draggable="true">Spicy poblano pepper and cheese tortas</li>
<li id="id349" data-servings="24" draggable="true">Spider web brownies</li>
<li id="id109" data-servings="8" draggable="true">Spinach lasagna with mushroom ragu</li>
<li id="id52" data-servings="2" draggable="true">Spinach souffle</li>
<li id="id457" data-servings="2" draggable="true">Spring Chickpea Pasta Salad</li>
<li id="61" data-servings="2" draggable="true">Steakhouse steaks</li>
<li id="id268" data-servings="4" draggable="true">Stir-Fry Sauce (Clear)</li>
<li id="id263" data-servings="2" draggable="true">Stir-Fry Sauce (Hoisin and Lime)</li>
<li id="id264" data-servings="4" draggable="true">Stir-Fry Sauce (Spicy)</li>
<li id="id265" data-servings="4" draggable="true">Stir-Fry Sauce (Sweet and Sour)</li>
<li id="63" data-servings="6" draggable="true">Stove top mac and cheese</li>
<li id="id18" data-servings="4" draggable="true">Straw and Hay Fettuccine Tangle</li>
<li id="32" data-servings="1" draggable="true">Super Protein Salad</li>
<li id="id491" data-servings="1" draggable="true">Super veggie onigirazu</li>
<li id="id158" data-servings="4" draggable="true">Sushi rice</li>
<li id="id498" data-servings="2" draggable="true">Sweet & Savory Korean Rice Cakes</li>
<li id="30" data-servings="2" draggable="true">Sweet Almond Date Smoothie</li>
<li id="57" data-servings="4" draggable="true">Sweet Mashed Potatoes</li>
<li id="id487" data-servings="2" draggable="true">Sweet and Spicy Tofu with Jasmine Rice and Crispy Shallot</li>
<li id="id402" data-servings="4" draggable="true">Sweet and sour wheatballs</li>
<li id="id406" data-servings="8" draggable="true">Sweet, Spicy & Salty Candied Pecans</li>
<li id="id250" data-servings="1" draggable="true">Taco Spread</li>
<li id="id451" data-servings="1" draggable="true">Tamagoyaki Bento</li>
<li id="id251" data-servings="8" draggable="true">Tex Mex Scones</li>
<li id="id104" data-servings="4" draggable="true">Tex-mex rice and black eyed peas</li>
<li id="id390" data-servings="16" draggable="true">Texas chili potato skins</li>
<li id="id377" data-servings="6" draggable="true">Thai Vegetable Stir-fry</li>
<li id="31" data-servings="2" draggable="true">The Ironman Smoothie</li>
<li id="id1" data-servings="24" draggable="true">The Original Chex Party Mix</li>
<li id="36" data-servings="2" draggable="true">The Shake</li>
<li id="22" data-servings="2" draggable="true">The Ultimate Green Smoothie</li>
<li id="id393" data-servings="16" draggable="true">Toasted ravioli potato skins</li>
<li id="id419" data-servings="4" draggable="true">Tofu Cuban sandwiches</li>
<li id="id39" data-servings="4" draggable="true">Tofu and Sweet Potato Jambalaya</li>
<li id="id490" data-servings="4" draggable="true">Tofu katsu onigirazu</li>
<li id="5" data-servings="4" draggable="true">Tomato Basil Soup (La Madeleine copycat)</li>
<li id="id283" data-servings="4" draggable="true">Tomato, Basil and Portobello Napoleons</li>
<li id="id282" data-servings="2" draggable="true">Tomato-Basil Soup with Ricotta Dumplings</li>
<li id="id36" data-servings="4" draggable="true">Triple Grilled Cheese</li>
<li id="26" data-servings="2" draggable="true">Tropical Nut Smoothie</li>
<li id="id261" data-servings="2" draggable="true">Tuscan panzanella salad</li>
<li id="id471" data-servings="2" draggable="true">Udon noodle soup</li>
<li id="id522" data-servings="2" draggable="true">Vadouvan curry spice blend</li>
<li id="id295" data-servings="30" draggable="true">Vanilla chocolate sandwich cookies</li>
<li id="id12" data-servings="6" draggable="true">Vegetable Stock</li>
<li id="id394" data-servings="4" draggable="true">Vegetable and tofu pad thai</li>
<li id="id214" data-servings="2" draggable="true">Vegetable egg scramble with feta</li>
<li id="id5" data-servings="8" draggable="true">Vegetarian Chili</li>
<li id="id37" data-servings="4" draggable="true">Vegetarian Steamed Dumplings</li>
<li id="id322" data-servings="2" draggable="true">Veggie Carribean Panini</li>
<li id="id270" data-servings="4" draggable="true">Veggie Pizza</li>
<li id="id520" data-servings="2" draggable="true">Vietnamese-Style Vegetable Sandwiches with Spicy Mayo and Roasted Broccoli</li>
<li id="id274" data-servings="6" draggable="true">Vineyard tofu salad</li>
<li id="id107" data-servings="4" draggable="true">Warm shrimp and potato salad</li>
<li id="id396" data-servings="4" draggable="true">Wasabi Salmon with Miso-Sesame Sauce</li>
<li id="id379" data-servings="4" draggable="true">White Bean Salad With Spicy Roasted Tomatoes and Broccoli</li>
<li id="id44" data-servings="2" draggable="true">Wild Mushroom Risotto</li>
</ul>
</div>ul {
list-style: none;
display: flex;
flex-wrap: wrap;
flex-direction: column;
/* width: 100%; */
/* height: 3000px; */
}
li {
border: 1px dashed grey;
margin-right: 5px;
width: 160px;
}
function find(sel) { return document.querySelector(sel); };
function findAll(sel) { return [].slice.call(document.querySelectorAll(sel)); };
String.is = function(x) {
return typeof x == "string" || x instanceof String;
}
document.body.ondragstart = function(e) {
var el = e.target;
el.classList.add('dragging');
e.dataTransfer.effectAllowed = 'copy';
if(el.id == 'fasting' || el.id == 'free-entry')
e.dataTransfer.setData('text', JSON.stringify(el.id));
else
e.dataTransfer.setData('text', JSON.stringify({id:el.id, servings:+el.dataset.servings, name:el.textContent}));
};
document.body.ondragover = function(e) {
var el = e.target;
if( !el.webkitMatchesSelector("#groceryform") ) return;
e.preventDefault();
e.dataTransfer.dropEffect = 'copy';
return false;
};
document.body.ondragend = function(e) {
};
document.body.ondrop = function(e) {
e.target.appendChild(makeFormEntry(JSON.parse(e.dataTransfer.getData('text'))));
}
function makeFormEntry(data) {
var div = document.createElement('div');
if( data == "free-entry") {
div.innerHTML = "<span class=close>X</span><p contenteditable class='free-entry'>";
} else if( String.is(data) ) {
div.innerHTML = "<span class=close>X</span><p class='text'>" + data;
} else {
div.innerHTML = "<span class=close>X</span><input type=hidden value='" + data.id + "' name=ids[" + data.id + "]><input type=number value='" + data.servings + "' name=servings[" + data.id + "][] min='0'> " + data.name;
}
div.classList.add('meal');
return div;
}
findAll('#week td').forEach(function(el){
el.ondragenter = function(e) {
this.classList.add('over');
e.preventDefault();
}
el.ondragleave = function(e) {
this.classList.remove('over');
}
});
document.body.onclick = function(e) {
if(e.target.classList.contains('close')) {
var recipe = e.target.parentElement;
recipe.parentElement.removeChild(recipe);
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.