diff --git a/frontend/src/pages/calculator.tsx b/frontend/src/pages/calculator.tsx index e723421..778248c 100644 --- a/frontend/src/pages/calculator.tsx +++ b/frontend/src/pages/calculator.tsx @@ -16,14 +16,14 @@ const CalculatorPage = () => { const [base, setBase] = useState<'hex' | 'dec' | 'oct' | 'bin'>('dec') const [operation, setOperation] = useState<'+' | '-' | '*' | '/' | 'AND' | 'OR' | 'XOR'>('+') const [result, setResult] = useState(null) + const [activeInput, setActiveInput] = useState<'val1' | 'val2'>('val1') - const parseInput = (val: string, base: number) => parseInt(val, base) + const baseMap = { hex: 16, dec: 10, oct: 8, bin: 2 } const handleCalculate = () => { try { - const baseMap = { hex: 16, dec: 10, oct: 8, bin: 2 } - const v1 = parseInput(val1, baseMap[base]) - const v2 = parseInput(val2, baseMap[base]) + const v1 = parseInt(val1, baseMap[base]) + const v2 = parseInt(val2, baseMap[base]) if (isNaN(v1) || (val2 && isNaN(v2))) throw new Error('Invalid input') @@ -41,10 +41,23 @@ const CalculatorPage = () => { setResult(res.toString(baseMap[base]).toUpperCase()) } catch (e) { - alert('Error: Invalid operation') + alert('Error: Invalid calculation') } } + const keys = base === 'hex' + ? ['7', '8', '9', 'A', '4', '5', '6', 'B', '1', '2', '3', 'C', '0', 'D', 'E', 'F'] + : base === 'dec' + ? ['7', '8', '9', '4', '5', '6', '1', '2', '3', '0'] + : base === 'oct' + ? ['7', '6', '5', '4', '3', '2', '1', '0'] + : ['1', '0'] + + const handleKeyClick = (key: string) => { + if (activeInput === 'val1') setVal1(val1 + key) + else setVal2(val2 + key) + } + return ( <> @@ -57,19 +70,33 @@ const CalculatorPage = () => {
{(['hex', 'dec', 'oct', 'bin'] as const).map(b => ( - setBase(b)} /> + { setBase(b); setVal1(''); setVal2(''); setResult(null); }} /> ))}
-
- setVal1(e.target.value)} className="w-full p-2 border rounded" /> - +
+
setActiveInput('val1')} style={{ borderColor: activeInput === 'val1' ? '#53F6C7' : '#ccc' }}> + +
{val1 || '...'}
+
+
+ - - setVal2(e.target.value)} className="w-full p-2 border rounded" /> +
+
setActiveInput('val2')} style={{ borderColor: activeInput === 'val2' ? '#53F6C7' : '#ccc' }}> + +
{val2 || '...'}
+
+ +
+ {keys.map(k => handleKeyClick(k)} />)} + activeInput === 'val1' ? setVal1(val1.slice(0, -1)) : setVal2(val2.slice(0, -1))} /> + activeInput === 'val1' ? setVal1('') : setVal2('')} /> +
+ @@ -87,4 +114,4 @@ const CalculatorPage = () => { CalculatorPage.getLayout = (page: ReactElement) => {page} -export default CalculatorPage +export default CalculatorPage \ No newline at end of file