今更coffeescriptに手を出した



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

See the Pen KwLERb by Yuya Tanaka (@laddy) on CodePen.



コメントを残す