Scribd
Upload
50 views14 pages

Web Programming

The document provides code snippets and solutions for various web development tasks including form validation, cookie handling, expression evaluation, dynamic effects, loops and patterns, functions, arrays, dates, and calculations for student/employee data.

Uploaded by

mr.m0rn9ngst4r
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
50 views14 pages

Web Programming

The document provides code snippets and solutions for various web development tasks including form validation, cookie handling, expression evaluation, dynamic effects, loops and patterns, functions, arrays, dates, and calculations for student/employee data.

Uploaded by

mr.m0rn9ngst4r
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

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>&copy; 2024 ABC College. All rights reserved.</p>
</footer>
</body>
</html>

You might also like