Pay Role Management Webpage using HTML CSS JavaScript

Pay Role Management Webpage using HTML CSS JavaScript. In this tutorial, we’ll build a Payroll Management webpage using JavaScript. This project will focus on reinforcing foundational JavaScript concepts.

Prerequisites:

To follow along with this project, you should be familiar with:

ES6 JavaScript features
Query Selectors

Project Outline:

Pay Role Management Webpage using HTML CSS JavaScript – Our Payroll Management page will prompt for a bill amount, validate inputs, and display the minimum number of currency notes required to give the user their balance. If the entered amount is negative or exceeds the available funds, an error message will be displayed. For example, if the bill is 500 and the customer pays with a 2000 note, the page will calculate the fewest notes necessary to return the balance.

Initial Setup:

Open VS Code, create a project folder (name it as you like), and add these essential files:

index.js
index.html
style.css

By the end, you’ll have a functional page that applies JavaScript logic to real-world scenarios.

Step 1: Setting Up the HTML Structure in `index.html`

We’ll begin by creating the main HTML layout in index.html. This page links to style.css for styling and index.js for handling functionality.

The HTML file has three main sections:

Header: Contains the page title or heading.
Input Section: Includes two input fields—one for the bill amount and another for the amount given by the user.
Output Table: Displays the minimum number of notes required to return the balance to the user.

Each part serves a unique role in the webpage layout and user interaction.

Index.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
</head>

<body>
    <div class="container">
        <header><strong>
                <center>Pay Role Management</center>
            </strong></header>
        <p class="description">
            Enter the bill amount and the cash given
            know minimum number of notes to return
        </p>

        <label for="input-bill">
            <strong>Enter the bill amount</strong>
        </label>
        <input class="input-bill" id="bill" />
        <label for="cash-given">
            <strong> Cash Given</strong>
        </label>
        <input class="cash-given" id="cash" />
        <button class="check-btn" id="btn">Check</button>
        <p id="error">
        </p>

        <table class="table">
            <caption>
                <strong>Return Change</strong>
            </caption>
            <tr class="row">
                <th class="row">No of Notes</th>
                <td class="no-of-notes"></td>
                <td class="no-of-notes"></td>
                <td class="no-of-notes"></td>
                <td class="no-of-notes"></td>
                <td class="no-of-notes"></td>
                <td class="no-of-notes"></td>
                <td class="no-of-notes"></td>
            </tr>
            <tr>
                <th class="row">Notes</th>
                <td class="row">2000</td>
                <td class="row">500</td>
                <td class="row">100</td>
                <td class="row">20</td>
                <td class="row">10</td>
                <td class="row">5</td>
                <td class="row">1</td>
            </tr>
        </table>
    </div>
</body>

</html>

Output:

Step 2: Implementing Logic in `index.js`

In the JavaScript file, we’ll first grab references to the button, input fields, and output elements using their IDs. Our primary logic will determine the minimum number of notes needed to return the balance.

Here’s the approach:

Calculate the remaining balance by subtracting the bill amount from the amount given.
Check for errors, such as negative or insufficient amounts.
Iterate through an array of available notes and calculate the minimum number of each note needed. We’ll use the trunc() function to remove any decimal portion in the calculation.

The output will then display the minimum notes required, based on the calculated indices in the notes array (noOfNotes).

var inputBill = document.getElementById("bill");
var cashGiven = document.getElementById("cash");
var checkBtn = document.getElementById("btn");
var errMsg = document.getElementById("error");
var noOfNotes = document.querySelectorAll(".no-of-notes");
var notes = [2000, 500, 100, 20, 10, 5, 1];

function errorHandle(error) {
    errMsg.style.display = "block";
    errMsg.innerText = error;
}

function hideMessage() {
    errMsg.style.display = "none";
}

function clickHandler() {
    hideMessage();
    if (inputBill.value < 0) {
        errorHandle("Please Enter a positive value");
    } else {
        var remaining = cashGiven.value - inputBill.value;
        if (remaining < 0) {
            errorHandle("Give me more");
        } else {
            for (var i = 0; i < notes.length; i++) {
                const paisa = Math.trunc(remaining / notes[i]);
                remaining %= notes[i];
                noOfNotes[i].innerText = paisa;

            }

        }
    }
}

checkBtn.addEventListener("click", clickHandler);

Step 3: Styling the Webpage

Next, we’ll add styling to the webpage. The main container will have padding, a column flex layout, and a blue background color. The table will be outlined with a solid black border, and the button will also receive custom styling to enhance its appearance.

.container {
    display: flex;
    flex-direction: column;
    width: 25vw;
    margin-left: 500px;
    padding: 50px;
    background-color: aqua;
}

.table {
    border: 2px solid black;
}

.row {
    border: 2px solid black;
}

.no-of-notes {
    border: 2px solid black;
}

.check-btn {
    margin-top: 35px;
    padding: 5px;
}

