Calculatrice iPhone

Ouvrir dans l'éditeur Publiez votre code

Recommandé

15 October 2024

la nouvelle calculatrice de mikey

HTML

<!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();

Calculatrice iPhone

Recommandé

Calculatrice iOS

code de test de l'iPhone 16

la nouvelle calculatrice de mikey

HTML

CSS

JS

Recommandé

Calculatrice iOS

code de test de l'iPhone 16

la nouvelle calculatrice de mikey

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS