If you wanna have your project reviewed in a similar video to this, make sure to send me a link on Twitter at Dead of Simplified, or leave a comment down below with a link to your project.

So let's get started now.

The first thing that we need to do in order to re factor this code is to actually understand what the code is doing for this project.

We're only gonna be taking a look at this single page that you see here on the right, and we're going to be focusing mostly on the Java script that runs this page.

The purpose of this project is that when you fill up your car with gasoline, you then are affecting.

The environment is a negative way with your carbon emissions.

So this project is attempting to have people pay back to the environment to plant trees to counter act the carbon emission that they put into the environment.

So you have put in the amount of gas that you have for example, 12 leaders, Jews of its normal fuel or diesel.

Down here, you get some information about the actual transactions, such as if I change this number, you could see it updates in real time and also if we wanted to enter in a additional sum.

For example, if we only wanted to pay 10 weeks enduring 10 here and we can pay $10 instead and this site is originally in Swedish.

So if some of the words don't actually make too much sense, it's just Google translate, doing its best job to make it English.

So for this project who were going to do is we're going to re factor all the job script code in here in order to make this project easier to reason with an easier to change in the future.

One thing to note is that there are no test for any of the Java script in this project, so it's incredibly important that we fully understand how this page works before we start making our changes.

Let's dive into the actual JavaScript that runs this page to get a better understanding of how the code works.

First thing that happens is they're using normal striped checkout, so they're just removing the default striped button and replacing it with their own straight button.

Then we have a couple variables here for the amount of trees that are going to be planted and whether or not it's using diesel or normal gasoline.

As you can see, this check box here is what determines that value in this job script and then most of the code.

Inside the Java script is a single update.

Total function and dysfunction does a ton of stuff.

It has a bunch of constant variables.

In it.

It updates all the different text boxes on the field.

So, for example, if we change this leader amount, you can see that this leader amounts being updated.

This values being updated, the amount of trees is being updated, costs being updated, and this update total function is doing all of that.

It's calculated all those numbers and updating all the text in the Java script on HTML for us doing all of our different rounding as you can see doing tons of it, and it's also changing the girl for the form so that the correct amount is being applied for the different payments.

Also, we have other function calculate final amount, which is mostly used for calculating the actual cost value that's associated with the amount of gasoline that they're using.

So this is just doing a bunch of different fi checking and such in orderto add up the cost and add that cost number down here to this button.

So, as you see, we removed this optional value, and we change this to be 15.

As you can see, this number up states down here and as we increase it, a continuing updates.

So this function of calculate final amount is really just taking care of that for us.

And then finally, we have a helper function just for adding text to the page.

And then this toggle fuel type buttoned down here is our last function, which is just for that fuel type toggle button that we saw.

It just controls whether or not we're using gasoline or not, as you see it talk.

Was that variable down here for us now that we have a little bit of an understanding of what the code does.

I would talk about the first thing I would change, which is the usage of stripe in this application.

Stripe has a couple ways that you can use it one which is just the default check out, which is what they're using here.

But there's another way, which is a custom check out, which allows you to cook up your own button instead of having to remove the striped button and then add your own button So we can completely remove all of this code to remove the default button and add in the other stripe way of doing things which I already have entire video dedicated on.

So check that out is going to be linked in the cards of above, and I'm not gonna focus any more on what I would do for the strike changes just because I have a whole video already dedicated that the next most important thing I think we can do to clean up this code is to take this update total function and break it out into much smaller pieces.

This function right here does so many different things.

It updates the HTML it does mathematical calculations.

It updates our business logic because it has our business logic in here, such as multipliers that we need to use in order to do certain mathematical calculations.

It also updates are striped checkout, so it touches almost every single part of our application in this one single function, which makes testing this function incredibly difficult, and it makes changing it difficult, since if we change one thing, we may inadvertently destroy something else later on.

In that function which causes it to break.

One of the most important aspects of making clean and easy to use code is to make not only small functions but functions which serve one singular purpose.

You could say that the purpose of this function is to update the total, but it does so much more than just updating the total.

It updates the total cost.

It updates the leader around and updates this Theo to mission amount updates, the tree amount, it changes the html, it changes Java script variables.

It does everything.

And we wanted to only do one thing for example, so we want to break this update total function into a ton of different smaller functions.

We want one function for updating certain text on our HTML page because we never want presentation, which is the age to mill to be mixed with our logic.

We want these to be a separated as possible so that we can always perform our logic separately to make that testing easy and we could perform are updating of the HTML separately.

And that way we can call these update Beth.

It's for either the HTML or the logic, different places.

And we don't have to worry about accidentally updating either the logic or the HTML when we only wanted to update the other one.

Let's look at an example of breaking out part of this function into its own function.

One of the easiest things I can see is this mission multiplier is always going to be a constant variable based on this using gasoline variable, and we can easily break this into its own function because we're probably going to be using this in other places in our application.

So we just wanna have one easy function we can get this from, So let's create a function and what we're gonna call it, get a mission multiplier, and this is not actually going to take any parameters.

And inside of this function, we're just going to use this logic right here.

