Jhutanda

Build a Basic and simple Calculator Using HTML and CSS

This is a Basic and simple Calculator built by HTML and CSS. You can use it on high school projects. Just the basic structure of the calculator. There is no programming language such as JAVA, JavaScript, PHP, Python, etc. I just take it easy for everyone to build a basic HTML and CSS. Below I added the GitHub code link you can also click the link and go to the GitHub repositories.

Calculator Using HTML

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <table class="table-content">
        <tr>
            <td colspan="3"><input type="text" class="result"></td>
            <td><input type="button" class="btnc" value="c"></td>
        </tr>
        <tr class="tr1">
            <td><input type= "button" class="btn1" value="1"></td>
            <td><input type= "button" class="btn2" value="2"></td>
            <td><input type= "button" class="btn3" value="3"></td>            
            <td><input type= "button" class="btn/" value="/"></td>            
        </tr>
        <tr class="tr2">
            <td><input type= "button" class="btn4" value="4"></td>
            <td><input type= "button" class="btn5" value="5"></td>
            <td><input type= "button" class="btn6" value="6"></td>            
            <td><input type= "button" class="btn*" value="*"></td>            
        </tr>
        <tr class="tr3">
            <td><input type= "button" class="btn7" value="7"></td>
            <td><input type= "button" class="btn8" value="8"></td>
            <td><input type= "button" class="btn9" value="9"></td>            
            <td><input type= "button" class="btn-" value="-"></td>            
        </tr>
        <tr class="tr4">
            <td><input type= "button" class="btn0" value="0"></td>
            <td><input type= "button" class="btn." value="."></td>
            <td><input type= "button" class="btn=" value="="></td>            
            <td><input type= "button" class="btn+" value="+"></td>            
        </tr>

    </table>
</body>
</html>

Calculator Using HTML & CSS

CSS Code:

/* internal selector */
*{
   
    align-items: center;
    background-color: beige;
    font-size: 1rem;
}

/* tabale border and magen */
table{
    border: 2px solid red; 
    border-top: 5px solid red; 
    border-radius: 0px 0px 10px 10px;  
    margin: auto;
    margin-top: 150px;           
}

/* button style and color */
input[type="button"]{
    width: 100%;
    padding: 20px 20px;
    background-color: blue;
    color: white;
    font-weight: 800;
    border: none;
    border-radius: 5px;
}

/* button hover  */
input[type="button"]:hover{
    background-color: rgb(24, 190, 88);
    color: rgb(248, 33, 202);
}
/* result color and style */
.result{
    width: 83%;   
    background-color: orange;
    padding: 20px 20px;
    border: none;
    border-radius: 5px;
    color: white;
}

/* result hover */
.result:hover{
    background-color: white;
    color: black;
}

Scroll to Top