JavaScript Week 3: How to Build a Tic-Tac-Toe Game

Hi everyone, welcome to the third article about my experiences, lessons, projects, and challenges from this third week. This blog is divided into six sections, so you can focus on the parts that interest you:

1. Things learnt this week.

2. Steps I followed.

3. Problems encountered.

4. How I solved those problems.

5. Projects made this week.

6. Resources used.

1. THINGS LEARNT THIS WEEK:

As of now I learnt event handling , loops and branching statements in Javascript so it was time to implement all those in this week. So this week I built a project that not only tested my new learnings but also gave me an oppurtunity to revisit html and CSS too, so I built a basic UI for this app and tried implementing basic concepts like adding event listeners, variables and functions in it.

And it looked like this.:-

Here I revisited flexbox, sizing and colouring elements too. This week I didn’t learnt anything new but instead I revisited and brushed up old topics instead.

2. STEPS I FOLLOWED

I first started with adding some HTML basic boilerplate and some elements in it. Then styled it using CSS like giving a good colour palette adding and then added some functionality using Javascript. First I created some basic model and focused on getting the right answers using console.log and then finally moved on to giving some output based on the results.

3. PROBLEMS ENCOUNTERED:-

1. I**mplementation problems:- As of now the major problem was dealing with syntax but now I realised there are bigger problems than syntax and that is implementing the things that you have learnt !!.

2. Remembering parts of CSS:- Since I stopped using CSS 2 months ago and focused on learning Javascript now , The result is that I didn’t remembered many parts of the doc.

3. Analyzing Logical errors:- Errors! Errors! Errors and Errors. It even has started to frustrate me a little bit .

4. HOW I SOLVED THOSE PROBLEMS:-

1. Implementation problems:- Sometimes it’s just the real idea and answer just don’t hit at the time. So I would first take a break and then comeback to it. It solved me half of my problems but other times we can just take help from tutorials and documentation.

2. Remembering parts of CSS:- I just revisited some pages such as flexbox cheatsheet which helped me revisit some older topics.

3. Analyzing Logical errors:- For me , a person with short temper, It can be really frustrating , I mostly took break and always came up with some solution at the end, so it worked for me and I guess it would work for you as well too just give yourself some time to think about it.

5. PROJECT MADE:-

1. Tic-Tac-toe Game:- A functional website where we can play tic-tac-toe and get results.

6. RESOURCES:-

1. YOUTUBE

2. MDN JAVASCRIPT DOCUMENTATION

3. STACK OVERFLOW