Stopwatch - Patrick Koss #360
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Added ESLint to the project to keep code style consistent - Set up a mix of the style that was already present + my own prefered linting styles - Linted the existing template files to match linting standards - Filled in metadata (title, author, etc) in package.json, and changed site title - Set type: modules, out of personal preference. Made changes to babel config to ensure it stayed in CommonJS format (mainly avoiding issues w/ babel and ESModules)
- Stopwatch works at its very core - Renamed webpack files to .cjs to prevent having to keep them in their CommonJS format - Adjusted ESLint rules slightly to better enforce style + fix order w/ the React Hooks rules
- Basic styling to make things look not-so-plain - Using a monospaced font to ensure stopwatch isn't constantly changing width (and therefore jittering around)
- Basic functionality for the lap button has been added. Will need to be styled and designed in such a way that it doesn't constantly shift the buttons upwards. - Added back the focus outline to the buttons, so they are now fully accessible by keyboard again.
- Added some CSS styling for the laps, as laps are now shown in their own box underneath the stopwatch. - In order to accomodate the laps box, changes to the main page layout had to be change (back-facing changes, no real front-facing changes) - Switched from flex to grid
- Added custom styles scrollbars for browsers that support webkit scrollbars. Browsers that don't (mainly Firefox and iOS Mobile) already have sleek-enough scrollbars. - Removed extra margin on the laps box that was causing a stray x-axis scrollbar to appear - Whats left at this point? Mainly unit testing and ensuring accessibility
- Removed some code that ended up being unused in the button component - Also changed the hover and active colors for buttons
- The stopwatch did not run in the background before due to setInterval() not being run when a tab is not focused in most browsers. Fixed this by keeping track of system time. - Added the first unit test, and installed a couple of packages to help with testing - Added a missing 'key' prop in the LapsBox to prevent re-render issues
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
A simple stopwatch with four simple functions: start, stop, reset, and laps.
I've gone ahead and added a few extra developer dependencies, mainly ESLint and a few to help with unit testing.
(It wasn't until near the very end that I realized my IDE had stopped giving me ESLint hints for some reason, so unfortunately a lot of the files later on are not entirely linted to the rules I have set up, ahaha.)
I decided to keep the layout and styling simple, but not overly boring either. Below are a few screenshots:
(Probably one of my favorite things about this stopwatch is the laps box, it's animations, and especially the chaser that becomes highlighted when you hover over a lap to help make the pair stand out easier).
This was a fun project to make, and even with the amount of experience I have in React already, I feel like I learned a lot (especially with Jest, something that is a bit newer to me!). It also gave me a few challenges, once again with Jest, but also with keeping the stopwatch running in the background, as
setIntervalwill not run in the background on most browsers. I was able to get around this though by usingDate.now()and constantly comparing it :)