ひよっこエンジニア、ケイティのエンジニア成長記、2回目です。今回はローカルストレージを使ったメモ帳をJavaScriptで作成してみました！今回も本文・日本語訳ともケイティ本人が書いています（日本語は少しだけブログ担当が直してますが)
Fall is by far my favorite season; mainly for all the holidays it holds: Halloween, Thanksgiving, and Christmas. How was your Halloween?
Even if you don’t celebrate this holiday, it’s still entertaining to see all the costumes. What do you think of mine? (You could only grab this mask for a limited time at Tokyu Hands during Halloween.)
秋は私の断然お気に入りの季節です。主に秋には色々行事があります：ハロウィーンや勤労感謝の日やクリスマス。皆さんのハロウィーンはいかがでしたか？　ハロウィンを祝わないとしても、誰かが仮装するのを見るのは楽しいです！私の仮装はいかがですか？(このマスクはハロウィンの間、東急ハンズでゲットできたものです！ｗ )

I have been busy lately with learning how to use Javascript with a little Local Storage thrown in. Two other coworkers and I participated in a class called “Javascript for REAL.” Funnily enough, after completing this course, I believe I have a better grasp of Unicage.
最近は、Javascriptでのローカルストレージの使い方を学ぶことに忙しかったです。私ともう二人同僚と一緒に二ヶ月半の間　「ほんきでJavaScript」　の講座に参加させて頂きました。おもしろいことに、この講座の後ではユ二ケージを前よりもよく把握できたと信じています。
For this class we created our own memo pad from what we learned in class. It was super challenging, and I could not do most of it on my own. My team leader likes to grin and say that he felt like he passed the course even though he didn’t officially take it.
このクラスでは、講座で学ぶ内容を使って自分のメモ帳を作成します。このプロジェクトはとてもやりがいがあり、一人ではほとんどできませんでした。（復習を手伝ってもらったので）私のチームリーダーは「ぼくは講座受けてないけど、これだけやればきっと受けたようなものだね！」とにやりとして言っています。
My memo pad is quite simple; the reason for that is because I wanted to understand how to properly use local storage and see how everything is supposed to flow together.
私のメモ帳はまったく単純なものですが、わざとそう作成しました。理由は、どのようにローカルストレージをキチンと使用して、どのように全体が一緒に流れるべきかを理解したかったからです。
Although my goals have altered a little from what I originally set out to do, I achieved most of them which I’m pleased about.
今回発表するものは、そもそもの目標設定からは少し変更されたけれども、ねらいはほとんど達成したので私は喜びました。

