Skip to content

How to create a Calculator using HTML CSS and JavaScript

index.html

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Calculater</title>
        
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div class="main">
            <form name="form">
                <input name="textview" class="textview" readonly>
            </form>
            
            <table>
                <tr>
                    <td><input type="button" onclick="insert(7)" value="7" id="seven"></td>
                    <td><input type="button" onclick="insert(8)" value="8" id="eight"></td>
                    <td><input type="button" onclick="insert(9)" value="9" id="nine"></td>
                    <td><input type="button" onclick="operat('+')" value="+" id="plus"></td>
                </tr>
                
                <tr>
                    <td><input type="button" onclick="insert(4)" value="4" id="four"></td>
                    <td><input type="button" onclick="insert(5)" value="5" id="five"></td>
                    <td><input type="button" onclick="insert(6)" value="6" id="six"></td>
                    <td><input type="button" onclick="operat('-')" value="-" id="minus"></td>
                </tr>
                
                <tr>
                    <td><input type="button" onclick="insert(1)" value="1" id="one"></td>
                    <td><input type="button" onclick="insert(2)" value="2" id="two"></td>
                    <td><input type="button" onclick="insert(3)" value="3" id="three"></td>
                    <td><input type="button" onclick="operat('*')" value="*" id="multyply"></td>
                </tr>
                
                <tr>
                    <td><input type="button" onclick="operat('.')" value="." id="comma"></td>
                    <td><input type="button" onclick="insert(0)" value="0" id="zero"></td>
                    <td><input type="button" onclick="equal('=')" value="=" id="equal"></td>
                    <td><input type="button" onclick="operat('/')" value="/" id="division"></td>
                </tr>
                
                <tr>
                    <td colspan="4"><input type="button" onclick="clean()" value="C" id="clean"></td>
                </tr>
            </table>
        </div>
    </body>
    
    <script src="js/index.js"></script>
</html>

style.css

*{
    margin:0;
    padding: 0;
}

.main{
    position: absolute;
    top:50%;
    left:50%;
    transform: translateX(-50%)translateY(-50%);
}

.textview{
    width: 195.8px;
    margin: 2px;
    padding: 5px;
    border: none;
    background: #ededed;
    font-size: 25px;
}

input[type="button"]{
    width: 50px;
    height: 50px;
    font-size: 25px;
    border: none;
    cursor: pointer;
}


td[colspan="4"] input{
    width:206px;
}

index.js

function insert(num){
    'use strict';
    document.form.textview.value +=num;
}

function equal(){
    'use strict';
    document.form.textview.value = eval(document.form.textview.value);
}

function clean(){
    'use strict';
    document.form.textview.value="";
}

function operat(oper){
    'use strict';
    document.form.textview.value +=oper;
    
    var x=document.form.textview.value.solit("");
    
    if(x[0]==="+" || x[0]==="*" || x[0]==="/" || x[0]==="."){
        console.log(x[0]);
        document.form.textview.value="Error";
    }
}

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *