A simple and intuitive calculator application built with React. This project implements calculator logic manually without relying on external libraries for computations, providing a clean and hands-on understanding of React and JavaScript fundamentals.
- Overview
- Features
- Technologies Used
- Best Practices
- Installation
- Usage
- How It Works
- Screenshots
- License
- Contact
This React-based calculator allows users to perform basic arithmetic operations (addition, subtraction, multiplication, and division) with a clean and responsive interface. The app is developed from scratch, with all calculation logic implemented manually to demonstrate mastery of React state management and JavaScript.
- Basic arithmetic operations: addition, subtraction, multiplication, division.
- Clear and delete functionality.
- Real-time formatting of numbers for better readability.
- Responsive design suitable for different devices.
- Developed without using external libraries for calculations.
- React.js: For building the user interface and managing state.
- CSS: For styling the application.
- JavaScript: For implementing logic manually.
- State Management: The app uses React's
useReducerhook to handle application state effectively. - Component Reusability: Separate
DigitButtonandOperationButtoncomponents improve modularity and reusability. - Formatting and Validation: Input validation and formatting enhance user experience by preventing invalid operations.
To run this project locally:
-
Clone the repository:
git clone https://github.com/kuriakosant/react-calculator-app cd react-calculator-app -
Install dependencies:
npm install -
Start the development server:
npm start -
Open your browser and navigate to
http://localhost:3000.
- Clone and install the app as described in the installation guide.
- Use the number buttons to input digits.
- Select an operation (
+,-,*,÷). - Press
=to evaluate the expression. - Use
ACto clear the screen orDELto delete the last digit.
This calculator implements core arithmetic logic manually:
-
State Management:
- The app maintains the current and previous operands and the chosen operation in its state.
useReduceris used to manage complex state transitions based on user actions.
-
User Actions:
- Digits and operations are dispatched as actions to the reducer.
- The reducer updates the state based on action types (
ADD_DIGIT,CHOOSE_OPERATION,EVALUATE,CLEAR, etc.).
-
Calculation Logic:
- Operations are evaluated by the
evaluatefunction, which parses operands as floating-point numbers and performs the operation. - Input validation prevents invalid operations, like dividing by zero or multiple decimals in a number.
- Operations are evaluated by the
-
Number Formatting:
- Numbers are formatted using
Intl.NumberFormatfor improved readability.
- Numbers are formatted using
This project is licensed under the MIT License. See the LICENSE file for details.
For questions or collaboration:
- Name: [Kyriakos Antoniadis]
- Email: kuriakosant2003@gmail.com
- GitHub: kuriakosant
- LinkedIn: Kyriakos Antoniadis
Feel free to reach out with any questions or suggestions!