Skip to content

Instantly share code, notes, and snippets.

@ybootin ybootin/checklist.html
Last active Aug 29, 2015

Embed
What would you like to do?
Keru simple HTML app
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
.checked {
background-color: #CCCCCC;
}
.item {
list-style-type: none;
}
.item-info {
display:none;
float:right;
}
.checked .item-info {
display: block;
}
</style>
<script type="text/javascript">
var json = {
"title": "ma checklist",
"checklist" : [
{"title" : "item 1", "checked" : "text checked"} ,
{"title" : "item 2", "checked" : "text checked"} ,
{"title" : "item 3", "checked" : "text checked"} ,
]
};
$(document).ready(function() {
// retrieve json file
// $.getJSON('checklist.json', function(data) {
var data = json;
$('h1').html(data.title);
var cnt = document.getElementById('checklist-content');
$.each(data.checklist, function(k, v) {
var elt = document.createElement('div');
elt.innerHTML = '<div class="item"><span>' + v.title + '</span><span class="item-info">' + v.checked + '</span></div>';
$(elt).click(function() {
if ($(this).hasClass('checked')) {
$(this).removeClass('checked');
}
else {
$(this).addClass('checked');
}
});
cnt.appendChild(elt);
});
});
// });
</script>
</head>
<body>
<div class="container-fluid" id="container">
<h1>Title</h1>
<div id="checklist-content">
</div>
</div>
</body>
</html>
@ybootin

This comment has been minimized.

Copy link
Owner Author

ybootin commented Dec 9, 2014

for @ker2x !

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.