Project 1 - Fitness Journal: Interface Description and Component Functionality

The header component consists of the title of the page, Madi's Fitness Journal, the amount of days since start, the number of days active, and the current date and time. Each new day, the days since start increments accordingly. Upon submission of data, the number of days active updates. Upon load and refresh of the page, the current date and time updates. 

Header Component Images

General fitness data heading, displaying title, days since start, days active, and current date and time.

The subheader component contains the title of the top and bottom sections of the page. Its name is passed in based upon the corresponding name of the section.

Subheader Component Images

First section subheader, titled DAILY TRACKING to correspond with the Workout, Water, and Step Logs.

The row component contains a flex display CSS class that allows the components to be placed within rows. A slot is placed within the row component definition to allow components to be inserted within the row, therefore creating the setup seen.

Row Component Code Snippet

The Workout Log component allows the user to input and submit a daily workout. The different aspects of the component are defined below:

Overall Image of Component 

Workout Type and Duration

For every workout, a type and duration must be selected before the workout can be submitted. The workout types are displayed in checkbox form, and only one checkbox can be selected at a time. The workout duration is defined as a number, with both a number insertion box and slider to update or change the value. If both or one of these values is not inserted, upon clicking the Submit Workout button, a pop-up will occur alerting the user to ensure these values are entered. 

Workout type set the Yoga / Pilates and Duration in Minutes set to 60.

Pop-up occurs due to unset Duration value. The same pop-up will occur if the type is not set, or if both the type and duration are not set.

Workout Distance

When the Workout Type field is Running, Biking, Swimming, Hiking, or Walking, an additional input labeled Distance in Miles is included. The workout distance is defined as a number, with both a number insertion box and slider to update or change the value. If any other workout type is selected, the distance input will disappear. 

When the workout type Running is selected, the Distance in Miles input appears. The same will occur when Biking, Swimming, Hiking, or Walking is selected. Otherwise, this input option will not appear or will disappear. 

Workout Lift

When the Workout Type field is set to Weight Lifting, an additional set of inputs with insertion for the exercise name, number of sets, and weight is included. The exercise name is a text field, while sets and weight are defined as a number, with both a number insertion box and slider to update or change the value. Upon inserting the exercise name, sets, and weight, the Add button can be clicked. This will then clear the values and allow for insertion of another lift. This can be done as many times as needed for the user.

When the workout type Lifting is selected, the additional set of inputs including exercise, sets, and weight appears. The values can be inserted by the user, and then the Add button can be clicked to save the exercise, which resets the input values. This process can be completed as many times as needed.

Customize Workout

To add more Workout Types to the main page, the Customize Workouts button can be selected. This will take the user to an Edit Workout page, which in return has more checkbox workout types available to select. The user can select or deselect any checkboxes needed, and then click Submit Customization to save their input. If the user wants to cancel, and return to the main page of the Workout Log, they can hit the Cancel button. 

The Customize Workouts button is located to the right of the Workout Type header, and upon clicking will open the Edit Workout page shown below.

After clicking the Customize Workouts button, the Edit Workout Types screen appears. In this example, Yoga / Pilates has been unselected, as it initially appears on the screen. Walking and Sports, which are not default workout types, are selected. If the user wants to save their preferences, they click Submit Customization. Otherwise, Cancel can be clicked to undo their changes. 

After clicking the Submit Customization button shown in the image above, the customizations are saved within the Workout Type field. Yoga / Pilates has been removed as an option, and Walking and Sports have been added as Workout Type options. 

Submit Workout

Once the workout data has been input (at minimum a Workout Type and Duration), the workout can be submitted by clicking the Submit Workout button. After clicking the button, the component will show a summary of the workout, including any input data. If the data needs changed, the user can then click Re-enter Workout, which removes the past data and allows new data to be input.

The Submit Workout button in the bottom right of the Workout Log component. 

The Water Log component allows the user to input and submit their daily intake of water in mL. The water input is defined as a number, with both a number insertion box and slider to update or change the value. Upon changing the number box or slider, the water input will be recorded, and a message outputs within the component. To change the value, the number box or slider can be utilized again.

Water Log Component Images

Overall image of the Water Log component upon load of the page.

The Step Log component allows the user to input and submit their daily steps. The step input is defined as a number, with both a number insertion box and slider to update or change the value. Upon changing the number box or slider, the step input will be recorded, and a message outputs within the component. To change the value, the number box or slider can be utilized again.

Step Log Component Images

Overall image of the Step Log component upon load of the page.

The Current Goals component allows the user to view and add goals. The goals are tracked as a running total against all entries, and expressed as a percentage. The different aspects of the component are defined below: 

Overall Image of Component

Upon load, a step goal of 100,000 total steps is displayed.

Add Goal

By clicking the Add Goal button on the main page of the component, new goals can be added or current goals can be updated. To add a goal, the Goal Type must be selected, which pertains to either Workout, Water, or Steps. The Water and Step goals are inserted after selecting the corresponding type in a number box format. If the Goal Type is Workout, the Goal Type is filtered further to select a Distance or Duration goal. The Distance and Duration goals are submitted in a number box format. After inputting the goal data, Submit Goal can be clicked to display the goals within the component. Cancel can be hit at any time to exit the Add Goal section and remove any changes. 

Component display after clicking the Add Goal button, displaying a dropdown to select a Goal Type.

When a Goal Type of Water is selected, an number input appears to enter the goal amount of water. The same occurs for entering a goal amount of steps when a Goal Type of Steps is selected.

When a Goal Type of Workout is selected, an additional Goal Type dropdown is specified for either Distance or Duration. Upon selecting Distance or Duration, a number input appears to enter the goal amount such as with Water and Steps shown in the above image.

After inserting a Water goal of 1,000,000 and clicking Submit Goal, the new Water goal appears on the main page of the component.

Refresh Goals

By clicking the Refresh Goals button on the main page of the component, the goals will be refreshed based upon input data in the session. This button must be clicked to load changes, as the page will not dynamically update totals.

The Tracking Stats component allows the user to view a line graph representation of their workout durations and step counts. By clicking the Refresh Graphs button on the main page of the component, the graphs will be refreshed based upon input data in the session. This button must be clicked to load changes, as the page will not dynamically update totals.

Tracking Stats Component Images

Component upon load.

Workout Durations graph upon load.

Step Count graph upon load.

The Past Workouts component allows the user to view and edit all past workouts. The different aspects of the component are defined below: 

Overall Image of Component

Past Workouts upon load, displaying the oldest saved workout information.

Next Workout

Upon clicking the Next Workout button at the bottom of the main page of the component, the next workout according to date will display. If a workout is input during the session, it will display as the final workout. Upon clicking Next Workout at the final workout, the first workout will appear and the list of workouts can be cycled through again.

After clicking Next Workout, a different workout appears than the first that appears upon load, with the corresponding date and data.

Edit Workout

Upon clicking the Edit Workout button at the top of the main page of the component, the workout becomes editable for the user. Any elements of the workout can be edited, and upon clicking Submit Changes, the workout is updated. By hitting Cancel, any changes made are removed and the component returns to the non-editable page.

After clicking Edit Workout on the workout in the above image, the workout appears in an editable format. The Workout Type has been changed to Swimming, and the Distance has been changed to 2. The Duration has not been changed, and is prefilled with 10 as this is what the data currently holds.