How to Design a Calculator in HTML?

Leave a Comment / CSS, HTML / By

In this blog, you will learn to design a calculator in HTML. We will design an HTML calculator in two ways in this blog. The first way is Making an HTML calculator with help of HTML buttons and the second way is making a calculator with the help of a Table in HTML. Let’s learn both ways one by one:-

calculator-Codeblockx

Preview of the calculator designed with HTML:-

Calculator in HTML with button
Calculator in HTML and CSS

HTML Calculator with Buttons:-

Before you read and run the code of the calculator in HTML with Button. You should know the properties and use of buttons in HTML. Also, ignore the div and classes that I have used in HTML code These are made for CSS. You will understand the div and class once you read the CSS code. 

So the code for Button Calculator in HTML and CSS is:-

Index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Calculator</title>
        <link rel=”stylesheet” href=”style.css”>
    </head>
    <body>
        <section>
          <div class=”container”>
            <div id=”result”>0</div>
            <div class=”bttns”>
              <div class=”btn” id=”clear”>AC</div>
              <div class=”btn”>.</div>
              <div class=”btn”>0</div>
              <div class=”btn”>/</div>
              <div class=”btn”>1</div>
              <div class=”btn”>2</div>
              <div class=”btn”>3</div>
              <div class=”btn”>*</div>
              <div class=”btn”>4</div>
              <div class=”btn”>5</div>
              <div class=”btn”>6</div>
              <div class=”btn”>+</div>
              <div class=”btn”>7</div>
              <div class=”btn”>8</div>
              <div class=”btn”>9</div>
              <div class=”btn”>-</div>
            </div>
            <div>
              <div id=”equal” class=”btn”><strong>=</strong></div>
            </div>
          </div>
        </section>
    </body>
</html>

OUTPUT

Button Calculator

Style.css

.container {
    max-width: 450px;
    box-shadow: 0px 0px 20px 6px black;
    border-style:solid;
}
#result {
    height: 50px;
    line-height: 30px;
    padding: 4% 2%;
    font-size: 25px;
    text-align: right;
}
.bttns {
    display: grid;
    border: 1px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}
.bttns div {
    border-top: 1px solid #999;
}
.btn {
    border: .5px solid gray;
    line-height: 100px;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
}
#equal {
    background-color: seagreen;
    color: white;
    font-size: 35px;
}
#clear{
    background-color: red;
    color: white;
}

OUTPUT

Calculator in HTML with button

Calculator in HTML with Table:-

Again we would say to you that, before you read and run this code, You should know the properties and use of table tags in HTML. Ignore the class and id in the HTML code you will understand that once you read the style sheet for this code.

So the code for this HTML Calculator is:-

Index1.html

<!DOCTYPE html>
<html>
    <head>
        <title>Table calculator</title>
        <link rel=”stylesheet” href=”style1.css”>
    </head>
    <body>
        <center>
            <h1>Calculator</h1>
            <table>
                <tr>
                    <th colspan=”3″ id=”display”>0</th>
                    <td id=”equal”>=</td>
                </tr>
                <tr class=”num”>
                    <td>9</td>
                    <td>8</td>
                    <td>7</td>
                    <td>*</td>
                </tr>
                <tr class=”num”>
                    <td>6</td>
                    <td>5</td>
                    <td>4</td>
                    <td>+</td>
                </tr>
                <tr class=”num”>
                    <td>3</td>
                    <td>2</td>
                    <td>1</td>
                    <td>-</td>
                </tr>
                <tr>
                    <td class=”num”>0</td>
                    <td class=”num”>.</td>
                    <td class=”num”>/</td>
                    <td id=”clear”>AC</td>
                </tr>
            </table>
        </center>
    </body>
</html>

OUTPUT

Table Calculator

Style1.css

 

table{
    border-style:solid;
    width: 500px;
    height: 450px;
    box-shadow: 0px 0px 10px 12px black;
}
td{
    border-style: solid;
    border-color: black;
    font-size: 25px;
    text-align:center;
    width: 82.5px;
    height: 82.5px;
    background-color: skyblue;
}
th{
    border-style: solid;
    border-color: black;
    font-size: 25px;
    text-align:right;
    background-color: white;
}
#equal{
    background-color: seagreen;
    color: aliceblue;
    font-weight:bolder;
}
#clear{
    background-color: red;
    font-weight: 600;
}

OUTPUT

Calculator in HTML and CSS

Hope this blog was helpful to you. Now that you have learned about designing a calculator in HTML you should now learn about designing a calendar in HTML. So we have explained it in detail. It will be definitely helpful to you.

Thank you for visiting our blog. If you have any other doubts about Coding then just comment on any of our posts. We will answer it as soon as possible.

Recent Posts

Similar Posts

Leave a Comment

Your email address will not be published. Required fields are marked *