Jonathan Gardiner - ToDo List Challenge

.bowerrc

@@ -0,0 +1 @@
+{ "directory": "public/bower_components" }

.gitignore

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

.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
     "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

Procfile

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

README.md

@@ -1,73 +1,51 @@
-# Todo Challenge
+#ToDo List
+##Features:
 
-* 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
+Users can add tasks to the do list.
 
-Steps
--------
+Users can mark a task as complete and the task will change color and strikethrough.
 
-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:
+Users can delete individual tasks as well as all tasks.
 
-## Challenge
+Users can edit individual tasks and the task list will update and remain the order.
 
-![Todo mockup](https://makersacademy.mybalsamiq.com/mockups/2914603.png?key=afabb09aef2901a2732515ae4349c1ec0458294b)
+Users have a number of total tasks at the top of the page so they don't have to count them all.
 
-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!)
+####Future Features:
+Users are able to only delete the tasks which have been completed. (WIP)
 
-Here are the core user stories:
+Users can see a total number of incomplete tasks and a total for complete tasks.
 
-```
-As a forgetful person
-I want to store my tasks
-So that I don't forget them
 
-As a person with limited time
-I want to instantly be able to update my todo list (adding and changing entries)
-So that I have more time to think about other things
+![alt text](./images/todo_screenshot.png "Todo screenshot1")
 
-As a person who actually gets stuff done
-I want to mark my tasks as done
-So that I don't do them twice
-```
+##Installation:
 
-Here are some other user stories you may choose to implement:
+You can try the ToDo List online:
 
-```
-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
+COMING SOON!!
 
-As a person who doesn't like counting by hand
-I want to see a total number of tasks
-So that I don't have to count
+or install it locally:
 
-As someone who has done lots of stuff
-I want to be able to clear my completed tasks
-So I never see them again
-```
+From the command line...
 
-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:
+* $ git clone [email protected]:jelgar/todo-challenge.git
+* $ cd todo-challenge
+* $ npm install
+* $ open index.html
 
-* well written, well structured acceptance and unit tests
-* clear and expressive JavaScript
-* good HTML5 markup
+##Technologies:
 
-Don't worry about deployment, and make sure you read the CONTRIBUTING.md when submitting a pull request.
+* JavaScript
+* AngularJS
+* JQuery
+* html
+* CSS
+* Jasmine
+* Protractor
+* Karma
 
-## Extensions
 
-* 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
+##Contributors:
 
-## CI
-
-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`
-* Make sure `npm start` spins up whatever serves up your app - `http-server`, Sinatra or Node
-
-Good luck!
+Jonathan Gardiner

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": "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"
+  }
+}

css/style.css

@@ -0,0 +1,62 @@
+body {
+  color: #fdf6ee;
+  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: #2f3f4f;
+  margin:0 auto;
+  width: 60%;
+  text-align: center;
+  opacity: 0.9;
+  padding: 0.5%;
+}
+
+.completed-true {
+  text-decoration: line-through;
+  color: #778899;
+}
+
+.btn {
+  font-family: futura;
+  background-color: #2f3f4f;
+  border-color: #fdf6ee;
+  color: #fdf6ee;
+  padding: 1%;
+  margin: 1%;
+}
+
+.text-box {
+  text-align: center;
+  font-family: futura;
+}
+
+#count {
+  font-family; marker felt;
+  color: red;
+  font-size: 1.4em;
+}
+
+#incomplete {
+  font-family; marker felt;
+  color: red;
+  font-size: 1.4em;
+}
+
+#todo-text {
+  width: 50%;
+  text-align: center;
+  font-family: futura;
+}
+
+#checkbox-form {
+  margin:0 auto;
+  width:40%;
+  text-align: left;
+}

index.html

@@ -0,0 +1,49 @@
+<!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="public/bower_components/jquery/dist/jquery.js"></script>
+    <script src="public/bower_components/angular/angular.js"></script>
+    <script src="public/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 <span id="count">{{ctrl.taskCount()}}</span>
+        <ng-pluralize count="ctrl.taskCount()"
+                       when="{'1': 'task',
+                              'other': 'tasks'}">
+         </ng-pluralize>
+       of which <span id="incomplete">{{ctrl.incompleteCount()}}</span>
+       <ng-pluralize count="ctrl.incompleteCount()"
+                      when="{'1': 'is',
+                             'other': 'are'}">
+        </ng-pluralize>
+         incomplete.</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" class="text-box" 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 class="text-box" 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="btn" id='cross' ng-click="ctrl.deleteTask($index)">x</button>
+        <br></br>
+      </form>
+      <br>
+      <button class="btn" id="clear-all" ng-click="ctrl.deleteAllTasks()">Clear all tasks</button>
+      <button class="btn" id="clear-completed" ng-click="ctrl.clearCompletedTasks()">Clear completed tasks</button>
+    </div>
+  </body>
+</html>

js/app.js

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

js/toDoListController.js

@@ -0,0 +1,57 @@
+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.incompleteCount = function(){
+    var incomplete = 0
+    angular.forEach(this.taskList, function(task) {
+      if (!task.completed) incomplete = incomplete + 1
+    });
+    return incomplete
+  };
+
+  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.clearCompletedTasks = function() {
+    var oldTaskList = this.taskList;
+    this.taskList = [];
+    angular.forEach(oldTaskList, function(task) {
+      if (!task.completed) self.taskList.push(task);
+    });
+  };
+
+  this.toggleEditMode = function(index){
+    this.taskList[index].completed ='editing'
+  }
+  this.isEditing = function(index){
+    if(this.taskList[index].completed==='editing') {
+      return true;
+    } else {
+      return false;
+    }
+  };
+}]);