Online Banking Website Project using HTML, CSS, and JavaScript

In this academic project, we are going to create an Online Banking Website using basic HTML, CSS, and JavaScript. We have planned and going to create as per the design given by the instructor. Which include:-

• A home page that will provide all the necessary views. And it includes the link to the various linked pages (login/signup page, services, fixed deposit, e-services, account details, about us).
• The top bars include the link to every single linked page.
• We are going to provide services like Personal internet banking, Corporate banking, Merchant business, and Online tax.
• Payment transfer: – International transfer, National transfer, Bill payment.
• My Account page contains: – Account No. , Bank / Branch. IFSC Code.
• ABOUT US page which shows the details of our contacts and our headquarters.2 Online Banking Websites

Concept:-

• We have used the concept of HTML Programming like o Hyperlink projection.
• Use of different tags to make it visually better like font, table, listing, hyperlink, styling, etc.

Use of:-

• Combo Box
• Search Box
• Button
• Text Field
• Label
• Fieldset
• Legend

This project is basically an online banking website where one can create his/hers bank account, and use the same account for various banking services.
All designing and programming are done by us only.
All the members have their role in creating this website.

PROJECT DESCRIPTION

Project Name: Online Banking Website

Languages Used: HTML, CSS, JavaScript

Software Used: Visual Studio Code

Browser Used:  Google Chrome

Description:

This project is not a pure website that works on the internet. This project is just a template of a bank website, which can be used with the backend to create a perfectly working website. This website is work fine with JavaScript, CSS (Cascading Style Sheet), and HTML (Hyper Text Markup Language), with some simple concepts to make it a Responsive Web Page.

PROJECT CONTENT

This website is consist of various HTML pages, which are linked to each other with links (either by link or anchor tag).

Following are the HTML file names involved in the project:

1. html (Home Page)
2. html (Login Page)
3. html (Sign Up Page)
4. html (Personal Internet Banking)
5. html (Corporate Banking)
6. html (Merchant Business)
7. html (Online Tax)
8. html ( International Money Transfer
9. html (National Money Transfer)
10. html (Bill Payment)
11. html (Fixed Deposit)
12. html (E-Services)
13. html (My Account)
14. html (About Us)

Following are the CSS files name involved in this project: (Here, we used a simple convention in the naming of the files: “<html_file_name>CSS.css”

1. css (Home Page)
2. css (Login Page)
3. css (Sign Up Page)
4. css (Personal Internet Banking)
5. css (Corporate Banking)
6. css (Merchant Business)
7. css (Online Tax)
8. css ( International Money Transfer
9. css (National Money Transfer)
10. css (Bill Payment)
11. css (About Us)
12. css (My Account)
13. css (Fixed Deposit)
14. css (E-Services)

Following are the JavaScript file names involved in this project:

1. js (Login Page)
2. js (Sign Up Page)
3. js (Personal Internet Banking)
4. js (Fixed Deposit)
5. js (Bill Payment)

CONCEPTS USED

As above mentioned, this template website is made up of HTML, CSS, and JavaScript.

The concept used in HTML:

1. Using the link to add an external CSS file to it.
2. Using the “src” attribute with the “script” tag we link external JavaScript.
3. Using the “div” tag to separate various parts of the webpage to give functionality and style separately.
4. Using “h1” tags to give a heading.
5. Using “img” tag to give images on the webpage.
6. Using anchor (“a”) tags to link multiple HTML files to each other.
7. Using “id” and “class” attributes with different tags to give them style and functionality accordingly.
8. Using the “form” tag to use the form for the login and sign-up page.
9. Using the “method” attribute’s value as “POST” to give the form data securely.
10. Using “input” tags to make an input field for the users. (With its different types.)
11. Using “onload”, “onclick”, “onblur”, “onchange” with its value to call the functions which are in the respective JavaScript files on loading the webpage, on clicking a button, on losing focus, and changing the state respectively.
12. Using “label” tags to create labels for the input fields.
13. Using “select” tags to create a drop-down menu or combo box in the form.
14. Using “option” tags inside the “select” tag to give options in the drop-down menu.
15. Using “button” tags to create a button for submitting and resetting the form.

The concept used in CSS:

1. Using “#” and “.” to access elements with their id and class values respectively.
2. Using some pseudo-classes to make a somewhat interactive web page. (Without using JS.)
3. Using media queries to make the page responsive for some specific display ratios.
4. Using “@import” for importing another CSS file to a specific file.

The concept used in JavaScript:

(In this project, JavaScript is used mainly for form validation and for interactive buttons.)

1. Using Regular Expression (RegEx) for creating a pattern for email and password validations as they have a specific pattern in them.
2. Using “window.location.replace()” to go to a specific location on calling it.
3. And using other pre-defined functions to create our user-defined functions.

CONTRIBUTION BY TEAM MEMBERS:

• The idea of the project and its structure of it.
• Creating all JavaScript files, to make our web pages interactive.
• Final touch-up to the project.
• Creating all CSS files, to make our web pages beautiful.
• Creating all HTML files, to add content into it.

PROJECT IMPLEMENTATION:

Here are some images of our project.

• home.html
• acc.html
• login.html
• signUp.html
• billPay.html 

CONCLUSION

This online banking website project is completed in two scripting languages i.e. HTML and CSS, and JavaScript.

There is a total of 14 .html pages which are linked together to create a full website template for online banking.

In this project, all three developers work equally, with the same amount of effort.

REFERENCES

1. w3school.org
2. geeksofgeeks.com
3. developer.mozilla.com

Download the complete project on code, report of Online Banking Website Project using HTML, CSS, and JavaScript