This is a responsive calculator web application built using React. It allows users to perform both basic and advanced arithmetic operations, such as addition, subtraction, multiplication, division, and a variety of scientific calculations.
- Basic arithmetic operations: addition, subtraction, multiplication, and division
- Clear the calculator's display
- Delete the last character entered
- Input decimal numbers
- View the previous and current operands
- Get the computed result using React state
- Scientific calculator functions:
- Parentheses:
()
for grouping operations - EE (Exponent)
- Trigonometric functions:
tan
,cos
,sin
and their inverse functions (tan⁻¹
,cos⁻¹
,sin⁻¹
) - Exponential and logarithmic functions:
10^x
,ln
,log
- Factorial:
x!
- Euler's number:
e
- Square root:
√
- Squaring:
x²
- Cube:
x³
- Pi constant:
π
- Reciprocal:
1/x
- Parentheses:
- Responsive design: Works on desktop and mobile devices
This calculator was created to showcase my skills in building a responsive React application. It demonstrates my understanding of React components, state management, advanced event handling, and dynamic UI updates. The scientific functions also highlight my ability to implement complex calculations and user interaction flows.
To use the calculator locally, follow these steps:
-
Clone the repository:
git clone https://github.com/Ramez-Ibrahim/calculator.git
-
Navigate to the project directory and install dependencies:
cd src npm install
-
Start the development server:
npm start
-
Open the application in your web browser at
http://localhost:3000
.
- Click the number buttons to input digits.
- Click the operation buttons to select the desired operation.
- Use the scientific calculator buttons for advanced calculations:
()
for parenthesesEE
for exponents- Trigonometric functions:
tan
,cos
,sin
and their inverses (tan⁻¹
,cos⁻¹
,sin⁻¹
) 10^x
,ln
,log
for logarithmic and exponential calculations- Factorials:
x!
e
for Euler's number- Square root:
√
, squaring:x²
, cubing:x³
π
for Pi constant1/x
for reciprocals
- Click the "=" button to compute the result.
- Click the "AC" button to clear the calculator's display.
- Click the "DEL" button to delete the last character entered.
You can customize the calculator's styling by modifying the App.css
file. Adjust the colors, sizes, and layout to match your preferences. The calculator is designed to be responsive, ensuring that it looks great on both desktop and mobile devices.
Contributions are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request.
This project is licensed under the MIT License.