Web Tech. Lab Manual

Program 1
Create a form having a number of elements (Textboxes, Radio buttons, Checkboxes, and so on). Write
JavaScript code to count the number of elements in a form.
<!DOCTYPE html>
<html>
<head>
<title>Form Elements Count</title>
<script>
function countElements() {
var form = document.getElementById("myForm");
var elements = form.elements;
var count = elements.length;
alert("Number of elements in the form: " + count);
}
</script>
</head>
<body> Enter the Name <br>

<br>
<form id="myForm">
<input type="text" name="name" nameholder="Name"><br>
<br>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<br>
<body> <b> Hobbies </body><br>
<br>
<input type="checkbox" name="hobby" value="reading"> Reading<br>

<input type="checkbox" name="hobby" value="gaming"> Gaming<br>
<input type="checkbox" name="Movies" value="Movies">Movies<br><br>
1
<body> <b> Country </body><br><br>
<select name="country">
<option value="India">India</option><br>
<option value="usa">USA</option>
<option value="uk">UK</option>
<option value="canada">Canada</option>
</select><br>
<br>
<input type="submit" value="Submit">
</form>
<button onclick="countElements()">Count Elements</button>
</body>
</html>
Result
Thus, the above HTML5 Program for Elements counting and its usage was successfully embedded.
Output
2
Program: 2
Create a HTML form that has number of Textboxes. When the form runs in the Browser fill the Text
boxes with data. Write JavaScript code that verifies that all textboxes has been filled. If a textboxes has
been left empty, popup an alert indicating which textbox has been left empty.
<!DOCTYPE html>
<html>
<head>
<title>Verify Textbox Filling</title>
<script>
function verifyTextboxes() {
var textboxes = document.querySelectorAll('input[type="text"]');
var emptyTextboxes = [];
for (var i = 0; i < textboxes.length; i++) {

if (textboxes[i].value === '') {
emptyTextboxes.push(textboxes[i].id);
}
}
if (emptyTextboxes.length > 0) {
alert('The following textboxes are empty: ' +
emptyTextboxes.join(', '));
} else {
alert('All textboxes have been filled!');
}
}
</script>
</head>
<body>
<form>
<input type="text" id="textbox1" placeholder="Textbox 1"><br>
3
<br>
<input type="button" value="Verify Textboxes" onclick="verifyTextboxes()">
</form>
</body>
</html>
Result
Thus, the above HTML5 Program for Textboxes and its status of entry was successfully embedded.
Output
4
5
Program: 3
Develop a HTML Form, which accepts any Mathematical expression. Write JavaScript code to Evaluates
the expression and display the result.
<!DOCTYPE html>
<html>
<head>
<title>Math Expression Evaluator</title>
<script>
function evaluateExpression() {
var expression = document.getElementById("expression").value;
var result;
try {
result = eval(expression);
if (isNaN(result)) {
throw new Error("Invalid expression");
}
document.getElementById("result").innerHTML = "Result: " + result;
} catch (error) {
document.getElementById("result").innerHTML = "Error: " +
error.message;
}
}
</script>
</head>
<body>
<h1>Math Expression Evaluator</h1>
<form>
<input type="text" id="expression" placeholder="Enter a mathematical
expression" required><br>
<br>
<input type="button" value="Evaluate" onclick="evaluateExpression()">
</form>
6
<div id="result"></div>
</body>
</html>
Result
Thus, the above HTML5 Program for mathematical express evaluation was successfully embedded.
Output
7
8
Program: 4
Create a page with dynamic effects. Write the code to include layers and basic animation.
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Effects with Layers</title>
<style>
.layer {
position: absolute;
width: 200px;
height: 200px;
background-color: #eaeaea;
border: 1px solid #ccc;
transition: all 0.5s ease-in-out;
}
#layer1 {
top: 50px;
left: 50px;
}
#layer2 {
top: 100px;
left: 100px;
}
#layer3 {
top: 150px;
left: 150px;
}
.layer:hover {
9
transform: scale(1.2);
background-color: #a0a0a0;
border-color: #666;
}
</style>
</head>
<body>
<h1>Dynamic Effects with Layers</h1>
<div class="layer" id="layer1"></div>
</body>
</html>
Result
Thus, the above HTML5 Program for dynamic effects in animation was successfully embedded.
Output
10
11
Program: 5
Write a JavaScript code to find the sum of N natural Numbers. (Use user-defined function).
<!DOCTYPE html>
<html>
<head>
<title>Sum of N Natural Numbers</title>
<script>
function sumOfNaturalNumbers() {
var n = parseInt(document.getElementById("number").value);
var sum = 0;
for (var i = 1; i <= n; i++) {

sum += i;
}
document.getElementById("result").innerHTML = "The sum of first " + n

+ " natural numbers is: " + sum;
}
</script>
</head>
<body>
<h1>Sum of N Natural Numbers</h1>
<label for="number">Enter a positive integer:</label>
<input type="number" id="number" min="1">
<button onclick="sumOfNaturalNumbers()">Calculate Sum</button>
<div id="result"></div>
</body>
</html>
Result
Thus, the above HTML5 Java script Program for Sum of N natural number computing was
successfully embedded.
12
Output
13
Program: 6
Write a JavaScript code block using arrays and generate the current date in words, this should include
the day, month and year.
<!DOCTYPE html>
<html>
<head>
<title>Current Date in Words</title>
<script>
// Function to convert a number to its corresponding word
function numberToWord(number) {
var words = ["zero", "one", "two", "three", "four", "five", "six",
"seven", "eight", "nine", "ten",
"eleven", "twelve", "thirteen", "fourteen", "fifteen", "sixteen",
"seventeen", "eighteen", "nineteen"];
var tens = ["", "", "twenty", "thirty", "forty", "fifty", "sixty",
"seventy", "eighty", "ninety"];
if (number < 20) {

return words[number];
}
if (number < 100) {

var digit = number % 10;
var ten = Math.floor(number / 10);
return tens[ten] + " " + words[digit];

}
if (number < 1000) {

var hundred = Math.floor(number / 100);
var remainder = number % 100;
return words[hundred] + " hundred " + numberToWord(remainder);

14
}
if (number < 10000) {

var thousand = Math.floor(number / 1000);
var remainder = number % 1000;
return words[thousand] + " thousand " + numberToWord(remainder);

}
// For numbers greater than 9999, you can add more logic as needed
return "unknown";
}
// Function to generate the current date in words

