KEMBAR78
Simple Calculator Css | PDF
Scribd
Upload
14 views4 pages

Simple Calculator Css

The document is an HTML code for a simple calculator application. It includes a user interface with buttons for digits, operations, and functionalities such as clearing the display and calculating results. The design is styled with CSS for a clean and user-friendly layout.

Uploaded by

Edward njoroge
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
14 views4 pages

Simple Calculator Css

The document is an HTML code for a simple calculator application. It includes a user interface with buttons for digits, operations, and functionalities such as clearing the display and calculating results. The design is styled with CSS for a clean and user-friendly layout.

Uploaded by

Edward njoroge
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/ 4

<!

DOCTYPE html>
<html lang="en">
<head>
<title>Simple Calculator</title>
<link rel="stylesheet" href="cal.css">
</head>
<body>
<div class="calculator">
<input type="text" id="display" readonly>
<div class="buttons">
<button onclick="clearDisplay()">C</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('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('-')">-</button>
<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('0')">0</button>
<button onclick="appendToDisplay('.')">.</button>
<button onclick="calculateResult()">=</button>
<button onclick="appendToDisplay('/')">/</button>
</div>
</div>
<script>function appendToDisplay(value) {
document.getElementById('display').value += value;
}

function clearDisplay() {
document.getElementById('display').value = '';
}

function calculateResult() {
const display = document.getElementById('display');
try {
display.value = eval(display.value);
} catch (error) {
display.value = 'Error';
}
}</script>
</body>
</html>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.calculator {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 20px;
text-align: center;
}
#display {
width: 100%;
padding: 10px;
margin: 10px 0;
font-size: 1.5em;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
button {
width: 100%;
padding: 10px;
font-size: 1.2em;
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #555;
}

You might also like