Calculator
import { useState } from 'react';
import './App.css';
function App() {
const [input, setInput] = useState('');
const [result, setResult] = useState('');
const handleButtonClick = (value) => {
setInput((prevInput) => prevInput + value);
};
const calculateResult = () => {
try {
// Use eval to calculate the result of the expression
const evalResult = eval(input);
setResult(evalResult);
setInput('');
} catch (error) {
setResult('Error');
}
};
const clearInput = () => {
setInput('');
setResult('');
};
return (
<>
<div>
<h1>Simple Calculator</h1>
</div>
<div className="calculator">
<div className="display">
<p>{input}</p>
<p>= {result}</p>
</div>
<div className="buttons">
<button onClick={() => handleButtonClick('1')}>1</button>
<button onClick={() => handleButtonClick('2')}>2</button>
<button onClick={() => handleButtonClick('3')}>3</button><br />
<button onClick={() => handleButtonClick('+')}>+</button><br />
<button onClick={() => handleButtonClick('4')}>4</button>
<button onClick={() => handleButtonClick('5')}>5</button>
<button onClick={() => handleButtonClick('6')}>6</button><br />
<button onClick={() => handleButtonClick('-')}>-</button><br />
<button onClick={() => handleButtonClick('7')}>7</button>
<button onClick={() => handleButtonClick('8')}>8</button>
<button onClick={() => handleButtonClick('9')}>9</button>
<button onClick={() => handleButtonClick('*')}>*</button>
<button onClick={() => handleButtonClick('0')}>0</button>
<button onClick={() => handleButtonClick('.')}>,</button>
<button onClick={calculateResult}>=</button>
<button onClick={() => handleButtonClick('/')}>/</button>
<button onClick={clearInput}>C</button>
</div>
</div>
</>
);
}
export default App;
css
body {
font-family: Arial, sans-serif;
background-color: #e00202;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
h1 {
text-align: center;
color: #333;
}
.calculator {
background-color: #e0acac;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 300px;
}
.display {
background-color: #8bd317;
border-radius: 5px;
padding: 10px;
margin-bottom: 20px;
text-align: right;
font-size: 24px;
height: 60px;
overflow: hidden;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
padding: 20px;
font-size: 18px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: rgb(221, 5, 5);
cursor: pointer;
transition: background-color 0.2s;
}
button:hover {
background-color: #0056b3;
}
button:active {
background-color: #004494;
}
@media (max-width: 400px) {
.calculator {
width: 90%;
}
.display {
font-size: 20px;
}
button {
padding: 15px;
font-size: 16px;
}
}
Comments
Post a Comment