# Introduction

Building a calculator is a great project for someone who's learning programming, especially when working with JavaScript. It helps you understand how to handle user input, perform calculations, and display the result on the screen. In this tutorial, we will create a simple calculator using JavaScript, HTML, and CSS.

Don't worry if you're not familiar with some terms or concepts mentioned in this tutorial. We'll explain everything along the way, and by the end, you'll have a working calculator that you can customize and improve.

# Setting up the HTML

First, we need to set up the HTML structure for our calculator. We'll create a container for the calculator, which will hold all of its elements, such as input fields and buttons.

``````<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Calculator</title>
<body>
<div id="calculator">
<!-- Calculator elements will go here -->
</div>
</body>
</html>
``````

Now, let's add the elements we'll need for our calculator. We'll need an input field to display the current value (think of it as a calculator screen), and buttons for digits 0-9, decimal point, and basic arithmetic operations (+, -, *, /). We'll also add a button for clearing the input field, and one for calculating the result.

``````<div id="calculator">
<div id="buttons">
<button>1</button>
<button>2</button>
<button>3</button>
<button>+</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>-</button>
<button>7</button>
<button>8</button>
<button>9</button>
<button>*</button>
<button>.</button>
<button>0</button>
<button>/</button>
<button>C</button>
<button>=</button>
</div>
</div>
``````

# Styling the calculator with CSS

Next, let's add some basic styling to our calculator using CSS. We'll give the calculator container a fixed width and center it on the screen. The input field (calculator screen) will have a larger font-size and a light gray background. The buttons will have a fixed width and height, and we'll arrange them in a grid layout.

``````<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}

#calculator {
width: 200px;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

#display {
width: 100%;
height: 40px;
margin-bottom: 10px;
text-align: right;
background-color: #f0f0f0;
border: 1px solid #cccccc;
font-size: 18px;
outline: none;
}

#buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 5px;
}

button {
width: 100%;
height: 40px;
font-size: 18px;
background-color: #d1d1d1;
border: none;
cursor: pointer;
}

button:hover {
background-color: #bcbcbc;
}
</style>
``````

Now that we have the structure and styling for our calculator, let's add functionality using JavaScript. First, we'll create a function called `appendToDisplay` that will update the input field (calculator screen) with the clicked button's value.

``````function appendToDisplay(value) {
const display = document.getElementById('display');
display.value += value;
}
``````

Next, we'll create a function called `clearDisplay`, which will clear the input field when the "C" button is clicked.

``````function clearDisplay() {
const display = document.getElementById('display');
display.value = '';
}
``````

Now, we need to create a function called `calculate` that will take the current value in the input field (calculator screen) and perform the desired calculation.

``````function calculate() {
const display = document.getElementById('display');
try {
display.value = eval(display.value);
} catch (error) {
display.value = 'Error';
}
}
``````

The `eval()` function in JavaScript allows us to evaluate a string of code, which in our case, will be a mathematical expression. However, using `eval()` can be dangerous, as it could potentially execute malicious code. In this tutorial, we'll use it for simplicity, but in a real-world application, it's recommended to use a safer alternative, like a math library or writing your own calculation functions.

Finally, we need to add event listeners to our buttons, so that when they are clicked, the appropriate function is called.

``````const buttons = document.querySelectorAll('button');

buttons.forEach((button) => {
if (button.textContent === 'C') {
clearDisplay();
} else if (button.textContent === '=') {
calculate();
} else {
appendToDisplay(button.textContent);
}
});
});
``````

Now, you should have a working calculator that can perform basic arithmetic operations. You can further customize the styling and functionality of your calculator, or even add more advanced features like parentheses, exponents, or trigonometric functions.

# Conclusion

In this tutorial, we've built a simple calculator using JavaScript, HTML, and CSS. We've learned how to handle user input, perform calculations, and display the result on the screen. Building a calculator is an excellent project for learning programming, as it helps you understand the basics of user interactions and mathematical operations. You can now experiment with your calculator, adding more features, or improving its design and functionality. Happy coding!

## Learn to code in our 100% online programs

Altcademy coding bootcamp offers beginner-friendly, online programs designed by industry experts to help you become a coder. 85%+ of Altcademy alumni are hired within 6 months after graduation. See how we teach, or click on one of the following programs to find out more.