A beautiful & responsive calculator built with React + Vite.
Fast ⚡, lightweight 🪶, and easy to use ✅.
✅ Basic Arithmetic (➕ ➖ ✖ ➗)
✅ Responsive Design 📱💻
✅ Keyboard Support ⌨️
✅ Clear & Delete Buttons 🧹
✅ Fast Rendering using React ⚡
# Clone the repository
git clone https://github.com/prathamjoshi-1/react-calculator.git
# Navigate into the folder
cd react-calculator
# Install dependencies
npm install
---
▶️ Usage
# Start the development server
npm run dev
Then open 🌐 http://localhost:5173 in your browser.
---
🛠️ Build for Production
npm run build
Your production-ready files will be in the dist folder 📂.
---
## 🧮 React + Vite Calculator Project Folder Structure ✅🔥
```bash
📦 calculator-project 🧮🚀
┣ 📜 index.html 🌐✅
┣ 📜 package.json 📦✅
┣ 📜 vite.config.js ⚙️✅
┣ 📜 .gitignore 🙈✅
┣ 📂 public 🌍✅
┃ ┗ 📜 favicon.ico 🎯✅
┣ 📂 src 📂✅
┃ ┣ 📂 assets 🎨✅
┃ ┃ ┗ 📜 react.svg 🖼️✅
┃ ┣ 📂 components 🧩✅
┃ ┃ ┣ 📜 CalculatorButton.jsx 🔘✅
┃ ┃ ┣ 📜 CalculatorButton.module.css 🎨✅
┃ ┃ ┣ 📜 Display.jsx 📺✅
┃ ┃ ┣ 📜 Display.module.css 🎨✅
┃ ┃ ┣ 📜 Keypad.jsx ⌨️✅
┃ ┃ ┣ 📜 Keypad.module.css 🎨✅
┃ ┣ 📜 App.jsx ⚛️✅
┃ ┣ 📜 App.css 🎨✅
┃ ┣ 📜 Main.jsx 🏁✅
---
⌨️ Keyboard Shortcuts
Key Action
0-9 Enter numbers
+ - * / Operators
Enter Calculate
Backspace Delete last digit
Esc Clear all
---
🤝 Contributing
Pull requests are welcome 💚!
If you find a bug 🐞, feel free to open an issue.
---
💚 Made with React + Vite | Fast, Clean & Fun!
---
I can also **add colorful GitHub badges** for stars ⭐, forks 🍴, license 📜, and live demo 🌐 so your repo looks **super professional**.
Do you want me to make that badge-enhanced version next?