Scribd
Upload
84 views

Web Tech. Lab Manual

The document contains code for several JavaScript programs. Program 1 counts the number of elements in a HTML form. Program 2 verifies that all textboxes in a form have been filled. Program 3 evaluates a mathematical expression entered in a form and displays the result. Program 4 creates a page with animated layers. Program 5 calculates the sum of the first N natural numbers using a for loop. Program 6 generates the current date as words using arrays and number conversion functions. Program 7 calculates the total, average, result and grade from marks entered in a student information form.

Uploaded by

Naresh R
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
84 views

Web Tech. Lab Manual

The document contains code for several JavaScript programs. Program 1 counts the number of elements in a HTML form. Program 2 verifies that all textboxes in a form have been filled. Program 3 evaluates a mathematical expression entered in a form and displays the result. Program 4 creates a page with animated layers. Program 5 calculates the sum of the first N natural numbers using a for loop. Program 6 generates the current date as words using arrays and number conversion functions. Program 7 calculates the total, average, result and grade from marks entered in a student information form.

Uploaded by

Naresh R
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 27

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>
<input type="text" id="textbox2" placeholder="Textbox 2"><br>

3
<input type="text" id="textbox3" placeholder="Textbox 3"><br>
<input type="text" id="textbox4" placeholder="Textbox 4"><br>
<input type="text" id="textbox5" placeholder="Textbox 5"><br>
<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>
<div class="layer" id="layer2"></div>
<div class="layer" id="layer3"></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
successfully embedded.

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";
} else if (averageMarks >= 70) {
grade = "B";
} else if (averageMarks >= 60) {
grade = "C";
} else if (averageMarks >= 50) {
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
successfully embedded.

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
successfully embedded.

Output

26
27

You might also like