SIMPLE LOAN CALCULTOR
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Loan Calculator</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>Loan Calculator</h1> <form id="loan-form"> <label for="loan-amount">Loan Amount:</label> <input type="number" id="loan-amount" required> <label for="interest-rate">Interest Rate (%):</label> <input type="number" id="interest-rate" required> <label for="loan-term">Loan Term (years):</label> <input type="number" id="loan-term" required> <button type="submit">Calculate</button> </form> <div id="results"> <h2>Results:</h2> <p id="monthly-payment"></p> <p id="total-interest"></p> <p id="total-amount"></p> </div> </div> <script src="script.js"></script> </body> </html>
body {
font-family: Arial, sans-serif;
}
.container {
max-width: 500px;
margin: 40px auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#loan-form {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="number"] {
width: 100%;
height: 40px;
padding: 10px;
font-size: 18px;
border: 1px solid #ccc;
border-radius: 5px;
}
button[type="submit"] {
width: 100%;
height: 40px;
padding: 10px;
font-size: 18px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #3e8e41;
}
#results {
margin-top: 20px;
}
#monthly-payment, #total-interest, #total-amount {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
Comments
Post a Comment