<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Список покупок</h1>
<button onclick='showOnScreen.displayShoppingList()'>Показать список покупок</button>
<button onclick='handlers.toggleAll()'>Вкл/выкл все</button>
<div>
<input type ='text' id ='addToShoppingListText'>
<button onclick='handlers.addToShoppingList()'>Добавить в список покупок</button>
</div>
<div>
<input type ='number' id ='changeShoppingListNumber'>
<input type ='text' id ='changeShoppingListText'>
<button onclick='handlers.changeShoppingList()'>Изменить покупку</button>
</div>
<div>
<input type='number' id ='changeCounterPlace'>
<input type='number' id ='changeCounterValue'>
<button onclick='handlers.changeCounter()'>Изменить количество</button>
</div>
<ul>
<!-- shopping list items appear here -->
</ul>
<script src="script.js"></script>
</body>
</html>
var shoppingList = {
list: [{
item: 'milk',
isBought: false,
itemCounter: 1
}, {
item: 'beer',
isBought: false,
itemCounter: 1
}, {
item: 'sugar',
isBought: false,
itemCounter: 1
}],
displayShoppingList: function() {
//debugger;
if (this.list.length > 0) {
for (var x = 0; x < this.list.length; x++) {
if (this.list[x].isBought === true) {
console.log('(x)' + this.list[x].item);
} else {
console.log('( )' + this.list[x].item);
}
}
} else {
console.log('Your shopping list is empty');
}
},
addToShoppingList: function(item) {
this.list.push({
item: item,
isBought: false,
itemCounter: 1
});
this.displayShoppingList();
},
changeShoppingList: function(place, newItem) {
this.list[place].item = newItem;
this.displayShoppingList();
},
changeCounter: function(place, newCounter) {
this.list[place].itemCounter = newCounter;
this.displayShoppingList();
},
makeItemBought: function(place) {
this.list[place].isBought = !this.list[place].isBought;
this.displayShoppingList();
},
deleteFromShoppingList: function(place) {
this.list.splice(place, 1);
this.displayShoppingList();
},
toggleAllItems: function() {
var allItems = this.list.length;
var boughtItems = 0;
this.list.forEach(function(listItem) {
if (listItem.isBought === true) {
boughtItems++;
}
});
this.list.forEach(function(listItem) {
listItem.isBought = (boughtItems === allItems) ? false : true;
})
}
};
var handlers = {
showAll: function() {
shoppingList.displayShoppingList();
},
toggleAll: function() {
shoppingList.toggleAllItems();
showOnScreen.displayShoppingList();
},
addToShoppingList: function() {
var addToShoppingListInput = document.getElementById('addToShoppingListText');
shoppingList.addToShoppingList(addToShoppingListInput.value);
addToShoppingListInput.value = "";
showOnScreen.displayShoppingList();
},
changeShoppingList: function() {
var changeShoppingListInputNumber = document.getElementById('changeShoppingListNumber');
var changeShoppingListInputText = document.getElementById('changeShoppingListText');
shoppingList.changeShoppingList(changeShoppingListInputNumber.valueAsNumber, changeShoppingListInputText.value);
changeShoppingListInputNumber.value = "";
changeShoppingListInputText.value = "";
showOnScreen.displayShoppingList();
},
deleteFromShoppingList: function(position) {
shoppingList.deleteFromShoppingList(position);
showOnScreen.displayShoppingList();
}
};
var showOnScreen = {
displayShoppingList: function() {
var shoppingUnorderedList = document.querySelector('ul');
shoppingUnorderedList.innerHTML = '';
shoppingList.list.forEach(function(listItem, position){
var shoppingListItem = document.createElement('li');
var isBoughtDisplay = '';
isBoughtDisplay = listItem.isBought ? '(x)' + listItem.item + ' ' + listItem.itemCounter : '( )' + listItem.item + ' ' + listItem.itemCounter;
shoppingListItem.id = position;
shoppingListItem.textContent = isBoughtDisplay;
shoppingListItem.appendChild(showOnScreen.createDeleteButton());
shoppingUnorderedList.appendChild(shoppingListItem);
});
},
createDeleteButton: function() {
var deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete item';
deleteButton.className = 'deleteButtonClass';
return deleteButton;
},
eventListeners: function() {
var shoppingUnorderedList = document.querySelector('ul');
shoppingUnorderedList.addEventListener('click', function(event) {
//console.log (event.target.parentNode.id);
var buttonClicked = event.target;
if (buttonClicked.className === 'deleteButtonClass') {
handlers.deleteFromShoppingList(parseInt(buttonClicked.parentNode.id));
}
});
}
};
showOnScreen.eventListeners();
//shoppingList.addToShoppingList('muffin');
//shoppingList.toggleAllItems();
//add multiple items at the same time - divide them by “,” and push one by one(?)
//counter on each item - add ‘counter’ property to item/isBought, increase by one (tap) or manually by counter (how? - figure out!)
//swipe movements and mobile devices adaptation (read docs)
/* Styles go here */