.input-bill {
    margin-top: 35px;
    padding: 5px;
}

.cash-given {
    margin-top: 35px;
    padding: 5px;
}

Full Source Code:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="voice.css">    
</head>

<body>
    <div class="container">
        <header><strong>
                <center>Pay Role Management</center>
            </strong></header>
        <p class="description">
            Enter the bill amount and the cash given
            know minimum number of notes to return
        </p>

        <label for="input-bill">
            <strong>Enter the bill amount</strong>
        </label>
        <input class="input-bill" id="bill" />
        <label for="cash-given">
            <strong> Cash Given</strong>
        </label>
        <input class="cash-given" id="cash" />
        <button class="check-btn" id="btn">Check</button>
        <p id="error">
        </p>

        <table class="table">
            <caption>
                <strong>Return Change</strong>
            </caption>
            <tr class="row">
                <th class="row">No of Notes</th>
                <td class="no-of-notes"></td>
                <td class="no-of-notes"></td>
                <td class="no-of-notes"></td>
                <td class="no-of-notes"></td>
                <td class="no-of-notes"></td>
                <td class="no-of-notes"></td>
                <td class="no-of-notes"></td>
            </tr>
            <tr>
                <th class="row">Notes</th>
                <td class="row">2000</td>
                <td class="row">500</td>
                <td class="row">100</td>
                <td class="row">20</td>
                <td class="row">10</td>
                <td class="row">5</td>
                <td class="row">1</td>
            </tr>
        </table>
    </div>
    <script>
      var inputBill = document.getElementById("bill");
      var cashGiven = document.getElementById("cash");
      var checkBtn = document.getElementById("btn");
      var errMsg = document.getElementById("error");
      var noOfNotes = document.querySelectorAll(".no-of-notes");
      var notes = [2000, 500, 100, 20, 10, 5, 1];

      function errorHandle(error) {
         errMsg.style.display = "block";
         errMsg.innerText = error;
      }

      function hideMessage() {
         errMsg.style.display = "none";
      }

      function clickHandler() {
         hideMessage();
         if (inputBill.value < 0) {
            errorHandle("Please Enter a positive value");
         } else {
            var remaining = cashGiven.value - inputBill.value;
            if (remaining < 0) {
               errorHandle("Give me more");
            } else {
               for (var i = 0; i < notes.length; i++) {
                  const paisa = Math.trunc(remaining / notes[i]);
                  remaining %= notes[i];
                  noOfNotes[i].innerText = paisa;

               }

            }
         }
      }

      checkBtn.addEventListener("click", clickHandler);
   </script>
</body>

</html>

Output:

Creating a Payroll Management webpage from scratch using HTML, CSS, and JavaScript is an excellent way to deepen your understanding of front-end development. This project integrates several key concepts, including dynamic user input handling, error checking, and effective UI design. By working with JavaScript functions and DOM manipulation, you gain hands-on experience in implementing interactive and logical components on a webpage.

In this project, we covered:

HTML Structure: Designing a structured layout with clear sections for inputs, outputs, and user guidance. This foundation allows for a well-organized and readable page, enhancing the user experience.
CSS Styling: Customizing the appearance of elements, including background colors, borders, and button styling, to create a visually appealing interface. CSS helps to create a user-friendly environment by making the layout intuitive and aesthetically pleasing.
JavaScript Logic: Implementing key logic to calculate the minimum number of notes needed for balance returns. This step not only shows how to handle basic arithmetic and logical conditions in JavaScript but also demonstrates the importance of user validation and feedback.

By working through each phase of this project, you’ve learned how JavaScript interacts with HTML and CSS to create a responsive, functional webpage. You’ve also practiced handling errors, such as invalid amounts, which improves the reliability of your application.

Ultimately, building this Payroll Management page helps you sharpen your skills for creating user-focused applications that manage real-world scenarios, preparing you for more complex web development projects.

CodeMagnet

CodeMagnet

Leave a ReplyCancel reply

Python Humanize Package Tutorial: Complete Guide

Caesar Cipher in Python: Complete Guide with Examples, Code, and Explanation

Python tqdm Tutorial: Easily Track Loop Progress with Examples

Trending

Python Humanize Package Tutorial: Complete Guide

Caesar Cipher in Python: Complete Guide with Examples, Code, and Explanation

Python tqdm Tutorial: Easily Track Loop Progress with Examples

AI-Powered Healthcare Diagnosis with Python: A Complete Guide

CodeMagnet

Subscribe to CodeMagnet! 🔔

Pay Role Management Webpage using HTML CSS JavaScript

Prerequisites:

Project Outline:

Initial Setup:

Step 1: Setting Up the HTML Structure in index.html

Step 2: Implementing Logic in index.js

Step 3: Styling the Webpage

Share this:

Like this:

Author

Leave a ReplyCancel reply

Trending

Step 1: Setting Up the HTML Structure in `index.html`

Step 2: Implementing Logic in `index.js`