Calculator
A simple calculator built with HTML, CSS, and JavaScript.
View code-Click me
Description
This basic calculator application allows users to perform arithmetic calculations on numbers. It supports addition, subtraction, multiplication, and division operations.
The calculator is built using HTML, CSS, and JavaScript. The HTML file defines the layout and structure of the calculator, while the CSS file defines the styles and appearance of the calculator. The JavaScript file provides the functionality for the calculator, including the ability to perform calculations, clear the screen, and delete numbers.
Usage- To use the calculator, simply click on the buttons to enter numbers and perform operations. The calculator supports the following buttons:
Numbers: 0-9 Decimal point: . Addition: + Subtraction: - Multiplication: * Division: / Clear: AC Delete: DEL Equals: =
OVERVIEW OF THE CODE
...HTML...
The HTML code starts with a <!DOCTYPE html> declaration, which specifies the document type and version.
The <html> element represents the root of an HTML document and contains two child elements: the <head> and <body>.
The <head> element contains metadata about the document, including the title, which is displayed in the browser's title bar.
The <body> element contains the content of the document and is visible in the browser window.
Inside the <body> element, there are two div elements:
The first div has a class of my-cal and contains a h1 element with the text "MY CAL". This element is used to display the title of the calculator.
The second div has a class of calculator-grid and contains a number of button elements. This element is used to create the calculator layout and the buttons that the user interacts with.
...CSS...
The CSS code starts with a style element, which contains the style rules for the HTML document.
The *::before, *::after selector is used to apply the box-sizing property to all elements in the document, including pseudo-elements.
The body element has padding and margin set to 0 to remove any default browser styles, and a background color of #585555.
The .my-cal class is used to style the container for the calculator title. It has a width of 100%, a height of 230px, a font size of 50px, and a background color of #433e3e.
The .calculator-grid class is used to style the container for the calculator buttons. It has a grid layout with 4 columns and 6 rows, and a minimum height of 100vh to fill the entire viewport.
The .output class is used to style the container for the calculator output. It has a grid layout that spans all 4 columns, a background color of #BCFD4C, and a border radius of 20px.
The .previous-operand and .current-operand classes are used to style the previous and current operands in the calculator output, respectively.
The .span-two class is used to span a button across two grid columns.
There are several other CSS styles applied to the buttons, including a cursor pointer, font size, border, background color, and border radius, as well as styles for the hover and active states.
...JavaScript...
The Calculator class is defined with a constructor that takes two arguments -
previousOperandTextElement and currentOperandTextElement. These arguments are used
to refer to the HTML elements that will display the previous and current operands
respectively. The clear(), delete(), appendNumber(number), chooseOperation(operation),
compute(), and getDisplayNumber(number) methods are also defined within this class.
The clear() method sets the currentOperand and previousOperand properties to empty
strings and sets the operation property to undefined.
The delete() method removes the last character of the currentOperand property by
converting it to a string and slicing it from index 0 to 1 from the end.
The appendNumber(number) method appends the number clicked by the user to the
currentOperand property. If the user clicks on the decimal point (.) and it already
exists in the currentOperand, it does not add any more decimal points.
The chooseOperation(operation) method sets the operation property to the passed in
operation. If currentOperand is empty, it returns without performing any operation. If
previousOperand is not empty, it calls the compute() method to compute the result of the
previous operation. It then sets previousOperand to currentOperand, currentOperand to an
empty string, and operation to the passed in operation.
The compute() method computes the result of the previous operation using the
previousOperand, currentOperand, and operation properties. It first converts the
previousOperand and currentOperand properties from strings to numbers using parseFloat().
If either of them is not a number, it returns without computing. It then uses a switch
statement to determine the correct operation to perform based on the operation property.
The result of the operation is stored in the computation variable. The currentOperand
property is set to the computation, the operation property is set to undefined, and the
previousOperand property is set to an empty string.
The getDisplayNumber(number) method formats the number argument so that it is displayed
properly on the calculator. It first converts the number to a string using toString().
It then splits the string into two parts - integer digits and decimal digits - using the
split() method. It checks if the integer digits are NaN (not a number), and if so, sets the
integerDisplay variable to an empty string. If the integer digits are not NaN, it sets
integerDisplay to a formatted version of the integer digits using the toLocaleString() method.
If there are decimal digits, it concatenates the formatted integer digits with a decimal
point and the decimal digits. It returns the resulting string.
Finally, the code attaches event listeners to the calculator buttons using the
addEventListener() method. The click event is used to call the appropriate
methods based on the button clicked. The data- attributes on the HTML elements
are used to determine which method to call. For example, if a button with the
data-all-clear attribute is clicked, the clear() method is called. The textContent
property of the clicked button is passed as an argument to the appendNumber(number)
method if the button has the data-number attribute. If the button has the data-operation
attribute, the chooseOperation(operation) method is called with the value
To learn more about,
HTML/CSS-Click me
Java Script-Click me
View code-Click me
إرسال تعليق