Scribd
Upload
11 views

ws1v1

Uploaded by

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

ws1v1

Uploaded by

verykalabandar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy