Calorie tracker app with pure JavaScript

adminJanuary 31, 2018March 9, 2018 Javascript 45 Comments

Today i will create calorie tracker with pure JavaScript no library no jquery with JavaScript modular approach. Iam using material.css
Demo

 
html of application

 
<!doctype html>
<html lang="en">
  <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

  <link rel="stylesheet" href="materialize.min.css">

    <title>Calorie Tracker App</title>
   
  </head>
  <body>
<nav>
  <div class="nav-wrapper orange">
    Track Calorie
  
  </div>
</nav>
<div class="container">
  <div class="card">
    <div class="card-content">
      
        Add Meal/Food Item
      
      <div  class="col">
        <div class="row">
          <div class="input-field col s6">
            <input type="text" placeholder="Add Item" id="meal-name">
            <label for="">Meal</label>
          </div>
            <div class="input-field col s6">
            <input type="number" placeholder="Add Calorie" id="calorie-name">
            <label for="">Calorie</label>
          </div>
          <button id="addMeal" class="add-btn btn blue darken-3">   Add Meal</button>
         <button id="updateMeal" class="update-btn btn blue darken-3">   Updated Meal</button>
          <button id="backBtn" class="back-btn btn black pull-right">   Back</button>
        </div>
      </div>
    </div>
  </div>
  <h3 class="center-align">Total Calories: 0</h3>
  <ul id="item-list" class="collection">
     
  </ul>
</div>
  <script src="jquery.min.js"></script>
    <script src="materialize.min.js"></script>

	<script src="app.js">
	</script>
  </body>
</html>

 
JavaScript of App

 
//  CONTOLLER MODULE
var CALORIEController = (function() {
    var Calorie = function(id, meal, calorie) {
        this.id = id;
        this.meal = meal;
        this.calorie = calorie;
    }
    var data = {
        meal: [],
        currentItem: null,
        total: 0
    }
    return {
        returnTotal: function() {
            var sum = 0;
            data.meal.forEach(function(obj) {
                sum += obj.calorie;
            });
            return data.total = parseInt(sum);
        },
        currentItemvalue: function() {
            return data.currentItem;
        },
        updateCurrentItem: function(UpdateObj) {
            var found = null;
            data.meal.forEach(function(obj) {
                if (obj.id == data.currentItem.id) {
                    obj.meal = UpdateObj.meal;
                    obj.calorie = parseInt(UpdateObj.calorie);
                    found = obj;
                }
            });
            return found;
        },
        getEditItemId: function(id) {
            var found = null;
            data.meal.forEach(function(current) {
                if (current.id == id) {
                    found = current;
                }
            });
            data.currentItem = found;
            return found;
        },
        addItem: function(meal, calorie) {
            var newItem, ID;
            if (data.meal.length > 0) {
                ID = data.meal[data.meal.length - 1].id + 1;
            } else {
                ID = 0;
            }
            newItem = new Calorie(ID, meal, calorie);
            data.meal.push(newItem);
            return newItem;
        },
        deleteMeal: function(id) {
            //alert(typeof id)
            var ids, index;
            ids = data.meal.map(function(current) {
                return current.id;
            });
            index = ids.indexOf(id);
            if (index !== -1) {
                data.meal.splice(index, 1)
            }
        },
        testing: function() {
            console.log(data)
        }
    }
})();
//  UI MODULE
var UIController = (function() {
    var DOMString = {
        mealName: '#meal-name',
        calorieName: '#calorie-name',
        addMealBtn: '#addMeal',
        itemlist: '#item-list',
        nodelist: '#item-list li',
        updateMeal: '#updateMeal',
        backBtn: '#backBtn',
        totalSelector: '#totalCalories'
    }
    return {
        getInput: function() {
            return {
                meal: document.querySelector(DOMString.mealName).value,
                calorie: parseInt(document.querySelector(DOMString.calorieName).value)
            }
        },
        totalInUI: function(totalValue) {
            document.querySelector(DOMString.totalSelector).innerHTML = totalValue;
            //console.log(totalValue)
        },
        addItem: function(obj) {
            var html
            //create html with placeholder
            html = ' <li  id="' + obj.id + '" class="collection-item">' + obj.meal + ': ' + obj.calorie + ' Calorie</li>';
            //insert in DOM
            document.querySelector(DOMString.itemlist).insertAdjacentHTML('beforeend', html);
        },
        showCleartState: function() {
            document.querySelector(DOMString.updateMeal).style.display = 'none';
            document.querySelector(DOMString.backBtn).style.display = 'none';
        },
        showEditState: function() {
            document.querySelector(DOMString.updateMeal).style.display = 'inline';
            document.querySelector(DOMString.backBtn).style.display = 'inline';
        },
        clearFields: function() {
            var fields, fieldsArray;
            fields = document.querySelectorAll(DOMString.mealName + ',' + DOMString.calorieName);
            fieldsArray = Array.prototype.slice.call(fields);
            //console.log(fieldsArray)
            fieldsArray.forEach(function(current) {
                current.value = "";
            });
            fieldsArray[0].focus();
        },
        deleteMealList: function(deleteId) {
            document.getElementById(deleteId).remove();
        },
        setCurrentItem: function(currentObj) {
            document.querySelector(DOMString.mealName).value = currentObj.meal;
            document.querySelector(DOMString.calorieName).value = parseInt(currentObj.calorie);
        },
        getUpdateValue: function() {
            return {
                meal: document.querySelector(DOMString.mealName).value,
                calorie: document.querySelector(DOMString.calorieName).value
            }
        },
        UpdateUiValue: function() {
            var updatedData, lists, id;
            updatedData = CALORIEController.currentItemvalue();
            //alert(typeof updatedData.calorie)
            //console.log(updatedData)
            //console.log(updatedData.id)
            lists = document.querySelectorAll(DOMString.nodelist);
            //console.log(lists)
            lists = Array.from(lists);
            //console.log(lists)
            lists.forEach(function(list) {
                id = parseInt(list.getAttribute('id'));
                if (id === updatedData.id) {
                    //alert(typeof updatedData.calorie)
                    document.getElementById(updatedData.id).innerHTML = ' ' + updatedData.meal + ': ' + updatedData.calorie + ' Calorie'
                }
            })
            //console.log(test)
        },
        getDOMStrings: function() {
            return DOMString;
        }
    }
})();
//  APP MODULE
var APPController = (function(CalorieCtrl, UICtrl) {
    var setUpEventListner = function() {
        var DOM = UICtrl.getDOMStrings();
        document.querySelector(DOM.addMealBtn).addEventListener('click', ctrAddItem)
        document.addEventListener('keypress', function(event) {
            if (event.keyCode === 13 || event.which === 13) {
                ctrAddItem();
            }
        });
        document.querySelector(DOM.itemlist).addEventListener('click', ctrEditItem);
        document.querySelector(DOM.itemlist).addEventListener('click', ctrDeleteItem);
        document.querySelector(DOM.backBtn).addEventListener('click', normalState);
        document.querySelector(DOM.updateMeal).addEventListener('click', ctrUpdateItem);
    }
    var updateUI = function() {
        UICtrl.UpdateUiValue();
        Materialize.toast('Meals update succssfully.', 4000);
    }
    var ctrUpdateItem = function() {
        var inputUpdateValue;
        inputUpdateValue = UICtrl.getUpdateValue();
        CALORIEController.updateCurrentItem(inputUpdateValue);
        //UICtrl.UpdateUiValue();
        updateUI();
        var total = CALORIEController.returnTotal();
        UICtrl.totalInUI(total);
    }
    var normalState = function() {
        UICtrl.showCleartState();
        UICtrl.clearFields();
    }
    var ctrEditItem = function(event) {
        //console.log(event.target);
        if (event.target.classList.contains('fa-pencil')) {
            var EditId, id;
            id = event.target.parentNode.parentNode.id;
            //console.log((parseInt(EditId));
            var currentObj = CalorieCtrl.getEditItemId(id);
            UICtrl.setCurrentItem(currentObj);
            UICtrl.showEditState();
        }
    }
    var ctrAddItem = function() {
        //alert('add item')
        var input, newMeal;
        //Get input data from UIController
        input = UICtrl.getInput();
        if (input.meal !== "" && input.calorie !== "") {
            //console.log(input)
            // Add data into CALORIEController
            newMeal = CalorieCtrl.addItem(input.meal, input.calorie)
            //console.log(test)
            UICtrl.addItem(newMeal);
            //Clear fields
            var total = CALORIEController.returnTotal();
            //alert(typeof total)
            UICtrl.totalInUI(total);
            UICtrl.clearFields();
            Materialize.toast('Meals added succssfully.', 4000);
        } else {
            Materialize.toast('All fields are required.', 4000);
        }
    }
    var ctrDeleteItem = function(event) {
        if (event.target.classList.contains('fa-remove')) {
            var mealId;
            mealId = event.target.parentNode.parentNode.id;
            var retVal = confirm("Are you sure you want to delete this item ?");
            if (retVal == true) {
                if (mealId) {
                    //prompt()
                    CalorieCtrl.deleteMeal(parseInt(mealId));
                    UICtrl.deleteMealList(mealId);
                    Materialize.toast('Meals deleted succssfully.', 4000);
                }
            } else {
                return false;
            }
            var total = CALORIEController.returnTotal();
            //alert(typeof total)
            UICtrl.totalInUI(total);
        }
    };
    return {
        init: function() {
            setUpEventListner();
            UICtrl.showCleartState();
            console.log('App Started...')
        }
    }
})(CALORIEController, UIController);
APPController.init();

Demo