So we're gonna say if we're using gasoline, then we want to return the gasoline multiplier.

And if we're using diesel or if we're not using gasoline, then we returned the diesel multiplier.

And down here we can change this to say, get a mission.

Multiplier is going to be our mission multiplier right there.

And then these variables right here, these constant these never actually changed.

So we want to pull them out into their own constant variable, which we're gonna use cost for.

And usually when you have a constant variable that is actually a constant, such as just a string of numbers.

Usually you want to have that in all capital letters.

So in our cases would be gasoline underscore multiplier.

And this is the standard for when you want to define a constant variable that never, ever changes and usually represents a mathematical value.

And we could just copy this up into here and do the same thing.

But for diesel and copy that diesel value up into here now we can remove those two different, very post here.

And as you can see, just this little bit of code.

We've abstracted out what it means to get in the mission multiplier actually return here, and we've also abstracted are constant out so that they're not stuck deep inside of our code, and we know what they actually mean.

Another easy thing that we can do to abstract some of the logic from this update.

Total function is to create a function for updating for example, this Theo to a mission value so we can just create another function here would just call it update mission text.

But again, I'm going to take absolutely nothing.

And this admission text is going to come from the leader amount, and it's going to come from the emission multiplier.

So to get the leader amount, all we need to do is get the value of this leader element.

And again, we can abstract this out into a variable since it's always going to be the same.

And we don't wanna have to always have to copy the string over every time we want to get this so we can just say const leader amount input.

That woman's so we know this is the element that represents the leader amount.

We could just say document.

I get owned by D and pass it that I d.

Now in our updated mission text, we can say that we want to let the leader amount equal to leader amount element input dot value and then we want to set the text.

So we'll call that set text function will pass it in this Theo to admission value here.

So we know that that's what we want to update.

And we can say that we want to set the text equal to this leader amount.

And we want to multiply that by our get a mission multiplier.

As you can see, creating this function has already been incredibly useful since we have been able to use it in multiple different places in our application.

Now we can change this coat down here to say updated mission text instead of actually having to call all of this right here We came in copies to fixed over, so it's exactly the same.

And now this updated mission text is going to make it work exactly as it did before.

We can see that by if we go to our application here, our mission text is this Theo to value?

Let's translate this back to English.

Go to value right here.

So if we update this, we can see that our value here is not actually updating.

And we know that since there should be updated that we clearly broke something in our code.

So it was Take a look at our code real quick and oh, I see right away that we didn't change these gasoline multiplier and diesel multiply variables to the constant values that we created.

So let's change those, save it and go back to our application now and now if we update this leader value, we see that our C 02 ton value is being updated, which is perfect.

Another thing that we can change about this application is you notice this update total function is being called when we're updating that, or when we change that leader value on the HTML page.

But nowhere in our JavaScript are we setting up on click listener anything for that?

So where is it actually getting called?

How is this actually being hooked up?

And it's actually being hooked up in the HTML.

If we go and look at the HTML and try to find the element with this I d.

So we just do a search for it.

We'll see that we get this input moment here and there, using the on input listener in the actual HTML in order to call this update Total function.

As you can see through out here, there's a bunch of places where these on submit on click and so on.

Listeners are being used inside the HTML, and this is definitely bad practice.

You should be using these listeners hooking them up in your job a script.

So that way, all of the logic of your application sits in the Java script, and you have no logic in your HTML by having these in the HTML.

It makes it really difficult to find where different parts of your job a script code are being called from.

So this should be removed from here.

We can just copy this all delete this on input completely go back to our JavaScript, and we could just call our leader amount.

Since we distract this into a variable don't ad event listener and we want to do on input we want to call a function, and inside this function we're going to do exactly what was in that code.

In the HTML, we just need to update thes value variables to say this dog value.

Since it's actually using this object inside of the Java script, it works slightly differently than an HTML.

So once we have that done, get the code, format it nice and clean, move this quotation and there we go.

Now we actually have our input listener event being hooked up in our job script, so it's much easier to see how this is actually working.

Now, if we save that and we open up our page over here, we should see that everything works just fine as before.

And it does perfectly as we update this all our values down here being updated, and that's perfect.

So really, the only main thing left to do in this application to clean up the code is to move all these different event listeners into the Java script.

So that's easier to follow what's going on in the Java script and then to split out this update total function to get all of the view related logic.

Such is updating the text out of here and on Lee have the actual business logic in here, so there should be split into multiple different functions that do those different tasks.

So instead of showing you live me doing that, I'm going to show you a side by side comparison of the before, which is what we have here and the after.

So on the left side here I have our current code that we've been working through.

And on the right side, I have the newer, updated version of the code.

As you can see, I have a bunch of striper by the logic here which word is going to completely ignore it?

Because I told you.

Like I said, I have a video that covers this and this code really on.

Lee gets rid of this small little section of code here, so we're going to scroll all the way down.

And as you can see, I pulled every single constant variable in the application out into their own variables.

And I used names that are descriptive to describe these variables.

As you can see in the code here.

If we scroll down a little ways.

Here we have a bunch of different variables, but the descriptions for these variables are in the comments next to the variables.