<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
</head>
<body>
<ul class="balance element">
<li class="title"></li>
<li class="total"></li>
</ul>
</body>
</html>
;(function() {
"use strict";
function Machine() {
var main_balance_total = document.querySelector('.total'),
components = {
water: {
value: 0,
},
coffee: {
value: 0,
},
sugar: {
value: 0,
},
milk: {
value: 0,
},
caps: {
value: 0,
}
}
this.default = function() {
_addParams();
_checkParams();
}
function _addParams() {
var total = document.createElement('ul');
main_balance_total.append(total);
for (var key in components) {
var li_total = document.createElement('li');
var percent = Math.round((components[key].value/100);
li_total.classList.add('balance_item');
li_total.innerHTML = '<span class="' + key + '"></span>';
total.append(li_total);
}
}
function _checkParams() {
var span = {
water: main_balance_total.querySelector('span.water'),
coffee: main_balance_total.querySelector('span.coffee'),
sugar: main_balance_total.querySelector('span.sugar'),
milk: main_balance_total.querySelector('span.milk'),
caps: main_balance_total.querySelector('span.caps')
},
spans = main_balance_total.querySelectorAll('span');
for (var i =0;i < spans.length;i++) {
for (var s in components){
var percent = Math.round((components[s].value*100)/components[s].parent);
spans[i].style.width = percent + '%';
}
}
}
}
var machine = new Machine();
machine.default();
})();