The Memory Game is also known under the name of "Concentration". Click the cards to make them flip around and show their symbol. If the symbols of the two flipped cards match, they stay turned and their colour changes. If they don't match, they will be flipped again and show their cardback.
The goal of the game is to match the cards so that all the cards will be flipped in the end. But watch out! The more moves you make, the less stars you will get in the star rating in the score! Try to open all cards with the fewest moves possible.
And now go and play! How many moves does it take you to succeed?
You can play the game here: https://danielakuester.github.io/Udacity-Project03-Memory-Game/
Feel free to download the Memory Game to your PC.
- Download the resository as a zip-file, extract it and open the index.html to run the Memory Game.
- Clone the repository with Git Bash:
$ git clone https://github.com/DanielaKuester/Udacity-Project03-Memory-Game.git
These resources helped me to get a better understanding of the memory project and to build the memory game:
- The Memory Game Study Jam by Yayha Elharony. Thanks for explaining things in a very patient and detailed manner. And thanks for being there in the Udacity Slack workspace!
- The Memory Game Webinar by Mike Wales. This webinar helped me to start my own Memory Game project. Mike dives right in and looks how he would program a Memory Game with the given starter code. It is fascinating to see how he approaches the project and does live debugging.
- The Debugging Webinar by Cameron Pittman. Cameron makes debugging really fun! I learned a lot about the use of the console and I'm really looking forward to become better at debugging. Thanks for sharing your great tips!
- Here is a tutorial that I used to create my timer.
- The starter code for this project comes from the following Udacity Memory Game repository by Richard Kalehoff. I downloaded it directly as a ZIP-file from my Udacity classroom instead of forking or cloning it. That is why you don't see a connection between the starter code and mine. Learned for the future: Fork or clone the repo instead of just downloading it. ;-)
- The icons for the Memory Game come from Font Awesome.
- The font is the Coda font taken from Google Fonts.
- The code for the modal box was taken from this tutorial and afterwards adapted to the needs of the Memory Game project.
- All of the CSS animations are (c) Daniel Eden 2018 (MIT License). The CSS animations were implemented with the following library. You can find the instructions in the CSS animations repository.
This was one of my first a bit more complex programming projects with HTML, CSS and JavaScript. I had to face a few challenges during this project and I am grateful for them because I learned a lot through them and they made me grow as a front end developer. Many people supported me on my way and I want to use the chance to thank them. I thank my family and friends for their patience with me, my IT friends for showing me that even experienced programmers regularly face challenges or roadblocks, my cat Filou for forcing me to cuddle him when I need a break. My biggest thanks go to the Udacity team and all of the other Udacity students for their constant motivation and support on Slack.
The same goes for my little "Memory Game project study group" on Slack and the #turtle-squad! You are incredibly positive and I'm looking forward every day to start my day with you! You and my pet turtles regularly remind me of one of my life mottos (together with the Udacity motto "never stop learning"): "Slow and steady wins the race!"
You are all great people! Thanks for everything and thanks for being a part of my life!
This repository is one of my first more complex projects as a Udacity student. I am planning to update the project later to document my learning progress and my growing programming skills. Therefore, I most likely will not accept pull requests.
For details, check out CONTRIBUTING.md.
(c) Daniela Küster 2018.
This repository is licensed under the MIT license. For further information see LICENSE.md