Art of memory

Art of memory is a classic game for one player. The game contains 8 pairs and start with the front up side down. The user select two cards- if they match- two new cards can be selected. The game count moves and time so the user can compete against himself. The site is responsive across all screen sizes.

Table of Contents

UX
Design +Wireframes
Features
- Existing Features
Testing
- Validator Testing
- Unfixed Bugs
Technologies Used
- Main Languages Used
- Frameworks, Libraries & Programs Used
Deployment
Credits
- Content
- Media
UX

Site Purpose:

Welcome to Art of memory. This is my second project as a student at Code Institute to "Full Stack Software Development-diploma". The project includes the languages JavaScript, HTML and CSS. The art are made by myself and while working with the project I realized that this kind of game is saleable to artists and photographers who want to increase the value on their websites instead of just having a clean webshop. Anyway, MY purpose of the this page is to challenge the user´s memory in a playful and colorful way.

The site is responsive across all screen sizes.

Site Goal:

I have used my skills in JavaScript, CSS and HTML and created a simple and fun game. The goal is to engage user so they return to the site.

Audience:

The audience can be all ages. My kids, 13 and 15 years old found it fun and challengeing as a contrast to today's fast games with lots of graphics and high tempo. The artwork can be changed to fit to suit specific target groups.

Communication:

The game has a big button to start the game. If the user want to quit before all cards are matched the gameboard has a stop-buttom then you arrive to the welcomepage.

Current User Goals:

New User Goals:

New users compete against themself and hopefully will come back. I hope the users find it relaxing with the colorful.

Future Goals:

The game can be a part of a an artist´s webshop to get more interactions with the users. It can also have a Top 10 list and the artwork can be exchanged frequently.

Design

Wireframes:

Wireframes are made start to help me with the layout of the welcomescreen and gamearea. I also made a overwiew "mindmap" over the javascript functions so I know what step I have to take to get a functional game. That mindmap is also attatched in below.

Wireframe:welcomepage:

Wirefram:gamepage:

Mindmap over JS-happenings on gamepage:

Colour Scheme:

Since the artworks are filled with colors, I wanted a soft and sober style of the page.
So I chooced four tones of blue: #454D61, #567799, #7A9DB5, #AABCB which match the artworks.

Typography:

The fonts are picked from Google Fonts library.

BEBAS NEUE - Is in the heading and in the logotype.
Montserrat . Is in the written text in in rule-popup
Brittany - In the word: ART in the logotype. I choosed theese fonts becase they looks nice together.

Imagery:

All artworks are created by me and have been photographed in a studio and processed in photshop. All images converted to wedp.format in photoshop The favicon is also made in photoshop- in three different sizes.

Features

Existing Features:

The page contains a welcomepage with a start button. When you click on the button you will be directed to the gamearea with 16 cards, a button for rules and a button for stopping the game.

Landing Page:

![Landing Page]

Page Title:

The titel of the page is Art of memory that name is also included in the logotype of the page. Under the logotype I have wrote: Art & game created by Camilla Dahlström.

Instructions Panel:

Simple rules is displayed in a popup-windows: "Rules Find 8 matching pairs by choosing two cards on the board. If they match- choose two new cards. You win when you find all 8 pairs. Good luck!"

Game Area:

Social Links:

Under the logtype I have added icons to github and my emailadress.

Testing

Validator Testing

page has an excellent Accessibility rating in Lighthouse. Screenshot from light house: see image below:
html files pass through the W3C validator with no issues found.

CSS files pass through the Jigsaw validator with no issues found.

JS files pass through JSHint with no issues found.

Unfixed Bugs

Technologies Used

Main Languages Used

HTML5
CSS
Javascript

Frameworks, Libraries & Programs Used

Google Fonts - Both fonts were chosen via Google Fonts
Font Awesome - for the social links icons
GitPod - Integrated Development Environment (IDE) used to build the site
GitHub - to store my repository for submission.
- Adobe photoshop - to create the wedp-files artwork.
Canva.com - to create Wireframes and logotype
Chrome DevTools - to inspect the website
Lighthouse - used to assess the overall quality of the site.
W3C Markup Validation site - used to find issues in the html for the site and to resolve them
W3C CSS Validation site - used to find issues in the CSS for the site and to resolve them.
JS Hint validation site - used to find issues in the JavaScript for the site and to resolve them.
Am I Responsive? site - Generate screenshots of the site across different devices and screen sizes.

Deployment

The site is created in Gitpod with a template from CodeInstitute.

The regular commits and pushes were sent from GitPod back to the repo on GitHub.

In the GitHub repository, navigate to the Settings tab From the source section drop-down menu, select the Main Branch Once the main branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

Credits

Content

Code Institute "Love maths" https://codeinstitute.net/ good and educational walkthrought for practical javascript

W3School Online Web Tutorials https://www.w3schools.com/ Useful guides in javascript.

Codepen https://codepen.io/ Useful inspiration and tutorials from user.

Canva https://www.canva.com/ Images, presentations are made in canva.com

Thank you My mentor Lauren-Nicole Popich Lauren-Nicole has pushed and guided me in the right direction. She always has wise advice and has a great knowledge of coding. I am so grateful to her for having patience with me.

My Cohort Facilitator David Calikes David is fantastic. He always give his student great energy. He encourages me when I doubt my knowledge.

My Kids, Hugo and William for testing the game and give honest opinions.

Media

All artwork created by me.

Camdah77/memory

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages