Pomodoroタイマー作成メモ

下記ロードマップのタスク1について、早速作成してみる。

HTML、CSS等の基礎的な技術は身についていると信じて、、、

https://qiita.com/baby-degu/items/da30fa71b8f48fffc568

JSの画面読み込み

はい最悪、久しぶりすぎて検索してしまった。

<script type="text/javascript" src="index.js"></script>

1秒ごとの実行方法

TIMER = setInterval(() => {実行メソッド}, 1000 );

setIntervalの停止方法

clearInterval(TIMER);

HTMLへの反映方法

<div id="timer"></div>

const countDownTimer = document.getElementById('timer');
countDownTimer.innerHTML = `${TIME_MIN}：${TIME_SEC}`;

0パディング

本日時点でIEは使えないけど無視。

String型のメソッドのため、NumberからtoStringメソッドを用いて、String型へ変換。

数値.toString().padStart(2,'0');

Tomatoの画像と時間を重ねる

中央寄せ

/* 画像とテキストを親のブロックでくくりそれに対して、下記CSSを反映 */
text-align: center;

親

position: relative;

子

position: absolute;
top: 55%;
left: 50%;
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);

位置を相対的に設定。

top,leftでほぼ真ん中になるが文字の大きさの分ずれるため、tramsformを利用。

また、ベンダープレフィックスバージョンも付与しておく。

ひとまず、25分間測れるようになった！！！

残タスクは下記。

・開始ボタン、停止ボタンの作成。

・25分終わったら、5分がセットされるように設定、4クール終わったら15分休憩が取れるように

・リリース　Herokuしか使ったことないけど、GithubPages or Firebase or AWSかなぁ。。