Now let's get started
working on that milestone project then.
And before that, I first of all,
wanna plan the project.
I wanna have a look at the different features we'll need
and what will be important for those features.
And we can simply go through this finished project
from top to bottom and I'll not talk about
all the different HTML elements we'll need,
but instead about the main features
that we can see on this page.
And here we can see that it will all start
with that configuration area,
where we see the two players
and where we can configure the names of those players.
And we do that with help of an input field
inside of a form.
And that form is loaded inside a module overlay.
So such a overlay window, so to say.
And therefore, we will have write all the HTML,
CSS code, and javascript code for that overlay.
And then we also have to validate the user input
and show some feedback if an empty form is submitted,
for example.
And of course, we wanna update the player names
and save the submitted input if the input is valid.
So that's the first major feature we can see on this page.
The next feature is that once we are happy with our players,
we have that "Start Game" button.
And here we will need to make sure that this button
clears the existing game board,
if we had a running game already,
and or the "Game Over" message we might be seeing,
and that we make sure that the game overall,
this game field, is initialized correctly.
Then of course, we have to implement
the turn-based gameplay feature.
We have to make sure that the turn
automatically switches between these two players
so that we alternate between the two players
and their symbols.
And then, related to that, we have to make sure
that we make these fields in the game field selectable,
that they can be clicked,
that we then display the player's symbol
once a field was clicked,
and that we also internally keep track
of which fields belong to which player,
and that we then, after every turn, also check
whether we maybe we have a winner or maybe a draw,
if all the fields have been exhausted and clicked.
And ultimately after all of that,
we wanna make sure that we show a "Game Over" window
where we either inform the players about a draw
or we highlight the potential winner of that game.
These are the main features we have here
and these are the features we are going to work on
throughout this course section.
Now you already saw how the finished project
should look and feel like.
And of course, as always,
feel free to get started on your own.
Try to build and implement
as many of these features as you can.
And then of course, make sure you follow along with me
so that we can build this together using my approach
and we can then finish this project together.