TodoMVC using jQuery
How do I make an todomvc using jquery?
A TodoMVC example using jQuery from http://todomvc.com, a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today and helps developers select an MV* framework for structuring and organizing their JavaScript web apps.. What is a todomvc using jquery? How do you make a todomvc using jquery? This script and codes were developed by Victor Yan on 05 January 2023, Thursday.
TodoMVC using jQuery - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>TodoMVC using jQuery</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="en" data-framework="jquery"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>jQuery • TodoMVC</title> <link rel="stylesheet" href="bower_components/todomvc-common/base.css"> <link rel="stylesheet" href="css/app.css"> </head> <body> <section id="todoapp"> <header id="header"> <h1>todos</h1> <input id="new-todo" placeholder="What needs to be done?" autofocus> </header> <section id="main"> <input id="toggle-all" type="checkbox"> <label for="toggle-all">Mark all as complete</label> <ul id="todo-list"></ul> </section> <footer id="footer"> <span id="todo-count"><strong>0</strong> item left</span> <button id="clear-completed">Clear completed</button> </footer> </section> <footer id="info"> <p>Double-click to edit a todo</p> <p>Created by <a href="https://github.com/sindresorhus">Sindre Sorhus</a></p> <p>Part of <a href="http://todomvc.com">TodoMVC</a></p> </footer> <script id="todo-template" type="text/x-handlebars-template"> {{#this}} <li {{#if completed}}class="completed"{{/if}} data-id="{{id}}"> <div class="view"> <input class="toggle" type="checkbox" {{#if completed}}checked{{/if}}> <label>{{title}}</label> <button class="destroy"></button> </div> <input class="edit" value="{{title}}"> </li> {{/this}} </script> <script id="footer-template" type="text/x-handlebars-template"> <span id="todo-count"><strong>{{activeTodoCount}}</strong> {{activeTodoWord}} left</span> {{#if completedTodos}}<button id="clear-completed">Clear completed ({{completedTodos}})</button>{{/if}} </script> </body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://todomvc.com/architecture-examples/jquery/bower_components/handlebars/handlebars.js'></script> <script src="js/index.js"></script>
</body>
</html>
TodoMVC using jQuery - Script Codes CSS Codes
html,
body { margin: 0; padding: 0;
}
button { margin: 0; padding: 0; border: 0; background: none; font-size: 100%; vertical-align: baseline; font-family: inherit; color: inherit; -webkit-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none;
}
body { font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.4em; background: #eaeaea url('bg.png'); color: #4d4d4d; width: 550px; margin: 0 auto; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased;
}
button,
input[type="checkbox"] { outline: none;
}
#todoapp { background: #fff; background: rgba(255, 255, 255, 0.9); margin: 130px 0 40px 0; border: 1px solid #ccc; position: relative; border-top-left-radius: 2px; border-top-right-radius: 2px; box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.15);
}
#todoapp:before { content: ''; border-left: 1px solid #f5d6d6; border-right: 1px solid #f5d6d6; width: 2px; position: absolute; top: 0; left: 40px; height: 100%;
}
#todoapp input::-webkit-input-placeholder { font-style: italic;
}
#todoapp input::-moz-placeholder { font-style: italic; color: #a9a9a9;
}
#todoapp h1 { position: absolute; top: -120px; width: 100%; font-size: 70px; font-weight: bold; text-align: center; color: #b3b3b3; color: rgba(255, 255, 255, 0.3); text-shadow: -1px -1px rgba(0, 0, 0, 0.2); -webkit-text-rendering: optimizeLegibility; -moz-text-rendering: optimizeLegibility; -ms-text-rendering: optimizeLegibility; -o-text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
}
#header { padding-top: 15px; border-radius: inherit;
}
#header:before { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 15px; z-index: 2; border-bottom: 1px solid #6c615c; background: #8d7d77; background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8))); background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8)); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670'); border-top-left-radius: 1px; border-top-right-radius: 1px;
}
#new-todo,
.edit { position: relative; margin: 0; width: 100%; font-size: 24px; font-family: inherit; line-height: 1.4em; border: 0; outline: none; color: inherit; padding: 6px; border: 1px solid #999; box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2); -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased;
}
#new-todo { padding: 16px 16px 16px 60px; border: none; background: rgba(0, 0, 0, 0.02); z-index: 2; box-shadow: none;
}
#main { position: relative; z-index: 2; border-top: 1px dotted #adadad;
}
label[for='toggle-all'] { display: none;
}
#toggle-all { position: absolute; top: -42px; left: -4px; width: 40px; text-align: center; /* Mobile Safari */ border: none;
}
#toggle-all:before { content: '»'; font-size: 28px; color: #d9d9d9; padding: 0 25px 7px;
}
#toggle-all:checked:before { color: #737373;
}
#todo-list { margin: 0; padding: 0; list-style: none;
}
#todo-list li { position: relative; font-size: 24px; border-bottom: 1px dotted #ccc;
}
#todo-list li:last-child { border-bottom: none;
}
#todo-list li.editing { border-bottom: none; padding: 0;
}
#todo-list li.editing .edit { display: block; width: 506px; padding: 13px 17px 12px 17px; margin: 0 0 0 43px;
}
#todo-list li.editing .view { display: none;
}
#todo-list li .toggle { text-align: center; width: 40px; /* auto, since non-WebKit browsers doesn't support input styling */ height: auto; position: absolute; top: 0; bottom: 0; margin: auto 0; /* Mobile Safari */ border: none; -webkit-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none;
}
#todo-list li .toggle:after { content: '✔'; /* 40 + a couple of pixels visual adjustment */ line-height: 43px; font-size: 20px; color: #d9d9d9; text-shadow: 0 -1px 0 #bfbfbf;
}
#todo-list li .toggle:checked:after { color: #85ada7; text-shadow: 0 1px 0 #669991; bottom: 1px; position: relative;
}
#todo-list li label { white-space: pre; word-break: break-word; padding: 15px 60px 15px 15px; margin-left: 45px; display: block; line-height: 1.2; -webkit-transition: color 0.4s; transition: color 0.4s;
}
#todo-list li.completed label { color: #a9a9a9; text-decoration: line-through;
}
#todo-list li .destroy { display: none; position: absolute; top: 0; right: 10px; bottom: 0; width: 40px; height: 40px; margin: auto 0; font-size: 22px; color: #a88a8a; -webkit-transition: all 0.2s; transition: all 0.2s;
}
#todo-list li .destroy:hover { text-shadow: 0 0 1px #000, 0 0 10px rgba(199, 107, 107, 0.8); -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3);
}
#todo-list li .destroy:after { content: '✖';
}
#todo-list li:hover .destroy { display: block;
}
#todo-list li .edit { display: none;
}
#todo-list li.editing:last-child { margin-bottom: -1px;
}
#footer { color: #777; padding: 0 15px; position: absolute; right: 0; bottom: -31px; left: 0; height: 20px; z-index: 1; text-align: center;
}
#footer:before { content: ''; position: absolute; right: 0; bottom: 31px; left: 0; height: 50px; z-index: -1; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 6px 0 -3px rgba(255, 255, 255, 0.8), 0 7px 1px -3px rgba(0, 0, 0, 0.3), 0 43px 0 -6px rgba(255, 255, 255, 0.8), 0 44px 2px -6px rgba(0, 0, 0, 0.2);
}
#todo-count { float: left; text-align: left;
}
#filters { margin: 0; padding: 0; list-style: none; position: absolute; right: 0; left: 0;
}
#filters li { display: inline;
}
#filters li a { color: #83756f; margin: 2px; text-decoration: none;
}
#filters li a.selected { font-weight: bold;
}
#clear-completed { float: right; position: relative; line-height: 20px; text-decoration: none; background: rgba(0, 0, 0, 0.1); font-size: 11px; padding: 0 10px; border-radius: 3px; box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
}
#clear-completed:hover { background: rgba(0, 0, 0, 0.15); box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
}
#info { margin: 65px auto 0; color: #a6a6a6; font-size: 12px; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); text-align: center;
}
#info a { color: inherit;
}
/* Hack to remove background from Mobile Safari. Can't use it globally since it destroys checkboxes in Firefox and Opera
*/
@media screen and (-webkit-min-device-pixel-ratio:0) { #toggle-all, #todo-list li .toggle { background: none; } #todo-list li .toggle { height: 40px; } #toggle-all { top: -56px; left: -15px; width: 65px; height: 41px; -webkit-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); -webkit-appearance: none; appearance: none; }
}
.hidden { display: none;
}
hr { margin: 20px 0; border: 0; border-top: 1px dashed #C5C5C5; border-bottom: 1px dashed #F7F7F7;
}
.learn a { font-weight: normal; text-decoration: none; color: #b83f45;
}
.learn a:hover { text-decoration: underline; color: #787e7e;
}
.learn h3,
.learn h4,
.learn h5 { margin: 10px 0; font-weight: 500; line-height: 1.2; color: #000;
}
.learn h3 { font-size: 24px;
}
.learn h4 { font-size: 18px;
}
.learn h5 { margin-bottom: 0; font-size: 14px;
}
.learn ul { padding: 0; margin: 0 0 30px 25px;
}
.learn li { line-height: 20px;
}
.learn p { font-size: 15px; font-weight: 300; line-height: 1.3; margin-top: 0; margin-bottom: 0;
}
.quote { border: none; margin: 20px 0 60px 0;
}
.quote p { font-style: italic;
}
.quote p:before { content: '“'; font-size: 50px; opacity: .15; position: absolute; top: -20px; left: 3px;
}
.quote p:after { content: '”'; font-size: 50px; opacity: .15; position: absolute; bottom: -42px; right: 3px;
}
.quote footer { position: absolute; bottom: -40px; right: 0;
}
.quote footer img { border-radius: 3px;
}
.quote footer a { margin-left: 5px; vertical-align: middle;
}
.speech-bubble { position: relative; padding: 10px; background: rgba(0, 0, 0, .04); border-radius: 5px;
}
.speech-bubble:after { content: ''; position: absolute; top: 100%; right: 30px; border: 13px solid transparent; border-top-color: rgba(0, 0, 0, .04);
}
.learn-bar > .learn { position: absolute; width: 272px; top: 8px; left: -300px; padding: 10px; border-radius: 5px; background-color: rgba(255, 255, 255, .6); -webkit-transition-property: left; transition-property: left; -webkit-transition-duration: 500ms; transition-duration: 500ms;
}
@media (min-width: 899px) { .learn-bar { width: auto; margin: 0 0 0 300px; } .learn-bar > .learn { left: 8px; } .learn-bar #todoapp { width: 550px; margin: 130px auto 40px auto; }
}
#main,
#footer { display: none;
}
TodoMVC using jQuery - Script Codes JS Codes
/*global jQuery, Handlebars */
jQuery(function ($) { 'use strict'; var Utils = { uuid: function () { /*jshint bitwise:false */ var i, random; var uuid = ''; for (i = 0; i < 32; i++) { random = Math.random() * 16 | 0; if (i === 8 || i === 12 || i === 16 || i === 20) { uuid += '-'; } uuid += (i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random)).toString(16); } return uuid; }, pluralize: function (count, word) { return count === 1 ? word : word + 's'; }, store: function (namespace, data) { if (arguments.length > 1) { return localStorage.setItem(namespace, JSON.stringify(data)); } else { var store = localStorage.getItem(namespace); return (store && JSON.parse(store)) || []; } } }; var App = { init: function () { this.ENTER_KEY = 13; this.todos = Utils.store('todos-jquery'); this.cacheElements(); this.bindEvents(); this.render(); }, cacheElements: function () { this.todoTemplate = Handlebars.compile($('#todo-template').html()); this.footerTemplate = Handlebars.compile($('#footer-template').html()); this.$todoApp = $('#todoapp'); this.$header = this.$todoApp.find('#header'); this.$main = this.$todoApp.find('#main'); this.$footer = this.$todoApp.find('#footer'); this.$newTodo = this.$header.find('#new-todo'); this.$toggleAll = this.$main.find('#toggle-all'); this.$todoList = this.$main.find('#todo-list'); this.$count = this.$footer.find('#todo-count'); this.$clearBtn = this.$footer.find('#clear-completed'); }, bindEvents: function () { var list = this.$todoList; this.$newTodo.on('keyup', this.create); this.$toggleAll.on('change', this.toggleAll); this.$footer.on('click', '#clear-completed', this.destroyCompleted); list.on('change', '.toggle', this.toggle); list.on('dblclick', 'label', this.edit); list.on('keypress', '.edit', this.blurOnEnter); list.on('blur', '.edit', this.update); list.on('click', '.destroy', this.destroy); }, render: function () { this.$todoList.html(this.todoTemplate(this.todos)); this.$main.toggle(!!this.todos.length); this.$toggleAll.prop('checked', !this.activeTodoCount()); this.renderFooter(); Utils.store('todos-jquery', this.todos); }, renderFooter: function () { var todoCount = this.todos.length; var activeTodoCount = this.activeTodoCount(); var footer = { activeTodoCount: activeTodoCount, activeTodoWord: Utils.pluralize(activeTodoCount, 'item'), completedTodos: todoCount - activeTodoCount }; this.$footer.toggle(!!todoCount); this.$footer.html(this.footerTemplate(footer)); }, toggleAll: function () { var isChecked = $(this).prop('checked'); $.each(App.todos, function (i, val) { val.completed = isChecked; }); App.render(); }, activeTodoCount: function () { var count = 0; $.each(this.todos, function (i, val) { if (!val.completed) { count++; } }); return count; }, destroyCompleted: function () { var todos = App.todos; var l = todos.length; while (l--) { if (todos[l].completed) { todos.splice(l, 1); } } App.render(); }, // accepts an element from inside the `.item` div and // returns the corresponding todo in the todos array getTodo: function (elem, callback) { var id = $(elem).closest('li').data('id'); $.each(this.todos, function (i, val) { if (val.id === id) { callback.apply(App, arguments); return false; } }); }, create: function (e) { var $input = $(this); var val = $.trim($input.val()); if (e.which !== App.ENTER_KEY || !val) { return; } App.todos.push({ id: Utils.uuid(), title: val, completed: false }); $input.val(''); App.render(); }, toggle: function () { App.getTodo(this, function (i, val) { val.completed = !val.completed; }); App.render(); }, edit: function () { var $input = $(this).closest('li').addClass('editing').find('.edit'); var val = $input.val(); $input.val(val).focus(); }, blurOnEnter: function (e) { if (e.which === App.ENTER_KEY) { e.target.blur(); } }, update: function () { var val = $.trim($(this).removeClass('editing').val()); App.getTodo(this, function (i) { if (val) { this.todos[i].title = val; } else { this.todos.splice(i, 1); } this.render(); }); }, destroy: function () { App.getTodo(this, function (i) { this.todos.splice(i, 1); this.render(); }); } }; App.init();
});
![TodoMVC using jQuery - Script Codes](http://shots.codepen.io/tipsoftheday/pen/pEGgu-512.jpg)
Developer | Victor Yan |
Username | tipsoftheday |
Uploaded | January 05, 2023 |
Rating | 3 |
Size | 6,388 Kb |
Views | 22,264 |
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 |
A Pen by Victor Yan | 2,757 Kb |
Create inline help tips for your site with a bit of CSS | 2,229 Kb |
Bootstrap 3 button groups | 1,510 Kb |
HTML 5 Local Storage Example | 1,912 Kb |
Using Javascript to calculate age | 2,538 Kb |
Sample AngularJS app using controller | 2,294 Kb |
TodoMVC using jQuery | 6,388 Kb |
HTML 5 Session Storage Example | 1,825 Kb |
Detect Enter Key Pressed Using jQuery event | 1,822 Kb |
Testing for a Value in JavaScript Array | 1,914 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 |
Image grid with captions | Mchernin34 | 2,222 Kb |
Old calculator | Gnarfugh | 2,815 Kb |
Ipad Mini Showcase | Hornebom | 10,479 Kb |
Experiment - SCSS SVG Background Image with Variables | See8ch | 3,270 Kb |
Material design buttons | Fischaela | 4,381 Kb |
A Pen by Huan Nghiem | Nightshade | 10,646 Kb |
Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
Simple blog concept | Drew_mc | 2,666 Kb |
Transitioning application screens with semantically named classes | Djgrant | 3,697 Kb |
Dice | Fraina | 5,026 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!