<body>


    
      <div class='calc'>
         <input type="text" id='disp'>
         <br/>
         <button id='1'>1</button>
         <button id='2'>2</button>
         <button id='3'>3</button>
         <button id='add'>+</button>
         <br/>
         <button id='4'>4</button>
         <button id='5'>5</button>
         <button id='6'>6</button>
         <button id='subtr'>-</button>
         <br/>
         <button id='7'>7</button>
         <button id='8'>8</button>
         <button id='9'>9</button>
         <button id='mult'>x</button>
         <br/>
         <button id='clear'>CE</button>
         <button id='0'>0</button>
         <button id='dec'>.</button>
         <button id='division'>/</button>
         <br/>
         <button id='ans'>=</button>
      </div>


</body>
@font-face {
  font-family: Junegull;
  src: url('junegull-rg.otf');
}

body {
  height: 100vh;

  background-color:#fcf945 ;

  font-family: Junegull;

    display: flex;
    justify-content: center;
    align-items: center;

    color: white;
}
.calc{
  mix-blend-mode: difference;
  /* min-width: 300px; */
  min-height: 350px;
  margin: 0px;
  border: 3px solid white;
  border-radius: 20px;

  text-align: center;
  padding: 10px;

  /* width: 100%; */
}
#disp{
  /* display: block; */
  min-height: 60px;
  background-color:#000;
  /* margin:8px; */
  width: 320px;

  font-family: Junegull;
  font-size:45px;
  text-align:right;
  overflow:auto;
  background-color:white;

  border-radius: 20px;
  border: 0px;
  padding: 10px;
}
.calc button{
  font-family: Junegull;
  font-size: 20px;
  min-height:54px;
  min-width:71px;
  background-color:rgb(255, 255, 255);
  margin : 3px;
  border: 0px;
  border-radius: 20px;
}
#ans{
  width: 295px;
}

#disp, .calc button {
  opacity: 0.7;
}

#disp:hover, .calc button:hover {
  opacity: 1;
}

document.addEventListener("DOMContentLoaded", function() {
    const display = document.getElementById('disp');

    display.addEventListener('input', function() {
        const input = display.value.trim();

        if (/^#([0-9a-f]{3}){1,2}$/i.test(input)) {
            document.body.style.backgroundColor = input;
        }
    });

    const buttons = document.querySelectorAll('.calc button');

    let currentInput = '';
    let firstOperand = null;
    let operator = null;
    let awaitingNextOperand = false;

    function clearDisplay() {
        display.value = '';
        currentInput = '';
        firstOperand = null;
        operator = null;
        awaitingNextOperand = false;
    }

    function inputNumber(number) {
        if (awaitingNextOperand) {
            display.value = number;
            awaitingNextOperand = false;
        } else {
            if (display.value.length < 10) { // Limiting input to 10 characters
                display.value += number;
            }
        }
        currentInput = display.value;
    }

    function inputDecimal() {
        if (awaitingNextOperand) return;
        if (!currentInput.includes('.')) {
            display.value += '.';
            currentInput = display.value;
        }
    }

    function handleOperator(nextOperator) {
        const inputValue = parseFloat(currentInput);

        if (firstOperand === null) {
            firstOperand = inputValue;
        } else if (operator) {
            const result = operate(operator, firstOperand, inputValue);
            display.value = String(result);
            firstOperand = result;
        }

        awaitingNextOperand = true;
        operator = nextOperator;
    }

    function operate(operator, num1, num2) {
        switch (operator) {
            case '+':
                return num1 + num2;
            case '-':
                return num1 - num2;
            case 'x':
                return num1 * num2;
            case '/':
                return num1 / num2;
            default:
                return num2;
        }
    }

    buttons.forEach(button => {
        button.addEventListener('click', () => {
            const buttonText = button.textContent;

            if (buttonText >= '0' && buttonText <= '9') {
                inputNumber(buttonText);
            } else if (buttonText === '.') {
                inputDecimal();
            } else if (buttonText === 'CE') {
                clearDisplay();
            } else if (buttonText === '=') {
                handleOperator(buttonText);
            } else {
                handleOperator(buttonText);
            }
        });
    });

    display.addEventListener('keypress', function(event) {
        if (event.key === 'Enter') {
            event.preventDefault();
            const expression = display.value;
            const result = eval(expression);
            display.value = result;
        }
    });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.