Calculator with Html, Css and Javascript

Rakib Alom -
0


Calculator is essential program in our life. It's create an any high level programming language. Now create a Calculator with Html, Css and Javascript. First you create a html file which name is "index.html" , then open this file with your editor.


My update calculator making blog visit here...

How to make a calculator using html css and javascript in 2022


<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Event</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        body{
            background:#808080;
        }
        .calculator{
            position:absolute;
            top:50%;
            left:50%;
            transform: translate(-50%,-50%);
        }
        button{
            height:60px;
            width:60px;
            margin:2px;
            border:none;
            border-radius:3px;
            background: #56a79a;
            color:#fff;
            font-size:24px;
            cursor:pointer;
        }
        button:hover{
            background:#000;
        }
        .textview{
            width:240px;
            margin:5px;
            padding:8px;
            font-size:24px;
            border:none;
            border-radius:3px;
        }
    </style>
</head>
<body>
   
    <div class="calculator">
        <form action="" name="form">
            <input class="textview" type="text" name="textview" />
        </form>
        <table>
            <tr>
                <td><button onclick="clean()">C</button></td>
                <td><button onclick="back()"><</button></td>
                <td><button onclick="insert('/')">/</button></td>
                <td><button onclick="insert('*')">X</button></td>
            </tr>
            <tr>
                <td><button onclick="insert(7)">7</button></td>
                <td><button onclick="insert(8)">8</button></td>
                <td><button onclick="insert(9)">9</button></td>
                <td><button onclick="insert('-')">-</button></td>
            </tr>
            <tr>
                <td><button onclick="insert(4)">4</button></td>
                <td><button onclick="insert(5)">5</button></td>
                <td><button onclick="insert(6)">6</button></td>
                <td rowspan="2"><button style="height:125px" onclick="insert('+')">+</button></td>
            </tr>
            <tr>
                <td><button onclick="insert(1)">1</button></td>
                <td><button onclick="insert(2)">2</button></td>
                <td><button onclick="insert(3)">3</button></td>
            </tr>
            <tr>
                <td colspan="2"><button style="width:125px" onclick="insert(0)">0</button></td>
                <td><button onclick="insert('.')">.</button></td>
                <td><button onclick="equal()">=</button></td>
            </tr>
        </table>
    </div>
   
    <script type="text/javascript">
        function insert(num){
            document.form.textview.value = document.form.textview.value+num;
        }
        function equal(){
            var exp = document.form.textview.value;
            document.form.textview.value = eval(exp);
        }
        function clean(){
            document.form.textview.value = "";
        }
        function back(){
            var exp = document.form.textview.value;
            if(exp){
                document.form.textview.value = exp.substring(0,exp.length-1);
            }
        }
    </script>    
</body>
</html>



Tutor: Rakib Alom

Tags:

Post a Comment

Previous Post Next Post