Scribd
Upload
7 views

W PDF

Uploaded by

Ajay Yadav
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
7 views

W PDF

Uploaded by

Ajay Yadav
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/ 12

WEB TECHNOLOGIES

(102)
PROJECT FILE
BATCH:- 2023-2026

Submitted To- MR.FARHAN RAZA RIZVI SIR Submitted By- AJAY YADAV
Assistant Professor,Dept. CSA BCAN1CA23005
1.Create a specimen of corporate web page. Divide the browser screen into two frames.
The frame on the left will be a menu consisting of hyperlinks. Clicking on any of these
links will lead to a new page, which must open in a target frame on the right side.

Solution:

Index.html
Menu.html

Page 1.html

Page 2.html
Content_Holder.html

Output (Index)
Output (Page 1)

Output (Page 2)
2. Write a java script code block, which validates a user name and password
against hard coded values. If either name or password field is not entered display
an error message showing “You forgot one of the required fields. Please try
again” In case the field matched do not match the hard coded values, display an
error message showing : “Please enter a valid user name and password” If the
field entered matched , Display the following message: “Welcome (Username)”.

Sol.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Validation</title>
<style>
.error {
color: red;
}
</style>
</head>
<body>

<h2>Login Form</h2>

<form id="loginForm" onsubmit="return validateLogin()">


<label for="username">Username:</label>
<input type="text" id="username" name="username">
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<br>
<span id="error" class="error"></span>
<br>
<input type="submit" value="Login">
</form>

<script>
function validateLogin() {
// Reset error message
document.getElementById('error').innerText = '';

// Get form values


var username = document.getElementById('username').value;
var password = document.getElementById('password').value;

// Check for empty fields


if (username.trim() === '' || password.trim() === '') {
document.getElementById('error').innerText = 'You forgot one of the required
fields. Please try again.';
return false; // Prevent form submission
}

// Hard-coded values for validation


var validUsername = 'ajayyadav@926';
var validPassword = 'ajay926';

// Check if entered values match the hard-coded values


if (username !== validUsername || password !== validPassword) {
document.getElementById('error').innerText = 'Please enter a valid username
and password.';
return false; // Prevent form submission
}

// If validation passes, display a welcome message


alert('Welcome ' + username);
return true; // Allow form submission
}
</script>
</body>
</html>
3.Write Java Script Program to show use of following Events:
a. Onclick()
b. Onabort()
c. Onload()
d. OnMouseOver()
e. OnMouseOut()
f. OnChange()
g. Onerror()

Sol.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Handling Example</title>
<style>
#myDiv {
width: 200px;
height: 100px;
background-color: lightblue;
text-align: center;
line-height: 100px;
cursor: pointer;
}
</style>
</head>
<body>

<div id="myDiv" onclick="handleClick()" onmouseover="handleMouseOver()"


onmouseout="handleMouseOut()">Click me!</div>
<script>
// Onclick event
function handleClick() {
alert("Onclick event occurred!");
}

// OnMouseOver event
function handleMouseOver() {
document.getElementById("myDiv").style.backgroundColor = "lightgreen";
}

// OnMouseOut event
function handleMouseOut() {
document.getElementById("myDiv").style.backgroundColor = "lightblue";
}

// Onload event
window.onload = function () {
console.log("Page has been loaded!");
};

// Onchange event
function handleChange() {
var inputText = document.getElementById("myInput").value;
console.log("Input changed to: " + inputText);
}

// Onabort event (triggered on an image load error)


function handleAbort() {
alert("Image load aborted!");
}
// Onerror event (triggered on an image load error)
function handleError() {
alert("Image load error!");
}

// Example of Onchange event


document.write("<br><input type='text' id='myInput'
onchange='handleChange()' placeholder='Type something...'>");

// Example of Onabort and Onerror events


document.write("<br><img src='nonexistent-image.jpg'
onabort='handleAbort()' onerror='handleError()' alt='Nonexistent Image'>");
</script>

</body>
</html>

You might also like