Avkastning

by thomasa88

HTML

<div class="form-container">
        <h1></h1>
        <form id="financialForm">
            <div class="form-group">
                <label for="savings">Investerat</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="salary">Månadslön efter skatt</label>
                <div class="currency">
                    <input type="number" id="salary" name="salary" min="1000" step="1000" value="15000" oninput="calc()"> kr
                </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>

            <div class="form-group">
                <label for="savings_quota">Sparkvot</label>
                <div class="percentage">
                    <input type="range" id="savings_quota_slider" min="0" max="100" step="0.1" value="10" oninput="document.getElementById('savings_quota').value=this.value; calc();">
                    <input type="number" id="savings_quota" name="savings_quota" min="0" max="100" step="0.1" value="10" placeholder="10.0" oninput="document.getElementById('savings_quota_slider').value=this.value; calc();">
                    %
                    <span id="quota_per_month"></span>
                </div>
            </div>

            <div id=result>
              <span id=years></span> år tills avkastning = nuvarande lön
            </div>
            <div id=log>
              </div>
        </form>
    </div>

CSS

table { border-collapse: collapse; }
td, th { text-align: right; padding-left: 10px;}
tr { border-bottom: 1px solid silver; }
.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 salary = document.getElementById('salary').value;
  let savings_quota = document.getElementById('savings_quota').value / 100.0;
  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 target_return = salary * 12;

  quota_per_month.textContent = `(${(savings_quota * salary).toFixed(0)} kr/mån)`;
  let acc_savings = parseFloat(savings);
  let log = "";
  log += "<table><tr><th>År</th><th>Investerat</th><th>Avkastning<br>per månad</th></tr>"
  years.textContent = "";
  for (let i = 0; i < 100; i++) {
    let current_return = acc_savings * (return_factor - 1.0);
    log += `<tr><td>${i}</td><td>${acc_savings.toFixed(0)} kr</td><td>${(current_return/12).toFixed(0)} kr</td>`
    //log += current_return;
    if (current_return >= target_return) {
      years.textContent = i;
      break;
    }
    acc_savings = (acc_savings * return_factor) + (savings_quota * salary * 12);
  }
  logDiv.innerHTML = log;
}

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