<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Калькулятор</title>
        <link rel="stylesheet" href="/css/calc.css" />
    </head>
    <body>
        <div class="wrapper">
        <div class="container">
            <div class="result">
                <span id="result">0</span>
            </div>

            <div class="buttons">
                <button id='clear'  class="item clear">AC</button>
                <button id='negative' value="+/-" class="item negative">+/-</button>
                <button id='percent' value="%" class="item percent">%</button>
                <button id='division' value="/" class="item division operator">/</button>

                <button id='seven' value="7" class="item numbers">7</button>
                <button id='eight' value="8" class="item numbers">8</button>
                <button id='nine' value="9" class="item numbers">9</button>
                <button id='multiply' value="x" class="item multiplication operator">X</button>

                <button id='four' value="4" class="item numbers">4</button>
                <button id='five' value="5" class="item numbers">5</button>
                <button id='six' value="6" class="item numbers">6</button>
                <button id='minus' value="-" class="item minus operator">-</button>

                <button id='one' value="1" class="item numbers">1</button>
                <button id='two' value="2" class="item numbers">2</button>
                <button id='three' value="3" class="item numbers">3</button>
                <button id='plus' value="+" class="item plus operator">+</button>

                <button id="zero" value="0" class="item numbers zero">0</button>
                <button id='comma' value=',' class="item comma">,</button>
                <button id='equals' value="=" class="item equals">=</button>

                <p class="progress">Progress...</p>
            </div>
        </div>
    </div>
        <script src="/app/calc.js"></script>
    </body>
</html>
body {
    background-color: #000;
    margin: auto;
    /* max-height: auto; */
    font-family: Arial, Helvetica, sans-serif;
}
.wrapper{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.container {
    max-width: 390px;
    margin: auto;
    position: absolute;
    /* display: flex; */
    flex-wrap: wrap;
    
    bottom: 1%;
    width: 100%;
}
.result {
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    font-size: 120px;
    flex-direction: row-reverse;
    margin-right: 12px;
}

.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-evenly;
    /* padding-right: 30px; */
    /* margin-left: 30px; */
}
.item {
    background-color: #252525;
    min-width: 90px;
    height: 90px;
    border-radius: 50px;
    border: none;
    font-size: 40px;
}
.clear,
.negative,
.percent {
    background-color: gray;
}
.division,
.multiplication,
.minus,
.plus,
.equals {
    background-color: orange;
    color: #fff;
}
.zero {
    width: 190px;
    padding-right: 105px    ;
}
.numbers,
.comma {
    color: #fff;
}
.fz90{
    font-size: 75px !important;
}
*{
    -webkit-user-select: none;
    /* user-select -- это нестандартное свойство */

    -moz-user-select: none;
    /* поэтому нужны префиксы */

    -ms-user-select: none;
}

.disabled{
    /* // DIVISION.style.background = 'white' */
    /* DIVISION.style.color = 'orange' */
    background: white !important;
    color: orange !important;
}
.enabled{
    background: orange !important;
    color: white !important;
}
.animateClickEqual{
    background: #fdd29d;
    transition: all 0.1s ease .0s;
}
.animateClickWhite{
    background: white;
    transition: all 0.1s ease .0s;
}

.progress{
    color: white;
    font-size: 3em;
    position: absolute;
    left: 430px;
    top: 0;
    width: 50%;
}
const plus = document.getElementById('plus')
const minus = document.getElementById('minus')
const multiply = document.getElementById('multiply')
const division = document.getElementById('division')
const numbers = document.querySelectorAll('.numbers')
const result = document.getElementById('result')
const clear = document.getElementById('clear')
const operator = document.querySelectorAll('.operator')
const process = document.querySelector('.progress')
const equal = document.getElementById('equals')


let firstValue = 0
let isFirstValue = true
let secondValue = 0
let isSecondValue = false
let isNull = true


numbers.forEach(function(el){
    el.addEventListener('click', function(){
        if(isFirstValue === true && isNull === true){
            result.innerHTML = el.innerHTML
            firstValue = result.innerHTML
            isNull = false
          
        }
        else if(isFirstValue === true && isNull === false){
            result.innerHTML += el.innerHTML
            firstValue = result.innerHTML
        }
        if(isSecondValue === true && isNull === true){
            result.innerHTML = el.innerHTML
            secondValue = result.innerHTML
            isNull = false
          
        }
        else if(isSecondValue === true && isNull === false){
            result.innerHTML += el.innerHTML
            secondValue = result.innerHTML
        }
       
    })
})

clear.onclick = function(){
    firstValue = 0
    result.innerHTML = 0
    isFirstValue === false
    isNull = true
    process.innerHTML = 'Cleared...'
}

operator.forEach(function(el){
    el.addEventListener('click', function(){
       if(isFirstValue === true){
        process.innerHTML = firstValue + el.innerHTML
        isFirstValue = false
        isSecondValue = true
        isNull = true
       }
       else if(isSecondValue === true){
        process.innerHTML += secondValue
        isFirstValue = true
        isSecondValue = false
        isNull = true
       }
    })
})

equal.onclick = function(){
    
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.