<title>memopad</title>
&lt;!-- //  --&gt;
var memoList = [];
var editNum = 0;
$(function() {
    var memoMgr = window.localStorage.getItem('memo');
    // console.log(memoMgr);
    if (memoMgr !== null) {
        // console.log(22222);
        // 文字列を配列に変更
        var arr = JSON.parse(memoMgr);
        // console.log(3333);
        // for文でメモの数だけ下記のコードをoutputにappendする
        for (var i = 0; i &lt; arr.length; i++) {
            // console.log(4444);
            //i gets lists objects then the properties
            var text = arr[i].text;
            var title = arr[i].title;
            var today = new Date();
            var d = today.toUTCString();
            // make this into little parts
            var tag = '<div class="oya">' + '<p class="locSto_p ">' + "<span>" + "</span>" + "</p>";
            var tag2 = '<p class="title_p ">' + "<span>" + title + "</span>" + "</p>";
            var tag3 = '<p class="text_p ">' + "<span>" + text + "</span>" + "</p>";

I created two input fields-one for the title and one for the text-which gave me some trouble.
私はtitleとtextの2つのinputフィールドを作成しましたが、それらによっていくつかトラブルが起きました。

            var tag4 = '<p class="buttons_p ">' + '<button class="btn-face">(☆^O^☆)</button>' + '<button class="btn-delete">削除</button>' + '<button class="btn-edit">編集</button>' + "</p>" + "</div>";
            var tag5 = '<p class="date_p ">' + d + "</p>" + "</div>";
            var newTag = tag + tag2 + tag3 + tag4 + tag5;
            $("#one").append(newTag);
            // $("#one").append("<p>" + "<span>" + localStorage.length + "<br>" + objNum.title + "<br>" + objNum.text + "</span>" + '<button class="btn-face">(☆^O^☆)</button>' + '<button class="btn-delete">削除</button>' + '<button class="btn-edit">編集</button>' + "</p>");
        }
        // memoListにlistの情報を入れる
        memoList = arr;
        // console.log(memoList);
    }
    // ========================================================================
    // Add a memo
    $("#addmemo").on("click", function() {
        var s = $("#title").val();
        var str = $("#input-txt").val();
        // console.log(2222);
        var t = str.replace(/\r?\n/g, '<br>');
        // replace("<br>")
        var today = new Date();
        var d = today.toUTCString();
        var mix = {
            title: s,
            text: t,
            date: d
        }
        memoList.push(mix);
        var jsonStr = JSON.stringify(memoList);
        localStorage.setItem("memo", jsonStr);
        // console.log(mix);
        // 追加するHTMLを記述
        // they're all connected at the end so put one div at the beginning and one at the end to close the entire line
        var tag = '<div class="oya">' + '<p class="locSto_p ">' + "<span>" + "</span>" + "</p>";
        var tag2 = '<p class="title_p ">' + "<span>" + s + "</span>" + "</p>";
        var tag3 = '<p class="text_p ">' + "<span>" + t + "</span>" + "</p>";
        //
        var tag4 = '<p class="buttons_p ">' + '<button class="btn-face">(☆^O^☆)</button>' + '<button class="btn-delete">削除</button>' + '<button class="btn-edit">編集</button>' + '</p>';
        var tag5 = '<p class="date_p ">' + d + "</p>" + "</div>";
        var newTag = tag + tag2 + tag3 + tag4 + tag5;
        $("#one").append(newTag);
        // $("#one").append("<p>" + localStorage.length + "<span>" + "<br>" + s + "<br>" + t + "</span>" + "<br>" + '<button class="btn-face">(☆^O^☆)</button>' + '<button class="btn-delete">削除</button>' + '<button class="btn-edit">編集</button>' + "<br>" + d + "</p>");
    });

At first I had all the code crowded together, but I have since learned it’s better to break it apart into smaller chunks.
最初は全てのコードを一緒に組み込んでいましたが、そのとき、小さいまとまりに分けることが良いとまなびました。

    // ========================================================================
    //DELETE
    // タグを削除
    $("#one").on("click", ".btn-delete", function() {
        var del = confirm("Are you sure you want to delete this record?");
        if (del == true) {
            var $pTag = $(this).parent().parent();
            // console.log($pTag);
            // pタグが何番目かを取得
            var num = $(".oya").index($pTag);
            // console.log(num);
            // その番号のタグを削除
            $pTag.remove();
            // 配列から削除
            memoList.splice(num, 1);
            // console.log(memoList);
            var jsonStr = JSON.stringify(memoList);
            localStorage.removeItem("memo", jsonStr);
        }
        return del;
    });
    // ========================================================================
    //PRIORITIZE
    $("#one").on("click", ".btn-face", function() {
        var pTag = $(this).parent().parent();
        var num = $(".oya").index(pTag);
        pTag.toggleClass("green");
    });

The priority button uses the toggleClass API. I want to find a more practical use for it, but for right now that’s all it does.
重要度ボタンは、toggleClass API機能を使用します。今はそれで終わりですが、私はもっと実践的な使用法を見つけたいです。

    // ========================================================================
    //EDIT
    $("#one").on("click", ".btn-edit", function() {
        $("div:hidden").show("slow");
        var $pTag = $(this).parent().parent();
        console.log($pTag);
        editNum = $('#one .oya').index($pTag);
        console.log(editNum);
        // テキストの内容を取得
        var title = $pTag.find('.title_p').text();
        console.log(title);
        var txt = $pTag.find('.text_p span').html();
        // console.log(txt);
        txt= txt.replace(/<br>/g, '\n');
        console.log(txt);
        // #edit-title/#edit-txt1にテキストを表示
        $("#edit-title").val(title);
        $('#edit-txt1').val(txt);
        // console.log(str);
    });
    // ========================================================================
    // SAVE EDIT
    $("#btn-save").on("click", function() {
        $("#hidden").hide("slow");
        //#edit-txt1 gets the string
        var titleText = $("#edit-title").val();
        console.log(titleText);
        var inputText = $("#edit-txt1").val();
        console.log(inputText);
        // grab the # of the p you want to edit by automatically knowing which
        // pタグが何番目かを取得
        var num = editNum;
        console.log(num);
        var today = new Date();
        var d = today.toUTCString();
        // change the num of <p>　eq is looking for which <p>　0 1
        $("#one .oya").eq(num).find(".title_p span").text(titleText);
        $("#one .oya").eq(num).find(".text_p span").text(inputText);
        $("#one .oya").eq(num).find(".date_p").html(d);
        // var tag5 = '<p class="date_p ">' + d + "</p>" + "</div>";
        // memoList.push(tag5);
        // how do i get the date to show again????
        var obj = {
            title: titleText,
            text: inputText,
            date: d
        }
        // these objects are substituted in the array
        console.log(obj);
        // 配列の情報を変更
        // .text
        memoList[num] = obj;
        console.log(memoList);
        var jsonStr = JSON.stringify(memoList);
        localStorage.setItem("memo", jsonStr);
    });

If we decide to edit it, the information is pulled into these two hidden input text boxes. Here we can edit and save the changes back to the selected memo. Even if we have multiple memos it always saves to the original selected memo. I’m currently looking into getting the delete button to work the same way.
もしメモを編集しようとするなら、情報は2つの非表示にしたinput textにひっぱられます。ここで選択されたメモに対して、編集、差分の保存ができます。たとえ複数のメモが合っても、オリジナルの選択されたメモに対して保存ができます。削除ボタンも同様に動く方法を探しています。

    // ========================================================================
});
<h1>Memo Time!</h1>
<textarea id="title" cols="30" rows="10"></textarea>
<textarea id="input-txt" cols="30" rows="10"></textarea>
<button id="addmemo">Add memo</button>
<div id="one">
</div>
<!-- EDIT SCREEN -->
<div id="hidden">
    <textarea id="edit-title" cols="30" rows="10"></textarea>
    <textarea id="edit-txt1" cols="30" rows="10"></textarea>
    <button id="btn-save">save changes</button>
</div>

 
First we input some words, and press add memo where it is automatically saved to Local Storage
最初に、input内に何か言葉を記入し、メモ追加ボタンを押します。それはローカルストレージには自動保存されています。
Currently it only saves the top most memo, but when I incorporate the auto save with numbers perhaps that will change.
現在は一番上のメモのみが保存できますが、私が自動保存機能と数字等を組み込みことができれば、おそらく変わると思います。

Local Storage is really useful, so get out there and start using it if you aren’t already!
ローカルストレージとは本当に便利なものなので、まだ 使ったことがない人は早速使ってみてね ！