Scribd
Upload
31 views

21mic7101 Swe2004 Frontend Design and Testing Lab Assignment-1

The document provides details on developing the frontend of a retail banking application. It includes code snippets for modules like login/logout, beneficiary creation, funds transfer, and funds transfer status. Key modules covered include login and logout pages with HTML and CSS code, a registration page, a homepage, beneficiary creation form, funds transfer form, and a transactions status page to view fund transfer statuses.

Uploaded by

Ruthvik Reddy Anupati
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
31 views

21mic7101 Swe2004 Frontend Design and Testing Lab Assignment-1

The document provides details on developing the frontend of a retail banking application. It includes code snippets for modules like login/logout, beneficiary creation, funds transfer, and funds transfer status. Key modules covered include login and logout pages with HTML and CSS code, a registration page, a homepage, beneficiary creation form, funds transfer form, and a transactions status page to view fund transfer statuses.

Uploaded by

Ruthvik Reddy Anupati
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 18

SWE2004

FRONTEND DESIGN AND TESTING

ASSIGNMENT - 01

RETAIL BANKING APPLICATION

PREPARED BY :

A.RUTHVIK REDDY

21MIC7101
Develop SPA Applications and Web Components of
Retail Banking Application
Modules are :
 Login and Logout
 Benefeciary Creation
 Funds Transfer
 Funds Transfer Status
 Login and Logout :
