Introduction
A C calculator is a computer program that performs basic arithmetic operations like addition, subtraction, multiplication, and division.
Source Code:
HTML:
<!DOCTYPE
html>
<html>
<head>
<title>
Calculator
</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div
class="calculator">
<div class="display" id="display">0</div>
<div
class="buttons">
<button class="btn" onclick="clearDisplay()">C</button>
<button class="btn" onclick="appendToDisplay('7')">7</button>
<button class="btn" onclick="appendToDisplay('8')">8</button>
<button class="btn" onclick="appendToDisplay('9')">9</button>
<button class="btn" onclick="appendToDisplay('/')">/</button>
<button class="btn" onclick="appendToDisplay('4')">4</button>
<button class="btn" onclick="appendToDisplay('5')">5</button>
<button class="btn" onclick="appendToDisplay('6')">6</button>
<button class="btn" onclick="appendToDisplay('*')">*</button>
<button class="btn" onclick="appendToDisplay('1')">1</button>
<button class="btn" onclick="appendToDisplay('2')">2</button>
<button class="btn" onclick="appendToDisplay('3')">3</button>
<button class="btn" onclick="appendToDisplay('-')">-</button>
<button class="btn" onclick="appendToDisplay('0')">0</button>
<button class="btn" onclick="calculate()">=</button>
<button class="btn" onclick="appendToDisplay('+')">+</button>
</div>
</div>
<script
src="script.js"></script>
</body>
</html>
CSS:
body
{
display
:
flex;
align-items
:
center;
justify-content
:
center;
height
:
100vh;
background-color
:
#f5f5f5;
margin
:
0;
font-family
:
"Arial", sans-serif;
}
.calculator
{
background-color
:
#fff;
border-radius
:
10px;
box-shadow
:
0 10px 20px rgba(0, 0, 0, 0.2);
padding
:
20px;
}
.display
{
background-color
:
#222;
color
:
#fff;
font-size
:
2em;
padding
:
10px;
border-radius
:
5px;
text-align
:
right;
margin-bottom
:
20px;
}
.buttons
{
display
:
grid;
grid-template-columns
:
repeat(4, 1fr);
gap
:
10px;
}
.btn
{
background
:
#00bcd4;
color
:
#fff;
border
:
none;
border-radius
:
5px;
font-size
:
1.5em;
padding
:
20px;
cursor
:
pointer;
transition
:
background 0.3s ease;
}
.btn:hover
{
background
:
#0097a7;
}
.btn:active
{
background
:
#00796b;
}
JavaScript:
let displayElement
= document.getElementById("display");
function
clearDisplay
() {
displayElement.textContent
="0";
}
function
appendToDisplay
(value) {
if
(displayElement.textContent === '0' && value !== '.')
{
displayElement.textContent
= value;
}
else {
displayElement.textContent
+= value;
}
}
function
calculate
() {
try
{
displayElement.textContent
= eval(displayElement.textContent);
}
catch
(error){
displayElement.textContent
= "Error";
}
}
Output
