Scribd
Upload
0 views13 pages

Web Technology

The document contains multiple HTML forms with JavaScript functionalities. These forms include a form element counter, textbox validation, a math expression evaluator, dynamic effects, and calculations for student and employee information. Each section demonstrates different JavaScript capabilities such as event handling, DOM manipulation, and basic arithmetic operations.

Uploaded by

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

Web Technology

The document contains multiple HTML forms with JavaScript functionalities. These forms include a form element counter, textbox validation, a math expression evaluator, dynamic effects, and calculations for student and employee information. Each section demonstrates different JavaScript capabilities such as event handling, DOM manipulation, and basic arithmetic operations.

Uploaded by

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

1.

Create a form having 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 lang="en">
<head>
<meta charset="UTF-8">
<title>Form Element Counter</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
padding: 30px;
}

h2 {
text-align: center;
color: #2e3b4e;
}

form {
background-color: #ffffff;
padding: 25px;
border: 1px solid #ccc;
border-radius: 10px;
width: 400px;
margin: auto;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

label {
display: block;
margin-top: 15px;
font-weight: bold;
}

input[type="text"],
input[type="email"],
select {
width: 100%;
padding: 8px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
}

.form-buttons {
margin-top: 20px;
text-align: center;
}
button {
padding: 10px 20px;
background-color: #0077cc;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #005fa3;
}

#result {
margin-top: 20px;
text-align: center;
font-weight: bold;
color: green;
}
</style>
</head>
<body>

<h2>Form Element Counter</h2>

<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name">

<label for="email">Email:</label>
<input type="email" id="email">

<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

<label>Interests:</label>
<input type="checkbox" name="interest" value="sports"> Sports
<input type="checkbox" name="interest" value="music"> Music
<input type="checkbox" name="interest" value="reading"> Reading

<label for="country">Country:</label>
<select id="country">
<option value="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>

<div class="form-buttons">
<button type="button" onclick="countElements()">Count Elements</button>
</div>

<div id="result"></div>
</form>

<script>
function countElements() {
const form = document.getElementById("myForm");
const count = form.elements.length;
document.getElementById("result").innerText = "Total number of elements: " + count;
}
</script>

</body>
</html>

2. Create a 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
left empty.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Textbox Validation Form</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 30px;
background-color: #f4f4f4;
}

form {
background-color: #fff;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
width: 400px;
margin: auto;
}

label {
display: block;
margin-top: 10px;
}

input[type="text"] {
width: 100%;
padding: 8px;
margin-top: 5px;
margin-bottom: 10px;
box-sizing: border-box;
}

button {
margin-top: 15px;
padding: 10px 20px;
background-color: #0077cc;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #005fa3;
}
</style>
</head>
<body>

<h2 style="text-align:center;">Form with Textbox Validation</h2>

<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" name="Name">

<label for="email">Email:</label>
<input type="text" id="email" name="Email">

<label for="city">City:</label>
<input type="text" id="city" name="City">

<label for="country">Country:</label>
<input type="text" id="country" name="Country">

<button type="button" onclick="validateForm()">Submit</button>


</form>

<script>

function validateForm() {
const form = document.getElementById("myForm");
const inputs = form.querySelectorAll("input[type='text']");

for (let i = 0; i < inputs.length; i++) {


if (inputs[i].value.trim() === "") {
const fieldName = inputs[i].name || `Textbox ${i + 1}`;
alert(`Please fill in the "${fieldName}" field.`);
inputs[i].focus();
return;
}
}

alert("All fields are filled. Form is valid!");


}
</script>

</body>
</html>

3. Develop a HTML Form, which accepts any Mathematical expression. Write JavaScript
code to Evaluates the expression and Displays the result.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Math Expression Evaluator</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 30px;
background-color: #f0f0f0;
}

