In this project, I used JavaScript, CSS, and HTML to construct a desktop-browser-based Tic-Tac-Toe game. The goal was to demonstrate what I had previously learned of JavaScript Factory Function, IIFE Module, Scope, and Closure. Details on the project are available here.
Project Instructions:
-
Initiate a game board using an array.
-
Store players within objects.
-
Use modules/factory functions for code encapsulation.
-
Integrate code logically.
-
Render X and O from game board to HTML.
-
Include a function to determine game status (winner or tie).
-
Implement start/reset button, player name input, and winner notification spot.
Optional (Not implemented): Create an AI for random moves, and then make it unbeatable.
I've employed a combination of newly acquired and foundational skills throughout this project. Here's a breakdown:
Problem Solving
- Recognizing problems
- Strategic planning
- Employing a divide and conquer approach
Error Correction
- Utilizing Chrome Developer Tools
- Conducting web searches for solutions
Clean Code Writing
- Maintaining consistent indentation
- Adopting descriptive and consistent naming conventions
- Adhering to principles like YAGNI, DRY, and KISS
HTML
- Crafting a basic form inside a modal
- Implementing client-side form validations
CSS
- (New) Employing
calc() - (New) Implementing
max() - (New) Styling SVGs to fit within grid cells
- Designing layouts using both Grid and Flexbox
- Applying a CSS reset
- Integrating custom fonts
- Experimenting with font-related properties
- Implementing parent-child combinators
- Employing pseudo selectors
- Utilizing attribute selectors
- Prioritizing relative units
- Defining and using custom properties
- Building modals
Javascript
- (New) Implementing Factory Functions
- (New) Leveraging IIFE Modals
- (New) Differentiating between
e.currentTargetande.target - (New) Prototyping in the console first
- Implementing
e.preventDefault() - Making use of the ternary operator
- Utilizing objects
- Distinguishing between function declarations and expressions
- Grasping core concepts such as variables, numbers, operators, and various data types
- Understanding conditionals, methods, loops, and functions
DOM Manipulation
- (New) Implementing
dataset - (New) Transferring data from HTML input to display
- Making use of template literals for DOM access
- Utilizing
classList.add - Modifying styles and HTML content
- Incorporating event listeners
Emmet
- Using abbreviations for HTML coding
- Employing shortcut keys
SVG
- Incorporating SVG imagery
Javascript related:
-
'What are YAGNI, DRY and KISS principles in software development?' by educative.io;
-
'Alternative to if / else and switch: object literals in JavaScript' by Abdessamad Bensaad
-
'Essential JavaScript: Mastering Immediately-invoked Function Expressions' by Chandra Gundamaraju
-
'JavaScript forEach() – JS Array For Each Loop Example' by freeCodeCamp
-
'How You Can Use HTML5 Custom Data Attributes and Why' by sitepoint
-
' Disable div on click & ways to add/remove eventListener' chatGPT-4(answered from my question)
-
'How to ensure an event listener is only fired once in JavaScript' by educative
-
'Refresh the Page in JavaScript – JS Reload Window Tutorial' by freeCodeCamp
-
'min(), max(), and clamp(): three logical CSS functions to use today' by web.dev
-
'How to transfer form input data like Prompt in JS' by chatGPT-4(answered from my question)
-
'How to select a element using data attribute in JavaScript' by Reactgo
CSS related: