CSS QB
1)
Code:
<html>
<head>
<title>Cookies</title>
</head>
<body>
<h2>Login Form</h2>
<form name="myform">
<label for="username">Username:</label>
<input type="text" name="username" required>
<br><br>
<label for="password">Password:</label>
<input type="password" name="password" required>
<br><br>
<button type="button" onclick="writeCookie()">Submit</button>
</form>
</body>
<script>
function writeCookie() {
with ([Link]) {
var s = [Link] = "username=" + [Link] + ";";
var q = [Link] = "password=" + [Link] + ";";
[Link](s);
[Link](q);
alert("Cookies for username and password have been written.");
}
}
</script>
</html>
2)
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Validation</title>
</head>
<body>
<h2>Email Validation</h2>
<form name="emailForm">
<label for="email">Enter your email:</label>
<input type="text" id="email" name="email" required>
<br><br>
<button type="button" onclick="validateEmail()">Validate
Email</button>
</form>
<p id="result"></p>
<script>
function validateEmail() {
const email = [Link]("email").value;
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]
{2,}$/;
const resultParagraph = [Link]("result");
if ([Link](email)) {
[Link] = "Email is valid!";
} else {
[Link] = "Email is not valid!";
}
}
</script>
</body>
</html>
3)
4)
Code :
Text Rollover :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Rollover Effect</title>
</head>
<body>
<h2 id="hoverText" onmouseover="changeTextStyle()"
onmouseout="resetTextStyle()">Hover over this text to see the effect!</h2>
<script>
function changeTextStyle() {
[Link]("hoverText").[Link] = "red";
[Link]("hoverText").[Link] = "24px";
}
function resetTextStyle() {
[Link]("hoverText").[Link] = "black";
[Link]("hoverText").[Link] = "20px";
}
</script>
</body>
</html>
Image rollover :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Rollover Effect</title>
</head>
<body>
<img id="rolloverImage" src="[Link]" width="300" height="200"
onmouseover="changeImage()" onmouseout="resetImage()">
<script>
function changeImage() {
[Link]("rolloverImage").src = "[Link]";
}
function resetImage() {
[Link]("rolloverImage").src = "[Link]";
}
</script>
</body>
</html>
5)
Code :
6)
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Window Popup Example</title>
<script>
function openWelcomePopup() {
[Link]("", "WelcomeWindow",
"width=300,height=200").[Link]("<h2>WELCOME To
SCRIPTING</h2>");
}
function openFunPopup() {
[Link]("", "FunWindow",
"width=300,height=200").[Link]("<h2>FUN WITH
SCRIPTING</h2>");
}
</script>
</head>
<body onload="openWelcomePopup()" onunload="openFunPopup()">
<h1>Welcome to the Web Page!</h1>
<p>When you load or unload this page, popups will appear with
messages.</p>
</body>
</html>
7)
Code :
8)
9)
Syntax to create cookie :
[Link]="name=value";
Syntax to delete cookie :
10)
Ans:
