budget_example

by danielkwood

HTML

<html>
  <head>
    <title>test</title>
    <link rel="stylesheet" href="style.css"/>
  </head>
  
  <body>
    <label>Amount spent: <input type="number" id="amount"></label>
    <select id="months" name="months">
      <option value="0">January</option>
      <option value="1">February</option>
      <option value="2">March</option>
    </select>
    <button onclick="addAmount()">Add</button> <br><br>
    <table id="budgetTable">
      <tr>
        <td></td>
        <td>JAN</td>
        <td>FEB</td>
        <td>MAR</td>
        <td>APR</td>
        <td>MAY</td>
        <td>JUN</td>
      </tr>
      
      <tr>
        <td>Spent</td>
        <td id="month_0"></td>
        <td id="month_1"></td>
        <td id="month_2"></td>
        <td></td>
        <td></td>
      </tr>
    </table>
  </body>
</html>

CSS

table{
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
}

td{
  border: 1px solid black;
  padding: 10px;
}

JavaScript

var months = [0,0,0,0,0,0,0,0,0,0,0,0,];

function addAmount(){
	var amount = document.querySelector("#amount").value;
  var month = document.querySelector("#months").value;
  months[month] += parseInt(amount);
  var month_column = "#month_" + month;
  console.log(month_column);
  document.querySelector(month_column).innerHTML = months[month];
  console.log(months[month]);
  document.querySelector("#amount").value = "";
}