Table of Contents (click to expand)
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
| username | pin |
|---|---|
| js | 1111 |
| jd | 2222 |
- HTML
- CSS
- JavaScript
- Internationalization API
- Open Graph Meta Tags
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
);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.
.
├── 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
If you have found a bug, suggesting an improvement or want to collaborate then please raise an issue or create an pull request.