HTML/CSS - EMI Calculator Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loan EMI Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
    <div class="main">
        <h2>Loan EMI Calculator</h2>
        <label>Loan Amount (₹):</label>
        <input type="number" id="loanAmount" placeholder="Enter loan amount">
        
        <label>Interest Rate (% per year):</label>
        <input type="number" id="interestRate" placeholder="Enter annual interest rate">
        
        <label>Loan Tenure (months):</label>
        <input type="number" id="loanTenure" placeholder="Enter loan tenure in months">
        
        <button onclick="calculateEMI()">Calculate EMI</button>
        
        <h3 id="emiResult">Your Monthly EMI: ₹ 0</h3>
    </div>
    </div>
    
    <div class="yt">

css

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.container {
  font-family: Arial, sans-serif;
  background-color:  #f4f4f4;
  text-align: center;
  padding: 20px;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index:10;
}
.main{
  background:  white;
  padding: 30px 25px;
  width: 300px;
  margin: auto;
  box-shadow: 0px 0px 10px  rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  z-index:10;
}
input, button {

alert("pls subscribe my channel ☺️🙏")
function calculateEMI() {
  let P = document.getElementById("loanAmount").value;
  let R = document.getElementById("interestRate").value;
  let N = document.getElementById("loanTenure").value;
  if (P === "" || R === "" || N === "" || P <= 0 || R <= 0 || N <= 0) {
      alert("Please enter valid loan details!");
      return;
  }
  R = R / (12 * 100); 
  let EMI = (P * R * Math.pow(1 + R, N)) / (Math.pow(1 + R, N) - 1);
  
  document.getElementById("emiResult").innerText = `Your Monthly EMI: ₹ ${EMI.toFixed(2)}`;
}

BROWSER

Console