Scribd
Upload
265 views

Web Technology Lab

Uploaded by

ashokdhoni24173
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
265 views

Web Technology Lab

Uploaded by

ashokdhoni24173
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/ 22

1.

CREATE A FORM HAVING NUMBER OF ELEMENTS (TEXT BOXES, RADIO


BUTTONS, CHECKBOXES, AND SO ON). WRITE JAVASCRIPT CODE TO
COUNT THE NUMBER OF ELEMENTS IN A FROM.

AIM:

The aim of this task is to create an HTML form with various elements such as textboxes,
radio buttons, checkboxes, etc. Additionally, we will write JavaScript code to count the number
of elements in the form.

ALGORITHM:

STEP 1: Select the form element using its ID or any other appropriate selector.

STEP 2: Retrieve all the elements within the form using the querySelectorAll() method

and store them in a variable.

STEP 3: Get the length of the elements collection using the length property.

STEP 4: Display the count of elements using console.log() or any other desired output

method.

CODING:

<!DOCTYPE html>
<html>
<head>
<title>Count Form Elements</title>
</head>
<body>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" /><br />
<label for="email">Email:</label>
<input type="text" id="email" name="email" /><br />
<label for="age">Age:</label>
<input type="text" id="age" name="age" /><br />
<label for="gender">Gender:</label>
<input type="radio" id="gender" name="gender" value="male" /> Male
<input type="radio" id="gender" name="gender" value="female" /> Female<br />
<label for="hobbies">Hobbies:</label>
<input type="checkbox" id="hobby1" name="hobbies" value="reading" /> Reading

1
<input type="checkbox" id="hobby2" name="hobbies" value="gaming" /> Gaming
<input type="checkbox" id="hobby3" name="hobbies" value="traveling" /> Traveling<br />
<input type="submit" value="Submit" />
</form>
<script>
// Get the form element
const form = document.getElementById('myForm');
// Count the number of elements in the form
const elementCount = form.querySelectorAll('*').length;
// Display the count
console.log('Number of elements in the form:', elementCount);
</script>
</body>
</html>

OUTPUT:

RESULT:
The JavaScript code counts the number of elements in the form and displays the count
in the console. In this case, the form contains 24 elements, including textboxes, radio buttons,
checkboxes, and a submit button.

2
2. CREATE AN HTML FORM THAT HAS NUMBER OF TEXTBOXES. WHEN THE
FORM RUNS IN THE BROWSER FILL THE TEXTBOXES 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 EMPTY.

AIM:
The aim of this task is to create an HTML form with multiple textboxes and write
JavaScript code to validate that all textboxes have been filled. If any of the textboxes are left
empty, the code should display an alert indicating which textbox has been left empty.

ALGORITHM:
STEP 1: We define a JavaScript function validateForm() that will be called when the form is
submitted.
STEP 2: Inside the function, we get all the textboxes using getElementsByClassName(). The
textboxes have the class name "my-textbox".
STEP 3: We create an empty array emptyTextboxes to store the IDs of any textboxes that are
empty.
STEP 4: We loop through each textbox and check if its value property is empty. If it is, we add
its ID to the emptyTextboxes array.
STEP 5: If there are any empty textboxes, we display an alert with their IDs using alert().
STEP 6: Finally, we return false to prevent the form from being submitted if there are empty
textboxes, or true if all textboxes are filled.

CODING:
<!DOCTYPE html>
<html>
<head>
<title>Textbox Validation</title>
<script>
function validateForm()
{
var textboxes = document.getElementsByClassName('my-textbox');
var emptyTextboxes = [];
for (var i = 0; i < textboxes.length; i++) {
if (textboxes[i].value === '') {

3
emptyTextboxes.push(textboxes[i].id);
}
}
if (emptyTextboxes.length > 0) {
alert('Please fill in the following textboxes:\n' + emptyTextboxes.join('\n'));
return false;
}
return true;
}
</script>
</head>
<body>
<form onsubmit="return validateForm()">
<input type="text" id="textbox1" class="my-textbox" placeholder="Textbox 1"><br><br>
<input type="text" id="textbox2" class="my-textbox" placeholder="Textbox 2"><br><br>
<input type="text" id="textbox3" class="my-textbox" placeholder="Textbox 3"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

