Scribd
Upload
4 views

Sachin LabFile6.docx

The document outlines the design and implementation of a simple calculator using HTML and JavaScript, which performs basic arithmetic operations: sum, difference, product, and quotient. It details the procedure for creating the user interface, writing JavaScript logic for calculations, and handling edge cases like invalid inputs and division by zero. The completed project demonstrates effective use of conditional logic and DOM manipulation.

Uploaded by

ashwinsharma2099
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
4 views

Sachin LabFile6.docx

The document outlines the design and implementation of a simple calculator using HTML and JavaScript, which performs basic arithmetic operations: sum, difference, product, and quotient. It details the procedure for creating the user interface, writing JavaScript logic for calculations, and handling edge cases like invalid inputs and division by zero. The completed project demonstrates effective use of conditional logic and DOM manipulation.

Uploaded by

ashwinsharma2099
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/ 8

Student Name Sachin

Admission Number 22SCSE1310001


Roll Number 22131310002
Programme B.Tech CSE
Course Name Web Technology
Course Code R1UC626C
Experiment No: 02
Experiment Title: Write a javascript program to design a simple calculator to perform
the following operations sum product difference quotient.

Aim: To design a simple calculator using JavaScript that performs the arithmetic
operations..

Procedure:
Create the HTML structure:

●​ Add input fields to accept two numbers from the user.​

●​ Add buttons for each operation: sum, difference, product, and quotient.​

●​ Add a section to display the result.

Write the JavaScript logic:

●​ Capture the values entered by the user.​

●​ Convert them from string to number format.​

●​ Perform the appropriate arithmetic operation when the corresponding button is clicked.​

●​ Display the result dynamically.

Handle edge cases:

●​ Check for invalid inputs (like empty fields or non-numeric values).​

●​ Handle division by zero gracefully.

Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Simple Calculator</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana,
sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2
100%);
}

.calculator {
background: white;
padding: 2rem;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 300px;
}

.display {
background: #f8f9fa;
padding: 1rem;
border-radius: 5px;
margin-bottom: 1rem;
text-align: right;
font-size: 1.5rem;
border: 1px solid #dee2e6;
}

.buttons {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}

button {
padding: 0.8rem;
font-size: 1rem;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}

button:hover {
transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.operation {
background: #007bff;
color: white;
}

.operation:hover {
background: #0056b3;
}

input {
width: 100%;
padding: 0.8rem;
margin-bottom: 1rem;
border: 1px solid #dee2e6;
border-radius: 5px;
font-size: 1rem;
}

input:focus {
outline: none;
border-color: #007bff;
box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}
</style>
</head>
<body>
<div class="calculator">
<div class="display" id="result">0</div>
<input type="number" id="num1" placeholder="First number">
<input type="number" id="num2" placeholder="Second number">
<div class="buttons">
<button class="operation"
onclick="calculate('sum')">Sum (+)</button>
<button class="operation"
onclick="calculate('difference')">Difference (-)</button>
<button class="operation"
onclick="calculate('product')">Product (×)</button>
<button class="operation"
onclick="calculate('division')">Division (÷)</button>
</div>
</div>
<script src="calculator.js"></script>
</body>
</html>

script.js
// Get DOM elements
const num1Input = document.getElementById('num1');
const num2Input = document.getElementById('num2');
const resultDisplay = document.getElementById('result');

// Function to get input values and validate them


function getInputValues() {
const num1 = parseFloat(num1Input.value);
const num2 = parseFloat(num2Input.value);

if (isNaN(num1) || isNaN(num2)) {
alert('Please enter valid numbers');
return null;
}

return { num1, num2 };


}

// Function to update the display


function updateDisplay(value) {
resultDisplay.textContent = value;
}

// Calculator operations
function calculate(operation) {
const values = getInputValues();
if (!values) return;

let result;
switch (operation) {
case 'sum':
result = values.num1 + values.num2;
break;
case 'difference':
result = values.num1 - values.num2;
break;
case 'product':
result = values.num1 * values.num2;
break;
case 'division':
if (values.num2 === 0) {
alert('Cannot divide by zero');
return;
}
result = values.num1 / values.num2;
break;
default:
alert('Invalid operation');
return;
}

// Round the result to 2 decimal places


result = Math.round(result * 100) / 100;
updateDisplay(result);
}

// Add event listeners for Enter key


num1Input.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
num2Input.focus();
}
});

num2Input.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
calculate('sum'); // Default to sum operation on Enter
}
});
Result:

Conclusion

The simple calculator was successfully developed using HTML and JavaScript. It accepts two
numbers from the user and performs basic arithmetic operations such as sum, difference,
product, and quotient. The calculator handles invalid input and division by zero appropriately,
demonstrating the use of conditional logic and DOM manipulation in JavaScript.

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