作成したメモ帳に追記機能を２つ実装してみよう。
- 検索機能の実装
- 自分で考えた追加機能
１つめの検索機能ですが、仕様は以下の通りです。
メモを追加のフォーム直下に画像のような検索ボックスを追加してください。
HTMLは以下の通りです。
<div class="memo_form">
<h2>メモを追加</h2>
<form action="{{ asset('/add') }}" method="post">
@csrf
<input class="memo_text" type="text" name="memo_text" id="memo_text">
<input type="submit" value="追加">
</form>
<!-- ここから追加 -->
<div class="search_area" style="margin-top: 50px">
<h2>検索</h2>
<form action="">
<input class="memo_text" type="text" name="search_word" id="search_word">
<input type="submit" value="検索">
</form>
</div>
<!-- ここまでを追加 -->
</div>HTMLの構造は追加しましたが、アクション属性などは自分で追記してください。
検索ボックスに検索ワードを入れ検索ボタンをクリックすると、検索ワードが含まれるメモのみが表示されるようにしてください。
例）
「検索ワード：りんご」
| メモ内容 | 表示判定 |
| りんご | 表示される |
| りんごアイス | 表示される |
| ぶどう | 表示されない |
| 青りんご | 表示される |
| りん | 表示されない |
上記のように、「りんご」が含まれるメモのみ表示されるようにしてください。
- 自分で考えた機能を追加してみよう。
並び替え機能や一括削除機能など自分なりに考えた機能を実装してみよう。
※適宜、コミットやプッシュをしてソースコードを管理してください。簡単に元の状態に戻れるように、作業用のブランチを作成することもおすすめです。
コメントを残す