Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="calculator">
  <div class="display">0</div>
  <div class="commands">
    <div class="command is-ac">AC</div>
    <div class="command is-plusMinus">+/-</div>
    <div class="command is-operator is-remain">%</div>
    <div class="command is-operator is-division">÷</div>
    <div class="command is-number">7</div>
    <div class="command is-number">8</div>
    <div class="command is-number">9</div>
    <div class="command is-operator is-multi">×</div>
    <div class="command is-number">4</div>
    <div class="command is-number">5</div>
    <div class="command is-number">6</div>
    <div class="command is-operator is-sub">ー</div>
    <div class="command is-number">1</div>
    <div class="command is-number">2</div>
    <div class="command is-number">3</div>
    <div class="command is-operator is-add">+</div>
    <div class="command is-2col is-number">0</div>
    <div class="command is-dot">.</div>
    <div class="command is-equal">=</div>
  </div>
</div>
<div id="debug">
  <span id="leftNumber"></span>
  <span id="inputOperator"></span>
  <span id="rightNumber"></span>
  =
  <span id="resultNumber"></span>
</div>
              
            
!

CSS

              
                .calculator {
  width: 205px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  margin: auto;
}

.display {
  width: 205px;
  background: #5b5b5b;
  text-align:right;
  border: 1px solid #000;
  box-sizing: border-box;
  color: #fff;
  font-size: 25px;
  padding: 5px 10px;
}

.display.flashing {
  animation-name: flash;
  animation-duration: .1s;
}

@keyframes flash {
  0% {
    color: #5b5b5b; 
  }
  90% {
    color: #5b5b5b; 
  }
  100% {
    color: #fff;
  }
}

.commands {
  width: 204px;
  background: #000;
  display: flex;
  flex-wrap: wrap;
  padding-left: 1px;
}

.command {
  width: 50px;
  height: 45px;
  background: #ddd;
  margin: 0 1px 1px 0;
  text-align: center;
  padding-top: 10px;
  box-sizing: border-box;
  font-size: 18px;
}

.command:nth-child(4n),
.command.is-equal{
  background: orange;
  color: #fff;
}

.command.is-2col {
  flex-grow: 2;
}

.command:active {
  background: #bbb;
}

.command:nth-child(4n):active,
.command.is-equal:active {
 background: #d37e00; 
}

#debug {
  display: none;
}
              
            
!

JS

              
                let displayElem = document.getElementsByClassName('display').item(0);
let numbersElem = document.getElementsByClassName('command is-number');

// 演算子:+
let operatorAddElem = document.getElementsByClassName('command is-operator is-add').item(0);
// 演算子:-
let operatorSubElem = document.getElementsByClassName('command is-operator is-sub').item(0);
// 演算子:×
let operatorMultiElem = document.getElementsByClassName('command is-operator is-multi').item(0);
// 演算子:÷
let operatorDivisionElem = document.getElementsByClassName('command is-operator is-division').item(0);
// 演算子:%
let operatorRemainElem = document.getElementsByClassName('command is-operator is-remain').item(0);

let equalElem = document.getElementsByClassName('command is-equal').item(0);
let acElem = document.getElementsByClassName('command is-ac').item(0);

// デバッグ用のエレメント
let leftNumberElem = document.getElementById('leftNumber');
let inputOperatorElem = document.getElementById('inputOperator');
let rightNumberElem = document.getElementById('rightNumber');
let resultNumberElem = document.getElementById('resultNumber');

// 計算結果
let resultNumber;
// 計算式の左辺
let leftNumber;
// 計算式の右辺
let rightNumber;
// 入力した演算子
let inputOperator;

log();

// 数値をクリックした時
for (let i = 0; i < numbersElem.length; i++) {
  numbersElem.item(i).onclick = displayNumber;
}

// 演算子をクリックした時
operatorAddElem.addEventListener('click', saveAddOperator);
operatorAddElem.addEventListener('click', flashDisplay);
operatorSubElem.addEventListener('click', saveSubOperator);
operatorSubElem.addEventListener('click', flashDisplay);
operatorMultiElem.addEventListener('click', saveMultiOperator);
operatorMultiElem.addEventListener('click', flashDisplay);
operatorDivisionElem.addEventListener('click', saveDivisionOperator);
operatorDivisionElem.addEventListener('click', flashDisplay);
operatorRemainElem.addEventListener('click', saveRemainOperator);
operatorRemainElem.addEventListener('click', flashDisplay);

// イコールをクリックした時
equalElem.addEventListener('click', calculate);
equalElem.addEventListener('click', flashDisplay);

acElem.addEventListener('click', reset);
acElem.addEventListener('click', flashDisplay);

function reset() {
  resultNumber = undefined;
  leftNumber = undefined;
  rightNumber = undefined;
  inputOperator = undefined;
  displayElem.innerText = 0;
  log();
}

function calculate() {
  resultNumber = eval(leftNumber + inputOperator + rightNumber);
  displayElem.innerText = resultNumber;
  log();
}

function displayNumber() {
  if (resultNumber !== undefined) {
    reset();
  }
  if (rightNumber === undefined) {
    rightNumber = 0;
  }
  rightNumber = Number(rightNumber + this.innerText);
  displayElem.innerText = rightNumber;
  log();
}

function createCalculation() {
  if (rightNumber === undefined) {
    // 右辺がまだ入力されていない場合
    if (leftNumber === undefined) {
      // 左辺も決まっていない場合、左辺をゼロに決める
      leftNumber = 0;
    }
    return;
  }
  
  if (leftNumber === undefined) {
    // 左辺が決まっていない場合は右辺を左辺に移動
    leftNumber = rightNumber;
  } else {
    // 左辺が決まっている場合は計算実行
    calculate();
  }

  if (resultNumber !== undefined) {
    // 計算結果が出ている場合、計算結果に対して計算を続けるため、計算結果を左辺に移動
    leftNumber = resultNumber;
  }
  // 計算を続けるため、右辺と計算結果をundefinedに初期化する
  rightNumber = undefined;
  resultNumber = undefined;
  log();
}

function saveAddOperator() {
  createCalculation();
  inputOperator = '+';
  log();
}
function saveSubOperator() {
  createCalculation();
  inputOperator = '-';
  log();
}
function saveMultiOperator() {
  createCalculation();
  inputOperator = '*';
  log();
}
function saveDivisionOperator() {
  createCalculation();
  inputOperator = '/';
  log();
}
function saveRemainOperator() {
  createCalculation();
  inputOperator = '%';
  log();
}

function log() {
  leftNumberElem.innerText = leftNumber;
  inputOperatorElem.innerText = inputOperator;
  rightNumberElem.innerText = rightNumber;
  resultNumberElem.innerText = resultNumber;
}

function flashDisplay() {
  displayElem.classList.add('flashing');
  let remove = function(){
    displayElem.classList.remove('flashing');
  };
  setTimeout(remove, 100);
}
              
            
!
999px

Console