0% found this document useful (0 votes)
4 views17 pages

HTML and JavaScript Programming Examples

Byee
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
0% found this document useful (0 votes)
4 views17 pages

HTML and JavaScript Programming Examples

Byee
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

1.

sample program1:--

<!DOCTYPE html>

<html>

<head>

<title>Styled Page</title>

<style>

body {

background-color: blue;

font-family: 'Times New Roman', Times, serif;

.box {

width: 300px;

padding: 20px;

background: violet;

border-radius: 10px;

</style>

</head>

<body>

<div class="box">

<h3>Welcome!</h3>

<p>This is a styled box using CSS.</p>

</div>

</body>

</html>

*******************************************************************************************

2. Sampleprogram2:--

<!DOCTYPE html>
<html>

<head>

<title>Interactive Page</title>

</head>

<body>

<h2>Click the Button</h2>

<button onclick="showMessage()">Click Me</button>

<div id = "output"></div>

<script>

function showMessage() {

[Link]("output").innerText = "You clicked the button!";

</script>

</body>

</html>

*********************************************************************************************
*********************************************************************************

3.labprogram1:--

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

<head>

<title>Form Validation Without Regex</title>

<script>

function validateForm() {

let email = [Link]("email").value;

let mobile = [Link]("mobile").value;

let name = [Link]("name").value;


// Basic validation without regular expressions

if ([Link]() === "") {

alert("Name field cannot be empty.");

return false;

if ([Link]("@") === -1 || [Link](".") === -1 || [Link] < 5) {

alert("Please enter a valid email address.");

return false;

if ([Link] !== 10 || isNaN(mobile)) {

alert("Mobile number must be exactly 10 digits.");

return false;

alert("Form submitted successfully!");

return true;

</script>

</head>

<body>

<form onsubmit="return validateForm()">

<label>Name: <input type="text" id="name"></label><br></br>

<label>Email: <input type="text" id="email"></label><br></br>

<label>Mobile: <input type="text" id="mobile"></label><br></br>

<input type="submit" value="Submit">

</form>

</body>

</html>

******************************************************************************************

Labprogram2:--
[Link] an HTML Form, which accepts any Mathematical expression. Write JavaScript
code to evaluate the expression and Display the result.
<html>

<title> Arithmetic expression Evaluation </title>

<script type="text/javascript">

function evaluateExpression() {

var enteredExpr = [Link]("expr").value;

[Link]("result").value = eval(enteredExpr);

alert("expression is evaluated correct");

function clearExpression() {

[Link]("expr").value="";

[Link]("result").value="";

alert("invalid expression ");a

</script>

</head>

<body bgcolor=cyan>

<h1 align=center> Evaluating Arithmetic Expression</h1>

<hr>

<form name="myform">

<b>Enter any valid Expression : <input type=text id=expr></b>

<b><input type=button value="Evaluate" onclick="evaluateExpression()"></b>

<b><input type=button value="clear" onclick="clearExpression()"></b>

<b>Result of the expression : <input type=text id=result></b>

</form>

</body>

</html>

*********************************************************************************************
*********

Lab program3:--Create a page with dynamic effects. Write the code to include layers and basic animation.
<html>

<head>

<title> Basic Animation </title>

<style>

#layer1 {

position: absolute;

top: 50px;

left: 150px;

#layer2 {

position: absolute;

top: 50px;

left: 250px;

#layer3 {

position: absolute;

top: 50px;

left: 350px;

</style>

<script type="text/javascript"> function moveImage(layer) {

var top = [Link]("Enter Top value");

var left = [Link]("Enter Left Value");

[Link](layer).[Link] = top + 'px';

[Link](layer).[Link] = left + 'px';

</script>

</head>

<body bgcolor=cyan>

<div id="layer1"><img src="[Link]" onclick="moveImage('layer1')"


alt="layer1" ></div>
<div id="layer2"><img src="[Link]" onclick="moveImage('layer2')"
alt="layer2" ></div>

<div id="layer3"><img src="[Link]" onclick="moveImage('layer3')"


alt="layer3"></div>

</body>

</html>

Lab program 4:--Write a JavaScript code to find the sum of N natural Numbers. (Use user defined function)

<html>
<head>
<title> Sum of Natural Numbers </title>
<script type="text/javascript">
function sum() {
var num = [Link]("Enter the value of N");
var n = parseInt(num);
var sum = (n * (n + 1)) / 2;
[Link]("Sum of First " + n + " Natural numbers is: " + sum);
}
</script>
</head>
<body bgcolor=cyan>
<h1 align=center> Finding Sum of N Natural Numbers </h1>
<hr>
<form align=center> <input type="button" value="Click Here " onclick="sum()" /> </form>
</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>
<head>
<title>Display Date </title>
<script type="text/javascript">
function display() {
var dateObj = new Date();
var currDates = [Link]();
var month = [Link]();
var currYear = [Link]();
var year = "Two Thousand and Twenty Five";
var days = ["First", "Second", "Third", "Fourth", "Fifth", "Sixth", "Seventh", "Eigth", "Ninth", "Tenth",
"Eleventh", "Twelfth", "Thirteenth", "Fourteenth", "fifteenth", "Sixteenth", "Seventeenth", "Eighteenth",
"Nineteenth", "Twentyeth", "Twenty First", "TwentySecond", "Twenty Third", "Twenty Fourth", "Twenty Fifth",
"Twenty Sixth", "TwentySeventh", "Twenty Nine", "Thirtyeth", "Thirty First"];
var months = ["January", "Febraury", "March", "April", "May", "June", "July", "August", "September",
"October", "November", "December"];
if (currYear == 2025)
alert("Today date is :: " + days[currDates - 1] + " " + months[month] + " " + year);
else
alert("Today date is not to the current year");
}
</script>
</head>
<body bgcolor=cyan>
<form>
<input type=button value="Click Here" onClick="display()" />
</form>
</body>
</html>

1. Lab program 6:-- Create a form for Student information. Write JavaScript code to find Total,
Average, Result and Grade.
2.
3. <html>
4. <head>
5. <title>Student Data Example</title>
6. <script type="text/javascript">
7. function showResult() {
8. var name = [Link]("name").value;
9. var cls = [Link]("class").value;
10. var marks1 = parseInt([Link]("sub1").value);
11. var marks2 = parseInt([Link]("sub2").value);
12. var marks3 = parseInt([Link]("sub3").value);
13. var total = marks1 + marks2 + marks3;
14. var avg = total / 3;
15. var grade, result;
16. if (avg >= 60) {
17. grade = "A";
18. result = "First Class";
19. }
20. else if (avg < 60 && avg >= 50) {
21. grade = "B";
22. result = "Second Class";
23. }
24. else if (avg < 50 && avg >= 40) {
25. grade = "C";
26. result = "Third Class";
27. }
28. else {
29. grade = "D";
30. result = "Fail";
31. }
32. [Link]("<h2> Results </h2>");
33. [Link]("<b> Name: " + name + " </b> <br />");
34. [Link]("<b> Class: " + cls + " </b> <br />");
35. [Link]("<b> Total Marks: " + total + " </b> <br />");
36. [Link]("<b> Average: " + avg + " </b> <br />");
37. [Link]("<b> Grade: " + grade + " </b> <br />");
38. [Link]("<b> Result: " + result + " </b> <br />");
39. }
40. </script>
41. </head>
42. <body>
43. <form>
44. <tr>
45. <td>Student Name: </td><br/>
46. <td><input type="text" id="name" ></td><br/>
47. <td>Student Class: </td><br/>
48. <td><input type="text" id="class" ></td><br/>
49. </tr>
50. <tr>
51. <td>Student Marks1: </td><br/>
52. <td><input type="number" id="sub1" ></td><br/>
53. <td>Student Marks2: </td><br/>
54. <td><input type="number" id="sub2" ></td><br/>
55. <td>Student Marks3: </td><br/>
56. <td><input type="number" id="sub3" ></td><br/>
57. </tr>
58. </table>
59. <input type="button" value="View Results"
onClick="showResult()"><br/>
60. </form></body></html>
61.
7. Create a form for Employee information. Write JavaScript code to find DA, HRA, PF, TAX,
Gross pay, Deduction and Net pay.

<html>

<head>

<title>Employee Salary Calculator</title>

</head>

<body>

<h2>Employee Salary Calculator</h2>

<label>Basic Salary:

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

</label><br>

<button onclick="calculate()">Calculate Salary</button>

<h3>Results:</h3>

<p id="result"></p>

<script>

function calculate() {

let basic = parseFloat([Link]("basic").value);

if (isNaN(basic) || basic <= 0) {

[Link]("result").innerHTML = "Please enter a valid basic salary.";

return;

// Calculations

let da = basic * 0.20; // 20%

let hra = basic * 0.25; // 25%


let pf = basic * 0.12; // 12%

let tax = basic * 0.10; // 10%

let gross = basic + da + hra;

let deduction = pf + tax;

let net = gross - deduction;

[Link]("result").innerHTML =

"Gross Pay: ₹" + [Link](2) + "<br>" +

"Deduction: ₹" + [Link](2) + "<br>" +

"Net Pay: ₹" + [Link](2);

</script>

</body>

</html>

Sample php programs:--

1. <?php

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

echo "Number: $i \n";

?>

2. <?php

function greet($name) {

return "Hi, " . $name;

echo greet("Vanishree");

?>
3. <?php

$grade = 85;

if ($grade >= 90) {

echo "A";

} elseif ($grade >= 80) {

echo "B";

} else {

echo "C or below";

?>

4. <?php

$age=19;

$status = ($age >= 18) ? "Adult" : "Minor";

echo $status;

?>

5. <?php

echo "Enter your score: ";

$score = readline("enter ur score");

if (is_numeric($score)) {

if ($score >= 50) {

echo "Pass\n";

} else {
echo "Fail\n";

} else {

echo "Invalid input. Please enter a number.\n";

?>

6.

<?php

echo "hello world!";

?>

*********************************************************************************************
*********************************************************************************************

******************lab program 9 :-- Write a simple program in PHP for i) generating Prime
number ii) generate

Fibonacci series.

<?php

function isPrime($num) {

if ($num < 2) return false;

for ($i = 2; $i <= $num/2; $i++) {

if ($num % $i == 0) return false;

return true;

$limit = 10; // Change this to any desired limit

echo "Prime numbers up to $limit:\n";

for ($i = 2; $i <= $limit; $i++) {

if (isPrime($i)) {

echo "$i ";

}
?>

Labprogram11:-- Write a PHP Script to print the following pattern on the Screen:

*****

****

***

**

<?php

for ($i = 5; $i >= 1; $i--) {

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

echo "*";

echo "\n";

?>

LAB PROGRAM 12. Write a simple program in PHP for Searching of data by different criteria

<?php

function removeDuplicates($array){

$result=array_values(array_unique($array));

return $result;

$sortedList=[1,1,2,2,3,3,4,5,5];

$uniqueList=removeDuplicates($sortedList);

echo"Original List:";

print_r($sortedList);

echo"<br> Unique List:";

print_r($uniqueList);

?>

LAB PROGRAM 13. Write a function in PHP to generate captcha code

<?php
function generateCaptcha($length = 6) {

// Define possible characters for the captcha

$characters =
'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';

$captcha = '';

// Generate a random string of given length

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

$captcha .= $characters[rand(0, strlen($characters) - 1)];

return $captcha;

// Usage example

$captchaCode = generateCaptcha();

echo "generated captcha code is :";

echo ($captchaCode);

?>

LAB PROGRAM 14. Write a Program to store and read image from Database.

<?php

// Connect to MySQL
$conn = new mysqli("localhost", "root", "", "mydb");

// Check connection

if ($conn->connect_error) {

die("Connection fasiled: " . $conn->connect_error);

// Query to get image path

$res = $conn->query("SELECT image_path FROM table1");

// Display image

while ($row = $res->fetch_assoc()) {

echo "<img src='" . $row["image_path"] . "' height='150' width='150'><br>";

// Close connection

$conn->close();

?>

LAB PROGRAM 15. Write a program in PHP to read and write file using form control.

<!DOCTYPE html>

<html>

<head>

<title>File Read/Write Example</title>

</head>

<body>
<h2>Write to File</h2>

<form method="post">

<textarea name="content" rows="5" cols="40" placeholder="Type


something..."></textarea><br><br>

<input type="submit" name="submit" value="Save to File">

</form>

<?php

$filename = "[Link]";

// Write to file

if (isset($_POST['submit'])) {

$text = $_POST['content'];

file_put_contents($filename, $text); // Overwrites existing content

echo "<p><strong>Content saved!</strong></p>";

// Read from file

if (file_exists($filename)) {

echo "<h2>File Contents:</h2>";

$contents = file_get_contents($filename);

echo "<pre>" . htmlspecialchars($contents) . "</pre";

?>

</body>

</html>

You might also like