Building a Basic Calculator Using HTML, CSS, and JavaScript

3 min readAug 26, 2023

In the dynamic world of web development, the ability to craft interactive and functional user interfaces is a quintessential skill. From personal websites to complex web applications, this skill is at the heart of modern digital experiences. A perfect project to hone these skills is building a basic calculator. In this step-by-step tutorial, we will embark on an exciting journey to create a simple calculator using the trifecta of web technologies: HTML, CSS, and JavaScript. By the end of this guide, you’ll not only have a fully operational calculator but also a deeper understanding of how these technologies work together seamlessly.

Setting Up the HTML

The journey begins with the creation of the structural foundation of our calculator through HTML. HTML, the markup language of the web, gives structure to our project. Below is a snippet of the HTML code that sets the stage for our calculator.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="calculator">
        <input type="text" id="result" readonly>
        <div class="buttons">
            <button class="clear">C</button>
            <button class="operator">/</button>
            <button class="operator">*</button>
            <button class="operator">-</button>
            <button class="number">7</button>
            <button class="number">8</button>
            <button class="number">9</button>
            <button class="operator">+</button>
            <button class="number">4</button>
            <button class="number">5</button>
            <button class="number">6</button>
            <button class="equals">=</button>
            <button class="number">1</button>
            <button class="number">2</button>
            <button class="number">3</button>
            <button class="number">0</button>
            <button class="decimal">.</button>
        </div>
    </div>
    <script src="index.js"></script>
</body>
</html>

Styling with CSS

With the foundation laid, it’s time to add the visual charm that CSS provides. CSS brings aesthetics and layout to our calculator, making it visually appealing to users. Here’s a snippet of the CSS code that gives life to our calculator’s appearance

* {
    box-sizing: border-box;
    margin: 0;
  }
  
  .calculator {
    background-color: black;
    padding: 20px;
    max-width: 400px;
    margin: 0 auto;
    border: solid 1px #ccc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    margin-top: 40px;
  }
  
  #result{
     background-color: yellowgreen;
      width: 100%;
      padding: 10px;
      font-size: 24px;
      border: none;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) inset;
      border-radius: 5px;
  }
  
  .buttons{
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-gap: 10px;
      margin-top: 20px;
  }
  
  button{
      padding: 10px;
      font-size: 24px;
      border: none;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s ease;
  
  }
  
  button:hover{
      background-color: #ddd;
  }
  
  .clear{
      background-color: #ff4136;
      color: #fff;
  }
  
  .number, .decimal{
      background-color: #fff;
      color: #333;
  
  }
  
  .operator{
      background-color: #0074d9;
      color: #fff;
  }
  
  .equals{
      background-color: #01ff70;
      grid-row: span 3;
      color: #fff;
  }

Adding Functionality with JavaScript

JavaScript is the magic wand that imparts interactivity to our calculator. It’s the powerhouse that makes calculations possible at the click of a button. Below, we’ll dissect the code segments that give life to our calculator’s functionalities.

const button = document.querySelectorAll("button");
const result = document.getElementById("result");

for(let i =0; i<button.length; i++){
button[i].addEventListener("click", () =>
{
const buttonValue = button[i].textContent;
if(buttonValue === "C")
{
  clearResult();
}
else if(buttonValue === "=")
{
  calculateResult();
}
else 
{
  appendValue(buttonValue);
}
});
}

function clearResult()
{
  result.value="";
}

function calculateResult()
{
  result.value =eval(result.value);
}

function appendValue(buttonValue)
{
  result.value = result.value + buttonValue;
}

The creation of a calculator is a small yet pivotal step on your web development journey. Armed with the proficiency gained in HTML, CSS, and JavaScript, you’re primed to tackle challenges that lie ahead. Whether you’re developing user-centric websites, crafting immersive web applications, or exploring the latest web trends, the lessons learned from building this calculator will remain a cornerstone of your coding prowess.

GitHub :- https://github.com/bhageshwaree11/basic-calculator

Building a Basic Calculator Using HTML, CSS, and JavaScript

Written by Bhageshwaree Bendale