Calculator

by Allie Yu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js"></script>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tag above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>Claculator React App</title>
  </head>
  <body>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start`.
      To create a production bundle, use `npm run build`.
    -->
  </body>
</html>

CSS

.App {
  text-align: center;
}


@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

div{
  overflow:hidden;
}
div.calculator{
  position:relative;
	width:360px;
	height:480px;
	margin:3% auto;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -o-user-select:none;
  user-select:none;
	background: rgba(230,220,210,1);
	border-radius:60px;
	box-shadow:0px -100px 500px 80px rgba(255,255,255,0.2),
				0px -130px 800px 30px rgba(255,140,30,0.1),
				inset 0px -11px 30px rgba(55,45,35,0.6),
				inset 0px -7px 8px rgba(55,45,35,0.7),
				inset 0px -1px 1px rgba(255,255,255,0.4),
				inset 0px 20px 3px rgba(255,255,255,0.2),
				0px 17px 27px rgba(0,0,0,0.7),
				0px 4px 3px rgba(0,0,0,0.8),
				-2px -2px 2px rgba(0,0,0,0.5),
				inset 1px 1px 1px rgba(255,255,255,0.5),
				inset 0px 2px 2px rgba(0,0,0,0.2),
				inset 1px 0px 2px rgba(0,0,0,0.4),
				inset -1px 0px 2px rgba(0,0,0,0.4);
}
div.calculator div.numinput{
	position:relative;
	display:block;
	width:290px;
	height:43px;
	line-height:43px;
	margin:auto;
	top:30px;
	font-family:digital-7;
	font-size:28pt;
	text-align:right;
	padding-right:9px;
	box-sizing:border-box;
	background:rgba(206,206,182,0.7);
	border-radius:60px;
	border:1px solid rgba(255,255,255,0.7);
	box-shadow:inset 0px -3px 10px rgba(0,0,0,0.05),
				inset 1px 3px 9px rgba(0,0,0,0.3),
				inset 1px 1px 1px rgba(0,0,0,0.2),
				inset -1px -1px 1px rgba(0,0,0,0.1),
				inset 0px 2px 1px 2px rgba(0,0,0,0.1);
}

div.calculator div.buttongrid{
	float:left;
	height:400px;
	width:300px;
	margin:60px 20px 0px 30px;
}
div.calculator div.buttongrid button{
	position:relative;
	width:54px;
	height:54px;
	text-align:center;
	float:left;
	font-family:"geometry";
	font-size:23pt;
	color: rgba(0,0,0,0.65);
    text-shadow:1px 1px 2px rgba(255,255,255,1),
				0px 0 0 #000,
				0px 1px 1px rgba(255,255,255,1);
	margin:7px;
	background: rgba(240,230,220,1);
	border-radius:18px;
	border:1px...

Babel + JSX

class App extends React.Component {

   constructor(props){
    super(props);
    this.state = {
      display:'0'
    }
    this.changeValue = this.changeValue.bind(this);
    this.equalEval = this.equalEval.bind(this);
  }

  changeValue(event){
    if(event.target.value==='CE'){
      this.setState({display: '0'});
    }else{
      this.setState({
        display: (this.state.display==="0" ? event.target.value : this.state.display + event.target.value)
      });
    }

  }

  equalEval(){
    this.setState({
        display: eval(this.state.display)
    });
  }

  render() {
    return (
      <div className="App">

        <div className="calculator">
      		<div className="numinput">{this.state.display}</div>
      		<div className="buttongrid">

            <button value="(" id="leftBrackets" onClick={this.changeValue}>(</button>
            <button value=")" id="rightBrackets" onClick={this.changeValue}>)</button>
            <button value=" % " id="percentage" onClick={this.changeValue}>%</button>
            <button value="CE" id="divide" className="commands" onClick={this.changeValue}>CE</button>

            <button value="7" id="number7" onClick={this.changeValue}>7</button>
            <button value="8" id="number8" onClick={this.changeValue}>8</button>
            <button value="9" id="number9" onClick={this.changeValue}>9</button>
            <button value=" / " id="divide" className="operations" onClick={this.changeValue}>&divide;</button>

            <button value="4" id="number4" onClick={this.changeValue}>4</button>
            <button value="5" id="number5" onClick={this.changeValue}>5</button>
            <button value="6" id="number6" onClick={this.changeValue}>6</button>
            <button value=" * " id="mult" className="operations" onClick={this.changeValue}>x</button>

            <button value="1" id="number1" onClick={this.changeValue}>1</button>
            <button value="2" id="number2" onClick={this.changeValue}>2</button>
      ...