現代的な費用分担Webアプリを構築する

はじめに

このステップバイステップのプロジェクトでは、HTML、CSS、JavaScriptを使って、現代的で視覚的に魅力的な費用分担アプリケーションを作成します。このアプリケーションを使えば、グループ内の人々の間で費用を分担し、誰が誰に何を借りているかを計算できます。最初から始めて、プロジェクトを段階的に構築する各ステップをカバーします。

👀 プレビュー

🎯 タスク

このプロジェクトで学ぶことは以下の通りです。

HTMLとCSSを使ってレスポンシブなWebページレイアウトを作成する方法
JavaScriptを使って費用と残高を計算するためのインタラクティブ機能を実装する方法
Webページを現代的で視覚的に魅力的なデザインにスタイリッシングする方法
費用の追加と結果の動的表示のためのユーザー入力を処理する方法
データの正確性を保証し、問題を防止するためのエラーハンドリングを実装する方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

プロジェクトファイルを作成し、Webアプリケーションの基本構造をセットアップする
費用分担アプリのHTML構造を構築し、入力フィールドとプレースホルダを含める
CSSを使ってWebアプリケーションをスタイリッシングし、現代的でカラフルなデザインを実現する
費用の追加、費用リストの更新、費用の要約を計算するためのJavaScript機能を実装する
アプリをインタラクティブにするためのイベントリスナーを追加する
費用の追加や要約の更新など、特定のタスクを実行するためのJavaScript関数を作成する

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("DOM Traversal") subgraph Lab Skills javascript/functions -.-> lab-445701{{"現代的な費用分担Webアプリの構築"}} javascript/array_methods -.-> lab-445701{{"現代的な費用分担Webアプリの構築"}} javascript/dom_select -.-> lab-445701{{"現代的な費用分担Webアプリの構築"}} javascript/dom_manip -.-> lab-445701{{"現代的な費用分担Webアプリの構築"}} javascript/event_handle -.-> lab-445701{{"現代的な費用分担Webアプリの構築"}} javascript/dom_traverse -.-> lab-445701{{"現代的な費用分担Webアプリの構築"}} end

HTML構造を作成する

要件:

index.html の <body> 内に、アプリケーションのHTML構造を作成する。
費用の追加、費用リストの表示、費用の要約の表示用のプレースホルダを含める。

機能:

入力フィールドとボタンを備えたアプリケーションの視覚的構造を作成する。

手順:

index.html を開き、HTML構造を以下のように更新する。

<!-- <body> タグの中 -->

<div class="container">
  <h1>費用分担アプリ</h1>

  <div class="input-card">
    <h2>費用を追加する</h2>
    <div class="input-group">
      <label for="name">名前:</label>
      <input type="text" id="name" placeholder="名前を入力" />
    </div>
    <div class="input-group">
      <label for="expense">費用:</label>
      <input type="number" id="expense" placeholder="費用を入力" />
    </div>
    <button id="addExpense">費用を追加する</button>
  </div>

  <div class="expense-card">
    <h2>費用:</h2>
    <ul id="expenses"></ul>
  </div>

  <div class="summary-card">
    <h2>費用の要約:</h2>
    <ul id="summary"></ul>
  </div>
</div>

✨ 解答を確認して練習

CSSを使ってアプリをスタイリッシングする

要件:

styles.css に、アプリをスタイリッシングするためのCSSルールを追加する。
CSSを使って現代的でカラフルなデザインを作成する。

機能:

CSSスタイルを適用して、アプリを視覚的に魅力的にする。

手順:

styles.css を開き、以下のCSSコードを追加する。

