贡献追踪器

等级： 3-高级

在慈善寻找器项目中，你创建了一个应用程序来帮助你找到值得捐款的慈善机构。一旦进行了捐款，贡献追踪器应用程序的目标就是跟踪它，以便为用户提供所有捐款的记录，用于监控资金如何被引导，并提供财务报告的记录。例如，用于税务报告。

限制

开发者可以使用原生JavaScript，或者他们选择的框架（如React、VueJS等）。
开发者不应使用用于计算和操作货币金额的库。所有的计算和格式化都应在选择开发应用程序的语言中进行。
开发者可以使用他们选择的图形展示库或服务，如AMCharts。
开发者可以选择使用文件或数据库在会话之间持久化交易。敏感数据，如交易，不得保持在本地存储中。请记住，尽管你可以实现保护措施，但无法完全保护浏览器应用程序。

用户故事

[ ] 用户可以在每个页面的顶部看到一个包含应用程序名称和汉堡菜单的导航栏，其中包括以下选项：
- 首页
- 交易记录
[ ] 用户可以在每个页面的底部看到一个包含关于链接的页脚栏。

首页页面

[ ] 当应用程序启动时，用户可以看到包含以下关键指标的首页页面摘要。每个指标的图形表示由开发者决定。
- 当前年份每月的捐款
- 每年的总捐款
- 每年捐款增减
- 每月和每年的平均捐款金额
[ ] 如果用户当前不在首页页面上，可以通过点击导航栏中的“首页”选项返回首页页面。

交易记录页面

[ ] 用户可以看到一个交易输入面板，包含以下内容：
- 交易日期
- 收款人名称
- 金额
- 备注
- 操作按钮 - “清除”、“添加”
[ ] 用户可以看到一个表格形式的交易账本，包含之前输入的交易。每行还将包含一个“修改”和一个“删除”按钮。
[ ] 用户可以将描述交易的值输入到输入字段中
[ ] 用户可以点击“清除”按钮将所有输入字段重置为空状态。
[ ] 用户可以点击“添加”按钮验证已输入的输入，将验证后的条目添加到交易账本中，并清空输入字段。
[ ] 用户可以看到一个综合错误消息，详细说明输入字段中检测到的任何错误，包括：
- 无效的日期
- 空白的收款人名称
- 非数字金额字段
[ ] 用户可以点击“更新”按钮修改之前输入的交易。交易详情将被复制到交易输入面板中，“添加”按钮将更改为“修改”。
[ ] 用户可以更改输入字段中的值并点击“修改”以验证输入并更新账本中的交易条目。如果成功，“修改”按钮将变回“添加”，输入字段将被清空。
[ ] 用户可以点击“删除”按钮删除之前输入的交易。将显示一个弹出对话框，包含“取消”和“确定”按钮以取消或确认删除。如果确认删除，交易将从账本中删除。
[ ] 用户可以点击交易账本中的列标题来切换该列中值的排序顺序。
[ ] 用户可以在交易账本附近看到一个PDF选项，创建所有交易的PDF（提示：查看如何通过Puppeteer实现此功能）。

有用的链接和资源

示例项目

N/a