<html>
    <head>
        <meta charset="utf-8">
        <title> Hey </title>
        <link rel="stylesheet" href="main2.css">
        <link href="https://fonts.googleapis.com/css?family=Lato|Saira" rel="stylesheet">
    </head>

        <body>


 <div class="container">

            <div class="line">
                <button id="key" type="button" value="" name="button"> C </button>
                <div class="box" id="answer2" type="text" name="" value="" maxlength="10" > </div>
            </div>

        <div class="line2">
                <button class="button" type="button" value= "7" name="button"> 7 </button>
                <button class="button" type="button" value= "8" name="button"> 8 </button>
                <button class="button" type="button" value= "9" name="button"> 9 </button>
                <button class="button" id="bnt1" type="button" value= "/" name="button"> / </button>

        </div>

         <div class="line2">

                <button class="button" type="button" value= "4" name="button"> 4 </button>
                <button class="button" type="button" value= "5" name="button"> 5 </button>
                <button class="button" type="button" value= "6" name="button"> 6 </button>
                <button class="button" id="bnt2" type="button" value= "*"name="button"> X </button>
        </div>

        <div class="line2">

                <button class="button" type="button" value= "1" name="button"> 1 </button>
                <button class="button" type="button" value= "2" name="button"> 2 </button>
                <button class="button" type="button" value= "3" name="button"> 3 </button>
                <button class="button" id="bnt3" type="button" value= "-"name="button"> - </button>
        </div>
        <div class="line2">

                <button class="button"type="button" value= "0" name="button"> 0 </button>
                <button class="button" type="button" value= "." name="button"> . </button>
                <button class="equal" type="button" value= "=" name="button"> = </button>
                <button class="button" id="bnt3" type="button" value= "+"name="button"> + </button>
        </div>
 </div>

        <script src="main.js"></script>

        </body>
</html>

h1 {
    color:brown;
    font-family:
    text-align:center;

}

body {
    margin-left: 350px;
    margin-right: 300px;
    background-image: url());
    background-size: 1380px 1180px;
    margin-top: 180px;
    background-repeat: no-repeat;
    border: 5px

}

button {
    background-color: #FF5325;
    border-radius: 8px;
    color: white;
    padding: 30px;
    text-align: center;
    font-size: 16px;
    margin: 3px;
    font-family: 'Saira', sans-serif;

}

.box {
    border: 4px solid #FF5325;

}


#answer2{
    padding: 22px;
    width:180px;
    margin: 5px;
    font-size: 25px;
    border: 3px solid #FFB991;
    border-radius: 8px;
    text-align: right;
    color:white;
    font-family: 'Saira', sans-serif;
    background-color: #FFB991

}

#bnt1,#bnt2,#bnt3,#bnt4 {
    background-color: #FFA25D;
    /*border: none;*/
    border-radius: 10px;
    color: white;
    padding: 30px;
    text-align: center;
    font-size: 16px;

}

.line {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}


.container {
    background: white;
    border: 6px solid #FFA25D;
    width: 328px;
    border-radius: 8px;
}


.line2 {
    display: flex;
    justify-content: space-around;
}



/// select button for show up answer ///
let answer = document.getElementById("answer2")
/// select the button of number and operater beside equal ///
let button = document.querySelectorAll(".button")
/// select eqaul button to do the math calulation ///
let equal = document.querySelector(".equal")
/// select C button to do clear value ///
let empty = document.getElementById("key")

// set up string for storage the button value, so they get call in other function //
let result = ""

empty.addEventListener("click", function(){
    let zero = " "
    answer.innerHTML = zero;

})


///////// create the loop to let them get in result string, then do the math//////////
for (let i = 0; i < button.length; i++) {
  button[i].addEventListener("click", function(){
  result += this.value
  answer.innerHTML = result;
});
}

//// when the equal button click, do th math use eval function ///
equal.addEventListener("click",function(){
    let sum = eval(result)
    answer.innerHTML = sum;
    console.log(sum)
    result = ""
})

////////after get the result, press "c" button to clear the textbox ///////
empty.addEventListener("click", function(){
    result = ""
    answer.innerHTML = result
    console.log("click")

})


//// limited /////
Run Pen

External CSS

  1. https://ibb.co/dRoRgv

External JavaScript

This Pen doesn't use any external JavaScript resources.