Sutton is the name of the game! Users must think fast as they play a game of memory. Each round, a random fruity sequence is displayed to the player. Players must repeat the pattern using a fantastic input pad. Players can try their best to memorize longer and more challenging streaks!

• HTML
• CSS (Grid & Flex)
• JavaScript
• Fetch API
• Axios isomorphic client
• Unsplash API
• Netlify (Hosted)

1. Clone this repo
2. Navigate to the locally established directory
3. Open index.html

• As a player, I want to be able to start a new game, so that I can play multiple times in a row.
• As a player, I want the game to light up a sequence of input pads, so that I have a pattern to reproduce.
• As a player, I want the game to animate the pads, so that I know my moves are registered.
• As a player, I want the game to track my score, so that I know how good my memory is and how long the pattern has become.
• As a player, I want the game to alert me when I make a mistake, so that I know the game is over.

Simple Gameplay Challenging Gameplay Game Over Condition Mobile Friendly View

The biggest hurdle I overcame this project was ensuring there would be no animation clipping (due to asynchronous code). I was able to ensure that when the game sequence is displayed, animations don't overlap. I also made sure that the user can play quickly and that the animations don't prevent input during their turn from being rejected. I implemented multiple tactics to satisfy animation timing requirements. That includes Promise statements, setTimeout functions, and async await calls.

This project also served as a formal introduction to css... my first front-end UI!

• Mobile friendly layout
• Adjustable difficulty (user can increase the quantity of unique memory pads)
• Integrate 3rd party API
• Colorblind mode