Mini Project - Simple Interest Calculator using HTML CSS JAVASCRIPT

Mini Project - Simple Interest Calculator using HTML CSS JAVASCRIPT

Creating a simple interest calculator using HTML, CSS, and JavaScript involves building a form where the user can input the principal amount, the rate of interest, and the time period. When the user clicks a button, the JavaScript code will calculate the simple interest and display the result.

Here is a step-by-step guide to creating this calculator:

1. HTML

Create the structure of the form where users can input the required values.

2. CSS

Style the form to make it look presentable.

3. JavaScript

Add the functionality to calculate the simple interest and display the result.


Program Code

<!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>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }

        .calculator {
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 450px;
            text-align: center;
        }

        h1 {
            margin-bottom: 20px;
        }

        form {
            display: flex;
            flex-direction: column;
        }

        label {
            margin: 10px 0 5px;
        }

        input {
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        button {
            padding: 10px;
            border: none;
            border-radius: 5px;
            background: rgb(230, 18, 18);
            color: white;
            font-size: 16px;
            cursor: pointer;
        }

        button:hover {
            background: rgb(163, 4, 4);
        }

        #result {
            margin-top: 20px;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div class="calculator">
        <h1>Simple Interest Calculator</h1>
        <form id="interestForm">
            <label for="principal">Principal Amount:</label>
            <input type="number" id="principal" name="principal" required>

            <label for="rate">Rate of Interest (% per year):</label>
            <input type="number" id="rate" name="rate" step="0.01" required>

            <label for="time">Time (years):</label>
            <input type="number" id="time" name="time" required>

            <button type="button" onclick="calculateInterest()">Calculate</button>
        </form>
        <div id="result"></div>
    </div>
    <script>

        function calculateInterest() {
            // Get the values from the form
            const principal = parseFloat(document.getElementById('principal').value);
            const rate = parseFloat(document.getElementById('rate').value);
            const time = parseFloat(document.getElementById('time').value);

            // Calculate the simple interest
            const interest = (principal * rate * time) / 100;

            // Display the result
            document.getElementById('result').innerText = `Simple Interest: RS - ${interest.toFixed(2)}`;
        }

    </script>
</body>

</html>        


要查看或添加评论,请登录

Sridhar Raj P的更多文章

  • Custom Hook

    Custom Hook

    Custom Hooks are a powerful feature introduced in React 16.8 that allow developers to extract and reuse stateful logic…

  • useReducer() Hook in React JS – Example & Explanation

    useReducer() Hook in React JS – Example & Explanation

    Hook in React JS – Example & Explanation The hook is an alternative to for managing complex state logic in React…

  • useReducer() Hook in React JS – Example & Explanation

    useReducer() Hook in React JS – Example & Explanation

    Hook in React JS – Example & Explanation The hook is an alternative to for managing complex state logic in React…

  • Passing Data from Child to Parent Component in React JS using Hooks

    Passing Data from Child to Parent Component in React JS using Hooks

    Passing Data from Child to Parent Component in React JS using Hooks In React, data flows from parent to child via…

  • Lists and Keys in React JS

    Lists and Keys in React JS

    In React, we use lists to render multiple components dynamically, and keys help React identify which items have…

    1 条评论
  • Object State Management

    Object State Management

    Object State Management Managing object state with in React is common when handling complex data structures like user…

  • useState Example

    useState Example

    Here are examples of using the hook in React functional components. Each example demonstrates a different use case.

  • Examples of using the useState hook in React Functional Components

    Examples of using the useState hook in React Functional Components

    Examples of using the useState hook in React Functional Components 1. Counter Example - ? Basic counter with increment…

  • Array, Array of Objects Values using Functional Component

    Array, Array of Objects Values using Functional Component

    Example 1: Displaying an Array of Strings import React from react; const FruitsList = () = { const fruits = [Apple…

    1 条评论
  • Hooks

    Hooks

    What are Hooks in React JS? Hooks in React allow functional components to manage state and side effects, which were…

社区洞察

其他会员也浏览了