Name: Muhammad Mohsin Saeed
Class: BSCS-Section B
Reg No: 21-NTU-CS-1263
Lab:9 & 10
LAB-9:
Q1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number Guessing Game</title>
<link rel="stylesheet" href="output.css">
</head>
<body class="bg-gray-100">
<div class="container mx-auto px-4 py-8">
<div class="mt-8 flex justify-center">
<div class="w-full max-w-sm bg-white px-4 py-8 border-[5px] rounded-md
border-cyan-700">
<div class="flex items-center mb-4">
<form class="w-full">
<input type="number" name="text" class="flex-1 px-4 py-3 w-full
rounded-md border border-gray-300" placeholder="Enter the number" min="1"
max="500">
</div>
<div class="flex mb-3">
<input type="radio" name="r" value="Basic Level">
<h4 class="px-3"><b>Basic Level</b></h4>
</div>
<div class="flex mb-4">
<input type="radio" name="r" value="Intermediate Level">
<h4 class="px-3"><b>Intermediate Level</b></h4>
</div>
<div class="flex mb-4">
<input type="radio" name="r" value="Advanced Level">
<h4 class="px-3"><b>Advanced Level</b></h4>
</div>
<div class="flex items-center ml-5 mb-4">
<button type="button" class="w-20 px-4 py-2 rounded-md bg-green-
500 text-white font-bold" onclick="level(this.form)">Check</button>
<button class="w-20 ml-[90px] px-4 py-2 rounded-md bg-red-500
text-white font-bold" type="reset">Reset</button>
</div>
</form>
</div>
</div>
</div>
<script>
function level(form) {
const userNumber = parseInt(form.elements['text'].value);
const selectedLevel = form.elements['r'].value;
let minRange, maxRange;
switch (selectedLevel) {
case 'Basic Level':
minRange = 1;
maxRange = 10;
break;
case 'Intermediate Level':
minRange = 50;
maxRange = 100;
break;
case 'Advanced Level':
minRange = 101;
maxRange = 500;
break;
default:
alert('Please select a level.');
return;
}
if (userNumber < minRange || userNumber > maxRange) {
alert(`Please enter a number between ${minRange} and ${maxRange} for
the selected level.`);
return;
}
const randomNumber = Math.floor(Math.random() * (maxRange - minRange +
1)) + minRange;
alert(`At ${selectedLevel}, your guess number is: ${randomNumber}`);
}
</script>
</body>
</html>
OUTPUT:
Q2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Natural Number Sum Calculator</title>
<link rel="stylesheet" href="output.css">
</head>
<body class="bg-gray-100">
<div class="container mx-auto px-4 py-8">
<div class="mt-8 flex justify-center">
<div class="max-w-[800px] bg-white px-4 py-8 border-[5px] border-blue-
300">
<form class="">
<div class="flex items-center mb-4 w-[400px]">
<input type="number" name="start" class="flex-1 px-4 py-2 w-full
rounded-md border border-gray-300" placeholder="Enter the start value">
<div class="w-[300px] flex-1 "><span style="color: red;"
id="startError" class=" ml-2 hidden">Only Positive Number!</span></div>
</div>
<b><h1 class="ml-10 mb-5">To</h1></b>
<div class="flex items-center mb-4 w-[400px]">
<input type="number" name="end" class="flex-1 px-4 py-2 w-full
rounded-md border border-gray-300" placeholder="Enter the end value">
<div class="w-[300px] flex-1 text-red"><span style="color: red;"
id="endError" class=" ml-2 hidden">Only Positive Number!</span></div>
</div>
<div class="flex items-center mb-4">
<button type="button" class="w-20 px-4 py-2 rounded-md bg-blue-
500 text-white font-bold" onclick="NaturalSum(this.form)">OK</button>
<button class="w-20 ml-2 px-4 py-2 rounded-md bg-gray-500 text-
white font-bold" type="reset">Cancel</button>
</div>
<div class="flex items-center mb-4">
<h1>Sum of natural numbers: <span id="r"></span></h1>
</div>
</form>
</div>
</div>
</div>
<script>
function NaturalSum(form) {
const start = form.elements['start'].value.trim();
const end = form.elements['end'].value.trim();
if (parseInt(start) < 0) {
document.getElementById('startError').classList.remove('hidden');
} else {
document.getElementById('startError').classList.add('hidden');
}
if (parseInt(end) < 0) {
document.getElementById('endError').classList.remove('hidden');
}
else {
document.getElementById('endError').classList.add('hidden');
}
const startValue = parseInt(start);
const endValue = parseInt(end);
let sum = 0;
for (let i = startValue; i <= endValue; i++) {
sum += i;
}
document.getElementById('r').textContent = sum;
}
</script>
</body>
</html>
OUTPUT:
Q3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Armstrong Checker</title>
<link rel="stylesheet" href="output.css">
</head>
<body class="bg-gray-100">
<div class="container mx-auto px-4 py-8 ">
<div class="mt-8 flex justify-center">
<div class="flex">
<div class="max-w-[800px] bg-white px-4 py-8 border-[5px] border-blue-
300">
<div class="flex items-center mb-4">
<form class="w-[400px] " method="post" id="myForm">
<input type="number" name="num" class="flex-1 px-4 py-3 w-full
rounded-md border border-gray-300" placeholder="Enter 3-digit number">
</form>
<div class="w-[300px] flex-1 "><span style="color: red;"
id="endError" class=" ml-2 hidden">Only Positive Number!</span></div>
</div>
<div class="flex items-center mb-4">
<button type="button" class="w-20 px-4 py-2 rounded-md bg-blue-500
text-white font-bold" onclick="numberchecking()">OK</button>
<button class="w-20 ml-2 px-4 py-2 rounded-md bg-gray-500 text-white
font-bold" type="reset">Cancel</button>
</div>
</form>
</div>
</div>
</div>
<script>
function numberchecking() {
const form = document.getElementById('myForm');
const number = form.elements['num'].value.trim();
// alert(number)
const errorSpan = document.getElementById('endError');
if (!number || isNaN(number)) {
errorSpan.textContent = 'Please enter a valid number.';
errorSpan.classList.remove('hidden');
return;
}
const num = parseInt(number);
if (num < 100 || num > 999) {
errorSpan.textContent = 'Please enter a 3-digit number.';
errorSpan.classList.remove('hidden');
return;
}
let sum = 0;
let temp = num;
while (temp > 0) {
const digit = temp % 10;
sum += digit ** 3;
temp = Math.floor(temp / 10);
}
if (sum === num) {
alert(`${num} is an Armstrong number.`);
} else {
alert(`${num} is not an Armstrong number.`);
}
}
</script>
</body>
</html>
OUTPUT:
Q4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Converter</title>
<link rel="stylesheet" href="output.css">
</head>
<body class="bg-gray-100">
<div class="container mx-auto px-4 py-8 ">
<div class="mt-8 flex justify-center">
<div class="flex">
<div class="max-w-[800px] bg-white px-4 py-8 border-[5px] border-blue-
300">
<form class="w-[400px]" id="myForm">
<div class="flex items-center mb-4 w-[400px]" >
<input type="number" name="number" class="flex-1 px-4 py-3 w-full
border-2 border-black" >
<div class="w-[150px] flex-1 "><span style="color: red;"
id="endError" class=" ml-2 hidden">Only Positive Number!</span></div>
</div>
<div class="flex mb-3">
<input type="Radio" name="r" class="form-radio font-bold h-5 w-5 "
value="binary" >
<h5 class="px-3"> Decimal to Binary</h5>
</div>
<div class="flex items-center mb-4">
<input type="radio" name="r" class="form-radio font-bold h-5 w-5 "
value="hexadecimal">
<h5 class="px-3">Decimal to Hexadecimal</h5>
</div>
<div class="flex items-center ml-1 mb-4">
<button type="button" class="w-20 px-4 py-2 rounded-md bg-blue-500
text-white font-bold" onclick="converter()">OK</button>
<button class="w-20 ml-10 px-4 py-2 rounded-md bg-gray-500 text-white
font-bold" type="reset">Cancel</button>
</div>
</form>
</div>
</div>
</div>
<script>
function converter() {
const form = document.getElementById('myForm');
const decimalNumber = parseInt(form.elements['number'].value);
const conversionType = form.elements['r'].value;
let convertedValue;
if (decimalNumber <= 0 || isNaN(decimalNumber)) {
const errorDiv = document.getElementById('endError');
errorDiv.classList.remove('hidden');
return;
}
if (conversionType === 'binary') {
convertedValue = decimalNumber.toString(2); // Convert to binary
} else if (conversionType === 'hexadecimal') {
convertedValue = decimalNumber.toString(16); // Convert to
hexadecimal
}
alert(`Converted value: ${convertedValue}`);
}
</script>
</body>
</html>
OUTPUT:
Q5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Temperature Converter</title>
<link rel="stylesheet" href="output.css">
</head>
<body class="bg-gray-100">
<div class="container mx-auto px-4 py-8">
<div class="mt-8 flex justify-center">
<div class="flex">
<div class="max-w-[800px] bg-white px-4 py-8 border-[5px] border-
blue-300">
<form class="w-[400px]" id="myForm">
<div class="flex items-center mb-4">
<input type="number" name="number" class="flex-1 px-4 py-3 w-
full border-2 border-black">
<div class="w-[150px] flex-1"><span style="color: red;"
id="endError" class="ml-2 hidden">Only Positive Number!</span></div>
</div>
<div class="flex mb-3">
<input type="radio" name="r" class="form-radio font-bold h-5 w-
5" value="Celcius to Ferhenhight">
<h5 class="px-3">Celcius to Fahrenheit</h5>
</div>
<div class="flex items-center mb-4">
<input type="radio" name="r" class="form-radio border-[5px] w-5
h-5 border-black-300 bg-red-500 rounded-full" value="Ferhenhight to
Celcious">
<h5 class="px-3">Fahrenheit to Celsius</h5>
</div>
<div class="flex items-center mb-4">
<input type="radio" name="r" class="form-radio border-[5px] w-5
h-5 border-black-300 bg-red-500 rounded-full" value="Celcious to Kelvin">
<h5 class="px-3">Celcius to Kelvin</h5>
</div>
<div class="flex items-center mb-4">
<input type="radio" name="r" class="form-radio border-[5px] w-5
h-5 border-black-300 bg-red-500 rounded-full" value="Kelvin to Celcious">
<h5 class="px-3">Kelvin to Celcius</h5>
</div>
<div class="flex items-center ml-1 mb-4">
<button type="button" class="w-20 px-4 py-2 rounded-md bg-blue-
500 text-white font-bold" onclick="convertTemperature()">OK</button>
<button class="w-20 ml-10 px-4 py-2 rounded-md bg-gray-500
text-white font-bold" type="reset">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
function convertTemperature() {
const form = document.getElementById('myForm');
const temperature = parseFloat(form.elements['number'].value);
const conversionType = form.elements['r'].value;
let result;
if (temperature <= 0 || isNaN(temperature)) {
const errorDiv = document.getElementById('endError');
errorDiv.classList.remove('hidden');
return;
}
switch (conversionType) {
case 'Celcius to Ferhenhight':
result = (temperature * 9 / 5) + 32;
alert(`Fahrenheit: ${result}`);
break;
case 'Ferhenhight to Celcious':
result = (temperature - 32) * 5 / 9;
alert(`Celsius: ${result}`);
break;
case 'Celcious to Kelvin':
result = temperature + 273.15;
alert(`Kelvin: ${result}`);
break;
case 'Kelvin to Celcious':
result = temperature - 273.15;
alert(`Celsius: ${result}`);
break;
default:
alert('Invalid conversion type.');
}
}
</script>
</body>
</html>
OUTPUT:
LAB-10:
Q1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="output.css">
<title>Distance Converter</title>
</head>
<body class="bg-gray-100">
<div class="container mx-auto px-4 py-8">
<div class="mt-8 flex justify-center">
<div class="flex">
<div class="max-w-[800px] bg-white px-4 py-8 ">
<form class="" id="myForm">
<div class="flex items-center mb-4 w-[400px]">
<select name="dropdown1" class="flex-1 px-4 py-1 w-full
rounded-md border border-gray-300">
<option value="Kilometer" selected >Kilometer</option>
<option value="Centimeter">Centimeter</option>
<option value="Mile">Mile</option>
<option value="Meter">Meter</option>
</select>
<div class="w-[300px] flex-1 ml-2">
<select name="dropdown2" class="flex-1 px-4 py-1 w-full
rounded-md border border-gray-300">
<option value="Meter" selected>Meter</option>
<option value="Kilometer">Kilometer</option>
<option value="Mile">Mile</option>
<option value="Centimeter">Centimeter</option>
</select>
</div>
</div>
<div class="flex items-center mt-20 mb-4 w-[400px]">
<input type="number" name="number" class="flex-1 px-4 py-1 w-
full border border-gray-300" placeholder="Enter the value">
<div class="w-[300px] flex-1 ">
<span id="result">
<input type="text" class="flex-1 ml-2 px-3 py-1 w-full
border border-gray-300" placeholder="Answer" readonly>
</span>
</div>
</div>
<div class="flex items-center ml-20 mb-4 mt-10">
<button type="button" class="w-[200px] px-4 py-2 rounded-md bg-
green-500 text-white font-bold" onclick="conversion()">Conversion</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
function conversion() {
const form = document.getElementById('myForm');
const unit1 = form.elements['dropdown1'].value;
const unit2 = form.elements['dropdown2'].value;
const value = parseFloat(form.elements['number'].value);
let result;
switch (unit1) {
case 'Kilometer':
switch (unit2) {
case 'Meter':
result = value * 1000;
break;
case 'Mile':
result = value * 0.621371;
break;
case 'Centimeter':
result = value * 100000;
break;
}
break;
case 'Meter':
switch (unit2) {
case 'Kilometer':
result = value / 1000;
break;
case 'Mile':
result = value * 0.000621371;
break;
case 'Centimeter':
result = value * 100;
break;
}
break;
case 'Mile':
switch (unit2) {
case 'Kilometer':
result = value * 1.60934;
break;
case 'Meter':
result = value * 1609.34;
break;
case 'Centimeter':
result = value * 160934;
break;
}
break;
case 'Centimeter':
switch (unit2) {
case 'Kilometer':
result = value / 100000;
break;
case 'Meter':
result = value / 100;
break;
case 'Mile':
result = value / 160934;
break;
}
break;
}
const resultInput =
document.getElementById('result').querySelector('input');
resultInput.value = result.toFixed(2);
}
</script>
</body>
</html>
OUTPUT:
Q2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Value Swapper</title>
<link rel="stylesheet" href="output.css">
</head>
<body class="">
<div class="container mx-auto px-4 py-8">
<div class="mt-8 flex justify-center">
<div class="flex">
<div class="max-w-[800px] bg-white px-4 py-8 ">
<form class="" id="myForm">
<div class="flex items-center mb-4 w-[400px]">
<input type="number" name="value1" class="flex-1 px-4 py-2 w-
full rounded-md border border-blue-500" placeholder="Enter the first number">
</div>
<div class="flex items-center mb-4 w-[400px]">
<input type="number" name="value2" class="flex-1 px-4 py-2 w-
full rounded-md border border-blue-500" placeholder="Enter the second
number">
</div>
<div class="flex items-center mb-4">
<input type="radio" name="r" class="form-radio font-bold h-5 w-
5" value="Using Third Variable">
<h5 class="px-3">Using Third Variable</h5>
</div>
<div class="flex items-center mb-4">
<input type="radio" name="r" class="form-radio font-bold h-5 w-
5" value="Without Third Variable">
<h5 class="px-3">Without Third Variable</h5>
</div>
<div class="flex items-center mb-4">
<input type="radio" name="r" class="form-radio font-bold h-5 w-
5" value="Using +,- operator">
<h5 class="px-3">Using +,- Operator</h5>
</div>
<div class="flex items-center mb-4">
<input type="radio" name="r" class="form-radio font-bold h-5 w-
5" value="Using *,/ operator">
<h5 class="px-3">Using *,/ Operator</h5>
</div>
<div class="flex items-center mb-4">
<div class="flex items-center mb-4 mt-1">
<button type="button" class="w-[200px] px-4 py-2 rounded-md
bg-[#a7290d] text-white font-bold" onclick="swap()">Swap Values</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
function swap() {
var form = document.getElementById('myForm');
var value1 = parseInt(form.elements['value1'].value);
var value2 = parseInt(form.elements['value2'].value);
var option = form.elements['r'].value;
let temp;
switch (option) {
case 'Using Third Variable':
temp = value1;
value1 = value2;
value2 = temp;
break;
case 'Without Third Variable':
value1 = value1 + value2;
value2 = value1 - value2;
value1 = value1 - value2;
break;
case 'Using +,- operator':
value1 = value1 + value2;
value2 = value1 - value2;
value1 = value1 - value2;
break;
case 'Using *,/ operator':
value1 = value1 * value2;
value2 = value1 / value2;
value1 = value1 / value2;
break;
}
alert(`Value 1: ${value1}\nValue 2: ${value2}`);
}
</script>
</body>
</html>
OUTPUT:
Q3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Triangle Area Calculator</title>
<link rel="stylesheet" href="output.css">
</head>
<body>
<div class="p-6 max-w-lg mx-auto bg-white rounded-xl shadow-md">
<h2 class="text-2xl font-medium text-gray-900 mb-4">Calculate the Area of
a Triangle</h2>
<form class="space-y-4" id="myForm">
<div class="flex">
<label class="block text-sm font-medium text-gray-700">Enter value of
Side 1:</label>
<div class="flex-1 ml-10">
<input type="number" class="border border-bg-blue-500 "
name="side1" required>
</div>
</div>
<div class="flex">
<label class="block text-sm font-medium text-gray-700">Enter value of
Side 2:</label>
<div class="flex-1 ml-10">
<input type="number" class="border border-bg-blue-500 "
name="side2" required>
</div>
</div>
<div class="flex">
<label class="block text-sm font-medium text-gray-700">Enter value of
Side 3:</label>
<div class="flex-1 ml-10">
<input type="number" class="border border-bg-blue-500 "
name="side3" required>
</div>
</div>
<div class="">
<button type="button" class="ml-20 border text-white bg-gray-500
border-gray-700 p-1" onclick="area()">Click me</button>
</div>
<div class="ml-10">
<h3><span id="result">Area of Triangle is :</span></h3>
</div>
</form>
</div>
<script>
// function area() {
// var form = document.getElementById('myForm');
// var side1 = parseInt(form.elements['side1'].value);
// var side2 = parseInt(form.elements['side2'].value);
// var side3 = parseInt(form.elements['side3'].value);
// var s = (side1 + side2 + side3) / 2;
// var area = Math.sqrt(s * (s - side1) * (s - side2) * (s - side3));
// var resultSpan = document.getElementById('result');
// resultSpan.innerHTML = 'Area of Triangle is: ' + area.toFixed(2);
// // alert(resultSpan);
// }
function area() {
var form = document.getElementById('myForm');
var side1 = form.elements['side1'].value;
var side2 = form.elements['side2'].value;
var side3 = form.elements['side3'].value;
// Check if the input values are numbers and parse them
if (!isNaN(side1) && !isNaN(side2) && !isNaN(side3)) {
side1 = parseFloat(side1);
side2 = parseFloat(side2);
side3 = parseFloat(side3);
var s = (side1 + side2 + side3) / 2;
var area = Math.sqrt(s * (s - side1) * (s - side2) * (s - side3));
var resultSpan = document.getElementById('result');
resultSpan.innerHTML = 'Area of Triangle is: ' + area.toFixed(2);
} else {
alert('Please enter valid numbers for the side lengths.');
}
}
</script>
</body>
</html>
OUTPUT:
Q4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Calculator</title>
<link rel="stylesheet" href="output.css">
</head>
<body class="">
<div class="container mx-auto px-4 py-8">
<div class="mt-8 flex justify-center">
<div class="flex">
<div class="max-w-[800px] bg-white px-4 py-8">
<form class="" id="myForm">
<div class="flex items-center mb-4 w-[400px]">
<input type="number" name="number" class="flex-1 px-4 py-2 w-
full rounded-md border border-blue-500" placeholder="Enter the radius">
</div>
<div class="flex items-center mb-4">
<input type="checkbox" name="r" class="form-checkbox h-5 w-5"
value="Area">
<h5 class="px-3">Area of circle</h5>
</div>
<div class="flex items-center mb-4">
<input type="checkbox" name="re" class="form-checkbox h-5 w-5"
value="Circumference">
<h5 class="px-3">Circumference of circle</h5>
</div>
<div class="flex items-center mb-4">
<div class="flex items-center mb-4 mt-1">
<button type="button" class="w-[200px] px-4 py-2 rounded-md
bg-[#a7290d] text-white font-bold" onclick="calculator()">Calculate</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
function calculator() {
const form = document.getElementById('myForm');
const radius = parseInt(form.elements['number'].value);
const calculateArea = form.elements['r'].checked;
const calculateCircumference = form.elements['re'].checked;
let resultMessage = '';
if (calculateArea) {
const area = Math.PI * radius * radius;
resultMessage += `Area of circle: ${area}\n`;
}
if (calculateCircumference) {
const circumference = 2 * Math.PI * radius;
resultMessage += `Circumference of circle: ${circumference}`;
}
alert(resultMessage);
}
</script>
</body>
</html>
OUTPUT:
Q5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Triangle Area Calculator</title>
<link rel="stylesheet" href="output.css">
</head>
<body class="bg-gray-100">
<div class="container max-w-lg mx-auto px-4 py-8">
<div class="flex justify-center items-center mb-4">
<h1 class="text-3xl font-bold text-gray-800">Triangle Area
Calculator</h1>
</div>
<form id="myForm">
<table class="table-auto mx-auto rounded-lg shadow-md">
<tbody>
<tr>
<td class="text-center border border-gray-300 font-bold">Width
(b):</td>
<td class="px-4 py-2 border border-gray-300">
<input type="number" id="width" class=" rounded-md border border-
gray-300 ">
</td>
</tr>
<tr>
<td class="text-center border border-gray-300 font-bold">Height
(h):</td>
<td class="px-4 py-2 border border-gray-300">
<input type="number" id="height" class=" rounded-md border
border-gray-300 ">
</td>
</tr>
</tbody>
</table>
<div class="flex justify-center items-center mt-4">
<button class="w-30 px-4 py-2 rounded-md bg-gray-500 text-white font-
bold" onclick="calculateArea(event)">Calculate Area</button>
</div>
</form>
<div class="mt-4 text-center">
<span class="text-gray-700">Area: </span>
<span id="result" class="font-bold"></span>
</div>
</div>
<script>
function calculateArea(event) {
event.preventDefault();
const form = document.getElementById('myForm');
const width = form.elements['width'].value;
const height = form.elements['height'].value;
const area = 0.5 * width * height;
if (isNaN(width) || isNaN(height) || width <= 0 || height <= 0) {
document.getElementById('result').textContent = 'Invalid triangle
sides.';
} else {
document.getElementById('result').textContent = area.toFixed(2);
}
}
</script>
</body>
</html>
OUTPUT:
Q6:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sum of Numbers in Array</title>
<link rel="stylesheet" href="output.css">
</head>
<body class="bg-gray-100">
<div class="container mx-auto px-4 py-8">
<div class="mt-8 flex justify-center">
<div class="flex">
<div class="max-w-[800px] bg-white px-4 py-8">
<button class="w-80 px-4 py-2 rounded-md bg-blue-500 text-white
font-bold" onclick="getValuesAndSum()">Get Values & Sum</button>
<div id="result" class="mt-4"></div>
</div>
</div>
</div>
</div>
<script>
function getValuesAndSum() {
const valuesArray = [];
for (let i = 1; i <= 5; i++) {
const value = parseInt(prompt(`Enter value ${i}:`));
valuesArray.push(value);
}
let sum = 0;
for (let i = 0; i < valuesArray.length; i++) {
sum += valuesArray[i];
}
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = `Sum of numbers in the array: ${sum}`;
}
</script>
</body>
</html>
OUTPUT:
