Journal - 2021.08.31

Today is a good day: I've finished my second Frontend Mentor challenge! ✌️ You can see my solution here.

Today is a good day: I've finished my second Frontend Mentor challenge! ✌️ You can see my solution here: https://www.frontendmentor.io/solutions/react-js-using-css-modules-flex-and-grid-for-layout-5lF92zbph

Although a simple project, I'm fairly happy with the result. Live site here: https://arthurvmdantas.github.io/tip-calculator

The desktop layout of the tip calculator

The Process

More than 90% of the project was built in Codesandbox. In the end, however, I had a hard time with its GitHub integration (probably my fault) - I moved it to my local VS Code + WSL2.

As I'm currently learning React and TypeScript, I decided to use them here even though the challenge was fairly simple.

At first, I was putting all my styles in a global CSS file. It didn't take long to see the benefits of having scoped CSS so I spent some time moving parts of it to CSS Modules. This article [1] was of immense help.

Working with decimal numbers in Javascript was somewhat challenging. I had to convert it to string and back to number sometimes to avoid rounding errors. Maybe there's a better way (I hope so), but considering the size of this project, I thought it was OK.

I believe that I spent roughly 80% of the time building the last 20% of the project. The final touches are quite expensive. 😮

For hosting, I used the reliable GitHub Pages.

English is not my main language, but I'm trying to improve on it. If you find any errors, please let me know: @arthurvmdantas.

[1] - https://www.javascriptstuff.com/css-modules-by-example/