So let's now add the logic
that we need to this page,
and we get different pieces of logic
that need to be added.
For example, we need to make our game configurable.
That means that we should be able
to click these edit buttons
and choose player names.
We should be able to click the Start New Game button
and then only show this game board
if we did click this button,
and this button, on the other hand,
should only be clickable if we did choose player names,
so if we don't have these placeholders anymore.
And, of course, we then also need the entire logic
for making these game board items clickable,
and we need a way of finding out who won.
So we also need some logic for checking
if we have three in a row horizontally,
vertically or diagonally.
Now, let's get there step by step,
and let's start with the configuration
with making these buttons here clickable.
For that, in index.html,
I wanna select these Edit buttons here
and we have various way
of making them selectable in JavaScript.
The easiest way is to just add an id
to the first button and name it edit-player-1-btn maybe.
The name is up to you, of course.
And add a similar id to the other button
for player-2 but name it edit-player-2-btn.
Now we can add JavaScript files
and select these buttons by id,
and then add an event listener to them.
Add event listeners where we listen
for the click event.
Now, for that, I will add a brand new folder
in this project, the scripts folder,
which will hold my script files
because I plan on using multiple script files,
not just one large file with all the logic
but instead, different files
with different responsibilities
to keep our code manageable
and structure it such that it's easy to work with.
And for this,
I actually wanna have three script files in here.
I'll name the first one app.js,
and this should be the file
which executes first, which initializes a bunch of things.
For example, I wanna use this app.js file
to reach out to different HTML elements,
and store these elements or pointers at these elements
in different JavaScript variables or constants.
And then in the other JavaScript files which we'll add,
I wanna use these constants and variables,
which are initialized here in app.js
so that this is our main entry file
but not the file where we have the actual logic.
Instead for this, I'll add a config.js file,
which will be responsible for all the logic related
to configuring players.
So this is the file that should open
and close the overlay.
This is the file that should take the user input,
validate it and store it.
And then I wanna add a game.js file,
which you guessed it will be responsible
for the game logic.
Now, let's start with app.js
and then let's start with selecting these buttons
to which we wanna add event listeners, click listeners.
Now, for that, of course,
first of all, we should make sure that these script files
are loaded, and for that we need to add special elements
in our index.html file.
And that would be the script elements.
I'm using separate JavaScript files, by the way,
instead of just putting my JavaScript code right
into this HTML file
because we will write quite a bit of JavaScript code,
and if we would put that all into this HTML file,
this file would get very cluttered with JavaScript,
and as you learned,
you should try to keep your code files clean
and maintainable and relatively lean.
So the HTML file should really focus on HTML
and not contain a lot of JavaScript code, for example.
That's why instead, I'll add these script elements here
in the head section,
and it is important that you add opening
and closing tags here.
Unlike the link element,
the script element is not self-closing.
It's not a void element.
And then here, I'll add source, src,
to link to a different script file.
And that's important it's src, not href for script files.
And here we then link to scripts/app.js.
I also wanna link to my config and game.js files.
And actually, what I'll do
is I'll add them before the app.js file gets executed.
So I'll then first add config.js
and then game.js.
And why am I doing that?
Because as I said, in app.js,
I wanna initialize all my constants,
and I wanna kick off the game
but in order to do that,
I, first of all, need to define all my configuration
and game logic so that I can then refer
to that already-defined game and config logic in app.js
as a last step.
And that's why config and game.js need
to be defined first
so that I can use the logic defined in there
in app.js to then start everything.
You'll see it come together once we start writing the code.
Now, very important, we should add the defer attribute
to all these scripts
to ensure that they are only executed
once the entire HTML content of this page
has been loaded and parsed,
otherwise interacting with the DOM won't be possible here.
And now with that, we can start writing code.
And even though it will execute last,
I will start with app.js
because here I now wanna get access to these edit buttons.
For this, I'll add a new constant
because I don't plan on reassigning a new value
to this variable here,
hence I'll make it a constant.
And name it editPlayer1BtnElement.
This name is up to you
but it should describe what will be stored in here
and here, I plan on storing a pointer
at this button that allows us to edit player one.
Hence, this sounds like a fitting constant name.
And now we gave that button an id,
the id of edit-player-1-btn with dashes,
and hence, I wanna select by that ID,
so I'll get access to this button
by using the document object,
which exists globally.
And then using getElementById
and using that ID to get hold of that button.
And now we can repeat that for the button for player two.
Name that constant differently, of course.
Name it editPlayer2BtnElement.
And also use the different ID here
because in index.html, of course,
we also have the different ID here.
Now we got hold of these buttons,
now the goal is to connect these buttons
with click listeners or to add click listeners
to these buttons.
To then open the overlay,
which we saw before on the screen
whenever we click one of these edit buttons.
Now, for that, of course,
we can use the editPlayer1BtnElement here
and add an EventListener.
That's how we learned to add event listeners before.
And there are all kinds of listeners we can add.
Here, I wanna listen for standard clicks.
So as a string and as a first parameter value,
I pass click here.
Now the second value,
which we have to pass to addEventListener
should be a pointer at the function
that should be executed.
And that's now the interesting part.
This function doesn't exist yet.
We could define it here in this app.js file
but by idea is that I don't do this here
but that we instead do this in config.js
because that is the file that should hold all the logic
related to configuring our players.
That's why I now will add a function in config.js
with the function keyword,
which I will name openPlayerConfig.
Like this.
And that's the function I wanna use in app.js.
Now, the great thing is that with JavaScript in the browser,
you can define a function or a constant
in file A and then use it in file B.
That works.
That is something you can do in JavaScript
in the browser.
What's important though is the order.
You, first of all, have to execute the file
where you define something.
Let's say a function
and then in a second step,
you execute the file where you use that thing.
So if in app.js I wanna use the function defined
in config.js, the openPlayerConfig function,
then I, first of all, have to execute config.js
so that the function is defined globally
in this loaded page
and then I execute app.js in a second step
so that I can use the globally defined function there.
And that's what we're doing here
by loading config.js first.
Now, in config.js, I define this function,
which at the moment doesn't do anything.
In app.js, we can now add a pointer
at this function as a second parameter value.
Very important, don't add parentheses here.
Instead really just use the function name
because we don't wanna execute it immediately
when this file of code gets parsed.
Instead, when this line of code gets parsed,
the browser should just know
which function to execute
when such a click on that button occurs.
And then the browser will execute the function for us
when that is the case.
So therefore, we then just point at the function here
so that the browser knows what to execute
when that button is clicked.
And I'll add that exact same function
to my editPlayer2BtnElement here.
Now, we'll then add some logic inside of the function
that allows us to find out which button was clicked.
But that's a start now
and that's how we can add these click listeners.
Now let's continue
with adding the logic inside of openPlayerConfig.