Build a Dynamic React JS Interactive Simple Interactive Calculator

Written by

javascriptfundamentals

in

In the digital age, calculators are ubiquitous. From simple arithmetic to complex scientific calculations, they’re essential tools. But what if you could build your own, tailored to your specific needs? This tutorial will guide you through creating a dynamic, interactive calculator using React JS, a popular JavaScript library for building user interfaces. Whether you’re a beginner or have some experience with React, this guide will provide a clear, step-by-step approach to building a functional and engaging calculator.

Why Build a Calculator with React?

React offers several advantages for building interactive web applications like calculators:

  • Component-Based Architecture: React allows you to break down your calculator into reusable components (buttons, display, etc.), making your code organized and maintainable.
  • Virtual DOM: React’s virtual DOM efficiently updates the user interface, ensuring a smooth and responsive experience.
  • Declarative Programming: You describe what the UI should look like, and React handles the updates when the data changes.
  • Large Community and Ecosystem: React has a vast community, offering ample resources, libraries, and support.

By building a calculator with React, you’ll gain practical experience with these core concepts while creating a useful tool.

Prerequisites

Before you begin, make sure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing JavaScript packages and running React applications.
  • A code editor: Visual Studio Code, Sublime Text, or any editor you prefer.
  • Basic understanding of HTML, CSS, and JavaScript: Familiarity with these technologies will make it easier to follow along.

Setting Up Your React Project

Let’s start by creating a new React project using Create React App, a popular tool for bootstrapping React applications. Open your terminal and run the following command:

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

This command creates a new directory named “react-calculator,” installs the necessary dependencies, and sets up a basic React application. Now, navigate to the project directory using the “cd” command.

Project Structure Overview

Before diving into the code, let’s understand the project structure created by Create React App:

  • src/: This directory contains the source code for your application.
  • src/App.js: The main component of your application, where you’ll build your calculator’s structure.
  • src/App.css: Styles for your application.
  • src/index.js: The entry point of your application.
  • public/: Contains static assets like HTML and images.

Building the Calculator Components

We’ll break down the calculator into smaller, reusable components:

  • Display: Shows the current input and the result.
  • Button: Represents each button on the calculator.
  • Button Panel: Contains all the buttons, organized in rows and columns.
  • Calculator: The main component that brings everything together.

1. Creating the Display Component

Create a new file named src/components/Display.js and add the following code:

import React from 'react';

function Display({ value }) {
  return (
    <div>
      {value}
    </div>
  );
}

export default Display;

This simple component receives a “value” prop and displays it within a div with the class “display.” We’ll style this in our CSS later.

2. Creating the Button Component

Create a new file named src/components/Button.js and add the following code:

import React from 'react';

function Button({ name, clickHandler }) {
  return (
    <button> clickHandler(name)}>
      {name}
    </button>
  );
}

export default Button;

This component takes two props: “name” (the button’s label) and “clickHandler” (a function to handle button clicks). When a button is clicked, it calls the “clickHandler” function, passing the button’s name as an argument.

3. Creating the Button Panel Component

Create a new file named src/components/ButtonPanel.js and add the following code:

import React from 'react';
import Button from './Button';

function ButtonPanel({ clickHandler }) {
  return (
    <div>
      <div>
        <Button name="AC" />
        <Button name="+/-" />
        <Button name="%" />
        <Button name="/" />
      </div>
      <div>
        <Button name="7" />
        <Button name="8" />
        <Button name="9" />
        <Button name="*" />
      </div>
      <div>
        <Button name="4" />
        <Button name="5" />
        <Button name="6" />
        <Button name="-" />
      </div>
      <div>
        <Button name="1" />
        <Button name="2" />
        <Button name="3" />
        <Button name="+" />
      </div>
      <div>
        <Button name="0" />
        <Button name="." />
        <Button name="=" />
      </div>
    </div>
  );
}

export default ButtonPanel;

This component arranges the buttons in rows and columns. It imports the Button component and passes the “clickHandler” prop down to each button.

4. Creating the Calculator Component

Modify src/App.js to include the following code:

import React, { useState } from 'react';
import './App.css';
import Display from './components/Display';
import ButtonPanel from './components/ButtonPanel';
import calculate from './logic/calculate'; // Import the calculate function

function App() {
  const [total, setTotal] = useState(null);
  const [next, setNext] = useState(null);
  const [operation, setOperation] = useState(null);

  const handleClick = (buttonName) => {
    const calculationResult = calculate(
      { total, next, operation },
      buttonName
    );
    setTotal(calculationResult.total);
    setNext(calculationResult.next);
    setOperation(calculationResult.operation);
  };

  return (
    <div>
      
      
    </div>
  );
}

export default App;

This is the main component that brings everything together. It imports the Display and ButtonPanel components. It also imports a `calculate` function (we’ll create this logic file shortly). It uses the `useState` hook to manage the calculator’s state: total, next, and operation. The `handleClick` function is passed to the ButtonPanel and handles button clicks by calling the `calculate` function and updating the state. The Display component then shows the current value (either ‘next’ or ‘total’).

Adding Styles (CSS)

Open src/App.css and add the following CSS styles. These styles are provided as a basic example and can be customized to your liking. Feel free to experiment with different colors, fonts, and layouts.


.calculator {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  margin: 20px auto;
}

.display {
  background-color: #f0f0f0;
  padding: 10px;
  text-align: right;
  font-size: 24px;
  font-family: Arial, sans-serif;
}

.button-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.row {
  display: flex;
}

.button {
  border: 1px solid #ccc;
  padding: 15px;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
  background-color: #fff;
  transition: background-color 0.2s ease;
}

.button:hover {
  background-color: #eee;
}

.button:active {
  background-color: #ddd;
}

.button:nth-child(4n) {
  background-color: #f0f0f0;
}

.button:nth-child(4n+4) {
  background-color: #f0f0f0;
}

.button:nth-child(17) {
  grid-column: span 2;
}

Implementing the Calculation Logic

Create a new directory named src/logic and inside it, create a file named calculate.js. This file will contain the core logic for performing calculations.


import operate from './operate';

function isNumber(item) {
  return /[0-9]+/.test(item);
}

function calculate(obj, buttonName) {
  if (buttonName === 'AC') {
    return { total: null, next: null, operation: null };
  }

  if (isNumber(buttonName)) {
    if (obj.operation) {
      if (obj.next) {
        return { ...obj, next: obj.next + buttonName };
      }
      return { ...obj, next: buttonName };
    }
    if (obj.next) {
      return {
        total: null,
        next: obj.next === '0' ? buttonName : obj.next + buttonName,
        operation: null,
      };
    }
    return {
      total: null,
      next: buttonName,
      operation: null,
    };
  }

  if (buttonName === '+/-') {
    if (obj.next) {
      return { ...obj, next: (-1 * parseFloat(obj.next)).toString() };
    }
    if (obj.total) {
      return { ...obj, total: (-1 * parseFloat(obj.total)).toString() };
    }
    return {};
  }

  if (buttonName === '%') {
    if (obj.next && obj.total) {
      const [result] = operate(obj.total, obj.next, buttonName);
      return { total: result, next: null, operation: null };
    }
    return {};
  }

  if (buttonName === '=') {
    if (obj.operation && obj.next) {
      const [result] = operate(obj.total, obj.next, obj.operation);
      return { total: result, next: null, operation: null };
    }
    return {};
  }

  if (['+', '-', '*', '/'].includes(buttonName)) {
    if (obj.operation) {
      const [result] = operate(obj.total, obj.next, obj.operation);
      return { total: result, next: null, operation: buttonName };
    }
    if (!obj.total && obj.next) {
      return { total: obj.next, next: null, operation: buttonName };
    }
    return { total: obj.total, next: null, operation: buttonName };
  }

  return { ...obj };
}

export default calculate;

This function handles the logic for different button clicks. It takes the current state (total, next, and operation) and the button name as input and returns the updated state. It includes logic for clearing (AC), number input, changing the sign (+/-), percentage (%), equals (=), and the arithmetic operations (+, -, *, /). It uses an `operate` function, which we will define next.

Also, inside the src/logic folder, create a new file named operate.js:


