makersacademy · saratateno · Jan 28, 2016 · Jan 29, 2016 · Jan 29, 2016 · Jan 29, 2016
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+bower_components
+npm-debug.log
diff --git a/.jshintrc b/.jshintrc
@@ -72,13 +72,13 @@
     "couch"         : false,    // CouchDB
     "devel"         : true,     // Development/debugging (alert, confirm, etc)
     "dojo"          : false,    // Dojo Toolkit
-    "jasmine"       : false,    // Jasmine
+    "jasmine"       : true,    // Jasmine
     "jquery"        : false,    // 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
@@ -89,5 +89,7 @@
     "yui"           : false,    // Yahoo User Interface
 
     // Custom Globals
-    "globals"       : { "toDoList": true, "angular": true }        // additional predefined global variables
+    "globals"       : { "todoList": true,
+                        "angular": true
+                         }        // additional predefined global variables
 }
diff --git a/README.md b/README.md
@@ -1,12 +1,25 @@
 # Todo Challenge
 
+This is my response to Makers Academy Weekend Challenge #8.
+
+It has been built using Angular JS with Protractor, Karma and Jasmine for testing.
+
+To run this program:
+1. clone the repository
+2. cd into the folder
+3. `npm start`
+4. Open browser at `localhost:8080`
+
+-------------
+
+# Original Todo Instructions
 * 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 
+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:
 
@@ -64,7 +77,7 @@ Don't worry about deployment, and make sure you read the CONTRIBUTING.md when su
 
 ## CI
 
