https://github.com/0xabdulkhaliq/tic-tac-toe

Digitalized Tic Tac Toe game, Built during partial completion of Odin Project Curriculam
https://github.com/0xabdulkhaliq/tic-tac-toe

css css3 html html5 javascript theodinproject tic-tac-toe

Last synced: 6 months ago
JSON representation

Digitalized Tic Tac Toe game, Built during partial completion of Odin Project Curriculam

• Host: GitHub
• URL: https://github.com/0xabdulkhaliq/tic-tac-toe
• Owner: 0xabdulkhaliq
• License: mit
• Created: 2023-02-11T03:47:09.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-02-15T01:30:26.000Z (over 2 years ago)
• Last Synced: 2024-08-14T03:38:17.045Z (about 1 year ago)
• Topics: css, css3, html, html5, javascript, theodinproject, tic-tac-toe
• Language: CSS
• Homepage: https://0xabdulkhalid.github.io/tic-tac-toe/
• Size: 689 KB
• Stars: 18
• Watchers: 1
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          








## **Description**

- Built as part of The Odin Project, to play the game [click here](https://0xabdulkhaliq.github.io/tic-tac-toe/)

- The purpose of the project was to use the Module pattern and the Factory Pattern to build and design objects to incorporate game logic

- The Game offers a Player vs Player game mode

## **Installation**

> **Note** 

>> A live deployment of [`Tic-tac-toe`](https://0xabdulkhaliq.github.io/tic-tac-toe/) is available on GitHub pages, check it out without need of installation

For those that would like to run the application and/or edit its source code on their local computer, follow the steps below:

1. Clone the repository with `git clone https://github.com/0xabdulkhaliq/tic-tac-toe` or download it as a [.zip](https://github.com/0xabdulkhaliq/tic-tac-toe/archive/refs/heads/main.zip) file and extract it.

2. Navigate to where the repository is saved on your local machine and open up its `index.html` file on your preferred web browser.




## **Preview**

| Desktop        |

| :-------------: |

|     |

| Tablet | Mobile |

| :-----: | :-----: |

|  |  |




## **Outcome**

* Game logic is built with **Module pattern** and **Factory Functions**

* Efficiently used **data** attributes to manipulate dom elements

* Well optimized **UI** and **UX**

* Site was built responsive via **Mobile first workflow**

* **Cross tested** on Firefox and Chromium based browsers




## **What I learned**

* Usage of **data-** attribute which provides the ability to embed custom data on all elements which will be used to further manipulate game logic

* Usage of **module pattern** to improve the maintainability and reusability of the code by creating public and private access levels

* Learned the Logic behind the Tic tac toe game

* A lot of minor things




## **Built With**

- ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)   

- ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)   

- ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)




## **Tools Used**

- ![Shell Script](https://img.shields.io/badge/Bash-%23121011.svg?style=for-the-badge&logo=gnu-bash&logoColor=white)   

- ![Google](https://img.shields.io/badge/google-4285F4?style=for-the-badge&logo=google&logoColor=white) 

- ![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge&logo=visual-studio-code&logoColor=white)   




## **Contributing**

- Feel free to submit an issue should a bug be found using the application

- One is also welcome to make a pull request should they seek to make a major change or introduce a new feature.




## **License**

- [MIT License](https://github.com/0xabdulkhaliq/tic-tac-toe/blob/main/LICENSE)

- Copyright **©** 2023 - [0xabdulkhaliq](https://github.com/0xabdulkhaliq/)




## Let's Connect 👋