Paramwebinfo Academy | Website & Digital Marketing Training

Tutorials Details

Building a Basic Calculator: HTML Structure Guide

October 18, 2024

Code:

<!DOCTYPE html>
<html>
<head>
<title>Basic Calculator Layout</title>
</head>
<body>
<h1>Basic Calculator</h1>

<input type="text" id="display" name="display" readonly><br><br>

<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<input type="button" value="/"><br><br>

<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="*"><br><br>

<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="-"><br><br>

<input type="button" value="0">
<input type="button" value=".">
<input type="button" value="C">
<input type="button" value="+"><br><br>

<input type="button" value="=">
</body>
</html>

Explanation:

Display Screen:
- The single input field (<input type="text">) at the top displays the numbers and operations. It's set to readonly to prevent direct input.
Buttons:
- Numbers 0-9 are arranged in a grid.
- The arithmetic operations (+, -, *, /) are also added as buttons at the end of each row of numbers.
- The = button (for result) is placed at the bottom.
- The C button is for clearing the display, and . is for decimal points.