This is a single page Memory Game website, designed with the Swedish National flag color, in which users play game and learn about Top 12 Largest Cities In Sweden.

The website NavBar contains only the NavBar-Brand as MEMORY GAME, afterwards below is a NavBar-Alert in yellow that displays information on how to play the game.

The Memory Game have the game Time displayed on the left, the Start Game buttom at the center, and the Moves on the right.

There is a game Board page, with title Top 12 Largest Cities In Sweden, with 24 cards matching the Top 12 Largest Cities In Sweden.

The Memory Game have an End Game Greeting Message with a greetng Congratulations!, with a Total Game Time, Moves, Developer, and Share Buton

Finally, the Footer section of the Memory Game contains the Developer information, and Disclaimer notice.

• You can find live preview for this project here

• Watch how the game is been played from start to finish below:

This project is for any users around the globe who is looking to learn more about the Swedish society and know about the Top 12 Largest Cities In Sweden in a fun way as they play game.

• User plays the game by clicking on Start Game button, the Time begins to count, and Moves are recorded when user clicks on each Card.

• User MUST flip same card to match, and move to the best card.

• User MUST complete the game by flipping and matching all cards right before game ends with a greeting message Congratulations!.

• User can end or restart the game by clicking on the Memory Game logo at the top or by refreshing the page.

See wireframe below;

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

This section contains NavBar-Brand name.

This section contains information and instruction on how to play the game.

This section contains contains the Time, Start Game button and the Moves displays.

This section contains containts the Game Title, Game Room and the Game Cards.

The End Game Greeting is the pop-up that comes up after a user successfully completed flipping and matching all Game Cards. And it contains a greetng Congratulations!, with a Total Game Time, Moves, Developer, and Share Buton

This section contains the Developer information, and Disclaimer notice.

• Background Music
• Reward Points
• Advertisement
• Add More Sections

• The game board kept displaying whenever the game url is loaded or reloaded. See image below:

• It was fixed by adding the Bootstrap d-none class to board div.

Here are Technologies used for this project, and it's functions.

• HTML5

  • The project uses HTML5 for it's structuring.

• CSS3

  • The project uses CSS3 for it's styling.

• Bootstrap

  • The project uses Bootstrap starter template, in other to quickly design and customize responsive mobile-first site.

• Font Awesome

  • The project uses Font Awesome to get vector icons and social logos.

• Google Fonts

  • The project uses Google Fonts for great Typography.

• JavaScript

  • The project uses JavaScript for the scripting and implementing of some complex features.

• JQuery

  • The project uses JQuery through the JQuery CDN.

• All the HTML codes were run and tested through HTML TESTER. This project was tested across multiple browsers and on multiple mobile devices, tablets and desktops to ensure compatibility and responsiveness.
• Whole CSS was validated and tested through Jigsaw/CSS Congratulations! No Error Found. This document validates as CSS level 3 + SVG !
• The JavaScript codes was tested with Jshint, in other to detect bugs and achieving an error free code at the end.

This project is deployed and hosted using GitHub directly from the master branch.

Here are different actions taken in other to get the project deployed:

• I started by creating a new repository with " git init ".

• Then each update was done by the command " git add . ".

• And then committing it to my local repo with the command " git commit -m "message" ".

• Then I uploaded it to my remote repo (Github) using " git push ".

• Opened up repositories on GitHub.

• Selected Top-12-Largest-Cities-In-Sweden-Memory-Game repository.

• Clicked on settings buttom.

• Scrolled down and hosted pages thorugh GitHub Pages by selecting master branch as main source.

• Wait for a while, as the project is been deployed to GitHub, and a GitHub subdomain link generated for the live project.

• Writeup contents are my own ideas.

• Photos and images used on this site were obtained from here
• All images are property of their respective owners.
• No Copyright infringement intended.

• I received inspiration for this project from Family and Friends
• I received inspiration for this project because of my love for the Swedish society
• I received inspiration for this project from my Code Institute Mentor Nishant Kumar