Scribd
Upload
24 views33 pages

Web Tech Lab

Uploaded by

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

Web Tech Lab

Uploaded by

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

TABLE OF CONTENTS

PAGE
S.NO DATE PROGRAM TITLE SIGN
NO
EX NO:01 Create a form having number of elements (Textboxes, Radio buttons,
Date: Checkboxes, and so on).

Aim:
To write a program to a form having number of elements.

Algorithm:

Step 1: Start the program

Step 2: The form includes textboxes, radio buttons, checkboxes, and a button.
Each element is uniquely identifiable

Step 3: It then updates the content of specific <p> elements with the count of each
Type of element

Step 4: The results are displayed in <p> elements with IDs textbox Count,
Radio Button Count, checkbox Count, and button Count

Step 5: When you open this HTML file in a web browser and click
the "Count Elements" button,

Step 6: It will display the counts of textboxes, radio buttons, checkboxes, and buttons in
the form.

Step 7: Stop of the program


PROGRAM

<!DOCTYPE html>
<head>
<title>Form Element Counter</title>
</head>
<body>
<h1>Form Element Counter</h1>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<label>Interests:</label>
<input type="checkbox" id="sports" name="interests" value="sports">
<label for="sports">Sports</label>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">Music</label><br>
<button type="button" onclick="countElements()">Count Elements</button>
</form>
<h2>Element Counts</h2>
<p id="textboxCount"></p>
<p id="radioButtonCount"></p>
<p id="checkboxCount"></p>
<p id="buttonCount"></p>
</body>
</html>
OUTPUT

RESULT:

Thus, the given program has been executed successfully and output verified.
EX NO:02 Create a HTML form that has number of Textboxes. When the form runs in
Date: the Browser fill the Text boxes with data.

Aim:
To write a HTML form that has number of Textboxes. When the form runs in
the Browser fill the Text boxes with data
Algorithm:

Step1: Start the program


Step2: The form contains three textboxes with IDs textbox1, textbox2, and textbox3.
There is a submit button to trigger the form submission.
Step3: ThevalidateForm function is called when the form is submitted
(onsubmit="return validateForm()").It selects all textboxes within the form using
Step4: It loops through each textbox to check if it is empty (value.trim() === '').
If an empty textbox is found, an alert is displayed indicating which textbox is
Empty.
Step5: The function returns false to prevent form submission if any textbox is empty
If all textboxes are filled, it returns true, allowing the form to be submitted
Step6: The focus () method is used to optionally set the focus to the empty textbox,
Making it easier for the user to correct the error.
Step7: stop of the program
PROGRAM

<!DOCTYPE html>
<head>
<title>Textbox Validation</title>
<script>
function validateForm() {
// Get the form element by its ID
var form = document.getElementById('myForm');
// Get all textboxes within the form
var textboxes = form.querySelectorAll('input[type="text"]');
// Iterate over each textbox and check if it is empty
for (var i = 0; i<textboxes.length; i++) {
if (textboxes[i].value.trim() === '') {
// Alert the user which textbox is empty
alert('Textbox ' + (i + 1) + ' is empty.');
textboxes[i].focus(); // Optionally set focus to the empty textbox
return false; // Prevent form submission
}
}

// If all textboxes are filled


return true;
}
</script>
</head>
<body>
<h1>Textbox Validation Form</h1>
<form id="myForm" onsubmit="return validateForm()">
<label for="textbox1">Textbox 1:</label>
<input type="text" id="textbox1" name="textbox1"><br><br>
<label for="textbox2">Textbox 2:</label>
<input type="text" id="textbox2" name="textbox2"><br><br>
<label for="textbox3">Textbox 3:</label>
<input type="text" id="textbox3" name="textbox3"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
OUTPUT

RESULT:

Thus, the given program has been executed successfully and output verified.
EX NO:03 Develop a HTML Form, which accepts any Mathematical expression. Write
Date: JavaScript code to Evaluates the expression and display the result.

AIM:
To write a HTML Form, which accepts any Mathematical expression?
ALGORITHM:
Step1: Start the program

Step2: The form contains a single text input field where users can enter their

Mathematical expression

Step 3: There is a submit button to trigger the evaluation of the expression

Step 4: The evaluateExpression function retrieves the expression from the input field.

It uses eval()to evaluate the expression.

Step 5: If the evaluation is successful, the result is displayed in a paragraph element

With the ID result. If an error occurs (e.g., invalid expression), an error

message is displayed instead.

