1)Create
student registration form with name,address,contact,gender,course,languages
known,email,password(encrypted) with name ,email and password required.
ans)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Registration Form</title>
</head>
<body>
<h2>Student Registration Form</h2>
<form action="registration_process.php" method="post">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="address">Address:</label><br>
<input type="text" id="address" name="address"><br><br>
<label for="contact">Contact:</label><br>
<input type="text" id="contact" name="contact"><br><br>
<label for="gender">Gender:</label><br>
<select id="gender" name="gender">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select><br><br>
<label for="course">Course:</label><br>
<input type="text" id="course" name="course"><br><br>
<label for="languages">Languages Known:</label><br>
<input type="text" id="languages" name="languages"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
2)Create stripped
time table of your class with suitable headings and footer.
ans)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Class Timetable</title>
<style>
table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
caption {
font-size: 1.2em;
margin-bottom: 10px;
}
footer {
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<h2>Class Timetable</h2>
<table>
<caption>Spring Semester 2024</caption>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr>
<td>9:00 AM - 10:00 AM</td>
<td>Mathematics</td>
<td>Physics</td>
<td>Chemistry</td>
<td>English</td>
<td>Computer Science</td>
</tr>
<tr>
<td>10:00 AM - 11:00 AM</td>
<td>Physics</td>
<td>Chemistry</td>
<td>English</td>
<td>Computer Science</td>
<td>Mathematics</td>
</tr>
<tr>
<td>11:00 AM - 12:00 PM</td>
<td>Chemistry</td>
<td>English</td>
<td>Computer Science</td>
<td>Mathematics</td>
<td>Physics</td>
</tr>
<!-- Add more rows as needed -->
</table>
<footer>
<p>Class Timetable generated by YourSchoolName</p>
</footer>
</body>
</html>
3)Divide
the web page into 3 different frameset and render each HTML document in
separate frame.
ans)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Frameset Example</title>
</head>
<frameset cols="33%,33%,*">
<frame src="frame1.html" name="frame1">
<frame src="frame2.html" name="frame2">
<frame src="frame3.html" name="frame3">
<noframes>
<body>
<p>This page requires a browser that supports frames.</p>
</body>
</noframes>
</frameset>
</html>
4)Create
audio and video gallery.
ans)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Audio and Video Gallery</title>
<style>
.gallery {
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style: none;
padding: 0;
}
.gallery li {
margin: 10px;
}
.gallery img {
width: 200px;
height: 150px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Audio Gallery</h2>
<ul class="gallery">
<li>
<audio controls>
<source src="audio1.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</li>
<li>
<audio controls>
<source src="audio2.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
</li>
<!-- Add more audio files as needed -->
</ul>
<h2>Video Gallery</h2>
<ul class="gallery">
<li>
<video width="320" height="240" controls>
<source src="video1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</li>
<li>
<video width="320" height="240" controls>
<source src="video2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</li>
<!-- Add more video files as needed -->
</ul>
</body>
</html>
5)Create
image gallery render at least 8 images.
ans)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Gallery</title>
<style>
.gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-gap: 10px;
list-style: none;
padding: 0;
}
.gallery img {
width: 100%;
height: auto;
border-radius: 5px;
cursor: pointer;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.close {
color: #fff;
position: absolute;
top: 10px;
right: 25px;
font-size: 30px;
font-weight: bold;
cursor: pointer;
}
.close:hover {
color: #ccc;
}
.modal-content img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>Image Gallery</h2>
<ul class="gallery">
<li><img src="image1.jpg" alt="Image 1"></li>
<li><img src="image2.jpg" alt="Image 2"></li>
<li><img src="image3.jpg" alt="Image 3"></li>
<li><img src="image4.jpg" alt="Image 4"></li>
<li><img src="image5.jpg" alt="Image 5"></li>
<li><img src="image6.jpg" alt="Image 6"></li>
<li><img src="image7.jpg" alt="Image 7"></li>
<li><img src="image8.jpg" alt="Image 8"></li>
</ul>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal
var images = document.querySelectorAll('.gallery img');
var modalImg = document.getElementById("img01");
images.forEach(function(img){
img.addEventListener('click', function(){
modal.style.display = "block";
modalImg.src = this.src;
});
});
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
};
</script>
</body>
</html>
6)Design
web page showing your introduction with photo.
ans)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Introduction</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
}
p {
text-align: justify;
line-height: 1.6;
}
.profile-img {
display: block;
margin: 20px auto;
border-radius: 50%;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="container">
<h1>Hi, I'm [Your Name]</h1>
<img class="profile-img" src="your-photo.jpg" alt="Your Photo">
<p>
I'm a [Your Profession/Interest]. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam non mauris sit amet libero commodo efficitur. Donec nec sem et quam rhoncus sodales.
Mauris blandit vestibulum lorem, at tincidunt felis pulvinar ac. Cras laoreet ligula sit amet
neque vestibulum, id pharetra dui lobortis. Integer sed ullamcorper elit, eget suscipit velit.
Sed vitae metus vel metus ullamcorper efficitur. Nam vel vestibulum ipsum. Cras quis vehicula justo.
Aenean nec consectetur magna. In vestibulum sit amet quam eget egestas. Fusce in diam et felis feugiat
scelerisque non at erat. Nulla facilisi. Mauris auctor, ligula nec malesuada eleifend, dui nunc
malesuada sem, ac venenatis lorem urna vel lorem. Vestibulum ante ipsum primis in faucibus orci
luctus et ultrices posuere cubilia Curae; Nunc a enim quis felis eleifend posuere sit amet nec odio.
</p>
</div>
</body>
</html>
7)Write
different 5 paragraphs and apply different color with transparency.
ans)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Transparent Color Paragraphs</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
}
.paragraph {
background-color: rgba(0, 128, 0, 0.5); /* Green with 50% transparency */
padding: 10px;
margin-bottom: 20px;
}
.paragraph:nth-child(2) {
background-color: rgba(255, 0, 0, 0.4); /* Red with 40% transparency */
}
.paragraph:nth-child(3) {
background-color: rgba(0, 0, 255, 0.3); /* Blue with 30% transparency */
}
.paragraph:nth-child(4) {
background-color: rgba(255, 255, 0, 0.2); /* Yellow with 20% transparency */
}
.paragraph:nth-child(5) {
background-color: rgba(128, 0, 128, 0.1); /* Purple with 10% transparency */
}
</style>
</head>
<body>
<div class="container">
<div class="paragraph">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non mauris sit amet libero commodo efficitur.</p>
</div>
<div class="paragraph">
<p>Sed vitae metus vel metus ullamcorper efficitur. Nam vel vestibulum ipsum.</p>
</div>
<div class="paragraph">
<p>Fusce in diam et felis feugiat scelerisque non at erat. Nulla facilisi. Mauris auctor, ligula nec malesuada eleifend.</p>
</div>
<div class="paragraph">
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc a enim quis felis eleifend posuere sit amet nec odio.</p>
</div>
<div class="paragraph">
<p>Integer sed ullamcorper elit, eget suscipit velit. Cras quis vehicula justo. Aenean nec consectetur magna.</p>
</div>
</div>
</body>
</html>
8)Design
web page which have position values sticky,fixed ,absolute and relative.
ans)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position Values Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
.container {
position: relative;
width: 100%;
height: 800px;
background-color: #f4f4f4;
padding: 20px;
}
.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 20px;
background-color: #4CAF50;
color: white;
padding: 10px;
text-align: center;
}
.fixed {
position: fixed;
top: 20px;
right: 20px;
background-color: #FFC107;
color: white;
padding: 10px;
text-align: center;
}
.absolute {
position: absolute;
top: 100px;
left: 20px;
background-color: #2196F3;
color: white;
padding: 10px;
}
.relative {
position: relative;
top: 50px;
left: 50px;
background-color: #E91E63;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="sticky">Sticky Element</div>
<div class="fixed">Fixed Element</div>
<div class="absolute">Absolute Element</div>
<div class="relative">Relative Element</div>
</div>
<p>This is some content below the positioned elements.</p>
</body>
</html>
9)Define
and call a function factorial using PHP.
ans)
<?php
// Function to calculate factorial
function factorial($n) {
if ($n == 0 || $n == 1) {
return 1;
} else {
return $n * factorial($n - 1);
}
}
// Call the factorial function
$number = 5; // Change the number here to calculate factorial for a different number
$result = factorial($number);
echo "Factorial of $number is: $result";
?>
10)Write
a program to implement any 5 string manipulation functions
ans)
<?php
// String manipulation functions
// 1. strlen: Returns the length of a string
$string1 = "Hello World";
$length = strlen($string1);
echo "Length of '$string1' is $length<br>";
// 2. strtolower: Converts a string to lowercase
$string2 = "HELLO WORLD";
$lowercase = strtolower($string2);
echo "Lowercase of '$string2' is '$lowercase'<br>";
// 3. strtoupper: Converts a string to uppercase
$string3 = "hello world";
$uppercase = strtoupper($string3);
echo "Uppercase of '$string3' is '$uppercase'<br>";
// 4. substr: Returns a part of a string
$string4 = "The quick brown fox jumps over the lazy dog";
$substring = substr($string4, 10, 5); // Starts from index 10, takes 5 characters
echo "Substring of '$string4' is '$substring'<br>";
// 5. str_replace: Replaces all occurrences of a search string with a replacement string in a string
$string5 = "The quick brown fox jumps over the lazy dog";
$newString = str_replace("fox", "cat", $string5);
echo "After replacing 'fox' with 'cat': '$newString'<br>";
?>
11)Write a
program to implement string compare and search operations.
ans)
<?php
// String compare and search operations
// String comparison
$string1 = "Hello";
$string2 = "hello";
if (strcmp($string1, $string2) === 0) {
echo "'$string1' and '$string2' are equal<br>";
} else {
echo "'$string1' and '$string2' are not equal<br>";
}
// String search
$string = "The quick brown fox jumps over the lazy dog";
$substring = "fox";
if (strpos($string, $substring) !== false) {
echo "'$substring' found in '$string' at position " . strpos($string, $substring) . "<br>";
} else {
echo "'$substring' not found in '$string'<br>";
}
?>
12)Write a
program to check whether a number is prime or not in php.
ans)
<?php
// Function to check if a number is prime
function isPrime($number) {
// If the number is less than 2, it's not prime
if ($number < 2) {
return false;
}
// Iterate from 2 to the square root of the number
for ($i = 2; $i <= sqrt($number); $i++) {
// If the number is divisible by any integer from 2 to its square root, it's not prime
if ($number % $i === 0) {
return false;
}
}
// If the number is not divisible by any integer from 2 to its square root, it's prime
return true;
}
// Test cases
$testNumbers = [2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31]; // Prime numbers
foreach ($testNumbers as $number) {
if (isPrime($number)) {
echo "$number is prime.<br>";
} else {
echo "$number is not prime.<br>";
}
}
$nonPrimeNumbers = [1, 4, 6, 8, 9, 10, 12, 14, 15, 16, 18, 20]; // Non-prime numbers
foreach ($nonPrimeNumbers as $number) {
if (isPrime($number)) {
echo "$number is prime.<br>";
} else {
echo "$number is not prime.<br>";
}
}
?>
13)Write a
program to display Fibonacci series of N terms.
ans)
<?php
// Function to generate Fibonacci series of N terms
function fibonacci($n) {
$fibonacciSeries = [];
// First two terms of Fibonacci series
$fibonacciSeries[0] = 0;
$fibonacciSeries[1] = 1;
// Generate subsequent terms of Fibonacci series
for ($i = 2; $i < $n; $i++) {
$fibonacciSeries[$i] = $fibonacciSeries[$i - 1] + $fibonacciSeries[$i - 2];
}
return $fibonacciSeries;
}
// Number of terms in the Fibonacci series
$terms = 10; // Change this to generate Fibonacci series of different lengths
// Generate and display Fibonacci series of N terms
$fibSeries = fibonacci($terms);
echo "Fibonacci series of $terms terms:<br>";
foreach ($fibSeries as $term) {
echo "$term ";
}
?>
14)Write a
program to swap the numbers using call by value.
ans)
<?php
// Function to swap two numbers using call by value
function swap(&$a, &$b) {
$temp = $a;
$a = $b;
$b = $temp;
}
// Test variables
$x = 5;
$y = 10;
// Display original values
echo "Before swapping: x = $x, y = $y<br>";
// Call the swap function
swap($x, $y);
// Display swapped values
echo "After swapping: x = $x, y = $y";
?>
15)Write a
program to swap the numbers using call by references
ans)
<?php
// Function to swap two numbers using call by value
function swap(&$a, &$b) {
$temp = $a;
$a = $b;
$b = $temp;
}
// Test variables
$x = 5;
$y = 10;
// Display original values
echo "Before swapping: x = $x, y = $y<br>";
// Call the swap function
swap($x, $y);
// Display swapped values
echo "After swapping: x = $x, y = $y";
?>
17)Write a
program to create login page take username and password and save data in
database.
ans)
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<style>
form {
margin: 0 auto;
width: 300px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
input[type="submit"] {
width: 100%;
padding: 10px;
border-radius: 5px;
border: none;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<?php
// Database connection
$servername = "localhost";
$username = "root";
$password = "";
$database = "test";
$conn = mysqli_connect($servername, $username, $password, $database);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
// Check if form is submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST["username"];
$password = $_POST["password"];
// Insert data into database
$sql = "INSERT INTO users (username, password) VALUES ('$username', '$password')";
if (mysqli_query($conn, $sql)) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
}
?>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" required><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" required><br>
<input type="submit" value="Login">
</form>
</body>
</html>
18) Write a
program to create registration of student and save data in database.
ans)
<!DOCTYPE html>
<html>
<head>
<title>Student Registration</title>
<style>
form {
margin: 0 auto;
width: 300px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type="text"], input[type="email"], input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
input[type="submit"] {
width: 100%;
padding: 10px;
border-radius: 5px;
border: none;
background-color: #007bff;
color: #fff;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<?php
// Database connection
$servername = "localhost";
$username = "root";
$password = "";
$database = "test";
$conn = mysqli_connect($servername, $username, $password, $database);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
// Check if form is submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$name = $_POST["name"];
$address = $_POST["address"];
$contact = $_POST["contact"];
$gender = $_POST["gender"];
$course = $_POST["course"];
$languages = isset($_POST["languages"]) ? implode(",", $_POST["languages"]) : "";
$email = $_POST["email"];
$password = $_POST["password"];
// Insert data into database
$sql = "INSERT INTO students (name, address, contact, gender, course, languages, email, password)
VALUES ('$name', '$address', '$contact', '$gender', '$course', '$languages', '$email', '$password')";
if (mysqli_query($conn, $sql)) {
echo "Registration successful";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
}
?>
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br>
<label for="address">Address:</label><br>
<input type="text" id="address" name="address" required><br>
<label for="contact">Contact:</label><br>
<input type="text" id="contact" name="contact" required><br>
<label for="gender">Gender:</label><br>
<select id="gender" name="gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="other">Other</option>
</select><br>
<label for="course">Course:</label><br>
<input type="text" id="course" name="course" required><br>
<label for="languages">Languages Known:</label><br>
<input type="checkbox" id="lang1" name="languages[]" value="English">
<label for="lang1">English</label>
<input type="checkbox" id="lang2" name="languages[]" value="French">
<label for="lang2">French</label>
<input type="checkbox" id="lang3" name="languages[]" value="Spanish">
<label for="lang3">Spanish</label><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" required><br>
<input type="submit" value="Register">
</form>
</body>
</html>
19)Design
web page contains username,password,Confirmpassword,Contact fields and apply
all form validation.
ans)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.container {
max-width: 400px;
margin: 50px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h2 {
text-align: center;
margin-bottom: 20px;
}
input[type="text"],
input[type="password"],
input[type="submit"] {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border-radius: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
}
input[type="submit"] {
background-color: #007bff;
color: #fff;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #0056b3;
}
.error-message {
color: red;
}
</style>
</head>
<body>
<div class="container">
<h2>Registration Form</h2>
<form action="#" method="post" id="registration-form" onsubmit="return validateForm()">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<div id="username-error" class="error-message"></div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<div id="password-error" class="error-message"></div>
<label for="confirm-password">Confirm Password:</label>
<input type="password" id="confirm-password" name="confirm-password" required>
<div id="confirm-password-error" class="error-message"></div>
<label for="contact">Contact:</label>
<input type="text" id="contact" name="contact" required>
<div id="contact-error" class="error-message"></div>
<input type="submit" value="Register">
</form>
</div>
<script>
function validateForm() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var confirmPassword = document.getElementById("confirm-password").value;
var contact = document.getElementById("contact").value;
// Clear previous error messages
document.getElementById("username-error").innerHTML = "";
document.getElementById("password-error").innerHTML = "";
document.getElementById("confirm-password-error").innerHTML = "";
document.getElementById("contact-error").innerHTML = "";
var isValid = true;
// Username validation
if (username.trim() === "") {
document.getElementById("username-error").innerHTML = "Username is required";
isValid = false;
}
// Password validation
if (password.trim() === "") {
document.getElementById("password-error").innerHTML = "Password is required";
isValid = false;
}
// Confirm Password validation
if (confirmPassword.trim() === "") {
document.getElementById("confirm-password-error").innerHTML = "Confirm Password is required";
isValid = false;
} else if (password !== confirmPassword) {
document.getElementById("confirm-password-error").innerHTML = "Passwords do not match";
isValid = false;
}
// Contact validation
if (contact.trim() === "") {
document.getElementById("contact-error").innerHTML = "Contact is required";
isValid = false;
}
return isValid;
}
</script>
</body>
</html>
20)Implement
mouse over and mouse out event.
ans)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Over and Mouse Out Event</title>
<style>
#box {
width: 200px;
height: 200px;
background-color: #007bff;
margin: 50px auto;
text-align: center;
line-height: 200px;
color: #fff;
font-size: 20px;
transition: background-color 0.3s ease;
}
#box:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div id="box" onmouseover="mouseOver()" onmouseout="mouseOut()">Mouse Over Me</div>
<script>
function mouseOver() {
document.getElementById("box").innerHTML = "Mouse Over";
}
function mouseOut() {
document.getElementById("box").innerHTML = "Mouse Out";
}
</script>
</body>
</html>
21)Implement
mouse click event and display table of number taken from user.(Draw DOM tree)
ans)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Click Event</title>
</head>
<body>
<h2>Enter the number of rows and columns:</h2>
<label for="rows">Rows:</label>
<input type="number" id="rows">
<label for="columns">Columns:</label>
<input type="number" id="columns">
<button onclick="createTable()">Create Table</button>
<div id="table-container"></div>
<script>
function createTable() {
var rows = parseInt(document.getElementById("rows").value);
var columns = parseInt(document.getElementById("columns").value);
var tableHTML = "<table border='1'>";
for (var i = 1; i <= rows; i++) {
tableHTML += "<tr>";
for (var j = 1; j <= columns; j++) {
tableHTML += "<td>" + (i * j) + "</td>";
}
tableHTML += "</tr>";
}
tableHTML += "</table>";
document.getElementById("table-container").innerHTML = tableHTML;
}
</script>
</body>
</html>
22)Find out
following pattern in a string.
a)only
digits b)only spaces c)only characters d)special symbol d)range
a to h.
ans)
<?php
$string = "abc123 def ghi456 789 jkl mno!@#";
// a) Only digits
if (preg_match('/^\d+$/', $string)) {
echo "String contains only digits.\n";
} else {
echo "String does not contain only digits.\n";
}
// b) Only spaces
if (preg_match('/^\s+$/', $string)) {
echo "String contains only spaces.\n";
} else {
echo "String does not contain only spaces.\n";
}
// c) Only characters
if (preg_match('/^[a-zA-Z]+$/', $string)) {
echo "String contains only characters.\n";
} else {
echo "String does not contain only characters.\n";
}
// d) Special symbols
if (preg_match('/^[^\w\s]+$/', $string)) {
echo "String contains only special symbols.\n";
} else {
echo "String does not contain only special symbols.\n";
}
// e) Range a to h
if (preg_match('/[a-h]/', $string)) {
echo "String contains characters in the range a to h.\n";
} else {
echo "String does not contain characters in the range a to h.\n";
}
?>
23)Implement
different ways of displaying output on screen using java script.
ans)
console.log("Hello, world!");
document.write("Hello, world!");
<div id="output"></div>
<script>
document.getElementById("output").innerHTML = "Hello, world!";
</script>
<div id="output"></div>
<script>
var outputDiv = document.getElementById("output");
var textNode = document.createTextNode("Hello, world!");
outputDiv.appendChild(textNode);
</script>
var name = prompt("Enter your name:");
console.log("Hello, " + name + "!");
24)Design
web page that can take data for registration of vehicle from user and display
data into another page using post method.
ans)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vehicle Registration Form</title>
</head>
<body>
<h2>Vehicle Registration Form</h2>
<form action="display_data.php" method="post">
<label for="owner_name">Owner's Name:</label><br>
<input type="text" id="owner_name" name="owner_name" required><br><br>
<label for="vehicle_number">Vehicle Number:</label><br>
<input type="text" id="vehicle_number" name="vehicle_number" required><br><br>
<label for="vehicle_type">Vehicle Type:</label><br>
<select id="vehicle_type" name="vehicle_type">
<option value="car">Car</option>
<option value="motorcycle">Motorcycle</option>
<option value="truck">Truck</option>
<option value="van">Van</option>
</select><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Vehicle Registration Data</title>
</head>
<body>
<h2>Vehicle Registration Data</h2>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$owner_name = $_POST["owner_name"];
$vehicle_number = $_POST["vehicle_number"];
$vehicle_type = $_POST["vehicle_type"];
echo "<p><strong>Owner's Name:</strong> $owner_name</p>";
echo "<p><strong>Vehicle Number:</strong> $vehicle_number</p>";
echo "<p><strong>Vehicle Type:</strong> $vehicle_type</p>";
} else {
echo "<p>No data submitted.</p>";
}
?>
</body>
</html>
25) Design
web page that can take data for registration of vehicle from user and display
data into another page using get method.
ans)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vehicle Registration Form</title>
</head>
<body>
<h2>Vehicle Registration Form</h2>
<form action="display_data.php" method="get">
<label for="owner_name">Owner's Name:</label><br>
<input type="text" id="owner_name" name="owner_name" required><br><br>
<label for="vehicle_number">Vehicle Number:</label><br>
<input type="text" id="vehicle_number" name="vehicle_number" required><br><br>
<label for="vehicle_type">Vehicle Type:</label><br>
<select id="vehicle_type" name="vehicle_type">
<option value="car">Car</option>
<option value="motorcycle">Motorcycle</option>
<option value="truck">Truck</option>
<option value="van">Van</option>
</select><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Vehicle Registration Data</title>
</head>
<body>
<h2>Vehicle Registration Data</h2>
<?php
if ($_SERVER["REQUEST_METHOD"] == "GET") {
$owner_name = $_GET["owner_name"];
$vehicle_number = $_GET["vehicle_number"];
$vehicle_type = $_GET["vehicle_type"];
echo "<p><strong>Owner's Name:</strong> $owner_name</p>";
echo "<p><strong>Vehicle Number:</strong> $vehicle_number</p>";
echo "<p><strong>Vehicle Type:</strong> $vehicle_type</p>";
} else {
echo "<p>No data submitted.</p>";
}
?>
</body>
</html>
26)Design
web page that show list of grocery items, food items in 2 different ways.
ans)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grocery and Food Items</title>
<style>
.container {
margin: 20px;
}
h2 {
margin-bottom: 10px;
}
ul {
list-style-type: none;
padding: 0;
}
ul li {
margin-bottom: 5px;
}
</style>
</head>
<body>
<div class="container">
<h2>Grocery Items</h2>
<ul>
<li>Apples</li>
<li>Bread</li>
<li>Milk</li>
<li>Eggs</li>
<li>Cereal</li>
</ul>
<h2>Food Items</h2>
<ul>
<li>Pizza</li>
<li>Burger</li>
<li>Pasta</li>
<li>Salad</li>
<li>Steak</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grocery and Food Items</title>
<style>
.container {
margin: 20px;
}
h2 {
margin-bottom: 10px;
}
.item-list {
display: flex;
flex-wrap: wrap;
}
.item {
width: 150px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<div class="container">
<h2>Grocery Items</h2>
<div class="item-list">
<div class="item">Apples</div>
<div class="item">Bread</div>
<div class="item">Milk</div>
<div class="item">Eggs</div>
<div class="item">Cereal</div>
</div>
<h2>Food Items</h2>
<div class="item-list">
<div class="item">Pizza</div>
<div class="item">Burger</div>
<div class="item">Pasta</div>
<div class="item">Salad</div>
<div class="item">Steak</div>
</div>
</div>
</body>
</html>
27)Write a
program to find perfect number using user defined function in php.
ans)
<?php
// Function to check if a number is perfect
function isPerfectNumber($number) {
$sum = 0;
for ($i = 1; $i <= $number / 2; $i++) {
if ($number % $i == 0) {
$sum += $i;
}
}
return $sum == $number;
}
// Function to find and display perfect numbers within a range
function findPerfectNumbers($start, $end) {
$perfectNumbers = [];
for ($i = $start; $i <= $end; $i++) {
if (isPerfectNumber($i)) {
$perfectNumbers[] = $i;
}
}
return $perfectNumbers;
}
$start = 1;
$end = 10000;
$perfectNumbers = findPerfectNumbers($start, $end);
echo "Perfect numbers between $start and $end are:<br>";
foreach ($perfectNumbers as $number) {
echo "$number<br>";
}
?>
28)Write
a program to show scope of variables
ans)
<?php
// Global scope variable
$globalVariable = "I am a global variable";
function testScope() {
// Local scope variable
$localVariable = "I am a local variable";
echo "Inside the function:<br>";
echo "Local variable: $localVariable<br>";
echo "Global variable: " . $GLOBALS['globalVariable'] . "<br>";
}
testScope();
echo "<br>Outside the function:<br>";
// Accessing global variable outside the function
echo "Global variable: $globalVariable<br>";
// Trying to access local variable outside the function (will result in an error)
// echo "Local variable: $localVariable"; // Uncommenting this line will result in an error
// Static variable
function testStatic() {
static $staticVariable = 0;
$staticVariable++;
echo "Static variable: $staticVariable<br>";
}
echo "<br>Static variable inside function:<br>";
testStatic(); // Output: Static variable: 1
testStatic(); // Output: Static variable: 2
testStatic(); // Output: Static variable: 3
?>
29)write a
program to take number from user and find it is prime or not using JavaScript.
ans)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prime Number Checker</title>
</head>
<body>
<h2>Prime Number Checker</h2>
<label for="number">Enter a number:</label>
<input type="number" id="number">
<button onclick="checkPrime()">Check Prime</button>
<p id="result"></p>
<script>
function checkPrime() {
var number = parseInt(document.getElementById("number").value);
var isPrime = true;
if (number <= 1) {
isPrime = false;
} else {
for (var i = 2; i <= Math.sqrt(number); i++) {
if (number % i === 0) {
isPrime = false;
break;
}
}
}
var resultMessage = isPrime ? "The number is prime." : "The number is not prime.";
document.getElementById("result").innerHTML = resultMessage;
}
</script>
</body>
</html>
30)Design
web page to display 1-month calendars using table tag.
ans)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>One-Month Calendar</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h2>April 2024</h2>
<table>
<thead>
<tr>
<th>Sun</th>
<th>Mon</th>
<th>Tue</th>
<th>Wed</th>
<th>Thu</th>
<th>Fri</th>
<th>Sat</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
<td>29</td>
<td>30</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
31) Open file
sample.txt in read mode and open another file data.txt in write mode. Copy the
data from one file into another file and display the contents of same file in
the browser.
ans)
<?php
// Open sample.txt in read mode
$readFile = fopen("sample.txt", "r");
// Open data.txt in write mode
$writeFile = fopen("data.txt", "w");
// Check if files are opened successfully
if ($readFile && $writeFile) {
// Copy data from sample.txt to data.txt
while (!feof($readFile)) {
$content = fread($readFile, 1024);
fwrite($writeFile, $content);
}
// Close both files
fclose($readFile);
fclose($writeFile);
// Open data.txt in read mode to display its content
$readFile = fopen("data.txt", "r");
if ($readFile) {
// Output the content of data.txt in the browser
echo "<h2>Contents of data.txt:</h2>";
echo "<pre>";
while (!feof($readFile)) {
echo fgets($readFile);
}
echo "</pre>";
// Close data.txt
fclose($readFile);
} else {
echo "Failed to open data.txt.";
}
} else {
echo "Failed to open files.";
}
?>
32) Define static variable count in
your program to count frequency of calling a function call. Also define global
and local variables in function and perform some basic arithmetic operations.
ans)
<?php
function arithmeticOperations($num1, $num2) {
// Global variable
global $globalVar;
$globalVar = 10;
// Local variable
$localVar = 5;
// Static variable to count function calls
static $callCount = 0;
$callCount++;
// Perform arithmetic operations
$sum = $num1 + $num2;
$difference = $num1 - $num2;
$product = $num1 * $num2;
$quotient = ($num2 != 0) ? $num1 / $num2 : "Undefined";
// Output results
echo "Function call #$callCount:<br>";
echo "Global variable: $globalVar<br>";
echo "Local variable: $localVar<br>";
echo "Arithmetic operations:<br>";
echo "$num1 + $num2 = $sum<br>";
echo "$num1 - $num2 = $difference<br>";
echo "$num1 * $num2 = $product<br>";
echo "$num1 / $num2 = $quotient<br>";
echo "<hr>";
}
// Call the function multiple times with different arguments
arithmeticOperations(10, 5);
arithmeticOperations(20, 4);
arithmeticOperations(15, 0);
?>
33)Write a program in php fore reading and writing
characters in file
ans)
<?php
// Open the input file in read mode
$inputFile = fopen("input.txt", "r");
// Check if the input file is opened successfully
if ($inputFile) {
// Initialize an empty array to store character counts
$charCount = [];
// Read characters from the input file until the end of file
while (!feof($inputFile)) {
$char = fgetc($inputFile);
// Increment the count for the current character
if (isset($charCount[$char])) {
$charCount[$char]++;
} else {
$charCount[$char] = 1;
}
}
// Close the input file
fclose($inputFile);
// Open the output file in write mode
$outputFile = fopen("output.txt", "w");
// Check if the output file is opened successfully
if ($outputFile) {
// Write character counts to the output file
foreach ($charCount as $char => $count) {
fwrite($outputFile, "$char: $count\n");
}
// Close the output file
fclose($outputFile);
echo "Character counts have been written to output.txt.";
} else {
echo "Failed to open output.txt for writing.";
}
} else {
echo "Failed to open input.txt for reading.";
}
?>
34) Write a program in php for rename, delete and
reading characters in file from file.
ans)
<?php
// Function to read characters from a file
function readFromFile($filename) {
$content = file_get_contents($filename);
return $content;
}
// Function to rename a file
function renameFile($oldFilename, $newFilename) {
if (file_exists($oldFilename)) {
if (rename($oldFilename, $newFilename)) {
return "File renamed successfully.";
} else {
return "Failed to rename the file.";
}
} else {
return "File does not exist.";
}
}
// Function to delete a file
function deleteFile($filename) {
if (file_exists($filename)) {
if (unlink($filename)) {
return "File deleted successfully.";
} else {
return "Failed to delete the file.";
}
} else {
return "File does not exist.";
}
}
// Test the functions
$filename = "sample.txt";
$newFilename = "renamed.txt";
// Read characters from the file
echo "Content of $filename:<br>";
echo readFromFile($filename) . "<br><br>";
// Rename the file
echo "Renaming $filename to $newFilename: " . renameFile($filename, $newFilename) . "<br>";
// Read characters from the renamed file
echo "Content of $newFilename:<br>";
echo readFromFile($newFilename) . "<br><br>";
// Delete the renamed file
echo "Deleting $newFilename: " . deleteFile($newFilename) . "<br>";
?>
35) Write a program in php to perform different regular
expression operations.
ans)
<?php
// Sample text for testing regular expressions
$text = "The quick brown fox jumps over the lazy dog.";
// Regular expression patterns
$patterns = [
"/fox/i", // Match "fox" case-insensitively
"/\b\w{5}\b/", // Match words with exactly 5 characters
"/\b[a-z]{4}\b/", // Match words with exactly 4 lowercase letters
"/\bover/", // Match "over" at word boundary
"/\d+/", // Match one or more digits
"/\s+/", // Match one or more whitespace characters
"/\W+/", // Match one or more non-word characters
];
// Test regular expression patterns
foreach ($patterns as $pattern) {
$matches = [];
$matchCount = preg_match_all($pattern, $text, $matches);
echo "Pattern: $pattern<br>";
echo "Match count: $matchCount<br>";
if ($matchCount > 0) {
echo "Matches: " . implode(", ", $matches[0]) . "<br>";
}
echo "<hr>";
}
// Perform substitution using regular expression
$newText = preg_replace("/brown/i", "red", $text);
echo "Original text: $text<br>";
echo "Modified text: $newText<br>";
?>
36) Implement mouse up and mouse
down event in php and Draw DOM tree for the same.
ans)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Up and Mouse Down Event</title>
<style>
body {
font-family: Arial, sans-serif;
}
.box {
width: 100px;
height: 100px;
background-color: lightblue;
margin: 20px;
text-align: center;
line-height: 100px;
cursor: pointer;
}
.highlight {
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="box" id="box">Click and hold me</div>
<div id="log"></div>
<script>
const box = document.getElementById('box');
const log = document.getElementById('log');
box.addEventListener('mousedown', () => {
box.classList.add('highlight');
log.innerHTML = 'Mouse Down Event';
});
box.addEventListener('mouseup', () => {
box.classList.remove('highlight');
log.innerHTML = 'Mouse Up Event';
});
</script>
</body>
</html>
37) mplement mouse
up and mouse down event in php and Draw DOM tree for the same.
ans)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouse Up and Mouse Down Event</title>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background-color: lightblue; margin: 20px; text-align: center; line-height: 100px; cursor: pointer;">Click and hold me</div>
<div id="log"></div>
<script>
document.getElementById('box').addEventListener('mousedown', function() {
this.style.backgroundColor = 'lightcoral';
document.getElementById('log').innerText = 'Mouse Down Event';
});
document.getElementById('box').addEventListener('mouseup', function() {
this.style.backgroundColor = 'lightblue';
document.getElementById('log').innerText = 'Mouse Up Event';
});
</script>
</body>
</html>
38) Write a program in php to read entire contents from file
using fread and fgets function.
ans)
<?php
// File path
$filename = "sample.txt";
// Using fread() function
echo "Reading file contents using fread() function:<br>";
$handle = fopen($filename, "r");
if ($handle) {
$contents = fread($handle, filesize($filename));
fclose($handle);
echo $contents;
} else {
echo "Failed to open the file.";
}
echo "<br><br>";
// Using fgets() function
echo "Reading file contents using fgets() function:<br>";
$handle = fopen($filename, "r");
if ($handle) {
while (($line = fgets($handle)) !== false) {
echo $line;
}
fclose($handle);
} else {
echo "Failed to open the file.";
}
?>
39) Write a javascript code to check whether given
year is leap year or not. Take year as input form user and display the result
on onclick event of the mouse. Draw DOM tree on your program.
ans)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Leap Year Checker</title>
</head>
<body>
<label for="yearInput">Enter a year:</label>
<input type="number" id="yearInput">
<button onclick="checkLeapYear()">Check Leap Year</button>
<p id="result"></p>
<script>
function checkLeapYear() {
var year = document.getElementById("yearInput").value;
var resultMessage;
// Check if the year is divisible by 4
if (year % 4 === 0) {
// If divisible by 100 and not divisible by 400, it's not a leap year
if (year % 100 === 0) {
resultMessage = (year % 400 === 0) ? "Leap year" : "Not a leap year";
} else {
resultMessage = "Leap year";
}
} else {
resultMessage = "Not a leap year";
}
// Display the result
document.getElementById("result").innerText = resultMessage;
}
</script>
</body>
</html>
Comments
Post a Comment