OUTPUT:

RESULT:
Thus the above HTML program and JavaScript code is verified and executed successfully.

4
3. DEVELOP A HTML FORM, WHICH ACCEPTS ANY MATHEMATICAL
EXPRESSION. WRITE JAVASCRIPT CODE TO EVALUATE THE
EXPRESSION AND DISPLAYS THE RESULT.

AIM:
The aim of this task is to create an HTML form that accepts a mathematical expression
as input. Additionally, we will write JavaScript code to evaluate the expression and display
the result.

ALGORITHM:
STEP 1: Select the form element using its ID or any other appropriate selector.
STEP 2: Attach an event listener to the form's submit event.
STEP 3: In the event listener function, prevent the default form submission behavior using
event.preventDefault() to avoid the page refreshing.
STEP 4: Retrieve the input expression value from the form using its ID or any other
appropriate selector.
STEP 5: Use the eval() function to evaluate the expression and store the result in a variable.
STEP 6: Display the result on the webpage or console using console.log() or any other desired
output method.

CODING:
<html>
<head>
<title>Expression Evaluator</title>
<script>
function evaluateExpression(event) {
event.preventDefault();
var expressionInput = document.getElementById('expression');
var expression = expressionInput.value;
var result = eval(expression);
console.log('Result:', result);
// You can also display the result on the webpage using
document.getElementById().innerHTML or any other appropriate method.
}
</script>
</head>

5
<body>
<form onsubmit="evaluateExpression(event)">
<input type="text" id="expression" placeholder="Enter a mathematical expression">
<input type="submit" value="Evaluate">
</form>
</body>
</html>

OUTPUT:

RESULT:
Thus the above HTML and JavaScript code is verified and executed successfully.

6
4. CREATE A PAGE WITH DYNAMIC EFFECTS. WRITE THE CODE TO
INCLUDE LAYERS AND BASIC ANIMATION.

AIM:
The aim of this code is to create a dynamic animation effect on a layer element when
the "Animate" button is clicked.

ALGORITHM:
STEP 1: Define the CSS:
 Create a class named .layer with a width of 400px and a height of 300px.
 Set the transition property to all 0.5s ease-in-out.
 Create a class named .animate with the following properties:
 Set the transform property to scale(1.0).
 Set the opacity property to 0.2.
STEP 2: Define the JavaScript function animateBox():
 Select the layer element using document.querySelector('.layer').
 Initialize a counter variable i to 0.
 Set up an interval using setInterval() with a callback function:
 Toggle the animate class on the layer element using classList.toggle('animate').
Increment i by 1.
 Check if i is greater than 10:
 If true, clear the interval using clearInterval(interval).
 The callback function will be executed every 500 milliseconds.
 STEP 3: In the HTML body:
 Create a <div> element with the class layer and a blue background color.
 Add line breaks (<br><br>).
 Create a <button> element with the text "Animate" and an onclick attribute that calls
the animateBox() function when clicked.
CODING:
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Effects with Layers</title>
<style>
.layer
{

7
width: 400px;
height: 300px;
transition: all 0.5s ease-in-out;
}
.animate
{
transform:scale(1.0);
opacity:0.2;
}
</style>
<script>
function animateBox()
{
var layer = document.querySelector('.layer');

var i=0;
var interval=setInterval(function()
{
layer.classList.toggle('animate');i++;
if(i>10)
{
clearInterval(interval);
}
},500);
}
</script>
</head>
<body>
<div class="layer" style="background-color:blue;"></div>
<br><br>
<button onclick="animateBox()">Animate</button>
</body>
</html>

8
OUTPUT:

RESULT:
Thus above mentioned Dynamic effects and basic animation using layers code is using
HTML and JS code is verified and executed successfully.

9
5. WRITE A JAVASCRIPT CODE TO FIND THE SUM OF N NATURAL
NUMBERS. (USE USER-DEFINED FUNCTION).

AIM:
The aim of this task is to create an HTML form that accepts a number N as input.
Additionally, we will write JavaScript code that calculates the sum of the first N natural
numbers using a user-defined function. The result will be displayed on the webpage.

