rf - Posts - OneCompiler

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Кредиттік калькулятор</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="calculator-container"> <h1>Кредиттік калькулятор</h1> <div class="form-group"> <label for="loanAmount">Несие сомасы (теңге):</label> <input type="number" id="loanAmount" placeholder="Мысалы: 100000" required> </div> <div class="form-group"> <label for="interestRate">Жылдық пайыздық мөлшерлеме (%):</label> <input type="number" id="interestRate" step="0.01" placeholder="Мысалы: 5.5" required> </div> <div class="form-group"> <label for="loanTerm">Несиенің ұзақтығы (жыл):</label> <input type="number" id="loanTerm" placeholder="Мысалы: 2" required> </div> <button onclick="calculateLoan()">Есептеу</button> <div id="result" class="result"></div> </div> <script src="script.js"></script> </body> </html> body { font-family: Arial, sans-serif; background-color: #f4f4f4; color: #333; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }

.calculator-container {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
}

h1 {
text-align: center;
margin-bottom: 20px;
}

.form-group {
margin-bottom: 15px;
}

label {
display: block;
margin-bottom: 5px;
}

input {
width: 100%;
padding: 8px;
border-radius: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
}

button {
width: 100%;
padding: 10px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #0056b3;
}

.result {
margin-top: 20px;
font-weight: bold;
text-align: center;
}
function calculateLoan() {
const loanAmount = parseFloat(document.getElementById("loanAmount").value);
const interestRate = parseFloat(document.getElementById("interestRate").value) / 100 / 12;
const loanTerm = parseFloat(document.getElementById("loanTerm").value) * 12;

if (isNaN(loanAmount) || isNaN(interestRate) || isNaN(loanTerm) || loanAmount <= 0 || loanTerm <= 0) {
    alert("Барлық мәндерді дұрыс енгізіңіз!");
    return;
}

const monthlyPayment = (loanAmount * interestRate) / (1 - Math.pow(1 + interestRate, -loanTerm));
const totalPayment = monthlyPayment * loanTerm;
const totalInterest = totalPayment - loanAmount;

document.getElementById("result").innerHTML = `
    Ай сайынғы төлем: ${monthlyPayment.toFixed(2)} теңге<br>
    Барлығы төлеу: ${totalPayment.toFixed(2)} теңге<br>
    Барлығы пайыздар: ${totalInterest.toFixed(2)} теңге
`;

}