Build a Fraction Calculator in React: Complete Developer Guide

     3  ← Numerator
    ───
     4  ← Denominator

1/2 = 2/4 = 3/6 = 50/100 = 0.5

GCD(48, 18):
  48 = 18 × 2 + 12
  18 = 12 × 1 + 6
  12 = 6 × 2 + 0
  
GCD = 6 (the last non-zero remainder)

function gcd(a: number, b: number): number {
  // Handle negative numbers
  a = Math.abs(a);
  b = Math.abs(b);
  
  // Base case
  if (b === 0) return a;
  
  // Recursive case
  return gcd(b, a % b);
}

// Iterative version (more performant for very large numbers)
function gcdIterative(a: number, b: number): number {
  a = Math.abs(a);
  b = Math.abs(b);
  
  while (b !== 0) {
    const temp = b;
    b = a % b;
    a = temp;
  }
  
  return a;
}

// Example usage
console.log(gcd(48, 18)); // 6
console.log(gcd(100, 25)); // 25
console.log(gcd(17, 5)); // 1 (coprime numbers)

function lcm(a: number, b: number): number {
  if (a === 0 || b === 0) return 0;
  return Math.abs(a * b) / gcd(a, b);
}

// Example: LCM(4, 6) = 24/2 = 12
console.log(lcm(4, 6)); // 12

class Fraction {
  private numerator: number;
  private denominator: number;

  constructor(numerator: number, denominator: number = 1) {
    if (denominator === 0) {
      throw new Error("Denominator cannot be zero");
    }

    // Handle negative fractions: keep sign in numerator only
    const sign = Math.sign(numerator) * Math.sign(denominator);
    this.numerator = sign * Math.abs(numerator);
    this.denominator = Math.abs(denominator);

    // Auto-simplify on creation
    this.simplify();
  }

  private simplify(): void {
    const divisor = gcd(Math.abs(this.numerator), this.denominator);
    this.numerator = this.numerator / divisor;
    this.denominator = this.denominator / divisor;
  }

  // Addition: a/b + c/d = (a*d + c*b) / (b*d)
  add(other: Fraction): Fraction {
    const newNumerator = 
      this.numerator * other.denominator + 
      other.numerator * this.denominator;
    const newDenominator = this.denominator * other.denominator;
    return new Fraction(newNumerator, newDenominator);
  }

  // Subtraction: a/b - c/d = (a*d - c*b) / (b*d)
  subtract(other: Fraction): Fraction {
    const newNumerator = 
      this.numerator * other.denominator - 
      other.numerator * this.denominator;
    const newDenominator = this.denominator * other.denominator;
    return new Fraction(newNumerator, newDenominator);
  }

  // Multiplication: a/b × c/d = (a*c) / (b*d)
  multiply(other: Fraction): Fraction {
    return new Fraction(
      this.numerator * other.numerator,
      this.denominator * other.denominator
    );
  }

  // Division: a/b ÷ c/d = a/b × d/c
  divide(other: Fraction): Fraction {
    if (other.numerator === 0) {
      throw new Error("Cannot divide by zero");
    }
    return new Fraction(
      this.numerator * other.denominator,
      this.denominator * other.numerator
    );
  }

  // Convert to decimal
  toDecimal(): number {
    return this.numerator / this.denominator;
  }

  // Convert to mixed number
  toMixedNumber(): { whole: number; numerator: number; denominator: number } {
    const whole = Math.floor(Math.abs(this.numerator) / this.denominator);
    const remainder = Math.abs(this.numerator) % this.denominator;
    const sign = this.numerator < 0 ? -1 : 1;
    
    return {
      whole: sign * whole,
      numerator: remainder,
      denominator: this.denominator
    };
  }

  // String representation
  toString(): string {
    if (this.denominator === 1) {
      return this.numerator.toString();
    }
    return `${this.numerator}/${this.denominator}`;
  }

  // Display as mixed number string
  toMixedString(): string {
    if (Math.abs(this.numerator) < this.denominator) {
      return this.toString();
    }
    
    const { whole, numerator, denominator } = this.toMixedNumber();
    
    if (numerator === 0) {
      return whole.toString();
    }
    
    return `${whole} ${numerator}/${denominator}`;
  }

