This is the first pair projet we were assigned at Turing. It's an application that allows users to set goals for their health and productivity, tied to an amount of time. Users select an activity category, set the amount of time they want to spend on that activity and start the timer. The most challenging part of this project, aswell as the most exciting "win" for us, was getting the countdown timer to reflect the users input. We divided several of the tasks up to create most of the application's fuctionality and worked together to create the timer function itself.
-
Build the layout with HTML & CSS
-
Before moving on, the header and left side of the page should match the comp.
-
The right side of the page should only have the sub-header and not that no activities exist since you do not have past activity card functionality yet!
-
-
Form Functionality
-
When an activity category is clicked on (Exercise, Meditate, or Study), the associated border and icon should change colors to give a visual indication that it has been selected. Colors are provided in comp.
-
An input field should be provided for What would you like to accomplish during this time?, minutes and seconds. The minutes and seconds fields should only accept numbers. (Hint: more than one layer should probably be put into place to ensure this. Make sure that e cannot be accepted.)
-
A Start Activity button is provided to submit the data entered into the form. When the button is clicked, the user should no longer see the form, and instead see a timer clock. The timer clock should display the minutes a seconds, as well the and description. The category should not appear, but the outline of the circle should match the color associated with the category.
-
If the Start Activity button is clicked before the user has entered information into all four inputs, the user will receive an error message, but will not lose any information that was provided.
-
