This is a solution to the Calculator app challenge on Frontend Mentor.
To build a calculator with features including:
- A three-way theme toggle button
- Perform arithmetic operations: addition, subtraction, multiplication, and division.
- Responsive design for mobile, tablet, and desktop screens
- Solution URL: github.com/semajthomasprimm/
- Live Site URL: Live Demo
- React - JS library
- TailwindCSS - For styling
- Flexbox
- CSS Grid
- Mobile-first workflow
This app has 3 different themes, so I immediately researched a tutorial for help with this. Thanks to the TailwindCSS YouTube channel, I was able learn how to define multiple themes.
Using CSS variables, I defined the theme in index.css and utilized the CSS variables in my Tailwind config file.
Naming the variables was difficult, I had to make sure that the class names I used in the React components weren't theme specific.
Combining the 3-way toggle, I way able to easily fix any lingering style mistakes.
A 3-way toggle requires 3 states to be monitored, as opposed to a regular 2-way toggle. After researching different approaches in vanilla JS and ReactJS, I declared a state variable using useState, which would contain a Boolean array of 3 values.
The index of each Boolean value refers to a specific theme. Default is 0, Day is 1, and Neon is 2.
The default theme is true initially. When the toggle is switched, the state variable updates the array and the selected theme is conditionally rendered.
- TailwindCSS Custom Themes Tutorial - This helped me with defining multiple themes using TailwindCSS and CSS variables. I really liked this pattern and will use it going forward.
- 3 way toggle CodePen example - This is a helpful vanilla JS approach to developing a 3-way toggle. I used it help model my ReactJS implementation.
- Website - Semaj Primm
- Frontend Mentor - @semajthomasprimm