Calculator React App

This project is a simple calculator application built using React. It provides basic arithmetic operations such as addition, subtraction, multiplication, and division.

Project Structure and Workflow

This project follows a Gitflow branching strategy and utilizes Conventional Commits for a clear and maintainable development process.

• Gitflow: We use a main branch for stable releases and develop for integrating new features. Feature branches are created from develop and merged back in after review.
• Conventional Commits: Commit messages adhere to the Conventional Commits specification. This allows for automated versioning and changelog generation. Examples: feat(optional scope): add addition functionality, fix(optional scope): correct display error, chore: update dependencies.

Project Setup

The project is structured as a standard Create React App (CRA) application. Key components include:

• src/: Contains the main source code for the application.
  • index.js: The entry point of the application, responsible for rendering the Calculator component into the DOM.
  • main/: Contains the core calculator components.
    • Calculator.jsx: The main calculator component that manages the state and logic of the calculator.
    • Calculator.css: Styles for the Calculator component.
  • components/: Contains reusable UI components.
    • Button.jsx: A button component used for calculator inputs.
    • Button.css: Styles for the Button component.
    • Display.jsx: A display component to show the calculator's input and output.
    • Display.css: Styles for the Display component.
• public/: Contains static assets such as index.html and any other public files.

Code Explanation

Calculator.jsx

This component is the heart of the application. It manages the calculator's state, which includes:

• displayValue: The value displayed on the calculator screen.
• clearDisplay: A boolean indicating whether the display should be cleared on the next input.
• operation: The current operation selected (+, -, *, /).
• values: An array holding the two operands for calculations.
• current: An index to track which operand is currently being entered.

Key methods:

• clearMemory(): Resets the calculator state to its initial values.
• setOperation(operation): Handles the selection of an operation. If an operation is already selected, it performs the calculation and updates the display.
• addDigit(n): Adds a digit to the current display value. It handles decimal points and prevents multiple decimal points in a single number.
• render(): Renders the calculator UI, including the display and buttons.

Button.jsx

This component represents a single button on the calculator. It receives props such as:

• label: The text displayed on the button.
• click: A function to be called when the button is clicked.
• double, triple, operation: Boolean props to apply specific styles to the button.

Display.jsx

This component displays the calculator's current value. It receives the value prop, which is the text to be displayed.

Installation

To run this project locally, follow these steps:

1. Clone the repository:

   git clone [repository URL]
   cd [project directory]

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

   This will start the application in development mode. Open http://localhost:3000 to view it in the browser.

Building for Production

To build the application for production, run:

npm run build