Calculator using react-hook-form and vanilla-extract
Design comparison
Solution retrospective
I'm pretty happy with this one. There were a lot of subtle challenges here to make sure it was fully responsive and accessible.
It was my first time building a purpose built design system for a project, and that's something that I hope to re-use.
It might seem like using React and so many re-usable components was a bit overkill. However, I think it was great to be able to concentrate on building out a good design-system api without having massive scope.
Community feedback
- @molszewski34Posted about 3 years ago
I checked it on chrome, firefox and opera. This bug appears only on firefox. When i reset, the default option is 15%. If i change to some "reset button" stops to be disabled, but when i go back to 15% even with number put into, button starts to be disabled again. https://freeimage.host/i/zrzut-ekranu-z-2021-11-09-o-100015.5Gkw1j
Works fine on other platforms. I am just curious why this bug happens and mb i will learn how to avoid it.
Marked as helpful0@AlexKMarshallPosted about 3 years ago@molszewski34 Thanks very much for your detailed reproduction steps. You're correct, it does indeed stop working in that situation. That is very strange, I'll see if I can figure out why.
Usually browser differences cause problems with CSS, not with javascript, so this is pretty unexpected.
0 - @molszewski34Posted about 3 years ago
Did you tried on some other device, mb smartphone?
Marked as helpful0@AlexKMarshallPosted about 3 years ago@molszewski34 Yeah works for me across Chrome, Firefox, Safari, on Windows and Mac, and on Android Pixel.
I don't have access to an iPhone to test there, or a lower-end smartphone. But unless React is completely hanging, there's no code that would behave differently after the reset, it all flows through the same path.
Interestingly, checking in Safari did reveal a styling bug, so I'm guessing I must've used some properties that aren't supported there. I'm not going to dig in to fixing that now, but in future may look at setting up a test env on BrowserStack to check cross-platform compatibility.
0 - @molszewski34Posted about 3 years ago
Tip amount and total stops to show output after usage of reset button.
Marked as helpful0@AlexKMarshallPosted about 3 years ago@molszewski34 thanks very much for checking it out. I'm unable to reproduce the bug though. After resetting it seems to calculate ok for me each time once all the fields are filled in
0 - @molszewski34Posted about 3 years ago
No problem. Finding bugs and trying to figure when and how they happend is also some way of better understanding a code for me. So if you post solution of problem it is also some benefit for me :)
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord