Answer poll graphy

by praveen_jegan

HTML

<h1> Do you like to play candy crash? </h1>

<div class="chart">
    <div class="sep"> <span>I lovin it!!</span>

        <div class="line">
            <div id="one"></div>
        </div>
    </div>
    <div class="sep"> <span>I hate it!!</span>

        <div class="line">
            <div id="two"></div>
        </div>
    </div>
    <div class="sep"><span>Ekk waste of time!!</span>

        <div class="line">
            <div id="three"></div>
        </div>
    </div>
    <div class="sep"><span>#*## notifications!!</span>

        <div class="line">
            <div id="four"></div>
        </div>
    </div>
    <div class="sep"><span>Just a timepass</span>

        <div class="line">
            <div id="five"></div>
        </div>
    </div>
    <div class="sep"><span>Gonna kill the creators</span>

        <div class="line">
            <div id="six"></div>
        </div>
    </div>
</div>

CSS

.chart .line {
    border-bottom: 1px solid #ccc;
    width: 100%;
}
.chart .line div {
    width: 0;
    font-family: sans-serif;
    background-color: steelblue;
    text-align: right;
    color: white;
    height: 5px;
}

.sep{
    padding: 10px;
}

JavaScript

var total = 108;
var one = 4;
var two = 8;
var three = 15;
var four = 16;
var five = 23;
var six = 42;

$('#one').animate({
    width: calculatePercent(one)
}, 1500);
$('#two').animate({
    width: calculatePercent(two)
}, 1500);
$('#three').animate({
    width: calculatePercent(three)
}, 1500);
$('#four').animate({
    width: calculatePercent(four)
}, 1500);
$('#five').animate({
    width: calculatePercent(five)
}, 1500);
$('#six').animate({
    width: calculatePercent(six)
}, 1500);


function calculatePercent(a) {
    var percent = (a / total) * 100;
    console.log(a, percent.toFixed());
    return percent.toFixed() + "%";
}