Revision d7d63357-4158-4f2c-b84e-cf029d65521d

# Style

You should consistently indent your CSS. This yields the following:

 body {
 background: linear-gradient(#1919e6 ,#fff);
 background-repeat: no-repeat;
 box-sizing: border-box
 }
 
 h1 {
 text-align: center
 }
 
 #title {
 font-family: Verdana;
 text-transform: uppercase;
 color: #fff
 }
 
 label {
 font-weight: bolder;
 color: #000
 }
 
 .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 .2s 1 normal both running
 }
 
 @keyframes fadeIn {
 0% {
 opacity: 0
 }
 
 to {
 display: block;
 opacity: 1
 }
 }
 
 .test {
 font-size: 60px
 }

## Naming

You should name the `onClick` function something more descriptive. In addition, the `for` loop should be indented.

 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 handler(){
 
 var para = document.getElementById('show'),
 result = document.getElementsByTagName('div')
 
 var select = document.getElementById('percentage'),
 percentValue = select.options[select.selectedIndex].value / 100,
 amounts = document.getElementById('amount'),
 amountValue = parseFloat(amounts.value),
 time = document.getElementById('time'),
 timeValue = parseInt(time.value);
 
 if(para.className === "show test"){
 para.remove();
 para = document.createElement('p');
 para.id = "show";
 result = document.getElementById('result');
 result.appendChild(para);
 }
 
 para.innerHTML = calculateInterest(amountValue, timeValue, percentValue);
 para.className = "show";
 para.className += " test";
 }

## HTML

Indentation could be a little better, and a doctype should be declared:

 <!DOCTYPE html>
 <html>
 
 <head>
 <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">
 </head>
 
 <body>
 <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>
 </body>
 
 </html>

# Rewrite:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-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 += percent;
 }
 return '$' + total.toFixed(2);
 }

 function handler(){

 var para = document.getElementById('show'),
 result = document.getElementsByTagName('div')

 var select = document.getElementById('percentage'),
 percentValue = select.options[select.selectedIndex].value / 100,
 amounts = document.getElementById('amount'),
 amountValue = parseFloat(amounts.value),
 time = document.getElementById('time'),
 timeValue = parseInt(time.value);

 if(para.className === "show test"){
 para.remove()
 para = document.createElement('p');
 para.id = "show"
 result = document.getElementById('result')
 result.appendChild(para);
 }

 para.innerHTML = calculateInterest(amountValue, timeValue, percentValue);
 para.className = "show";
 para.className += " test"

 }

<!-- language: lang-css -->

 body {
 background: linear-gradient(#1919e6 ,#fff);
 background-repeat: no-repeat;
 box-sizing: border-box
 }

 h1 {
 text-align: center
 }

 #title {
 font-family: Verdana;
 text-transform: uppercase;
 color: #fff
 }

 label {
 font-weight: bolder;
 color: #000
 }

 .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 .2s 1 normal both running
 }

 @keyframes fadeIn {
 0% {
 opacity: 0
 }

 to {
 display: block;
 opacity: 1
 }
 }

 .test {
 font-size: 60px
 }

<!-- language: lang-html -->

 <!DOCTYPE html>
 <html>

 <head>
 <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">
 </head>

 <body>
 <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>
 </body>

 </html>

<!-- end snippet -->