AngularJS Todolist

Developer
Rune Sejer Hoffmann
Size
7,699 Kb
Views
10,120
  1. AngularJS Todolist Previews
  2. AngularJS Todolist HTML Codes
  3. AngularJS Todolist CSS Codes
  4. AngularJS Todolist JS Codes

How do I make an angularjs todolist?

Casestudy of AngularJS and it's dependency injection and directives. This is a todolist where there is modal feedback, and you can save your list locally. - Just click on the todo when done.. What is a angularjs todolist? How do you make a angularjs todolist? This script and codes were developed by Rune Sejer Hoffmann on 10 December 2022, Saturday.

AngularJS Todolist Previews
IQ Test

AngularJS Todolist - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>AngularJS Todolist</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='todo' ng-app='myTodo' ng-controller="TodoController" data-ng-init="init()">	<p>{{toggleModal}}</p>	<h1 class='todo__headline'>My<span>Todos</span><span class="todo__count">{{ getTotalUncompleted() > 0 && getTotalUncompleted() || 'done' }}</span></h1>	<div class="todo__wrapper">	<div class="todo__links-container">	<span class="todo__link" ng-click="clear()">Clear all</span>	<span class="todo__link" ng-click="clearCompleted()">Clear completed</span>	<span class="todo__link" ng-click="saveToLocalStorage()">Save list</span>	</div>	<form>	<input class='todo__input' placeholder="What your doings today?" ng-init="focused = false" ng-focus="focused = true" ng-blur="focused = false" ng-model="item">	<button class="todo__btn" type="submit" ng-class="{'active': focused, '': !focused }" ng-click="add(list.item)">+</button>	</form>	<div ng-repeat="item in todoList | orderBy:'+':true track by $index">	<label for="checkbox-{{$index}}">	<input class="todo__item--checkbox" ng-model="item.done" id="checkbox-{{$index}}" type="checkbox">	<div class="todo__item">	<span class="done-{{item.done}}">{{item.todo}}</span>	<button class="todo__item--delete" ng-click="remove(item)">&times;</button>	</div>	<label>	</div>	<div custom-modal modal-header="header" modal-message="message" modal-toggle="toggle" modal-confirm="confirm" modal-showconfirm="showconfirm"></div>	</div>
</div>
<footer class="footer">	<div class="footer__text">	Todo app AngularJS casestudy - By Rune 2016	</div>
</footer> <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

AngularJS Todolist - Script Codes CSS Codes

@import "https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500,700";
* { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body { color: #FFFFFF; min-height: 100vh; padding: 15px; background: -webkit-linear-gradient(315deg, #1ebbca, #ebbca7); background: linear-gradient(135deg, #1ebbca, #ebbca7);
}
.todo { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: calc(100vh - 55px);
}
.todo__wrapper { position: relative; width: 100%; max-width: 600px;
}
.todo__headline { font-family: "Fira Sans", sans-serif; color: #FFFFFF; padding: 5px 15px 5px 15px; font-weight: 800; font-size: calc(2em + 1.5vw); letter-spacing: -3px;
}
.todo__headline span { font-weight: 300;
}
.todo__count { margin-left: 15px;
}
.todo__links-container { display: -webkit-box; display: -ms-flexbox; display: flex;
}
.todo__link { -webkit-box-flex: 3; -ms-flex-positive: 3; flex-grow: 3; text-align: center; font-family: "Fira Sans", sans-serif; cursor: pointer; opacity: .7; padding: 5px;
}
.todo__link:hover { opacity: 1;
}
.todo__input { -webkit-transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); transition: all 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); height: 60px; width: 100%; min-width: 200px; border-radius: 5px; border: none; outline: none; font-size: 18px; font-family: "Fira Sans", sans-serif; font-weight: 300; padding: 10px; margin-bottom: 15px; padding-right: 50px; background-color: #FFFFFF; box-shadow: 0 25px 40px -20px #3c4a56;
}
.todo__btn { height: 30px; width: 30px; cursor: pointer; position: absolute; top: 40px; right: 10px; background: #1fbbca; border: none; border-radius: 30px; font-size: 14px; outline: none; color: #FFFFFF; -webkit-transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); opacity: 0; font-weight: 600;
}
.todo__btn.active { opacity: 1;
}
.todo__checkbox { display: inline-block; height: 10px; width: 20px; background: blue;
}
.todo__item { background-color: #FFFFFF; cursor: pointer; margin-top: 10px; padding: 15px; border-radius: 5px; font-family: "Fira Sans", sans-serif; color: #757575; -webkit-transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.todo__item span { position: relative;
}
.todo__item span:before { position: absolute; top: 2px; left: 0; bottom: 0; margin: auto; content: ""; width: 0px; height: 2px; background-color: rgba(56, 52, 62, 0.3); -webkit-transition: width 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); transition: width 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.todo__item--checkbox { display: none;
}
.todo__item--checkbox:checked + .todo__item { opacity: .4;
}
.todo__item--checkbox:checked + .todo__item span:before { width: 100%;
}
.todo__item--delete { float: right; background-color: #1fbbca; color: #FFFFFF; font-size: 14px; border: none; border-radius: 30px; margin-top: -3px; margin-right: -6px;
}
.modal { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 30vw; height: 40vh; min-width: 290px; min-height: 200px; -webkit-transform: scale(0); transform: scale(0); opacity: 0; -webkit-transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); background: #1fbbca; box-shadow: 0 25px 40px -20px #3c4a56; border-radius: 3px;
}
.modal.active { -webkit-transform: scale(1); transform: scale(1); opacity: 1;
}
.modal__header { font-family: "Fira Sans", sans-serif; font-weight: 700; color: #FFFFFF; font-size: calc(2em + 2vw); letter-spacing: -3px; margin-bottom: 10px;
}
.modal__header span { font-weight: 300;
}
.modal__text { font-family: "Fira Sans", sans-serif; color: #FFFFFF; font-size: 12px; opacity: .8; margin-bottom: 5px;
}
.modal__button { border: 1px solid #FFFFFF; padding: 10px; margin: 15px; border-radius: 3px; font-family: "Fira Sans", sans-serif; background: none; color: #FFFFFF; font-size: 12px; text-transform: uppercase; cursor: pointer; font-weight: 400; -webkit-transition: background-color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); transition: background-color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.modal__button:hover { background-color: #FFFFFF; color: #1fbbca;
}
.modal__close { position: absolute; top: 5px; right: 15px; height: 24px; width: 24px; border-radius: 24px; color: #FFFFFF; background-color: #878BAA; border: none; font-size: 18px; font-weight: bold; cursor: pointer; line-height: 10px; -webkit-transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); transition: opacity 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.footer { width: 100%; margin-top: 15px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1;
}
.footer__text { font-family: "Fira Sans", sans-serif; font-size: 11px;
}

