In this article, we will discuss how to create a calculator using HTML, CSS, and JavaScript. This project focuses on the most fundamental functionalities, making it an excellent practice project to improve your programming skills as a beginner.
➡️
Creating the calculator layout
As usual, let's start by creating the HTML skeleton.
<div class="calculator">
<div class="display">0</div>
<div class="buttons">
<div class="button function">AC</div>
<div class="button function">+/-</div>
<div class="button function">%</div>
<div class="button function">/</div>
<div class="button number">7</div>
<div class="button number">8</div>
<div class="button number">9</div>
<div class="button function">*</div>
<div class="button number">4</div>
<div class="button number">5</div>
<div class="button number">6</div>
<div class="button function">-</div>
<div class="button number">1</div>
<div class="button number">2</div>
<div class="button number">3</div>
<div class="button function">+</div>
<div class="button number">0</div>
<div class="button function">.</div>
<div class="button function">=</div>
</div>
</div>
.calculatoris a container that wraps around the whole calculator.
.displayshows the user input, as well as the output of the calculation.
.buttonscontains both the.numberbuttons (0-9) and the.functionbuttons (+,-,*...).
And, of course, you must set up the event listeners so that when a button is clicked, the corresponding function is executed.
<div class="calculator">
<div class="display" id="display">0</div>
<div class="buttons">
<div class="button function" onclick="clearDisplay()">AC</div>
<div class="button function" onclick="toggleSign()">+/-</div>
<div class="button function" onclick="percent()">%</div>
<div class="button function" onclick="appendOperator('/')">/</div>
<div class="button number" onclick="appendNumber('7')">7</div>
<div class="button number" onclick="appendNumber('8')">8</div>
<div class="button number" onclick="appendNumber('9')">9</div>
<div class="button function" onclick="appendOperator('*')">*</div>
<div class="button number" onclick="appendNumber('4')">4</div>
<div class="button number" onclick="appendNumber('5')">5</div>
<div class="button number" onclick="appendNumber('6')">6</div>
<div class="button function" onclick="appendOperator('-')">-</div>
<div class="button number" onclick="appendNumber('1')">1</div>
<div class="button number" onclick="appendNumber('2')">2</div>
<div class="button number" onclick="appendNumber('3')">3</div>
<div class="button function" onclick="appendOperator('+')">+</div>
<div class="button number" id="Num0" onclick="appendNumber('0')">0</div>
<div class="button function" onclick="appendOperator('.')">.</div>
<div class="button function" onclick="calculate()">=</div>
</div>
</div>
Before we start coding, we also need to discuss the general structure of this project.
First of all, there should be a global variable (displayValue) to store the displayed value, as well as a helper function (updateDisplay()) that updates the .display based on the variable. The function selects the display element and updates its content.
There should also be an appendNumber() and appendOperator() functions that append new digits to displayValue. Lastly, you need a calculate() function that executes the mathematical expression and returns the value.
And of course, there are other functions such as clearDisplay(), toggleSign(), and percent().
Adding styles
Next, you should add some styles so that our calculator actually looks like a calculator.
First of all, the .buttons should be a
The number 0 is a special case, as it .
clearDisplay()
function clearDisplay() {
displayValue = "";
updateDisplay();
}
Lastly, the clearDisplay() function resets displayValue to an empty string.
Conclusion
You may have noticed we neglected two functions, toggleSign() and percent(). The exact implementation of these functions is available in the .
Happy coding!
SOCIAL SHARE CARD GENERATOR