DEV Community

Cover image for React Calculator: Building Basic Arithmetic Operations with User-Friendly Interface
Kartik Budhraja
Kartik Budhraja

Posted on

16 1 1 1

React Calculator: Building Basic Arithmetic Operations with User-Friendly Interface

Introduction

In this article, we are going to make a calculator in react. This calculator allows users to perform basic arithmetic operations such as addition, subtraction, multiplication, and division. It features a clean and intuitive user interface with responsive buttons for numeric input, operators, and special functions like clear and backspace.

Step 1: Setting Up the Project

The project starts with a typical React setup. In the App.js file, the Calculator component is imported from the Calculator.jsx file. Additionally, a CSS file named Calculator.css is imported to style the calculator interface.

import Calculator from "./Calculator/Calculator";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <Calculator />
    </div>
  );
}

Enter fullscreen mode Exit fullscreen mode

Step 2: Building the Calculator Component

In the Calculator.jsx file, the Calculator functional component is defined. It utilizes React hooks, specifically the useState hook, to manage the calculator's state. The result variable holds the current input and output of the calculator.

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

const Calculator = () => {
  let [result, setResult] = useState("");
  // ... rest of the component code
};

Enter fullscreen mode Exit fullscreen mode

Step 3: Handling User Input

The handleClick function is defined to handle button clicks. It concatenates the clicked button's value to the result state. If the input exceeds a certain length (16 characters in this case), it displays a message and clears the input after a short delay.

const handleClick = (e) => {
  if (result.length >= 16) {
    setResult("!Large Input");
    setTimeout(() => {
      setResult("");
    }, 500);
    return;
  }
  // ... logic to handle button clicks
};

Enter fullscreen mode Exit fullscreen mode

Step 4: Performing Calculations

The calculate function evaluates the input using JavaScript's eval function. It handles errors gracefully and displays either the calculated result or an error message.

const calculate = () => {
  try {
    result = eval(result).toString();
    if (result.includes(".")) {
      result = +eval(result);
      result = result.toFixed(4).toString();
    } else {
      result = eval(result).toString();
    }
    setResult(result);
  } catch (err) {
    setResult("Error");
  }
};

Enter fullscreen mode Exit fullscreen mode

Step 5: Styling the Calculator

The Calculator.css file contains styles for the calculator interface. It defines the appearance of the input field, buttons, and specific button classes like clear, equal, and color.

.container {
  width: 350px;
  height: 500px;
  padding: 40px 30px 30px;
  box-sizing: border-box;
  border-radius: 20px;
  box-shadow: 5px 5px 5px rgba(230, 230, 230, 0.547),
    5px 5px 5px rgba(84, 174, 187, 0.483),
    inset -5px -5px 15px rgba(253, 248, 248, 0.58),
    inset 5px 5px 15px rgba(145, 219, 234, 0.71);
}

input[type="text"] {
  height: 80px;
  width: 100%;
  background-color: transparent;
  font-size: 25px;
  outline: none;
  border: 1px solid rgb(148, 194, 204);
  color: rgb(41, 41, 41);
  text-align: right;
  font-weight: 800;
  padding: 5px;
  letter-spacing: 1px;
}

.keypad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(60px, auto);
}

.clear {
  grid-column: 1/3;
  grid-row: 1;
}

.equal {
  grid-column: 3/5;
  grid-row: 5;
}

.color {
  color: white;
  background-color: #56cbd5;
  font-size: 20px;
  font-weight: 600;
}
button {
  margin: 4px;
  margin-top: 7px;
  border: 1px solid rgb(148, 194, 204);
  border-radius: 5px;
  cursor: pointer;
  font-size: 20px;
}

Enter fullscreen mode Exit fullscreen mode

Here is the reference of the working code


Conclusion:

This React-based calculator application allows users to perform basic arithmetic operations. It handles user input, performs calculations, and displays the results or appropriate error messages. The styling ensures a visually appealing and user-friendly interface.

Feel free to customize and expand upon this foundation to create more complex calculator functionalities or integrate it into larger applications. If you have any specific questions or need further assistance, don't hesitate to ask! Happy coding! 🚀

Follow Me on Social Media!

If you found this article helpful, feel free to connect with me on LinkedIn and Twitter for more programming tips and tutorials. Let's learn and grow together!

LinkedIn: https://www.linkedin.com/in/kartikbudhraja/

Tiugo image

Fast, Lean, and Fully Extensible

CKEditor 5 is built for developers who value flexibility and speed. Pick the features that matter, drop the ones that don’t and enjoy a high-performance WYSIWYG that fits into your workflow

Start now

Top comments (1)

Collapse
 
yogini16 profile image
yogini16 •

Nice one. Thank you !!
Examples makes it easy to understand

Neon image

Next.js applications: Set up a Neon project in seconds

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Get started →

👋 Kindness is contagious

Explore a trove of insights in this engaging article, celebrated within our welcoming DEV Community. Developers from every background are invited to join and enhance our shared wisdom.

A genuine "thank you" can truly uplift someone’s day. Feel free to express your gratitude in the comments below!

On DEV, our collective exchange of knowledge lightens the road ahead and strengthens our community bonds. Found something valuable here? A small thank you to the author can make a big difference.

Okay