{"id":18927830,"url":"https://github.com/0xabdulkhaliq/tic-tac-toe","last_synced_at":"2025-04-15T13:34:24.268Z","repository":{"id":86598925,"uuid":"600298246","full_name":"0xabdulkhaliq/tic-tac-toe","owner":"0xabdulkhaliq","description":"Digitalized Tic Tac Toe game, Built during partial completion of Odin Project Curriculam","archived":false,"fork":false,"pushed_at":"2023-02-15T01:30:26.000Z","size":706,"stargazers_count":18,"open_issues_count":0,"forks_count":3,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-08-14T03:38:17.045Z","etag":null,"topics":["css","css3","html","html5","javascript","theodinproject","tic-tac-toe"],"latest_commit_sha":null,"homepage":"https://0xabdulkhalid.github.io/tic-tac-toe/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/0xabdulkhaliq.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-11T03:47:09.000Z","updated_at":"2024-08-14T03:38:22.587Z","dependencies_parsed_at":null,"dependency_job_id":"0773e726-d273-4720-80d7-71675a6afe60","html_url":"https://github.com/0xabdulkhaliq/tic-tac-toe","commit_stats":null,"previous_names":["0xabdulkhaliq/tic-tac-toe"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xabdulkhaliq%2Ftic-tac-toe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xabdulkhaliq%2Ftic-tac-toe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xabdulkhaliq%2Ftic-tac-toe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/0xabdulkhaliq%2Ftic-tac-toe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/0xabdulkhaliq","download_url":"https://codeload.github.com/0xabdulkhaliq/tic-tac-toe/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223674190,"owners_count":17183848,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css3","html","html5","javascript","theodinproject","tic-tac-toe"],"created_at":"2024-11-08T11:20:59.802Z","updated_at":"2024-11-08T11:21:00.368Z","avatar_url":"https://github.com/0xabdulkhaliq.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=center\u003e\n\u003cimg src='./design/cover.webp' alt='project-cover'\u003e\n\u003c/div\u003e\n\u003chr\u003e\n\n## **Description**\n\n- Built as part of The Odin Project, to play the game [click here](https://0xabdulkhaliq.github.io/tic-tac-toe/)\n- The purpose of the project was to use the Module pattern and the Factory Pattern to build and design objects to incorporate game logic\n- The Game offers a Player vs Player game mode\n\n## **Installation**\n\n\u003e **Note** \n\u003e\u003e 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\n\nFor those that would like to run the application and/or edit its source code on their local computer, follow the steps below:\n\n1. 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.\n2. Navigate to where the repository is saved on your local machine and open up its `index.html` file on your preferred web browser.\n\n\u003cbr\u003e\n\n## **Preview**\n\n| Desktop        |\n| :-------------: |\n| \u003cimg src='./design/desktop-preview.png' alt='desktop preview'\u003e    |\n\n| Tablet | Mobile |\n| :-----: | :-----: |\n| \u003cimg src='./design/tablet-preview.png' width='580px' alt='tablet preview'\u003e | \u003cimg src='./design/mobile-preview.png' alt='mobile preview'\u003e |\n\n\u003cbr\u003e\n\n## **Outcome**\n\n* Game logic is built with **Module pattern** and **Factory Functions**\n* Efficiently used **data** attributes to manipulate dom elements\n* Well optimized **UI** and **UX**\n* Site was built responsive via **Mobile first workflow**\n* **Cross tested** on Firefox and Chromium based browsers\n\n\u003cbr\u003e\n\n## **What I learned**\n\n* Usage of **data-** attribute which provides the ability to embed custom data on all elements which will be used to further manipulate game logic\n* Usage of **module pattern** to improve the maintainability and reusability of the code by creating public and private access levels\n* Learned the Logic behind the Tic tac toe game\n* A lot of minor things\n\n\u003cbr\u003e\n\n## **Built With**\n\n- ![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge\u0026logo=html5\u0026logoColor=white)   \n- ![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge\u0026logo=css3\u0026logoColor=white)   \n- ![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge\u0026logo=javascript\u0026logoColor=%23F7DF1E)\n\n\n\u003cbr\u003e\n\n## **Tools Used**\n\n- ![Shell Script](https://img.shields.io/badge/Bash-%23121011.svg?style=for-the-badge\u0026logo=gnu-bash\u0026logoColor=white)   \n- ![Google](https://img.shields.io/badge/google-4285F4?style=for-the-badge\u0026logo=google\u0026logoColor=white) \n- ![Visual Studio Code](https://img.shields.io/badge/Visual%20Studio%20Code-0078d7.svg?style=for-the-badge\u0026logo=visual-studio-code\u0026logoColor=white)   \n\n\u003cbr\u003e\n\n## **Contributing**\n\n- Feel free to submit an issue should a bug be found using the application\n- One is also welcome to make a pull request should they seek to make a major change or introduce a new feature.\n\n\u003cbr\u003e\n\n## **License**\n\n- [MIT License](https://github.com/0xabdulkhaliq/tic-tac-toe/blob/main/LICENSE)\n- Copyright **©** 2023 - [0xabdulkhaliq](https://github.com/0xabdulkhaliq/)\n\n\u003cbr\u003e\n\n## Let's Connect 👋\n\n\u003cdiv align=center\u003e\n\n  \u003ca href=\"https://linkedin.com/in/0xabdulkhaliq\" \u003e\n    \u003cimg src=\"https://img.shields.io/badge/linkedin%20Profile-%2300acee.svg?color=405DE6\u0026style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\" alt=\"Linkedin Profile\"\u003e\n  \u003c/a\u003e\u0026nbsp;\u0026nbsp;\n\n  \u003ca href=\"mailto:0xabdulkhaliq@gmail.com\" target=\"_blank\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/gmail-%23EA4335.svg?style=for-the-badge\u0026logo=gmail\u0026logoColor=white\" alt=mail/\u003e\n  \u003c/a\u003e\u0026nbsp;\u0026nbsp;\n\n  \u003ca href=\"https://www.github.com/0xabdulkhaliq/\" \u003e\n    \u003cimg src=\"https://img.shields.io/badge/Github%20Profile-131313?style=for-the-badge\u0026logo=github\u0026logoColor=white\" alt=\"Github Profile\"\u003e\n  \u003c/a\u003e\n\n\u003c/div\u003e\n\n\u003cbr\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xabdulkhaliq%2Ftic-tac-toe","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F0xabdulkhaliq%2Ftic-tac-toe","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F0xabdulkhaliq%2Ftic-tac-toe/lists"}