Javascript Tick Tack Toe

This is a simple tick tack toe game made with javascript html and css. It also uses vue.js, a javascript library. finished working code here.

Step 1: Add the Html

Add the code above in a file called index.html. Most of it is standard html. v-for loops through arrays that we have yet to create {{ }} is also to display javascript variables. The other v tags are self explanatory. There is also a script for vue.js cdn, and are javascript, and a link for are css.

Step 2: Add the Javascript

In the javascript we create a new Vue instance, we pass this an object which has data and methods, in the data we put the board which is represented by a array with 3 arrays with empty strings. We also put a variable for the player to determine the turn. A boolean to define if the game is going or not and a status which is a string we will yous to display who won. In the methods we have a method for when the board is clicked to check if anyone has one and to reset the game. if you know javascript it should be pretty self explanatory how they work. Also the el is just pointing to the id of the main div.

Step 3: Add Css

just some quick css to make things look a little better, and your done!! hopefully your able to understand what I didn't explain. here it is