Трекер бюджета на JavaScript

Программа на JavaScript, которая реализует базовый трекер бюджета с пользовательским интерфейсом. Эта программа создает простой пользовательский интерфейс HTML, который позволяет вам вводить свой бюджет и расходы.

Расходы вводятся в виде строки значений, разделенных запятыми, которые затем разбиваются и преобразуются в массив чисел. Функция calculateRemainingBudget принимает входные данные, вычисляет оставшийся бюджет путем вычитания каждого расхода из начального бюджета и отображает результат в выходном элементе на странице.

Разметка:

<div class="container">
  <h1>Budget Tracker</h1>
  <br />
  <label for="budget">Enter budget:</label> <input type="number" id="budget" />
  <br /><br />
  <label for="expense">Enter expenses:</label>
  <input type="text" id="expenses" placeholder="separated by commas" />
  <br /><br />
  <button onclick="calculateRemainingBudget()">Calculate</button>
  <div class="output" id="output"></div>
</div>

Стили:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.output {
  margin-top: 20px;
  font-size: 24px;
  font-weight: bold;
}

Скрипт:

const calculateRemainingBudget = () => {
  const budget = parseInt(document.getElementById("budget").value);
  const expensesInput = document.getElementById("expenses").value;
  const expenses = expensesInput.split(",").map((expense) => parseInt(expense));

  let remainingBudget = budget;

  expenses.forEach((expense) => {
    remainingBudget -= expense;
  });

  document.getElementById(
    "output"
  ).innerHTML = `Remaining budget: ${remainingBudget}`;
};