function operate(numberOne, numberTwo, operation) {
  const num1 = parseFloat(numberOne);
  const num2 = parseFloat(numberTwo);
  if (operation === '+') {
    return [(num1 + num2).toString()];
  }
  if (operation === '-') {
    return [(num1 - num2).toString()];
  }
  if (operation === '*') {
    return [(num1 * num2).toString()];
  }
  if (operation === '/') {
    if (num2 === 0) {
      return ["Error"];
    }
    return [(num1 / num2).toString()];
  }
  if (operation === '%') {
    return [((num2 / 100) * num1).toString()];
  }
  return [null];
}

export default operate;

This function performs the actual arithmetic operations based on the operator provided.

Running Your Calculator

Now that you’ve built the components and logic, it’s time to run your calculator. In your terminal, make sure you’re in the “react-calculator” directory and run the following command:

npm start

This command starts the development server, and your calculator should open in your web browser (usually at http://localhost:3000). You should now be able to interact with your calculator, enter numbers, perform calculations, and see the results displayed.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to avoid them:

  • Incorrect Component Imports: Double-check that you’re importing components correctly. Use the correct file paths. For example, import Display from './components/Display';
  • Missing Event Handlers: Ensure that your buttons have the correct onClick event handlers and that they are calling the appropriate functions.
  • State Management Issues: Carefully manage the state (total, next, operation) in your Calculator component. Make sure your handleClick function correctly updates the state based on button clicks.
  • CSS Conflicts: Be mindful of CSS specificity. If your styles aren’t being applied, check for any conflicting CSS rules. You can use your browser’s developer tools to inspect the styles applied to your elements.
  • Logic Errors: Thoroughly test your calculator with various inputs and operations. Debug your calculate and operate functions to identify and fix any logic errors. Use `console.log()` statements to check variable values during calculations.

Key Takeaways and Best Practices

Building this calculator provides a solid foundation in React development. Here’s a summary of the key takeaways and some best practices:

  • Component-Based Design: Break down your UI into reusable components. This makes your code more organized and easier to maintain.
  • State Management: Use the useState hook to manage component state. Understand how state changes trigger re-renders.
  • Event Handling: Learn how to handle user interactions (button clicks, input changes, etc.) using event handlers.
  • Props: Pass data between components using props.
  • CSS Styling: Use CSS to style your components and create a visually appealing user interface. Consider using a CSS framework like Bootstrap or Tailwind CSS for more advanced styling.
  • Testing: Write tests to ensure your calculator functions correctly.
  • Error Handling: Implement error handling (e.g., division by zero) to make your calculator more robust.
  • Code Comments: Add comments to your code to explain complex logic and make it easier for others (and yourself) to understand.
  • Refactoring: As your application grows, refactor your code to improve readability and maintainability.

FAQ

Here are some frequently asked questions about building a calculator in React:

  1. How can I add more advanced features like memory functions (M+, M-, MR)?

    You can add memory functions by introducing additional state variables to store the memory value. You’ll also need to add new button components and update the calculate function to handle the memory operations.

  2. How do I handle decimal numbers?

    Modify the calculate and operate functions to handle decimal points. You’ll need to allow the user to input the decimal point (‘.’) and ensure that it’s handled correctly in calculations.

  3. How can I make my calculator responsive?

    Use CSS media queries to adjust the layout and styling of your calculator for different screen sizes. Consider using a CSS framework with built-in responsiveness features.

  4. How do I deploy my calculator to the web?

    You can deploy your React calculator to platforms like Netlify, Vercel, or GitHub Pages. These platforms provide simple ways to build and deploy your React application.

  5. Can I use a CSS framework?

    Yes! Using a CSS framework like Bootstrap or Tailwind CSS is a great way to speed up the styling process and create a more polished look. Install the framework using npm or yarn, and then import the necessary CSS files into your App.css file.

Building this interactive calculator is a significant step in learning React. You’ve learned about component structure, state management, event handling, and basic arithmetic operations. With the knowledge you’ve gained, you can now expand your skills by adding more features or experimenting with different UI designs. Remember to practice, experiment, and continue learning to become proficient in React development. The principles of modular design and state management you’ve used here are foundational to building any React application. This calculator provides a solid base for future projects, encouraging you to explore the possibilities of web development with this powerful library. Keep building, keep learning, and keep exploring the amazing world of React!

More posts