Web Lab Programs

1.Develop the HTML page named as “Myfirstwebpage.html”.
Add the following tags with

relevant content. 1. Set the title of the page as “My First Web Page” 2. Within the body use the
following tags: a) Moving text = “Basic HTML Tags” b) Different heading tags (h1 to h6) c)
Paragraph d) Horizontal line e) Line Break f) Block Quote g) Pre tag h) Different Logical Style
<!DOCTYPE html>
<html>
<head>
<title>My First Web page</title>

<link href="web.css" rel="stylesheet">
</head>
<body>
<b> <u><marquee>Basic HTML tags </marquee></u></b>
<h1>Headings</h1>
<h2>Paragraphs</h2>
<h3>Horizontal line</h3>
<h4>Black Quote</h4>
<h5>Pre tag</h5>
<h6>Moving Text</h6>
<p>HTML<sup>(Hypertext Markup Language)</sup>Hypertext Markup

Language (HTML) is the standard markup language for documents designed to be displayed in
a web browser.
It defines the content and structure of web content.It is often assisted by
technologies such as Cascading Style Sheets <su[>(CSS)</sup> and scripting languages such
as <sub>JavaScript</sub>, a programming language.
<hr>
<p> In HTML and CSS, syntax is the order in which elements appear or are
written, meaning the grammar and spelling of the language.
Syntax rules are in place to ensure the languages are always written in a way
that can be read or interpreted by a computer.</p>
<hr>
<p>Here is quote from W3 schools</p>
<blackquote>W3Schools is a freemium educational website for learning coding
online. Initially released in 1998, it derives its name from the World Wide
Web but is not affiliated with the W3 Consortium.<br> W3Schools offers courses
covering many aspects of web development. W3Schools also publishes free HTML templates.
<hr>
<b><u><p>A self-closing tag </p></u></b>
<pre>This is a tag that combines an opening and closing tag into one, and is
used to indicate that there is no content between the tags. Self-closing tags are also known as
empty tags.</pre>
</body>
</html>
OUTPUT-
2.Develop the HTML page named as “Table.html” to display your class time table. a) Provide the
title as Time Table with table header and table footer, row-span and col-span etc. b) Provide
various colour options to the cells (Highlight the lab hours and elective hours with different
colours.) c) Provide colour options for rows.
<!DOCTYPE html>
<html lang="en">
<style>
table,th,td{
border:1px solid black;
height:50px;
background-color:"blue";
}
</style>
<head>
<title>Time Table</title>
</head>
<body>
<table>
<th colspan="9">5TH SEMESTER TIME TABLE</th>

<tr>
<th>Day/Time</th>
<th>9.00-9.55</th>
<th>9.55-10.50</th>
<th>11.10-12.05</th>
<th>12.05-13.00</th>
<th>13.00-14.00</th>
<th>14.00-14.55</th>
<th>15.10-16.00</th>
<th>16.00-16.55</th>
</tr>
<tr>
<td>Monday</td>
<td>AI</td>
<td>SE</td>
<td>TOC</td>
<td>RM</td>
<th rowspan="5" text-align:"vertical">LUNCH BREAK</th>
<td>CN</td>
<td colspan="2" style="background-color:yellow">Mini project</td>
</tr>
<tr>
<td>Tuesday</td>
<td>CN</td>
<td>SE</td>
<td>TOC</td>
<td>counselling</td>
<td>RM</td>
<td colspan="2" style="background-color:yellow">web technology
lab</td>
</tr>
<tr>
<td>Wednesday</td>
<td>RM</td>
<td>CN</td>
<td>SE</td>
<td style="background-color:yellow">EVS</td>
<td colspan="2" style="background-color:yellow">MINI PROJECT</td>
<td>certification course</td>
</tr>
<tr>
<td>Thursday</td>
<td>CN</td>
<td colspan="2" style="background-color:yellow">CN lab</td>
<td>TOC</td>
<td>TUTORIAL</td>
<td colspan="2">LIBRARY</td>
<t
</tr>
<tr>
<td>Friday</td>
<td>TOC</td>
<td>SE</td>
<td>AI</td>
<td>Remedial</td>
<td colspan="3">NSS/YOGA/PE</td>
</tr>
</table>
</body>
OUTPUT-
3.Develop an external style sheet named as “style.css” and provide different styles for h2, h3,
hr, p, div, span, time, img & a tags. Apply different CSS selectors for tags and demonstrate the
significance of each.
<!DOCTYPE html>
<html>
<head>
<title>CSS SELECTOR</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h2>A J INSTITUTE OF ENGINEERING AND TECHNOLOGY</h2>
<img src="aj.jfif">
<h3>Department of Computer Science And Engineering</h3>
<hr>
<p>A J Institute of Engineering & Technology is promoted by Laxmi Memorial
Education Trust which was registered in the year 1991 in the memory of Late Laxmi Shetty,
mother of Dr. A. J. Shetty, who is the President and Managing Director of the Trust.
<div>Welcome to the Computer Science and Engineering (CSE) Department at

