https://github.com/alvisonhunterarnuero/tik-tak-tok-game

Repositorio de los ejemplos y ejercicios para la semana 5 y 6 de la mentoria de CCL. Juego del Ta Te Ti
https://github.com/alvisonhunterarnuero/tik-tak-tok-game

css3 css3-grid ecmascript6 html-css-javascript html5 javascript tic-tac-toe-javascript tictactoe tictactoe-game

Last synced: 8 months ago
JSON representation

Repositorio de los ejemplos y ejercicios para la semana 5 y 6 de la mentoria de CCL. Juego del Ta Te Ti

• Host: GitHub
• URL: https://github.com/alvisonhunterarnuero/tik-tak-tok-game
• Owner: AlvisonHunterArnuero
• Created: 2024-05-22T04:27:21.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-10-19T04:47:53.000Z (about 1 year ago)
• Last Synced: 2025-01-14T01:13:46.466Z (10 months ago)
• Topics: css3, css3-grid, ecmascript6, html-css-javascript, html5, javascript, tic-tac-toe-javascript, tictactoe, tictactoe-game
• Language: JavaScript
• Homepage:
• Size: 254 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Just Another Tic Tac Toe Game

![image](https://github.com/user-attachments/assets/81be9708-d048-4fc8-add3-6b1812e13c37)

Created by **Alvison Hunter** for mentoring and educational purposes only.


**Senior Frontend Developer** at CodeCrafters Labs - October, 18th, 2024

## About this game

This repository contains a simple implementation of the classic Tic Tac Toe game using HTML, CSS, and JavaScript. The game allows two players to play against each other on a 3x3 grid. The project demonstrates basic web development skills, including DOM manipulation, event handling, and dynamic content updates.

## Features

- **Two-player game:** Players take turns to place their mark (X or O) on the grid.

- **Winner detection:** The game automatically detects and announces the winner or if the game is a draw.

- **Dynamic UI:** The current year is dynamically displayed in the footer, and the game board updates in real-time based on player actions.

## Tools and Technologies Used

- **HTML5:** Provides the structure of the game board and other elements.

- **CSS3:** Styles the game board, cells, and other components to create an attractive and responsive design.

- **JavaScript:** Implements the game logic, including player turns, winner detection, and dynamic UI updates.

## Project Structure

- **index.html:** The main HTML file containing the structure of the game.

- **styles.css:** The CSS file that styles the game board and other elements.

- **index.js:** The JavaScript file that contains the game logic and DOM manipulation.

- **assets:** The folder that contains the game assets such as images, media files and others.

## Getting Started

To get a local copy of the project up and running, follow these simple steps:

1. **Clone the repository:**

    ```bash

    git clone git@github.com:AlvisonHunterArnuero/tik-tak-tok-game.git

    ```

2. **Open the project folder:**

    ```bash

    cd tic-tac-toe-game

    ```

3. **Open `index.html` in your web browser:**

    You can open the `index.html` file directly in your web browser to start playing the game. Additionally, you can also add your local live server to run this file.

## Usage

- Click on a cell in the grid to make a move.

- The game will display the current player's mark (X or O) in the clicked cell.

- The game will automatically detect and announce the winner or if the game is a draw.

- The current year is displayed in the footer.

## Example

```html

    

    

    

    Tic Tac Toe Game

    

    


        
Welcome to the Tic Tac Toe Game

        


        


    


    

        
© 

            CodeCrafters Labs. All Rights Reserved. |

            Built Entirely in JavaScript for Educational Purposes.

        

    

    


```

## License

This project is licensed under the MIT License. See the `LICENSE` file for details.

---