新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 ストップウォッチを作ってみよう (02:43) 無料公開中
- 完成版の確認
- index.htmlの作成
- styles.cssの作成
- main.jsの作成
-
#02 画面のマークアップをしよう (02:42) 無料公開中
- マークアップ
- 要素の取得
-
#03 カウントアップ機能を実装しよう (02:44) 無料公開中
- clickイベントの設定
- Date.now()
- setTimeout()
-
#04 タイマーを表示させよう (03:01)
- new Date()
- padStart()
- String()
-
#05 停止､リセットの機能を実装しよう (02:00)
- clickイベントの設定
- clearTimeout()
-
#06 タイマーを再開できるようにしよう (02:58)
- clickイベント
- Date.now()
-
#07 タイマーの問題点を把握しよう (02:46)
- ボタンの状態
- button要素のdisabled属性
-
#08 ボタンの有効/無効を切り替えよう (02:49)
- button要素のdisabled属性
- 関数化
-
#09 全体のスタイルを整えよう (02:48)
- スタイルの整備
-
#10 タイマーのスタイルを整えよう (01:56)
- スタイルの整備
- buttonタグとdivタグの違い
-
#11 ボタンのスタイルを整えよう (02:59)
- スタイルの整備
- Flexbox
-
#12 ストップウォッチを完成させよう (02:51)
- classList.add()
- classList.remove()
- classList.contains()
