Scribd
Upload
12 views4 pages

Assignment 2 Print

Uploaded by

prasad.mahankal22
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
12 views4 pages

Assignment 2 Print

Uploaded by

prasad.mahankal22
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>

<head>

<title>JavaScript Calculator</title>

<script>

function appendValue(value) {

const display = document.querySelector('.display');

display.value += value;

function calculate() {

const display = document.querySelector('.display');

try {

display.value = eval(display.value);

} catch (e) {

display.value = "Error";

function clearDisplay() {

document.querySelector('.display').value = '';

function deleteLast() {

const display = document.querySelector('.display');

display.value = display.value.slice(0, -1);

</script>

<style>

body {

font-family: Arial, sans-serif;

background-color: #e0e0e0;

.container {

max-width: 300px;
margin: 50px auto;

background-color: #fff;

padding: 15px;

border-radius: 8px;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

.display {

width: 95%;

font-size: 24px;

padding: 10px;

text-align: right;

border: 1px solid #ccc;

border-radius: 4px;

margin-bottom: 15px;

.button-grid {

display: grid;

grid-template-columns: repeat(4, 1fr);

grid-gap: 10px;

.btn {

padding: 15px;

font-size: 18px;

border: none;

background-color: #4CAF50;

color: white;

border-radius: 4px;

cursor: pointer;

.btn-clear {

background-color: #f44336;

.btn-operator {
background-color: #2196F3;

.btn-equals {

background-color: #FF9800;

grid-column: span 2;

.btn:hover {

opacity: 0.8;

</style>

</head>

<body>

<div class="container">

<input type="text" class="display" disabled>

<div class="button-grid">

<button class="btn btn-clear" onclick="clearDisplay()">C</button>

<button class="btn" onclick="deleteLast()">⌫</button>

<button class="btn btn-operator" onclick="appendValue('/')">/</button>

<button class="btn btn-operator" onclick="appendValue('*')">x</button>

<button class="btn" onclick="appendValue('7')">7</button>

<button class="btn" onclick="appendValue('8')">8</button>

<button class="btn" onclick="appendValue('9')">9</button>

<button class="btn btn-operator" onclick="appendValue('-')">-</button>

<button class="btn" onclick="appendValue('4')">4</button>

<button class="btn" onclick="appendValue('5')">5</button>

<button class="btn" onclick="appendValue('6')">6</button>

<button class="btn btn-operator" onclick="appendValue('+')">+</button>

<button class="btn" onclick="appendValue('1')">1</button>

<button class="btn" onclick="appendValue('2')">2</button>

<button class="btn" onclick="appendValue('3')">3</button>

<button class="btn" onclick="appendValue('.')">.</button>


<button class="btn btn-equals" onclick="calculate()">=</button>

<button class="btn" onclick="appendValue('0')" style="grid-column: span 2;">0</button>

</div>

</div>

</body>

</html>

You might also like