Now, again,
over all those previous course sections,
we learned a lot of new things.
We learned a lot about JavaScript.
And therefore, it is now time for another milestone project.
We are going to build the game, Tic, Tac, Toe.
We're going to build a website that runs that game
to be precise.
And for that, we are going to use
what we learned about JavaScript, but not just.
We are also going to write all the HTML
and CSS code for this game.
And as you can see already in the background,
for this game, we are going to make sure that we got,
of course, two players,
because we need two players for that game.
And for those players,
we will be able to assign names
by opening an overlay with an input field for the name.
We can cancel that and close the overlay
without saving the name or we do save the name.
We will have some validation
where we show some error styles and some error message,
if the name is not valid,
if we don't enter a name, to be precise.
And that will all be driven by a JavaScript.
The opening and closing of this overlay here,
but also the form validation
and handling the correct form data.
It's not sent to any server.
Instead, everything here is handled with client-side,
with browser-side JavaScript.
And once we get those names, of course,
the most important part of the site
will be the game itself.
And here we have automatically switching turns
between these two players.
And then we can, well, click on the field
where we want to place our symbol.
Once we did that, it switches to the other player.
And then we either end the game with a draw,
if no player manages to get three in a row,
or if one of the two players
manages to get three in a row, of course,
that player wins and we can then start a new game,
thereafter if you want to.
Now as I said before, all the logic for this game
and for updating what we see on the page,
for evaluating whether we have a winner or not,
all of that will be driven by JavaScript.
And therefore in this course section,
we are going to apply all these things
we learned about JavaScript
in conjunction with what we already know about HTML and CSS.
But the focus definitely is on Java script.
Now as with all those milestone projects,
this section here is generally optional,
as its main goal and its main focus
is that we just apply what we already know,
that we practice what we learned,
and that you see all those concepts in the context
of a more realistic project.
But there also is some new content in this section,
some concepts, which simply make more sense
to be introduced in such a real project.
And to be precise, there are two main new concepts
we are going to dive in.
One of them will be handling the form submission
with JavaScript.
So preventing that default of sending an HTTP request
to a backend, which we don't have yet,
that will be one thing.
And in conjunction with that,
we are also going to learn about a different way
of creating JavaScript objects.
And the other main concept or JavaScript feature
we are going to dive in, which is new,
will be that we use a certain attribute
that we can add to all HTML elements
that will help us with managing and storing data,
which we need in JavaScript, in our HTML code.
Now if you want to jump to those lectures,
attached, you'll find links to these specific lectures
so that you can still skip the rest of this module
if you are not interested in it right now.
But of course, as always, my strong recommendation
is that you do go through these milestone projects.
And this project here is no exception,
since it is a great chance to practice
all the things you learned,
and to again, see multiple important concepts come together.