Задача + Результат

В одном поле - задача, во втором - ее результат

by Anatoly Kulikov

HTML

<div class="Window">
  <input type="text" id="equation" placeholder="ex, 1+1">
  <span>=</span>
  <input type="text" id="result" readonly placeholder="2">
</div>

SCSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.Window {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  width: 400px;
  margin: 20px auto;
  padding: 10px;
  box-shadow: #eee 0px 0px 10px;
  
  input {
    display: block;
    width: 20%;
    padding: 7px;
  }
  input[readonly] {
    border: none;
    text-align: center;
    background: #f7f7f7;
  }
  #equation {
    width: 60%;
  }
  span {
    display: block;
    width: 20%;
    padding: 7px;
    text-align: center;
  }
}

JavaScript

const input = document.querySelector('#equation');
const output = document.querySelector('#result');

input.addEventListener('input', calculate);


/**
 *
 * @param {HTMLInputElement} target
 */
function calculate({target}) {
    const source = target.value;
    const result = tryParse(source);
    output.value = result;
}

/**
 *
 * @param {String} source
 * @return {number}
 */
function tryParse(source) {
    let left = '', right = '', operator = '', result = null;
    source.split('').forEach((char, i) => {
        if (isOperator(char)) {
            if (right) {
                result = doOperation(left, operator, right);
                console.log(left, right, result, operator);
                left = result.toString();
                right = '';
            }
            operator = char;
        } else {
            if (operator) {
                right += char;
                if (i === source.length - 1) {
                    result = doOperation(left, operator, right);
                    console.log(left, right, result, operator);
                }
            } else {
                left += char;
                if (result === null) {
                    result = +left;
                }
            }
        }

    });
    return result;
}

function doOperation(left, operator, right) {
    switch (operator) {
        case '+': {
            return +left + +right;
        }
        case '-': {
            return +left - +right;
        }
    }
}

function isOperator(char) {
    switch (true) {
        case char === '+':
        case char === '-': return true;
        default: return false;
    }
}