Tokens

An example of how the token system will look. Also with a tip on how to manage those pesky em values

by kshep92

HTML

Ritual's Coffee - Reward: 1 free chiller
<ul class=tokens data-score=1 data-max=5></ul>
Catwalk Clothing - Reward: 20% Discount  on purchase
<ul class=tokens data-score=3 data-max=5></ul>
Wonderful World - Reward: $20 worth of accessories
<ul class=tokens data-score=5 data-max=5></ul>
Micles - Reward: $30 cash back
<ul class=tokens data-score=2 data-max=5></ul>

CSS

/* According to this article: http://css-tricks.com/css-font-size/ the usual default browser font size is 16px thus 1em = 16px. To make em calculations more manageable,
set the font size of the body to 10px or (62.5% of 16px) which makes em calculations 
much easier e.g. 0.5em = 5px 0.1em = 1px etc. This will come in great with responsive design */

body { font-family: sans-serif; font-size: 62.5%; }


ul {
margin-bottom: 0.8em;
}

ul.tokens li { display: inline-block; padding-right: 5px; width: 16px; height: 16px; }

li.token-full { background: url(http://www.kokaro.com/images/goldcoin_icon.gif) no-repeat; }
li.token-empty { background: url(http://cdn1.iconfinder.com/data/icons/fatcow/16x16/coin_single_silver.png) no-repeat; }

JavaScript

$(document).ready(function() {

    $uls = $(".tokens");
    for(i=0; i<$uls.length; i++) {
    
        max = $($uls[i]).data("max");
        score = $($uls[i]).data("score");
        empty = max - score;
        
        for(j=0; j<score; j++) {
        
            $($uls[i]).append("<li class=token-full></li>");
        }
        
        for(j=0; j<empty; j++) {
        
            $($uls[i]).append("<li class=token-empty></li>");
        }
    } 
    
});