A Pen by kevin

Developer
Kevin
Size
3,018 Kb
Views
16,192
  1. A Pen by kevin Previews
  2. A Pen by kevin HTML Codes
  3. A Pen by kevin CSS Codes
  4. A Pen by kevin JS Codes

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 Previews
IQ Test

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... };
});
A Pen by kevin - Script Codes
A Pen by kevin - Script Codes
Home Page Home
Developer Kevin
Username gnarfugh
Uploaded October 13, 2022
Rating 3
Size 3,018 Kb
Views 16,192
Do you need developer help for A Pen by kevin?

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!

Kevin (gnarfugh) Script Codes
Name
Final responsive typography forever
Understanding closures
Flex dropdown nav
Vertical rhythm less mixin
Highlight table
Columns flex medicare
Hover icon link over image
Ajax Flickr Search
Hover tabs with column wrapper
Image slider
Create amazing blog posts 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!