10000 Hours?

Today I came across a post (10,000 Hours. How Long is That?) which discusses 10,000 hours, the theoretical amount of time it takes to become a "Master" at a complicated task. Be it playing guitar, written, or coding websites. In that post, a neat little tool was created to calculate how long it would take to achieve 10,000 hours. So naturally, I asked myself: how would I complete the same task?

First: Setup for the HTML


<h1>How Long is 10,000 Hours?
<div class='slider hours' data-from='1' data-to='24'><p>Hours per Day

</div> <div class='slider days' data-from='1' data-to='7'><p>Days per Week</p></div> <dl> <dt>Days</dt> <dd class='value days'></dd> <dt>Years</dt> <dd class='value years'></dd> </dl>

I, like many other coders, am lazy, so I opted to have JavaScript build the HTML for the select boxes for me.


$('.slider').each(function() {
    var _select = $('<select>');
    for (var i = $(this).attr('data-from'); i <= $(this).attr('data-to'); i++) {
        _select.append($('<option>').prop({'value':i}).html(i));
    }
    $(this).append(_select.on('change', updateDL));
});

After that, It was much simpler to do that math then I can expected. For the number of days it would take to accomplish the goal, divide the ten thousand hours by number of hours per day, which gives you now many days it would take. Year are a matter of dividing the number of days by the 365 days in a years.

After that, I wanted to found my figures a little, however Native JavaScript does not give you a method to round to a decimal, so I made a quick method to multiply my number by a multiple of ten, round that figure, and then divide the value by the same multiple of them.


function decimalRound(_value,_decimalPlaces) {
    var _multiplyer = Math.pow(10,_decimalPlaces);
    _value = _value*_multiplyer;
    _value = Math.round(_value);
    _value = _value / _multiplyer;
    return _value;
}

And just like that, a we have a quick little project for calculating how long it would take to achieve ten thousand hours.