Calculator using HTML, CSS, JAVASCRIPT 2021.

byGoding Gyan -
0

 


In the previous post, we learned about how to insert video and audio on the HTML page.


What is Calculator?

A calculator is a small and portable electric device and it performs a mathematical calculation. By using a calculator, we can calculate numbers in seconds.

Here is the Code of the HTML File

<!DOCTYPE html>
<html lang="en">
<!------------- Created by Coding Gyan ------------->
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>Calculator | Coding Gyan</title>
</head>

<body>
    <div id="container">
        <div id="calculator">
            <div id="wraper">
                <div id="history">
                    <input id="result" placeholder="Enter Something to Calculate" type="text">
                </div>
            </div>
            <div id="keyboard">
                <button class="operator" id="clear">C</button>
                <button class="operator" id="backspace">CE</button>
                <button class="operator" id="%">%</button>
                <button class="operator" id="/">/</button>
                <button class="number" id="btn7">7</button>
                <button class="number" id="btn8">8</button>
                <button class="number" id="btn9">9</button>
                <button class="operator" id="*">*</button>
                <button class="number" id="btn4">4</button>
                <button class="number" id="btn5">5</button>
                <button class="number" id="btn6">6</button>
                <button class="operator" id="-">-</button>
                <button class="number" id="btn1">1</button>
                <button class="number" id="btn2">2</button>
                <button class="number" id="btn3">3</button>
                <button class="operator" id="+">+</button>
                <button class="operator" id="empty"></button>
                <button class="number" id="btn">0</button>
                <button class="operator" id="empty"></button>
                <button class="operator" id="=">=</button>

            </div>
        </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="script.js"></script>
</body>

</html>

Here is the Code of the CSS File

/*------------ Created by Coding Gyan ------------*/
*{
    background-color:#fff;
}
img{
        margin: 50px;
    height: 502px;
    width: 916px;
}
#result{
    width: 293px;
    height: 35px;
    border-radius: 10px;
    border-width: 0;
}
#result:focus{
    outline: 10px;
}
p{color:black;}
#history-value{
    color:#919191;
}
#container{
    width: 100%;
    height: 97vh;
    background: #000000ba;
    position: relative;
    background-size:cover;
    border-radius: 5px;
}
#calculator{
    width:320px;
    height: 550px;
    background-color:#eaedef;
    margin:0 auto;
    top:20px;
    position: relative;
    border-radius:8px;
    box-shadow: 0 8px 15px #313239;
}
#keyboard{
    background-color:#eaedef;
}
button{
     background-color:#fff;
     color:black;
}
#wraper{
    height: 59px;
    color: cornsilk;
}
#keyboard{
    height: 400px;
}
#history{
    text-align:right;
    height: 20px;
    margin:0 20px;
    padding-top: 20px;
    font-size: 15px;
    color: #919191;
}
#output{
    text-align:right;
    height: 60px;
    margin: 10px 20px;
    font-size: 30px;
}
.operator,.number,.empty{
    width: 50px;
    height: 50px;
    margin: 15px;
    float: left;
    border-radius: 50px;
    border-width: 0px;
    font-weight: bold;
    font-size: 15px;
}
.number,.empty{
    background-color:#eaedef;
}
.number,.operator{
    cursor: pointer;
}
.number:active,.operator:active{
    font-size: 10px;
}
.operator:focus,.number:focus,.empty:focus{
    outline: 0;
}
button:nth-child(4){
    font-size: 20px;
    background-color: #20b2aa;
}
button:nth-child(8){
    font-size: 20px;
    background-color: #ffa500;
}
button:nth-child(12){
    font-size: 20px;
    background-color: #f08080;
}
button:nth-child(16){
    font-size: 20px;
    background-color: #7d93e0;
}
button:nth-child(20){
    font-size: 20px;
    background-color: #9477af;
}

Here is the Code of the JS File

// ----------- Created by Coding Gyan ----------- //
$(document).ready(function(){
  $("#keyboard button").click(function(){
    var currentVal = $("#result").val();
    var clickedVal = $(this).text();
    let tagAttr = $(this).attr('id');

    if(tagAttr == 'clear'){
      $("#result").val('');
    }else if(tagAttr == '='){
      $("#result").val(eval(currentVal));
    }else if(tagAttr == 'backspace'){
      $("#result").val(currentVal.substring(0, currentVal.length - 1));
    }else{
      $("#result").val(currentVal+clickedVal);
    }
  });
});

Please Comment Down Your Feedback

Thanks For Visiting our Blog

Tags:

Post a Comment

Previous Post Next Post