todo challenge

.gitignore

@@ -0,0 +1,2 @@
+/bower_components
+/node_modules

.jshintrc

@@ -89,5 +89,5 @@
     "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
 }

.travis.yml

@@ -3,7 +3,7 @@ script:
   - node_modules/.bin/protractor test/e2e/conf.js --browser=firefox
 language: node_js
 node_js:
-  - "0.10"
+  - "5.4.1"
 before_script:
   - bower install
   - "export DISPLAY=:99.0"

README.md

@@ -1,22 +1,11 @@
-# Todo Challenge
+# Makers Academy Weekend Challenge: Todo List
 
-* 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
+The task is to build a Todo list as a mini front-end application.  The main technologies used will be JavaScript, Angular, CSS and HTMl.  I will be using TDD to drive the production of the app.  
 
-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!)
+Testing frameworks will include Karma for back-end and Protractor for front-end and user experience.
 
 Here are the core user stories:
+================
 
 ```
 As a forgetful person
@@ -30,11 +19,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 +33,36 @@ 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:
-
-* well written, well structured acceptance and unit tests
-* clear and expressive JavaScript
-* good HTML5 markup
+# Screen Shot
 
-Don't worry about deployment, and make sure you read the CONTRIBUTING.md when submitting a pull request.
+![myimage-alt-tag](/Users/TY/Desktop/todo-screenshot.png)
 
-## Extensions
+Setup
+========
 
-* 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
+* Clone this repo and change into it with ``` cd todo_challenge```.
+* If you don't already have them, install node and bower with ```$ brew install node``` and then ```$ npm install bower```.
+* Install package dependencies by with ```$ npm install``` and ```$ bower install```.
 
-## CI
+Usage
+========
 
-Read the `.travis.yml` if any of the steps below don't make sense! 
+* Launch the app within your browser with ```$ open index.html```.
+* To add a task, simply fill in the box and hit the ```Add Todo``` button.
+* To mark a task as done just click the checkbox.
+* You can remove completed todos with the ```Remove Completed Todo```
+* If you want to view just the active, completed or all todos you can use the buttons directly above the list.
+* To permanently remove all todos, just use the ```Clear List``` button at the bottom.
 
-* 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
+Tests
+=============
 
-Good luck!
+* To run the Karma tests for the Angular controller, you will need to have the Karma CLI installed, ```$ npm install -g karma-cli```.
+* The tests can now be run with ```$ karma start spec/karma.conf.js```.
+* When finished just use ```ctrl + c``` to exit.
+* The Protractor tests require that you have the Java Development Kit installed. * You can check if you have it with ```$ java -version```. If you don't, you can get it from here.
+* Protractor will also need to be installed globally with ```$ npm install -g protractor```. This will also install webdriver-manager.
+* webdriver-manager will need to be updated to make sure it has the correct binaries to get an instance of Selenium Server running (what we'll be using for the tests). Do this with ```webdriver-manager update```.
+* Now launch it with ```webdriver-manager start```.
+* Now the app will need serving, do so with ```http-server```.
+* Finally run the tests with ```$ protractor test/e2e/conf.js```.

bower.json

@@ -0,0 +1,28 @@
+{
+  "name": "todo_challenge",
+  "homepage": "https://github.com/TY231618/todo_challenge",
+  "authors": [
+    "Tony Young <[email protected]>"
+  ],
+  "description": "",
+  "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/main.css

@@ -0,0 +1,32 @@
+body {
+  text-align: center;
+  background-image: url(/Users/TY/Desktop/stickynote.jpg);
+}
+
+h2 {
+  font-family: Sans-Serif;
+  width:800px;
+  margin:10px auto;
+  text-align:left;
+  padding:10px;
+  padding-left: 300px;
+}
+
+.done {
+  text-decoration: line-through; color: #ccc;
+}
+
+.center{
+  width:200px;
+  margin:0 auto;
+  text-align:left;
+}
+
+p {
+  position: fixed;
+  bottom: 200px;
+  right: 800px;
+  font-family: Sans-Serif;
+  text-decoration: underline;
+  font-weight: bold;
+}

index.html

@@ -0,0 +1,47 @@
+<!doctype html>
+<html lang="en" ng-app="TodoList">
+  <head>
+
+    <meta charset="utf-8">
+
+    <title>Todo List Challenge</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">
+    <br>
+    <div>
+      <form class="form-horizontal" name="frm" ng-submit="todoCtrl.addTodo(todoCtrl.newTodo)">
+        <input type="text" name="newTodo" ng-model="todoCtrl.newTodo" placeholder="Add a todo..." required/>
+        <br><br>
+        <button class="btn btn-success btn-xs" ng-click="todoCtrl.allTodo()">View All</button>
+        <button class="btn btn-success btn-xs" ng-click="todoCtrl.activeTodo()">View Active</button>
+        <button class="btn btn-success btn-xs" ng-click="todoCtrl.completedTodo()">View Completed</button>
+        <button class="btn btn-info btn-xs"  ng-click="todoCtrl.addTodo(todoCtrl.newTodo)">Add Todo</button>
+        <button class="btn btn-info btn-xs" ng-click="todoCtrl.removeTodo()">Remove Completed Todo</button>
+        <button class="btn btn-danger btn-xs" ng-click="todoCtrl.clearAll()">Clear List</button>
+
+      </form>
+
+      <br><br>
+      <h2>My list of todos.....</h2>
+      <ul class="center" ng-repeat="list in todoCtrl.todos">
+        <li>
+            <span ng-class="{'done': list.done}">{{list.title}}</span>
+            <input type="checkbox" ng-model="list.done"/>
+        </li>
+      </ul>
+      <p>Number of Todos: {{todoCtrl.countTodo()}}</p>
+
+    </div>
+  </body>
+</html>

js/app.js

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

js/todoListController.js

@@ -0,0 +1,65 @@
+todoList.controller('TodoListController', function() {
+  var self = this;
+
+  self.todos = [];
+  self.filteredTodoList = [];
+  self.oldList = [];
+
+  self.addTodo = function(newTodo){
+    self.allTodo();
+    self.todos.push({title: newTodo, done: false});
+    self.newTodo = '';
+    self.filteredTodoList = self.todos;
+
+  };
+
+  self.removeTodo = function () {
+    self.allTodo();
+    self.oldList  = self.todos;
+    self.todos = [];
+
+
+   for (var i = 0; i < self.oldList.length; i++) {
+     if (!self.oldList[i].done) {
+       self.todos.push(self.oldList[i]);
+     }
+   }
+   self.filteredTodoList = self.todos;
+
+  }
+
+  self.completedTodo = function () {
+    self.oldList = self.filteredTodoList;
+    self.todos = [];
+
+   for (var i = 0; i < self.oldList.length; i++) {
+     if (self.oldList[i].done) {
+       self.todos.push(self.oldList[i]);
+     }
+   }
+  }
+
+  self.activeTodo = function () {
+    self.oldList = self.filteredTodoList;
+    self.todos = [];
+
+    for (var i = 0; i < self.oldList.length; i++) {
+      if (!self.oldList[i].done) {
+        self.todos.push(self.oldList[i]);
+      }
+    }
+  }
+
+  self.allTodo = function () {
+    self.todos = self.filteredTodoList;
+  }
+
+  self.countTodo = function () {
+    return self.todos.length;
+  }
+
+  self.clearAll = function() {
+    self.todos = [];
+    self.filteredTodoList = [];
+  }
+});

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "todo_challenge",
+  "version": "1.0.0",
+  "description": "* 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",
+  "main": "index.js",
+  "directories": {
+    "doc": "docs"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TY231618/todo_challenge.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/TY231618/todo_challenge/issues"
+  },
+  "homepage": "https://github.com/TY231618/todo_challenge#readme",
+  "devDependencies": {
+    "jasmine-core": "^2.4.1",
+    "karma": "^0.13.19",
+    "karma-chrome-launcher": "^0.2.2",
+    "karma-jasmine": "^0.3.6",
+    "karma-phantomjs-launcher": "^1.0.0",
+    "phantomjs": "^2.1.3",
+    "protractor": "^3.0.0"
+  },
+  "dependencies": {
+    "http-server": "^0.8.5"
+  }
+}

test/e2e/conf.js

@@ -0,0 +1,4 @@
+exports.config = {
+  seleniumAddress: 'http://localhost:4444/wd/hub',
+  specs: ['todoListFeature.js']
+}

test/e2e/todoListFeature.js

@@ -0,0 +1,12 @@
+describe('Todo List', function() {
+
+
+  beforeEach(function() {
+    browser.get('http://localhost:8080');
+  });
+
+  it('has a title', function() {
+    expect(browser.getTitle()).toEqual('Todo List Challenge');
+  });
+
+});