In today's view, we're gonna be covering the single responsibility principle, which is the first part of the solid design principles and, in my opinion, one of the most important principles you need to understand in order to develop clean and well understood code.

So let's get started now before we get started.

I want to talk about today's video sponsor, which is atlantic dot net hosting.

And this is an incredible hosting company, which is giving you an entire year of hosting completely for free.

If you sign up with the link down the description below and this isn't some cheapo server, this is actually an incredibly powerful server, which is more powerful than the server.

I even host my own website on, so you know that this is gonna be powerful enough to handle any of your needs.

On top of that, they have incredible reliability and redundancy on their servers.

So your Web page is always going to be up and always available, which is a great thing to know.

On top of that, you're gonna get an additional $50 of free credit if you sign up using the code Kyle.

So make sure you check that out, using the link down in the description below.

And with that out of the way, let's jump into the video you came here for.

Welcome back to Web Death simplified.

My name's Kyle, and my job is to simplify the web for you so you can start building your dream project sooner.

So if that sounds interesting, make sure you subscribe to the channel for more videos, just like this one.

Now to get started.

We have some code on the left hand side here for a calorie tracker, and essentially all you do is you input the maximum amount of calories you want for a given day.

It has a function which is going to track your calories by adding on the calories you passed to it to your current calorie count.

And if any point you exceed your maximum calories that you passed in, it's going to log out a message that just says you're Max.

Calories are exceeded.

So as you can see, we set it to a maximum value.

2000.

We logged out, added 500.

We added 1000 that we added 700 so of course that's going to be over our maximum of 2000 and we get our error message saying that we exceeded our maximum calories and this coat.

It works fine.

It's pretty small.

Looks good.

It doesn't seem like designing wrong with it, but it violates the single responsibility principle.

And the idea of the single responsibility principle is that all of your classes, modules, functions, anything inside of your code that can be put into a single part.

For example, this calorie tracker class.

It should have one single responsibility, and that means it should only ever have one reason to change.

But our calorie tracker has two reasons it would ever change.

The first reason and the obvious reasons, is if we change the code for how we track our calories or how we calculate the calories that were tracking, that is going to be needed to change inside of this class and inside this function here.

But if we want to change how we notify the user when they go over right now, all we're doing is logging to the council.

But if we wanted to, for example, email the user instead, we would need to also change this class that means that this has two reasons to change number one if we change how we track our calories and number two if we change how we log our calories.

So what we want to do is actually take the logging off our calories portion out of this class and move that into something else.

And in JavaScript, we have modules that we can use, and generally you're gonna be using modules instead of classes.

So we're gonna move this walking into its own module that has one responsibility, which is logging.

So what's creating new class for that?

What is credit file?

Which could be called blogger dot Js and inside of here we just want to make an export default function.

We just want to say log message and this is going to take in a message.

And then all we want to do is log out that message and now we have a simple, longer class which encapsulates all of the logic of logging are calorie surplus, and we can actually just import that so we can say import log a message from logar dot Js.

Make sure you put the dot slash In the beginning There we go.

And now we could just call that down.

Here, we can say log message.

We just want to pass it in the message.

We're walking inside this function, and now if we save it, you can see everything over here is working exactly the same.

And we can even change this.

And we can just say Max, calories, exceeded.

Add a little bit of stuff of the end just so you know that this new code is being executed and now we're following the single responsibility principle.

As you can see, Calorie tracker has one reason to change.

The only reason we change is if we change how we're tracking our calories, whether it's how we're adding to the current calories or checking the max calories.

If any of that logic changes, we change our calorie tracker.

Then we have this longer here, and the only reason we ever change this Logar is if we change how we're blogging.

For example, instead of doing a console log, we could just email the user instead and this would change inside of our log in class here, this logging module and now each one of our sections of code has one single reason to change, and this is great.

It makes your code so much easier to follow and to read.

And this is something that a lot of people, especially people just learning programming or even intermediate developers always mess up on.

I know I'm super guilty of making the mistake of cramming so many things in tow.

One class, one vial, one module, one function, and it just becomes huge.

It does so many different things, and in reality I need to break these apart into smaller functions that all do individual things.

That way, when I need to change something, I only have to change one thing.

For example, if I want to change the calorie tracker, I do it in one single place.

I want to change the longer I do it in one single place.

I don't have to worry about going and changing something every time I need to make a change to something else.

It shouldn't have to be affected if it's not directly related to the change.

For example, how I tell the user about going over their calorie surplus has nothing to do with how track calories, so I need to separate those from each other, and that's all there is to single responsibility principle.

If you like this video, make sure to check on my other videos linked over here and let me know if you want me to cover the other letters of the solid design principles in future videos.

Thank you very much for watching and have a good day.