Calculator

calculator.markdown

Calculator

I'll update this later

A Pen by Ted Pritchard on CodePen.

License.

index.html

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

script.babel

class CalculatorInput extends React.Component {
  render() {
    return (
      <div class="buttons">
        <div class="operators">
          <div>+</div>
          <div>-</div>
          <div>&times;</div>
          <div>&divide;</div>
        </div>
        <div class="leftPanel">
          <div class="numbers">
            <div>7</div>
            <div>8</div>
            <div>9</div>
          </div>
          <div class="numbers">
            <div>4</div>
            <div>5</div>
            <div>6</div>
          </div>
          <div class="numbers">
            <div>1</div>
            <div>2</div>
            <div>3</div>
          </div>
          <div class="numbers">
            <div>0</div>
            <div>.</div>
            <div id="clear">C</div>
          </div>
        </div>
        <div class="equal" id="result">=</div>
      </div>
    );
  }
}

class ResultDisplay extends React.Component {
  render() {
    return (
      <div class="input">{this.props.displayValue}</div>
    );
  }
}

class Calculator extends React.Component {
  render() {
    return (
      <div class="calculator">
        <ResultDisplay displayValue="10"/>
        <CalculatorInput />
      </div>
    );
  }
}

ReactDOM.render(
  <Calculator />,
  document.getElementById('container')
);

scripts

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

style.scss

$padding: 10px;
$width: 500px;
$dark-grey: #ddd;
$mid-grey: #bbb;
$light-grey: #aaa;
$light-blue: #1857bb;
$dark-blue: #4d90fe;
$button-width: 80px;

@mixin box-shadow($top: 0px, $left: 1px, $blur: 4px, $spread: 0px, $color: rgba(0, 0, 0, 0.2)) {
  box-shadow: $top $left $blur $spread $color;
}

body {
  width: $width;
  margin: 4% auto;
  font-family: "Source Sans Pro", sans-serif;
  letter-spacing: 5px;
  font-size: 1.8rem;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.calculator {
  padding: $padding * 2;
  @include box-shadow();
  border-radius: 1px;
}

.input {
  border: 1px solid $dark-grey;
  border-radius: 1px;
  height: 60px;
  padding-right: 15px;
  padding-top: $padding;
  text-align: right;
  margin-right: 6px;
  font-size: 2.5rem;
  overflow-x: auto;
}

// .buttons {}

// .operators {}

.operators div {
  display: inline-block;
  border: 1px solid $mid-grey;
  border-radius: 1px;
  width: $button-width;
  text-align: center;
  padding: $padding;
  margin: 20px 4px 10px 0;
  cursor: pointer;
  background-color: $dark-grey;

  &:hover {
    background-color: $dark-grey;
    border-color: $light-grey;
    @include box-shadow();
  }

  &:active {
    font-weight: bold;
  }
}

.leftPanel {
  display: inline-block;
}

.numbers div {
  display: inline-block;
  border: 1px solid $dark-grey;
  border-radius: 1px;
  width: $button-width;
  text-align: center;
  padding: $padding;
  margin: 10px 4px 10px 0;
  cursor: pointer;
  background-color: #f9f9f9;

  &:hover {
    background-color: #f1f1f1;
    @include box-shadow();
    border-color: $mid-grey;
  }
}

div.equal {
  display: inline-block;
  border: 1px solid #3079ed;
  border-radius: 1px;
  width: $button-width;
  text-align: center;
  padding: 127px $padding;
  margin: 10px 6px 10px 0;
  vertical-align: top;
  cursor: pointer;
  color: #fff;
  background-color: #4d90fe;

  &:hover {
    background-color: #307cf9;
    @include box-shadow();
    border-color: $light-blue;
  }

  &:active {
    font-weight: bold;
  }
}