UI
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<title>Track Calorie | Meal & Calorie Tracker</title>
</head>
<body>
<!-- Nav bar -->
<nav>
<div class="nav-wrapper blue">
<div class="container">
<a href="#" class="brand-logo center">Tracalorie</a>
<ul class="right">
<li><a href="#" class="clear-btn btn blue lighten-3">Clear All</a></li>
</ul>
</div>
</div>
</nav>
<br>
<div class="container">
<!-- From card -->
<div class="card">
<div class="card-content">
<span class="card-title">Add Meal / Food Item</span>
<form class="col">
<div class="row">
<div class="input-field col s6">
<input type="text" placeholder="Add Item" id="item-name">
<label for="item-name">Meal</label>
</div>
<div class="input-field col s6">
<input type="text" placeholder="Add Calories" id="item-calories">
<label for="item-calories">Calories</label>
</div>
<button class="add-btn btn blue darken-3"><i class="fa fa-plus"></i>Add Meal</button>
<!--
<button class="update-btn btn orange"><i class="fa fa-pencil-square-o"></i>Update Meal</button>
<button class="delete-btn btn red"><i class="fa fa-remove"></i>Delete Meal</button>
-->
<button class="back-btn btn grey pull-right"><i class="fa fa-chevron-circle-left"></i>Back</button>
</div>
</form>
</div>
</div>
<!--Calorie Count-->
<h3 class="center-align">Total Calories: <span class="total-calories">0</span></h3>
<!-- Item List -->
<ul id="item-list" class="collection">
<!--
<li class="collection-item" id="item-0">
<strong>Steak Dinner: </strong> <em>1200 Calories</em>
<a href="#" class="secondary-content">
<i class="edit-item fa fa-pencil"></i>
</a>
</li>
<li class="collection-item" id="item-0">
<strong>Cookie: </strong> <em>400 Calories</em>
<a href="#" class="secondary-content">
<i class="edit-item fa fa-pencil"></i>
</a>
</li>
<li class="collection-item" id="item-0">
<strong>Eggs: </strong> <em>300 Calories</em>
<a href="#" class="secondary-content">
<i class="edit-item fa fa-pencil"></i>
</a>
</li>
-->
</ul>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Controller & Data structure
const ItemCtrl = (function(){
const item = function(id,name,calories){
this.id = id;
this.name= name;
this.calories = calories;
}
const data={
items :[
{id:0, name:'Steak', calories:1200},
{id:1, name:'Cookies', calories:400},
{id:2, name:'Eggs', calories:300}
],
currentItem:null,
totalCalories:0
}
return {
logData : function(){
return data;
}
}
})();
const UICtrl = (function(){
return {
}
})();
const App = (function(ItemCtrl,UICtrl){
return {
init: function(){
console.log('Initializing app');
}
}
})(ItemCtrl,UICtrl);
App.init();
Get & Populate items
const ItemCtrl = (function(){
const item = function(id,name,calories){
this.id = id;
this.name= name;
this.calories = calories;
}
const data={
items :[
{id:0, name:'Steak', calories:1200},
{id:1, name:'Cookies', calories:400},
{id:2, name:'Eggs', calories:300}
],
currentItem:null,
totalCalories:0
}
return {
getItems: function(){
return data.items;
},
logData : function(){
return data;
}
}
})();
const UICtrl = (function(){
const UISelectors={
itemList:'#item-list'
}
return {
populateItemList:function(items){
let html = ``;
items.forEach(function(item){
html += `
<li class="collection-item" id="item-${item.id}">
<strong>${item.name}: </strong> <em>${item.calories} Calories</em>
<a href="#" class="secondary-content">
<i class="edit-item fa fa-pencil"></i>
</a>
</li>
`;
});
document.querySelector(UISelectors.itemList).innerHTML=html;
}
}
})();
const App = (function(ItemCtrl,UICtrl){
return {
init: function(){
const items = ItemCtrl.getItems();
UICtrl.populateItemList(items);
}
}
})(ItemCtrl,UICtrl);
App.init();
Add item to Data structure
const ItemCtrl = (function(){
const Item = function(id,name,calories){
this.id = id;
this.name= name;
this.calories = calories;
}
const data={
items :[
{id:0, name:'Steak', calories:1200},
{id:1, name:'Cookies', calories:400},
{id:2, name:'Eggs', calories:300}
],
currentItem:null,
totalCalories:0
}
return {
getItems: function(){
return data.items;
},
logData : function(){
return data;
},
addItem:function(name,calories){
let ID;
if(data.items.length > 0){
ID = data.items[data.items.length-1].id+1;
}else{
ID=0;
}
calories = parseInt(calories);
newItem = new Item(ID,name,calories);
data.items.push(newItem);
return newItem;
}
}
})();
const UICtrl = (function(){
const UISelectors={
itemList:'#item-list',
addBtn:'.add-btn',
itemNameInput:'#item-name',
itemCaloriesInput:'#item-calories'
}
return {
populateItemList:function(items){
let html = ``;
items.forEach(function(item){
html += `
<li class="collection-item" id="item-${item.id}">
<strong>${item.name}: </strong> <em>${item.calories} Calories</em>
<a href="#" class="secondary-content">
<i class="edit-item fa fa-pencil"></i>
</a>
</li>
`;
});
document.querySelector(UISelectors.itemList).innerHTML=html;
},
getSelectors:function(){
return UISelectors;
},
getItemInput: function(){
return {
name:document.querySelector(UISelectors.itemNameInput).value,
calories:document.querySelector(UISelectors.itemCaloriesInput).value
}
}
}
})();
const App = (function(ItemCtrl,UICtrl){
const loadEventListeners = function(){
const UISelectors = UICtrl.getSelectors();
document.querySelector(UISelectors.addBtn).addEventListener('click',itemAddSubmit);
}
const itemAddSubmit = function(e){
const input = UICtrl.getItemInput();
if(input.name !== ""&&input.calories!==""){
const mewItem = ItemCtrl.addItem(input.name,input.calories);
}
e.preventDefault();
}
return {
init: function(){
const items = ItemCtrl.getItems();
UICtrl.populateItemList(items);
loadEventListeners();
}
}
})(ItemCtrl,UICtrl);
App.init();
Add item to the UI
const ItemCtrl = (function(){
const Item = function(id,name,calories){
this.id = id;
this.name= name;
this.calories = calories;
}
const data={
items :[
],
currentItem:null,
totalCalories:0
}
return {
getItems: function(){
return data.items;
},
logData : function(){
return data;
},
addItem:function(name,calories){
let ID;
if(data.items.length > 0){
ID = data.items[data.items.length-1].id+1;
}else{
ID=0;
}
calories = parseInt(calories);
newItem = new Item(ID,name,calories);
data.items.push(newItem);
return newItem;
}
}
})();
const UICtrl = (function(){
const UISelectors={
itemList:'#item-list',
addBtn:'.add-btn',
itemNameInput:'#item-name',
itemCaloriesInput:'#item-calories'
}
return {
populateItemList:function(items){
let html = ``;
items.forEach(function(item){
html += `
<li class="collection-item" id="item-${item.id}">
<strong>${item.name}: </strong> <em>${item.calories} Calories</em>
<a href="#" class="secondary-content">
<i class="edit-item fa fa-pencil"></i>
</a>
</li>
`;
});
document.querySelector(UISelectors.itemList).innerHTML=html;
},
getSelectors:function(){
return UISelectors;
},
getItemInput: function(){
return {
name:document.querySelector(UISelectors.itemNameInput).value,
calories:document.querySelector(UISelectors.itemCaloriesInput).value
}
},
addListItem:function(item){
document.querySelector(UISelectors.itemList).style.display='block';
const li = document.createElement('li');
li.className = 'collection-item';
li.id=`item-${item.id}`;
li.innerHTML = `
<strong>${item.name}: </strong> <em>${item.calories} Calories</em>
<a href="#" class="secondary-content">
<i class="edit-item fa fa-pencil"></i>
</a>
`;
document.querySelector(UISelectors.itemList).insertAdjacentElement(`beforeend`,li);
},
clearInput:function(){
document.querySelector(UISelectors.itemNameInput).value="";
document.querySelector(UISelectors.itemCaloriesInput).value="";
},
hideList:function(){
document.querySelector(UISelectors.itemList).style.display='none';
}
}
})();
const App = (function(ItemCtrl,UICtrl){
const loadEventListeners = function(){
const UISelectors = UICtrl.getSelectors();
document.querySelector(UISelectors.addBtn).addEventListener('click',itemAddSubmit);
}
const itemAddSubmit = function(e){
const input = UICtrl.getItemInput();
if(input.name !== ""&&input.calories!==""){
const newItem = ItemCtrl.addItem(input.name,input.calories);
UICtrl.addListItem(newItem);
UICtrl.clearInput();
}
e.preventDefault();
}
return {
init: function(){
const items = ItemCtrl.getItems();
if(items.length===0){
UICtrl.hideList();
}else{
UICtrl.populateItemList(items);
}
loadEventListeners();
}
}
})(ItemCtrl,UICtrl);
App.init();
Add total calories
const ItemCtrl = (function(){
const Item = function(id,name,calories){
this.id = id;
this.name= name;
this.calories = calories;
}
const data={
items :[
],
currentItem:null,
totalCalories:0
}
return {
getItems: function(){
return data.items;
},
logData : function(){
return data;
},
addItem:function(name,calories){
let ID;
if(data.items.length > 0){
ID = data.items[data.items.length-1].id+1;
}else{
ID=0;
}
calories = parseInt(calories);
newItem = new Item(ID,name,calories);
data.items.push(newItem);
return newItem;
},
GettotalCalories:function(){
let total =0;
data.items.forEach(function(item){
total+=item.calories;
});
data.totalCalories=total;
return data.totalCalories;
}
}
})();
const UICtrl = (function(){
const UISelectors={
itemList:'#item-list',
addBtn:'.add-btn',
itemNameInput:'#item-name',
itemCaloriesInput:'#item-calories',
totalCalories:'.total-calories'
}
return {
populateItemList:function(items){
let html = ``;
items.forEach(function(item){
html += `
<li class="collection-item" id="item-${item.id}">
<strong>${item.name}: </strong> <em>${item.calories} Calories</em>
<a href="#" class="secondary-content">
<i class="edit-item fa fa-pencil"></i>
</a>
</li>
`;
});
document.querySelector(UISelectors.itemList).innerHTML=html;
},
getSelectors:function(){
return UISelectors;
},
getItemInput: function(){
return {
name:document.querySelector(UISelectors.itemNameInput).value,
calories:document.querySelector(UISelectors.itemCaloriesInput).value
}
},
addListItem:function(item){
document.querySelector(UISelectors.itemList).style.display='block';
const li = document.createElement('li');
li.className = 'collection-item';
li.id=`item-${item.id}`;
li.innerHTML = `
<strong>${item.name}: </strong> <em>${item.calories} Calories</em>
<a href="#" class="secondary-content">
<i class="edit-item fa fa-pencil"></i>
</a>
`;
document.querySelector(UISelectors.itemList).insertAdjacentElement(`beforeend`,li);
},
clearInput:function(){
document.querySelector(UISelectors.itemNameInput).value="";
document.querySelector(UISelectors.itemCaloriesInput).value="";
},
hideList:function(){
document.querySelector(UISelectors.itemList).style.display='none';
},
showTotalCalories:function(total){
document.querySelector(UISelectors.totalCalories).textContent=total;
}
}
})();
const App = (function(ItemCtrl,UICtrl){
const loadEventListeners = function(){
const UISelectors = UICtrl.getSelectors();
document.querySelector(UISelectors.addBtn).addEventListener('click',itemAddSubmit);
}
const itemAddSubmit = function(e){
const input = UICtrl.getItemInput();
if(input.name !== ""&&input.calories!==""){
const newItem = ItemCtrl.addItem(input.name,input.calories);
UICtrl.addListItem(newItem);
const totalCalories = ItemCtrl.GettotalCalories();
UICtrl.showTotalCalories(totalCalories);
UICtrl.clearInput();
}
e.preventDefault();
}
return {
init: function(){
const items = ItemCtrl.getItems();
if(items.length===0){
UICtrl.hideList();
}else{
UICtrl.populateItemList(items);
}
const totalCalories = ItemCtrl.GettotalCalories();
UICtrl.showTotalCalories(totalCalories);
loadEventListeners();
}
}
})(ItemCtrl,UICtrl);
App.init();
Edit State
const ItemCtrl = (function(){
const Item = function(id,name,calories){
this.id = id;
this.name= name;
this.calories = calories;
}
const data={
items :[
],
currentItem:null,
totalCalories:0
}
return {
getItems: function(){
return data.items;
},
logData : function(){
return data;
},
addItem:function(name,calories){
let ID;
if(data.items.length > 0){
ID = data.items[data.items.length-1].id+1;
}else{
ID=0;
}
calories = parseInt(calories);
newItem = new Item(ID,name,calories);
data.items.push(newItem);
return newItem;
},
GettotalCalories:function(){
let total =0;
data.items.forEach(function(item){
total+=item.calories;
});
data.totalCalories=total;
return data.totalCalories;
},
getItemById:function(id){
let found = null;
data.items.forEach(function(item){
if(item.id===id){
found = item;
}
});
return found;
},
setCurrentItem:function(item){
data.currentItem=item;
},
getCurrentItem:function(){
return data.currentItem;
}
}
})();
const UICtrl = (function(){
const UISelectors={
itemList:'#item-list',
addBtn:'.add-btn',
itemNameInput:'#item-name',
itemCaloriesInput:'#item-calories',
totalCalories:'.total-calories',
updateBtn:'.update-btn',
deleteBtn:'.delete-btn',
backBtn:'.back-btn'
}
return {
populateItemList:function(items){
let html = ``;
items.forEach(function(item){
html += `
<li class="collection-item" id="item-${item.id}">
<strong>${item.name}: </strong> <em>${item.calories} Calories</em>
<a href="#" class="secondary-content">
<i class="edit-item fa fa-pencil"></i>
</a>
</li>
`;
});
document.querySelector(UISelectors.itemList).innerHTML=html;
},
getSelectors:function(){
return UISelectors;
},
getItemInput: function(){
return {
name:document.querySelector(UISelectors.itemNameInput).value,
calories:document.querySelector(UISelectors.itemCaloriesInput).value
}
},
addListItem:function(item){
document.querySelector(UISelectors.itemList).style.display='block';
const li = document.createElement('li');
li.className = 'collection-item';
li.id=`item-${item.id}`;
li.innerHTML = `
<strong>${item.name}: </strong> <em>${item.calories} Calories</em>
<a href="#" class="secondary-content">
<i class="edit-item fa fa-pencil"></i>
</a>
`;
document.querySelector(UISelectors.itemList).insertAdjacentElement(`beforeend`,li);
},
clearInput:function(){
document.querySelector(UISelectors.itemNameInput).value="";
document.querySelector(UISelectors.itemCaloriesInput).value="";
},
hideList:function(){
document.querySelector(UISelectors.itemList).style.display='none';
},
showTotalCalories:function(total){
document.querySelector(UISelectors.totalCalories).textContent=total;
},
clearEditState:function(){
UICtrl.clearInput();
document.querySelector(UISelectors.updateBtn).style.display='none';
document.querySelector(UISelectors.deleteBtn).style.display='none';
document.querySelector(UISelectors.backBtn).style.display='none';
document.querySelector(UISelectors.addBtn).style.display='inline';
document.querySelector(UISelectors.itemList).style.display='none';
},
addItemToForm:function(){
document.querySelector(UISelectors.itemNameInput).value=ItemCtrl.getCurrentItem().name;
document.querySelector(UISelectors.itemCaloriesInput).value=ItemCtrl.getCurrentItem().calories;
UICtrl.showEditState();
},
showEditState:function(){
document.querySelector(UISelectors.updateBtn).style.display='inline';
document.querySelector(UISelectors.deleteBtn).style.display='inline';
document.querySelector(UISelectors.backBtn).style.display='inline';
document.querySelector(UISelectors.addBtn).style.display='none';
document.querySelector(UISelectors.itemList).style.display='inline';
}
}
})();
const App = (function(ItemCtrl,UICtrl){
const loadEventListeners = function(){
const UISelectors = UICtrl.getSelectors();
document.querySelector(UISelectors.addBtn).addEventListener('click',itemAddSubmit);
document.querySelector(UISelectors.itemList).addEventListener('click',itemUpdateSubmit);
}
const itemAddSubmit = function(e){
const input = UICtrl.getItemInput();
if(input.name !== ""&&input.calories!==""){
const newItem = ItemCtrl.addItem(input.name,input.calories);
UICtrl.addListItem(newItem);
const totalCalories = ItemCtrl.GettotalCalories();
UICtrl.showTotalCalories(totalCalories);
UICtrl.clearInput();
}
e.preventDefault();
}
const itemUpdateSubmit = function(e){
if(e.target.classList.contains('edit-item')){
const listId = e.target.parentNode.parentNode.id;
const listIdArr = listId.split('-');
const id = parseInt(listIdArr[1]);
const itemToEdit = ItemCtrl.getItemById(id);
ItemCtrl.setCurrentItem(itemToEdit);
UICtrl.addItemToForm();
}
e.preventDefault();
}
return {
init: function(){
UICtrl.clearEditState();
const items = ItemCtrl.getItems();
if(items.length===0){
UICtrl.hideList();
}else{
UICtrl.populateItemList(items);
}
const totalCalories = ItemCtrl.GettotalCalories();
UICtrl.showTotalCalories(totalCalories);
loadEventListeners();
}
}
})(ItemCtrl,UICtrl);
App.init();
Updating Items & Total Calories
const ItemCtrl = (function(){
const Item = function(id,name,calories){
this.id = id;
this.name= name;
this.calories = calories;
}
const data={
items :[
],
currentItem:null,
totalCalories:0
}
return {
getItems: function(){
return data.items;
},
logData : function(){
return data;
},
addItem:function(name,calories){
let ID;
if(data.items.length > 0){
ID = data.items[data.items.length-1].id+1;
}else{
ID=0;
}
calories = parseInt(calories);
newItem = new Item(ID,name,calories);
data.items.push(newItem);
return newItem;
},
GettotalCalories:function(){
let total =0;
data.items.forEach(function(item){
total+=item.calories;
});
data.totalCalories=total;
return data.totalCalories;
},
getItemById:function(id){
let found = null;
data.items.forEach(function(item){
if(item.id===id){
found = item;
}
});
return found;
},
setCurrentItem:function(item){
data.currentItem=item;
},
getCurrentItem:function(){
return data.currentItem;
},
updateItem:function(name,calories){
calories=parseInt(calories);
let found = null;
data.items.forEach(function(item){
if(item.id === data.currentItem.id){
item.name = name;
item.calories=calories;
found = item;
}
});
return found;
}
}
})();
const UICtrl = (function(){
const UISelectors={
itemList:'#item-list',
addBtn:'.add-btn',
itemNameInput:'#item-name',
itemCaloriesInput:'#item-calories',
totalCalories:'.total-calories',
updateBtn:'.update-btn',
deleteBtn:'.delete-btn',
backBtn:'.back-btn',
listItems:'#item-list li'
}
return {
populateItemList:function(items){
let html = ``;
items.forEach(function(item){
html += `
<li class="collection-item" id="item-${item.id}">
<strong>${item.name}: </strong> <em>${item.calories} Calories</em>
<a href="#" class="secondary-content">
<i class="edit-item fa fa-pencil"></i>
</a>
</li>
`;
});
document.querySelector(UISelectors.itemList).innerHTML=html;
},
getSelectors:function(){
return UISelectors;
},
getItemInput: function(){
return {
name:document.querySelector(UISelectors.itemNameInput).value,
calories:document.querySelector(UISelectors.itemCaloriesInput).value
}
},
addListItem:function(item){
document.querySelector(UISelectors.itemList).style.display='block';
const li = document.createElement('li');
li.className = 'collection-item';
li.id=`item-${item.id}`;
li.innerHTML = `
<strong>${item.name}: </strong> <em>${item.calories} Calories</em>
<a href="#" class="secondary-content">
<i class="edit-item fa fa-pencil"></i>
</a>
`;
document.querySelector(UISelectors.itemList).insertAdjacentElement(`beforeend`,li);
},
clearInput:function(){
document.querySelector(UISelectors.itemNameInput).value="";
document.querySelector(UISelectors.itemCaloriesInput).value="";
},
hideList:function(){
document.querySelector(UISelectors.itemList).style.display='none';
},
showTotalCalories:function(total){
document.querySelector(UISelectors.totalCalories).textContent=total;
},
clearEditState:function(){
UICtrl.clearInput();
document.querySelector(UISelectors.updateBtn).style.display='none';
document.querySelector(UISelectors.deleteBtn).style.display='none';
document.querySelector(UISelectors.backBtn).style.display='none';
document.querySelector(UISelectors.addBtn).style.display='inline';
},
addItemToForm:function(){
document.querySelector(UISelectors.itemNameInput).value=ItemCtrl.getCurrentItem().name;
document.querySelector(UISelectors.itemCaloriesInput).value=ItemCtrl.getCurrentItem().calories;
UICtrl.showEditState();
},
showEditState:function(){
document.querySelector(UISelectors.updateBtn).style.display='inline';
document.querySelector(UISelectors.deleteBtn).style.display='inline';
document.querySelector(UISelectors.backBtn).style.display='inline';
document.querySelector(UISelectors.addBtn).style.display='none';
document.querySelector(UISelectors.itemList).style.display='inline';
},
updateListItem: function(item){
let listItems = document.querySelectorAll(UISelectors.listItems);
listItems = Array.from(listItems);
listItems.forEach(function(listItem){
const ItemID = listItem.getAttribute('id');
if(ItemID === `item-${item.id}`){
document.querySelector(`#${ItemID}`).innerHTML =`
<strong>${item.name}: </strong> <em>${item.calories} Calories</em>
<a href="#" class="secondary-content">
<i class="edit-item fa fa-pencil"></i>
</a>
` ;
}
})
}
}
})();
const App = (function(ItemCtrl,UICtrl){
const loadEventListeners = function(){
const UISelectors = UICtrl.getSelectors();
document.querySelector(UISelectors.addBtn).addEventListener('click',itemAddSubmit);
document.addEventListener('keypress',function(e){
if(e.keyCode === 13|| e.which ===13){
e.preventDefault();
return false;
}
});
document.querySelector(UISelectors.itemList).addEventListener('click',itemEditSubmit);
document.querySelector(UISelectors.updateBtn).addEventListener('click',itemUpdateSubmit);
}
const itemAddSubmit = function(e){
const input = UICtrl.getItemInput();
if(input.name !== ""&&input.calories!==""){
const newItem = ItemCtrl.addItem(input.name,input.calories);
UICtrl.addListItem(newItem);
const totalCalories = ItemCtrl.GettotalCalories();
UICtrl.showTotalCalories(totalCalories);
UICtrl.clearInput();
}
e.preventDefault();
}
const itemEditSubmit = function(e){
if(e.target.classList.contains('edit-item')){
const listId = e.target.parentNode.parentNode.id;
const listIdArr = listId.split('-');
const id = parseInt(listIdArr[1]);
const itemToEdit = ItemCtrl.getItemById(id);
ItemCtrl.setCurrentItem(itemToEdit);
UICtrl.addItemToForm();
}
e.preventDefault();
}
const itemUpdateSubmit=function(e){
const input = UICtrl.getItemInput();
const updateItem = ItemCtrl.updateItem(input.name,input.calories);
UICtrl.updateListItem(updateItem);
const totalCalories = ItemCtrl.GettotalCalories();
UICtrl.showTotalCalories(totalCalories);
UICtrl.clearEditState();
e.preventDefault();
}
return {
init: function(){
UICtrl.clearEditState();
const items = ItemCtrl.getItems();
if(items.length===0){
UICtrl.hideList();
}else{
UICtrl.populateItemList(items);
}
const totalCalories = ItemCtrl.GettotalCalories();
UICtrl.showTotalCalories(totalCalories);
loadEventListeners();
}
}
})(ItemCtrl,UICtrl);
App.init();
Delete & Clear items
const ItemCtrl = (function(){
const Item = function(id,name,calories){
this.id = id;
this.name= name;
this.calories = calories;
}
const data={
items :[
],
currentItem:null,
totalCalories:0
}
return {
getItems: function(){
return data.items;
},
logData : function(){
return data;
},
addItem:function(name,calories){
let ID;
if(data.items.length > 0){
ID = data.items[data.items.length-1].id+1;
}else{
ID=0;
}
calories = parseInt(calories);
newItem = new Item(ID,name,calories);
data.items.push(newItem);
return newItem;
},
GettotalCalories:function(){
let total =0;
data.items.forEach(function(item){
total+=item.calories;
});
data.totalCalories=total;
return data.totalCalories;
},
getItemById:function(id){
let found = null;
data.items.forEach(function(item){
if(item.id===id){
found = item;
}
});
return found;
},
setCurrentItem:function(item){
data.currentItem=item;
},
getCurrentItem:function(){
return data.currentItem;
},
updateItem:function(name,calories){
calories=parseInt(calories);
let found = null;
data.items.forEach(function(item){
if(item.id === data.currentItem.id){
item.name = name;
item.calories=calories;
found = item;
}
});
return found;
},
deletItem:function(id){
const ids = data.items.map(function(item){
return item.id;
});
const index = ids.indexOf(id);
data.items.splice(index,1);
},
ClearAllItems:function(){
data.items=[];
}
}
})();
const UICtrl = (function(){
const UISelectors={
itemList:'#item-list',
addBtn:'.add-btn',
itemNameInput:'#item-name',
itemCaloriesInput:'#item-calories',
totalCalories:'.total-calories',
updateBtn:'.update-btn',
deleteBtn:'.delete-btn',
backBtn:'.back-btn',
listItems:'#item-list li',
clearBtn:'.clear-btn'
}
return {
populateItemList:function(items){
let html = ``;
items.forEach(function(item){
html += `
<li class="collection-item" id="item-${item.id}">
<strong>${item.name}: </strong> <em>${item.calories} Calories</em>
<a href="#" class="secondary-content">
<i class="edit-item fa fa-pencil"></i>
</a>
</li>
`;
});
document.querySelector(UISelectors.itemList).innerHTML=html;
},
getSelectors:function(){
return UISelectors;
},
getItemInput: function(){
return {
name:document.querySelector(UISelectors.itemNameInput).value,
calories:document.querySelector(UISelectors.itemCaloriesInput).value
}
},
addListItem:function(item){
document.querySelector(UISelectors.itemList).style.display='block';
const li = document.createElement('li');
li.className = 'collection-item';
li.id=`item-${item.id}`;
li.innerHTML = `
<strong>${item.name}: </strong> <em>${item.calories} Calories</em>
<a href="#" class="secondary-content">
<i class="edit-item fa fa-pencil"></i>
</a>
`;
document.querySelector(UISelectors.itemList).insertAdjacentElement(`beforeend`,li);
},
clearInput:function(){
document.querySelector(UISelectors.itemNameInput).value="";
document.querySelector(UISelectors.itemCaloriesInput).value="";
},
hideList:function(){
document.querySelector(UISelectors.itemList).style.display='none';
},
showTotalCalories:function(total){
document.querySelector(UISelectors.totalCalories).textContent=total;
},
clearEditState:function(){
UICtrl.clearInput();
document.querySelector(UISelectors.updateBtn).style.display='none';
document.querySelector(UISelectors.deleteBtn).style.display='none';
document.querySelector(UISelectors.backBtn).style.display='none';
document.querySelector(UISelectors.addBtn).style.display='inline';
},
addItemToForm:function(){
document.querySelector(UISelectors.itemNameInput).value=ItemCtrl.getCurrentItem().name;
document.querySelector(UISelectors.itemCaloriesInput).value=ItemCtrl.getCurrentItem().calories;
UICtrl.showEditState();
},
showEditState:function(){
document.querySelector(UISelectors.updateBtn).style.display='inline';
document.querySelector(UISelectors.deleteBtn).style.display='inline';
document.querySelector(UISelectors.backBtn).style.display='inline';
document.querySelector(UISelectors.addBtn).style.display='none';
document.querySelector(UISelectors.itemList).style.display='inline';
},
updateListItem: function(item){
let listItems = document.querySelectorAll(UISelectors.listItems);
listItems = Array.from(listItems);
listItems.forEach(function(listItem){
const ItemID = listItem.getAttribute('id');
if(ItemID === `item-${item.id}`){
document.querySelector(`#${ItemID}`).innerHTML =`
<strong>${item.name}: </strong> <em>${item.calories} Calories</em>
<a href="#" class="secondary-content">
<i class="edit-item fa fa-pencil"></i>
</a>
` ;
}
})
},
deleteListItem:function(id){
const itemID=`#item-${id}`;
const item = document.querySelector(itemID);
item.remove();
},
ClearItems:function(){
let listItems = document.querySelector(UISelectors.listItems);
listItems = Array.from(listItems);
listItems.forEach(function(item){
item.remove;
})
}
}
})();
const App = (function(ItemCtrl,UICtrl){
const loadEventListeners = function(){
const UISelectors = UICtrl.getSelectors();
document.querySelector(UISelectors.addBtn).addEventListener('click',itemAddSubmit);
document.addEventListener('keypress',function(e){
if(e.keyCode === 13|| e.which ===13){
e.preventDefault();
return false;
}
});
document.querySelector(UISelectors.itemList).addEventListener('click',itemEditSubmit);
document.querySelector(UISelectors.updateBtn).addEventListener('click',itemUpdateSubmit);
document.querySelector(UISelectors.backBtn).addEventListener('click',function(e){
UICtrl.clearEditState();
e.preventDefault();
});
document.querySelector(UISelectors.deleteBtn).addEventListener('click',ItemDeleteSubmit);
document.querySelector(UISelectors.clearBtn).addEventListener('click',ClearAllItems);
}
const itemAddSubmit = function(e){
const input = UICtrl.getItemInput();
if(input.name !== ""&&input.calories!==""){
const newItem = ItemCtrl.addItem(input.name,input.calories);
UICtrl.addListItem(newItem);
const totalCalories = ItemCtrl.GettotalCalories();
UICtrl.showTotalCalories(totalCalories);
UICtrl.clearInput();
}
e.preventDefault();
}
const itemEditSubmit = function(e){
if(e.target.classList.contains('edit-item')){
const listId = e.target.parentNode.parentNode.id;
const listIdArr = listId.split('-');
const id = parseInt(listIdArr[1]);
const itemToEdit = ItemCtrl.getItemById(id);
ItemCtrl.setCurrentItem(itemToEdit);
UICtrl.addItemToForm();
}
e.preventDefault();
}
const itemUpdateSubmit=function(e){
const input = UICtrl.getItemInput();
const updateItem = ItemCtrl.updateItem(input.name,input.calories);
UICtrl.updateListItem(updateItem);
const totalCalories = ItemCtrl.GettotalCalories();
UICtrl.showTotalCalories(totalCalories);
UICtrl.clearEditState();
e.preventDefault();
}
const ItemDeleteSubmit = function(e){
const currentItem = ItemCtrl.getCurrentItem();
ItemCtrl.deletItem(currentItem.id);
UICtrl.deleteListItem(currentItem.id);
const totalCalories = ItemCtrl.GettotalCalories();
UICtrl.showTotalCalories(totalCalories);
UICtrl.clearEditState();
e.preventDefault();
}
const ClearAllItems = function(){
ItemCtrl.ClearAllItems();
UICtrl.ClearItems();
const totalCalories = ItemCtrl.GettotalCalories();
UICtrl.showTotalCalories(totalCalories);
UICtrl.clearEditState();
UICtrl.hideList();
}
return {
init: function(){
UICtrl.clearEditState();
const items = ItemCtrl.getItems();
if(items.length===0){
UICtrl.hideList();
}else{
UICtrl.populateItemList(items);
}
const totalCalories = ItemCtrl.GettotalCalories();
UICtrl.showTotalCalories(totalCalories);
loadEventListeners();
}
}
})(ItemCtrl,UICtrl);
App.init();
Add & Get From Local Storage
const StorageCtrl=(function(){
return{
storeItem: function(item){
let items;
if(localStorage.getItem('items')=== null){
items =[];
items.push(item);
localStorage.setItem('items',JSON.stringify(items));
}else{
items = JSON.parse(localStorage.getItem('items'));
items.push(item);
localStorage.setItem('items',JSON.stringify(items));
}
},
getItemsFromStorage:function(){
let items;
if(localStorage.getItem('items')=== null){
items=[];
}else{
items=JSON.parse(localStorage.getItem('items'));
}
return items;
}
}
})();
const ItemCtrl = (function(){
const Item = function(id,name,calories){
this.id = id;
this.name= name;
this.calories = calories;
}
const data={
items:StorageCtrl.getItemsFromStorage(),
currentItem:null,
totalCalories:0
}
return {
getItems: function(){
return data.items;
},
logData : function(){
return data;
},
addItem:function(name,calories){
let ID;
if(data.items.length > 0){
ID = data.items[data.items.length-1].id+1;
}else{
ID=0;
}
calories = parseInt(calories);
newItem = new Item(ID,name,calories);
data.items.push(newItem);
return newItem;
},
GettotalCalories:function(){
let total =0;
data.items.forEach(function(item){
total+=item.calories;
});
data.totalCalories=total;
return data.totalCalories;
},
getItemById:function(id){
let found = null;
data.items.forEach(function(item){
if(item.id===id){
found = item;
}
});
return found;
},
setCurrentItem:function(item){
data.currentItem=item;
},
getCurrentItem:function(){
return data.currentItem;
},
updateItem:function(name,calories){
calories=parseInt(calories);
let found = null;
data.items.forEach(function(item){
if(item.id === data.currentItem.id){
item.name = name;
item.calories=calories;
found = item;
}
});
return found;
},
deletItem:function(id){
const ids = data.items.map(function(item){
return item.id;
});
const index = ids.indexOf(id);
data.items.splice(index,1);
},
ClearAllItems:function(){
data.items=[];
}
}
})();
const UICtrl = (function(){
const UISelectors={
itemList:'#item-list',
addBtn:'.add-btn',
itemNameInput:'#item-name',
itemCaloriesInput:'#item-calories',
totalCalories:'.total-calories',
updateBtn:'.update-btn',
deleteBtn:'.delete-btn',
backBtn:'.back-btn',
listItems:'#item-list li',
clearBtn:'.clear-btn'
}
return {
populateItemList:function(items){
let html = ``;
items.forEach(function(item){
html += `
<li class="collection-item" id="item-${item.id}">
<strong>${item.name}: </strong> <em>${item.calories} Calories</em>
<a href="#" class="secondary-content">
<i class="edit-item fa fa-pencil"></i>
</a>
</li>
`;
});
document.querySelector(UISelectors.itemList).innerHTML=html;
},
getSelectors:function(){
return UISelectors;
},
getItemInput: function(){
return {
name:document.querySelector(UISelectors.itemNameInput).value,
calories:document.querySelector(UISelectors.itemCaloriesInput).value
}
},
addListItem:function(item){
document.querySelector(UISelectors.itemList).style.display='block';
const li = document.createElement('li');
li.className = 'collection-item';
li.id=`item-${item.id}`;
li.innerHTML = `
<strong>${item.name}: </strong> <em>${item.calories} Calories</em>
<a href="#" class="secondary-content">
<i class="edit-item fa fa-pencil"></i>
</a>
`;
document.querySelector(UISelectors.itemList).insertAdjacentElement(`beforeend`,li);
},
clearInput:function(){
document.querySelector(UISelectors.itemNameInput).value="";
document.querySelector(UISelectors.itemCaloriesInput).value="";
},
hideList:function(){
document.querySelector(UISelectors.itemList).style.display='none';
},
showTotalCalories:function(total){
document.querySelector(UISelectors.totalCalories).textContent=total;
},
clearEditState:function(){
UICtrl.clearInput();
document.querySelector(UISelectors.updateBtn).style.display='none';
document.querySelector(UISelectors.deleteBtn).style.display='none';
document.querySelector(UISelectors.backBtn).style.display='none';
document.querySelector(UISelectors.addBtn).style.display='inline';
},
addItemToForm:function(){
document.querySelector(UISelectors.itemNameInput).value=ItemCtrl.getCurrentItem().name;
document.querySelector(UISelectors.itemCaloriesInput).value=ItemCtrl.getCurrentItem().calories;
UICtrl.showEditState();
},
showEditState:function(){
document.querySelector(UISelectors.updateBtn).style.display='inline';
document.querySelector(UISelectors.deleteBtn).style.display='inline';
document.querySelector(UISelectors.backBtn).style.display='inline';
document.querySelector(UISelectors.addBtn).style.display='none';
document.querySelector(UISelectors.itemList).style.display='inline';
},
updateListItem: function(item){
let listItems = document.querySelectorAll(UISelectors.listItems);
listItems = Array.from(listItems);
listItems.forEach(function(listItem){
const ItemID = listItem.getAttribute('id');
if(ItemID === `item-${item.id}`){
document.querySelector(`#${ItemID}`).innerHTML =`
<strong>${item.name}: </strong> <em>${item.calories} Calories</em>
<a href="#" class="secondary-content">
<i class="edit-item fa fa-pencil"></i>
</a>
` ;
}
})
},
deleteListItem:function(id){
const itemID=`#item-${id}`;
const item = document.querySelector(itemID);
item.remove();
},
ClearItems:function(){
let listItems = document.querySelector(UISelectors.listItems);
listItems = Array.from(listItems);
listItems.forEach(function(item){
item.remove;
})
}
}
})();
const App = (function(ItemCtrl,UICtrl,StorageCtrl){
const loadEventListeners = function(){
const UISelectors = UICtrl.getSelectors();
document.querySelector(UISelectors.addBtn).addEventListener('click',itemAddSubmit);
document.addEventListener('keypress',function(e){
if(e.keyCode === 13|| e.which ===13){
e.preventDefault();
return false;
}
});
document.querySelector(UISelectors.itemList).addEventListener('click',itemEditSubmit);
document.querySelector(UISelectors.updateBtn).addEventListener('click',itemUpdateSubmit);
document.querySelector(UISelectors.backBtn).addEventListener('click',function(e){
UICtrl.clearEditState();
e.preventDefault();
});
document.querySelector(UISelectors.deleteBtn).addEventListener('click',ItemDeleteSubmit);
document.querySelector(UISelectors.clearBtn).addEventListener('click',ClearAllItems);
}
const itemAddSubmit = function(e){
const input = UICtrl.getItemInput();
if(input.name !== ""&&input.calories!==""){
const newItem = ItemCtrl.addItem(input.name,input.calories);
UICtrl.addListItem(newItem);
const totalCalories = ItemCtrl.GettotalCalories();
UICtrl.showTotalCalories(totalCalories);
StorageCtrl.storeItem(newItem);
UICtrl.clearInput();
}
e.preventDefault();
}
const itemEditSubmit = function(e){
if(e.target.classList.contains('edit-item')){
const listId = e.target.parentNode.parentNode.id;
const listIdArr = listId.split('-');
const id = parseInt(listIdArr[1]);
const itemToEdit = ItemCtrl.getItemById(id);
ItemCtrl.setCurrentItem(itemToEdit);
UICtrl.addItemToForm();
}
e.preventDefault();
}
const itemUpdateSubmit=function(e){
const input = UICtrl.getItemInput();
const updateItem = ItemCtrl.updateItem(input.name,input.calories);
UICtrl.updateListItem(updateItem);
const totalCalories = ItemCtrl.GettotalCalories();
UICtrl.showTotalCalories(totalCalories);
UICtrl.clearEditState();
e.preventDefault();
}
const ItemDeleteSubmit = function(e){
const currentItem = ItemCtrl.getCurrentItem();
ItemCtrl.deletItem(currentItem.id);
UICtrl.deleteListItem(currentItem.id);
const totalCalories = ItemCtrl.GettotalCalories();
UICtrl.showTotalCalories(totalCalories);
UICtrl.clearEditState();
e.preventDefault();
}
const ClearAllItems = function(){
ItemCtrl.ClearAllItems();
UICtrl.ClearItems();
const totalCalories = ItemCtrl.GettotalCalories();
UICtrl.showTotalCalories(totalCalories);
UICtrl.clearEditState();
UICtrl.hideList();
}
return {
init: function(){
UICtrl.clearEditState();
const items = ItemCtrl.getItems();
if(items.length===0){
UICtrl.hideList();
}else{
UICtrl.populateItemList(items);
}
const totalCalories = ItemCtrl.GettotalCalories();
UICtrl.showTotalCalories(totalCalories);
loadEventListeners();
}
}
})(ItemCtrl,UICtrl,StorageCtrl);
App.init();
Delete & Clear from Local storage
const StorageCtrl=(function(){
return{
storeItem: function(item){
let items;
if(localStorage.getItem('items')=== null){
items =[];
items.push(item);
localStorage.setItem('items',JSON.stringify(items));
}else{
items = JSON.parse(localStorage.getItem('items'));
items.push(item);
localStorage.setItem('items',JSON.stringify(items));
}
},
getItemsFromStorage:function(){
let items;
if(localStorage.getItem('items')=== null){
items=[];
}else{
items=JSON.parse(localStorage.getItem('items'));
}
return items;
},
updateItemStorage:function(updateItem){
let items=JSON.parse(localStorage.getItem('items'));
items.forEach(function(item,index){
if(item.id===updateItem.id){
items.splice(index,1,updateItem);
}
});
localStorage.setItem('items',JSON.stringify(items));
},
deleteItemFromStorage:function(id){
let items=JSON.parse(localStorage.getItem('items'));
items.forEach(function(item,index){
if(item.id===id){
items.splice(index,1);
}
});
localStorage.setItem('items',JSON.stringify(items));
},
clearItemsFromStorage:function(){
localStorage.removeItem('items');
}
}
})();
const ItemCtrl = (function(){
const Item = function(id,name,calories){
this.id = id;
this.name= name;
this.calories = calories;
}
const data={
items:StorageCtrl.getItemsFromStorage(),
currentItem:null,
totalCalories:0
}
return {
getItems: function(){
return data.items;
},
logData : function(){
return data;
},
addItem:function(name,calories){
let ID;
if(data.items.length > 0){
ID = data.items[data.items.length-1].id+1;
}else{
ID=0;
}
calories = parseInt(calories);
newItem = new Item(ID,name,calories);
data.items.push(newItem);
return newItem;
},
GettotalCalories:function(){
let total =0;
data.items.forEach(function(item){
total+=item.calories;
});
data.totalCalories=total;
return data.totalCalories;
},
getItemById:function(id){
let found = null;
data.items.forEach(function(item){
if(item.id===id){
found = item;
}
});
return found;
},
setCurrentItem:function(item){
data.currentItem=item;
},
getCurrentItem:function(){
return data.currentItem;
},
updateItem:function(name,calories){
calories=parseInt(calories);
let found = null;
data.items.forEach(function(item){
if(item.id === data.currentItem.id){
item.name = name;
item.calories=calories;
found = item;
}
});
return found;
},
deletItem:function(id){
const ids = data.items.map(function(item){
return item.id;
});
const index = ids.indexOf(id);
data.items.splice(index,1);
},
ClearAllItems:function(){
data.items=[];
}
}
})();
const UICtrl = (function(){
const UISelectors={
itemList:'#item-list',
addBtn:'.add-btn',
itemNameInput:'#item-name',
itemCaloriesInput:'#item-calories',
totalCalories:'.total-calories',
updateBtn:'.update-btn',
deleteBtn:'.delete-btn',
backBtn:'.back-btn',
listItems:'#item-list li',
clearBtn:'.clear-btn'
}
return {
populateItemList:function(items){
let html = ``;
items.forEach(function(item){
html += `
<li class="collection-item" id="item-${item.id}">
<strong>${item.name}: </strong> <em>${item.calories} Calories</em>
<a href="#" class="secondary-content">
<i class="edit-item fa fa-pencil"></i>
</a>
</li>
`;
});
document.querySelector(UISelectors.itemList).innerHTML=html;
},
getSelectors:function(){
return UISelectors;
},
getItemInput: function(){
return {
name:document.querySelector(UISelectors.itemNameInput).value,
calories:document.querySelector(UISelectors.itemCaloriesInput).value
}
},
addListItem:function(item){
document.querySelector(UISelectors.itemList).style.display='block';
const li = document.createElement('li');
li.className = 'collection-item';
li.id=`item-${item.id}`;
li.innerHTML = `
<strong>${item.name}: </strong> <em>${item.calories} Calories</em>
<a href="#" class="secondary-content">
<i class="edit-item fa fa-pencil"></i>
</a>
`;
document.querySelector(UISelectors.itemList).insertAdjacentElement(`beforeend`,li);
},
clearInput:function(){
document.querySelector(UISelectors.itemNameInput).value="";
document.querySelector(UISelectors.itemCaloriesInput).value="";
},
hideList:function(){
document.querySelector(UISelectors.itemList).style.display='none';
},
showTotalCalories:function(total){
document.querySelector(UISelectors.totalCalories).textContent=total;
},
clearEditState:function(){
UICtrl.clearInput();
document.querySelector(UISelectors.updateBtn).style.display='none';
document.querySelector(UISelectors.deleteBtn).style.display='none';
document.querySelector(UISelectors.backBtn).style.display='none';
document.querySelector(UISelectors.addBtn).style.display='inline';
},
addItemToForm:function(){
document.querySelector(UISelectors.itemNameInput).value=ItemCtrl.getCurrentItem().name;
document.querySelector(UISelectors.itemCaloriesInput).value=ItemCtrl.getCurrentItem().calories;
UICtrl.showEditState();
},
showEditState:function(){
document.querySelector(UISelectors.updateBtn).style.display='inline';
document.querySelector(UISelectors.deleteBtn).style.display='inline';
document.querySelector(UISelectors.backBtn).style.display='inline';
document.querySelector(UISelectors.addBtn).style.display='none';
document.querySelector(UISelectors.itemList).style.display='inline';
},
updateListItem: function(item){
let listItems = document.querySelectorAll(UISelectors.listItems);
listItems = Array.from(listItems);
listItems.forEach(function(listItem){
const ItemID = listItem.getAttribute('id');
if(ItemID === `item-${item.id}`){
document.querySelector(`#${ItemID}`).innerHTML =`
<strong>${item.name}: </strong> <em>${item.calories} Calories</em>
<a href="#" class="secondary-content">
<i class="edit-item fa fa-pencil"></i>
</a>
` ;
}
})
},
deleteListItem:function(id){
const itemID=`#item-${id}`;
const item = document.querySelector(itemID);
item.remove();
},
ClearItems:function(){
let listItems = document.querySelector(UISelectors.listItems);
listItems = Array.from(listItems);
listItems.forEach(function(item){
item.remove;
})
}
}
})();
const App = (function(ItemCtrl,UICtrl,StorageCtrl){
const loadEventListeners = function(){
const UISelectors = UICtrl.getSelectors();
document.querySelector(UISelectors.addBtn).addEventListener('click',itemAddSubmit);
document.addEventListener('keypress',function(e){
if(e.keyCode === 13|| e.which ===13){
e.preventDefault();
return false;
}
});
document.querySelector(UISelectors.itemList).addEventListener('click',itemEditSubmit);
document.querySelector(UISelectors.updateBtn).addEventListener('click',itemUpdateSubmit);
document.querySelector(UISelectors.backBtn).addEventListener('click',function(e){
UICtrl.clearEditState();
e.preventDefault();
});
document.querySelector(UISelectors.deleteBtn).addEventListener('click',ItemDeleteSubmit);
document.querySelector(UISelectors.clearBtn).addEventListener('click',ClearAllItems);
}
const itemAddSubmit = function(e){
const input = UICtrl.getItemInput();
if(input.name !== ""&&input.calories!==""){
const newItem = ItemCtrl.addItem(input.name,input.calories);
UICtrl.addListItem(newItem);
const totalCalories = ItemCtrl.GettotalCalories();
UICtrl.showTotalCalories(totalCalories);
StorageCtrl.storeItem(newItem);
UICtrl.clearInput();
}
e.preventDefault();
}
const itemEditSubmit = function(e){
if(e.target.classList.contains('edit-item')){
const listId = e.target.parentNode.parentNode.id;
const listIdArr = listId.split('-');
const id = parseInt(listIdArr[1]);
const itemToEdit = ItemCtrl.getItemById(id);
ItemCtrl.setCurrentItem(itemToEdit);
UICtrl.addItemToForm();
}
e.preventDefault();
}
const itemUpdateSubmit=function(e){
const input = UICtrl.getItemInput();
const updateItem = ItemCtrl.updateItem(input.name,input.calories);
UICtrl.updateListItem(updateItem);
const totalCalories = ItemCtrl.GettotalCalories();
UICtrl.showTotalCalories(totalCalories);
StorageCtrl.updateItemStorage(updateItem);
UICtrl.clearEditState();
e.preventDefault();
}
const ItemDeleteSubmit = function(e){
const currentItem = ItemCtrl.getCurrentItem();
ItemCtrl.deletItem(currentItem.id);
UICtrl.deleteListItem(currentItem.id);
const totalCalories = ItemCtrl.GettotalCalories();
UICtrl.showTotalCalories(totalCalories);
StorageCtrl.deleteItemFromStorage(currentItem.id);
UICtrl.clearEditState();
e.preventDefault();
}
const ClearAllItems = function(){
ItemCtrl.ClearAllItems();
UICtrl.ClearItems();
const totalCalories = ItemCtrl.GettotalCalories();
UICtrl.showTotalCalories(totalCalories);
StorageCtrl.clearItemsFromStorage();
UICtrl.clearEditState();
UICtrl.hideList();
}
return {
init: function(){
UICtrl.clearEditState();
const items = ItemCtrl.getItems();
if(items.length===0){
UICtrl.hideList();
}else{
UICtrl.populateItemList(items);
}
const totalCalories = ItemCtrl.GettotalCalories();
UICtrl.showTotalCalories(totalCalories);
loadEventListeners();
}
}
})(ItemCtrl,UICtrl,StorageCtrl);
App.init();