Project Title: Banking Dashboard (HTML, CSS, JS)
IMPORTANT: Read the whole assignment before starting.
Scope of Work:
Create a simple banking dashboard that allows a user to view their account balance, deposit money, and withdraw money. The project will involve creating a single webpage using HTML, CSS, and JavaScript. The webpage will have a basic layout with sections for displaying the current balance, input fields for deposit and withdrawal amounts, and buttons to perform these actions. JavaScript will be used to update the balance dynamically based on user input.
User Stories:
- User Story 1: View Account Balance
- As a user, I want to see my current account balance displayed prominently on the dashboard so that I can easily keep track of my funds.
- Acceptance Criteria:
- The account balance should be displayed at the top of the page in a large, clear font.
- The initial balance should be set to $1,000.
- User Story 2: Deposit Money
- As a user, I want to be able to deposit money into my account by entering an amount and clicking a “Deposit” button, so that my account balance increases accordingly.
- Acceptance Criteria:
- There should be an input field for entering the deposit amount.
- When the user enters an amount and clicks “Deposit,” the account balance should increase by that amount.
- The new balance should be displayed immediately after the deposit.
- User Story 3: Withdraw Money
- As a user, I want to be able to withdraw money from my account by entering an amount and clicking a “Withdraw” button, so that my account balance decreases accordingly.
- Acceptance Criteria:
- There should be an input field for entering the withdrawal amount.
- When the user enters an amount and clicks “Withdraw,” the account balance should decrease by that amount.
- The new balance should be displayed immediately after the withdrawal.
- If the withdrawal amount exceeds the current balance, an alert should be displayed, and the balance should remain unchanged.
Wireframe:
----------------------------------------------------
| Banking Dashboard |
----------------------------------------------------
| |
| Current Balance: $1,000 |
| |
----------------------------------------------------
| Deposit Amount: [_______] [Deposit Button] |
----------------------------------------------------
| Withdrawal Amount: [_______] [Withdraw Button] |
----------------------------------------------------
| |
| [Footer with basic contact info or social links]|
----------------------------------------------------
Acceptance Criteria:
- General UI/UX:
- The dashboard should have a clean and simple design.
- The input fields and buttons should be clearly labeled and easy to interact with.
- The page should be responsive and functional on both desktop and mobile devices.
- Functional Criteria:
- The initial balance should be set to $1,000.
- Deposits should correctly increase the balance, and withdrawals should decrease it.
- The balance should not go negative; if a withdrawal is attempted that exceeds the balance, an alert should inform the user, and no change should occur to the balance.
- The page should not require reloading to see the updated balance.
- Code Quality:
- HTML should be properly structured with semantic tags.
- CSS should be used to style the page, making it visually appealing.
- JavaScript should be used to handle the deposit and withdrawal logic.
- Code should be well-commented and organized for easy understanding.
Time Estimate:
- Setup (HTML Structure): 10 minutes
- Styling (CSS): 15 minutes
- JavaScript Logic (Deposit & Withdraw): 25 minutes
- Testing & Refinement: 10 minutes
Total Time: 60 minutes
This project is ideal for beginners as it covers essential web development concepts and allows them to see how HTML, CSS, and JavaScript work together to create a functional and interactive webpage.