Webleb - Snippets de Código -

1947 Andev.web

Abrir no Editor Publique Seu Código

Recomendado

8 August 2025

Efeito de brilho do cartão CSS

10 November 2024

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

Recomendado

EU TE AMO

Efeito de brilho do cartão CSS

Jogo da velha

HTML

CSS

JS

Recomendado

EU TE AMO

Efeito de brilho do cartão CSS

Jogo da velha

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS