Journey of Building a Tic Tac Toe Game: Unveiling the Lessons Learned

As a passionate developer, there's no greater feeling than completing a project that combines creativity, logic, and technical skills. Recently, I embarked on an exciting journey to create a classic game that we all know and love Tic Tac Toe. Armed with HTML, CSS, and JavaScript, I delved into the world of game development, and the experience was nothing short of enlightening. Let's explore the lessons I learned along the way.

1. The Power of Structure: HTML

HTML is the backbone of web development, and building a Tic Tac Toe game reinforced the importance of structuring content effectively. Dividing the game board into a grid, marking each cell with an ID, and embedding it within a container helped organize the layout. Learning to use semantic elements, such as <div> helped improve my understanding of the <div> tag. Although the HTML is very simple n all that I had to do is create two divs and link the stylesheet and the js logic. I feel it helped me sharpen my skills to some degree.

2. Styling with Finesse: CSS

While a functional game is crucial, aesthetics play a significant role in user experience. CSS was my tool of choice to breathe life into the game board. Grasping the concept of CSS Flexbox was pivotal, as it allowed me to create a responsive and visually appealing grid. Applying CSS animations for highlighting winning combinations and hover effects on cells added a touch of sophistication.

learning the use of .cross: before && .cross: after in order to transform and form an X on the board was something new for me. I have grasped the basics of display flex in the process at some basic level.

The ::before and ::after pseudo-elements are used to create additional content before and after the content of the element with the class .cross.

.cross:before,
.cross:after {
  content: "";
  position: absolute;
  background-color: red;
}

In this part of the code, the .cross:before and .cross:after selectors are used to target the pseudo-elements that will be added before and after the .cross element. The content property is set to an empty string (""), which ensures that these pseudo-elements have some content even if it's invisible.

The position: absolute; property is used to position the pseudo-elements absolutely within the .cross element's container. This allows us to place these pseudo-elements wherever we want within the .cross element.

3. Interactive Magic: JavaScript

JavaScript was where the real magic happened. This was where I implemented the game's logic and interactivity. The concept of event listeners was pivotal; it enabled me to capture user clicks and respond accordingly. Implementing the game's win-checking algorithm was a significant milestone. The thrill of writing JavaScript functions to detect victories along rows, columns, and diagonals was like solving a puzzle. This particular project introduced me to arrow functions and how it is used.

const functionName = (parameters) => {
  // function body
};
//an example of arrow function
const add = (a, b) => a + b;
//has shorter syntax
//helps us refer to something like how this keyword is used in java

Arrow functions are a concise way to write functions in JavaScript. They were introduced in ECMAScript 6 (ES6) and provide a more compact syntax compared to traditional function expressions. Arrow functions are often used for short, simple functions, and they have some unique characteristics compared to regular functions.

4. Game State Management: Arrays

One of the valuable lessons was understanding how arrays could be utilized to manage the game state. I created an array to represent the game board, with each cell assigned a value to indicate its status (empty, X, or O). This array acted as a snapshot of the current game state, making it easier to validate moves, track the winner, and determine if the game ended in a draw.

5. Debugging: Patience and Perseverance

Like any programming endeavor, debugging became my constant companion. I learned that small errors could lead to unexpected behavior. The developer console became my ally, helping me track down issues, log variables, and test my code's flow. Every bug fixed was a step forward in refining my skills and developing a deeper understanding of the code's intricacies.

7. Continuous Learning: Resources and Community

Throughout this project, I realized that the journey of learning is ongoing. Online resources, forums, and communities were invaluable sources of information and inspiration. Engaging with fellow developers not only solved roadblocks but also exposed me to different perspectives and approaches.

8. Code Refactoring: Optimizing for the Future

As I progressed, I found opportunities to refactor my code for improved efficiency and maintainability. Creating modular functions, separating concerns, and documenting my code became essential practices. This not only made my codebase cleaner but also laid the foundation for potential future enhancements.

9. Pride in Completion: Celebrating Achievements

Completing the Tic Tac Toe game marked a significant achievement in my coding journey. Celebrating small victories and taking pride in my work was a lesson in acknowledging personal growth. It reinforced the idea that every project, regardless of its scale, contributes to my development as a skilled developer.

10. Passion and Perseverance: The Driving Forces

Above all, this project rekindled my passion for coding. The challenges, the breakthroughs, and the end result all reminded me why I fell in love with programming in the first place. The journey taught me that perseverance in the face of challenges can lead to remarkable outcomes.

In conclusion, building a Tic Tac Toe game with HTML, CSS, and JavaScript was an illuminating experience. It encapsulated lessons in structuring, styling, interactivity, debugging, and continuous learning. Beyond the lines of code, this journey was a testament to the power of passion, determination, and endless possibilities in the development world.