Techoceanhub logo

How to create a simple calculator using HTML, CSS, Javascript

Today we come up with the simple post in which we have created a simple calculator using Html, css and Javascript. It is lot easier for the beginners who are trying to understand basics of html, css and Javascript. So have a look at simple design of a calculator we are going to design.

Below is a simple code which explains the above design.


<html lang=“en”>
    <head>
        <meta charset=“UTF-8”>
        <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
        <title>Calculator</title>
        <script> 

            //function that displaying  value 
            function display(val) { 
                document.getElementById(“result”).value+=val ;
            } 

            //function that evaluates the digit and return result 
            function result() { 
                let resultVal = document.getElementById(“result”).value ;
                let output = eval(resultVal) ;
                document.getElementById(“result”).value = output ;
            } 
    
            //function that clear the displayplayplay 
    
            function clr() { 
                document.getElementById(“result”).value = “” ;
            } 
         </script> 
        <style>
            .calculator{
                background-colorazure;
                height350px;
                width300px;
                margin10px;
                border-colorblack;
                borderblack 1px solid;
            }

            .calctextbox{
                background-colorrgba(1201401510.623);
                borderblack 1px solid;
                padding10px;
            }
    
            input[type=“text”]{
                padding10px;
                margin-left20px;
                width180px;
                font-size20px;
            }
    
            input[type=“button”]{
                height50px;
                width50px;
                padding5px
                margin5px;
                font-size20px;
            }
    
            .calcbuttons{
                background-color:azure;
                margin-left20px;
            }
    
        </style>
    </head>
    <body>
        <div class=“calculator”>
            <div class=“calctextbox”>
                <input type=“text” id=“result”/>
                <input type=“button” value=“c” onclick=clr()/>
            </div>
            <div class=“calcbuttons”>
                <input type=“button” value=“1” onclick=display(‘1’)/>  
                <input type=“button” value=“2” onclick=display(‘2’)/>  
                <input type=“button” value=“3” onclick=display(‘3’)/>  
                <input type=“button” value=“/” onclick=display(‘/’)/>  
                <input type=“button” value=“4” onclick=display(‘4’)/>  
                <input type=“button” value=“5” onclick=display(‘5’)/>   
                <input type=“button” value=“6” onclick=display(‘6’)/>    
                <input type=“button” value=“-“ onclick=display(‘-‘)/>     
                <input type=“button” value=“7” onclick=display(‘7’)/>    
                <input type=“button” value=“8” onclick=display(‘8’)/>    
                <input type=“button” value=“9” onclick=display(‘9’)/>    
                <input type=“button” value=“+” onclick=display(‘+’)/>    
                <input type=“button” value=“.” onclick=display(‘.’)/>    
                <input type=“button” value=“0” onclick=display(‘0’)/>
    
                <!– solve function call function solve to evaluate value –>
                <input type=“button” value=“=” onclick=result()/>  
                <input type=“button” value=“*” onclick=display(‘*’)/>  
            </div>
        </div>
    </body>
</html>
    

Feel free to try this code and comment below.

Share:

Categories

Archives

Related Posts

Array Destructuring

Array Destructuring Array destructuring is a powerful syntax introduced in ES6 that allows you to unpack elements from an array

Read More »

Explore our Affiliated partner links

hostgator website plan

Hostgator

Best Website hosting plans & Best for 24/7 support.

hostinger webhosting plan

Hostinger

Reasonable website hosting packages for small business & 24/7 Email support

Elementor pro

Design Worpdress website quickly using Elementor Builder and AI

buy elementor website templates

Buy Elementor Website Template

Buy ready made Elementor Website Template from us & Get Free Elementor pro licence for 1 year .