Step 6: Event.PreventDefault () is used to prevent the form from actually submitting

and causing a page reload.

Step 7: stop of the program.


PROGRAM

<!DOCTYPE html>
<head>
<title>Mathematical Expression Evaluator</title>
<script>
function evaluateExpression() {
// Get the input value
var expression = document.getElementById('expression').value;
try {
// Evaluate the expression and display the result
var result = eval(expression);
document.getElementById('result').textContent = 'Result: ' + result;
} catch (e) {
// Handle any errors that occur during evaluation
document.getElementById('result').textContent = 'Error: Invalid expression';
}
}
</script>
</head>
<body>
<h1>Mathematical Expression Evaluator</h1>
<form id="expressionForm" onsubmit="event.preventDefault(); evaluateExpression();">
<label for="expression">Enter a mathematical expression:</label><br>
<input type="text" id="expression" name="expression" placeholder="e.g., 2 + 3 * (5 -
2)"><br><br>
<input type="submit" value="Evaluate">
</form>
<p id="result"></p>
</body>
</html>
OUTPUT

RESULT:

Thus, the given program has been executed successfully and output verified.
EX NO:04 Create a page with dynamic effects. Write the code to include layers and
Date: basic animation.

AIM:
To write a HTML Form, which accepts any Mathematical expression.
ALGORITHM:
Step1: Start the program
Step2: The HTML includes a container with three layers: layer1, layer2, and layer.
The layer1 and layer2 layers are for background effects, while layer3
Contains the content and the button.
Step3: Animations: fade-in animation is applied to the heading to make it fade in when
the page loads. Slide In animation is defined for use when the button is clicked
Step4: Button Hover Effect: A simple scale transform is applied to the button on hover
to make it more interactive.
Step5: When the button is clicked, the heading (<h1>) is animated with a slideIn effect.
the background color of layer2 is changed to add a dynamic effect.
Step6: This setup creates a visually appealing page with layered effects and animations.
Step7: stop of the program
PROGRAM

<!DOCTYPE html>
<head>
<title>Dynamic Effects Page</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
overflow: hidden;
}
.layer {
position: absolute;
width: 200px;
height: 200px;
background-color: #3498db;
border-radius: 50%;
animation: move 5s linear infinite alternate;
}
.layer:nth-child(2) {
background-color: #e74c3c;
height: 150px;
width: 150px;

animation-duration: 3s;
}
.layer:nth-child(3) {
background-color: #2ecc71;
width: 100px;
height: 100px;
animation-duration: 7s;
}
@keyframes move {
from {
transform: translateY(0);
}
to {
transform: translateY(200px);
}
}
</style>
</head>
<body>
<div class="layer" style="top: 50px; left: 50px;"></div>
<div class="layer" style="top: 150px; left: 250px;"></div>
<div class="layer" style="top: 300px; left: 150px;"></div>
<script>
// JavaScript code for additional dynamic effects (optional)
</script>
</body>
</html>
OUTPUT

RESULT:

Thus, the given program has been executed successfully and output verified.
EX NO:05 Write a JavaScript code to find the sum of N natural Numbers. (Use user-
Date: defined function)

Aim:
To write a JavaScript code to find the sum of N natural Numbers.
Algorithm:
Step 1: start the program

Step 2:A JavaScript code to find the sum of N natural Numbers. (Use user-defined

function.

Step 3: sumOfNaturalNumbers(n): This function calculates the sum using

the formula n×(n+1)2\frac{n \times (n + 1)}{2}2n×(n+1). It also handles cases

where nnn is less than or equal to 0, returning 0 for such inputs

Step 4: calculateSum (): This function retrieves the value from the input field, validates

It uses the sumOfNaturalNumbers function to compute the sum. It then updates

the content of a paragraph element to display the result.

Step 5: The form’s onsubmit event is overridden to prevent the default form submission

(Which would reload the page)? Instead, it calls calculate Sum () to perform the

calculation and display the result

Step 6: HTML code into a file and open it in a web browser. Enter a positive integer in

the input field and click "Calculate" to see the sum of the first N natural

Numbers

Step 7: stop of the program


PROGRAM

<!DOCTYPE html>
<head>
<script>
// User-defined function to calculate the sum of N natural numbers
function sumOfNaturalNumbers(n) {
if (n <= 0) {
return 0; // If n is less than or equal to 0, return 0 (assuming natural numbers
are positive integers)
}
return (n * (n + 1)) / 2;
}
// Function to handle form submission and display the result
function calculateSum() {
var n = parseInt(document.getElementById('number').value);
if (isNaN(n) || n <= 0) {
document.getElementById('result').textContent = 'Please enter a positive integer.';
} else {
var sum = sumOfNaturalNumbers(n);
document.getElementById('result').textContent = 'The sum of the first ' + n + ' natural
numbers is: ' + sum;
}
}
</script>
</head>
<body>
<h1>Calculate Sum of N Natural Numbers</h1>
<form onsubmit="event.preventDefault(); calculateSum();">
<label for="number">Enter a positive integer (N):</label>
<input type="number" id="number" name="number" min="1" required>
<input type="submit" value="Calculate">
</form>
<p id="result"></p>
</body>
</html>
OUTPUT

