Jay's Thermometer

This is a thermometer...there are many like it, but this one is Jay's.

by wrxsti85

HTML

<div style="float: left;">
    <input type="checkbox" value="- SEO Crap" /><input type="text" placeholder="Enter Subject" /><br />
    <input type="checkbox" value="- Social Media Crap" /><input type="text" placeholder="Enter Subject" /><br />
    <input type="checkbox" value="- List Local Crap" /><input type="text" placeholder="Enter Subject" /><br />
    <input type="checkbox" value="- Email Crap" /><input type="text" placeholder="Enter Subject" />
</div>

<div class="thermo-container">
    <div class="thermo-part thermo-part-top"><div class="desc"></div></div>
    <div class="thermo-part"><div class="desc"></div></div>
    <div class="thermo-part"><div class="desc"></div></div>
    <div class="thermo-part"><div class="desc"></div></div>
    <div class="thermo-part-bottom"><div class="desc"></div></div>
</div>

CSS

.thermo-container {
    width: 100px;
    margin-left: 200px;
}

.thermo-part, .thermo-part-top {
    background: rgb(174, 188, 216);
    width: 50px;
    height: 100px;
    margin: 0px auto;
    position: relative;
}

.thermo-part-top {
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
}

.thermo-part-bottom {
    width: 100px;
    height: 100px;
    position: relative;
    bottom: 15px;
    border-radius: 100px;
    background: rgb(79, 121, 208);
}

.filled {
    background: rgb(79, 121, 208);
}

.desc {
    position: absolute;
    left: 105%;
    top: 50px;
    width: 400px;
}

JavaScript

$('input[type="checkbox"]').change(function(){
    $('.filled').removeClass('filled');
    $('.desc').text('');
    var desc = [];
    var thermolength = $('.thermo-part').length;
    $('input[type="checkbox"]').each(function(){
        if( $(this).is(':checked') ){
            desc.push( $(this).next().val() );
        }
    });
    $.each(desc, function(k, description){
        if(thermolength > 0){
            $('.thermo-part:nth-child(' + (thermolength) + ')').addClass('filled').children('.desc').text('- ' + description);
            thermolength--;
        }
    });
});