Skip to content

SahajDang/calculator-web

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

9 Commits
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

๐Ÿงฎ Calculator Web Application

A web-based calculator with a React frontend and a Flask backend. The calculator supports arithmetic expressions, parentheses, and variable assignments with a custom parser and evaluator.


๐Ÿš€ Live Demo


โœจ Features

  • Evaluate complex mathematical expressions including +, -, *, /, and parentheses
  • Support for variables with assignment, e.g. x = 5, y = x + 3
  • Real-time evaluation via a REST API
  • Clean and modern UI built with React
  • Backend implemented in Flask with custom tokenizer, parser, and evaluator
  • CORS enabled for seamless frontend-backend communication

๐Ÿงฐ Tech Stack

  • Frontend: React (Vite), CSS
  • Backend: Python, Flask, Flask-CORS
  • Deployment: Render (Frontend + Backend)
  • Communication: REST API (JSON)

๐Ÿ“ Folder Structure

calculator-web/ โ”œโ”€โ”€ backend/ โ”‚ โ””โ”€โ”€ app.py # Flask backend API โ”œโ”€โ”€ frontend/ โ”‚ โ”œโ”€โ”€ src/ โ”‚ โ”‚ โ””โ”€โ”€ App.jsx # Main React component โ”‚ โ”œโ”€โ”€ public/ โ”‚ โ””โ”€โ”€ package.json # React project config โ””โ”€โ”€ README.md


โš™๏ธ Getting Started

๐Ÿ”™ Backend Setup

cd backend
python -m venv venv
Activate:

Windows:

venv\Scripts\activate

macOS/Linux:

source venv/bin/activate
pip install -r requirements.txt
python app.py

๐Ÿ”œ Frontend Setup

cd frontend
npm install
npm run dev

๐Ÿ’ป Usage

  • Enter mathematical expressions or assignments in the input field.

  • Click Evaluate or press Enter to get the result.

  • Use the buttons for digits, operators, parentheses, and controls (Clear, Delete).

  • Results or error messages will appear below the input.


๐Ÿ”Œ API Endpoint

POST /evaluate

  • Request (JSON):
{
  "expression": "3 + 4 * (2 - 1)"
}
  • Response (Success):
{
  "result": 7
}
  • Response (Error):
{
  "error": "Error message here"
}

๐Ÿ“ธ Screenshots

image image

๐Ÿชช License

This project is open-source and free to use under the MIT License.


๐Ÿ‘จโ€๐Ÿ’ป Author

Sahaj Dang

๐Ÿ”— GitHub @SahajDang


Built with โค๏ธ using React & Flask

About

๐Ÿงฎ Full-stack calculator using React + Flask (Live demo below)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published