React-Calc

index.html

<div id="calc-app" class="loading">Loading</div>

<div class="clear"></div>

react-calc.markdown

React-Calc

A Simple Calculator made in React.JS

A Pen by Faddah Wolf on CodePen.

License.

script.babel

var spcButtonArr = [
  {
    name: "M+",
    label: "M+",
    buttonStyle: "btn btn-default btn-spc-row",
    id: 11
  },
  {
    name: "M-",
    label: "M-",
    buttonStyle: "btn btn-default btn-spc-row",
    id: 12
  },
  {
    name: "MR",
    label: "MR",
    buttonStyle: "btn btn-success btn-spc-row",
    id: 13
  },
  {
    name: "MC",
    label: "MC",
    buttonStyle: "btn btn-danger btn-spc-row",
    id: 15
  },
  {
    name: "%",
    label: "%",
    buttonStyle: "btn btn-success btn-spc-row",
    id: 16
  },
  {
    name: "AC",
    label: "AC",
    buttonStyle: "btn btn-warning btn-spc-row",
    id: 17
  }
];

var buttonArr = [
  {
    name: "7",
    label: "7",
    id: 7
  },
  {
    name: "8",
    label: "8",
    id: 8
  },
  {
    name: "9",
    label: "9",
    id: 9
  },
  {
    name: "+",
    label: "+",
    id: 10
  },
  {
    name: "4",
    label: "4",
    id: 4
  },
  {
    name: "5",
    label: "5",
    id: 5
  },
  {
    name: "6",
    label: "6",
    id: 6
  },
  {
    name: "-",
    label: "-",
    id: 14
  },
  {
    name: "1",
    label: "1",
    id: 1
  },
  {
    name: "2",
    label: "2",
    id: 2
  },
  {
    name: "3",
    label: "3",
    id: 3
  },
  {
    name: "x",
    label: "x",
    id: 18
  },
  {
    name: "*",
    label: "*",
    id: 19
  },
  {
    name: "0",
    label: "0",
    id: 0
  },
  {
    name: ".",
    label: ".",
    id: 21
  },
  {
    name: "÷",
    label: "÷",
    id: 22
  }
];

let nextId:number = 23;

var intitialNumbers = {
  inputReceive: "0.00",
  result: 0.00,
  operand1: 0.00,
  operand2: 0.00,
  memTotal: 0.00
}

var Display = React.createClass({
  propTypes: {
    intitialNumbers: React.PropTypes.objectOf(React.PropTypes.shape({
      inputReceive: React.PropTypes.string.isRequired,
      result: React.PropTypes.number.isRequired,
      operand1: React.PropTypes.number.isRequired,
      operand2: React.PropTypes.number.isRequired,
      memTotal: React.PropTypes.number.isRequired
    })).isRequired,
  },
  
  render: function() {

    return (
      <div id="grid">
    
        <div>
          <textarea className="grid-display"  name="display" readonly="true" rows="1" maxlength="15">{intitialNumbers.inputReceive}</textarea>
        </div>      
        <SpecialButtonRow />
        <ButtonsRow />
      </div>
    );
  }
  
});

var SpecialButtonRow = React.createClass({
  propTypes: {
    spcButtonArr: React.PropTypes.arrayOf(React.PropTypes.shape({
      name: React.PropTypes.string.isRequired,
      label: React.PropTypes.string.isRequired,
      buttonStyle: React.PropTypes.string.isRequired,
      id: React.PropTypes.number.isRequired,
    })).isRequired,
  },
  
  render: function() {
    return (
      <div>
      {spcButtonArr.map(function(button) {
        return (
          <button type="button" className={button.buttonStyle} onClick={} id={button.name}>
            <span>{button.label}</span>
          </button>
        )})
      }
      </div>
    );
  }
});

var ButtonsRow = React.createClass({
  propTypes: {
    buttonArr: React.PropTypes.arrayOf(React.PropTypes.shape({
      name: React.PropTypes.string.isRequired,
      label: React.PropTypes.string.isRequired,
      id: React.PropTypes.number.isRequired,
    })).isRequired,
  },
  
  render: function() {
    return (
      <div>
      {buttonArr.map(function(button) {
        return (
          <button type="button" className="btn btn-info btn-cstm" onClick={} id={button.name}>
            <span>{button.label}</span>
          </button>
        )})
      }
      </div>
    );
  }
});

var Application = React.createClass({
  propTypes: {
    
  },
  
  render: function() {

    return (
      <Display />
    );
  }
  
});

ReactDOM.render(<Application initialSpcButtons={spcButtonArr} initialButtons={buttonArr}/>, document.getElementById('calc-app'));

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="https://cdn.jsdelivr.net/babel/6.0.20/browser.min.js"></script>

style.css

@import 'https://fonts.googleapis.com/css?family=Share+Tech+Mono';
body {
  font-family: 'Share Tech Mono', monospace;
}

#calc-app {
  background-color: #F8F8F8;
  font-family: 'Share Tech Mono', monospace;
  font-size: 24px;
  margin: 8px;
}

.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4, end) 700ms infinite;
  -moz-animation: ellipsis steps(4, end) 700ms infinite;
  -o-animation: ellipsis steps(4, end) 700ms infinite;
  animation: ellipsis steps(4, end) 700ms infinite;
  content: "\2026";
  /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 1.25em;
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 1.25em;
  }
}

@-moz-keyframes ellipsis {
  to {
    width: 1.25em;
  }
}

@-o-keyframes ellipsis {
  to {
    width: 1.25em;
  }
}

.clear {
  clear: both;
}

#grid {
  width: 380px;
  margin: 0 auto;
}

.grid-display {
  width: 99%;
  height: 65px;
  background-color: rgba(91, 192, 222, 0.7);
  font-size: 36px;
  font-weight: bold;
  font-style: italic;
  display: inherit;
  vertical-align: middle;
  text-align: right;
  margin: 1% 7% 2% 0;
  padding: 3% 3% 1% 1%;
  border-radius: 10%;
  resize: none;
}

.btn-cstm {
  width: 23.95%;
  height: 150%;
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 1%;
  margin-right: 1%;
}

.btn-spc-row {
  width: 15.5%;
  height: 150%;
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 1%;
  margin-right: 1.15%;
}

.btn-cstm:hover,
.btn-spc-row:hover {
  color: black;
  transition: 0.3s ease;
}

textarea {
  overflow: hidden;
}