今更coffeescriptに手を出した
- 2015.04.13
- javascript Prog
- bootstrap, coffeescript, jquery
CoffeeScriptで簡単なToDoアプリ
保存機能はないけどToDoアプリをcoffeescriptで作成。
jqueryをどうやってcoffeescriptで表現するかがようやく理解出来てきた。
どうでもいいけどcodepen便利ですねー。
ソースと実行結果
counter = ->
$('#js_count_all').html $('#todo_list li').length
$('#js_count_done').html $('.js_done:checked').length
return true;
$(document).on 'click', '#js_button', ->
if '' != $('#text-form').val()
$('#todo_list').append('<li class="list-group-item"><input type="checkbox" class="js_done" /> <span class="todo_body">' + ($('#text-form').val()) + '</span> <span class="js_remove">×</span></li>');
$('#text-form').val ''
counter()
return false
$(document).on 'click', '.js_done', ->
if true == $(this).prop('checked')
$(this).prop('checked', true)
$(this).parent().find('.todo_body').html('<s>' + $(this).parent().find('.todo_body').html() + '</s>')
else
$(this).prop('checked', false)
$(this).parent().find('.todo_body').html($(this).parent().find('.todo_body s').html())
counter()
return true
$(document).on 'click', '.js_remove', ->
$(this).parent().remove()
counter()
return false
-
前の記事
[PHP] 配列の最初と最後の取得 2015.04.06
-
次の記事
Vagrant基本まとめたので書いておく 2015.04.27