[V0_FILE]typescriptreact:file="calculator-app.tsx" "use client" import { useState } from "react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Card, CardContent } from "@/components/ui/card" import { Calculator, BarChart3, ArrowLeftRight, Percent, Divide, X, Minus, Plus, Equal, History, Trash2, RotateCcw, } from "lucide-react" export default function CalculatorApp() { // Standard calculator state const [display, setDisplay] = useState("0") const [memory, setMemory] = useState(null) const [operation, setOperation] = useState(null) const [previousValue, setPreviousValue] = useState(null) const [resetDisplay, setResetDisplay] = useState(false) const [history, setHistory] = useState([]) // Unit converter state const [fromUnit, setFromUnit] = useState("cm") const [toUnit, setToUnit] = useState("inch") const [fromValue, setFromValue] = useState("0") const [toValue, setToValue] = useState("0") // Scientific calculator state const [scientificDisplay, setScientificDisplay] = useState("0") const [showScientificFunctions, setShowScientificFunctions] = useState(false) // Handle number input for standard calculator const handleNumberInput = (num: string) => { if (display === "0" || resetDisplay) { setDisplay(num) setResetDisplay(false) } else { setDisplay(display + num) } } // Handle decimal point const handleDecimal = () => { if (resetDisplay) { setDisplay("0.") setResetDisplay(false) } else if (!display.includes(".")) { setDisplay(display + ".") } } // Handle operations const handleOperation = (op: string) => { const currentValue = Number.parseFloat(display) if (previousValue !== null && !resetDisplay) { const result = calculateResult(previousValue, currentValue, operation!) setDisplay(result.toString()) setPreviousValue(result) addToHistory(`${previousValue} ${operation} ${currentValue} = ${result}`) } else { setPreviousValue(currentValue) } setOperation(op) setResetDisplay(true) } // Calculate result based on operation const calculateResult = (a: number, b: number, op: string): number => { switch (op) { case "+": return a + b case "-": return a - b case "×": return a * b case "÷": return a / b case "%": return a % b default: return b } } // Handle equals const handleEquals = () => { if (previousValue === null || operation === null) return const currentValue = Number.parseFloat(display) const result = calculateResult(previousValue, currentValue, operation) addToHistory(`${previousValue} ${operation} ${currentValue} = ${result}`) setDisplay(result.toString()) setPreviousValue(null) setOperation(null) setResetDisplay(true) } // Clear display const handleClear = () => { setDisplay("0") setPreviousValue(null) setOperation(null) setResetDisplay(false) } // Add to history const addToHistory = (entry: string) => { setHistory((prev) => [entry, ...prev].slice(0, 10)) } // Clear history const clearHistory = () => { setHistory([]) } // Handle unit conversion const handleUnitConversion = () => { const value = Number.parseFloat(fromValue) let result = 0 // Length conversions if (fromUnit === "cm" && toUnit === "inch") { result = value / 2.54 } else if (fromUnit === "inch" && toUnit === "cm") { result = value * 2.54 } else if (fromUnit === "m" && toUnit === "ft") { result = value * 3.28084 } else if (fromUnit === "ft" && toUnit === "m") { result = value / 3.28084 } else if (fromUnit === "km" && toUnit === "mile") { result = value * 0.621371 } else if (fromUnit === "mile" && toUnit === "km") { result = value * 1.60934 } // Weight conversions else if (fromUnit === "kg" && toUnit === "lb") { result = value * 2.20462 } else if (fromUnit === "lb" && toUnit === "kg") { result = value / 2.20462 } // Temperature conversions else if (fromUnit === "celsius" && toUnit === "fahrenheit") { result = (value * 9) / 5 + 32 } else if (fromUnit === "fahrenheit" && toUnit === "celsius") { result = ((value - 32) * 5) / 9 } // Same unit else { result = value } setToValue(result.toFixed(2)) } // Scientific calculator functions const handleScientificOperation = (operation: string) => { const value = Number.parseFloat(scientificDisplay) let result = 0 switch (operation) { case "sin": result = Math.sin(value * (Math.PI / 180)) // Convert to radians break case "cos": result = Math.cos(value * (Math.PI / 180)) break case "tan": result = Math.tan(value * (Math.PI / 180)) break case "log": result = Math.log10(value) break case "ln": result = Math.log(value) break case "sqrt": result = Math.sqrt(value) break case "square": result = value * value break case "1/x": result = 1 / value break case "exp": result = Math.exp(value) break case "pi": result = Math.PI break default: result = value } setScientificDisplay(result.toString()) } return (

Standard Scientific Converter History {/* Standard Calculator */}

{operation && (

{previousValue} {operation}

)}

{display}

{/* Scientific Calculator */}

{scientificDisplay}

{showScientificFunctions ? (

) : (

)} {/* Unit Converter */}

From

setFromValue(e.target.value)} className="flex-1" />

{/* History */}

Calculation History

{history.length === 0 ? (

No history yet

) : (

{entry}

)}

) } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], }