8770447379 | Info@paramclasses.in
Paramclasses Academy - Blog

Blog

Home / Blog

Blog Details

Design a Basic HTML Calculator

Design a Basic HTML Calculator

October 9, 2024

Code:

<!DOCTYPE html>

<html>

<head>

    <title>Basic Calculator Layout</title>

</head>

<body>

 

    <h1>Basic Calculator</h1>

 

    <!-- Display Screen -->

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

 

    <!-- Row 1: Number and Operation Buttons -->

    <input type="button" value="7">

    <input type="button" value="8">

    <input type="button" value="9">

    <input type="button" value="/"><br><br>

 

    <!-- Row 2: Number and Operation Buttons -->

    <input type="button" value="4">

    <input type="button" value="5">

    <input type="button" value="6">

    <input type="button" value="*"><br><br>

 

    <!-- Row 3: Number and Operation Buttons -->

    <input type="button" value="1">

    <input type="button" value="2">

    <input type="button" value="3">

    <input type="button" value="-"><br><br>

 

    <!-- Row 4: Number and Operation Buttons -->

    <input type="button" value="0">

    <input type="button" value=".">

    <input type="button" value="C">

    <input type="button" value="+"><br><br>

 

    <!-- Equal Button -->

    <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.

This structure creates a calculator UI with a mix of number and operation buttons in rows, simulating the layout of a real calculator.

Recent post

Interactive Student Grades Overview: Building a Responsive Table with HTML and CSS
October 16, 2024
Interactive Student Grades Overview: Building a Responsive Table with HTML and CSS
How to Create a Stylish Centered Login Form Using HTML and CSS
October 16, 2024
How to Create a Stylish Centered Login Form Using HTML and CSS
What is an Array method in Java script ?
October 16, 2024
What is an Array method in Java script ?
What is an Array in Javascript with explaination ?
October 16, 2024
What is an Array in Javascript with explaination ?

Get In Touch

Paramwebinfo,Raja talab Pandri, Raipur,Chhattisgarh India

8770447379

Info@paramclasses.in

Quick Links

Home About Course Our Gallery Contact Us Terms & Conditions Privacy Policy

Explore More

Placement Registration Enquiry Login Registration sitemap

Recent post

Interactive Student Grades Overview: Building a Responsive Table with HTML and CSS
How to Create a Stylish Centered Login Form Using HTML and CSS
What is an Array method in Java script ?
What is an Array in Javascript with explaination ?

Copyright © Paramwebinfo Academy.All Rights Reserved

Designed by PARAMWEBINFO