Calculate Points

Working Revisions to the Reward Points Calculator on Elance. The fiddle automatically imports jQuery and jQueryUI, as well as generaties the HTML template so that the HTML panel can focus on the relevant elements.

by abbylangner

HTML

<div id="calculator">
    <p class="title">REWARDS CALCULATOR</p>
    <p class="dropdowns">
        <select class="dd1"></select>
        <select class="dd2"></select>
        <select class="dd3"></select>
    </p>
    <p class="purchases">
        Purchases: 
        <span class="value">1</span>
    </p>
    <div class="slider"></div>    
    <p class="total">Total Points Earned:
        <span class="value">0</span>
    </p>
    <p class="rewards">
        Reward Example:
        <a href="#" title="Go to Catalog"></a>
        <span class="disclaimer">
            DISCLAIMER COPY: Lorem ipsum etc etc
        </span>
    </p>
</div>

CSS

#calculator{
    width: 160px;
    height: 280px;
    padding: 8px;
    font-family: "Verdana", "Arial Narrow", sans-serif;
    font-size: 11px;
    background-color: #D42E12;
    color: #FFFFFF;
}
#calculator :focus{
    /*Disable useragent outline on focused elements*/
    outline: 0px;
}
#calculator p{
    margin: 0px;
}
#calculator img{
	border: 0px; /*IE7,8*/
}
#calculator .title{
    font-weight: bold;
    color: #F7D117;
    width: 50%;
    font-size: 13px;
}
#calculator .dropdowns{
    padding-top: 8px;
}
#calculator select{
    display:block;
    width: 100%;
    font-size: 10px;
    border: 1px solid #FFFFFF;
    margin-bottom: 3px;
    box-shadow: none;
    background: #FFFFFF 
        url('http://abbysdoor.com/work_samples/select-handle.png')
        no-repeat
        152px center;
    -webkit-appearance: none;
    -webkit-border-radius: 0px; /*Safari and Chrome on Mac*/
}
#calculator select[disabled]{
    background-color: #D2D3D5;
}
#calculator .purchases{
    position: relative;
    margin-bottom: 2px;
}
#calculator .purchases .value{
    text-align: right;
	right: 0px;
	top: 0px;
	position: absolute;
	display: block;
	font-weight: bold;
    font-size: 12px;
}
#calculator .total{
    padding: 8px 0px 4px;
}
#calculator .total .value{
    display: inline-block;
    background-color: #FFF;
    color: #000;
    text-align: right;
    width: 38px;
    padding-right: 2px;
}
#calculator .rewards a{
    display: block;
    width: 160px;
    height: 90px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    margin-top: 1px;
}
#calculator .rewards img{
    position: relative;
    width: 160px;
    height: 90px;
    display:inline-block;
}
#calculator img:first-child{
    
}
#calculator .disclaimer{
    font-size: 8px;
}
/*Styles below override the jQuery UI stylesheet*/
#calculator .slider{
    /*Override border and background of container element*/
    border-color: #FFFFFF;
    background: #D2D3D5;
    height: 16px;
}
#calculator...

JavaScript

PointsApp = {
    examples: [
        {
            img: 'http://lisaalbrecht.com/points/images/Point%20Tiles1.jpg',
            pts: 1200
        },
        {
            img: 'http://lisaalbrecht.com/points/images/Point%20Tiles2.jpg',
            pts: 7200
        },
        {
            img: 'http://lisaalbrecht.com/points/images/Point%20Tiles4.jpg',
            pts: 5200
        },
        {
            img: 'http://lisaalbrecht.com/points/images/Point%20Tiles3.jpg',
            pts: 10700
        },
        {
            img: 'http://lisaalbrecht.com/points/images/Point%20Tiles5.jpg',
            pts: 14600
        },
        {
            img: 'http://lisaalbrecht.com/points/images/Point%20Tiles7.jpg',
            pts: 34700
        },
        {
            img: 'http://lisaalbrecht.com/points/images/Point%20Tiles6.jpg',
            pts: 50200
        }
    ], 
    options: {
        'Choose your service': 0,
        'DIY': {
            'skip': {
                'Choose your product': 0,
                'A': 150,
                'B': 225,
                'C': 300
            }
        },
        'DIFM': {
            'Choose your vehicle type': 0,
            'DPU':{
                'Choose your product': 0,
                'A': 300,
                'B': 525,
                'C': 675
            },
            'HDOO':{
                'Choose your product': 0,
                'A': 1000,
                'B': 1750,
                'C': 2250
            }
        }
    },
    buildOption: function(target, name, value){
        var opt = $("<option>").val(value).html(name);
        if(value==0){ //Default Disabled Options
            opt.prop("disabled",true);
            opt.prop("selected",true);
        }
        target.append(opt);
    },
    buildLevel1: function(){
        var level1elem = PointsApp.el.find(".dd1");
        for(var x in PointsApp.options){
            var v = x;
            if(PointsApp.options[x]==0){ v=0; }
           ...