Scribd
Upload
7 views5 pages

ws1v1

Uploaded by

verykalabandar

Copyright:

© All Rights Reserved
Download as PDF, TXT or read online from Scribd
Download as pdf or txt

ws1v1

Uploaded by

verykalabandar
7 views5 pages

Copyright

© © All Rights Reserved

Available Formats

PDF, TXT or read online from Scribd

Did you find this document useful?

Is this content inappropriate?

Copyright:

© All Rights Reserved
Download as PDF, TXT or read online from Scribd
Download as pdf or txt
7 views5 pages

ws1v1

Uploaded by

verykalabandar

Copyright:

© All Rights Reserved
Download as PDF, TXT or read online from Scribd
Download as pdf or txt
You are on page 1/ 5

Worksheet 1: Simple Calculator

Objective
Create a basic calculator that can perform addition, subtraction, multiplication,
and division.

Instructions
1. Create three files: index.html , styles.css , and script.js .

2. Type the provided HTML code into index.html .

3. Type the provided CSS code into styles.css .

4. Type the provided JavaScript code into script.js .

5. Ensure all files are saved in the same directory.

6. Open index.html in a web browser to use the calculator.

Code to Type
index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calculator">
<input type="text" id="display" disabled>
<div class="buttons">
<button class="btn" data-value="7">7</button>
<button class="btn" data-value="8">8</button>
<button class="btn" data-value="9">9</button>
<button class="btn" data-value="/">/</button>
<button class="btn" data-value="4">4</button>
<button class="btn" data-value="5">5</button>
<button class="btn" data-value="6">6</button>

Worksheet 1: Simple Calculator 1


<button class="btn" data-value="*">*</button>
<button class="btn" data-value="1">1</button>
<button class="btn" data-value="2">2</button>
<button class="btn" data-value="3">3</button>
<button class="btn" data-value="-">-</button>
<button class="btn" data-value="0">0</button>
<button class="btn" data-value=".">.</button>
<button class="btn" id="clear">C</button>
<button class="btn" data-value="+">+</button>
<button class="btn" id="equals">=</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

styles.css

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
}

.calculator {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

#display {
width: 100%;
height: 40px;
font-size: 1.5em;
text-align: right;

Worksheet 1: Simple Calculator 2


margin-bottom: 10px;
padding-right: 10px;
}

.buttons {
display: grid;
grid-template-columns: repeat(4, 60px);
grid-gap: 10px;
}

.btn {
width: 60px;
height: 60px;
font-size: 1.2em;
border: none;
border-radius: 5px;
background-color: #e0e0e0;
cursor: pointer;
}

.btn:hover {
background-color: #d5d5d5;
}

#equals {
grid-column: span 2;
background-color: #4CAF50;
color: white;
}

#equals:hover {
background-color: #45a049;
}

#clear {
background-color: #f44336;
color: white;
}

Worksheet 1: Simple Calculator 3


#clear:hover {
background-color: #da190b;
}

script.js

const buttons = document.querySelectorAll('.btn');


const display = document.getElementById('display');
let currentInput = '';

buttons.forEach(button => {
button.addEventListener('click', () => {
const value = button.getAttribute('data-value');
if (value) {
currentInput += value;
display.value = currentInput;
}
});
});

document.getElementById('equals').addEventListener('click',
() => {
try {
display.value = eval(currentInput);
currentInput = display.value;
} catch {
display.value = 'Error';
currentInput = '';
}
});

document.getElementById('clear').addEventListener('click',
() => {
currentInput = '';
display.value = '';

Worksheet 1: Simple Calculator 4


});

Key Points
Utilizes event listeners to handle button clicks.

eval() function evaluates arithmetic expressions.

CSS Grid is used to layout calculator buttons.

Input display is disabled to prevent manual editing.

Worksheet 1: Simple Calculator 5

You might also like