Skip to content

Latest commit

 

History

History
56 lines (41 loc) · 2.5 KB

Development-and-Design.md

File metadata and controls

56 lines (41 loc) · 2.5 KB

Design Process

Landing Page

  1. White Background.
  2. In the center/top-center, have a large outline of a circle in black. Inside the cirlce should be readable sized text that reads "Start", "Go", "Begin" in Black text -> extra feature idea!
  3. Underneath the Start button, include a "Go" phase, which will be a scrollable value. Black Text.
  4. Underneath the "Go" phase selector, place a "Rest" phase selector, scrollable value. Black Text.
  5. If extra features are implemented, then add a gear at the top right of the app to signify the settings.

EXTRA FEATURES:

  1. Allows users to set their own Start button saying and Stop button saying. OR
  2. Create a selection of Start/Stop button phrases, and make the app randomly choose the saying everytime.

Once Finished, Submit Pull

Trasnsition/Timer started page

  1. Preferably stay on the same page. a. Once the user has pressed their start button, the circle will slide upwards and shrink. The start saying in the circle will shrink and change to "Stop", "Pause", etc. b. The screen will go green, with the timer running with a readable, white text. -> Go Phase c. ONCE the timer has hit the end of the Go Phase, and starts the rest phase, The screen will go red, with the timer runing with a readable, white text. -> Rest Phase

    EXTRA FEATURES:

    1. Allows users to change the color of their Start and Stop phase background.

    2. Have cartoonish (or normal) text sayings float from the bottom to the top of the app during each phase. in example, go phase will have many "GO!" sayings floating up from the bottom to the top. Same idea with the Rest phase. a. Allow users to turn floating text off.

EXTRA FEATURES Settings Page

  1. add all extra features mentioned above on to a settings page. This page should be able to be accessed from the landing page.

Development Process

(Look to design process for details on how it should look)

Simple Timer Build

  1. Create landing page.
  2. Create transition to timing -> new page, OR preferably same page.
  3. Connect "Go" button from landing page to the transition page. Begin the timer with this button. Stop the timer with the availabe "Stop" or "Pause" button.

*** Once complete and stable, submit a pull ***

Feature Addition

  1. Connect the Go/Rest phases to the timer (The selectors on the landing page). Change background color according to the phase.
  2. Create settings page and connect the settings to their proper attributes.