Creating an online budget tool 2/5
Tags: javascript, html
Published: 2021-07-07 21:04:52

---
title: Creating an online budget tool 2/5
published: true
description: Second part of creating an online budgeting tool
tags: javascript,html
series: online budget in javascript
//cover_image: https://direct_url_to_image.jpg
---
In my last post I showed how to layout the HTML for creating an online budget tool. In this post I am going to show how to add JavaScript to make the form dynamic.

First, I modify the add form at the top of the page by adding id’s to the input fields and the button. I also change the button to have a type of button to stop the form from submitting when the button is clicked.

```
      <form>
          <label>Item</label>
          <input type="text" id="newItem">
          <label>Amount</label>
          <input type="number" id="newAmount">
          <button id="addButton" type="button">Add</button>
        </form>
```
Next, I add an id to the table and remove the contents of the tbody.

```
        <table id="budgetTable">
          <thead>
            <tr>
              <th>Item</th>
              <th>Amount</th>
            </tr>
          </thead>
          <tbody>
          </tbody>
          <tfooter>
            <tr>
              <td>Total</td>
              <td>$1.00</td>
            </tr>
          </tfooter>
        </table>
```
I then add a renderRow function to my Javascript:

```
const renderRow = (data) => {
  return `<tr>
            <td>${data.item}</td>
            <td>$${data.amount}</td>
          </tr>`
};
```
And a renderRows:

```
const renderRows = (data) => {
  const html = [];
  for (let i=0; i<data.length; i++) {
    html.push(renderRow(data[i]));
  }
  return html.join('');
}
```
Then I add a budgetItems array to the Javascript and also add an addBudgetItem function.

```
const budgetItems = [{
  item: 'Car',
  amount: 1.00
}]

const addBudgetItem = () => {
  const budgetItem = {
    item: document.getElementById('newItem').value,
    amount: document.getElementById('newAmount').value
  }
  budgetItems.push(budgetItem);
}
```
I add a renderPage function that will link everything together to produce HTML for the table body and then assign the contents of the table body using the innerHTML property:
```
const renderPage = (id) => {
  document.getElementById(id).tBodies[0].innerHTML = renderRows(budgetItems);
}
```
Finally, I add two event listeners, one called DOMContentLoaded that will call renderPage when the page loads and one being a click event on the add button to add a new item.

```
document.addEventListener('DOMContentLoaded', function($ev) {
  renderPage('budgetTable');
});

document.getElementById('addButton').addEventListener('click', function($ev) {
  addBudgetItem();
  renderPage('budgetTable');
});
```
I can now start to keep track of all my subscriptions:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oww99skvn704zqvv6r77.png)
Clicking add will add a new item to the budgetItems array and then generate html to insert into the table body.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xxj7uhcoyldtohwhuccn.png)

The biggest thing I had to remember when doing this was to use tBodies as spelt as it is case sensitive.

In my next post I will show how to create the total row and will start looking at how to style the form.

The code for the budget tool can be found here: https://github.com/muncey/MyBudgetFrontEnd