React Calculator App

Overview

This web-based calculator app is built using React, offering a user-friendly and feature-rich experience for performing basic math calculations and percentage-based operations. It's perfect for both desktop and mobile use, adapting to various screen sizes seamlessly.

Try out the live demo here.

Key Features

• Perform basic arithmetic operations: addition, subtraction, multiplication, and division.

• Calculate percentages with ease.

• Clear your input with a single click using the 'C' button.

• Remove the last character if you make a mistake by pressing the '<' button.

• Keyboard shortcuts for quick calculations (e.g., 'Enter' for the result, 'Escape' to clear input, and 'Backspace' to delete the last character).

• Responsive design for a consistent user experience across different devices.

• Error handling to alert users when calculations encounter issues (e.g., division by zero).

  Light and Dark Modes

The calculator app supports both light and dark modes to enhance the user experience. Users can switch between these modes easily to suit their preferences.

Light Mode

In light mode, the app features a clean and bright interface with a white background, making it easy to read and interact with.

Dark Mode

Dark mode offers a more comfortable viewing experience in low-light conditions. The app adopts a darker color scheme with reduced brightness.

To switch between light and dark modes, simply use the toggle switch located at the [specific location in your app, e.g., the top-right corner].

Usage

1. Enter your desired calculation in the input field.
2. Use the numeric buttons for digits 0-9.
3. Utilize the arithmetic operators (+, -, *, /) for calculations.
4. To calculate percentages, use the '%' sign (e.g., 10% of 50 will return 5).
5. Press 'C' to clear the input field.
6. Use '<' to delete the last character from the input.
7. For the result, press '=' or 'Enter'.
8. If there's an issue with the calculation, an error message will be displayed.

Installation

To run this calculator app locally on your machine, follow these steps:

1. Clone this repository.

   git clone https://github.com/imtiazimran/ASB-Design

Navigate to the project directory.

bash Copy code cd react-calculator-app Install the project dependencies.

bash Copy code npm install Start the development server.

bash Copy code npm start Open your browser and access the app at http://localhost:5173 .

Technologies Used React: For building the user interface and handling user interactions. HTML & CSS: For structuring the app and styling it. JavaScript: For implementing the calculator's logic and error handling. Folder Structure The project structure is organized as follows:

public/: Contains the HTML template and static assets. src/: Contains the React components and application logic. License This project is open-source and available under the MIT License.

Author

Imran

Feel free to contribute, report issues, or suggest improvements by creating a pull request or raising an issue on GitHub.

Happy calculating! 🧮