Scribd
Upload
22 views35 pages

Web Programming Programs

The document contains multiple HTML and JavaScript code snippets for various functionalities, including form validation, mathematical expression evaluation, dynamic effects, and student/employee information processing. Each section includes a brief description of the functionality, the corresponding HTML structure, and the JavaScript logic to implement the desired features. Additionally, there are PHP examples for changing background colors based on the day of the week, generating prime numbers, Fibonacci series, and removing duplicates from a sorted list.

Uploaded by

gangak23022005
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
22 views35 pages

Web Programming Programs

The document contains multiple HTML and JavaScript code snippets for various functionalities, including form validation, mathematical expression evaluation, dynamic effects, and student/employee information processing. Each section includes a brief description of the functionality, the corresponding HTML structure, and the JavaScript logic to implement the desired features. Additionally, there are PHP examples for changing background colors based on the day of the week, generating prime numbers, Fibonacci series, and removing duplicates from a sorted list.

Uploaded by

gangak23022005
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/ 35

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>

Output
.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>

output
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>
Output
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>

Output
5.Write a JavaScript code block using arrays and generate the current date in
words, this should include the day, month and year.
// 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 result


console.log("Current Date in Words:", currentDateInWords);

output

Current Date in Words: Sunday, October 22, 2023

6.Create a form for Student information. Write JavaScript code to find Total,
Average, Result and Grade.
<!DOCTYPE html>
<html>
<head>
<title>Student Information</title>
</head>
<body>
<h1>Student Information Form</h1>
<form id="student-form">
<label for="name">Student Name:</label>
<input type="text" id="name" required><br>

<label for="math">Math Score:</label>


<input type="number" id="math" required><br>

<label for="science">Science Score:</label>


<input type="number" id="science" required><br>

<label for="history">History Score:</label>


<input type="number" id="history" required><br>

<button type="button" onclick="calculateResult()">Calculate</button><br>

<label for="total">Total Score:</label>


<input type="text" id="total" readonly><br>

<label for="average">Average Score:</label>


<input type="text" id="average" readonly><br>

<label for="result">Result:</label>
<input type="text" id="result" readonly><br>

<label for="grade">Grade:</label>
<input type="text" id="grade" readonly>
</form>

<script>
function calculateResult() {
const mathScore = parseInt(document.getElementById("math").value);
const scienceScore = parseInt(document.getElementById("science").value);
const historyScore = parseInt(document.getElementById("history").value);

const totalScore = mathScore + scienceScore + historyScore;


const averageScore = totalScore / 3;

document.getElementById("total").value = totalScore;
document.getElementById("average").value = averageScore;

if (mathScore >= 40 && scienceScore >= 40 && historyScore >= 40)


{
document.getElementById("result").value = "Pass";
if (averageScore >= 70)
{
document.getElementById("grade").value = "A";
}
else if (averageScore >= 60) {
document.getElementById("grade").value = "B";
}
else if (averageScore >= 50)
{
document.getElementById("grade").value = "C";
}
else {
document.getElementById("grade").value = "D";
}
}
else {
document.getElementById("result").value = "Fail";
document.getElementById("grade").value = "F";
}
}
</script>
</body>
</html>

Output
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>
<head>
<title>Employee Information</title>
</head>
<body>
<h1>Employee Information Form</h1>
<form id="employee-form">
<label for="name">Employee Name:</label>
<input type="text" id="name" required><br>

<label for="basic">Basic Salary:</label>


<input type="number" id="basic" required><br>

<label for="daPercentage">DA Percentage (%):</label>


<input type="number" id="daPercentage" required><br>

<label for="hraPercentage">HRA Percentage (%):</label>


<input type="number" id="hraPercentage" required><br>

<label for="pfPercentage">PF Percentage (%):</label>


<input type="number" id="pfPercentage" required><br>

<label for="taxPercentage">Income Tax Percentage (%):</label>


<input type="number" id="taxPercentage" required><br>

<button type="button" onclick="calculateSalary()">Calculate</button><br>

<label for="da">Dearness Allowance (DA):</label>


<input type="text" id="da" readonly><br>

<label for="hra">House Rent Allowance (HRA):</label>


<input type="text" id="hra" readonly><br>
<label for="pf">Provident Fund (PF):</label>
<input type="text" id="pf" readonly><br>

<label for="tax">Income Tax (TAX):</label>


<input type="text" id="tax" readonly><br>

<label for="grossPay">Gross Pay:</label>


<input type="text" id="grossPay" readonly><br>

<label for="deduction">Deduction:</label>
<input type="text" id="deduction" readonly><br>

<label for="netPay">Net Pay:</label>


<input type="text" id="netPay" readonly>
</form>