ALGORITHM:
STEP 1: Create an HTML form with an input field to accept the value of N and a button to
trigger the calculation.
STEP 2: Attach an event listener to the form's submit event.
STEP 3: In the event listener function, prevent the default form submission behavior using
event.preventDefault() to avoid the page refreshing.
STEP 4: Retrieve the input value of N from the form.
STEP 5: Define a user-defined function, let's call it sumOfNaturalNumbers, which takes the
value of N as a parameter.
STEP 6:I nitialize a variable sum to 0 to store the cumulative sum.
STEP 7: Use a loop to iterate from 1 to N.
STEP 8: In each iteration, add the current number to the sum variable.
STEP 9: After the loop completes, return the final value of sum.
STEP 10: Call the sumOfNaturalNumbers function with the value of N and store the result
in a variable.
STEP 11: Display the result on the webpage using document.getElementById().innerHTML
or any other appropriate method.

CODING:
<!DOCTYPE html>
<html>
<head>
<title>Sum of N Natural Numbers</title>
<script>
function sumOfNaturalNumbers() {
var n = parseInt(document.getElementById('number').value);
var sum = 0;

10
for (var i = 1; i <= n; i++) {
sum += i;
}
document.getElementById('result').innerHTML = 'Sum of first ' + n + ' natural numbers: '
+ sum;
}
</script>
</head>
<body>
<form onsubmit="event.preventDefault(); sumOfNaturalNumbers()">
<label>Enter a number:</label>
<input type="text" id="number" required><br><br>
<button type="submit">Calculate</button><br><br>
</form>
<div id="result"></div>
</body>
</html>

OUTPUT:

RESULT:
Thus the above HTML and JavaScript code is verified and executed successfully.

11
6. WRITE A JAVASCRIPT CODE BLOCK USING ARRAYS AND GENERATE
THE CURRENT DATE IN WORDS, THIS SHOULD INCLUDE THE DAY,
MONTH AND YEAR.

AIM:
To generate the current date in words, including the day, month, and year, using HTML
and JavaScript arrays.

ALGORITHM:
STEP 1: Create an HTML file with a <div> element to display the generated date.
STEP 2: Create an array of days of the week.
STEP 3: Create an array of months.
STEP 4: Create a JavaScript function to generate the current date in words.
STEP 5: Get the current date using the JavaScript Date object.
STEP 6: Extract the day, month, and year from the current date.
STEP 7: Use the day to index the days of the week array and retrieve the corresponding day.
STEP 8: Use the month to index the month’s array and retrieve the corresponding month.
STEP 9: Concatenate the day, month, and year to form the desired date format in words.
STEP 10: Update the <div> element with the generated date.

CODING:
<!DOCTYPE html>
<html>
<head>
<title>Current Date in Words</title>
</head>
<body>
<div id="currentDate"></div>
<script>
// Step 1: Create an array of days of the week
const daysOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday',
'Saturday'];
// Step 2: Create an array of months
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August',
'September', 'October', 'November', 'December'];

12
// Step 4: Create a function to generate the current date in words
function generateDateInWords() {
// Step 5: Get the current date
const currentDate = new Date();
// Step 6: Extract the day, month, and year
const day = currentDate.getDate();
const monthIndex = currentDate.getMonth();
const year = currentDate.getFullYear();
// Step 7: Get the day of the week
const dayOfWeek = daysOfWeek[currentDate.getDay()];
// Step 8: Get the month
const month = months[monthIndex];
// Step 9: Concatenate the day, month, and year
const dateInWords = dayOfWeek + ', ' + month + ' ' + day + ', ' + year;
// Step 10: Update the <div> element with the generated date
document.getElementById('currentDate').innerHTML = dateInWords;
}
// Call the function to generate the date when the page loads
generateDateInWords();
</script>
</body>
</html>

OUTPUT:

RESULT:
Thus the above HTML and JavaScript code is verified and executed successfully.

13
7. CREATE A FORM FOR STUDENT INFORMATION. WRITE JAVASCRIPT
CODE TO FIND TOTAL, AVERAGE, RESULT AND GRADE.

AIM:
To create a form for student information and calculate the total, average, result,
and grade based on the entered marks using HTML and JavaScript.
ALGORITHM:
STEP 1: Create an HTML form with input fields to collect the student's name and marks for
multiple subjects.
STEP 2: Create JavaScript functions to calculate the total, average, result, and grade.
STEP 3: Retrieve the entered values from the form using JavaScript.
STEP 4: Calculate the total of the marks.
STEP 5: Calculate the average by dividing the total by the number of subjects.
STEP 6: Determine the result based on a passing threshold (e.g., a total percentage of 40% or
higher).
STEP 7: Assign a grade based on the average marks.
STEP 8: Display the calculated total, average, result, and grade in the HTML document.
CODING:
<!DOCTYPE html>
<html>
<head>
<title>Student Information Form</title>
</head>
<body>
<h2>Student Information Form</h2>
<form id="studentForm">
<label for="name">Name:</label>
<input type="text" id="name" required>
<br><br>
<label for="subject1">Subject 1:</label>
<input type="text" id="subject1" required>
<br><br>
<label for="subject2">Subject 2:</label>
<input type="text" id="subject2" required>
<br><br>

14
<label for="subject3">Subject 3:</label>
<input type="text" id="subject3" required>
<br><br>
<input type="submit" value="Submit" onclick="calculateResults(event)">
</form>
<h2>Results:</h2>
<p id="total"></p>
<p id="average"></p>
<p id="result"></p>
<p id="grade"></p>
<script>
function calculateResults(event) {
event.preventDefault(); // Prevent form submission and page refresh
// Retrieve form input values
const name = document.getElementById('name').value;
const subject1 = parseFloat(document.getElementById('subject1').value);
const subject2 = parseFloat(document.getElementById('subject2').value);
const subject3 = parseFloat(document.getElementById('subject3').value);
// Calculate total
const total = subject1 + subject2 + subject3;
// Calculate average
const average = total / 3;
// Determine result and grade
let result = '';
let grade = '';
if (total >= 120) {
result = 'Pass';
if (average >= 80) {
grade = 'A';
} else if (average >= 60) {
grade = 'B';
} else if (average >= 40) {
grade = 'C';
} else {
grade = 'D';
}

15
} else {
result = 'Fail';
grade = 'F';
}
// Display the results in the HTML document
document.getElementById('total').innerHTML = 'Total marks: ' + total;
document.getElementById('average').innerHTML = 'Average marks: ' +
average.toFixed(2);
document.getElementById('result').innerHTML = 'Result: ' + result;
document.getElementById('grade').innerHTML = 'Grade: ' + grade;
}
</script>
</body>
</html>
OUTPUT:

RESULT:
Thus the above Student Information program using HTML and JavaScript code is
verified and executed successfully.

16
8. CREATE A FORM FOR EMPLOYEE INFORMATION. WRITE JAVASCRIPT
CODE TO FIND DA, HRA, PF, TAX, GROSS PAY, DEDUCTION AND NET
PAY.

AIM:
The aim of this project is to create an HTML form that collects employee information
and uses JavaScript code to calculate various salary components such as DA (Dearness
Allowance), HRA (House Rent Allowance), PF (Provident Fund), tax, gross pay, deduction,
and net pay.

ALGORITHM:
STEP1: Start by creating an HTML form that includes input fields for the employee's basic
salary, allowances, and tax rate.
STEP2: Add a button to the form that triggers a JavaScript function when clicked.
STEP3: In the JavaScript function, retrieve the input values from the form using the
getElementById() method.
STEP4: Calculate the salary components:
DA: Multiply the basic salary by 0.8.
HRA: Multiply the basic salary by 0.2.
PF: Multiply the basic salary by 0.1.
Gross pay: Sum of basic salary, allowances, DA, and HRA.
Tax: Multiply the gross pay by the tax rate divided by 100.
Deduction: Sum of PF and tax.
Net pay: Subtract the deduction from the gross pay.
STEP5: Update the HTML elements to display the calculated values using the textContent
property.
STEP6: Test the form by entering values and clicking the "Calculate Salary" button.

CODING:
<!DOCTYPE html>
<html>
<head>
<title>Employee Salary Calculator</title>
<script>
function calculateSalary() {
// Retrieve form input values

17
var basicSalary = parseFloat(document.getElementById('basicSalary').value);
var allowances = parseFloat(document.getElementById('allowances').value);
var taxRate = parseFloat(document.getElementById('taxRate').value);

// Calculate salary components


var da = basicSalary * 0.8;
var hra = basicSalary * 0.2;
var pf = basicSalary * 0.1;
var grossPay = basicSalary + allowances + da + hra;
var tax = grossPay * (taxRate / 100);
var deduction = pf + tax;
var netPay = grossPay - deduction;
// Display the results
document.getElementById('da').textContent = da.toFixed(2);
document.getElementById('hra').textContent = hra.toFixed(2);
document.getElementById('pf').textContent = pf.toFixed(2);
document.getElementById('tax').textContent = tax.toFixed(2);
document.getElementById('grossPay').textContent = grossPay.toFixed(2);
document.getElementById('deduction').textContent = deduction.toFixed(2);
document.getElementById('netPay').textContent = netPay.toFixed(2);
}
</script>
</head>
<body>
<h1>Employee Salary Calculator</h1>
<form>
<label for="basicSalary">Basic Salary:</label>
<input type="text" id="basicSalary" required><br><br>
<label for="allowances">Allowances:</label>
<input type="text" id="allowances" required><br><br>

<label for="taxRate">Tax Rate (%):</label>


<input type="text" id="taxRate" required><br><br>

<button type="button" onclick="calculateSalary()">Calculate Salary</button>


</form>

18
<h2>Salary Components:</h2>
<p>DA: <span id="da"></span></p>
<p>HRA: <span id="hra"></span></p>
<p>PF: <span id="pf"></span></p>
<p>Tax: <span id="tax"></span></p>
<p>Gross Pay: <span id="grossPay"></span></p>
<p>Deduction: <span id="deduction"></span></p>
<p>Net Pay: <span id="netPay"></span></p>
</body>
</html>
OUTPUT:

RESULT:
Thus the above Employee information program is using HTML and JS code is verified and
executed successfully.

19
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

AIM:
The aim of this project is to create an HTML form that consists of two multiple choice
lists and one single choice list. The first multiple choice list displays the major dishes available,
the second multiple choice list displays the starters available, and the single choice list displays
the soft drinks available.

ALGORITHM:
STEP1: Start by creating an HTML form with three select elements for the multiple choice lists
and single choice list.
STEP2: Define the options for each select element based on the available choices.
STEP3: Add appropriate labels to each select element.
STEP4: Set the multiple attribute to allow multiple selections in the first two select elements.
STEP5: Include a submit button to submit the form.
STEP6: On form submission, retrieve the selected options from each select element using JS.
STEP7: Display the selected options to the user.

CODING:
<!DOCTYPE html>
<html>
<head>
<title>Food Order Form</title>
<script>
function submitForm() {
// Retrieve selected options from each select element
var majorDishes = document.getElementById('majorDishes').selectedOptions;
var starters = document.getElementById('starters').selectedOptions;
var softDrink = document.getElementById('softDrink').value;

// Display selected options


var selectedDishes = "";

20
var selectedStarters = "";

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


selectedDishes += majorDishes[i].text + ", ";
}

for (var j = 0; j < starters.length; j++) {


selectedStarters += starters[j].text + ", ";
}

alert("Selected Major Dishes: " + selectedDishes + "\nSelected Starters: " + selectedStarters


+ "\nSelected Soft Drink: " + softDrink);
}
</script>
</head>
<body>
<h1>Food Order Form</h1>
<form onsubmit="submitForm()">
<label for="majorDishes">Major Dishes:</label>
<select id="majorDishes" multiple>
<option>Pizza</option>
<option>Pasta</option>
<option>Burger</option>
<option>Steak</option>
</select><br><br>

<label for="starters">Starters:</label>
<select id="starters" multiple>
<option>Garlic Bread</option>
<option>Chicken Wings</option>
<option>Bruschetta</option>
<option>Mozzarella Sticks</option>
</select><br><br>

<label for="softDrink">Soft Drink:</label>


<select id="softDrink">

21
<option>Coke</option>
<option>Pepsi</option>
<option>Sprite</option>
<option>Fanta</option>
</select><br><br>

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


</form>
</body>
</html>

OUTPUT:

RESULT:
Thus above HTML program is verified and executed successfully.

22

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy