DEV Community

Cover image for Breaking down - Calculator app build using HTML, CSS and JS
Annapoorani Kadhiravan
Annapoorani Kadhiravan

Posted on

Breaking down - Calculator app build using HTML, CSS and JS

#html #css #javascript #sideprojects

Building of Calculator App using HTML, CSS and JS

Technology Purpose
HTML Creates the calculator structure
CSS Styles the calculator interface
JavaScript Handles calculator operations and user interactions

HTML Structure

HTML defines the layout of the calculator.

Main elements used:

  • Calculator container (div)
  • Display (input)
  • Buttons (button)

Example:

<div class="calculator">

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

    <button onclick="appendValue('7')">7</button>
    <button onclick="appendValue('+')">+</button>
    <button onclick="calculate()">=</button>

</div>
Enter fullscreen mode Exit fullscreen mode

Important HTML Concepts

<div>

Used as a container to group related elements together.

Example:

<div class="calculator">
Enter fullscreen mode Exit fullscreen mode

<input>

Displays the mathematical expression and final result.

<input type="text" id="display" readonly>
Enter fullscreen mode Exit fullscreen mode
  • type="text" creates a text box.
  • id="display" uniquely identifies the element.
  • readonly prevents users from typing directly into the display.

<button>

Represents each calculator key.

<button onclick="appendValue('7')">7</button>
Enter fullscreen mode Exit fullscreen mode

When clicked, it executes a JavaScript function.

CSS Styling

CSS improves the appearance of the calculator.

Some commonly used properties include:

  • display
  • grid
  • padding
  • margin
  • background
  • border-radius
  • box-shadow

Example:

.buttons{
    display:grid;
    grid-template-columns:repeat(4,1fr);
}
Enter fullscreen mode Exit fullscreen mode

Here, CSS Grid arranges the buttons into four equal columns.

JavaScript Concepts

JavaScript adds functionality to the calculator.

Selecting an HTML Element 

const display = document.getElementById("display");
Enter fullscreen mode Exit fullscreen mode

Explanation

  • document represents the entire webpage.
  • getElementById() finds an element using its unique ID.
  • display stores a reference to the input box so it can be updated later.

Functions

Functions group reusable code.

Example:

function appendValue(value){
}
Enter fullscreen mode Exit fullscreen mode

Whenever a number or operator button is clicked, this function is called.

Appending Values 

display.value += value;
Enter fullscreen mode Exit fullscreen mode

This adds the clicked button value to the existing expression.

Example:

Current Display : 45

Clicked Button : 6

Updated Display : 456
Enter fullscreen mode Exit fullscreen mode

Clearing the Display 

display.value = "";
Enter fullscreen mode Exit fullscreen mode

This removes all characters from the display.

Example:

Before

123+45

After

(empty)
Enter fullscreen mode Exit fullscreen mode

Deleting the Last Character 

display.value =
display.value.slice(0,-1);
Enter fullscreen mode Exit fullscreen mode

The slice() method returns a portion of a string.

Example:

Current Display

12345

After Delete

1234
Enter fullscreen mode Exit fullscreen mode

Calculating the Result 

display.value = eval(display.value);
Enter fullscreen mode Exit fullscreen mode

The eval() function evaluates a mathematical expression stored as a string.

Example:

Expression

10+20*2

Result

50
Enter fullscreen mode Exit fullscreen mode

Note: eval() is suitable for learning purposes but is not recommended for production applications due to security and performance concerns.

Error Handling 

try{

}
catch{

}
Enter fullscreen mode Exit fullscreen mode

The try...catch statement prevents the application from crashing when an invalid expression is entered.

Example:

Expression

5++

Output

Error
Enter fullscreen mode Exit fullscreen mode

Event Handling

Buttons respond to user actions using the onclick event.

Example:

<button onclick="appendValue('9')">
Enter fullscreen mode Exit fullscreen mode

Execution Flow:

User Clicks Button
        ↓
onclick Event Fires
        ↓
JavaScript Function Executes
        ↓
Display Updates
Enter fullscreen mode Exit fullscreen mode

Calculator Workflow 

User Opens Calculator
        ↓
HTML Creates the Interface
        ↓
CSS Styles the Calculator
        ↓
JavaScript Loads
        ↓
User Clicks a Button
        ↓
Value Appears on Display
        ↓
User Continues Entering Expression
        ↓
User Clicks "="
        ↓
Expression is Evaluated
        ↓
Result is Displayed
Enter fullscreen mode Exit fullscreen mode

JavaScript Methods Used

Method Purpose
document.getElementById() Selects an HTML element by its ID
display.value Gets or updates the input field value
slice() Removes the last character from the expression
eval() Evaluates the mathematical expression
try...catch Handles invalid expressions without crashing the application

Output

Check out my Calculator Project here : https://project1-b3f69b.gitlab.io/Calculator/index.html

Reference :
https://www.tutorialspoint.com/article/real-time-calculator-using-html-css-and-javascript

Top comments (2)

Collapse
 
karthick_07 profile image
Karthick (k) •

It is good.

Collapse
 
annapoo profile image
Annapoorani Kadhiravan •

Thanks!!