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;
}