[JS]To Do List Project+)グラス毛皮主義

3週目の課題として簡単なTodulistアプリを作成しました.3週目にバニラJSの初期講座を聴いたときに、『オリオンリスト』を体現しておけばよかったのに、こんな本格的な課題があるとは思わなかったので、作りたかったのですが、こういうときは面白そうでした.JSを勉強したりHTML/CSSだけを実現したりするときにSPAを使って最初から最後まで何かを作成したのは初めてなので(もちろん授業で教えてくれた大部分の内容に基づいています)、本当にめちゃくちゃで、多くの人に助けられました.でも成功した!

📝 実施内容

ユーザから入力2つのリストの内容を有効に評価し、ローカルストレージ

に保存する.

ユーザは、特定のリストをクリックするたびに、そのリストの状態を「完了/未完了」

に切り替える.

リストが更新されるたびに、完了したリスト/完全なリストの数が計算され、

がレンダリングされます.
[削除

]ボタンをクリックして、リスト

をローカルストレージから削除します.
代表的なのはこの4種類です.

📝 難問

が追加されたすべてのリストはローカルストレージに格納されていますが、リストを再接続して追加すると、ストレージ内のすべてのデータが初期化されるという問題があります.
▶接続後の初期値が毎回空の配列に設定されているため、以下のように修正して解決しました.今から見れば、これは非常に愚かな間違いだ.

// 이전 코드
todoLists: [],

// 변경 코드
todoLists: initialState.length > 0 ? initialState : [],

リストを削除すると、画面から削除されますが、ストレージ分野の話題

です.

リストのステータスを切り替えて[完了](Finish)に変更した場合は、レンダリングストレージ内の既存のデータではなく新しい値を入力する必要があります.
▶問題は、既存のコードでsetItemメソッドを実行するたびに、既存のデータは配列形式で格納されますが、todoList(割り当て済み)これは、新しい鍵の価値によりストレージに新たな問題が発生したため、

の問題を解決するために、以下のコードを変更することができると推定される.

// 이전 코드
localStorage.setItem(
       "todo-list",
       JSON.stringify({
         todoLists: this.state.todoLists,
       })
     );
     
// 변경 코드
const newState = [...this.state.todoLists];
localStorage.setItem("todo-list", JSON.stringify(newState))

📝 使用するCSSスタイル

:focus
入力値がinputまたはdiv textareaの場合、いくらborder: none;に設定してもクリックするだけでヘッダが発生し、設計上非常に悪いと考えられます.実はCSSもあまり使えないので、CSSでは基本的なスタイルのほか、動作時に使うのはカーソルが上がるとすぐにスタイルを変える:hoverだけで、調べてみると:focusもあり、下記のようになっています.

    input:focus {
      outline: none;
    }

autocomplete="off" input formを入力するたびに、以前入力した記録(自動完了機能かもしれない)が乱雑に見えるのが嫌で、input要素でautocompleteを処理していた属性がoffであれば、はっきり見えなくなります.

Glassmorphism CSS Generator : [リンク]

親要素の背景をサブ要素の画像または色をブール処理の形式にするグローバルCSSジェネレータ(*グラスモデルCSSジェネレータ).backdrop-filter: blur() saturate()を使用して値を生成すると、現在のUIトレンドに非常に適していると思いますので、それを適用してみました.自動運転機の使用も簡単で直感的なので、似たようなスタイルが必要なときに使うといいです.

実は私は良いスタイルを着るとは思わなかったが、他の人が提出した作品がかっこいいので、私も負けません!このような気持ちで、私は自分のスタイルを試してみました.
*グラスモピ主義グローバル変形:2020年に流行したニューモピ主義の後に現れるUIデザイントレンドは、シャドウ付与要素間の差異により、特定の画像や色パターンにおいてやや不透明なプラスチックやガラスなどを示す.