Customise Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorised as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site.... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.

No cookies to display.

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.

These lines store references to specific elements in the HTML with the IDs “input”, “equal”, “clear”, and “erase” respectively.

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.

Our Latest Blog

Beyond the Buzz: How Prompt Engineering is Quietly Reshaping the Modern Workplace

Beyond the Buzz: How Prompt Engineering is Quietly Reshaping the Modern Workplace

The future of work isn’t about being replaced by AI, it’s about learning how to...
Read More
What is GPT Understanding Generative Pre-trained Transformers Mayur Ramgir

What is GPT? Understanding Generative Pre-trained Transformers

In the world of artificial intelligence (AI), a family of models known as GPT has...
Read More
How to Become an AI-Powered DevOps or Cloud Engineer in 2025

How to Become an AI-Powered DevOps or Cloud Engineer in 2025

The technology landscape is rapidly evolving, and the fusion of artificial intelligence with DevOps and...
Read More