1. Create a form with the elements of Textboxes, Radio buttons, Checkboxes, and so on.
Write
JavaScript code to validate the format in email, and mobile number in 10 characters, If a textbox has
been left empty, popup an alert indicating when email, mobile number and textbox has been left empty.
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
</head>
<body>
<h3 style="text-align:center">Validation Form</h3>
<form id="myForm" style="WIDTH:25%; MARGIN:0 AUTO;border:solid orange;margintop:3%;
padding:20px">
<label>Name:</label>
<input type="text" id="name" required><br><br>
<label>Email:</label>
<input type="text" id="email"><br><br>
<label>Mobile No:</label>
<input type="text" id="mobile"><br><br>
<label>Gender:</label>
<input type="radio" name="gender" value="male">Male
<input type="radio" name="gender" value="female">Female<br><br>
<label>Hobbies:</label>
<input type="checkbox" name="hobby" value="reading">Reading
<input type="checkbox" name="hobby" value="gaming">Gaming
<input type="checkbox" name="hobby" value="traveling">Traveling<br><br>
<input type="button" value="Submit" onclick="validateForm()">
</form>
<script>
function validateForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var mobile = document.getElementById("mobile").value;
if (name === "" || email === "" || mobile === "") {
alert("Please fill in all required fields.");
return;
var emailPattern = "[a-zA-Z0-9]+@[a-zA-Z]+.[a-z]{2,3}";
var mobilePattern = "^[7-9]{1}[0-9]{9}$";
if (!email.match(emailPattern)) {
alert("Invalid email format.");
return;
if (!mobile.match(mobilePattern)) {
alert("Mobile number must be 10 digits.");
return;
</script>
</body>
</html>
</html>
2. Develop an HTML Form, which accepts any Mathematical expression. Write JavaScript code to
Evaluate the expression and Display the result.
<!DOCTYPE html>
<html>
<head>
<title>Math Expression Evaluator</title>
</head>
<body>
<h1>Math Expression Evaluator</h1>
<form id="calculator-form">
<input type="text" id="expression" placeholder="Enter a mathematical expression" required>
<button type="button" onclick="calculate()">Calculate</button>
</form>
<p>Result: <span id="result">---</span></p>
<script>
function calculate()
const expression = document.getElementById("expression").value;
try {
const result = eval(expression);
document.getElementById("result").textContent = result;
catch (error)
document.getElementById("result").textContent = "Error";
</script>
</body>
</html>
3. Create a page with dynamic effects. Write the code to include layers and basic animation.
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Effects and Animations</title>
<style>
.layer {
position: absolute;
width: 100px;
height: 100px;
background-color: pink;
border: 2px solid red;
border-radius: 50%;
transition: transform 0.5s ease;
</style>
</head>
<body>
<h1>Dynamic Effects and Animations</h1>
<!-- Layers with basic animations -->
<div class="layer" id="layer1" onmouseover="moveLayer(this)"></div>
<div class="layer" id="layer2" onmouseover="moveLayer(this)"></div>
<div class="layer" id="layer3" onmouseover="moveLayer(this)"></div>
<script>
// Function to move and animate a layer
function moveLayer(layer) {
const maxX = window.innerWidth - 120; // Max X position
const maxY = window.innerHeight - 120; // Max Y position
// Generate random X and Y positions within the window
const randomX = Math.floor(Math.random() * maxX);
const randomY = Math.floor(Math.random() * maxY);
// Move the layer to the random position
layer.style.transform = `translate(${randomX}px, ${randomY}px)`;
</script>
</body>
</html>
4.write a JavaScript code to find the sum of N natural Numbers. (Use user defined function).
<!DOCTYPE html>
<html>
<head>
<title>Sum of N Natural Numbers</title>
</head>
<body>
<h1>Sum of N Natural Numbers</h1>
<form>
<label for="n">Enter a positive integer (N): </label>
<input type="number" id="n">
<button type="button" onclick="calculateSum()">Calculate Sum</button>
</form>
<p id="result">The sum of the first N natural numbers is: <span id="sum">---
</span></p>
<script>
function calculateSum() {
const n = parseInt(document.getElementById("n").value);
if (n >= 1) {
const sum = sumOfNaturalNumbers(n);
document.getElementById("sum").textContent = sum;
}
else {
document.getElementById("sum").textContent = "Please enter a positive integer (N
>= 1).";
}
}
function sumOfNaturalNumbers(n) {
return (n * (n + 1)) / 2;
}
</script>
</body>
</html>
5. .Write a JavaScript code block using arrays and generate the current date in words, this should include
the day, month and year.
<html>
<body>
<script>
// Arrays to store the names of days and months
const daysOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday",
"Friday", "Saturday"];
const monthsOfYear = ["January", "February", "March", "April", "May", "June",
"July",
"August", "September", "October", "November", "December"];
// Get the current date
const currentDate = new Date();
// Extract day, month, and year components
const currentDay = daysOfWeek[currentDate.getDay()];
const currentMonth = monthsOfYear[currentDate.getMonth()];
const currentYear = currentDate.getFullYear();
// Create a sentence with the current date in words
const currentDateInWords = `${currentDay}, ${currentMonth}
${currentDate.getDate()}, ${currentYear}`;
// Display the in console result
console.log("Current Date in Words:", currentDateInWords);
//Display the result in html page
document.write("Current Date in Words:", currentDateInWords);
</script>
</body>
</html>
6. .Create a form for Student information. Write JavaScript code to find Total, Average, Result and
Grade.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Student Results</title>
<script>
function calculateResults() {
var marks = document.getElementsByClassName('marks');
var total = 0;
for (var i = 0; i < marks.length; i++) {
total += parseInt(marks[i].value, 10);
}
var average = total / marks.length;
var result = average >= 40 ? "Pass" : "Fail";
var grade = '';
if (average >= 80) {
grade = 'A';
}
else if (average >= 60) {
grade = 'B';
}
else if (average >= 40) {
grade = 'C';
}
else {
grade = 'F';
}
document.getElementById('total').innerHTML = 'Total: ' + total;
document.getElementById('average').innerHTML = 'Average: ' +
average.toFixed(2);
document.getElementById('result').innerHTML = 'Result: ' + result;
document.getElementById('grade').innerHTML = 'Grade: ' + grade;
}
</script>
</head>
<body>
<h2>Student Information</h2>
<form>
Name: <input type="text">
<br><br>
Marks 1: <input type="number" class="marks"><br><br>
Marks 2: <input type="number" class="marks"><br><br>
Marks 3: <input type="number" class="marks"><br><br>
<button type="button" onclick="calculateResults()">Calculate</button>
</form>
<p id="total"></p>
<p id="average"></p>
<p id="result"></p>
<p id="grade"></p>
</body>
</html>
7. Create a form for Employee information. Write JavaScript code to find DA, HRA, PF, TAX, Gross pay,
Deduction and Net pay.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee Payroll Calculation</title>
</head>
<body>
<h1>Employee Information Form</h1>
<form id="employeeForm">
<label for="basicPay">Basic Pay: </label><input type="number"
id="basicPayInput">
<button type="button" onclick="calculatePay()">Calculate</button>
</form>
<h2>Payroll Details</h2>
<p id="result"></p>
<script>
function calculatePay() {
const basicPay =
parseFloat(document.getElementById('basicPayInput').value);
// Constants for percentages (can be adjusted)
const DA_PERCENT = 20; // 20% of Basic Pay
const HRA_PERCENT = 15; // 15% of Basic Pay
const PF_PERCENT = 12; // 12% of Basic Pay
const TAX_PERCENT = 10; // 10% of Gross Pay
// Calculations
const DA = basicPay * (DA_PERCENT / 100);
const HRA = basicPay * (HRA_PERCENT / 100);
const PF = basicPay * (PF_PERCENT / 100);
const grossPay = basicPay + DA + HRA;
const tax = grossPay * (TAX_PERCENT / 100);
const deductions = PF + tax;
const netPay = grossPay - deductions;
// Displaying the results
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = `
<strong>Basic Pay:</strong> ${basicPay.toFixed(2)}<br>
<strong>DA:</strong> ${DA.toFixed(2)}<br>
<strong>HRA:</strong> ${HRA.toFixed(2)}<br>
<strong>PF:</strong> ${PF.toFixed(2)}<br>
<strong>Gross Pay:</strong> ${grossPay.toFixed(2)}<br>
<strong>Tax:</strong> ${tax.toFixed(2)}<br>
<strong>Deductions:</strong> ${deductions.toFixed(2)}<br>
<strong>Net Pay:</strong> ${netPay.toFixed(2)}<br>
`;
}
</script>
</body>
</html>
8. Write a program in PHP to change background color based on day of the week using if else if
statements and using arrays .
<!DOCTYPE html>
<html>
<head>
<title>Change Background Color by Day of the Week</title>
<style>
body {
text-align: center;
font-size: 24px;
padding: 50px;
}
</style>
</head>
<body>
<?php
// Get the current day of the week as a number (0 for Sunday, 6 for Saturday)
$dayOfWeek = date("w");
// Array to store background colors for each day of the week
$backgroundColors = array(
"orange", // Sunday
"pink", // Monday
"yellow", // Tuesday
"black", // Wednesday
"red", // Thursday
"green", // Friday
"white" // Saturday
);
// Set the background color based on the current day
if ($dayOfWeek >= 0 && $dayOfWeek <= 6) {
$backgroundColor = $backgroundColors[$dayOfWeek];
} else {
$backgroundColor = "#f2f2f2"; // Default background color
}
?>
<h1>Background Color of the Day</h1>
<div style="background-color: <?php echo $backgroundColor; ?>">
Today is <?php echo date("l"); ?>
</div>
</body>
</html>
9.Write a simple program in PHP for i) generating Prime number ii) generate Fibonacci series.
<?php
function generatePrimes($maxNumber) {
echo "Prime numbers up to $maxNumber: ";
for ($number = 2; $number <= $maxNumber; $number++) {
$isPrime = true;
for ($i = 2; $i <= sqrt($number); $i++) {
if ($number % $i == 0) {
$isPrime = false;
break;
}
}
if ($isPrime) {
echo $number . " ";
}
}
echo "<br>";
}
function fibonacciSeries($numTerms) {
$first = 0;
$second = 1;
echo "Fibonacci Series ($numTerms terms): ";
for ($i = 0; $i < $numTerms; $i++) {
echo $first . " ";
$next = $first + $second;
$first = $second;
$second = $next;
}
echo "<br>";
}
// Call the functions with desired parameters
generatePrimes(58); // Generate prime numbers up to 58
fibonacciSeries(10); // Generate 10 terms of the Fibonacci series
?>
10. Write a PHP program to remove duplicates from a sorted list.
<?php
function removeDuplicates($array) {
$uniqueList = array_unique($array);
echo "Original List: ";
print_r($array);
echo "<br>Unique List: ";
print_r($uniqueList);
}
$sortedList = [1, 1, 2, 2, 3, 3, 4, 5, 5]; // Example sorted list
removeDuplicates($sortedList);
?>
11.Write a PHP Script to print the following pattern on the Screen:
<?php
for ($i = 5; $i >= 1; $i--) {
for ($j = 5; $j > $i; $j--) {
echo " ";
}
for($k=1;$k<=$i;$k++)
{
echo "*";
}
echo "<br>";
}
?>
12. Write a simple program in PHP for Searching of data by different criteria.
<!DOCTYPE html>
<html>
<head>
<title>Search Data</title>
</head>
<body>
<h2>Search Data</h2>
<form method="post" action="">
<label>Name:</label>
<input type="text" name="name">
<br><br>
<label>Email:</label>
<input type="text" name="email">
<br><br>
<label>Age:</label>
<input type="text" name="age">
<br><br>
<input type="submit" name="search" value="Search">
</form>
<?php
// Sample data array
$data = [
['name' => 'Guru', 'email' => 'guru@example.com', 'age' => 23],
['name' => 'Prajwal', 'email' => 'prajwal@example.com', 'age' => 25],
['name' => 'virat', 'email' => 'virat@example.com', 'age' => 35],
];
if (isset($_POST['search'])) {
$searchName = $_POST['name'];
$searchEmail = $_POST['email'];
$searchAge = $_POST['age'];
// Perform the search
$results = [];
foreach ($data as $item) {
if (
(empty($searchName) || stripos($item['name'], $searchName) !== false) &&
(empty($searchEmail) || stripos($item['email'], $searchEmail) !== false) &&
(empty($searchAge) || $item['age'] == $searchAge)
) {
$results[] = $item;
}
}
// Display the results
if (!empty($results)) {
echo "<h3>Search Results:</h3>";
echo "<ul>";
foreach ($results as $result) {
echo "<li>Name: {$result['name']}, Email: {$result['email']}, Age:
{$result['age']}</li>";
}
echo "</ul>";
} else {
echo "No results found.";
}
}
?>
</body>
</html>
13. Write a function in PHP to generate captcha code.
<?php
session_start();
function generateCaptchaCode($length = 6) {
$characters =
'0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
$charactersLength = strlen($characters);
$captchaCode = '';
for ($i = 0; $i < $length; $i++) {
$captchaCode .= $characters[rand(0, $charactersLength - 1)];
}
return $captchaCode;
}
$captchaCode = generateCaptchaCode();
echo "Captcha Code is: " . $captchaCode;
// You can store $captchaCode in the session or use it as needed in your
application.
?>
14 Write a program in PHP to read and write file using form control
First create html program inside htdocs folder with the .html extension
<!DOCTYPE html>
<html>
<head>
<title>File Reader and Writer</title>
</head>
<body>
<form action="read.php" method="post">
<label for="textdata">Enter Text: </label><br>
<textarea name="textdata" id="textdata"></textarea><br>
<input type="submit" value="Write to File"><br><br>
</form>
<form action="read.php" method="post" enctype="multipart/form-data">
<label for="filedata">Upload File to Read File Contents: </label>
<input type="file" name="filedata" id="filedata">
<input type="submit" value="Read File Contents"><br><br>
</form>
</body>
</html>
Second you have to create one php program with .php extension
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (!empty($_POST['textdata'])) {
file_put_contents("output.txt", $_POST['textdata']);
echo "Data written to file.<br>";
}
if (!empty($_FILES['filedata']['tmp_name'])) {
$fileContent = file_get_contents($_FILES['filedata']['tmp_name']);
echo "File content: " . htmlspecialchars($fileContent) . "<br>";
}
}
?>
15.Write a PHP program to Create a simple webpage of a college.
<!DOCTYPE html>
<html>
<head>
<title>College Name - Home</title>
<style>
body {
font-family: Arial, sans-serif;
}
header {
background-color: #007ACC;
color: #fff;
text-align: center;
padding: 20px;
}
h1 {
margin: 0;
}
nav {
background-color: #333;
color: #fff;
padding: 10px;
}
nav a {
color: #fff;
text-decoration: none;
margin-right: 20px;
}
.content {
padding: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
}
</style>
</head>
<body>
<header>
<h1>College Name</h1>
<p>Empowering the Future</p>
</header>
<nav>
<a href="#">Home</a>
<a href="#">Programs</a>
<a href="#">Admissions</a>
<a href="#">About Us</a>
<a href="#">Contact Us</a>
</nav>
<div class="content">
<h2>Welcome to College Name</h2>
<p>
Welcome to College Name, where we are committed to providing a quality education
and empowering the future.
</p>
</div>
<footer>
© <?php echo date("Y"); ?> College Name
</footer>
</body>
</html>
16.Write a program in PHP for exception handling for i) divide by zero ii) checking date format.
<!DOCTYPE html>
<html>
<head>
<title>Exception Handling</title>
</head>
<body>
<h2>Exception Handling</h2>
<form method="post" action="">
<label>Divide a Number by:</label>
<input type="text" name="divider" placeholder="Enter a number">
<input type="submit" name="divide" value="Divide">
<br><br>
<label>Check Date Format:</label>
<input type="text" name="date" placeholder="YYYY-MM-DD">
<input type="submit" name="check_date" value="Check Date Format">
</form>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
try {
if (isset($_POST["divide"])) {
$divider = (int)$_POST["divider"];
if ($divider === 0) {
throw new Exception("Cannot divide by zero.");
}
$result = 10 / $divider;
echo "Result of 10 divided by $divider is $result.";
}
if (isset($_POST["check_date"])) {
$date = $_POST["date"];
if (!preg_match("/^\d{4}-\d{2}-\d{2}$/", $date) || !checkdate(substr($date, 5,
2), substr($date, 8, 2), substr($date, 0, 4))) {
throw new Exception("Invalid date format. Use YYYY-MM-DD format.");
}
echo "Date format is valid: $date";
}
} catch (Exception $e) {
echo "Error: " . $e->getMessage();
}
}
?>
</body>
</html>
