HTML code I used after adding the inline js code and some ids:
<div id="cal-con">
<h2 id="displayNumb">0</h2>
<h4 onclick="formNumber(7)">7</h4>
<h4 onclick="formNumber(8)">8</h4>
<h4 onclick="formNumber(9)">9</h4>
<h4 onclick="formNumber(4)">4</h4>
<h4 onclick="formNumber(5)">5</h4>
<h4 onclick="formNumber(6)">6</h4>
<h4 onclick="formNumber(1)">1</h4>
<h4 onclick="formNumber(2)">2</h4>
<h4 onclick="formNumber(3)">3</h4>
<h4 onclick="formNumber(0)" style="grid-row:5/6 ; grid-column:1/3;">0</h4>
<h4 onclick="formNumber('.')">.</h4>
<h4 style="grid-row:2/3 ; grid-column:4/5; " class="operator-btn" onclick="opDiv()">/</h4>
<h4 style="grid-row:3/4 ; grid-column:4/5; " class="operator-btn" onclick="opMul()">x</h4>
<h4 style="grid-row:4/5 ; grid-column:4/5; " class="operator-btn" onclick="opSub()">-</h4>
<h4 style="grid-row:5/6 ; grid-column:4/5; " class="operator-btn" onclick="opSum()">+</h4>
<h4 id="equal" style="grid-row:6/7 ; grid-column:1/5; " class="operator-btn">=</h4>
</div>JavaScript code I used:
var number1 = "";
var number2 = "";
var equalSign = document.getElementById("equal")
var isNumber1Ready = false;
// Function for adding numbers
function formNumber(n){
if(!isNumber1Ready){
number1 += n;
document.getElementById("displayNumb").textContent = number1
}
else{
number2 += n;
document.getElementById("displayNumb").textContent = number2
}
}
// Functions for operations
function sum(n1,n2){ return n1+n2}
function subtract(n1,n2){ return n1-n2}
function multiply(n1,n2){ return n1*n2}
function divide(n1,n2){ return n1/n2}
// Function for equal button - This is higher order function
function cal(p1, p2, operation){
p2 =Number(p2)
result = operation(p1,p2)
document.getElementById("displayNumb").textContent = result
}
// Function for clilcking on operation signs
function opSum(){
number1 = Number(number1)
isNumber1Ready = true;
equalSign.setAttribute("onclick", "cal(number1, number2, sum)")
}
function opSub(){
number1 = Number(number1)
isNumber1Ready = true;
equalSign.setAttribute("onclick", "cal(number1, number2, subtract)")
}
function opMul(){
number1 = Number(number1)
isNumber1Ready = true;
equalSign.setAttribute("onclick", "cal(number1, number2, multiply)")
}
function opDiv(){
number1 = Number(number1)
isNumber1Ready = true;
equalSign.setAttribute("onclick", "cal(number1, number2, divide)")
}