Scribd
Upload
11 views

WT4 (1) 1

The document describes a simple calculator application with HTML, CSS, and JavaScript code. It includes the code for the HTML, CSS, and JavaScript files that are used to build the calculator interface and functionality.

Uploaded by

saurabhbborate0621
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
11 views

WT4 (1) 1

The document describes a simple calculator application with HTML, CSS, and JavaScript code. It includes the code for the HTML, CSS, and JavaScript files that are used to build the calculator interface and functionality.

Uploaded by

saurabhbborate0621
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

Saurabh Borate Practical No-4 Roll no- 10 Div-A

Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="calculator">
<input type="text" id="result" readonly>
<div class="buttons">
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('+')">+</button>
<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('-')">-</button>
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('*')">*</button>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="appendToDisplay('.')">.</button>
<button onclick="clearDisplay()">C</button>
<button onclick="appendToDisplay('/')">/</button>
<button onclick="calculate()">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

Style.css
.calculator {
width: 300px;
margin: 100px auto;
padding: 20px;
border: 2px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#result {
width: calc(100% - 40px);
margin-bottom: 10px;
padding: 10px;
font-size: 20px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
}
button {
padding: 10px;
font-size: 18px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #f5f5f5;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #e0e0e0;
}
Scrip
t.js
function appendToDisplay(value) {
document.getElementById('result').value += value;
}
function clearDisplay() {
document.getElementById('result').value = '';
}
function calculate() {
try {
var result = eval(document.getElementById('result').value);
if (isNaN(result)) {
throw "Invalid input!";
}
document.getElementById('result').value = result;
} catch (error) {
alert(error);
}
}
Output :-

You might also like