Toulouse Memory

This is a website with a memory game themed by one of my cats, Toulouse. I hope you enjoy playing it!

You can find the website here.

User Experience (UX)

User Stories

• As a user, I want to be able to understand what the page is about at a first look.
• As a user, I want to be able to track my score and moves.
• As a user, I want to be able to challenge myself against the clock.

Color Scheme

Typography

• 'Bubblegum Sans' is used for the header as it is a playful font and looks engaging.
• 'Open Sans' is used for paragraphs and the table as it pairs well with the headers and is easy to read.

Imagery

The pictures I used to create the memory game were all taken by Hanna Kronberg or myself.

• The backface for the cards shows his paw print in the snow of winter 2022.

Overall Feel

The main objective in creating this site was to have a fun mini-game in a browser to train my JavaScript skills.

Wireframes

The wireframe shows designs for phone, iPad/tablet and desktop displays.

• Homepage wireframe

Features

Current Features

• All pages are fully responsive for:

  • below and to 480px: Mobile devices.
  • 481px — 768px: iPads, Tablets.
  • 769px — 1024px: Small screens, laptops.
  • and above.

• The game field is locked until the start button is pressed.

• The scoreboard keeps track of the players score, time remaining and moves.

  • The score updates as soon as a pair is flipped.
  • The time counts down 60 seconds.
  • The moves update every time two cards are flipped.

Upcoming Features

• Add the possibility of starting the game by clicking a card.
• Add different difficulties.
• Add a scoreboard to track highscores.

Technologies Used

Languages Used

• HTML5
• CSS3
• JavaScript

Frameworks, Libraries & Programs Used

• Balsamiq used to create wireframes.
• GitHub used to host repository.
• CodeAnywhere used as IDE.
• Google Fonts used to import 'Playfair Display' & 'Lato' fonts.
• GitHub Pages used to deploy the site.
• Lighthouse for performance review.

Testing

Validating

After finishing up I used the HTML, CSS and JavaScript validators to make sure I did not create errors.

Latest validations

HTML

latest test ~20:00 19.05.2023

CSS

latest test ~20:00 19.05.2023

JavaScript

latest test ~20:15 19.05.2023

Testing User Stories from (UX) Section

• As a user, I want to be able to understand what the page is about at a first look.
  • The page header describes the purpose of the page immediately. The paragraph below gives a more detailed description.
• As a user, I want to be able to track my score and moves.
  • The scoreboard above the game field will track the score, moves and time.
• As a user, I want to be able to challenge myself against the clock.
  • The timer inside the scoreboard starts counting down 60 seconds to give the game a challenge.

Further Testing

Personal Testing

As another testing method I used the following devices:

Computers

• Custom Build PC 1 (screen resolution 1920x1080)
  • Google Chrome (incl. dev. tools)
    • iPhone SE
    • iPhone XR
    • iPhone 12 Pro
    • Pixel 5
    • Samsung Galaxy S8+
    • Samsung Galaxy S20 Ultra
    • iPad Air
    • iPad Mini
    • Surface Pro 7
    • Surface Duo
    • Galaxy Fold
    • Samsung Galaxy A51/71
    • Nest Hub
    • Nest Hub Max
  • Microsoft Edge
  • Opera
  • Mozilla Firefox

Phones

• Huawei P20 lite
  • Google Chrome
• Samsung Galaxy S22
  • Samsung Internet

Third-Party Testing

As one of the most useful ways to test my website, I send it out to many friends and family to try out the game and collect their feedback. This way my website was not only tested on way more browsers but also on a lot of different screen sizes and I managed to gather a couple opinions about the card sizes on smaller screens for example.

Lighthouse

After deploying my website, I used Lighthouse as a tool to check for performance or accessibility issues.

latest test ~20:05 19.05.2023

• Performance
  • Lighthouse had no suggestions to optimize the performance of my website.
• Accessibility
  • Lighthouse had no suggestions to optimize the accessibility of my website.
• Best Practices
  • Lighthouse had no suggestions to optimize the practices of my website.
• SEO
  • Lighthouse had no suggestions to optimize the SEO of my website.

Bugs & Fixes

• The board loaded sorted.

  • Instead of calling the shuffle function I used the IIFE (Immediately Invoked Function Expression) so that function will be immediately executed.

• On reset the board does not shuffle

  • In order to fix this bug I needed to remove the IIFE from my shuffle function and instead call shuffle() in my startGame();

Deployment

Deployment through GitHub Pages

1. Log in GitHub.
2. Open this repository.
3. Locate the settings cogwheel.
4. On the left hand side under "Code and automation" is the option pages located.
5. Under "Build and deployment" locate the "Branch" section.
6. Change the "None" dropdown to "main" and save.
7. After some time the site will be published and accessible.
8. The link can be found above the "Build and deployment" in the "GitHub Pages".

Credits

Code

• I created most of my memory game with the help of Marina Ferreira's help. She did a great job in her videos explaining the functions!

Media

• The pictures were all taken and edited by Hanna Kronberg.
• The model of the pictures is mostly Toulouse but in one picture we have our second cat, Caruso.

Special Thanks

Code Institude, for teaching me the languages needed to create this page.

w3schools, for so many helpful pages and tools to support learning the languages.

Hanna Kronberg, as the owner of both cats (together with me) and as a huge help editing the pictures.

Coolors, helping me to create the color template used in Color Scheme.

Antonio Rodríguez, as my mentor. Once again, he helped me a lot getting started with the memory game and laying out a plan.