View the live site here

Hi-Lo is a browser game based on the card game, High Low. The aim of the game is to turn over six cards, correctly guessing whether the value of each card if higher or lower than the previous card. If the player guesses incorrectly, the game ends. The game is responsive and accessible on a range of web-enabled devices, making it easy to navigate for new and existing players.

1. Project Objectives
2. User Experience
3. Features
4. Technologies Used
5. Testing
6. Deployment
7. Credits

Developer Objectives

• To create fun but challenging gaming experience
• To enable the user the play on a range of screen sizes
• To give the user different card designs to choose from
• To give the user the means of contacting the developer directly
• To give the user the option to toggle audio on and off
• To give the user the option to toggle light and dark themes

User Objectives

• To be able to find out how to play
• To have simmple controls
• To be able to replay without reloading the site
• To be able to play on a range of devices
• To be able to provide feedback to the developer
• To be able to set my preferences for audio and theme

Site Structure

The website is a single-page site consisting of one HTML page (index.html). The site is divided in to three main sections: 1) the introduction (#intro-container); 2) the main menu and sub-menus (#menu-container); and 3) the game (#game-container).

Color Scheme

The main color scheme consists of #394057 and #B6ECB6. These alternate between the background and foreground color depending on the user's theme preference, i.e. light or dark.

Typography

The main font is Irish Grover. This is used throughout the site with a cursive fallback font. This font was chosen because of its fun and engaging look.

The paragraph font is Roboto. This is used through the site with a sans-serif fallback font. This font was chosen because of its readability for smaller text.

The signature font is M PLUS 1 Code. This is used in the footer with a cursive fallback font.

Interactive Links

The site includes 2 interactive links to external sites.

• A link to Twitter from the results window when a user wins the game
• A link to the developer's GitHub profile from the footer

All links open in a new tab/window.

Wireframes

Wireframes for desktop, tablet and mobile view were created using Balsamiq.

The original wireframes can be accessed here.

Introduction

• 5 fanned out cards, initially face down, that spin to consecutively to spell the name of the game 'HI-LO'
• Fully responsive on all screen sizes

Menu

• 4 menu options: 1) Play; 2) How to play; 3) Contact us; and 4) Settings
• Fully responsive on all screen sizes

Header

• Hi-Lo logo
• Icon to indicate if theme is light or dark
• Icon to indicate if audio is muted
• Drop-down menu
• Visible during game play
• Fully responsive on all screen sizes

Drop-down menu

• 4 menu options: 1) Play; 2) How to play; 3) Contact us; and 4) Settings
• Accessible during game play
• Fully responsive on all screen sizes

Game

• 6 cards, initially face down
• 6 indicators that light green if user guesses correctly, and red if user guesses incorrectly
• Higher and lower button for user to input their guess
• Fully responsive on all screen sizes

Result

• Result window appears when user wins/loses the game
• If user wins, three particle bursts display
• If user wins, there is an option to share on Twitter
• If user loses, there is an option to replay
• Fully responsive on all screen sizes

Footer

• Copyright information and link to developer's GitHub profile
• Not visible during game play

Audio

• Different audio response depending on whether user guesses correctly or incorrectly
• Mutable during game play

Languages Used

• HTML5

• CSS3

• JavaScript

Frameworks, Libraries and Programes Used

• Bootstrap v5 was used to assist with the responsiveness and styling of the site.

• Google Fonts was used to import the fonts into the style.css file.

• Font Awesome was used to add icons for aesthetic and UX purposes.

• Hover.css was used on the links in the navbar to add the underline-from-center transition on hover.

• jQuery was used to navigate the DOM using JavaScript.

• Git was used for version control by using the Gitpod terminal to commit to Git and push to GitHub.

• GitHub was used to store the project code after being pushed from Git.

• Balsamiq was used to create the wireframes during the design process.

W3C Markup Validator

The W3C Markup Validator was used to to validate the site's HTML.

The initial check reported 3 warnings and 4 errors:

• 4 errors were resolved by deleting the 'aria-labelledby' attrtibute
• 2 warnings were resolved by deleting the 'type' attribute from JavaScript resources
• 1 warning was resolved by adding the 'lang' attribute to the HTML tag

A copy of the original report can be accessed here.

A copy of the final report can be accessed here.

W3C CSS Validator

The W3C CSS Validator was used to validate the site's CSS.

The initial check reported no errors.

A copy of the report can be accessed here.

JSHint Validator

The JSHint Validator was used to validate the site's JavaScript.

The initial check reported 9 warnings.

• 9 warnings were resolved by adding missing semicolons

A copy of the original report can be accessed here.

A copy of the final report can be accessed here.

Lighthouse Testing

The site was tested using Lighthouse on the Chrome and Microsoft Edge browsers to determine the site’s performance, accessibility, best practices, and SEO.

• Chrome desktop:

  • Performance 98%
  • Accessibility 100%
  • Best Practices 92%
  • SEO 100%

• Edge desktop:

  • Performance 95%
  • Accessibility 100%
  • Best Practices 92%
  • SEO 100%

The reports can be viewed below:

• Chrome Desktop

• Chrome Mobile

• Edge Desktop

• Edge Mobile

a11y Color Contrast Accessibility Validator

The ally Color Contrast Accessibility Validator was used to test for color contrast problems.

The check reported no problems. All color-pair contrast tests returned an AA/AAA score.

A copy of the report can be accessed here.

Responsiveness Testing

The site's responsiveness was tested manually, using the Google Chrome DevTools, and the Responsive Design Cheker website.

The site was responsive on all screen sizes from 320x480px to 1920x1200px.

Jest Automated Testing

Automated tests were performed using the Jest testing framework.

No issues were experienced.

Testing User Objectives

To be able to find out how to play

To have simple controls

To be able to replay without reloading the site

To be able to play on a range of devices

To be able to provide feedback to the developer

To be able to set my preferences for audio and theme

GitHub Pages

The project was deployed to GitHub Pages using the following steps:

1. Log in to GitHub and locate the GitHub respository.
2. At the top of the repository (not top of page), locate the 'Settings' icon on the menu.
3. Scroll down the Settings page until you locate the 'GitHub Pages' Section.
4. Under 'Source', click the dropdown called 'None' and select 'Master Branch'.
5. The page will automatically refresh.
6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

Forking the GitHub Repository

By forking the GitHub repository you make a copy of the original repository on your GitHub account to view and/or make changes without affecting the original repository by using the following steps:

1. Log in to GitHub and locate the GitHub respository.
2. At the top of the repository (not top of page) just above the 'Settings' icon on the menu, locate the "Fork" icon.
3. You should now have a copy of the original repository in your GitHub account.

Making a Local Clone

1. Log in to GitHub and locate the GitHub respository.
2. Under the repository name, click 'Clone or download'.
3. To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
4. Open Git Bash.
5. Change the current working directory to the location where you want the cloned directory to be made.
6. Type "git clone", and then paste the URL you copied in Step 3.
7. Press Enter. Your local clone will be created.

Information Sources/Resources

The following sources were used to provide additional information relating to HTML, CSS, and JavaScript:

• W3C Schools

• Stack Overflow

• CSS Tricks

Content

All content was written by the developer except where indicated in the code.

Acknowledgements

Thank you to my mentor, Dario Carrasquel for his helpful feedback, and to tutor support at Code Institute for their support.