このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 ストップウォッチを作ってみよう (02:57) 無料公開中
- 完成版の確認
- index.htmlの作成
- styles.cssの作成
- main.jsの作成
-
#02 画面のマークアップをしよう (02:31) 無料公開中
- タイマーのマークアップ
- ボタンのマークアップ
- 要素の取得
-
#03 カウントアップ機能を実装しよう (02:52) 無料公開中
- clickイベントの設定
- Date.now()
- setTimeout()
-
#04 タイマーを表示させよう (03:00)
- new Date()
- padStart()
- String()
-
#05 停止､リセットの機能を実装しよう (02:20)
- clickイベントの設定
- clearTimeout()
-
#06 タイマーを再開できるようにしよう (03:00)
- clickイベントの設定
- Date.now()
-
#07 タイマーの問題点を把握しよう (02:47)
- ボタンの状態
- button要素のdisabled属性
-
#08 ボタンの有効/無効を切り替えよう (02:54)
- button要素のdisabled属性
- 関数化
-
#09 全体のスタイルを整えよう (02:40)
- bodyのスタイリング
- .containerのスタイリング
-
#10 タイマーのスタイルを整えよう (01:57)
- #timerのスタイリング
- button要素とdiv要素の違い
-
#11 ボタンのスタイルを整えよう (02:50)
- .btnのスタイリング
- Flexbox
-
#12 ストップウォッチを完成させよう (02:57)
- classList.add()
- classList.remove()
- classList.contains()
詳細情報
- 最終更新日
- 2019年8月26日
- バージョン情報
- Chrome 76.0 / Visual Studio Code 1.37.1
