Avkastning

by thomasa88

HTML

<div class="form-container">
        <h1></h1>
        <form id="financialForm">
            <div class="form-group">
                <label for="savings">Investerat idag</label>
                <div class="currency">
                    <input type="number" id="savings" name="savings" min="0" step="10000" value="100000" oninput="calc()"> kr
                </div>
            </div>

            <div class="form-group">
                <label for="monthly_invest">Månatlig investering</label>
                <div>
                    <input type="number" id="monthly_invest" name="monthly_invest" min="0" step="1000" value="5000" placeholder="10.0" oninput="calc();">
                    kr/mån
                </div>
            </div>

            <div class="form-group">
            <label for="yearly_returns">Årlig avkastning</label>
            <div>
            <input type=number id="yearly_returns" name="yearly_returns" value="7.0" min="0.1" step="0.1" max="20.0" oninput="calc()"> %
            </div>

                        
            <div class="form-group">
                <label for="returns_target">Avkastningsmål</label>
                <div class="currency">
                    <input type="number" id="returns_target" name="returns_target" min="0" step="1000" value="15000" oninput="calc()"> kr/mån
                </div>
            </div>

            <div id=result>
              <span id=years></span> år till önskad avkastning
            </div>
            <div id=log>
              </div>
        </form>
    </div>

CSS

table { border-collapse: collapse; }
td { text-align: right; }
th { text-align: center;}
td, th { padding-left: 10px;}
tr { border-bottom: 1px solid silver; }
tr:first-child { border: none;}
.match { background-color: #ddd; font-weight: bold; }
.form-group { margin-bottom: 1em;}
div { margin-bottom: 1em ;}
#years { font-size: 180%;}
#log, #result { margin-top: 3em;}

JavaScript

function calc() {
  let savings = document.getElementById('savings').value;
  let monthly_returns_target = document.getElementById('returns_target').value;
  let monthly_invest = document.getElementById('monthly_invest').value;
  let quota_per_month = document.getElementById('quota_per_month');
  let yearly_returns_perc = document.getElementById('yearly_returns').value;
  let years = document.getElementById('years');
  let logDiv = document.getElementById('log');

  let return_factor = 1 + yearly_returns_perc / 100.0;
  let yearly_returns_target = monthly_returns_target * 12;

  let acc_savings = parseFloat(savings);
  let log = "";
  log += "<table>";
  log += "<tr><th></th><th></th><th colspan=2>Avkastning</th></tr>"
  log += "<tr><th>År</th><th>Investerat</th><th>per år</th><th>per månad</th></tr>"
  years.textContent = "";
  let found = false;
  for (let i = 0; i < 100; i++) {
    let current_return = acc_savings * (return_factor - 1.0);
    let row_class = "";
    if (!found && current_return >= yearly_returns_target) {
      years.textContent = i;
      found = true;
      row_class = "match";
    }
    log += `<tr class="${row_class}"><td>${i}</td><td>${acc_savings.toFixed(0)} kr</td><td>${current_return.toFixed(0)} kr</td><td>${(current_return/12).toFixed(0)} kr</td>`;
    if (found && i >= 30) {
      break;
    }
    acc_savings = (acc_savings * return_factor) + (monthly_invest * 12);
  }
  logDiv.innerHTML = log;
}

//document.addEventListener('load', calc);
calc();