Timecard Fixer

by kthornbloom

HTML

<div class="title">
Timecard Calculator
</div>
    <div class="box">
    <h1>Start Time</h1>
<input type="text" maxlength="2" class="start-hrs smallfield" value="00"> :
<input type="text" maxlength="2" class="start-min smallfield" value="00"> :
<input type="text" maxlength="2" class="start-sec smallfield" value="00">
<div class="start-dec">Decimal: 0.000</div>
<hr>
<h1>End Time</h1>
<input type="text" maxlength="2" class="end-hrs smallfield" value="00"> :
<input type="text" maxlength="2" class="end-min smallfield" value="00"> :
<input type="text" maxlength="2" class="end-sec smallfield" value="00">
<div class="end-dec">Decimal: 0.000</div>
<div class="result"></div>
</div>
    
<div class="info">
    <i>i</i>: Enter time in 24 hour HH-MM-SS format.
</div>

CSS

body {
    font-family:sans-serif;
    font-size:18px;
    line-height:1.5em;
    padding:30px;
}
.title {
    text-align:center;
    color:#286CE0;
    margin:20px 0;
    font-weight:100;
    font-size:1.3em;
}
hr {
    margin:10px -20px;
    border:none;
    border-bottom:1px solid #ccc;
}
.box {
    width:200px;
    text-align:center;
    padding:10px 20px 20px 20px;
    background:#eee;
    border-radius:4px;
    margin:0 auto;
}
.smallfield {
    width: 49px;
    font-size: 16px;
    outline:none;
    border:2px solid #ccc;
    color:#A1A1A1;
    border-radius:10px;
    text-align:center;
}
.smallfield:focus {
    border:2px solid #286CE0;
    color:#286CE0;
}
h1 {
    text-transform: uppercase;
    font-size: .8em;
    letter-spacing: .2em;
    color: #888;
    font-weight: bold;
}
.result {
    text-align: center;
    background: #286CE0;
    color: #fff;
    margin: 10px -20px 00px -20px;
    padding: 10px 0;
    border-radius: 0 0 4px 4px;
    display:none;
}
.start-dec, .end-dec {
    font-size: .8em;
    text-align: center;
    color: #999;
    display: none;
    background: #CACACA;
    border-radius: 25px;
    line-height: 1em;
    padding: 3px;
    margin: 5px;
}
.info {
    width:300px;
    margin:0 auto;
    font-size:.6em;
    color:#888;
    text-align:center;
}
.info i {
    font-family:serif;
}

JavaScript

$('input[type="text"]').focus(function() {
    if (this.value == this.defaultValue){ 
        this.value = '';
    }
    if(this.value != this.defaultValue){
        this.select();
    }
});
$('input[type="text"]').blur(function() {
    if ($.trim(this.value) == ''){
        this.value = (this.defaultValue ? this.defaultValue : '');
    }
});

$('.smallfield').on('input', function() {
    $('.box').css('paddingBottom','0');
    $('.result, .start-dec, .end-dec').slideDown();
    var startsec = parseInt($('.start-sec').attr('value'));
        startmin = parseInt($('.start-min').attr('value'));
        starthrs = parseInt($('.start-hrs').attr('value'));
        endsec = parseInt($('.end-sec').attr('value'));
        endmin = parseInt($('.end-min').attr('value'));
        endhrs = parseInt($('.end-hrs').attr('value'));
        startTime = (((startsec/60) + startmin)/60) + starthrs;
        endTime = (((endsec/60) + endmin)/60) + endhrs;
        deciResult = (endTime - startTime).toFixed(3);
        $('.result').html('Difference: ' + deciResult);
        $('.start-dec').html('Decimal: ' + (startTime).toFixed(3));
        $('.end-dec').html('Decimal: ' + (endTime).toFixed(3));
});