このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 カウントダウンタイマーを作ってみよう (02:40) 無料公開中
- 完成版の確認
- 作業用フォルダの設定
- index.htmlの作成
-
#02 実装の準備をしよう (02:48) 無料公開中
- index.htmlのマークアップ
- main.jsの作成
-
#03 実装の流れを確認しよう (01:26) 無料公開中
- タイマー機能の実装方針
- 日時オブジェクト
-
#04 終了時刻を求めよう (02:21) 無料公開中
- 終了時刻の計算
- new Date()
- getTime()
-
#05 関数を一定時間ごとに呼び出そう (01:59)
- setInterval()
-
#06 残り時間を求めよう (02:41)
- 残り時間の計算
- textContent
-
#07 タイマーを終了させよう (02:40)
- タイマーの終了
- clearInterval
-
#08 残り時間を分と秒で表示させよう (02:48)
- Math.floor()
- ミリ秒を分と秒に分解する方法
- テンプレートリテラル
-
#09 残り時間の桁数を合わせよう (02:30)
- padStart()
- String()
- .disabled
-
#10 CSSでスタイリングしていこう (01:39)
- 文字コードの指定
- style.cssの作成
- mainのスタイリング
-
#11 全体のスタイルを整えよう (02:09)
- 背景色
- 余白の設定
- 中央配置
-
#12 テキストのスタイルを整えよう (01:44)
- スタイルのリセット
- テキストのスタイリング
-
#13 ボタンのスタイルを整えよう (02:10)
- スタイルのリセット
- ボタンのスタイリング
-
#14 ボタンが押せることをわかりやすくしよう (01:55)
- cursor
- :hover
- :active
- opacity
-
#15 ボタンを無効化したときの見た目を作ろう (02:42)
- classList.add()
- classList.remove()
- :hover
-
#16 完成したアプリを振り返ろう (01:15)
- これまでのまとめ
- 次のステップ