form {
background-color: #fff;
padding: 20px;
width: 400px;
margin: auto;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

label {
display: block;
font-weight: bold;
margin-bottom: 10px;
}

input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
box-sizing: border-box;
}
button {
padding: 10px 20px;
background-color: #0077cc;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #005fa3;
}

#result {
margin-top: 15px;
font-weight: bold;
}
</style>
</head>
<body>

<h2 style="text-align: center;">Math Expression Evaluator</h2>

<form id="mathForm">
<label for="expression">Enter a math expression:</label>
<input type="text" id="expression" placeholder="e.g., 5+3*2 or Math.sqrt(25)">
<button type="button" onclick="evaluateExpression()">Calculate</button>
<div id="result"></div>
</form>

<script>
function evaluateExpression() {
const expr = document.getElementById('expression').value;
const resultDiv = document.getElementById('result');

try {
// Evaluate the math expression
const result = eval(expr);
resultDiv.textContent = "Result: " + result;
} catch (error) {
resultDiv.textContent = "Invalid expression!";
}
}
</script>

</body>
</html>

4. Create a page with dynamic effects. Write the code to include layers and basic animation.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dynamic Effects Page</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #e0f7fa;
overflow: hidden;
}

/* Floating circle triggered by button */


.circle {

position: absolute;
width: 50px;
height: 50px;
background-color: #00c853;
border-radius: 50%;
top: 300px;
left: 20px;
opacity: 0;
}

/* Fade-in animation */
@keyframes fadeInMove {
0% { opacity: 0; left: 20px; }
100% { opacity: 1; left: 300px; }
}

.animate {
animation: fadeInMove 2s ease-out forwards;
}

/* Button styling */
button {
position: absolute;
top: 20px;
right: 20px;
padding: 10px 20px;
font-size: 16px;
background-color: #0077cc;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {
background-color: #005fa3;
}
</style>
</head>
<body>

<div class="circle" id="circle"></div>

<button onclick="triggerCircle()">Start Animation</button>

<script>
function triggerCircle() {
const circle = document.getElementById('circle');
circle.classList.add('animate');

// Optional: Remove and re-add class to re-trigger animation


setTimeout(() => {
circle.classList.remove('animate');
}, 2000);
}
</script>

</body>
</html>

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>
</head>
<body>
<h2>Sum of N Natural Numbers</h2>
<script>
// User-defined function to calculate the sum
function sumOfNaturalNumbers(n) {
let sum = 0;
for (let i = 1; i <= n; i++) {
sum += i;
}
return sum;
}

// Get input from user


let n = parseInt(prompt("Enter a number N:"));
// Check if input is a positive integer
if (isNaN(n) || n <= 0) {
alert("Please enter a valid positive number.");
} else {
let result = sumOfNaturalNumbers(n);
alert("The sum of first " + n + " natural numbers is: " + result);
}
</script>
</body>
</html>