-Read the `.travis.yml` if any of the steps below don't make sense! 
+Read the `.travis.yml` if any of the steps below don't make sense!
 
 * 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`

diff --git a/app.js b/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.sendFile('index.html');
+});
+
+app.listen(app.get('port'), function() {
+  console.log('Node app is running on port', app.get('port'));
+});
diff --git a/bower.json b/bower.json
@@ -0,0 +1,28 @@
+{
+  "name": "todo_list",
+  "authors": [
+    "Sara Tateno"
+  ],
+  "description": "",
+  "main": "",
+  "moduleType": [],
+  "license": "MIT",
+  "homepage": "",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "jquery": "~2.2.0",
+    "angular": "~1.4.9",
+    "angular-resource": "~1.4.9",
+    "bootstrap": "^3.3.6"
+  },
+  "devDependencies": {
+    "angular-mocks": "~1.4.9",
+    "angular-route": "~1.4.9"
+  }
+}
diff --git a/css/main.css b/css/main.css
@@ -0,0 +1,20 @@
+.list-group .glyphicon-unchecked {
+  font-size: 22px;
+}
+
+.list-group .glyphicon-check {
+  font-size: 22px;
+}
+
+.description {
+  max-width:
+}
+
+#page-title {
+  padding: 0.2em;
+}
+
+#enter-todos {
+  padding: 0.2em;
+  margin-bottom: 3em;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="en" ng-app="TodoList">
+  <head>
+    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
+    <title>To Do List</title>
+    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
+    <link rel='stylesheet' href='css/main.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>
+  </head>
+
+  <body ng-controller="TodoListController as todoCtrl">
+    <div class="container">
+
+      <div class="col-md-12 text-center">
+        <div>
+          <h2 id="page-title">My To Do List</h2>
+        </div>
+
+        <div class="count lead" ng-hide="todoCtrl.nothingToDo()">
+          You have completed {{ todoCtrl.countComplete() }}/{{ todoCtrl.count() }} things on your to do list
+        </div>
+
+        <div class="count lead text-muted" ng-show="todoCtrl.nothingToDo()">
+          Relax. You have nothing left to do.
+        </div>
+      </div>
+
+      <div class="col-md-6 col-md-offset-3" id="todo-area">
+        <div id="enter-todos">
+          <form class="form-horizontal" name="newTodoForm">
+           <div>
+              <div class="input-group">
+                <input class="form-control" type="text" ng-model="todoCtrl.newItem" >
+                <span class="input-group-btn">
+                  <button class="btn add btn-success" ng-click="todoCtrl.addItem()"><i class="glyphicon glyphicon-plus"></i></button>
+                </span>
+              </div>
+            </div>
+          </form>
+        </div>
+
+        <div class="text-left" id="todo-items">
+          <ul class="list-group">
+            <li class="list-group-item" ng-repeat="item in todoCtrl.items track by $index">
+              <div class="todo-item" ng-hide="item.editMode">
+                <div class="col-md-1" id="todo-status">
+                  <i class="glyphicon glyphicon-check" ng-click="todoCtrl.markIncomplete(item)" ng-show="item.complete"></i>
+                  <i class="glyphicon glyphicon-unchecked" ng-click="todoCtrl.markComplete(item)" ng-hide="item.complete"></i>
+                </div>
+                <strong class="description"> {{ item.description }}</strong>
+                <button class="btn edit pull-right" ng-click="todoCtrl.edit(item)"><i class="glyphicon glyphicon-pencil"></i></button>
+              </div>
+
+              <form class="form-horizontal" name="editForm"  ng-show="item.editMode">
+                <div class="input-group">
+                  <input class="form-control" type="text" ng-model="todoCtrl.newDescription" >
+                  <span class="input-group-btn">
+                    <button class="btn submit-edit" ng-click="todoCtrl.submitEdit()">OK</button>
+                  </span>
+                </div>
+              </form>
+
+
+            </li>
+          </ul>
+        </div>
+      </div>
+
+    </div>
+  </body>
+</html>
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1 @@
+var todoList = angular.module('TodoList', ['ngResource']);
diff --git a/js/todoListController.js b/js/todoListController.js
@@ -0,0 +1,52 @@
+todoList.controller("TodoListController", [function(){
+  var self = this;
+  var activeItemIndex = 0;
+  self.items = [];
+
+  self.addItem = function() {
+    var item = { description: self.newItem };
+    self.items.push(item);
+    self.newItem = '';
+  };
+
+  self.edit = function(item) {
+    activeItemIndex = _position(item);
+    self.items[activeItemIndex].editMode = true;
+    self.newDescription = item.description;
+  };
+
+  self.submitEdit = function(){
+    self.items[activeItemIndex].description = self.newDescription;
+    self.items[activeItemIndex].editMode = false;
+  };
+
+  self.markComplete = function(item) {
+    self.items[_position(item)].complete = true;
+  };
+
+  self.markIncomplete = function(item) {
+    self.items[_position(item)].complete = false;
+  };
+
+  self.countComplete = function(){
+    var count = 0;
+    for (i = 0; i < self.items.length; i++) {
+      if(self.items[i].complete === true){
+          count += 1;
+      }
+    }
+    return count;
+  };
+
+  self.count = function() {
+    return self.items.length;
+  };
+
+  self.nothingToDo = function() {
+    return (self.count() - self.countComplete()) === 0;
+  };
+
+  function _position(item) {
+    return self.items.indexOf(item);
+  }
+}]);
diff --git a/package.json b/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "todo_list",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "node app.js",
+    "test": "karma start test/karma.conf.js --browsers PhantomJS --single-run",
+    "e2e": "protractor test/e2e/conf.js",
+    "webdriver": "webdriver-manager start"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/saratateno/todo_list.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/saratateno/todo_list/issues"
+  },
+  "homepage": "https://github.com/saratateno/todo_list#readme",
+  "devDependencies": {
+    "jasmine-core": "^2.4.1",
+    "jasmine-reporters": "^2.1.1",
+    "karma": "^0.13.19",
+    "karma-chrome-launcher": "^0.2.2",
+    "karma-jasmine": "^0.3.6",
+    "karma-phantomjs-launcher": "^0.2.3",
+    "karma-spec-reporter": "0.0.23",
+    "nodemon": "^1.8.1",
+    "phantomjs-prebuilt": "^2.1.2",
+    "protractor": "^3.0.0",
+    "protractor-http-mock": "^0.2.1"
+  },
+  "dependencies": {
+    "bower": "^1.7.7",
+    "express": "^4.13.4",
+    "morgan": "^1.6.1"
+  }
+}
diff --git a/test/e2e/conf.js b/test/e2e/conf.js
@@ -0,0 +1,21 @@
+exports.config = {
+  seleniumAddress: "http://localhost:4444/wd/hub",
+  specs: ['todoListFeature.js'],
+  capabilities: {
+    browserName: 'chrome'
+  },
+
+  onPrepare: function() {
+    var jasmineReporters = require('jasmine-reporters');
+    jasmine.getEnv().addReporter(new jasmineReporters.TerminalReporter({
+      verbosity: 3,
+      color: true,
+      showStack: true
+    }));
+
+    require('protractor-http-mock').config = {
+      rootDirectory: __dirname,
+      protractorConfig: 'conf.js'
+    };
+  }
+};
diff --git a/test/e2e/todoListFeature.js b/test/e2e/todoListFeature.js
@@ -0,0 +1,61 @@
+describe('todo List feature', function() {
+  var newItemBox = element(by.model('todoCtrl.newItem'));
+  var addItemButton = element(by.className('add'));
+  var editButton = element(by.className('edit'));
+  var editBox = element(by.model('todoCtrl.newDescription'));
+  var submitEdit = element(by.className('submit-edit'));
+  var completeCheck = element(by.className('glyphicon-unchecked'));
+  var isCompleteIcon =  element(by.className('glyphicon-check'));
+  var counter = element(by.binding('todoCtrl.count()'));
+  var items = element.all(by.repeater(''));
+  var submitItem = function() {
+    newItemBox.sendKeys('Buy some milk');
+    addItemButton.click();
+  };
+
+  beforeEach(function(){
+    browser.get('http://localhost:8080');
+    submitItem();
+  });
+
+  it('has a title', function() {
+    expect(browser.getTitle()).toEqual('To Do List');
+  });
+
+  it('adds an item to the list', function() {
+    expect(items.get(0).getText()).toEqual('Buy some milk');
+  });
+
+
+  it('clears the previous item after it has been added', function() {
+    expect(element(by.model('todoCtrl.newItem')).getAttribute('value')).toEqual("");
+  });
+
+
+  it('allows the same item to be added more than once', function() {
+    submitItem();
+    expect(items.get(1).getText()).toEqual('Buy some milk');
+  });
+
+  it('allows an item to be edited', function() {
+    editButton.click();
+    editBox.sendKeys("y bars");
+    submitEdit.click();
+    expect(items.get(0).getText()).toEqual('Buy some milky bars');
+  });
+
+  it('marks items as complete', function(){
+    completeCheck.click();
+    expect(isCompleteIcon.isDisplayed()).toBe(true);
+  });
+
+  it('unmarks items as complete', function(){
+    completeCheck.click();
+    isCompleteIcon.click();
+    expect(completeCheck.isDisplayed()).toBe(true);
+  });
+
+  it('tracks the number of things to do', function() {
+    expect(counter.getText()).toEqual("You have completed 0/1 things on your to do list");
+  });
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		var todoList = angular.module('TodoList', ['ngResource']);
Copy link houndci-bot Jan 31, 2016 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. 'angular' is not defined. Copy link houndci-bot Jan 31, 2016 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others. Learn more. 'angular' is not defined.