Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 84 additions & 37 deletions todo-src/index.html
Original file line number Diff line number Diff line change
@@ -1,44 +1,91 @@
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.4.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>

<body ng-app="app">
<!--required for drop-down to work-->
<script src="http://code.jquery.com/jquery-2.1.4.min.js" data-semver="2.1.4" data-require="jquery@*"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://code.angularjs.org/1.4.3/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<h1 class="text-center">My little to do app!</h1>

<div id="todo" class="col-xs-6 col-xs-offset-3" ng-controller="MainCtrl">

<div class="input-group">
<input type="text" class="form-control" placeholder="Item to add to todo list" ng-model="newItem">
<!--changed to form to allow for submission via hitting enter-->
<div id="todo" class="col-xs-6 col-xs-offset-3" ng-controller="MainCtrl" >
<form>
<!--Couldnt get the input form to flush up nicely..looks fragmented like this but works-->
<div class="col-xs-2">
<!--Selector for priority-->
<select ng-model="priority" class="form-control">
<option value="" disabled selected>Priority</option>
<option value="High">High</option>
<option value="Med">Medium</option>
<!--Wanted to make this default but selected wasnt working also, l in low is lower case for a reason. See style.css-->
<option value="low">Low</option>
</select>
</div>
<div class="col-xs-9">
<input type="text" class="form-control" placeholder="Item to add to todo list" ng-model="newItem" autocomplete="off">
</div>
<div class="col-xs-1">
<span class="input-group-btn">
<button class="btn btn-default" type="button" ng-click="addItem()">
Add
<span class="glyphicon glyphicon-ok" aria-hidden="true"></span>
</button>
</span>
</div><!-- /input-group -->

<h2>stuff i gotta do asap</h2>

<ul class="list-group">
<!-- http://www.w3schools.com/css/css_float.asp -->
<li class="list-group-item clearfix" ng-repeat="do in todos">
<!--changed to submit type to allow for submission via hitting enter-->
<!--I think a blue button would look good for the select-->
<button type="submit" class="btn btn-info" ng-click="addItem()" id="submission">
<span>Submit</span>
</button>
</span>
</div>
</form>
<!--for whatever reason, setting up the above caused the spacing here to disappear on the site so I added to break lines-->
<br/>
<br/>
<h2 class="text-center">stuff i gotta do asap</h2>
<ul class="list-group">
<li class="list-group-item clearfix" ng-repeat="do in todos" ng-class="do.priority">

<span>{{do}}</span>
<button class="btn btn-danger pull-right" type="button" ng-click="deleteItem(do)">
<span class="glyphicon glyphicon-trash " aria-hidden="true"></span>
</button>

</li>
</ul>
</div>

</body>
<span>{{do.name}}</span>
<!-- This division is a text box that shows up only when the edit button has been pressed and disappears when 'ok' is hit. This is where the js function is called from.-->
<form ng-show="activity.isEdited">
<input type="text" ng-model="uInput" placeholder= {{do.name}}/>

<div class="col-xs-2">
<!--Selector for priority-->
<select ng-model="priority" class="form-control">
<option value="" disabled selected>Priority</option>
<option value="High">High</option>
<option value="Med">Medium</option>
<!--Wanted to make this default but selected wasnt working also, l in low is lower case for a reason. See style.css-->
<option value="low">Low</option>
</select>
</div>



<!--<form ng-submit = "activity.isEdited = false ; editItem(do, uInput, priority)">
-->

<button type="submit" class="btn btn-info" ng-click="activity.isEdited = false ; editItem(do, uInput, priority)"id="submission">
<span>Ok</span>
</button>
</form>

<div ng-hide="activity.isEdited">
<button class="btn btn-danger pull-right" type="button" ng-click="deleteItem($index)">
<span class="glyphicon glyphicon-trash " aria-hidden="true"></span>
</button>
<button class="btn btn-danger pull-right" ng-click="activity.isEdited = true" type="button">
<span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
</button>

</div>


</html>
</li>
</ul>
</div>
</body>
</html>
90 changes: 60 additions & 30 deletions todo-src/script.js
Original file line number Diff line number Diff line change
@@ -1,36 +1,66 @@
// Code goes here

var myApp = angular.module('app', []);

myApp.controller('MainCtrl', function ($scope){
$scope.todos = ["Learn Angular", "Learn node"];
// Code goes here


var myApp = angular.module('app', []);


myApp.controller('MainCtrl', function ($scope){
$scope.todos = [];
$scope.newItem = "";

$scope.addItem = function(){
console.log("in add");
if ($scope.newItem !== ""){
$scope.todos.push($scope.newItem);
//used to safeguard against undefined
var un_defined;

$scope.addItem = function(){
console.log("add");
if ($scope.newItem !== "" && $scope.priority !== un_defined){
$scope.todos.push({name:$scope.newItem, priority:$scope.priority});}
$scope.todos.sort(function(a,b) {
if(a.priority > b.priority) {return 1;}
if(a.priority < b.priority) {return -1;}
return 0;
});
$scope.newItem = "";
}
}

$scope.deleteItem = function(index){
console.log("delete");
$scope.todos.splice(index, 1);
}
$scope.deleteItem = function(item){
console.log("in delete");

$scope.editItem = function(item, uInput, priority){
console.log("in edit");
var index = $scope.todos.indexOf(item);
$scope.todos.splice(index, 1);
}
if (uInput) {
$scope.todos[index].name = uInput;
}
else{
$scope.todos[index].name = $scope.todos[index].name;
}
$scope.uInput = "";


});
$scope.todos[index].priority = priority;
//if (1){
//$scope.todos.splice(index, 1);
//$scope.todos.push({name:uInput, priority:priority});}
$scope.todos.sort(function(a,b) {
if(a.priority > b.priority) {return 1;}
if(a.priority < b.priority) {return -1;}
return 0;
});

/*************************
* Homework (not rly):
* - "enter" button functionality instead of clicking button
* - edit button functionality
* - button to mark item as "complete"
* - have a total number of items at the top
* - make it prettier
* - add a due date
* - add reminder (setInterval)
*
* *********************/
}

});


/*************************
* Homework (not rly):
* - "enter" button functionality instead of clicking button
* - edit button functionality
* - button to mark item as "complete"
* - have a total number of items at the top
* - make it prettier
* - add a due date
* - add reminder (setInterval)
*
* *********************/
18 changes: 15 additions & 3 deletions todo-src/style.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,16 @@
/* Styles go here */
body {
background: green;
/* Styles go here */
body {
background: green;
}
/*Priority coloring*/
.High {
color: red;
}

.Med {
color: orange;
}
/*must be lower case to enforce sorting order of High, Medium, low....i.e. capital M comes before lower case l but after uppercase L*/
.low {
color: black;
}