<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>
Вычисляет, как описано, а остальное сами доделаете/переделаете!
