💳 Payoo — Banking App

---

📖 Overview

Payoo is a simple, interactive web-based banking application built with HTML, Tailwind CSS, and vanilla JavaScript. It simulates core banking operations — deposits, withdrawals, and balance management — through a clean and user-friendly interface.

This project is perfect for beginners who want to learn front-end development, JavaScript DOM manipulation, and how to build interactive web apps without a backend.

---

✨ Features

Feature	Description
💰 Deposit	Add money to your account with instant balance update
💸 Withdraw	Withdraw funds with overdraft protection validation
📋 Transaction History	View recent deposits and withdrawals dynamically
📱 Responsive Design	Mobile-friendly UI built with Tailwind CSS
⚡ Interactive UI	Real-time DOM updates without page reload
✅ Form Validation	Prevents empty, negative, or invalid inputs

---

🛠️ Technologies Used

• HTML5 — App structure and layout
• Tailwind CSS — Styling, responsiveness, and modern UI components
• JavaScript (Vanilla) — DOM manipulation, logic, and dynamic updates

---

📁 Project Structure

PAYOO/
├── assets/
│   ├── Logo-full.png
│   ├── logo.png
│   ├── opt-1.png
│   ├── opt-2.png
│   ├── opt-3.png
│   ├── opt-4.png
│   ├── opt-5.png
│   └── opt-6.png
├── script/
│   ├── addmoney.js
│   ├── bonus.js
│   ├── cashout.js
│   ├── latest_history.js
│   ├── login.js
│   ├── machine.js
│   ├── paybill.js
│   ├── transaction.js
│   └── transfer.js
├── UI/
│   ├── payoo-MFS.fig
│   └── payoo.png
├── home.html
├── index.html
└── tailwind.config.js

---

🚀 Getting Started

Prerequisites

• A modern web browser (Chrome, Firefox, Edge, etc.)
• No additional installations required

Run Locally

1. Clone the repository

   git clone https://github.com/alsaba28/PAYOO.git

2. Navigate to the project folder

   cd PAYOO

3. Open index.html in your browser

   # Simply double-click index.html
   # or use VS Code Live Server extension

---

🔐 How It Works

1. Login — Enter your 11-digit phone number and 4-digit PIN to access your account.
2. Dashboard — View your available balance and quick-action buttons.
3. Add Money — Select a bank, enter your account number, amount, and PIN to top up.
4. Cash Out / Transfer — Move money out or send to others.
5. Pay Bill — Pay utility or service bills directly.
6. Transaction History — All activity is logged and displayed in real-time.
7. Get Bonus — Enter a coupon code to claim a bonus reward.

⚠️ The app uses localStorage to persist the user PIN between sessions. No real backend or financial data is involved.

---

📸 UI Preview

The full UI/UX design is available in the UI/ folder as a Figma file (payoo-MFS.fig).

---

🌱 Why This Project?

• Practice core front-end development skills
• Understand JavaScript DOM manipulation in a real-world scenario
• Learn how to combine design and functionality in a small, focused project
• Great portfolio piece for beginner developers

---

📄 License

This project is open source and available under the MIT License.

---

Made with ❤️ by Abdullah Al Saba