My first thought when starting this project was to make a fun and easy game for my two toddler boys who love Super Mario at the moment. And what game can be better then a memory game that includes pictures of different creatures from the Super Mario game. A memory game fits everyone who wants to train their memory and speed skill. Both kids and adults can play due to its easy design and mecanics. The user need to find two pictures of the same creature to score a point. The game starts as soon as the user has clicked on the "lets go" button on the starting page that takes the user to the actual game page. The game got a timer that continues to count until the user have found all the matching cards. The game also got a "moves" tracker who shows how many moves a user has taken during the game.

• As a first time user

  • I want to be intriged to play the game
  • I want to feel amused by the game
  • I want to feel exited when playing the game
  • I want a break from everything else around me and get a quick brain workout

• As a returning and frequent user

  • I want to get a break and get a quick brain workout

• The first page a user enters is the starting page. It has the heading text "Super Mario Memory Game" and a picture of Mario riding on Yoshis back with a little star friend next to them.

• The game area contains the memory game. It got 12 different cards that the user can click on and pair them in order to continue and win the game.

• When the user wins the game a window pops up that says congratulations. The user can then choose to click on a "play again" button to play again.

• HEADING

  • The heading text is at the top of the website and contains the text "Super Mario - Memory Game". Its purpose is to make the user understand what type of game it is that they are going to play.

• IMAGE

  • The image of Super Mario on Yoshi is under the heading to make the user understand that the game is about Super Mario

• "LETS GO" BUTTON

  • Under Super Mario and Yoshi is a button that says "Lets go!". If the user click on the button it takes them to the game page.

• MOVES SECTION

  • The memory game has a section that counts how many moves the user does during the game

• TIMER SECTION

  • The timer starts as soon as the user press "play" and stops when the player completes or pause the game.

• MEMORY CARDS

  • The memory cards is used to play the game. The user click on one to switch the card and then chooses another one in hope that they are the matching pair.
  • The front of the cards is the question block from the Super Mario game.

• When a user click on one card a creature from the Super Mario game appears.

• RESTART BUTTON

  • At the bottom of the game area is a restart" button which the user can click on to restart the game.

• WINNING DIV

  • When a user wins the game a div pops up with the text "You made it! Congratulations!"
  • A button appears below the text that says "Play One More Time" which the user can press to restart the game and play again

• The color scheme through both pages is a #red background and #white text with a #black border around the text. The buttons to start/pause the game got a grey background color.

• [https://validator.w3.org/nu/] to validate html code
• [https://jigsaw.w3.org/css-validator/] to validate css code
• [https://freepngimg.com/] for images
• favicon from [https://fontawesome.com/icons/block-question?f=classic&s=duotone&pc=%23dcb218&sc=%23dcb218]
• used [https://favicon.io/favicon-converter/] to generate the favicon
• [https://www.remove.bg/] to remove background from favicon

• I tested the website in Chrome, Firefox and Edge browser to see that all pages loaded and that every button and function was working correctly.
• The site is also responsive which I tested in google chromes devtools by selecting different screensizes and test each function
• I tested that all text is easy to read and to understand
• The code got valified through both HTML, CSS and JS validators

• when I was finishing the page i noticed that the content on the index page wasnt centered on all devices. To fix the issue i added min-height to both the html and body, and then the index-body which solved the issue because the body height tas stuck to the center of the page before that.
• saw that when you press the "restart game" button when you have pressed one memory card and dont have pressed another one to be compared with, that card is "used" when you have restarted the game and is compared to the first card you choose. Unfortunately I dont got the time to try and fix that issue.

• Starting Page - Mobile version

• Starting Page - Desktop version

• Game Page - Mobile version

• Game Page - Desktop version

This project was deployed to Github.com. The following steps shows how you do it:

1. Log in to your Github.
2. Go to the Super Mario repository in Github: [https://github.com/Kimskogfelter/Super-Mario]
3. Select Settings in the repository navigation menu at the top.
4. Select Pages at the left handside of the website.
5. Choose: Deploy from a branch as Source.
6. Choose: Main as branch and /root as folder and press save.
7. Wait a few minutes and press the Code menu to the top left.
8. At the right handside go to Deployment.
9. Then press the to go to the live website.

• Ive been having a really hard time to understand javascript. Its been alot happening at home during this time with the kids having to be home due to us moving to a new home and my husbands mom dying. The funural was 1 december so I havent been having the time to finish the project as I would like to. Im aware that I can have used to little own code, hopefully thats not the case.

• [https://freepngimg.com/] for images

• I looked on this tutorial on youtube to help me make the memory game [https://www.youtube.com/watch?v=t3cydTwfEnM]
• The media querys comments in css are taken from Safari Retreat project. [https://github.com/Kimskogfelter/Safari-Retreat]
• Code for the meta tags for the search engines results are from the Safari Retreat project [https://github.com/Kimskogfelter/Safari-Retreat]