Calculator UI

calculator-ui.markdown

Calculator UI

A Pen by Ajil Oommen on CodePen.

License.

index.html

<main>
  <div class="wrapper">
    <div class="card">
      <div class="result-display" id="display">
        0.0
      </div>
      <div class="row">
        <div class="rounded-btn light-grey">
          AC
        </div>
        <div class="rounded-btn light-grey">
          +/-
        </div>
        <div class="rounded-btn light-grey">
          %
        </div>
        <div class="rounded-btn yellow">
          /
        </div>
      </div>
      <div class="row">
        <div class="rounded-btn grey" onClick=buttonPress(7)>
          7
        </div>
        <div class="rounded-btn grey" onClick=buttonPress(8)>
          8
        </div>
        <div class="rounded-btn grey" onClick=buttonPress(9)>
          9
        </div>
        <div class="rounded-btn yellow">
          X
        </div>
      </div>
      <div class="row">
        <div class="rounded-btn grey" onClick=buttonPress(4)>
          4
        </div>
        <div class="rounded-btn grey" onClick=buttonPress(5)>
          5
        </div>
        <div class="rounded-btn grey" onClick=buttonPress(6)>
          6
        </div>
        <div class="rounded-btn yellow">
          -
        </div>
      </div>
      <div class="row">
        <div class="rounded-btn grey" onClick=buttonPress(1)>
          1
        </div>
        <div class="rounded-btn grey" onClick=buttonPress(2)>
          2
        </div>
        <div class="rounded-btn grey" onClick=buttonPress(3)>
          3
        </div>
        <div class="rounded-btn yellow">
          +
        </div>
      </div>
      <div class="row">
        <div class="rounded-btn-wide grey" onClick=buttonPress(0)>
          0
        </div>
        <div class="rounded-btn grey">
          .
        </div>
        <div class="rounded-btn yellow">
          =
        </div>
      </div>
    </div>
  </div>
</main>

script.typescript

let display: double = 0.0;

function buttonPress(number: integer) {
  display = number;
  updateDisplay();
}

function updateDisplay() {
  document.elementById('display') = `${display}`;
}

style.scss

$mono: "Source Code Pro", monospace;
body {
  background-color: #444;
  height: 100vh;
  width: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px;
  padding: 0px;
}
.rounded-btn {
  height: 45px;
  width: 45px;
  border-radius: 50%;
  margin: 2.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  @extend .mono-font;

  &-wide {
    @extend .rounded-btn;
    width: 95px;
    border-radius: 40px;
  }
}
.grey {
  background-color: #333333;
  color: white;
  &:hover {
      background-color: #888888;
      color: black;
  }
}
.light-grey {
  background-color: #888888;
  &:hover {
      background-color: #333333;
      color: white;
  }
}
.yellow {
  background-color: #c7a32b;
  &:hover {
    background-color: wheat;
  }
}
.row {
  display: flex;
}
.card {
  padding: 1em;
  margin: 0.5em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #222;
  align-self: center;
  border-radius: 8px;
  -webkit-box-shadow: 0px 10px 29px 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 10px 29px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 10px 29px 1px rgba(0, 0, 0, 0.2);
}
.result-display {
  align-items: flex-end;
  justify-content: flex-end;
  width: 80%;
  height: 55px;
  background-color: #eeeeee;
  display: flex;
  padding: 1em;
  margin: 1em;
  @extend .mono-font;
}
.mono-font {
  font-family: $mono;
  font-size: 1em;
}