Stopwatch-EngInternAssessmentSubmission

[lnmurthy]

The What:

Stopwatch Application
An app that allows users to start, stop (pause), lap, and reset a stopwatch.

The Why:

The changes are useful for user experience and complete the stopwatch creation. The changes allow users to start, stop, lap, and reset the stopwatch. This could come in handy when the user is completing a task or generally trying to keep the time.

How:

Utilization of:

1. App.tsx
2. StopWatch.tsx
3. StopWatchButton.tsx

App.tsx:

• functionality for starting, stopping, keeping track of elapsed time, and resetting the stopwatch.
• rendered each component using and individual component controls like
• utilized hooks (useEffect()) to handle when the stopwatch needs to clear, lap, increment time, or pause.
  - also the interval updates the lapTime state every second directly
  - unlike stopwatch.tsx, app.tsx relies solely on lap time

StopWatch.tsx:

• withholds the stopwatch display
• calculates the elapsed time value and displays it
• utilized hooks (useEffect()) to handle interval updates based off of isRunning of lastUpdateTime which are state variables

StopWatchButton.tsx:

• represents the start, stop, reset buttons
• start+stop buttons are toggled, so when one is running the other is not shown
• utilized react components to withhold each button and css for design

Testing:

Tested using Android Studio and an Emulator Pixel 5 and tested each functionality based on the given project goal description:
- The stopwatch should start counting when the user clicks the start button.
- The stopwatch should stop counting when the user clicks the stop button.
- The stopwatch should reset to zero when the user clicks the reset button.
- The stopwatch should record and display laps when user clicks the lap button.

I can confirm each project goal has been met.

Screenshots:

Stopwatch Incrementing:

Stopwatch Reset:

Stopwatch Lap:

[lnmurthy]

Final Submission - LeishaM