Scribd
Upload
8 views4 pages

Simple Web-Based Calculator Tool

This document is an HTML code for a basic calculator web application. It includes input fields for two numbers, buttons for different arithmetic operations, and a JavaScript function to perform calculations and display results. The page is styled with internal CSS for a simple and user-friendly interface.

Uploaded by

byebye212003
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
8 views4 pages

Simple Web-Based Calculator Tool

This document is an HTML code for a basic calculator web application. It includes input fields for two numbers, buttons for different arithmetic operations, and a JavaScript function to perform calculations and display results. The page is styled with internal CSS for a simple and user-friendly interface.

Uploaded by

byebye212003
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

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Basic Calculator</title>

<!-- Internal CSS styling for the page -->

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

margin-top: 50px;

input {

width: 100px;

padding: 8px;

margin: 10px;

button {

padding: 10px 20px;

margin: 5px;

font-size: 16px;

cursor: pointer;

#result {

margin-top: 20px;

font-size: 24px;

font-weight: bold;

color: darkblue;
}

</style>

</head>

<body>

<!-- Page heading -->

<h2>Basic Calculator</h2>

<!-- Two number input fields -->

<input type="number" id="num1" placeholder="Number 1">

<input type="number" id="num2" placeholder="Number 2"><br>

<!-- Buttons for operations -->

<button onclick="calculate('add')">Add</button>

<button onclick="calculate('subtract')">Subtract</button>

<button onclick="calculate('multiply')">Multiply</button>

<button onclick="calculate('divide')">Divide</button>

<!-- Area to display the result -->

<div id="result"></div>

<!-- JavaScript for performing calculations -->

<script>

function calculate(operation) {

// Get the values from the input fields and convert them to float

const num1 = parseFloat([Link]("num1").value);

const num2 = parseFloat([Link]("num2").value);

let result;
// Check if inputs are valid numbers

if (isNaN(num1) || isNaN(num2)) {

result = "Please enter valid numbers!";

} else {

// Perform calculation based on selected operation

switch (operation) {

case 'add':

result = num1 + num2;

break;

case 'subtract':

result = num1 - num2;

break;

case 'multiply':

result = num1 * num2;

break;

case 'divide':

// Check for division by zero

result = num2 !== 0 ? (num1 / num2) : "Cannot divide by zero";

break;

default:

result = "Invalid operation";

// Display the result in the result <div>

[Link]("result").innerText = "Result: " + result;

</script>
</body>

</html>

You might also like