Scribd
Upload
49 views2 pages

Cal 2

Uploaded by

snowysnow300
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
49 views2 pages

Cal 2

Uploaded by

snowysnow300
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

html

Verify

Open In Editor
Edit
Run
Copy code
<!DOCTYPE html>
<html>
<head>
<title>HTML Calculator</title>
<style>
/* Add some basic styling to our calculator */
.calculator {
width: 200px;
margin: 50px auto;
padding: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

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

.calculator input[type="button"] {
width: 45%;
height: 40px;
margin: 10px 5px;
padding: 10px;
font-size: 18px;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: #fff;
cursor: pointer;
}

.calculator input[type="button"]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" disabled>
<input type="button" value="7" onclick="press(7)">
<input type="button" value="8" onclick="press(8)">
<input type="button" value="9" onclick="press(9)">
<input type="button" value="/" onclick="press('/')">
<br>
<input type="button" value="4" onclick="press(4)">
<input type="button" value="5" onclick="press(5)">
<input type="button" value="6" onclick="press(6)">
<input type="button" value="*" onclick="press('*')">
<br>
<input type="button" value="1" onclick="press(1)">
<input type="button" value="2" onclick="press(2)">
<input type="button" value="3" onclick="press(3)">
<input type="button" value="-" onclick="press('-')">
<br>
<input type="button" value="0" onclick="press(0)">
<input type="button" value="C" onclick="clearDisplay()">
<input type="button" value="=" onclick="calculate()">
<input type="button" value="+" onclick="press('+')">
</div>

<script>
// Get the display element
let display = document.getElementById('display');

// Function to handle button press


function press(value) {
// Append the pressed value to the display
display.value += value;
}

// Function to clear the display


function clearDisplay() {
// Clear the display
display.value = '';
}

// Function to calculate the result


function calculate() {
try {
// Evaluate the expression and display the result
display.value = eval(display.value);
} catch (e) {
// Display an error message if the expression is invalid
display.value = 'Error';
}
}
</script>
</body>
</html>

You might also like