Skip to content

Instantly share code, notes, and snippets.

@joemerante

joemerante/gist:7852259

Last active December 30, 2015 15:59
Show Gist options
  • Save joemerante/7852259 to your computer and use it in GitHub Desktop.
Save joemerante/7852259 to your computer and use it in GitHub Desktop.
Download ZIP
Javascript and qunit test, then the qunit html for the recipe cards I made on drpescatore.com/2013-holiday-recipes - stacks of cards, when you click on one, it comes to the top. MIT licensed code, recipes not mine and reprinted w/ permission, have fun!
Raw
gistfile1.txt
// recipe_cards.js
$('.cards-wrapper').on('click', '.card', function() {
var new_top = this;
var cards_length = $(this).closest('.cards-wrapper').find('.card').length;
var l = cards_length - 1;
$(this).closest('.cards-wrapper').find('.card').each(function() {
if (this == new_top) {
// highest card always top css class - card 3 in 3-card layout, card 4 in 4-card layout
$(this).attr("class", "card card-" + cards_length + "-" + cards_length);
}
else {
$(this).attr("class", "card card-" + l + "-" + cards_length);
l -= 1;
};
});
});
// recipe_cards_tests.js
module("three card layout");
test('clicked card in 3-card layout becomes top card', 1, function(){
// get random number btwn 1 and 3, Math.random is zero-indexed
var random = Math.floor(Math.random() * 3) + 1;
var card_3 = $('.card-' + random + '-3');
var card_3_title = card_3.find('.card-heading').text();
card_3.trigger("click");
deepEqual(card_3_title, $('.card-3-3 .card-heading').text(), "Random clicked card title matches top card title");
});
module("four card layout");
test('clicked card in 4-card layout becomes top card', 1, function(){
// get random number btwn 1 and 4, Math.random is zero-indexed
var random = Math.floor(Math.random() * 4) + 1;
var card_4 = $('.card-' + random + '-4');
var card_4_title = card_4.find('.card-heading').text();
card_4.trigger("click");
deepEqual(card_4_title, $('.card-4-4 .card-heading').text(), "Random clicked card title matches top card title");
});
Raw
gistfile2.txt
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Example</title>
<link rel="stylesheet" href="./resources/qunit-1.12.0.css">
<link rel="stylesheet" href="recipe_cards.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="./resources/qunit-1.12.0.js"></script>
<script src="recipe_cards_tests.js"></script>
<!-- had to load my script in the body for it to work on this page.. -->
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture">
<!-- qunit resets the elements in here after each test; seems like the div immediately should would be fine in here, and the second test's jquery found the right elements but the trigger() wouldn't fire. HT http://stackoverflow.com/questions/16444561/qunit-fails-tests-inconsistently-alternately -->
</div>
<!-- Cards block 1 -->
<h3>Starters</h3>
<div class='cards-wrapper'>
<div class="card card-1-3">
<div class='card-heading'>Artichokes with Lemon-Tarragon Butter</div>
<div class='card-body'>
<div class='card-ingredients'>
<ul>
<li>6 cups of water</li>
<li>2 tsp. salt, divided</li>
<li>2 whole artichokes, stems cut off and leaf tips trimmed</li>
<li>1/4 cup ( 1/2 stick) butter </li>
<li>2 Tbs. lemon juice</li>
<li>1/4 tsp. grated lemon peel</li>
<li>1/4 tsp. dried tarragon</li>
<li>1/4 tsp. salt</li>
</ul>
</div>
<div class='card-instructions'>
<p>Bring water and 2 tsp. salt to a boil in a large saucepan, over high heat. Add artichokes, return to a boil. Reduce heat to medium-low, cover and simmer35-34 minutes, or until leaves detach easily. Remove artichoke from the water. Turn artichokes upside down on a platter and drain well.</p>
<p>Cut artichokes in half and remove the fuzzy choke at the bottom that covers the artichoke heart.</p>
<p>Combine butter, lemon juice, lemon peel, tarragon and remaining 1/4 tsp. salt in a small saucepan over low heat until butter is melted. Serve tarragon-butter in small bowls for dipping.</p>
</div>
</div>
</div>
<div class='card card-2-3'>
<div class='card-heading'>Smoked Salmon Spread</div>
<div class='card-body'>
<div class='card-ingredients'>
<ul>
<li>8 oz. cream cheese, softened</li>
<li>3 oz. smoked salmon (lox) chopped</li>
<li>2 Tbs. fresh lemon juice</li>
<li>1 Tbs. chopped fresh dill</li>
<li>1 Tbs. capers</li>
</ul>
</div>
<div class='card-instructions'>
<p>Combine cream cheese, salmon, lemon juice, dill and capers in a small bowl, and mix well. Garnish with fresh dill. Serve with fresh celery sticks, carrots, cucmber slices or crackers.</p>
</div>
</div>
</div>
<div class='card card-3-3'>
<div class='card-heading'>Vegetable Dip</div>
<div class='card-body'>
<div class='card-ingredients'>
<ul>
<li>4 oz. sour cream</li>
<li>4 oz. mayonnaise</li>
<li>1/4 cup dried onion flakes</li>
<li>1/8 cup dill</li>
<li>dash of hot sauce to taste</li>
</ul>
</div>
<div class='card-instructions'>
<p>Combine all ingredients in a bowl. Refrigerate overnight.</p>
<p>Serve with celery sticks carrots, sliced peppers and cucmber slices.</p>
</div>
</div>
</div>
</div>
<!-- End Cards block 1 -->
<!-- Cards block 2 - four card block -->
<h3>Sides</h3>
<div class='cards-wrapper'>
<div class="card card-1-4">
<div class='card-heading'>Roasted Cremini Mushrooms With Shallots</div>
<div class='card-body'>
<div class='card-ingredients'>
<ul>
<li>1 pound cremini mushrooms halved</li>
<li>1/2 cup shallots</li>
<li>1 Tbs. <a href="http://drpescatore.com/macnut-oil">Mac Nut Oil</a></li>
<li>1/2 tsp. sea salt</li>
<li>1/2 tsp. dried rosemary</li>
<li>1/4 tsp fresh ground pepper</li>
</ul>
</div>
<div class='card-instructions'>
<p>Preheat oven to 400</p>
<p>Spread mushrooms and shallots on rimmed baking sheet.</p>
<p>Whisk oil, salt, rosemary and pepper in small bowl. Pour over mushrooms and shallots, toss to coat evenly. Arrange in single layer on baking sheet.</p>
<p>Bake 15-18 minutes or until mushrooms are browned and tender.</p>
<p>Garnish with fresh rosemary.</p>
</div>
</div>
</div>
<div class='card card-2-4'>
<div class='card-heading'>Whipped Mock Potatoes</div>
<div class='card-body'>
<div class='card-ingredients'>
<ul>
<li>1 head of cauliflower</li>
<li>1/4 cup butter, softened</li>
<li>2 Tbs. <a href="http://drpescatore.com/macnut-oil">Mac Nut oil</a></li>
<li>8 oz. sour cream</li>
<li>2 oz. parmesan cheese, grated salt</li>
<li>Black pepper, freshly ground</li>
</ul>
</div>
<div class='card-instructions'>
<p>Preheat oven to 400 F</p>
<p>Steam cauliflower until it is very tender. Drain, then spread the florets on a baking dish. Bake for 10-12 minutes.</p>
<p>Remove the cookie sheet from the oven, using a potato masher, mash the cauliflower well. Return the cauliflower to the oven for 10 more minutes.</p>
<p>The more you dry out the cauliflower, the more it will be like potatoes.</p>
<p>Remove from oven, put in a blender or food processor. Add butter, oil and sour cream, and blend until desired consistency. Add the Parmesan cheese, salt and pepper.</p>
</div>
</div>
</div>
<div class='card card-3-4'>
<div class='card-heading'>Brussels Sprouts With Bacon</div>
<div class='card-body'>
<div class='card-ingredients'>
<ul>
<li>3 slices of bacon, chopped</li>
<li>1 Tbs <a href="http://drpescatore.com/macnut-oil">Mac Nut oil</a></li>
<li>1 shallot chopped</li>
<li>1 1/2 pound Brussels sprouts, trimmed &amp; halved</li>
<li>Salt and pepper to taste</li>
<li>1 cup chicken or vegetable broth</li>
</ul>
</div>
<div class='card-instructions'>
<p>Brown bacon in medium skillet over medium high heat.</p>
<p>Remove bacon and place on paper plate.</p>
<p>Add Mac Nut Oil to the skillet, then add chopped shallot to pan.</p>
<p>Saute for 1-2 minutes. Add Brussels sprout, and coat in oil. Season with salt and pepper.</p>
<p>Cook Brussels sprouts, 2-3 minutes until they begin to soften, then add broth.</p>
</p>Bring broth to a bubble, cover and reduce heat to medium low.Cook 10 minutes, until tender. Transfer to serving dish, and top with cooked bacon bits.</p>
</div>
</div>
</div>
<div class='card card-4-4'>
<div class='card-heading'>Sauteed Kale</div>
<div class='card-body'>
<div class='card-ingredients'>
<ul>
<li>1 1/2 pounds young kale, stems and leaves chopped</li>
<li>3 Tbs. <a href="http://drpescatore.com/macnut-oil">Mac Nut oil</a></li>
<li>2 cloves of garlic, finely sliced</li>
<li>1/2 cup chicken or vegetable broth</li>
<li>Salt and pepper</li>
<li>2 Tbs. red wine vinegar</li>
</ul>
</div>
<div class='card-instructions'>
<p>Heat oil in saucepan over medium-high heat. Add the garlic.</p.
<p>And cook until soft, but not brown. Raise heat to high, add the broth and kale. Toss to combine. Cover and cook for 5 minutes.</p>
<p>Remove the cover and continue to cook, stirring until all the liquid evaporates.</p>
<p>Season with salt and pepper. Toss in vinegar. Serve.</p>
</div>
</div>
</div>
</div>
<!-- End Cards block 2 -->
<script src="../marinelli/js/recipe_cards.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment