Skip to content

Instantly share code, notes, and snippets.

@the4tress

the4tress/TagSpaces Todo List

Created September 17, 2014 07:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save the4tress/cfc26ab2d1b9238ec7ce to your computer and use it in GitHub Desktop.
Save the4tress/cfc26ab2d1b9238ec7ce to your computer and use it in GitHub Desktop.
Download ZIP
Raw
TagSpaces Todo List
<html>
<head>
<title>Created with TagSpaces</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
</head>
<body>
<style>
#todoapp {
background: #fff;
width: 520px;
padding: 20px;
margin: 0 auto;
margin-bottom: 40px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
#todoapp h1 {
font-size: 36px;
font-weight: bold;
text-align: center;
padding: 0 0 10px 0;
}
#todoapp input[type="text"] {
width: 466px;
font-size: 24px;
font-family: inherit;
line-height: 1.4em;
border: 0;
outline: none;
padding: 6px;
border: 1px solid #999999;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
}
#todoapp input::-webkit-input-placeholder {
font-style: italic;
}
#main {
display: none;
}
#todo-list {
margin: 10px 0;
padding: 0;
list-style: none;
}
#todo-list li {
padding: 18px 20px 18px 0;
position: relative;
font-size: 24px;
border-bottom: 1px solid #cccccc;
}
#todo-list li:last-child {
border-bottom: none;
}
#todo-list li.done label {
color: #777777;
text-decoration: line-through;
}
#todo-list .destroy {
content: "x";
position: absolute;
right: 5px;
top: 20px;
cursor: pointer;
width: 20px;
height: 20px;
}
#todo-list li .destroy:hover {
display: block;
color: red;
font-weight: bold;
}
#todo-list .destroy:hover {
background-position: 0 -20px;
}
#todo-list li.editing {
border-bottom: none;
margin-top: -1px;
padding: 0;
}
#todo-list li.editing:last-child {
margin-bottom: -1px;
}
#todo-list li.editing .edit {
display: block;
width: 444px;
padding: 13px 15px 14px 20px;
margin: 0;
}
#todo-list li.editing .view {
display: none;
}
#todo-list li .view label {
word-break: break-word;
}
#todo-list li .edit {
display: none;
}
#todoapp footer {
display: none;
margin: 0 -20px -20px -20px;
overflow: hidden;
color: #555555;
background: #f4fce8;
border-top: 1px solid #ededed;
padding: 0 20px;
line-height: 37px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
#clear-completed {
float: right;
line-height: 20px;
text-decoration: none;
background: rgba(0, 0, 0, 0.1);
color: #555555;
font-size: 11px;
margin-top: 8px;
margin-bottom: 8px;
padding: 0 10px 1px;
cursor: pointer;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-ms-border-radius: 12px;
-o-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
}
#clear-completed:hover {
background: rgba(0, 0, 0, 0.15);
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-ms-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
}
#clear-completed:active {
position: relative;
top: 1px;
}
#todo-count span {
font-weight: bold;
}
#instructions {
margin: 10px auto;
color: #777777;
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
text-align: center;
}
#instructions a {
color: #336699;
}
#credits {
margin: 30px auto;
color: #999;
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
text-align: center;
}
#credits a {
color: #888;
}
</style>
<div id="todoapp">
<header>
<h1>Todos</h1>
<input id="new-todo" type="text" placeholder="What needs to be done?">
</header>
<section id="main">
<ul id="todo-list">
</ul>
</section>
</div>
<div id="script" style="display: none;">
function loadScript(url, callback) {
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
script.onreadystatechange = callback;
script.onload = callback;
head.appendChild(script);
}
var init = function() {
$("#taskList input").click(function(e) {
$(this).attr("checked",$(this).is(":checked"));
log($("#taskList").html());
});
$("#addTask").on("click", function() {
$("#taskList").append($("input", {
type: "checkbox"
}));
console.log('test');
});
function runBind() {
$('.destroy').on('click', function(e) {
$currentListItem = $(this).closest('li');
$currentListItem.remove();
});
$('.toggle').on('click', function(e) {
var $currentListItemLabel = $(this).closest('li').find('label');
if ( $currentListItemLabel.attr('data') == 'done' ) {
$currentListItemLabel.attr('data', '');
$currentListItemLabel.css('text-decoration', 'none');
}
else {
$currentListItemLabel.attr('data', 'done');
$currentListItemLabel.css('text-decoration', 'line-through');
}
});
$todoList = $('#todo-list');
$('#new-todo').keypress(function(e) {
if (e.which == 13) {
$('.destroy').off('click');
$('.toggle').off('click');
var todos = $todoList.html();
todos = [
'<li>',
'<div class='view'>',
'<input class="toggle" type="checkbox">',
'<label data="">' + $('#new-todo').val() + '</label>',
'<a class="destroy">x</a>',
'</div>',
'</li>',
].join('');
$(this).val('');
$todoList.html(todos);
runBind();
$('#main').show();
}
}); // end if
}
runBind();
// Debug stuff
$("#cmd").on("keydown", function(e) {
if (e.ctrlKey)
if (e.keyCode == 13)
console.log(eval($("#cmd").val()));
});
if (typeof console != "undefined")
if (typeof console.log != 'undefined')
console.l = console.log;
else
console.l = function() {};
console.log = function(msg) {
console.l(msg);
$('#debug').append(msg + '<hr />');
};
console.error = console.debug = console.info = console.log
$("#debug").on("dblclick", function() {
$(this).html("");
});
console.log("Debug log. Double click to clear...");
}
loadScript("https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js", init);
</div>
<img src="!@#$" onerror="eval(document.getElementById('script').innerHTML);" style="display: none;"/>
<textarea id="cmd" style="height: 200px; width: 800px;"></textarea>
<div id="debug" style="height: 500px; width: 800px; border: 1px solid blue;"></div>
<p>Task list code is from here: http://www.jqueryscript.net/demo/Creating-A-Minimal-Todo-List-Web-App-With-jQuery-Todo-Plugin/</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment