This basic calculator works on the basics of html,css and javascript.
Calc link:- https://calculatorwebproject.netlify.app/
This is a basic implementation of a calculator web application using HTML, CSS, and JavaScript. The calculator allows users to perform arithmetic operations such as addition, subtraction, multiplication, and division.
-
Open the
calculator.html
file in a web browser. -
The calculator user interface will be displayed with a 3x4 grid of buttons representing numbers (0-9) and arithmetic operators (+, -, *, /).
-
Click on the number buttons to enter numeric values.
-
Click on the operator buttons to perform arithmetic operations.
-
The input display area, labeled "0" initially, will show the numbers and calculation results as you interact with the calculator.
-
To perform calculations, follow these steps:
- Enter the first number using the number buttons.
- Click on an arithmetic operator button to select the desired operation (+, -, *, /).
- Enter the second number using the number buttons.
- Click on the "=" button to get the result.
-
To clear the input display, click on the "c" button.
-
The calculator will prevent multiple consecutive operators, ensuring correct input.
-
The HTML document begins with the opening
<html>
tag, followed by the<head>
section. -
The
<head>
section contains meta-information about the document, including CSS styles for the calculator's appearance.
-
The CSS styles are used to define the appearance of the calculator user interface.
-
The
#main
selector styles the main calculator container, setting its width, height, background color, font, size, weight, style, and box-shadow. -
The
input
selector styles the number buttons, setting their width, height, font size, and margin. -
The
#eee
selector styles the input display area, where numbers and calculation results are displayed.
-
The JavaScript code includes four functions (
add()
,sub()
,di()
, andmul()
) that handle arithmetic operations. -
Each function checks the last character of the input display to prevent multiple consecutive operators, ensuring valid input.
-
The calculator buttons are created using
<input>
elements with thetype="button"
attribute. -
Each button has a specific value (number, operator, or "c" for clearing) and an
onclick
attribute that triggers the corresponding JavaScript function when clicked.
-
The input display area is a
<input>
element with thetype="text"
attribute and theid="eee"
. -
It is where the numbers and calculation results are displayed to the user.
Enjoy using this simple calculator web application to perform basic arithmetic calculations in your web browser!
Please note that this calculator is a basic implementation and may not handle more complex operations or error handling. It is intended for educational purposes and to demonstrate a simple calculator user interface.
Images