July 24, 2024
Random News

StakeDesigner

StakeDesigner | Creative Coding Blog – HTML CSS & JavaScript

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

Editor010 mins
JavaScript Calculator

In the world of web development, one of the most common beginner projects is building a JavaScript Calculator. It’s a great way to practice HTML, CSS, and JavaScript skills while creating something functional. In this blog post, we’ll walk through how to create a simple calculator using these three fundamental web technologies.

JavaScript Calculator

HTML Structure

Let’s start with the HTML structure. We’ll create a basic layout for our JavaScript Calculator interface.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Calculator</title>
  <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
  <div class="calculator">
    <div class="display" id="display"></div>
    <div class="buttons">
      <div class="operators">
        <div class="operator" data-operator="+">+</div>
        <div class="operator" data-operator="-">-</div>
        <div class="operator" data-operator="*">&times;</div>
        <div class="operator" data-operator="/">&divide;</div>
      </div>
      <div class="left-panel">
        <div class="numbers">
          <div class="number" data-number="7">7</div>
          <div class="number" data-number="8">8</div>
          <div class="number" data-number="9">9</div>
        </div>
        <div class="numbers">
          <div class="number" data-number="4">4</div>
          <div class="number" data-number="5">5</div>
          <div class="number" data-number="6">6</div>
        </div>
        <div class="numbers">
          <div class="number" data-number="1">1</div>
          <div class="number" data-number="2">2</div>
          <div class="number" data-number="3">3</div>
        </div>
        <div class="numbers">
          <div class="number" data-number="0">0</div>
          <div class="number" data-number=".">.</div>
          <div class="clear" id="clear">C</div>
        </div>
      </div>
      <div class="equal" id="equal">=</div>
    </div>
  </div>
  <script src="assets/js/index.js"></script>
</body>

</html>

In the HTML structure, we’ve defined a container for our JavaScript Calculator with a display area and buttons for numbers, operators, and the clear and equal sign.

The HTML file starts with the usual <!DOCTYPE html> declaration, followed by the <html> element.In the <head> section, we include meta tags for character set and viewport settings, along with a title for the page and a link to an external CSS file.Inside the <body> element, there’s a <div> with the class “calculator” that contains all the calculator components.Within the calculator <div>, there’s another <div> with the class “display” and the id “display”. This is where the result or input will be shown.The rest of the calculator buttons are not shown in this snippet, but they would be added within the <div> with the class “calculator”.

Styling with CSS

To make our JavaScript Calculator visually appealing, we’ll apply some CSS styles. Here’s the CSS code for styling our calculator:

body {
  width: 500px;
  margin: 4% auto;
  font-family: 'Source Sans Pro', sans-serif;
  letter-spacing: 5px;
  font-size: 1.8rem;
  background: linear-gradient(to bottom, hsla(53, 19%, 56%, 0.282) 100%, #d9a9a273 100%);
}

.calculator {
  padding: 20px;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  border-radius: 1px;
  background-color: #fff;
}

.display {
  border: 1px solid #ddd;
  border-radius: 1px;
  height: 60px;
  padding-right: 15px;
  padding-top: 10px;
  text-align: right;
  margin-right: 6px;
  font-size: 2.5rem;
  overflow-x: auto;
  transition: all .2s ease-in-out;
}

.display:hover {
  border: 1px solid #bbb;
  -webkit-box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: inset 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
}

.operators .operator {
  display: inline-block;
  border: 1px solid #bbb;
  border-radius: 1px;
  width: 80px;
  text-align: center;
  padding: 10px;
  margin: 20px 4px 10px 0;
  cursor: pointer;
  background-color: #ddd;
  transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;
}

.operators .operator:hover {
  background-color: #ddd;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  border-color: #aaa;
}

.operators .operator:active {
  font-weight: bold;
}

.left-panel {
  display: inline-block;
}

.numbers .number, .clear {
  display: inline-block;
  border: 1px solid #ddd;
  border-radius: 1px;
  width: 80px;
  text-align: center;
  padding: 10px;
  margin: 10px 4px 10px 0;
  cursor: pointer;
  background-color: #f9f9f9;
  transition: border-color .2s ease-in-out, background-color .2s, box-shadow .2s;
}

.numbers .number:hover, .clear:hover {
  background-color: #f1f1f1;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  border-color: #bbb;
}

.numbers .number:active, .clear:active {
  font-weight: bold;
}

div.equal {
  display: inline-block;
  border: 1px solid #3079ED;
  border-radius: 1px;
  width: 17%;
  text-align: center;
  padding: 127px 10px;
  margin: 10px 6px 10px 0;
  vertical-align: top;
  cursor: pointer;
  color: #FFF;
  background-color: #4d90fe;
  transition: all .2s ease-in-out;
}

div.equal:hover {
  background-color: #307CF9;
  -webkit-box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.2);
  border-color: #1857BB;
}

div.equal:active {
  font-weight: bold;
}

With CSS, we can define the layout, colors, and styles for different components of our JavaScript Calculator.

JavaScript Functionality

Now, let’s add JavaScript to make our JavaScript Calculator functional. We’ll define event listeners for button clicks to perform calculations and update the display accordingly.

const display = document.getElementById('display');
const operators = document.querySelectorAll('.operator');
const numbers = document.querySelectorAll('.number');
const clearButton = document.getElementById('clear');
const equalButton = document.getElementById('equal');


operators.forEach(operator => {
    operator.addEventListener('click', function () {
        const operatorValue = operator.getAttribute('data-operator');
        display.textContent += ` ${operatorValue} `;
    });
});

numbers.forEach(number => {
    number.addEventListener('click', function () {
        const numberValue = number.getAttribute('data-number');
        display.textContent += numberValue;
    });
});

clearButton.addEventListener('click', function () {
    display.textContent = '';
});

equalButton.addEventListener('click', function () {
    const result = eval(display.textContent)
    display.textContent = result;
});

JavaScript Explanation:

  • We start by selecting various elements from the HTML document using document.getElementById and document.querySelectorAll.
  • display represents the element where the input and output will be shown.
  • operators and numbers represent the operator and number buttons respectively.
  • clearButton represents the button that clears the display.
  • equalButton represents the button that computes the result.
  • We then add event listeners to these elements to capture user interactions:
    • For operators and numbers, when clicked, their respective values are appended to the display.
    • For the clear button, when clicked, the display is cleared.
    • For the equal button, when clicked, the expression in the display is evaluated using eval() and the result is displayed.

Conclusion

This JavaScript code adds interactivity to the calculator. It listens for user input, performs calculations, and updates the display accordingly. By combining HTML for structure, CSS for styling, and JavaScript for functionality, we’ve created a basic but functional calculator application.

, , , , , , , , , , , , , , ,

Leave a Reply

Related News