Код рефакторинга для моего калькулятора процентных ставок

Question

Поскольку я все еще новичок в веб-разработке, рефакторинг моего кода все еще вызывает некоторые проблемы.Я был бы очень признателен, если бы кто-то мог просмотреть Javascript для калькулятора процентных ставок, который я построил, и, возможно, дать мне несколько советов о том, как его реорганизовать / повысить его эффективность.

Он состоит из трех функций:

1. Первый метод createOptions просто перебирает цифры от 1 до 100 и добавляет каждое из этих чисел в качестве параметра в раскрывающееся меню для ввода процентов.

2. Второй метод CalculateInterest не требует пояснений.Используемая формула предполагает сложный процент.Он также содержит цикл, который повторяет каждый платеж до тех пор, пока не будет достигнут введенный период оплаты.Под сложным процентом я имею в виду процент от первоначальной суммы (основной суммы), представляющей процентную ставку, которая рассчитывается, добавляется к основной сумме, и к ней добавляется процент от их суммы (процентная доля плюс основная сумма).Этот процесс повторяется для каждой итерации цикла.

3. Последняя функция onClick получает данные формы в DOM, сохраняет их в переменных, а затем вызывает calcInterest, передавая переменные в свои параметры.

Мне в основном интересны советы относительно моего Javascript, но любые указатели HTML и CSS тоже будут приветствоваться

Вот HTML:

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="./style.css">


  <h1 id = "title">Interest Rate Calculator</h1>
<div class="container">
 <div class = "wrap">
   <label>% INTEREST</label>
   <select class = 'form-control' style = "width: 10%" name="percentage" id= "percentage"></select>

   <label> $ AMOUNT</label>
   <input type="number" min = '1' max = '999999999' name = "amount" id = "amount" class = "form-control" style = "width: 10%">
   <label for=""># OF PAYMENTS</label>
   <input type = "number" min = '1' max = '999' id = "time" class = "form-control" style = "width: 10%">
    <button onClick = "onClick()" target = "_top" class = 'btn btn-light'>CALCULATE!</button>  
   </div>
 </div>


 <div id="result">
   <p id = "show"></p>
 </div>
  <script type="text/javascript" src = "./script.js"></script>

CSS:

 body {
  background: linear-gradient( rgb(25, 25, 230), rgb(255, 255, 255));
  background-repeat: no-repeat;
  box-sizing: border-box;

    }

    h1 {
      text-align: center;

    }

    #title {
      font-family: Verdana;
      text-transform: uppercase;
      color: white;
    }
    label {
      font-weight: bolder;
      color: black;
    }
    .btn, .btn-light {
      margin-top: 10px;

    }

    #result {
      margin-top: 10px;
      font-size: 24px;
      text-align: center;

    }

    .wrap {
      position: relative;
      left: 45%;
    }

    .show {
      animation: fadeIn 1.8s ease-in 0.2s 1 normal both running;
    }

    @keyframes fadeIn {
      from {
        opacity: 0; 
      }

      to {
        display: block;
        opacity: 1;
      }
    }

    .test {

      font-size: 60px;
    }

JS:

createOptions();

function createOptions(){
  let select = document.getElementById('percentage');
  for(var i = 0; i <= 100; i++){ 
  var node = document.createElement("option");
  node.innerHTML = i;
  node.setAttribute('value', i);
  node.setAttribute('class', 'percent');
  select.appendChild(node); 
  }
}


function calculateInterest(amount, payments, interest){
  var total = amount;
  for(var i = 1; i <= payments; i++){
    var percent = total * interest;
    total = total += percent;
  }
  return '$' + total.toFixed(2); 
}

function onClick(){

  var para = document.getElementById('show');
  var result = document.getElementsByTagName('div')

  var select = document.getElementById('percentage');
  var percentValue = select.options[select.selectedIndex].value / 100;
  var amounts = document.getElementById('amount');
  var amountValue = parseFloat(amounts.value);
  var time = document.getElementById('time');
  var timeValue = parseInt(time.value);

  if(para.className === "show test"){
    para.remove()
    var para = document.createElement('p');
    para.id = "show"
    var result = document.getElementById('result')
    result.appendChild(para);
  }

  para.innerHTML = calculateInterest(amountValue, timeValue, percentValue);
  para.className = "show";
  para.className += " test"

}