Scribd
Upload
78 views

6 PRGM

Web technology lab program 6

Uploaded by

nida61325
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
78 views

6 PRGM

Web technology lab program 6

Uploaded by

nida61325
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/ 6

6.

Apply HTML, CSS and JavaScript to design a simple calculator to perform the
following operations: sum, product, difference, remainder, quotient, power, square-root
and square.

<!DOCTYPE html>

<html lang="en">

<head>

<metacharset="UTF-8">

<meta name="viewport" content="width=device-width,initial-scale=1.0">

<title>SimpleCalculator</title>

<link rel="stylesheet" href="style1.css">

</head>

<body>

<divclass="calculator">

<h1>Simple Calculator</h1>

<div>

<input type="number" id="number1" placeholder="Enter first number">

</div>

<div>

<input type="number" id="number2" placeholder="Enter second number (optional)">

</div>

<div>

<button onclick="calculate('sum')">Sum</button>

<button onclick="calculate('difference')">Difference</button>

<button onclick="calculate('product')">Product</button>

<button onclick="calculate('quotient')">Quotient</button>

<button onclick="calculate('remainder')">Remainder</button>

<button onclick="calculate('power')">Power</button>
<button onclick="calculate('square')">Square</button>

<button onclick="calculate('sqrt')">Square Root</button>

</div>

<h2>Result: <span id="result">0</span></h2>

</div>

<script src="script1.js"></script>

</body>

</html>

CSS Code:

body {

font-family:Arial, sans-serif;

background-color:#f0f0f0;

display:flex;

justify-content:center;

align-items:center;

height:100vh;

margin:0;

.calculator {

background-color:#fff;

padding:20px;

border-radius:10px;

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

text-align:center;

}
.calculator h1 {

margin-bottom:20px;

input[type="number"] {

width:200px;

padding:10px;

margin:10px 0;

font-size:16px;

button {

padding:10px 15px;

margin:5px;

font-size:16px;

cursor:pointer;

border:none;

background-color:#007bff;

color:white;

border-radius:5px;

button:hover {

background-color:#0056b3;

}
#result {

font-size:24px;

font-weight:bold;

Java Script Code:

function calculate(operation){

const num1 = parseFloat(document.getElementById('number1').value);

const num2 = parseFloat(document.getElementById('number2').value);

let result = 0;

switch (operation) {

case 'sum':

result = num1 + num2;

break;

case 'difference':

result = num1 - num2;

break;

case 'product':

result = num1 * num2;

break;

case 'quotient':

result = num1 / num2;

break;

case 'remainder':

result = num1 % num2;


break;

case 'power':

result = Math.pow(num1, num2);

break;

case 'square':

result = num1 * num1;

break;

case 'sqrt':

result = Math.sqrt(num1);

break;

default:

result = 0;

document.getElementById('result').innerText = result;

OUTPUT

Explanation of Code:
1. HTML:
o A simple form with two input fields for the user to enter numbers.
o Buttons are created for different operations (sum, difference, product,
quotient, remainder, power, square, square-root).
o Results are displayed inside a <span> element with the ID result.
2. CSS:
o Styling is applied to the calculator to make it visually appealing. The layout
is centered using Flexbox.
o Buttons are styled to change colors when hovered.
3. JavaScript:
o The calculate() function handles the mathematical operations based on
the button clicked.
o It retrieves the values from the input fields, performs the selected operation,
and displays the result.

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