/* ---- Budget App ver: 1.1 ---- using Firebase for backend, Material design for bootstrap free ui kit and vanilla JavaScript. Features added: 1. Realtime data, any changes you make to data gets updated instantly in UI 2. Date Picker functionality, you can access previous month or year data aswell. 3. Pie Charts, click on income or expenses button to access them. 4. Dynamic Background Images, background images changes based on month Features to add next : 1. Authentication 2. Test Mode (which is this one) and User Mode (Personlized to each user) 3. Register users 4. Sign in functionality */ document.addEventListener("DOMContentLoaded", function(event) { //FIRE BASE DATABASE CONTROLLER const config = { apiKey: "AIzaSyBFIP12ClnYbKPEI9YhTM823qdWThHh1mg", authDomain: "md-budget.firebaseapp.com", databaseURL: "https://md-budget.firebaseio.com", projectId: "md-budget", storageBucket: "", messagingSenderId: "1065623851959" }; firebase.initializeApp(config); var date = new Date; var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; var year = date.getFullYear(); var days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]; var month = months[date.getMonth()]; var datePicker = document.querySelector('input[type="month"]'); const db = firebase.database(); var budgetDataRef = db.ref('/budget_data'); var budgetRef = db.ref('budget_data/'+year+'/'+month); var incRef = db.ref('budget_data/'+year+'/'+month+'/inc'); var expRef = db.ref('budget_data/'+year+'/'+month+'/exp'); //BUDGET CONTROLLER var budgetController = (function(){ var Expense = function(id, description, value, timeStamp) { this.id = id; this.description = description; this.value = value; this.timeStamp = timeStamp; }; var calcPercentage = function(totalIncome, cur) { if(totalIncome > 0){ this.percentage = Math.round((cur.value / totalIncome) * 100); } else { this.percentage = -1; } }; var getPercentage = function(){ return this.percentage; }; var Income = function(id, description, value, timeStamp) { this.id = id; this.description = description; this.value = value; this.timeStamp = timeStamp; }; var calculateTotal = function(type){ var sum = 0; data.allItems[type].forEach(function(curr){ sum += curr.value; }); data.totals[type] = sum; }; var data = { allItems: { exp: [], inc: [] }, totals: { exp: 0, inc: 0 }, budget: 0, percentage: -1 }; var calculateBudget = function(){ //Total income and expenses calculateTotal('exp'); calculateTotal('inc'); //Calculate the budget income - expenses data.budget = data.totals.inc - data.totals.exp; //Calculate the percentage of income that is spent if(data.totals.inc > 0){ data.percentage = Math.round((data.totals.exp / data.totals.inc) * 100); } else { data.percentage = -1; } } return { addItem: function (type, des, val){ var newItem, ID, tStamp, d; //generate random id function randomID(length){ let text = ""; var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789"; for(let i = 0; i < length; i++) { text += possible.charAt(Math.floor(Math.random() * possible.length)) } return text } ID = randomID(6); tStamp = days[date.getDay()]+" "+ months[date.getMonth()]+" "+date.getDate()+" "+date.getFullYear(); //Create new item based on type if(type === 'exp'){ newItem = new Expense(ID, des, val, tStamp); db.ref('budget_data/'+year+'/'+month+'/'+[type]).push(newItem); } else if(type === 'inc'){ newItem = new Income(ID, des, val, tStamp); db.ref('budget_data/'+year+'/'+month+'/'+[type]).push(newItem); } }, deleteItem: function (type, id){ var ids, index; ids = data.allItems[type].map(function(current){ return current.id; }); index = ids.indexOf(id); if (index !== -1) { data.allItems[type].splice(index, 1); db.ref('budget_data/'+year+'/'+month+'/'+[type]).once('value').then( function(snapshot){ var childData = snapshot.val(); if(childData !== null){ var keys = Object.keys(childData); for (var i = 0; i < keys.length; i++) { var k = keys[i]; if (childData[k].id === id) { db.ref('budget_data/'+year+'/'+month+'/'+[type]).child(keys[i]).remove(); } }; } }); } }, calculateBudget: function(){ //Total income and expenses calculateTotal('exp'); calculateTotal('inc'); //Calculate the budget income - expenses data.budget = data.totals.inc - data.totals.exp; //Calculate the percentage of income that is spent if(data.totals.inc > 0){ data.percentage = Math.round((data.totals.exp / data.totals.inc) * 100); } else { data.percentage = - 1; } }, calculatePercentages: function(){ data.allItems.exp.forEach(function(cur){ calcPercentage(data.totals.inc, cur); }); }, getPercentages: function(){ var allPerc = data.allItems.exp.map(function(cur){ return cur.percentage = Math.round((cur.value / data.totals.inc) * 100); }); return allPerc; }, getBudget: function(){ return { budget: data.budget, totalInc: data.totals.inc, totalExp: data.totals.exp, percentage: data.percentage } }, retriveDBData: function(obj) { var dbValues = obj.val(); var objKeys = Object.keys(dbValues); for(var m = 0; m < objKeys.length; m++){ if(objKeys[m] === 'inc'){ var incChild = dbValues.inc; var keys = Object.keys(incChild); for (var i = 0; i < keys.length; i++) { var k = keys[i]; data.allItems['inc'].unshift(incChild[k]); calculateTotal('inc'); calculateBudget(); UIController.addListItem(incChild[k], 'inc'); controller.updateNumbers(); } } else if (objKeys[m] === 'exp'){ var expChild = dbValues.exp; var keys = Object.keys(expChild); for (var i = 0; i < keys.length; i++) { var k = keys[i]; data.allItems['exp'].unshift(expChild[k]); calculateTotal('exp'); calculateBudget(); UIController.addListItem(expChild[k], 'exp'); controller.updateNumbers(); } } } }, returnLocalData: function() { return data; }, addNewItemToDB: function(type, item) { data.allItems[type].unshift(item); calculateTotal(type); calculateBudget(); UIController.addListItem(item, type); if(type === 'inc'){ UIController.incPieChart(); } else { UIController.expPieChart(); } controller.updateNumbers(); }, deleteItemFromDB: function (type, id){ this.deleteItem(type, id); calculateTotal(type); calculateBudget(); UIController.deleteListItem(type+"-"+id); if(type === 'inc'){ UIController.incPieChart(); } else { UIController.expPieChart(); } controller.updateNumbers(); }, resetLocalData: function(){ data = { allItems: { exp: [], inc: [] }, totals: { exp: 0, inc: 0 }, budget: 0, percentage: -1 }; } }; })(); // UICONTROLLER var UIController = (function(budgetCtrl){ var DOMstrings = { inputRadio: 'types', inputDescription: '#input__description', inputValues: '#input__value', sumbitBtn: '#submit-button', incomeContainer: '.income__list', expenseContainer: '.expenses__list', budgetLabel: '.budget__value', incomeLabel: '.budget__income--value', expenseLabel: '.budget__expenses--value', percentageLabel: '.budget__expenses--percentage', container: 'data-list', expensesPercLabel: '.item__percentage', dateLabel: '.budget__title--month' }; var formatNumber = function(num, type){ var numSplit, int, dec; num = Math.abs(num); num = num.toFixed(2); numSplit = num.split('.'); int = numSplit[0]; if(int.length > 3) { int = int.substr(0, int.length - 3) + ',' + int.substr(int.length - 3, 3); } dec = numSplit[1]; return (type === 'exp' ? '- $' : '+ $') + ' ' + int + '.' + dec; }; var nodeListForEach = function(list, callback) { for (var i = 0; i < list.length; i++) { callback(list[i], i); } }; return { // PreLoader createLoader: function(){ var backdrop = document.createElement("DIV"); backdrop.setAttribute("id", "preLoader"); backdrop.classList.add("backdrop"); var preLoader = document.createElement("DIV"); preLoader.classList.add("loader"); var loader = backdrop.appendChild(preLoader); var body = document.body; body.insertBefore(backdrop, body.firstChild); }, dismissLoader: function(){ var child = document.getElementById("preLoader"); var body = document.body; body.removeChild(child); }, getInput: function(){ var selected = document.getElementsByName(DOMstrings.inputRadio); for (var i = 0, length = selected.length; i < length; i++){ if (selected[i].checked){ var selectedType = selected[i].value; break; } } return { type: selectedType, description: document.querySelector(DOMstrings.inputDescription).value, value: parseFloat(document.querySelector(DOMstrings.inputValues).value) }; }, addListItem: function(obj, type){ var html, newHtml, element, data; if(obj !== undefined){ //Create HTML string with placeholder text if(type === 'inc'){ element = DOMstrings.incomeContainer; html = '

%description%

%value%

%date_timestamp%

'; } else if (type === 'exp'){ element = DOMstrings.expenseContainer; html = '

%description%

%value%

21%

%date_timestamp%

'; } //Replace the placeholder text with some actual data newHtml = html.replace('%id%', obj.id); newHtml = newHtml.replace('%description%', obj.description); newHtml = newHtml.replace('%value%', formatNumber(obj.value, type)); newHtml = newHtml.replace('%date_timestamp%', obj.timeStamp); //Insert the html into the dom document.querySelector(element).insertAdjacentHTML('afterend', newHtml); } }, deleteListItem: function(selectorID){ var el = document.getElementById(selectorID); el.classList.remove('fadeInLeft'); el.classList.add('fadeOutRight'); setTimeout( function(){ el.parentNode.removeChild(el); }, 1000); }, clearFields: function(){ var fields, fieldsArr; fields = document.querySelectorAll(DOMstrings.inputDescription + ', ' + DOMstrings.inputValues); var fieldsArr = Array.prototype.slice.call(fields); fields.forEach(function(current, index, array){ current.value = ""; }); fieldsArr[0].focus(); }, displayBudget: function(obj) { var type; obj.budget > 0 ? type = 'inc' : type = 'exp'; document.querySelector(DOMstrings.budgetLabel).textContent = formatNumber(obj.budget, type); document.querySelector(DOMstrings.incomeLabel).textContent = formatNumber(obj.totalInc, 'inc'); document.querySelector(DOMstrings.expenseLabel).textContent = formatNumber(obj.totalExp, 'exp'); if(obj.percentage > 0){ document.querySelector(DOMstrings.percentageLabel).textContent = obj.percentage + '%'; } else { document.querySelector(DOMstrings.percentageLabel).textContent = '---'; } }, displayMonth : function(){ var now, months, month, year; var now = new Date(); months = ['January', 'Februray', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; month = now.getMonth(); year = now.getFullYear(); function sortMonth(){ var m = month + 1; m = m.toString(); if (m[1] !== undefined ){ return m; } else { return "0"+m; } } datePicker.setAttribute('value', year+'-'+sortMonth()); datePicker.setAttribute('max', year+'-'+sortMonth()); budgetDataRef.on('value', function(snap){ var budgetData = snap.val(); var yearKeys = Object.keys(budgetData); var yearLastKey = yearKeys[yearKeys.length - 1]; var monthKey = Object.keys(budgetData[yearLastKey]); var monthLastKey = monthKey[monthKey.length - 1]; var monthObj = { Jan: "01", Feb: "02", Mar: "03", Apr: "04", May: "05", Jun: "06", Jul: "07", Aug: "08", Sep: "09", Oct: "10", Nov: "11", Dec: "12", }; datePicker.setAttribute('min', yearLastKey+'-'+monthObj[monthLastKey]); }); }, dispplayPercentages: function(percentages){ var fields = document.querySelectorAll(DOMstrings.expensesPercLabel); nodeListForEach(fields, function(current, index){ if(percentages[index] > 0){ current.textContent = percentages[index] + '%'; }else{ current.textContent = '---'; } }); }, changedType: function(event){ if (event.srcElement.id === "inc"){ document.querySelector(DOMstrings.sumbitBtn).classList.add('btn-success'); document.getElementById('input__description').classList.add('green_desc'); document.getElementById('input__value').classList.add('green_val'); document.getElementById('input__description').classList.remove('red_desc'); document.getElementById('input__value').classList.remove('red_val'); } else if (event.srcElement.id === "exp"){ document.querySelector(DOMstrings.sumbitBtn).classList.remove('btn-success'); document.getElementById('input__description').classList.remove('green_desc'); document.getElementById('input__value').classList.remove('green_val'); document.querySelector(DOMstrings.sumbitBtn).classList.add('btn-danger'); document.getElementById('input__description').classList.add('red_desc'); document.getElementById('input__value').classList.add('red_val'); } }, getDOMstrings: function(){ return DOMstrings; }, // Charts / Graph incPieChart: function(){ var localDB = budgetCtrl.returnLocalData(); var desc = []; var value = []; desc = localDB.allItems['inc'].map(function(current){ return '$ ' + current.description; }); value = localDB.allItems['inc'].map(function(current){ return current.value; }); var pieCtx = document.getElementById("incPieChart").getContext('2d'); var incPieChart = new Chart (pieCtx, { type: 'pie', data: { labels: desc, datasets: [ { data: value, backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"], hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"] } ] }, options: { responsive: true } }); }, expPieChart: function(){ var localDB = budgetCtrl.returnLocalData(); var totalinc = localDB.totals.inc; var desc = []; var value = []; desc = localDB.allItems['exp'].map(function(current){ return '% ' + current.description; }); value = localDB.allItems['exp'].map(function(current){ return Math.round((current.value / totalinc) * 100); }); var test = document.getElementById("expPieChart"); var pieCtx = document.getElementById("expPieChart").getContext('2d'); var expPieChart = new Chart (pieCtx, { type: 'pie', data: { labels: desc, datasets: [ { data: value, backgroundColor: ["#F7464A", "#46BFBD", "#FDB45C", "#949FB1", "#4D5360"], hoverBackgroundColor: ["#FF5A5E", "#5AD3D1", "#FFC870", "#A8B3C5", "#616774"] } ] }, options: { responsive: true } }); }, //Change Background Based on month changeBg: function(month){ var bg, dropBoxKeys; dropBoxKeys = { Jan: "ogwlcw6kruu56bc", Feb: "1beod5bv2dprgpx", Mar: "5eiiwg5q1mj5jxd", Apr: "nei2wyu6946o2wu", May: "estgn5p8ytjwak7", Jun: "0wokbum3f1fp96a", Jul: "h70721gtx7wl3do", Aug: "ej0h4e6nf4nguce", Sep: "w201uoven7k4dg0", Oct: "up3abjz29yxkjxl", Nov: "xgqatwyqh3otw1c", Dec: "x3e5um5z9awftai", }; bg = document.querySelector('.top').style.backgroundImage = 'linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url(https://www.dropbox.com/s/'+dropBoxKeys[month]+'/'+month+'.jpg?raw=1)'; } }; })(budgetController); // GLOBAL APP CONTROLLER var controller = (function(budgetCtrl, UICtrl, DBCtrl){ var setupEventListeners = function() { var DOM = UICtrl.getDOMstrings(); document.querySelector(DOM.sumbitBtn).addEventListener('click', ctrlAddItem); document.addEventListener('keypress', function(event){ if(event.keyCode === 13 || event.which === 13){ ctrlAddItem(); } }); document.getElementById(DOM.container).addEventListener('click', ctrlDeleteItem); document.querySelector('.radio-group').addEventListener('click', UICtrl.changedType); document.getElementById('inc-tab').addEventListener('click', UICtrl.incPieChart); document.getElementById('exp-tab').addEventListener('click', UICtrl.expPieChart); datePicker.onchange=dateEventHandler; }; var updateBudget = function(){ //1. Calculate the budget budgetCtrl.calculateBudget(); //2. Return budget var budget = budgetCtrl.getBudget(); //3. Display the budget on the UI UICtrl.displayBudget(budget); }; var updatePercentages = function(){ budgetCtrl.calculatePercentages(); var percentages = budgetCtrl.getPercentages(); UICtrl.dispplayPercentages(percentages); }; var ctrlAddItem = function(){ var input, newItem; //1. Get the field input data input = UICtrl.getInput(); if(input.description !== "" && !isNaN(input.value) && input.value > 0){ //2. Add the item to the budget controller newItem = budgetCtrl.addItem(input.type, input.description, input.value); //3. Add the item to UI UICtrl.addListItem(newItem, input.type); UICtrl.clearFields(); //4. Calculate and update budget updateBudget(); updatePercentages(); } }; var ctrlDeleteItem = function(event){ var itemID, splitID, type, ID; itemID = event.target.parentNode.parentNode.parentNode.parentNode.id; if(itemID){ splitID = itemID.split('-'); type = splitID[0]; ID = splitID[1]; //1.Delete item from data budgetCtrl.deleteItem(type, ID); //2.Delete item from UI UICtrl.deleteListItem(itemID); //3.Update and show the new budget updateBudget(); updatePercentages(); } }; //Date change events var dateEventHandler = function(event) { var datePickerYear, datePickerMonth, dateValue, localDB, removeIncItems, removeExpItems ; dateValue = event.target.value.split('-'); datePickerYear = parseInt(dateValue[0]); datePickerMonth = parseInt(dateValue[1]); datePickerMonth = months[datePickerMonth - 1]; if(datePickerYear !== year && datePickerMonth !== month){ year = datePickerYear; month = datePickerMonth; budgetRef = db.ref('budget_data/'+year+'/'+month); incRef = db.ref('budget_data/'+year+'/'+month+'/inc'); expRef = db.ref('budget_data/'+year+'/'+month+'/exp'); localDB = budgetCtrl.returnLocalData(); removeIncItems = localDB.allItems['inc'].map(function(current){ UICtrl.deleteListItem("inc-"+current.id); }); removeExpItems = localDB.allItems['exp'].map(function(current){ UICtrl.deleteListItem("exp-"+current.id); }); budgetCtrl.resetLocalData(); UICtrl.changeBg(datePickerMonth); controller.init(); } else if( datePickerYear === year && datePickerMonth !== month ){ month = datePickerMonth; budgetRef = db.ref('budget_data/'+year+'/'+month); incRef = db.ref('budget_data/'+year+'/'+month+'/inc'); expRef = db.ref('budget_data/'+year+'/'+month+'/exp'); localDB = budgetCtrl.returnLocalData(); removeIncItems = localDB.allItems['inc'].map(function(current){ UICtrl.deleteListItem("inc-"+current.id); }); removeExpItems = localDB.allItems['exp'].map(function(current){ UICtrl.deleteListItem("exp-"+current.id); }); budgetCtrl.resetLocalData(); UICtrl.changeBg(datePickerMonth); controller.init(); } else if(datePickerYear !== year && datePickerMonth === month) { year = datePickerYear; budgetRef = db.ref('budget_data/'+year+'/'+month); incRef = db.ref('budget_data/'+year+'/'+month+'/inc'); expRef = db.ref('budget_data/'+year+'/'+month+'/exp'); localDB = budgetCtrl.returnLocalData(); removeIncItems = localDB.allItems['inc'].map(function(current){ UICtrl.deleteListItem("inc-"+current.id); }); removeExpItems = localDB.allItems['exp'].map(function(current){ UICtrl.deleteListItem("exp-"+current.id); }); budgetCtrl.resetLocalData(); UICtrl.changeBg(month); controller.init(); } else if (datePickerYear === year && datePickerMonth === month){ budgetRef = db.ref('budget_data/'+year+'/'+month); incRef = db.ref('budget_data/'+year+'/'+month+'/inc'); expRef = db.ref('budget_data/'+year+'/'+month+'/exp'); localDB = budgetCtrl.returnLocalData(); removeIncItems = localDB.allItems['inc'].map(function(current){ UICtrl.deleteListItem("inc-"+current.id); }); removeExpItems = localDB.allItems['exp'].map(function(current){ UICtrl.deleteListItem("exp-"+current.id); }); budgetCtrl.resetLocalData(); UICtrl.changeBg(month); controller.init(); } }; //DataBase Listners var activateDBlisteners = function(){ incRef.on('value', function(incSnap){ var incData = incSnap.val(); var localDB = budgetCtrl.returnLocalData(); var localID; var fbID = []; var fbKeys; var index; if(incData != null){ var keys = Object.keys(incData); localID = localDB.allItems['inc'].map(function(current){ return current.id; }); for(var i = 0; i < keys.length; i++){ fbID.push(incData[keys[i]].id); } if(keys.length > localID.length){ for(var i = 0; i < keys.length; i++){ index = localID.indexOf(incData[keys[i]].id); if(index === -1){ budgetCtrl.addNewItemToDB('inc', incData[keys[i]]); } } } else if (localID.length > keys.length){ for(var j = 0; j < localID.length; j++){ index = fbID.indexOf(localID[j]); if(index === -1){ budgetCtrl.deleteItemFromDB('inc', localID[j]); } } } } else { localID = localDB.allItems['inc'].map(function(current){ return current.id; }); if(localID.length === 1){ budgetCtrl.deleteItemFromDB('inc', localID[0]); } } }); expRef.on('value', function(expSnap){ var expData = expSnap.val(); var localDB = budgetCtrl.returnLocalData(); var localID; var fbID = []; var fbKeys; var index; if(expData != null){ var keys = Object.keys(expData); localID = localDB.allItems['exp'].map(function(current){ return current.id; }); for(var i = 0; i < keys.length; i++){ fbID.push(expData[keys[i]].id); } if(keys.length > localID.length){ for(var i = 0; i < keys.length; i++){ index = localID.indexOf(expData[keys[i]].id); if(index === -1){ budgetCtrl.addNewItemToDB('exp', expData[keys[i]]); } } } else if (localID.length > keys.length){ for(var j = 0; j < localID.length; j++){ index = fbID.indexOf(localID[j]); if(index === -1){ budgetCtrl.deleteItemFromDB('exp', localID[j]); } } } } else { localID = localDB.allItems['exp'].map(function(current){ return current.id; }); if(localID.length === 1){ budgetCtrl.deleteItemFromDB('exp', localID[0]); } } }); }; return { init: function(){ UIController.createLoader(); UICtrl.displayMonth(); setupEventListeners(); updateBudget(); updatePercentages(); setTimeout(function(){ activateDBlisteners(); UIController.dismissLoader(); }, 3000); }, updateNumbers: function(){ updateBudget(); updatePercentages(); } }; })(budgetController, UIController); controller.init(); UIController.changeBg(month); });

Budget-App using Js, Firebase and Material Design