Sprint1 Frontend

タスク管理アプリケーションのフロントエンドです。

技術スタック

• HTML5
• CSS3
• JavaScript (Vanilla)

ファイル構成

sprint1-frontend/
├── index.html   # メインHTML
├── style.css    # スタイルシート
├── app.js       # アプリケーションロジック
├── config.js    # 設定ファイル (API URL)
└── README.md

機能

• タスクの一覧表示
• タスクの新規登録 (タスク内容、期限日)
• タスクの詳細表示 (モーダル)
• タスクの更新 (モーダル)
• タスクの削除 (確認ダイアログ付き)
• 完了チェックボックスによるステータス切り替え

設定

config.js

APIサーバーのURLを設定します。

const CONFIG = {
    API_BASE_URL: 'http://localhost:8080/api'
};

AWS環境にデプロイする場合は、APIサーバーのIPアドレスに変更してください。

ローカル開発

前提条件

• Webブラウザ
• APIサーバー (sprint1-api) が起動していること

起動方法

1. config.jsでAPIサーバーのURLを設定

2. 簡易HTTPサーバーで起動

Python 3を使用する場合:

python3 -m http.server 3000

Node.jsを使用する場合:

npx http-server -p 3000

3. ブラウザで http://localhost:3000 にアクセス

画面構成

トップページ

• 新規タスク登録フォーム: タスク内容と期限日を入力して登録
• タスク一覧テーブル: 登録済みタスクの表示
  • 完了チェックボックス
  • タスク内容
  • 期限日
  • ステータス
  • アクションボタン (詳細/編集/削除)

詳細モーダル

タスクの詳細情報を表示:

• ID
• タスク内容
• 期限日
• ステータス
• 作成日時
• 更新日時

更新モーダル

タスクの編集フォーム:

• タスク内容
• 期限日
• ステータス (Pending/Completed)

スタイル

• レスポンシブデザイン対応
• 完了タスクは緑色の背景で表示
• ステータスは色分け表示 (Pending: オレンジ, Completed: 緑)