Scribd
Upload
86 views2 pages

All Free Store

The document is an HTML code for a responsive calculator interface. It includes a styled layout with buttons for digits, operations, and functionalities to append values, calculate results, and clear the input. The calculator is designed to be user-friendly and visually appealing with a simple JavaScript functionality for calculations.

Uploaded by

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

All Free Store

The document is an HTML code for a responsive calculator interface. It includes a styled layout with buttons for digits, operations, and functionalities to append values, calculate results, and clear the input. The calculator is designed to be user-friendly and visually appealing with a simple JavaScript functionality for calculations.

Uploaded by

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

<!

DOCTYPE html>
<html>
<head>
<title>Responsive Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
}

.calculator {
max-width: 400px;
margin: 0 auto;
background-color: #f2f2f2;
padding: 20px;
border-radius: 10px;
}

.calculator input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
font-size: 18px;
border-radius: 5px;
border: 1px solid #ccc;
}

.calculator .row {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}

.calculator .row .button {


width: 23%;
padding: 10px;
text-align: center;
font-size: 18px;
background-color: #e9e9e9;
border-radius: 5px;
cursor: pointer;
}

.calculator .row .button:hover {


background-color: #d5d5d5;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="result" readonly>
<div class="row">
<div class="button" onclick="appendToResult('7')">7</div>
<div class="button" onclick="appendToResult('8')">8</div>
<div class="button" onclick="appendToResult('9')">9</div>
<div class="button" onclick="appendToResult('/')">/</div>
</div>
<div class="row">
<div class="button" onclick="appendToResult('4')">4</div>
<div class="button" onclick="appendToResult('5')">5</div>
<div class="button" onclick="appendToResult('6')">6</div>
<div class="button" onclick="appendToResult('*')">*</div>
</div>
<div class="row">
<div class="button" onclick="appendToResult('1')">1</div>
<div class="button" onclick="appendToResult('2')">2</div>
<div class="button" onclick="appendToResult('3')">3</div>
<div class="button" onclick="appendToResult('-')">-</div>
</div>
<div class="row">
<div class="button" onclick="appendToResult('0')">0</div>
<div class="button" onclick="appendToResult('.')">.</div>
<div class="button" onclick="calculate()">=</div>
<div class="button" onclick="appendToResult('+')">+</div>
</div>
<div class="row">
<div class="button" onclick="clearResult()">C</div>
</div>
</div>

<script>
function appendToResult(value) {
document.getElementById("result").value += value;
}

function calculate() {
var result = document.getElementById("result").value;
var calculatedResult = eval(result);
document.getElementById("result").value = calculatedResult;
}

function clearResult() {
document.getElementById("result").value = "";
}
</script>
</body>
</html>

You might also like