RESULT:

Thus, the given program has been executed successfully and output verified.
EX NO:06 Write a JavaScript code block using arrays and generate the current date
in words, this should include the day, month and year
Date:

AIM:
To write a JavaScript code blocks using arrays and generate the current date in words

ALGORITHM:
Step1: start the program

Step 2:Month Names Array: The month’s array maps month numbers (0 to 11)

to their respective names.

Step 3: Getting Current Date:new Date() creates a new Date object representing

the current date and time.getDate() extracts the day of the month.

Step 4: GetMonth() extracts the month number (0 for January, 1 for February, etc.),

Which is then used to access the month name from the months array.getFullYear()

Extracts the year.

Step 5:Formatting the Date: The date is formatted as "day month year", e.g., "29 August

2024".

Step 6: Displaying the Date: The dateInWords is set as the content of the <p> element

with the ID dateInWords.

Step 7: stop of the program


PROGRAM

<!DOCTYPE html>
<head>
<title>Current Date in Words</title>
<script>
// Function to get the current date in words
function getCurrentDateInWords() {
// Array to map month numbers to month names
const months = [
'January', 'February', 'March', 'April', 'May', 'June',
'July', 'August', 'September', 'October', 'November', 'December'
];
// Create a new Date object for the current date
const now = new Date();
// Extract day, month, and year
const day = now.getDate();
const month = months[now.getMonth()]; // Get month name from the array
const year = now.getFullYear();
// Format date in words
const dateInWords = `${day} ${month} ${year}`;
// Display the result
document.getElementById('dateInWords').textContent = dateInWords;
}
// Call the function to display the current date in words when the page loads
window.onload = getCurrentDateInWords;
</script>
</head>
<body>
<h1>Current Date in Words</h1>
<p id="dateInWords"></p>
</body>
</html>
OUTPUT

RESULT:

Thus, the given program has been executed successfully and output verified.
EX NO:07 Create a form for Student information. Write JavaScript code to find
Date: Total, Average, Result and Grade

Aim:
To write a form for Student information. Write JavaScript code to find Total,
Average, Result and Grade
Algorithm:
Step1: Start the program

Step 2: The form includes three input fields for scores in three subjects.

there is a submit button that triggers the calculate Results function

Step 3: Get Input Values: Retrieve values from the input fields and convert them to

floats.

Calculate Total: Sum the scores.

Calculate Average: Divide the total by the number of subjects (3 in this case).

Step 4: Determine Result and Grade: If any subject score is below 40,

the result is 'Fail'. Otherwise, it's 'Pass'.

Step 5: Grade: Based on the average score, assign a letter grade.

Step 6: Display Results: Update the content of <p> elements to show the total, average,

Result and grade

Step 7: stop the program


PROGRAM

<!DOCTYPE html>
<head>
<title>Student Information Form</title>
<link rel="stylesheet" href="styles.css">
<script>
// Function to calculate total, average, result, and grade
function calculateResults() {
// Get input values
var subject1 = parseFloat(document.getElementById('subject1').value);
var subject2 = parseFloat(document.getElementById('subject2').value);
var subject3 = parseFloat(document.getElementById('subject3').value);

// Calculate total
var total = subject1 + subject2 + subject3;

// Calculate average
var average = total / 3;

// Determine result and grade


var result, grade;
if (subject1 < 40 || subject2 < 40 || subject3 < 40) {
result = 'Fail';
grade = 'N/A';
} else {
result = 'Pass';
if (average >= 90) {
grade = 'A';
} else if (average >= 80) {
grade = 'B';
} else if (average >= 70) {
grade = 'C';
} else if (average >= 60) {
grade = 'D';
} else {
grade = 'E';
}
}
// Display results
document.getElementById('total').textContent = 'Total: ' + total;
document.getElementById('average').textContent = 'Average: ' + average.toFixed(2);
document.getElementById('result').textContent = 'Result: ' + result;
document.getElementById('grade').textContent = 'Grade: ' + grade;
}
</script>
</head>
<body>
<h1>Student Information Form</h1>
<form onsubmit="event.preventDefault(); calculateResults();">
<label for="subject1">Subject 1 Score:</label>
<input type="number" id="subject1" name="subject1" required><br><br>