6. 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>
<style>
body {
font-family: Arial;
margin: 30px;
}
label {
display: block;
margin-top: 10px;
}
input[type="text"], input[type="number"] {
width: 200px;
padding: 5px;
}
.output {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>

<h2>Student Information</h2>

<form id="studentForm">
<label>Name: <input type="text" id="name" required></label>
<label>Roll Number: <input type="text" id="roll" required></label>
<label>Mark 1: <input type="number" id="mark1" required></label>
<label>Mark 2: <input type="number" id="mark2" required></label>
<label>Mark 3: <input type="number" id="mark3" required></label>
<br>
<button type="button" onclick="calculateResult()">Calculate</button>
</form>

<div class="output" id="output"></div>

<script>
function calculateResult() {
let name = document.getElementById("name").value;
let roll = document.getElementById("roll").value;
let m1 = parseFloat(document.getElementById("mark1").value);
let m2 = parseFloat(document.getElementById("mark2").value);
let m3 = parseFloat(document.getElementById("mark3").value);

if (isNaN(m1) || isNaN(m2) || isNaN(m3)) {


alert("Please enter valid marks for all subjects.");
return;
}

let total = m1 + m2 + m3;


let average = total / 3;

let result = (m1 >= 40 && m2 >= 40 && m3 >= 40) ? "Pass" : "Fail";

let grade;
if (result === "Fail") {
grade = "F";
} else if (average >= 90) {
grade = "A+";
} else if (average >= 80) {
grade = "A";
} else if (average >= 70) {
grade = "B";
} else if (average >= 60) {
grade = "C";
} else if (average >= 50) {
grade = "D";
} else {
grade = "E";
}

document.getElementById("output").innerHTML =
`Name: ${name}<br>` +
`Roll No: ${roll}<br>` +
`Total: ${total}<br>` +
`Average: ${average.toFixed(2)}<br>` +
`Result: ${result}<br>` +
`Grade: ${grade}`;
}
</script>

</body>
</html>

7. 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 Salary Calculation</title>
<style>
body {
font-family: Arial;
margin: 30px;
}
label {
display: block;
margin-top: 10px;
}
input[type="text"], input[type="number"] {
width: 200px;
padding: 5px;
}
.output {
margin-top: 20px;
font-weight: bold;
}
</style>
</head>
<body>

<h2>Employee Information</h2>

<form id="employeeForm">
<label>Employee Name: <input type="text" id="empName" required></label>
<label>Employee ID: <input type="text" id="empId" required></label>
<label>Basic Pay: <input type="number" id="basicPay" required></label>
<br>
<button type="button" onclick="calculateSalary()">Calculate</button>
</form>

<div class="output" id="salaryOutput"></div>

<script>
function calculateSalary() {
let name = document.getElementById("empName").value;
let id = document.getElementById("empId").value;
let basic = parseFloat(document.getElementById("basicPay").value);

if (isNaN(basic) || basic <= 0) {


alert("Please enter a valid Basic Pay.");
return;
}

// Salary components
let da = 0.40 * basic;
let hra = 0.20 * basic;
let pf = 0.12 * basic;
let gross = basic + da + hra;
let tax = 0.10 * gross;
let deduction = pf + tax;
let net = gross - deduction;

// Display the result


document.getElementById("salaryOutput").innerHTML =
`Employee Name: ${name}<br>` +
`Employee ID: Rs. ${id}<br>` +
`Basic Pay: Rs. ${basic.toFixed(2)}<br>` +
`DA (40%): Rs. ${da.toFixed(2)}<br>` +
`HRA (20%): Rs. ${hra.toFixed(2)}<br>` +
`PF (12%): Rs. ${pf.toFixed(2)}<br>` +
`Gross Pay: Rs. ${gross.toFixed(2)}<br>` +
`Tax (10% of Gross): Rs . ${tax.toFixed(2)}<br>` +
`Total Deduction (PF + Tax): Rs. ${deduction.toFixed(2)}<br>` +
`Net Pay: Rs. ${net.toFixed(2)}`;
}
</script>

</body>
</html>

8. Create a web page using two image files, which switch between one another as the mouse
pointer moves over the image. Use the on Mouse Over and on Mouse Out event handlers.

<!DOCTYPE html>
<html>
<head>
<title>Image Swap on Mouse Hover</title>
<style>
body {
font-family: Arial;
text-align: center;
margin-top: 50px;
}

img {
width: 300px;
height: auto;
border: 2px solid #333;
transition: 0.3s;
}
</style>
</head>
<body>

<h2>Hover Over the Image to Switch</h2>

<!-- Image element with mouse event handlers -->


<img src="image1.jpg"
id="swapImage"
onmouseover="changeImage()"
onmouseout="restoreImage()"
alt="Hover to change image">

<script>
function changeImage() {
document.getElementById("swapImage").src = "image2.jpg";
}

function restoreImage() {
document.getElementById("swapImage").src = "image1.jpg";
}
</script>

</body>
</html>

You might also like