iPhone Calculator

Open In Editor Video Publish Your Code

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Andev Web</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="calculator">
    <div class="top-container">
    </div>
    <div class="value">0</div>
    <div class="buttons-container">
      <div class="button function ac">AC</div>
      <div class="button function pm">±</div>
      <div class="button function percent">%</div>
      <div class="button operator division">÷</div>
      <div class="button number-7">7</div>
      <div class="button number-8">8</div>
      <div class="button number-9">9</div>
      <div class="button operator multiplication">×</div>
      <div class="button number-4">4</div>
      <div class="button number-5">5</div>
      <div class="button number-6">6</div>
      <div class="button operator subtraction">−</div>
      <div class="button number-1">1</div>
      <div class="button number-2">2</div>
      <div class="button number-3">3</div>
      <div class="button operator addition">+</div>
      <div class="button number-0">0</div>
      <div class="button decimal">.</div>
      <div class="button operator equal">=</div>
    </div>
    <div class="bottom"></div>
  </div>
<script src="app.js"></script>
</body>
</html>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

body {
  font-family: "Helvetica Neue", sans-serif;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f0f0f0;
}

.calculator {
  background: black;
  border-radius: 50px;
  color: white;
  height: 609px;
  padding: 10px;
  position: relative;
  width: 282px;
}

.top-container {
  display: flex;
  height: 125px;
  justify-content: space-between;
  padding: 0 10px;
}

.value {
  font-size: 65px;
  font-weight: 300;
  height: 79px;
  margin-bottom: 10px;
  margin-right: 10px;
  text-align: right;
}

.buttons-container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(5, 1fr);
}

.button {
  align-items: center;
  background: #333;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  font-size: 22.5px;
  height: 55px;
  justify-content: center;
  transition: filter .3s;
  width: 55px;
}

.button.function {
  color: black;
  background: #a5a5a5;
}

.button.operator {
  background: #f1a33c;
}

.button.number-0 {
  border-radius: 27.5px;
  grid-column: 1 / span 2;
  justify-content: flex-start;
  padding-left: 21.5px;
  width: 125px;
}

.button:active,
.button:focus {
  filter: brightness(120%);
}

.bottom {
  width: 100px;
  height: 2.5px;
  background: white;
  border-radius: 2px;
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
}

JS

const hourEl = document.querySelector('.hour');
const minuteEl = document.querySelector('.minute');
const valueEl = document.querySelector('.value');

const acEl = document.querySelector('.ac');
const pmEl = document.querySelector('.pm');
const percentEl = document.querySelector('.percent');

const additionEl = document.querySelector('.addition');
const subtractionEl = document.querySelector('.subtraction');
const multiplicationEl = document.querySelector('.multiplication');
const divisionEl = document.querySelector('.division');
const equalEl = document.querySelector('.equal');

const decimalEl = document.querySelector('.decimal');
const number0El = document.querySelector('.number-0');
const number1El = document.querySelector('.number-1');
const number2El = document.querySelector('.number-2');
const number3El = document.querySelector('.number-3');
const number4El = document.querySelector('.number-4');
const number5El = document.querySelector('.number-5');
const number6El = document.querySelector('.number-6');
const number7El = document.querySelector('.number-7');
const number8El = document.querySelector('.number-8');
const number9El = document.querySelector('.number-9');
const numberElArray = [
  number0El, number1El, number2El, number3El, number4El,
  number5El, number6El, number7El, number8El, number9El
];

let valueStrInMemory = null;
let operatorInMemory = null;

const getValueAsStr = () => valueEl.textContent.split(',').join('');

const getValueAsNum = () => {
  return parseFloat(getValueAsStr());
};

const setStrAsValue = (valueStr) => {
  if (valueStr[valueStr.length - 1] === '.') {
    valueEl.textContent += '.';
    return;
  }

const [wholeNumStr, decimalStr] = valueStr.split('.');
  if (decimalStr) {
    valueEl.textContent =
      parseFloat(wholeNumStr).toLocaleString() + '.' + decimalStr;
  } else {
    valueEl.textContent = parseFloat(wholeNumStr).toLocaleString();
  }
};

return newValueNum.toString();
};

const handleOperatorClick = (operation) => {
  const currentValueStr = getValueAsStr();

if (!valueStrInMemory) {
    valueStrInMemory = currentValueStr;
    operatorInMemory = operation;
    setStrAsValue('0');
    return;
  }
  valueStrInMemory = getResultOfOperationAsStr();
  operatorInMemory = operation;
  setStrAsValue('0');
};

acEl.addEventListener('click', () => {
  setStrAsValue('0');
  valueStrInMemory = null;
  operatorInMemory = null;
});
pmEl.addEventListener('click', () => {
  const currentValueNum = getValueAsNum();
  const currentValueStr = getValueAsStr();

if (currentValueStr === '-0') {
    setStrAsValue('0');
    return;
  }
  if (currentValueNum >= 0) {
    setStrAsValue('-' + currentValueStr);
  } else {
    setStrAsValue(currentValueStr.substring(1));
  }
});
percentEl.addEventListener('click', () => {
  const currentValueNum = getValueAsNum();
  const newValueNum = currentValueNum / 100;
  setStrAsValue(newValueNum.toString());
  valueStrInMemory = null;
  operatorInMemory = null;
});

additionEl.addEventListener('click', () => {
  handleOperatorClick('addition');
});
subtractionEl.addEventListener('click', () => {
  handleOperatorClick('subtraction');
});
multiplicationEl.addEventListener('click', () => {
  handleOperatorClick('multiplication');
});
divisionEl.addEventListener('click', () => {
  handleOperatorClick('division');
});
equalEl.addEventListener('click', () => {
  if (valueStrInMemory) {
    setStrAsValue(getResultOfOperationAsStr());
    valueStrInMemory = null;
    operatorInMemory = null;
  }
});

for (let i=0; i < numberElArray.length; i++) {
  const numberEl = numberElArray[i];
  numberEl.addEventListener('click', () => {
    handleNumberClick(i.toString());
  });
}
decimalEl.addEventListener('click', () => {
  const currentValueStr = getValueAsStr();
  if (!currentValueStr.includes('.')) {
    setStrAsValue(currentValueStr + '.');
  }
});

const updateTime = () => {
  const currentTime = new Date();

let currentHour = currentTime.getHours();
  const currentMinute = currentTime.getMinutes();

if (currentHour > 12) {
    currentHour -= 12;
  }
  hourEl.textContent = currentHour.toString();
  minuteEl.textContent = currentMinute.toString().padStart(2, '0');
}
setInterval(updateTime, 1000);
updateTime();

iPhone Calculator

Recommended

Calculator

Scientific Calculator

HTML

CSS

JS

Recommended

Calculator

Scientific Calculator

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS