React use Calculator:
I have created a simple calculator for beginner-level projects. it is used to class components to add functionality. Then added the style using css.
example code:
calculator.js
// Calculator.js
import React from 'react';
import './calculator.css';
class Calculator extends React.Component{
constructor(props) {
super(props);
this.state = {
displayValue: "", // Initialize the display value
};
}
// handlingButton
handleButtonClick = (value) => {
if (value === "=") {
// Handle the calculation
this.calculateResult();
} else if (value === "c") {
// Clear the display
this.clearDisplay();
} else {
// Update the display with the clicked button value
this.setState((prevState) => ({
displayValue: prevState.displayValue + value,
}));
}
};
// calculating value
calculateResult = () => {
try {
// eslint-disable-next-line no-eval
const result = eval(this.state.displayValue);
this.setState({ displayValue: result });
} catch (error) {
this.setState({ displayValue: "Error" });
}
};
clearDisplay = () => {
this.setState({ displayValue: "",
});
};
render() {
return (
<>
<h1>Calculator</h1>
<div className="calculator">
<div className="display">{this.state.displayValue}</div>
<div className="buttons">
<button onClick={() => this.handleButtonClick('7')}>7</button>
<button onClick={() => this.handleButtonClick('8')}>8</button>
<button onClick={() => this.handleButtonClick('9')}>9</button>
<button onClick={() => this.handleButtonClick('/')}className='symbol'>/</button>
<button onClick={() => this.handleButtonClick('4')}>4</button>
<button onClick={() => this.handleButtonClick('5')}>5</button>
<button onClick={() => this.handleButtonClick('6')}>6</button>
<button onClick={() => this.handleButtonClick('*')} className='symbol'>*</button>
<button onClick={() => this.handleButtonClick('1')}>1</button>
<button onClick={() => this.handleButtonClick('2')}>2</button>
<button onClick={() => this.handleButtonClick('3')}>3</button>
<button onClick={() => this.handleButtonClick('-')} className='symbol'>-</button>
<button onClick={() => this.handleButtonClick('0')}>0</button>
<button onClick={() => this.handleButtonClick('.')}>.</button>
<button onClick={this.clearDisplay} className='ClearButton'>C</button>
<button onClick={() => this.handleButtonClick('+')}className='symbol'>+</button>
<button onClick={() => this.handleButtonClick('=')} className="equals">
=
</button>
</div>
</div>
</>
);
}
}
export default Calculator;
calculator.css
body{
margin: 0;
padding: 0;
background-color: rgb(2, 2, 41);
}
h1{
color: white;
text-align: center;
text-transform: uppercase;
text-decoration:1px solid white;
}
.calculator {
width: 300px;
margin: 50px auto;
border: 1px solid #ccc;
border-radius: 20px;
padding: 20px;
background-color: rgb(2, 2, 41);
}
.display {
font-size: 24px;
margin-bottom: 10px;
width: 280px;
height: 40px;
padding: 10px;
text-align: end;
background-color: #f5f5f5;
border:none;
border-radius: 20px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 6px;
}
button {
font-size: 18px;
padding: 20px;
border: 1px solid #ddd;
border-radius: 22px;
cursor: pointer;
}
.symbol{
background-color: #e67306;
color: #e7f0f7;
border: none;
}
.symbol:hover{
background-color: rgb(246, 246, 247);
color: black;
}
.ClearButton{
background-color: rgb(6, 97, 172);
color: white;
border: none;
}
.ClearButton:hover{
background-color: #ccc;
color: black;
}
.equals {
grid-column: span 2;
background-color: #e67306;
color: #e7f0f7;
border: none;
}
.equals:hover{
background-color: rgb(246, 246, 247);
color: black;
}
app.js
import Calculator from "./simpleCalculator"
function App() {
return (
<Calculator/>
);
}
export default App;
No comments:
Post a Comment