昨日(PaPaPointアプリ【景品一覧表示編①】)の続きで,景品一覧表示を作成していきます。

まずは見た目の部分を作成から。

繰り返し表示される要素の作成までは完了しました。

Material-Ui使うとやっぱりいい感じにスタイルが当てられててそれっぽく見えますねw
｢いい感じ｣とか｢それっぽく｣とか技術ブログ(のはず)なのに感覚的すぎますね。
デザインは僕には難しいのでフレームワークを有効活用していきます。

あと,経験値のバーみたいなのも<progress>タグを使うと簡単に実装でちゃうの驚きです。
HTML5万歳！

見た目でやりたいのは,progressバーのスタイルをデフォルトから変更するくらいです。
progressバーが完了したら,要素を繰り返し表示させて,内部ロジックの作成に入っていきます。

それではまた明日。