しりとり

むかしEllieで作ったしりとりゲームをchatgptでreactに翻訳してもらったらなんとそのまま動きました。

codepenで公開しようとしたらファイルが大きすぎるって。

codesandboxに持っていったら簡単に出来た。

コメント

ゲームとしてより連想のネタ探しのために作ったものです。

意外な単語を返してくるので面白いです。

使ってみて下さい。

Reactチュートリアル

Reactチュートリアルの三目並べをcodepen, tailwindに移植してみました。

これで存分に壊して学べるw

もとのはcodesandboxでcssは別途 styles.cssでした。

遊び方はマス目をクリックすると先手後手の順にマークがついてどちらかが勝つと勝者が上に表示されます。

手を戻したり進めたりが出来ます。

See the Pen reactTutorial00 by kalz2q (@kalz2q) on CodePen.

合計欄付きカウンター

課題

荒川サイクリングロードには様々なロードバイクが走っています。

そのうち、TREK, BIANCHI, GIANTについて数を数えて100台まで数えようと思いました。

それぞれカウンターを用意し、カウントするたびに合計も変化するプログラムを作る。

See the Pen counterTotal by kalz2q (@kalz2q) on CodePen.

入力した数字を倍にして表示する

数字を入力すると倍にして返します。

もっと複雑なもの、例えば因数分解するとか、カウントダウンアニメを表示するとか作ってみたい。

See the Pen typeNumber by kalz2q (@kalz2q) on CodePen.

このプログラムでは送信 submit が押されるまでは出力欄が前の値が入っている。

注文書プログラムなどの合計欄は個々の数値の変化と同時に合計欄が変化する。

プログラム上の違いを考える。