画面の中の水が増えていくような画面

Question

前提・実現したいこと

jsxとCSSでボタンを押すとだんだん下から画面の色が変わっていき1000貯まったら画面の色が完全に変わるような画面が作りたいのですが`どのように作れば良いでしょうか？ソースコードを送ってもらえると助かります。
reactのjsxの中にhtmlを書いてcssでどのように装飾すれば良いでしょうか？

Answer 1

jsx？　知らない子ですね。

  <style>
    :root {
      --depth: 0vh;
    }

    body::after {
      content: "";
      position: fixed;
      bottom: 0;
      width: 100%;
      background: rgba(0, 128, 256, 0.3);
      pointer-events: none;
      height: var(--depth);
    }
  </style>
  <script>
    let depth = 0;
    document.addEventListener('keydown', () => document.documentElement.style.setProperty("--depth", `${depth++ / 10}vh`));
  </script>

Comments

[退会済みユーザー]

すいません。わかりにくかったです。Reactでかくときjavascriptの拡張子がjsxでした。
なので、js,cssでお願いします。

[Lhankor_Mhy]

こちらこそわかりにくくてすみません。
「知らない子ですね」はジョークです。
https://word-dictionary.jp/posts/2848

[退会済みユーザー]

なので、jsxとcssで教えてくれると助かります。

[Lhankor_Mhy]

詳しくないですが、jsx は JavaScript の拡張なので、JavaScriptとして有効であれば、jsx でも有効であると思います。

[退会済みユーザー]

ありがとうございます。初心者ですいません。

[Lhankor_Mhy]

Reactのコンポーネントとして納品しろ、という話なのかな？
さすがに、それは求めすぎだと思うけど……？

[退会済みユーザー]

全然そういうわけではないです。

[退会済みユーザー]

コードがhtmlになってるのですがこれはjsですかね？

[Lhankor_Mhy]

了解しました。
普通に組み込んで動くと思いますが、状態管理をどうするべきか、とかについてはReactに詳しい人に聞いた方がいいかと思います。

[Lhankor_Mhy]

回答自体はHTMLですが、jsとcssの抜出は容易ですよね。

[退会済みユーザー]

実行しても動かないのですがどのようにしたら動きますか？

[Lhankor_Mhy]

コードがないとなんとも言えないですね。
というか、もうこの世にいないのですね。ご愁傷さまです。