Rent

Working out how much I'm owed

by will

HTML

<div class="calculator">
    
    <div class="everyone">
        
        <h1>Everyone</h1>
        
        <label>
            Internet
            <input data-monthly="true" value="30.60"/>
        </label>
        <label>
            Electricty
            <input data-monthly="true" value="90"/>
        </label>
        <label>
            Gas
            <input data-monthly="true" value="37.50"/>
        </label>
        <label>
            Water
            <input data-monthly="true" value="27.3"/>
        </label>
        <label>
            Old electricity <span>single</span>
            <input data-monthly="false" value="138"/>
        </label>
        
    </div>
    
    <div class="person" data-name="will">
        
        <label>
            Will rent
            <input data-monthly="true" value="335"/>
        </label>
        
        <label>
            Allready paid
            <input data-paid value="0"/>
        </label>
        
    </div>
    
    <div class="person" data-name="ben">
        
        <label>
            Ben rent
            <input data-monthly="true" value="270"/>
        </label>
        
        <label>
            Already paid
            <input data-paid value="0"/>
        </label>
        
    </div>
    
    <div class="person" data-name="si">
        
        <label>
            Si rent
            <input data-monthly="true" value="290"/>
        </label>
        
        <label>
            Allready paid
            <input data-paid value="0"/>
        </label>
        
    </div>
    
    <div class="result">
        <h2 class="will">Will - £<span>xxxx.xx</span></h2>
        <h2 class="ben">Ben - £<span>xxxx.xx</span></h2>
        <h2 class="si">Si - £<span>xxxx.xx</span></h2>
    </div>
    
</div>

CSS

* {
    -webkit-box-sizing: border-box;
}

div {
    font-family: arial;
}

label {
    display: block;
    padding: 15px;
}

input {
    display:block;
    width: 100%;
    padding: 8px;
    margin-top: 5px;
}

.everyone {
    overflow: hidden;
    background: #ccc;
}

h1 {
    padding: 15px 15px 0;
    font-size: 28px;
}

label span {
    opacity: .4;
}

.everyone label {
    float: left;
    width: 33.33333%;
}

.person {
    float:left;
    width: 33.3333333%;
    background: #eee;
}

.result {
    clear:both;
    background: black;
    color: #fff;
    overflow: hidden;
}

h2 {
    float: left;
    width: 33.3333333%;
    padding:15px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}

JavaScript

var people = {
    will: 0,
    ben: 0,
    si: 0
};

var everyone = 0;
var months = 6;

var calculate = function(){
    
    for( person in people ){
        people[person] = 0;
    }
    
    everyone = 0;
 
    $('.everyone input').each(function(){
        
        var $this = $(this),
            val = parseFloat( $this.val() ) / 3;
       
        if( $this.data('monthly') )
            val = val * months;
        
        everyone = everyone + val;
        
    });
    
    $('.person').each(function(){
        
        var $this = $(this),
            person = $this.data('name');
       
        $this.find('input:not([data-paid])').each(function(){
           
            people[person] = people[person] + parseFloat( $(this).val() * months );
            
        });
        
        $this.find('input[data-paid]').each(function(){
            
            people[person] = people[person] - parseFloat( $(this).val() );
            
        });
        
    });
    
    for( person in people ){
        
        var total = people[person] + everyone;
        
        $('.result h2.' + person + ' span' ).text( precise_round(total, 2) );
        
        console.log(everyone);
    }
   
}

calculate();

$('input').change(function(){
    calculate();
});

function precise_round(num,decimals){
return Math.round(num*Math.pow(10,decimals))/Math.pow(10,decimals);
}