Complete WD Lab Exp
Uploaded by
trisha27chaudharyComplete WD Lab Exp
Uploaded by
trisha27chaudharyExperiment - 1
Q. Design the static web pages required for an online
bookstore website.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Bookstore - Homepage</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.top-frame {
background-color: #4CAF50;
color: white;
padding: 10px;
text-align: center;
height: 15%;
}
.top-frame img {
height: 50px;
vertical-align: middle;
}
.top-frame a {
color: white;
margin: 0 15px;
text-decoration: none;
font-weight: bold;
}
.top-frame a:hover {
text-decoration: underline;
}
.main-frame {
display: flex;
flex: 1;
}
.left-frame {
background-color: #f1f1f1;
width: 20%;
padding: 10px;
}
.left-frame a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
margin-bottom: 5px;
}
.left-frame a:hover {
background-color: #ddd;
}
.right-frame {
flex: 1;
padding: 20px;
background-color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="top-frame">
<img src="[Link]" alt="Logo"> <!-- Replace with actual logo
path -->
<span>Online Bookstore</span>
<div>
<a href="[Link]">Home</a>
<a href="[Link]">Login</a>
<a href="[Link]">Registration</a>
<a href="[Link]">Catalogue</a>
<a href="[Link]">Cart</a>
</div>
</div>
<div class="main-frame">
<div class="left-frame">
<a href="#" onclick="loadCatalogue('CSE')">CSE</a>
<a href="#" onclick="loadCatalogue('ECE')">ECE</a>
<a href="#" onclick="loadCatalogue('EEE')">EEE</a>
<a href="#" onclick="loadCatalogue('CIVIL')">CIVIL</a>
</div>
<div class="right-frame" id="rightContent">
<h2>Description of the Web Site</h2>
<p>Welcome to our online bookstore! Browse through various
categories of books and enjoy shopping.</p>
</div>
</div>
</div>
<script>
function loadCatalogue(category) {
// For static page, simulate loading content
[Link]('rightContent').innerHTML =
`<h2>${category} Catalogue</h2><p>Books for ${category} will be displayed
here.</p>`;
// In full implementation, this would link to catalogue page
with category filter
}
</script>
</body>
</html>
Experiment - 2
Q. Create a Login Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Bookstore - Login</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.top-frame {
background-color: #4CAF50;
color: white;
padding: 10px;
text-align: center;
height: 15%;
}
.top-frame img {
height: 50px;
vertical-align: middle;
}
.top-frame a {
color: white;
margin: 0 15px;
text-decoration: none;
font-weight: bold;
}
.top-frame a:hover {
text-decoration: underline;
}
.main-frame {
display: flex;
flex: 1;
}
.left-frame {
background-color: #f1f1f1;
width: 20%;
padding: 10px;
}
.left-frame a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
margin-bottom: 5px;
}
.left-frame a:hover {
background-color: #ddd;
}
.right-frame {
flex: 1;
padding: 20px;
background-color: #fff;
}
.login-form {
max-width: 300px;
margin: 0 auto;
}
.login-form h2 {
text-align: center;
}
.login-form label {
display: block;
margin: 10px 0 5px;
}
.login-form input[type="text"],
.login-form input[type="password"] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.login-form input[type="submit"],
.login-form input[type="reset"] {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-right: 10px;
}
.login-form input[type="submit"]:hover,
.login-form input[type="reset"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<div class="top-frame">
<img src="[Link]" alt="Logo"> <!-- Replace with actual logo
path -->
<span>Online Bookstore</span>
<div>
<a href="[Link]">Home</a>
<a href="[Link]">Login</a>
<a href="[Link]">Registration</a>
<a href="[Link]">Catalogue</a>
<a href="[Link]">Cart</a>
</div>
</div>
<div class="main-frame">
<div class="left-frame">
<a href="#" onclick="loadCatalogue('CSE')">CSE</a>
<a href="#" onclick="loadCatalogue('ECE')">ECE</a>
<a href="#" onclick="loadCatalogue('EEE')">EEE</a>
<a href="#" onclick="loadCatalogue('CIVIL')">CIVIL</a>
</div>
<div class="right-frame">
<div class="login-form">
<h2>Login Page</h2>
<form>
<label for="username">User Name:</label>
<input type="text" id="username" name="username"
required>
<label for="password">Password:</label>
<input type="password" id="password"
name="password" required>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</div>
</div>
</div>
</div>
<script>
function loadCatalogue(category) {
[Link]('rightContent').innerHTML =
`<h2>${category} Catalogue</h2><p>Books for ${category} will be displayed
here.</p>`;
}
</script>
</body>
</html>
Experiment - 3
Q. Create a Catalogue Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Bookstore - Catalogue</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.top-frame {
background-color: #4CAF50;
color: white;
padding: 10px;
text-align: center;
height: 15%;
}
.top-frame img {
height: 50px;
vertical-align: middle;
}
.top-frame a {
color: white;
margin: 0 15px;
text-decoration: none;
font-weight: bold;
}
.top-frame a:hover {
text-decoration: underline;
}
.main-frame {
display: flex;
flex: 1;
}
.left-frame {
background-color: #f1f1f1;
width: 20%;
padding: 10px;
}
.left-frame a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
margin-bottom: 5px;
}
.left-frame a:hover {
background-color: #ddd;
}
.right-frame {
flex: 1;
padding: 20px;
background-color: #fff;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
[Link]-cover {
width: 50px;
height: auto;
}
button {
background-color: #4CAF50;
color: white;
padding: 5px 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<div class="top-frame">
<img src="[Link]" alt="Logo"> <!-- Replace with actual logo
path -->
<span>Online Bookstore</span>
<div>
<a href="[Link]">Home</a>
<a href="[Link]">Login</a>
<a href="[Link]">Registration</a>
<a href="[Link]">Catalogue</a>
<a href="[Link]">Cart</a>
</div>
</div>
<div class="main-frame">
<div class="left-frame">
<a href="#" onclick="loadCatalogue('CSE')">CSE</a>
<a href="#" onclick="loadCatalogue('ECE')">ECE</a>
<a href="#" onclick="loadCatalogue('EEE')">EEE</a>
<a href="#" onclick="loadCatalogue('CIVIL')">CIVIL</a>
</div>
<div class="right-frame">
<h2>Catalogue</h2>
<table>
<tr>
<th>Cover Page</th>
<th>Book Title</th>
<th>Author</th>
<th>Publisher</th>
<th>Price</th>
<th>Action</th>
</tr>
<tr>
<td><img src="xml_bible.jpg" alt="XML Bible Cover"
class="book-cover"></td>
<td>XML Bible</td>
<td>Winston</td>
<td>Wiely</td>
<td>$40.5</td>
<td><button onclick="addToCart('XML Bible')">Add
to Cart</button></td>
</tr>
<tr>
<td><img src="ai_book.jpg" alt="AI Cover"
class="book-cover"></td>
<td>AI</td>
<td>S. Russel</td>
<td>Princeton Hall</td>
<td>$63</td>
<td><button onclick="addToCart('AI')">Add to
Cart</button></td>
</tr>
<tr>
<td><img src="java2_book.jpg" alt="Java 2 Cover"
class="book-cover"></td>
<td>Java 2</td>
<td>Watson</td>
<td>BPB Publications</td>
<td>$35.5</td>
<td><button onclick="addToCart('Java 2')">Add to
Cart</button></td>
</tr>
<tr>
<td><img src="html_24hours.jpg" alt="HTML in 24
Hours Cover" class="book-cover"></td>
<td>HTML in 24 Hours</td>
<td>Sam Peter</td>
<td>Sam Publication</td>
<td>$50</td>
<td><button onclick="addToCart('HTML in 24
Hours')">Add to Cart</button></td>
</tr>
</table>
</div>
</div>
</div>
<script>
function loadCatalogue(category) {
[Link]('.right-frame').innerHTML =
`<h2>${category} Catalogue</h2><p>Books for ${category} will be displayed
here.</p>`;
}
function addToCart(bookTitle) {
alert(`${bookTitle} has been added to your cart!`);
// In a full implementation, this would interact with a cart
system
}
</script>
</body>
</html>
Experiment - 4
Q. Create a Cart Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Bookstore - Cart</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.top-frame {
background-color: #4CAF50;
color: white;
padding: 10px;
text-align: center;
height: 15%;
}
.top-frame img {
height: 50px;
vertical-align: middle;
}
.top-frame a {
color: white;
margin: 0 15px;
text-decoration: none;
font-weight: bold;
}
.top-frame a:hover {
text-decoration: underline;
}
.main-frame {
display: flex;
flex: 1;
}
.left-frame {
background-color: #f1f1f1;
width: 20%;
padding: 10px;
}
.left-frame a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
margin-bottom: 5px;
}
.left-frame a:hover {
background-color: #ddd;
}
.right-frame {
flex: 1;
padding: 20px;
background-color: #fff;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #4CAF50;
color: white;
}
button {
background-color: #ff4444;
color: white;
padding: 5px 10px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #cc0000;
}
.total {
margin-top: 20px;
font-weight: bold;
text-align: right;
}
</style>
</head>
<body>
<div class="container">
<div class="top-frame">
<img src="[Link]" alt="Logo"> <!-- Replace with actual logo
path -->
<span>Online Bookstore</span>
<div>
<a href="[Link]">Home</a>
<a href="[Link]">Login</a>
<a href="[Link]">Registration</a>
<a href="[Link]">Catalogue</a>
<a href="[Link]">Cart</a>
</div>
</div>
<div class="main-frame">
<div class="left-frame">
<a href="#" onclick="loadCatalogue('CSE')">CSE</a>
<a href="#" onclick="loadCatalogue('ECE')">ECE</a>
<a href="#" onclick="loadCatalogue('EEE')">EEE</a>
<a href="#" onclick="loadCatalogue('CIVIL')">CIVIL</a>
</div>
<div class="right-frame">
<h2>Shopping Cart</h2>
<table>
<tr>
<th>Book Title</th>
<th>Author</th>
<th>Publisher</th>
<th>Price</th>
<th>Action</th>
</tr>
<tr>
<td>XML Bible</td>
<td>Winston</td>
<td>Wiely</td>
<td>$40.5</td>
<td><button onclick="removeFromCart('XML
Bible')">Remove</button></td>
</tr>
<tr>
<td>Java 2</td>
<td>Watson</td>
<td>BPB Publications</td>
<td>$35.5</td>
<td><button onclick="removeFromCart('Java
2')">Remove</button></td>
</tr>
</table>
<div class="total">
Total: $76.0
</div>
</div>
</div>
</div>
<script>
function loadCatalogue(category) {
[Link]('.right-frame').innerHTML =
`<h2>${category} Catalogue</h2><p>Books for ${category} will be displayed
here.</p>`;
}
function removeFromCart(bookTitle) {
alert(`${bookTitle} has been removed from your cart!`);
// In a full implementation, this would update the cart
dynamically
}
</script>
</body>
</html>
Experiment - 5
Q. Create a Registration Page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Bookstore - Registration</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.top-frame {
background-color: #4CAF50;
color: white;
padding: 10px;
text-align: center;
height: 15%;
}
.top-frame img {
height: 50px;
vertical-align: middle;
}
.top-frame a {
color: white;
margin: 0 15px;
text-decoration: none;
font-weight: bold;
}
.top-frame a:hover {
text-decoration: underline;
}
.main-frame {
display: flex;
flex: 1;
}
.left-frame {
background-color: #f1f1f1;
width: 20%;
padding: 10px;
}
.left-frame a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
margin-bottom: 5px;
}
.left-frame a:hover {
background-color: #ddd;
}
.right-frame {
flex: 1;
padding: 20px;
background-color: #fff;
}
.registration-form {
max-width: 400px;
margin: 0 auto;
}
.registration-form h2 {
text-align: center;
}
.registration-form label {
display: block;
margin: 10px 0 5px;
}
.registration-form input[type="text"],
.registration-form input[type="password"],
.registration-form textarea {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.registration-form select {
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.registration-form input[type="radio"],
.registration-form input[type="checkbox"] {
margin-right: 5px;
}
.registration-form input[type="submit"],
.registration-form input[type="reset"] {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-right: 10px;
}
.registration-form input[type="submit"]:hover,
.registration-form input[type="reset"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<div class="top-frame">
<img src="[Link]" alt="Logo"> <!-- Replace with actual logo
path -->
<span>Online Bookstore</span>
<div>
<a href="[Link]">Home</a>
<a href="[Link]">Login</a>
<a href="[Link]">Registration</a>
<a href="[Link]">Catalogue</a>
<a href="[Link]">Cart</a>
</div>
</div>
<div class="main-frame">
<div class="left-frame">
<a href="#" onclick="loadCatalogue('CSE')">CSE</a>
<a href="#" onclick="loadCatalogue('ECE')">ECE</a>
<a href="#" onclick="loadCatalogue('EEE')">EEE</a>
<a href="#" onclick="loadCatalogue('CIVIL')">CIVIL</a>
</div>
<div class="right-frame">
<div class="registration-form">
<h2>Registration</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="password">Password:</label>
<input type="password" id="password"
name="password" required>
<label for="email">Email ID:</label>
<input type="text" id="email" name="email"
required>
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone"
required>
<label>Sex:</label>
<input type="radio" id="male" name="sex"
value="male" required>
<label for="male" style="display:
inline;">Male</label>
<input type="radio" id="female" name="sex"
value="female">
<label for="female" style="display:
inline;">Female</label>
<label>Date of Birth:</label>
<select id="day" name="day" required>
<option value="">Day</option>
<option value="1">1</option>
<!-- Add options up to 31 -->
<option value="31">31</option>
</select>
<select id="month" name="month" required>
<option value="">Month</option>
<option value="January">January</option>
<!-- Add other months -->
<option value="December">December</option>
</select>
<select id="year" name="year" required>
<option value="">Year</option>
<option value="2005">2005</option>
<!-- Add years back to 1900 or as needed -->
<option value="1900">1900</option>
</select>
<label>Languages Known:</label>
<input type="checkbox" id="english"
name="languages" value="English">
<label for="english" style="display:
inline;">English</label>
<input type="checkbox" id="telugu"
name="languages" value="Telugu">
<label for="telugu" style="display:
inline;">Telugu</label>
<input type="checkbox" id="hindi" name="languages"
value="Hindi">
<label for="hindi" style="display:
inline;">Hindi</label>
<input type="checkbox" id="tamil" name="languages"
value="Tamil">
<label for="tamil" style="display:
inline;">Tamil</label>
<label for="address">Address:</label>
<textarea id="address" name="address" rows="4"
required></textarea>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</div>
</div>
</div>
</div>
<script>
function loadCatalogue(category) {
[Link]('.right-frame').innerHTML =
`<h2>${category} Catalogue</h2><p>Books for ${category} will be displayed
here.</p>`;
}
</script>
</body>
</html>
Experiment - 6
Q. Js Validation for Name and Password
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Online Bookstore - Registration Validation</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
.top-frame {
background-color: #4CAF50;
color: white;
padding: 10px;
text-align: center;
height: 15%;
}
.top-frame img {
height: 50px;
vertical-align: middle;
}
.top-frame a {
color: white;
margin: 0 15px;
text-decoration: none;
font-weight: bold;
}
.top-frame a:hover {
text-decoration: underline;
}
.main-frame {
display: flex;
flex: 1;
}
.left-frame {
background-color: #f1f1f1;
width: 20%;
padding: 10px;
}
.left-frame a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
margin-bottom: 5px;
}
.left-frame a:hover {
background-color: #ddd;
}
.right-frame {
flex: 1;
padding: 20px;
background-color: #fff;
}
.registration-form {
max-width: 400px;
margin: 0 auto;
}
.registration-form h2 {
text-align: center;
}
.registration-form label {
display: block;
margin: 10px 0 5px;
}
.registration-form input[type="text"],
.registration-form input[type="password"] {
width: 100%;
padding: 8px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.registration-form input[type="submit"],
.registration-form input[type="reset"] {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-right: 10px;
}
.registration-form input[type="submit"]:hover,
.registration-form input[type="reset"]:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<div class="top-frame">
<img src="[Link]" alt="Logo"> <!-- Replace with actual logo
path -->
<span>Online Bookstore</span>
<div>
<a href="[Link]">Home</a>
<a href="[Link]">Login</a>
<a href="[Link]">Registration</a>
<a href="[Link]">Catalogue</a>
<a href="[Link]">Cart</a>
</div>
</div>
<div class="main-frame">
<div class="left-frame">
<a href="#" onclick="loadCatalogue('CSE')">CSE</a>
<a href="#" onclick="loadCatalogue('ECE')">ECE</a>
<a href="#" onclick="loadCatalogue('EEE')">EEE</a>
<a href="#" onclick="loadCatalogue('CIVIL')">CIVIL</a>
</div>
<div class="right-frame">
<div class="registration-form">
<h2>Registration</h2>
<form onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="password">Password:</label>
<input type="password" id="password"
name="password" required>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</div>
</div>
</div>
</div>
<script>
function loadCatalogue(category) {
[Link]('.right-frame').innerHTML =
`<h2>${category} Catalogue</h2><p>Books for ${category} will be displayed
here.</p>`;
}
function validateForm() {
const name = [Link]('name').value;
const password = [Link]('password').value;
// Validate Name: Only alphabets and at least 6 characters
const namePattern = /^[A-Za-z]+$/;
if () {
alert('Name should contain only alphabets.');
return false;
}
if ([Link] < 6) {
alert('Name should be at least 6 characters long.');
return false;
}
// Validate Password: At least 6 characters
if ([Link] < 6) {
alert('Password should be at least 6 characters long.');
return false;
}
return true; // Form is valid
}
</script>
</body>
</html>
Experiment 7: JavaScript Validation for Email and Phone Number
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form - Centered & Colorful</title>
<style>
/* Full page gradient background */
body {
margin: 0;
padding: 0;
height: 100vh;
font-family: Arial, sans-serif;
background: linear-gradient(135deg, #667eea, #764ba2); /* Beautiful purple-blue
gradient */
display: flex;
justify-content: center;
align-items: center;
color: #333;
}
/* White centered form card with shadow */
.form-container {
background-color: rgba(255, 255, 255, 0.95);
padding: 40px 50px;
border-radius: 15px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
width: 400px;
text-align: center;
backdrop-filter: blur(10px);
}
h2 {
font-family: 'Georgia', serif;
color: #4a148c;
margin-bottom: 20px;
}
label {
display: block;
text-align: left;
margin: 15px 0 5px;
font-weight: bold;
color: #6a1b9a;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 12px;
margin-bottom: 15px;
border: 2px solid #9575cd;
border-radius: 8px;
font-family: 'Courier New', monospace;
font-size: 16px;
box-sizing: border-box;
transition: all 0.3s;
background-color: #f8f0ff;
}
input:focus {
border-color: #7e57c2;
outline: none;
box-shadow: 0 0 8px rgba(126, 87, 194, 0.5);
}
button {
background-color: #6a1b9a;
color: white;
padding: 12px 30px;
font-size: 18px;
border: none;
border-radius: 8px;
cursor: pointer;
margin-top: 20px;
transition: 0.3s;
}
button:hover {
background-color: #4a148c;
transform: scale(1.05);
}
/* Link styles - Experiment 9 */
a:link { color: #311b92; text-decoration: none; }
a:visited { color: #6a1b9a; }
a:active { color: #ff4081; }
a:hover { color: #7c4dff; text-decoration: underline; font-weight: bold; }
/* Background image with no repeat (Experiment 9) */
.form-container {
background-image:
url('[Link]
&fit=crop&w=500&q=80');
background-repeat: no-repeat;
background-position: bottom right;
background-size: 100px; /* Small decorative image */
}
</style>
</head>
<body>
<div class="form-container">
<h2>Register Account</h2>
<form id="registrationForm">
<label for="name">Full Name</label>
<input type="text" id="name" placeholder="Enter name (min 6 letters)">
<label for="password">Password</label>
<input type="password" id="password" placeholder="Min 6 characters">
<label for="email">Email Address</label>
<input type="text" id="email" placeholder="example@[Link]">
<label for="phone">Phone Number</label>
<input type="text" id="phone" placeholder="10 digits only">
<button type="button" onclick="validateForm()">Submit</button>
</form>
<p style="margin-top:20px;">
<a href="#">Forgot Password?</a> | <a href="#">Login Here</a>
</p>
</div>
<script>
function validateForm() {
🎉
if (validateName() && validatePassword() && validateEmail() && validatePhone()) {
alert("Registration Successful! ");
return true;
}
return false;
}
// Experiment 6: Name & Password
function validateName() {
const name = [Link]("name").[Link]();
const nameRegex = /^[a-zA-Z]{6,}$/;
if () {
alert("Name must contain only alphabets and be at least 6 characters long.");
return false;
}
return true;
}
function validatePassword() {
const password = [Link]("password").value;
if ([Link] < 6) {
alert("Password must be at least 6 characters long.");
return false;
}
return true;
}
// Experiment 7: Email & Phone
function validateEmail() {
const email = [Link]("email").value;
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if () {
alert("Please enter a valid email (e.g., user@[Link])");
return false;
}
return true;
}
function validatePhone() {
const phone = [Link]("phone").value;
const phoneRegex = /^\d{10}$/;
if () {
alert("Phone number must be exactly 10 digits.");
return false;
}
return true;
}
</script>
</body>
</html>
Experiment 8: Design a complete web page using CSS that demonstrates the following
two requirements:
1. Use different fonts and styles by defining them in CSS using selectors (like tag selectors,
class selectors, etc.), then apply those styles in the HTML body.
2. Set a background image for the entire page and also for a single specific element on the
page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Experiment 8 - CSS Fonts, Styles & Background Images</title>
<style>
/* 1. Different fonts and styles using various selectors */
/* Body selector - default font for whole page */
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f2f5;
margin: 0;
padding: 40px;
line-height: 1.6;
color: #333;
/* Heading styles using tag selector */
h1 {
font-family: 'Georgia', serif;
color: #2c3e50;
text-align: center;
font-size: 2.8rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
h2 {
font-family: 'Courier New', monospace;
color: #8e44ad;
border-bottom: 3px solid #9b59b6;
padding-bottom: 8px;
/* Paragraph style using class selector */
.fancy-text {
font-family: 'Lucida Sans', 'Lucida Sans Regular', Geneva, Verdana, sans-serif;
font-style: italic;
color: #2c3e50;
background-color: #ecf0f1;
padding: 15px;
border-left: 5px solid #3498db;
}
/* Special box using ID selector */
#highlight-box {
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', sans-serif;
font-weight: bold;
font-size: 1.2rem;
color: white;
background-color: #e74c3c;
padding: 20px;
border-radius: 10px;
text-align: center;
margin: 30px 0;
/* 2. Background images */
/* Background image for the entire page */
body {
background-image:
url('[Link]
mat&fit=crop&w=1350&q=80');
background-size: cover;
background-attachment: fixed;
background-position: center center;
}
/* Overlay to make text readable on background image */
.overlay {
background-color: rgba(255, 255, 255, 0.85);
max-width: 900px;
margin: 0 auto;
padding: 40px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
/* Background image for a single specific element */
.card {
background-image:
url('[Link]
&fit=crop&w=500&q=80');
background-size: cover;
background-position: center;
color: white;
padding: 40px;
border-radius: 12px;
margin: 30px 0;
text-align: center;
min-height: 200px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-family: 'Arial Black', sans-serif;
text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
</style>
</head>
<body>
<div class="overlay">
<h1>CSS Experiment 8 - Fonts & Background Images</h1>
<p class="fancy-text">
This paragraph uses a class selector (.fancy-text) with Lucida Sans font, italic style,
colored border, and light background.
</p>
<h2>Different Font Styles Applied</h2>
<p>
• Body text: Segoe UI (modern sans-serif)<br>
• Main heading (h1): Georgia (elegant serif)<br>
• Sub-heading (h2): Courier New (monospace)<br>
• This paragraph: Default inherited font
</p>
<div id="highlight-box">
This box uses an ID selector (#highlight-box) with Trebuchet MS font, bold weight,
red background and white text!
</div>
<!-- Single element with its own background image -->
<div class="card">
This DIV has its OWN background image<br>
(Different from the page background)
</div>
<p style="text-align:center; font-size:1.1rem; color:#2c3e50;">
Page background: Beautiful sky image (fixed, cover)<br>
Card background: Purple abstract pattern (single element)
</p>
</div>
</body>
</html>
You might also like
- Web Page Layout for Engineering CollegeNo ratings yetWeb Page Layout for Engineering College26 pages
- Emergency Response Plan for SPARK ProjectNo ratings yetEmergency Response Plan for SPARK Project111 pages
- Data Visualization Techniques in TableauNo ratings yetData Visualization Techniques in Tableau89 pages
- Contemporary Linguistics 6th Edition OGrady Ebook & Testbank100% (2)Contemporary Linguistics 6th Edition OGrady Ebook & Testbank246 pages
- Grade 9 Arabic Curriculum Map 2024-2025No ratings yetGrade 9 Arabic Curriculum Map 2024-202510 pages
- EUBC Women Elite, Youth & Junior Champs 2023No ratings yetEUBC Women Elite, Youth & Junior Champs 20239 pages
- Residual Stress Impact on Fatigue Lifetimes100% (1)Residual Stress Impact on Fatigue Lifetimes9 pages
- Boots ROI Healthcare Assistant Programme Module 2 WorkbookNo ratings yetBoots ROI Healthcare Assistant Programme Module 2 Workbook69 pages
- Comprehensive Guide to Soft Contact LensesNo ratings yetComprehensive Guide to Soft Contact Lenses55 pages
- Measurable Objectives in Early ChildhoodNo ratings yetMeasurable Objectives in Early Childhood26 pages
- Dark Albion (DAA1) The Ghost of Jack Cade On London Bridge67% (3)Dark Albion (DAA1) The Ghost of Jack Cade On London Bridge26 pages
- NIFTY PSU Bank Index Overview and WeightageNo ratings yetNIFTY PSU Bank Index Overview and Weightage2 pages
- Social Support's Impact on Elderly Well-BeingNo ratings yetSocial Support's Impact on Elderly Well-Being8 pages