# Basic Calculator by ChatGPT – Prompt Used

This post is about Free Basic Calculator by ChatGPT – Prompt Used

### Prompt For The Calculator:

Write code using HTML, CSS and Javascript, for a Calculator. Add a button that deletes or clears any mistakes made. Let it be able to perform basic arithmetics accurately.

Created by: Catalyst Okoli

## Code Snippets Used For This Calculator:

### HTML Code:

``````<div id="calculator">
<input type="text" id="display" disabled>
<br>
<div class="button-row">
<button class="btn" onclick="display.value+='7'">7</button>
<button class="btn" onclick="display.value+='8'">8</button>
<button class="btn" onclick="display.value+='9'">9</button>
<button class="btn operator" onclick="display.value+='/'">/</button>
</div>
<div class="button-row">
<button class="btn" onclick="display.value+='4'">4</button>
<button class="btn" onclick="display.value+='5'">5</button>
<button class="btn" onclick="display.value+='6'">6</button>
<button class="btn operator" onclick="display.value+='*'">*</button>
</div>
<div class="button-row">
<button class="btn" onclick="display.value+='1'">1</button>
<button class="btn" onclick="display.value+='2'">2</button>
<button class="btn" onclick="display.value+='3'">3</button>
<button class="btn operator" onclick="display.value+='-'">-</button>
</div>
<div class="button-row">
<button class="btn" onclick="display.value+='.'">.</button>
<button class="btn" onclick="display.value+='0'">0</button>
<button class="btn" onclick="calculate()">=</button>
<button class="btn operator" onclick="display.value+='+'">+</button>
</div>
<div class="button-row">
<button class="btn" onclick="clearDisplay()">Clear</button>
</div>
</div>
``````

### CSS Code:

``````#calculator {
width: 300px;
margin: 0 auto;
border: 1px solid black;
}

.button-row {
width: 100%;
display: flex;
}

.btn {
width: 25%;
height: 50px;
font-size: 20px;
}

.operator {
background-color: orange;
}
``````

### JS Code:

``````function calculate() {
try {
display.value = eval(display.value);
} catch (err) {
display.value = "Error";
}
}

function clearDisplay() {
display.value = "";
}
``````

#### Introduction

• A calculator is a simple yet essential tool that we use on a daily basis to perform mathematical calculations. Whether it’s for work, school, or personal use, calculators have become a fundamental part of our lives.
• With the advancements in technology, calculators have evolved from simple devices that could only perform basic arithmetic operations to sophisticated devices that can perform complex mathematical functions.

### The Evolution of Calculators

• The first calculators were invented in the early 17th century. They were known as abacus calculators, which were used to perform simple arithmetic operations.
• As technology progressed, mechanical calculators were invented in the 19th century. These calculators used gears and levers to perform calculations and were operated by turning a crank.
• In the 20th century, electronic calculators were introduced. These calculators used electronic circuits to perform calculations and could perform complex mathematical functions such as trigonometry and logarithms.

### Modern-day Calculators

• With the advent of the personal computer, calculators have become even more advanced. Today, we have calculators that can perform complex mathematical functions such as calculus and statistics, and can even be programmed to perform specific tasks.
• We also have virtual calculators that can be accessed through our smartphones and computers, which are even more convenient and user-friendly.

### Creating a Calculator using HTML, CSS, and JavaScript

• Creating a basic calculator using HTML, CSS, and JavaScript is relatively simple. You can create a container for the calculator using a div element and give it an id of “calculator.” Inside the container, you can create an input element with an id of “display” to show the calculations.
• Next, you can create buttons for the numbers, operators, and functions using the button element. Each button can have an onclick attribute that calls a JavaScript function to perform the corresponding operation.
• To style the calculator, you can use CSS. You can use the id selector to target the container of the calculator and give it a width, margin, text alignment, background color, and padding. You can also target the display element and give it a width, text alignment, padding, border, and background color. Additionally, you can create classes for the numbers and operators buttons and give them different styles.
• Finally, you can use JavaScript to add functionality and interactivity to the calculator. You can create functions for performing operations such as addition, subtraction, multiplication, and division.