How to Create Modern Calculator Using JavaScript

Modern Design Calculator Using HTML, CSS, and JavaScript – Complete Source Code Available

by

Hi, guys I am back with another fantastic project in this project I created a Modern Design Calculator Using HTML, CSS & JavaScript.

I provide my readers and followers with the complete source code for this project without any cost or subscription requirements. The code files are available for free download and use.

Calculator Using JavaScript

A basic calculator using JavaScript typically involves:

1. HTML Structure:

  • An input field (<input type="text">) to display the current input and result.
  • Buttons for digits (0-9), decimal point (.), and basic arithmetic operators (+, -, *, /).
  • An equals (=) button to calculate the result.
  • A clear (C) button to clear the input.

2. JavaScript Logic:

  • Functions for appending digits or operators to the input field when the corresponding buttons are clicked.
  • A function to calculate the result when the equals button is clicked. This often involves using the eval() function, but it’s important to note that eval() can pose security risks in some situations.
  • A function to clear the input field when the clear button is clicked.

3. Event Handling:

  • Use the onclick attribute on each button to specify the JavaScript function to be executed when the button is clicked.
  • The functions can manipulate the content of the input field based on the button clicked.

Here’s a brief breakdown of what the functions might do:

  • appendToResult(value): Appends the specified value (digit or operator) to the input field.
  • calculateResult(): Evaluate the input field’s expression and display the result. This often involves using eval().
  • clearResult(): Clears the input field.

This is a simplified explanation, and in a production environment, additional considerations, such as input validation, error handling, and a more secure way to evaluate expressions, should be considered.

About This Project

The Code Hunter team developed this project to assist students in learning coding and programming. If you’re interested in joining our team, please follow us on Instagram.

Created byAhmed Developer
Languages HTML, CSS & JS
Source CodeAvailable Below
PreviewTake Preview
GitHub LinkCode Link

How to Create a Calculator Using HTML, CSS, and JavaScript

There are some steps to create this type of Calculator Using HTML, CSS, and JavaScript which are given below.

  1. The first step is to create one folder.
  2. Open this folder in Vs Code Editor and create three (3) files for HTML, CSS, and JavaScript.
  3. Make sure the HTML file extension is (.html), and the CSS file extension is (.css).
  4. After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
  5. The last step is copying and pasting the given code into your files.

Video Tutorial

If you want to learn more about this project please watch this video and also subscribe to this YouTube channel for more content like this. This video is provided by Code Traversal.

Modern Design Calculator Using HTML, CSS, and JavaScript – Source Code

HTML FILE

<!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" />
    <link rel="stylesheet" href="style.css" />
    <title>Calculator - By Code Traversal</title>
  </head>
  <body>
    <div class="container">
      <div class="calculator">
        <input type="text" id="inputBox" placeholder="0" />
        <div>
          <button class="button operator">AC</button>
          <button class="button operator">DEL</button>
          <button class="button operator">%</button>
          <button class="button operator">/</button>
        </div>
        <div>
          <button class="button">7</button>
          <button class="button">8</button>
          <button class="button">9</button>
          <button class="button operator">*</button>
        </div>
        <div>
          <button class="button">4</button>
          <button class="button">5</button>
          <button class="button">6</button>
          <button class="button operator">-</button>
        </div>
        <div>
          <button class="button">1</button>
          <button class="button">2</button>
          <button class="button">3</button>
          <button class="button operator">+</button>
        </div>

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

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

CSS FILE

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');

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

body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg, #0a0a0a, #3a4452);
}

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

}

input{
    width: 320px;
    border: none;
    padding: 24px;
    margin: 10px;
    background: transparent;
    box-shadow: 0px 3px 15px rgbs(84, 84, 84, 0.1);
    font-size: 40px;
    text-align: right;
    cursor: pointer;
    color: #ffffff;
}

input::placeholder{
    color: #ffffff;
}

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

.equalBtn{
    background-color: #fb7c14;
}

.operator{
    color: #6dee0a;
}

JavaScript FILE

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(e.target.innerHTML == '='){
            string = eval(string);
            input.value = string;
        }

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

You Might Like This:

  1. Modern To-Do List App Using HTML, CSS, and JavaScript – Complete Source Code
  2. How to Create a Digital Clock Using JavaScript Complete Source Code
  3. JavaScript Length Converter For Beginners With Complete Source Code

Final Words

Crafting a modern design calculator using HTML, CSS, and JavaScript provides a practical exercise in integrating core web development technologies.

The complete source code shared in this blog not only facilitates a hands-on learning experience for both beginners and intermediate developers but also highlights the seamless collaboration between HTML’s structure, CSS’s styling capabilities, and JavaScript’s interactive functionalities.

This project serves as a valuable foundation for developers to explore customization, feature expansion, and further optimization, fostering a deeper understanding of front-end development and its creative possibilities.

As the digital landscape evolves, such practical projects play a crucial role in skill enhancement and the continual growth of developers in the realm of web development.

Leave a Comment