- 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.
- You may not use any code generators such as the
[Counting Down To](https://countingdownto.com/) site. You should develop your
own original implementation.
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.
## User Stories
- [ ] User can see an event input box containing an event name field, an
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.
- [ ] 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.
- [ ] 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.
- [ ] 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.
- [ ] 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.
- [ ] User can see an event input box containing an event name field, an
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.
- [ ] 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.
- [ ] 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.
- [ ] 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.
- [ ] 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.
## Bonus features
- [ ] User can save the event so that it persists across sessions
- [ ] User can see an alert when the event is reached
- [ ] User can specify more than one event.
- [ ] User can see a countdown timers for each event that has been defined.
- [ ] User can save the event so that it persists across sessions
- [ ] User can see an alert when the event is reached
- [ ] User can specify more than one event.
- [ ] User can see a countdown timers for each event that has been defined.
## Useful links and resources
- Images of analog tube-based countdown timers can be found
[here](https://nixieshop.com/)
- 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).
## User Stories
- [ ] User should be notified of any invalid inputs by error messages displayed on the form.
- [ ] The submit button on the form would never be executed until all entries are validated.
- [ ] User should be notified of any invalid inputs by error messages displayed on the form.
- [ ] The submit button on the form would never be executed until all entries are validated.
## Useful links and resources
@ -23,4 +30,4 @@ For this project, there'd be three required inputs for validation:
## Example project
- [Native HTML5 validation with CSS & Regex](https://codepen.io/helgesverre/pen/vWRevp)
- [Native HTML5 validation with CSS & Regex](https://codepen.io/helgesverre/pen/vWRevp)
@ -8,31 +14,31 @@ Roman numerals, as used today, employ seven symbols, each with a fixed integer v
See the below table the _Symbol - Value_ pairs:
- I - 1
- V - 5
- X - 10
- L - 50
- C - 100
- D - 500
- M - 1000
- I - 1
- V - 5
- X - 10
- L - 50
- C - 100
- D - 500
- M - 1000
## User Stories
- [ ] User should be able to enter one Roman number in an input field
- [ ] User could see the results in a single output field containing the decimal (base 10) equivalent of the roman number that was entered by pressing a button
- [ ] If a wrong symbol is entered, the User should see an error
- [ ] User should be able to enter one Roman number in an input field
- [ ] User could see the results in a single output field containing the decimal (base 10) equivalent of the roman number that was entered by pressing a button
- [ ] If a wrong symbol is entered, the User should see an error
## Bonus features
- [ ] User could see the conversion to be made automatically as I type
- [ ] User should be able to convert from decimal to Roman (vice-versa)
- [ ] User could see the conversion to be made automatically as I type
- [ ] User should be able to convert from decimal to Roman (vice-versa)
## Useful links and resources
- [An explanation of Roman Numbers](https://en.wikipedia.org/wiki/Roman_numerals)
- [An explanation of Roman Numbers](https://en.wikipedia.org/wiki/Roman_numerals)
## Example projects
Try not to view this until you've developed your own solution:
- [Roman Number Converter](https://www.calculatorsoup.com/calculators/conversions/roman-numeral-converter.php)
- [Roman Number Converter](https://www.calculatorsoup.com/calculators/conversions/roman-numeral-converter.php)
- [ ] User can select the measurement system calculations will be performed in - Metric or English
- [ ] User can enter the actual temperature and the wind speed
- [ ] User can press the `Calculate` button to display the wind chill
- [ ] User will receive an error message when `Calculate` is clicked if data values are not entered
- [ ] User can select the measurement system calculations will be performed in - Metric or English
- [ ] User can enter the actual temperature and the wind speed
- [ ] User can press the `Calculate` button to display the wind chill
- [ ] User will receive an error message when `Calculate` is clicked if data values are not entered
## Bonus features
- [ ] User will receive an error message when `Calculate` is clicked if the resulting wind chill factor is greater than or equal to the actual temperature. Since this signifies an internal error in the calculation you may also satisfy this requirement using an assertion
- [ ] User will be prompted to enter new data values if `Calculate` is pressed without first changing at least one of the input fields
- [ ] User will see an updated wind chill factor whenever new actual temperature or wind speed values are entered, without being required to click the `Calculate` button
- [ ] User will receive an error message when `Calculate` is clicked if the resulting wind chill factor is greater than or equal to the actual temperature. Since this signifies an internal error in the calculation you may also satisfy this requirement using an assertion
- [ ] User will be prompted to enter new data values if `Calculate` is pressed without first changing at least one of the input fields
- [ ] User will see an updated wind chill factor whenever new actual temperature or wind speed values are entered, without being required to click the `Calculate` button
- [ ] User can display game rules by entering `bb help` into the chat window.
- [ ] User can start a game by entering `bb start` into the chat
- [ ] User can target a cell by entering `bb shoot r,c` into the chat window, where `r` and `c` are the row and column coordinates of the cell to be targeted.
- [ ] User can see the game board showing hits and misses displayed by the bot after each shot is taken
- [ ] User can see a congratulations message after the shot that sinks the last remaining ship.
- [ ] User can display game rules by entering `bb help` into the chat window.
- [ ] User can start a game by entering `bb start` into the chat
- [ ] User can target a cell by entering `bb shoot r,c` into the chat window, where `r` and `c` are the row and column coordinates of the cell to be targeted.
- [ ] User can see the game board showing hits and misses displayed by the bot after each shot is taken
- [ ] User can see a congratulations message after the shot that sinks the last remaining ship.
## Bonus features
- [ ] User can surrender a game by entering `bb surrender` in the chat window.
- [ ] User can see a card containing a graphical representation of the hits and misses rather than a simple 2D table of characters.
- [ ] User can surrender a game by entering `bb surrender` in the chat window.
- [ ] User can see a card containing a graphical representation of the hits and misses rather than a simple 2D table of characters.
@ -22,48 +28,48 @@ BGE is responsible for maintaining game state.
### BGE
- [ ] Caller can invoke a `startGame()` function to begin a 1-player game. This function will generate an 8x8 game board consisting of 3 ships having a width of one square and a length of:
- [ ] Caller can invoke a `startGame()` function to begin a 1-player game. This function will generate an 8x8 game board consisting of 3 ships having a width of one square and a length of:
- Destroyer: 2 squares
- Cruiser: 3 squares
- Battleship: 4 squares
- Destroyer: 2 squares
- Cruiser: 3 squares
- Battleship: 4 squares
`startGame()` will randomly place these ships on the board in any direction and will return an array representing ship placement.
`startGame()` will randomly place these ships on the board in any direction and will return an array representing ship placement.
- [ ] Caller can invoke a `shoot()` function passing the target row and column coordinates of the targeted cell on the game board. `shoot()` will return indicators representing if the shot resulted in a hit or miss, the number of ships left (i.e. not yet sunk), the ship placement array, and an updated hits and misses array.
- [ ] Caller can invoke a `shoot()` function passing the target row and column coordinates of the targeted cell on the game board. `shoot()` will return indicators representing if the shot resulted in a hit or miss, the number of ships left (i.e. not yet sunk), the ship placement array, and an updated hits and misses array.
Cells in the hits and misses array will contain a space if they have yet to be targeted, `O` if they were targeted but no part of a ship was at that location, or `X` if the cell was occupied by part of a ship.
Cells in the hits and misses array will contain a space if they have yet to be targeted, `O` if they were targeted but no part of a ship was at that location, or `X` if the cell was occupied by part of a ship.
### Text-based Presentation Layer
- [ ] User can see the hits and misses array displayed as a 2 dimensional character representation of the game board returned by the `startGame()` function.
- [ ] User can be prompted to enter the coordinates of a target square on the game board.
- [ ] User can see an updated hits and misses array display after taking a shot.
- [ ] User can see a message after each shot indicating whether the shot resulted in a hit or miss.
- [ ] User can see an congratulations message after the shot that sinks the last remaining ship.
- [ ] User can be prompted to play again at the end of each game. Declining to play again stops the game.
- [ ] User can see the hits and misses array displayed as a 2 dimensional character representation of the game board returned by the `startGame()` function.
- [ ] User can be prompted to enter the coordinates of a target square on the game board.
- [ ] User can see an updated hits and misses array display after taking a shot.
- [ ] User can see a message after each shot indicating whether the shot resulted in a hit or miss.
- [ ] User can see an congratulations message after the shot that sinks the last remaining ship.
- [ ] User can be prompted to play again at the end of each game. Declining to play again stops the game.
## Bonus features
### BGE
- [ ] Caller can specify the number of rows and columns in the game board as a parameter to the `startGame()` function.
- [ ] Caller can invoke a `gameStats()` function that returns a Javascript object containing metrics for the current game. For example, number of turns played, current number of hits and misses, etc.
- [ ] Caller can specify the number of players (1 or 2) when calling `startGame()` which will generate one board for each player randomly populated with ships.
- [ ] Caller can specify the number of rows and columns in the game board as a parameter to the `startGame()` function.
- [ ] Caller can invoke a `gameStats()` function that returns a Javascript object containing metrics for the current game. For example, number of turns played, current number of hits and misses, etc.
- [ ] Caller can specify the number of players (1 or 2) when calling `startGame()` which will generate one board for each player randomly populated with ships.
`shoot()` will accept the player number the shot is being made for along with the coordinates of the shot. The data it returns will be for that player.
`shoot()` will accept the player number the shot is being made for along with the coordinates of the shot. The data it returns will be for that player.
### Text-based Presentation Layer
- [ ] User can see the current game statics at any point by entering the phrase `stats` in place of target coordinates. (Note that this requires the `gameStats()` function in the BGE)
- [ ] User can specify a two player game is to be played, with each player alternating turns in the same terminal session (Note that this requires corresponding Bonus Features in the BGE)
- [ ] User can see the player number in prompts associated with the inputs in each turn.
- [ ] User can see both players boards at the end of each turn.
- [ ] User can see the current game statics at any point by entering the phrase `stats` in place of target coordinates. (Note that this requires the `gameStats()` function in the BGE)
- [ ] User can specify a two player game is to be played, with each player alternating turns in the same terminal session (Note that this requires corresponding Bonus Features in the BGE)
- [ ] User can see the player number in prompts associated with the inputs in each turn.
- [ ] User can see both players boards at the end of each turn.
## Useful links and resources
- [Battleship Game (Wikipedia)](<https://en.wikipedia.org/wiki/Battleship_(game)>)
- [Battleship Game Rules (Hasbro)](https://www.hasbro.com/common/instruct/battleship.pdf)
- [Battleship Game (Wikipedia)](<https://en.wikipedia.org/wiki/Battleship_(game)>)
- [Battleship Game Rules (Hasbro)](https://www.hasbro.com/common/instruct/battleship.pdf)
## Example projects
@ -71,4 +77,4 @@ This YouTube video shows how a text-based [Battleship Game](https://www.youtube.
The following example is provided as a demonstration of the Battleship game if it is unfamiliar to you. Remember you are to implement a text based presentation layer for testing.
- [Battleship Game by Chris Brody](https://codepen.io/CodifyAcademy/pen/ByBEOz)
- [Battleship Game by Chris Brody](https://codepen.io/CodifyAcademy/pen/ByBEOz)
@ -8,27 +14,27 @@ As a MVP(Minimum Viable Product) you can focus on building the Chat interface. R
## User Stories
- [ ] User is prompted to enter a username when he visits the chat app. The username will be stored in the application
- [ ] User can see an `input field` where he can type a new message
- [ ] By pressing the `enter` key or by clicking on the `send` button the text will be displayed in the `chat box` alongside his username (e.g. `John Doe: Hello World!`)
- [ ] User is prompted to enter a username when he visits the chat app. The username will be stored in the application
- [ ] User can see an `input field` where he can type a new message
- [ ] By pressing the `enter` key or by clicking on the `send` button the text will be displayed in the `chat box` alongside his username (e.g. `John Doe: Hello World!`)
## Bonus features
- [ ] The messages will be visible to all the Users that are in the chat app (using WebSockets)
- [ ] When a new User joins the chat, a message is displayed to all the existing Users
- [ ] Messages are saved in a database
- [ ] User can send images, videos and links which will be displayed properly
- [ ] User can select and send an emoji
- [ ] Users can chat in private
- [ ] Users can join `channels` on specific topics
- [ ] The messages will be visible to all the Users that are in the chat app (using WebSockets)
- [ ] When a new User joins the chat, a message is displayed to all the existing Users
- [ ] Messages are saved in a database
- [ ] User can send images, videos and links which will be displayed properly
- [ ] User can select and send an emoji
- [ ] Users can chat in private
- [ ] Users can join `channels` on specific topics
## Useful links and resources
- [Socket.io](https://socket.io)
- [How to build a React.js chat app in 10 minutes - article](https://medium.freecodecamp.org/how-to-build-a-react-js-chat-app-in-10-minutes-c9233794642b)
- [Build a chat application like Slack - React / JavaScript Tutorial - Youtube](https://www.youtube.com/watch?v=a-JKj7m2LIo)
- [Socket.io Chat App Using Websockets - Youtube Tutorial](https://www.youtube.com/watch?v=tHbCkikFfDE)
- [Socket.io](https://socket.io)
- [How to build a React.js chat app in 10 minutes - article](https://medium.freecodecamp.org/how-to-build-a-react-js-chat-app-in-10-minutes-c9233794642b)
- [Build a chat application like Slack - React / JavaScript Tutorial - Youtube](https://www.youtube.com/watch?v=a-JKj7m2LIo)
- [Socket.io Chat App Using Websockets - Youtube Tutorial](https://www.youtube.com/watch?v=tHbCkikFfDE)
@ -6,98 +12,92 @@ In the [Charity Finder](../2-Intermediate/Charity-Finder-App.md) project you cre
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
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.).
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
- [ ] User can see a Footer Bar at the bottom of each page containing an
About link
- [ ] 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.
- [ ] 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.
- [ ] 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).
- [ ] 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
@ -11,32 +17,32 @@ efforts and to make it available through a simple Slack command.
## User Stories
- [ ] User can create a kudu using the Slack command: `/kudo add <slack-id> <text>` where:
- [ ] User can create a kudu using the Slack command: `/kudo add <slack-id> <text>` where:
-`<slack-id>` defines the individual receiving the recognition
-`<text>` is your kudo for that person
- `<slack-id>` defines the individual receiving the recognition
- `<text>` is your kudo for that person
- [ ] User can modify a kudu using the Slack command: `/kudo replace <kudo-id> <text>` where:
- [ ] User can modify a kudu using the Slack command: `/kudo replace <kudo-id> <text>` where:
-`<action>` is 'replace' or 'delete'
-`<kudo-id>` is the kudo identifier
-`<text>` is your kudo for that person
- `<action>` is 'replace' or 'delete'
- `<kudo-id>` is the kudo identifier
- `<text>` is your kudo for that person
- [ ] User can delete a kudu using the Slack command: `/kudo delete <kudo-id>`
- [ ] User can delete a kudu using the Slack command: `/kudo delete <kudo-id>`
- [ ] User may display the most recent _n_ kudos using the Slack command: `/kudo list <n>` where `n` is an integer or `*` for all kudos
- [ ] User may display the most recent _n_ kudos using the Slack command: `/kudo list <n>` where `n` is an integer or `*` for all kudos
- [ ] User may display all kudos for an individual with the Slack command: `/kudo user <slack-id>`
- [ ] User may display all kudos for an individual with the Slack command: `/kudo user <slack-id>`
## Bonus features
- [ ] User may list the individual having the most kudos, in descending order, user the Slack command: `/kudo top <n>` where `n` is an integer or `*` for all individuals who have received a kudo
- [ ] User may list the individual having the most kudos, in descending order, user the Slack command: `/kudo top <n>` where `n` is an integer or `*` for all individuals who have received a kudo
In the [GitHub Status](../1-Beginner/GitHub-Status-App.md) and [Podcast Directory](../2-Intermediate/Podcast-Directory-App.md) you learned what web scraping is and how you can
use it as an alternative data source when API's and backend databases aren't
available. The _My Podcast Library_ app merges your newfound knowledge of
available. The _My Podcast Library_ app merges your newfound knowledge of
web scraping with your frontend skills to extend the simple Podcast Directory
app into something more complex and useful.
@ -21,66 +27,70 @@ free to use your imagination.
### Favorite Podcast Display
- [ ] User can see their favorite podcasts in a tabular display area
- [ ] User can see the message 'No podcasts added yet' in watermark format
in this area if no podcasts have been added.
- [ ] User can see an overview of each favorite podcast that has been added
in this area. This includes the podcast icon, it's name, and the number of
most recent episodes.
- [ ] User can click on the podcast icon to display a page containing a list
of the most recent episodes.
- [ ] User can see their favorite podcasts in a tabular display area
- [ ] User can see the message 'No podcasts added yet' in watermark format
in this area if no podcasts have been added.
- [ ] User can see an overview of each favorite podcast that has been added
in this area. This includes the podcast icon, it's name, and the number of
most recent episodes.
- [ ] User can click on the podcast icon to display a page containing a list
of the most recent episodes.
### Favorite Podcast Entry
- [ ] User can see a '+' button at the top of the favorite podcast area with
the hover text 'Add a new podcast'
- [ ] User can click the '+' button to display a popup panel to allow a new
favorite podcast added. This panel contains an input area containing a text
input box for the podcasts page on Podbean (e.g.
[Techpoint Charlie](https://www.podbean.com/podcast-detail/k76vd-8adc7/Techpoint-Charlie-Podcast)), a 'Save' button, and a 'Cancel' button.
- [ ] User can click the 'Save' button to validate the URL and add the
podcast to the favorite podcast area.
- [ ] User can see a warning message if the url doesn't start with
```https://www.podbean.com/podcast-detail/``` or if navigating to the page
results in a 404 error.
- [ ] User can see valid URLs for favorite podcasts retained across sessions.
- [ ] User can click the 'Cancel' button to discard any data and dismiss the
popup.
- [ ] User can see a '+' button at the top of the favorite podcast area with
the hover text 'Add a new podcast'
- [ ] User can click the '+' button to display a popup panel to allow a new
favorite podcast added. This panel contains an input area containing a text
input box for the podcasts page on Podbean (e.g.
[Techpoint Charlie](https://www.podbean.com/podcast-detail/k76vd-8adc7/Techpoint-Charlie-Podcast)), a 'Save' button, and a 'Cancel' button.
- [ ] User can click the 'Save' button to validate the URL and add the
podcast to the favorite podcast area.
- [ ] User can see a warning message if the url doesn't start with
`https://www.podbean.com/podcast-detail/` or if navigating to the page
results in a 404 error.
- [ ] User can see valid URLs for favorite podcasts retained across sessions.
- [ ] User can click the 'Cancel' button to discard any data and dismiss the
popup.
### Most Recent Episodes for a Podcast Page
- [ ] User can see a table of podcast episodes
- [ ] User can see rows in this table showing a clickable episode icon, the
title of the episode, the date it was originally broadcast, and a heart icon
button to mark it as a favorite.
- [ ] User can scroll through the list
- [ ] User can click on the episode icon to display that episodes page on
the Podbean web site.
- [ ] User can click on an episode's heart icon to mark it as a favorite.
- [ ] User can click on an episode's heart icon to remove it as a favorite.
- [ ] User can see the table sorted with most recent episodes at the top,
followed by those previously marked as favorites.
- [ ] User can see favorite episodes persist across sessions.
- [ ] User can see a table of podcast episodes
- [ ] User can see rows in this table showing a clickable episode icon, the
title of the episode, the date it was originally broadcast, and a heart icon
button to mark it as a favorite.
- [ ] User can scroll through the list
- [ ] User can click on the episode icon to display that episodes page on
the Podbean web site.
- [ ] User can click on an episode's heart icon to mark it as a favorite.
- [ ] User can click on an episode's heart icon to remove it as a favorite.
- [ ] User can see the table sorted with most recent episodes at the top,
followed by those previously marked as favorites.
- [ ] User can see favorite episodes persist across sessions.
## Bonus features
### Episode Ratings
- [ ] User can see 5 star icons with each episode that denotes how the user
rates it.
- [ ] User may click stars from left-to-right to rate an episode. Stars are
filled or changed to a new color when clicked.
- [ ] User may change a rating by clicking on the stars from right-to-left
to deselect them.
- [ ] User can see the list of favorite episodes on the page sorted in
descending rating sequence.
- [ ] User can see 5 star icons with each episode that denotes how the user
rates it.
- [ ] User may click stars from left-to-right to rate an episode. Stars are
filled or changed to a new color when clicked.
- [ ] User may change a rating by clicking on the stars from right-to-left
to deselect them.
- [ ] User can see the list of favorite episodes on the page sorted in
descending rating sequence.
### Searching & Hashtags
- [ ] User can enter a freeform hashtag with an episode on the most recent
episodes page. This hashtag does not need to be predefined.
- [ ] User can see a search box on the main page and a 'Search' button
- [ ] User can enter hashtags in the search box to display a page of episodes
from any podcast with the same format as the most recent episodes page.
- [ ] User can click on a cancel button on the search results page to return
to the main page.
- [ ] User can enter a freeform hashtag with an episode on the most recent
episodes page. This hashtag does not need to be predefined.
- [ ] User can see a search box on the main page and a 'Search' button
- [ ] User can enter hashtags in the search box to display a page of episodes
from any podcast with the same format as the most recent episodes page.
- [ ] User can click on a cancel button on the search results page to return
@ -25,15 +31,15 @@ development of this application.
## User Stories
- [ ] Allow the user to specify the channels to be archived. This includes both adding and removing channels from the list
- [ ] Only the owners of the Slack Team should be allowed to archive messages
- [ ] For each channel to be archived periodically extract messages starting from the last message retrieved in the last extract and write them to a database
- [ ] Allow the user to copy and extracted channel to a file
- [ ] Archiving should be an automatic process. Unlike a Slack 'bot, no manual intervention should be required to start or stop and archive operation
- [ ] Allow the user to specify the channels to be archived. This includes both adding and removing channels from the list
- [ ] Only the owners of the Slack Team should be allowed to archive messages
- [ ] For each channel to be archived periodically extract messages starting from the last message retrieved in the last extract and write them to a database
- [ ] Allow the user to copy and extracted channel to a file
- [ ] Archiving should be an automatic process. Unlike a Slack 'bot, no manual intervention should be required to start or stop and archive operation
## Bonus features
- [ ] Implement an API that allows an application to extract archived messages from the archive database
- [ ] Implement an API that allows an application to extract archived messages from the archive database
mcacciano
6 years ago