WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
2385
Andev.web
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
21 August 2025
Animazione fantasma CSS
13 June 2025
caricamento della tostatura delle uova
HTML
Copy
Andev Web
0
AC
±
%
÷
7
8
9
×
4
5
6
−
1
2
3
+
0
.
=
CSS
Copy
* { 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
Copy
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(); } }; const handleNumberClick = (numStr) => { const currentValueStr = getValueAsStr(); if (currentValueStr === '0') { setStrAsValue(numStr); } else { setStrAsValue(currentValueStr + numStr); } }; const getResultOfOperationAsStr = () => { const currentValueNum = getValueAsNum(); const valueNumInMemory = parseFloat(valueStrInMemory); let newValueNum; if (operatorInMemory === 'addition') { newValueNum = valueNumInMemory + currentValueNum; } else if (operatorInMemory === 'subtraction') { newValueNum = valueNumInMemory - currentValueNum; } else if (operatorInMemory === 'multiplication') { newValueNum = valueNumInMemory * currentValueNum; } else if (operatorInMemory === 'division') { newValueNum = valueNumInMemory / currentValueNum; } 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();