calculator with functionality

by shahryar saljoughi

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://kit.fontawesome.com/4da3118626.js"></script>
</head>
<body>
    <div class="main-container">
        <div class="left-section">
            <div class="row">
                <div class="hamburgermenu-btn">
                    <i style="color: black; font-size: 20px;" class="fas fa-bars"></i>
                </div>
                <span class="title">Standard</span>
            </div>
            <div class="row already-inserted"></div>
            <div class="row current-num">0</div>
            <div class="row">
                <div class="unit-btn">DEG</div>
                <div class="unit-btn">HYP</div>
                <div class="unit-btn">F-E</div>
            </div>
            <div class="row memory">
                <div class="memory-btn">MC</div>
                <div class="memory-btn">MR</div>
                <div class="memory-btn">M+</div>
                <div class="memory-btn">M-</div>
                <div class="memory-btn">MS</div>
            </div>
            <div class="row keypad">
                <div class="main-btn">%</div>
                <div class="main-btn">CE</div>
                <div class="main-btn">C</div>
                <div class="main-btn"><i class="fas fa-backspace"></i></div>
                <div class="main-btn">&divide;</div>
                <div class="main-btn unary-operator">√</div>   
                <div class="main-btn operand">7</div>
                <div class="main-btn operand">8</div>
                <div class="main-btn operand">9</div>
                <div class="main-btn">&times;</div>
                <div class="main-btn unary-operator"> x<sup>2</sup> </div>
                <div class="main-btn operand">4</div>
                <div class="main-btn operand">5</div>
                <div class="main-btn...

CSS

* {
    font-family: 'Segoe UI';
}
div.main-container {
    background-color: lightgray;
    display: flex;
}
div.right-section {
    flex-basis: 300px;
    flex-grow: 0;
    flex-shrink: 0;
    margin-left: 2%;
    height: 100%;
}
div.left-section {
    flex-basis: 85%;
    flex-shrink: 10;
}
.row.memory {
    display: flex;
    flex-wrap: nowrap;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}
.hamburgermenu-btn {
    display: inline-block;
    padding: 20px;
    margin-right: 10px;
}

.main-btn:nth-child(n+7):nth-child(-n+9), 
.main-btn:nth-child(n+12):nth-child(-n+14),
.main-btn:nth-child(23),
.main-btn:nth-child(n+17):nth-child(-n+19)
 {
    background-color: whitesmoke;
}



[class*="btn"]:nth-child(n+0):hover {
    background-color: darkgray;
}
.title {
    font-size: 22px;
}
.right-section-tab-buttons {
    font-weight: bold;
    float: left;
    padding: 20px;

}
.right-section .row div:last-of-type {
    margin-left: 15px;
}
.active-tab {
    border-bottom: 5px deepskyblue solid;
}
.already-inserted {
    padding: 5px;
    width: 100%;
    height: 30px;
    font-size: 13px;
    text-align: right;
}
.current-num {
    font-size: 60px;
    padding: 5px;
    text-align: right;
    font-weight: bold;
    width: 100%;
}
.unit-btn, .memory-btn {
    font-weight: bold;
    font-size: 13px;
    padding:10px;
    float: left;
    width: 10%;
}

/* .unit-btn + .unit-btn, .memory-btn + .memory-btn  {
    margin-left: 40px;
} */

.main-buttons-container {
    display: flex;
    /* flex-wrap: wrap; */
}

.keypad {
    display: flex;
    flex-wrap: wrap;
}
.keypad .main-btn {
    width: 19%;
}

.main-btn {
    box-sizing: border-box;
    height: 62px;
    line-height: 62px;
    text-align: center;
}



@media screen and (max-width: 700px) {
    .right-section {
        display: none;
    }
    div.left-section {
        flex-basis: 95%;
        
    }
}
@media screen and (max-width: 850px) {
    .keypad .main-btn {
        width: 24%;
    }
 ...

JavaScript

/* FIRST FILE */

function create_one_way_binding(object, property, ui_element) {
  let backing_variable = object[property]
  Object.defineProperty(object, property, {
    get: function() {
      return backing_variable;
    },
    set: function(value) {
      backing_variable = value;
      ui_element.innerText = value;
    }
  })
}


/* SECOND FILE */



var currentExpression = {
  jsExpression : "",
  userFriendlyExpression: ""
};

var current_operand = {
  operand: "",
};
function get_result() {
  return eval(math_expression);
}

function reset() {
  math_expression = "";
}

function append(item) {
  math_expression += item;
}

function remove_one_char() {
  
}



/*  THIRD FILE */

// import {currentExpression} from 'math'
// import {current_operand} from 'math'


// bind numbers and dot:
var numbers_dot = document.querySelectorAll(".main-btn.operand");
enteringNewOperand = true;
var shouldLoadOperandIntoExpression = true;
for (let element of numbers_dot) {
  element.addEventListener("click", function(ev) {
    if (enteringNewOperand) {
      current_operand.operand = element.innerText;
      enteringNewOperand = false;
    }
    else {
      current_operand.operand += element.innerText;
    }
  });
}

// bind monitor of calculator:
var current_operand_ui_element = document.querySelector(".row.current-num");
create_one_way_binding(current_operand, "operand",  current_operand_ui_element);
math_expression_ui_element = document.querySelector(".already-inserted");
create_one_way_binding(currentExpression, "userFriendlyExpression", math_expression_ui_element);

operatorJsEquivalent = {
  "+": {
    jsForm: function(exp=currentExpression.jsExpression) { 
      currentExpression.jsExpression = `${currentExpression.jsExpression} + `;
    },
    userFriendlyForm: function() {
      currentExpression.userFriendlyExpression = `${currentExpression.userFriendlyExpression} +`;
    } 
  },
  "×": {
    jsForm: function() {
      currentExpression.jsExpression =...