A Pen by kevin
How do I make an a pen by kevin?
What is a a pen by kevin? How do you make a a pen by kevin? This script and codes were developed by Kevin on 13 October 2022, Thursday.
A Pen by kevin - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by kevin</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="list"> <div class="add"> <a href="" ng-click="addTodo()">+ Add a New Task</a> </div> <div class="item" ng-class="{'editing-item': editing, 'edited': todo.edited, 'completed': todo.completed}" ng-repeat="todo in todos | orderBy: 'completed'" ng-init="todo.completed = false"> <input ng-model="todo.completed" type="checkbox"/> <span ng-click="todo.completed = !todo.completed; todo.edited = true"></span> <label ng-click="editing = true" ng-hide="editing" ng-click="helloWorld()"> {{todo.name}}</label> <input ng-change="todo.edited = true" ng-blur="editing = false;" ng-show="editing" ng-model="todo.name" class="editing-label" type="text"/> <div class="actions">
<!-- <a href="" ng-click=" editing = !editing">Edit</a>--> <a href="" ng-click="saveTodos(todo)">Save</a> <a href="" ng-click="deleteTodo(todo, $index)" class="Delete">delete</a> </div> </div> </div> <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>
A Pen by kevin - Script Codes CSS Codes
body { color: #2d3339; font-family: "Varela Round"; text-align: center; background: #edeff0; font-size: 16px; }
a { color: #3f8abf; text-decoration: none; } a:hover { color: #65a1cc; }
.list { background: #fff; width: 80%; min-width: 500px; margin: 80px auto 0; border-top: 40px solid #5a6772; text-align: left; } .list .item { border-bottom: 2px solid #edeff0; padding: 17px 0 18px 17px; } .list .item label { padding-left: 5px; cursor: pointer; } .list .item .editing-label { margin-left: 5px; font-family: "Varela Round"; border-radius: 2px; border: 2px solid #a7b9c4; font-size: 16px; padding: 15px 0 15px 10px; width: 60%; } .list .item .actions { float: right; margin-right: 20px; } .list .item .actions .delete { color: #ed5a5a; margin-left: 10px; } .list .item .actions .delete:hover { color: #f28888; } .list .item.editing-item .actions { margin-top: 17px; } .list .edited label:after { content: " edited"; text-transform: uppercase; color: #a7b9c4; font-size: 14px; padding-left: 5px; } .list .completed label { color: #a7b9c4; text-decoration: line-through; } .list .add { padding: 25px 0 27px 25px; }
input[type="checkbox"] { display:none;
}
input[type="checkbox"] + span { display:inline-block; width:19px; height:19px; margin:-1px 4px 0 0; vertical-align:middle; background:url(checkbox-empty.svg) left top no-repeat; cursor:pointer;
}
input[type="checkbox"]:checked + span { background:url(checkbox-filled.svg) left top no-repeat;
}
A Pen by kevin - Script Codes JS Codes
angular.module("todoListApp", []);
'use strict';
angular.module('todoListApp')
.controller('mainCtrl', function($scope, dataService) { $scope.addTodo = function() { var todo = {name: "This is a new todo."}; $scope.todos.unshift(todo); }; $scope.helloWorld = dataService.helloWorld; dataService.getTodos(function(response) { console.log(response.data); $scope.todos = response.data; }); $scope.deleteTodo = function(todo, $index) { dataService.deleteTodo(todo); $scope.todos.splice($index, 1); }; $scope.saveTodos = function() { var filteredTodos = $scope.todos.filter(function(todo) { if(todo.edited) { return todo; }; }); dataService.saveTodos(filteredTodos); };
})
angular.module('todoListApp')
.directive('todos', function() { return { templateUrl: 'templates/todos.html', controller: 'mainCtrl', replace: true }
})
'use strict';
angular.module('todoListApp')
.service('dataService', function($http) { this.helloWorld = function() { console.log("This is the data service's method!!"); }; this.getTodos = function(callback){ $http.get('mock/todos.json') .then(callback) }; this.deleteTodo = function(todo) { console.log("The " + todo.name + " todo has been deleted!") // other logic }; this.saveTodos = function(todos) { console.log(todos.length + " todos have been saved!"); // other logic... };
});
Developer | Kevin |
Username | gnarfugh |
Uploaded | October 13, 2022 |
Rating | 3 |
Size | 3,018 Kb |
Views | 16,192 |
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!
Name | Size |
Mess svg logo | 2,249 Kb |
Hover tabs with column wrapper | 7,014 Kb |
Highlight table | 90,049 Kb |
React Scoreboard | 3,912 Kb |
Slider | 5,806 Kb |
Small fizzbuzz | 1,412 Kb |
Columns flex medicare | 3,195 Kb |
Fluid Typography | 2,797 Kb |
Vertical rhythm less mixin | 2,318 Kb |
Sticky nav | 5,206 Kb |
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!
Name | Username | Size |
Placeholder support for contentEditable elements, without JavaScript | Flesler | 1,863 Kb |
Pattern lab logo | TimPietrusky | 3,666 Kb |
Amazing CSS Menu with Notification Badges | Faizanasad | 2,549 Kb |
SVG Transform vs CSS Transform | AmeliaBR | 4,175 Kb |
Formations | Cantelope | 5,731 Kb |
3D-box | Parthviroja | 2,346 Kb |
Test | Dviate | 2,668 Kb |
CSS-Flexbox-Demo | Sstiglets | 1,709 Kb |
Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
Old calculator | Gnarfugh | 2,815 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!