Aditya Css10to15

Client Side Scripting(practical)
Name: ASHWIN PAWAR
Practical no:
13 Code:-
<!DOCTYPE html>
<html>
<head>
<title>Rollover Effect Example</title>
<style> .rollover {
width: 200px; height:
100px; background-color:
#2aa7fa; color: #fff;
text-align: center; line-
height: 100px;
transition: background-color 0.3s, color 0.3s;
}
.rollover:hover {
background-color: #e74c3c;
color: #000;
}
</style>
</head>
<body>
<h1>Rollover Effect Example</h1>
<div class="rollover">Hover Me</div>

Name: ASHWIN PAWAR
</body>
</html>
Output:-
Name: ASHWIN PAWAR
Practical no:
14 Code:-
<!DOCTYPE html>
<html> <head>
<title>Menu Example</title>
<style>
/* Styles for the horizontal menu */
.horizontal-menu { display: flex;
list-style-type: none;
}
.horizontal-menu li {
margin-right: 10px;
}
/* Styles for the vertical menu */

.vertical-menu { list-style-
type: none;
}
.vertical-menu li { margin-
bottom: 10px;
}
</style>
Name: ASHWIN PAWAR
</head>
<body>
<h1>Menu Example</h1>
<h2>Horizontal Menu</h2>
<ul class="horizontal-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
<h2>Vertical Menu</h2>
<ul class="vertical-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
Name: ASHWIN PAWAR
Output:-
Name: ASHWIN PAWAR
Practical no:
15 Code:-
<!DOCTYPE html>
<html>
<head>
<title>Protected Web Page</title>
<style> body {
user-select: none;
}
</style>
<script>
// Disable right-click on the webpage
window.addEventListener('contextmenu', function (e) {
e.preventDefault();
});
// Show a custom message in the status bar

window.addEventListener('load', function () {
window.status = 'This is a protected webpage.';
setTimeout(function () { window.status = '';
}, 3000);
});
</script>
</head>
Name: ASHWIN PAWAR
<body>
<h1>Welcome to the Protected Web Page</h1>
<p>Right-click and text selection have been disabled. A custom status message will appear in
the status bar.</p>
</body>
</html>
Output:-
Name: ASHWIN PAWAR
Practical no:
12 Code:-
<!DOCTYPE html>
<html>
<head>
<title>Form Validation with Regular Expressions</title>
</head>
<body>
<h1>Form Validation with Regular Expressions</h1>
<form id="validationForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Submit</button>
</form>
<div id="validationResult"></div>
<script>
const form = document.getElementById("validationForm");
Name: ASHWIN PAWAR
const resultDiv = document.getElementById("validationResult");
form.addEventListener("submit", function (event) {

event.preventDefault();
const name = form.name.value;

const email = form.email.value; const
password = form.password.value;
const nameRegex = /^[A-Za-z\s]+$/;

const emailRegex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/;
const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$/;
const nameIsValid = name.match(nameRegex);

const emailIsValid = email.match(emailRegex); const
passwordIsValid = password.match(passwordRegex);
if (nameIsValid && emailIsValid && passwordIsValid) {

resultDiv.innerHTML = "Form is valid and submitted!";
} else {
resultDiv.innerHTML = "Form is not valid. Please check your input.";
}
});
</script>
</body>
</html>
Name: ASHWIN PAWAR
Output:-
Name: ASHWIN PAWAR
Practical no:
11 Code:-
<!DOCTYPE html>
<html>
<head>
<title>Child Window Example</title>
</head>
<body>
<h1>Child Window Example</h1>
<button id="openChildWindow">Open Child Window</button>

<button id="moveChildWindow">Move Child Window</button>
<button id="resizeChildWindow">Resize Child Window</button>
<script>
let childWindow = null;
function openChild() {
childWindow = window.open('', 'childWindow', 'width=400,height=400');
}
document.getElementById('openChildWindow').addEventListener('click', openChild);
document.getElementById('moveChildWindow').addEventListener('click', function() {
if (childWindow) {
childWindow.moveBy(50, 50); // Move the child window by 50 pixels in both directions.

Name: ASHWIN PAWAR
}
});
document.getElementById('resizeChildWindow').addEventListener('click', function() {
if (childWindow) {
childWindow.resizeBy(50, 50); // Resize the child window by increasing both width and
height by 50 pixels.
}
});
</script>
</body>
</html>
Name: ASHWIN PAWAR
Output:-
Name: ASHWIN PAWAR
Practical no:
10 Code:-
<!DOCTYPE html>
<html>
<head>
<title>Cookie Example</title>
</head>
<body>
<h1>Cookie Example</h1>
<p>Click the buttons below to create and manage cookies:</p>
<button id="setSessionCookie">Set Session Cookie</button>

<button id="setPersistentCookie">Set Persistent Cookie</button>
<button id="getCookies">Get Cookies</button>
<button id="deleteCookies">Delete Cookies</button>
<script>
// Function to set a session cookie
document.getElementById('setSessionCookie').addEventListener('click', function() {
document.cookie = "session_cookie=This is a session cookie; path=/"; alert("Session
cookie set");
});
Name: ASHWIN PAWAR
// Function to set a persistent cookie (expires in 7 days)
document.getElementById('setPersistentCookie').addEventListener('click', function() {
const expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 7);
document.cookie = `persistent_cookie=This is a persistent cookie;
expires=${expirationDate.toUTCString()}; path=/`;
alert("Persistent cookie set");
});
// Function to get all cookies

document.getElementById('getCookies').addEventListener('click', function() {
const cookies = document.cookie; alert("Cookies: " + cookies);
});
// Function to delete cookies
document.getElementById('deleteCookies').addEventListener('click', function() {
document.cookie = "session_cookie=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
document.cookie = "persistent_cookie=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
alert("Cookies deleted");
});
</script>
</body>
</html>
Name: ASHWIN PAWAR
Output:-

Aditya Css10to15

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Aditya Css10to15

Uploaded by

Copyright:

Available Formats

Client Side Scripting(practical)

Name: ASHWIN PAWAR

<div class="rollover">Hover Me</div>

/* Styles for the vertical menu */

// Show a custom message in the status bar

const resultDiv = document.getElementById("validationResult");

form.addEventListener("submit", function (event) {

const name = form.name.value;

const nameRegex = /^[A-Za-z\s]+$/;

const nameIsValid = name.match(nameRegex);

if (nameIsValid && emailIsValid && passwordIsValid) {

<button id="openChildWindow">Open Child Window</button>

childWindow.moveBy(50, 50); // Move the child window by 50 pixels in both directions.

<p>Click the buttons below to create and manage cookies:</p>

<button id="setSessionCookie">Set Session Cookie</button>

// Function to get all cookies

You might also like