All solutions

Would love feedback on any aspect of the solution, especially the code.

I had issues with the font, as the stated font seems to have changed even over at Google. Perhaps the challenge could be updated?

Focus was not on pixel-perfection this time, but rather on testing and the overall code.

• React app written in TypeScript using React
• Class components and Redux with old (legacy) syntax
• API call via Axios, dispatched through Thunk
• React Router to create a single-page-app
• Testing done using Jest and React-Testing-Library
• API call mocked with Mock Service Worker
• CSS Grid auto-fit for minimalistic responsive styling

Second submission.

Improved SASS by using lists for themes. Improved calculator code.

Improved upon my previous solution by using grid.

Loosely used BEM naming convention and the WordPress coding style guide for CSS.

Flex is for card content, Grid is for laying out the cards.

Grid makes markup shorter and simpler. Easier to avoid having container divs for rows/columns compared to using flexbox.

When looking at the CSS, the layout is much easier to understand with Grid, especially with grid-areas in the desktop version.

With grid auto-fit, I was able to have a decent laptop layout as well, without having to specifically develop it, or have a separate breakpoint / file for it.

Figma file is not from FEM but my own work. Makes pixel perfect development easier when you've mapped out the layout first.

Still need to learn box-shadow better.

Some inconsistencies in design required hard coded values to implement accurately.

Maybe inset shadow is a better option for cards rather than border-top.

Will need to get more friendly with box-shadow and learn to deduce it visually.

Loosely utilized BEM naming convention.