Scribd
Upload
17 views9 pages

Program HTML

The document is an HTML page for an Area and Number Operations Calculator that allows users to calculate the area of various shapes (triangle, square, rectangle, rhombus, circle) and perform number operations (square, square root, cube, cube root). It includes JavaScript functions to show relevant input forms based on user selections and to calculate results based on the provided inputs. The layout is styled with CSS for better presentation.

Uploaded by

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

Program HTML

The document is an HTML page for an Area and Number Operations Calculator that allows users to calculate the area of various shapes (triangle, square, rectangle, rhombus, circle) and perform number operations (square, square root, cube, cube root). It includes JavaScript functions to show relevant input forms based on user selections and to calculate results based on the provided inputs. The layout is styled with CSS for better presentation.

Uploaded by

geethasb1980
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
You are on page 1/ 9

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<title>Area and Number Operations Calculator</title>

<style>

body {

font-family: Arial, sans-serif;

padding: 20px;

.menu {

margin-bottom: 20px;

.shape-form, .number-form {

display: none;

margin-top: 20px;

</style>

<script>

// Function to show form based on shape selection

function showShapeForm() {

const shape = document.getElementById("shape").value;

const forms = document.getElementsByClassName("shape-form");

for (let i = 0; i < forms.length; i++) {


forms[i].style.display = "none";

if (shape !== "none") {

document.getElementById(shape).style.display = "block";

// Function to calculate area of selected shape

function calculateArea(shape) {

let area = 0;

if (shape === 'triangle') {

const base = parseFloat(document.getElementById('triangle-base').value);

const height = parseFloat(document.getElementById('triangle-height').value);

area = 0.5 * base * height;

} else if (shape === 'square') {

const side = parseFloat(document.getElementById('square-side').value);

area = side * side;

} else if (shape === 'rectangle') {

const length = parseFloat(document.getElementById('rectangle-length').value);

const width = parseFloat(document.getElementById('rectangle-width').value);

area = length * width;

} else if (shape === 'rhombus') {

const diagonal1 = parseFloat(document.getElementById('rhombus-diagonal1').value);

const diagonal2 = parseFloat(document.getElementById('rhombus-diagonal2').value);


area = 0.5 * diagonal1 * diagonal2;

} else if (shape === 'circle') {

const radius = parseFloat(document.getElementById('circle-radius').value);

area = Math.PI * radius * radius;

document.getElementById(`${shape}-result`).textContent = "Area: " + area.toFixed(2);

// Function to show form based on number operation selection

function showNumberForm() {

const operation = document.getElementById("operation").value;

const forms = document.getElementsByClassName("number-form");

for (let i = 0; i < forms.length; i++) {

forms[i].style.display = "none";

if (operation !== "none") {

document.getElementById(operation).style.display = "block";

// Function to calculate number operations

function calculateNumber(operation) {

let number = parseFloat(document.getElementById(`${operation}-number`).value);

let result = 0;
if (operation === 'square') {

result = number * number;

} else if (operation === 'square-root') {

result = Math.sqrt(number);

} else if (operation === 'cube') {

result = number * number * number;

} else if (operation === 'cube-root') {

result = Math.cbrt(number);

document.getElementById(`${operation}-result`).textContent = "Result: " + result.toFixed(2);

</script>

</head>

<body>

<h1>Area and Number Operations Calculator</h1>

<!-- Shape Menu -->

<div class="menu">

<label for="shape">Select a shape to calculate area:</label>

<select id="shape" onchange="showShapeForm()">

<option value="none">--Select--</option>

<option value="triangle">Triangle</option>
<option value="square">Square</option>

<option value="rectangle">Rectangle</option>

<option value="rhombus">Rhombus</option>

<option value="circle">Circle</option>

</select>

</div>

<!-- Forms for shape area calculation -->

<!-- Triangle -->

<div id="triangle" class="shape-form">

<h3>Calculate Area of a Triangle</h3>

<label for="triangle-base">Base:</label>

<input type="number" id="triangle-base" placeholder="Enter base" required><br><br>

<label for="triangle-height">Height:</label>

<input type="number" id="triangle-height" placeholder="Enter height" required><br><br>

<button onclick="calculateArea('triangle')">Calculate Area</button>

<p id="triangle-result"></p>

</div>

<!-- Square -->

<div id="square" class="shape-form">

<h3>Calculate Area of a Square</h3>

<label for="square-side">Side:</label>

<input type="number" id="square-side" placeholder="Enter side length" required><br><br>

<button onclick="calculateArea('square')">Calculate Area</button>


<p id="square-result"></p>

</div>

<!-- Rectangle -->

<div id="rectangle" class="shape-form">

<h3>Calculate Area of a Rectangle</h3>

<label for="rectangle-length">Length:</label>

<input type="number" id="rectangle-length" placeholder="Enter length" required><br><br>

<label for="rectangle-width">Width:</label>

<input type="number" id="rectangle-width" placeholder="Enter width" required><br><br>

<button onclick="calculateArea('rectangle')">Calculate Area</button>

<p id="rectangle-result"></p>

</div>

<!-- Rhombus -->

<div id="rhombus" class="shape-form">

<h3>Calculate Area of a Rhombus</h3>

<label for="rhombus-diagonal1">Diagonal 1:</label>

<input type="number" id="rhombus-diagonal1" placeholder="Enter diagonal 1"


required><br><br>

<label for="rhombus-diagonal2">Diagonal 2:</label>

<input type="number" id="rhombus-diagonal2" placeholder="Enter diagonal 2"


required><br><br>

<button onclick="calculateArea('rhombus')">Calculate Area</button>

<p id="rhombus-result"></p>

</div>
<!-- Circle -->

<div id="circle" class="shape-form">

<h3>Calculate Area of a Circle</h3>

<label for="circle-radius">Radius:</label>

<input type="number" id="circle-radius" placeholder="Enter radius" required><br><br>

<button onclick="calculateArea('circle')">Calculate Area</button>

<p id="circle-result"></p>

</div>

<!-- Number Operations Menu -->

<h2>Number Operations</h2>

<div class="menu">

<label for="operation">Select a number operation:</label>

<select id="operation" onchange="showNumberForm()">

<option value="none">--Select--</option>

<option value="square">Square</option>

<option value="square-root">Square Root</option>

<option value="cube">Cube</option>

<option value="cube-root">Cube Root</option>

</select>

</div>

<!-- Forms for number operations -->

<!-- Square Operation -->


<div id="square" class="number-form">

<h3>Calculate Square</h3>

<label for="square-number">Number:</label>

<input type="number" id="square-number" placeholder="Enter number" required><br><br>

<button onclick="calculateNumber('square')">Calculate</button>

<p id="square-result"></p>

</div>

<!-- Square Root Operation -->

<div id="square-root" class="number-form">

<h3>Calculate Square Root</h3>

<label for="square-root-number">Number:</label>

<input type="number" id="square-root-number" placeholder="Enter number"


required><br><br>

<button onclick="calculateNumber('square-root')">Calculate</button>

<p id="square-root-result"></p>

</div>

<!-- Cube Operation -->

<div id="cube" class="number-form">

<h3>Calculate Cube</h3>

<label for="cube-number">Number:</label>

<input type="number" id="cube-number" placeholder="Enter number" required><br><br>

<button onclick="calculateNumber('cube')">Calculate</button>

<p id="cube-result"></p>

</div>
<!-- Cube Root Operation -->

<div id="cube-root" class="number-form">

<h3>Calculate Cube Root</h3>

<label for="cube-root-number">Number:</label>

<input type="number" id="cube-root-number" placeholder="Enter number" required><br><br>

<button onclick="calculateNumber('cube-root')">Calculate</button>

<p id="cube-root-result"></p>

</div>

</body>

</html>

You might also like