From 698ef1f1d498c6cd5aa573e179bdbd42c83549b9 Mon Sep 17 00:00:00 2001 From: jdmedlock Date: Sat, 13 Apr 2019 18:13:22 -0500 Subject: [PATCH 1/2] Feature: Add Countdown Timer app specification Add Countdown Timer app specification Resolves: N/a See also: N/a --- Projects/Countdown-Timer-App.md | 60 +++++++++++++++++++++++++++++++++ README.md | 1 + 2 files changed, 61 insertions(+) create mode 100644 Projects/Countdown-Timer-App.md diff --git a/Projects/Countdown-Timer-App.md b/Projects/Countdown-Timer-App.md new file mode 100644 index 00000000..4d3efc3b --- /dev/null +++ b/Projects/Countdown-Timer-App.md @@ -0,0 +1,60 @@ +# Countdown Timer + +**Tier:** 1-Beginner + +We all have important events we look forward to in life, birthdays, +anniversaries, and holidays to name a few. Wouldn't it be nice to have an app +that counts down the months, days, hours, minutes, and seconds to an event? +Countdown Timer is just that app! + +The objective of Countdown Timer is to provide a continuously decrementing +display of the he months, days, hours, minutes, and seconds to a user entered +event. + +### Constraints + +- 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. + +## 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. + +## 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. + +## Useful links and resources + +- Images of analog tube-based countdown timers can be found +[here](https://nixieshop.com/) +- [`clearInterval` MDN](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval) +- [`setInterval` MDN](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval) +- [Date MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) + +## Example projects + +[Simple Clock/Countdown Timer](https://codepen.io/karlo-stekovic/pen/OajKVK) diff --git a/README.md b/README.md index 3c2ce729..208e7c20 100644 --- a/README.md +++ b/README.md @@ -45,6 +45,7 @@ required to complete them. | [Christmas Lights](./Projects/Christmas-Lights-App.md) | Simulate a string of Christmas lights | 1-Beginner | | [Cause Effect App](./Projects/Cause-Effect-App.md) | Click list item to display item details | 1-Beginner | | [Color Cycle](./Projects/Color-Cycle-App.md) | Cycle a color value through incremental changes | 1-Beginner | +| [Countdown Timer](./Projects/Countdown-Timer-App.md) | Event Countdown timer | 1-Beginner | | [CSV2JSON App](./Projects/CSV2JSON-App.md) | CSV to JSON converter | 1-Beginner | | [Flip Image](./Projects/Flip-Image-App.md) | Change the orientation of images across two axes | 1-Beginner | | [JSON2CSV App](./Projects/JSON2CSV-App.md) | JSON to CSV converter | 1-Beginner | From a1cbcd55cb7869bdd4fd7580a346a345a412c30c Mon Sep 17 00:00:00 2001 From: jdmedlock Date: Sat, 13 Apr 2019 18:15:33 -0500 Subject: [PATCH 2/2] Fix: Add star icon to Countdown Timer app entry Add star icon to Countdown Timer app entry Resolves: N/a See also: N/a --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 208e7c20..9524aa68 100644 --- a/README.md +++ b/README.md @@ -45,7 +45,7 @@ required to complete them. | [Christmas Lights](./Projects/Christmas-Lights-App.md) | Simulate a string of Christmas lights | 1-Beginner | | [Cause Effect App](./Projects/Cause-Effect-App.md) | Click list item to display item details | 1-Beginner | | [Color Cycle](./Projects/Color-Cycle-App.md) | Cycle a color value through incremental changes | 1-Beginner | -| [Countdown Timer](./Projects/Countdown-Timer-App.md) | Event Countdown timer | 1-Beginner | +| [🌟Countdown Timer](./Projects/Countdown-Timer-App.md) | Event Countdown timer | 1-Beginner | | [CSV2JSON App](./Projects/CSV2JSON-App.md) | CSV to JSON converter | 1-Beginner | | [Flip Image](./Projects/Flip-Image-App.md) | Change the orientation of images across two axes | 1-Beginner | | [JSON2CSV App](./Projects/JSON2CSV-App.md) | JSON to CSV converter | 1-Beginner |