My Milestone 2 Project for Code Institute is a Higher or Lower card game in which you have to decide whether the next card will be higher or lower than the last. There is betting feature which is used to increase your Wallet Total, which is what is used as your score at the end of the game. It is designed to be simplistic and engaging.

View the live project here.

• User Experience (UX)
• User Stories
• Design
• Colour Scheme
• Typography
• Imagery
• Wireframes
• Features
• Technologies Used
• Frameworks Used
• Testing
• Code Verification
• Lighthouse
• Speed Test
• Cross-Browser
• Responsive Testing
• Testing User Stories
• Further Testing
• Features Left To Implement
• Known Bugs
• Deployment
• GitHub Pages
• Forking the GitHub Repository
• Making a Local Clone
• Credits
• Code
• Content
• Media
• Acknowledgements

• User Stories
• First Time Visitor Goals
1. As a First Time Visitor, I want to understand how to play the card game Hi-Lo.
2. As a First Time Visitor, I want to play a game which I find enjoyable and simple to play.
3. As a First Time Visitor, I want to play a game with an element of risk.
• Returning Visitor Goals
1. As a Returning Visitor, I want to try and better my previous high-score.
2. As a Returning Visitor, I want to feel confident taking more calculated risks.
• Design
• Colour Scheme
• I've tried to theme the game as if it were being played at a Poker table at a casino. I think the colours used in this project compliment this theme.
• Typography
• The Croissant One font is the main font used throughout this project with Cursive as the fallback font in case for any reason the font isn't being imported into the site correctly. The Roboto font is used within the Rules modal and SweetAlert2 popup.
• Imagery
• The images used really make the project feel authentic. The background is a subtle image displaying the cards suits and goes well with the Poker table theme I was going for.
• Wireframes
• Project Wireframe - View
• Target Audience
• Teenagers to Adults.
• Users with an interest in card games.
• Users with an interest in gambling.

• Responsive on all device sizes.
• Interactivity for users.
• Betting feature.
• Rules modal that pops up on page load.
• Saving of High-score into Local Storage.

• HTML5
• CSS3
• JavaScript

1. Bootstrap 4
• Bootstrap was used to assist with the responsiveness and styling of the website.
2. Hover.css
• Hover.css was used on the Higher, Lower and Repeat Bet buttons and also the £20, £50 and £100 betting chips.
3. Google Fonts
• Google Fonts was used to import the 'Croissant One' and 'Roboto' fonts into my project. 'Croissant One' was used for the majority of body text, whilst 'Roboto' was used for the rules modal and alert popup.
4. Font Awesome
• Font Awesome was used to display a restart icon once the game has ended.
5. jQuery
• jQuery is a dependency of the Bootstrap framework and helps with responsive design.
6. SweetAlert2
• SweetAlert2 was used to style the standard JavaScript alert popup.
7. TinyPNG
• TinyPNG was used to compress all images, resulting in faster loading times.
8. Git
• Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
9. GitHub
• GitHub is used to store the projects code after being pushed from Git.
10. Balsamiq
• Balsamiq was used to create the wireframes during the design process.
11. Chrome DevTools
• Absolutely essential tool for debugging code.
12. VS Code
• Used for testing offline, when internet connectivity wasn't always available due to travel.

The W3C Markup Validator, W3C CSS Validator and JSHint services were used to validate code to ensure there were no syntax errors in the project.

• W3C Markup Validator - Results
• W3C CSS Validator - Results
• JSHint - Results

Performance of the site was analysed by Lighthouse. Here are the results.

Site speed test was performed by GTMetrix. Here are the results.

Prior to the above, I was informed in a previous test that my images were not optimised and that should compress them. I used TinyPNG for this, which resulted in 60% better performance.

This project was tested with all major browsers and displayed as expected. Results can be seen here.

• Google Chrome
• Firefox
• Safari
• Opera
• Microsoft Edge
• Tor

I did experience UI issues using Internet Explorer 11. As can be seen here. Given a little more time, I would have researched a fix.

Responsive testing was carried out with Chrome Dev Tools and BrowserStack. The results for some popular devices can be seen below.

• iPhone X
• iPhone 8 Plus
• iPhone SE
• Pixel 3 XL
• Galaxy S9 Plus
• Galaxy Note 10
• iPad Pro
• iPad Mini
• Galaxy Tab S4

• First Time Visitor Goals
1. As a First Time Visitor, I want to find out how to play the card game Hi-Lo.
1. Upon entering the site, users are automatically greeted with a clean Rules modal, which specifies the rules of the game and how to place a bet.
2. As a First Time Visitor, I want to be able to enjoy the card game of Hi-Lo without a complicated interface.
1. The site was designed to have a minimalistic look which should not feel too confusing for users.
2. All things displayed within the project all serve a purpose and are easily identifiable as to what their job is.
3. The authentic colour scheme and card images used ensure the game feels more real and enjoyable.
• Returning Visitor Goals
1. As a Returning Visitor, I want to better my High-Score.
1. Your High-Score will be shown to you after each game of Hi-Lo.
2. If you better your High-Score, it will overwrite the previous one and will remain saved into local storage until the browsers cache has been cleared.
2. As a Returning Visitor, I want to take more calculated risks when playing Hi-Lo.
1. If you are confident in your selections you can increase your bet up to the maximum stake of £1000 each turn.
2. Users can make use of the Repeat Bet button after a large stake for an increased risk. You could use this throughout the game instead changing your bet amount each turn.

• The website was viewed on a variety of devices such as Desktop, Laptop, Surface Pro 6, iPad Air 2 & iPhone X.
• I did a large amount of offline testing using VS Code when creating this project.
• Family members were asked to review the site and to point out any bugs and/or user experience issues. One feedback I did get from my 7 year old son, was that it is unfair that it is not real money! 😁

• I will improve UX by adding a flip animation to the next card.
• I will add a card countdown so that users can see how many cards are left to be dealt.
• I would eventually like to add a global high score leaderboard, so users can compare their high-scores.
• Ensure compatibility for IE11.

• Starting a new game refreshes the page causing the Rules modal to reappear.
• Site does not display correctly within Internet Explorer 11.

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

1. Log in to GitHub and locate the GitHub Repository.
2. At the top of the Repository (not top of page), locate the "Settings" Button 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.

By forking the GitHub Repository we make a copy of the original repository on our 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 Repository.
2. At the top of the Repository, just above the "Settings" Button on the menu, locate the "Fork" Button.
3. You should now have a copy of the original repository in your GitHub account.

1. Log in to GitHub and locate the GitHub Repository.
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.



$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY

7. Press Enter. Your local clone will be created.



$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY    
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.

Click here to retrieve pictures for some of the buttons and more detailed explanations of the above process.

• Bootstrap 4: Bootstrap Library used throughout the project to make site responsive using the Bootstrap Grid System.
• SweetAlert2 for their styled alert popups.
• Hoverr.css for the hvr-grow style for my interactive buttons.

• All content was written by the developer.

• The Logo was downloaded from https://www.pikpng.com
• Playing cards were downloaded from http://acbl.mybigcommerce.com
• Poker chips were downloaded from http://pngimg.com
• Background image was downloaded from https://www.shutterstock.com.
• The card deal audio was downloaded from https://freesound.org, which I then converted to MP3 using https://cloudconvert.com.

• My work colleagues at SG World, for their insightful feedback/pointers and also for my paid subscription to Pluralsight.
• Pluralsight, Udemy and YouTube for their extremely good course materials.
• The Code Institute Slack community and their wonderfully helpful nature.