Shopify Frontend Intern Assessment | StopWatch Implementation

[gdcho]

Stopwatch Functionality 🧑‍🔧:

• 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.

Test 🧪:

File Structure 🗂️:

├── README.md
├── babel.config.js
├── dist
│   ├── app.bundle.js
│   ├── app.bundle.js.LICENSE.txt
│   └── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│   └── index.html
├── src
│   ├── App.tsx
│   ├── StopWatch.tsx
│   ├── StopWatchButton.tsx
│   ├── __tests__
│   ├── index.tsx
│   └── styles
├── tailwind.config.js
├── tsconfig.json
├── webpack.common.js
├── webpack.dev.js
└── webpack.prod.js

Components 💿:

• src/App.tsx - Sets up and manages the shared component state across the application, also responsible for the primary logic of the stopwatch.
• src/Stopwatch.tsx - Manages the display of elapsed time, buttons, and lap records, as well as the logic associated with these buttons.
• src/StopwatchButton.tsx - Responsible for the presentation and visibility of buttons.