Calculator in JS - Zipline

by jshacker

HTML

<div class="calculator">
  <div class="heading">Free Code Camp</div>
  <div class="sub-heading">Electronic Calculator</div>
  <div class="lcd">23</div>
</div>

CSS

body {
  background-color: white;
}
.calculator {
  border-radius: 50% / 10%;
  background-color: #eee;
  height: 360px;
  width: 200px;
  padding: 20px 50px;
}
.heading,
.sub-heading {
  padding: 0.1em;
  font-size: 0.8em;
  color: #666;
  text-align: center;
  font-family: monospace;
}
.sub-heading {
  text-transform: uppercase;
  font-size: 1em;
}
.lcd {
  position: relative;
  left: -5px;
  margin-top: 10px;
  padding: 5px;
  background-color: rgba(150, 250, 200, 0.6);
  width: 100%;
  height: 40px;
  font-size: 35px;
  font-family: monospace;
  text-align: right;
  color: rgba(100, 100, 100, 0.3);
}