Skip to content

Instantly share code, notes, and snippets.

@max-berman

max-berman/index.html

Created August 13, 2014 09:35
Show Gist options
  • Save max-berman/af0de4aefb6c733fbf0e to your computer and use it in GitHub Desktop.
Save max-berman/af0de4aefb6c733fbf0e to your computer and use it in GitHub Desktop.
Download ZIP
test4Fresh // source http://jsbin.com/zuquk/5
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="test4Fresh" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script>
var json = [
{
"calories": "516 kcal",
"carbos": "47 g",
"card": "https://api.hellofresh.com/recipe/card/533143aaff604d567f8b4571",
"country": "GB",
"deliverable_ingredients": [
"375g Sweet Potatoes",
"1 Tsp Paprika",
"2 Tbsps Parmesan Cheese",
"1 Lemon",
"A Few Sprigs Thyme",
"25g Panko Breadcrumbs",
"1 Tbsp Butter",
"2 Cod Fillets",
"150g Sugar Snap Peas",
"A Few Sprigs Mint",
"75ml Sour Cream"
],
"description": "There\u2019s nothing like the simple things in life - the smell of freshly cut grass, sitting outside on a nice sunny day, spending time with friends and family. Well here is a recipe that delivers simple culinary pleasures - some nice fresh fish with a crispy crust, crunchy potato wedges and some delightfully sweet sugar snap peas flavoured with cooling mint. Slip into something comfortable and relax into a delicious dinner!",
"difficulty": 0,
"fats": "8 g",
"favorites": 1,
"fibers": "",
"headline": "with Sweet Potato Wedges and Minted Snap Peas",
"highlighted": true,
"id": "533143aaff604d567f8b4571",
"image": "https://api.hellofresh.com/recipe/image/533143aaff604d567f8b4571",
"incompatibilities": null,
"ingredients": [
"375g Sweet Potatoes",
"1 Tsp Paprika",
"2 Tbsps Parmesan Cheese",
"1 Lemon",
"A Few Sprigs Thyme",
"25g Panko Breadcrumbs",
"1 Tbsp Butter",
"2 Cod Fillets",
"150g Sugar Snap Peas",
"A Few Sprigs Mint",
"75ml Sour Cream"
],
"keywords": [
""
],
"name": "Crispy Fish Goujons ",
"products": [
"family-box"
],
"proteins": "43 g",
"rating": null,
"ratings": null,
"thumb": "https://api.hellofresh.com/recipe/thumb/533143aaff604d567f8b4571",
"time": "PT35M",
"undeliverable_ingredients": [],
"user": {
"email": "imp@hellofresh.hf",
"latlng": "51.507351, -0.127758",
"name": "Tyrion Lannister"
},
"weeks": [
"2014-W20"
]
},
{
"calories": "397 kcal",
"carbos": "26 g",
"card": "https://api.hellofresh.com/recipe/card/53314247ff604d44808b4569",
"country": "GB",
"deliverable_ingredients": [
"1 Lemon",
"1 Fillet Skirt Steak",
"1 Tsp Ras El Hanout",
"1 Clove Garlic",
"1 Spring Onion",
"1/2 Cup Carrot",
"1 Red Pepper",
"150g Couscous",
"A Handful Baby Spinach Leaves",
"4 Tbsps Coriander"
],
"description": "Close your eyes, open up your Ras El Hanout and inhale deeply. You are no longer standing in your kitchen. Around you are the sounds of a bustling market. Robed men sell ornate carpets and a camel nibbles affectionately at your ear. OK, we\u2019re pretty sure Paul McKenna\u2019s job is safe for now, but get cooking this recipe and take dinnertime on a magic carpet ride to Casablanca! Our tip for this recipe is to take your meat out of the fridge at least 30 minutes before dinner which will allow you to cook it more evenly.",
"difficulty": 0,
"fats": "5 g",
"favorites": 13,
"fibers": "",
"headline": "with Spinach and Lemon Couscous",
"highlighted": true,
"id": "53314247ff604d44808b4569",
"image": "https://api.hellofresh.com/recipe/image/53314247ff604d44808b4569",
"incompatibilities": null,
"ingredients": [
"1 Lemon",
"1 Fillet Skirt Steak",
"1 Tsp Ras El Hanout",
"1 Clove Garlic",
"1 Spring Onion",
"1/2 Cup Carrot",
"1 Red Pepper",
"150g Couscous",
"A Handful Baby Spinach Leaves",
"4 Tbsps Coriander"
],
"keywords": [
""
],
"name": "Moroccan Skirt Steak ",
"products": [
"classic-box"
],
"proteins": "31 g",
"rating": 1,
"ratings": 1,
"thumb": "https://api.hellofresh.com/recipe/thumb/53314247ff604d44808b4569",
"time": "PT30M",
"undeliverable_ingredients": [],
"user": {
"email": "khaleesi@hellofresh.hf",
"latlng": "40.712784, -74.005941",
"name": "Daenerys Targaryen"
},
"weeks": [
"2014-W25"
]
},
{
"calories": "458 kcal",
"carbos": "29 g",
"card": "https://api.hellofresh.com/recipe/card/53314276ff604d28828b456b",
"country": "GB",
"deliverable_ingredients": [
"2 Fillets Sea Bream",
"1 Lime",
"A Few Tomatoes",
"\u2153 Cup Onion",
"2 Cloves Garlic",
"1/2 Tsp Ginger",
"1 Tbsp Fish Sauce",
"2 Tbsp Coriander",
"2 Cups New Potatoes"
],
"description": "World-renowned people generally all have one thing in common: a legacy. For Henry Ford it was the motorcar, for Thomas Edison it was the lightbulb. For our intern Simon, it was this lip-smackingly awesome Sea Bream. Taking the warm crunchiness of potatoes against the fresh southern asian flavours of fish with coriander, ginger and lime, it\u2019s the perfect dish for transporting your tastebuds. Don\u2019t let the smell of the fish sauce throw you - add it gradually to your sauce for a really authentic asian spin!",
"difficulty": 0,
"fats": "6 g",
"favorites": 9,
"fibers": "",
"headline": "with Tomato Concasse and Crispy Potatoes",
"highlighted": true,
"id": "53314276ff604d28828b456b",
"image": "https://api.hellofresh.com/recipe/image/53314276ff604d28828b456b",
"incompatibilities": null,
"ingredients": [
"2 Fillets Sea Bream",
"1 Lime",
"A Few Tomatoes",
"\u2153 Cup Onion",
"2 Cloves Garlic",
"1/2 Tsp Ginger",
"1 Tbsp Fish Sauce",
"2 Tbsp Coriander",
"2 Cups New Potatoes"
],
"keywords": [
""
],
"name": "Simple Sumptuous Sea Bream",
"products": [
"classic-box"
],
"proteins": "29 g",
"rating": 2.5,
"ratings": 2,
"thumb": "https://api.hellofresh.com/recipe/thumb/53314276ff604d28828b456b",
"time": "PT35M",
"undeliverable_ingredients": [],
"user": {
"email": "arry@hellofresh.hf",
"latlng": "-33.867487, 151.206990",
"name": "Arya Stark"
},
"weeks": [
"2014-W14"
]
},
{
"calories": "717 kcal",
"carbos": "44 g",
"card": "https://api.hellofresh.com/recipe/card/533143bfff604d44808b456a",
"country": "GB",
"deliverable_ingredients": [
"2 Chicken Breasts",
"1 Ball Mozzarella",
"2 Tbsps Pesto",
"A Handful of New Potatoes",
"1 Bunches of Rocket",
"1 Onion"
],
"description": "Nostalgia is a powerful thing. For some it\u2019s triggered by the smell of freshly cut grass, for others by the sound of a love song from their heady teenage years. For Head Chef Patrick it\u2019s all about Swiss Roll. A firm dinnertime favourite from his primary school years, we still see him go all misty eyed at the mere mention of it. We\u2019re pretty sure that was the inspiration behind this little number. Tonight, prepare to create a little nostalgia that the little \u2018uns will remember for years!",
"difficulty": 0,
"fats": "10 g",
"favorites": 1,
"fibers": "",
"headline": "with Roasted Rocket Potatoes",
"highlighted": true,
"id": "533143bfff604d44808b456a",
"image": "https://api.hellofresh.com/recipe/image/533143bfff604d44808b456a",
"incompatibilities": null,
"ingredients": [
"2 Chicken Breasts",
"1 Ball Mozzarella",
"2 Tbsps Pesto",
"A Handful of New Potatoes",
"1 Bunches of Rocket",
"1 Onion"
],
"keywords": [
""
],
"name": "Mozzarella and Pesto Roulades",
"products": [
"family-box"
],
"proteins": "67 g",
"rating": null,
"ratings": null,
"thumb": "https://api.hellofresh.com/recipe/thumb/533143bfff604d44808b456a",
"time": "PT35M",
"undeliverable_ingredients": [],
"user": {
"email": "bastard@hellofresh.hf",
"latlng": "52.370216, 4.895168",
"name": "Jon Snow"
},
"weeks": [
"2013-W43"
]
},
{
"calories": "751 kcal",
"carbos": "105 g",
"card": "https://api.hellofresh.com/recipe/card/5331430fff604d557f8b456d",
"country": "GB",
"deliverable_ingredients": [
" 3 Soft Wholemeal Wraps",
"1 Tin Tomatoes",
"1 Tsp Mexican Spice",
"1 Tin Black Beans",
"1 Avocado",
"1 Lime",
"5 Tbsps Coriander",
"1/2 Cup Red Onion",
"1 Yellow Pepper"
],
"description": "Head Chef Patrick doesn\u2019t like fuss. He\u2019s always telling us that the best kind of food is simple, soulful grub that makes you feel loved. That said, every dinner is a chance to practice your presentation skills. Bigger plates are a great way of framing your food and a sprinkle of herbs or a drizzle of olive oil at the end gives everything a bit more pizzazz. For this recipe, we took classic Mexican ingredients and played with the presentation to create something that\u2019s as tasty to the eye as it is to the tongue. Arriba!",
"difficulty": 0,
"fats": "4 g",
"favorites": 7,
"fibers": "",
"headline": "with Homemade Guacamole and Black Bean Salsa",
"highlighted": true,
"id": "5331430fff604d557f8b456d",
"image": "https://api.hellofresh.com/recipe/image/5331430fff604d557f8b456d",
"incompatibilities": null,
"ingredients": [
" 3 Soft Wholemeal Wraps",
"1 Tin Tomatoes",
"1 Tsp Mexican Spice",
"1 Tin Black Beans",
"1 Avocado",
"1 Lime",
"5 Tbsps Coriander",
"1/2 Cup Red Onion",
"1 Yellow Pepper"
],
"keywords": [
""
],
"name": "Mexican Tortilla Stack",
"products": [
"veggie-box"
],
"proteins": "35 g",
"rating": 4,
"ratings": 1,
"thumb": "https://api.hellofresh.com/recipe/thumb/5331430fff604d557f8b456d",
"time": "PT35M",
"undeliverable_ingredients": [],
"user": {
"email": "little.finger@hellofresh.hf",
"latlng": "52.520007, 13.404954",
"name": "Petyr Baelish"
},
"weeks": [
"2014-W30"
]
},
{
"calories": "689 kcal",
"carbos": "84 g",
"card": "https://api.hellofresh.com/recipe/card/53314328ff604d4d808b456b",
"country": "GB",
"deliverable_ingredients": [
"2 Cups Butternut Squash",
"2 Sprigs Rosemary",
"100g Wild Rice",
"5 Tbsps Feta Cheese",
"2 Tbsps Pine Nuts",
"2 Cup Broccoli Florets",
"1 Vegetable Stock Pot"
],
"description": "We\u2019ve all heard that much overused culinary phrase \u201cfusion food\u201d, but this recipe is fusion of a slightly different kind. With the onset of Winter Patrick has taken some decidedly seasonal squash and the deep, heady scent of rosemary and combined them with the lighter flavour of feta and wild rice. The squash takes a little bit of work with a vegetable peeler but once you\u2019ve tackled and roasted it you\u2019ll never look back. We use any leftovers for butternut squash soup!",
"difficulty": 0,
"fats": "8 g",
"favorites": 5,
"fibers": "",
"headline": "with Wild Rice, Feta and Pine Nuts",
"highlighted": true,
"id": "53314328ff604d4d808b456b",
"image": "https://api.hellofresh.com/recipe/image/53314328ff604d4d808b456b",
"incompatibilities": null,
"ingredients": [
"2 Cups Butternut Squash",
"2 Sprigs Rosemary",
"100g Wild Rice",
"5 Tbsps Feta Cheese",
"2 Tbsps Pine Nuts",
"2 Cup Broccoli Florets",
"1 Vegetable Stock Pot"
],
"keywords": [
""
],
"name": "Roasted Rosemary Butternut Squash ",
"products": [
"veggie-box"
],
"proteins": "23 g",
"rating": null,
"ratings": null,
"thumb": "https://api.hellofresh.com/recipe/thumb/53314328ff604d4d808b456b",
"time": "PT40M",
"undeliverable_ingredients": [],
"user": {
"email": "brienne@hellofresh.hf",
"latlng": "-33.867487, 151.206990",
"name": "Brienne of Tarth"
},
"weeks": [
"2013-W50"
]
},
{
"calories": "",
"carbos": "",
"card": "https://api.hellofresh.com/recipe/card/53314343ff604d28828b456c",
"country": "GB",
"deliverable_ingredients": [
"Fresh Gnocchi",
"1 Large Bunch of Basil",
"4 Tbsps Pine Nuts",
"4 Tbsps Hard Italian Cheese",
"A Handful of Tenderstem Broccoli",
"1 Clove Garlic"
],
"description": "\u2018Allo Genovese\u2019 simply means \u2018in the style of Genoa\u2019, which is the northern Italian city famous for the pesto that you\u2019ll be making tonight. \u2018Pesto\u2019 actually comes from the word \u2018pestare\u2019, which means to pound or crush, referring to the old fashioned method of making it in a pestle & mortar. If you happen to have a food processor, you can whizz the pesto together in that, or alternatively just chop, chop, chop everything until it is tiny. Andiamo! ",
"difficulty": 0,
"fats": "",
"favorites": 5,
"fibers": "",
"headline": "with Toasted Pine Nuts and Tenderstem Broccoli",
"highlighted": true,
"id": "53314343ff604d28828b456c",
"image": "https://api.hellofresh.com/recipe/image/53314343ff604d28828b456c",
"incompatibilities": null,
"ingredients": [
"Fresh Gnocchi",
"1 Large Bunch of Basil",
"4 Tbsps Pine Nuts",
"4 Tbsps Hard Italian Cheese",
"A Handful of Tenderstem Broccoli",
"1 Clove Garlic"
],
"keywords": [
""
],
"name": "Gnocchi Allo Genovese",
"products": [
"veggie-box"
],
"proteins": "",
"rating": null,
"ratings": null,
"thumb": "https://api.hellofresh.com/recipe/thumb/53314343ff604d28828b456c",
"time": "PT25M",
"undeliverable_ingredients": [],
"user": {
"email": "stannis@hellofresh.hf",
"latlng": "52.370216, 4.895168",
"name": "Stannis Baratheon"
},
"weeks": [
"2014-W30"
]
},
{
"calories": "790 kcal",
"carbos": "100 g",
"card": "https://api.hellofresh.com/recipe/card/53314398ff604d6c7a8b456a",
"country": "GB",
"deliverable_ingredients": [
"200g Mince Beef",
"4 Pork Sausages",
"1 Carton Tomato Passata",
"2 Cloves Garlic",
"1 Bunch Parsley",
"600ml Milk",
"200g Polenta ",
"\u2153 Cup Parmesan"
],
"description": "\u201cPolpetti?!\u201d we hear you say. That\u2019s meatballs to you and me. But meatballs so good you want \r\n\r\nto parade them down the street waving your arms aloft like a passionate Italian grandmother. \r\n\r\nThese little rascals are perfect for your little rascals (both big and small!) as you can get \r\n\r\neveryone involved in rolling them up. Once served, everyone around the table must choose an \r\n\r\nItalian name and act Italian for the rest of dinner time. Andiamo!*",
"difficulty": 0,
"fats": "9 g",
"favorites": 1,
"fibers": "",
"headline": "with Creamy Parmesan Polenta",
"highlighted": true,
"id": "53314398ff604d6c7a8b456a",
"image": "https://api.hellofresh.com/recipe/image/53314398ff604d6c7a8b456a",
"incompatibilities": null,
"ingredients": [
"200g Mince Beef",
"4 Pork Sausages",
"1 Carton Tomato Passata",
"2 Cloves Garlic",
"1 Bunch Parsley",
"600ml Milk",
"200g Polenta ",
"\u2153 Cup Parmesan"
],
"keywords": [
""
],
"name": "Herbed Italian Polpetti",
"products": [
"family-box"
],
"proteins": "39 g",
"rating": null,
"ratings": null,
"thumb": "https://api.hellofresh.com/recipe/thumb/53314398ff604d6c7a8b456a",
"time": "PT35M",
"undeliverable_ingredients": [],
"user": {
"email": "piggy@hellofresh.hf",
"latlng": "52.520007, 13.404954",
"name": "Samwell Tarly"
},
"weeks": [
"2012-W01"
]
},
{
"calories": "556 kcal",
"carbos": "62 g",
"card": "https://api.hellofresh.com/recipe/card/5252b20c301bbf46038b477e",
"country": "GB",
"deliverable_ingredients": [
"Chicken Thighs",
"Sweet Chilli Sauce",
"Egg Noodles",
"Green Beans",
"Red Onion",
"Lime",
"Fish Sauce",
"Chinese Rice Vinegar",
"Soy Sauce",
"Garlic",
"Spring Onions",
"Plain Flour"
],
"description": "Patrick has been working on a theory that the fewer utensils you use to eat a meal, the tastier it\u2019s likely to be. Think about it - everything you eat with only a fork is usually delicious. Dispense with cutlery entirely to use your fingers and suddenly you\u2019re in taste bud paradise. That was the thinking behind this Japanese favourite. A surefire winner in the eateries of Tokyo, pick it up with your fingers and get stuck in! The first person to finish has to shout \u201cBanzaaaiiii\u201d!",
"difficulty": 2,
"fats": "4 g",
"favorites": 44,
"fibers": "",
"headline": "and Sweet and Sour Noodles",
"highlighted": true,
"id": "5252b20c301bbf46038b477e",
"image": "https://api.hellofresh.com/recipe/image/5252b20c301bbf46038b477e",
"incompatibilities": null,
"ingredients": [
"Chicken Thighs",
"Sweet Chilli Sauce",
"Egg Noodles",
"Green Beans",
"Red Onion",
"Lime",
"Fish Sauce",
"Chinese Rice Vinegar",
"Soy Sauce",
"Garlic",
"Spring Onions",
"Plain Flour"
],
"keywords": [
""
],
"name": "Genki Yakitori with Crispy Red Onions",
"products": [
"classic-box"
],
"proteins": "32 g",
"rating": 3.8,
"ratings": 8,
"thumb": "https://api.hellofresh.com/recipe/thumb/5252b20c301bbf46038b477e",
"time": "PT40M",
"undeliverable_ingredients": [],
"user": {
"email": "khal@hellofresh.hf",
"latlng": "48.208174, 16.373819",
"name": "Khal Drogo"
},
"weeks": [
"2013-W28"
]
}
];
</script>
<div>
</div>
<script id="jsbin-javascript">
$(document).ready(function () {
var dl;
var dd;
var ul;
var rThumb;
var rTitle;
var rRating;
var rIngr;
var test;
for (var i = 0; i < json.length; i++) {
dl = $('<dl/>', {
'id': json[i].id
});
dd = $('<dd/>', {
'class': 'moreInfo'
});
rThumb = $('<figure/>', {
'html': '<img src="'+json[i].thumb+'"/>'
});
rTitle = $('<dt/>', {
'html': '<strong>'+json[i].name+'</strong>',
'class' : 'rTitle'
});
rRating = $('<dd/>', {
'html': json[i].rating,
'data-rating': json[i].rating,
'class' : 'ratings'
});
ul = $('<ul/>', {
'class': 'ingr'
});
if (json[i].ingredients.length) {
for (var j = 0; j < json[i].deliverable_ingredients.length; j++) {
rIngr = $('<li/>', {
'html': json[i].deliverable_ingredients[j]
});
ul.append(rIngr);
}
}
dd.append(ul);
dl.append(dd);
dl.append(rThumb);
dl.append(rRating);
dl.append(rTitle);
$('div').append(dl);
}
});
</script>
</body>
</html>
Raw
jsbin.zuquk.js
$(document).ready(function () {
var dl;
var dd;
var ul;
var rThumb;
var rTitle;
var rRating;
var rIngr;
var test;
for (var i = 0; i < json.length; i++) {
dl = $('<dl/>', {
'id': json[i].id
});
dd = $('<dd/>', {
'class': 'moreInfo'
});
rThumb = $('<figure/>', {
'html': '<img src="'+json[i].thumb+'"/>'
});
rTitle = $('<dt/>', {
'html': '<strong>'+json[i].name+'</strong>',
'class' : 'rTitle'
});
rRating = $('<dd/>', {
'html': json[i].rating,
'data-rating': json[i].rating,
'class' : 'ratings'
});
ul = $('<ul/>', {
'class': 'ingr'
});
if (json[i].ingredients.length) {
for (var j = 0; j < json[i].deliverable_ingredients.length; j++) {
rIngr = $('<li/>', {
'html': json[i].deliverable_ingredients[j]
});
ul.append(rIngr);
}
}
dd.append(ul);
dl.append(dd);
dl.append(rThumb);
dl.append(rRating);
dl.append(rTitle);
$('div').append(dl);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment