Projeto JavaScript: crie um aplicativo de rastreamento de despesas

1. Intro of project: In this course, we're going to build a expense tracker app where you can track your expenses and your income. And you can add your expenses, you can add your income, and this course will have a local storage. So to add a expense or to add income, you can write the name of the transaction. Now I'll write client because we got some payment from lien that's why I'm writing your client. We got $500 from our client. That's why I'll write here 500. Then I'll click this plus icon. Now you can see here that we got $500 in your balance, and then you can check here in our history, we got client which paid us $500. Now in expense, it's zero because we didn't need any expense from this balance. But if you click this income, you can see that we got $500 in our income. Now if you want to add any expense you bought any food from this amount. Let me write foot and then let me write some amount, $20 for food. If I'm writing any kind of expenses, then I have to insert this minus symbol. Then if I click this plus icon, now you can check that our balance is now $480. That means 500 -20 is $480. If you click this expense, you can see that we are getting $20 minus $20 in our expense. So this is a project which we are going to build in this course. And let me show you the local storage in this project. Like if I go and reload this page, you can see that our expense is there, our income is there, our balance is there, and our history is there. That means nothing has been refreshed because this is stored in local storage. And if you want to remove any kind of expense or income, you can simply click this cross item. So now our expense is removed, which was $20. And now you can see our income is 500 and our income is $20. Not $20. Our expense is $0 and our income is $500. So if you want to build Expense tracker app like this and you want to implement this local storage in this app, you can Sly check out this course and let's start building this app. 2. Adding HTML: Now we are going to write the HTM of our project. So here you can see on the left side, I've created a expense tracer project. And then inside this folder, we have three files. First one is EBD Js and then index dot html, and then style CSS. So first of all, I'll create a boilerplate of H t to create a boilerplate, we have to simply type exclamation mark and click Enter. Our boilerplate will be ready. Now we will connect this style of CSS and EB dot Js. So to link this style of CSS and EBD Js, wave to write the tagnam of Link, and then inside this link, we'll type the HRF of this style of CSS. So now we have connected this style of CSS to our HTML. Now we will connect our web dot js. To connect our ab dot js, I'll come inside this body, and here I'll create a tagname known as script. Inside this script, I'll type SRC means source, and inside this source, I'll write the filename that is abdtJs. So now we have connected JavaScript and CSS with our Htmle. Now we will link our icons, and then we'll link our font. So let's go to our browser and then so in here, you can see that I've opened a website known as fondosm.com. And here you can see we selected this cross icon. So to select this cross icon or to use this cross icon, we have to use this ITAC, and then inside the class of this Itech we'll write FasR and then far de Solis then far XmR. So we'll copy this to use this Crossmr web to link this fondosom to our H table. So to link our font dosm, we have to go to this website known as CDN Js. In this CDN Js, you can simply search your font dosom and then after searching font dosom you will get this kind of page where fondosom will be written in you can simply copy this copy link tech and then you can come to your table and below this style of CSS, you can paste it. So now our font dosom is link. That means we can use fondosom icons. So now what I will do, I will get the phons. I'll go to Google Phones and I'll get the fonts for our website. So I came in this Google phones website, phones.google.com. You can search this, and you'll come into this website. And here you can search in the search phone section. You can search Roboto Mono because we are using this font in this project. That's why you can search here Roboto Mono. So I have selected this Roboto Mono with it 300, and then you can simply copy this input URL. Control C, and then I'll paste it in our CSS. Here I'll paste it. Here I have already pasted this link. Now what we will do now we will create our HTML. First of all, I'll create a header inside the header, we will write expense tracker and like this, we'll be going on. Let me build header. Inside this header, we'll create one H two and then inside this H two, we'll write expense tracker. And here we'll create a container Div and inside this container diff we will contain our income and expense and our balance. First of all, I'll create a dif with the class of container. Inside this, let me create some space here. Now inside this continent, the first thing I'll write is your balance. To write your balance, we have to select H four. Inside this H four, I'll write your balance and your balance will by default 0.0 $0. To write 0.0 $0, we'll select H one and then inside this H one, there will be one ID named balance. So we have created H one with the idea of balance. Now we will type some balance, which will be 0.0 $0. So dollar and then zero point double zero. So this is our by default balance. So now I'll create one more dif and inside the div will contain our income and our expense. So let me create a diff and the class of the D will be ink x or EXP inc. I'll write EXP in. And I'll go inside this div and here I'll create one more dif for our income. So let me create a dif in the class for this D will be income remove. So let me write ink remove. Remove RLV in camel case, so REV remove, and then I'll write IRE. That means income remove, and then I'll write hidden. So why we're writing these kind of classes? We are writing these kind of classes because we want to add CSS and JavaScript to these classes, that's right. So now you will not understand why we are writing, when we will use or when we will select these classes, that time you'll understand it why we're writing these kind of classes. Now simply you can write these classes. So here, I'll write hidden. And then inside this DF, I'll create one H four, and that H four will contain income. Means inside that H four will write income and below this age four we'll write the amount of this income. So to write the amount of this income, wave to write P, and then inside the P, we will have a class inside the P. The class will be plus, and then the balance will by default 0.0 $0, dollar zero point double zero. So as you can see there we've created a income di now we will create a expense dip. To create expense we can simply copy this and paste it below. Control C and Control V. And here I'll remove this INC and I'll add EXP and then IRE to ERE, and then hidden will be same. Now I'll change his income to expense. And this class will be minus. And we'll put minus in front of this. And here we'll put a plus in front of this. So now we have created a heading expense tracker and a container inside that container, we have created a balance and then income and expense. Let's check out table. Let me save it and right click and open with Life server. So now here you can see that we have created expense tracker, your balance is there, then our balance is there, which is 0.0 $0, and then income and expense is there. So now we will create two inputs. In one input, we add transaction name and in another input, we'll add the amount. So let me create input to create our input before creating input, we have to create two buttons for this because in our app, we have created one button for input and one button for expense. Let me create two buttons before creating those inputs. I'll come below this diff and here I'll create a button. To create a button, I'll write button and then inside this button aisle write, I'll give some class to this button. The class will be expense. I'll copy this expense. I'll paste it here, and then I'll create one more button. So I'll copy this button and I'll paste this button below. And here I'll type income. And I'll remove this expense and then I'll write income. Now we can check that we've got two buttons with income and expense. So if we click expense, we'll get the expense and if we click income, then we'll get the income. Let's create inputs in here, but before creating inputs, I'll type the heading. The heading will be add new transaction, so it's three and then insides three, I'll write add new transaction. So I'll create a Fm tech, and then inside this Fm tech, I'll add ID. The ID name will be form. So click Enter, then we'll get a form with the idea form. Then let me remove this axon. Below this form, we'll create a DV and inside this D will create a label, and then inside the label we'll create. So now we will create a DV inside the DV we'll create a label. Then in that label, we'll write this label is for text. So let me write text. And then here I'll write name. And then I'll create input. The type of the input will be text and the name of the input and then the name of the input will be nothing. There is no use of any name, and then and then the idea of the name will be text. And then we'll add a class in this input. The class will be input name. So let me write input. There's name and then placeholder will be there, so placeholder. And inside this placeholder, we write name of transaction. So we have created input for name of transaction. Now we'll create input for amount. So I'll copy this D and paste this dV in here and then we'll change the name. We will change the name from name to amount. And then the type of the amount will be number. Light number. And then ID will be amount. In the class will we input amount. And then the placeholder will be amount. So we have created inputs. Now we will create our history. To create our history, we will come below this form and then here I will write history. So to write history, I will select H three and inside this H three, I'll write history. And then the history will be Allis, to create Allis we have to create UL. Inside this UL, there will be AI. But the ID of the UL will be list. Let me write the ID and then ID will be list. And then inside this UL, we will create a AI AI then inside this AI, I'll write some expense like foot. And then I'll create a spin inside this spin, I will copy this thing. So we'll copy this font icon. To copy this font, I'll simply click on this font and then I'll paste it here. So we have copied this X Mark font also. So let me do this in browser. So you can see that we have created a expense tracker with your balance income expense, and there is two button with expense and income and then we have created add new transaction with two inputs, input of name and input amount, and then we have created a history with Ally of food, and there is one font icon. So we have written the T code for our project. Now we will write CSS code for this project in the next video. 3. Styling our app: In this video, we are going to write the CSS code for our app so that we can style our app. So I want to say one more thing that we forgot to put this plus symbol in our app in our last video. So let me show you how to put it. So here so here above this closing form tech, you can see I've created a button with the class of BTNS. Then I have inserted this Itech and inside this iTe, the class is far solid and far circle plus and then far too Excel. To excel means the largest font. So now I'll save and I'll show you how it's looking. So you can see that we have added this plus icon. So you can also go and add this plus icon. Now we will add CSS to our app. So to add our CSS, the first thing which we'll do here is we'll select the Universal selector. And then inside this universal selector, we will type box sizing Bader Box, so box sizing Bader Box. And now we will come below this and we'll select our entire body. So let me select body. And then inside this body, we will apply display flex so that we can bring our container to center. So to bring our container to center, we are using Flexbox. So first of all, I'll write display flex. And then I'll write flex direction and flex direction will be column. So flex direction column. And then I'll write Aleem center, linem center, and then justify content center. Justify content center. I wrote Bseline here, so let me remove Bsline we wrote here, justify content center. Now we will add a mean height in this mean height, 100 VH, so 100 VH. And then we will add then we will add a background color. So background color is not required because our background color is white. Now we will add a font family in this entire body. To add font family, I will simply write font family. And then our font family will let me check it. We have selected this. So our font family will this robotomano. Let me copy this font family and I'll paste it here. Control V. Control V. Let me remove this font family. So we have tested our Roboto mono font family here. So now our body is ready, let me save and show you how it's looking. So let's go to this browser and open this. So yeah, you can see that our container is in center and everything is in center. Means we have aligned everything into center. Now what we will do, now we will add styling into container. So inside the continuer, we will add background color and a lot of things. So let me select this container. Inside this container, we will write margin auto, not margin auto, we will give some margin. The margin will be 30 pixel and then auto. And then I'll write width. So the width of this app will be 550 pixel. It's like a narrow app, so that's why I'm writing 550 pixel. And then we'll write our background color. So our background color was in linear radiant. So if you want to add linear radiant in your project, so if you want to add linear radiant, you have to select background image, not background color. So let me select background image background image. And inside this background image, we will write linear radiant and our linear radiant will be -90 degree comma, our color name will be has A one C four FD. This is our first colonym Now we will add one more color. Let me add a C, c2e, and then nine FB. So we have added another color also with 90 degree. So let me save it and I'll show you in the browser. You can see that we have added our color to this expense tracker app, and now we will add some border radius in here and we will add box do. So to add border radius and box Edo, what do we will do? First of all, I'll add box do in here. So to add box Edo, I've created a box do in here. You can see I've created a box Edo with the help of you can see this below. I've created this box do with the help of Figma. And what can I do? I can simply turn on this developer mode. And inside this developer mode, I can come inside this inspect and inside this inspect. So I'll select this box and then I'll come into this developer mode. So as soon as I turn on this developer mode, I can see all the code and I can get all the CSS code. So here I can get this box Edo. So let me copy this box do. Or I have already copied. So what I'll do is I'll come in this JavaScript because I have added our box do in here. So I'll copy this. I'll remove this from here. And then I'll paste that box Edo in here, Control V, and then So we have added our box do to our website. Let me see and look how it's looking. So you can see that we have added a box do around this box around this container. Now we will add this border radius, and then we will add some padding in here. Let me first add border radius. To add border radius, I'll come below below this and here I'll type border radius. Border radius in our border radius will be two ram And then we will add some padding left because let me save and let me show you because all our text is going towards left. So if we add padding left, then our content will be a little bit to our right side. So you can see here that our content is towards left side. So if you add padding left, it will be okay. So let me add this padding left, PAW DIN G padding left. And padding left will be five ram. Let me save it. So here you can see that our content is in a little bit right side. Before it was completely in left right now it is in right side. Now we will style these buttons. So to style these buttons, I'll select button. Directly, I'll select this button. And inside this button, I will type padding if I add padding inside this button, our button will become a little bit bigger. So let me add 0.6 n in this padding. Let me save it, and I'll show you. You can see our button become a little bigger. Now we will add background color to it, background color, and background color will be white. And then we will add border because some border is there in our button, so that's why we have to remove the border. To remove the border from the button, we will write border none. And then we'll add some border radius to our button, so border radius, and then border radius will be five ram. Let me save it I'll view. You can see that our button became white color and some border radius has been added to our button. Now we'll add styling to our inputs. So to add styling to our inputs, I'll directly select input here. And inside this input, I will add padding to make the input bigger. Padding PA DANG padding and the padding will be 0.4 ram. And then I'll add border. Let me shave and I'll show you what I. So you can see that border is there in our input. And if you click this, we'll get one more border. So we have to remove this click border also and then this border also. So let me remove border. First of all, border, the border will be none. An outline means outline border. So to remove outline border, we have to simply select outline and none. So if I save this and if I show you, you can see that there is no border in here. But you can see these two are merged. So if we want some margin in here, we'll add some margin. We have to add a BR in there because we will add this name above this input and this amount above this amount. So to add this BR, we'll go to our table and add BR in here. So below this label, I'll put B BR, and then here, I'll put one BR. So I'll save this and I'll show you in browser. So here you can see that our input is okay. Now we will add styling to this plus icon. So to add styling to this plus icon, we have selected this BTs. So we have written a class of ts in this icon. So let me select this Bt, BTNS not BTs. And then I'll style this ts dot control. And I'll simply remove the background from that button. So background, none. I'll save this and I'll show you in the browser. You can see that all the background has been removed from here. Now I select this icon separately so that I can add some padding to this icon or some margin to this icon. To select this icon, I'll write far des circle, des plus, and I'll add a margin top margin top and margin top will be 25 pixel, then phone size will be ten pixel, phone size ten pixel. Let me save let me show you in these now you can see that we've got some proper margin in this icon. So you can see here that we are about to finish our designing. Only thing which is left is we have to add this history. Means we have to style this history. So what I'll do, I'll remove this dot from here means I'll remove this bullet point from here, and I'll remove the padding which this food have. So let me select this UL. And inside this, first of all, I'll remove the bullet points. So to remove the bullet points, we will write les dottyletT not dot is style D type, and this will be none. And then we will add our padding to zero. Padding geo Controllers. Now I'll show you. Now you can see that our history is also properly styled. 4. Button functionality: So this is our current app, and in this app, we'll add this expense and income functionality. So to add this functionality, we have to use JavaScript. So I'll come into this file app dot Java Script. And here, I'll select this income and expense. First of all, I'll select this and I'll select this, and then I'll select this button and then I'll select this button. So to select this, I'll use query selector. Let me build a variable named ink remove I'll write ink, remove. I won write E, and then I'll give equals to N then I'll select it with the help of query selector. So document dot query selector. And then I'll select this in remove. Let me go to this HTML, and I'll copy this and I'll paste it here, control with dot, Control V. Now I'll copy this and I'll paste this below, Control V. And instead of ink, I'll write EXP or EX I'll write simply. And then I will add this class to here, this EXP remove. Let me copy this and then paste it in here. Control V. So we have selected our income and expense. Now we will select Income button and expense button. So again, we can copy this and we can paste it here, Control V and ControlV. So I will write Ink button. IMC button, BTN, and then EX BTN. And here I'll select income income, and then here I'll select expense. Expense E is capital, you can check it here. Wrote this E capital, so let me write it in small little and then I'll save this and I'll write this E in small litter and EX PE and SE expense. I'll save and I'll add JavaScript to the selectors. So first of all, I'll create event listener for this Inc button and X Expense button. Means whenever a user will click this, that event listener will run. And then the function inside the even listener, whatever we will add inside that function, that function will run whenever a user clicks this inc button or X button means income button or Expense button. So let me add this even listener on this incuton ink BTN, and I'll let that add even listener, and the even listener will click, so CLI c click. And then I will add a function. The name of the function will be ICs, and then I'll create one more even listener where I add this even listener on Expense button. So I'll remove this INC and I'll add X. And instead of this inks, I will add some other names like XP now I'll create a Is function and then I'll create a EXP function. So to create a Is function, I'll write a variable name const, and then I'll write Is NCs then I'll give equals to. In these functions parameter, we'll pass E E means event parameter. And now here I'm using arrow function. You can use regular function, but I'm using arrow functon because I'm more used to. And I'll give this arrow symbol and then I'll give these curly records. Inside the curly brackets, what we will do. Whenever the user clicks clicks this button, we will add a hidden class or we will remove a hidden class from the income, and we will add the hidden class in expense. So what I'm doing, let me show you. I'll select this ink and I'll select ink remove. This REOV then I'll select this, and then I'll remove hidden class from this function. Whenever the user clicks in, that means whenever the user clicks income button, then I want to remove the class known as hidden because in that hidden class, we will add a display nun. So let me first of all, add hidden class, so it's a D and hidden. And inside this hidden, we will write display nun. So display none. So now what this display none will do is, whenever a user will click this income button, then we will remove the hidden class from this income button. That means whenever we remove this hidden class from this income button, our display nun will be removed, and then we will add this hidden class on this expense button. So let me show you. I select this income remove and then dot class list, and then we want to remove hidden from this income, so we will add dot remove. If you want to add, we will add dot t and if you want to remove, we will add dot remove. Then I'll add the name of the class which is hidden HID hidden. And it's HI. Then I'll copy this and I'll paste it here. And instead of ink, I'll write x. And then I will add this class to this, and then I'll add the class here, A I will add. Now I'll copy this, and I'll do the opposite with this expense button. First of all, I'll show you with the Income button controls, and I'll show you in the browser. Now here, if you click Expense, nothing will happen because we have not add any Java screening expense. But if you click Income, you can see income is coming and whenever we're clicking Expense, nothing is happening. So let me add this opposite of this. We have to add opposite of this to expense. I'll copy this and I'll paste it below Control V. And instead of inks, I'll put EXP, so EXP. Inside this, I'll add Ex here, and I will add ENC here. So now what this is doing is, this is removing the expense element, or this is removing the expense dip. Let me show you that div Inside this expense, this div is there, right. This D with a tag of paragraph. So whenever we are clicking that, this is removing this so let me show you properly. So whenever we are clicking this expense, we are removing hidden. That means we are removing display none from here. That means this expense will be shown in our browser and we are adding hidden to our income. So income will be hidden when we click Expense and when we will click and when we click income expense will be hidden. So I guess you got this point. So let me save this and let me show you in the browser. Now, if you click Expense, our income will be hidden and when we click income, our expense will be hidden. So that is the basic logic behind this. And this is in this video, we'll meet in another video and in another video, we will add this balance or we will add these transactions.