AngularJS Todolist - Script Codes JS Codes

//Todo:
//Maybe get and fetch data with $http
//Study the difference on $scope and .this
"use strict";
//CONTROLLER
var myTodo = angular.module('myTodo', []);
myTodo.controller('TodoController', function ($scope, $filter) { $scope.todoList = []; $scope.toggle = false; var jsonData; $scope.add = function () { $scope.item = angular.copy({ todo: $scope.item, done: false }); if ($scope.item.todo) { $scope.todoList.push($scope.item); $scope.item = ''; } else { $scope.callModal({ headline: 'Woah', message: 'You have write a todo' }); $scope.item = ''; } }; $scope.remove = function (item) { var index = $scope.todoList.indexOf(item); $scope.todoList.splice(index, 1); }; $scope.clearCompleted = function () { $scope.todoList = $filter('filter')($scope.todoList, function (item) { return !item.done; }); }; $scope.confirm = function () { $scope.todoList.length = 0; $scope.callModal({ headline: "It's done", message: 'All gone bye bye' }); }; $scope.clear = function () { if ($scope.todoList.length > 0) { $scope.callModal({ headline: 'Sure?', message: 'All todos will be deleted.', showconfirm: true }); } else { $scope.callModal({ headline: 'eh', message: "You can't delete what you don't have." }); } }; $scope.getTotalUncompleted = function () { var count = 0; angular.forEach($scope.todoList, function (todoList) { count += todoList.done ? 0 : 1; }); return count; }; $scope.saveToLocalStorage = function () { $scope.jsonData = angular.toJson($scope.todoList); localStorage.setItem('myTodo', $scope.jsonData); if (JSON.parse(localStorage["myTodo"])) { $scope.callModal({ headline: "It's saved", message: "Next time you come through, your list will be here." }); } else { $scope.callModal({ headline: "Meep", message: "Something went wrong, have you enabled localstorage?" }); } }; $scope.init = function () { if (!localStorage.getItem("myTodo") === null) { $scope.todoList = JSON.parse(localStorage["myTodo"]); } else { $scope.todoList = [{ todo: 'Do the laundry', done: false }, { todo: 'Pickup the kids', done: true }]; } }; $scope.callModal = function (data) { $scope.header = data.headline; $scope.message = data.message; $scope.showconfirm = data.showconfirm || false; $scope.toggle = true; };
});
//DIRECTIVE
myTodo.directive('customModal', function () { return { restrict: 'EA', transclude: true, replace: false, scope: { header: '=modalHeader', message: '=modalMessage', toggle: '=modalToggle', confirm: '=modalConfirm', showconfirm: '=modalShowconfirm' }, template: "<div class=\"modal\" ng-class=\"{ 'active' : toggle }\"> \n\t\t\t\t\t\t<button class=\"modal__close\" ng-click=\"toggle = !toggle\">&times;</button>\n\t \t\t\t\t \t<div class=\"modal__header\">{{header}}</div>\n\t \t\t\t\t \t<p class=\"modal__text\">{{message}}</p>\n\t\t\t\t\t\t<button class=\"modal__button\" ng-click=\"confirm();\" ng-show=\"showconfirm\">Yes i understand</button>\n \t </div>", controller: function ($scope) { } };
});
AngularJS Todolist - Script Codes
AngularJS Todolist - Script Codes
Home Page Home
Developer Rune Sejer Hoffmann
Username RSH87
Uploaded December 10, 2022
Rating 3
Size 7,699 Kb
Views 10,120
Do you need developer help for AngularJS Todolist?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rune Sejer Hoffmann (RSH87) Script Codes
Name
A Pen by Rune Sejer Hoffmann
CSS Pixel game
Nav ui
Svg polycat
Menu concept
RoadFURY
Login form
Another menu concept
3d mini flip player concept
Perspective CSS hover effect
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!