  // Getters
  getNumerator(): number { return this.numerator; }
  getDenominator(): number { return this.denominator; }

  // Static factory methods
  static fromDecimal(decimal: number, maxDenominator: number = 10000): Fraction {
    // Handle whole numbers
    if (Number.isInteger(decimal)) {
      return new Fraction(decimal, 1);
    }

    // Continued fraction algorithm for best approximation
    let sign = decimal < 0 ? -1 : 1;
    decimal = Math.abs(decimal);
    
    let n1 = 1, d1 = 0, n2 = 0, d2 = 1;
    let b = decimal;
    
    do {
      const a = Math.floor(b);
      let n = n1 * a + n2;
      let d = d1 * a + d2;
      
      n2 = n1; d2 = d1;
      n1 = n; d1 = d;
      
      if (b === a) break;
      b = 1 / (b - a);
    } while (d1 <= maxDenominator);

    return new Fraction(sign * n1, d1);
  }

  static fromMixedNumber(whole: number, numerator: number, denominator: number): Fraction {
    const sign = whole < 0 ? -1 : 1;
    const improperNumerator = sign * (Math.abs(whole) * denominator + numerator);
    return new Fraction(improperNumerator, denominator);
  }
}

"use client"

import { useState, useMemo } from "react"
import { Calculator, Plus, Minus, X, Divide, ArrowRight, RotateCcw } from "lucide-react"

type Operation = "add" | "subtract" | "multiply" | "divide"

interface FractionInput {
  numerator: string
  denominator: string
}

