Scientific Calculator with Graphing

A fully-featured interactive scientific calculator with advanced mathematical functions and a built-in function graphing tool.

Features

🧮 Calculator Mode

Basic Operations

• Addition (+)
• Subtraction (−)
• Multiplication (×)
• Division (÷)
• Modulo (%)
• Parentheses for complex expressions

Scientific Functions

• Trigonometry: sin, cos, tan (with inverse mode)
• Logarithms: log (base 10), ln (natural log)
• Roots: Square root (√)
• Powers: x², x³, xʸ (any power)
• Exponential: eˣ

Advanced Features

• Factorial (n!) - Calculate factorials for integers
• Absolute Value (|x|)
• Reciprocal (1/x)
• Sign Toggle (+/−) - Switch between positive and negative
• Mathematical Constants:
  • π (Pi) - 3.14159...
  • e (Euler's number) - 2.71828...
• Random Number Generator (RND)
• INV Mode - Toggle inverse trigonometric functions (sin⁻¹, cos⁻¹, tan⁻¹)

User Interface

• Display with History - Shows current calculation and previous expression
• Color-coded Buttons:
  • Gray: Number buttons
  • Orange: Operators
  • Dark Gray: Scientific functions
  • Red: Clear/Delete functions
  • Green: Equals button
• Responsive Design - Works on desktop, tablet, and mobile devices
• Keyboard Support:
  • Numbers and operators
  • Enter or = for calculation
  • Escape to clear
  • Backspace to delete last character
  • Parentheses for grouping

📊 Graph Mode

Function Plotting

• Plot any mathematical function of x
• Real-time visualization with smooth curves
• Automatic handling of discontinuities
• Coordinate grid with axis labels

Range Controls

• X Min/Max: Set horizontal viewing range (default: -10 to 10)
• Y Min/Max: Set vertical viewing range (default: -10 to 10)
• Adjustable for zoom in/out capabilities

Quick Function Presets

Instantly plot common functions with one click:

• x² - Parabola
• x³ - Cubic function
• sin(x) - Sine wave
• cos(x) - Cosine wave
• tan(x) - Tangent function
• √x - Square root
• 1/x - Reciprocal (hyperbola)
• |x| - Absolute value
• ln(x) - Natural logarithm
• eˣ - Exponential function

Supported Function Syntax

• Powers: Use ^ or ** (e.g., x^2, x**3)
• Trigonometry: sin(x), cos(x), tan(x) or with Math. prefix
• Square Root: sqrt(x) or Math.sqrt(x)
• Logarithms: ln(x) or Math.log(x), log(x) or Math.log10(x)
• Absolute Value: abs(x) or Math.abs(x)
• Exponential: exp(x) or Math.exp(x)
• Operators: +, -, *, /
• Complex Expressions: Combine functions (e.g., x^3 - 2*x + 1, sin(x) * cos(x))

How to Use

Getting Started

1. Open index.html in any modern web browser
2. Choose between Calculator or Graph mode using the toggle buttons at the top

Calculator Mode Usage

1. Click number buttons or type on your keyboard
2. Use operator buttons for calculations
3. Press = or Enter to see results
4. Use scientific function buttons for advanced operations
5. History displays your previous expression

Example Calculations:

• Basic: 5 + 3 * 2 = 11
• Scientific: sin(π/2) = 1
• Complex: (5 + 3) * 2^3 = 64
• Factorial: 5! = 120

Graph Mode Usage

1. Click the "Graph" button to switch modes
2. Enter a function in the input field (e.g., x^2)
3. Adjust X and Y ranges if needed
4. Click "Plot Graph" to visualize
5. Use preset buttons for quick plotting
6. Click "Clear" to reset the canvas

Example Functions to Plot:

• Quadratic: x^2 - 4*x + 3
• Trigonometric: sin(x) + cos(x)
• Exponential: 2^x
• Rational: 1/(x^2 + 1)
• Complex: x^3 - 3*x^2 + 2*x - 5

Technical Details

Technologies Used

• HTML5 - Structure and canvas element
• CSS3 - Modern styling with gradients and animations
• Vanilla JavaScript - All functionality (no external libraries)

Browser Compatibility

Works on all modern browsers:

• Chrome/Edge (recommended)
• Firefox
• Safari
• Opera

Files Structure

scientific calculator/
├── index.html       # Main HTML structure
├── style.css        # All styling and responsive design
├── script.js        # Calculator and graphing logic
└── README.md        # This file

Tips & Tricks

Calculator Mode

• Use parentheses for complex expressions: (2 + 3) * (4 - 1)
• Toggle INV mode for inverse trig functions
• Use keyboard for faster input
• Constants π and e provide full precision

Graph Mode

• Start with default range (-10 to 10) then adjust as needed
• For periodic functions like sin/cos, try X range -10 to 10
• For exponential growth, adjust Y max accordingly
• Use preset functions to learn proper syntax
• Combine multiple operations: sin(x) + x^2/10

Keyboard Shortcuts

Key	Action
0-9	Number input
+, -, *, /	Operators
.	Decimal point
( )	Parentheses
Enter / =	Calculate result
Escape	Clear all
Backspace	Delete last character

License

Free to use and modify for personal and educational purposes.

Version

Version 1.0.0 - November 2025

---

Enjoy calculating and graphing! 🎉