Skip to content

Latest commit

 

History

History
150 lines (105 loc) · 4.52 KB

README.md

File metadata and controls

150 lines (105 loc) · 4.52 KB
Raw

Bankist app

Table of Contents (click to expand)

Overview

Bankist app is a web app created using HTML, CSS and JS. It can perform actions such as requesting loan, transfering funds to users, deleting account, sorting transactions. It uses Internationalization API to internationalize numbers, date and time for greater user experience. It has a auto logout feature which triggers when a user has been inactive for 2 minutes. It also has a fully responsive desktop, tablet and mobile view.

Live Preview: Link

Netlify Status

Login data

username pin
js 1111
jd 2222

Technologies used

  • HTML
  • CSS
  • JavaScript
  • Internationalization API
  • Open Graph Meta Tags

Challenges faced

For this project, I for the first time implemented notifcations on my website. The CSS part interesting to setup as I wanted the notifications fixed on bottom right, and have a nice sliding animation. I implemented everything except the sliding in part from JavaScript, as removing hidden class didn't trigger the transition. Turns out a simple setTimeout fixed it!

// Slide in the notificationb
setTimeout(() => notification.classList.remove("hidden"), 50);

I wanted to have different currency, number and time format based on user's locale. This was a first for me, so after google around I found out about Internationalization API. This made things very easy!

// For currency
function currencyFormatter(movement) {
	return new Intl.NumberFormat(currentAccount.locale, {
		style: "currency",
		currency: currentAccount.currency,
	}).format(movement);
}

// For dates
const dateFull = new Intl.DateTimeFormat(currentAccount.locale, options).format(
	date
);

// For time
const time = new Intl.DateTimeFormat(currentAccount.locale, options).format(
	date
);

Learning outcomes

In terms of HTML, I learnt how to use OpenGraph Meta tags to have beautiful cards in social media.

In terms of CSS, I learnt a lot about transition and position property.

In terms of JS, internationalization API was the biggest take aways from this project for me. It was really interesting to learn and work with it. I also learnt how to write function doc strings in JavaScript. This project really helped me solidify my concepts of DOM manipulation, Array methods such as map, filter, reduce, forEach etc.

Flowchart

Flowchart

Screenshots

Open Graph card

open graph

Main screen

main

Europeon user

user1

American user

user2

Transfering funds

transfer

Modal window

modal

Mobile view

mobile

Directory structure

.
├── assets
│   ├── css
│   │   ├── queries.css
│   │   └── style.css
│   ├── img
│   │   ├── Bankist-flowchart.png
│   │   ├── icon.png
│   │   ├── logo.png
│   │   ├── og-image.png
│   │   └── screenshots
│   │       ├── main.png
│   │       ├── mobile.jpg
│   │       ├── modal.png
│   │       ├── og-tag.png
│   │       ├── transfer.png
│   │       ├── user1.png
│   │       └── user2.png
│   └── js
│       └── script.js
├── index.html
└── README.md

5 directories, 16 files

Collaboration

If you have found a bug, suggesting an improvement or want to collaborate then please raise an issue or create an pull request.

Contact me