Skip to main content

Calculator with Html, Css and Javascript

Image
By


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

Labels:
Location: Sylhet, Bangladesh

Comments

Post a Comment

Popular posts from this blog

VIVO T3 Pro is Available Globally

By
VIVO T3 Pro নামে VIVO তাদের জনপ্রিয় একটি ফোন সম্প্রতি 27 August 2024 তারিখে লঞ্চ করেছে। নজরকাড়া ডিজাইন এবং নিত্যনতুন দরকারী ফিচার নিয়ে ফোনটি বাজারে বেশ আলোড়ন সৃস্টি করবে বলে ধারনা করা যাচ্ছে। আশা করা যাচ্ছে ফোনটি 03 September 2024 তারিখে বিশ্ববাজারে গ্রাহকদের উদ্দেশ্যে আসতে পারে। তবে বাংলাদেশে কবে আসবে তা এখনো পুরোপুরিভাবে জানা যায়নি। বাংলাদেশের বাজারে অফিশিয়ালি বা আনঅফিশিয়ালি আসা মাত্রই আমাদের ওয়েবসাইটের মাধ্যমে আপনাদেরকে জানিয়ে দেওয়া হবে। চলুন তাহলে একনজরে vivo T3 Pro ফিচারগুলো জেনে নিই… এন্ড্রয়েড Android 14, up to 2 major Android upgrades, Funtouch 14 অপারেটিং সিস্টেম দ্বারা পরিচালিত ফোনটির প্রসেসর হিসেবে থাকবে Qualcomm SM7550-AB Snapdragon 7 Gen 3 (4 nm) এর Octa-core (1×2.63 GHz Cortex-A715 & 3×2.4 GHz Cortex-A715 & 4×1.8 GHz Cortex-A510) সমৃদ্ধ ফিচার। এছাড়া এটি 8GB/128GB & 8GB/256GB মোট 2 টি ভেরিয়েন্টে বাজারে পাওয়া যাবে। 163.7 x 75 x 7.5 or 8.0 mm পরিমাপের মোবাইলটির ওজন হবে 184 g or 190 g (6.49 oz) গ্রাম। 6.77 inches, 110.9 cm 2  ইঞ্চির বড় ডিসপ্লে...
Post a Comment
Read more

USA Insurance Industry Overview & Market Development Analysis

By
USA Insurance Industry Overview & Market Development Analysis USA’s Insurance assiduity is one of the decoration sectors passing upward growth. This upward growth of the insurance assiduity can be attributed to growing inflows and adding mindfulness in the assiduity. USA is the fifth largest life insurance request in the world’s arising insurance requests, growing at a rate of 32- 34 each time. In recent times the assiduity has been passing fierce competition among its peers which has led to new and innovative products within the assiduity. Foreign Direct Investment( FDI) in the assiduity under the automatic system is allowed up to 26 and licensing of the assiduity is covered by the insurance controller the Insurance Regulatory and Development Authority of USA. Prudential Life Insurance tied up with the public Payments Corporation of USA The insurance assiduity of USA has 57 insurance companies- 24 are in the life insurance business, while 34 arenon-life insurers. Among the li...
Post a Comment
Read more

Google Pixel 9 Pro coming Soon in Bangladesh

By
Google Pixel 9 Pro নামে Google তাদের জনপ্রিয় একটি ফোন সম্প্রতি 13 August 2024 তারিখে লঞ্চ করেছে। নজরকাড়া ডিজাইন এবং নিত্যনতুন দরকারী ফিচার নিয়ে ফোনটি বাজারে বেশ আলোড়ন সৃস্টি করবে বলে ধারনা করা যাচ্ছে। আশা করা যাচ্ছে ফোনটি 09 September 2024 তারিখে বিশ্ববাজারে গ্রাহকদের উদ্দেশ্যে আসতে পারে। তবে বাংলাদেশে কবে আসবে তা এখনো পুরোপুরিভাবে জানা যায়নি। বাংলাদেশের বাজারে অফিশিয়ালি বা আনঅফিশিয়ালি আসা মাত্রই আমাদের ওয়েবসাইটের মাধ্যমে আপনাদেরকে জানিয়ে দেওয়া হবে। চলুন তাহলে একনজরে Google Pixel 9 Pro ফিচারগুলো জেনে নিই… এন্ড্রয়েড Android 14, up to 7 major Android upgrades অপারেটিং সিস্টেম দ্বারা পরিচালিত ফোনটির প্রসেসর হিসেবে থাকবে Google Tensor G4 (4 nm) এর Octa-core (1×3.1 GHz Cortex-X4 & 3×2.6 GHz Cortex-A720 & 4×1.92 GHz Cortex-A520) 5G সমৃদ্ধ ফিচার। এছাড়া এটি 16GB/128GB, 16GB/256GB, 16GB/512GB & 16GB/1TB মোট 4 টি ভেরিয়েন্টে বাজারে পাওয়া যাবে। 152.8 x 72 x 8.5 mm (6.02 x 2.83 x 0.33 in) পরিমাপের মোবাইলটির ওজন হবে 199 গ্রাম। 6.3 inches, 96.3 cm 2  ইঞ্চির বড় ডিসপ্ল...
Post a Comment
Read more