semajthomasprimm/calculator-app

A responsive calculator that features a three-way theme toggle switch.

Frontend Mentor - Calculator app solution

This is a solution to the Calculator app challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• Author

Overview

The challenge

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

Screenshot

Default Theme

Desktop

Mobile

Day Theme

Desktop

Mobile

Neon Theme

Desktop

Mobile

Links

• Solution URL: github.com/semajthomasprimm/
• Live Site URL: Live Demo

My process

Built with

• React - JS library
• TailwindCSS - For styling
• Flexbox
• CSS Grid
• Mobile-first workflow

What I learned

How to define multiple themes with TailwindCSS

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.

Develop a 3-way toggle using React hooks

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.

Useful resources

• 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.

Author

• Website - Semaj Primm
• Frontend Mentor - @semajthomasprimm