No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
e2e
gulp
server
src
.bowerrc
.editorconfig
.eslintrc
.gitignore
.yo-rc.json
README.MD
bower.json
gulpfile.js
karma.conf.js
package.json
protractor.conf.js

README.MD

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