<style type="text/css">
        body{
            background-image: linear-gradient(rgb(166, 135, 224),rgb(166, 135, 224));
            height: 150px;                
        }
    </style>
    
    <script>
    function calculate(args)
    {
        res = document.getElementById("result");
        expression = res.innerText;
        cmd = args.srcElement.innerText;
        if(cmd == "=")
        {
            expression = "" + eval(expression)
        }
        else if(cmd == "C")
        {
            expression=""
        }
        else if(cmd == "DEL")
        {
            expression = expression.slice(0, -1);

        }
        else if(cmd == "%")
        {
            expression = "" + Math.sqrt(eval(expression));
        }
        else if(cmd == "%")
        {
            expression = expression % 1;
        }
        else if(cmd == "log")
         {
    expression = Math.log10(expression);
       }
   
        else{
            expression = expression + cmd;
        }
        res.innerText = expression;
        

    }
     
    </script>

    <style>
      
        .calculator-container {
            width: 400px;
            
            background-color:rgb(255, 255, 255);(8, 8, 8);
            margin: 0 auto; 
            margin-top: 100px;
            text-align: center;

            
        }

       
        button {
            width: 50px;
            height: 50px;
            margin: 10px; 
            font-size: 20px; 
            
            
            background-color: rgb(135, 224, 202); 
            color:blue(166, 135, 224); 
            border: none;
        }

      
        #result {
            
   background-color:rgb(166, 135, 224);
text-align: right;
padding-right: 50px;
font-size: 20px;
margin-bottom: 20px; 
border: solid rgb(245, 243, 243) 0.5px;
color: rgb(255, 249, 249);
width: 348px;
height: 50px;
display: flex;
align-items: center;
justify-content: flex-end;

        }
        h1 {
            padding-top: 10px;
            color:aquamarine(255, 255, 255);
            font-size: 50px;
        }
        .redd {
            background-color: rgb(242, 81, 81);
        }
        .bluee {
            
            background-color: rgb(242, 81, 81);
        }
        body {
            background-color: rgb(242, 81, 81);
        }
        #pozhilan{
            text-align: center;
        }
        .calculator-container{
            margin-bottom: 50px;
        }

    </style>

</head>

<h1 id="pozhilan"> VINNUSH KUMAR L S <br> (2122232301244)</h1>
<div class="calculator-container">
    <h2> CALCULATOR</h2>
    <div id="result">0</div>
    <button onclick="calculate(event);">7</button>
    <button onclick="calculate(event);">8</button>
    <button onclick="calculate(event);">9</button>
    <button class="bluee"  onclick="calculate(event);">/</button>
    <button class="bluee"  onclick="calculate(event);"> DEL </button><br>
    <button onclick="calculate(event);">4</button>
    <button onclick="calculate(event);">5</button>
    <button onclick="calculate(event);">6</button>
    <button class="bluee"  onclick="calculate(event);">*</button>
    <button class="bluee"  onclick="calculate(event);">%</button><br>
    <button onclick="calculate(event);">1</button>
    <button onclick="calculate(event);">2</button>
    <button onclick="calculate(event);">3</button>
    <button class="bluee"  onclick="calculate(event);">-</button>
    <button class="bluee"  onclick="calculate(event);">log</button><br>
    <button onclick="calculate(event);">0</button>
    <button onclick="calculate(event);">.</button>
    <button class="redd" onclick="calculate(event);">C</button>
    <button class="bluee"  onclick="calculate(event);">+</button>
    <button class="bluee" onclick="calculate(event);">=</button><br>
</div>