Bütçe Hesaplama

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <style>
        #container{
            padding-right: 15px;
            padding-left: 15px;
            padding-top: 15px;
            margin-right: auto;
            margin-left: auto;
        }
        table td{
            margin: 20px;
        }

        input{
            cursor: pointer;
        }
        #info{
            color:#ff1121;
            font-weight: bold;
        }
        #education .color,#educationBar{
            background: #4986E7;
        }
        #environment .color,#environmentBar{
            background: #16A765;
        }
        #military .color,#militaryBar {
            background: #E9B330;
        }
        #health .color,#healthBar{
            background: #ff1121;
        }
        #crime .color,#crimeBar{
            background: #A076DD;
        }
        .meter{
            background: #555;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
            padding: 5px;
        }
        .meter span {
            background: #eff151;
            border-radius: 5px;
            height: 10px;
            display: block;
        }
        .color{
            width: 25px;
            height: 25px;
            border: 1px #000000 solid;
            float: left;
        }
        .bar{
            width: 50px;
            float: left;
            border: 1px rgba(255, 255, 255, 0) solid;
            margin-left: 10px;
        }

        #chart{
            border: 1px #000000 solid;
            width: 325px;
            height: 250px;
            float: left;
            padding: 10px;
        }

    </style>
</head>
<body>
<div id="container">

    <div id="overAll">
        <table>
            <tr>
                <td style="width: 200px;"> <label>Toplam:  <span id="total"> 0%</span></label> </td>
                <td> : </td>
                <td style="width: 300px">
                    <div class="meter">
                        <span style="width: 0"></span>
                    </div>
                </td>
                <td id="info"> ! Bütçenizi Aşıyor </td>
            </tr>
        </table>
    </div>
    <br>
    <div style="width: 100%;float: left;margin-left: 0px">
        <div id="chart">
            <span id="educationBar" class="bar"></span>
            <span id="environmentBar" class="bar"></span>
            <span id="militaryBar" class="bar"></span>
            <span id="healthBar" class="bar"></span>
            <span id="crimeBar" class="bar"></span>
        </div>
    </div>
    <div id="division" style="float: left;margin-top: 2%">
        <table>
            <tr id="education">
                <td> <label>Eğitim:  <span> 0%</span></label> </td>
                <td><span class="color"></span> : </td>
                <td> <input type="range" min="0" max="100" value="0"/> </td>
            </tr>
            <tr id="environment">
                <td> <label>Çevre:  <span> 0%</span></label> </td>
                <td><span class="color"></span> : </td>
                <td> <input type="range" min="0" max="100" value="0"/> </td>
            </tr>
            <tr id="military">
                <td> <label>Güvenlik:  <span> 0%</span></label> </td>
                <td><span class="color"></span> : </td>
                <td> <input type="range" min="0" max="100" value="0"/> </td>
            </tr>
            <tr id="health">
                <td> <label>Sağlık:  <span> 0%</span></label> </td>
                <td><span class="color"></span> : </td>
                <td> <input type="range" min="0" max="100" value="0"/> </td>
            </tr>
            <tr id="crime">
                <td style="width: 200px;"> <label>Barınma:  <span> 0%</span></label> </td>
                <td><span class="color"></span> : </td>
                <td> <input type="range" min="0" max="100" value="0"/> </td>
            </tr>
        </table>
    </div>
</div>
<script>

    $(function(){

        $("#info").hide();
        var education,environment,military,health,crime;
        var total,chartValues;
        $("table").on("change mousemove",function(){
            education = $("#education").find("input").val();
            environment = $("#environment").find("input").val();
            military = $("#military").find("input").val();
            health = $("#health").find("input").val();
            crime = $("#crime").find("input").val();
            total=(Number(education/5)+Number(environment/5)+Number(military/5)+Number(health/5)+Number(crime/5));
            chartValues =[Number(education),Number(environment),Number(military),Number(health),Number(crime)];
            console.log(chartValues);
            valueUpdate();
        });
        function valueUpdate(){
            $("#education").find("label").find("span").text(education+"%");
            $("#environment").find("label").find("span").text(environment+"%");
            $("#military").find("label").find("span").text(military+"%");
            $("#health").find("label").find("span").text(health+"%");
            $("#crime").find("label").find("span").text(crime+"%");
            console.log(total);
            $("#educationBar").css({"height":education+"%"});
            //$("#educationBar").css({"height":education+"%","margin-top":education+"%"});
            $("#environmentBar").css({"height":environment+"%"});
            $("#militaryBar").css({"height":military+"%"});
            $("#healthBar").css({"height":health+"%"});
            $("#crimeBar").css({"height":crime+"%"});
            $("#overAll").find("progress").val(Math.ceil(total));
            $("#total").text(Math.ceil(total)+"%");
            $(".meter").find("span").width(Math.ceil(total)+"%");
            if(total>50){
                $("#info").show();
            }
            else{
                $("#info").hide();
            }
        }
    });
</script>
</body>
</html>