1. Project goals

2. User experience

   1. Target audience

   2. User stories

   3. Design

   4. Wireframes

3. Features

4. Technologies used

   1. Languages

   2. Libraries and programs

5. Testing

   1. HTML

   2. CSS

   3. JavaScript

   4. Accessibility

   5. Performance

   6. Browser Compatibility

   7. Further testing

   8. Testing user stories

6. API

7. Bugs

8. Deployment

9. Credit

   1. Media credit

   2. Acknowledgement

• The goal of this project is to challenge my own knowledge and to learn new things to make a fun and challenging game for users.

The site is targeted towards everyone who wants to challenge themselves.

1. As a user I want an easy website where I can find the game fast.

2. As a user I want to be able to see which page I am on.

3. As a user I want to be able to play on desktop, tablet and mobile devices.

4. As a user I want to challenge my brain.

5. As a user I want to see how much time has passed in real-time while playing.

6. As a user I want to be able to see the amount of moves I have made.

7. As a user I want to see a pop up modal with time expired and moves made when completing the game.

8. As a user I want to be able to drop my info for updates.

9. As a user I want to see other user who have played the game.

10. As a user I want to know the site owners process making the site.

11. As a user I want to see the latest updates from the White House.

12. As a user I want a reset button if I want to reset the game.

13. As a user I want a validation if my form was sent or if there was an error.

14. I want the site to be visually appeasing.

15. I want the user to be able to challenge themselves.

16. I want the user to have fun.

17. I want the user to get feedback on which page they are on.

18. I want the user to get feedback and confirmation if they fill out a form right or wrong.

19. I want the site to be responsive.

20. I want the user to come to a 404 page if they type the web address wrong.

21. I want the user to get feedback on how much time has passed in the game and how many moves have been made.

22. I want the user to get feedback when they beat the game.

• Because my site was going to focus on a game with American presidents I wanted to have a design with an American touch to it. Therefore I chose the US flag for my background as well as the background for my game cards. So the US flag was the base of my design choices in this project.

• Most of the colors I went with were first based on the American flag. So there were are a lot of red and white throughout the site. Very late in the process I did not like how the red colors were screaming on the page, so with the help of the website colormind I added some more soothing colors.

• I gave the restart button a black background to make it stick out a bit more so it would be easier to spot.

• Because my form was more of a darker brown I wanted the form validation modal to stick out a bit more, hence why I chose a more red brown color.

• I used Google Fonts and I went with the font Bona Nova because I like how it runs and looks throughout the site. For the backup I picked Sans-serif.

• Below you can see the images of the wireframes.

The Index/Game page.

The Congratulations modal.

The Users page.

The Contact page.

• The navigation bar and footer

• The navigation bar and the footer are present on all pages and are responsive. The navigation bar shows links to Game, Users and Contact. There is a feature of a border bottom to show up underneath the respective link of the page the user is on. This will help the user identify witch page they are on.

• The footer contains a link to the site owners github page if the user wants to know more about the project. It also contains a link to the White House homepage if the user wants to read about the latest news regarding the White House.

• 1. As a user I want an easy website where I can find the game fast.
• 2. As a user I want to be able to see which page I am on.
• 10. As a user I want to know the site owners process making the site.
• 11. As a user I want to see the latest updates from the White House.
• 17. I want the user to get feedback on which page they are on.

• Info area

• Here is the h1 header to tell the user they are on the “US president memory” page.

• There is also a timer feature for the game as well as a move counter.

• 5. As a user I want to see how much time has passed in real-time while playing.
• 6. As a user I want to be able to see the amount of moves I have made.
• 12. As a user I want a reset button if I want to reset the game.
• 21. I want the user to get feedback on how much time has passed in the game and how many moves have been made.

• Game area

• The game area features the memory game. The game contains 20 cards with 10 presidents. The game’s goal is to pair together 2 cards with the same image (president), the game is over when all the cards have been paired together.

• 1. As a user I want an easy website where I can find the game fast.
• 3. As a user I want to be able to play on desktop, tablet and mobile devices.
• 4. As a user I want to challenge my brain.

• Congratulations Modal

• When a user completes the game a modal shows up to congratulate the user the game is over along with the final time and how many moves were made as well as a reset button if the user wants to play again.

• 5. As a user I want to see how much time has passed in real-time while playing.
• 6. As a user I want to be able to see the amount of moves I have made.
• 7. As a user I want to see a pop up modal with time expired and moves made when completing the game.
• 12. As a user I want a reset button if I want to reset the game.
• 21. I want the user to get feedback on how much time has passed in the game and how many moves have been made.
• 22. I want the user to get feedback when they beat the game.

• User page

• On the user page a fetch function was used to get data to post some users on the page.

• 9. As a user I want to see other user who have played the game.

• Contact page

• On the Contact page there is a form where a user can fill out their name and email if they would like to get updates. EmailJS has been used to send this data to the site owners email.

• 8. As a user I want to be able to drop my info for updates.

• Form Validation

• In the form there is a form validator to make sure the name or email fields are not empty. There is also a validator to ensure the user the form has been sent successfully.

• 13. As a user I want a validation if my form was sent or if there was an error.
• 18. I want the user to get feedback and confirmation if they fill out a form wrong or right.

• Site Responsive

• The site has been tested to be responsive.

• 19. I want the site to be responsive.

• 404 Page

• The site has been given a 404 page where the user is taken if a page cant be loaded.

• 20. I want the user to come to a 404 page if they type the web address wrong.

• In the future I would like to add difficulty options to the game.

• HTML

• CSS

• JAVASCRIPT

• EmailJS was used so the filled out forms are sent to the site owner.

• Virtual Studio Code was used to write the code.

• The Git Bash terminal within VS Code was used to commit and push to Github.

• Github is used to store the code.

• Balsamiq was used to create the project wireframes.

• WC3 Validator, Jigsaw W3 Validator, JShint, Wave Validator, Lighthouse and ami.responsivedesign were all used to test the website.

• ami.responsivedesign was used to make the mockups.

No errors were found on index.html when passing through WC3 Validator.

No errors were found on users.html when passing through WC3 Validator.

No errors were found on contact.html when passing through WC3 Validator.

No errors were found on the CSS file when passing through Jigsaw W3 Validator.

No errors were found on game.js when passing through jshint.

No errors were found on users.js when passing through jshint.

No errors were found on form.js when passing through jshint.

No errors were found on the index.html when passing through Wave Web Accessibility Validator.

No errors were found on the users.html when passing through Wave Web Accessibility Validator.

No errors were found on the contact.html when passing through Wave Web Accessibility Validator.

• Lighthouse was used to test the performance and the speed of the site.
  

index.html

users.html

contact.html

• Chrome: The website is combatible and behaves as expected.

• Firefox: The website is combatible and behaves as expected.

• Edge: The website is combatible and behaves as expected.

• Internet Explorer: The game and the fetch api does not work in Internet Explorer. The site is not compatible.

• I have tested the website thru phones like One Plus 8T, Iphone X and a friends Samsung.

• The site has been tested on numerous of computers and laptops.

• Friends and family has been asked to review the site.

1. As a user I want an easy website where I can find the game fast.

Screenshot

2. As a user I want to be able to see which page I am on.

Screenshot

3. As a user I want to be able to play on desktop, tablet and mobile devices.

Screenshot

4. As a user I want to challenge my brain.

Screenshot

5. As a user I want to see how much time has passed in real-time while playing.

Screenshot

6. As a user I want to be able to see the amount of moves I have made.

Screenshot

7. As a user I want to see a pop up modal with time expired and moves made when completing the game.

Screenshot

8. As a user I want to be able to drop my info for updates.

Screenshot

9. As a user I want to see other users who have played the game.

Screenshot

10. As a user I want to know the site owners process making the site.

Screenshot

11. As a user I want to see the latest updates from the White House.

Screenshot

12. As a user I want a reset button if I want to reset the game.

Screenshot

13. As a user I want a validation if my form was sent or if there was an error.

Screenshot

17. I want the user to get feedback on which page they are on.

Screenshot

18. I want the user to get feedback and confirmation if they fill out a form right or wrong.

Screenshot

19. I want the site to be responsive.

Screenshot

20. I want the user to come to a 404 page if they type the web address wrong.

Screenshot

21. I want the user to get feedback on how much time has passed in the game and how many moves have been made.

Screenshot

22. I want the user to get feedback when they beat the game.

Screenshot

• EmailJS

  • Create an account on EmailJS
  • Add a new email service, I chose Personal email services and chose a name and a service ID.
  • Create an email template with the wanted variables. In my case a username and an email.
  • Add a link in the head of the html and add Javascript in the form.js.

• Regres

  • Go to Regres home page.
  • Scroll down and find GET LIST USERS.
  • Use the fetch function along with template literals to map out the users.

• Bug: Footer links did not open in a new tab.

  • Fix: I added a target_blank to fix it.

• Bug: The footer cut some of the content.

  • Fix: I gave the footer a position of absolute, the body and html a position of relative.

• Bug: I had white space under my footer.

  • Fix: I tried styling with overflow hidden but my desired result came after I inspected my page and removed some margins.

• Bug: When I pushed my site live my css and my images did not load.

  • Fix: I fixed the filepaths which resolved the issue.

• Bug: I had an issue getting the timer to stop in the game.

  • Fix: I had to make the game understand when the game was over by adding an array to put all the matched cards in and tell it how many cards need to be there and then fire a modal with the clearInterval.

• Bug: The form validation only showed name modal.

  • Fix: I gave all the modals a unique id in contact.html and form.js.

• Bug: The game would keep flipping the cards when the user would press them.

  • Fix: js was added to lock the board when two cards were flipped.

• Bug: I could not get the 404 page to work.

  • Fix: When I launched the site to go live this resolved itself.

• Bug: I could not get the username and email from what had been filled out in the form to send with emailjs.

  • Fix: Code was added in form.js to target form.name.value and respectively for email.

• When form is filled out correctly it does not send the form on the first click, the form sends on the second click.

• In the game, if i click on card 1 and then card 2 and they are wrong they flip back, now if click on card 1 again it will not flip again. If I on the other hand click on any other card on the grid they will flip. It is just the first card choice and if the cards dont match.

• In the form pop up modals there is a similiar bug as in when the form sends, when the close button is clicked the first time is does not respond but the second time it does.

• In the middle stage i had code for the restart game button that worked, but in the congratulations modal it did not. I separated the buttons and had one restart the game with location.reload and the other just to close the modal so the user also could see all the presidents turned on the cards.

• In Internet Explorer the game does not react to click on the cards and the fetch api does not appear.

• I tested the site on a friends Iphone X and the game does not show the back side of the cards when they are clicked. What happens is that the image of the American flag rotates so that it appears mirrored. This means the user is not able to see the presidents but just the flags. I have not found a solution for this bug but I will keep looking for a solution for this problem.

• The site was deployed to github pages.

1. Log in to Github.
2. In your repository find the settings button and click it.
3. Scroll down to GitHub Pages, beneath it says "Pages settings now has its own dedicated tab! Check it out here!" Click on "Check it out here".
4. Find source.
5. From the drop-down menu select master from branch, click save, let it automatically update.
6. You can now find a live version of the published site under Github pages https://charlie9009.github.io/CI_PP2_UPM/index.html.

1. Log in to Github.
2. Find the repository.
3. In the top right corner click the fork button.
4. Now you will have a copy of the repository in your account.

1. Log in to Github.
2. Find the repository.
3. Above the file window locate the green code button and click it.
4. To clone the repository using https copy the link.
5. Open Git bash.
6. Change the current directory to where you want the repository cloned.
7. In your terminal type now type “Git clone” followed by the repository you copied.
8. Press Enter.
9. Done.

• To help me create the Memory game I watched, examined and followed the following tutorials using their tips while also changing the code to fit my needs.

  • https://scotch.io/tutorials/how-to-build-a-memory-matching-game-in-javascript
  • https://www.youtube.com/watch?v=ZniVgo8U7ek&t=973s
  • https://www.youtube.com/watch?v=tjyDOHzKN0w&t=382s

• To create the form validation I used W3 Schools, as a reference and created my own validation.

• To create the modal for the validation I also used W3 Schools, as a reference and then used the Javascript I had learned to get the modal, add a loop, add and remove classes.

• The credit for the functionality for sending the form directly to the site owners email goes to EmailJS.

• The credit for the content that is fetched in the users page goes to Regres.

• For fetching the API I watched alot of videos and searched alot on google to learn it. In the end I watched and used a bit of code from this tutorial https://www.youtube.com/watch?v=FN_ffvw_ksE&t=1483s.

• Favicon was used from Favicon.

• The smiles in the form modal was used from Font Awesome.

• My Mentor Mo has been invaluable, he pushed me to challenge myself and he was able to provide consistent and helpful feedback throughout my project.

• A friend of mine in the business Will, has been able to provide me with help and tips.