JSFiddle - React, Tailwind, and code Playground
by p337
HTML
<div id="scratch_content" class="compare">
<div class="scratch_list_table grey_back rounded scratch_list_table_active" id="112" style="height: 1155px;">
<div class="summary" id="summary_112">
<h3 id="game_data_title_112">Hit The Jackpot </h3>
<span><input type="checkbox" id="remove_cart_112" class="remove_cart" title="Remove From to Comparison Cart"> Uncheck to Remove This Ticket</span>
<h3 class="ticket_price">$20</h3>
</div>
<div id="game_data_details_112" style="display: block;">
<div style="display:block;float:left;width:100%;">
<div class="top_prize">
<h3>TOP PRIZE:</h3>
<br>
<h4>$1,000,000</h4>
</div>
<div class="chances_win">
<h3>CHANCES TO WIN:</h3>
<br>
<h4>31</h4>
</div>
</div>
<hr>
<div class="ticket_image" style="display: block;">
<img src="http://cdn.mdlottery.com/scratch_off_art/Hit-the-Jackpot-ITVM_P1-red.gif">
<hr>
</div>
<br>
<div class="description">
<p class="scratch_description">Over $21 million in total prizes!
<br>
<br>Match any of YOUR NUMBERS to any 1 or more of the 6 JACKPOT NUMBERS to win the PRIZE shown for that NUMBER. Reveal a "pot of gold" symbol to WIN ALL 30 PRIZES!
<br>
<br>There is also a bonus play area. Reveal a "$$" symbol to win $100 automatically.</p>
<hr>
</div>
<div class="game_num" style="display: none;">
<h5>Game Number:</h5>
<p>112</p>
</div>
<div class="game_start" style="display: none;">
<h5>Game Start Date:</h5>
<p>08/21/2013</p>
...
CSS
h1, h2, h3, h4, h5, p {
font-size:1em;
font-weight:normal;
margin:0;
}
.summary h3:first-child:before {
content:"Name: ";
}
.ticket_price:before {
content:"Price: ";
}
.top_prize h3, .top_prize h4 {
display:inline-block;
}
.scratch_list_table {
border-bottom:1px solid gray;
margin-bottom:5px;
min-height:300px;
}
h5, p {
display:inline-block;
}
.ticket_image {
float:right;
}
JavaScript
cleanUp();
filterJP(1);
var remainingInput = "Monopoly 68%\
Orioles 12%\
Sparkling 7s 11%\
Lucky Millionaire 11%\
Great Big Bingo 74%\
Red Hot Riches 26%\
10x Cash 55%\
Metal Money Mania 29%\
Club Casino 42%\
Biggest Taxes Paid Ever 43%\
Super Slots 53%\
Hit the Jackpot 48%\
I Heart Crossword 28%\
Double Take 77%\
Big Cash Multiplier 45%\
Blast of Cash 18%\
$100,000 Richer 49%\
Winner’s Luck 81%\
Double Dollar Fortune 60%\
$20 Grand Fortune 5%\
Funky 5s 60%\
Sweethearts 49%\
Rainbow Blackout Bingo 31%\
Roll ‘Em 34%\
Spades 44%\
Money Multiplier 87%\
Green Streak 96%\
Get Rich 79%\
Lucky 7s Game Book 84%\
Top Secret Cash 90%\
Hearts are Wild Tripler 46%\
Rack up the Cash 52%\
Cash is King 48%\
Money Bag Bonus 43%\
Double Dice 88%\
24 Karat Cash 54%\
King Size Bingo 99%\
Prize Line Bingo 91%\
Money Talks 93%\
Nifty $50s 69%";
$('<input class="remaining_percent"></input>').appendTo($('.game_start'));
//remove any that have no jackpots
function filterJP(min) {
$('.prizes_remaining').each(function () {
//first row, last cell
var jpRemaining = $(this).find('tr:nth-child(2) td:last-child').html();
if (jpRemaining <= min) {
$(this).closest('.scratch_list_table').remove();
}
});
}
//remove all the extra crap
function cleanUp() {
$('*').removeAttr("style");
$('.remove_cart').parent().remove();
$('br').remove();
$('.scratch_description').remove();
$('hr').remove();
$('a').remove();
$('.game_start + p').remove();
$('.game_end + p').remove();
$('.prizes_remaining + h5').remove();
$('.prizes_remaining + p').remove();
$('.prizes_remaining + h5').remove();
$('.prizes_remaining + p').remove();
$('.prizes_remaining > h3').remove();
$('.chances_win').remove();
$('.game_num').remove();
$('.ticket_image').each(function () {
$(this).prependTo($(this).closest('.scratch_list_table'));
});
}
/**/