export default function FractionCalculator() {
  const [fraction1, setFraction1] = useState<FractionInput>({ numerator: "", denominator: "" })
  const [fraction2, setFraction2] = useState<FractionInput>({ numerator: "", denominator: "" })
  const [operation, setOperation] = useState<Operation>("add")

  const result = useMemo(() => {
    const n1 = parseInt(fraction1.numerator)
    const d1 = parseInt(fraction1.denominator)
    const n2 = parseInt(fraction2.numerator)
    const d2 = parseInt(fraction2.denominator)

    if (isNaN(n1) || isNaN(d1) || isNaN(n2) || isNaN(d2)) {
      return null
    }

    if (d1 === 0 || d2 === 0) {
      return { error: "Denominator cannot be zero" }
    }

    if (operation === "divide" && n2 === 0) {
      return { error: "Cannot divide by zero" }
    }

    try {
      const f1 = new Fraction(n1, d1)
      const f2 = new Fraction(n2, d2)

      let resultFraction: Fraction

      switch (operation) {
        case "add":
          resultFraction = f1.add(f2)
          break
        case "subtract":
          resultFraction = f1.subtract(f2)
          break
        case "multiply":
          resultFraction = f1.multiply(f2)
          break
        case "divide":
          resultFraction = f1.divide(f2)
          break
      }

      return {
        fraction: resultFraction.toString(),
        mixed: resultFraction.toMixedString(),
        decimal: resultFraction.toDecimal().toFixed(6),
        steps: getCalculationSteps(f1, f2, operation, resultFraction)
      }
    } catch (e) {
      return { error: (e as Error).message }
    }
  }, [fraction1, fraction2, operation])

  const operations: { key: Operation; icon: typeof Plus; label: string }[] = [
    { key: "add", icon: Plus, label: "Add" },
    { key: "subtract", icon: Minus, label: "Subtract" },
    { key: "multiply", icon: X, label: "Multiply" },
    { key: "divide", icon: Divide, label: "Divide" }
  ]

  const reset = () => {
    setFraction1({ numerator: "", denominator: "" })
    setFraction2({ numerator: "", denominator: "" })
  }

  return (
    <div className="max-w-2xl mx-auto p-6 bg-white border rounded-xl shadow-lg">
      {/* Header */}
      <div className="flex items-center justify-between mb-6 pb-4 border-b">
        <div className="flex items-center gap-3">
          <div className="bg-blue-100 p-2 rounded-lg text-blue-700">
            <Calculator size={24} />
          </div>
          <h2 className="text-xl font-bold text-slate-800">Fraction Calculator</h2>
        </div>
        <button
          onClick={reset}
          className="p-2 hover:bg-slate-100 rounded-lg transition"
        >
          <RotateCcw size={20} className="text-slate-500" />
        </button>
      </div>

      {/* Operation Selector */}
      <div className="flex gap-2 mb-6 p-1 bg-slate-100 rounded-lg">
        {operations.map(({ key, icon: Icon, label }) => (
          <button
            key={key}
            onClick={() => setOperation(key)}
            className={`flex-1 flex items-center justify-center gap-2 py-2 rounded-md transition ${
              operation === key
                ? "bg-white shadow text-blue-600"
                : "text-slate-500 hover:text-slate-700"
            }`}
          >
            <Icon size={16} />
            <span className="text-sm font-medium">{label}</span>
          </button>
        ))}
      </div>

      {/* Fraction Inputs */}
      <div className="flex items-center gap-4 mb-6">
        <FractionInputField
          value={fraction1}
          onChange={setFraction1}
          label="First Fraction"
        />

        <div className="flex items-center justify-center w-10 h-10 bg-blue-100 rounded-full text-blue-600">
          {operation === "add" && <Plus size={20} />}
          {operation === "subtract" && <Minus size={20} />}
          {operation === "multiply" && <X size={20} />}
          {operation === "divide" && <Divide size={20} />}
        </div>

        <FractionInputField
          value={fraction2}
          onChange={setFraction2}
          label="Second Fraction"
        />

        <div className="flex items-center justify-center w-10 h-10 text-slate-400">
          <ArrowRight size={20} />
        </div>
      </div>

      {/* Result */}
      {result && !("error" in result) && (
        <div className="space-y-4">
          <div className="bg-gradient-to-r from-blue-600 to-indigo-600 text-white p-6 rounded-xl text-center">
            <div className="text-blue-200 text-sm uppercase mb-2">Result</div>
            <div className="text-4xl font-bold font-mono mb-2">
              {result.fraction}
            </div>
            <div className="flex justify-center gap-4 text-blue-200 text-sm">
              <span>Mixed: {result.mixed}</span>
              <span>•</span>
              <span>Decimal: {result.decimal}</span>
            </div>
          </div>

          {/* Calculation Steps */}
          {result.steps && (
            <div className="p-4 bg-slate-50 rounded-xl">
              <div className="text-xs font-bold uppercase text-slate-500 mb-2">
                Step-by-Step Solution
              </div>
              <div className="space-y-2 font-mono text-sm text-slate-700">
                {result.steps.map((step, i) => (
                  <div key={i} className="flex gap-2">
                    <span className="text-slate-400">{i + 1}.</span>
                    <span>{step}</span>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      )}

      {/* Error */}
      {result && "error" in result && (
        <div className="p-4 bg-red-50 border border-red-200 rounded-xl text-red-600 text-center">
          {result.error}
        </div>
      )}
    </div>
  )
}

function FractionInputField({
  value,
  onChange,
  label
}: {
  value: FractionInput
  onChange: (value: FractionInput) => void
  label: string
}) {
  return (
    <div className="flex-1">
      <label className="text-xs font-bold uppercase text-slate-500 mb-2 block">
        {label}
      </label>
      <div className="flex flex-col items-center gap-1">
        <input
          type="number"
          value={value.numerator}
          onChange={(e) => onChange({ ...value, numerator: e.target.value })}
          className="w-full p-2 border rounded-lg text-center font-mono text-lg"
          placeholder="0"
        />
        <div className="w-full h-0.5 bg-slate-800" />
        <input
          type="number"
          value={value.denominator}
          onChange={(e) => onChange({ ...value, denominator: e.target.value })}
          className="w-full p-2 border rounded-lg text-center font-mono text-lg"
          placeholder="1"
        />
      </div>
    </div>
  )
}

function getCalculationSteps(
  f1: Fraction,
  f2: Fraction,
  operation: Operation,
  result: Fraction
): string[] {
  const steps: string[] = []
  
  switch (operation) {
    case "add":
      steps.push(`Start with: ${f1} + ${f2}`)
      if (f1.getDenominator() !== f2.getDenominator()) {
        const lcd = lcm(f1.getDenominator(), f2.getDenominator())
        steps.push(`Find LCD: ${lcd}`)
        const f1Mult = lcd / f1.getDenominator()
        const f2Mult = lcd / f2.getDenominator()
        steps.push(`Convert: (${f1.getNumerator()}×${f1Mult})/${lcd} + (${f2.getNumerator()}×${f2Mult})/${lcd}`)
      }
      steps.push(`Add numerators: ${result}`)
      break
      
    case "subtract":
      steps.push(`Start with: ${f1} - ${f2}`)
      steps.push(`Subtract numerators over common denominator`)
      steps.push(`Result: ${result}`)
      break
      
    case "multiply":
      steps.push(`Start with: ${f1} × ${f2}`)
      steps.push(`Multiply numerators: ${f1.getNumerator()} × ${f2.getNumerator()}`)
      steps.push(`Multiply denominators: ${f1.getDenominator()} × ${f2.getDenominator()}`)
      steps.push(`Simplify to: ${result}`)
      break
      
    case "divide":
      steps.push(`Start with: ${f1} ÷ ${f2}`)
      steps.push(`Flip the second fraction: ${f2.getDenominator()}/${f2.getNumerator()}`)
      steps.push(`Multiply: ${f1} × ${f2.getDenominator()}/${f2.getNumerator()}`)
      steps.push(`Result: ${result}`)
      break
  }
  
  return steps
}

class Fraction {
  // ... previous methods

  compareTo(other: Fraction): number {
    const diff = this.subtract(other)
    if (diff.getNumerator() > 0) return 1
    if (diff.getNumerator() < 0) return -1
    return 0
  }

  isGreaterThan(other: Fraction): boolean {
    return this.compareTo(other) > 0
  }

  isLessThan(other: Fraction): boolean {
    return this.compareTo(other) < 0
  }

  isEqual(other: Fraction): boolean {
    return this.compareTo(other) === 0
  }
}

// Usage
const a = new Fraction(3, 4)
const b = new Fraction(2, 3)
console.log(a.isGreaterThan(b)) // true (0.75 > 0.666...)

class Fraction {
  power(exponent: number): Fraction {
    if (exponent === 0) return new Fraction(1, 1)
    
    if (exponent < 0) {
      // Negative exponent: flip fraction and use positive exponent
      return new Fraction(
        Math.pow(this.denominator, Math.abs(exponent)),
        Math.pow(this.numerator, Math.abs(exponent))
      )
    }
    
    return new Fraction(
      Math.pow(this.numerator, exponent),
      Math.pow(this.denominator, exponent)
    )
  }
}

// (2/3)^2 = 4/9
console.log(new Fraction(2, 3).power(2).toString()) // "4/9"

// (2/3)^-1 = 3/2
console.log(new Fraction(2, 3).power(-1).toString()) // "3/2"

function findEquivalentFractions(fraction: Fraction, count: number = 5): Fraction[] {
  const equivalents: Fraction[] = []
  
  for (let i = 1; i <= count; i++) {
    const multiplier = i + 1
    equivalents.push(new Fraction(
      fraction.getNumerator() * multiplier,
      fraction.getDenominator() * multiplier
    ))
  }
  
  return equivalents
}

// Find equivalents of 1/2
const equivalents = findEquivalentFractions(new Fraction(1, 2), 4)
// [2/4, 3/6, 4/8, 5/10]

// 0/5 should simplify to 0/1
const zero = new Fraction(0, 5)
console.log(zero.toString()) // "0"

// All these should be equivalent
const neg1 = new Fraction(-1, 2)  // -1/2
const neg2 = new Fraction(1, -2)  // Also -1/2
const neg3 = new Fraction(-1, -2) // +1/2 (double negative)

// Handle potential overflow
function safeMultiply(a: number, b: number): number {
  const result = a * b
  if (!Number.isSafeInteger(result)) {
    console.warn("Precision may be lost for very large fractions")
  }
  return result
}

// 1/3 = 0.333... (repeating)
function formatRepeatingDecimal(fraction: Fraction): string {
  const decimal = fraction.toDecimal()
  const str = decimal.toString()
  
  // Detect common repeating patterns
  const repeatingPatterns: Record<string, string> = {
    "0.3333": "0.3̄",
    "0.6666": "0.6̄",
    "0.1666": "0.16̄",
    "0.142857142857": "0.142857̄"
  }
  
  for (const [pattern, display] of Object.entries(repeatingPatterns)) {
    if (str.startsWith(pattern)) {
      return display
    }
  }
  
  return decimal.toFixed(6)
}

function scaleRecipe(
  ingredients: Record<string, Fraction>,
  scaleFactor: Fraction
): Record<string, Fraction> {
  const scaled: Record<string, Fraction> = {}
  
  for (const [ingredient, amount] of Object.entries(ingredients)) {
    scaled[ingredient] = amount.multiply(scaleFactor)
  }
  
  return scaled
}

// Original recipe (serves 4)
const recipe = {
  "flour (cups)": new Fraction(2, 1),
  "sugar (cups)": new Fraction(3, 4),
  "butter (cups)": new Fraction(1, 2)
}

// Scale to serve 6 (multiply by 6/4 = 3/2)
const scaledRecipe = scaleRecipe(recipe, new Fraction(3, 2))
// flour: 3 cups, sugar: 9/8 cups, butter: 3/4 cups

// Interest rates often expressed as fractions
const annualRate = new Fraction(5, 100) // 5%
const monthlyRate = annualRate.divide(new Fraction(12, 1))
console.log(monthlyRate.toString()) // "1/240" or ~0.417%

// Musical intervals are ratios
const octave = new Fraction(2, 1)      // 2:1
const perfectFifth = new Fraction(3, 2) // 3:2
const majorThird = new Fraction(5, 4)   // 5:4

// Combine intervals
const majorChord = perfectFifth.multiply(majorThird)
console.log(majorChord.toString()) // "15/8"

function combineProbabilities(p1: Fraction, p2: Fraction, type: "and" | "or"): Fraction {
  if (type === "and") {
    // P(A and B) = P(A) × P(B) (independent events)
    return p1.multiply(p2)
  } else {
    // P(A or B) = P(A) + P(B) - P(A)×P(B)
    return p1.add(p2).subtract(p1.multiply(p2))
  }
}

const diceSix = new Fraction(1, 6) // Rolling a 6
const twoSixes = combineProbabilities(diceSix, diceSix, "and")
console.log(twoSixes.toString()) // "1/36"

class LazyFraction {
  private _simplified = false
  private numerator: number
  private denominator: number

  constructor(numerator: number, denominator: number) {
    this.numerator = numerator
    this.denominator = denominator
  }

  private ensureSimplified(): void {
    if (!this._simplified) {
      const divisor = gcd(Math.abs(this.numerator), Math.abs(this.denominator))
      this.numerator /= divisor
      this.denominator /= divisor
      this._simplified = true
    }
  }

  toString(): string {
    this.ensureSimplified()
    return `${this.numerator}/${this.denominator}`
  }
}

const gcdCache = new Map<string, number>()

function memoizedGcd(a: number, b: number): number {
  const key = `${Math.min(a, b)}-${Math.max(a, b)}`
  
  if (gcdCache.has(key)) {
    return gcdCache.get(key)!
  }
  
  const result = gcd(a, b)
  gcdCache.set(key, result)
  return result
}

<div 
  role="math" 
  aria-label={`${numerator} divided by ${denominator}`}
>
  <span aria-hidden="true">{numerator}/{denominator}</span>
</div>

function FractionDisplay({ numerator, denominator }: { numerator: number; denominator: number }) {
  return (
    <math>
      <mfrac>
        <mn>{numerator}</mn>
        <mn>{denominator}</mn>
      </mfrac>
    </math>
  )
}