PROGRAM 6
Write a java script to validate the following fields of the above registration page.
1.Name (name should contains alphabet and the length should not be less than 6 characters ).
2. Password (password should not be less than 6 character length).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Page</title>
<script>
function validateForm() {
// Get values from input fields
var name = document.getElementById('name').value;
var password = document.getElementById('password').value;
// Validate Name
if (name.length < 6 || !/^[a-zA-Z]+$/.test(name)) {
alert('Name should contain only alphabets and have a minimum length of 6
characters.');
return false;
}
// Validate Password
if (password.length < 6) {
alert('Password should have a minimum length of 6 characters.');
return false;
}
// If all validations pass, the form is valid
return true;
}
</script>
</head>
<body>
<form onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br>
<input type="submit" value="Register">
</form>
</body>
</html>
PROGRAM 7
3. E mail (should not contain any invalid must follow the standard patter name @domain.com).
4.Phone Number (phone number should contain 10 digits only).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Page</title>
<script>
function validateForm() {
// Get values from input fields
var email = document.getElementById('email').value;
var phone = document.getElementById('phone').value;
// Validate Email
var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
alert('Invalid email format. Please enter a valid email address.');
return false;
}
// Validate Phone Number
var phonePattern = /^\d{10}$/;
if (!phonePattern.test(phone)) {
alert('Phone number should contain exactly 10 digits.');
return false;
}
// If all validations pass, the form is valid
alert('Registration successful!');
return true;
}
</script>
</head>
<body>
<form onsubmit="return validateForm()">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br>
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone" required>
<br>
<input type="submit" value="Register">
</form>
</body>
</html>
PROGRAM 8
Design a web page using CSS which includes the following:
1. Use different font, style:
In the style definition you define how each selector should work (font, color etc.) then, in
the body of your pages, you refer to these selectors to activate the styles.
2. Set a background image for both the pages and single elements 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>Styled Web Page</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-image: url('background.jpg');
background-size: cover;
color: #333;
margin: 0;
padding: 0;
}
header {
background-color: #f1f1f1;
text-align: center;
padding: 10px;
}
h1 {
font-family: 'Georgia', serif;
color: #0066cc;
}
nav {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
padding: 10px;
margin: 0 10px;
}
section {
padding: 20px;
background-image: url('section-background.jpg');
background-size: cover;
color: #fff;
text-align: justify;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>My Styled Web Page</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
<section>
<h2>Welcome to my website</h2>
<p>This is a sample text for the content of the web page. Feel free to modify it according
to your needs.</p>
</section>
<footer>
© 2024 My Website. All rights reserved.
</footer>
</body>
</html>
PROGRAM 9
Write a CSS code
1. control the repetition of the image with the background repeat property.
2. Define styles for link as
A: link
A: visited
A: active
A: hover
PROGRAM 10
Consider a small topic of your choice on which you cam develop static web pages and try to
implement all topics of HTML CSS and JS within the Topic
Your Own Portfolio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Name - Portfolio</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f8f8f8;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#portfolio-container {
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 600px;
border-radius: 5px;
}
h1 {
text-align: center;
color: #333;
}
.about-me {
margin-bottom: 20px;
}
.skills {
margin-bottom: 20px;
}
.projects {
margin-bottom: 20px;
}
.contact {
text-align: center;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
margin-bottom: 10px;
}
a{
color: #0066cc;
text-decoration: none;
}
</style>
</head>
<body>
<div id="portfolio-container">
<h1>Swati</h1>
<div class="about-me">
<h2>About Me</h2>
<p>I am pursuing B.Tech from ITS engineering College</p>
</div>
<div class="skills">
<h2>Skills</h2>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>JavaScript</li>
<!-- Add more skills as needed -->
</ul>
</div>
<div class="projects">
<h2>Projects</h2>
<ul>
<li><a href="#">Project 1</a> Developing a Virtual Mouse to reduce the hardware
components and Ease our Work</li>
<li><a href="#">Project 2</a>To make a mini music player.</li>
<!-- Add more projects as needed -->
</ul>
</div>
<div class="contact">
<h2>Contact</h2>
<p>Email: swatijha9354@gmail.com</p>
<p>LinkedIn: <a href="#" target="_blank">Swati Jha</a></p>
<p>GitHub: <a href="#" target="_blank">Swati Jha</a></p>
</div>
</div>
</body>
</html>
