To Do List

.gitignore

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

CSS/main.css

@@ -0,0 +1,99 @@
+.title {
+  height: auto;
+  width: 500px;
+  border-radius: 30px;
+  background: whitesmoke;
+  border-width: thin;
+  border-color: black;
+  border-style: solid;
+  padding: 25px;
+  margin: auto;
+  margin-top: 25px;
+  opacity: 0.7;
+}
+
+.completed-false{
+  color: red;
+  font-weight: bold;
+  font-size: 30px;
+  padding: 20px;
+}
+
+.completed-true{
+  color: black;
+  font-weight: bold;
+  font-size: 30px;
+  padding: 20px;
+  text-decoration: line-through;
+}
+
+.tdl {
+  margin: auto;
+  margin-top: 30px;
+  width: 1000px;
+  /*border-style: solid;
+  border-color: black;*/
+}
+
+body {
+  text-align: center;
+  background: url(lined-paper.jpg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.tdl li {
+  background-color: whitesmoke;
+  border-radius: 10px;
+  list-style-type: none;
+  border-style: solid;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+
+#clear {
+  margin: 20px;
+  padding: 10px;
+  border-radius: 10px;
+  font-weight: bold;
+  font-size: 20px;
+}
+
+#del {
+  height:25px;
+  color: white;
+  float: right;
+  background-color: red;
+}
+
+.check {
+  float: left;
+  height: 30px;
+  width: 30px;
+}
+
+.number {
+  float: left;
+  margin-left: 25px;
+  color: black;
+  font-weight: bold;
+  font-size: 30px;
+}
+
+.newTask {
+  font-weight: bold;
+  border-radius: 20px;
+  padding: 20px;
+  margin: auto;
+  height: 70px;
+  width: 350px;
+  background: whitesmoke;
+  border-width: thin;
+  border-color: black;
+  border-style: solid;
+  opacity: 0.7;
+}
+
+#add {
+  margin-left: 15px;
+}

Gemfile

@@ -0,0 +1,4 @@
+# A sample Gemfile
+source "https://rubygems.org"
+
+# gem "rails"

README.md

@@ -1,24 +1,14 @@
-# Todo Challenge
+To Do List Single Page Application
+-----------------------------------
 
-* 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
+I've created a single page application which represents a forum for a user
+to store tasks to be completed at a later date. Users can create tasks,
+mark them as completed and delete them as they choose. Project was designed
+upon the following user stories.
 
-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!)
+User Stories
+------------
 
-Here are the core user stories:
-
-```
 As a forgetful person
 I want to store my tasks
 So that I don't forget them
@@ -30,14 +20,6 @@ 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
 
 As a person who doesn't like counting by hand
 I want to see a total number of tasks
@@ -46,28 +28,50 @@ So that I don't have to count
 As someone who has done lots of stuff
 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
-
-Don't worry about deployment, and make sure you read the CONTRIBUTING.md when submitting a pull request.
-
-## 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
+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
 
-## CI
 
-Read the `.travis.yml` if any of the steps below don't make sense! 
+Setup
+------
 
-* 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
+1. Clone this repo locally
+2. Change into the To Do List home directory in terminal
+3. Run 'npm install'
+4. Run 'bower install'
+5. Run 'open index.html'
+6. Navigate the browser according to prompts
 
-Good luck!
+Testing
+-------
+* Make sure npm & bower are installed
+
+Unit Tests:
+- Open Terminal or iTerm
+- Ensure you are in the correct directory
+- Run 'karma start test/karma.conf.js'
+
+Feature Tests:
+- Open Terminal or iTerm
+- Ensure you are in the correct directory
+* You will need 3 different tabs
+- Open a local test server by running 'http-server'
+- Run a web testing driver by running 'webdriver-manager start'
+- Run tests using 'protractor test/e2e/conf.js'
+
+* Testing will open a browser quickly to perform test for the front end
+of the application. Do not be alarmed.
+
+All tests should pass with 0 failures.
+
+Further Extensions
+------------------
+
+- Adding filters to tasks
+- Sorting tasks by importance
+- Additional prompts when deleting incomplete tasks
+- Hosting task list on an external database
+ - (Adding user sign up to allow access to unique lists?)
+- Deploying application to Heroku

bower.json

@@ -0,0 +1,28 @@
+{
+  "name": "todo_challenge",
+  "homepage": "https://github.com/JBorrell/todo_challenge",
+  "authors": [
+    "James Borrell <[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"
+  }
+}

index.html

@@ -0,0 +1,45 @@
+<!doctype html>
+<html lang="en" ng-app="ToDoList">
+  <head>
+    <meta charset="utf-8">
+    <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 tdlCtrl">
+    <div class="title">
+      <h1>What needs doing??</h1>
+      <br>
+      <h3 id="count"><ng-pluralize count="tdlCtrl.taskList.length"
+                    when="{ '0': 'Nothing to do!',
+                          'one': '1 Thing to do',
+                          'other': '{} Things to do'}">
+      </ng-pluralize></h3>
+    </div>
+    <div class="tdl">
+      <li ng-repeat="task in tdlCtrl.taskList">
+          <input class="check" type="checkbox" ng-click="tdlCtrl.taskDone($index)">
+          <span class="number">{{$index + 1}}.</span>
+          <span class="completed-{{task.completed}}">{{task.task}}</span>
+          <button id="del" ng-click="tdlCtrl.deleteTask($index)">X</button>
+          <br>
+      </li>
+    </div>
+    <br><br>
+    <div class="newTask">
+      <form name="createTask">
+        <input type="text" ng-model="tdlCtrl.taskname">
+        <input id="add" type="submit" value="Add Task!" ng-click="tdlCtrl.addTask(tdlCtrl.taskname); tdlCtrl.taskname= null"/>
+      </form>
+    </div>
+    <div class="clearList">
+      <button id="clear"ng-click="tdlCtrl.clearList()">Clear List</button>
+    </div>
+  </body>
+</html>

js/app.js

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

js/toDoListController.js

@@ -0,0 +1,22 @@
+toDoList.controller('ToDoListController', [function(){
+    var self = this;
+
+    self.taskList = [{task: "Finish Challenge", completed: true}];
+
+    self.addTask = function(taskname){
+      self.taskList.push({task: taskname, completed: false})
+    };
+
+    self.taskDone = function(tasknumber){
+      self.taskList[tasknumber].completed = !self.taskList[tasknumber].completed
+    }
+
+    self.deleteTask = function(tasknumber){
+      self.taskList.splice(tasknumber, 1)
+    }
+
+    self.clearList = function(){
+      self.taskList = [];
+    }
+
+}]);

test/e2e/conf.js

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