<!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>
