AngularJS ToDo List with Animation

Size
4,340 Kb
Views
20,240

How do I make an angularjs todo list with animation?

AngularJS todo list that uses angular-animate (ngAnimate) to include some CSS animations on enter and leave.. What is a angularjs todo list with animation? How do you make a angularjs todo list with animation? This script and codes were developed by Joseph Martucci on 25 October 2022, Tuesday.

AngularJS ToDo List with Animation Previews

AngularJS ToDo List with Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>AngularJS ToDo List with Animation</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<main ng-app="toDoApp" ng-controller="toDoControl">
<form ng-submit="addToDo()"> <label for="todo">I need to </label>
<input id="todo" name="todo" type="text" ng-model="formToDo"/> <label for="dueDate"> by </label>
<input id="dueDate" name="dueDate" type="text" ng-model="formDueDate" placeholder="mm/dd/yy"/> <button type="submit" ><i class="fa fa-pencil"></i></button>
</form>
<table > <tr ng-repeat="toDo in toDos" class="todo-item"> <td class="todo-col">{{toDo.description}}</td> <td class="date-col">{{toDo.dueBy | date:'MMM dd, yyyy'}}</td> <td class="delete-col"><i class="fa fa-trash-o fa-2x" ng-click="removeToDo(toDo)"></table>
</main> <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>
<script src='https://rawgit.com/angular/bower-angular-animate/v1.2.9/angular-animate.js'></script> <script src="js/index.js"></script>
</body>
</html>

AngularJS ToDo List with Animation - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Oswald:300);
/* animations */
@-webkit-keyframes wiggle { 25% { -webkit-transform: rotate(-3deg); } 75% { -webkit-transform: rotate(3deg); }
}
@-moz-keyframes wiggle { 25% { -moz-transform: rotate(-3deg); } 75% { -moz-transform: rotate(3deg); }
}
@keyframes wiggle { 25% { -webkit-transform: rotate(-3deg); -moz-transform: rotate(-3deg); -ms-transform: rotate(-3deg); -o-transform: rotate(-3deg); transform: rotate(-3deg); } 75% { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -ms-transform: rotate(3deg); -o-transform: rotate(3deg); transform: rotate(3deg); }
}
@-webkit-keyframes bounceOut { 20% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(0); opacity: 0; }
}
@-moz-keyframes bounceOut { 20% { -moz-transform: scale(1.1); } 100% { -moz-transform: scale(0); opacity: 0; }
}
@keyframes bounceOut { 20% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); opacity: 0; }
}
@-webkit-keyframes slideIn { 0% { -webkit-transform: translateX(-999px); } 60% { -webkit-transform: translateX(200px); } 100% { -webkit-transform: translateX(0); }
}
@-moz-keyframes slideIn { 0% { -moz-transform: translateX(-999px); } 60% { -moz-transform: translateX(200px); } 100% { -moz-transform: translateX(0); }
}
@keyframes slideIn { 0% { -webkit-transform: translateX(-999px); -moz-transform: translateX(-999px); -ms-transform: translateX(-999px); -o-transform: translateX(-999px); transform: translateX(-999px); } 60% { -webkit-transform: translateX(200px); -moz-transform: translateX(200px); -ms-transform: translateX(200px); -o-transform: translateX(200px); transform: translateX(200px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); }
}
* { box-sizing: border-box;
}
body { background: #45B29D; color: #F3F3F3; font-family: 'Oswald', sans-serif; font-size: 22px;
}
@media (max-width: 400px) { body { font-size: 16px; }
}
form { text-align: center; margin-bottom: 20px;
}
input { color: #F3F3F3; padding: 5px; border: 0; border-bottom: 2px solid #F3F3F3; background: transparent; outline: 0; width: 200px;
}
input:focus { outline: 0;
}
input::-webkit-input-placeholder { color: #cdcdcd;
}
input :-moz-placeholder { /* Firefox 18- */ color: #cdcdcd;
}
input ::-moz-placeholder { /* Firefox 19+ */ color: #cdcdcd;
}
input :-ms-input-placeholder { color: #cdcdcd;
}
label, input { margin-right: 10px;
}
main { padding: 0 40px; margin: 40px auto; overflow: hidden; min-width: 300px; width: 60%;
}
button { -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; text-align: center; background: #334D5C; border: 4px solid #21323b; height: 48px; width: 48px; text-transform: uppercase; margin: 20px 0;
}
button:hover, button:focus { background: #E27A3F; border-color: #cf5f1f; outline: 0;
}
.todo-col { width: 70%;
}
.date-col { width: 30%;
}
.delete-col { width: 40px;
}
tr { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
tr:nth-child(odd) { background: #3ea08d;
}
.todo-item.ng-enter { -webkit-animation: slideIn 0.4s ease-in-out; -moz-animation: slideIn 0.4s ease-in-out; animation: slideIn 0.4s ease-in-out;
}
.todo-item.ng-leave { -webkit-animation: bounceOut 0.4s linear; -moz-animation: bounceOut 0.4s linear; animation: bounceOut 0.4s linear;
}
td { padding: 5px;
}
tr:hover { background: #DF4949;
}
.fa-trash-o { cursor: pointer;
}
.fa-trash-o:hover { -webkit-animation: wiggle 0.4s linear infinite; -moz-animation: wiggle 0.4s linear infinite; animation: wiggle 0.4s linear infinite;
}

AngularJS ToDo List with Animation - Script Codes JS Codes

var toDoApp = angular.module('toDoApp', ['ngAnimate']);
toDoApp.controller('toDoControl', function ($scope) { $scope.toDos = [ {'description': 'Wash the car', 'dueBy': Date.now()}, {'description': 'Try out Angular.js on CodePen', 'dueBy' : Date.now()} ]; $scope.addToDo = function(){ var formattedDate = Date.parse($scope.formDueDate); $scope.toDos.push({description:$scope.formToDo, dueBy:formattedDate}); $scope.formToDo = ''; $scope.formDueDate = ''; }; $scope.removeToDo = function(toDo){ var index = $scope.toDos.indexOf(toDo); $scope.toDos.splice(index, 1); };
});
AngularJS ToDo List with Animation - Script Codes
AngularJS ToDo List with Animation - Script Codes
Home Page Home
Developer Joseph Martucci
Username jjmartucci
Uploaded October 25, 2022
Rating 4
Size 4,340 Kb
Views 20,240
Do you need developer help for AngularJS ToDo List with Animation?

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!

Joseph Martucci (jjmartucci) Script Codes
Create amazing marketing copy 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!