Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Todo list app, written in Javascript. By Reece Fowell.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" rel="stylesheet" type="tex/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<style type="text/css">
html,body {
background-color:#eee;
}
a, a:link, a:visited {
color:#0088dd;
}
a:hover {
background:#eee;
}
i[class^="icon-"], i[class*=" icon-"] {
display:inline-block;
background-image: url("https://uploads.interviewstreet.com/questions/50944fdb8c965b898.png");
background-repeat: no-repeat;
background-position:0px 0px;
width:20px;
height:20px;
line-height:14px;
vertical-align:text-top;
}
i.icon-tick-on {
background-position:0px 5px;
}
i.icon-tick-off {
background-position:0px -13px;
}
div.list > header,
div.list > ul.content,
div.list > ul.content > li {
margin:0px;
padding:0px;
}
div.list {
border:1px solid #ccc;
margin:25px;
padding:0px;
}
div.list > header {
border:none;
margin:0px !important;
padding-left:12px;
}
div.list > header > h3 {
margin:0px;
padding:10px;
}
div.list > ul.content {
list-style-type:none;
}
div.list > ul.content > li {
border-top:1px solid #eee;
background-color:#fff;
width:100%;
height:40px;
padding:0px !important;
}
div.list > ul.content > li > a {
display:block;
width:100%;
height:40px;
line-height:40px;
margin:0px;
padding-left:20px;
}
</style>
</head>
<body>
<div class="list clearfix" id="list-christmas">
<header class="ui-widget-header"><h3>Christmas List</h3></header>
<ul class="content">
</ul>
</div>
<div class="list clearfix" id="list-todo">
<header class="ui-widget-header"><h3>To-do List</h3></header>
<ul class="content">
</ul>
</div>
<div id="dialog-info" title="...">
<p id="dialog-message">
</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
console.log('Ready...');
var taskData = [
{
name: 'Buy Groceries',
description: 'Go to the store and get some milk and peanut butter for the children.',
completed: true
},
{
name: 'Pick up the Kids',
description: 'Drop by the middle school and pick up the children.',
completed: true
},
{
name: 'Change the Car Oil',
description: 'The SUV needs an oil change. Rotate the tires as well.',
completed: false
},
{
name: 'Attend a Company Gathering',
description: 'The company is meeting up at 8:00 PM to discuss the new contract.',
completed: false
},
{
name: 'Meet up for Dinner',
description: 'Meet up with the wife around 9:00 PM for some late dinner. Bring a flower.',
completed: false
}
];
var holidayData = [
{
name: 'John Klide',
completed: true
},
{
name: 'Joe Simpson',
completed: false
},
{
name: 'Anna Montanna',
completed: true
},
{
name: 'Teddy Barry',
completed: true
},
{
name: 'Allan Johnson',
completed: false
}
];
function List(containerId) {
this.list = [];
this.containerId = '';
this.container = null;
this.init(containerId);
return this;
}
List.prototype.init = function (containerId) {
this.containerId = containerId;
this.container = $('div#' + containerId + ' > ul');
return this;
}
List.prototype.addArrayToList = function (list) {
var length = list.length;
for (var i = 0; i < length; i++) {
this.addItem(list[i]);
}
}
List.prototype.addItem = function (item) {
index = this.list.length;
this.list[index] = item;
var id = this.containerId + '-' + index;
var tick = ((item['completed'] == true) ? "on" : "off");
this.container.append('<li id="' + id + '"><a href="#" data-checked="' + tick + '"><i class="icon-tick-' + tick + '"></i>' + item['name'] + '</a></li>');
el = $('#' + id + ' > a');
this.bind(el);
}
List.prototype.bind = function (el) {
el.bind('click', this.click);
}
List.prototype.click = function(event) {
event.preventDefault();
console.log('Clicked: ' + $(this).text() + ' - ' + $(this).data('checked'));
if ($(this).data('checked').toLowerCase() == "off") {
$(this).data('checked', "on");
$(this).children().filter('i').attr('class', 'icon-tick-on');
} else {
$(this).data('checked', "off");
$(this).children().filter('i').attr('class', 'icon-tick-off');
}
}
function ListExtended(containerId) {
this.list = [];
this.containerId = '';
this.container = null;
this.init(containerId);
return this;
}
ListExtended.prototype = new List();
ListExtended.prototype.addItem = function (item) {
index = this.list.length;
this.list[index] = item;
var id = this.containerId + '-' + index;
var tick = ((item['completed'] == true) ? "on" : "off");
this.container.append('<li id="' + id + '"><a href="#" data-checked="' + tick + '" data-description="' + item['description'] + '"><i class="icon-tick-' + tick + '"></i>' + item['name'] + '</a></li>');
el = $('#' + id + ' > a');
this.bind(el);
}
ListExtended.prototype.click = function(event) {
event.preventDefault();
console.log('Clicked2: ' + $(this).text() + ' - ' + $(this).data('checked'));
if ($(this).data('checked').toLowerCase() == "off") {
$(this).data('checked', "on");
$(this).children().filter('i').attr('class', 'icon-tick-on');
} else {
$(this).data('checked', "off");
$(this).children().filter('i').attr('class', 'icon-tick-off');
}
popup = $("#dialog-info");
popup.text($(this).data('description'));
popup.attr('title', $(this).text());
$(popup).dialog({
modal: true,
buttons: {
Close: function() {
$(this).dialog("close");
}
}
});
}
var holiday = new List('list-christmas');
holiday.addArrayToList(holidayData);
var todo = new ListExtended('list-todo');
todo.addArrayToList(taskData);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.