This project has been made for a basic angular course.

To see this code running (except the node backend) http://www.obsidianart.com/projects/4pictures1word/#/

To play the original game (made by LOTUM) go to https://play.google.com/store/apps/details?id=de.lotum.whatsinthefoto.us

Each step represent a step in the explanation of how to work with angular.

Generator used as a base: https://github.com/swiip/generator-gulp-angular#readme

Available gulp tasks

• $ gulp to build an optimized version of your application in folder dist
• $ gulp serve to start BrowserSync server on your source files with live reload
• $ gulp serve:dist to start BrowserSync server on your optimized application without live reload
• $ gulp test to run your unit tests with Karma
• $ gulp test:auto to run your unit tests with Karma in watch mode
• $ gulp protractor to launch your e2e tests with Protractor
• $ gulp protractor:dist to launch your e2e tests with Protractor on the dist files

Steps

• Step1: let's have a look around and understand the structure of the application
• Step2: let's run it
• Step3: let's comment the index and start building our own from the UX
• Step4: add 4 images and an input box
• Step5: get 4 non licenced pictures https://www.flickr.com/creativecommons/ and resize them
• Step6: Adding images to the project
• Step7: Attach angular to the input (ng-model)
• Step8: checking correct solution (ng-show/ng-if, calling functions)
• Step9: checking only on input change, showing toast when solution is correct
• Step10: Observing model change instead of input change ($scope, $scope.watch)
• Step11: Time the solution
• Step12: Refactor
• Step13: Adding level 2, Adding level concept, adding end game concept
• Step14: Adding game ended screen and route
• Step15: clean up html and some css
• Step16: Material design
• Step17: Testing unit, show code coverage
• Step18: e2e tests
• Step19: Clean e2e
• Step20: Adding buttons for the solution (ng-repeat)
• Step21: Fix tests
• Step22: get Levels from the serve
• Step23: Adding level to the url
• Step24: Updating tests
• Step25: Adding animation