<label for="subject2">Subject 2 Score:</label>


<input type="number" id="subject2" name="subject2" required><br><br>

<label for="subject3">Subject 3 Score:</label>


<input type="number" id="subject3" name="subject3" required><br><br>

<input type="submit" value="Calculate">


</form>

<h2>Results</h2>
<p id="total"></p>
<p id="average"></p>
<p id="result"></p>
<p id="grade"></p>
</body>
</html>
OUTPUT

RESULT:
Thus, the given program has been executed successfully and output verified.
EX NO:08 Create a form for Employee information. Write JavaScript code to find
DA, HRA, PF, TAX, Gross pay, Deduction and Net pay.
Date:

AIM:
Write a form for Employee information. Write JavaScript code to find DA, HRA,
PF, TAX, Gross pay, Deduction and Net pay

ALGORITHM:
Step1: Start the Program

Step 2: Includes an input field for Basic Salary and a submit

Button.Uses onsubmit="event.PreventDefault (); calculateSalary();" to prevent

the default form submission and call the calculateSalary function instead.

Step 3: Retrieve Input: Gets the Basic Salary from the input field.

Step 4: DA: 10% of Basic Salary, HRA: 15% of Basic Salary, PF: 12% of Basic Salary.

Step 5: Gross Pay: Sum of Basic Salary, DA, and HRA. Tax: 5% of Gross

Pay, Deduction: Sum of PF and Tax, Net Pay: Gross Pay minus Deduction

Step 6: Display Results: Updates the content of <p> elements to show the calculated

Values

Step 7: stop of the program


PROGRAM

<!DOCTYPE html>
<head>
<title>Employee Salary Calculation</title>
<link rel="stylesheet" href="styles.css">
<script>
// Function to calculate DA, HRA, PF, TAX, Gross Pay, Deduction, and Net Pay
function calculateSalary() {
// Get input value
var basicSalary = parseFloat(document.getElementById('basicSalary').value);
// Check if the basic salary is a positive number
if (isNaN(basicSalary) || basicSalary<= 0) {
alert('Please enter a valid positive number for Basic Salary.');
return;
}
// Constants for calculations
var daRate = 0.10; // DA as 10% of Basic Salary
var hraRate = 0.15; // HRA as 15% of Basic Salary
var pfRate = 0.12; // PF as 12% of Basic Salary
var taxRate = 0.05; // TAX as 5% of Gross Pay

// Calculate allowances and deductions


var da = basicSalary * daRate;
var hra = basicSalary * hraRate;
var pf = basicSalary * pfRate;
var grossPay = basicSalary + da + hra;
var tax = grossPay * taxRate;
var deduction = pf + tax;
var netPay = grossPay - deduction;

// Display results
document.getElementById('da').textContent = 'DA: ₹' + da.toFixed(2);
document.getElementById('hra').textContent = 'HRA: ₹' + hra.toFixed(2);
document.getElementById('pf').textContent = 'PF: ₹' + pf.toFixed(2);
document.getElementById('tax').textContent = 'TAX: ₹' + tax.toFixed(2);
document.getElementById('grossPay').textContent = 'Gross Pay: ₹' + grossPay.toFixed(2);
document.getElementById('deduction').textContent = 'Total Deduction: ₹' +
deduction.toFixed(2);
document.getElementById('netPay').textContent = 'Net Pay: ₹' + netPay.toFixed(2);
}
</script>
</head>
<body>
<h1>Employee Salary Calculation</h1>
<form onsubmit="event.preventDefault(); calculateSalary();">
<label for="basicSalary">Enter Basic Salary (₹):</label>
<input type="number" id="basicSalary" name="basicSalary" step="0.01"
required><br><br>

<input type="submit" value="Calculate">


</form>
<h2>Salary Breakdown</h2>
<p id="da"></p>
<p id="hra"></p>
<p id="pf"></p>
<p id="tax"></p>
<p id="grossPay"></p>
<p id="deduction"></p>
<p id="netPay"></p>
</body>
</html><!DOCTYPE html>
<head>
<title>Employee Salary Calculation</title>
<link rel="stylesheet" href="styles.css">
<script>
// Function to calculate DA, HRA, PF, TAX, Gross Pay, Deduction, and Net Pay
function calculateSalary() {
// Get input value
var basicSalary = parseFloat(document.getElementById('basicSalary').value);

// Check if the basic salary is a positive number


if (isNaN(basicSalary) || basicSalary<= 0) {
alert('Please enter a valid positive number for Basic Salary.');
return;
}
// Constants for calculations
var daRate = 0.10; // DA as 10% of Basic Salary
var hraRate = 0.15; // HRA as 15% of Basic Salary
var pfRate = 0.12; // PF as 12% of Basic Salary
var taxRate = 0.05; // TAX as 5% of Gross Pay
// Calculate allowances and deductions
var da = basicSalary * daRate;
var hra = basicSalary * hraRate;
var pf = basicSalary * pfRate;
var grossPay = basicSalary + da + hra;
var tax = grossPay * taxRate;
var deduction = pf + tax;
var netPay = grossPay - deduction;

// Display results
document.getElementById('da').textContent = 'DA: ₹' + da.toFixed(2);
document.getElementById('hra').textContent = 'HRA: ₹' + hra.toFixed(2);
document.getElementById('pf').textContent = 'PF: ₹' + pf.toFixed(2);
document.getElementById('tax').textContent = 'TAX: ₹' + tax.toFixed(2);
document.getElementById('grossPay').textContent = 'Gross Pay: ₹' + grossPay.toFixed(2);
document.getElementById('deduction').textContent = 'Total Deduction: ₹' +
deduction.toFixed(2);
document.getElementById('netPay').textContent = 'Net Pay: ₹' + netPay.toFixed(2);
}
</script>
</head>
<body>
<h1>Employee Salary Calculation</h1>
<form onsubmit="event.preventDefault(); calculateSalary();">
<label for="basicSalary">Enter Basic Salary (₹):</label>
<input type="number" id="basicSalary" name="basicSalary" step="0.01"
required><br><br>
<input type="submit" value="Calculate">
</form>
<h2>Salary Breakdown</h2>
<p id="da"></p>
<p id="hra"></p>
<p id="pf"></p>
<p id="tax"></p>
<p id="grossPay"></p>
<p id="deduction"></p>
<p id="netPay"></p>
</body>
</html>
OUTPUT

RESULT:

Thus, the given program has been executed successfully and output verified.
EX NO:09 Create a form consists of a two Multiple choice lists and one single choice
list (The first multiple choice list, displays the Major dishes available.)
Date:

AIM:
Write a form consists of a two Multiple choice lists and one single choice

ALGORITHM:
Step1: Start the Program
Step 2: <select> Element: Contains options for different dishes.<option
Elements: Each option represents a major dish.
Step3: <button>: When clicked, it triggers the displaySelectedDish function to show
the selected dish.
Step 4: JavaScript Function (display Selected Dish):
Retrieves the selected value from the dropdown using value.
Step 5: Maps the selected value to a dish name using an object. Updates the content of
the<div>With the ID result to display the selected dish
Step 6: Styling: Basic styling for form elements, buttons, and result display.
Step 7: stop of the program
PROGRAM

<!DOCTYPE html>
<head>
<title>Major Dishes Selection</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
select {
padding: 5px;
margin-bottom: 10px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
font-size: 1.2em;
}
</style>
</head>
<body>
<h1>Select Major Dish</h1>
<form id="dishForm">
<label for="dishSelect">Choose a dish:</label>
<select id="dishSelect" name="dishSelect">
<option value="pizza">Pizza</option>
<option value="burger">Burger</option>
<option value="pasta">Pasta</option>
<option value="sushi">Sushi</option>
<option value="tacos">Tacos</option>
</select>
<button type="button" onclick="displaySelectedDish()">Submit</button>
</form>
<div id="result" class="result"></div>
<script>
function displaySelectedDish() {
// Get the selected value from the dropdown
var selectedDish = document.getElementById('dishSelect').value;
// Map the values to dish names
var dishNames = {
pizza: 'Pizza',
burger: 'Burger',
pasta: 'Pasta',
sushi: 'Sushi',
tacos: 'Tacos'
};

// Display the selected dish name


var resultText = 'You selected: ' + dishNames[selectedDish];
document.getElementById('result').textContent = resultText;
}
</script>
</body>
</html>
OUTPUT

RESULT:
Thus, the given program has been executed successfully and output verified.

You might also like