X's and O's is a 3*3 two player game. This website has been created to allow a player to play against the computer. The website is easy to navigate through buttons that lead to a game area, rules section, and feedback form.

The deployed website can be found here.

• User Experience
  • Project Goals
  • User Stories
  • Colour Scheme
  • Typography
  • Wireframes
• Features
  • General
    • Header
  • Page Features
• Technology Used
  • Languages Used
  • Other Technologies Used
• Testing
• Bugs
• Future Features
• Deployment
• References
  • Code
  • Acknowledgements

• The website is easy to navigate and user friendly.
• The website is interactive for the user and is responsive on mutiple devices ranging from mobile to desktop.
• The website doesn't have a conflicting colour scheme making it easy to view.
• To provide a feedback section for users to submit any comments to assist with the sites future development.
• To provide the user with an easy to find rule section to explain how the game works.

• As a player, I want the website to be easy to navigate between pages.
• As a player, I want the rules to be easily accessable.
• As a player, I want the game to be user friendly.
• As a player, I want the game to work on multiple devices.
• As a player, I want the game to be fun and engaging.

The main font used in the body of this site is EB Garamond with a back up font of serif it fails to load or be imported correctly. The font used for headings is Cairo with a backup of Sans Serif.

Balsamiq was used to design the wireframes used to design the layout of the website and the location of the sites elements and functions.

Page View	Wireframe
Desktop View
Mobile View Game Area
Mobile View Home and Feedback Pages

• The website was designed mobile first.
• The website has been designed to be responsive across all devices.

• The heading contaings the site name and is present on every game page.

Feature	Image	Notes
Home Page		- Overview of homepage.
Main Buttons		- The buttons on the home page direct the player to the game area, a rules pop-up, or a feedback form page. - The Play button brings players to the Game Page. - The Rules button activates a pop-up showing the rules and site controls. - The Feedback button brings players to an accessible form to be able to submit their feedback.
Rules Pop-up		- The Rules pop-up explains the rules of the game to the player and has a visible close button. Alternatively the players can choose the play button directly to go from Rules to Game Play.
Game Area		- Game Area is comprised of a 3*3 grid and includes a player choice button and reset button.
Player Choice		- Allows the player to chose X or O.
Score Counter		- Counts number of games Won against the computer.
Reset Button		- Allows user to reset the game.
Feedback Form		- The feedback form was added to allow users to submit feedback on the site.
Form submission button		- Used to submit feedback
Blank Entry Promt		- The form also promts users to fill in any blanks before submission.
Error 404 Page		- Page added to direct the user back to the Game.

• HTML5
• CSS3
• JavaScript

• Google Fonts
  • Google Fonts was used to import the fonts of EB Garamond and Cairo to the style.css file. These fonts were used throughout the website.
• Font Awesome
  • Font Awesome was used to add icons in order to create a better visual experience for UX purposes.
• GitPod
  • GitPod was used for writing code, committing, and then pushing to GitHub.
• GitHub
  • GitHub was used to store the project after pushing.
• Balsamiq
  • Balsamiq was used to create the mobile and desktop wireframes during the design phase of the project.
• Am I Responsive?
  • Am I Responsive was used in order to see responsive design throughout the process.
• Responsive Design Checker
  • Responsive Design Checker was used in the testing process to check responsiveness on various devices.
• Chrome DevTools
  • Chrome DevTools was used during development process for code review and to test responsiveness.
• W3C MarkUp Validator
  • W3C Markup Validator was used to validate the HTML code.
• W3C CSS Validator
  • W3C CSS Validator was used to validate the CSS code.
• JSHint
  • The JSHints JavaScript Code Quality Tool was used to validate the site's JavaScript code.

• As a player, I want the website to be easy to navigate between pages.

  • The buttons on the site allow easy navigation across the site.
  • The heading is also a link back to all the home page.

• As a player, I want the rules to be easily accessable.

  • This has been achieved through a Pop-up button on the home screen.

• As a player, I want the game to be user friendly.

  • The games design was kept simple and and easy to use with basic controls.

• As a player, I want the game to work on multiple devices.

  • The Game is responsive on multiple screen sizes.

• As a player, I want the game to be fun and engaging.

  • The sites clours have been chosen to compliment each other.
  • The colours stay consistent throughout the sites pages.
  • The score is displayed below the playing area.

• Browser Compatability

• Device compatibility (responsiveness)

• W3C CSS Validator found no errors or warnings on my CSS.

• There were no errors found when passing code through the Html Validator on any of the pages.

• On the code validator sites I tested using both the sites URL's and by passing the code through the generator to ensure no errors were present.

Code	Page	Score
CSS	Site Wide
HTML	Home Page
HTML	Feedback Form
HTML	Game Page
JavaScript	Site Wide

Report	Score	Summary
Report		- Used Lighthouse to confirm that the colors and fonts being used in throughout the website are easy to read and accessible. - Was also used to test that the page loads correctly without delay to ensure a positive user experience.

• General

• Home Page

• Game Page

• Feedback Form Page

• Error 404 Page

Bug	Image	Notes
CPU overwriting previous choices made by the user		- This was achieved through the introduction of a for loop that checks if the box is available to be selected by the Computer. - I added an alert during the testing phase to notify me when the Computer was attempting to selected an unavilable box. - Extensive testing was done through the use of DevTools as seen in the image I was able to watch the moves chosen by the user and CPU in the HTML and watch the moves chosen my the user in the console. - I used resources such as Tutor Support, Slacks Peer Review Chanel, Stack Overflow to solve this issue.
Game Won Showing in Error		- This bug was observed when the game was won by either the User or Computer. - It caused the Score to increment in error. - It was fixed by adding a new function for the scenario when the User loses the game. - This new function now decrements the score by 1 when the user loses a game.

Bug	Image	Notes
Draw/End Game Bug		- Given more time I would add another function to the JavaScript file to restart the game when no turns are available and when the game is over. - Extensive testing was done through the use of DevTools to test different game scenarios - I used an alert for testing the site for the bug and noted when it was occuring. - I attempted to fix this bug logically through the use of functions and given more time I would use an if loop to determine game status and to initiate a restart when the game ends in a draw.

• Some Features I would like to add in the future include:
  • Replacing the alert that promts chosing a player with a pop-up feature.
  • Replacing the alerts that signal the game status of won or lost with a pop-up button.
  • I would also like to add a best of three feature to the game.

• This website was developed using GitPod, which was then committed and pushed to GitHub using the GitPod terminal.

• The following steps can be used to deploy the website to GitHub Pages from the GitHub Repository:
  • Log into GitHub and locate the GitHub Repository.
  • At the top the page locate the Settings button on the menu.
  • Scroll down the Settings page until you locate the Pages Section.
  • Under Source, click the dropdown and select Master Branch.
  • The page will refresh and generate the link to the website. The link will be active when the box surrounding the link turns from blue to green.

• Animate.css was used for css the style seen on the H1 element throughout the site.

• W3Schools was used as a resource for the creation of my css, JavaScript, and HTML.

• Stack Overflow Used for assistance with troubleshooting issues.

• CSS-Tricks used for assistance with improving site responsiveness.

• First I would like to thank my Partner for his love and support throughout the completion of this project.
• I would also like to thank my mentor Marcel for his advice and support.
• My friends for constantly testing the project on their different devices.
• Tutor Assistance for their help with fixing my GitPod following the global crash.
• Code Institute and its Slack community for their support and providing me with the necessary knowledge to complete this project.