A Calculator app with a 3-way theme toggle

What are you most proud of, and what would you do differently next time?

This project was fun and challenged me to develop an app with reusable code in mind.

A few things I learned and used in this project:

• Using CSS attribute selectors to set the color of the toggle switch. I have 3 input components that represent each theme, with values from 0 to 2, inclusive. By accessing an input using input[value=""], I was able to color that input according to the selected theme.
• Defining reusable colors using CSS variables. This allowed me to use the colors without writing repetitive hex-codes. I also made sure the names where identical across all themes so that I could define multiple themes regardless of hex value.
• Setting up multiple themes using the @layer directive. In my tailwind config file, I was able to use the CSS variables to define the background and text colours.

Tools used:

• React
• TailwindCSS
• CSS Grid & Flexbox

My development process

• Developed the desktop frontend
• Added functionality with useState.
• Added responsive design for mobile and tablet screen sizes
• Refactored components into separate files
• Refactored arbitrary CSS classes into custom TailwindCSS styles