React Calculator

A modern and responsive calculator application built using React and Vite. This project performs basic arithmetic operations with a clean user interface and demonstrates the use of React components, state management, and modular CSS.

---

Features

• Perform basic arithmetic operations
  • Addition (+)
  • Subtraction (-)
  • Multiplication (*)
  • Division (/)
• Clear display functionality
• Real-time input and calculation
• Responsive and user-friendly interface
• Built using reusable React components
• Styled with CSS Modules

---

Tech Stack

• React
• Vite
• JavaScript (ES6+)
• CSS Modules

---

Project Structure

calculator-app/
│
├── public/
├── src/
│   ├── components/
│   │   ├── ButtonsContainer.jsx
│   │   ├── ButtonsContainer.module.css
│   │   ├── Display.jsx
│   │   └── Display.module.css
│   │
│   ├── App.jsx
│   ├── App.module.css
│   └── main.jsx
│
├── package.json
├── vite.config.js
└── README.md

---

Getting Started

Clone the repository

git clone https://github.com/DevyaniVizekar/react-calculator.git

Navigate to the project

cd react-calculator

Install dependencies

npm install

Start the development server

npm run dev

The application will be available at:

http://localhost:5173

---

Learning Outcomes

This project helped strengthen my understanding of:

• React Functional Components
• React Hooks (useState)
• Event Handling
• Component-Based Architecture
• State Management
• CSS Modules
• Vite Development Workflow

---

Future Enhancements

• Percentage (%) functionality
• Decimal calculations
• Keyboard support
• Calculation history
• Dark/Light mode
• Scientific calculator functions
• Improved error handling

---

Author

Devyani Vizekar

Frontend Developer passionate about building clean, responsive, and user-friendly web applications using React and modern JavaScript.

GitHub: https://github.com/DevyaniVizekar

This project is open source and available under the MIT License.