Skip to content

m223rx/calculator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 

Repository files navigation

🌐 Smart Calculator by m223rx

Calculator Screenshot


🚀 Features

  • Basic Arithmetic Operations
    Supports addition, subtraction, multiplication, and division.

  • Parentheses Support
    Automatically balances open and close parentheses for complex expressions.

  • Live Calculation History
    Stores the last 5 calculations for quick reference.

  • Mobile-Friendly Interface
    Clean, responsive design suitable for mobile and desktop screens.

  • Interactive UI
    Modern glass-like backgrounds, blur effects, and smooth button interactions.

  • Error Handling
    Detects invalid expressions and displays "Error" without crashing.


🛠 Tech Stack

  • Frontend:

    • React.js – fast, component-based UI library
    • Vite – development server and build tool
    • Tailwind CSS – utility-first styling
    • Math.js – safe evaluation of mathematical expressions
    • Lucide-React – icons for UI elements
  • State Management & Hooks:

    • useState – managing input, result, and history
    • useEffect – updating timestamps and reactive UI

📸 Screenshots

Main Calculator View

Calculator Screenshot

History Panel

History Screenshot

Mobile View

Mobile Screenshot


⚡ Usage

  1. Clone the repository: git clone https://github.com/m223rx/calculator.git cd calculator/frontend

  2. Install dependencies: npm install

  3. Run the development server: npm run dev

  4. Open http://localhost:5173

🎨 Customization

Update TailwindCSS variables to change colors and theme. Adjust the handleResult function to modify precision or rounding logic. Add more advanced math functions by extending Math.js integration.

📂 Project Structure

src/ ├── components/ │ ├── phone.jsx │ └── navbar.jsx ├── assets/ │ └── screenshots/ ├── App.jsx ├── main.jsx ├── App.jsx └── index.css

💡 Future Enhancements

Add scientific calculator functionality (sin, cos, log, etc.) Enable dark/light themes toggle Support keyboard input in addition to on-screen buttons Animate button presses and results for a smoother UX

👨‍💻 Developer

m223rx – 2025 © 2025 m223rx. All rights reserved.


About

Smart Calculator is a responsive web calculator built with React.js and Tailwind CSS. It supports basic arithmetic, parentheses, live history, and error handling, all within a sleek, interactive, mobile-friendly interface.

Topics

Resources

Stars

Watchers

Forks

Packages

 
 
 

Contributors