Калькулятор с JavaScript

Я только что создал полностью рабочий калькулятор для своего портфолио и хотел бы получить обзор кода. Этот код выглядит хорошо, или, может быть, мне нужно его реорганизовать? Достаточно ли хорошо быть частью портфеля младшего Front-end разработчика?

Вот рабочая страница с ним: https://prmk01.github.io/Calculator
(Есть возможность использовать клавиатуру вместо нажатия на кнопки)

Весь проект доступен на моем GitHub. Буду признателен за просмотр всего моего проекта. Но я публикую здесь большую часть Javascript, потому что каждое сообщение должно содержать как минимум 3 строки кода:

const activatedButtons = document.querySelectorAll('.inactive');
const topRow = document.querySelector('.screen-top-part');
const bottomRow = document.querySelector('.screen-bottom-part');
const basicOperators = /+|-|÷|×/; 
let expression = '';
let bottomRowActive = true;
let memory = '';

function memoryUpdate (target) {
    bottomRowActive = false;
    for (button of activatedButtons) {
        button.classList.remove('inactive');
    }
    switch (target.innerText) {
        case 'MC': {
            memory = '';
            for (button of activatedButtons) {
                button.classList.add('inactive');
            }
            break
        } case 'MR': {
            clearEntry();
            bottomRow.innerText = memory;
            break
        } case 'M+': {
            memory = eval(+memory + +bottomRow.innerText).toString();
            break
        } case 'M-': {
            memory = eval(+memory - +bottomRow.innerText).toString();
            break
        } case 'MS': {
            memory = bottomRow.innerText;
            break
        }
    }
}

function appendNumber (target) {
    if (topRow.innerText.includes('=')) {
        topRow.innerText="";
        expression = '';
    }
    if (bottomRowActive) {
        if (bottomRow.innerText.length === 1 && bottomRow.innerText == '0') {
            bottomRow.innerText = target.innerText;
        } else if (bottomRow.innerText.length >= 15) {
        } else {
            bottomRow.innerText = bottomRow.innerText + target.innerText;
        }
        return
    }
    bottomRowActive = true;
    bottomRow.innerText = target.innerText;
}

function clearAll () {
    bottomRowActive = false;
    topRow.innerText="";
    bottomRow.innerText="0";
    expression = '';
}

function clearEntry () {
    bottomRowActive = false;
    if (topRow.innerText.includes('=')) {
        clearAll();
    } else {
        bottomRow.innerText="0";
    }
}

function deleteLast () {
    if (bottomRowActive) {
        if (bottomRow.innerText == '0') {
            return
        } else if ((bottomRow.innerText.length === 3 && bottomRow.innerText.includes('.') && bottomRow.innerText.includes('-')) || (bottomRow.innerText.length === 2 && bottomRow.innerText.includes('-')) || bottomRow.innerText.length === 1) {
            bottomRow.innerText="0";
        } else {
            bottomRow.innerText = bottomRow.innerText.slice(0, bottomRow.innerText.length - 1)
        }
    }
}

function basicOperation (target) {
    if (bottomRowActive) {
        expression = `(${expression}(${bottomRow.innerText}))`; 
        topRow.innerText = evaluate() + ' ' +  target.innerText;
        expression += target.dataset.value;
        bottomRowActive = false;
    } else {
        if (basicOperators.test(topRow.innerText.slice(-1))) {
            topRow.innerText = topRow.innerText.slice(0, -1) + target.innerText;
            expression = expression.slice(0, -1) + target.dataset.value;
        } else {
            topRow.innerText = evaluate() + ' ' +  target.innerText;
            expression += target.dataset.value;
        }
    }
}

function equals () {
    bottomRowActive = false;
    if (topRow.innerText.includes('=')) {
        return
    }
    if (bottomRow.innerText.includes('-')) {
        topRow.innerText = `${topRow.innerText} (${bottomRow.innerText}) =`;
    } else {
        topRow.innerText = `${topRow.innerText} ${bottomRow.innerText} =`;
    }
    expression = `(${expression}(${bottomRow.innerText}))`;
    bottomRow.innerText = evaluate();
}

function decimalPoint () {
    if (!bottomRowActive) {
        bottomRow.innerText="0.";
        bottomRowActive = true;
    } else if (bottomRow.innerText.length >= 14) {
    } else if (!bottomRow.innerText.includes('.')) {
        bottomRow.innerText += '.';
    }
}

function minus () {
    if (bottomRow.innerText == '0') {
        return
    } else if (bottomRow.innerText.includes('-')) {
        bottomRow.innerText = bottomRow.innerText.slice(1, bottomRow.innerText.length);
    } else {
        bottomRow.innerText="-" + bottomRow.innerText;
    }
}

function evaluate () {
    let result = eval(expression);
    let resultRounded = +parseFloat(result).toFixed(8);
    if (resultRounded.toString().length >= 18) {
        resultRounded = resultRounded.toExponential();
    }
    resultRounded = resultRounded.toString();
    if (resultRounded.includes('e')) {
        let number = resultRounded.split('e')[0];
        let numberRounded = (+parseFloat(number).toFixed(8)).toString();
        resultRounded = numberRounded + 'e' + resultRounded.split('e')[1];
    }
    return resultRounded;
}

1 ответ
1

Так что я смотрю на это со структурной точки зрения.

Я думаю, что вы недостаточно используете параметры для своих функций и слишком много используете глобальное состояние. Вы можете извлечь выгоду из использования некоторых классов Javascript для его инкапсуляции.

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

Ваше использование JavaScript this может сбить с толку некоторых современных разработчиков, потому что есть очень много способов в конечном итоге заткнуть его. Большинство людей стараются по возможности избегать его использования из-за путаницы вокруг него.

Наконец, у вас есть несколько пустых веток в вашем коде для условных выражений if.

В целом, это неплохая первая попытка. Вы можете получить выгоду, настроив страницы Github, чтобы продемонстрировать свою попытку. Это бесплатный статический хостинг, который позволит нам увидеть его в действии.

  • Спасибо за быстрый и подробный обзор! Интересно, как тогда заменить eval (), если я думал, что он идеально подходит для такого рода вещей. Вот рабочая страница: prmk01.github.io/Calculator

    — ПРМК

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *