Here is a link to the final project

(add image after project has been completed)

• User Experience

  • User Stories

• Design

  • Color Scheme

• Wireframes

• Features

  • Implemented Features
  • Future Implementations

• Technologies Used

  • Languages Used
  • Programs Used

• Deployment

  • Initial Deployment
  • How To Fork A Repository
  • How To Clone A Repository
  • How To Make A Local Clone

• Testing

  • Code Validators

• Content

  • Images
  • Text Content

• To provide an intuitive website that a user can understand the site’s main purpose, navigate easily and wants to use for a long period.
• To provide a game which can improve attention to detail and concentration skills and memory.

• As a user,
  • I want to know what this site is about immediately so that I can quickly decide whether I want to explore it more.
  • I want to be able to navigate pages easily so that I can quickly find content.
  • I want to know how to play the game so that I can enjoy it fully.
  • I want to be able to play the game regardless of the device so that I can play it anywhere I want.
  • I want to be able to change the difficulty settings so that my kids can play it too.
  • I want to get a warning when there’s a little time left so that I can speed up.
  • I want to be able to restart a game during play so that I can reset settings.
  • I want to be able to check my scores so that I can see how good my memory is.

Here are my wireframes for desktop, mobile and tablet for this project (add wireframes here)

The site features a fully responsive design and contains 2 pages(Home, Leaderboard). The header and footer are identical for all pages.

• Header

  • The fully responsive navigation bar includes links to the Home and Leaderboard page.
  • The navigation menu collapses on small devices less than 992px width.

• Footer

  • The footer contains collaborators' names and links to their GitHub and LinkedIn Pages which open in a new tab.

• Homepage

  • The homepage includes the title, rule and game board to allow the user to see easily what the site is about.

• Game

  • The images behind the cards are emojis as the hackathon is for celebrating World emoji day.
  • The user can select three different game levels to allow all age groups to play.
  • The number of cards and time vary depending on the game level.
  • The user can reset the game while playing.
  • When the user matches all cards, a modal pops-up allow them to enter their name and updating the leaderboard, if their score is in the top 10.

• Leaderboard

  • This page displays the name and difficulty, for the top 10 players, with the highest scores.

• The game would be more enjoyable if there were background music and/or sound effects that the user can control.

Font Awesome was using for a few icons used in the footer aspect of the site pages.

Google Fonts was used for all the text content on the site pages.

GitPod was used to write up the code for my project and using the GitPod terminal to commit everything to GitHub.

GitHub is being used to store all the code for this project after being pushed from GitPod.

Balsamiq was used in the initial design process to make wireframes.

Firefox Developer Tools was used for trouble shooting and trying new visual changes without it affect the current code already created.

This site was deployed using GitHub Pages with the following the steps below:

1. Login or Sign Up to GitHub.
2. Create a new repository named "world-emoji-day".
3. Once created, click on "Settings" on the navigation bar under the repository title.
4. Click on "Pages", on the left hand side below Secrets.
5. Under "Source", choose which branch you wish to deploy, In most cases it will be "main".
6. Choose which folder to deploy from, generally from "/root".
7. Click "Save", then wait for it to be deployed. It may take some time for the page to be fully deployed.
8. The URL will be displayed above the "source" section in GitHub Pages.

If you need to make a copy of a repository:

1. Login or Sign Up to GitHub.
2. On GitHub, go to Barry-Greaves/world-emoji-day.
3. In the top right corner, click "Fork".

If you need to make a clone:

1. Login in to GitHub.
2. Fork the repository Barry-Greaves/world-emoji-day using the steps above in How To Fork a Repository.
3. Above the file list, click "Code".
4. Choose if you want to close using HTTPS, SSH or GitHub CLI, then click the copy button to the right.
5. Open Git Bash.
6. Change the directory to where you want your clone to go.
7. Type git clone and then paste the URL you copied in step 4.
8. Press Enter to create your clone.

If you need to make a local clone:

1. Login in to GitHub.
2. Under the repository name, above the list of files, click "Code".
3. Here you can either Clone or Download the repository.
4. You should close the repository using HTTPS, clicking on the icon to copy the link.
5. Open Git Bash.
6. Change the current working directory to the new location, where you want the cloned directory to be.
7. Type git clone and then paste the URL you copied in step 4.
8. Press Enter, and your local clone will be created.

The W3C Markup Validator and W3C CSS Validator was used to validate my project to make sure there were no errors within the site.

• W3C HTML Validator Results
  • HTML
• W3C CSS Validator Results
  • CSS
• JavaScript Validator

Click Here to view the full testing steps that were completed on every device and browser.

• I tested my website using Firefox Developer Tools Lighthouse feature, and received the results below: