Scribd
Upload
18 views

Calculator_Project

A calculator app

Uploaded by

nerrowj321
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
18 views

Calculator_Project

A calculator app

Uploaded by

nerrowj321
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Simple Calculator Project

HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<input type="text" id="display" disabled>
<div class="buttons">
<button onclick="clearDisplay()">C</button>
<button onclick="appendValue('/')">/</button>
<button onclick="appendValue('*')">*</button>
<button onclick="deleteLast()">DEL</button>

<button onclick="appendValue('7')">7</button>
<button onclick="appendValue('8')">8</button>
<button onclick="appendValue('9')">9</button>
<button onclick="appendValue('-')">-</button>

<button onclick="appendValue('4')">4</button>
<button onclick="appendValue('5')">5</button>
<button onclick="appendValue('6')">6</button>
<button onclick="appendValue('+')">+</button>

<button onclick="appendValue('1')">1</button>
<button onclick="appendValue('2')">2</button>
<button onclick="appendValue('3')">3</button>
<button onclick="calculate()">=</button>

<button onclick="appendValue('0')" class="zero">0</button>


<button onclick="appendValue('.')">.</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

CSS Code
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
font-family: Arial, sans-serif;
}
Simple Calculator Project

.calculator {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

#display {
width: 100%;
height: 50px;
font-size: 20px;
margin-bottom: 10px;
padding: 10px;
text-align: right;
border: 1px solid #ccc;
border-radius: 5px;
}

.buttons {
display: grid;
grid-template-columns: repeat(4, 60px);
gap: 10px;
}

button {
padding: 15px;
font-size: 18px;
border: none;
border-radius: 5px;
background: #007bff;
color: white;
cursor: pointer;
}

button:hover {
background: #0056b3;
}

.zero {
grid-column: span 2;
}

JavaScript Code
function appendValue(val) {
document.getElementById("display").value += val;
}

function clearDisplay() {
document.getElementById("display").value = "";
Simple Calculator Project
}

function deleteLast() {
let current = document.getElementById("display").value;
document.getElementById("display").value = current.slice(0, -1);
}

function calculate() {
try {
let result = eval(document.getElementById("display").value);
document.getElementById("display").value = result;
} catch (error) {
document.getElementById("display").value = "Error";
}
}

You might also like