Day 4: Advanced React Calculator

12 Days of React Project Series

Introduction

Welcome to Day 4 of my 12 Days of React Project Series! In this series, we are building 12 small but practical React projects to strengthen our skills step by step. On Day 4, we focus on creating an Advanced React Calculator.

This calculator supports basic arithmetic operations like addition, subtraction, multiplication, and division, as well as advanced scientific functions including sine, cosine, tangent, square root, power, and percentage calculations. The app also features a dark/light mode toggle, a responsive design for desktop and mobile devices, and a modern, visually appealing background. The final project is deployed live on GitHub Pages, so anyone can access it directly from their browser.

The goal of this project is to combine React fundamentals, advanced function handling, responsive UI, and deployment skills into one practical project.

Project Setup

To start, create a new React project using the create-react-app tool. Open your terminal and run:

npx create-react-app calculator-app
cd calculator-app

Next, install gh-pages for deploying the app to GitHub Pages:

npm install --save-dev gh-pages

This package allows us to push the production build of our React app to GitHub Pages, making it publicly accessible online.

Project Structure

The main files for this project are App.js, which contains the calculator logic and user interface, and App.css, which handles styling. The assets folder holds the background image for the app. The structure is simple and beginner-friendly, making it easy to follow.

The design emphasizes modern aesthetics, responsive layout, and advanced functionality, making this project a perfect fit for Day 4 of the series.

Design Concept

The calculator features a rectangular layout on desktop, with buttons arranged in a neat grid. On mobile devices, the layout adjusts automatically. The calculator sits on a semi-transparent container over a background image, which adds a modern touch without compromising readability.

The dark/light mode toggle allows users to switch themes based on their preference or lighting conditions. This ensures usability in all environments. Advanced scientific functions like sin, cos, tan, √, ^, and % make the calculator not only functional but also professional-grade.

Get Sidra Gillani’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

App.js Explained with Screenshots

The App.js file is the heart of the calculator. It manages the input state, handles button clicks, calculates results, and controls the theme toggle.

import React, { useState } from "react";
import "./App.css";

function App() {
  const [input, setInput] = useState("");
  const [theme, setTheme] = useState("dark");

We use useState to manage the calculator input and theme state. The handleClick, handleClear, and handleDelete functions handle basic interactions:

const handleClick = (value) => setInput(prev => prev + value);
  const handleClear = () => setInput("");
  const handleDelete = () => setInput(input.slice(0, -1));

The handleEqual function evaluates the input expression, converting advanced operations into JavaScript equivalents:

const handleEqual = () => {
    try {
      let expression = input
        .replace(/sin/g, "Math.sin")
        .replace(/cos/g, "Math.cos")
        .replace(/tan/g, "Math.tan")
        .replace(/√/g, "Math.sqrt")
        .replace(/\^/g, "**")
        .replace(/%/g, "*0.01");
      setInput(eval(expression).toString());
    } catch {
      setInput("Error");
    }
  };

The toggleTheme function switches the theme between dark and light modes:

const toggleTheme = () => setTheme(theme === "dark" ? "light" : "dark");

All buttons are stored in an array, and their functionality is controlled dynamically:

const buttons = [
    "C", "DEL", "%", "/", "7", "8", "9", "*", 
    "4", "5", "6", "-", "1", "2", "3", "+", 
    "0", ".", "=", "^", "sin", "cos", "tan", "√"
  ];

const handleButtonClick = (btn) => {
    if (btn === "C") handleClear();
    else if (btn === "DEL") handleDelete();
    else if (btn === "=") handleEqual();
    else handleClick(btn);
  };

Finally, we render the calculator with a display, theme toggle, and buttons grid:

return (
    <div className={`app ${theme}`}>
      <div className="calculator">
        <h1>Advanced React Calculator</h1>
        <p>Perform basic and scientific calculations with ease. Toggle between dark and light mode, and enjoy a sleek, responsive design for desktop and mobile.</p>
        <div className="display">{input || "0"}</div>
        <div className="theme-toggle">
          <button onClick={toggleTheme}>
            {theme === "dark" ? "Light Mode" : "Dark Mode"}
          </button>
        </div>
        <div className="buttons">
          {buttons.map((btn, idx) => (
            <button
              key={idx}
              className={
                btn === "=" ? "equal" :
                btn.match(/[+\-*/^%]/) ? "operator" :
                btn.match(/sin|cos|tan|√/) ? "function" : ""
              }
              onClick={() => handleButtonClick(btn)}
            >
              {btn}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
}

The CSS ensures the calculator is visually appealing and fully responsive. The .app class sets the background image and centers the calculator. The .calculator class controls the width, height, padding, and border radius. A semi-transparent background ensures that the calculator content is readable over the image.

The .buttons class uses a grid layout to evenly space the buttons, while the display clearly shows the input and results. Operators, functions, and the equal button are color-coded for better visibility. Responsive media queries ensure the calculator looks perfect on both desktop and mobile devices.

Live Demo and GitHub Repository

You can interact with the live calculator here: Live Calculator

The full code is available on GitHub: GitHub Repository

Conclusion

This Day 4 project in the 12 Days of React Series allowed us to combine multiple React concepts into a single practical project. The Advanced React Calculator demonstrates state management, event handling, dynamic rendering, responsive design, and deployment.

With this project, you can explore further enhancements like keyboard input, memory buttons, additional scientific functions, and custom themes. It serves as a strong foundation for anyone looking to master React by building small, meaningful projects every day.