Conversation
| function validateInput(input) { | ||
| let value = input.value.replace(/[^0-9.\-]/g, ''); | ||
|
|
||
| if (value.length > 0 && value[0] !== '-') { | ||
| value = value.replace(/\-/g, ''); | ||
| } else if (value.length > 1) { | ||
| value = '-' + value.substring(1).replace(/\-/g, ''); | ||
| } | ||
|
|
||
| const dots = value.match(/\./g); | ||
| if (dots && dots.length > 1) { | ||
| const parts = value.split('.'); | ||
| value = parts[0] + '.' + parts.slice(1).join('').replace(/\./g, ''); | ||
| } | ||
|
|
||
| if (/^[+*/]/.test(value)) { | ||
| value = value.substring(1); | ||
| } | ||
|
|
||
| if (value.startsWith('.')) { | ||
| value = '0' + value; | ||
| } | ||
|
|
||
| return value; | ||
| } |
There was a problem hiding this comment.
Это слишком сложно и не нужно, просто поставьте у input атрибут type="number"
| const firstNumberInput = document.getElementById('firstNumber'); | ||
| const secondNumberInput = document.getElementById('secondNumber'); | ||
| const operatorSelect = document.getElementById('operator'); | ||
| const calculateBtn = document.getElementById('calculateBtn'); | ||
| const resultContainer = document.getElementById('resultContainer'); |
There was a problem hiding this comment.
Какой-то элемент может быть не найден (мало ли что произошло)
| input.addEventListener('keypress', function(e) { | ||
| const char = String.fromCharCode(e.which); | ||
| if (!/[0-9.\-]/.test(char)) { | ||
| e.preventDefault(); | ||
| } | ||
| }); |
There was a problem hiding this comment.
Опять же лишние действия, просто тип number нужен
| [firstNumberInput, secondNumberInput].forEach(input => { | ||
| input.addEventListener('keypress', function(e) { | ||
| if (e.key === 'Enter') { | ||
| calculate(); | ||
| } | ||
| }); | ||
| }); |
There was a problem hiding this comment.
Похожий код был выше, можно все назначения слушателей событий повесить в одном forEach
| if (!firstValue && !secondValue) { | ||
| firstNumberInput.classList.add('error'); | ||
| secondNumberInput.classList.add('error'); | ||
| showError('Введите оба числа'); | ||
| return; | ||
| } | ||
|
|
||
| if (!firstValue) { | ||
| firstNumberInput.classList.add('error'); | ||
| showError('Введите первое число'); | ||
| return; | ||
| } | ||
|
|
||
| if (!secondValue) { | ||
| secondNumberInput.classList.add('error'); | ||
| showError('Введите второе число'); | ||
| return; | ||
| } |
There was a problem hiding this comment.
Можно упросить
if (!firstValue || !secondValue)
{
let errorText = `Введите ${!firstValue ? 'первое' : 'второе'} число`;
if (!firstValue && !secondValue)
errorText = 'Введите оба числа';
if (!firstValue) firstNumberInput.classList.add('error');
if (!secondValue) secondNumberInput.classList.add('error');
showError(errorText);
return
}| result = num1 / num2; | ||
| result = Math.round(result * 1000000) / 1000000; |
| } | ||
| } | ||
|
|
||
| html += `<div class="result-item success">${calculationHistory[calculationHistory.length - 1]}</div>`; |
There was a problem hiding this comment.
Скорее не success, а current
| let html = ''; | ||
|
|
||
| if (calculationHistory.length > 1) { | ||
| for (let i = 0; i < calculationHistory.length - 1; i++) { | ||
| html += `<div class="result-item">${calculationHistory[i]}</div>`; | ||
| } | ||
| } | ||
|
|
||
| html += `<div class="result-item success">${calculationHistory[calculationHistory.length - 1]}</div>`; | ||
|
|
||
| resultContainer.innerHTML = html; |
There was a problem hiding this comment.
В целом и так хорошо, но лично я бы этот код написал бы так
resultContainer.innerHtml = calculationHistory.map((item, index) => {
const checkLast = index === calculationHistory.length - 1;
return `<div class="result-item ${checkLast ? 'current' : ''}">${item}</div>`
})| <div class="result-container" id="resultContainer"> | ||
| <div class="result-item" style="opacity: 0.5; font-style: italic;">Результат появится здесь</div> | ||
| </div> |
There was a problem hiding this comment.
Чтобы не писать inline-стили можно просто поменять класс
<div class="result-container" id="resultContainer">
<div class="result-container__placeholder">Результат появится здесь</div>
</div>.result-container__placeholder {
opacity: 0.5;
font-style: italic;
}| .operator-wrapper::after { | ||
| content: '▼'; | ||
| position: absolute; | ||
| right: 12px; | ||
| top: 50%; | ||
| transform: translateY(-50%); | ||
| color: #c95b5b; | ||
| font-size: 10px; | ||
| pointer-events: none; | ||
| } |
No description provided.