Travel Memory is a travel themed memory game where the user should pair together different items related to traveling. Its for users who wants to play a quick and easy game while also training their memory at the same time. The game also has a timer and turnscore for the users who wish to improve their result. The game is designed for users of any age to play and enjoy.

• The design of the website was thoughtout to match the images and background.
• A white text color with text shadow is used to give a good contrast against the blue background.
• The color palette for the website was generated from My Color and I used color #00A9C6.

Home Page

• The home page is presented by three button options. The user can start a new game, read game instructions or leave feedback.

How To Play

• Shows the user a message with instructions on how to play the game.

The Game

• The game consists of 16 cards on a 4x4 grid. At the top there is a home button represented by a home icon, and a restart game button represented by a rounded arrow icon for the users understanding on how to navigate.
• Game starts when the user clicks on any card. The cursor also turns into a pointer when hovering over the cards for the user experience. When a card has been clicked, the timer starts and the turnscore counts every time the second card have been checked for a match. Should the user try to turn another card before the two cards been checked, the card wich the users trying to click will make a small movement to show that its not possible to click this card yet. If there is a match, the card stays turned. The user could also reset the game at any time by clicking the reset button. Then the cards that have been matched turns back and the timer and turnscore stops and resets to the initial state. When the home button is clicked the game finishes and returns to the home page.

Finished Game

• When the user have matched all pairs a message is presented with the time and turnscore. The background has also been darkend with an opaque filter, for adding some extra attention to that the game is finished. Then the user can decide to play again or to close the window.

Feedback

• The user can leave some feedback by writing their name, email and a textmessage. All input fields must be filled out and an email provided for the form to be submited.

Favicon

• A favicon have been added to the browser window to help users easily locate the website tab on their browser and across different applications.

• For future features I would like to add a high score bord to the game. The user would then be able to add their name and record their turnscores and time.
• Adding sound animation for flipping cards, and when the user tries to click on a card when the game grid is locked.

All testing information can be found here testing.md

The project has been deployed to GitHub pages taking the following steps:

1. In the Github project repository, click on Settings.
2. From the Settings menu, locate Pages.
3. Under Branch, select Main branch.
4. Click Save, and the page will then automatically refresh with a link to the deployed site.

The live link: https://moolleer.github.io/travel-memory-game/

• To convert an image to favicon i used Zamzar.
• For how to set the effect for hovering over the buttons I used the code from Sliderrevolution.
• Inspiration for how to create the game grid from Codewithrandom and Freecodecamp
• Inspiration for how to create the memory cards Codingartistweb.
• For turning the cards function I used an example from Marina Ferreira.
• How to set a timer function I found Dev.
• Code institutes love running README file template as a inspiration for the README file.

• The images for the cards comes from Freepik.
• The image for the background picture are taken from Freepik.