[ToyProject]インクリメンタルオーバーロードサイト-6

:漸進的な過負荷サイト(APP)は完全にリニューアルされ、現在は運動記録部分の機能が完了しており、これまでの話題を簡単に知りたいと考えています.
**リンク(開発者ツールを使用した移動サイズの表示を推奨):https://bit.ly/3pFDC0V

学識

1)上図に表示されるfinishボタンは、私が「GlowBtn」と名付けた要素で、before,:afterのように2つのレイヤーを追加して作成されます.beforeの「linear-cradient」属性と「filter:blur(5 px)」です.属性を利用して効果が発生しました.もちろん、keyframeとanimation効果も使用し、グラデーション効果の色を移動させます.ただし、この時点で発生するイベント「filter:blur」プロパティは、モバイル環境で動作します(?)しないことです.移動中、このcss属性が認識できないという問題が発生したため、webkit部分でそれぞれ属性を掛け、付加属性を適用して解決する

  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);

2)また、これは本当にJS開発者として恥ずかしい(?)仕事ですが、以前はspread syntax、そしてObjectを書いていました.assignに基づいてオブジェクトを深くコピーしようとすると、「const newObject=Object.assign({},obj);' これらの構文を「const newObject=Object」とします.assign(obj,{});' こんなに下手に書いて、問題が発生しました.本来は新しく作成したオブジェクトをパラメータの1つ目として入れ、2つ目にコピーするオブジェクトを入れるのですが、逆にsetStateが適用されないという問題が出て困ってしまいます.これを混同したなんて、反省してみましょう...ほほほ
3)MDNを参照すれば「KeyboardEvent」が分かる.「keycode」は使用しないことをお勧めします(破棄されました).だからKeyboardEventキーを使用する代わりに、キーコードは以前のように返されなくなります.たとえば、以前は条件文でEnterkeyを問い合わせるために「if(e.keyCode==13)」という形式で書くことができましたが、今は「if(e.key====="Enter")」と書くだけです.
4)簡単な事実であるが,モバイル分野ではブラウザのcss属性を単独で処理する必要がある部分が多いようである.そのうち「position:-webkit-sticky;」これを知りました.position:sticky;携帯電話に応用するには、このようにDaに設定します.

てんかい

1)ハッシュ表形式の資料構造で動き記録を記録(JSでオブジェクトを表す)し,動き名を変更すると順序が自動的に逆転するという問題がある.つまり、現在のオブジェクトです.keys()でキー値を配列として設計し、モーションレコードをリストすると、キー値モーション名を変更すると自動的にアルファベット順にソートされます.これはUX上では適切ではありませんので、変更する必要があります.
2)
:こんな風に結果を表形式で見せたかったのですが、考えてみれば悪意の(?)そこまでではなく、特定のスポーツが20セット以上あるかもしれないという人は、その人たちを考えると、表のUIが曖昧になってしまうという判断のもと、単純にflexを使って上から下まで羅列した方がいいと思います.
:それで、上のUIに変えました.