268 lines
8.3 KiB
JavaScript
268 lines
8.3 KiB
JavaScript
var shopperNames = ['Cal', 'Ian', 'Olivia'];
|
|
var KEYCODE_ENTER = 13;
|
|
var KEYCODE_DELETE = 8;
|
|
var KEYCODE_LEFT= 37;
|
|
var KEYCODE_UP= 38;
|
|
var KEYCODE_RIGHT = 39;
|
|
var KEYCODE_DOWN = 40;
|
|
|
|
function addItem() {
|
|
var item = document.createElement("li");
|
|
item.className = "item";
|
|
|
|
var name = document.createElement("input");
|
|
name.setAttribute("type", "text");
|
|
name.setAttribute("placeholder", "Item Name");
|
|
name.className = "name;";
|
|
item.appendChild(name);
|
|
|
|
var dollarSign = document.createElement("span");
|
|
dollarSign.innerText = "$";
|
|
item.appendChild(dollarSign);
|
|
|
|
var price = document.createElement("input");
|
|
price.setAttribute("type", "text");
|
|
price.setAttribute("placeholder", "Price");
|
|
price.className = "price";
|
|
item.appendChild(price);
|
|
|
|
for (var i in shopperNames) {
|
|
var shopperName = shopperNames[i];
|
|
var checkbox = createCheckbox(item, shopperName);
|
|
}
|
|
|
|
var remove = document.createElement("input");
|
|
remove.setAttribute("type", "button");
|
|
remove.setAttribute("value", "Remove");
|
|
remove.style.float = "right";
|
|
remove.tabIndex = "-1";
|
|
remove.addEventListener("click", function() { removeItem(item); }, false);
|
|
item.appendChild(remove);
|
|
hide(remove);
|
|
|
|
item.onkeydown = itemKeyListener;
|
|
|
|
item.addEventListener("click", function() { focusItem(item); }, false);
|
|
name.addEventListener("focus", function() { focusItem(item); }, false);
|
|
price.addEventListener("focus", function() { focusItem(item); }, false);
|
|
price.addEventListener("blur", function() {
|
|
price.value = parseFloat(price.value).toFixed(2);
|
|
if (price.value == "NaN") {
|
|
price.value = "";
|
|
}
|
|
}, false);
|
|
item.addEventListener("mouseover", function() { show(remove); }, false);
|
|
item.addEventListener("mouseout", function() { hide(remove); }, false);
|
|
|
|
var items = document.getElementById("items");
|
|
items.appendChild(item);
|
|
item.childNodes[0].focus();
|
|
}
|
|
|
|
function removeItem(item) {
|
|
var items = document.getElementById("items");
|
|
//console.log(items.childNodes.length);
|
|
if (items.childNodes.length > 1) items.removeChild(item);
|
|
}
|
|
|
|
function itemKeyListener(event) {
|
|
//console.log(event.keyCode);
|
|
var items = document.getElementById("items");
|
|
if (event.keyCode == KEYCODE_ENTER) {
|
|
addItem();
|
|
} else if (event.keyCode == KEYCODE_DELETE) {
|
|
if (document.activeElement.className == "price" &&
|
|
!document.activeElement.value) {
|
|
document.activeElement.parentNode.childNodes[0].focus();
|
|
} else if ((!document.activeElement.parentNode.childNodes[0].value) &&
|
|
(!document.activeElement.parentNode.childNodes[2].value)) {
|
|
var i = getFocusedItemIndex() - 1;
|
|
removeItem(document.activeElement.parentNode);
|
|
items.childNodes[i].childNodes[0].focus();
|
|
}
|
|
} else if (event.keyCode == KEYCODE_UP) {
|
|
var j = getFocusedItemIndex() - 1;
|
|
if (j >= 0 && j < items.childNodes.length) {
|
|
if (document.activeElement.className == "name") {
|
|
items.childNodes[j].childNodes[0].focus();
|
|
} else {
|
|
items.childNodes[j].childNodes[2].focus();
|
|
}
|
|
}
|
|
} else if (event.keyCode == KEYCODE_DOWN) {
|
|
var k = getFocusedItemIndex() + 1;
|
|
if (k > 0 && k < items.childNodes.length) {
|
|
if (document.activeElement.className == "name") {
|
|
items.childNodes[k].childNodes[0].focus();
|
|
} else {
|
|
items.childNodes[k].childNodes[2].focus();
|
|
}
|
|
} else if (k >= items.childNodes.length) {
|
|
addItem().childNodes[0].focus();
|
|
}
|
|
} else if (event.keyCode == KEYCODE_LEFT) {
|
|
if (document.activeElement.className == "price" &&
|
|
document.activeElement.selectionStart === 0) {
|
|
document.activeElement.parentNode.childNodes[0].focus();
|
|
}
|
|
} else if (event.keyCode == KEYCODE_RIGHT) {
|
|
if (document.activeElement.className == "name" &&
|
|
document.activeElement.selectionStart == document.activeElement.value.length) {
|
|
document.activeElement.parentNode.childNodes[2].focus();
|
|
}
|
|
}
|
|
}
|
|
|
|
function getFocusedItemIndex() {
|
|
var items = document.getElementById("items");
|
|
var i = 0;
|
|
while (items.childNodes[i] != document.activeElement.parentNode) i++;
|
|
return i;
|
|
}
|
|
|
|
function focusItem(item) {
|
|
var items = document.getElementById("items");
|
|
for (var i in items.childNodes) {
|
|
items.childNodes[i].className = "item";
|
|
}
|
|
item.className += " item-focused";
|
|
}
|
|
|
|
function hide(item) {
|
|
item.style.display = "none";
|
|
}
|
|
|
|
function show(item) {
|
|
item.style.display = null;
|
|
}
|
|
|
|
function moneyBoxKeyListener(event) {
|
|
return !(event.keyCode > 31 && (event.keyCode < 48 || event.keyCode > 57)) || (event.keyCode == 190);
|
|
}
|
|
|
|
function createCheckbox(item, name) {
|
|
var label = document.createElement("label");
|
|
var checkbox = document.createElement("input");
|
|
checkbox.setAttribute("type", "checkbox");
|
|
checkbox.setAttribute("checked", "checked");
|
|
checkbox.tabIndex = "-1";
|
|
checkbox.className = name;
|
|
checkbox.addEventListener("focus", function() { item.className += " item-focused"; }, false);
|
|
checkbox.addEventListener("blur", function() { item.className = "item"; }, false);
|
|
label.appendChild(checkbox);
|
|
label.innerHTML += name;
|
|
item.appendChild(label);
|
|
return checkbox;
|
|
}
|
|
|
|
function createDebtList() {
|
|
for (var i in shopperNames) {
|
|
var li = document.createElement("li");
|
|
li.className = shopperNames[i];
|
|
li.innerHTML = shopperNames[i] + ' needs to pay $<span class="">0.00</span>.';
|
|
debts.appendChild(li);
|
|
}
|
|
}
|
|
|
|
function addTax(price, taxRate) {
|
|
return price * (1 + taxRate / 100.0);
|
|
}
|
|
|
|
function getAllItems() {
|
|
return document.getElementById("items").childNodes;
|
|
}
|
|
|
|
function getTotal() {
|
|
var total = 0.0;
|
|
var items = getAllItems();
|
|
for (var i in items) {
|
|
total += getPrice(items[i]);
|
|
}
|
|
total = addTax(total, getTaxFromInput());
|
|
document.getElementById("total").innerHTML = total.toFixed(2);
|
|
}
|
|
|
|
function getPrice(item) {
|
|
try {
|
|
var price = parseFloat(item.childNodes[2].value);
|
|
return isNaN(price) ? 0 : price;
|
|
} catch (ex) {
|
|
return 0;
|
|
}
|
|
}
|
|
|
|
function getTaxFromInput() {
|
|
return document.getElementById("tax").value;
|
|
}
|
|
|
|
function getNumberOfShoppers(item) {
|
|
var count = 0;
|
|
for (var i in item.childNodes) {
|
|
if (item.childNodes[i].tagName == "LABEL") {
|
|
var label = item.childNodes[i];
|
|
for (var j in label.childNodes) {
|
|
if (label.childNodes[j].checked) {
|
|
count++;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return count;
|
|
}
|
|
|
|
function getDebt(name) {
|
|
var items = document.getElementById("items");
|
|
var debt = 0;
|
|
for (var i in items.childNodes) {
|
|
var item = items.childNodes[i];
|
|
if (hasToPayForItem(name, item)) {
|
|
var subDebt = getPrice(item) / getNumberOfShoppers(item);
|
|
debt += addTax(subDebt, getTaxFromInput());
|
|
console.log(item + getNumberOfShoppers(item));
|
|
}
|
|
}
|
|
console.log(name + ": " + debt);
|
|
return debt;
|
|
}
|
|
|
|
function hasToPayForItem(name, item) {
|
|
for (var i in item.childNodes) {
|
|
if (item.childNodes[i].tagName == "LABEL") {
|
|
var label = item.childNodes[i];
|
|
for (var j in label.childNodes) {
|
|
if (label.childNodes[j].className == name) {
|
|
return label.childNodes[j].checked;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function getDebts() {
|
|
var debts = document.getElementById("debts");
|
|
for (var i in shopperNames) {
|
|
var name = shopperNames[i];
|
|
for (var j in debts.childNodes) {
|
|
if (debts.childNodes[j].className == name) {
|
|
debts.childNodes[j].childNodes[1].innerText = getDebt(name).toFixed(2);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
function updateCalculations() {
|
|
getTotal();
|
|
getDebts();
|
|
}
|
|
|
|
function setEventListeners() {
|
|
document.getElementById("add").addEventListener("click", addItem, false);
|
|
document.body.addEventListener("keyup", updateCalculations, false);
|
|
document.body.addEventListener("click", updateCalculations, false);
|
|
}
|
|
|
|
createDebtList();
|
|
setEventListeners();
|
|
addItem();
|