Prerequisites: The pre-requisites for this project are-
Approach: To create our Pay Role Management webpage we are going to take the input bill amount and handle the error cases so that it throws an error if someone uses the negative value of bill amount or more than the given amount. Then we are going to apply our main logic to show the output of the minimum number of notes possible to return to the user as output(table). This webpage will actually count the minimum number of notes that the customer will get as a return in balance. Suppose the bill amount is 500 and you have a 2000 rupee so it calculates what no of minimum notes to be returned to the user.
Basic setup: Open VS Code and open a folder from your drive where you want to create this project and give the name (folderName). After opening creates the following files:
Project Structure: It should look like this:
Step 1: First we will create an HTML structure in index.html. This is the main index page which is connected to the style.css file for styling and index.js for the logical operations in the website.
The HTML file contains basically three parts:
- input sections
In the header part we have the heading and in the input sections we have two inputs from the user one is the bill amount another is the amount given by the user. In the last part, we have a table to show the minimum number of notes to be returned to the user.
- Calculate the remaining value of the i.e entered amount-.bill amount.
- Handle the errors.
- Finally our output is shown according to the indices of the notes(noOfNotes).
Step 3: Now we will style the web page. Here the main container is given padding and display as flex with direction as column and background color blue. We have also bordered the table with solid black, also styled the button.
Output: Install live server extension in VS Code. Click on Live Server and our website is ready now.
Please Login to comment...