JavaScript Project for Dummies: Age Calculator

1. Introduction: The project that we are building in this video is pretty simple. So we are building age calculator using JavaScript. As this project is designed for the bigness, so it is pretty simple and straightforward. And there are only two learning objectives that we have in this project. So the first one is learning the implementation of the dome in our JavaScript project, and the second one is using date object and also manipulating it to get our desired results. 2. Building Age Calculator: This is the project that we are going to build in this video, and we are actually going to build the age calculator with the help of JavaScript. So we'll be using estimL CSS in the JavaScript only. So first of all, what I need to do I need to open up the VS code here. So now in the VS code, what I actually need to do, so we have to go back, and now we have to see what we actually need to do in our estimate code. So basically, we have to have the herring, which will be the age calculator, and then we are having this input and button. And after this, when we give the input value here, so let's just select the input value. And now, if I just click on calculate, this is going to calculate age for us in the format of years, months, and days. So we actually have to build this project. So let's just go back. And the first thing that we have to do is we have to build our estim of structure. And inside the development, we need to have the hearing that would be the I two. So I'll just simply write down age calculator. And after this, I'm going to have one more development, which will have the two things. The first thing would be the input. It will be in the date format, so we have to click on input date. All right. So I don't need to have the name right now, so I'm going to simply remove this value. But I will do add the ID here. So since we are getting the data ofth here, so we're going to write down D or B here. Okay, so after this, what we need to do here, we need to have the button here. I'm going to simply write down the button. And inside the button, I will need to add the ID here. So this will be, let's say, calculate and and here in the text, I can write down, calculate as well. And after this, what we need to have, we need to have a paragraph here, but with the ID, which would be the result, yes, that's what we need. But in this paragraph, we won't have anything here. Okay? Because the text inside our paragraph will be generated when we give it a value in the input and when we run our calculate function. So right now, it would be empty. So let's just save this. And now what I have to do, I actually have to run this. So let's click on Open with Lifesaver Okay, so this is something that we are having right now on our project. Okay, so one thing that I have to add here that I won't be working on the CSS on our project. So I will just add the pre made CSS that I have created with the help of AIS. I'm going to use that simply. But right now we are not adding this on our project. We'll just add this at the last moment. So now what we have to do we have to add one more thing, which is actually the JavaScript file. So we're going to name it as Main door, Jess. Okay, so now I would like to go into the full window now. Perfect. Let's just increase the size here. And now this will make it look more visible. So since we have created our estimL here, so this is all we need in our TML file. Now we need to work on our JavaScript file. Now in the JavaScript file, first of all, we have to understand that how STML and JavaScript are communicating with each other. So they communicate with the help of Dome. So right now, if you don't know about the dome, I'm going to give you a little introduction on the dome, how it works, what it is, and how can we use this. So for that, I will need to jump into the browser again. And I have created some diagrams here. So let's go here with the full screen. Okay. So first of all, I have to show you one thing here how TML and CSS communicate with each other. So I'm going to add the text here, which will be the dom so this is our dome, and we also need to have the estimal and JavaScript here. So I just put it here and just put it here. I'm going to write down estimal here and I'm going to write down JavaScript here. So the way that estimal and JavaScript communicate with each other is with the help of dome. So I will just create a flow here. Okay? So this is how we're going to connect this and we can also have the line over here. So if you do know about the doom and if you do know about how they communicate with each other and what they are and how can we use this in the code, you can skip this part on the explanation of the dom. Okay. So now, first of all, we have to understand that what is a dom actually. So Dom is actually the feature of a browser. Okay? It is actually a browsers feature. So there are multiple different browsers features that we use in our web application. So Dom is actually one of the browsers feature that we use in our code. So what it stands for, it is document object model, and what it actually is like, how it works. So Dom basically is the programming API, okay, that we use for estimL and examal documents. So this is actually an API which enable us to communicate between the Javascript and estimal. So what we can actually do with this. So basically, we can access and manipulate the estimal elements with the JavaScript with the help of dome. Okay, so now we have to understand the structure of the dome, like the data structure of the dome or how it works or how it is structured. So you can see that the dome is the Javascript object, and it is structured in the tree format. So the base point or the access point or the starting point of the dom is whenever you want to use the dom in your JavaScript file on your estimal code, you will always start with a document. Then after the document, you will be able to access all the estimal elements that you have in your code. So root element will always will be estimal let's say that in the estimal code, you have the hair element, and you also have the body element, and in the body element, then you have the Eschman element and the paragraph element. So let's say that if you wanted to access the paragraph here. So now what you have to do, first, you will simply write down document. That will be the entry point to use the domino JavaScript code. So first, you're going to write down document. Okay, so let me make it look bigger. So first, you're going to write down the document, and you will use this as the JavaScript object. So as we know that to access the properties in our Javascript object, we use the dot notation here. So after that, what we're going to use, we're going to simply write down estimL because that is the root element, and after that, we need to write down the body. All right. We need to add the dot here, and after that, I will write down the paragraph if I wanted to access the paragraph. But let's say if I wanted to access the H one element here, I'm going to write down the H one element here. So that is how the dom object works. Obviously, there are the easier ways to access the elements in our estimal code, but I'm just giving you an idea here that how it actually works in terms of is tree structure. So let's just delete. And after this, we have to understand two here. That in dome, we have two things. The first one is the properties, as this is the Javascript object, and second one is the methods. So what you can do with the properties and the methods here is pretty simple. With the properties, you can actually get or set the value, if you want to change the content of any estimate element, just like the text or anything. And with the help of method, you can perform an action on any estimal element like adding the estimal element or deleting it or something else. So it has two things the properties and the metters. So now since we have the understanding of the dome and how it actually works, now we're going to go back into our JavaScript code and start writing our JavaScript code for our project. So before writing the project in the Jz, one more thing that I want to mention here that this is something that I do personally. Now this is completely optional that if you want to do this or not, that I always write down a kind of step by step documentation on the project before writing down the code. So it looks something like this. If I can show you here, I'm going to go into the document here. On the calculator. So this is something that I have created before. So the starting steps are actually obvious. You have to create the estim file, then add styling, then create the JavaScript file. Then after the JavaScript file, what we have to do in our code. That's what we have to understand. So if you always write down this kind of a step by step documentation for your project, you will actually be creating your solution without writing down the code. Okay? This is a kind of a solution that you can use as a reference to write down your code. So let's say that for our project that we are creating, which is the age calculator. So the first thing that we need to do is in JavaScript, we have to access the elements that we have in our estimal code with the help of Dom. And after that, we have to create a function that can calculate the age. And after that last, we have to create or we have to add an event listener. So I will also explain the event listener later. So if you even want to go down or if you even want to go depth into your code, what you can do, is that you can even write down the steps that you will be doing into your function. So what I have done here, that what you need to do to create a function to calculate the age. The first step is getting the input value, and you would always need to remember that whenever you get the input value from the estimate input element, it is always in the format of a string. So that is why we have to convert this into the data object, then we have to add the formula to calculate our age, and then we will actually get our value or our result in milliseconds. Okay. And then we have to convert those milliseconds into the years, months, and days. So that is how we're going to build our solution on our project. So now, I'll just jump into our project. So the first thing is that we have to access the elements. So I'm going to write down access elements. So in accessing the element, first we create the variables here. I'm going to write down lead. So this will be the input. So I'm going to write down date input. And here, I'll write down document because I wanted to access my estimal file with the help of Java Sci. So we're going to use the dom. And as we have learned that to access the dom, the entry point is that you're going to write down document. And after that, Okay, so now the thing that we have learned that, so let's say if I have to write down the estimal here and just do a console log here. So this will be a really quick example just to show you how the dome stuff work. So we're going to simply save this. And now we have to add our JavaScript code here. So I'm going to write down source. This will be main Dot Js. Now, I'll just go back to our browser. We have to go back to a document. We have to go inside the inspect, click on Console. Okay, so right now you can see here it is undefined. Obviously, because when you write down the document, you are directly writing down the entry point here. So now that is why you don't have to write down the estimal here. You can directly write down the body here. Okay? So if I just write down the body here, I can access my body element that we have in our estimal code inside the Javascript. So one thing that I've done mistake while explaining the dome here that we don't have to write down the estimul. Okay? So let's just save this and we will go back here. Alright, so here as you can see here that we are having our body here. So let's say that if I wanted to access my div element here. So if I just write down the div here, this won't work. It will always give us undefined value because our body element has multiple different child elements. Okay? To access the elements that we have inside another element, you can write down children, property here. And in here, if I save this, now, you'll be able to access all the elements that we have inside our body. So we have the div element, and after that, we have the script element. And even if I go further into the div element, we can access the elements that we have inside this div element. Okay, to access the elements here, what we need to do? We need to use the square packets here, and now we have to write down the index value here. So here, if I can show you here that we are having these index value here for our elements. So to access the div element, I will need to write down zero. So we have the zero here. So if I save this will access our dive element. So if I want to go further into the dive element here, I'm going to write down children again. Now you'll be able to see all the elements that we have inside our div element. So this is one of the time taking way to access element into the Javascript. So that is why we don't prefer to use this. So then how can we use this? So how can we access all the elements or whatever the element that I want to use really quickly? It's pretty simple. You can use the methods here. So we have these three different methods that we can use to access the element. So if you want to access the element using a ID value, you can write down get element by ID. But if you want to use the elements by class name, you can simply use this method here. But if you want to access them by their name, you can use this method and you can also see these different methods here. And we have one more method here, which is actually query selector that we can also use to access the element in all of these different ways. So right now, we're going to simply use get element by ID here. So for the date input, we have the ID value, which is DOB. So I'm going to simply write down DOB here. And now, if you just do the console log here, you'll be able to see my input here. Okay. And similarly, we can access our button. So I'm going to write down the button here. So let's just write down calculate And now we have to repeat this process, so we can simply copy this and we have to paste this. And what we need to change here only our ID value. So actually, let me just check this again. This was the calculate. So we can simply copy this from here. And we can simply paste this here. Okay? All right. So now what else do we need? So I think we also need the paragraph here. So we're going to go back and we can just create one more variable that will be the result. And here what I need to do we have to repeat this process, document, get element by ID. Now, you have to write down the name of the ID here. That's it. So we have access all the elements that we will be needing in our function. Okay? So after this, what I have to do I have to create a function. So to create a function, you can create this either in error function format or in the typical function formats, whatever you prefer to use. So to simplify this, I'm going to simplicy this in our traditional format. So I'm going to write down function here. Then we can add the name of our function that would be calculate each. Then we can add our parenthesis and then the curly braces. Okay, so now what we have to do, first of all, I'm going to do the console log here. And here I'll just Consolog date input here. Okay. And one thing that I have to do here is to add event listener. Okay. So what is an event listener? Basically, on our estimal elements, we have the different events. We can consider the events like something is happening with our element. Okay? Something is happening with an element. Okay? So for example, someone clicks on our button. The clicking is a form of event. Okay? Let's say that someone is just hovering over our text or someone is just hovering over what do you call this a button dive element or something like this, or an input, someone is changing the value. Okay? If we change the value in the input, so let's just add one more example here. If we change the value in input, so changing the value is kind of a event. So now, how does the event listener works? Event listener simply means that whenever that particular event happens, obviously you define that whenever that particular event happens, you perform this or you do this, or let's say you call this functier something like this. So let's say that I wanted to add an event listener that whenever I click on my button here. So if I go back here, so whenever I click on this button, I want something to happen. I want to run a function, I want to do a console log or something like this. So how can we do this pretty simple. So to add the event listener onto your element, what you basically do, first of all, you're going to write down the name of your element, whatever it is, it can be the button. It can be input, it can be paragraph or anything. Then you write down add event listener. So this is a method here. So inside this method, you have to define two things. So the first thing would be the events. So you can see these values here. So we have the Abod, we have the animation cancel, we have the blur, we have Cancel, we have Ken play. So you can see all of these different values here. So these are all different kind of events that we have on our estimate elements. Obviously, all of the events won't work on all of the elements. So for the button, let's say, it can have the click event, so we're going to simply write down, click here. So I'm going to simply select the click. So here in the second value or in the second argument, you will actually add a callback function. Okay, so one thing that I had to mention, but I forgot to mention that you need to have the basic understanding of the Javascript Before doing this project. You need to understand what are the variables, what are the data types? How can you assign the value into the inputs? How can you create a function? What are the arrays? What are the objects? How can you access the properties in array or the objects? And how can you create a method in the JavaScript object? And what is the callback function? So you need to have the good understanding of JavaScript before building this project. Okay. So now we need to add the callback function here. But as a quick definition that I can give you on the Callback function, the callbank function simply means that you call a function inside another function. So here, the add event listener is kind of a function. And now we're going to define another function inside this. So you can directly call and function inside this or you can use the already defined function that we have created here, or even I can just do the Consolo here. So right now, let's just do the Consolo here. So I'm going to write down high from button. Perfect. Okay, so now I'll just go back to our browser. Okay, so one problem that you will see here that we actually had to have this console log whenever we click on this button. Okay, but we are already having this. So if I just click on the refresh now, you can see this. We are already having this console log, and we don't want this here. So now what we need to do in our code here that whenever you add anything inside your event listener into your callback function, you need to wrap this into a function. Okay? So now, as we know that to add the function, we have the two different ways, the terena one, the way that we have created the function here, and the second one is that you can use the arrow function. So the arrow function is pretty simple. You can just use the parenthesis here, just use the arrow here, and this is how you wrap the console log into your arrow function. But let's say that if you don't want to use the arrow function, we're going to simply write down the function here, and now we don't have to write this name down here because we are using this as the callback. We need to use the curly braces here, and now this is going to work perfect. So now whenever we click on Calculate, we're going to have our button. So you can see the change in number here. Since we are having the same kind of a value, that is why it's not updating this on the new line. Okay? So it simply works. But let's say that if you directly add the function here, it would work fine. Okay? But if you want to add any expression directly for that, you will need to wrap this into the function. But we want to add direct function into this. So we're going to simply add our function here. So we're going to simply write down, calculate age here. Okay, so we don't have to add the parenthesis here. It will work without the parenthesis. Okay? We don't have to call this. We just have to add the name of our function here. So let's save this and now when we're going to go back, and click on the calculate. We're going to have our input here. Okay? So this is how it is going to work. So we have added our event listener. We have added our function. We have access all the elements that we require. Now what we have to do is the main thing. Now we have to work on our function. So we have to perform our functionality here. Okay. So right now, if I go back here, you can see one thing here that with the input, we are not actually getting the value of the input, since we want to get the value of it. So for that, whenever you access the input element in the Javascript, to access the value, you always write down the property that is dot value here. We're going to add the dot here. Now, you'll be able to access the value here. So if I just save this and if I just go back here and if I just calculate the value here, you can see this we are having the empty string because I haven't added anything into our data input here. So we're going to simply add any value here, so we're going to go back. Let's just add any random value here right now. Click on this value, click on seven, click on Calculate. Now you can see this. We are having our date value here. Okay. So this is how we're going to get the value. So I need to create one more variable here, so that would be date of birth or we can write down DOB, and we will write down new date here. So why we are using the new date here, the reason is that whenever you get the value from estimate input element that we have, it always returns the value in the string format. So if I just do the console log here really quickly, so we're going to have the console log we're going to write down day input dot value. And to check the type of the value, we can simply write down the type of keyword here and it will tell us the data type of our value. So if I just click on calculate, you can see this we are having the string values. Okay. Now what we have to do, we actually have to convert, so I'm going to simply write this down here. We have to convert this string input into day Object. Okay. So if you're not familiar with the date object, you can simply Google this. So the date object is simply the object that we have in the Javascript, that will treat the date values at the date. Okay, the actual date. Right now, they are treating our date value as the string. But whenever we convert this into our date object, then it will be treated as the real date. So the benefit of that is that we can subtract the values, we can subtract the dates from each other. We can add them, so we can do a lot of things with the data object. Just for the reference, I'm going to simply write down here. We're going to go to the Google. What can we do with data object in the java script, and now you'll be able to understand all the benefits it has. You can use these built in methods for marrying and managing that data. So you have a lot of the benefits for that. So we have to do this because we will be subtracting our date of birth with the current date. So what we have to do to convert our string value into our data object is that you're going to simply write down new date constructor function here, and then you're going to put down that value that you want to convert into the date object. So now after if I just do the console log, we're going to have our value into the date format. We're going to go back into the document, click on calculate. Now you can see this we are having the value in the date format. I have to have one more value, which will be the current value. Okay? So we're going to add, let's say, today, and this will be the new date. Now to create the date object of the today's date, you don't have to write down anything in the parenthesis, and this will give you the date object of today's date or the today's value. So if I just do the console log on this, If I just click on calculate now you can see this. We are having our current value and the first value is that whatever we have given here in the input. Okay, so now we have to do one more thing. To calculate the age, actually what we need to do, we actually have to subtract our data of birth with today's value. Okay? So this would be the data of birth and we're going to create one more variable that will be the age. So now I'm going to simply write down today and minus and now we're going to write down DOB. That is the benefit that we have with the data object that you can directly subtract the date values with the data object. So we're going to do the console log here again. So now I first click on calculate, you're going to have this numerical value here. So what is this? So this is actually your value, your date value into the milliseconds. So now since we're getting this value into the milliseconds, I'm going to add this as a command getting edge in milliseconds. Okay. So now what we have to do we have to convert our milliseconds into the years into the months and the days. That is actually a kind of a tricky part. So if you're doing this for the first time, it will give you a trouble. Okay? But if you break this down into the smaller steps, then it will be an easy thing to do. Okay, so the first step would be what I have to do is that I have to change my age into the years, change my age into the years. Okay, so how are you going to do this? Okay? So it's pretty simple. Since we are doing this for the first time, what we can do, we can take or we can look for this solution on the Internet. Okay. So here, I just wanted to add one thing here. I'm building this project in the perspective that you are doing this as a beginner and you don't know a lot of things. And that is actually fine because this is the process. So when you don't know anything and when you want to build a solution on that, what you actually do You actually look for the solution. So I'm going to also teach you how to look for the solution or how to look for something that you don't know. So we're going to look for solution. So the first step is that or the first task is that we have to convert our millisecond value into the ears. So we're going to simply go into the Google. Okay. So now we have two ways. If you want to do this really quickly, you can simply go to the hat JBT and ask him to give you the formula or something to convert the millisecond values into the ear, or you can also look for this onto the Google. Okay. So looking for this onto the Google is actually the traditional way or the way that was used before the AA, but you can also use the AA if you want to. But the idea is that you have to find the solution. You have to know how to find the solution and all this stuff. So I'm going to simply write down how to change milliseconds into the years in JavaScript. Okay, we can write down in the data object. So we can have this one. So we're going to change this into the Es. You can see this. We are actually having a kind of solution that we are expecting or that we are going to build. So we have to convert the millisecond values into the s months, and the dates. So we're going to simply go down there, and now you can find the solution on the multiple on these different resources. So whatever you prefer to use whatever is easy to you, you can simply go in there and you can look for the solution. So we're going to go inside the So flow. We can go into the Github and we can also look for the medium if there is a medium here. I'm not sure. So let's go into the SO flow here. You can see here that on the takeover flow, they actually gave us all the solutions or all the timeline that we required. So if you wanted to convert this into the minutes, you can simply convert this into the miss. If you want to convert this into us, days, months and years, you can simply do this from here. Okay. So what we actually need to do here is pretty simple. Now we're going to simply go back and we're going to try to solve this, let's say, with the solutions or the references that we have built. So I'm going to simply create a variable that is years. Okay. So here would be the age value, and after that, Okay, so as we know that our age value into the milliseconds, so I'm going to ask you that to convert the milliseconds into the seconds, what is the value that we require is actually the thousands? Because on a single second, we have the thousand milliseconds. So we're going to simply write down 1,000 milliseconds here to convert our millisecond value into the seconds. So now, since we also want to convert this into the minutes, so as we know that in a single minute, we have the 60 seconds. So we're going to simply multiply this by 60, and now we have to convert this value into the Rs. So as we know that on a single R, we have 60 minutes. So we're going to simply add 60 here. And now, as we know that on a single day, how many Rs we have, it is actually 24. We're going to simply add the 24 here. And now this would actually convert our H values into the days. So this is going to be the days, not years. So we're going to simply write down the days first. Now with the help of our days values, we can calculate all the things that we required. So now we can also take this with the ChargBT or something. So we can simply verify this whether this is going to work or not. So I'm going to go to the Char JBT to verify this that this is going to work or not. So we're going to simply write down he GPD here. Perfect. So this is how you're going to ask things. I'm going to write down a prompt here that I want to verify that with this code, I will convert milliseconds into days, considering that age is milliseconds. Age is the milliseconds value, something like this. Okay, so this is actually right. So we have done this pretty right. Okay, so one thing that we still have to add into this, but first, we're going to go back here. Let's just give it a console log onto our days. So save this. We're going to go back into document. We're going to click on calculate, and now you can see this. We are having these values into the days. So we simply converted the milliseconds into the days. But you can also see this we are having these decimal values. So now we don't want to have these values. So we would need to use the math dot flow method. So what this actually would do. So this will actually round off our value to the nearest whole number. Okay. So now, I'll just save this and we're going to have our whole value here, not the decimal value. Okay, so this is perfect. So these are the days. Now what we have to do, now we have to convert this into the ears first. So we're going to write down let ears, and this will be, let's say, mate, dot flow, and this will be days, divided by 365. And I think we also need to add some decimal values into this. But let's just go back here. Let's just take this into the stake overflow. Alright, I think this is perfect. So we can also verify this later with the JAGPT. Okay? Now we're going to simply do the consolo of the ears. That is perfect. Let's just go back. And click on calculate here and we are carrying the years. So if your date of birth is in 2010, and then you will be around 14 years. So we have the years value. Now we have to get our month's value. So how are you going to get the month's value? Okay, to convert into the months, first, we have to get the reminder days from the years because we have used the Md dot flow here and it will actually round down the value. That is why we also need to get the days, which are the remaining days here. So how are you going to do this is pretty simple. You're going to write down remaining days something like this, and this will be, let's say, days modulus division then 365. That is how it is going to work. Okay? Now you can simply get the value here. You can write down remaining days. Perfect. I just do the Consolo here. All right, so here, I'm going to also add math dot floor so that we can avoid the decimal value here. So we're going to simply add this value. Okay, so one thing here that on the ES value to add the accurate value, we actually add tecimal 25. Okay? So if I just copy this and if I just put this here, and you can also verify this on Google if you want to. This is actually the accurate time for the solar year. Okay, so after this, what we have to do. So now we're going to simply add the month value here. So that is pretty simple. So we're going to simply write down let months, and now we have to write down math dot flow, I will use the remaining days since we will get our months from the remaining days. And now we have to divide this by 30 decimal. Four, four. Okay. So I'm going to write down 30 here. Okay. So now let me just verify this so that you can see that why we use this value. So we're going to go back to the Che GPT, and now we're going to ask his why we use value as a month value. So basically, we use the thirty.44 as the average month lend because as we know that some of the months we are having 28 days, we are having 31 days. But as we take the average of the year, we are having around 30.44 days. So we're going to go back here into our code. That is perfect. And now we have to do one more thing here. Since we have got our months here, we also have to get our days as well. So how are we going to do this? So I'm going to add this as remaining birth days. Okay. All right, so we can use this name as a variable, but you can change the name here. Whatever you prefer to have something like this. I'm going to use math dot flow here again. And what we have to do we have to repeat the process as we have done with the remaining days and the years. So we actually have to add the remaining days here, and then we have to do the modulus division with 30.44. Okay. So now let me explain this part again. So first of all, we got our age into the milliseconds. Then we converted those milliseconds. Into days. Okay. And after that, what we have done, we have converted the days into years. Okay, so now since we have converted this into the years, we also use the math dot flow method here. And as we know that it actually give us the whole number by rounding down our number. That actually removes the value that we have after the decimal. Okay? So that is why we also have to get the remaining days, you know, after the year values. Okay, so how we do this, we use this by doing the modulus division onto our days. Okay? So this gave us the remaining days. Okay, so I'm going to change this to the total remaining days. And after that, what we do with the help of these remaining days, we get the values for the months. Okay? So what we actually do, convert the value from remaining days to months. Okay, so I'm going to write down total here as well. Okay, so let's just add total here. That would make sense, and this will be the remaining days. That would make more sense. So this is this will be total remaining days and we also have to add R here, total remaining days here. Perfect. Okay? And in the last, what we actually do as we know that since we change our remaining days into the months, that would also left out some of the values into the decimals because of our math dot floor. So you also have to get those remaining days from the months too. Okay? So you're getting the point here. So now what we have to do we have to get our remaining days from our total remaining days. Perfect. Now, I think it would work fine. So we have the remaining days. Now, let's just do the console log on the other values as well. So we need to have the years now, and we also need to have the month months value. Okay, so just save this and just go back here into the browser. We're going to go into the document. Let's just click on Calculate. Okay, I have to rephrase this. Okay, I have to Okay, so I have to run the project again. So we're going to go back here. Click on