Scribd
Upload
25 views10 pages

CSS QB_1_to_10

Uploaded by

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

CSS QB_1_to_10

Uploaded by

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

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 (document.myform) {
var s = document.cookie = "username=" + username.value + ";";
var q = document.cookie = "password=" + password.value + ";";
console.log(s);
console.log(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 = document.getElementById("email").value;
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]
{2,}$/;
const resultParagraph = document.getElementById("result");

if (emailPattern.test(email)) {
resultParagraph.innerHTML = "Email is valid!";
} else {
resultParagraph.innerHTML = "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() {
document.getElementById("hoverText").style.color = "red";
document.getElementById("hoverText").style.fontSize = "24px";
}

function resetTextStyle() {
document.getElementById("hoverText").style.color = "black";
document.getElementById("hoverText").style.fontSize = "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="image1.png" width="300" height="200"


onmouseover="changeImage()" onmouseout="resetImage()">

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

function resetImage() {
document.getElementById("rolloverImage").src = "image1.png";
}
</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() {
window.open("", "WelcomeWindow",
"width=300,height=200").document.write("<h2>WELCOME To
SCRIPTING</h2>");
}

function openFunPopup() {
window.open("", "FunWindow",
"width=300,height=200").document.write("<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 :
document.cookie="name=value";
Syntax to delete cookie :

10)
Ans:

You might also like