Tool Script for Loan Calculator in html css java php

 

Loan calculator tool script written in HTML, CSS, JavaScript, and PHP:

Tool Script for Loan Calculator in html css java php


Step  1 .- index.html

<!DOCTYPE html>

<html>

<head>

  <title>Loan Calculator</title>

  <style>

    body {

      font-family: Arial, sans-serif;

      background-color: #f2f2f2;

      margin: 0;

      padding: 20px;

    }


    .container {

      max-width: 400px;

      margin: 0 auto;

      background-color: #fff;

      padding: 20px;

      border-radius: 5px;

      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

    }


    h1 {

      text-align: center;

    }


    label {

      display: block;

      margin-bottom: 10px;

      font-weight: bold;

    }


    input[type="number"] {

      width: 100%;

      padding: 10px;

      border: 1px solid #ccc;

      border-radius: 4px;

    }


    .result {

      margin-top: 20px;

      font-weight: bold;

    }


    .btn {

      display: inline-block;

      background-color: #4CAF50;

      color: #fff;

      text-decoration: none;

      padding: 10px 20px;

      border-radius: 4px;

      cursor: pointer;

    }

  </style>

</head>

<body>

  <div class="container">

    <h1>Loan Calculator</h1>

    <form action="calculate.php" method="post">

      <label for="loanAmount">Loan Amount:</label>

      <input type="number" name="loanAmount" id="loanAmount" placeholder="Loan Amount" step="0.01" required>

      <label for="interestRate">Interest Rate (%):</label>

      <input type="number" name="interestRate" id="interestRate" placeholder="Interest Rate" step="0.01" required>

      <label for="loanTerm">Loan Term (in years):</label>

      <input type="number" name="loanTerm" id="loanTerm" placeholder="Loan Term" required>

      <button class="btn" type="submit">Calculate</button>

    </form>

  </div>

</body>

</html>

Now Create Second Page For Loan Calculator 


Step 2  - Calculate.php:

<!DOCTYPE html>
<html>
<head>
  <title>Loan Calculator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f2f2f2;
      margin: 0;
      padding: 20px;
    }

    .container {
      max-width: 400px;
      margin: 0 auto;
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    h1 {
      text-align: center;
    }

    .result {
      margin-top: 20px;
      font-weight: bold;
    }

    .btn {
      display: inline-block;
      background-color: #4CAF50;
      color: #fff;
      text-decoration: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Loan Calculator</h1>
    <?

Post a Comment

0 Comments