Alright, alright! Steady mate! Play it on my Codepen --->https://codepen.io/JABedford/pen/vRrvwE I will host it on my website as and when, but for now Codepen will do!
Emoji Match is a coursework for Udacity Front-End Nanodegree. I was provided with a basic HTML, CSS file, and a product specification, the rest is left up to the participant. I decided to go with Emojis as they were more aesthetic than the standard icons provided.
I had struggles with a few elements of the Javascript section. The timer did not work as expected, and also it was possible to "cheat" the game by double clicking the cards to pass without having to match anything.
I also encountered an issue with the game not resetting properly when it was completed and therefore the cards did not reshuffle. I have been using a script from Stack Overflow, but the script was not inititiating correctly.
Subsequently, it was picked up on in my code review. I was given a small piece of advice for each problem, but ultimately I decided to restart and rewrite what I had done. I made this decision purely for the fact that when trying to fix the various bugs throughout, I kept thinking of shorter ways of doing various things. This was not an easy decision seeing as I had already invested so much time in doing the original script; however, I think the rewrite was necessary.
I worked on the problems in the first submission. I slightly edited the HTML file, and removed the modal box as I was not happy with the looks. In my opinion, the modal looked clunky and unpolished compared to the game board itself.
I created a flowchart and drew everything out by hand, which I did not do in the first step. I halved my lines of code, and created a much more efficient program.
Here is what my reviewer had to say:- "I liked playing your game very much. Everything looks so nice from starting of the game logic to modal display. Your effort can be seen from your project. You will really do great in future! Never stop learning and happy learning! :) And, also always make handwritten notes or a flow chart which will be helpful to you to break your problem into small tasks and easier for you to find out what to execute next. Plus the modal display was really AWESOME! You shouldn't have changed it to alert boxes. ALthough it is also nice but modal gives a better view in the context of a game! Anyways, you really did a great job. Keep up the good work! :)"
Seems that maybe I was a bit quick to delete the modal boxes!! ;)
"An EXCELLENT job is done with the README file. Really I am impressed! Two thumbs up!"
What can I say!?
- Font Awesome - http://fontawesome.io
- Animate CSS - http://daneden.github.io/animate.css
- JQuery - http://jquery.com
- And last but certainly no means least.. Emoji CSS - https://afeld.github.io/emoji-css/