<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--
To-Do App with Local Storage, Add, Delete, && Search Functionality.
Any changes you make are saved for your return.
Click the "clear my local storage" button to clear cache && reset default list.
!-->
<html lang="en" ng-app="todo">
<body ng-controller="TodoCtrl" ng-init="init()">
<div class="container" id="wrapper">
<form name="createForm" class="form" novalidate>
<section class="row">
<div class="col-1" id="addTask">
<input class="form-control" type="text" data-ng-model="newTodo.Name" placeholder="I Need To..." required />
<button class="add" ng-click="addTodo(newTodo)" data-ng-disabled="createForm.$invalid">➕</button>
</div>
<div class="col-1" id="search">
<input type="text" class="form-control" data-ng-model="todoSearch.name" placeholder=" Search Tasks
@import url(https://fonts.googleapis.com/css?family=Play);
* {
font-size: 100%;
box-sizing: border-box;
}
html {
font-size: 100%;
height: 100%;
width: 100%;
box-sizing: border-box;
}
body {
background: #212225;
font-size: 16px;
font-family: 'Play', sans-serif;
text-shadow: 2px 2px #0d0d0d, -1px -1px #262626;
}
.container {
width: 70%;
margin: 80px auto;
}
.container [class*="col-"] {
color: #a8b2b3;
margin: 5px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transition: all .7s ease-in;
transition: all .7s ease-in;
}
.container .row {
border-bottom: 1px solid #5F5F60;
}
.form-control {
border: none;
border-bottom: 1px solid #5F5F60;
background: transparent;
padding: 5px;
margin: 1rem 0 1rem 0;
}
#actions {
padding: 1rem;
}
#actions button {
border: none;
padding: .35rem;
height: auto;
width: 11rem;
background: #33628A;
color: #a8b2b3;
border-radius: 2px;
text-shadow: 1px 1px #0d0d0d, -1px -1px #33628A;
-webkit-transition: all .3s ease-in;
transition: all .3s ease-in;
cursor: pointer;
}
#actions button:hover {
box-shadow: 1px 1px 1px 1px rgba(13, 13, 13, 0.5);
}
#stats {
height: auto;
line-height: 2rem;
border-bottom: none;
}
#stats span {
color: #DFB349;
}
#items {
padding: 1rem;
color: #DFB349;
}
.add {
margin-left: .5rem;
height: auto;
width: auto;
border: none;
background: transparent;
font-weight: bold;
color: #DFB349;
cursor: pointer;
text-shadow: 1px 1px #0d0d0d, -1px -1px #262626;
}
#ac {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
label {
background: transparent;
text-align: center;
cursor: pointer;
}
label button {
margin-top: 1rem;
width: 1.5em;
height: 1.5em;
border: none;
background: #DFB349;
font-weight: bold;
border-radius: 2px;
-webkit-transition: all .5s ease;
transition: all .5s ease;
cursor: pointer;
}
label button:hover, label button:active {
background: #BF4C40;
}
label input[type="checkbox"] {
background: #DFB349;
width: 1.5em;
height: 1.5em;
border-radius: 2px;
outline: none;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-transition: all .5s ease-in;
transition: all .5s ease-in;
}
label input[type="checkbox"]:checked, label input[type="checkbox"]:hover {
background: #33628A;
}
#list {
line-height: 5rem;
font-size: 1.2rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
#list .toDoLineDone {
text-decoration: line-through;
font-weight: bold;
color: #BF4C40;
}
#search input, #addTask input {
color: #a8b2b3;
background: transparent;
border: none;
border-bottom: 1px solid #5F5F60;
-webkit-transition: translateX 6s ease-in;
transition: translateX 6s ease-in;
}
#search input:focus, #addTask input:focus {
outline: none;
border: 1px solid #5F5F60;
}
#search input:focus::-webkit-input-placeholder, #addTask input:focus::-webkit-input-placeholder {
-webkit-transform: translateX(70%);
transform: translateX(70%);
opacity: 0;
}
#search input:focus::-webkit-input-placeholder:-moz-placeholder, #addTask input:focus::-webkit-input-placeholder:-moz-placeholder {
-webkit-transform: translateX(70%);
transform: translateX(70%);
opacity: 0;
}
#search input:focus::-webkit-input-placeholder::-moz-placeholder, #addTask input:focus::-webkit-input-placeholder::-moz-placeholder {
-webkit-transform: translateX(70%);
transform: translateX(70%);
opacity: 0;
}
#search input:focus::-webkit-input-placeholder:-ms-input-placeholder, #addTask input:focus::-webkit-input-placeholder:-ms-input-placeholder {
-webkit-transform: translateX(70%);
transform: translateX(70%);
opacity: 0;
}
#search input:focus::-webkit-input-placeholder::-ms-input-placeholder, #addTask input:focus::-webkit-input-placeholder::-ms-input-placeholder {
-webkit-transform: translateX(70%);
transform: translateX(70%);
opacity: 0;
}
#search input::-webkit-input-placeholder, #addTask input::-webkit-input-placeholder {
-webkit-transition: ease-in 0.3s;
transition: ease-in 0.3s;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
}
#search input:-moz-placeholder, #addTask input:-moz-placeholder {
-webkit-transition: ease-in 0.3s;
transition: ease-in 0.3s;
transform-origin: 0 50%;
}
#search input::-moz-placeholder, #addTask input::-moz-placeholder {
-webkit-transition: ease-in 0.3s;
transition: ease-in 0.3s;
transform-origin: 0 50%;
}
#search input:-ms-input-placeholder, #addTask input:-ms-input-placeholder {
-webkit-transition: ease-in 0.3s;
transition: ease-in 0.3s;
transform-origin: 0 50%;
}
#search input::-ms-input-placeholder, #addTask input::-ms-input-placeholder {
-webkit-transition: ease-in 0.3s;
transition: ease-in 0.3s;
transform-origin: 0 50%;
}
#cls {
padding: .5rem;
border: none;
}
#cls button {
border: none;
padding: .35rem;
height: auto;
width: auto;
background: #33628A;
color: #a8b2b3;
border-radius: 2px;
text-shadow: 1px 1px #0d0d0d, -1px -1px #33628A;
-webkit-transition: all .3s ease-in;
transition: all .3s ease-in;
}
#cls button:hover {
box-shadow: 1px 1px 1px 1px rgba(13, 13, 13, 0.5);
}
@media all and (min-width: 850px) {
.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
width: 100%;
border-bottom: 1px solid #5F5F60;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
[class*="col-"]:last-child {
margin-right: 0;
}
.col-1 {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.col-2 {
-webkit-box-flex: 2;
-ms-flex: 2;
flex: 2;
margin-bottom: 0;
}
}
var App = angular.module("todo", ["LocalStorageModule"]);
App.controller("TodoCtrl", function ($scope, localStorageService) {
$scope.init = function () {
$scope.newTodo = {};
$scope.todos = [];
if (!localStorageService.get("todoList")) {
$scope.todos = [
{ Name:"Make A New Pen", isDone:true},
{ Name: "Pay Phone Bill", isDone: false },
{ Name: "Fix App", isDone: true },
{ Name: "Food Shopping", isDone: false },
{ Name: "Play with Cat", isDone: false }
];
}else{
$scope.todos = localStorageService.get("todoList");
}
};
$scope.getDate = function () {
var today = new Date();
var mm = today.getMonth() + 1;
var dd = today.getDate();
var yyyy = today.getFullYear();
var date = mm + "/" + dd + "/" + yyyy;
return date;
};
$scope.addTodo = function (todoItem) {
todoItem.isDone = false;
$scope.todos.push(todoItem);
$scope.newTodo = {};
};
$scope.deleteTodo = function (index) {
$scope.todos.splice(index, 1);
};
$scope.markAllDone = function () {
$scope.todos.forEach(function (todo) {
todo.isDone = true;
});
};
$scope.uncheckAllDone = function () {
$scope.todos.forEach(function (todo) {
todo.isDone = false;
});
};
$scope.doneCount = function () {
var todoDone = 0;
$scope.todos.forEach(function (todo) {
if (todo.isDone === true) {
todoDone += 1;
}
});
return todoDone;
};
$scope.clearCompleted = function () {
var kill = [];
for (var i = 0; i < $scope.todos.length; i++) {
if ($scope.todos[i].isDone)
kill.push(i);
}
for (var i = 0; i < kill.length; i++)
$scope.todos.splice(kill[i] - i, 1);
};
$scope.almostOneNotDone = function () {
var todoDone = $scope.doneCount();
if (todoDone < $scope.todos.length) {
return true;
} else
return false;
};
$scope.deleteAll = function () {
$scope.todos = [];
};
$scope.clear = function(){
localStorageService.clearAll();
$scope.init();
};
$scope.$watch("todos",function (newVal,oldVal) {
if (newVal !== null && angular.isDefined(newVal) && newVal!==oldVal) {
localStorageService.add("todoList",angular.toJson(newVal));
}
},true);
});
