Untitled
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>🏡 Home Loan Calculator 🏡</title> <style> body { background: linear-gradient(135deg, #FF7417, #FFB40C); font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #fff; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .calculator { background: rgba(0, 0, 0, 0.6); padding: 30px; border-radius: 15px; box-shadow: 0 8px 16px rgba(0,0,0,0.3); width: 350px; text-align: center; } .calculator h1 { margin-bottom: 20px; font-size: 24px; } .calculator .input-group { margin-bottom: 15px; text-align: left; } .calculator label { display: block; margin-bottom: 5px; font-size: 16px; } .calculator input { width: 100%; padding: 10px; border: none; border-radius: 8px; font-size: 16px; } .calculator button { background-color: #FF7417; color: #fff; border: none; padding: 12px 20px; border-radius: 8px; font-size: 16px; cursor: pointer; transition: background-color 0.3s; } .calculator button:hover { background-color: #e67300; } .result { margin-top: 20px; padding: 15px; background: #FFB40C; border-radius: 10px; font-size: 18px; color: #333; } /* Emojis Styling */ .emoji { font-size: 24px; margin-right: 8px; } </style> </head> <body> <div class="calculator"> <h1>🏡 Home Loan Calculator 🏠</h1> <div class="input-group"> <label for="loanAmount">💰 Loan Amount:</label> <input type="number" id="loanAmount" placeholder="e.g., 250000"> </div> <div class="input-group"> <label for="interestRate">📈 Interest Rate (%):</label> <input type="number" id="interestRate" step="0.01" placeholder="e.g., 3.5"> </div> <div class="input-group"> <label for="loanTerm">🗓️ Loan Term (years):</label> <input type="number" id="loanTerm" placeholder="e.g., 30"> </div> <button onclick="calculateLoan()">🔍 Calculate</button> <div class="result" id="result" style="display: none;"> 🎯 <strong>Monthly Payment:</strong> $<span id="monthlyPayment"></span> </div> </div> <script> function calculateLoan() { // Get input values const loanAmount = parseFloat(document.getElementById('loanAmount').value); const interestRate = parseFloat(document.getElementById('interestRate').value); const loanTerm = parseInt(document.getElementById('loanTerm').value); // Validate inputs if (isNaN(loanAmount) || isNaN(interestRate) || isNaN(loanTerm) || loanAmount <= 0 || interestRate <= 0 || loanTerm <= 0) { alert("❗ Please enter valid positive numbers in all fields."); return; } // Calculate monthly interest rate const monthlyRate = (interestRate / 100) / 12; // Calculate number of payments const numberOfPayments = loanTerm * 12; // Calculate monthly payment using the formula const monthlyPayment = (loanAmount * monthlyRate) / (1 - Math.pow(1 + monthlyRate, -numberOfPayments)); // Round to two decimal places const roundedPayment = monthlyPayment.toFixed(2); // Display the result document.getElementById('monthlyPayment').textContent = roundedPayment; document.getElementById('result').style.display = 'block'; } </script> </body> </html>
Leave a Comment