Build your own Habit Tracker in Vanilla JavaScript

thank you for joining me this is zach with zac os tech and today i'm going to be showing you how to make this habit tracking application that you can use to accomplish your goals in 2021 let's get started the first thing you're going to want to do is open up your favorite code editor here i'm going to use vs code that's my editor of choice and there's a couple extensions that i'm going to show you that i'm going to use and it'll help your environment look the same as mine so if you click on this extensions icon and type in javascript es6 we're going to click on this one with the yellow icon and hit install i would search for live server and we're going to download the one by ritwik day this will allow us to serve up a website and it'll show us our changes real time as we're making them the last one i would recommend is prettier it's a code formatter so that it'll help format your code in the same way that mine is formatting mine if you don't have vs code you can go to chrome or your favorite browser go to code.visualstudio.com and then hit the download for for windows if you're using a mac it should detect it but if it doesn't hit the drop down here mac os do the stable version instead of the insiders the next thing you'll need is a github account and that'll just allow you to track your progress on this and it'll allow you to download this repository and and make the changes and code along with me so just go to github.com and hit sign up and then you'll need to go to the repository for this so the the link for that will be in the description github.com zack hoskins slash 52 projects and then you'll click this code and you'll want to copy this link okay that's all we're going to do right now in chrome so we'll minimize that so you notice that my terminal at the bottom here was already open if you want to toggle that you can do control and the accent button or the tilde on mac it's command until day i believe and if you have get installed on your computer that's another one that that you may need to download so i just googled git download and it was the first link here and it has a download for mac and windows so i would do download 2.3 for windows and then i would install it you may need to restart your computer or your code editor so you would have to restart vs code but then after that if you type in git dash dash version it'll tell you what version of git you have installed on your computer if you cannot get it to work at all what you can do is go to this code drop down and download zip and that'll allow you to download the zip folder and you would extract it and then be able to edit the files inside it so once you have get installed on your your computer and it's showing a version in here you're going to want to navigate to where your folder is going to be for these projects so me i want mine to be at the in my developer folder so i'm going to cd and cd stands for change directory so i'm going to go to the root of my c drive and then cd dev and this is where i'm going to store all of these projects so now i can do git clone and then type in that link that github gave me hit enter and now i should be able to change directory into 52 projects so if we then type in code and then zero one tab tab is a way to autofill the next thing that is recognized with the start of what you typed so we're gonna open habit tracker and it opens in a new window here a new vs code window so we have app.js we have index.html and we have style.css so i have already included the html and the css needed for this project we're just going to focus on the app.js file if we want to look at the html real quick it's got a habits header it's got a form and this unordered list with a class name of habits this is where all of the habits that we're going to add are going to get stored and listed and then of course we are referencing the script so the app.js folder for the javascript and then up here we have a link to the css file let's look at what this looks like right now so if you followed along with me and installed live server you should have this go live button in the bottom right go ahead and click on that and it should open in your browser with localhost and then 5500 as the link we have habits we have this place to enter your habit name that you want to track number of repetitions so you can either click the number that way or you can type in your own number it has the frequency so if you want to accompl do it these many times daily weekly monthly or per year you can track it like that and then we have an add habit button which is just a submit form element this says loading because what we did is in the html here the habits list has a list item of loading so that's going to stay there forever until we add the javascript to remove that so let's close this html file and open the app.js instead so we're going to start with const add habits equals document and what we're doing here is we're referencing the dom the document object model and this is the document where we're going to add everything to so this is if we look at console log document okay this is literally the entire page that gets rendered let's clear that we might be going back there later okay so document and then we're going to use a query selector and if we look at this add habits button if we inspect it we want this add habit form that's that's what we're getting right now so i'll copy it from there add habit but since it's a class we need to first put a period in front of it and then to end the line a semicolon okay so now we can do [Music] console log add habits so that returns that that form element that's on the page we're going to need const habits equals we'll set it to an empty array right now and then what we can do is we can loop through this habits and list them all in this section down here and then we will also need to reference this section so that we know where to add those habits to once we have the array built so i'm going to add it here const let's do habits list equals document dot query selector and then what was that called in here you could also look at the index.html might be easier so we have the form add habits and then it's just a class name of habits so we're going to do quotation marks dot habits let's comment some of the functionality that we want in this habit tracking application so the first thing is to add a habit okay then let's list habit we want to be able to check them off toggle if complete toggle complete um let's do delete habit okay so this will allow us to add a habit there it'll show up it'll get listed then we can toggle it on and off and if we mistype something or it's a habit that we don't want anymore we will be able to delete it from this list let's start there because we can always add things if we need to down the road so let's do a function add habit all right and what i'm going to do is e so add habit event it's going to capture an event when this is run what do we want in our habit the first thing is is text so const text equals this dot query selector name equals habit okay so it looks a little funky dot value and then let's console log next okay but we can't run this yet it's not going to do anything so let's let's see that okay boom two weekly and and have it it did nothing because the html has no way to know that we actually ran this there's nothing listening for something to change to run this function so what we can do at the bottom is we can add an event listener on the add habits so let's do add habits dot add event listener and then we're going to listen for a submit so instead of just listening for a click or something like that we're going to wait for it to be an actual submit so that it's not like you click and drag off and it fires even though you didn't mean to actually run that that function yet so submit and then what's the function that we want to run add habit okay we don't need to pass anything into it right now because this will this is just the event that fires the the function okay so we should be able to fire this now okay so it's still refreshing on us which means that it probably console logged and then it refreshed so it we lost that console log we can stop this we can prevent it from happening by doing e dot prevent default what e dot prevent default will allow us to do is just keep this submit button from refreshing the entire page on us again so let's save it with prevent default on here and then we'll log this okay so the text listened for name equals habit so up here we were able to do dot add habit so why couldn't we just do dot habit down here let's look at the index.html to find out so it did a query for for name equals text right name equals habit my bad so name equals habit this is what it was listening for which is the form and it's the first input on the form or we could look here okay so for name habit this is the one okay so what's what's this next one name reps so let's go back to app.js i'm going to comment out this console log and we're going to do the same thing for reps so const let's name it total counts equals this dot query selector again okay it's still a name so we're going to do name equals reps uh dot value okay what else is on here a frequency so what's the name of that we actually wrap this into div because there's the label and then there's the the select so we want the select okay so let's do const time frame equals this dot query selector name equals time frame okay that value and then what we want to do so that we can render a new habit as we want to add what we collected to the habits um array that we created up here so let's do const habit not habits so we're just storing this data in an object so let's do text is equal to and this is uh this is in a key value pair so this is the key and this is what the value is going to be so we want it to be what text equals okay and then we'll do comma we'll do reps nope we will do total counts is the key let's link it to total counts okay then time frame same thing let's link this to time frame oops this is why i copy and paste boom boom okay and then completed false so why do we do completed false because if we didn't have a completed boolean then there wasn't there would be no way for us to know if the task was actually completed or not it would just forever stay uncompleted and even if you check it it won't change so we're going to add completed false and then what we can do with this let's go down here and do habits dot push which is a built-in function on arrays that we can use to add the content to an array so we're going to push this onto the habits array and we want it to be habit okay so let's go ahead and console console.log habit and see what happens here so test rest that's actually a good thing so let's let's rest once daily add a habit okay so this returned an object where completed is false the text is rest time frame is daily and total counts is one so now we want it to actually show up down here so to do that we're going to need a new function so let's go below list habits and we're going to name this function list habits equals an empty array and then we're going to habits list okay why does it matter if we if we pass in this empty array right here it's because if we didn't and we just said habit if the page tries to render habit and it doesn't know what it is it'll give us an error so to prevent that from happening we can initialize it with an empty array okay and then let's do habits list dot inner html okay so habits list.innerhtml what this does is it is going to write to the html so it's going to write to the dom and allow us to put in a put in a value here so we'll do loot habits dot we're going to call the map function which is or the map method which is built into all arrays and then we're going to pass in habit and an index and we'll get into that in a bit why we're doing that this will be an arrow function which is that comes with the the updates in es6 to javascript so that'll allow us to run a function here and it'll run that function on every value inside the array and return a new array that's what map will do so we're going to return and then use these back ticks to return some some html and i'm actually going to jump over to here just so that we can use the like the code form reading that comes with the html files let's do a list item and so that's this item what do we want we want there to be a checkbox we want the title we want there to be a numerical value counting up so we can see when we reach the number so that it's complete we want a delete button i think that's it so we'll start with the input and it'll be of type checkbox we will do data equals or data dot dash index equals and we'll pass in that index value that we have okay we'll make the id here of habit habit i so we'll do habit one habit one have a two habit three as we go all right and then the last thing we'll want to pass on to this input is a ternary operator that will allow us to determine if it's completed or not and it'll pass in the word completed if we've actually completed it so or this habit so we'll do habit dot completed question mark and this is the syntax for a ternary operation checked otherwise we'll do nothing okay and we can close that tag we don't need a closing tag for the input okay we're gonna do a label now we're gonna put a label on this check box which is going to show a text right to the right of it so we'll do label 4 and we'll do habit on the same thing i so when we go through this it'll add a habit 1 to both of these and this will link it to that habit so inside this label what we want is let's list habit dot total count and habit.time frame [Music] so that'll that'll give us the number that we put in here that'll say three daily or four weekly but it won't let us actually know how many times we clicked on it so what we actually have to do is add another value into this habit array let's name it reps and we will just initialize it at zero for each one that we go through and we don't need to link it to anything because each time you start a habit it's going to be at zero and then we'll count up from there and what we can do with that is once reps equals the total count that we put in here then we can mark it as complete so let's actually add that reps right before habit total count so habit.reps and then we'll do a slash so it'll say zero out of three one out of three two out of three three out of three and it'll check it off okay so we got the time frame and then what we want to do is then add the text to this so i'm going to use a span to do this i'm actually going to here line break so that you can see that did not work okay i'll just scroll over and then in here we're going to do habit dot text save whoa that is not what we want oh that's because we let's undo that so we added this list item actually to the bottom of the html code let's now go back to this and paste it in between these back ticks because it'll allow us to input text but also reference it'll also allow us to run javascript by doing dollar sign and then curly braces so it'll allow us to link to this index that we're passing in and to the habit array so let's save that let's go here number repetitions weekly okay nothing changed hmm is that what if we went to the console and did list habits cannot set property inner html of undefined okay and it's pointing us to line 26 which is here so it's saying habits list is undefined okay so habits list is pointed to habits which is this unordered list so that should oh i think it's because i didn't pass in any let's do this again and then habits habits list okay perfect so that added zero undefined weekly and asdf for whatever reason asdf is there but we'll figure that in a bit okay again we have to run this undefined let's just do sure and then we have to run list habits so instead of running list habits each time we can add it here at the end of the file so list habits habit habits and then habits list so it's taking in that array and pushing it to the habits list section of the html let's save and let's see what happens here boom okay okay i see what it's doing so it is this is the text that okay how about i actually put something in besides asdf let's do read one time per day bad habit i think i edit it twice because we're not clearing this okay so at least it checks it off properly when we're clicking on it okay but there's no logic there and it's it's giving us an undefined here so let's let's look into that why is it not listing the number that we put in here as the number that gets listed okay just giving us undefined let's do console log habits let's by doing council log habits we can see this array okay so we have a reps that should be at zero that's proper total counts okay two it's not listing it there for some reason total count total count we had a typo let's do that boom we're going to do asdf twice daily okay and then we're going to exercise three times a week okay let's run list habits okay zero out of two daily zero out of three weekly this is we're getting there okay except i don't like the way that this text is is formatted like this is really big and this is really small so the way that the span is formatted in in the css is it makes the span smaller and the regular label text bigger so let's let's move this span from being on the text to being on this part this label so we'll put it inside the label span okay and then we will put it right before the text starts boom read once daily okay that looks way better although it's it's annoying to have to run list habits every time that we type something in and it also doesn't clear when we have read or we have one so we'll take care of that as well so the first thing we can do is after this add habit so we push it to the array and then let's run the list habits function habits habits list that's where we want to put it save it's gonna clear that exercise two times a week i had to have it boom so now it's showing up cool but it still shows up in here so i can't quickly add a bunch of habits so what we want to do is after we list the habits we're going to do something called reset and so we're going to run the reset function which is some forms have a button that specifically says reset and then another button that says submit we're going to add the reset at the end of this to just run once the the function is done so this dot reset that's it so now if we do [Music] add and it resets all of the the fields in this form cool so now this doesn't ever count up so that might be the next thing that we want to do so that could be in the toggle if complete section we're just tackling it like it's a a checkbox which makes sense because we made it a checkbox so if we look at um let's go down here okay let's do [Music] another one and i keep putting this in because in the index.html i made both of these required so you can't add just a blank habit it'll tell you please fill out this form field okay so we fill out that form field add and it doesn't allow you to do this also we added a minimum of 1 to this so if you do 0 and try to say i want to do this 0 times daily it gives you an error because you can't do things more than or less than zero times and it would actually break this down here and not let us toggle it completed or count up all right why is it adding that that apostrophe okay so what this is doing is it's basically making an array of these like if we do another value of let's do three so it's different it's going to add the comma and then the next value so what we can do instead is to join all these together by doing dot join and then we are going to not put anything in between the values okay so if we run that and then do boom one and then test four times daily now it's putting them all in without the comma in between them all that looks way better okay so i like the list habits but we just want the the toggling to to work like if this is supposed to wait until we click it four times before it toggles so i think list habits is done we can get rid of that comment add habits is done because we're able to add let's do okay so when we when we click this let's do another function toggle completed i'll pass in the event hand the event to it and let's cancel log e okay oh we didn't add an event event listener okay so what's this this button called um no it's we're clicking down here okay this is the habits list so we'll do [Music] habits lists dot ad event listener the same way we did before but this time we'll listen for a click because there's no submit to there's no submit form field down here and we will run toggle completed okay eventually we want to add a delete button over here so what's going to to distinguish if we clicked on this or if we clicked on delete that's what we need to add right now otherwise we would hit delete and it would just check it off instead of deleting the whole item because let's let's clear this so we get a little bit better idea so we're listening for the click event on this whole habits list so that won't work okay so what's this this is label okay let's do e dot e dot target because e gives us everything you got target will actually list what we clicked on okay so a label and then a check box so actually in the css we hid the checkbox so that we can add this plus here otherwise it would show as okay we have display none so if we count that out it would show like that and if we're doing this we'll cross out type of thing then we don't need the checkbox to show that it's completed so it just makes it look a little nicer to have that display as none but it still thinks that we're clicking on the checkbox which allows us to toggle it and if we used like a a screen reader you would still be able to see that that was checked and we're not messing with the accessibility of this application let's close styles for now so what we want to do with this edot target is we want to make sure that we are clicking on the check box here okay so let us do if and we can run e dot target which returns these two values and matches and pass in what we want it to match so input because the check box is the input one so if it doesn't match input then just return don't do anything okay but if it does equal input what we want to do is okay make this l element here a constant and then we can do const index equals l dot data set which is why we did the dataset.input nope index okay so this is going to get the id that we're passing in the the index that we're passing into this okay so let's do index now instead of okay let's do like three habits on here okay [Music] let's eat not four times daily let's eat three times daily okay boom one and this should be zero so it's it's passing us the index of what we're clicking on and with that we can use the array to increase this value and also check it off if it is actually completed instead of just immediately checking it off so let's get rid of this console.index we don't need that anymore if habit index because we have this data set value that will return the number now dot reps and we're going to do a triple equal sign so we always want to do a triple equal sign because it'll make sure that the type as well as the number is the same if you just do a double equal sign it'll try to convert them to the same type and if you have a string and a number it'll still equal but it could mess things up with how it decides to convert it so do a triple equals habits index and we're going to compare it to the total count right nope we threw in an extra okay so if it equals each other we want to do habits index dot completed and set that equal to true okay so let's give that a test so what's happening here so there is there's still nothing here that increments this value reps so it's always going to just stay on zero so we want to do is each time we run this toggle completed we want to add habits index um dot reps we're going to do plus equals 1. so this is this is javascript shorthand for typing equals uh habits index dot reps plus one so we can shorten that all into this plus equals one and it'll do the incrementing for us so now if we try this it still doesn't display anything and that's because we are we are changing the reps here so now it's 13 we completed it 13 times but we don't ever change what we rendered to the page so we actually have to go in here and add the list habits function one more time at the end and still do habits and habits lists so i'll just keep incrementing and it did not check off once it hit one okay so let's let's do another one test let's do it two so it should check it off at that point so what's going on it obviously doesn't think that this 2 is equal to this too for some reason okay so let's let's do console.table that's another thing that you can do with with console and pass in habits all right so it's got the reps equal to 2 and the total count equal to 2 in quotation marks so for some reason it's it's converting that to a string up here so it's taking this number that we type in and converting it into a string before it saves it into this constant so one thing we could do is add a plus before here and that'll force it to make it a number so now if we did boom okay now it doesn't have the quotation marks now they're both numbers so now this equality function with the triple equals will actually work and it'll check it off awesome so what if we keep clicking it it just continues to go up and up forever and ever so that that's not very helpful for us so what we can do is add another else if and then we could have it go back to zero so that we can start it over so if we had a daily thing that we wanted to do we could check off it's done on tuesday and then wednesday morning we could click it again and have it reset to zero and that way we don't have to delete and then re-add it so let's do that right here um let's do habits index dot reps is greater than the habits the total counts we're going to set the habit habits index dot reps equal to zero okay so this this isn't going to work it's because it'll check it off and then it'll set it back to zero but it won't ever change the fact that this completed boolean is set to true so then we'll do habits index dot completed equals false now if we do this boom it goes back to zero and we can do it again perfect that is exactly what we were wanting for this and that will allow us to continue to use these over and over again each day but how can we use these each day if when we refresh the page it deletes it we can use a thing called local storage and we can store it to like a key value pair inside the browser so it'll it'll save it if you use the same browser over and over again so to do that we need to after we push the habits we want to do local storage dot set item and then we're going to pass in habits and the value will be we can't just pass habits because that is an array of objects so local storage can only store strings so we'll have to convert habits to a string so that we can save it in the browser and to do that we will use something called json.stringify and then pass in habits okay so now when we do this hit add habits we can go to application and here it is here is the the habits with this value that we added to it so if we refresh it's still going to delete it but it's going to remember that there is a habit key value pair that we saved in local storage okay i'm going to clear that for right now but one thing we can do here at the top okay now it's in it's in there we can either do json.parse which is another method on json which allows us to convert from a string to a json object that will allow us to make habits an actual array of objects so we'll do json parse and we want to do local storage where we stored it before but this time we'll use get item and it's habits okay do we want to delete this okay so if we did it this way now it'll it'll remember awesome and it'll update that properly but what happens if we clear this and then try to try to run it now we're just stuck at this loading and it'll say loading forever until we actually add something and now we can't push because we have a value of null that we're trying to add to so what we can do to avoid this is do or just like that so what this will do is it'll look first at local storage and if there is an item under the name of habits it'll create the habits array using that otherwise it'll just make an empty array so now it'll allow us to add things it'll allow us to refresh if we clear that okay we're still not getting an error message now perfect but if you noticed i can check this off and refresh and it goes back to zero so we're not actually updating the local storage after we change things so if we went down to top complete we're re-rendering all of the habits using this but we are not saving it to local storage so we could actually just copy and paste this local storage line here and now if we check it off refresh now it's going to stay no matter how many times we refresh the page okay we're starting to get there i think we're almost complete we just don't have a way to delete this without clearing the local storage which doesn't help because it will delete everything that you have from your your habit tracker so let's go back to here and add a button all right class equals delete we're going to use the data index again and set it equal to i so it'll do one two three four five or start with zero actually we're gonna set the id to delete i and for simplicity sake we're just going to put the word delete at the end of each item so let's see what happens maybe not save what in the world all right we broke something because now it's button button list item i don't think the tabbing matters in this aha so we needed to do quotation marks on this we left it unclosed okay and you see that it updated this however this might be broken so we're gonna we're gonna clear that and then restart so two one times test two times weekly okay but now delete doesn't actually do anything it'll still allow us to check it off but when we hit the delete button nothing happens that's because we need to add another event listener for the delete button so instead of adding it to the delete button we're going to do the same thing as this we're going to listen for a click on habits list which is this entire thing and then decide if we clicked on delete in that list so habits list dot add event listener another click and this time we're gonna run um delete habit which is a function that we have not created yet so let's let's go ahead and do that right now and we do want to pass in and e here okay so we now have this this delete habits function created but we have nothing in it right now we're going to do the same thing that we did with toggle completed we're going to check for but instead of input we're going to check for the delete button so let's just copy that and what does this button show up as a button it's a button so we'll search for button okay so if it doesn't equal a button then it'll just return otherwise we can do the same thing that we did here so we capture the index of it and then let's all this is going to do is return the index of the button we clicked so another thing we can do with arrays is pass in the name dot splice and then this will ask for an index and how many numbers we want to cut out of the array so we'll do um the starting number which should be index and we want to cut one number out of that okay so let's make sure that we run list habits and local storage after so that it updates everything okay and that worked that worked too okay so let's do add habit okay it still won't let us do that let's do let's actually put real content in here so read once daily okay let's do exercise three times a week let's do post video once weekly all right delete so this still works it still checks off delete let's look at the when we refresh it still so it's updating the the local storage as well okay it updates the value refresh and it's saving everything so all right so i think i think we're there so this has three of the four things needed for a crud application so crud stands for create read update and delete so this will allow us to create things read it because it lists everything here and delete so we just can't update the name of this so that that's a challenge you can try to implement that yourself you can add another button here on the left that says edit and it'll allow you to change the the value of the text other than that we can make sure we save our javascript and if we go back to the terminal if we do get status it'll show us that we're on branch main we're up to date with main but we have not committed the changes that we made to app.js so if we want to push this up to github so that we can keep track of all the progress that we've made then you can do get add and that'll add everything so get status to check what's so green means that it's it's staged to be ready to commit and then once you're ready to commit things let's do git commit m for message and then finished week one okay now our branch is up to date and we can do git push and if you hit enter then it will push this up to your um your copy of the 52 projects on github so i think that about does it for us here today shoot me a comment if you're able to do this with your version of this application because i'd love to see it if you have any questions or suggestions for future videos for remake i would love to hear that as well please don't forget to like and subscribe and i will see you in the next video

Channel: zachOS Tech

Views: 629

Rating: 5 out of 5

Keywords: #javascript, #code, #programming, habit tracker, javascript habit tracker, js habit tracker, todo list, todo list javascript, javascript tutorial, javascript tutorial for beginners, javascript tutorials, learn javascript, habit tracker javascript, vanilla js, javascript for beginners, javascript, vanilla javascript, vanilla js project, vanilla javascript project, habit tracking app, habit tracking

Id: 6x6d4L_Z-Ds

Length: 61min 5sec (3665 seconds)

Published: Tue Jan 05 2021