In this tutorial, we'll walk you through building a simple and functional calculator using React. This project is an excellent starting point for beginners looking to get hands-on experience with React and understand how to manage state and handle events in a React application.
This calculator project allows users to perform basic arithmetic operations like addition, subtraction, multiplication, and division. The calculator has a sleek, user-friendly interface, and it handles all the essential operations, including clearing the input, deleting the last entered value, and calculating the result.
The project is structured as follows:
├── public ├── src │ ├── components │ │ └── Calculator.jsx │ ├── App.jsx │ ├── App.css │ ├── index.js │ └── index.css ├── package.json └── README.md
The Calculator component manages the state of the calculator's input and result using the useState hook. It includes a handleClick function that handles button clicks and updates the state accordingly. The calculateResult function evaluates the input using JavaScript's eval function and updates the result.
import { useState } from "react";
const Calculator = () => {
const [input, setInput] = useState("");
const [result, setResult] = useState("");
const handleClick = (value) => {
if (value === "AC") {
setInput("");
setResult("");
} else if (value === "DEL") {
setInput(input.slice(0, -1));
} else if (value === "=") {
setResult("")
calculateResult();
} else {
setInput(input + value);
}
};
const calculateResult = () => {
try {
setInput(eval(input));
} catch (error) {
setResult("Enter Valid Operation");
}
};
return (
<div className="calculator">
<div className="output-box">
<h1>{input}</h1>
<h2>{result}</h2>
</div>
<div className="buttons">
<div className="row-1">
<button onClick={() => handleClick("AC")}>
<p>AC</p>
</button>
<button onClick={() => handleClick("DEL")}>
<p>DEL</p>
</button>
<button onClick={() => handleClick("%")}>
<p>%</p>
</button>
<button onClick={() => handleClick("/")}>
<p>÷</p>
</button>
</div>
<div className="row-2">
<button onClick={() => handleClick("7")}>
<p>7</p>
</button>
<button onClick={() => handleClick("8")}>
<p>8</p>
</button>
<button onClick={() => handleClick("9")}>
<p>9</p>
</button>
<button onClick={() => handleClick("*")}>
<p>X</p>
</button>
</div>
<div className="row-3">
<button onClick={() => handleClick("4")}>
<p>4</p>
</button>
<button onClick={() => handleClick("5")}>
<p>5</p>
</button>
<button onClick={() => handleClick("6")}>
<p>6</p>
</button>
<button onClick={() => handleClick("-")}>
<p>-</p>
</button>
</div>
<div className="row-4">
<button onClick={() => handleClick("1")}>
<p>1</p>
</button>
<button onClick={() => handleClick("2")}>
<p>2</p>
</button>
<button onClick={() => handleClick("3")}>
<p>3</p>
</button>
<button onClick={() => handleClick("+")}>
<p>+</p>
</button>
</div>
<div className="row-5">
<button id="zero-button" onClick={() => handleClick("0")}>
<p>0</p>
</button>
<button onClick={() => handleClick(".")}>
<p>.</p>
</button>
<button onClick={() => handleClick("=")}>
<p>=</p>
</button>
</div>
</div>
</div>
);
};
export default Calculator;
The App component renders the Calculator component and adds a header and footer to the application.
import Calculator from "./components/Calculator";
import "./App.css";
const App = () => {
return (
<div className="app">
<div className="header">
<h1>Calculator</h1>
</div>
<Calculator />
<div className="footer">
<p>Made with ❤️ by Coding4Dev</p>
</div>
</div>
);
};
export default App;
The CSS styles ensure the calculator is centered on the screen and has a modern look. Buttons are styled for a clean and responsive design.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.app {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.header {
margin: 20px;
}
.calculator {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 350px;
height: 450px;
color: white;
background-color: black;
border-radius: 15px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.output-box {
width: 300px;
height: 100px;
color: rgb(53, 52, 52);
background-color: rgb(216, 216, 216);
border-radius: 12px;
}
.output-box h1 {
margin-left: 15px;
font-size: 25px;
overflow: hidden;
}
.output-box h2 {
margin-left: 15px;
font-size: 25px;
}
.buttons {
margin-top: 15px;
width: 350px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.buttons p {
font-size: 14px;
font-weight: 600;
color: white;
}
button {
width: 72px;
margin: 4px;
border-radius: 12px;
border: none;
background-color: #536493;
}
button:hover {
background-color: #374262;
}
#zero-button {
width: 150px;
}
.footer {
margin: 20px;
}
To get started with this project, clone the repository and install the dependencies:
git clone https://github.com/abhishekgurjar-in/Calculator.git cd calculator-react npm install npm start
This will start the development server and open the calculator in your default web browser.
You can check out the live demo of the calculator here.
This simple calculator project is an excellent way to practice your React skills and understand how to manage state and handle user input in a React application. Feel free to expand this project by adding more advanced features like a scientific calculator mode or integrating additional functionality.
Abhishek Gurjar is a passionate web developer with a focus on building intuitive and responsive web applications. Follow his journey and explore more projects on GitHub.
The above is the detailed content of Building a Simple Calculator with React. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
