Configure the Client
Now, let’s configure the client component. The client directory contains:
- The index.html file that contains the HTML code for the front-end application
- The main.css file that contains the CSS code for the front-end application
- The main.js file that contains the JavaScript code
- The client-package.json configuration file
We will be coding index.html, main.css, and main.js.
Note: Please go through the code in this section to make sure you fully understand it.
Copy the code below and paste it into the respective files located in the client/directory of your project using an IDE and save the files.
index.html
copy
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="main.js"></script>
<link
rel="stylesheet"
type="text/css"
href="main.css"/>
<script>
window.addEventListener("DOMContentLoaded", function () {
// Retrieve input elements
var basicSalaryInput = document.getElementById("basicSalary");
var allowancesInput = document.getElementById("allowances");
var deductionsInput = document.getElementById("deductions");
var netSalaryInput = document.getElementById("netSalary");
// Add event listeners to input fields
basicSalaryInput.addEventListener("input", calculateNetSalary);
allowancesInput.addEventListener("input", calculateNetSalary);
deductionsInput.addEventListener("input", calculateNetSalary);
// Function to calculate net salary
function calculateNetSalary() {
// Retrieve values from input fields
var basicSalary = parseFloat(basicSalaryInput.value) || 0;
var allowances = parseFloat(allowancesInput.value) || 0;
var deductions = parseFloat(deductionsInput.value) || 0;
// Calculate net salary
var netSalary = basicSalary + allowances - deductions;
// Update the net salary input field
netSalaryInput.value = netSalary.toFixed(2);
}
});
</script>
</head>
<body>
<div class="container mt-5 mb-5">
<h2>Payslip Generator</h2>
<form onsubmit="generatePayslip();return false;">
<div class="row">
<div class="form-group col-md-6">
<label for="employeeName">Employee Name:</label>
<input type="text" id="employeeName" name="employeeName" required />
</div>
<div class="form-group col-md-6">
<label for="employeeId">Employee ID:</label>
<input type="text" id="employeeId" name="employeeId" required />
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="designation">Employee Designation:</label>
<input type="text" id="designation" name="designation" required />
</div>
<div class="form-group col-md-6">
<label for="employeeEmail">Employee Email:</label>
<input
type="text"
id="employeeEmail"
name="employeeEmail"
required
/>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="basicSalary">Basic Salary:</label>
<input type="number" id="basicSalary" name="basicSalary" min="0" oninput="validity.valid||(value='');" required />
</div>
<div class="form-group col-md-6">
<label for="allowances">Allowances:</label>
<input type="number" id="allowances" name="allowances" min="0" oninput="validity.valid||(value='');" required />
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="deductions">Deductions:</label>
<input type="number" id="deductions" name="deductions" min="0" oninput="validity.valid||(value='');" required />
</div>
<div class="form-group col-md-6">
<label for="netSalary">Net Salary:</label>
<input type="number" id="netSalary" name="netSalary" readonly />
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="paymentMethod">Payment Method:</label>
<select id="paymentMethod" name="paymentMethod" required>
<option value="">Select</option>
<option value="Bank Transfer">Bank Transfer</option>
<option value="Cheque">Cheque</option>
<option value="Cash">Cash</option>
</select>
</div>
</div>
<input
type="submit"
value="Submit"
/>
</form>
</div>
</body>
</html>
main.css
copy
.container {
background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
padding: 40px;
margin-top: 50px;
margin-bottom: 50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
background: linear-gradient(to right, #4caf50, #45a049);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-align: center;
margin-bottom: 40px;
}
/* Styling for the form labels */
label {
/* Add a subtle animation on hover */
transition: color 0.3s ease;
}
label:hover {
/* Change the color on hover */
color: #4caf50;
}
/* Styling for the form input fields */
input[type="text"],
input[type="number"],
select {
/* Increase the height of the input fields */
height: 40px;
/* Add a subtle box shadow */
}
/* Styling for the form input groups */
.form-group {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.form-group label {
flex: 0 0 200px; /* Set a fixed width for the labels */
margin-right: 10px; /* Add some spacing between label and input */
}
.form-group input,
.form-group select {
flex: 1; /* Allow the inputs to take up remaining space */
}
/* Styling for the submit button */
input[type="submit"] {
/* Add a gradient background */
background-image: linear-gradient(to right, #4caf50, #45a049);
/* Add a box shadow */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
margin-top: 15px;
width: 150px;
margin-left: 600px;
}
input[type="submit"]:hover {
/* Darken the background on hover */
background-image: linear-gradient(to right, #45a049, #398e3d);
}
Note: The Node.js function package’s name payslip_generator_function has been added in the code for main.js in the line 13. If you have provided a different package name, ensure you replace accordingly.
main.js
copy
function generatePayslip() {
// Retrieve form values
const employeeName = document.getElementById('employeeName').value;
const employeeId = document.getElementById('employeeId').value;
const designation = document.getElementById('designation').value;
const paymentMethod = document.getElementById('paymentMethod').value;
const employeeEmail = document.getElementById('employeeEmail').value;
const basicSalary = parseFloat(document.getElementById('basicSalary').value);
const allowances = parseFloat(document.getElementById('allowances').value);
const deductions = parseFloat(document.getElementById('deductions').value);
$.ajax({
url: '/server/payslip_generator_function/generatepayslip', //provide your function endpoint here
type: 'post',
contentType: 'application/json',
data: JSON.stringify({
employeeName,
employeeId,
basicSalary,
allowances,
deductions,
designation,
paymentMethod,
employeeEmail
}),
success: function (data) {
alert(data);
window.location.reload();
},
error: function (error) {
console.log(error);
alert(error.responseText);
window.location.reload();
}
});
}
The client directory is now configured.
Let’s go over the working of the function and the client code:
-
The end-user enter inputs the employee details in the client-side. When the end-user clicks Submit, a POST call in main.js triggers the /generatepayslip API endpoint and the data is passed to the function in a JSON format.
-
The function triggers the PDF & Screenshot SDK and the request body is passed and the PDF document is generated. The PDF is then stored in a temporary location.
-
The Send Mail SDK is triggered and the PDF document is read from the temporary location and attached to the email. The email is sent to the employee from the email ID set up using the Mail component.
-
A response containing the acknowledgement message will be displayed on the client-side, after the PDF document has been emailed.
Last Updated 2023-12-15 18:54:08 +0530 +0530