１行日記をつくってみる（完成）

１行日記を完成させました。
ソースコードはこちら：

https://github.com/matildatilda/onelinediary

外観を変更しました。

タグ欄を作ってクリックでタグが挿入できるようにしました。各タグの要素（例：プログラミング）を動的に追加して、その要素にclickイベントを付加しています。

先にイベント用ハンドラを作っておきます。クリックした内容（innerHtml）を取得、日記の最終行に追加します。

function tagClickHandler(event)
{
    var target = $(event.target);
    var diary = $("#diary").val() + " #" + target.html();
    $("#diary").val(diary);
}

タグ情報を取得しテーブル要素を作成します。onメソッドで先に定義したイベント用ハンドラを指定します。

function showTags()
{
    $("#taglist").empty();
    
    $("#taglist")
        .append($("<tr></tr>")
            .append($("<th>タグ</th>"))
    );

    var url = "php/selectTags.php";

    $.get(url, function(data)
        {
            for (var i in data)
            {
                $("#taglist")
                    .append($("<tr></tr>")
                        .append($("<td></td>")
                            .html(data[i].tag)
                            .on("click", tagClickHandler)
                    )
                );    
            }
        }
    );
}

実績表示は横棒グラフ表示で。30日を100%として何日やったかを表示します。
31日ある月は100%超えますけど、この辺は適当に。

こんな感じで取りあえず１行日記の作成は終わります。少しずつ慣れて来たけど、まだまだ分からないことが多いですね。

次回はそろそろお手製ではなくフレームワークを使ってみたいです。なにがいいかな。
今日はこの辺で。