HTML :
<!DOCTYPE html>
<html lang="en">
<html>
<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" href="./page.css">
<title>mainpage1</title>
</head>
<body>
<h1>MALYA'S BANK</h1>
<div class="login1">
<h3> LOGIN</h3>
<form>
<label for="username">Username:</label>
<input type=" text" placeholder="User Id" required> <br><br>
<label for="password">Password:</label>
<input type="password" placeholder=" Password" required><br> <br>
<button> <a href="./page2.html" target="_blank">LOGIN</button></a>
<!-- <button a href="./page1.html">login</button>-->
<p>New User ?</p>
<button ><a href="register.html">REGISTER</button>
</form>
</div>
</html>
</body>
CSS :
h1{
text-align: center;
color:white;
}
.login1{
color: white;
}
body{
background-image: url("https://images.unsplash.com/photo-1584566442413-9234ee5ad754?ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D
%3D&auto=format&fit=crop&w=2070&q=80");
}

 REGISTRATION :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<center>
<h2>New User-Registration</h2>
<label for="accountNumber">Account Number :</label>
<input type="text" name="accountNumber" id="accountNumber" required><br><br>
<label for="cifcode">CIF Code :</label>
<input type="text" name="cifcode" id="cifcode"><br><br>
<label for="branchcode">Branch Code :</label>
<input type="text" name="branchcode" id="branchcode"><br><br>
<label for="country">Country :</label>
<select name="country" id="country" >
<option value=""disabled selected hidden>Select Country</option>
<option value="Nepal">Nepal</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="Japan">Japan</option>
<option value="Australia">Australia</option>
<option value="Pakistan">Pakistan</option>
</select>
<br><br>
<form action="/action_page.php">
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" placeholder="1234-567-890" pattern="[0-9]{4}-[0-9]{3}-
[0-9]{3}" required><br><br>
</form>
</center>
</body>
</html>
 HOME :
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">
<link rel="stylesheet" href="./page2.css">
<title>home</title>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="home.html" target="_blank">HOME</a></li>
<li><a href="ben.html">BENEFICIARY</a></li>
<li><a href="fundtransfer.html">FUND TRANSFER</a></li>
<li><a href="./transactions.html"> FUND TRANSFER STATUS</a></li>
<li><a href="./contact.html">CONTACT</a></li>
<li><a href="./page1.html">
<button>LOGOUT</button></a></li>
</ul>
</div>
</body>
</html>
CSS :
.navbar {
background-color: #333333;
color: #fff;
padding: 15px;
}
.navbar ul {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
}
.navbar li {
margin: 0 20px;
}
.navbar a {
text-decoration: none;
color: #fff;
font-weight: bold;
transition: color 0.3s ease;
}
.navbar a:hover {
color: blue;
}
body{
background-image: url("https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D
%3D&auto=format&fit=crop&w=2070&q=80");
}

 BENEFICIARY CREATION :
HTML:
<!DOCTYPE html>
<html lang="en">
<html>
<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" href="./ben.css ">
<title>mainpage1</title>
<style>
</style>
</head>
<body>
<div><h1> ADD BENEFICIARY</h1>
<form action="">
<label for="NAME">NAME:</label>
<input type="text" placeholder="ENTER NAME AS YOU GIVEN TO BANK"><br><br>
<label for="acntnum">ACCOUNT NUMBER:</label>
<input type="text" name="" id="" placeholder="Enter account number"><br><br>

<label for="acntnum"> CONFIRM ACCOUNT NUMBER:</label>


<input type="text" name="" id="" placeholder="confirm account number"><br><br>
<label for="address">ADDRESS:</label>
<input type="" placeholder="Enter Address">
<label for="ifsc">IFSC</label>
<input type="text" placeholder="ENTER IFSC">
<p> SMS alert for the new beneficiary will be sent to your registred mobile number </p>
<label for="">MOBILE NUMBER:</label>
<input type="text" placeholder="ENTER MOBILE NUMBER">
<br><br>
<button>SUMBIT</button>
</form>
</div> <br>
<button onclick="history.back()">Go Back</button>
</body>
</html>
CSS :
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: grey;
width: 80%;
margin: 0 auto;
padding: 20px;
color: black;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
label {
font-weight: bold;
}
input {
width: 100%;
padding: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #0e6bce;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
 FUNDS TRANSFER :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Beneficiary</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: grey;
width: 80%;
margin: 0 auto;
padding: 20px;
color: black;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
.form-container {
max-width: 400px;
margin: 0 auto;
}
label {
font-weight: bold;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #0e6bce;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>FUND TRANSFER</h1>
<div class="form-container">
<form id="beneficiaryForm">
<label for="beneficiaryName">Beneficiary Name:</label>
<input type="text" id="beneficiaryName" name="beneficiaryName" required><br>
<label for="accountNumber">Account Number:</label>
<input type="text" id="accountNumber" name="accountNumber" required><br>
<label for="bankName">Bank Name:</label>
<input type="text" id="bankName" name="bankName" required><br>
<label for="BRANCHNAME">BRANCH NAME:</label>
<input type="text" id="BRANCHNAME" name="BRANCHNAME" required><br>
<label for="ifscCode">IFSC Code:</label>
<input type="text" id="ifscCode" name="ifscCode" required><br>
<br>
<button type="submit">TRANSFER</button>
<button onclick="history.back()">Go Back</button>
</form>
</div>
</div>
<script>
const beneficiaryForm = document.getElementById("beneficiaryForm");
beneficiaryForm.addEventListener("submit", function(event) {
event.preventDefault();
const beneficiaryName = document.getElementById("beneficiaryName").value;
const accountNumber = document.getElementById("accountNumber").value;
const bankName = document.getElementById("bankName").value;
const ifscCode = document.getElementById("ifscCode").value;
// You can perform further processing, such as sending data to a server
alert(`Beneficiary ${beneficiaryName} added successfully.`);
beneficiaryForm.reset();
});
</script>
</body>
</html>

 TRANSACTION STATUS :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bank Account Transactions</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
header {
background-color: black ;
color: white;
padding: 10px 0;
text-align: center;
}
main {
max-width: 900px;
margin: 20px auto;
padding: 20px;
background-color: white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h1, h2 {
color: #004080;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f5f5f5;
font-weight: bold;
}
.s{
color: green;
}
.f{
color: red;
}
.container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
margin-bottom: 20px;
}
.form-container {
max-width: 400px;
margin: 0 auto;
}

label {
font-weight: bold;
}
input {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
.back{
text-align: center;
}
</style>
<div class="container">
<h1>Fund Status</h1>
<div class="form-container">
<form id="fundStatusForm">
<label for="transactionId">Transaction ID:</label>
<input type="text" id="transactionId" name="transactionId" required><br>

<button type="submit" onclick="alert('Transaction Successful')">Check Status</button>


</form>
<p id="statusResult"></p>
</div>
</div>
<script>
const fundStatusForm = document.getElementById("fundStatusForm");
const statusResult = document.getElementById("statusResult");
fundStatusForm.addEventListener("submit", function(event) {
event.preventDefault();
const transactionId = document.getElementById("transactionId").value;
// You can perform further processing, such as retrieving status from a server
// For demonstration purposes, the status is hardcoded here
const status = "Successful";
statusResult.textContent = `Transaction ID ${transactionId}: ${status}`;
});
</script>
</head>
<body>
<header>
<h1>Bank Account Transactions</h1>
</header>
<main>
<h2>Transaction History</h2>
<table>
<thead>
<tr>
<th>Date</th>
<th>TransactionNumber</th>
<!--<th>Transaction Type</th>
<th>From Account</th>
<th>To Account</th>
<th>IFSC</th>
<th>Amount</th>
<th>Balance</th>-->
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>2023-08-01</td>
<td>2347698547</td>
<td class="s">Successful</td>
</tr>
<tr>
<td>2023-08-05</td>
<td>5790352878</td>
<td class="s">Successful</td>
</tr>
<tr>
<td>2023-08-10</td>
<td>0986535284</td>
<td class="s">Successful</td>
</tr>
<tr>
<td>2023-08-11</td>
<td>3689753345</td>
<td class="s">Successful</td>
</tr>
<!-- Add more rows for additional transactions -->
</tbody>
</table>
</main>
<center> <button class=" back" onclick="history.back()">Go Back</button></center>
</body>
</html>

 CONTACT :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content Type" content="text/html; charset-utf=8"/>
<title>CONTACT</title>
<style>
.navbar {
background-color: #333333;
color: #fff;
padding: 15px;
}
.navbar ul {
list-style: none;
display: flex;
justify-content: center;
align-items: center;
}
.navbar li {
margin: 0 20px;
}
.navbar a {
text-decoration: none;
color: #fff;
font-weight: bold;
transition: color 0.3s ease;
}
.navbar a:hover {
color: blue;
}
button{
background-color: #0e6bce;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="navbar">
<ul>
<li><a href="home.html">HOME</a></li>
</ul>
</div>
<table width="100%" height="150" border="0" cellspacing="5" cellpadding"5" bgcolor="#F0F0F0">

<tr>
<td align="center'>
<table width="708" border="0" cellspacing="1" cellpadding="1">
<tr>
<td width="338" align="left"><font face="verdana, geneva, sans-serif" color="black" size "5">
<strong> Call Us Today!</strong>
<br />
1-800-000-0000</font></td>
<td width="291" align="right"><font face="verdana, geneva, sans-serif" color="black" size
"5"> <strong> Call Us Today!</strong><br />1-800-000-0000</font></td>\
</tr>
</table>
</td>
</tr>
</table>
<center> <button class=" back" onclick="history.back()">Go Back</button></center>
</body>

 LOGOUT :

THANK YOU

You might also like