Scribd
Upload
8 views3 pages

cODE 12

This document is an HTML code for a basic calculator web application. It includes a simple user interface with buttons for numbers, operators, and functionalities like clear and calculate. The design is styled with CSS to create a compact layout for the calculator.

Uploaded by

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

cODE 12

This document is an HTML code for a basic calculator web application. It includes a simple user interface with buttons for numbers, operators, and functionalities like clear and calculate. The design is styled with CSS to create a compact layout for the calculator.

Uploaded by

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

<!

DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/mathjs/11.8.0/math.js"></
script>
<style>
body {
font-family: sans-serif;
}
.calculator {
width: 200px; /* Reduced width */
margin: 0 auto;
border: 1px solid #ccc;
padding: 5px; /* Reduced padding */
}
#display {
width: 100%;
padding: 3px; /* Reduced padding */
font-size: 16px; /* Slightly smaller font */
margin-bottom: 5px; /* Reduced margin */
box-sizing: border-box;
}
button {
width: 40px; /* Reduced button width */
height: 40px; /* Reduced button height */
font-size: 14px; /* Slightly smaller font */
margin: 3px; /* Reduced margin */
padding: 0; /* remove padding */
}
.operator {
background-color: #f0f0f0;
}
</style>
</head>
<body>

<div class="calculator">
<h1>Calculator</h1>
<input type="text" id="display" readonly> <br><br>

<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button class="operator"
onclick="appendToDisplay('+')">+</button> <br>

<button onclick="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button class="operator"
onclick="appendToDisplay('-')">-</button> <br>

<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button class="operator"
onclick="appendToDisplay('*')">*</button> <br>

<button onclick="appendToDisplay('0')">0</button>
<button onclick="appendToDisplay('.')">.</button>
<button class="operator" onclick="calculate()">=</button>
<button class="operator"
onclick="appendToDisplay('/')">/</button> <br>

<button class="operator" onclick="clearDisplay()">C</button>


<button onclick="appendToDisplay('(')"> ( </button>
<button onclick="appendToDisplay(')')"> ) </button>
<button onclick="appendToDisplay('{')"> { </button>
<button onclick="appendToDisplay('}')"> } </button>
<button onclick="appendToDisplay('[')"> [ </button>
<button onclick="appendToDisplay(']')"> ] </button>
</div>

<script>
// ... (JavaScript remains the same)
</script>

</body>
</html>

You might also like