<!doctype html>
<html>
<head>
<title>Checklist App</title>
<link href="main.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Roboto:500,400,300,100' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body ng-app="checklistApp">
<div class="main">
<div class="head">
<div class="title">
<h1>Checklist</h1>
</div>
</div>
<div ng-view></div>
<span class="cr">Created Robert Clark</span>
</div>
<!-- Angular.js-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="http://code.angularjs.org/1.2.1/angular-route.min.js"></script>
<!-- Modules -->
<script src="apps.js"></script>
<!-- Controllers -->
<script src="controllers.js"></script>
<!-- Additional -->
</body>
</html>
<div class="editItem">
<div class="row">
<div class="col-sm-6">
<p>Edit Task</p>
<p>
<input type="text" placeholder="Task Title" ng-model="listItems[id].title">
</p>
<p>
<input type="text" placeholder="Task Description" ng-model="listItems[id].description">
</p>
<p>Task Difficulty: {{listItems[id].fibNum}}
<div class="btn-group">
<a class="btn btn-default" ng-click="listItems[id].fibNum = 1">1</a>
<a class="btn btn-default" ng-click="listItems[id].fibNum = 2">2</a>
<a class="btn btn-default" ng-click="listItems[id].fibNum = 3">3</a>
<a class="btn btn-default" ng-click="listItems[id].fibNum = 5">5</a>
<a class="btn btn-default" ng-click="listItems[id].fibNum = 8">8</a>
<a class="btn btn-default" ng-click="listItems[id].fibNum = 13">13</a>
</div>
</p>
</div>
<div class="col-sm-6">
<p>When is this task due?</p>
<input type="text" placeholder="9:00" ng-model="listItems[id].due">
</div>
</div>
<div>
<a class="btn" href="#/">Done</a>
<a href="#/" class="btn" ng-click="remove(listItems[id])">Delete</a>
</div>
</div>
<h1>List settings</h1>
var app = angular.module("checklistApp", ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider
.when('/', {
controller: 'MainController',
templateUrl: 'list.html'
})
.when('/itemSettings/:id', {
controller: 'MainController',
templateUrl: 'itemSettings.html'
})
.when('/newItem', {
controller: 'MainController',
templateUrl: 'newItem.html'
})
.when('/:id', {
controller: 'MainController',
templateUrl: 'list.html'
})
.otherwise({
redirectTo: '/'
});
});
app.factory('taskFactory', function() {
var listItems = [{
title: "Take a shower",
status: "complete",
fibNum: 2,
description: "It's always a good idea to take a shower",
due: "7:00"
}, {
title: "Review programing concepts",
status: "complete",
fibNum: 3,
description: "Including Javascript and Angular",
due: "10:00"
},{
title: "Eat a healthy lunch",
status: "incomplete",
fibNum: 2,
description: "Healthy food to get my mind ready!",
due: "11:00"
},{
title: "Charge my phone",
status: "incomplete",
fibNum: 1,
description: "I should charge my phone, so that it does not die.",
due: "12:00"
}
];
var factory = {};
factory.getListItems = function() {
return listItems;
};
return factory;
});
app.controller('MainController', ['$scope', '$routeParams', 'taskFactory', function($scope, $routeParams, taskFactory) {
$scope.id = $routeParams.id;
$scope.listItems = taskFactory.getListItems();
$scope.addTask = function() {
$scope.listItems.push({
title: $scope.newTask.title,
fibNum: $scope.newTask.fibNum,
description: $scope.newTask.description,
status: "Incomplete",
due: $scope.newTask.due
});
};
$scope.remove = function(item) {
var index = $scope.listItems.indexOf(item);
$scope.listItems.splice(index, 1);
};
}]);
app.controller('ItemController', ['$scope','$routeParams', function($scope, $routeParams) {
$scope.id = $routeParams.id;
}]);
$scope.listItems = [{
title: "Take a shower",
status: "Incomplete",
fibNum: 2,
description: "I should take a shower before my interview",
id: 4432
}, {
title: "Review Angular.js",
status: "Incomplete",
fibNum: 5,
description: "I should review concepts of Angular.js",
id: 4332
}, {
title: "Charge my phone",
status: "Incomplete",
fibNum: 1,
description: "I should charge my phone.",
id: 2232
}];
ng-click="changeClass()"
<span>Order by:</span>
<div class="btn-group orders">
<a href="" class="btn btn-default" ng-click="odata = 'status'">Status</a>
<a href="" class="btn btn-default" ng-click="odata = 'due'">Due</a>
<a href="" class="btn btn-default" ng-click="odata = 'fibNum'">Difficulty</a>
<a href="" class="btn btn-default" ng-click="odata = 'title'">A-Z</a>
</div>
<div class="checkList">
<li class="Item" ng-repeat="listItem in listItems | orderBy: odata">
<div ng-class="listItem.status === 'complete' ? 'complete' : ''">
<div class="row">
<div class="list-left col-sm-1">
<a href="#/" ng-click="listItem.status === 'complete' ? listItem.status = 'incomplete' : listItem.status = 'complete'">
<i ng-class="listItem.status === 'complete' ? 'check' : ''" class="fa fa-check-circle-o fa-2x"></i>
</a>
</div>
<div class="list-center col-sm-10">
<h2>{{ listItem.title }}</h2>
<p><strong>notes:</strong> {{ listItem.description }}</p>
<div class="diff">
<h6>Due: {{ listItem.due }}</h6></div>
<div class="due">
<h6>Difficulty: {{ listItem.fibNum }}</h6></div>
</div>
<div class="list-right col-sm-1"><a href="#/itemSettings/{{$index}}"><i class="fa fa-cog fa-2x"></i></a></div>
</div>
</div>
</li>
</div>
<div class="add text-center">
<a href="#/newItem"><i class="fa fa-plus-circle fa-4x"></i></a>
</div>
.main{
max-width: 600px;
margin: 0 auto;
margin-top:50px;
background-color:rgb(248,248,248);
padding: 10px 30px 10px 30px;
border-radius:10px;
}
.title h1{
margin-left:0px;
font-size:1.8em;
}
li{
list-style-type: none;
margin-top:5px;
}
.Item{
background-color:white;
}
.list-left, .list-right{
background-color:rgb(235,235,235);
}
.list-left{
border-radius: 10px 0px 0px 10px;
}
.list-left a{
color:rgb(200,200,200);
}
.list-left a:focus{
color:rgb(200,200,200);
}
.list-left a:hover{
color:rgb(160,220,160);
}
.list-left i, .list-right i{
position: relative;
top: 50%;
transform: translateY(140%);
}
.list-right{
border-radius: 0px 10px 10px 0px;
}
.list-right a{
color:rgb(130,130,130);
}
.row {
display: flex;
}
.list-center{
width:100%;
}
.list-center h2{
margin-top:10px;
margin-bottom:7px;
font-size:1.6em;
font-family: 'Roboto', sans-serif !important;
font-weight:500;
}
.diff{
float:left;
}
.due{
float:right;
}
.complete{
color:rgb(200,200,200) !important;
text-decoration: line-through;
}
.check{
color:rgb(82,202,0);
}
.add{
padding:25px 0px 0px 0px;
}
.add a{
color:rgb(130,130,130);
}
.newItem, .editItem{
background-color:white;
padding: 20px;
border-radius:10px;
margin-bottom:25px;
}
.orders{
margin-top:10px;
margin-bottom:10px;
}
.cr{
color:rgb(210,210,210);
font-size:0.75em;
}
<div class="newItem">
<div class="row">
<div class="col-sm-6">
<p>New Task</p>
<p>
<input type="text" placeholder="Task Title" ng-model="newTask.title">
</p>
<p>
<input type="text" placeholder="Task Description" ng-model="newTask.description">
</p>
<p>Task Difficulty: {{newTask.fibNum}}
<div class="btn-group">
<a href="" class="btn btn-default" ng-click="newTask.fibNum = 1">1</a>
<a href="" class="btn btn-default" ng-click="newTask.fibNum = 2">2</a>
<a href="" class="btn btn-default" ng-click="newTask.fibNum = 3">3</a>
<a href="" class="btn btn-default" ng-click="newTask.fibNum = 5">5</a>
<a href="" class="btn btn-default" ng-click="newTask.fibNum = 8">8</a>
<a href="" class="btn btn-default" ng-click="newTask.fibNum = 13">13</a>
</div>
</p>
</div>
<div class="col-sm-6">
<p>When is this task due?</p>
<input type="text" placeholder="9:00" ng-model="newTask.due">
</div>
</div>
<div>
<a class="btn" href="#/">Discard</a>
<a class="btn" ng-click="addTask()" href="#/">Save</a>
</div>
</div>