ドットインストールでストップウォッチを作ってみました！【初めての成果物】
ドットインストールで初めてストップウォッチを作ってみました。
まだまだコードの理解はできていませんが、作ってみた感動を記録として残しておこうと思います。
HTMLとcssでデザインをする
どんな感じのストップウォッチを作るのかHTMLとcssを使ってデザインしていきました。
今回はドットインストールで用意されたデザインで進めていきました。
自分で作る事になれば、どんな感じのストップウォッチを作っていくのかを構成する必要があると思います。
ココは、オリジナリティを出せるところですね。
クリエイティブな考えが必要だと思いました。
センスが必要な気がします・・・。
JavaScriptでコードを入力していく
続いてある程度のデザインが決まれば、JavaScriptでコードを書いていきます。
ちょっと具体的なコードまでは覚えていませんが、HTMLで「id」とつけたところと関連付ける必要があったと思います。
関連付けたところでどんな動作をしてもらうのかを指示するコードを打ち込みます。
初めにしたことが、100分の１秒をカウントするようにプログラムする必要がありました。
そのコードを打ち込むことで、デベロッパーツールを使って、カウントが動いているかどうかの確認をします。
これで時計として動くようなプログラムが与えられたと自分の中で理解しました。
その後に、確かカウントの始まる時間を決めるコードを打ち込む必要があったと思います。
今度はボタンをタッチしたらどんな動作をするのかを指示するコードを入力する必要があります。
スタートを押したらカウントが始まり、ストップを押したら、カウントが止まる。
そして、リセットを押したらカウントが元の状態に戻るという指示をプログラムします。
しかし、ココでも細かい指示をする必要があり、ストップを押したら、その時間から開始するように指示を与えたり、クリックを沢山しても、1回しか反応しないような指示を与える必要があります。
ボタンの表示方法も変えることができます。
使わないボタンは押せないような仕様にすることもできました。
HTMLとcssで最終的なデザインに仕上げる
ストップウォッチらしいデザインにする為に、cssを使って仕上げていきました。
文字のデザインや、ボタンの形をコードを書いてキレイに仕上げます。
作品を作り終わってからの感想
ストップウォッチをJavaScriptで作ることがこんなにも難しいと思いませんでした。
外見至ってシンプルなものに見えても、中身は複雑なコードがあって成り立っている事に改めて感じました。
同じ仕組みで動いている物があれば、今回作ったストップウォッチを応用して、作ることが可能になるんだろうなと、初心者ながらに考えました。
まだまだ、色々と覚えることや実践することがあります。
今後もJavaScriptを通して色々な物を作れるように実際に手を動かして作ってみたいです。
JavaScriptに限らず、プログラミングを学ぶには小さな成果物を作る事で、達成感を味わうことが大事だと思いました。
もう一度復習をかねて同じ物を作るのも、プログラミングのコードの書き方やどういった構成で作りあげればイイのか体系的に覚えていける気がします。
初のJavaScriptで作り上げた小さな作品。
一歩前進できたんじゃないかと自身になりました。