SQL
“Create an customer Table with following Attributes (Columns )
1. Customer SSN ID: A Numeric value for Employee ID (Primary key)
2. First Name: A text value for customer name(Maximum 50 characters)
3. Last Name: A text value for customer name(Maximum 50 characters)
4. Email: A text field to capture the Email of an customer.
5. Date Of Birth : A Date value (YYYY-MM-DD)
6. Address: A text value to capture street, city details(Maximum 100 characters)
7. Contact Number: Numeric value Maximum 10 digits.
After Successful Creation of Table insert minimum 10 Demo records”
CREATE TABLE customer (
customer_ssn_id INT PRIMARY KEY,
first_name VARCHAR(50),
last_name VARCHAR(50),
email VARCHAR(100),
date_of_birth DATE,
address VARCHAR(100),
contact_number BIGINT CHECK (LENGTH(contact_number) = 10)
);
INSERT INTO customer (customer_ssn_id, first_name, last_name, email, date_of_birth, address, contact_number)
VALUES
(1001, ‘John’, ‘Doe’, ‘john.doe@example.com’, ‘1990-01-15’, ‘123 Elm St, New York, NY’, 1234567890),
(1002, ‘Jane’, ‘Smith’, ‘jane.smith@example.com’, ‘1985-05-23’, ‘456 Oak Ave, Los Angeles, CA’, 2345678901),
(1003, ‘Michael’, ‘Brown’, ‘michael.brown@example.com’, ‘1992-08-10’, ‘789 Pine Blvd, Chicago, IL’, 3456789012),
(1004, ‘Emily’, ‘Johnson’, ’emily.johnson@example.com’, ‘1995-12-01’, ‘321 Maple Ln, Houston, TX’, 4567890123),
(1005, ‘David’, ‘Davis’, ‘david.davis@example.com’, ‘1988-03-18’, ‘654 Cedar Rd, Phoenix, AZ’, 5678901234),
(1006, ‘Sarah’, ‘Wilson’, ‘sarah.wilson@example.com’, ‘1993-07-25’, ‘987 Birch St, Philadelphia, PA’, 6789012345),
(1007, ‘Chris’, ‘Miller’, ‘chris.miller@example.com’, ‘1991-11-07’, ‘111 Spruce Dr, San Antonio, TX’, 7890123456),
(1008, ‘Laura’, ‘Garcia’, ‘laura.garcia@example.com’, ‘1987-09-14’, ‘222 Fir Pl, Dallas, TX’, 8901234567),
(1009, ‘James’, ‘Martinez’, ‘james.martinez@example.com’, ‘1994-04-29’, ‘333 Redwood Ct, San Jose, CA’, 9012345678),
(1010, ‘Linda’, ‘Rodriguez’, ‘linda.rodriguez@example.com’, ‘1990-02-22’, ‘444 Palm Way, Austin, TX’, 1234567809);
*******************************************************************************************
“As a financial data analyst, i want to search
Customer personal Data by there customer Id”
“After Successful insertion of records financial
data analyst, will be
able to retrieve customer Details from customer
table by there customer id”
SELECT * FROM customer
WHERE customer_ssn_id = 1001; — Replace 1001 with the desired customer SSN ID
********************************************************************************************
“As a customer, I want to update my personal information
( such address or phone number) in the database, so that
bank has up to date details”
“After Successful insertion of customer records, customer will be able to update the personal contact details.
The query result should contain the following attributes;
Customer SSN id | name( first_name+last_name) | Email | Phone | address”
UPDATE customer
SET address = ‘456 New Address St, Miami, FL’, — New address
contact_number = 9876543210 — New phone number
WHERE customer_ssn_id = 1001; — Replace 1001 with the desired customer SSN ID
SELECT
customer_ssn_id,
CONCAT(first_name, ‘ ‘, last_name) AS name,
email,
contact_number AS phone,
address
FROM customer
WHERE customer_ssn_id = 1001; — Replace 1001 with the desired customer SSN ID
*******************************************************************************************
“As a bank employee, i want to able to
Capture Customer Transaction Data in
the Database”
“Create an Customer_transaction Table with following Attributes (Columns )
“”Enter the values for input fields (on Screen) : Customer id (Primary key ) , Customer Name, Account Number , IFSC code, Account balance , Adhara card No. , Pan Card No , Contact Number
After Successful Creation of Table insert minimum 10 records”
CREATE TABLE customer_transaction (
customer_id INT PRIMARY KEY,
customer_name VARCHAR(100),
account_number VARCHAR(20),
ifsc_code VARCHAR(11),
account_balance DECIMAL(15, 2),
aadhar_card_no VARCHAR(12),
pan_card_no VARCHAR(10),
contact_number BIGINT CHECK (LENGTH(contact_number) = 10)
);
INSERT INTO customer_transaction (customer_id, customer_name, account_number, ifsc_code, account_balance, aadhar_card_no, pan_card_no, contact_number)
VALUES
(1, ‘John Doe’, ‘123456789012’, ‘IFSC0001’, 15000.75, ‘123412341234’, ‘ABCDE1234F’, 1234567890),
(2, ‘Jane Smith’, ‘234567890123’, ‘IFSC0002’, 20000.50, ‘234523452345’, ‘FGHIJ5678K’, 2345678901),
(3, ‘Michael Brown’, ‘345678901234’, ‘IFSC0003’, 35000.00, ‘345634563456’, ‘JKLMN9012L’, 3456789012),
(4, ‘Emily Johnson’, ‘456789012345’, ‘IFSC0004’, 45000.25, ‘456745674567’, ‘OPQRS3456M’, 4567890123),
(5, ‘David Davis’, ‘567890123456’, ‘IFSC0005’, 100000.00, ‘567856785678’, ‘TUVWX7890N’, 5678901234),
(6, ‘Sarah Wilson’, ‘678901234567’, ‘IFSC0006’, 25000.75, ‘678967896789’, ‘ABCDE1234P’, 6789012345),
(7, ‘Chris Miller’, ‘789012345678’, ‘IFSC0007’, 30000.00, ‘789078907890’, ‘FGHIJ5678Q’, 7890123456),
(8, ‘Laura Garcia’, ‘890123456789’, ‘IFSC0008’, 75000.50, ‘890189018901’, ‘JKLMN9012R’, 8901234567),
(9, ‘James Martinez’, ‘901234567890’, ‘IFSC0009’, 90000.25, ‘901290129012’, ‘OPQRS3456S’, 9012345678),
(10, ‘Linda Rodriguez’, ‘012345678901’, ‘IFSC0010’, 50000.00, ‘012301230123’, ‘TUVWX7890T’, 1234567809);
*******************************************************************************************
As a bank employee, i want to search customer Data(personal data and transactional data by there Employee Id
“
Bank employee will be able to retrieve customer account details from transactional details and personal details from customer table
(Customer id , Customer Name, Account Number , IFSC code, Account balance , Adhara card No. , Pan Card No, Date Of Birth (DD-MM-YYYY) , Email , Address , Contact Number).”
SELECT
ct.customer_id,
ct.customer_name,
ct.account_number,
ct.ifsc_code,
ct.account_balance,
ct.aadhar_card_no,
ct.pan_card_no,
c.date_of_birth,
c.email,
c.address,
c.contact_number
FROM
customer_transaction ct
INNER JOIN
customer c ON ct.customer_id = c.customer_ssn_id
WHERE
ct.customer_id = 1; — Replace 1 with the desired customer ID
****************************************************************************************
As a customer, I want to check updated account balance after transaction process
“After Successful transaction process, records in customer transactions table will be updated . And customer will able to check the updated account balance.
(Customer id | name( first_name+last_name) | Email | Account Balance)”
UPDATE customer_transaction
SET account_balance = account_balance + 5000.00 — Adjust this value for deposit/withdrawal
WHERE customer_id = 1; — Replace 1 with the desired customer ID
SELECT
ct.customer_id,
CONCAT(c.first_name, ‘ ‘, c.last_name) AS name,
c.email,
ct.account_balance
FROM
customer_transaction ct
INNER JOIN
customer c ON ct.customer_id = c.customer_ssn_id
WHERE
ct.customer_id = 1; — Replace 1 with the desired customer ID
UI UX BY SUS
/* style.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f2f5;
margin: 0;
padding: 0;
}
.container {
width: 50%;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
color: #333;
}
label {
display: block;
margin: 10px 0 5px;
color: #555;
}
input, textarea {
width: calc(100% – 22px);
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #28a745;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #218838;
}
.success-message, .error-message {
text-align: center;
margin-top: 20px;
font-weight: bold;
}
.success-message {
color: green;
}
.error-message {
color: red;
}
**************************************************************
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”style.css”>
<title>Employee Registration</title>
</head>
<body>
<div class=”container”>
<h2>Employee Registration</h2>
<form id=”employeeRegistrationForm”>
<label for=”employeeId”>Employee ID:</label>
<input type=”text” id=”employeeId” name=”employeeId” readonly placeholder=”Auto-generated ID”>
<label for=”firstName”>First Name:</label>
<input type=”text” id=”firstName” name=”firstName” maxlength=”50″ required>
<label for=”lastName”>Last Name:</label>
<input type=”text” id=”lastName” name=”lastName” maxlength=”50″ required>
<label for=”email”>Email:</label>
<input type=”email” id=”email” name=”email” required>
<label for=”password”>Password:</label>
<input type=”password” id=”password” name=”password” maxlength=”30″ required>
<label for=”confirmPassword”>Confirm Password:</label>
<input type=”password” id=”confirmPassword” name=”confirmPassword” maxlength=”30″ required>
<label for=”address”>Address:</label>
<textarea id=”address” name=”address” maxlength=”100″></textarea>
<label for=”contactNumber”>Contact Number:</label>
<input type=”text” id=”contactNumber” name=”contactNumber” maxlength=”10″ required>
<button type=”button” onclick=”registerEmployee()”>Register</button>
</form>
<div id=”acknowledgment”></div>
</div>
<script src=”script.js”></script>
</body>
</html>
************************************************************************
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”style.css”>
<title>Employee Login</title>
</head>
<body>
<div class=”container”>
<h2>Employee Login</h2>
<form id=”employeeLoginForm”>
<label for=”loginEmployeeId”>Employee ID:</label>
<input type=”text” id=”loginEmployeeId” name=”loginEmployeeId” maxlength=”10″ required>
<label for=”loginPassword”>Password:</label>
<input type=”password” id=”loginPassword” name=”loginPassword” maxlength=”30″ required>
<button type=”button” onclick=”loginEmployee()”>Login</button>
</form>
<div id=”loginAcknowledgment”></div>
</div>
<script src=”script.js”></script>
</body>
</html>
**************************************************************************************
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link rel=”stylesheet” href=”style.css”>
<title>Customer Management</title>
</head>
<body>
<div class=”container”>
<h2>Customer Registration</h2>
<form id=”customerRegistrationForm”>
<label for=”customerSsnId”>Customer SSN ID:</label>
<input type=”text” id=”customerSsnId” name=”customerSsnId” required>
<label for=”customerName”>Customer Name:</label>
<input type=”text” id=”customerName” name=”customerName” maxlength=”50″ required>
<label for=”accountNumber”>Account Number:</label>
<input type=”text” id=”accountNumber” name=”accountNumber” maxlength=”20″ required>
<label for=”ifscCode”>IFSC Code:</label>
<input type=”text” id=”ifscCode” name=”ifscCode” maxlength=”11″ required>
<button type=”button” onclick=”registerCustomer()”>Register Customer</button>
</form>
<div id=”customerAcknowledgment”></div>
</div>
<script src=”script.js”></script>
</body>
</html>
******************************************************************
// script.js
function generateEmployeeId() {
// Generate a random 7-digit employee ID
return Math.floor(1000000 + Math.random() * 9000000).toString();
}
function registerEmployee() {
// Get form data
const employeeId = generateEmployeeId();
document.getElementById(’employeeId’).value = employeeId;
const firstName = document.getElementById(‘firstName’).value;
const lastName = document.getElementById(‘lastName’).value;
const email = document.getElementById(’email’).value;
const password = document.getElementById(‘password’).value;
const confirmPassword = document.getElementById(‘confirmPassword’).value;
const address = document.getElementById(‘address’).value;
const contactNumber = document.getElementById(‘contactNumber’).value;
// Validate password match
if (password !== confirmPassword) {
alert(“Passwords do not match!”);
return;
}
// Display acknowledgment message
const acknowledgment = document.getElementById(‘acknowledgment’);
acknowledgment.textContent = `Employee Registration successful. Employee ID: ${employeeId}, Name: ${firstName} ${lastName}, Email: ${email}.`;
acknowledgment.className = ‘success-message’;
// Reset form fields (except Employee ID)
document.getElementById(’employeeRegistrationForm’).reset();
document.getElementById(’employeeId’).value = employeeId;
}
function loginEmployee() {
const loginEmployeeId = document.getElementById(‘loginEmployeeId’).value;
const loginPassword = document.getElementById(‘loginPassword’).value;
// Simulate successful login (static validation for demo purposes)
if (loginEmployeeId && loginPassword) {
const acknowledgment = document.getElementById(‘loginAcknowledgment’);
acknowledgment.textContent = “Employee Login successful.”;
acknowledgment.className = ‘success-message’;
// Redirect to Home Page (simulated)
setTimeout(() => {
window.location.href = “customer-management.html”;
}, 2000);
} else {
alert(“Please enter your Employee ID and Password.”);
}
}
function registerCustomer() {
const customerName = document.getElementById(‘customerName’).value;
const ssnId = document.getElementById(‘customerSsnId’).value;
const accountNumber = document.getElementById(‘accountNumber’).value;
const ifscCode = document.getElementById(‘ifscCode’).value;
// For demonstration, assume successful registration
const customerAcknowledgment = document.getElementById(‘customerAcknowledgment’);
customerAcknowledgment.textContent = “Customer Registration Successful.”;
customerAcknowledgment.className = ‘success-message’;
}
UI UX By Zeeshan
*********************************************Question 1*********************************************************************************
HTML
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Employee Registration</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div class=”container”>
<h2>Employee Registration</h2>
<form id=”registrationForm”>
<label for=”employeeId”>Employee ID</label>
<input type=”text” id=”employeeId” disabled />
<label for=”firstName”>First Name</label>
<input type=”text” id=”firstName” maxlength=”50″ required />
<label for=”lastName”>Last Name</label>
<input type=”text” id=”lastName” maxlength=”50″ required />
<label for=”email”>Email</label>
<input type=”email” id=”email” required />
<label for=”password”>Password</label>
<input type=”password” id=”password” maxlength=”30″ required />
<label for=”confirmPassword”>Confirm Password</label>
<input type=”password” id=”confirmPassword” maxlength=”30″ required />
<label for=”address”>Address</label>
<textarea id=”address” maxlength=”100″></textarea>
<label for=”contactNumber”>Contact Number</label>
<input type=”text” id=”contactNumber” maxlength=”10″ required pattern=”\d{10}” title=”Enter a 10-digit contact number” />
<button type=”button” id=”registerButton” onclick=”registerEmployee()”>Register</button>
</form>
<div id=”acknowledgmentScreen” class=”hidden”>
<p class=”success-message”>Employee Registration successful.</p>
<p><strong>Employee ID:</strong> <span id=”ackEmployeeId”></span></p>
<p><strong>Employee Name:</strong> <span id=”ackEmployeeName”></span></p>
<p><strong>Email:</strong> <span id=”ackEmployeeEmail”></span></p>
</div>
</div>
<script src=”script.js”></script>
</body>
</html>
CSS
* {
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f2f5;
}
.container {
width: 100%;
max-width: 400px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
color: #333;
}
label {
font-weight: bold;
margin-top: 10px;
display: block;
}
input[type=”text”], input[type=”email”], input[type=”password”], textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
.success-message {
color: green;
font-weight: bold;
text-align: center;
}
.hidden {
display: none;
}
JS
// Function to generate a random 7-digit Employee ID
function generateEmployeeId() {
return Math.floor(1000000 + Math.random() * 9000000).toString();
}
// Function to validate and register the employee
function registerEmployee() {
// Fetch form fields
const firstName = document.getElementById(‘firstName’).value;
const lastName = document.getElementById(‘lastName’).value;
const email = document.getElementById(’email’).value;
const password = document.getElementById(‘password’).value;
const confirmPassword = document.getElementById(‘confirmPassword’).value;
const contactNumber = document.getElementById(‘contactNumber’).value;
// Validation
if (password !== confirmPassword) {
alert(‘Password and Confirm Password must match.’);
return;
}
// Set Employee ID
const employeeIdField = document.getElementById(’employeeId’);
if (!employeeIdField.value) {
employeeIdField.value = generateEmployeeId();
}
// Display acknowledgment screen with employee details
document.getElementById(‘ackEmployeeId’).textContent = employeeIdField.value;
document.getElementById(‘ackEmployeeName’).textContent = `${firstName} ${lastName}`;
document.getElementById(‘ackEmployeeEmail’).textContent = email;
document.getElementById(‘registrationForm’).classList.add(‘hidden’);
document.getElementById(‘acknowledgmentScreen’).classList.remove(‘hidden’);
}
************************************************************02*************************************************************************
HTML
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Employee Login</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div class=”container”>
<h2>Employee Login</h2>
<form id=”loginForm”>
<label for=”loginEmployeeId”>Employee ID</label>
<input type=”text” id=”loginEmployeeId” maxlength=”10″ required />
<label for=”loginPassword”>Password</label>
<input type=”password” id=”loginPassword” maxlength=”30″ required />
<button type=”button” id=”loginButton” onclick=”loginEmployee()”>Login</button>
</form>
<!– Acknowledgment Popup –>
<div id=”acknowledgmentPopup” class=”popup hidden”>
<p class=”success-message”>Employee Login successful.</p>
<button onclick=”redirectToHomePage()”>OK</button>
</div>
</div>
<script src=”script.js”></script>
</body>
</html>
CSS
* {
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f2f5;
}
.container {
width: 100%;
max-width: 400px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
color: #333;
}
label {
font-weight: bold;
margin-top: 10px;
display: block;
}
input[type=”text”], input[type=”password”] {
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
.success-message {
color: green;
font-weight: bold;
margin-bottom: 20px;
}
.hidden {
display: none;
}
JS
// Sample data for registered employee
const registeredEmployee = {
employeeId: “1234567”, // Sample Employee ID from registration
password: “securepassword123” // Sample password from registration
};
// Function to validate and log in the employee
function loginEmployee() {
// Fetch login fields
const employeeId = document.getElementById(‘loginEmployeeId’).value;
const password = document.getElementById(‘loginPassword’).value;
// Check if the entered credentials match the registered employee’s data
if (employeeId === registeredEmployee.employeeId && password === registeredEmployee.password) {
// Show acknowledgment popup if login is successful
document.getElementById(‘acknowledgmentPopup’).classList.remove(‘hidden’);
} else {
alert(‘Invalid Employee ID or Password.’);
}
}
// Function to redirect to Home Page after successful login
function redirectToHomePage() {
// Hide the acknowledgment popup
document.getElementById(‘acknowledgmentPopup’).classList.add(‘hidden’);
// Simulate redirecting to the home page
alert(“Redirecting to Home Page…”);
window.location.href = “home.html”; // Replace “home.html” with the actual home page URL
}
*****************************************************03*********************************************************************************
HTML
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>New Customer Registration</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div class=”container”>
<h2>Customer Registration</h2>
<form id=”customerForm”>
<label for=”customerSSN”>Customer SSN ID</label>
<input type=”text” id=”customerSSN” maxlength=”12″ required />
<label for=”customerName”>Customer Name</label>
<input type=”text” id=”customerName” maxlength=”50″ required />
<label for=”accountNumber”>Account Number</label>
<input type=”text” id=”accountNumber” maxlength=”15″ required />
<label for=”ifscCode”>IFSC Code</label>
<input type=”text” id=”ifscCode” maxlength=”11″ required />
<label for=”accountBalance”>Account Balance</label>
<input type=”number” id=”accountBalance” step=”0.01″ required />
<label for=”aadhaarNumber”>Aadhaar Card Number</label>
<input type=”text” id=”aadhaarNumber” maxlength=”12″ required pattern=”\d{12}” title=”Enter a 12-digit Aadhaar number” />
<label for=”panNumber”>PAN Card Number</label>
<input type=”text” id=”panNumber” maxlength=”10″ required />
<label for=”dob”>Date of Birth</label>
<input type=”date” id=”dob” required />
<label for=”gender”>Gender</label>
<select id=”gender” required>
<option value=””>Select Gender</option>
<option value=”Male”>Male</option>
<option value=”Female”>Female</option>
<option value=”Other”>Other</option>
</select>
<label for=”maritalStatus”>Marital Status</label>
<select id=”maritalStatus” required>
<option value=””>Select Marital Status</option>
<option value=”Single”>Single</option>
<option value=”Married”>Married</option>
<option value=”Divorced”>Divorced</option>
<option value=”Widowed”>Widowed</option>
</select>
<label for=”email”>Email</label>
<input type=”email” id=”email” required />
<label for=”address”>Address</label>
<textarea id=”address” maxlength=”100″></textarea>
<label for=”contactNumber”>Contact Number</label>
<input type=”text” id=”contactNumber” maxlength=”10″ required pattern=”\d{10}” title=”Enter a 10-digit contact number” />
<button type=”button” onclick=”registerCustomer()”>Register Customer</button>
</form>
<!– Success Popup –>
<div id=”successPopup” class=”popup hidden”>
<p class=”success-message”>Customer Registration Successful.</p>
<button onclick=”closePopup()”>OK</button>
</div>
</div>
<script src=”script.js”></script>
</body>
</html>
CSS
* {
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f2f5;
}
.container {
width: 100%;
max-width: 400px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
color: #333;
}
label {
font-weight: bold;
margin-top: 10px;
display: block;
}
input[type=”text”], input[type=”number”], input[type=”email”], input[type=”date”], select, textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
.success-message {
color: green;
font-weight: bold;
margin-bottom: 20px;
}
.hidden {
display: none;
}
JS
// Function to display the success popup
function registerCustomer() {
// Perform form validation (additional validation can be added if necessary)
const customerForm = document.getElementById(‘customerForm’);
if (customerForm.checkValidity()) {
// Show success popup
document.getElementById(‘successPopup’).classList.remove(‘hidden’);
} else {
alert(“Please fill all required fields correctly.”);
}
}
// Function to close the success popup
function closePopup() {
document.getElementById(‘successPopup’).classList.add(‘hidden’);
// Optionally clear the form after successful registration
document.getElementById(‘customerForm’).reset();
}
*****************************************************************04***********************************************************************
HTML
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Edit Customer Information</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div class=”container”>
<h2>Edit Customer Information</h2>
<form id=”editCustomerForm”>
<label for=”customerSSN”>Customer SSN ID (Uneditable)</label>
<input type=”text” id=”customerSSN” value=”123456789012″ readonly />
<label for=”customerName”>Customer Name</label>
<input type=”text” id=”customerName” maxlength=”50″ required />
<label for=”accountNumber”>Account Number</label>
<input type=”text” id=”accountNumber” maxlength=”15″ required />
<label for=”ifscCode”>IFSC Code</label>
<input type=”text” id=”ifscCode” maxlength=”11″ required />
<label for=”accountBalance”>Account Balance</label>
<input type=”number” id=”accountBalance” step=”0.01″ required />
<label for=”aadhaarNumber”>Aadhaar Card Number</label>
<input type=”text” id=”aadhaarNumber” maxlength=”12″ required />
<label for=”panNumber”>PAN Card Number</label>
<input type=”text” id=”panNumber” maxlength=”10″ required />
<label for=”dob”>Date of Birth</label>
<input type=”date” id=”dob” required />
<label for=”gender”>Gender</label>
<select id=”gender” required>
<option value=”Male”>Male</option>
<option value=”Female”>Female</option>
<option value=”Other”>Other</option>
</select>
<label for=”maritalStatus”>Marital Status</label>
<select id=”maritalStatus” required>
<option value=”Single”>Single</option>
<option value=”Married”>Married</option>
<option value=”Divorced”>Divorced</option>
<option value=”Widowed”>Widowed</option>
</select>
<label for=”email”>Email</label>
<input type=”email” id=”email” required />
<label for=”address”>Address</label>
<textarea id=”address” maxlength=”100″></textarea>
<label for=”contactNumber”>Contact Number</label>
<input type=”text” id=”contactNumber” maxlength=”10″ required />
<button type=”button” onclick=”updateCustomerInfo()”>Update Customer Information</button>
</form>
<!– Success or Error Message Display –>
<div id=”responseMessage” class=”popup hidden”></div>
</div>
<script src=”script.js”></script>
</body>
</html>
CSS
* {
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f2f5;
}
.container {
width: 100%;
max-width: 400px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
color: #333;
}
label {
font-weight: bold;
margin-top: 10px;
display: block;
}
input[type=”text”], input[type=”number”], input[type=”email”], input[type=”date”], select, textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
font-weight: bold;
}
.hidden {
display: none;
}
.success {
color: green;
}
.error {
color: red;
}
JS
// Sample data for existing customer
const customerData = {
customerSSN: “123456789012”,
customerName: “John Doe”,
accountNumber: “1234567890”,
ifscCode: “ABCD1234567”,
accountBalance: 15000,
aadhaarNumber: “987654321012”,
panNumber: “ABCDE1234F”,
dob: “1985-06-15”,
gender: “Male”,
maritalStatus: “Single”,
email: “johndoe@example.com”,
address: “123 Main St, City”,
contactNumber: “9876543210”
};
// Populate the form fields with existing customer data
function populateCustomerData() {
document.getElementById(‘customerSSN’).value = customerData.customerSSN;
document.getElementById(‘customerName’).value = customerData.customerName;
document.getElementById(‘accountNumber’).value = customerData.accountNumber;
document.getElementById(‘ifscCode’).value = customerData.ifscCode;
document.getElementById(‘accountBalance’).value = customerData.accountBalance;
document.getElementById(‘aadhaarNumber’).value = customerData.aadhaarNumber;
document.getElementById(‘panNumber’).value = customerData.panNumber;
document.getElementById(‘dob’).value = customerData.dob;
document.getElementById(‘gender’).value = customerData.gender;
document.getElementById(‘maritalStatus’).value = customerData.maritalStatus;
document.getElementById(’email’).value = customerData.email;
document.getElementById(‘address’).value = customerData.address;
document.getElementById(‘contactNumber’).value = customerData.contactNumber;
}
// Function to update customer information
function updateCustomerInfo() {
// Validate fields
const form = document.getElementById(‘editCustomerForm’);
if (!form.checkValidity()) {
displayMessage(“Error: Please fill all required fields correctly.”, “error”);
return;
}
// Update the data (in a real system, this would be saved to a database)
customerData.customerName = document.getElementById(‘customerName’).value;
customerData.accountNumber = document.getElementById(‘accountNumber’).value;
customerData.ifscCode = document.getElementById(‘ifscCode’).value;
customerData.accountBalance = document.getElementById(‘accountBalance’).value;
customerData.aadhaarNumber = document.getElementById(‘aadhaarNumber’).value;
customerData.panNumber = document.getElementById(‘panNumber’).value;
customerData.dob = document.getElementById(‘dob’).value;
customerData.gender = document.getElementById(‘gender’).value;
customerData.maritalStatus = document.getElementById(‘maritalStatus’).value;
customerData.email = document.getElementById(’email’).value;
customerData.address = document.getElementById(‘address’).value;
customerData.contactNumber = document.getElementById(‘contactNumber’).value;
// Display success message
displayMessage(“Customer information updated successfully.”, “success”);
}
// Function to display success or error messages
function displayMessage(message, type) {
const responseMessage = document.getElementById(‘responseMessage’);
responseMessage.textContent = message;
responseMessage.classList.remove(‘hidden’, ‘success’, ‘error’);
responseMessage.classList.add(type);
}
// Populate data when the page loads
window.onload = populateCustomerData;
*************************************************************05***********************************************************************
HTML
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Delete Customer Information</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div class=”container”>
<h2>Delete Customer Information</h2>
<div id=”customerInfo”>
<p><strong>Customer SSN ID:</strong> <span id=”customerSSN”>123456789012</span></p>
<p><strong>Customer Name:</strong> <span id=”customerName”>John Doe</span></p>
<p><strong>Account Number:</strong> <span id=”accountNumber”>1234567890</span></p>
<p><strong>IFSC Code:</strong> <span id=”ifscCode”>ABCD1234567</span></p>
<p><strong>Account Balance:</strong> <span id=”accountBalance”>15000</span></p>
<p><strong>Aadhaar Card Number:</strong> <span id=”aadhaarNumber”>987654321012</span></p>
<p><strong>PAN Card Number:</strong> <span id=”panNumber”>ABCDE1234F</span></p>
<p><strong>Date of Birth:</strong> <span id=”dob”>1985-06-15</span></p>
<p><strong>Gender:</strong> <span id=”gender”>Male</span></p>
<p><strong>Marital Status:</strong> <span id=”maritalStatus”>Single</span></p>
<p><strong>Email:</strong> <span id=”email”>johndoe@example.com</span></p>
<p><strong>Address:</strong> <span id=”address”>123 Main St, City</span></p>
<p><strong>Contact Number:</strong> <span id=”contactNumber”>9876543210</span></p>
</div>
<button onclick=”deleteCustomerInfo()”>Delete Customer</button>
<!– Success or Error Message Display –>
<div id=”responseMessage” class=”popup hidden”></div>
</div>
<script src=”script.js”></script>
</body>
</html>
CSS
* {
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f2f5;
}
.container {
width: 100%;
max-width: 400px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
color: #333;
}
#customerInfo p {
margin: 8px 0;
font-weight: bold;
color: #555;
}
button {
width: 100%;
padding: 10px;
background-color: #ff4d4d;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #e60000;
}
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
font-weight: bold;
}
.hidden {
display: none;
}
.success {
color: green;
}
.error {
color: red;
}
JS
// Function to delete customer information
function deleteCustomerInfo() {
// Simulate deletion operation
const deleteSuccess = true; // Change to false to simulate an error
// Display success or error message
if (deleteSuccess) {
displayMessage(“Customer information deleted successfully.”, “success”);
// Clear customer details from view (simulate data deletion)
document.getElementById(‘customerInfo’).innerHTML = “<p>Customer data has been removed.</p>”;
} else {
displayMessage(“Error: Could not delete customer information. Please try again.”, “error”);
}
}
// Function to display success or error messages
function displayMessage(message, type) {
const responseMessage = document.getElementById(‘responseMessage’);
responseMessage.textContent = message;
responseMessage.classList.remove(‘hidden’, ‘success’, ‘error’);
responseMessage.classList.add(type);
}
// Populate customer information with sample data
window.onload = function () {
document.getElementById(‘customerSSN’).textContent = “123456789012”;
document.getElementById(‘customerName’).textContent = “John Doe”;
document.getElementById(‘accountNumber’).textContent = “1234567890”;
document.getElementById(‘ifscCode’).textContent = “ABCD1234567”;
document.getElementById(‘accountBalance’).textContent = “15000”;
document.getElementById(‘aadhaarNumber’).textContent = “987654321012”;
document.getElementById(‘panNumber’).textContent = “ABCDE1234F”;
document.getElementById(‘dob’).textContent = “1985-06-15”;
document.getElementById(‘gender’).textContent = “Male”;
document.getElementById(‘maritalStatus’).textContent = “Single”;
document.getElementById(’email’).textContent = “johndoe@example.com”;
document.getElementById(‘address’).textContent = “123 Main St, City”;
document.getElementById(‘contactNumber’).textContent = “9876543210”;
};
*****************************************************************06**********************************************************************
HTML
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Transaction Information</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div class=”container”>
<h2>Capture Transaction Information</h2>
<form id=”transactionForm”>
<label for=”transactionId”>Transaction ID</label>
<input type=”text” id=”transactionId” maxlength=”10″ required>
<label for=”customerSSN”>Customer SSN ID</label>
<input type=”text” id=”customerSSN” maxlength=”12″ required>
<label for=”customerName”>Customer Name</label>
<input type=”text” id=”customerName” maxlength=”50″ required>
<label for=”accountId”>Account ID</label>
<input type=”text” id=”accountId” maxlength=”15″ required>
<label for=”aadhaarNumber”>Aadhaar Card Number</label>
<input type=”text” id=”aadhaarNumber” maxlength=”12″ required>
<label for=”panNumber”>PAN Card Number</label>
<input type=”text” id=”panNumber” maxlength=”10″ required>
<label for=”address”>Address</label>
<textarea id=”address” maxlength=”100″ required></textarea>
<label for=”transactionDate”>Date</label>
<input type=”date” id=”transactionDate” required>
<label for=”contactNumber”>Contact Number</label>
<input type=”text” id=”contactNumber” maxlength=”10″ required>
<label for=”transactionMode”>Mode of Transaction</label>
<select id=”transactionMode” required>
<option value=”Online”>Online</option>
<option value=”Bank Transfer”>Bank Transfer</option>
<option value=”Cash”>Cash</option>
<option value=”Cheque”>Cheque</option>
</select>
<label for=”transactionAmount”>Amount of Transaction</label>
<input type=”number” id=”transactionAmount” step=”0.01″ required>
<label for=”transactionType”>Credit / Debit</label>
<select id=”transactionType” required>
<option value=”Credit”>Credit</option>
<option value=”Debit”>Debit</option>
</select>
<button type=”button” onclick=”submitTransaction()”>Submit Transaction</button>
</form>
<!– Success Message Display –>
<div id=”responseMessage” class=”popup hidden”></div>
</div>
<script src=”script.js”></script>
</body>
</html>
CSS
* {
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f2f5;
}
.container {
width: 100%;
max-width: 400px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
color: #333;
}
label {
font-weight: bold;
margin-top: 10px;
display: block;
}
input[type=”text”], input[type=”number”], input[type=”date”], select, textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
font-weight: bold;
}
.hidden {
display: none;
}
.success {
color: green;
}
JS
// Function to handle form submission
function submitTransaction() {
const form = document.getElementById(‘transactionForm’);
// Validate form fields
if (!form.checkValidity()) {
displayMessage(“Error: Please fill all required fields correctly.”, “error”);
return;
}
// Simulate form submission and display a success message
displayMessage(“Transaction recorded successfully!”, “success”);
// Clear form fields (simulate saving data)
form.reset();
}
// Function to display messages
function displayMessage(message, type) {
const responseMessage = document.getElementById(‘responseMessage’);
responseMessage.textContent = message;
responseMessage.classList.remove(‘hidden’, ‘success’, ‘error’);
responseMessage.classList.add(type);
}
// Populates message element styling based on type
window.onload = function () {
const responseMessage = document.getElementById(‘responseMessage’);
responseMessage.classList.add(‘popup’, ‘hidden’);
};
******************************************************07*********************************************************************
HTML
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Loan Request Form</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div class=”container”>
<h2>Initiate Loan Request</h2>
<form id=”loanRequestForm”>
<label for=”customerSSN”>Customer SSN ID</label>
<input type=”text” id=”customerSSN” maxlength=”12″ required>
<label for=”customerName”>Customer Name</label>
<input type=”text” id=”customerName” maxlength=”50″ required>
<label for=”occupation”>Occupation</label>
<input type=”text” id=”occupation” maxlength=”50″ required>
<label for=”employerName”>Employer Name</label>
<input type=”text” id=”employerName” maxlength=”50″ required>
<label for=”employerAddress”>Employer Address</label>
<textarea id=”employerAddress” maxlength=”100″ required></textarea>
<label for=”email”>Email</label>
<input type=”email” id=”email” required>
<label for=”address”>Address</label>
<textarea id=”address” maxlength=”100″ required></textarea>
<label for=”maritalStatus”>Marital Status</label>
<select id=”maritalStatus” required>
<option value=”Single”>Single</option>
<option value=”Married”>Married</option>
</select>
<label for=”contactNumber”>Contact Number</label>
<input type=”text” id=”contactNumber” maxlength=”10″ required>
<label for=”loanAmount”>Loan Amount</label>
<input type=”number” id=”loanAmount” step=”0.01″ required>
<label for=”loanDuration”>Length of Loan (Duration in Years)</label>
<input type=”number” id=”loanDuration” step=”1″ required>
<button type=”button” onclick=”submitLoanRequest()”>Submit Loan Request</button>
</form>
<!– Success Message Display –>
<div id=”responseMessage” class=”popup hidden”></div>
</div>
<script src=”script.js”></script>
</body>
</html>
CSS
* {
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f2f5;
}
.container {
width: 100%;
max-width: 400px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
color: #333;
}
label {
font-weight: bold;
margin-top: 10px;
display: block;
}
input[type=”text”], input[type=”email”], input[type=”number”], select, textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
font-weight: bold;
}
.hidden {
display: none;
}
.success {
color: green;
}
JS
// Function to handle loan request form submission
function submitLoanRequest() {
const form = document.getElementById(‘loanRequestForm’);
// Validate form fields
if (!form.checkValidity()) {
displayMessage(“Error: Please fill all required fields correctly.”, “error”);
return;
}
// Simulate form submission and display a success message
displayMessage(“Loan request initiated successfully!”, “success”);
// Clear form fields (simulate saving data)
form.reset();
}
// Function to display messages
function displayMessage(message, type) {
const responseMessage = document.getElementById(‘responseMessage’);
responseMessage.textContent = message;
responseMessage.classList.remove(‘hidden’, ‘success’, ‘error’);
responseMessage.classList.add(type);
}
// Populates message element styling based on type
window.onload = function () {
const responseMessage = document.getElementById(‘responseMessage’);
responseMessage.classList.add(‘popup’, ‘hidden’);
};
******************************************************************08**************************************************************
HTML
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Update or Cancel Loan Request</title>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>
<div class=”container”>
<h2>Update or Cancel Loan Request</h2>
<form id=”loanUpdateForm”>
<label for=”customerSSN”>Customer SSN ID</label>
<input type=”text” id=”customerSSN” maxlength=”12″ readonly value=”123456789012″>
<label for=”customerName”>Customer Name</label>
<input type=”text” id=”customerName” maxlength=”50″ value=”John Doe” required>
<label for=”occupation”>Occupation</label>
<input type=”text” id=”occupation” maxlength=”50″ value=”Software Engineer” required>
<label for=”employerName”>Employer Name</label>
<input type=”text” id=”employerName” maxlength=”50″ value=”Tech Corp” required>
<label for=”employerAddress”>Employer Address</label>
<textarea id=”employerAddress” maxlength=”100″ required>123 Tech Avenue, City</textarea>
<label for=”email”>Email</label>
<input type=”email” id=”email” value=”john.doe@example.com” required>
<label for=”address”>Address</label>
<textarea id=”address” maxlength=”100″ required>456 Main Street, City</textarea>
<label for=”maritalStatus”>Marital Status</label>
<select id=”maritalStatus” required>
<option value=”Single”>Single</option>
<option value=”Married” selected>Married</option>
</select>
<label for=”contactNumber”>Contact Number</label>
<input type=”text” id=”contactNumber” maxlength=”10″ value=”9876543210″ required>
<label for=”loanAmount”>Loan Amount</label>
<input type=”number” id=”loanAmount” step=”0.01″ value=”50000″ required>
<label for=”loanDuration”>Length of Loan (Duration in Years)</label>
<input type=”number” id=”loanDuration” step=”1″ value=”5″ required>
<button type=”button” onclick=”updateLoanRequest()”>Update Loan Request</button>
<button type=”button” onclick=”cancelLoanRequest()” class=”cancel”>Cancel Loan Request</button>
</form>
<!– Response Message Display –>
<div id=”responseMessage” class=”popup hidden”></div>
</div>
<script src=”script.js”></script>
</body>
</html>
CSS
* {
box-sizing: border-box;
font-family: Arial, sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f2f5;
}
.container {
width: 100%;
max-width: 400px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
color: #333;
}
label {
font-weight: bold;
margin-top: 10px;
display: block;
}
input[type=”text”], input[type=”email”], input[type=”number”], select, textarea {
width: 100%;
padding: 10px;
margin-top: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin-bottom: 10px;
}
button:hover {
background-color: #45a049;
}
button.cancel {
background-color: #f44336;
}
button.cancel:hover {
background-color: #e53935;
}
.popup {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
font-weight: bold;
}
.hidden {
display: none;
}
.success {
color: green;
}
.error {
color: red;
}
JS
// Function to handle loan request update
function updateLoanRequest() {
const form = document.getElementById(‘loanUpdateForm’);
// Validate form fields
if (!form.checkValidity()) {
displayMessage(“Error: Please fill all required fields correctly.”, “error”);
return;
}
// Simulate successful loan update
displayMessage(“Loan request updated successfully!”, “success”);
}
// Function to handle loan request cancellation
function cancelLoanRequest() {
const confirmation = confirm(“Are you sure you want to cancel this loan request?”);
if (confirmation) {
displayMessage(“Loan request canceled successfully!”, “success”);
} else {
displayMessage(“Loan request cancellation aborted.”, “error”);
}
}
// Function to display success or error messages
function displayMessage(message, type) {
const responseMessage = document.getElementById(‘responseMessage’);
responseMessage.textContent = message;
responseMessage.classList.remove(‘hidden’, ‘success’, ‘error’);
responseMessage.classList.add(type);
}
// Initialize popup element styling
window.onload = function () {
const responseMessage = document.getElementById(‘responseMessage’);
responseMessage.classList.add(‘popup’, ‘hidden’);
};
UNIX
CREATE TABLE CustomerDetails (
customer_id NUMBER PRIMARY KEY,
first_name VARCHAR2(50),
last_name VARCHAR2(50),
account_opening_date DATE,
account_type VARCHAR2(20),
balance NUMBER
);
INSERT INTO CustomerDetails (customer_id, first_name, last_name, account_opening_date, account_type, balance) VALUES (180607, ‘Rahul’, ‘Varma’, TO_DATE(‘12.12.22’, ‘DD.MM.YY’), ‘Savings’, 30000);
INSERT INTO CustomerDetails (customer_id, first_name, last_name, account_opening_date, account_type, balance) VALUES (180608, ‘Sita’, ‘Raman’, TO_DATE(‘12.12.22’, ‘DD.MM.YY’), ‘Joint’, 50000);
INSERT INTO CustomerDetails (customer_id, first_name, last_name, account_opening_date, account_type, balance) VALUES (190607, ‘Sheetal’, ‘Patil’, TO_DATE(‘20.07.22’, ‘DD.MM.YY’), ‘Current’, 40000);
INSERT INTO CustomerDetails (customer_id, first_name, last_name, account_opening_date, account_type, balance) VALUES (190617, ‘Pooja’, ‘Patil’, TO_DATE(‘04.08.22’, ‘DD.MM.YY’), ‘Salary’, 70000);
INSERT INTO CustomerDetails (customer_id, first_name, last_name, account_opening_date, account_type, balance) VALUES (200607, ‘Rahul’, ‘Sharma’, TO_DATE(‘20.08.22’, ‘DD.MM.YY’), ‘Savings’, 20000);
INSERT INTO CustomerDetails (customer_id, first_name, last_name, account_opening_date, account_type, balance) VALUES (210617, ‘Pooja’, ‘Srikari’, TO_DATE(‘20.08.22’, ‘DD.MM.YY’), ‘Salary’, 25000);
INSERT INTO CustomerDetails (customer_id, first_name, last_name, account_opening_date, account_type, balance) VALUES (210607, ‘Pooja’, ‘Rewa’, TO_DATE(‘20.08.22’, ‘DD.MM.YY’), ‘Joint’, 35000);
INSERT INTO CustomerDetails (customer_id, first_name, last_name, account_opening_date, account_type, balance) VALUES (210527, ‘Dan’, ‘Stewart’, TO_DATE(‘04.08.22’, ‘DD.MM.YY’), ‘Current’, 35000);
INSERT INTO CustomerDetails (customer_id, first_name, last_name, account_opening_date, account_type, balance) VALUES (280707, ‘Sia’, ‘R’, TO_DATE(‘21.09.23’, ‘DD.MM.YY’), ‘Savings’, 30000);
INSERT INTO CustomerDetails (customer_id, first_name, last_name, account_opening_date, account_type, balance) VALUES (220888, ‘Sonali’, ‘G’, TO_DATE(‘01.05.23’, ‘DD.MM.YY’), ‘Savings’, 15000);
SELECT * FROM CustomerDetails;
Q.2 :
“UNIX command to display the customers having
balance greater than or equal to 30000.”
–> awk -F, ‘$NF >= 30000’ customers.txt
Q.3 :
“UNIX command to display the total balance of
customers having Joint account.”
–> awk -F, ‘$4 ~ /[Jj]oint/ {sum += $NF} END {print “Total Balance for Joint Accounts:”, sum}’ customers.txt
Q.4
“UNIX command to search for a customers having account
number 222635 and 180607.”
–> grep -E ‘^(222635|180607)’ customers.txt
Q5.
“UNIX command to display the average balance of all
customers except those customers having Joint account.”
–> awk -F, ‘$5 != “Joint” { sum += $6; count++ } END { if (count > 0) print sum/count }’ accounts.txt