Write a program in javascript to take input from user and calculate simple interest.

Pushpa Raj Dangi October 13, 2020

 Write a program in javascript to take input from the user and calculate simple interest.

1. HTML

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Simple interest calculator</title>
</head>

<body>
  <div class="calculator">
    <h4>Simple Interest Calculator</h4>
    <input type="number" placeholder="Principal" id="Principal">
    <input type="number" placeholder="Rate %" id="Rate">
    <input type="number" placeholder="Time(Year)" id="Time">

    <p id="result"></p>

    <div class="btn-group">
      <button onclick="calculate()">Calculate</button>
    </div>
  </div>
</body>

</html>

2. CSS

    <style>
      body {
        font-family: sans-serif;
        text-align: center;
      }

      label {
        font-weight: bold;
        line-height: 2.7;
      }


      .calculator {
        width: 20%;
        margin: auto;
        padding: 25px 10px;
        border-radius: 5px;
        background: #9C27B0;
        color: #ffffff;
      }

      input {
        width: 100px;
        padding: 10px;
        margin-bottom: 10px;
        border-radius: 5px;
        font-size: 15px;
        font-weight: bold;
        border-color: #00f;
      }

      button {
        border: none;
        padding: 10px 15px;
        font-weight: bold;
        font-size: 14px;
        color: #ffffff;
        background: orange;
        border-radius: 4px;

      }

      #result {
        background: #514e4e99;
        padding: 15px 0px;
        margin: 20px 50px;
        border-radius: 5px;
      }
    </style>

3. JS

<script>
      const result = document.getElementById("result");

      function calculate() {
        const principal = Number(document.getElementById("Principal").value);
        const rate = Number(document.getElementById("Rate").value);
        const time = Number(document.getElementById("Time").value);
        result.innerHTML = 'Total Interest ' +   (principal * time * rate) / 100 ;
      }
    </script>

4. Result 

Write a program in javascript to take input from user and calculate simple interest.


Codepen live


Reactions

Post a Comment

0 Comments

If you have any question please ask?