Remember mee! is an app that is designed to improve the short-term memory of users, both children and adults, it is a game that consists of a playing area with cards, of which you must find the pair of each card.

• External Goals
• Owner's Goal
• Surface
• Features
• Other Features
• Technologies Used
• Testing
• Preformance
• Deployment
• Credits
• Screenshots

The application user (Kids) wants to kill time with funny games such as memmory game Remember Meee!.

The application should improve your cognitive skills, short term memory and facets such as attention, creativity and visual ability.

• fonts from Googlefonts

  • Press Start 2P
  • Sedwick Ave Display

• colors

  • backgrpund color:chocolate and cadetblue.
  • titles and name user:chocolate.
  • buttons: Cadetblue and Red.
  • win window title:rgb(167, 226, 77).
  • others: white, black, rgb(255, 227, 67).

• images are from.

  Canva

This game consists of two main features, firstly a game area in which the cards to be matched are found and secondly the points area where you can see the player's defeats and victories

The Remember mee! Heading and game area

• Featured at the center of the page, the Remember mee! title and the game area is easy to see for the user. The user will be able to see the name of the game and be able to play.

The Game Area

• This section will allow the user to play the memory game. The user will be able to easily see cards for 4 seconds and them they have to find each pair possible before the time runs out.
• The user will be able to give up if they want to.

Countdown and Give up button

• The user only have 30 seconds to find all pairs for that there is a timer.
• The user will be able to give up, this is in case the user was not paying attention and didn't see the cards when the game started.

Info Game

• When the game starts it asks for the player's name so in this section will apear the name.

• Also you have a victories and defeats score so you can see how many game you have win or losed.

Rules Window

• When the game starts it asks for the player's name at the same time will show the rules to the user.

• The user must put some name to start playing.

• When the timer runs out apears the "you lose" window informing the user that they have lost the game and gives the option to start a new one

• The user must put some name to start playing.

• level selector, so you can choose a harder or easier level depending on your ability

• As a structure language.

• As a style language.

• As a css interactive leng to created the game area, animations and control the score games.

• As an icon library for a social links and help button.

• As a font resource.

• As a software hosting platform to keep project in a remote location.

• As a version-control system tracking.

• As a wireframing tool.

• As an image editor.

I used Google Chrome web developer tools and Responsively app for testing and solving problems with responsiveness and style issues.

Responsively App was very helpful the diferent screen sizes are listed below:

• Nokia Lumia 520 (320px - 533px)
• Nokia N9 (480px - 854px)
• Samsung Galaxy S20 (412px - 915px)
• Iphone 12 Pro (390px - 844px)

• Ipad (768px - 1024px)

• Nest Hub (1024px - 600px)
• Macbook Pro (1440px - 900px)

I run Lighthouse tool to check performance of the website. I had to do couple of changes to improve performance. Screenshots are presented below:

I noticed that this tests scores vary from time to time and depends on external libraries as well.

• HTML

  • No errors were returned when passing through the official W3C validator

• CSS

  • No errors were found when passing through the official (Jigsaw) validator

• JavaScript - No errors were found when passing through the official Jshint validator

  Metrics

  • There are 21 functions in this file.

  • Function with the largest signature take 2 arguments, while the median is 0.

  • Largest function has 19 statements in it, while the median is 4.

  • The most complex function has a cyclomatic complexity value of 3 while the median is 1.

• If the player clicks on the cards before they are hidden, the code detects them as correct if they are even.

• If you lose the game and there is a card left, in the next game count that card as turned.

The project was deployed on GitHub Pages. I used VsCode as a development environment where I commited all changes to git version control system. I used push command in VsCode save changes into GitHub.

To deploy a project I had to:

• Log in to GitHub and click on repository to deploy (remember-me-javaScript-essentials)
• select Settings and find GitHub Pages section at the very bottom of the page
• from source select none and then Milestone-Projects branch.
• click save and page was deployed after auto-refresh.

Your site is published at https://richard9106.github.io/remember-me-javaScript-essentials/

To run localy:

• Log in to VScode account and link your repository to be open with VScode.

• Creating a virtual space in gitHub https://github.com/richard9106/remember-me-javaScript-essentials open the repository and then click on CODE green buttom and create a virtual space.

• once it has been created you can open it with VScode directly from your virtual space.

• To complete this project I used Code Institute student template: gitpod full template

• Ideas and knowledge library:

  • w3schools.com I used code for JavaScript set interlvar functions.

• link images page Canva
• icons from font Awesome

• The rules were created based on a Google search memory game

• The photos used on the home and sign up page are from This Open Source site
• The images used for the gallery page were taken from this other open source site