Build a BUDGET TRACKER with JavaScript & Local Storage (No Frameworks)

hey how's it going guys my name is dom and in today's video i'm going to be showing you how to build a budget tracker or a budget planner using html css and javascripts okay so this right here is the final product as we can see we've got a table full of either expenses or income now all of these amounts here are going to add up to a total in the bottom right corner and you can do things like change a row to be an income instead and the total is going to update accordingly you can also do things like add a new entry you can edit existing entries you can delete entries and so on and all the data is going to be saved in local storage which means it's going to persist so when you refresh the page a second third or fourth time you know and so on um the data is going to stay there so this is all easily done using pure javascript now before jumping into the code today's video is sponsored by fusion charts fusion charts is a feature-packed library full of responsive and interactive charts graphs and gauges making it a perfect fit for your next dashboard or data visualization project let me show you how easy it is to create a bar chart using fusion charts to install you can use npm or you can paste in the html using fusion chart cdn to render a chart using fusion charts we can create a new chart container in the html we can now head inside the javascript below and create a new instance of fusion charts passing through all of the properties and options including the charts type we can then pass through the data itself and then lastly call the render method and we're good to go and as we can see it was that easy to create a bar chart using fusion charts you can also change your theme i can paste in the fusion theme right there and then provide the theme as being fusion then if i go back in the browser we're going to get this beautiful theme right here it also integrates nicely with your favorite javascript framework such as react angular or vue so go to fusioncharts.com or click on the link in the description below to begin your free trial today okay so to begin coding this from scratch i just want to start off by saying uh the source code is going to be linked down below if you would like to download and follow along while you watch today's video okay so to begin our coding of this budget planner we can head inside the text editor now i'm beginning here with an index.html file so firstly i want to link up both a css and javascript file so going inside the directory structure here let's make a new folder called css and a second one called js so now inside both of these folders we can make a new main.js file and of course a new main.css file so now we can simply link these two files up inside the index.html by going inside the head and creating a new link to a css file of course going to css then main.css and a new script source here going to js then of course main.js now you also want to make sure that you include a type of module here and this will ensure that you're then able to use the import export syntax in javascript as well as the fact that this script is going to be deferred by default which means it's only going to run once your document is ready that's going to solve you so that's that's going to save you any headaches that you might have regarding you know things like undefined element and things like that okay so we've got the css and the javascript file linked up we can now begin on the actual html before moving on to the css and then lastly the javascripts okay so hopping inside the body here let's make a new div with an id of app and then drop inside here now this is going to be the main container for the application or for the table essentially so we can now create a new table here with a class of budget dash tracker okay so now this will be the main table for the budget tracker so we can create a new table header just like this and then we can pop in and create a single table row and a bunch of table header elements for each one of our columns so for example we can say dates then we can say description then we can use type okay and amount and then lastly here just keeping keeping a fifth row available just for the for the delete entry button okay so we have our table head right there we can now proceed to creating a new table body here with a class of entries okay so basically this table body is going to contain each individual entry inside the budget tracker so as an example we're going to create a single entry so we can of course style it up using css okay so inside here we can create a new table row and a new table data cell with a new input field here and the type of this input field is going to be date because this one here of course is going to be the date picker okay so we're going to also need to give this a class of input and a second class of input dash dates the reason for the second class here is so we can then access this input field from within the javascript code okay so moving on now we can create a second td looking very similar to this one except this one here is going to be a input description with a type of text now optionally you can have a placeholder here and you can say something like uh i put for my example at the beginning of this video i put in something like this where i say add a description wages bills etc so you can place that if you would like to and we can drop down make a second or so a third td but this one here is going to be the type of income so x sorry the type of row so either income or expense so for this one it's going to be a select drop down so we can get rid of this input field here and create a new select with a class of input and then a second class of input dash type now in terms of the options inside here we're going to have either of course income or expense so let's give this first one a value of income and the text of income and of course the second one a value of expense and a text of expense just like that okay so moving on we can create a fourth table data cell and this one here is going to be an input field it's going to be a type of number this of course being the amount okay so either negative or positive amount depending on the income or expense so we can say a class of input and then input dash amount just like that now lastly here we're going to create a fifth td this one here is going to be for the delete entry button the little x so we can make a new button here the type of this button is going to be button and the class will be simply a delete dash entry and we're going to be using an html entity here to give us a multiplication or cross symbol so we'll just say and and then hash 1 zero zero zero five semicolon i can now save this and go inside the browser and we can check our progress so we're gonna get something like this as we can see we have the main structure going for the table header and a single entry inside the budget tracker okay so moving on we can create a second table body here now this table body is going to simply be a section for us to include the add new entry button okay let's make a new tr inside here and a singular td with a column span of five because we want the add entry button to be in the right corner of that row so we can include that call span there then of course inside here create that button with a type of button and the class is going to simply be new dash entry then we can say for the text of course something like new entry very straightforward i can save this and go back in the browser as we can see it's currently in the left corner but we're going to use css to place it in the right corner okay moving on now to the final part of this table it's going to be the table footer so the table footer is going to contain essentially just that area to give you the total amounts for your entire budget tracker so we can make a new tr and a td with a coil span of five just like the the new entry button now you're going to also want to include here on both of these tds so back up into this new entry include a class of controls on the first one on the second one we can include a class of summary just like that now going inside the td here let's make a new strong here which says simply total and then a new span with a class of total currently being zero dollars by default so now if i save this and go back in the browser we're going to get something like this so now we are done with the html i do want to mention that essentially all of the stuff so basically this entire table okay not including the div okay this entire table is going to be generated dynamically using javascript so we've only got it here now so we can actually style it using css and see our progress but eventually the javascript code is going to be you know generating this html okay so moving on to the css file we're going to begin by targeting the class of budget dash tracker so for that entire table okay so we're going to give this a border collapse of none so not none it's going to be a border collapse of collapse now this here is going to ensure that if you want to include any sort of you know borders on your on your budget tracker they're going to be overlapping each other giving you a nice clean look we can also give this a minimum width of 750 px this is of course optional and changeable by you and we can include now a budget tracker then targeting every element inside there and applying a font family so we can just say font family equal to sans serif of course pick your favorite font for this value here we can move on by targeting every single table header cell inside the budget tracker so for this we'll just give this a text a line of left to remove that default centering a padding of 10px top and bottom and 20px left and right as well as a border bottom here of two pixels then solid then zero zero nine five seven eight i can save this and go back in the browser and we're gonna get something like this not looking not looking too bad so far but of course we can improve on it so going back inside the css we can now target the budget tracker and basically every single table data cell inside there give this a padding of five pixels on all sides okay we can now move on to targeting both every single input field and the delete entry button so for for these input fields and this button they're going to share some similar properties the first one being a height of 30 pixels so it's consistent across the board as well as a font size here of 13 pixels some padding of 0 top and bottom and then 10px left and right a margin of 0 and then finally a box sizing of border box to ensure that our increased padding does not blow out you know the whole dimensions of the input fields and of course the button so i can save this and go back in the browser now we can see all of these input fields have a consistent height okay so moving on we can now target the input fields specifically so for these ones i'm gonna be giving this a border of one pixel solid and then a very light gray as well as a border radius of 5 pixels for a very subtle border we can also give this an outline of none and then drop down and just say when you focus or when you're editing an input field we're going to increase the border color to be a slightly darker gray being triple b right there i can now save this and go back in the browser and we get something like this so of course we're almost done with the css so we can now move on to styling up the delete entry button on the right side so we can target the class of delete entry and for this one we can firstly display this as a flex and give it an align items of center as well as a justify content of center these three properties are going to ensure that your multiplication symbol or your x is going to be centered vertically and horizontally okay we can also give this a width of 30 pixels to match the height of the input fields and of course the button as well as a background of none a color or text color of red we're going to be giving this no border but we're going to apply a border radius here of 50 okay an outline of none and a cursor of pointer so if i save this and go back in the browser as we can see we get something like this now the border radius is currently not being used or it's not actually visible because there is no background or border for it to actually you know display so we're going to say when you hover over the delete entry button so colon hover we're going to simply apply a background here of a very light red being rgba2550 and then 0.1 for 10 opaque red okay we can now just go back in the browser and hover over the x button and we get that border radius giving us a full circle okay moving on to the last css rule set is going to be for both the controls class and the summary so remember that's just the new entry button and the total amount text for these a text align of right to push them to the right side of the table so saving this and going back in the browser and we're going to get something like that perfect so now we are fully complete with both the html and the css we can move on to the javascript okay so moving on to the javascript code we can head back into vs code and we can of course go inside the main.js file so the first thing to do is going to be to create a new file inside the js directory called budget tracker.js so basically this is going to be a class which is going to handle everything related to the budget tracker which means this main.js file needs to import this file here and of course its class okay so we can say export default class and call this budget tracker okay now because we use export default we are then able to import this class into the main.js also if you guys aren't too sure about how javascript classes work i've got a whole video dedicated to that if you want to watch that one first before jumping back into this one so in terms of importing this file we can just say import budget tracker from budget tracker dot js so watch out for this.js it might not automatically do it for you if it does great if not include js at the end here so we can now simply drop down here and we can create a new instance of this class so we'll say new budget tracker and then pass through here a query selector string we're going to pass through here an id of app this is just telling the javascript code or the code we're going to write okay it's going to tell it to use this div or our div from earlier as the main container for our budget tracker and like i said earlier the javascript is going to be the one which injects html eventually the html file is going to look like this nothing inside of app okay so going back inside the main js file that is all done we can now move on to the budget tracker.js so we're going to begin by defining each method inside this class before implementing each one one by one okay so dropping down here we can define the constructor to take in the query selector string just like that we can now define the first method here it's going to be a static method and it's going to be called html this is going to return the html for the actual table itself okay we can make a new static method here or second static method called entry html this right here is going to return the html string for a single row inside that table okay the next one here is going to be a method called load this will be the initial loading of the data okay and our next one called update summary this one here is going to take all of the current rows in the table and work out the total amount and display it in the bottom right corner okay moving on to the next one it's going to be called save and as the name suggests it's going to take all the data and save it to local storage so it can be persisted when you refresh the page okay we can make a new method here called add entry it's going to take in a entry as an object so more on this later on but it's going to have a default value of an empty object just like that and basically this method add entry is going to add a new entry inside the table okay next up we can say get entry rows and this method is going to basically be a little helper for us to return all of the active rows or all of the rows inside the table or the entries right cool moving on we can define a new method called on new entry btn click so when you click on the button for a new entry this function is going to run of course it's going to then you know add a new entry and so on the last method here is going to be called on delete delete entry btn click this one here is going to be taking through the event object and basically it's going to do something when the user clicks on the little x to delete an entry cool so now we can go up to the top here and we can begin implementing the constructor okay so the first step for the constructor is going to be to get a reference to the root html element of course our app div so we'll say here this dot root is going to be equal to document dot query selector passing through here the query selector string okay now i can just say something like you know console.log this dot root to confirm it actually works so i'm going to save this here and go back in the browser as we can see in the console if i open it up we have the div with an id of app right here so it is successfully been passed through and selected by our constructor okay so now moving on we can simply just say this dot root dot inner html is going to be equal to budget tracker.html so we're going to take the html string from this method here and simply inject it inside our app okay so we can get to that very shortly but for now i just want to finish off this constructor so it's also going to be doing this dot root dot query selector we're going to grab onto the new entry button and we'll just say when the user clicks on the new entry button we're going to run this function and basically we're going to make a simple call to this dot on new entry btn click so of course handling you know when the user clicks on the new entry button now of course once the html has been injected by this method here this new entry class is going to be accessible okay now we can drop down and just say this dot load to initially i can just say here load initial data from local storage something like that so of course that's our first initial load okay so now we can move on to implementing this static html method it's going to be really straightforward we're going to say return now using the back ticks on the keyboard next to your one your one key we can now access javascript template strings which give us which then gives us access to uh multi-line strings alright so inside here in this return we can simply copy all of the table html from in the html file so copy this and paste it inside here now make sure that you also remove our single entry because of course that is going to be loaded dynamically so remove that single entry inside the entries t body and keep it empty just like that so now of course we have our base structure being injected by the javascript which means if i save this and go back in the browser as we can see the entry is gone because the entire html has been replaced by our javascript call right up here okay so that is all for our static html method we can now move on to implementing right down here the entry html so for this one we'll just say return once again the multi-line string the back ticks okay and now of course just passing through here or copy and pasting our singular row from the html so copy that and paste it inside here very straightforward fix the formatting and the indentation and we are good to go okay so now we have that method implemented we can now safely remove all of the html from our html file or at least everything inside the app the appdiv and clean that up so it looks something like this and there we go okay so now moving on inside the javascript class here we can minimize both our static methods and work on the load method so before starting work on the load method i want to show you what the local storage data looks like so going back into our other you know tab here i can inspect or open the developer tools here and go inside the application tab so i want to just remove here this second key i was experimenting before this video so this key right here budget tracker entries inside local storage okay has a json string full of all the data so going down here we can see every single entry is an object in javascript with amount date description type and so on well that's it really but there we go so it's an array of all of your objects okay so now we need to simply you know when we first load up you know inside here on initial load we need to of course read that data and display it inside of course our table so going inside here we'll just simply say something like const entries is equal to then call json.parse we're going to pass the json which comes out of the local storage call so we'll then say local storage dot gets item then passing through here our key now because i'm using the exact same you know url and port this data here is actually available on this tab here so for you guys if you want to use the budget tracker entries key you can but in my case to keep our data fresh and new i'm going to change my key to be something like budget tracker entries let's just do dash dev okay so like i said you guys can make your you know your key just like that i'm going to include dash dev to of course you know begin with a fresh set of data okay now on the first load of your whole application there's going to be nothing returned from this get item you know call so instead we'll say or and default to an empty array so using double quotes here we can create a json empty array which can also be parsed like i said in the case where it's the user's first time loading up the web page okay now dropping down we can then just say you know four four of for every single entry inside your entries array okay we can say this dot add entry and we can add the entry to our table okay now we can also say this dot update summary which of course is going to update the total in the bottom right corner on the initial load so now if i just uh console.log the entries here okay just like this i can save it and go back in the browser and we can see we'll get an empty array if i make the key here to be instead you know without the dash div it's going to use the data from earlier as we can see we get the five objects right here and of course like i showed you before just looping through those objects and of course adding it to our table so going back to the dash dev for an empty array of course now this ad entry isn't going to do anything okay because of course there's no elements in the array anyway moving on we can go ahead and implement the add entry method so for this add entry method it's going to be relatively straightforward we need to firstly just say this dot root dot query selector we're going to be selecting the entries table body the container for our entries we're then just going to say insert adjacent html okay before the end of our table body we can inject this html it's going to be budget tracker dot entry html just like that so now of course if i save this and then i might actually drop down to the on new entry button click ok i'll say inside here this dot add entry so now of course the button is going to work so we can see this in action go back in the browser click on the new entry button and we get this right here we've inserted the entry html to our entries table body so now it's going to be a simple case of you know taking taking this entry which of course this entry here gonna have your date description you know type and so on i'm gonna take this data and then add it or inject it into our html our table row so we can say constro is gonna be this dot root dot query selector we're going to select the last row inside the entries table body so we'll just say entries then select tr then say colon last of type now of course the last of type is going to be the row which we literally just inserted so basically this row is a javascript reference to this html okay we can drop down and just say row dot query selector we can now pass in here the input date class to gain access to our date picker input field we can now say dot value equal to entry dot date okay or if there is no date if it's a new entry okay we're going to default the date to be the current date so we'll just say here new date dot to iso string then we'll just say dot replace here and we'll say using regular expressions here we'll say t dot and then anything replacing with a empty string so this right here i want to explain this part so if i just call it new date dot 2 iso string in the browser we can see it's going to give us this right here it will give us the current you know date time in an iso format okay so this first part here year dash month dash day this is what we want to be injected into our date picker input field we don't care about t and so on so basically this regex is going to replace t and everything above it or everything in front of it with an empty string giving us only that date part okay cool next one here is going to be the input dash description going to be set to of course entry then description otherwise default to an empty string very straightforward and right down here for the input and then type of course being that drop down we're going to say the value is going to be entry type or and we can just simply default the new entries to be an income okay we can move on to the input amounts input field and for this one we'll say entry dot amount or defaulting to 0 for new entries okay then lastly we can hook onto the the delete button so we'll say row.queryselector the delete entry button and for this one we'll just say dot add event listener when the user clicks on the on the delete entry little x button we're going to grab onto the event object right here with e okay then just say this dot on delete entry btn click and then pass through that event object e being right there so now if i drop down to the delete entry btn click i can just say something like console.log entry deleted just for now of course later on we're going to be you know actually implementing this method but for now we'll say console.log okay and we can stop here and just go in the browser and check our progress so if we go in the browser and press the new entry button we're going to get this right here as we can see it defaults to today's date the type of income and a zero amount if i press on the x button it's going to say entry deleted in the console okay so the very last step for the add entry you know method here is going to simply just be row dot query selector all we're going to select every single input field inside the row and we'll say for each one of those we can grab onto the input field and we'll just say right down here input.addeventlistener and listen for the change event so basically whenever your input field changes a value okay we're going to simply say this dot save we're going to call the save method to of course commit this change to the local storage okay so we're getting there okay we can now move on to just implementing the save method okay so for the save method we're going to firstly here just essentially take all of our rows and then convert it into an array of objects to be saved so the first step for this is going to be to actually go down and implement this get entry rows so inside this one we'll just say return array dot from here then we'll just say this dot root dot query selector all then we can just say the class of entries and of course the tr so by default this query selector all is going to give you an array like objects of nodes called a node list okay but we actually want to use an array so basically this is going to take our node list in and convert it into an array so i can show you this right now if i just do console.log then call the this dot get entry rows method here go back in the browser if i add a new entry then make a change of course triggering a save in the browser we get the single table row here inside an array okay now the importance of the array here is because the save method we're going to want to use the array map method okay so we can say const data is equal to then call this dot get entry rows so we've got the array we can now say dot map so dot map is going to allow you to take each one of your entry rows and then convert it to something else so inside here we can grab a hold of the or each row just like this and this function here is going to return a new object for every single table row this object is going to be essentially what gets saved in local storage basically these things right here like i showed you earlier so going back inside here we'll say return dates is going to be equal to here row.queryselector and grab onto the input date and then simply get the value out of that do the exact same thing now for the description okay then of course the type just like this exact same thing and then lastly the amounts now for the amounts i want to be able to use here pars floats to simply take out our value and then convert it to a float number so we have those decimals supported okay so now if i console.log you know the value of data here go back in the browser add a new entry make a change and we get here the data the first element is an object amount of zero dates of the current date no description and so on if i say description like groceries make that change trigger a save inside here we now have description as being groceries so now the save method needs to take this data and simply commit it to local storage so we'll say here local storage dot set item using the same key as we did earlier for the load method budget tracker entries dev just like this and we'll say for the value here json.stringify to convert our array of data into a json string just like that and now upon saving the data we'll just say this dot update summary again to of course make our total reflect what it actually should be so now we can just you know stop here and we can go back in the browser we can add a new entry something like groceries we can say that was an expense of like fifty dollars and it's now saved to local storage if i inspect the application tab here in the developer tools in local storage we have the new key now for dash dev and this shows here our data which means now if i refresh the page we have the data still maintained of course being loaded in by the load method right up here cool so now we can move on to the final stages of today's video um being the on entry or on delete entry btn click so for this one we're passing through here a console sorry we're passing through here the event object being e so let's see what this looks like if i go back in the browser add a new entry here and i do something like let's just do wages it's an income of like one thousand dollars your your monthly pay or whatever it might be now refresh it's still there perfect so now if i go in the console again and i just uh delete the groceries we can see in the console we get this pointer event so this event object contains a property called target which refers to the button which we clicked on so basically we can begin from this button right here and go all the way up to find the table row so in the javascript we can just say e dot target okay dot closest tr this right here will give us its parent table row we can now just say dot remove to remove that row save this back in the browser we can now just delete this row and it's gone but it was not saved so refresh and it's still there going back inside here we can call this.save to of course commit that change back in the browser press x again it saves refresh and it's gone forever so there we go the last step now is going to be to implement this update summary method so for this one here we are going to simply say const total is going to be equal to then once again calling this dot get entry rows we have access to now the array the array reduce method so the reduce method essentially allows you to take an array and then convert it or reduce it down so reduce it down to a single value so in our case i want to take every single row and convert it to a single total so here we're going to take through here a callback function with the current total and the and the row so whatever row you're currently on as you loop through each one okay we can now say this function is going to do something okay we'll leave it blank for now but the second argument here so the reduce method is going to be the starting total of course being zero we're gonna we're gonna count from zero basically now also guys i've got a whole video dedicated to the reduce method so if it's not making sense i hope you guys can watch that video um and i hope it makes sense uh coming back to this one but anyway moving on this reduce method is going to do a couple of things the first thing is it's going to be grabbing the amount out of the input field so we'll say const amounts equal to row.query then select the class of input dash amount then just simply say dot value to get that value we can now say const is expense equal to then of course once again getting uh getting the value out of the input dash type field this time and we're just going to say look if the select drop down is on the expense value then of course yes equals equals equals it is an expense okay and lastly here we can say const modifier is going to be equal to either plus 1 or negative 1. so this here is going to be applied to our math to either make this item you know take away a certain amount or add on a certain amount so for this we'll just say if it's an expense then we can say negative one otherwise make it a positive one so now of course we can drop down here and just say return total plus then add this new amount so we'll say amount times the modifier of course now it's going to basically say look you've got your running total here add on the new amount and if it's an expense make it negative 1 or negative amount it does not make it a positive amount of course a plus and a plus is going to give you a plus a plus and a minus will give you a subtraction so that is how that works so right here we have the total if i console.log the total here go back in the browser we can see you know when the page first loads up we have the total currently at one thousand of course just reflecting this amount right here if i make a new entry and say an expense of you know forty dollars refresh or you know we can see right here now says 960 upon saving it so that's working perfectly fine for the income and the expense so now how do we get this inside the span and make it formatted or nicely with a dollar sign and decimal places very straightforward actually well kind of but if we go back inside here we can now just say const total formatted okay so basically this just means look format it with a nice dollar sign and your decimal places to do this we can just say new new intl dot number format okay we can now pass in here en us to format with the u.s locale okay we can now say the style is going to be currency okay and the currency is going to be in usd so this right here is going to allow you to apply that nice formatting to your total we can now say dot format then pass through here the total amount we can now just simply say list.root.queryselector taking in here the class of input dash total or my mistake guys just total this of course referring to that span which we covered earlier on this one right down here and we can just say dot text content equal to the total being formatted okay i can save this and then go back in the browser and we get the 1000 or the 960 being displayed right there if i make this an income instead we get 1040. so that is all done for the budget tracker hope you guys enjoyed today's video where you learned something if you did drop a like and subscribe and i'll see you guys in the next video

Channel: dcode

Views: 893

Keywords: javascript project, easy javascript project for beginners, learn javascript, javascript tutorial, javascript project ideas, javascript projects for beginners, javascript classes, es6 classes, es6 import/export syntax, build a table with javascript, dynamic table with javascript, local storage with javascript

Id: OnML-5Mk70o

Length: 46min 35sec (2795 seconds)

Published: Thu Dec 16 2021