Memory Game

This is a simple memory game inpired by the Memory game on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • App Preview
  • Links
• My process
  • Built with
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Be able to start a new game everytime the button is pressed
• Be able to restart the same game that was been played
• See statics such as moves and timer

App Preview

Links

• Live Site URL: Vercel
• Repository URL: Github

My process

• First step was to build the components and style each of them
  • Set html structure as model and then transfer the dynamic ones to jquery
  • Style components using tailwind
  • For the flip effect I used the following references:
    • Create a card flip animation with css
    • How to design a css card flip animation
• After stylization, the next step was to build the page dynamically using jquery
  • set up time interval functions like countdown and timer
  • set up board function: handle game customization according to the game status
  • create functions to handle each game status
  • the final implementation was the handleCardClick function, to handle all the outcomes of a user clicking on a card during game.

Built with

Author

• Portfolio - Natalia Oliveira
• Linkedin - Natalia Oliveira