https://github.com/mibei-collins/calculator-app

simple calculator app built with React.
https://github.com/mibei-collins/calculator-app

css reactjs

Last synced: 8 days ago
JSON representation

simple calculator app built with React.

• Host: GitHub
• URL: https://github.com/mibei-collins/calculator-app
• Owner: Mibei-Collins
• Created: 2024-02-01T08:01:34.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-02-01T08:20:13.000Z (12 months ago)
• Last Synced: 2024-11-16T13:05:49.163Z (2 months ago)
• Topics: css, reactjs
• Language: JavaScript
• Homepage:
• Size: 44.9 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Calculator App

This project is a simple calculator app built with React. The app can perform the four basic mathematical operations: addition, subtraction, multiplication, and division.

## Building Process

The calculator app was built using React and CSS for styling. The `useState` and `useRef` hooks from React were used to manage state and references within the app.

### Step 1: Setting Up the Project

The project was set up using `create-react-app`. After setting up, the `npm start` command was executed to start the development server.

### Step 2: Creating the Calculator Layout

The layout of the calculator was created using HTML and CSS. The CSS styles were added in the `App.css` file in the root folder.

### Step 3: Implementing the Calculator Functions

The calculator functions for addition, subtraction, multiplication, and division were implemented in the `App` component. Each function was attached to a button in the calculator layout.

Here's a brief overview of each function:

- `plus(e)`: This function adds the current input value to the result state.

- `minus(e)`: This function subtracts the current input value from the result state.

- `times(e)`: This function multiplies the result state with the current input value.

- `divide(e)`: This function divides the result state by the current input value.

- `resetInput(e)`: This function resets the input field.

- `resetResult(e)`: This function resets the result state.

### Step 4: Finalizing the App

After implementing all the functions, the app was finalized by adding the necessary event handlers and state updates.

## Demo

The final product is a fully functional calculator app. Here's a demo of how it works: