From c62e2e89bded156e8a7196f973a6a2afec2f4960 Mon Sep 17 00:00:00 2001 From: jdmedlock Date: Sun, 28 Apr 2019 15:23:32 -0500 Subject: [PATCH] Feature: Add Contribution Tracker app specification Add Contribution Tracker app specification Resolves: N/a See also: N/a --- Projects/Contribution-Tracker-App.md | 110 +++++++++++++++++++++++++++ README.md | 1 + 2 files changed, 111 insertions(+) create mode 100644 Projects/Contribution-Tracker-App.md diff --git a/Projects/Contribution-Tracker-App.md b/Projects/Contribution-Tracker-App.md new file mode 100644 index 00000000..769c3e30 --- /dev/null +++ b/Projects/Contribution-Tracker-App.md @@ -0,0 +1,110 @@ +# Contribution Tracker + +**Tier:** 3-Advanced + +In the [Charity Finder](./Charity-Finder-App.md) project you created an app to +help you locate a charity worthy of your contributions. Once a contribution +has been made the goal of the Contribution Tracker app is to track it so to +provide users with a record of all contributions for use in monitoring how +funds are being directed and to provide records for financial reporting +purposes. For example, for tax reporting. + +### Constraints + +- Developers may use Vanilla JS, or a framework of their choice (like React, +VueJS, etc.). + +- Developers should not use libraries for calculating and manipulating monetary +amounts. All calculation and formatting should be done in the language chosen +to develop the application. + +- Developers may use a graphics presentation library or service of their choice, +like [AMCharts](https://www.amcharts.com/). + +- Developers may choose to have transactions persist across sessions using +either files or databases. Sensitive data, like transactions, must not be +maintainined in local storage. Remember that although you can implement +protections it is impossible to totally secure browser applications. + +## User Stories + +- [ ] User can see a Navigation Bar at the top of each page containing the +application name and a "hamburger" menu with these option: + - Dashboard + - Transactions +- [ ] User can see a Footer Bar at the bottom of each page containing an +About link + +### Dashboard Page +- [ ] User can see the Dashboard page when the app is started containing +graphical summaries of the following key metrics. The graphical representation +for each is left up to the Developer. + - Contributions by month for the current year + - Total contributions by year + - Contribution increase/decrease by year + - Average contribution amount by month and year +- [ ] User can return to the Dashboard page, if currently on another page, by +clicking on the 'Dashboard' option in the hamburger menu in the Navigation Bar. + +### Transactions Page +- [ ] User can see a transaction input panel containing the following: + - Transaction date + - Payee name + - Amount + - Memo + - Action buttons - 'Clear', 'Add' +- [ ] User can see a tabular transaction ledger containing previously +entered transactions. Each row will also contain a 'Modify' and a 'Delete' +button. +- [ ] User can enter values describing the transaction into the input fields +- [ ] User can click the 'Clear' button to reset all input fields to an +empty state. +- [ ] User can click the 'Add' button to validate the input that has been +entered, add the validated entry to the transaction ledger, and clear the input +fields. +- [ ] User can see a consolidated error message detailing any errors detected +in input fields, including: + - Invalid date + - Blank Payee name + - Non-numeric amount field +- [ ] User can click on the 'Update' button to modify a previously entered +transaction. The transaction details will be copied to the transaction input +panel and the 'Add' button will change to 'Modify'. +- [ ] User can change values in the input fields and click the 'Modify' to +validate the input and update that transactions entry in the ledger. If +successful the 'Modify' button will change back to 'Add' and the input fields +will be cleared. +- [ ] User can click the 'Delete' button to remove a previously entered +transaction. A popup dialog will be displayed containing 'Cancel' and 'Okay' +buttons to cancel or confirm the delete. If the delete is confirmed the +transaction will be removed from the ledger. +- [ ] User can return to the Transactions page, if currently on another page, +by clicking on the 'Transactions' option in the hamburger menu in the Navigation +Bar. + +### About Page +- [ ] User can click the About link in the Footer Bar to display information +about the Developer. +- [ ] User can see links to the Developers GitHub and social media accounts +including social media icons (like the Twitter icon). + +## Bonus features + +- [ ] User can click in the transaction date field to display a calendar +the date can be selected from rather than manually entering it. +- [ ] User can see alternating row background colors in the transaction ledger. +- [ ] User can click on a column heading in the transaction ledger to toggle +the sort sequence on the values in that column. +- [ ] User can see a PDF option near the Transaction Ledger to create a PDF +of all transactions (Hint: checkout how this capability can be implemented via +[Puppeteer](https://github.com/GoogleChrome/puppeteer)). + +## Useful links and resources + +[How to Handle Monetary Values in Javascript](https://frontstuff.io/how-to-handle-monetary-values-in-javascript) +- [How to Format Number as Currency](https://flaviocopes.com/how-to-format-number-as-currency-javascript/) +- [Mintalble (GitHub)](https://github.com/kevinschaich/mintable) + +## Example projects + +N/a diff --git a/README.md b/README.md index 962cf9f1..e3bb4d59 100644 --- a/README.md +++ b/README.md @@ -101,6 +101,7 @@ required to complete them. | [🌟Bug Race Game](./Projects/Bug-Race-Game.md) | Create a Bug Race game to show off your animation skills | 3-Advanced | | [🌟Calorie Counter](./Projects/Calorie-Counter-App.md) | Calorie Counter Nutrion App | 3-Advanced | | [Chat App](./Projects/Chat-App.md) | Real-time chat interface | 3-Advanced | +| [🌟Contribution Tracker](./Projects/Contribution-Tracker-App.md) | Track your charitable contributions | 3-Advanced | | [Elevator](./Projects/Elevator-App.md) | Elevator simulator | 3-Advanced | | [Fast Food Simulator](./Projects/FastFood-App.md) | Fast Food Restaurant Simulator | 3-Advanced | | [🌟Instagram Clone](./Projects/Instagram-Clone-App.md) | A clone of Facebook's Instagram app | 3-Advanced |