Price Calculator

HTML

<h1>Price Calculator</h1>
<fieldset>
    <input type="text" id="aHours" value="30" min="0" max="200" step="5" class="hours">
    <input type="range" id="a" value="220" min="150" max="300" step="5" class="price">
</fieldset>

<fieldset>
    <input type="range" id="bHours" value="0" min="0" max="200" step="5" class="hours">
    <input type="range" id="b" value="200" min="150" max="300" step="5" class="price">
</fieldset>

<fieldset>
    <input type="range" id="cHours" value="100" min="0" max="200" step="5" class="hours">
    <input type="range" id="c" value="190" min="150" max="300" step="5" class="price">
</fieldset>

<output></output>



<link href='http://fonts.googleapis.com/css?family=Oxygen' rel='stylesheet' type='text/css'>
<footer>a <a href="http://reallygood.co.il" target="_blank">Really good</a> demonstration. Confidential.</footer>

CSS

body {text-align: center; font-family: 'Oxygen', sans-serif; font-size: 18px; margin: 30px; background: url(http://subtlepatterns.com/patterns/brillant.png); line-height: 160%;}

h1 {font-size: 28px; margin-bottom: 35px;}
.price { margin-left: 10px;}

input[type=range]:before {position: relative; top: -5px; color: #888;}
input[type=range]::-webkit-slider-thumb {
    background: red;
    position: relative;
    top: -7px;
}
    

.hours:before {content: attr(data-value) " Hours";}
.price:before {content: "₪" attr(data-value);}

output {font-weight: bold; display: block;}
output p {font-size: 75%; color: #222;}

footer {font-size: 70%; color: #777; margin-top: 40px;}
footer a {color: #ce1729;}

JavaScript

var prices = $('.price');
var hours = $('.hours');
var inputs = $('input[type=range]');
var output = $('output');

function updateVal(){
    inputs.each(function(){
        $(this).attr('data-value', this.value);
    });
}

function sum(){
    var total,
        values = prices.map(function(index, input){
        return +input.value;
    }).toArray();
    values = values.map(function(price, i){
        var hrs = +hours.get(i).value;
        var price = price * hrs;
        return price;
    });
    var totalHours = hours.map(function(i, input){ return +input.value; }).toArray();
    totalHours = eval( totalHours.join('+') );
    
    total = eval( values.join('+') );
    
    var text = format(total) + ' for ' + totalHours + ' hours <p>Average rate per hour is ₪' + (total / totalHours).toFixed(2);
    output.html(text);
}

function format(val) {
    return "₪" + Number(val).toFixed(0).toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
}

inputs.change(function(){
    updateVal();
    sum();
});

updateVal();
sum();