[Malleys]

<form class="mortgage-calculator" oninput="calculateMortgage(this);" onsubmit="calculateMortgage(this); return false;">
	<label>
		Введите сумму вклада (₴):
		<input name="amount" type="number" max="99999999" value="9000" required>
	</label>

	<label>
		Введите срок договора (лет):
		<input name="years" type="number" min="1" max="2" step="1" value="2" required="">
	</label>

	<output>
		<p>Сумма вклада <span id="amount"></span> ₴ на <span id="years"></span> год под <span id="rate"></span>% годовых</p>
		<p>Сумма дохода за первый год: <span id="firstYearPayment"></span> ₴</p>
		<p>Сумма дохода за второй год: <span id="secondYearPayment"></span> ₴</p>
	</output>

	<script>
		
function calculateMortgage(form) {
	if(!form.checkValidity()) {
		alert("⛔Ошибка!⛔");
		return;
	}

	var amount = parseFloat(form.amount.value, 10);
	var years = parseInt(form.years.value, 10);
	var rate = years > 1 ? 8 : 6;

	var firstYearPayment = amount * (Math.pow(1 + 0.01 * rate, 1) - 1);
	var secondYearPayment = years === 1 ? 0 : amount * (Math.pow(1 + 0.01 * rate, 2) - 1) - firstYearPayment;

	document.getElementById("amount").textContent = amount;
	document.getElementById("years").textContent = years;
	document.getElementById("rate").textContent = rate;
	document.getElementById("firstYearPayment").textContent = Math.round(100 * firstYearPayment) / 100;
	document.getElementById("secondYearPayment").textContent = Math.round(100 * secondYearPayment) / 100;
}

	calculateMortgage(document.querySelector(".mortgage-calculator"));

	</script>

	<style>

html {
	padding: 50px;
	font: 100% "Helvetica Neue", sans-serif;
}

.mortgage-calculator {
	width: 40em;
	padding: 2em;
	box-shadow: 1px 1px 5px rgba(0,0,0,.3);
	display: flex;
	flex-wrap: wrap;
}

.mortgage-calculator label {
	flex: 1;
	padding: 2em;
	margin: 0 -2em 1em;
	color: rgba(0,0,0,.6);
	font-size: 100%;
	background: hsl(0,0%,96%);
}
		
.mortgage-calculator input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	font-size: 160%;
	background: transparent;
	padding: .2em 0;
	border: none;
	border-bottom: 1px solid rgba(0,0,0,.4);
	color: black;
	outline: none;
}

.mortgage-calculator input:invalid {
	color: red;
}

.mortgage-calculator output {
	flex-basis: 100%;
}

.mortgage-calculator output p:first-child {
	margin-bottom: 2em;
}

.mortgage-calculator output p:first-child span {
	color: red;
}

.mortgage-calculator output p:not(:first-child) span {
	color: deepskyblue;
}

	</style>
</form>

Вычисляет, как описано, а остальное сами доделаете/переделаете!