Emi calculator

-

 EMI CALCULATOR:-

Emi calculator using html css and javascript:-

Html code:-



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>EMI Calculator</title>
    <script src="sc.js"></script>
</head>
<body>
    <div class="container">
        <h2>EMI Calculator</h2>
        <form id="emiForm">
            <label for="loanAmount">Loan Amount:</label>
            <input type="number" id="loanAmount" required>

            <label for="interestRate">Interest Rate (%):</label>
            <input type="number" id="interestRate" step="0.1" required>

            <label for="loanTerm">Loan Term (months):</label>
            <input type="number" id="loanTerm" required>

            <button type="button" onclick="calculateEMI()">Calculate EMI</button>
        </form>
<div id="emiResult">
    <h3>EMI Calculation Result</h3>
    <table>
        <tr>
            <th>Loan Amount</th>
            <th>Interest Rate</th>
            <th>Loan Term</th>
            <th>Monthly EMI</th>
        </tr>
        <tr id="resultRow">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
</div>

        <div id="emiResult"></div>
    </div>

    <script src="sc.js"></script>
</body>
</html>



CSS code:-




body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f4f4f4;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h2 {
    text-align: center;
    color: #333;
}

form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

label {
    font-weight: bold;
}

input {
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button {
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

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

#emiResult {
    margin-top: 20px;
}



Javascript code:-




function calculateEMI() {
    const loanAmount = parseFloat(document.getElementById('loanAmount').value);
    const interestRate = parseFloat(document.getElementById('interestRate').value);
    const loanTerm = parseFloat(document.getElementById('loanTerm').value);

    const monthlyInterestRate = interestRate / (12 * 100);
    const numberOfPayments = loanTerm;
    const discountFactor = (Math.pow((1 + monthlyInterestRate), numberOfPayments) - 1) /
                          (monthlyInterestRate * Math.pow((1 + monthlyInterestRate), numberOfPayments));

    const emi = (loanAmount * monthlyInterestRate) / discountFactor;

    const emiResultElement = document.getElementById('emiResult');
    emiResultElement.innerHTML = `<h3>EMI Calculation Result</h3>
                                  <table>
                                    <tr>
                                      <td>Loan Amount:</td>
                                      <td>${loanAmount.toFixed(2)}</td>
                                    </tr>
                                    <tr>
                                      <td>Interest Rate:</td>
                                      <td>${interestRate.toFixed(2)}%</td>
                                    </tr>
                                    <tr>
                                      <td>Loan Term:</td>
                                      <td>${loanTerm} months</td>
                                    </tr>
                                    <tr>
                                      <td>Monthly EMI:</td>
                                      <td>${emi.toFixed(2)}</td>
                                    </tr>
                                  </table>`;
}
function calculateEMI() {
    const loanAmount = parseFloat(document.getElementById('loanAmount').value);
    const interestRate = parseFloat(document.getElementById('interestRate').value);
    const loanTerm = parseFloat(document.getElementById('loanTerm').value);

    const monthlyInterestRate = interestRate / (12 * 100);
    const numberOfPayments = loanTerm;
    const discountFactor = (Math.pow((1 + monthlyInterestRate), numberOfPayments) - 1) /
                          (monthlyInterestRate * Math.pow((1 + monthlyInterestRate), numberOfPayments));

    const emi = (loanAmount * monthlyInterestRate) / discountFactor;

    const resultRow = document.getElementById('resultRow');
    resultRow.innerHTML = `<td>${loanAmount.toFixed(2)}</td>
                           <td>${interestRate.toFixed(2)}%</td>
                           <td>${loanTerm} months</td>
                           <td>${emi.toFixed(2)}</td>`;
}

Comments

Post a Comment

Popular posts from this blog

Square value added

-
 Problem Z=a²+y² Output:   A=2   B=2    Z=8 Solution of python code: a=int(input("Enter the a value")) y=int(input("Enter the y value")) z=a**2+y**2 print ("SQUARE VALUE OF a and y is ",z) *Check it my code any interpreter*
Read more

HTML tutorials

-
Image
Introduction of HTML                   HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. HTML is a combination of Hypertext and Markup language. Hypertext defines the link between web pages. A markup language is used to define the text document within the tag which defines the structure of web pages. This language is used to annotate (make notes for the computer) text so that a machine can understand it and manipulate text accordingly. Most markup languages (e.g. HTML) are human-readable. The language uses tags to define what manipulation has to be done on the text.       HTML is a markup language used by the browser to manipulate text, images, and other content, in order to display it in the required format. HTML was created by Tim Berners-Lee in 1991. The first-ever version of HTML was HTML 1.0, but the first standard version was HTML 2.0, published in 1995.  What is ...
Read more