Skip to content

Instantly share code, notes, and snippets.

@gjorgiev

gjorgiev/Calculator.css

Created January 26, 2021 21:51
Show Gist options
  • Save gjorgiev/3f7a58b5cd6fba53148439c4dd8313d8 to your computer and use it in GitHub Desktop.
Save gjorgiev/3f7a58b5cd6fba53148439c4dd8313d8 to your computer and use it in GitHub Desktop.
Download ZIP
Calculator Component
Raw
Calculator.css
body {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.Calculator {
width: 400px;
height: 300px;
position: relative;
margin: 25px;
}
Raw
Calculator.js
import React, {Component} from 'react';
import Button from './Button';
import Keypad from './Keypad';
import './Calculator.css';
import Display from './Display';
class Calculator extends Component {
render(){
return(
<div className="Calculator">
<Display data={this.state.data}/>
<Keypad>
<Button label="C" value="clear" />
<Button label="7" value="7" />
<Button label="4" value="4" />
<Button label="1" value="1" />
<Button label="0" value="0" />
<Button label="/" value="/" />
<Button label="8" value="8" />
<Button label="5" value="5" />
<Button label="2" value="2" />
<Button label="." value="." />
<Button label="x" value="*" />
<Button label="9" value="9" />
<Button label="6" value="6" />
<Button label="3" value="3" />
<Button label="" value="null" />
<Button label="-" value="-" />
<Button label="+" size="2" value="+" />
<Button label="=" size="2" value="equal" />
</Keypad>
</div>
);
}
}
export default Calculator;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment