Header Ads Widget

Responsive Advertisement

How to make a simple calculator using html

AVINASH KUMAR Saturday, February 11, 2023

 Here is the source code of calculator

<!DOCTYPE html>

<html>

<head>

  <title>Calculator</title>

  <style>

    .calculator {

      width: 400px;

      margin: auto;

      text-align: center;

    }

    input[type="text"] {

      width: 100%;

      height: 50px;

      font-size: 20px;

      text-align: right;

    }

    input[type="button"] {

      width: 70px;

      height: 70px;

      font-size: 20px;

      margin: 5px;

    }

  </style>

</head>

<body>

  <div class="calculator">

    <input type="text" id="result" disabled />

    <br />

    <input type="button" value="1" onclick="document.getElementById('result').value+='1'"/>

    <input type="button" value="2" onclick="document.getElementById('result').value+='2'"/>

    <input type="button" value="3" onclick="document.getElementById('result').value+='3'"/>

    <input type="button" value="+" onclick="document.getElementById('result').value+='+'"/>

    <br />

    <input type="button" value="4" onclick="document.getElementById('result').value+='4'"/>

    <input type="button" value="5" onclick="document.getElementById('result').value+='5'"/>

    <input type="button" value="6" onclick="document.getElementById('result').value+='6'"/>

    <input type="button" value="-" onclick="document.getElementById('result').value+='-'"/>

    <br />

    <input type="button" value="7" onclick="document.getElementById('result').value+='7'"/>

    <input type="button" value="8" onclick="document.getElementById('result').value+='8'"/>

    <input type="button" value="9" onclick="document.getElementById('result').value+='9'"/>

    <input type="button" value="*" onclick="document.getElementById('result').value+='*'"/>

    <br />

    <input type="button" value="C" onclick="document.getElementById('result').value=''"/>

    <input type="button" value="0" onclick="document.getElementById('result').value+='0'"/>

    <input type="button" value="=" onclick="document.getElementById('result').value=eval(document.getElementById('result').value)"/>

    <input type="button" value="/" onclick="document.getElementById('result').value+='/'"/>

  </div>

</body>

</html>


Post a Comment

0 Comments