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 Previews
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();
});
| Developer | Victor Yan |
| Username | tipsoftheday |
| Uploaded | January 05, 2023 |
| Rating | 3 |
| Size | 6,388 Kb |
| Views | 22,264 |
Do you need developer help for TodoMVC using jQuery?
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!
Victor Yan (tipsoftheday) Script Codes
| Name | Size |
| Bootstrap 3 button groups | 1,510 Kb |
| Tooltip using jQuery UI | 2,124 Kb |
| Testing for a Value in JavaScript Array | 1,914 Kb |
| Bootstrap 3 Explained | 3,151 Kb |
| HTML 5 Session Storage Example | 1,825 Kb |
| Tooltip using plain Javascript | 1,825 Kb |
| Create inline help tips for your site with a bit of CSS | 2,229 Kb |
| Using Javascript to calculate age | 2,538 Kb |
| HTML 5 Canvas Example | 2,026 Kb |
| Tooltip using Bootstrap | 2,452 Kb |
Create amazing captions 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!
Similar Scripts & Codes
| Name | Username | Size |
| Canvas stripes | Adrianparr | 1,948 Kb |
| Simple personal profile | Miroot | 2,856 Kb |
| CSSOff 2013 Submission | Codewunder | 14,766 Kb |
| Header | Er40 | 1,542 Kb |
| Bootstrap 3 Price Table | Honglio | 2,655 Kb |
| NgEasyModal | Lorenzodianni | 4,159 Kb |
| TweetBox with React JS | J0zelito | 3,325 Kb |
| Segments mouse following | Nosir | 2,909 Kb |
| Faux column absolute wrapper | Yurimorini | 1,823 Kb |
| Beveled corners using CSS border attribute | DawsonMediaD | 2,136 Kb |
Do you want hide your ip address?
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!