`
Exp No.:1 Date:
Create a web page which includes the following using HTML:
a) Import an Image,
b) Include Check box, Radio Button,
c) Use href tag.
AIM :
ALGORITHM :
`1
`
PROGRAM :
HTML Code Implementation:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Web Page</title>
</head>
<body>
<!-- Import an Image -->
<h2>Imported Image:</h2>
<img src="[Link]" alt="Sample Image" width="300">
<!-- Checkbox -->
<h2>Check Box:</h2>
<input type="checkbox" id="check1" name="option1">
<label for="check1">Option 1</label>
<!-- Radio Button -->
<h2>Radio Button:</h2>
<input type="radio" id="radio1" name="group1">
<label for="radio1">Choice 1</label>
`2
`
<input type="radio" id="radio2" name="group1">
<label for="radio2">Choice 2</label>
<!-- Hyperlink -->
<h2>Hyperlink:</h2>
<a href="[Link] target="_blank">Visit Example Website</a>
</body>
</html>
OUTPUT :
RESULT :
`3
`
Exp No.:2 Date:
Create a web page which includes the following using HTML
:
a) Create a Table,
b) Include the types of List,
c) Use hover tag.
AIM :
ALGORITHM :
`4
`
PROGRAM :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Webpage with Table and Lists</title>
<style>
/* Hover effect for table rows */
table tr:hover {
background-color: #f2f2f2;
/* Hover effect for list items */
ul li:hover, ol li:hover {
background-color: #e0e0e0;
cursor: pointer;
/* Table styling */
table {
width: 60%;
border-collapse: collapse;
margin: 20px auto;
th, td {
`5
`
padding: 12px;
text-align: center;
border: 1px solid #ccc;
th {
background-color: #f4f4f4;
/* General body styling */
body {
font-family: Arial, sans-serif;
margin: 20px;
text-align: center;
/* List styling */
ul, ol {
width: 60%;
margin: 20px auto;
padding: 0;
text-align: left;
li {
padding: 8px;
margin: 5px 0;
`6
`
</style>
</head>
<body>
<h1>Welcome to My Simple Webpage</h1>
<!-- Table Section -->
<h2>Table Example</h2>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John</td>
<td>28</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>24</td>
<td>London</td>
</tr>
<tr>
<td>David</td>
<td>35</td>
<td>Paris</td>
`7
`
</tr>
</table>
<!-- Unordered List Section -->
<h2>Unordered List Example</h2>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
<!-- Ordered List Section -->
<h2>Ordered List Example</h2>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</body>
</html>
`8
`
OUTPUT :
RESULT :
`9
`
Exp No.:3 Date:
Generate the Fibonacci series using PHP user-defined function.
AIM :
ALGORITHM :
`10
`
PROGRAM :
<?php
// User-defined function to generate Fibonacci series
function generateFibonacci($n) {
if ($n <= 0) {
return []; // Return an empty array for non-positive input
$fibonacci = [0]; // Start with the first term
if ($n > 1) {
$fibonacci[] = 1; // Add the second term if n > 1
// Generate the series
for ($i = 2; $i < $n; $i++) {
$fibonacci[$i] = $fibonacci[$i - 1] + $fibonacci[$i - 2];
return $fibonacci; // Return the series as an array
// Define the number of terms
$numTerms = 10;
// Generate and display the Fibonacci series
$fibonacciSeries = generateFibonacci($numTerms);
echo "Fibonacci series with $numTerms terms: " . implode(", ", $fibonacciSeries);
?>
`11
`
OUTPUT :
RESULT :
`12
`
Exp No.:4 Date:
Apply any two PHP sort functions each on an indexed array
and an associative array.
AIM :
ALGORITHM :
`13
`
PROGRAM :
<?php
// Indexed array
$indexedArray = array(5, 2, 9, 1, 5, 6);
// Associative array
$associativeArray = array(
"zebra" => 3,
"apple" => 5,
"mango" => 2,
"banana" => 4
);
// sort() on indexed array (ascending)
$sortIndexed = $indexedArray;
sort($sortIndexed);
echo "Sorted Indexed Array (sort()):\n[\n";
foreach ($sortIndexed as $key => $value) {
echo "[$key] => $value\n";
echo "]\n\n";
// rsort() on indexed array (descending)
$rsortIndexed = $indexedArray;
rsort($rsortIndexed);
`14
`
echo "Sorted Indexed Array (rsort()):\n[\n";
foreach ($rsortIndexed as $key => $value) {
echo "[$key] => $value\n";
echo "]\n\n";
// asort() on associative array (by value)
$asortAssociative = $associativeArray;
asort($asortAssociative);
echo "Sorted Associative Array (asort()):\n[\n";
foreach ($asortAssociative as $key => $value) {
echo "[$key] => $value\n";
echo "]\n\n";
// ksort() on associative array (by key)
$ksortAssociative = $associativeArray;
ksort($ksortAssociative);
echo "Sorted Associative Array (ksort()):\n[\n";
foreach ($ksortAssociative as $key => $value) {
echo "[$key] => $value\n";
echo "]\n";
?>
`15
`
OUTPUT :
RESULT :
`16
`
Exp No.:5 Date:
Create a web page with the following using HTML :
i) To embed an image map in a web page,
ii) To fix the hot spots
iii) Show all the related information when the hot spots are
clicked.
AIM :
ALGORITHM :
`17
`
PROGRAM :
[Link]
<HTML>
<HEAD>
<TITLE>Image Map</TITLE> </HEAD>
<BODY>
<img src="india_map.jpg" usemap="#metroid" ismap="ismap" > <map name="metroid"
id="metroid">
<area href="[Link]" shape="circle" coords="208,606,50" title="TamilNadu"/>
<area href="[Link]" shape="rect" coords = "130,531,164,535" title
="Karnataka" />
<area href="[Link]" shape="poly" coords =
"227,490,238,511,230,536,198,535,202,503" title ="Andhra Pradesh" />
<area href="[Link]" shape="rect" coords = "154,606,166,621" title ="Kerala" />
</map>
</BODY>
</HTML>
[Link]
<HTML><HEAD>
<TITLE>About Tamil Nadu</TITLE>
</HEAD>
<BODY>
<CENTER><H1>Tamil Nadu</H1></CENTER> <HR>
<UL>
<LI>Area : 1,30,058 Sq. Kms.</LI>
<LI>Capital : Chennai</LI>
<LI>Language : Tamil</LI>
`18
`
<LI>Population : 6,21,10,839</LI> </UL><hr>
<a href='[Link]'>India Map</a>
</BODY>
</HTML>
[Link]
<HTML>
<HEAD>
<TITLE>About Karnataka</TITLE> </HEAD>
<BODY>
<CENTER><H1>Karnataka</H1></CENTER>
<HR>
<UL>
<LI>Area : 1,91,791 Sq. Kms</LI>
<LI>Capital : Bangalore</LI>
<LI>Language : Kannada</LI>
<LI>Population : 5,27,33,958</LI>
</UL>
<hr>
<a href='[Link]'>India Map</a>
</BODY>
</HTML>
[Link]
<HTML>
<HEAD>
<TITLE>About Andhra Pradesh</TITLE> </HEAD>
<BODY>
<CENTER><H1>Andhra Pradesh</H1></CENTER> <HR>
<UL>
`19
`
<LI>Area : 2,75,068 Sq. Kms</LI>
<LI>Capital : Hyderabad</LI>
<LI>Language : Telugu</LI>
<LI>Population : 7,57,27,541</LI>
</UL>
<hr>
<a href='[Link]'>India Map</a>
</BODY>
</HTML>
[Link]
<HTML>
<HEAD>
<TITLE>About Kerala</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Kerala</H1></CENTER>
<HR>
<UL>
<LI>Area : 38,863 Sq. Kms.</LI>
<LI>Capital : Thiruvananthapuram</LI>
<LI>Language : Malayalam</LI>
<LI>Population : 3,18,38,619</LI>
</UL>
<hr>
<a href='[Link]'>India Map</a>
</BODY></HTML>
`20
`
OUTPUT :
RESULT :
`21
`
Exp No.:6 Date:
Create a web page with all types of Cascading Style sheets .
AIM :
ALGORITHM :
`22
`
PROGRAM :
[Link]:
h3
font-family:arial;
font-size:20;
color:cyan
table{
border-color:green
td
font-size:20pt;
color:magenta
HTML CODE:
<html>
<head>
<h1>
<center>ALL STYLE SHEETS</center>
</h1>
<title>USE of INTERNAL and EXTERNAL STYLESHEETS </title>
<link rel="stylesheet" href="[Link]" type="text/css">
<style type="text/css">
.vid
`23
`
font-family:verdana;
font-style:italic;
color:red;
text-align:center
.ani
font-family:tahoma;
font-style:italic;
font-size:20;
text-align:center;
font
font-family:georgia;
color:blue;
font-size:20
ul
list-style-type:circle
font-family: georgia, serif;
font-size: x-small;
`24
`
hr
color: #ff9900; height: 1px
a:hover
color: #ff0000;
text-decoration: none
</style>
</head>
<body>
<h1 style="color:blue;margin-left:30px;">Welcome</h1> //In-line style Sheet
<ol style="list-style-type:lower-alpha">
<b>[Link]’s College of Engineering and Technology </b>
<br> <br> <br>
<li> EEE</li>
<li> ECE </li>
<li> MECH</li>
<li> CSE</li>
</ol>
<p style="font-size:20pt;color:purple">Details</p>
<p class="ani">[Link]’s College <br>It is approved by AICTE(All India Council for
Technical Education). It is affliated to Anna University.<br></p>
<h2 class="vid"> [Link]’s college of engineering </h2> <br>
<font>It is an ISO certified Institution
</font>
<br>
`25
`
<br>
<font>
<h2>List of Courses offered</h2>
<ul>
<li>Computer Science and Engineering</li>
<li>Ece</li>
<li>mech</li>
<li>eee</li>
</ul>
</font>
<h3>Results of cse students</h3>
<table width="100%" cellspacing="2" cellpadding="2" border="5"> <tr>
<th>[Link]</th> <th>MARKS</th> <th>RESULT</th>
</tr>
<tr>
<td align="center">Suppriya</td> <td align="center">100</td>
<td align="center">pass</td>
</tr>
<tr>
<td align="center">Devishree</td> <td align="center">99</td>
<td align="center">pass</td>
</tr>
<tr>
<td align="center">Vinayagam</td> <td align="center">98</td>
<td align="center">pass</td> </tr>
</table>
</body>
</html>
`26
`
OUTPUT :
RESULT :
`27
`
Exp No.:7 Date:
Client Side Scripts for Validating Web Form Controls using
JavaScript
AIM :
ALGORITHM :
`28
`
PROGRAM :
[Link]:
<html>
<head>
<title> ONLINE BOOK STORES</title>
</head>
<body bgcolor="pink">
<marquee><h1 align=”center”><b><u><font color="white">
ONLINE BOOK STORAGE</u></font>
</b></h1></marquee>
<H2 ALIGN="CENTER">
<b><p><U><FONT COLOR="PURPLE">Welcome to online book storage.
Press login if you are having id otherwise press registration.</U></FONT></p></b></H2>
<H2> <FONT COLOR="WHITE"></FONT></H2>
<H3 ALIGN="CENTER">
<A HREF="[Link]"><BR><BR><FONT COLOR="black"><ITALIC>REGISTRATION
FORM</FONT></ITALIC><BR><BR>
<BR><BR><A HREF="[Link]"><FONT COLOR="black"><ITALIC>USER
PROFILE</FONT></ITALIC><BR>
<BR><BR><A HREF="[Link]"><FONT COLOR="black"><ITALIC>USER
LOGIN</FONT></ITALIC><BR>
<BR><BR><A HREF="[Link]"><FONT COLOR="black"><ITALIC>BOOKS
CATALOG</FONT></ITALIC><BR>
<BR><BR><A HREF="[Link]"><FONT
COLOR="black"><ITALIC>PAYMENT</FONT></ITALIC><BR>
<BR><BR><A HREF="[Link]"><FONT COLOR="black"><ITALIC>ORDER
CONFIRMATION</H3></FONT></ITALIC><BR>
`29
`
</body>
</html>
[Link]:
<html>
<body bgcolor=”blue”><br><br><br>
<script language=”javascript”>
function validate()
var flag=1;
if([Link]==""||[Link]=="")
alert("LoginId and Password must be filled")
flag=0;
if(flag==1)
alert(“VALID INPUT”);
[Link]("[Link]","right");
else
alert(“INVALID INPUT”);
//[Link]();
</script>
<form name=”myform”>
`30
`
<div align=”center”><pre>
LOGIN ID:<input type=”text” name=”id”><br>
PASSWORD:<input type=”password” name=”pwd”>
<br><br>
</pre>
<input type=”button” value=”ok” onClick=”validate()”>
<input type=”reset” value=”clear”>
</div>
</form>
</body>
</html>
[Link]:
<html>
<body bgcolor=”blue”><br><br>
<script language=”javascript”>
var str=[Link];
var x;
if(flag==1)
alert("VALID INPUT");
else
alert("INVALID INPUT");
[Link]();
`31
`
</script>
<form name="myform">
<div align="center"><pre>
NAME :<input type="text" name="name"><br>
ADDRESS :<input type="type" name="addr"><br>
CONTACT NUMBER:<iput type="text" name="phno"><br>
LOGINID :<input type="text" name="id"><br>
PASSWORD :<input type="password" name="pwd"></pre><br><br>
</div>
<br><br>
<div align="center">
<input type="submit" value="ok" onClick="validate()">
<input type="reset" value="clear">
</form></body></html>
[Link]:
<html>
<body bgcolor="pink"><br><br><br>
<div align="center">
<pre>
BOOK TITLE:<input type="text" name="title"><br>
</pre><br><br>
</div>
<br><br>
<div align="center">
<input type="submit" value="ok" name="button1">
<input type="reset" value="clear" name="button2">
</body>
`32
`
</html>
[Link]:
<html>
<body bgcolor="pink"><br><br><br>
<div align="center"><pre>
LOGIN ID :<input type="text" name="id"><br>
TITLE :<input type="text" name="title"><br>
[Link] BOOKS :<input type="text" name="no"><br>
COST OF BOOK:<input type="text"name="cost"><br>
DATE :<input tpe="text" name="date"><br></pre><br><br>
</div>
<br><br>
<div align="center">
<input type="submit" value="ok" name="button1">
<input type="reset" value="clear" name="button2">
</body>
</html>
[Link]:
<html>
<body bgcolor="pink"><br><br><br>
<script language="javascript">
function validate()
var flag=1;
if([Link]==""||
[Link]==""||
`33
`
[Link]==""||
[Link]=="")
flag=0;
var str=[Link];
var x;
for(var i=0;i<[Link];i++)
x=[Link](i,1);
if(!(x<=9))
flag=0;
break;
str=[Link];
for(var i=0;i<[Link];i++)
x=[Link](i,1);
if(!(x<=9))
flag=0;
break;
if(flag==1)
`34
`
alert("VALID INPUT");
else
alert("INVALID INPUT");
[Link]();
</script>
<form name="myform">
<div align="center"><pre>
LOGIN ID :<input type="text" name="id"><br>
PASSWORD :<input type="password" name="pwd"><br>
AMOUNT :<input type="text" name="amount"><br>
CREDITCARDNUMBER:<input type="PASSWORD" name="num+"><br></pre><br><br>
</div>
<br><br><div align="center">
<input type="submit" value="ok" onClick="validate()">
<input type="reset" value="clear">
</form>
</body>
</html>
[Link]:
<html>
<body bgcolor="pink"><br><br><br>
<script type="text/javascript">
function validate()
`35
`
var flag=1;
if([Link]==""||
[Link]=="")
flag=0;
if(flag==1)
alert("VALID INPUT");
else
alert("INVALID INPUT");
[Link]();
}}
</script>
<form name="myform">
<div align="center"><pre>
LOGIN ID :<input type="text" name="id"><br>
PASSWORD:<input type="password" name="pwd"></pre><br><br>
</div>
<br><br>
<div align="center">
<input type="submit" value="ok" onClick="validate()">
<input type="reset" value="clear" >
</form>
</body></html>
`36
`
OUTPUT :
`37
`
`38
`
RESULT :
`39
`
Exp No.:8 Date:
Form Handling in PHP. Create a recruitment website where a job
seeker can upload his/her details (ex naukri)
AIM :
ALGORITHM :
`40
`
PROGRAM :
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Job Recruitment Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
background-color: #f4f4f4;
form {
background: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px 0px gray;
max-width: 400px;
margin: auto;
label {
display: block;
margin-top: 10px;
input, textarea {
width: 100%;
`41
`
padding: 8px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
button {
margin-top: 15px;
padding: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
button:hover {
background-color: #218838;
</style>
</head>
<body>
<h2 style="text-align:center;">Job Seeker Registration</h2>
<form action="[Link]" method="POST" enctype="multipart/form-data">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
`42
`
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone" required>
<label for="resume">Upload Resume:</label>
<input type="file" id="resume" name="resume" required>
<button type="submit">Submit</button>
</form>
</body>
</html>
`43
`
OUTPUT :
RESULT :
`44
`
Exp No.:9 Date:
Create an Employee database with two fields Employer’s Name,
Employee’s Name with MySQL and inert two records into those
fields using PHP code.
AIM :
ALGORITHM :
`45
`
PROGRAM :
[Link]:
<?php
// Database connection details
Sservername "localhost"; // Change if your MySQL is hosted elsewhere Susername "root"; //
Default username for XAMPP/LAMP Spassword""; // Default password (leave empty if using
XAMPP)
$dbname "DHANUSH1036;
// Create connection
Sconn new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: $conn->connect_error); }
// Insert records into Employees table
$sql = "INSERT INTO Employees (employer_name, employee name) VALUES
("ABC Corp', 'John Doe'), ('XYZ Ltd', 'Jane Smith')";
if ($conn->query($sql) === TRUE) {
echo "Records inserted successfully!";
} else {
echo "Error" $sql "<br>". Sconn->error;
// Close connection
Sconn->close();
?>
`46
`
OUTPUT :
RESULT :
`47
`
Exp No.:10 Date:
Flight Booking Web App Documentation.
AIM :
ALGORITHM :
`48
`
PROGRAM :
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>SkyLine Booking</title>
<link rel="stylesheet" href="[Link]" />
</head>
<body>
<!-- Loader -->
<div id="loader">
<div class="spinner"></div>
<p>Launching SkyLine...</p>
</div>
<div id="app" class="hidden">
<!-- Header -->
<header>
<div class="header-container">
<span class="header-logo">
<div class="header-text">
<h1>SKYLINE</h1>
</span>
<p>Professional Flight Booking</p>
</div>
</div>
`49
`
</header>
<main>
<!-- Search Flights -->
<section id="search-section">
<h2>Search Your Flight</h2>
<form id="searchForm">
<input type="text" id="origin" placeholder="From (e.g., Mumbai)" required />
<input type="text" id="destination" placeholder="To (e.g., Dubai)" required />
<input type="date" id="departureDate" required />
<button type="submit">Search Flights</button>
</form>
<p class="quote">“The journey of a thousand miles begins with a single flight.”</p>
</section>
<!-- Results -->
<section id="results-section" class="hidden">
<h2>Available Flights</h2>
<div id="results" class="flights-list"></div>
</section>
<!-- Payment -->
<section id="payment-section" class="hidden">
<h2>Passenger & Payment</h2>
<form id="paymentForm">
<input type="text" id="passengerName" placeholder="Full Name" required />
<input type="email" id="passengerEmail" placeholder="Email Address" required />
<input type="text" id="cardNumber" placeholder="Card Number (13–19 digits)"
required />
<input type="text" id="expiryDate" placeholder="MM/YY" required />
<input type="text" id="cvv" placeholder="CVV (3–4 digits)" required />
`50
`
<button type="submit">Confirm Booking</button>
</form>
</section>
<!-- Success -->
<section id="success-section" class="hidden">
<div class="success-animation">
<div class="checkmark"> </div>
<h2>Booking Confirmed</h2>
<p>Your ticket has been sent to your email. Safe journey!</p>
</div>
</section>
</main>
</div>
<script src="[Link]"></script>
</body>
</html>
[Link]
/* Global */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
color: #f1f1f1;
min-height: 100vh;
overflow-x: hidden;
/* Loader */
`51
`
#loader {
position: fixed;
inset: 0;
background: #121212;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 100;
color: white;
font-size: 18px;
.spinner {
width: 50px;
height: 50px;
border: 6px solid #f3f3f3;
border-top: 6px solid #00c6ff;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-bottom: 10px;
@keyframes spin {
to { transform: rotate(360deg); }
/* Header */
header {
background: #0b0f1a;
padding: 20px 10px;
`52
`
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
.header-container {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-right:120px;
.header-logo {
font-size: 28px;
.header-text h1 {
font-size: 46px;
color: #00c6ff;
.header-text p {
font-size: 13px;
color: #ccc;
margin-top: 2px;
font-style: italic;
/* Sections */
main { padding: 40px 20px; }
section {
max-width: 600px;
margin: 20px auto;
background: rgba(255, 255, 255, 0.06);
`53
`
backdrop-filter: blur(12px);
border-radius: 16px;
padding: 30px;
box-shadow: 0 0 15px rgba(0,0,0,0.3);
animation: fadeIn 0.6s ease;
h2 {
text-align: center;
margin-bottom: 20px;
font-size: 24px;
color: #ffffff;
/* Inputs & Buttons */
input, button {
width: 100%;
padding: 12px;
margin: 10px 0;
border-radius: 10px;
font-size: 15px;
border: none;
outline: none;
input {
background: rgba(255, 255, 255, 0.95);
color: #333;
button {
background: linear-gradient(to right, #00c6ff, #0072ff);
`54
`
color: white;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
button:hover {
transform: scale(1.05);
/* Quote */
.quote {
margin-top: 10px;
text-align: center;
font-style: italic;
font-size: 14px;
color: #dbe5f1;
/* Flights */
.flight-item {
padding: 15px 20px;
background: rgba(255, 255, 255, 0.08);
border-left: 4px solid #00c6ff;
border-radius: 10px;
margin: 15px 0;
color: #fff;
.flight-item p {
font-size: 15px;
margin: 5px 0;
`55
`
.flight-item button {
margin-top: 10px;
background: #28a745;
.flight-item button:hover {
background: #218838;
/* Success */
.success-animation {
text-align: center;
animation: fadeIn 0.8s ease-in-out;
padding: 20px;
.checkmark {
font-size: 64px;
color: #00ffcc;
background: #0f0f0f;
width: 90px;
height: 90px;
margin: 0 auto 15px;
border-radius: 50%;
line-height: 90px;
box-shadow: 0 0 25px #00c6ff;
animation: glowPulse 1.2s ease-in-out infinite;
/* Helpers */
.hidden { display: none; }
`56
`
@keyframes fadeIn {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
@keyframes glowPulse {
0%, 100% { box-shadow: 0 0 8px #00c6ff; }
50% { box-shadow: 0 0 25px #00c6ff; }
span {
color: #00c6ff;
font-size: 400%!important;
[Link]
[Link]("load", () => {
const today = new Date().toISOString().split("T")[0];
[Link]("departureDate").min = today;
setTimeout(() => {
[Link]("loader").[Link] = "none";
[Link]("app").[Link]("hidden");
}, 1500);
});
// Search Flights
[Link]("searchForm").addEventListener("submit", function (event) {
[Link]();
const origin = [Link]("origin").[Link]();
const destination = [Link]("destination").[Link]();
const date = [Link]("departureDate").value;
`57
`
const resultsSection = [Link]("results-section");
[Link]("hidden");
let flightList = "";
for (let i = 1; i <= 10; i++) {
flightList += `
<div class='flight-item'>
<p><strong>Flight ${i}</strong>: ${origin} → ${destination}</p>
<p>Airline: SkyLine ${i}</p>
<p>Departure: ${date} | ${[Link]([Link]() * 12) + 1}:00 AM</p>
<p>Price:
${[Link]([Link]() * 4000) + 1500}</p>
<button onclick='bookFlight(${i})'>Book Now</button>
</div>`;
[Link]("results").innerHTML = flightList;
});
function bookFlight(flightNumber) {
[Link]("results-section").[Link]("hidden");
[Link]("payment-section").[Link]("hidden");
// Validate payment inputs
[Link]("paymentForm").addEventListener("submit", function (event) {
[Link]();
const cardNumber = [Link]("cardNumber").[Link]();
const expiry = [Link]("expiryDate").[Link]();
const cvv = [Link]("cvv").[Link]();
const cardPattern = /^[0-9]{13,19}$/;
const expiryPattern = /^(0[1-9]|1[0-2])\/\d{2}$/;
`58
`
const cvvPattern = /^[0-9]{3,4}$/;
if () {
alert("Invalid card number. It should be 13 to 19 digits.");
return;
if () {
alert("Invalid expiry format. Use MM/YY.");
return;
if () {
alert("Invalid CVV. It should be 3 or 4 digits.");
return;
[Link]("payment-section").[Link]("hidden");
[Link]("success-section").[Link]("hidden");
setTimeout(() => {
[Link]();
}, 6000);
});
`59
`
OUTPUT :
RESULT :
`60