AJIET, a hub of innovation and academic excellence.<br>
We are proud to share that our department is accredited by the National Board of
Accreditation (NBA), a testament to our commitment to maintaining high academic standards
and continuous improvement.
</div>
<p>Explore, Innovate,and Engineer the <span>Future</span></p>
<a href="https://www.ajiet.edu.in/">TO KNOW MORE ABOUT US,CLICK!!</a>
<div class="move"><marquee><p>WE ARE AVAILABLE FROM </time>9.00PM

</time> to <time> 5.00AM</time></p></marquee></div>
</body>
</html>
body{
background-image: linear-gradient(blue,yellow,yellow);
font-family:georgia,serif;
text-align:center;
}
h2{
text-align:center;
font-family:georgia,serif;
background-color:yellow;
}
h3{
}
span{
background-color:#FFF8DC;
font-family:fantasy;
}
marquee{
}
a{
font-size:18px;
font-family:
}
OUTPUT-
4.Develop HTML page named as “registration.html” having variety of HTML input elements with
background colors, table for alignment & provide font colors & size using CSS styles.
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form>
<h2>STUDENT REGISTRATION FORM</h2>
<label>NAME:</label>
<input type="text" id="name" placeholder="Enter Your Name">

<br><br>
<label>USN:</label>
<input type="text" id="usn" placeholder="Enter Your USN">

<br><br>
<label>AGE:</label>
<input type="number" id="age" placeholder="Enter your Age">

<br><br>
<label>BRANCH:</label>
<select id="branch">
<option>Computer Science And Engineering</option>
<option>Information Science And Engineering</option>
<option>Electronics And Communication Engineering</option>
<option>Artificial Intelligence And Machine Learning
</select>
<br>
<br>
<button>Submit</button>
</form>
</body>
</html>
h2{
Text-align:center;
text-decoration:underline;
font-family:Sans-serif;
font-weight:20px;
}
body{
text-align:center;
margin-top:200px;
}
button:hover{
width:100px;
height:50x;
background-color:yellow;
}
label{
text-decoration:bold;
}
form{
border:2px solid black;
background-color:aqua;
margin:2rem auto;
width:500px;
height:300px;
}
OUTPUT-
5.Develop HTML page named as “newpaper.html” having variety of HTML semantic elements
with background colors, text-colors & size for figure, table, aside, section, article, header,
footer… etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Daily Chronicle</title>
<style>
body {
font-family: 'Georgia', serif;
line-height: 1.6;
color: #333;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
background-color: #f4f4f4;
}
header {
background-color: #1a1a1a;
color: #fff;
padding: 20px;
text-align: center;
}
header h1 {
margin: 0;
font-size: 2.5em;
}
nav {
background-color: #333;
color: #fff;
padding: 10px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
}
nav ul li {
margin: 0 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
display: flex;
margin-top: 20px;
}
section {
flex: 2;
margin-right: 20px;
}
article {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
article h2 {
color: #1a1a1a;
font-size: 1.8em;
}
aside {
flex: 1;
background-color: #e6e6e6;
padding: 20px;
}
figure {
margin: 0;
text-align: center;
}
figure img {
max-width: 100%;
height: auto;
}
figcaption {
font-style: italic;
color: #666;
font-size: 0.9em;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
th {
}
footer {
background-color: #1a1a1a;
color: #fff;
text-align: center;
padding: 10px;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<h1>The Daily Chronicle</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Politics</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Sports</a></li>
<li><a href="#">Entertainment</a></li>
</ul>
</nav>
<main>
<section>
<article>
<h2>Breaking News: Major Technological Breakthrough</h2>
<p>Scientists have announced a groundbreaking discovery in the field of quantum
computing, potentially revolutionizing the tech industry.</p>
<figure>
<img
src="https://www.cnet.com/a/img/resize/c7cb26e927bebaa784fb55a01e71d7fecb15d2e3/hub/20
19/06/26/3f76e99d-8055-46f3-8f27-558ee276b665/20180405-ibm-q-quantum-computer-02.jpg?
auto=webp&fit=crop&height=675&width=1200" alt="Quantum Computer">
<figcaption>A state-of-the-art quantum computer at the research
facility</figcaption>
</figure>
</article>
<article>
<h2>Local Sports Team Wins Championship</h2>
<p>In a thrilling match, our local team secured victory in the national championship,
bringing pride to our city.</p>
<table>
<tr>
<th>Team</th>
<th>Score</th>
</tr>
<tr>
<td>Local Heroes</td>
<td>3</td>
</tr>
<tr>
<td>Visiting Challengers</td>
<td>2</td>
</tr>
</table>
</article>
</section>
<aside>
<h3>Weather Update</h3>
<p>Expect sunny skies with a high of 75°F (24°C) today.</p>
<h3>Upcoming Events</h3>
<ul>
<li>City Festival - This Weekend</li>
<li>Tech Conference - Next Month</li>
<li>Charity Run - In Two Weeks</li>
</ul>
</aside>
</main>
<footer>
<p>© 2024 The Daily Chronicle. All rights reserved.</p>
</footer>
</body>
</html>
OUTPUT-
6.Apply HTML, CSS and JavaScript to design a simple calculator to perform the following
operations: sum, product, difference, remainder, quotient, power, square-root and square.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Calculator</title>
<style>
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(45deg, green, black);
min-height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}
form {
width: 300px;
border: 2px solid black;
padding: 15px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}
input[name="display"] {
background-color: blue;
border: none;
color: white;
width: 100%;
padding: 20px;
font-size: 24px;
text-align: right;
border-radius: 5px;
box-sizing: border-box;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.buttons input[type="button"] {
color: white;
padding: 15px;
font-size: 18px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.buttons input[type="button"]:hover {
}
/* Styling operators differently */

.operator {
background-color: orange;
}
.operator:hover {
background-color: darkorange;
}
.clear {
background-color: red;
grid-column: span 2;
}
.clear:hover {
background-color: darkred;
}
.equal {
background-color: green;
grid-column: span 2;
}
.equal:hover {
background-color: darkgreen;
}
</style>
</head>
<body>
<form name="calculator">
<input type="text" name="display" disabled title="display" />
<div class="buttons">
<input type="button" value="7" onclick="calculator.display.value += '7'">
<input type="button" value="/" onclick="calculator.display.value += '/'" class="operator">

<input type="button" value="*" onclick="calculator.display.value += '*'" class="operator">

<input type="button" value="-" onclick="calculator.display.value += '-'" class="operator">

<input type="button" value="." onclick="calculator.display.value += '.'">
<input type="button" value="+" onclick="calculator.display.value += '+'" class="operator">
<input type="button" value="%" onclick="calculator.display.value += '%'"
class="operator">
<input type="button" value="^" onclick="calculator.display.value += '**'"
class="operator">
<input type="button" value="^2" onclick="calculator.display.value += '**2'"
class="operator">
<input type="button" value="root" onclick="calculator.display.value += '**(1/2)'"
class="operator">
<input type="button" value="C" onclick="calculator.display.value = ''" class="clear">

<input type="button" value="=" onclick="calculator.display.value =
eval(calculator.display.value)" class="equal">
</div>
</form>
</body>
</html>
OUTPUT-
7.Develop JavaScript program (with HTML/CSS) for: a) Converting JSON text to JavaScript
Object b) Convert JSON results into a date c) Converting From JSON To CSV and CSV to
JSON d) Create hash from string using crypto.createHash() method
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>JSON/CSV Converter and Hash Generator</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<style>
body{
line-height:1.6;
margin:0;
padding:20px;
background-color:#f4f4f4;
}
.container{
max-width:800px;
margin:auto;
background:white;
padding:20px;
border-radius:5px;
box-shadow:0 0 10px rgba(0,0,0,0.1);
}
h1{
color:#333;
}
textarea{
width:100%;
height:100px;
margin-bottom:10px;
}
button{
background-color:#4CAF50;
color:white;
padding:10px 15px;
border:none;
border-radius:4px;
cursor:pointer;
margin-right:10px;
}
button:hover{
background-color:#45a049;
}
#result{
margin-top:20px;
padding:10px;
background-color:#e7e7e7;
border-radius:4px;
}
</style>
</head>
<body>
<div class="container">
<h1>JSON/CSV Converter and Hash Generator</h1>
<h2>a)Convert JSON to JavaScript Object</h2>

<textarea id=jsonInput" placeholder="Enter JSON here"></textarea>
<button onclick="convertJsonToObject()">Convert to Object</button>
<h2>b)Convert JSON to Date</h2>

<textarea id=jsonDateInput" placeholder='Enter JSON date
string(e.g.,{"date":"2023-05-15T12:00:00Z"})'></textarea>
<button onclick="convertJsonToDate()">Convert to Date</button>
<h2>c)Convert JSON to CSV and CSV to JSON</h2>

<textarea id=dataInput" placeholder='Enter JSON or CSV
here'></textarea>
<button onclick="convertJsonToCsv()">JSON to CSV</button>
<button onclick="convertCsvToJson()">CSV to JSON</button>
<h2>d)create Hash from string</h2>

<textarea id="hashInput" placeholder='Enter string to hash'></textarea>
<button onclick="createHash()">Generate Hash</button>
<div id="result"></div>
</div>
<script>
function convertJsonToObject(){
try{
const jsonInput=document.getElementById('jsonInput').value;
const jsObject=JSON.parse(jsonInput);
document.getElementById('result').innerText='Converted
Object:'+JSON.stringify(jsObject,null,2);
}
catch(error){
document.getElementById('result').innerText='Error:'+error.message;
}
}
function convertJsonToDate(){
try{
const jsonInput=document.getElementById('jsonDateInput').value;
const jsObject=JSON.PARSE(jsonInput);
const date=new Date(jsObject.date);
Date:'+date.toString();
}catch(error){
}
}
function convertJsonToCsv(){
try{
const
jsonInput=document.getElementById('dataInput').value;
const jsObject=JSON.parse(jsonInput);
const headers=Object.keys(jsObject[0]);
const csvRows=[headers.join(','),
...jsObject.map(row=>headers.map(fieldName=>JSON.stringify(row[fieldName])).join(','))];
const csvString=csvRows.join('\n');
document.getElementById('result').innerText='Converted CSV:\n'+csvString;
}catch(error){
}
}
function convertCsvToJson(){
try{
const
csvInput=document.getElementById('dataInput').value;
const lines=csvInput.split('\n');
const headers=lines[0].split(',');
const jsonArray=lines.slices(1).map(line=>{
const values=line.split(',');
return headers.reduce((obj,header,index)=>{
obj[header]=values[index];
return obj;
},{});
});
JSON:\n'+JSON.stringify(jsobArray,null,2);
}catch(error){
}
}
function createHash(){
try{
const input=document.getElementById('hashInput').value;
const hash=CryptoJS.SHA256(input);
document.getElementById('result').innerText='Generated
Hash(SHA256):'+hash;
}catch(error){
}
}
</script>
</body>
</html>
OUTPUT-
8.a. Develop a PHP program (with HTML/CSS) to keep track of the number of visitors visiting
the web page and to display this count of visitors, with relevant headings. b. Develop a PHP
program (with HTML/CSS) to sort the student records which are stored in the database using
selection sort.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Visitor Counter</title>
<style>
body {
font-family: Arial, sans-serif; line-height: 1.6;

margin: 0; padding: 20px;
.container {
max-width: 600px; margin: auto; background: white; padding: 20px; border-radius: 5px;
h1 {
color: #333;
text-align: center;
}
.counter {
font-size: 24px; text-align: center; margin-top: 20px;

}
</style>
</head>
<body>
<h1>Welcome to Our Website</h1>
<div class="counter">
<?php
$counterFile = 'visitor_count.txt';
// Read the current count
if (file_exists($counterFile)) {
$count = (int)file_get_contents($counterFile);
} else {
$count = 0;
// Increment the count
$count++;
// Save the new count

file_put_contents($counterFile, $count);
// Display the count
echo "<h2>Visitor Count</h2>";
echo "<p>You are visitor number: $count</p>";
?>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Student Record Sorter</title>
<style>
body {
font-family: Arial, sans-serif; line-height: 1.6;

margin: 0; padding: 20px;
.container {
max-width: 800px; margin: auto; background: white; padding: 20px; border-radius: 5px;
}
h1 {
color: #333;
text-align: center;
table {
width: 100%;
border-collapse: collapse; margin-top: 20px;

}
th, td {
padding: 10px;
border: 1px solid #ddd; text-align: left;

}
th {
</style>
</head>
<body>
<h1>Student Records</h1>
<?php
// Database connection details
$host = 'localhost';
$dbname = 'student_records';
$username = 'root';
$password = '';
try {
$pdo = new PDO("mysql:host=$host;dbname=$dbname", $username,

$password);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// Fetch student records
$stmt = $pdo->query("SELECT * FROM students");
$students = $stmt->fetchAll(PDO::FETCH_ASSOC);
// Selection sort function

function selectionSort(&$arr, $n) {
for ($i = 0; $i < $n - 1; $i++) {
$min_idx = $i;
for ($j = $i + 1; $j < $n; $j++) {
if ($arr[$j]['gpa'] < $arr[$min_idx]['gpa']) {
$min_idx = $j;
}
if ($min_idx != $i) {
$temp = $arr[$i];
$arr[$i] = $arr[$min_idx];
$arr[$min_idx] = $temp;
// Sort students by GPA

selectionSort($students, count($students));
// Display sorted student records

echo "<table>";
echo "<tr><th>ID</th><th>Name</th><th>GPA</th></tr>"; foreach ($students as $student) {

echo "<tr>";
echo "<td>" . htmlspecialchars($student['id']) . "</td>"; echo "<td>" .

htmlspecialchars($student['name']) . "</td>"; echo "<td>" . htmlspecialchars($student['gpa']) .
"</td>"; echo "</tr>";
}
echo "</table>";
} catch(PDOException $e) {
echo "Connection failed: " . $e->getMessage();
?>
</div>
</body>
</html>
OUTPUT-
9.Develop jQuery script (with HTML/CSS) for: a. Appends the content at the end of the existing
paragraph and list. b. Change the state of the element with CSS style using animate() method c.
Change the color of any div that is animated.
<!DOCTYPE html>
<head>
<title>jQuery Append,Animate ad Color change Demo</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body{
line-height:1.6;
margin:0;
padding:20px;
}
.container{
max-width:800px;
margin:auto;
background:white;
padding:20px;
border-radius:5px;
}
h1,h2{
color:#333;
}
.box{
width:100px;
height:100px;
background-color:#3498db;
margin:L20px 0;
}
button{
padding:10px 15px;
background-color:#2ecc71;
color:white;
order:none;
border-radius:5px;
cursor:pointer;
margin-right:10px;
}
button:hover{
background-color:#27ae60;
}
</style>
</head>
<body>
<h1>jQuery Demonstration</h1>
<h2>a.Append Content</h2>
<p id="existingParagraph">This is an existing paragraph</p>
<ul id="existingList">
<li>Existing item 1</li>
<li> Existing item 2</li>
</ul>
<button id="appendButton">Append Content</button>
<h2>b.Animate Element</h2>
<div id="animateBox" class="box"></div>
<button id="animateButton">Animate Box</button>
<h2>c.Change color of Animated Div</h2>

<div id="colorBox" class="box"></div>
<button id="ColorAnimateButton">Animate and Change Color</button>
</div>
<script>
$(document).ready(function(){
//a.Append Content
$("#appendButton").click(function(){
$("#existingParagraph").append("This content is appended");
$("#existingList").append("<li>Appended item</li>");
});
//b.Animate Element
$("#animateButton").click(function(){
$("#animateBox").animate({width:
"200px",
height:"20px",
opacity:0.5
},1000);
});
//C.Animate and change Color
$("#ColorAnimateButton").click(function(){
$("#colorBox").animate({
width:"200px",
height:"200px"
},{
duration:1000,
step:function(now,fx){
if(fx.prop==="width"){
$(this).css("background-color",`rgb(${Math.round(now)}, 52, 219)`);
}
}
});
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<head>
<title>jQuery Append,Animate ad Color change Demo</title>
<style>
body{
line-height:1.6;
margin:0;
padding:20px;
}
.container{
max-width:800px;
margin:auto;
background:white;
padding:20px;
border-radius:5px;
}
h1,h2{
color:#333;
}
.box{
width:100px;
height:100px;
background-color:#3498db;
margin:L20px 0;
}
button{
padding:10px 15px;
background-color:#2ecc71;
color:white;
order:none;
border-radius:5px;
cursor:pointer;
margin-right:10px;
}
button:hover{
background-color:#27ae60;
}
</style>
</head>
<body>
<h1>jQuery Demonstration</h1>
<h2>a.Append Content</h2>
<p id="existingParagraph">This is an existing paragraph</p>
<ul id="existingList">
<li>Existing item 1</li>
<li> Existing item 2</li>
</ul>
<button id="appendButton">Append Content</button>
<h2>b.Animate Element</h2>
<div id="animateBox" class="box"></div>
<button id="animateButton">Animate Box</button>
<h2>c.Change color of Animated Div</h2>

<div id="colorBox" class="box"></div>
<button id="ColorAnimateButton">Animate and Change Color</button>
</div>
<script>
$(document).ready(function(){
//a.Append Content
$("#appendButton").click(function(){
$("#existingParagraph").append("This content is appended");
$("#existingList").append("<li>Appended item</li>");
});
//b.Animate Element
$("#animateButton").click(function(){
$("#animateBox").animate({width:
"200px",
height:"200px",
opacity:0.5
},1000);
});
//C.Animate and change Color
$("#ColorAnimateButton").click(function(){
$("#colorBox").animate({
width:"200px",
height:"200px"
},{
duration:1000,
step:function(now,fx){
if(fx.prop==="width"){
$(this).css("background-color",`rgb(${Math.round(now)}, 152, 219)`);
}
}
});
});
});
</script>
</body>
</html>
OUTPUT-
10.Develop a JavaScript program with Ajax (with HTML/CSS) for: a. Use ajax() method (without
Jquery) to add the text content from the text file by sending ajax request. b. Use ajax() method
(with Jquery) to add the text content from the text file by sending ajax request. c. Illustrate the
use of getJSON() method in jQuery d. Illustrate the use of parseJSON() method to display
JSON values.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ajax Demo program</title>
<style>
body{
line-height:1.6;
margin:0;
padding:20px;
}
.container{
max-width:800px;
margin:auto;
background:white;
padding:20px;
border-radius:5px;
}
h1{
color:#333;
}
h2{
color:#666;
}
button{
background-color:#4cAF50;
border:none;
color:white;
padding:10px 20px;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:16px;
margin:4px 2px;
cursor:pointer;
border-radius:4px;
}
pre{
border:1px solid #ddd;
border-radius:4px;
padding:10px;
white-space:pre-wrap;
word-wrap:break-word;
}
</style>
</head>
<body>
<div class= "container">
<h1>Ajax Demo Program</h1>
<h2>Ajax-like operation without jQuery</h2>
<button onclick="operationWithoutjQuery()">Perform Operation(without
jQuery)</button>
<pre id="result-a"></pre>
<h2>b.Ajax-like operation with jQuery</h2>
<button onclick="operationWithjQuery()">Perform Operation(with
jQuery)</button>
<pre id="result-b"></pre>
<h2>c.jQuery-like getJSON() method</h2>
<button onclick="getJSONOperation()">get JSON</button>
<pre id="result-c"></pre>
<h2>d.jQuery parseJSON() method</h2>
<button onclick="parseJSONExample()">Parse JSON</button>
<pre id="result-d"></pre>
</div>
<script>
//simulated data
const simulatedData={
text:"This is a sample text from a simulated server response",
json:{
name:"John Doe",
age:30,
city:"New York"
}
};
//a
function operationWithoutjQuery(){
setTimeout(function(){
document.getElementById("result-a").textContent=simulatedData.text;
},500);
}
//b
function operationWithjQuery(){
$.Deferred(function(deferred){
deferred.resolve(simulatedData.text);
},500);
}).done(function(result){
$("#result-b").text(result);
});
}
//c
function getJSONOperation(){
$.Deferred(function(deferred){
deferred.resolve(simulatedData.json);
},500);
}).done(function(result){
$("#result-c").text(JSON.stringify(result,null,2));
});
}
//d
function parseJSONExample(){
var jsonString=JSON.stringify(simulatedData.json);
var jsonObject=$.parseJSON(jsonString);
$("#result-d").text(JSON.stringify(jsonObject,null,2));
}
</script>
</body>
</html>
OUTPUT-

Web Lab Programs

Uploaded by

Document Informationclick to expand document information

Copyright:

Available Formats

Web Lab Programs

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Lab Programs

Uploaded by

Copyright:

Available Formats

1.Develop the HTML page named as “Myfirstwebpage.html”.

Add the following tags with

<p>HTML<sup>(Hypertext Markup Language)</sup>Hypertext Markup

<th colspan="9">5TH SEMESTER TIME TABLE</th>

<div>Welcome to the Computer Science and Engineering (CSE) Department at

<div class="move"><marquee><p>WE ARE AVAILABLE FROM </time>9.00PM

<input type="text" id="name" placeholder="Enter Your Name">

<input type="text" id="usn" placeholder="Enter Your USN">

<input type="number" id="age" placeholder="Enter your Age">

/* Styling operators differently */

<input type="button" value="4" onclick="calculator.display.value += '4'">

<input type="button" value="1" onclick="calculator.display.value += '1'">

<input type="button" value="0" onclick="calculator.display.value += '0'">

<input type="button" value="C" onclick="calculator.display.value = ''" class="clear">

<h2>a)Convert JSON to JavaScript Object</h2>

<h2>b)Convert JSON to Date</h2>

<h2>c)Convert JSON to CSV and CSV to JSON</h2>

<h2>d)create Hash from string</h2>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

font-family: Arial, sans-serif; line-height: 1.6;

font-size: 24px; text-align: center; margin-top: 20px;

<h1>Welcome to Our Website</h1>

// Read the current count

// Increment the count

// Save the new count

echo "<h2>Visitor Count</h2>";

echo "<p>You are visitor number: $count</p>";

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Student Record Sorter</title>

font-family: Arial, sans-serif; line-height: 1.6;

border-collapse: collapse; margin-top: 20px;

border: 1px solid #ddd; text-align: left;

$pdo = new PDO("mysql:host=$host;dbname=$dbname", $username,

// Fetch student records

$stmt = $pdo->query("SELECT * FROM students");

// Selection sort function

for ($j = $i + 1; $j < $n; $j++) {

if ($arr[$j]['gpa'] < $arr[$min_idx]['gpa']) {

// Sort students by GPA

// Display sorted student records

echo "<tr><th>ID</th><th>Name</th><th>GPA</th></tr>"; foreach ($students as $student) {

echo "<td>" . htmlspecialchars($student['id']) . "</td>"; echo "<td>" .

echo "Connection failed: " . $e->getMessage();

<h2>c.Change color of Animated Div</h2>

<h2>c.Change color of Animated Div</h2>

You might also like