Zenn
🕌

【毎日アプリ作成チャレンジ3日目】集中力アップ！シンプルなタイマー「Focus Timer」

に公開
JavaScript
初心者向け
webアプリ開発
毎日アプリ作成チャレンジ
タイマーアプリ
tech

こんにちは、森です。
現在、「毎日アプリ作成チャレンジ」として毎日1つ小さなWebアプリを作っています。
今回は3日目、テーマは 「集中力」。
シンプルなタイマーアプリ「Focus Timer」を制作しました。

🎯 作ったもの：Focus Timer


※GitHubへのリンクやスクリーンショット画像は適宜差し替えてください。

🛠 技術要素

  • HTML / CSS / JavaScript
  • setInterval() による1秒ごとの更新
  • スタート・ストップ・リセットのイベント制御
  • Audio要素でアラーム音再生

💡 学んだこと・工夫したこと

  • 時間のフォーマット処理（mm:ss）
  • setIntervalとclearIntervalの使い分け
  • リセット時の状態管理
  • アラーム音の軽量化（MP3 1秒未満）

📂 ファイル構成

focus-timer/
├── index.html
├── style.css
├── main.js
├── favicon.ico
├── assets/
│   └── alarm.mp3
└── README.md

💬 まとめ

タイマーというシンプルな題材でも、UI・状態管理・時間表示・アラート処理など、多くの基本要素を練習できました。
「動くものを作る楽しさ」を感じられるいい課題だったと思います！

🔗 GitHub

👉 GitHubでコードを見る

次は何作ろうかな。
ではまた、4日目で！

Discussion