Калькулятор
Снова на связи, снова на сайте. Дела нормуль - планов нуль
Последние недели было много работы, времени на изучение 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;
}
}
});
Также исправил различные мелкие баги на сайте, которые бросались мне в глаза как тестировщику :)