makersacademy · jelgar1 · Jan 29, 2016 · Jan 29, 2016 · Jan 29, 2016 · Jan 30, 2016
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+bower_components/
+node_modules/
diff --git a/bower.json b/bower.json
@@ -0,0 +1,28 @@
+{
+  "name": "todo_challenge",
+  "homepage": "https://github.com/jelgar1/todo_challenge",
+  "authors": [
+    "Jelgar <[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"
+  }
+}
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,44 @@
+body {
+  color: black;
+  font-family: futura;
+  text-align: center;
+  background: url("../images/home_background.jpg") no-repeat center center fixed;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+.main-box {
+  background-color: #778899;
+  margin:0 auto;
+  width: 60%;
+  text-align: center;
+  opacity: 0.9;
+  padding: 0.5%;
+}
+
+.completed-true {
+  text-decoration: line-through;
+  color: #ddd;
+}
+
+.btn {
+  font-family: futura;
+}
+
+.completed-editing {
+  border-color: red;
+}
+
+#todo-text {
+  width: 50%;
+  text-align: center;
+  font-family: futura;
+}
+
+#checkbox-form {
+  margin:0 auto;
+  width:40%;
+  text-align: left;
+}
diff --git a/images/home_background.jpg b/images/home_background.jpg
diff --git a/index.html b/index.html
@@ -0,0 +1,38 @@
+<!doctype html>
+<html lang="en" ng-app="ToDoList">
+  <head>
+    <!-- <meta charset="utf-8"> -->
+    <title>Jon's ToDo List</title>
+    <!-- <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"> -->
+    <link rel="stylesheet" type="text/css" 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>
+  </head>
+
+  <body ng-controller="ToDoListController as ctrl">
+    <div class="main-box">
+      <h1>ToDo List by Jonathan Gardiner</h1>
+      <h3>You currently have {{ctrl.taskCount()}} things to do.</h3>
+      <h3>What do you want to do?</h3>
+      <form class="todo-form">
+        <input type="text" value="What you do today can improve all your tomorrows" id="todo-text" ng-model="ctrl.taskname">
+        <button class="btn" id="todo-submit" ng-click="ctrl.addTask(ctrl.taskname)">Add task!</button>
+      </form>
+      <br>
+      <form id="checkbox-form" ng-repeat="task in ctrl.taskList">
+        <input type="checkbox" class="checkbox" ng-click="ctrl.taskCompleted($index)">
+        <span class="completed-{{task.completed}}" ng-hide="ctrl.isEditing($index)">{{task.taskname}}</span>
+        <input type="text" value="What you do today can improve all your tomorrows" ng-show="ctrl.isEditing($index)" id="edit-text" ng-show="ctrl.taskList[$index].completed==='editing'" ng-model='ctrl.taskList[$index].taskname'>
+        <button class="btn" id="edit" ng-click="ctrl.toggleEditMode($index)" ng-hide="ctrl.isEditing($index)">edit</button>
+        <button class="btn" id='submit-changes' ng-click="ctrl.updateTask($index, ctrl.taskList[$index].taskname)" ng-show="ctrl.isEditing($index)">submit</button>
+        <button class="cross" ng-click="ctrl.deleteTask($index)">x</button>
+        <br>
+      </form>
+      <br>
+      <button class="btn" id="clear-all" ng-click="ctrl.deleteAllTasks()">Clear all tasks</button>
+    </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,41 @@
+toDoList.controller('ToDoListController', [function(){
+    var self = this;
+
+    this.taskList = [];
+
+    this.addTask = function(taskname){
+      this.taskList.push({taskname:taskname, completed:false});
+      this.taskname =  null;
+    };
+
+    this.taskCompleted = function(index){
+      this.taskList[index].completed = !this.taskList[index].completed;
+    };
+
+    this.taskCount = function(){
+      return this.taskList.length;
+    };
+
+    this.deleteTask = function(index){
+      this.taskList.splice(index,1)
+    };
+
+    this.deleteAllTasks = function(){
+      this.taskList = [];
+    };
+
+    this.updateTask = function(index, taskname){
+      this.taskList.splice(index, 1, {taskname:taskname, completed:false});
+    };
+
+    this.toggleEditMode = function(index){
+       this.taskList[index].completed ='editing'
+    }
+    this.isEditing = function(index){
+      if(this.taskList[index].completed==='editing') {
+        return true;
+      } else {
+        return false;
+      }
+    };
+}]);
diff --git a/package.json b/package.json
@@ -0,0 +1,35 @@
+{
+  "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/jelgar1/todo_challenge.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/jelgar1/todo_challenge/issues"
+  },
+  "homepage": "https://github.com/jelgar1/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",
+    "karma-spec-reporter": "0.0.23",
+    "phantomjs": "^2.1.3",
+    "protractor": "^3.0.0"
+  },
+  "dependencies": {
+    "http-server": "^0.8.5"
+  }
+}
diff --git a/test/e2e/conf.js b/test/e2e/conf.js
@@ -0,0 +1,4 @@
+exports.config = {
+  seleniumAddress: 'http://localhost:4444/wd/hub',
+  specs: ['toDoFeatures.js']
+}
diff --git a/test/e2e/toDoFeatures.js b/test/e2e/toDoFeatures.js
@@ -0,0 +1,70 @@
+describe('ToDo List', function() {
+
+  beforeEach(function() {
+    browser.get('http://localhost:8080');
+  });
+  var newTaskBox = element(by.model('ctrl.taskname'));
+  var addTaskBtn = element(by.id('todo-submit'))
+  var clearAllBtn = element(by.id('clear-all'))
+  var editBtn = element(by.id('edit'))
+  var editTextBox = element(by.id('edit-text'))
+  var submitChangesButton = element(by.id('submit-changes'))
+  it('has a title', function() {
+    expect(browser.getTitle()).toEqual("Jon's ToDo List");
+  });
+
+  describe('Adds a task to the list', function() {
+    beforeEach(function() {
+      newTaskBox.sendKeys('Feed the cat');
+      addTaskBtn.click();
+    });
+    it('can add tasks to the list', function() {
+    expect(element(by.className('completed-false')).getText()).
+      toEqual('Feed the cat');
+    });
+
+    describe('Marks task as complete', function() {
+      var taskCompletedBtn = element(by.className('checkbox'));
+      beforeEach(function() {
+        taskCompletedBtn.click();
+      });
+      it('allows users to mark tasks as completed', function() {
+        expect(element(by.className('completed-true')).isPresent()).toBe(true);
+      });
+
+      it('allows users to mark tasks as incomplete again', function() {
+        taskCompletedBtn.click();
+        expect(element(by.className('completed-false')).isPresent()).toBe(true);
+      });
+    });
+
+    describe('Deletes a task', function() {
+      var deleteTaskBtn = element(by.className('cross'))
+      beforeEach(function() {
+        deleteTaskBtn.click();
+      });
+      it('allows users to delete a task', function() {
+        expect(element(by.className('completed-false')).isPresent()).toBeFalsy();
+      });
+    });
+
+    it('counts the number of tasks on the list', function() {
+      expect(element(by.binding('ctrl.taskCount()')).getText()).toEqual('You currently have 1 things to do.');
+    });
+
+    it('allows users to clear all tasks', function() {
+      newTaskBox.sendKeys('Learn Angular');
+      addTaskBtn.click();
+      clearAllBtn.click();
+      expect(element(by.className('completed-false')).isPresent()).toBeFalsy();
+    });
+
+    it('allows users to edit a task', function(){
+      editBtn.click();
+      editTextBox.sendKeys(' EDITED');
+      submitChangesButton.click();
+      expect(element(by.className('completed-false')).getText()).
+        toEqual('Feed the cat EDITED');
+    });
+  });
+});
diff --git a/test/karma.conf.js b/test/karma.conf.js
@@ -0,0 +1,74 @@
+// Karma configuration
+// Generated on Fri Jan 29 2016 16:00:12 GMT+0000 (GMT)
+
+module.exports = function(config) {
+  config.set({
+
+    // base path that will be used to resolve all patterns (eg. files, exclude)
+    basePath: '../',
+
+
+    // frameworks to use
+    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
+    frameworks: ['jasmine'],
+
+
+    // list of files / patterns to load in the browser
+    files: [
+      'bower_components/angular/angular.js',
+      'bower_components/angular-route/angular-route.js',
+      'bower_components/angular-resource/angular-resource.js',
+      'bower_components/angular-mocks/angular-mocks.js',
+      'js/**/*.js',
+      'test/**/*.spec.js'
+    ],
+
+
+    // list of files to exclude
+    exclude: [
+    ],
+
+
+    // preprocess matching files before serving them to the browser
+    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
+    preprocessors: {
+    },
+
+
+    // test results reporter to use
+    // possible values: 'dots', 'progress'
+    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
+    reporters: ['spec'],
+
+
+    // web server port
+    port: 9876,
+
+
+    // enable / disable colors in the output (reporters and logs)
+    colors: true,
+
+
+    // level of logging
+    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
+    logLevel: config.LOG_INFO,
+
+
+    // enable / disable watching file and executing tests whenever any file changes
+    autoWatch: true,
+
+
+    // start these browsers
+    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
+    browsers: ['PhantomJS'],
+
+
+    // Continuous Integration mode
+    // if true, Karma captures browsers, runs the tests and exits
+    singleRun: false,
+
+    // Concurrency level
+    // how many browser should be started simultaneous
+    concurrency: Infinity
+  })
+}
diff --git a/test/todoListController.spec.js b/test/todoListController.spec.js
@@ -0,0 +1,50 @@
+describe('ToDoListController', function() {
+  beforeEach(module('ToDoList'));
+
+  var ctrl;
+
+  beforeEach(inject(function($controller) {
+    ctrl = $controller('ToDoListController');
+  }));
+
+  it('initializes with an empty list', function(){
+    expect(ctrl.taskList).toEqual([]);
+  });
+
+  describe('A task is added', function() {
+    beforeEach(inject(function() {
+      ctrl.addTask('Feed the cat');
+    }))
+
+    it('can add a task to the list', function() {
+      expect(ctrl.taskList[0].taskname).toContain('Feed the cat');
+    });
+
+    it('sets a task as not completed by default', function() {
+      expect(ctrl.taskList[0].completed).toEqual(false);
+    });
+
+    it('can set a task as completed', function() {
+      ctrl.taskCompleted(0);
+      expect(ctrl.taskList[0].completed).toEqual(true);
+    });
+
+    it('counts the number of incomplete tasks', function() {
+      expect(ctrl.taskCount()).toEqual(1);
+    });
+
+    it('deletes a task', function(){
+      ctrl.deleteTask(0);
+      expect(ctrl.taskList[0]).not.toBeDefined();
+    });
+    it('clears all tasks', function(){
+      ctrl.addTask('Learn AngularJS');
+      ctrl.deleteAllTasks();
+      expect(ctrl.taskList[0]).not.toBeDefined();
+    });
+    it('edits a task', function() {
+      ctrl.updateTask(0, 'Feed the cat EDITED');
+      expect(ctrl.taskList[0].taskname).toEqual('Feed the cat EDITED');
+    });
+  });
+});