WP LAB COMBINATIONS
1 a) 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.
Ans-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
<script>
function validateForm() {
var email = document.forms["myForm"]["email"].value;
var mobile = document.forms["myForm"]["mobile"].value;
var text = document.forms["myForm"]["text"].value;
if (email === "" || mobile === "" || text === "") {
alert("Please fill out all fields.");
return false;
}
var emailRegex = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
if (!emailRegex.test(email)) {
alert("Please enter a valid email address.");
return false;
}
var mobileRegex = /^\d{10}$/;
if (!mobileRegex.test(mobile)) {
alert("Please enter a 10-digit mobile number.");
return false;
}
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return validateForm()" method="post">
Email: <input type="text" name="email"><br>
Mobile: <input type="text" name="mobile"><br>
Text: <input type="text" name="text"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
1 b) Write a program in PHP for setting and retrieving a cookie
Ans-
<?php
// Set cookie
$cookie_name = "user";
$cookie_value = "John Doe";
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); // 86400 = 1 day
// Retrieve cookie
if(isset($_COOKIE[$cookie_name])) {
echo "Cookie name '" . $cookie_name . "' has value: " . $_COOKIE[$cookie_name];
} else {
echo "Cookie named '" . $cookie_name . "' is not set!";
}
?>
2 a) Develop a HTML Form, which accepts any Mathematical expression. Write
JavaScript code to Evaluates the expression and displays the result.
Ans-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expression Evaluator</title>
<script>
function evaluateExpression() {
var expression = document.getElementById("expression").value;
var result = eval(expression);
document.getElementById("result").innerHTML = "Result: " + result;
}
</script>
</head>
<body>
<form>
Expression: <input type="text" id="expression"><br>
<button type="button" onclick="evaluateExpression()">Evaluate</button>
</form>
<div id="result"></div>
</body>
</html>
2 b) Write a program in PHP to change background color based on day of the
week using if else if statements and using arrays
Ans-
<?php
$dayOfWeek = date("l");
$colors = array(
"Monday" => "red",
"Tuesday" => "blue",
"Wednesday" => "green",
"Thursday" => "yellow",
"Friday" => "orange",
"Saturday" => "purple",
"Sunday" => "pink"
);
if (array_key_exists($dayOfWeek, $colors)) {
$color = $colors[$dayOfWeek];
echo "<body style='background-color:$color;'>";
} else {
echo "<body>";
}
?>
</body>
</html>
3 a) Create a page with dynamic effects. Write the code to include layers and
basic animation
Ans-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Effects</title>
<style>
.layer {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
animation: move 2s infinite alternate;
}
@keyframes move {
from {left: 0px;}
to {left: 200px;}
}
</style>
</head>
<body>
<div class="layer"></div>
</body>
</html>
3 b)Write a PHP program to print this pattern on the screen
****
***
**
*
Ans-
<?php
for ($i = 4; $i >= 1; $i--) {
for ($j = 1; $j <= $i; $j++) {
echo "*";
}
echo "<br>";
}
?>
4 a) Write a JavaScript code to find the sum of N natural Numbers. (Use user-
defined function)
Ans-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sum of N Natural Numbers</title>
<script>
function sumOfNaturalNumbers(n) {
var sum = 0;
for (var i = 1; i <= n; i++) {
sum += i;
}
return sum;
}
var n = 10;
var result = sumOfNaturalNumbers(n);
console.log("Sum of first " + n + " natural numbers: " + result);
</script>
</head>
<body>
</body>
</html>
4 b) Write a function in PHP to generate captcha code
Ans-
<?php
function generateCaptcha($length = 6) {
$characters =
'0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
$captcha = '';
for ($i = 0; $i < $length; $i++) {
$index = rand(0, strlen($characters) - 1);
$captcha .= $characters[$index];
}
return $captcha;
}
$captcha = generateCaptcha();
echo "Generated Captcha: " . $captcha;
?>
5 a) Write a JavaScript code block using arrays and generate the current date in
words, this should include the day, month and year.
Ans-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Current Date in Words</title>
<script>
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September',
'October', 'November', 'December'];
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
var currentDate = new Date();
var day = days[currentDate.getDay()];
var month = months[currentDate.getMonth()];
var year = currentDate.getFullYear();
console.log("Today is " + day + ", " + month + " " + currentDate.getDate() + ", " + year);
</script>
</head>
<body>
</body>
</html>
5 b) Write a program in PHP for setting and retrieving a cookie
Ans-
<?php
// Set cookie
$cookie_name = "user";
$cookie_value = "John Doe";
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/"); // 86400 = 1 day
// Retrieve cookie
if(isset($_COOKIE[$cookie_name])) {
echo "Cookie name '" . $cookie
6 a) Create a form for Student information. Write JavaScript code to find: Total,
Average, Result and Grade
Ans-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Information</title>
<script>
function calculate() {
var marks = [];
var total = 0;
var average = 0;
// Get marks from input fields
for (var i = 1; i <= 5; i++) {
var mark = parseInt(document.getElementById("mark" + i).value);
marks.push(mark);
total += mark;
}
average = total / 5;
// Display total and average
document.getElementById("total").innerHTML = "Total Marks: " + total;
document.getElementById("average").innerHTML = "Average Marks: " + average.toFixed(2);
// Calculate Result and Grade
var result = (average >= 40) ? "Pass" : "Fail";
document.getElementById("result").innerHTML = "Result: " + result;
var grade = '';
if (average >= 90) {
grade = 'A+';
} else if (average >= 80) {
grade = 'A';
} else if (average >= 70) {
grade = 'B';
} else if (average >= 60) {
grade = 'C';
} else if (average >= 50) {
grade = 'D';
} else {
grade = 'F';
}
document.getElementById("grade").innerHTML = "Grade: " + grade;
}
</script>
</head>
<body>
<form>
<label>Enter Marks for 5 Subjects:</label><br>
<input type="number" id="mark1"><br>
<input type="number" id="mark2"><br>
<input type="number" id="mark3"><br>
<input type="number" id="mark4"><br>
<input type="number" id="mark5"><br>
<button type="button" onclick="calculate()">Calculate</button>
</form>
<div id="total"></div>
<div id="average"></div>
<div id="result"></div>
<div id="grade"></div>
</body>
</html>
6 b) Write a PHP Script to print the following pattern on the Screen
Ans-
<?php
for ($i = 4; $i >= 1; $i--) {
for ($j = 1; $j <= $i; $j++) {
echo "*";
}
echo "<br>";
}
?>
7 a) Create a form for Employee information. Write JavaScript code to find: DA,
HRA, PF, TAX, Gross pay, Deduction and Net pay.
Ans-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee Information</title>
<script>
function calculate() {
var basic = parseFloat(document.getElementById("basic").value);
// Calculate DA, HRA, PF, TAX
var DA = basic * 0.1;
var HRA = basic * 0.08;
var PF = basic * 0.12;
var TAX = basic * 0.05;
// Calculate Gross Pay, Deduction, Net Pay
var grossPay = basic + DA + HRA;
var deduction = PF + TAX;
var netPay = grossPay - deduction;
// Display results
document.getElementById("da").innerHTML = "DA: " + DA.toFixed(2);
document.getElementById("hra").innerHTML = "HRA: " + HRA.toFixed(2);
document.getElementById("pf").innerHTML = "PF: " + PF.toFixed(2);
document.getElementById("tax").innerHTML = "TAX: " + TAX.toFixed(2);
document.getElementById("grossPay").innerHTML = "Gross Pay: " +
grossPay.toFixed(2);
document.getElementById("deduction").innerHTML = "Deduction: " +
deduction.toFixed(2);
document.getElementById("netPay").innerHTML = "Net Pay: " +
netPay.toFixed(2);
}
</script>
</head>
<body>
<form>
Basic Salary: <input type="number" id="basic"><br>
<button type="button" onclick="calculate()">Calculate</button>
</form>
<div id="da"></div>
<div id="hra"></div>
<div id="pf"></div>
<div id="tax"></div>
<div id="grossPay"></div>
<div id="deduction"></div>
<div id="netPay"></div>
</body>
</html>
7 b) Write a simple program in PHP for i) generating Prime number ii) generate
Fibonacci series.
Ans-
<?php
// Generating Prime Numbers
function generatePrimes($n) {
$primes = [];
for ($i = 2; $i <= $n; $i++) {
$isPrime = true;
for ($j = 2; $j <= sqrt($i); $j++) {
if ($i % $j == 0) {
$isPrime = false;
break;
}
}
if ($isPrime) {
$primes[] = $i;
}
}
return $primes;
}
$n = 20;
$primeNumbers = generatePrimes($n);
echo "Prime numbers up to $n: " . implode(", ", $primeNumbers) . "<br>";
// Generating Fibonacci Series
function generateFibonacci($n) {
$fibonacci = [0, 1];
for ($i = 2; $i < $n; $i++) {
$fibonacci[$i] = $fibonacci[$i - 1] + $fibonacci[$i - 2];
}
return $fibonacci;
}
$n = 10;
$fibonacciSeries = generateFibonacci($n);
echo "Fibonacci series up to $n terms: " . implode(", ", $fibonacciSeries);
?>
8 a) Write a JavaScript code block using arrays and generate the current date
in words, this should include the day, month and year.
Ans-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Current Date in Words</title>
<script>
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July',
'August', 'September', 'October', 'November', 'December'];
var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday',
'Saturday'];
var currentDate = new Date();
var day = days[currentDate.getDay()];
var month = months[currentDate.getMonth()];
var year = currentDate.getFullYear();
console.log("Today is " + day + ", " + month + " " + currentDate.getDate() + ", "
+ year);
</script>
</head>
<body>
</body>
</html>
8 b) Write a PHP program to Create a simple webpage of a college
Ans-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>College Website</title>
<style>
body {
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav {
background-color: #f2f2f2;
padding: 10px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
text-decoration: none;
color: #333;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 10px;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>Welcome to ABC College</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Admissions</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<h2>About ABC College</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra urna
vel mi fringilla, a faucibus urna vehicula. Fusce ut ante sapien. Duis suscipit vel
augue in congue. Aliquam posuere, sem eget faucibus viverra, justo orci varius
purus, non auctor felis eros quis ante. Nunc in efficitur dolor. Vestibulum eget
mauris ac dolor convallis interdum eget nec ipsum.</p>
</main>
<footer>
<p>© 2024 ABC College. All rights reserved.</p>
</footer>
</body>
</html>
