Scribd
Upload
15 views

CSS QB_1_to_10

Uploaded by

shivamteli63
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
15 views

CSS QB_1_to_10

Uploaded by

shivamteli63
Copyright
© © All Rights Reserved
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