Meows
cat

Калькулятор

Meows Нояб 09, 2024

Снова на связи, снова на сайте. Дела нормуль - планов нуль

Последние недели было много работы, времени на изучение JS было мало.

Начал забывать, как и что делать, поэтому решил изучить всё с нуля, чтобы закрепить материал и двигаться дальше. Хорошо знать основы — важно. Так как изучение этого языка всё ещё даётся тяжело, особенно с моим нематематическим складом ума...

Сделал простенький калькулятор, который умеет... ну, чуть ниже видно, что он умеет. Возможно, в нём есть какие-то баги, пишите :) :)

Он принимает ввод как с помощью клика мышью, так и набором нужных цифр и операторов на клавиатуре.
Я отрабатываю работу с DOM, взаимодействие со страницей и элементами, а также закрепляю основы и логику JS. Пока продолжаю делать такие простые штуки, так как ещё не до конца понимаю, как и что делать во многих моментах. НО есть огромное желание всё это изучить!!!
Обучение прохожу на learn.javascript.ru.

  • 7
  • 8
  • 9
  • del
  • 4
  • 5
  • 6
  • 1
  • 2
  • 3
  • =
  • 0
  • .
  • +
  • *
  • /
  • -

Ниже можно посмотреть мой код самого первого калькулятора, который работает в консоли.
И новая версия, ее подкапотную часть можно посмотреть ниже :)

Старый калькулятор 
                        
//Думаю многие начинали именно с чего-то подобного :))
function calc(a, b) {
let sum = a + b;
let del = a / b;
let min = a - b;
let um = a * b;
sum = a + b;
console.log(sum);
}

calc(1,5);
Новый калькулятор 
                        
const calcSum = document.querySelector('.calc__sum');
let inpuString = '';
let result = '0';

const number = document.querySelectorAll('.number');//Все кнопки в массив сложились

const cancelBtn = document.querySelector('.cancel');

const rovnoBtn = document.querySelector('.rovno');
const plusBtn = document.querySelector('.plus');
const minusBtn = document.querySelector('.minus');
const mnojBtn = document.querySelector('.mnoj');
const delBtn = document.querySelector('.del');
let newInput = false;

//Обработчик для всех кнопок, за счет перебора этих кнопок, аля массив
number.forEach(button => {
button.addEventListener('click', (event) => {
const inputChar = event.target.textContent;

if (newInput) {
if (['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(inputChar)) {
inpuString = inputChar;
calcSum.textContent = inpuString;
newInput = false;
}

else if (['+', '-', '*', '/', '.'].includes(inputChar)) {
inpuString += inputChar;
calcSum.textContent = inpuString;
newInput = false;
}
}

else if (inpuString === '' && ['+', '/', '*'].includes(inputChar)) {
calcSum.textContent = 'Сначала цифра';
return;
}
else if (!/(\+|\.|\%|\-|\*|\/){2,}/.test(inpuString + inputChar)) {
inpuString += inputChar;
calcSum.textContent = inpuString;
}

else {
inpuString = '';
}

});
});


//Обработка того, что будет при клике равно
rovnoBtn.addEventListener('click', (event) => {
const key = event.target.textContent;

if (result === Infinity) {
calcSum.textContent = 'Бесконечность';
inpuString = '';
result = 0;
}

else if (result === undefined) {
calcSum.textContent = 'Пусто';
inpuString = '';
result = 0;
}

else if ((key + inpuString) === '=') {
inpuString = '';
}

else {
if (result.length > 15) {
calcSum.textContent = "Число слишком велико";
inpuString = '';
return inpuString;
}



else {

try {
result = Math.round(eval(inpuString) * 100000) / 100000;
calcSum.textContent = result;
inpuString = String(result);
newInput = true;

if (result === Infinity) {
calcSum.textContent = 'Бесконечность';
inpuString = '';
result = 0;
return inpuString;
}

} catch {
calcSum.textContent = 'Ошибка';
inpuString = '';
}
}
}

});

//Обработка клика по cancel
cancelBtn.addEventListener('click', () => {
calcSum.textContent = '';
inpuString = '';
result = 0;
});

//Отработка нажатия на клавиши
document.addEventListener('keydown', (event) => {
const key = event.key;

if (['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '+', '-', '*', '/', 'Enter', '=', '.',
'Backspace'].includes(key)) {

if (newInput) {
// Начало нового ввода: если цифра, обнуляем `inpuString`, если оператор — добавляем его к результату
if (['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].includes(key)) {
inpuString = key;
calcSum.textContent = inpuString;
newInput = false;
} else if (['+', '-', '*', '/', '.'].includes(key)) {
inpuString += key;
calcSum.textContent = inpuString;
newInput = false;
}
else if (['Backspace'].includes(key)) {
// Удаляем последний символ, если ввод продолжается
calcSum.textContent = calcSum.textContent.slice(0, -1);
inpuString = calcSum.textContent;
}
return;
}

else if (key === 'Backspace') {
if (calcSum.textContent === 'Бесконечность' || calcSum.textContent === 'Сначала цифра') {
// Сбрасываем полностью, если текст говорит о недопустимом состоянии
inpuString = '';
calcSum.textContent = '';
}

else if (newInput) {
// Если результат уже получен, сбрасываем полностью и отключаем флаг
inpuString = '';
calcSum.textContent = '';
newInput = false;
}

else if (calcSum.textContent.length > 0) {
// Удаляем последний символ, если ввод продолжается
calcSum.textContent = calcSum.textContent.slice(0, -1);
inpuString = calcSum.textContent;
}
return;
}

else if (key === '=' || key === 'Enter') {
// Проверка на длину результата и вычисление
if (String(result).length > 15) {
calcSum.textContent = 'Число слишком велико';
inpuString = '';
newInput = true;
return;
}

else if (inpuString === '') {
inpuString = '';
return;
}

try {
result = Math.round(eval(inpuString) * 100000) / 100000;
calcSum.textContent = result;
inpuString = String(result);
newInput = true; // Устанавливаем, что результат получен

if (result === Infinity) {
calcSum.textContent = 'Бесконечность';
inpuString = '';
result = 0;
newInput = true;
}
} catch {
calcSum.textContent = 'Ошибка';
inpuString = '';
}
return;
}


else if (!/(\+|\.|\%|\-|\*|\/){2,}/.test(inpuString + key)) {
inpuString += key;
calcSum.textContent = inpuString;
} else {
calcSum.textContent = inpuString;
}
}
});

Также исправил различные мелкие баги на сайте, которые бросались мне в глаза как тестировщику :)