Get ready to be amazed by this incredible calculator app created using HTML, CSS, and JavaScript

Published on 7 Feb, 2024

Let’s dive into the world of web development and build a fully functional calculator from scratch using the powerful trio of HTML, CSS, and JavaScript!

Let’s break it down step by step.

Start

This declaration specifies the document type and HTML version being used.
This line starts the HTML document and sets the language to English.
This section contains meta-information about the HTML document, such as the character encoding and the viewport settings.

Specifies the character encoding for the document, which should be encoded as UTF-8, which allows for representing a diverse array of characters—in various languages.

<The “meta” tag with the attribute “name” set to “viewport” and the content “width=device-width, initial-scale=1.0” adjusts the viewport width to match the device’s width and sets the initial scale—zoom level to 1.0.

This sets the title of the HTML document to “Calculator”.
Closes the head section of the HTML document.
This section contains the visible content of the HTML document.
This is a container for the entire calculator.
This is a section dedicated to displaying the input and results of the calculator.
This creates a text input field with a placeholder value of “0” and the ID “input”. The ‘disabled’ attribute prevents user input.

Closes the display section.
This section contains the buttons for the calculator. 
This creates an ” AC ” button with the ID “clear” for clearing the calculator input. 
This creates a button labelled “DEL” with the ID “erase” for deleting the last character of the input. 
This creates a button for the division operation.

This creates a button for the multiplication operation. 
This creates a button labelled “7” for inputting the number 7. 
This creates a button labelled “8” for inputting the number 8. 
This creates a button labelled “9” for inputting the number 9.

This creates a button for the subtraction operation. 
This creates a button labelled “6” for inputting the number 6. 
This creates a button labelled “5” for inputting the number 5. 
This makes a button labelled “4” for inputting the number 4.

This creates a button for the addition operation.
This creates a button labelled “1” for inputting the number 1.
This creates a button labelled “2” for inputting the number 2.
This creates a button labelled “3” for inputting the number 3.

This creates a button labelled “=” with the ID “equal” for calculating the result. 
This creates a button labelled “0” for inputting the number 0.
This creates a button labelled “.” for inputting the decimal point.

Closes the button section.
Closes the calculator container.
Closes the body section.

Closes the HTML document. 

This HTML code sets up the structure for a simple calculator interface with input fields, buttons for numbers and operations, and the necessary functionality to perform calculations. 
We will now turn our attention to CSS. Let’s walk through it step by step.
This sets all elements without margin or padding and ensures the box model includes border and padding.

This sets the body’s height at 100% of the viewport height. 
This styles the calculator container, setting its width, background colour, padding, position, and border-radius and using the transform property to centre it on the page. There is a typo in “box-sizing”, which likely should be “box-shadow” to add a shadow effect.

This styles the display input field within the calculator, setting its width, padding, text alignment, border, background colour, text colour, and font size.

This sets the width of the display to 100%.
This styles the placeholder text within the display input, setting its colour.

This styles the button container, setting it to use a CSS grid with four columns of equal width, adding a gap between grid items, and providing a top margin.

This styles the input buttons within the button container, setting their font size, padding, border, background colour, text colour, cursor style, and border radius.

This adds a box shadow effect to the input buttons when hovered over. 
This styles the equal button, spanning two rows in the grid and setting its background colour.
This styles the button with a value of “0”, spanning two columns in the grid.

Overall, this CSS code is responsible for styling the calculator interface, including the display, input buttons, and their behaviour when interacted with.

Let’s break down the JavaScript code for the calculator app step by step:
These lines declare a variable equal_pressed initialized to 0, select all elements with the class “input-button”, and store them in the button_input variable.

This creates an event to clear the input field when the window loads.

This code sets up event listeners for each button with the class “input-button”. When a button is clicked, if the equal sign was pressed before, it clears the input field and updates the input value with the value of the clicked button.

This code initializes an event listener for the equal button. When clicked, it evaluates the input value using the eval function, checks if the result is an integer, and displays it in the input field. If the result is not an integer, it shows the result rounded to two decimal places.

This line adds an event listener to the clear button, which clears the input field when clicked.

This code establishes an event listener for the erase button. When clicked, it removes the last character from the input field.

This JavaScript code sets up the behaviour of the calculator app, allowing for input of numbers and operations, performing calculations when the equal button is pressed, and providing functionality for clearing and deleting input.

Our calculator is ready to be tested. To receive the most recent updates, please subscribe to our channel.