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

#webdev #react #javascript #learning

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>
  );
}

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
};

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
};

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");
  }
};

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;
}

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/