Below is a summary of the apps functionality, requirements, design language, tech specifications and more to come. It is intended to be used as a guide while we are building this app. Please contribute by making suggestions, changes, corrections and improvements to this document as we go along. It may provide valuable when we eventually will need to write some documentation. Happy Coding 😄
Suggestion There are hundreds of simple and free to use timer apps out there already, so what cool ideas do you have that would give our time-collector a unique edge and make it fun and interesting to use?
- [ x ] Have a call to action = start to collect
- Describe the application and its features (see below: ### Landing Page )
- Easy access to documentation (see below: ### Landing Page )
- [ x ] Easy access to repository (see below: ### Landing Page )
- [ start to collect ] goes to the timer in (#guest-mode)
- [ register ] register a new user to the database
- [ log in ] logs an existing user into their profile which has the timer foremost and additional history/reports of saved times, and user preferences.
- Have a way for users to register with: name, email, pass word
- Have a way for users to register with: facebook, github, google.
- [ x ] Have a button that redirects to login
- [ x ] Have a back to landing page button
to do:
- Usee CSS to make page max height 100 % of vh
- Usee CSS to make primary contaier same width as in landing page to enhance continuity between pages
- Have a way for users to login
- [ x ] Have a button that redirects to register
- [ x ] Have a back to landing page button
- Have a way for users to retrieve forgotton password
to do:
- Usee CSS to make page max height 100 % of vh
- Usee CSS to make primary contaier same width as in landing page to enhance continuity between pages
- [ x ] Display today's date
- Have a counter
- Have a start, stop and reset button
- Have the possibility to add manual hours
- Be able to save time from counter to projects
- Be able to edit time collected from counter before saving to a project
- Option to see the expected time to use on the project
- Option to set a reminder to return to the app when expected time expires
- Have a way select project
- Display total used hours
- Display expected hour usage
- Have a way to edit hours
- Have a way to delete hours
- Have an option to export hours
- Have a way to select project
- Have a way to add new projects
- Have a way to edit project details
- Have a way to show / hide project details
- Have a way to set expected hours on a project
- Have a way to set project time frame via datepicker
- Make the timeframe exportable to other calendars like google etc.
- Show all archived projects in a list
- Have a way to revive a project
- Have a way to delete an archived project for good
- CSV
- Profile
- Preferences
- Dark theme
- Log out
Suggestion The landing page is clean/minimalist, which is really nice, however there could be more information added to this page, i.e., in desktop mode there is space to the left and right for, perhaps, a vertical bar of buttons or links. For example: link to the github repository, link to the ztm course, description of the app, documentation for the app, etc... Further, keep in mind that these sidebars would need to move down and center when in mobile mode.
The app currently has buttons for simple auth with email and password or option to sign in with google, facebook, github. These need to be made functional.
Users are able to use the app without signing in, simply by clicking the button: start to collect. This mode offers full functionality, except for the ability to store session data to the database.
Users should be able to add details about a project and the client.
- Project number
- Project name
- Client name
- Address
- Telephone number
There is a really nice menu in file called menu.html. This needs to be incorporated into the main document as a pop up/modal type of full page meny. Keep in mind that there are at least two states for this menu, signed in or not signed in. Suggestion: Make the width of this menu so that the log out button is the same wdith as it would be in the landing page, and then fade or dull the surrounding area to maintain a full page style.
At current the logo is a simple fontawesome icon: fa-clock. Suggestion: re-create the clock using either pure css or svg, which will enable us to animate the hands to let them spin slowly.
Please feel free to update this section with a schematic of colours used so far in normal theme and dark-theme.
Please feel free to update this section with a schematic of fonts used so far
The dark-theme is currently being built side-by-side to the original normal theme in its own folder. One drawback is that all changes should be done twice, one for each mode. One opportunity is that when bringing existing material over from normal theme, one can strip back and clean up all the excess files and data, since as you will notice their are many extra files and data in normal mode.
At current, the project has two seperate themes, normal and dark-theme. The diffence in themes is that each one has its own css file:
- normal = bootstrap.min and style.css
- dark-theme = bootstrap cdn and darkstyle.css Both themes still share the same resources for fonts and fontawesome icons.
made with 💚 by the boys and gals from zero-to-mastery