This project consists of a simple calculator app implemented in two different versions: one that mimics the behavior of the iOS calculator and another that follows a more standard calculator behavior. Below, you'll find information about each version of the app.
Calculator-preview.mp4
The iOS-inspired calculator version of the app provides a simple calculator experience with the following features:
- Addition (+)
- Subtraction (-)
- Multiplication (*)
- Division (/)
- Clear (C): Resets the calculator.
- Change Sign (+/-): Toggles the sign of the displayed value.
- Percentage (%): Converts the displayed value to a percentage.
- Decimal Point (.): Adds a decimal point to the displayed value if not already present.
- Enter numbers and perform calculations using the provided buttons.
- Use the "=" button to calculate the result of the expression.
App.jsx: The main component that manages the calculator's logic and state.Output.jsx: Displays the calculator's output.Buttons.jsx: Provides the buttons for input and operation selection.
The standard calculator version of the app follows a more traditional calculator behavior, supporting:
- Addition (+)
- Subtraction (-)
- Multiplication (*)
- Division (/)
- Clear (C): Resets the calculator.
- Parentheses ( and ): Allows the use of parentheses for complex expressions.
- Decimal Point (.): Adds a decimal point to the expression.
- Enter an expression using the provided buttons, including parentheses for grouping.
- Use the "=" button to calculate the result of the expression.
- The calculator supports order of operations (PEMDAS) and handles complex expressions.
App.jsx: The main component responsible for managing the calculator's logic and state.Output.jsx: Displays the calculator's output.Buttons.jsx: Provides the buttons for input and operation selection.
To run either version of the calculator locally:
-
Clone the repository to your local machine:
https://github.com/joaquim25/Calculator-app.git -
Navigate to the project directory:
cd Calculator-app/Calculator-simple --or-- cd Calculator-app/Calculator-iOS -
Install the required dependencies:
npm install -
Start the development server:
npm start
The app should now be accessible in your web browser.
- Launch the calculator in your web browser.
- Use the provided buttons to enter numbers and perform calculations.
- For the iOS version, follow the instructions outlined in the iOS-inspired section.
- For the standard version, input complex expressions and use parentheses as needed for grouping.
Joaquim Luzia