giamir_todo_challenge

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+bower_components
+coverage

.jshintrc

@@ -72,13 +72,13 @@
     "couch"         : false,    // CouchDB
     "devel"         : true,     // Development/debugging (alert, confirm, etc)
     "dojo"          : false,    // Dojo Toolkit
-    "jasmine"       : false,    // Jasmine
-    "jquery"        : false,    // jQuery
+    "jasmine"       : true,    // Jasmine
+    "jquery"        : true,    // jQuery
     "mocha"         : true,     // Mocha
     "mootools"      : false,    // MooTools
-    "node"          : false,    // Node.js
+    "node"          : true,    // Node.js
     "nonstandard"   : false,    // Widely adopted globals (escape, unescape, etc)
-    "phantom"       : false,    // PhantomJS
+    "phantom"       : true,    // PhantomJS
     "prototypejs"   : false,    // Prototype and Scriptaculous
     "qunit"         : false,    // QUnit
     "rhino"         : false,    // Rhino
@@ -88,6 +88,5 @@
     "wsh"           : false,    // Windows Scripting Host
     "yui"           : false,    // Yahoo User Interface
 
-    // Custom Globals
-    "globals"       : { "toDoList": true, "angular": true }        // additional predefined global variables
+    "globals" : { "toDoList": true, "angular": true, "browser": true, "element": true, "expect": true, "by": true, "exports": true, "module": true, "inject": true, "protractor": true }
 }

.travis.yml

@@ -1,14 +1,13 @@
 script:
-  - npm test --single-run
-  - node_modules/.bin/protractor test/e2e/conf.js --browser=firefox
+  - npm test
 language: node_js
 node_js:
-  - "0.10"
+  - "5.5.0"
+before_install: npm install -g grunt-cli
+install: npm install
 before_script:
   - bower install
   - "export DISPLAY=:99.0"
   - "sh -e /etc/init.d/xvfb start"
   - webdriver-manager update
-  - webdriver-manager start > /dev/null &
-  - npm start > /dev/null &
   - sleep 3

Gruntfile.js

@@ -0,0 +1,45 @@
+module.exports = function(grunt) {
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    express: {
+      options: {
+          port:8080,
+          script: 'app.js'
+        },
+      run: {
+        }
+    },
+    karma: {
+      options: {
+        configFile: './tests/karma.conf.js'
+      },
+      run: {
+      }
+    },
+    protractor: {
+      options: {
+        configFile: './tests/e2e/conf.js'
+      },
+      run: {
+      }
+    },
+    protractor_webdriver: {
+      start: {
+        options: {
+          path: 'node_modules/protractor/bin/',
+          command: 'webdriver-manager start'
+        }
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-express-server');
+  grunt.loadNpmTasks('grunt-karma');
+  grunt.loadNpmTasks('grunt-protractor-runner');
+  grunt.loadNpmTasks('grunt-protractor-webdriver');
+
+  grunt.registerTask('test', ['karma', 'e2e']);
+  grunt.registerTask('unit', ['karma']);
+  grunt.registerTask('e2e', ['express', 'protractor_webdriver', 'protractor']);
+
+};

Procfile

@@ -0,0 +1 @@
+web: node app.js

README.md

@@ -1,22 +1,9 @@
-# Todo Challenge
+Todo Challenge [![Build Status](https://travis-ci.org/giamir/todo_challenge.svg?branch=master)](https://travis-ci.org/giamir/todo_challenge)
+===============
+A Todo list as a mini Angular.js front-end application (builded with a TDD approach).
 
-* Deadline: submit completed pull request by 9am on Monday
-* You may use whatever level of JavaScript you feel comfortable with - pure JS, jQuery, Angular, or whatever weird and wonderful framework you want to try. Extra points for DogeScript
-
-Steps
--------
-
-1. Fill out your learning plan self review for the week: https://github.com/makersacademy/learning_plan 
-2. Fork this repo, and clone to your local machine
-3. Complete the following challenge:
-
-## Challenge
-
-![Todo mockup](https://makersacademy.mybalsamiq.com/mockups/2914603.png?key=afabb09aef2901a2732515ae4349c1ec0458294b)
-
-Build a Todo list as a mini front-end application. You don't have to use a database, the front-end is more important - you can use an appropriate data structure stored somewhere in your JavaScript (this time only!)
-
-Here are the core user stories:
+User Stories
+------------
 
 ```
 As a forgetful person
@@ -30,11 +17,7 @@ So that I have more time to think about other things
 As a person who actually gets stuff done
 I want to mark my tasks as done
 So that I don't do them twice
-```
-
-Here are some other user stories you may choose to implement:
 
-```
 As a person with a lot of tasks
 I want to be able to filter my tasks by "All", "Active", "Complete"
 So that I only see the relevant tasks
@@ -48,26 +31,41 @@ I want to be able to clear my completed tasks
 So I never see them again
 ```
 
-As you may imagine, implementing a To-do list is very much a solved problem. However, we are mainly interested in seeing how you approach testing and design. We are looking for:
+Installation
+------------
+You can try the app remotely:
+>[https://todolist-giamir.herokuapp.com](https://todolist-giamir.herokuapp.com)
 
-* well written, well structured acceptance and unit tests
-* clear and expressive JavaScript
-* good HTML5 markup
+or install it locally:
+```
+$ git clone [email protected]:giamir/todo_challenge.git
+$ npm install
+```
+Visit: [http://localhost:8080](http://localhost:8080) on your machine.
 
-Don't worry about deployment, and make sure you read the CONTRIBUTING.md when submitting a pull request.
+Testing
+-------------
 
-## Extensions
+### To run tests:
+- ```$ npm test```
 
-* Deploy the app
-* Create a persistance layer (e.g. MongoDB), or use LocalStorage or the filesystem through Node
-* Make it look purdy (CSS) - try a framework like Bootstrap or Foundation
+### To run e2e tests:
+- ```$ grunt e2e```
 
-## CI
+### To run unit tests:
+- ```$ grunt karma```
 
-Read the `.travis.yml` if any of the steps below don't make sense! 
+Technologies
+-------------
 
-* Make sure you have set up `npm test` in your `package.json` so that it runs your Karma tests
-* Make sure you have your Protractor config file at `e2e/conf.js`
-* Make sure `npm start` spins up whatever serves up your app - `http-server`, Sinatra or Node
+- Angular.js
+- Node.js
+- Express
+- Karma
+- Protractor
+- Jasmine
+- Grunt
 
-Good luck!
+Contributors
+-------------
+[Giamir Buoncristiani](https://github.com/giamir)

app.js

@@ -0,0 +1,16 @@
+var express = require('express');
+// var logger = require('morgan');
+var app = express();
+
+app.set('port', (process.env.PORT || 8080));
+
+// app.use(logger('dev'));
+app.use(express.static(__dirname));
+
+app.get('/', function(req, res) {
+    res.render('index.html');
+});
+
+app.listen(app.get('port'), function() {
+  console.log('Node app is running on port', app.get('port'));
+});

bower.json

@@ -0,0 +1,28 @@
+{
+  "name": "github-profiles",
+  "homepage": "https://github.com/giamir/todo_challenge",
+  "authors": [
+    "giamir <[email protected]>"
+  ],
+  "description": "Todo list mini front-end application with Angular.js",
+  "main": "",
+  "moduleType": [],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "jquery": "~2.2.0",
+    "bootstrap": "~3.3.6",
+    "angular": "~1.4.9",
+    "angular-resource": "~1.4.9"
+  },
+  "devDependencies": {
+    "angular-mocks": "~1.4.9",
+    "angular-route": "~1.4.9"
+  }
+}

css/style.css

@@ -0,0 +1,20 @@
+@media (min-width: 1200px) {
+    .container{
+        max-width: 500px;
+    }
+}
+
+form[name="insertTask"] {
+margin-top: 50px;
+}
+
+form[name="insertTask"] input{
+  width: 100%;
+  margin: 20px 0;
+  padding: 10px;
+  font-size: 16px;
+}
+
+.items-result li{
+  margin: 10px 0;
+}

index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en" ng-app="ToDoList">
+<head>
+  <meta charset="utf-8">
+  <title>Todo List</title>
+  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
+  <link rel="stylesheet" href="css/style.css">
+  <script src="bower_components/jquery/dist/jquery.js"></script>
+  <script src="bower_components/angular/angular.js"></script>
+  <script src="bower_components/angular-resource/angular-resource.js"></script>
+  <script src="js/app.js"></script>
+  <script src="js/toDoListController.js"></script>
+  <script src="js/toDoListStorageFactory.js"></script>
+</head>
+
+<body class="container" ng-controller="ToDoListController as ctrl">
+  <header class="row"></header>
+  <section class="row">
+    <form class="form-horizontal text-center" name="insertTask" ng-submit="ctrl.addItem()">
+      <input type="text" placeholder="What needs to be done?" ng-model="ctrl.newItem" required autofocus>
+    </form>
+    <ul class="items-result list-group" ng-show="ctrl.items.length">
+      <li class="list-group-item" ng-repeat="item in ctrl.filteredItems">
+        <label>
+          <input type="checkbox" ng-model="item.completed" ng-change="ctrl.toggleCompleted(item)">
+          {{item.title}}
+        </label>
+        <a href="#" class="pull-right remove" ng-click="ctrl.removeItem(item)"><i class="glyphicon glyphicon-remove"></i></a>
+      </li>
+    </ul>
+    <section class="text-center">
+      <span class="pull-left"><strong>{{ctrl.remainingCount()}}</strong>
+        <ng-pluralize count="ctrl.remainingCount()" when="{ one: 'item left', other: 'items left' }"></ng-pluralize></span>
+      <div id="filters" class="btn-group btn-group-sm" role="group">
+        <button ng-click="ctrl.filter()" type="button" class="btn btn-default" id="all">All</button>
+        <button ng-click="ctrl.filter('active')" type="button" class="btn btn-default" id="active">Active</button>
+        <button ng-click="ctrl.filter('completed')" type="button" class="btn btn-default" id="completed">Completed</button>
+      </div>
+      <a href="#" class="pull-right clear-all" ng-click="ctrl.clearCompletedItems()">Clear All</a>
+    </section>
+  </section>
+</body>
+</html>

js/app.js

@@ -0,0 +1 @@
+var toDoList = angular.module('ToDoList', ['ngResource']);

js/toDoListController.js

@@ -0,0 +1,45 @@
+toDoList.controller('ToDoListController', ['ToDoListStorage', function(ToDoListStorage) {
+  var self = this;
+  self.newItem = undefined;
+  self.items = ToDoListStorage.items;
+  self.filteredItems = self.items;
+
+  self.addItem = function() {
+    var newItem = {
+				title: self.newItem.trim(),
+				completed: false
+			};
+			if (!newItem.title) { return; }
+			ToDoListStorage.insert(newItem)
+				.then(function success() {
+					self.newItem = undefined;
+				});
+  };
+
+  self.toggleCompleted = function (item, completed) {
+    if (angular.isDefined(completed)) { item.completed = completed; }
+		ToDoListStorage.put(item, self.items.indexOf(item))
+	};
+
+  self.removeItem = function (item) {
+		ToDoListStorage.delete(item);
+	};
+
+  self.filter = function(type) {
+    self.filteredItems = self.items.filter(function(item) {
+      if (type === 'active')    { return (!item.completed); }
+      if (type === 'completed') { return (item.completed); }
+      return item;
+     });
+  }
+
+  self.remainingCount = function() {
+    return self.items.filter(function(item) {
+      return (!item.completed);
+    }).length;
+  };
+
+  self.clearCompletedItems = function () {
+		ToDoListStorage.clearCompleted();
+	};
+}]);