本日の課題
今日は前回までに作った機能にCSSで見やすいようなデザインにし、削除ボタンを追加します。
まずはメモ内容と日付のセット1つ1つに枠を設けてパッと見たときにわかりやすくなるようなデザインを書きます。今回はboxという名前にします。
See the Pen Memo5 by mizmizsan2 (@mizmizsan2) on CodePen.
ここで重要になってくるのがboxの位置ですがHTML側ではなくJavaScriptの innerHTML += ...のdivに直接入れ込むことで実現できます。HTML側に書いてしまうとメモ内容全体を囲む大きい一つの枠になってしまうので注意。
次はdeleteボタンを作成してメモ内容と日付のセットを削除できるようにします。deleteボタンも先ほどと同じようにJavaScript側に書きます。
See the Pen Memo7 by mizmizsan2 (@mizmizsan2) on CodePen.
削除する関数としてdeleteMemoを作成しました。
引数として渡す値はメモ内容などを保存しているlocalStrageのid(ここではwriteMemo)です。ここで渡す引数にchunkDataなどを渡してもストレージの中ではなく変数が変わってしまうだけなのでちゃんとストレージのidを直接渡さないといけません。
そして渡されたデータを消すのにはlocalStorage.removeItem()を使い、カッコ内に入れ込みます。
この状態では、
deleteボタンを押す→ページをリロードする→消える
という手順で削除をするのでdeleteボタンを押した瞬間に内容が削除されるようにします。
See the Pen Memo5 by mizmizsan2 (@mizmizsan2) on CodePen.
先ほどのプログラムのdeleteMemoにwindow.location.reload()を追加しました。こうすることで自動的にリロードされてメモを消すことができます。