JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="sl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Izračun izenačenja glavnice</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 8px;
text-align: center;
}
th, td {
width: 150px;
}
</style>
</head>
<body>
<h1>Izračun izenačenja glavnice</h1>
<form id="calcForm">
<label for="rate1">Obrestna mera 1 (%):</label>
<input type="number" id="rate1" name="rate1" step="0.1" value="1.7" required><br><br>
<label for="rate2">Obrestna mera 2 (%):</label>
<input type="number" id="rate2" name="rate2" step="0.1" value="3.0" required><br><br>
<label for="membershipFee1">Članarina 1 (EUR):</label>
<input type="number" id="membershipFee1" name="membershipFee1" step="0.01" value="0.00" required><br><br>
<label for="membershipFee2">Članarina 2 (EUR):</label>
<input type="number" id="membershipFee2" name="membershipFee2" step="0.01" value="162.00" required><br><br>
<button type="button" onclick="calculatePrincipal()">Izračunaj</button>
</form>
<h2>Rezultati</h2>
<table id="resultTable">
<thead>
<tr>
<th>Glavnica (EUR)</th>
<th id="principal"></th>
</tr>
</thead>
</table>
<script>
function calculatePrincipal() {
let rate1 = parseFloat(document.getElementById('rate1').value) / 100;
let rate2 = parseFloat(document.getElementById('rate2').value) / 100;
let membershipFee1 = parseFloat(document.getElementById('membershipFee1').value);
let membershipFee2 = parseFloat(document.getElementById('membershipFee2').value);
let...