JSFiddle - React, Tailwind, and code Playground

I decided to take loan. And to be able quickly evaluate and find more advantageous loan conditions I have made this calculator.

by AntowaKartowa

HTML

<div class="container">
  <h2>Loan calculator</h2>
	<form id="form">
		<label for="loan">
			<span class="label">Loan</span>
			<input type="number" name="loan" id="loan" min="100" max="1000000" value="30000"> uah
		</label>
		<label for="term">
			<span class="label">Term</span>
			<select name="term" id="term">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3" selected>3</option>
				<option value="4">4</option>
				<option value="5">5</option>
				<option value="6">6</option>
				<option value="7">7</option>
				<option value="8">8</option>
				<option value="9">9</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>
			</select> months
		</label>
		<label for="interest">
			<span class="label">Annual interest rate</span>
			<input type="text" name="interest" id="interest" size="2" value="10.99"> %
		</label>
		<label for="tax">
			<span class="label">Fixed comision</span>
			<input type="number" name="tax" id="tax" min="0" max="10000" value="320"> uah
		</label>
		<div class="actions">
			<button id="clear">Clear</button>
			<button type="submit">Calculate</button>
		</div>
	</form>
	<div id="results">
	</div>
</div>

SCSS

form {
	width: 280px;
	margin: 0 auto;
	padding: 30px 0;
}

label {
	display: block;
	width: 280px;
	padding: 5px 0;
	white-space: nowrap;
}

.label {
	display: inline-block;
	width: 130px;
	padding-right: 10px;
	text-align: right;
}

#loan {
	width: 7em;
}

#loan, #interest, #tax {
	text-align: right;
}

.actions {
	width: 280px;
	padding: 10px 0;
	text-align: center;
}

#results {
	display: flex;
	flex-wrap: wrap;
}

.table-container {
	padding: 10px 10px 20px 0;
}

.table {
	td, th {
		padding: 3px;
		border-bottom: solid 1px #999;	
	}
}

JavaScript

let loanEl = document.getElementById('loan');
let termEl = document.getElementById('term');
let interestEl = document.getElementById('interest');
let taxEl = document.getElementById('tax');
let resultsEl = document.getElementById('results');

document.getElementById('form').onsubmit = onCalculate;
document.getElementById('clear').onclick = onClear;

function onCalculate(e) {
	e = e || window.event;
	e.preventDefault();
	
	let values = getValues();
	let errors = validateValues(values);
	if (errors.length) {
		errors.forEach((error) => { alert(error) });
		return;
	}
	let results = getCalcResults(values);
	renderResults(results);
}

function getValues() {
	return {
		loan: loanEl.value,
		term: termEl.value,
		interest: interestEl.value,
		tax: taxEl.value
	};
}

function validateValues(values) {
	let errors = [];
	let validators = {
		loan: loanValidator,
		term: termValidator,
		interest: interestValidator,
		tax: taxValidator
	};
	for(var name in values) {
		let error = validators[name](values[name]);
		error && errors.push(error);
	}
	return errors;
}

function isEmpty(value) {
	return value === '';
}

function isZero(value) {
	return parseFloat(value) === 0;
}

function isNegative(value) {
 return parseFloat(value) < 0;
}

function loanValidator(loan) {
	let errorTitle = 'Loan value wrong: ';
	console.log(loan);
	if (isEmpty(loan)) { return errorTitle + 'Input field can\'t be empty' };
	console.log(parseInt(loan));
	if (isNaN(parseInt(loan))) { return errorTitle + 'Should be integer' };
	if (isZero(loan) || isNegative(loan) || parseInt(loan) < 100) { 
		return errorTitle + 'Value could be equal 100 or greater'; 
	};
}

function termValidator(term) {
	let errorTitle = 'Term value wrong: ';
	if (isEmpty(term)) { return errorTitle + 'Value can\'t be empty' };
	if (isNaN(parseInt(term))) { return errorTitle + 'Should be integer' };
	if (isZero(term) || isNegative(term) 
			|| parseInt(term) < 1 || parseInt(term) > 12) { 
		return errorTitle + 'Value could be...