Stanley cao stopwatch

[stanley-cao]

Project Overview

This is a stopwatch app created for the Shopify Frontend Engineering technical challenge, this is my submission.

Technologies Used

1. HTML/CSS/JavaScript
2. React.JS
3. TypeScript
4. React Testing Library/Jest

Changes made

• Added functions to calculate time in milliseconds, seconds, minutes and hours with another function to properly format it for a stopwatch display.
• Added Rendering for stopwatch components (the clock, buttons and laps displays).
• Added button functionality for Stop, Start, Reset and Lap.
• Added CSS styling for the stopwatch using UI/UX design [principles.]

Preview

stopwatch_video.mov

Completed Tasks

• Implemented Stopwatch functionality (Stop, Start, Lap, Reset)
• Styled Stopwatch with UI/UX design principles
• Ensuring code was well-structured, documented and maintainable
• Tested code with written unit test
• Regularly committed changes to the branch, merged changes to the main and created pull request.

Running App

1. Download files to local machine
2. Navigate to source directory
3. Run npm install (assuming npm is already installed locally)
4. Run npm start to launch the app
5. Run npm test to run unit test