function generateDateInWords() {
var date = new Date();
var day = numberToWord(date.getDate());

var month = numberToWord(date.getMonth() + 1); // Months are zero-
based
var year = numberToWord(date.getFullYear());
var currentDate = day + " " + month + " " + year;

document.getElementById("currentDate").innerHTML = currentDate;
}
</script>
</head>
<body onload="generateDateInWords()">
<h1>Current Date in Words:</h1>
<p id="currentDate"></p>
</body>
</html>
15
Result
Thus, the above HTML5 Java script Program for date number to word convert computing was
Output
16
Program: 7
Create a form for Student information. Write JavaScript code to find Total, Average, Result and Grade.
<!DOCTYPE html>
<html>
<head>
<title>Student Information Form</title>
<script>
function calculateResult() {
// Get the input values from the form
var computers =
parseFloat(document.getElementById("computers").value);
var mathematics =
parseFloat(document.getElementById("mathematics").value);
var skilldev = parseFloat(document.getElementById("skilldev").value);
// Calculate the total marks

var totalMarks = computers + mathematics + skilldev;
// Calculate the average marks

var averageMarks = totalMarks / 3;
// Display the total and average marks

document.getElementById("totalMarks").innerHTML = "Total Marks: " +
totalMarks;
document.getElementById("averageMarks").innerHTML = "Average Marks: "
+ averageMarks.toFixed(2);
// Calculate the result and grade

var result = "";
var grade = "";
if (computers >= 40 && mathematics >= 40 && skilldev >= 40) {

result = "Pass";
17
if (averageMarks >= 90) {
grade = "A+";
} else if (averageMarks >= 80) {
grade = "A";
grade = "B";
grade = "C";
grade = "D";
} else {
grade = "E";
}
} else {
result = "Fail";
grade = "N/A";
}
// Display the result and grade

document.getElementById("result").innerHTML = "Result: " + result;
document.getElementById("grade").innerHTML = "Grade: " + grade;
}
</script>
</head>
<body>
<h1>Student Information Form</h1>
<form>
<label for="computers">Computers:</label>
<input type="number" id="computers"><br>
<label for="mathematics">Mathematics:</label>
<input type="number" id="mathematics"><br>
18
<label for="skilldev">Skill Development:</label>
<input type="number" id="skilldev"><br>
<button type="button" onclick="calculateResult()">Calculate</button>

</form>
<h2>Result:</h2>
<p id="totalMarks"></p>
<p id="averageMarks"></p>
<p id="result"></p>
<p id="grade"></p>
</body>
</html>
Result
Thus, the above HTML5 Java script Program for Students marks system computing was successfully
embedded.
Output
19
20
Program: 8
Create a form for Employee information. Write JavaScript code to find DA, HRA, PF, TAX, Gross pay,
Deduction and Net pay.
<!DOCTYPE html>
<html>
<head>
<title>Employee Information Form</title>
<script>
function calculatePay() {
// Get the input values from the form
var name = document.getElementById("name").value;
var salary = parseFloat(document.getElementById("salary").value);
// Calculate the allowances

var da = salary * 0.1; // 10% of salary
var hra = salary * 0.2; // 20% of salary
// Calculate the deductions

var pf = salary * 0.12; // 12% of salary
var tax = salary * 0.15; // 15% of salary
// Calculate the gross pay

var grossPay = salary + da + hra;
// Calculate the total deduction

var totalDeduction = pf + tax;
// Calculate the net pay

var netPay = grossPay - totalDeduction;
// Display the results
21
document.getElementById("nameDisplay").innerHTML = "Employee Name: "
+ name;
document.getElementById("daDisplay").innerHTML = "Dearness Allowance
(DA): " + da.toFixed(2);
document.getElementById("hraDisplay").innerHTML = "House Rent
Allowance (HRA): " + hra.toFixed(2);
document.getElementById("pfDisplay").innerHTML = "Provident Fund
(PF): " + pf.toFixed(2);
document.getElementById("taxDisplay").innerHTML = "Tax: " +
tax.toFixed(2);
document.getElementById("grossPayDisplay").innerHTML = "Gross Pay: "
+ grossPay.toFixed(2);
document.getElementById("deductionDisplay").innerHTML = "Total
Deduction: " + totalDeduction.toFixed(2);
document.getElementById("netPayDisplay").innerHTML = "Net Pay: " +
netPay.toFixed(2);
}
</script>
</head>
<body>
<h1>Employee Information Form</h1>
<form>
<label for="name">Employee Name:</label>
<input type="text" id="name"><br>
<label for="salary">Salary:</label>
<input type="number" id="salary"><br>
<button type="button" onclick="calculatePay()">Calculate</button>

</form>
<h2>Pay Details:</h2>
<p id="nameDisplay"></p>
<p id="daDisplay"></p>
<p id="hraDisplay"></p>
<p id="pfDisplay"></p>
<p id="taxDisplay"></p>
22
<p id="grossPayDisplay"></p>
<p id="deductionDisplay"></p>
<p id="netPayDisplay"></p>
</body>
</html>
Result
Thus, the above HTML5 Java script Program for employee information form computing was
Output
23
24
Program: 9
Create a form consists of a two Multiple choice lists and one single choice list
(a)The first multiple choice list, displays the Major dishes available
(b)The second multiple choice list, displays the Starters available.
(c)The single choice list, displays the Soft drinks available.
<!DOCTYPE html>
<html>
<head>
<title>Food Order Form</title>
</head>
<body>
<h1>Food Order Form</h1>
<form>
<label for="majorDishes">Major Dishes:</label>
<select id="majorDishes" multiple>
<option value="pizza">Pizza</option>
<option value="burger">Burger</option>
<option value="pasta">Pasta</option>
<option value="sushi">Sushi</option>
</select><br>
<label for="starters">Starters:</label>
<select id="starters" multiple>
<option value="wings">Chicken Wings</option>
<option value="nachos">Nachos</option>
<option value="bruschetta">Bruschetta</option>
<option value="springRolls">Spring Rolls</option>
</select><br>
<label for="softDrinks">Soft Drinks:</label>

25
<select id="softDrinks">
<option value="coke">Coke</option>
<option value="pepsi">Pepsi</option>
<option value="sprite">Sprite</option>
<option value="fanta">Fanta</option>
</select><br>
<input type="submit" value="Place Order">

</form>
</body>
</html>
Result
Thus, the above HTML5 Java script Program for employee information form computing was
Output
26
27

Web Tech. Lab Manual

Uploaded by

Copyright:

Available Formats

You might also like

Web Tech. Lab Manual

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Tech. Lab Manual

Uploaded by

Copyright:

Available Formats

Program 1

<body> Enter the Name <br>

<input type="checkbox" name="hobby" value="reading"> Reading<br>

for (var i = 0; i < textboxes.length; i++) {

<input type="button" value="Verify Textboxes" onclick="verifyTextboxes()">

for (var i = 1; i <= n; i++) {

document.getElementById("result").innerHTML = "The sum of first " + n

if (number < 20) {

if (number < 100) {

return tens[ten] + " " + words[digit];

if (number < 1000) {

return words[hundred] + " hundred " + numberToWord(remainder);

if (number < 10000) {

return words[thousand] + " thousand " + numberToWord(remainder);

// Function to generate the current date in words

var day = numberToWord(date.getDate());

var currentDate = day + " " + month + " " + year;

// Calculate the total marks

// Calculate the average marks

// Display the total and average marks

// Calculate the result and grade

if (computers >= 40 && mathematics >= 40 && skilldev >= 40) {

// Display the result and grade

<button type="button" onclick="calculateResult()">Calculate</button>

// Calculate the allowances

// Calculate the deductions

// Calculate the gross pay

// Calculate the total deduction

// Calculate the net pay

// Display the results

<button type="button" onclick="calculatePay()">Calculate</button>

(b)The second multiple choice list, displays the Starters available.

(c)The single choice list, displays the Soft drinks available.

<label for="softDrinks">Soft Drinks:</label>

<input type="submit" value="Place Order">

You might also like