<script>
function calculateSalary() {
const basicSalary = parseFloat(document.getElementById("basic").value);
const daPercentage = parseFloat(document.getElementById("daPercentage").value);
const hraPercentage = parseFloat(document.getElementById("hraPercentage").value);
const pfPercentage = parseFloat(document.getElementById("pfPercentage").value);
const taxPercentage = parseFloat(document.getElementById("taxPercentage").value);

// Calculate DA, HRA, PF, TAX


const da = (daPercentage / 100) * basicSalary;
const hra = (hraPercentage / 100) * basicSalary;
const pf = (pfPercentage / 100) * basicSalary;
const tax = (taxPercentage / 100) * basicSalary;

// Calculate Gross Pay and Deduction


const grossPay = basicSalary + da + hra;
const deduction = pf + tax;

// Calculate Net Pay


const netPay = grossPay - deduction;
document.getElementById("da").value = da.toFixed(2);
document.getElementById("hra").value = hra.toFixed(2);
document.getElementById("pf").value = pf.toFixed(2);
document.getElementById("tax").value = tax.toFixed(2);
document.getElementById("grossPay").value = grossPay.toFixed(2);
document.getElementById("deduction").value = deduction.toFixed(2);
document.getElementById("netPay").value = netPay.toFixed(2);
}
</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
// Array to store background colors for each day of the week
$backgroundColors = array(
"Sunday" => "#ff6666",
"Monday" => "#ffcc99",
"Tuesday" => "#99ff99",
"Wednesday" => "#66b3ff",
"Thursday" => "#ff99cc",
"Friday" => "#ffff99",
"Saturday" => "#cc99ff"
);

// Get the current day of the week


$currentDay = date("l");

// Set the background color based on the current day


if (array_key_exists($currentDay, $backgroundColors)) {
$backgroundColor = $backgroundColors[$currentDay];
} else {
$backgroundColor = "#f2f2f2"; // Default background color
}
?>

<h1>Background Color of the Day</h1>

<div style="background-color: <?php echo $backgroundColor; ?>">


Today is <?php echo $currentDay; ?>
</div>
</body>
</html>

Output
9.Write a simple program in PHP for i) generating Prime number ii) generate Fibonacci
series.
<?php
function isPrime($number) {
if ($number <= 1) {
return false;
}
if ($number <= 3) {
return true;
}
if ($number % 2 == 0 || $number % 3 == 0) {
return false;
}
for ($i = 5; $i * $i <= $number; $i += 6) {
if ($number % $i == 0 || $number % ($i + 2) == 0) {
return false;
}
}
return true;
}

echo "Prime Numbers: ";


for ($i = 2; $i <= 50; $i++) {
if (isPrime($i)) {
echo $i . " ";
}
}

echo "\nFibonacci Series: ";


$n = 10; // Number of Fibonacci numbers to generate
$a = 0;
$b = 1;
for ($i = 0; $i < $n; $i++) {
echo $a . " ";
$c = $a + $b;
$a = $b;
$b = $c;
}
?>

output

10.Write a PHP program to remove duplicates from a sorted list.


<?php
function removeDuplicates($sortedList) {
$length = count($sortedList);

if ($length == 0) {
return $sortedList;
}

$result = array($sortedList[0]);

for ($i = 1; $i < $length; $i++) {


if ($sortedList[$i] != $sortedList[$i - 1]) {
$result[] = $sortedList[$i];
}
}

return $result;
}

// Sample sorted list with duplicates


$sortedList = array(1, 2, 2, 3, 4, 4, 4, 5, 6, 6, 7);

// Call the removeDuplicates function


$uniqueList = removeDuplicates($sortedList);

echo "Original Sorted List: " . implode(", ", $sortedList) . "\n";


echo "List with Duplicates Removed: " . implode(", ", $uniqueList) . "\n";
?>

output
Original Sorted List: 1, 2, 2, 3, 4, 4, 4, 5, 6, 6, 7 List with Duplicates Removed: 1, 2, 3, 4, 5, 6,
11. Write a PHP Script to print the following pattern on the Screen:
<?php
$rows = 5; // Number of rows in the pattern

<?php
//$rows = 5; // Number of rows in the pattern

for ($i = 1; $i <= 5; $i++) {


for ($j = 5; $j >= $i; $j--) {
echo "*";
}
echo "\n";
}
?>

