Scribd
Upload
20 views55 pages

Finalwebmanual

Uploaded by

Akarsh AK
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
20 views55 pages

Finalwebmanual

Uploaded by

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

RV Institute of Technology and Management

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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<!-- Moving text -->
<marquee>Basic HTML Tags</marquee>

<!-- Different heading tags (h1 to h6) -->


<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<!-- Paragraph -->

1
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

<p>This is a paragraph. It contains text that provides information or content within a


section.</p>

<!-- Horizontal line -->


<hr>

<!-- Line break -->


<p>This text is on the first line.<br>This text is on the second line after a line break.</p>

<!-- Block quote -->


<blockquote>
This is a block quote. It is used to indicate that the text is a quotation from another source.
</blockquote>

<!-- Preformatted text -->


<pre>
This is preformatted text.
Line breaks and spaces are preserved.
</pre>

<!-- Different Logical Style -->


<p>
<b>This text is bold.</b><br>
<i>This text is italic.</i><br>
<u>This text is underlined.</u><br>
H<sub>2</sub>O (Water formula with subscript)<br>
E=mc<sup>2</sup> (Einstein's equation with superscript)
</p>
</body>
</html>

Output

Heading 1

2
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

Heading 2
Heading 3

Heading 4
Heading 5

Heading 6

This is a paragraph. It contains text that provides information or content within a


section.

This text is on the first line.


This text is on the second line after a line break.

This is a block quote. It is used to indicate that the text is a quotation from another
source.
This is preformatted text.
Line breaks and spaces are preserved.

This text is bold.


This text is italic.
This text is underlined.
H2O (Water formula with subscript)
E=mc2 (Einstein's equation with superscript)

3
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

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">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Table</title>
<style>
table {
width: 100%;
border-collapse: collapse;
text-align: center;
}
th, td {
border: 1px solid black;
padding: 10px;
}
th {
background-color: #4CAF50;
color: white;
}
tfoot td {
background-color: #f2f2f2;
}
.lab {
background-color: #ffcccb;
}
.elective {
background-color: #d9ead3;

4
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:nth-child(odd) {
background-color: #e6f7ff;
}
</style>
</head>
<body>

<h1>Class Time Table</h1>

<table>
<thead>
<tr>
<th>Day</th>
<th>9:00 - 10:00</th>
<th>10:00 - 11:00</th>
<th>11:00 - 12:00</th>
<th>12:00 - 1:00</th>
<th>1:00 - 2:00</th>
<th>2:00 - 3:00</th>
<th>3:00 - 4:00</th>
<th>4:00 - 5:00</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="9">This is the footer of the table.</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Monday</td>
<td>Math</td>

5
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

<td>Physics</td>
<td rowspan="2" class="lab">Physics Lab</td>
<td rowspan="2" class="lab">Physics Lab</td>
<td>Lunch</td>
<td>Elective</td

6
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

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.

/* Element Selectors */
h2 {
font-family: Arial, sans-serif;
color: #2c3e50;
text-transform: uppercase;
margin-bottom: 10px;
}

h3 {
font-family: 'Georgia', serif;
color: #34495e;
margin-bottom: 8px;
}

hr {
border: 0;
height: 2px;
background: #2ecc71;
margin: 20px 0;
}

p{
font-size: 16px;
line-height: 1.6;
color: #7f8c8d;
}

/* Class Selector */
.div-style {
background-color: #ecf0f1;
padding: 20px;

7
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

border: 1px solid #bdc3c7;


border-radius: 5px;
}

/* ID Selector */
#highlight {
background-color: #f1c40f;
color: #fff;
padding: 5px;
font-weight: bold;
}

/* Attribute Selector */
a[target="_blank"] {
color: #3498db;
text-decoration: none;
}

a[target="_blank"]:hover {
text-decoration: underline;
}

/* Pseudo-class Selector */
a:hover {
color: #e74c3c;
}

/* Descendant Selector */
div span {
color: #e67e22;
font-style: italic;
}

/* Child Selector */
div > p {
color: #1abc9c;

8
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

/* Adjacent Sibling Selector */


h3 + p {
font-size: 18px;
font-style: italic;
color: #9b59b6;
}

/* Universal Selector */
*{
box-sizing: border-box;
}

/* Grouping Selector */
time, img {
display: block;
margin: 10px 0;
}

/* Pseudo-element Selector */
p::first-line {
font-weight: bold;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Web Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>

9
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

<h2>Sample Heading 2</h2>


<h3>Sample Heading 3</h3>
<hr>
<div class="div-style">
<p id="highlight">This is a highlighted paragraph.</p>
<p>This is a paragraph within a div.</p>
<span>This is a span inside a div.</span>
</div>
<p>This is a general paragraph with a <time datetime="2024-08-19">timestamp</time>.</p>
<img src="image.jpg" alt="Sample Image">
<a href="https://example.com" target="_blank">Open in a new tab</a>

</body>
</html>

10
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

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 lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 20px;
}

h1 {
color: #333;
text-align: center;
}

table {
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

td {
padding: 10px;
vertical-align: top;

11
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

label {
font-size: 16px;
color: #555;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="url"],
select,
textarea {
width: 100%;
padding: 10px;
font-size: 14px;
color: #333;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #f9f9f9;
}

input[type="radio"],
input[type="checkbox"] {
margin-right: 10px;
}

.submit-btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;

12
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

font-size: 16px;
}

.submit-btn:hover {
background-color: #45a049;
}

.reset-btn {
background-color: #f44336;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}

.reset-btn:hover {
background-color: #e41e26;
}
</style>
</head>
<body>

<h1>Registration Form</h1>

<form action="#" method="post">


<table>
<tr>
<td><label for="fname">First Name:</label></td>
<td><input type="text" id="fname" name="fname" required></td>
</tr>
<tr>
<td><label for="lname">Last Name:</label></td>
<td><input type="text" id="lname" name="lname" required></td>
</tr>

13
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

<tr>
<td><label for="email">Email:</label></td>
<td><input type="email" id="email" name="email" required></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" id="password" name="password" required></td>
</tr>
<tr>
<td><label for="dob">Date of Birth:</label></td>
<td><input type="date" id="dob" name="dob" required></td>
</tr>
<tr>
<td><label for="gender">Gender:</label></td>
<td>
<input type="radio" id="male" name="gender" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>
</td>
</tr>
<tr>
<td><label for="phone">Phone Number:</label></td>
<td><input type="number" id="phone" name="phone" required></td>
</tr>
<tr>
<td><label for="website">Website:</label></td>
<td><input type="url" id="website" name="website"></td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<td><textarea id="address" name="address" rows="4" required></textarea></td>
</tr>
<tr>
<td><label for="country">Country:</label></td>
<td>

14
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

<select id="country" name="country" required>


<option value="usa">USA</option>
<option value="canada">Canada</option>
<option value="uk">UK</option>
<option value="australia">Australia</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td><label for="interests">Interests:</label></td>
<td>
<input type="checkbox" id="coding" name="interests" value="coding">
<label for="coding">Coding</label><br>
<input type="checkbox" id="music" name="interests" value="music">
<label for="music">Music</label><br>
<input type="checkbox" id="sports" name="interests" value="sports">
<label for="sports">Sports</label>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<button type="submit" class="submit-btn">Submit</button>
<button type="reset" class="reset-btn">Reset</button>
</td>
</tr>
</table>
</form>

</body>
</html>

Code 2:
<!DOCTYPE html>
<html lang="en">

15
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<style>
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
color: #333;
}

h1 {
text-align: center;
color: #0066cc;
}

form {
width: 50%;
margin: 0 auto;
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

table {
width: 100%;
}

table tr td {
padding: 10px;
}

label {
font-weight: bold;
color: #555;

16
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
select,
textarea {
width: 100%;
padding: 8px;
margin-top: 5px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
background-color: #f9f9f9;
}

input[type="radio"],
input[type="checkbox"] {
margin-right: 10px;
}

.submit-btn {
width: 100%;
padding: 10px;
background-color: #0066cc;
border: none;
color: white;
font-size: 18px;
cursor: pointer;
border-radius: 5px;
}

.submit-btn:hover {
background-color: #005bb5;

17
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

}
</style>
</head>
<body>

<h1>Registration Form</h1>

<form action="#" method="post">


<table>
<tr>
<td><label for="fname">First Name:</label></td>
<td><input type="text" id="fname" name="fname" required></td>
</tr>
<tr>
<td><label for="lname">Last Name:</label></td>
<td><input type="text" id="lname" name="lname" required></td>
</tr>
<tr>
<td><label for="email">Email:</label></td>
<td><input type="email" id="email" name="email" required></td>
</tr>
<tr>
<td><label for="password">Password:</label></td>
<td><input type="password" id="password" name="password" required></td>
</tr>
<tr>
<td><label for="dob">Date of Birth:</label></td>
<td><input type="date" id="dob" name="dob" required></td>
</tr>
<tr>
<td><label for="gender">Gender:</label></td>
<td>
<input type="radio" id="male" name="gender" value="male" required> Male
<input type="radio" id="female" name="gender" value="female" required> Female
</td>
</tr>

18
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

<tr>
<td><label for="hobbies">Hobbies:</label></td>
<td>
<input type="checkbox" id="reading" name="hobbies" value="Reading"> Reading
<input type="checkbox" id="traveling" name="hobbies" value="Traveling">
Traveling
<input type="checkbox" id="sports" name="hobbies" value="Sports"> Sports
</td>
</tr>
<tr>
<td><label for="country">Country:</label></td>
<td>
<select id="country" name="country">
<option value="India">India</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="Australia">Australia</option>
</select>
</td>
</tr>
<tr>
<td><label for="bio">Bio:</label></td>
<td><textarea id="bio" name="bio" rows="4" required></textarea></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" class="submit-btn" value="Register">
</td>
</tr>
</table>
</form>
</body>
</html>

19
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

20
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

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>Newspaper Layout</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}

header {
background-color: #2c3e50;
color: white;
padding: 20px;
text-align: center;
font-size: 2em;
}

nav {
background-color: #34495e;
padding: 15px;
text-align: center;
}

nav a {
color: white;

21
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

text-decoration: none;
margin: 0 15px;
font-size: 1.2em;
}

nav a:hover {
text-decoration: underline;
}

main {
display: flex;
margin: 20px;
}

aside {
background-color: #ecf0f1;
padding: 20px;
width: 25%;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
font-size: 1em;
}

section {
background-color: #ffffff;
padding: 20px;
width: 75%;
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
margin-left: 20px;
font-size: 1em;
}

article {
margin-bottom: 20px;
}

article h2 {

22
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

color: #2c3e50;
font-size: 1.5em;
}

article p {
color: #7f8c8d;
font-size: 1em;
line-height: 1.6;
}

figure {
margin: 20px 0;
text-align: center;
}

figure img {
max-width: 100%;
height: auto;
border: 1px solid #bdc3c7;
}

figure figcaption {
color: #95a5a6;
font-size: 0.9em;
}

table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}

table th, table td {


border: 1px solid #bdc3c7;
padding: 10px;
text-align: left;

23
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

table th {
background-color: #34495e;
color: white;
font-size: 1.1em;
}

table td {
background-color: #ecf0f1;
color: #2c3e50;
}

footer {
background-color: #2c3e50;
color: white;
padding: 10px;
text-align: center;
font-size: 1em;
position: fixed;
width: 100%;
bottom: 0;
}
</style>
</head>
<body>

<header>
My Online Newspaper
</header>

<nav>
<a href="#news">News</a>
<a href="#sports">Sports</a>
<a href="#entertainment">Entertainment</a>
<a href="#contact">Contact</a>

24
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

</nav>

<main>
<aside>
<h2>Latest Updates</h2>
<p>Stay informed with the latest news and updates from around the world.</p>
<ul>
<li><a href="#news1">Breaking News</a></li>
<li><a href="#news2">Weather Update</a></li>
<li><a href="#news3">Market Watch</a></li>
</ul>
</aside>

<section>
<article id="news">
<h2>Breaking News: Major Event in the City</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent
libero. Sed cursus ante dapibus diam.</p>
<figure>
<img src="news-image.jpg" alt="News Image">
<figcaption>Image caption goes here.</figcaption>
</figure>
</article>

<article id="sports">
<h2>Sports: Local Team Wins Championship</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent
libero. Sed cursus ante dapibus diam.</p>
<figure>
<img src="sports-image.jpg" alt="Sports Image">
<figcaption>Image caption goes here.</figcaption>
</figure>
</article>

<article id="entertainment">
<h2>Entertainment: New Movie Release</h2>

25
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent
libero. Sed cursus ante dapibus diam.</p>
</article>

<table>
<thead>
<tr>
<th>Day</th>
<th>Event</th>
<th>Location</th>
<th>Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>Monday</td>
<td>Conference</td>
<td>New York</td>
<td>10:00 AM</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Workshop</td>
<td>Chicago</td>
<td>11:00 AM</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Seminar</td>
<td>Los Angeles</td>
<td>2:00 PM</td>
</tr>
</tbody>
</table>
</section>
</main>

26
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

<footer>
&copy; 2024 My Online Newspaper | <a href="#contact">Contact Us</a>
</footer>

</body>
</html>

27
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

28
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

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.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="calculator">
<h1>Simple Calculator</h1>
<input type="text" id="num1" placeholder="Enter first number">
<input type="text" id="num2" placeholder="Enter second number (if needed)">
<div class="buttons">
<button onclick="calculate('sum')">Sum</button>
<button onclick="calculate('product')">Product</button>
<button onclick="calculate('difference')">Difference</button>
<button onclick="calculate('quotient')">Quotient</button>
<button onclick="calculate('remainder')">Remainder</button>
<button onclick="calculate('power')">Power</button>
<button onclick="calculate('square')">Square</button>
<button onclick="calculate('sqrt')">Square Root</button>
</div>
<div class="result">
<h2>Result: <span id="result">0</span></h2>
</div>
</div>

<script src="script.js"></script>
</body>
</html>

29
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

Styles.css
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.calculator {
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
width: 300px;
}

.calculator h1 {
margin-bottom: 20px;
font-size: 24px;
color: #333;
}

.calculator input {
width: 90%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}

30
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

.buttons button {
width: 45%;
padding: 10px;
margin: 5px;
border: none;
border-radius: 5px;
background-color: #3498db;
color: white;
font-size: 16px;
cursor: pointer;
}

.buttons button:hover {
background-color: #2980b9;
}

.result h2 {
margin-top: 20px;
font-size: 20px;
color: #333;
}

Script,js
function calculate(operation) {
const num1 = parseFloat(document.getElementById('num1').value);
const num2 = parseFloat(document.getElementById('num2').value);
let result = 0;

switch (operation) {
case 'sum':
result = num1 + num2;
break;
case 'product':
result = num1 * num2;
break;
case 'difference':

31
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

result = num1 - num2;


break;
case 'quotient':
if (num2 !== 0) {
result = num1 / num2;
} else {
alert("Cannot divide by zero");
return;
}
break;
case 'remainder':
result = num1 % num2;
break;
case 'power':
result = Math.pow(num1, num2);
break;
case 'square':
result = Math.pow(num1, 2);
break;
case 'sqrt':
if (num1 >= 0) {
result = Math.sqrt(num1);
} else {
alert("Cannot take the square root of a negative number");
return;
}
break;
default:
alert("Invalid operation");
return;
}

document.getElementById('result').textContent = result;
}

32
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

33
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

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 charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSON Operations</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.container {
max-width: 600px;
margin: auto;
}
textarea, input {
width: 100%;
margin-top: 10px;
padding: 8px;
}
button {
margin-top: 10px;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;

34
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

}
button:hover {
background-color: #0056b3;
}
.output {
margin-top: 20px;
padding: 10px;
border: 1px solid #ddd;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<div class="container">
<h1>JSON Operations</h1>

<!-- JSON to JavaScript Object -->


<h2>Convert JSON Text to JavaScript Object</h2>
<textarea id="jsonInput" placeholder='Enter JSON text here'></textarea>
<button onclick="convertJsonToObject()">Convert to Object</button>
<div class="output" id="jsonOutput"></div>

<!-- JSON Date Conversion -->


<h2>Convert JSON Date</h2>
<textarea id="jsonDateInput" placeholder='Enter JSON with date'></textarea>
<button onclick="convertJsonToDate()">Convert to Date</button>
<div class="output" id="dateOutput"></div>

<!-- JSON to CSV and CSV to JSON -->


<h2>Convert JSON to CSV and CSV to JSON</h2>
<textarea id="jsonCsvInput" placeholder='Enter JSON for CSV conversion'></textarea>
<button onclick="convertJsonToCsv()">Convert to CSV</button>
<div class="output" id="csvOutput"></div>

<textarea id="csvInput" placeholder='Enter CSV for JSON conversion'></textarea>


<button onclick="convertCsvToJson()">Convert to JSON</button>

35
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

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

<!-- Create Hash -->


<h2>Generate Hash from String</h2>
<input type="text" id="hashInput" placeholder="Enter string to hash">
<button onclick="generateHash()">Generate Hash</button>
<div class="output" id="hashOutput"></div>
</div>

<script src="script7.js"></script>
</body>
</html>

script7.js
// Function to convert JSON text to a JavaScript object
function convertJsonToObject() {
const jsonText = document.getElementById('jsonInput').value;
try {
const jsonObject = JSON.parse(jsonText);
document.getElementById('jsonOutput').textContent = JSON.stringify(jsonObject, null, 2);
} catch (error) {
document.getElementById('jsonOutput').textContent = 'Invalid JSON format';
}
}

// Function to parse date from JSON and display it in a readable format


function convertJsonToDate() {
const jsonDateText = document.getElementById('jsonDateInput').value;
try {
const jsonObject = JSON.parse(jsonDateText);

36
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

const date = new Date(jsonObject.date);


document.getElementById('dateOutput').textContent = `Parsed Date: ${date.toString()}`;
} catch (error) {
document.getElementById('dateOutput').textContent = 'Invalid JSON or date format';
}
}

// Function to convert JSON to CSV


function convertJsonToCsv() {
const jsonText = document.getElementById('jsonCsvInput').value;
try {
const jsonArray = JSON.parse(jsonText);
const keys = Object.keys(jsonArray[0]);
const csvData = [keys.join(',')];
jsonArray.forEach(obj => {
csvData.push(keys.map(key => obj[key]).join(','));
});
document.getElementById('csvOutput').textContent = csvData.join('\n');
} catch (error) {
document.getElementById('csvOutput').textContent = 'Invalid JSON format for CSV
conversion';
}
}

// Function to convert CSV to JSON


function convertCsvToJson() {
const csvText = document.getElementById('csvInput').value;
const lines = csvText.split('\n');

37
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

const headers = lines[0].split(',');


const jsonData = lines.slice(1).map(line => {
const values = line.split(',');
return headers.reduce((obj, header, index) => {
obj[header] = values[index];
return obj;
}, {});
});
document.getElementById('jsonFromCsvOutput').textContent = JSON.stringify(jsonData, null,
2);
}

// Function to create hash from string using Node.js crypto module


function generateHash() {
const inputText = document.getElementById('hashInput').value;

// This example uses SHA-256 algorithm, which will work in Node.js environment
try {
const crypto = require('crypto');
const hash = crypto.createHash('sha256').update(inputText).digest('hex');
document.getElementById('hashOutput').textContent = `Generated Hash: ${hash}`;
} catch (error) {
document.getElementById('hashOutput').textContent = 'Hashing only works in a Node.js
environment.';
}
}

38
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

39
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

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.

<?php
// File to store visitor count
$counter_file = "counter.txt";

// Check if the file exists, if not, create it and set the count to 0
if (!file_exists($counter_file)) {
$handle = fopen($counter_file, "w");
fwrite($handle, "0");
fclose($handle);
}

// Read the current count


$handle = fopen($counter_file, "r");
$counter = (int)fread($handle, filesize($counter_file));
fclose($handle);

// Increment the count


$counter++;

// Write the new count back to the file


$handle = fopen($counter_file, "w");
fwrite($handle, $counter);
fclose($handle);
?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

40
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

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


<title>Visitor Counter</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.counter-box {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
font-size: 2em;
color: #333;
}
p{
font-size: 1.2em;
color: #666;
}
</style>
</head>
<body>
<div class="counter-box">
<h1>Welcome to Our Website!</h1>
<p>You are visitor number: <strong><?php echo $counter; ?></strong></p>
</div>
</body>
</html>

41
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

Program8b.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Records</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 20px;
}
form {
margin: 20px auto;
width: 50%;
padding: 15px;
background: white;
border: 1px solid #ccc;
border-radius: 5px;

42
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

}
form div {
margin-bottom: 10px;
}
form label {
display: inline-block;
width: 100px;
}
form input {
padding: 8px;
width: 60%;
border: 1px solid #ccc;
border-radius: 4px;
}
table {
width: 50%;
border-collapse: collapse;
margin: 20px auto;
background: white;
}
th, td {
padding: 10px;
text-align: center;
border: 1px solid #ccc;
}
th {
background-color: #007BFF;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
.center {
text-align: center;
margin-top: 20px;
}

43
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

button {
padding: 10px 20px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="center">
<h1>Manage Student Records</h1>
</div>

<!-- Form to add student -->


<form action="program8b.php" method="POST">
<div>
<label for="name">Name:</label>
<input type="text" name="name" id="name" >
</div>
<div>
<label for="marks">Marks:</label>
<input type="number" name="marks" id="marks">
</div>
<div class="center">
<button type="submit" name="add">Add Student</button>
<button type="submit" name="sort">Sort and Display</button>
</div>
</form>
<?php

$servername = "localhost";

44
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

$username = "root";
$password = ""; // Update if necessary
$dbname = "school";

// Connect to MySQL server


$conn = new mysqli($servername, $username, $password);

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

// Check if database exists; if not, create it


$dbCheckQuery = "CREATE DATABASE IF NOT EXISTS $dbname";
if ($conn->query($dbCheckQuery) === TRUE) {
// Select the database
$conn->select_db($dbname);
} else {
die("Error creating database: " . $conn->error);
}

// Create the `students` table if it doesn't exist


$tableQuery = "
CREATE TABLE IF NOT EXISTS students (
id INT AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(50) NOT NULL,
marks INT NOT NULL
)";

if ($conn->query($tableQuery) === TRUE) {


// Table created successfully
} else {
die("Error creating table: " . $conn->error);
}
if ($_SERVER["REQUEST_METHOD"] == "POST") {

// Handling the 'Add Student' action

45
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

if (isset($_POST['add']) && !empty($_POST['name']) && isset($_POST['marks'])) {


// Add new student only if name and marks are filled
$name = $conn->real_escape_string($_POST['name']);
$marks = intval($_POST['marks']);
$sql = "INSERT INTO students (name, marks) VALUES ('$name', $marks)";

if ($conn->query($sql) === TRUE) {


// Redirect back to the form page
header("Location: program8b.html");
exit();
} else {
echo "Error adding student: " . $conn->error;
}
}

// Handling the 'Sort and Display' action


if (isset($_POST['sort'])) {
// Fetch all records
$sql = "SELECT * FROM students";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
// Store records in an array
$students = [];
while ($row = $result->fetch_assoc()) {
$students[] = $row;
}

// Selection Sort based on names


$n = count($students);
for ($i = 0; $i < $n - 1; $i++) {
$minIndex = $i;
for ($j = $i + 1; $j < $n; $j++) {
if (strcasecmp($students[$j]['name'], $students[$minIndex]['name']) < 0) {
$minIndex = $j;
}

46
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

}
// Swap the elements
$temp = $students[$i];
$students[$i] = $students[$minIndex];
$students[$minIndex] = $temp;
}

// Display sorted records


echo "<h1>Sorted Student Records (by Name)</h1>";
echo "<table border='1' style='width: 50%; margin: auto;'>";
echo "<tr><th>ID</th><th>Name</th><th>Marks</th></tr>";
foreach ($students as $student) {
echo "<tr>
<td>{$student['id']}</td>
<td>{$student['name']}</td>
<td>{$student['marks']}</td>
</tr>";
}
echo "</table>";
echo "<div style='text-align: center; margin-top: 20px;'>
<a href='program8b.html'><button>Go Back</button></a>
</div>";
} else {
echo "<h1>No records found to sort!</h1>";
echo "<div style='text-align: center; margin-top: 20px;'>
<a href='program8b.html'><button>Go Back</button></a>
</div>";
}
exit();
}
}

$conn->close();
?>
</body>
</html>

47
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

48
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery Manipulations</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.container {
margin-bottom: 20px;
}
button {
display: block;
margin: 10px 0;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
p, ul, .animated-div {
margin: 10px 0;
padding: 10px;
background-color: #f4f4f4;

49
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

border: 1px solid #ccc;


}
.animated-div {
width: 100px;
height: 100px;
background-color: #ffcc00;
text-align: center;
line-height: 100px;
}
</style>
<!-- Include jQuery library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div class="container">
<h2>Append Content</h2>
<p id="paragraph">This is a paragraph.</p>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<button id="appendButton">Append Content</button>
</div>

<div class="container">
<h2>Animate and Change State</h2>
<div class="animated-div">Box</div>
<button id="animateButton">Animate Box</button>
</div>

<!-- jQuery Script -->


<script>
$(document).ready(function() {
// a. Append content at the end of the existing paragraph and list
$('#appendButton').click(function() {

50
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

$('#paragraph').append(' Appended text.');


$('#list').append('<li>Appended item</li>');
});

// b. Change the state of the element with CSS style using animate() method
$('#animateButton').click(function() {
$('.animated-div').animate({
width: '200px',
height: '200px'
}, 1000, function() {
// c. Change the color of any div that is animated
$(this).css('background-color', '#ff5733');
});
});
});
</script>
</body>
</html>

51
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

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.

a. Use XMLHttpRequest (without jQuery) to add text content from a file by sending an Ajax request

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax and jQuery Examples</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.content {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
button {
margin: 5px 0;
padding: 10px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;

52
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<h1>Ajax and jQuery Examples</h1>
<button id="loadTextJS">Load Text (JS Ajax)</button>
<div id="contentJS" class="content"></div>

<button id="loadTextJQ">Load Text (jQuery Ajax)</button>


<div id="contentJQ" class="content"></div>

<button id="loadJSON">Load JSON (getJSON)</button>


<div id="contentJSON" class="content"></div>

<button id="parseJSON">Parse JSON</button>


<div id="parsedJSON" class="content"></div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script10.js"></script>
</body>
</html>

script10.js
document.getElementById('loadTextJS').addEventListener('click', function () {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'prgm10.txt', true);
xhr.onload = function () {
if (this.status === 200) {
document.getElementById('contentJS').textContent = ;this.responseText
} else {
document.getElementById('contentJS').textContent = 'Failed to load content.';
}
};

53
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

xhr.send();
});

$('#loadTextJQ').click(function () {
$.ajax({
url: 'prgm10.txt',
method: 'GET',
success: function (data) {
$('#contentJQ').text(data);
},
error: function () {
$('#contentJQ').text('Failed to load content.');
}
});
});

$('#loadJSON').click(function () {
$.getJSON('prgm10.json', function (data) {
const content = `<p>Name: ${data.name}</p><p>Age: ${data.age}</p><p>City:
${data.city}</p>`;
$('#contentJSON').html(content);
}).fail(function () {
$('#contentJSON').text('Failed to load JSON.');
});
});

$('#parseJSON').click(function () {
const jsonString = '{"name": "Alice", "age": 25, "city": "New York"}';
const parsedData = JSON.parse(jsonString); // Using parseJSON
const content = `<p>Name: ${parsedData.name}</p><p>Age: ${parsedData.age}</p><p>City:
${parsedData.city}</p>`;
$('#parsedJSON').html(content);
});

54
V SEM WEB TECHNOLOGY LAB(BCSL504)
RV Institute of Technology and Management

55
V SEM WEB TECHNOLOGY LAB(BCSL504)

You might also like