このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#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()
2020年5月14日
2020年6月5日
2020年6月5日
2020年6月6日
2020年5月26日
2020年5月21日
2020年5月5日
2020年5月14日
2020年5月14日
2020年5月14日
2020年5月14日
2020年5月14日
2020年9月2日
2020年5月14日
2020年5月14日
2020年5月14日
2020年5月5日
2020年5月5日
2020年5月5日
2020年9月17日
2020年7月17日
2020年5月14日
2020年5月14日
2020年5月5日
2020年5月5日
2020年5月14日
2020年5月14日
2020年9月16日
2020年5月21日
2020年5月14日
2020年5月1日
2020年9月25日
2020年8月18日
2020年6月26日
2020年5月30日
2020年5月26日
2020年5月14日
2020年5月14日
2020年5月14日
2020年5月14日