Output
*****
****
***
**
*

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' => '[email protected]', 'age' => 23],
['name' => 'Prajwal', 'email' => '[email protected]', 'age' => 25],
['name' => 'virat', 'email' => '[email protected]', '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>

output
13. Write a function in PHP to generate captcha code.

<?php
// Function to generate a random CAPTCHA code
function generateCaptchaCode($length = 6) {
$characters =
'0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
$captchaCode = '';

for ($i = 0; $i < $length; $i++) {


$randomIndex = rand(0, strlen($characters) - 1);
$captchaCode .= $characters[$randomIndex];
}

return $captchaCode;
}

// Generate a CAPTCHA code and store it in a session variable


session_start();
$captchaCode = generateCaptchaCode();
$_SESSION['captcha_code'] = $captchaCode;

// Create an image with the CAPTCHA code and display it to the user
$width = 150;
$height = 50;
$image = imagecreatetruecolor($width, $height);
$bgColor = imagecolorallocate($image, 255, 255, 255);
$textColor = imagecolorallocate($image, 0, 0, 0);

imagefilledrectangle($image, 0, 0, $width, $height, $bgColor);

// You can choose a font file for your CAPTCHA text


$font = 'path_to_your_font.ttf';

imagettftext($image, 20, 0, 10, 30, $textColor, $font, $captchaCode);

header('Content-type: image/png');
imagepng($image);
imagedestroy($image);
?>
14. Write a program in PHP to read and write file using form control.

<!DOCTYPE html>
<html>
<head>
<title>File Upload and Read</title>
</head>
<body>
<h2>Upload a File</h2>
<form method="post" action="" enctype="multipart/form-data">
<input type="file" name="file" id="file">
<input type="submit" name="upload" value="Upload">
</form>

<h2>Read Uploaded File</h2>


<form method="get" action="">
<label>File Name:</label>
<input type="text" name="filename">
<input type="submit" value="Read">
</form>

<?php
if (isset($_POST['upload'])) {
if ($_FILES['file']['error'] === UPLOAD_ERR_OK) {
$tempFile = $_FILES['file']['tmp_name'];
$uploadDir = 'uploads/';
$targetFile = $uploadDir . $_FILES['file']['name'];

if (!file_exists($uploadDir)) {
mkdir($uploadDir, 0777, true);
}

if (move_uploaded_file($tempFile, $targetFile)) {
echo "File uploaded successfully.";
} else {
echo "Error uploading the file.";
}
}
}

if (isset($_GET['filename'])) {
$filename = 'uploads/' . $_GET['filename'];

if (file_exists($filename)) {
$fileContents = file_get_contents($filename);
echo "<h3>File Contents:</h3>";
echo "<pre>" . htmlspecialchars($fileContents) . "</pre>";
} else {
echo "File not found.";
}
}
?>
</body>
</html>
Write a program in PHP to add, update and delete using student database.

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>
&copy; <?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>

output

17.Write a program in PHP to Validate Input


<!DOCTYPE html>
<html>
<head>
<title>Input Validation</title>
</head>
<body>
<h1>Input Validation</h1>
<form method="post">
<label for="name">Name:</label>
<input type="text" name="name" id="name" required><br><br>
<label for="email">Email:</label>
<input type="text" name="email" id="email" required><br><br>
<label for="password">Password:</label>
<input type="password" name="password" id="password" required><br><br>
<button type="submit" name="submit">Submit</button>
</form>

<?php
if (isset($_POST['submit'])) {
$name = $_POST['name'];
$email = $_POST['email'];
$password = $_POST['password'];

// Validate name (letters and spaces only)


if (!preg_match('/^[a-zA-Z\s]+$/', $name)) {
echo "Invalid name. Please enter a valid name containing only letters and
spaces.<br>";
}

// Validate email format


if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "Invalid email address. Please enter a valid email.<br>";
}

// Validate password criteria (e.g., at least 8 characters)


if (strlen($password) < 8) {
echo "Invalid password. It must be at least 8 characters long.<br>";
}

if (preg_match('/^[a-zA-Z\s]+$/', $name) && filter_var($email,


FILTER_VALIDATE_EMAIL) && strlen($password) >= 8) {
echo "Valid input: Name - $name, Email - $email, Password - $password";
}
}
?>
</body>
</html>

output

18.Write a program in PHP for setting and retrieving a cookie.


<!DOCTYPE html>
<html>
<head>
<title>Cookie Example</title>
</head>
<body>
<h1>Cookie Example</h1>

<?php
// Check if the cookie has been set and display its value
if (isset($_COOKIE['user'])) {
$username = $_COOKIE['user'];
echo "Welcome back, $username! Your cookie value is: $username";
} else {
echo "No cookie set. Please enter your username to set a cookie.";
}

// If the form is submitted, set a cookie


if (isset($_POST['submit'])) {
$username = $_POST['username'];

// Set a cookie with a name "user" and the provided username as the value
setcookie('user', $username, time() + 3600, '/'); // Cookie expires in 1 hour

// Display a message
echo "Cookie set! Welcome, $username!";
}
?>

<form method="post">
<label for="username">Enter your username:</label>
<input type="text" name="username" id="username" required>
<button type="submit" name="submit">Set Cookie</button>
</form>
</body>
</html>

You might also like