リリース0.4の進歩

私が最終課題のために選んだプロジェクトに関する問題を提出しました.私は遅れてから仕事を始めた.

手順

私がプログラムを改善するためにする最初のことは、新しいUndone-All ボタン.それは基本的にその名前として、プログラムのtodolistをundoningです.最初のステップでは、メインHTMLに必要ボタンを追加しようとしました.index.html . そして、その後プログラムを実行すると、本当におかしかったです.

閉じるこの動画はお気に入りから削除されています.それで、私はちょうど新しいCSSを加えます.しかし、私が新しいCSSを加えたあと、私が再びプログラムを走らせるとき、私は私が同じCSSフォーマットを持つべきであるとわかりましたAll-Done プロジェクトが現在持っているボタン.だから、新しいCSSを追加する代わりにUndone-All ボタンクラス名Done-All ボタン.このように、私はオリジナルのプロジェクトが持っているいくつかのボタン形式を持っています.

その後、私は仕事をしようとしたEdit ボタンは、プログラムの新機能です.私は、Aを加える予定でしたEdit ユーザーのためのボタンは、todolistの説明を編集します.これは、私がこの最終的な任務のために持っていた最も難しい部分です.
最初は、各todolistに新しいボタンを追加しようとしましたapp.js ファイル.私は、新しいプログラムを作らなければならないという論理に従ったedit ボタン.そして、それはUndone-All 私が前に作ったボタン、それはかなり醜い形式です.また、私はfa 使用するプログラムを使用するクラスedit ボタンはとても奇妙に見えます.したがって、私は私の最初の更新プログラムを提供するGoogleとスタイルシートのリンクを使用しますEdit ボタン.最後に、私は、これが編集ボタンであることをユーザーに知らせるために鉛筆記号でボタンを作ることに決めました.また、私は、それがよりよく見えるようにいくつかのCSSを加えました.そして、ここに私の新しいedit ボタン

私が展望を終えたときEdit ボタン、私はそれのための機能を追加し始めた.正直に、私はtodolistを編集可能にすることを計画していました.しかし、現実は、私はそれをする方法を見つけることができません<li> . それで、私はedit ボタンを使用している別の方法でprompt() 関数.The prompt() 関数は、ユーザーが古いtodolistの更新プログラムとして新しいテキストを入力することができます.

そして、私が見つけた次のものは、Toolistボタンのためのそれらの機能の全てが同じ機能範囲にあるということでした.したがって、私はtodolistボタンの原点関数を3つの異なる関数に分けました.

のためのいくつかの個人テストの後edit ボタンをクリックすると、元のプログラムが持つ日付の時刻に関連する新しい問題が見つかりました.現在使用しているプログラムが動的な形式であった日付形式で、現在の日付時刻が“2021 - 5 - 12 00 : 00 : 08”であれば、プログラムは“2021/5/12 0 : 0 : 8”と表示されます.これは間違っていませんが、“yyyy/mm/dd hh : mm : ss”などの特定の日付時刻形式を持つことができれば良いでしょう.したがって、現在の日付時刻が“2021 - 5 - 12 00 : 00 : 08”であれば、今度は“2021/05/12 00 : 00 : 08”が表示されます.一方で、ユーザのために同じ日付時刻形式を持つほうがよいでしょう.一方、プログラマは日付時刻文字列をキャッチするのに良い形式を提供することができます.したがって、日付時刻関数を次のように更新しました.

function now() {
  let today = new Date();
  var year = today.getFullYear();
  var month = (today.getMonth() + 1);
  var dateTime = today.getDate();

  var date = year;
  date += ((month < 10) ? '/0' : "/") + month;
  date += ((date < 10) ? '/0' : "/") + dateTime;

  var hour = today.getHours();
  var minute = today.getMinutes();
  var second = today.getSeconds();

  var time = ((hour < 10) ? '0' : '') + hour;
    if (hour == 0)
      time = '00';
  time += ((minute < 10) ? ':0' : ':') + minute;
  time += ((second < 10) ? ':0' : ':') + second;
  return `${date}\n${time}`;
}

新しいボタンを追加した後、私は簡単なフッターを追加して、このプログラムのための簡単な改善をした.
これは、いくつかの行のコードを必要とする単純なステップですindex.html .
最後に、ユーザーが表示モードをダークモードに変更すると、ユーザーがページを更新したときに自動的にライトモードに戻ります.ユーザーがページを更新するだけでなく、その問題が発生しますが、ユーザーがDone-All ボタンまたはUndone-All ボタンを押すと、confirm() また、ページをリフレッシュし、暗いモードからライトモードに自動的に表示モードを変更する機能は、ユーザーが探しているものではないと思った.この問題を解決するために、私はインターネットからいくつかの情報を見つける必要があります.また、私は、私が問題を理解するのを援助するために、YouTubeから若干のビデオさえ見ました.私は時間を学び、練習し、それを満たすために過ごした.そして最後に、これらのコードを追加することで問題を解決しました.

私がプロジェクトを包んだとき、私は別の新しい問題を見つけましたClear ボタンは、変更モードの表示モードを再び光モードに再び発生します.だから私はClear 関数.

この関数では、表示モードデータを含むLocalStorageに保存されているすべての情報またはデータをクリアします.上で述べたように、これは良い練習ではありません.したがって、私は私の計画でこの動きを持っていなかったにもかかわらず、この関数を更新する必要があります.数回の研究の後、私はlocalStorage.clear() はlocalstorageに保存されている全てのデータを削除します.しかし、このボタンまたはこの機能の目標は、すべての保存されたtodolistを削除することです.そこで、次のように機能を更新することを決めました.

このようにClear ボタンは、すべての保存されたtodolistを削除し、それは彼らが現在使用しているのと同じ表示モードを維持します.
私が作ったPRへのリンクPR#42 ]