How to Design Calculator with HTML CSS JavaScript

Code Zara 2025-06-02 14:33:10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container{
            background-color: #eee;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .cal{
            background-color: #fff;
            padding: 2%;
            display: flex;
            flex-direction: column;
            gap: 20px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
            border-radius: 5px;
        }
        .input-area input{
            width: 250px;
             height: 60px;
             background-color: black;
             color: white;
             padding: 0px 20px;
             border: none;
             outline: none;
             border-radius: 5px;
        }
        .input-btn input{
            width: 60px;
            height: 60px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
            margin-top: 5px;
            border-radius: 50%;
            border: none;
            outline: none;
            font-size: 18px;
            font-weight: bold;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
            transition: 0.5s;
        }
         .input-btn input:hover{
            background-color: #b4b4b4;
         }
        .clear{
            background-color: red;
            transition: 0.5s;
        }
         .clear:hover{
            background-color: rgb(116, 2, 2);
            color: white;
         }
         .back{
            background-color: cadetblue;
            transition: 0.5s;
         }
         .back:hover{
            background-color: rgb(35, 78, 79);
            color: white;
         }
         .result{
            background-color: darkgreen;
            transition: 0.5s;
         }
         .result:hover{
            background-color: rgb(3, 65, 3) !important;
            color: white;
         }
          span{
            background-color: #eee;
            font-weight: bolder;
            font-size: 50px;
            padding: 0px 10px;
            color: rgb(23, 252, 2);
            text-shadow: 1px 1px rgb(3, 71, 3);
            

        }

    </style>
</head>
<body>
    <div class="container">
        <div class="cal">
            <div class=""><span>Code Zara</span></div>
            <div class="input-area">
                <input type="text" id="res" readonly>
            </div>
            <div class="input-btn">
                <input type="button" value="C" onclick="Clear('C')" class="clear">
                <input type="button" value="D" onclick="Back('D')" class="back">
                <input type="button" value="%" onclick="Solve('%')">
                <input type="button" value="/" onclick="Solve('/')">
                <br>
                <input type="button" value="1" onclick="Solve('1')">
                <input type="button" value="2" onclick="Solve('2')">
                <input type="button" value="3" onclick="Solve('3')">
                <input type="button" value="x" onclick="Solve('*')">
                <br> 
                <input type="button" value="4" onclick="Solve('4')">
                <input type="button" value="5" onclick="Solve('5')">
                <input type="button" value="6" onclick="Solve('6')">
                <input type="button" value="-" onclick="Solve('-')">
                <br> 
                <input type="button" value="7" onclick="Solve('7')">
                <input type="button" value="8" onclick="Solve('8')">
                <input type="button" value="9" onclick="Solve('9')">
                <input type="button" value="+" onclick="Solve('+')">
                <br> 
                <input type="button" value="00" onclick="Solve('00')">
                <input type="button" value="0" onclick="Solve('0')">
                <input type="button" value="." onclick="Solve('.')">
                <input type="button" value="=" onclick="Result()" class="result">
                <br>
            </div>
        </div>
    </div>

    <script>
        function Solve(val){
        document.getElementById("res").value+=val;
        }
        function Clear(){
            document.getElementById("res").value="";
        }

        function Back(){
           let back = document.getElementById("res");
           back.value=back.value.slice('0','-1');
        }

        function Result(){
           let num1 = document.getElementById("res").value;
            try {
              let num2 = eval(num1.replace('x', '*'));
               document.getElementById("res").value=num2;
            } catch (error) {
                document.getElementById("res").value="Error";
            }
        }

    </script>
</body>
</html>

YouTube Tutorial Video

JavaScript Introduction

How To Responsive Navbar HTML CSS and JavaScript

Responsive Navbar HTML CSS And JavaScript

How to Design Calculator with HTML CSS JavaScript

Calculator design

How to Design Calculator with HTML CSS JavaScript

YouTube Tutorial Video

How To Carousel Slider Bootstrap 5.3

How to add to cart shopping in HTML,CSSs, JavaScript

How to HTML CSS Form Design in Animation border

How To Responsive Navbar HTML CSS

JavaScript Introduction

How To Responsive Navbar HTML CSS and JavaScript

How to Design Calculator with HTML CSS JavaScript