Create Simple calculator using HTML, CSS and JS

In this article, Let’s create a calculator in HTML, CSS, and JavaScript. that can run over the browser and show the output.

To perform this task, I am using visual studio code as a code editor tool, which you can use at your convenience.

  • Create a folder with a project folder and open that folder inside your code editor to start the task.
  • Create index.html file to write the HTML code to define Buttons, Input, and labels.
  • Create script.js file to write the JavaScript or logical code to perform events and operations.
  • Create style.css to write the CSS code for the styling of the button, input, and labels.
  • Now double-click on your index.html file to run it and get the output.


<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <div class="container">
      <div class="calculator">
        <input type="text" id="inputBox" placeholder="0" />
          <button class="button operator">AC</button>
          <button class="button operator">DEL</button>
          <button class="button operator">%</button>
          <button class="button operator">/</button>
          <button class="button">7</button>
          <button class="button">8</button>
          <button class="button">9</button>
          <button class="button operator">*</button>
          <button class="button">4</button>
          <button class="button">5</button>
          <button class="button">6</button>
          <button class="button operator">-</button>
          <button class="button">1</button>
          <button class="button">2</button>
          <button class="button">3</button>
          <button class="button operator">+</button>

          <button class="button">00</button>
          <button class="button">0</button>
          <button class="button">.</button>
          <button class="button equalBtn">=</button>

    <script src="script.js"></script>


let input = document.getElementById('inputBox');
let buttons = document.querySelectorAll('button');

let string = "";
let arr = Array.from(buttons);
arr.forEach(button => {
    button.addEventListener('click', (e) =>{
        if( === '='){
            string = eval(string);
            input.value = string;

        else if( === 'AC'){
            string = "";
            input.value = string;
        else if( === 'DEL'){
            string = string.substring(0, string.length-1);
            input.value = string;
            string +=;
            input.value = string;


@import url('');

    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;

    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(5deg, #150441, #285c9b);

    border: 1px solid #717377;
    padding: 20px;
    border-radius: 16px;
    background: transparent;
    box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5);


    width: 350px;
    border: none;
    padding: 24px;
    margin: 5px;
    background: transparent;
    box-shadow: 0px 3px 15px rgbs(84, 84, 84, 0.1);
    font-size: 35px;
    text-align: right;
    cursor: pointer;
    color: #ffffff;

    color: #ffffff;

    border: none;
    width: 60px;
    height: 60px;
    margin: 10px;
    border-radius: 20%;
    background: transparent;
    color: #ffffff;
    font-size: 20px;
    box-shadow: -8px -8px 15px rgba(255, 255, 255, 0.1);
    cursor: pointer;

    background-color: #06010e;

    color: #f5f8fa;