{"id":25495815,"url":"https://github.com/umarSiddique010/tic-tac-toe-js","last_synced_at":"2025-11-09T16:30:20.557Z","repository":{"id":270212174,"uuid":"909607092","full_name":"umarSiddique010/Tic-tac-toe","owner":"umarSiddique010","description":"A feature-rich Tic Tac Toe game built with HTML, CSS, and JavaScript. This project emphasizes responsive design, engaging UI/UX, SOLID principles, and accessibility, offering a seamless two-player experience with dynamic feedback and audio integration.","archived":false,"fork":false,"pushed_at":"2024-12-29T11:43:59.000Z","size":0,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-29T12:26:54.386Z","etag":null,"topics":["accessibility","audio-integration","color-theory","css","dom-manipulation","front-end-web-development","game","html","javascript","modular-code","responsive-design","solid-principles","tic-tac-toe","ux-ui"],"latest_commit_sha":null,"homepage":"https://umarsiddique010.github.io/Tic-tac-toe/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/umarSiddique010.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2024-12-29T08:25:18.000Z","updated_at":"2024-12-29T11:48:34.000Z","dependencies_parsed_at":"2024-12-29T12:37:00.451Z","dependency_job_id":null,"html_url":"https://github.com/umarSiddique010/Tic-tac-toe","commit_stats":null,"previous_names":["umarsiddique010/tic-tac-toe"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umarSiddique010%2FTic-tac-toe","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umarSiddique010%2FTic-tac-toe/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umarSiddique010%2FTic-tac-toe/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/umarSiddique010%2FTic-tac-toe/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/umarSiddique010","download_url":"https://codeload.github.com/umarSiddique010/Tic-tac-toe/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239576821,"owners_count":19662112,"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":["accessibility","audio-integration","color-theory","css","dom-manipulation","front-end-web-development","game","html","javascript","modular-code","responsive-design","solid-principles","tic-tac-toe","ux-ui"],"created_at":"2025-02-19T00:39:52.483Z","updated_at":"2025-11-09T16:30:20.459Z","avatar_url":"https://github.com/umarSiddique010.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Tic Tac Toe Game\n\nA feature-rich Tic Tac Toe game built with HTML, CSS, and JavaScript. This project focuses on implementing solid gameplay mechanics, an engaging user experience, and adhering to clean code practices.\n\n## Features\n\n- **Two-Player Mode**: Play with a friend in real-time.\n- **Dynamic UI Updates**: Real-time feedback for each player's turn.\n- **Audio Effects**: Custom sounds for clicks, game start, and results.\n- **Game Restart and Replay**: Options to reset the game or play again.\n- **Win, Lose, or Draw**: Handles all outcomes with appropriate messages.\n- **Accessible Design**: Aria labels and clear visual feedback ensure accessibility.\n\n## Skills Utilized\n\n### HTML\n- Semantic elements to structure the game.\n- Form handling for player name input.\n- ARIA attributes for accessibility.\n\n### CSS\n- Responsive design to ensure the game works across devices.\n- Custom styling for the game board and interactive elements.\n- Color theory applied for clear visual differentiation between players.\n- Smooth transitions and hover effects for an engaging user experience.\n\n### JavaScript\n- Modular code structure adhering to the SOLID principles.\n- Event handling for dynamic gameplay interactions.\n- Audio integration for enhancing user feedback.\n- DOM manipulation for real-time updates.\n- Logical implementation of game rules and win conditions.\n\n## UI and UX Contributions\n\n- **User Interface (UI):**\n  - Designed an intuitive game board layout.\n  - Clearly labeled buttons and inputs for a seamless experience.\n  - Visual cues like highlighting active cells and displaying current turns.\n\n- **User Experience (UX):**\n  - Implemented responsive design to cater to different screen sizes.\n  - Added meaningful audio cues to enhance engagement.\n  - Ensured accessibility through keyboard and screen reader support.\n  - Smooth animations and transitions for a polished feel.\n\n## Color Palette\n\nThe color palette was chosen for clarity and engagement:\n\n- **Primary Text**: #EEEEEE (light gray for readability).\n- **Background**: #030637 (dark blue for a focused and immersive environment).\n- **Game Board Background**: #F0F8FF (light blue for contrast).\n- **Player X**: #A64D7A1A (translucent pink for subtlety).\n- **Player O**: #4D54A61A (translucent blue for subtlety).\n- **Hover Effect**: #78A08324 (translucent green for interactivity).\n- **Buttons**:\n  - Reset: #B8001F (red for urgency).\n  - Play Again: #384B70 (muted blue for neutrality).\n\n## Gameplay\n\n1. Enter the names of both players.\n2. Take turns clicking on cells to place your mark (X or O).\n3. The game announces the winner, loser, or a draw.\n4. Use the \"Play Again\" button to replay or \"Reset\" to start over with new names.\n\n## Audio Feedback\n\n- **Click Sounds**: Different sounds for X and O.\n- **Game Start**: Audio cue when the game begins.\n- **Game Over**: Audio indicating the result.\n- **Play Again**: Sound effect for replaying.\n\n## Credits\n\nThis project was built as part of a learning experience to master JavaScript, practice clean code principles, and enhance UI/UX design skills. Special thanks to all resources and inspirations along the way.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FumarSiddique010%2Ftic-tac-toe-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FumarSiddique010%2Ftic-tac-toe-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FumarSiddique010%2Ftic-tac-toe-js/lists"}