body {
  font-family: Arial, sans-serif;
  background: linear-gradient(135deg, #ff7f50, #ff3399);
  margin: 0;
  padding: 0;
  color: #333;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}

h1 {
  font-size: 2rem;
  margin: 20px 0;
  color: #fff;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.input-card,
.expense-card,
.summary-card {
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  padding: 20px;
  margin: 20px 0;
  width: 100%;
  max-width: 400px;
  text-align: left;
}

.input-card h2,
.expense-card h2,
.summary-card h2 {
  color: #007bff;
  font-size: 1.5rem;
  margin-bottom: 15px;
}

.input-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input[type="text"],
input[type="number"] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

button {
  background: linear-gradient(135deg, #ff3399, #ff7f50);
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease;
}

button:hover {
  background: linear-gradient(135deg, #ff7f50, #ff3399);
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  margin-bottom: 10px;
}

/* カード用のアニメーション */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.input-card,
.expense-card,
.summary-card {
  animation: fade-in 0.5s ease;
}

✨ 解答を確認して練習

イベントリスナーを追加する

さて、JavaScriptを使って費用分担アプリに機能を追加する時が来ました。費用の追加、費用リストの更新、費用の要約の計算を行います。

要件:

HTML内のボタンにイベントリスナーを追加する。
ユーザーがアプリと対話する際に、イベントリスナーが適切なアクションをトリガーすることを確認する。

機能:

ボタンクリックを監視することでアプリをインタラクティブにする。

手順:

script.js を開き、ボタンクリックを処理するために以下のコードを追加する。

// "費用を追加する" ボタンのイベントリスナー
document.getElementById("addExpense").addEventListener("click", addExpense);

✨ 解答を確認して練習

`addExpense` 関数を実装する

要件:

script.js に addExpense という名前のJavaScript関数を作成する。
この関数は入力フィールドから値を抽出し、それらを検証し、費用を配列に追加する必要がある。

機能:

ユーザーにアプリに費用を追加できるようにする。

手順:

script.js を開き、以下のコードを追加する。

const expenses = [];
// addExpense関数を実装する
function addExpense() {
  const name = document.getElementById("name").value;
  const amount = parseFloat(document.getElementById("expense").value);

  if (name && amount) {
    // 費用をexpenses配列に追加する
    expenses.push({ name, amount });

    // 費用リストと要約を更新する
    updateExpenseList();
    document.getElementById("name").value = "";
    document.getElementById("expense").value = "";
  }
}

✨ 解答を確認して練習

`updateExpenseList` 関数を実装する

要件:

script.js に updateExpenseList という名前のJavaScript関数を作成する。
この関数は、Webページに表示される費用リストを更新する必要がある。

機能:

ユーザーが費用を追加すると、Webページに費用のリストを表示する。

手順:

script.js を開き、以下のコードを追加する。

// updateExpenseList関数を実装する
function updateExpenseList() {
  const expensesList = document.getElementById("expenses");
  expensesList.innerHTML = "";

  for (const expense of expenses) {
    const li = document.createElement("li");
    li.textContent = `${expense.name}: $${expense.amount.toFixed(2)}`;
    expensesList.appendChild(li);
  }

  // updateSummary関数を呼び出す
  updateSummary();
}

✨ 解答を確認して練習

`updateSummary` 関数を実装する

要件:

script.js に updateSummary という名前のJavaScript関数を作成する。
この関数は、誰が誰に何を借金しているかを含む費用の要約を計算して表示する必要がある。

機能:

ユーザーに費用の要約の概要を提供する。

手順:

script.js を開き、以下のコードを追加する。

// updateSummary関数を実装する
function updateSummary() {
  const summaryList = document.getElementById("summary");
  summaryList.innerHTML = "";

  const totalExpense = expenses.reduce(
    (total, expense) => total + expense.amount,
    0
  );
  const averageExpense = totalExpense / expenses.length;

  for (const expense of expenses) {
    const balance = expense.amount - averageExpense;
    const li = document.createElement("li");

    if (balance > 0) {
      li.textContent = `${expense.name} owes $${balance.toFixed(2)} to others.`;
    } else if (balance < 0) {
      li.textContent = `${expense.name} is owed $${(-balance).toFixed(
        2
      )} by others.`;
    } else {
      li.textContent = `${expense.name} is settled up.`;
    }

    summaryList.appendChild(li);
  }
}

✨ 解答を確認して練習

アプリを実行する

Webブラウザで index.html を開く。
費用を追加し、費用リストと要約が正しく更新されることを確認することでアプリをテストする。
ページの表示は以下の通りである。

✨ 解答を確認して練習

まとめ

このプロジェクトでは、現代的な費用分担Webアプリを段階的に構築しました。プロジェクトファイルを作成し、HTML構造を設定し、CSSスタイルを追加し、JavaScript機能を実装しました。このアプリでは、現在、費用を追加し、費用リストを表示し、費用の要約を確認できます。さらに、スタイルをカスタマイズし、機能を追加することで、アプリの機能性と外観を向上させることができます。

現代的な費用分担Webアプリの構築

はじめに

👀 プレビュー

🎯 タスク

🏆 成果

Skills Graph

HTML構造を作成する

CSSを使ってアプリをスタイリッシングする

イベントリスナーを追加する

addExpense 関数を実装する

updateExpenseList 関数を実装する

updateSummary 関数を実装する

アプリを実行する

まとめ

`addExpense` 関数を実装する

`updateExpenseList` 関数を実装する

`updateSummary` 関数を実装する