- Use only builtin language functions for your calculations rather than relying
on a library or package like [MomentJS](https://momentjs.com/). This assumes,
of course, that the language of your choice has adequate date and time
manipulation functions built in.
on a library or package like [MomentJS](https://momentjs.com/). This assumes,
of course, that the language of your choice has adequate date and time
manipulation functions built in.
- You may not use any code generators such as the
[Counting Down To](https://countingdownto.com/) site. You should develop your
own original implementation.
[Counting Down To](https://countingdownto.com/) site. You should develop your
own original implementation.
## User Stories
- [ ] User can see an event input box containing an event name field, an
date field, an optional time, and a 'Start' button.
date field, an optional time, and a 'Start' button.
- [ ] User can define the event by entering its name, the date it is
scheduled to take place, and an optional time of the event. If the time is
omitted it is assumed to be at Midnight on the event date in the local time
zone.
scheduled to take place, and an optional time of the event. If the time is
omitted it is assumed to be at Midnight on the event date in the local time
zone.
- [ ] User can see a warning message if the event name is blank.
- [ ] User can see a warning message if the event date or time are incorrectly
entered.
entered.
- [ ] User can see a warning message if the time until the event data and time
that has been entered would overflow the precision of the countdown timer.
that has been entered would overflow the precision of the countdown timer.
- [ ] User can click on the 'Start' button to see the countdown timer start
displaying the days, hours, minutes, and seconds until the event takes place.
displaying the days, hours, minutes, and seconds until the event takes place.
- [ ] User can see the elements in the countdown timer automatically
decrement. For example, when the remaining seconds count reaches 0 the remaining
minutes count will decrement by 1 and the seconds will start to countdown from 59. This progression must take place from seconds all the way up to the remaining days position in countdown display.
decrement. For example, when the remaining seconds count reaches 0 the remaining
minutes count will decrement by 1 and the seconds will start to countdown from 59. This progression must take place from seconds all the way up to the remaining days position in countdown display.
## Bonus features
@ -50,7 +56,7 @@ minutes count will decrement by 1 and the seconds will start to countdown from 5
## Useful links and resources
- Images of analog tube-based countdown timers can be found
In this challenge, you'd create a javascript validation script to validate the inputs entered by a user using RegEx.
You could always refer to the [Regular Expression Library](http://regexlib.com/(X(1)A(GijS7qxVy-6Gyc4cweUyFoK4ZvRn2WnlOe8SSKuq9sT7ps-2nbiTmZZMTCn_rFk4-mNoGnYL-DPU8pJhmNNOtkP-syqWE4WO_1aVt4bPa5nTsQPQe6VRAALnm6QW3YIWbYkVS78JFbZN39vmMI1UYiWlHXKwNMB99WjsZOn0qc_8dcN0unp2KMOBw0P__3OH0))/CheatSheet.aspx?AspxAutoDetectCookieSupport=1) for support
You could always refer to the [Regular Expression Library](<http://regexlib.com/(X(1)A(GijS7qxVy-6Gyc4cweUyFoK4ZvRn2WnlOe8SSKuq9sT7ps-2nbiTmZZMTCn_rFk4-mNoGnYL-DPU8pJhmNNOtkP-syqWE4WO_1aVt4bPa5nTsQPQe6VRAALnm6QW3YIWbYkVS78JFbZN39vmMI1UYiWlHXKwNMB99WjsZOn0qc_8dcN0unp2KMOBw0P__3OH0))/CheatSheet.aspx?AspxAutoDetectCookieSupport=1>) for support
For this project, there'd be three required inputs for validation:
- The first would require the user to enter five (5) capital letters, six (6) symbols and two hyphens (-) in any order. This could be used as a password.
- The second which could be used as username would require the user to enter letters without spaces
- The third which could be used as email address would require the user to enter only email addresses on gmail (...@gmail.com).
@ -12,41 +18,37 @@ purposes. For example, for tax reporting.
### Constraints
- Developers may use Vanilla JS, or a framework of their choice (like React,
VueJS, etc.).
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.
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/).
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
maintained in local storage. Remember that although you can implement
protections it is impossible to totally secure browser applications.
either files or databases. Sensitive data, like transactions, must not be
maintained 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
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
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
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.
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
@ -54,50 +56,48 @@ clicking on the 'Dashboard' option in the hamburger menu in the Navigation Bar.
- 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.
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.
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.
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
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'.
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.
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.
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.
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.
about the Developer.
- [ ] User can see links to the Developers GitHub and social media accounts
including social media icons (like the Twitter icon).
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.
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.
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
mcacciano
6 years ago