<div className="keyboard-keys"> {/* Number row */} <div className="key-row"> {[1,2,3,4,5,6,7,8,9,0].map(num => ( <button key={num} onClick={() => setInputValue(prev => prev + num)}> {num} </button> ))} </div> {/* Operators row */} <div className="key-row"> <button onClick={() => setInputValue(prev => prev + '+')}>+</button> <button onClick={() => setInputValue(prev => prev + '-')}>-</button> <button onClick={() => setInputValue(prev => prev + '*')}>*</button> <button onClick={() => setInputValue(prev => prev + '/')}>/</button> <button onClick={handleGreaterThan} className="special-key"> > </button> </div> {/* Action buttons */} <div className="key-row"> <button onClick={() => setInputValue('')}>C</button> <button onClick={() => setInputValue(prev => prev.slice(0, -1))}>⌫</button> <button onClick={evaluateComparison} className="equals-key"> = </button> </div> </div> {/* Comparison result panel */} {showComparison && ( <div className="comparison-panel"> <h3>Greater Than Comparison</h3> <input type="number" placeholder="Enter value to compare" value={compareValue} onChange={(e) => setCompareValue(e.target.value)} /> <button onClick={() => { const currentValue = parseFloat(inputValue.split('>')[0]); const comparison = parseFloat(compareValue); const isGreater = currentValue > comparison; alert(`${currentValue} > ${comparison}: ${isGreater}`); setShowComparison(false); }}> Compare </button> </div> )} </div> ); };
export default CustomKeyboard; .keyboard-container { width: 100%; max-width: 600px; margin: 0 auto; background: #2c3e50; border-radius: 12px; padding: 20px; box-shadow: 0 8px 16px rgba(0,0,0,0.2); } .display { margin-bottom: 20px; } greater than on keyboard
.keyboard-keys button { flex: 1; height: 60px; font-size: 20px; border: none; border-radius: 8px; background: #34495e; color: white; cursor: pointer; transition: all 0.2s ease; font-weight: bold; } {/* Number row */} <
this.container.innerHTML = keyboardHTML; } button key={num} onClick={() =>
inputElement.addEventListener('blur', () => { setTimeout(() => { this.container.style.display = 'none'; }, 200); }); } }