Now that's it for this course section.
We implemented a complete browser-based game
with JavaScript, HTML, and CSS.
So, with all these technologies and features,
we learned about over this entire course up to this point.
This is a game which really only runs in the browser.
We need no complex server for that.
It's just a browser-based game,
with browser-based JavaScript.
And in this module, as mentioned,
we used all these core concepts you learned about
throughout this course.
We're using variables and constants,
different kinds of values, we are interacting with the DOM,
we are selecting elements, also in different ways
with getElementByID and query selector.
And also with some DOM drilling, some DOM traversal,
by using firstElementChild, and so on.
We are registering EventListeners,
and you did also learn how you can listen
to form submissions and how you can handle
such forms submissions
that you can call event.preventDefault
to prevent that default behavior,
and then have your own browser-based logic
for extracting the entered data.
Here, we're doing that with help
of that FormData object blueprint
about which we also learned.
Now then, we're doing some validation here
and we're using an "if" check,
some conditional code to also handle the case
that incorrect input was provided,
in which case we then manipulate the DOM
to output the error there and to change some styles.
Otherwise, if everything works,
we're managing some internal data here in JavaScript,
which we then need to run our game successfully.
And here we find various JavaScript concepts
like functions, calling each other, more DOM manipulation,
also with inner HTML and for loops,
including nested for loops here
to go through a nested array,
something we haven't used before,
but something which can also be very useful in situations
like we have it here in this game.
We also don't just see these kinds of for loops here,
but in AppJS, I also showed you a for off loop here
to go through all the fields on our game field
and add event listeners to them,
though I then also showed you an alternative approach
where we instead add the click listener
to the parent element of these game fields
to the order list itself,
since that will then also still trigger
if one of these game fields is clicked.
Now, we then had our game logic here,
again using various concepts, a little bit of math
and writing our first basic algorithms here
to then implement this tic-tac-toe game
in a way that makes sense.
And with that, I hope you, again,
had a good chance of practicing what you learned.
If some of these concepts are still not entirely clear,
I do recommend that you go back to the specific lectures
where they were introduced,
maybe also go through this entire section again,
this time trying to build this game on your own first.
Now that you saw the complete solution once,
try rebuilding it without looking at that solution again,
and then maybe go through the solution again,
to fix the parts where you might still be struggling.
This should be a good exercise,
and hopefully this entire section was a good exercise.
And with that, we're now ready to leave the front-end,
the browser side, and also dive into server-side code
and see why we need custom service at code
in some situations
and how we can write our own server-side code.