JavaScript: Investment Portfolio Tracker
Project Title: Investment Portfolio Tracker
Scope of Work:
Create an Investment Portfolio Tracker application using JavaScript that allows users to manage and track their investment portfolios. The application will involve building a dynamic, interactive web application where users can add, update, and remove investments. The application will calculate total investment value, track individual asset performance, and visualize data using charts. The project will focus on using intermediate JavaScript concepts like DOM manipulation, event handling, local storage, and basic data visualization.
User Stories:
- User Story 1: Add a New Investment
- As a user, I want to add a new investment to my portfolio by providing details like asset name, investment amount, and current value, so that I can track my investments.
- Acceptance Criteria:
- There should be a form to input the asset name, amount invested, and current value.
- On submission, the investment should be added to a list displaying all investments.
- The total portfolio value should be updated automatically.
- User Story 2: View and Update Portfolio
- As a user, I want to view a list of all my investments and their current value, so that I can monitor my portfolio.
- Acceptance Criteria:
- The investment list should display the asset name, amount invested, current value, and percentage change.
- Each investment should have an “Update” button that allows users to update the current value.
- The percentage change should be calculated and displayed based on the initial investment and current value.
- User Story 3: Remove an Investment
- As a user, I want to remove an investment from my portfolio, so that I can keep my portfolio up to date.
- Acceptance Criteria:
- Each investment in the list should have a “Remove” button.
- Clicking “Remove” should delete the investment from the list and update the total portfolio value.
- User Story 4: Visualize Portfolio Performance
- As a user, I want to see a visual representation of my portfolio’s asset distribution, so that I can easily understand the allocation of my investments.
- Acceptance Criteria:
- A pie chart should display the distribution of investments by asset.
- The chart should update dynamically as investments are added, updated, or removed.
Wireframes:
- Portfolio Dashboard:
—————————————————-
| Investment Portfolio Tracker |
—————————————————-
| Total Portfolio Value: $[Current Total Value] |
—————————————————-
| [Add New Investment] (Button) |
—————————————————-
| Investment List: |
| ———————————————— |
| | Asset Name | Invested | Current | % Change | |
| ———————————————— |
| | Apple | $1,000 | $1,200 | +20% | |
| | Google | $500 | $600 | +20% | |
| ———————————————— |
| [Update] [Remove] |
| |
| [Pie Chart Visualizing Asset Distribution] |
—————————————————- - Add New Investment Form:
—————————————————-
| Add New Investment |
—————————————————-
| Asset Name: [_____________________] |
| Amount Invested: [_____________________] |
| Current Value: [_____________________] |
—————————————————-
| [Add Investment] (Button) |
—————————————————- - Update Investment Form:
—————————————————-
| Update Investment |
—————————————————-
| Asset Name: [Google] |
| Amount Invested: [$500] |
| Current Value: [_____________________] |
—————————————————-
| [Update Investment] (Button) |
—————————————————-
Acceptance Criteria:
- General UI/UX:
- The interface should be clean, with an emphasis on clarity and usability.
- The application should be responsive and accessible on different devices.
- Navigation between adding, updating, and viewing investments should be intuitive.
- Functional Criteria:
- Users should be able to add, update, and remove investments, with the data reflected immediately in the portfolio list.
- The total portfolio value should be calculated based on the sum of current values of all investments.
- The percentage change for each investment should be calculated as
(current value - invested amount) / invested amount * 100
. - The pie chart should accurately represent the distribution of investments and update dynamically as the portfolio changes.
- The application should use local storage to persist data between sessions, allowing users to return and see their portfolio intact.
- Code Quality:
- Use modular JavaScript to separate concerns (e.g., separate functions for adding, updating, and removing investments).
- Implement DOM manipulation and event handling cleanly, avoiding global variables where possible.
- Ensure data validation is in place (e.g., preventing negative values or non-numeric input).
- Code should be well-commented, with clear explanations of key logic.
Time Estimate:
- Set Up Project and Basic HTML/CSS Structure: 20 minutes
- Implement Add Investment Functionality: 30 minutes
- Implement Portfolio List and Display: 30 minutes
- Implement Update and Remove Investment Functionality: 30 minutes
- Implement Portfolio Visualization with Charts: 40 minutes
- Implement Data Persistence with Local Storage: 20 minutes
- Testing and Final Refinements: 10 minutes
Total Time: 180 minutes
This project is ideal for intermediate-level JavaScript developers, as it involves manipulating the DOM, handling events, managing application state, and creating dynamic visualizations. The project can be extended with features like user authentication, API integration for real-time data, or advanced analytics.