にゃんおぺ育児

日々成長していく子供たちとの今を忘れたくないからはじめたブログ。

【Udacity Week 10 Progress】JavaScript で Pixel Art Maker 作りに挑戦

JavaScript のレッスンを完了したので、Pixel Art Maker プロジェクトに取り掛かりました。週末にプロジェクトの概要を読み、昨日と今日でなんとか形になりました。
プロジェクトは一旦提出してみたので明日までにはレビューがかえってくると思われます。

今日はそんな Pixel Art Maker 作りの軌跡をつづっておきます。

不安だけしかない Day 0
下図のように予め形成された html ファイル、CSSスタイルシート、と空っぽの JS ファイルをダウンロードします。
プロジェクトのスペックを確認します。

・ユーザーが入力した Height と Width に併せてグリッドを作成する
・ユーザーがクリックすると□に色がつく
・色を変更できるようにする

f:id:nyagemitsu:20190116095437p:plain

少しだけ形になってきた Day 1
Submit ボタンを押すと入力されたHeight と Width の値でテーブルを作ろうとするところまでできました。
Submit ボタンを押すとページがリロードするという動作になったので、preventDefault を入れたりしました。

あと、別の数字を入力して Submit ボタンを押すと、前回のテーブルが残ったままの状態で新しいテーブルが追加されていました。

テーブル内の□をクリックすると、色がつくようになったのですが、複数セレクトされたり、テーブル全体がクリックされると下図のように全部選択された色で塗り替えられるという動きになってしまいました。

f:id:nyagemitsu:20190116095441p:plain

できたかも?の Day 2 

・テーブルがうまくつくれない問題
Height と Width の数値からどうやってテーブルをつくるかを子育ての合間に考えたところ、Row と Column に分けてループすればできるんじゃないかと思い、試してみました。

・テーブルがクリアされない問題
ページをリロードしないとテーブルがクリアされない状態だったので、Submit ボタンを押すとテーブルがクリアされるような動作を追加しました。

・全部の□の背景色が塗りつぶされる問題
□単体がクリックされたときだけ塗りつぶすように条件式をいれてみると、うまくいきました。

f:id:nyagemitsu:20190116153856p:plain

形にはなったものの、正直ちゃんとスペックに沿ってできているのか不安だったので、一旦提出してみることにしました。

プロジェクトに取り掛かったときは、自分の力だけでできるとは思えませんでしたが、
『あ、これあそこで習ったやつを使ったらできるかな』とか
『どっかで聞いた気がするな』とか
そういった記憶を手繰り寄せて参考資料をみたりしてなんとかつくることができました。

後で戻ってくるだろうから、よくみた資料を記録しておこ。

 <参考にした資料>

addEventListener()
createElement()
appendChild()
イベントの種類
preventDefault()
removeEventListener()
removeChild()