🤖
✔Youtubeサイトを参考にTodoListを作成してみた！
TodoList
ポートフォリを作成するために
①自身のgithub上で、新しいリポジトリ作成する
参考URL↓↓
②ローカル環境に作成したリポジトリをクローンする
$ git clone ご自身のHTTPS貼り付け
③VSCodeに戻り、環境構築を行う
まず、Node.jsがインストールされているのか確認し、バージョンが表示されればOK！
$ node -v
次に、Vueプロジェクトを作成するので、作成したいディレクトリに移動し、以下のコマンドを実行する。
$ npm init vue@latest
作成されたプロジェクトに移動し、以下コマンドを実行する。
$ npm install
最後にVueプロジェクトを起動する。
$ npm run dev
ここまで出来たら準備完了！
TodoListの機能
①Todoの登録
-
登録すると下のTodo一覧に表示されていく。 - Todo、期日のどちらかが未入力の場合、エラーメッセージが表示される。
②内容編集
-
Editボタンクリックすると、Todo、期日、ステータスが変更できるようになっている。 - 編集が完了したら
Doneボタンでデータを上書き保存。 - 編集中に他の
Editボタンクリックすると、エラーメッセが表示される。
③削除
- Todo一覧の
削除ボタンをクリックすると、モーダル表示。 - モーダル：
はい👉画面から選択データが削除され、ストレージからも削除される、
キャンセル：もとの画面に戻る。
④昇順機能
- IDと期日に昇順機能を追加し、数字が早いものから表示されるように設定。
⑤期日が過ぎているTodoのカラー変更
- 期日が過ぎているものは、文字色：赤で表示されるようにCSSを設定。
★入力したデータの保存先
今回、データの保存先として、ブラウザ上にデータを保存できるローカルスト レージを使用しています！
→keyとvalueの組み合わせで文字列を保存しています。
参考
最後に
参考にした「まりんとすふぃあ」さんのYoutubeに上がっているVue.jsの説明がとてもわかりやすく、初心者の方にとてもオススメのYoutubeサイトだと思いました！
実際に手を動かしてみて学ぶと、より理解力が進むので、是非未経験の方は取り組むのをオススメします✨
Discussion