OK so there's one last place we can use the reset function which is at the very beginning of our code
.
When the page loads the very first time what we need to happen is we need to pick random colors which
you've done then we need to pick one color out of those new random colors which we already have here
.
And then we need to assign a color to each square on the page so we can use our reset function because
that's basically what it does.
And I'm going to clean things up by actually just running a function at the very beginning called init
and that doesn't exist.
And inside of our init function we're going to put everything that needs to run when the page loads
.
So we'll have function init.
And then inside of our net function the first thing that we can do is go ahead and add in our mode button
listeners.
And this is really just to clean things up.
So it's not just floating around in the middle of nowhere.
So it will indent this properly.
So this is our mode buttons event listeners and I'm going to grab this code here.
And what this does is it changes the color of each square which we can just get rid of.
We don't need to do that anymore because we'll use that reset and then it also adds klick listeners
to each square so that when you click we still need all of this logic can clean this up a little bit
.
We're changing the message display we're changing the reset button changing colors.
So I'm just going to copy this up into our init function because we also want that to run at the beginning
when the page loads so well and done this properly as well.
And then the very last thing once we have set up the event handlers here for the buttons mode buttons
and for the squares then we want to just reset the screen which means running the reset function and
what reset will do is it will actually generate our colors so we can just have colors be undefined or
an empty array at the start.
I'll just start with it.
Well we'll give it an empty array first.
And then what we can do is set picked color just to be a variable with no value and save that and to
make things a little bit cleaner.
I'm going to move my selectors down here so that up top we have are three variables that aren't selecting
things.
And then we have variables that are selecting the different elements on the page.
OK.
So again what happens to the very beginning.
We run the init function that's going to run all of this code here.
And that code is going to set up our mode button listeners and it's going to set up our square listeners
and then we run reset which picks colors it picks a random color out of those colors it picks it changes
the text content and all of that.
And we can get rid of this line because we're doing this now inside of the init function which is calling
reset.
So let's make sure that this works before we move on.
We refresh open up the con..
No errors.
And you can see I refresh the page and all of that code is being run in that init function.
And inside of there it's resetting everything that we see.
So our listeners are set up correctly.
We get the correct message.
Let's play again.
Everything's working just fine.
Let's play it easy mode.
There we go.
Let's play again one more time.
Great.
So it works just fine.
There's one more change we could make which is that this function right here and now it is a little
bit long and some people that I've worked with have really strict rules about how long function should
be.
Some people will say if your code is longer than 10 lines you need to split it into its own function
.
So we could do that here.
This could be a function of its own all that it does is set up a mode button listeners so we could do
that here.
Or just writing mode button let's call it set up mode buttons and then we'll declare that function down
here function set up mode buttons.
And inside here we'll just paste that code which will then run an indent properly one time just at the
beginning.
We set up the mode button listeners and we can do the same thing here.
Copy this code and we'll give this one a name of set up square listeners or let's just call it set up
squares like that and then we'll write a function set up.
And I'm noticing I didn't use a capital are you there.
So I need to pay attention to that set up squares here and we'll make sure that our code works the same
way.
So now our init is really nice and clean.
It sets up the mode buttons it sets up the squares and it resets everything that we see.
Let's try to refresh.
Looks like it worked our Square still work just fine.
If we refresh them more our mode buttons still work just fine as well.
So that's all great and it looks like everything is working just fine.
That's as far as we'll take to refactor for now.
But I will show you a few things that we would want to improve in future videos.
Once we learn a bit more about javascript and get more comfortable with it we'll talk about some design
patterns and Design Patterns are basically ways of structuring your code so we can have this code.
It works the same way the same logic to make the same game and 10 different people could write it in
10 different ways and it's not just about what functions we ride or the names of the variables.
It's also about how we structure things in general and the simplest one or one of the most common ones
is called the module design pattern.
And what that means is we can add a bunch of properties into objects so we don't have any variables
like this floating around that are not inside of an object.
We don't have any functions that are just on their own like this on the window object.
Rather we add them to our own object.
So it would look something like this you could have a game object.
And then we might write Game dot and we'll just do one part of it.
Game dot init is a function and we would just copy this code up there and we would do this for every
single function every single property variable and then at the very end we would just run game.
And the reasoning behind this is a little bit more complicated.
The short version is that it helps us keep things structured and organized.
And it also helps avoid namespace collisions which I mentioned earlier in one of the object videos.
So I won't go through this entire refactor.
What we have is good enough.
It works just fine.
But as you continue to grow as a developer and you learn more and more one of the things you'll pay
attention to once you get more comfortable is javascript design patterns and there are books written
on this.
There's essays and blogs and so many videos and there's entire courses actually online just about structuring
your javascript.
So that's not the focus.
And I still really just want to focus on the content the the code the HTML the javascript the C assess
the logic and the structure can come later.
But I just want you to be aware there are other ways of structuring this