ToDo

Developer
António Capelo
Size
8,475 Kb
Views
12,144
  1. ToDo Previews
  2. ToDo HTML Codes
  3. ToDo CSS Codes
  4. ToDo JS Codes

How do I make an todo?

Simple 'todo' web app built with AngularJS, using the browser's localStorage to persist the user's items.. What is a todo? How do you make a todo? This script and codes were developed by António Capelo on 15 December 2022, Thursday.

ToDo Previews
IQ Test

ToDo - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>ToDo</title> <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.4.2/pure-min.css" /> <link rel='stylesheet prefetch' href='https://yui.yahooapis.com/pure/0.4.2/pure-min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div ng-app="todoListApp"> <!--[if lt IE 7]> <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> <![endif]--> <!-- Add your site or application content here --> <div class="container"> <div class="pure-g-r" ng-controller="TodosController"> <div class="pure-u-1-1 header"> <h1 class="name" ><span class="first-name">TO</span>DO<span class="check">&#x2713</span></h1> <h3 class="desc">Important stuff</h3> </div> <div class="pure-u-1-1 todos"> <div class="help-container"><span class="help" ng-click="turnMeOn()">?</span></div> <div class="todos-container shadow"> <div> <newtodo /> </div> <ul class="todo-list "> <todo ng-repeat="item in todosFiltered = (getTodos() | filter:filterElements) track by item.id" /> </ul> <div class="list-footer"> <button class="removeBtn" ng-disabled="!todosFiltered.length" ng-click="cleanSelected()">Clear Selected</button> <filters class="filters"></filters> <summary class="summary"/> </div> </div> </div>
</div> </div> <div class="footer">A. Capelo - <a target="_blank" class="homepage" href="http://www.antoniocapelo.com">antoniocapelo.com</a></div>
</div> <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

ToDo - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Oswald:400,300,700);
* { box-sizing: border-box;
}
html { font-family: 'Oswald', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body { font-family: 'Oswald', Helvetica, Arial, sans-serif; margin: 0 auto; padding: 2em 2em 4em; font-size: 16px; line-height: 1.5em; color: #312a18; background: #cacbca; -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, 0.06); -moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.06); box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
}
.footer { width: 100%; font-size: 20px; text-align: center; color: #cacbca; position: fixed; left: 0px; bottom: 0px; height: 40px; line-height: 40px; width: 100%; background: #B14242;
}
.footer .homepage { color: #cacbca;
}
.footer .homepage:hover { color: black;
}
@keyframes colorize { 0% { -webkit-filter: grayscale(100%); } 100% { -webkit-filter: grayscale(0%); }
}
@-webkit-keyframes colorize { 0% { -webkit-filter: grayscale(100%); } 100% { -webkit-filter: grayscale(0%); }
}
.header { text-align: center;
}
.header .name { font-family: 'Oswald', Helvetica, sans-seriff; margin-bottom: 55px; text-shadow: 2px 2px 6px black; font-size: 110px; margin-top: 20px; color: #B14242; line-height: 100px; position: relative;
}
.header .name .first-name { color: #332121;
}
.header .name .check { position: absolute; top: 42px; font-size: 66px;
}
.desc { font-family: 'Oswald', Helvetica, sans-seriff; font-weight: bold; font-size: 32px; margin: 10px; text-decoration: underline; margin-bottom: 45px;
}
.shadow { -moz-box-shadow: 0 8px 86px 1px black; -webkit-box-shadow: 0 8px 86px 1px black; box-shadow: 0 8px 86px 1px black;
}
.todos { text-align: center;
}
.todos .help-container { width: 100%; max-width: 800px; margin: 0 auto;
}
.todos .help-container .help { cursor: pointer; display: block; font-family: arial; opacity: 0.45; width: 35px; height: 35px; background: grey; padding: 5px; line-height: 27px; font-size: 22px; border-radius: 24px; text-align: center; font-weight: bold; color: #F3F0EB; margin-bottom: 20px;
}
.todos .help-container .help:hover { opacity: 1;
}
.todos .todo-item-text { padding-left: 35px;
}
.todos .todos-container { font-family: 'Oswald',Helvetica, Arial, sans-serif; max-width: 800px; width: 100%; margin: 0 auto; border: 1px solid grey;
}
.todos .todos-container .todo-item-container { background: white; list-style: none; padding: 10px; max-width: 798px; width: 100%; border-top: 1px dotted black; font-size: 26px; line-height: 26px;
}
.todos .todos-container .todo-item-container label:hover::after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); opacity: 0.5;
}
.todos .todos-container .todo-item-container input[type=checkbox]:checked + label:after { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); opacity: 1;
}
.todos .todos-container .todo-list { max-width: 800px; width: 100%; padding: 0; margin: 0 auto;
}
.todos .todos-container .textfield { font-size: 22px; font-family: 'Oswald', Helvetica, Arial, sans-serif; max-width: 798px; width: 100%; padding: 10px; border-style: initial;
}
.todos .todos-container .checktodo { float: left;
}
.todos .todos-container .done { text-decoration: line-through;
}
.todos .todos-container .new-todo-field { height: 38px;
}
.todos .list-footer { position: relative; height: 40px;
}
.todos .list-footer .summary { line-height: 32px; font-size: 20px; float: right; font-size: 18px; margin: 0; padding: 5px; text-align: right; padding-right: 10px;
}
.todos .list-footer .filters { position: absolute; margin: auto; top: 0; left: 0; bottom: 0; right: 0; width: 200px; line-height: 40px; vertical-align: middle; font-size: 18px;
}
.todos .list-footer .filters a { padding: 3px; color: grey; text-decoration: none;
}
.todos .list-footer .todo-count { font-weight: bold; padding-right: 5px;
}
.todos .list-footer .removeBtn { font-family: 'Oswald', Helvetica, Arial, sans-serif; background: none !important; border: none; float: left; width: 120px; text-align: left; line-height: 40px; font-size: 21px; padding-left: 10px; height: 40px; width: 150px;
}
.todos .list-footer .filters .filter-selected { font-size: 22px; text-decoration: underline; color: black;
}
.checkboxcontainer { position: relative; width: 25px;
}
.checkboxcontainer input { display: none;
}
.checkboxcontainer label { cursor: pointer; position: absolute; width: 22px; height: 22px; top: 3px; left: 0; background: #eee; border: 1px solid #ddd;
}
.checkboxcontainer label:after { opacity: 0.1; content: ''; position: absolute; width: 7px; height: 4px; background: transparent; top: 5px; left: 5px; border: 3px solid #333; border-top: none; border-right: none; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);
}
.checkboxcontainer label:hover::after { opacity: 0.5;
}
a { cursor: pointer;
}
@media screen and (max-width: 480px) { .check { display: none; } .todos-container { font-size: 28px; } .todos-container .todo-item-container { font-size: 28px; } .todos-container .list-footer { height: 80px; } .todos-container .list-footer .removeBtn { font-family: 'Oswald', Helvetica, Arial, sans-seriff; font-size: 18px; } .todos-container .list-footer .filters { line-height: 120px; font-size: 18px; width: 100%; } .todos-container .list-footer .summary { position: absolute; top: 0; right: 0; }
}
/*--- Modal Factory Styles ---*/
body { position: relative;
}
.ng-modal-overlay { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: #273a47; opacity: .5; -ms-filter: "alpha(opacity = 50)";
}
.ng-modal-container { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 999;
}
.ng-modal-container .ng-modal { width: 400px; margin: auto; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); padding: 10px 10px 20px 10px; background: #ffffff; border-radius: 3px; border: 1px solid #2f2f2f; text-align: center;
}
.ng-modal-container .ng-modal .btn { margin: 20px;
}
.ng-modal-container .ng-modal .ng-modal-close { color: grey; text-decoration: none; padding-right: 5px; font-size: 30px;
}
.ng-modal-container .ng-modal-close-container { text-align: right; line-height: 20px;
}
.ng-modal-container .ng-modal .ng-modal-close:hover { color: grey;
}

ToDo - Script Codes JS Codes

 "use strict"; angular.module('todoListApp', []); angular.module("todoListApp").controller("TodosController", ["$scope","ModalFactory", function (a, mf) { var b, c; a.statusModal = new mf({	template: 'This is a simple \"To Do\" Web app, to test the use of the browser\' localStorage as the persistence system for each item.' }); a.turnMeOn = a.statusModal.turnMeOn; a.title = "TODO", a.filterType = "all", b = function () { a.todos = JSON.parse(localStorage.getItem("jstodos")) || [] }, c = function () { localStorage.setItem("jstodos", JSON.stringify(a.todos)) }, b(), a.$watch("todos", function () { c() }, !0), a.filterTypeSelected = function (b) { return a.filterType === b }, a.setFilterType = function (b) { a.filterType = b }, a.filterElements = function (b) { return "all" === a.filterType ? !0 : b.done === !0 && "done" === a.filterType || b.done === !1 && "active" === a.filterType }, a.cleanSelected = function () { for (var b = 0; b < a.todos.length; b++) { var d = a.todos[b]; d.done === !0 && (a.todos.splice(b, 1), b--) } c() }, a.getTodos = function () { var b = [].concat(a.todos); return b.reverse() }, a.newTodoText = "", a.insertTodo = function (b) { var d; b.length && (d = { id: a.todos.length ? a.todos[a.todos.length - 1].id + 1 : 1, text: b, done: !1 }, a.todos.push(d), a.newTodoText = "", a.$apply(), c()) }, a.utils = { isTodoDone: function (a) { return a.done } } } ]); angular.module("todoListApp").filter("filterElements", function () { return function (a) { return a ? "✓" : "✘" } }); angular.module("todoListApp").directive("todo", function () { return { restrict: "E", transclude: !0, template: '<li class="todo-item-container" ng-class="{done: utils.isTodoDone(item)}"><div class="checkboxcontainer"><input id="todo{{item.id}}" type="checkbox" ng-model="item.done" class="checktodo" /><label for="todo{{item.id}}"></label></div><span class="todo-item-text">{{item.text}}</span></li>' } }).directive("newtodo", function () { return { restrict: "E", transclude: !0, link: function (a, b) { b.bind("keydown keypress", function (b) { 13 === b.which && (a.insertTodo(a.newTodoText), a.setFilterType("all")) }) }, template: '<input type="text" ng-model="newTodoText" placeholder="Got something to do?" class="textfield new-todo-field"/>' } }).directive("summary", function () { return { restrict: "E", controller: ["$scope", function (a) { a.getTodosLeft = function () { for (var b = 0, c = 0; c < a.todos.length; c++) { var d = a.todos[c]; d.done || b++ } return b } } ], template: "<span class=\"todo-count\">{{getTodosLeft()}}</span> <ng-pluralize count=\"getTodosLeft()\" when=\"{'one': 'item left', 'other': 'items left'}\"></ng-pluralize>" } }).directive("filters", function () { return { restrict: "E", template: "<a ng-click=\"filterType='all'\" ng-class=\"{'filter-selected' : filterTypeSelected('all')}\">All</a> - <a ng-click=\"filterType='active'\" ng-class=\"{'filter-selected' : filterTypeSelected('active')}\">Active</a> - <a ng-click=\"filterType='done'\" ng-class=\"{'filter-selected' : filterTypeSelected('done')}\">Done</a>" } });
angular.module('todoListApp') .factory('ModalFactory', function ($compile, $http, $rootScope) { return function (config) { // check that there's a template provided if (typeof config.template === 'undefined' && typeof config.templateUrl === 'undefined') { throw new Error('The factory needs an html template or a template url to be passed with the config object'); } // define auxiliary variables var template, html, scope, containerClass = config.containerClass || 'ng-modal-container', baseClass = config.baseClass|| 'ng-modal', overlayDivClass = config.overlayDivClass || 'ng-modal-overlay', useOverlay = typeof config.useOverlay === 'boolean' ? config.useOverlay : true, container = angular.element(config.selector || document.body), overlayDiv = '<div class="'+ overlayDivClass + '"></div>'; if (config.templateUrl) { $http.get(config.templateUrl).then(function(response) { template = response.data; // the html var has to be set on the 2 options of the conditional since one of them has an async method html = '<div class="' + containerClass + '"><div class="' + baseClass + '">' + '<div class="' + baseClass + '-close-container" ><a href="" class="' + baseClass + '-close" ng-click="turnMeOff()">&times;</a></div>' + template + '</div></div>'; }); } else { template= config.template; html = '<div class="' + containerClass + '"><div class="' + baseClass + '"> ' + '<div class="' + baseClass + '-close-container"><a href="" class="' + baseClass +'-close" ng-click="turnMeOff()">&times;</a></div>' + template + '</div></div>'; } /** * Activates the modal * * @param localVars - {Object} data passed from the caller controller */ function turnMeOn (localVars) { var domElement, overlay; scope = $rootScope.$new(); // assign the deactivation function to the created scope scope.turnMeOff = turnMeOff; // if there's a modal already on the DOM, remove it before adding another domElement = angular.element(document.getElementsByClassName(containerClass)); domElement.remove(); // if there's an overlay div already on the DOM, remove it before adding another overlay = angular.element(document.getElementsByClassName(overlayDivClass)); overlay.remove(); // if there's data passed along, copy it to the created scope if (localVars) { for (var prop in localVars) { scope[prop] = localVars[prop]; } } // create DOM elements domElement = angular.element(html); // the $compile() function compiles an HTML String/DOM into a template and produces a template function, which is then used // to link the template and a scope together $compile(domElement)(scope); // add elements do the dom if (useOverlay) { overlay = angular.element(overlayDiv); angular.element(document.body).append(overlay); } container.prepend(domElement); } /** * Deactivates the modal */ function turnMeOff() { var domElement = angular.element(document.getElementsByClassName(containerClass)), overlay = angular.element(document.getElementsByClassName(overlayDivClass)); // Remove elements from the DOM if (domElement) { domElement.remove(); } if (overlay) { overlay.remove(); } scope.$destroy(); } return { turnMeOn: turnMeOn, turnMeOff: turnMeOff }; }; });
ToDo - Script Codes
ToDo - Script Codes
Home Page Home
Developer António Capelo
Username capelo
Uploaded December 15, 2022
Rating 3
Size 8,475 Kb
Views 12,144
Do you need developer help for ToDo?

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!

António Capelo (capelo) Script Codes
Name
React Boilerplate
Gif as page background
Analog Clock
Max-height transition
Full-width slider.
Brainerd scroller
Room
Background cover
Clock loading
Camera click
Create amazing web content 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!