body {
font-family: Arial, sans-serif;
text-align: center;
}
input[type=”button”] {
width: 50px;
height: 50px;
font-size: 18px;
margin: 5px;
}

Simple Calculator

function addToDisplay(value) {
document.getElementById(‘display’).value += value;
}

function clearDisplay() {
document.getElementById(‘display’).value = ”;
}

function calculate() {
try {
document.getElementById(‘display’).value = eval(document.getElementById(‘display’).value);
} catch (error) {
document.getElementById(‘display’).value = ‘Error’;
}
}

In this article, we will learn how to create a simple calculator using HTML, CSS, and JavaScript. This tutorial is perfect for beginners who want to practice their coding skills and learn how to create interactive web applications.

Step 1: Setting up the HTML
We will start by creating the structure of our calculator using HTML. Open your text editor and create a new file. Copy the following code and save it as “index.html”.

“`html

body {
font-family: Arial, sans-serif;
text-align: center;
}
input[type=”button”] {
width: 50px;
height: 50px;
font-size: 18px;
margin: 5px;
}

Simple Calculator

function addToDisplay(value) {
document.getElementById(‘display’).value += value;
}

function clearDisplay() {
document.getElementById(‘display’).value = ”;
}

function calculate() {
try {
document.getElementById(‘display’).value = eval(document.getElementById(‘display’).value);
} catch (error) {
document.getElementById(‘display’).value = ‘Error’;
}
}

“`

Step 2: Styling the Calculator
Next, we will style the calculator using CSS to make it visually appealing. In the tag of the HTML file, we added some basic styling to the body and input[type=”button”] elements. You can customize the styles to your liking by changing the font, color, and size.

Step 3: Adding JavaScript Functionality
Finally, we will add JavaScript to make our calculator functional. In the tag of the HTML file, we created three functions:

addToDisplay(value): This function adds the clicked value to the display input field.
clearDisplay(): This function clears the display input field.
calculate(): This function evaluates the expression in the display input field and displays the result.
Now that you have completed all the steps, you can open the “index.html” file in your web browser to see the simple calculator in action. You can click on the buttons to enter numbers and operators, and click the “=” button to see the result of the calculation.

Congratulations, you have successfully created a simple calculator using HTML, CSS, and JavaScript! You can further enhance the functionality and design of the calculator by adding more features and styles. Good luck with your coding journey!