WD D2D13 Final
Uploaded by
jmegh03WD D2D13 Final
Uploaded by
jmegh03Enrollment no.
:- 230843116002
Practical-1
Aim : Design webpage using a simple HTML.
1.1 :- Write a program in html containing following tag
• <h1 to h6></h1 to /h6>
• <p></p>
• <br> and <hr>
•
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>practical 1.1</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is a paragraph of Ayush Prajpati.</p>
<br>
<hr>
<p>This is another paragraph of text, separated by a line break and a horizontal rule.</p>
<p>The non-breaking space ( ) is used to keep characters together, such as in
"5 $".</p>
</body>
</html>
1
Enrollment no. :- 230843116002
Output:
2
Enrollment no. :- 230843116002
1.2 :- Write a program in html which demonstrate all the formatting tag.
Code :
<!DOCTYPE html>
<html>
<head>
<title>Practical 1.2</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<h1>HTML Formatting Tags</h1>
<hr>
<!-- Bold and Strong Text -->
<p>Normal text, <b>bold text</b>, and <strong>strong text</strong>.</p>
<!-- Italic and Emphasized Text -->
<p>Normal text, <i>italic text</i>, and <em>emphasized text</em>.</p>
<!-- Underlined Text -->
<p>Normal text, <u>underlined text</u>.</p>
<!-- Strikethrough Text -->
<p>Normal text, <s>strikethrough text</s>.</p>
<!-- Subscript and Superscript Text -->
<p>This is normal text, <sub>subscript text</sub>, and <sup>superscript text</sup>.</p>
<!-- Marked Text -->
<p>Normal text, <mark>marked text</mark>.</p>
<!-- Small Text -->
<p>Normal text, <small>small text</small>.</p>
<!-- Big Text -->
<p>Normal text, <big>big text</big>.</p>
<!-- Font Color and Size -->
<p>Normal text, <font color="red" size="5">red and large text</font>.</p>
<!-- Highlighted Text -->
<p>Normal text, <highlight>highlighted text</highlight>.</p>
3
Enrollment no. :- 230843116002
<!-- Code and Variable Text -->
<p>Normal text, <code>code text</code>, and <var>variable text</var>.</p>
<!-- Sample and Keyboard Text -->
<p>Normal text, <samp>sample text</samp>, and <kbd>keyboard text</kbd>.</p>
</body>
</html>
Output :
4
Enrollment no. :- 230843116002
1.3 :- Write a program in html which demonstrate <font> tag.
Code:
<!DOCTYPE html>
<html>
<head>
<title>ractical 1.3</title>
</head>
<body>
<h1>HTML Font Tag</h1>
<hr>
<!-- Font Face -->
<p>Normal text, <font face="Arial">Arial font</font>, and <font face="Times New
Roman">Times New Roman font</font>.</p>
<!-- Font Size -->
<p>Normal text, <font size="1">very small text</font>, <font size="5">very large
text</font>.</p>
<!-- Font Color -->
<p>Normal text, <font color="red">red text</font>, <font color="blue">blue
text</font>, and <font color="#008000">green text</font>.</p>
<!-- Font Face, Size, and Color -->
<p>Normal text, <font face="Arial" size="5" color="red">Arial font, large, and
red</font>.</p>
</body>
</html>
5
Enrollment no. :- 230843116002
Output:
6
Enrollment no. :- 230843116002
1.4 :- Write a program in html which demonstrate all types of List.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Practical 1.4</title>
</head>
<body>
<h1>HTML Lists</h1>
<hr>
<h2>Ordered List (Numbered List)</h2>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h2>Unordered List (Bulleted List)</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<h2>Definition List</h2>
<dl>
<dt>Term 1</dt>
<dd>Definition of Term 1</dd>
<dt>Term 2</dt>
<dd>Definition of Term 2</dd>
</dl>
<h2>Nested Lists</h2>
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
<h2>Ordered List with Custom Start Number</h2>
<ol start="5">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
7
Enrollment no. :- 230843116002
</ol>
<h2>Ordered List with Reversed Order</h2>
<ol reversed>
<li>Item 3</li>
<li>Item 2</li>
<li>Item 1</li>
</ol>
</body>
</html>
Output:
8
Enrollment no. :- 230843116002
1.5 :- Write a program in html which demonstrates color and back ground
facility.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Practical 1.5</title>
</head>
<body>
<h1>HTML Colors and Background</h1>
<hr>
<h2>Text Colors</h2>
<font color="red">This text is red.</font>
<font color="green">This text is green.</font>
<font color="blue">This text is blue.</font>
<h2>Background Colors</h2>
<body bgcolor="cyan">
<p>This paragraph has a red background.</p>
</body>
<body bgcolor="green">
<p>This paragraph has a green background.</p>
</body>
<body bgcolor="blue">
<p>This paragraph has a blue background.</p>
</body>
<h2>Hexadecimal Colors</h2>
<font color="#FF0000">This text is red (hexadecimal).</font>
<body bgcolor="#008000">
<p>This paragraph has a green background (hexadecimal).</p>
</body>
</body>
</html>
9
Enrollment no. :- 230843116002
Output:
10
Enrollment no. :- 230843116002
1.6 Write a program in html which demonstrate anchor tag and href
attribute to link up a page.
Code:
<!DOCTYPE html>
<html>
<head>
<title>ractical 1.6</title>
</head>
<body>
<h1>HTML Anchor Tag and Href Attribute</h1>
<hr>
<h2>Link to an external website</h2>
<a href="https://www.google.com">Visit Google</a>
<h2>Link to an internal page</h2>
<a href="internal-page.html">Visit Internal Page</a>
<h2>Link to an email address</h2>
<a href="mailto:[email protected]">Send Email to [email protected]</a>
<h2>Link to a specific section on the same page</h2>
<a href="#top">Back to Top</a>
<h2>Link to a downloadable file</h2>
<a href="downloadable-file.pdf">Download PDF File</a>
<h2>Link with a title attribute</h2>
<a href="https://www.google.com" title="Visit Google Search Engine">Visit Google</a>
<h2>Link with a target attribute</h2>
<a href="https://www.google.com" target="_blank">Visit Google in a new tab</a>
</body>
</html>
11
Enrollment no. :- 230843116002
Output:
12
Enrollment no. :- 230843116002
1.7 :- Write a program in html to demonstrate use of <img> and <area> tag.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Practical 1.7</title>
</head>
<body>
<h1>HTML Image and Area Tags</h1>
<hr>
<h2>Image with a source attribute</h2>
<img src="./images/1299623.png" alt="Image Description" width="400" height="300">
<h2>Image with a border attribute</h2>
<img src="./images/backiee-198789-landscape.jpg" alt="Image Description" width="400"
height="300" border="5">
<h2>Image Map with Area Tags</h2>
<img src="./images/backiee-289367-landscape.jpg" alt="Image Map" width="400"
height="300" usemap="#imagemap">
<map name="imagemap">
<area shape="rect" coords="10,10,50,50" href="https://www.google.com" alt="Google">
<area shape="circle" coords="70,70,30" href="https://www.bing.com" alt="Bing">
<area shape="poly" coords="100,100,150,150,200,200"
href="https://www.youtube.com" alt="Yahoo">
</map>
</body>
</html>
13
Enrollment no. :- 230843116002
Output:
14
Enrollment no. :- 230843116002
1.8 :- Write a program in html to demonstrate practical list document using
fully <table> tag.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Practical 1.8</title>
</head>
<body>
<card id="main" title="Practical List">
<center>
<h2><b>Product Catalog</b></h2>
<table columns="3" border="1" cellpadding="2" cellspacing="0">
<tr>
<th><b>Product</b></th>
<th><b>Price</b></th>
<th><b>Description</b></th>
</tr>
<tr>
<td><b>Apple</b></td>
<td>$1.99</td>
<td>Fresh and juicy!</td>
</tr>
<tr>
<td><b>Samsung TV</b></td>
<td>$999.99</td>
<td>4K UHD with HDR</td>
</tr>
<tr>
<td><b>Nike Shoes</b></td>
<td>$79.95</td>
<td>Comfortable and stylish</td>
</tr>
<tr>
<td><b>Canon Camera</b></td>
<td>$499.99</td>
<td>20.2MP with Wi-Fi</td>
</tr>
<tr>
<td><b>HP Laptop</b></td>
15
Enrollment no. :- 230843116002
<td>$1,299.99</td>
<td>Intel Core i7 with 16GB RAM</td>
</tr>
<tr>
<td colspan="2">Total:</td>
<td>$2,879.92</td>
</tr>
</table>
</center>
</card>
</body>
</html>
Output:
16
Enrollment no. :- 230843116002
1.9 :- Write a program in html which demonstrate <frameset> <frame>
<noframe> and <iframe>.
Code:
<!-- Frameset example -->
<html>
<head>
<title>ractical 1.9</title>
</head>
<frameset cols="30%, 70%">
<frame src="pr1-7.html" name="left_frame" />
<frame src="pr5-1.html" name="right_frame" />
<noframes>
<body>
<h1>This page uses frames, but your browser does not support them.</h1>
<p>Please upgrade your browser to view this page correctly.</p>
</body>
</noframes>
</frameset>
</html>
Output:
17
Enrollment no. :- 230843116002
Code:-
<!-- iframe example -->
<html>
<head>
<title>Practical 1.9.2</title>
</head>
<body>
<h1>iFrame Example</h1>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/c1rBk7XAlj0?si=-gg2x790LteGSmrc"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-
picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</iframe>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/IE5H0lMLUw8?si=ObB4xqmDgg5INwrc"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-
picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/ddFX_Qnnq7g?si=iEktidHHud5LM3vp"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-
picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/FcVVRECsb3E?si=BxO8W1ZFKKCnWVyX"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-
picture; web-share"
referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</body>
</html>
18
Enrollment no. :- 230843116002
Output:
19
Enrollment no. :- 230843116002
Practical-2
Aim: Design student Time Table using HTML tag.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IT TimeTable</title>
</head>
<body>
<center>
<h1 align="center" face="Arial"> IT Sem-5 Time Table for Batch 2</h1>
<table border="1" cellpadding="5" cellspacing="0" align="center">
<tr bgcolor="#3b3b3b">
<th align="center" face="Arial">
<font color="white">Sr. No.</font>
</th>
<th align="center" face="Arial">
<font color="white">TIME</font>
</th>
<th align="center" face="Arial">
<font color="white">MONDAY</font>
</th>
<th align="center" face="Arial">
<font color="white">TUESDAY</font>
</th>
<th align="center" face="Arial">
<font color="white">WEDNESDAY</font>
</th>
<th align="center" face="Arial">
<font color="white">THURSDAY</font>
</th>
<th align="center" face="Arial">
<font color="white">FRIDAY</font>
</th>
<th align="center" face="Arial">
20
Enrollment no. :- 230843116002
<font color="white">SATURDAY</font>
</th>
</tr>
<tr>
<td align="center" face="Arial">1</td>
<td align="center" bgcolor="#3b3b3b" face="Arial">
<font color="white">10:00 TO 11:00</font>
</td>
<td align="center" face="Arial">ADA</td>
<td align="center" rowspan="2" face="Arial">ADA</td>
<td align="center" face="Arial">DA</td>
<td align="center" face="Arial">WD</td>
<td align="center" rowspan="2" face="Arial">CN</td>
<td align="center" rowspan="2" face="Arial">DA</td>
</tr>
<tr>
<td align="center" face="Arial">2</td>
<td align="center" bgcolor="#3b3b3b" face="Arial">
<font color="white">11:05 TO 12:05</font>
</td>
<td align="center" face="Arial">PE</td>
<td align="center" face="Arial">DA</td>
<td align="center" face="Arial">CN</td>
</tr>
<tr>
<td colspan="8" align="center" bgcolor="#3b3b3b" face="Arial">
<font color="white">BREAK</font>
</td>
</tr>
<tr>
<td align="center" face="Arial">3</td>
<td align="center" bgcolor="#3b3b3b" face="Arial">
<font color="white">12:45 TO 1:45</font>
</td>
<td align="center" face="Arial">CN</td>
<td align="center" face="Arial">ADA</td>
<td align="center" face="Arial">ADA</td>
<td align="center" face="Arial">DE</td>
<td align="center" face="Arial">CN</td>
<td align="center" rowspan="2" face="Arial">DA</td>
</tr>
<tr>
<td align="center" face="Arial">4</td>
<td align="center" bgcolor="#3b3b3b" face="Arial">
21
Enrollment no. :- 230843116002
<font color="white">1:45 TO 2:45</font>
</td>
<td align="center" face="Arial">IPDC</td>
<td align="center" face="Arial">ADA</td>
<td align="center" face="Arial">WD</td>
<td align="center" face="Arial">WD</td>
<td align="center" face="Arial">PE</td>
</tr>
<tr>
<td colspan="8" align="center" bgcolor="#3b3b3b" face="Arial">
<font color="white">BREAK</font>
</td>
</tr>
<tr>
<td align="center" face="Arial">5</td>
<td align="center" bgcolor="#3b3b3b" face="Arial">
<font color="white">3:00 TO 4:00</font>
</td>
<td align="center" face="Arial">CS</td>
<td align="center" rowspan="2" face="Arial">CS</td>
<td align="center" face="Arial">CN</td>
<td align="center" rowspan="2" face="Arial">WD</td>
<td align="center" face="Arial">CS</td>
<td align="center" rowspan="2" face="Arial">DE</td>
</tr>
<tr>
<td align="center" face="Arial">6</td>
<td align="center" bgcolor="#3b3b3b" face="Arial">
<font color="white">4:05 TO 5:05</font>
</td>
<td align="center" face="Arial">IPDC</td>
<td align="center" face="Arial">PE</td>
<td align="center" face="Arial">DA</td>
</tr>
</table>
</center>
</body>
</html>
22
Enrollment no. :- 230843116002
Output:
23
Enrollment no. :- 230843116002
Practical-3
Aim: Design HTML form for the Student registration application.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Student Registration Form</title>
</head>
<body>
<center>
<h1>Student Registration Form</h1>
</marquee>
<form>
<table>
<tr>
<td>First Name:</td>
<td><input type="text" name="fname" required></td>
</tr>
<tr>
<td>Middle Name:</td>
<td><input type="text" name="mname" required></td>
</tr>
<tr>
<td>Last Name:</td>
<td><input type="text" name="lname" required></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<select name="gender" required>
<option value="">Select Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
24
Enrollment no. :- 230843116002
<td>Date of Birth:</td>
<td><input type="date" name="dob" required></td>
</tr>
<tr>
<td>Contact-no:</td>
<td><input type="tel" name="contact" required></td>
</tr>
<tr>
<td>Email:</td>
<td><input type="email" name="email" required></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="password" name="password" required></td>
</tr>
<tr>
<td>Confirm Password:</td>
<td><input type="password" name="confirm_password" required></td>
</tr>
<tr>
<td>Address:</td>
<td><textarea name="address" required></textarea></td>
</tr>
<tr>
<td>City:</td>
<td><input type="text" name="city" required></td>
</tr>
<tr>
<td>Course:</td>
<td>
<select name="course" required>
<option value="">Select Course</option>
<option value="BE">BE</option>
<option value="MBA">MBA</option>
<option value="BVoc">BVoc</option>
<option value="Diploma">Diploma</option>
</select>
</td>
</tr>
<tr>
<td>Department:</td>
25
Enrollment no. :- 230843116002
<td>
<select name="year" required>
<option value="">Select Department</option>
<option value="it">IT</option>
<option value="cse">CSE</option>
<option value="ee">EE</option>
<option value="me">ME</option>
<option value="civil">CIVIL</option>
<option value="chemical">Chemical</option>
</select>
</td>
</tr>
<tr>
<td>Year:</td>
<td>
<select name="year" required>
<option value="">Select Year</option>
<option value="1st">1st Year</option>
<option value="2nd">2nd Year</option>
<option value="3rd">3rd Year</option>
<option value="4th">4th Year</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="Register">
</td>
</tr>
</table>
</form>
</body>
</html>
26
Enrollment no. :- 230843116002
Output:
27
Enrollment no. :- 230843116002
Practical-4
Aim: Design HTML Page using various tags of HTML5.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Landing Page Example</title>
</head>
<body>
<header>
<nav>
<table width="100%" border="0" cellpadding="10" cellspacing="0">
<tr>
<td align="center"><a href="#">Home</a></td>
<td align="center"><a href="#">About</a></td>
<td align="center"><a href="#">Contact</a></td>
</tr>
</table>
</nav>
</header>
<main>
<section>
<center>
<h1>Welcome to Our Landing Page</h1>
<p>This is a sample landing page using all HTML5 tags.</p>
<figure>
<img src="./images/654730.jpg" alt="An image" width="50%" height="auto">
<figcaption>This is a figure caption.</figcaption>
</figure>
</center>
</section>
<section>
<center>
<h1>Features</h1>
<p>This is a sample feature section.</p>
<video src="./3129576-uhd_3840_2160_30fps.mp4" width="640" height="480"
controls>
28
Enrollment no. :- 230843116002
Your browser does not support the video tag.
</video>
</center>
</section>
<section>
<center>
<h1>Article</h1>
<p>This is a sample article section.</p>
<article>
<h2>Article Title</h2>
<p>This is a sample article paragraph.</p>
<section>
<h3>Section 1</h3>
<p>This is a sample section paragraph.</p>
</section>
</article>
</center>
</section>
<section>
<center>
<h1>Aside</h1>
<p>This is an aside element.</p>
<aside>
<h2>Aside Title</h2>
<p>This is a sample aside paragraph.</p>
</aside>
</center>
</section>
<section>
<center>
<h1>Details</h1>
<p>This is a sample details section.</p>
<details>
<summary>Details Summary</summary>
<p>This is a sample details paragraph.</p>
</details>
</center>
</section>
<section>
<center>
<h1>Dialog</h1>
<p>This is a sample dialog section.</p>
<dialog>
<h2>Dialog Title</h2>
29
Enrollment no. :- 230843116002
<p>This is a sample dialog paragraph.</p>
</dialog>
</center>
</section>
<section>
<center>
<h1>Figure</h1>
<p>This is a sample figure section.</p>
<figure>
<img src="./images/869131.jpg" alt="An image" width="50%" height="auto">
<figcaption>This is a figure caption.</figcaption>
</figure>
</center>
</section>
<section>
<center>
<h1>Figcaption</h1>
<p>This is a sample figcaption section.</p>
<figcaption>This is a figcaption element.</figcaption>
</center>
</section>
<section>
<center>
<h1>Mark</h1>
<p>This is a sample mark section.</p>
<mark>This text is highlighted.</mark>
</center>
</section>
<section>
<center>
<h1>Meter</h1>
<p>This is a sample meter section.</p>
<meter value="50" min="0" max="100">50%</meter>
</center>
</section>
<section>
<center>
<h1>Progress</h1>
<p>This is a sample progress section.</p>
<progress value="50" max="100">50%</progress>
</center>
</section>
<section>
<center>
30
Enrollment no. :- 230843116002
<h1>Ruby</h1>
<p>This is a sample ruby section.</p>
<ruby>
<rb>This is a ruby base.</rb>
<rt>This is a ruby text.</rt>
</ruby>
</center>
</section>
<section>
<center>
<h1>Time</h1>
<p>This is a sample time section.</p>
<time datetime="2023-02-20">February 20 </time>
</center>
</section>
</main>
<footer>
<center>
<p>© 2023 Example.com</p>
</center>
</footer>
</body>
</html>
31
Enrollment no. :- 230843116002
Output:
32
Enrollment no. :- 230843116002
Practical-5
Aim: Develop HTML Page using CSS
5.1 : Internal (It should include cover image, color, text, font, border, box,
and margin)
Code:
<!DOCTYPE html>
<html>
<head>
<title>About Me</title>
<style>
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display
=swap');
*{
font-family: 'Poppins', sans-serif;
}
body {
background-color: #3498db;
}
.container {
max-width: 800px;
margin: 40px auto;
padding: 20px;
background-color: #ecf0f1;
border: 1px solid #bdc3c7;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.cover-image {
width: 100%;
height: 300px;
object-fit: cover;
border-radius: 10px;
}
33
Enrollment no. :- 230843116002
.heading {
font-size: 36px;
color: #4070f4;
margin-bottom: 20px;
text-align: center;
}
.paragraph {
font-size: 18px;
color: #494f4f;
margin-bottom: 20px;
padding: 20px;
background-color: #f1f1f1;
border: 1px solid #ddd;
border-radius: 10px;
}
.box {
background-color: #ecf0f1;
border: 1px solid #bdc3c7;
padding: 20px;
margin: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
max-width: 750px;
}
.subheading {
font-size: 24px;
color: #0445f9;
margin-bottom: 10px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
padding: 10px;
border-bottom: 1px solid #ddd;
}
li:last-child {
border-bottom: none;
}
</style>
</head>
34
Enrollment no. :- 230843116002
<body>
<div class="container">
<img src="./images/backiee-289367-landscape.jpg" alt="Cover Image" class="cover-
image">
<h1 class="heading">Introduction</h1>
<p class="paragraph">Hi, I'm Ayush Pajapati, a Web Developer with a passion for
creating beautiful and
functional websites.</p>
<div class="box">
<h2 class="subheading">About Me</h2>
<p class="paragraph">I'm a curious and ambitious individual with a strong passion
for learning and
self-improvement.</p>
<p class="paragraph">Outside of work, I enjoy playing chess, learning new
languages, and exploring different
cultures.</p>
</div>
<div class="box">
<h2 class="subheading">My Skills</h2>
<ul>
<li>HTML/CSS</li>
<li>JAVA</li>
<li>Python</li>
<li>Figma</li>
</ul>
</div>
<div class="box">
<h2 class="subheading">Get in Touch</h2>
<p class="paragraph">Want to collaborate or just say hi? Reach out to me at
[email protected] or
@ayush19 on Twitter.</p>
</div>
</div>
</body>
</html>
35
Enrollment no. :- 230843116002
Output:
36
Enrollment no. :- 230843116002
5.2 : External (It should include cover image, color, text, font, border, box,
and margin)
File : pr5-2.html
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
<link rel="stylesheet" type="text/css" href="pr5-2.css">
<title>Student Regisration Form </title>
</head>
<body>
<div class="container">
<header>Registration</header>
<form action="#">
<div class="form first">
<div class="details personal">
<span class="title">Personal Details</span>
<div class="fields">
<div class="input-field">
<label>Full Name</label>
<input type="text" placeholder="Enter your name" required>
</div>
<div class="input-field">
<label>Date of Birth</label>
<input type="date" placeholder="Enter birth date" required>
</div>
<div class="input-field">
<label>Email</label>
<input type="text" placeholder="Enter your email" required>
</div>
37
Enrollment no. :- 230843116002
<div class="input-field">
<label>Mobile Number</label>
<input type="number" placeholder="Enter mobile number" required>
</div>
<div class="input-field">
<label>Gender</label>
<select required>
<option disabled selected>Select gender</option>
<option>Male</option>
<option>Female</option>
<option>Others</option>
</select>
</div>
<div class="input-field">
<label>Address</label>
<textarea placeholder="Enter your address" required></textarea>
</div>
</div>
</div>
<div class="details ID">
<span class="title">Other Details</span>
<div class="fields">
<div class="input-field">
<label>Course</label>
<select required>
<option disabled selected>Select Course</option>
<option value="BE">BE</option>
<option value="MBA">MBA</option>
<option value="BVoc">BVoc</option>
<option value="Diploma">Diploma</option>
</select>
</div>
<div class="input-field">
<label>Department</label>
<select required>
<option disabled selected>Select Department</option>
<option value="it">IT</option>
<option value="cse">CSE</option>
<option value="ee">EE</option>
38
Enrollment no. :- 230843116002
<option value="me">ME</option>
<option value="civil">CIVIL</option>
<option value="chemical">Chemical</option>
</select>
</div>
<div class="input-field">
<label>Year</label>
<select required>
<option disabled selected>Select Year</option>
<option value="1st">1st Year</option>
<option value="2nd">2nd Year</option>
<option value="3rd">3rd Year</option>
<option value="4th">4th Year</option>
</select>
</div>
<div class="input-field">
<label>Semester</label>
<select required>
<option disabled selected>Select Semester</option>
<option value="1st">1st</option>
<option value="2nd">2nd</option>
<option value="3rd">3rd</option>
<option value="4th">4th</option>
<option value="5th">5th</option>
<option value="6th">6th</option>
<option value="7th">7th</option>
<option value="8th">8th</option>
</select>
</div>
<div class="input-field">
<label>Enrollment Number</label>
<input type="number" placeholder="Enter Enrollment number" required>
</div>
<div class="input-field">
<label>Password</label>
<input type="password" placeholder="Set-up your password" required>
39
Enrollment no. :- 230843116002
</div>
</div>
<button class="nextBtn">
<span class="btnText">Submit</span>
<i class="uil uil-navigator"></i>
</button>
</div>
</div>
</form>
</div>
</body>
</html>
File: pr5-2.css
Code:
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600&display
=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #4070f4;
}
.container {
position: relative;
max-width: 900px;
width: 100%;
border-radius: 6px;
padding: 30px;
margin: 0 15px;
background-color: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
40
Enrollment no. :- 230843116002
.container header {
position: relative;
font-size: 20px;
font-weight: 600;
color: #333;
}
.container header::before {
content: "";
position: absolute;
left: 0;
bottom: -2px;
height: 3px;
width: 27px;
border-radius: 8px;
background-color: #4070f4;
}
.container form {
position: relative;
margin-top: 16px;
min-height: 490px;
background-color: #fff;
overflow: hidden;
}
.container form .form {
position: absolute;
background-color: #fff;
transition: 0.3s ease;
}
form.secActive .form.first {
opacity: 0;
pointer-events: none;
transform: translateX(-100%);
}
.container form .title {
display: block;
margin-bottom: 8px;
font-size: 16px;
font-weight: 500;
margin: 6px 0;
color: #333;
}
.container form .fields {
41
Enrollment no. :- 230843116002
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}
form .fields .input-field {
display: flex;
width: calc(100% / 3 - 15px);
flex-direction: column;
margin: 4px 0;
}
.input-field label {
font-size: 12px;
font-weight: 500;
color: #2e2e2e;
}
.input-field input,
select {
outline: none;
font-size: 14px;
font-weight: 400;
color: #333;
border-radius: 5px;
border: 1px solid #aaa;
padding: 0 15px;
height: 42px;
margin: 8px 0;
}
.input-field textarea,
select {
outline: none;
font-size: 14px;
font-weight: 400;
color: #333;
border-radius: 5px;
border: 1px solid #aaa;
padding: 10px 15px;
height: 42px;
margin: 8px 0;
}
.input-field input :focus,
.input-field select:focus {
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.13);
}
42
Enrollment no. :- 230843116002
.input-field select,
.input-field input[type="date"] {
color: #707070;
}
.input-field input[type="date"]:valid {
color: #333;
}
.container form button,
.backBtn {
display: flex;
align-items: center;
justify-content: center;
height: 45px;
max-width: 200px;
width: 100%;
border: none;
outline: none;
color: #fff;
border-radius: 5px;
margin: 25px 0;
background-color: #4070f4;
transition: all 0.3s linear;
cursor: pointer;
}
.container form .btnText {
font-size: 14px;
font-weight: 400;
}
form button:hover {
background-color: #265df2;
}
form button i,
form .backBtn i {
margin: 0 6px;
}
form .backBtn i {
transform: rotate(180deg);
}
form .buttons {
display: flex;
align-items: center;
}
43
Enrollment no. :- 230843116002
form .buttons button,
.backBtn {
margin-right: 14px;
}
@media (max-width: 750px) {
.container form {
overflow-y: scroll;
}
.container form::-webkit-scrollbar {
display: none;
}
form .fields .input-field {
width: calc(100% / 2 - 15px);
}
}
@media (max-width: 550px) {
form .fields .input-field {
width: 100%;
}
}
44
Enrollment no. :- 230843116002
Output:
45
Enrollment no. :- 230843116002
5.3 : Inline Style Sheet (It should include cover image, color, text, font,
border, box, and margin)
Code:
<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Playfair:ital,opsz,wght@0,5..1200,300..
900;1,5..1200,300..900&display=swap"
rel="stylesheet">
</head>
<body
style="font-family: 'Playfair Display', serif; font-optical-sizing: auto; margin: 0; padding:
0; background-color: #f4f4f4;">
<header style="background-color: #333; color: #fff; padding: 20px; text-align: center;">
<h1 style="font-size: 36px; margin: 0; font-weight: bold;">Welcome to Our Landing
Page</h1>
</header>
<section
style="max-width: 800px; margin: 40px auto; padding: 20px; background-color: #fff;
border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);">
<h2 style="font-size: 24px; margin-top: 0; font-weight: bold;">What We Offer</h2>
<p style="font-size: 18px; color: #666;">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Sed sit amet
nulla auctor, vestibulum magna sed, convallis ex.</p>
<ul style="font-size: 18px; color: #666; list-style-type: disc; padding-left: 20px;">
<li>High-quality products</li>
<li>24/7 Customer Support</li>
<li>Free Shipping on Orders Over $50</li>
<li>Easy Returns within 30 Days</li>
</ul>
<button
style="background-color: #333; color: #fff; border: none; padding: 10px 20px; font-
size: 18px; cursor: pointer; border-radius: 5px;">Learn
More</button>
</section>
<section
style="max-width: 800px; margin: 40px auto; padding: 20px; background-color: #fff;
border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);">
<h2 style="font-size: 24px; margin-top: 0; font-weight: bold;">Testimonials</h2>
46
Enrollment no. :- 230843116002
<p style="font-size: 18px; color: #666;">"This product changed my life! Highly
recommend!" - Light Yagami</p>
<p style="font-size: 18px; color: #666;">"Exceptional service and quality. Will buy
again!" - Johan Libert</p>
</section>
<section
style="max-width: 800px; margin: 40px auto; padding: 20px; background-color: #fff;
border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);">
<h2 style="font-size: 24px; margin-top: 0; font-weight: bold;">Contact Us</h2>
<p style="font-size: 18px; color: #666;">If you have any questions, feel free to reach
out to us!</p>
<form>
<label style="font-size: 18px; color: #666;">Name:</label><br>
<input type="text"
style="width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ddd;
border-radius: 5px;"
required><br>
<label style="font-size: 18px; color: #666;">Email:</label><br>
<input type="email"
style="width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ddd;
border-radius: 5px;"
required><br>
<button type="submit"
style="background-color: #333; color: #fff; border: none; padding: 10px 20px;
font-size: 18px; cursor: pointer; border-radius: 5px;">Submit</button>
</form>
</section>
<footer style="background-color: #333; color: #fff; padding: 10px; text-align: center;
clear: both;">
<p style="font-size: 14px; margin: 0;">© 2024 Ayush Prajapati</p>
</footer>
</body>
</html>
47
Enrollment no. :- 230843116002
Output:
48
Enrollment no. :- 230843116002
Practical-6
Aim: Develop applications using JavaScript
6.1 : Make an application which check user name and password with java
script. And user name and password are correct then navigate next page.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pr 6.1 </title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
form {
max-width: 300px;
margin: 40px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"],
input[type="password"] {
width: 90%;
height: 40px;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
}
input[type="submit"] {
49
Enrollment no. :- 230843116002
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<form>
<h2>Login</h2>
<label for="name">Username:</label>
<input type="text" id="name" />
<label for="password">Password:</label>
<input type="password" id="password" />
<input type="submit" value="Login" id="login" />
</form>
<script>
var dataname = {
name: "ayush",
pass: "123"
};
var login = document.getElementById("login");
login.addEventListener("click", function (event) {
event.preventDefault();
var name = document.getElementById("name").value;
var pass = document.getElementById("password").value;
if (name === dataname.name && pass === dataname.pass) {
alert("Your information is correct");
window.location.href = "pr6.2.html";
} else {
alert("You entered wrong information");
}
});
</script>
</body>
</html>
50
Enrollment no. :- 230843116002
Output:
51
Enrollment no. :- 230843116002
6.2 : Make an application which check mobile number (number should be
started with 9 or 8) and mail id (check @ and .)
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pr 6.2</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
form {
max-width: 300px;
margin: 40px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
}
input[type="email"],
input[type="number"] {
width: 90%;
height: 40px;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
52
Enrollment no. :- 230843116002
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<form>
<h2>Contact Information</h2>
<label for="mail">Enter your email:</label>
<input type="email" id="mail" />
<label for="contact">Enter your contact number:</label>
<input type="number" id="number" />
<input type="submit" value="Submit" id="submit" />
</form>
<script>
var submit = document.getElementById("submit");
submit.addEventListener("click", function (event) {
event.preventDefault();
var mail = document.getElementById("mail").value;
var contact = document.getElementById("number").value;
var mailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
if (!mailRegex.test(mail)) {
alert("Invalid email address");
return;
}
if (contact.toString().length !== 10) {
alert("Contact number should be 10 digits");
return;
}
if (!(contact.toString().startsWith("9") || contact.toString().startsWith("8"))) {
alert("Contact number should start with 9 or 8");
return;
}
window.location.href = "pr6.3.html";
});
</script>
</body>
</html>
53
Enrollment no. :- 230843116002
Output:
54
Enrollment no. :- 230843116002
6.3 : Write a JavaScript that uses function to calculate how many days are
left in your birthday?
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pr 6.3</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
form {
max-width: 300px;
margin: 40px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
}
input[type="date"] {
width: 90%;
height: 40px;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
55
Enrollment no. :- 230843116002
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<form>
<h2>Birthday Calculator</h2>
<label for="date">Enter your Birthdate:</label>
<input type="date" name="date" id="date" required>
<input type="submit" value="Submit" id="submit" />
</form>
<script>
var submit = document.getElementById("submit");
submit.addEventListener("click", function (event) {
event.preventDefault();
var date = document.getElementById("date").value;
var bday = new Date(date);
var ndate = new Date();
var yy = ndate.getFullYear();
var nextBday = new Date(yy, bday.getMonth(), bday.getDate());
if (nextBday < ndate) {
nextBday.setFullYear(yy + 1);
}
var result = Math.floor((nextBday.getTime() - ndate.getTime()) / (1000 * 60 * 60 *
24));
alert(result + " days are left until your next birthday");
});
</script>
</body>
</html>
56
Enrollment no. :- 230843116002
Output:
57
Enrollment no. :- 230843116002
5.4 : Write a JavaScript that uses a loop, which searches a word in sentence
held in an array, returning the index of the word.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pr 6.4</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
form {
max-width: 300px;
margin: 40px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"] {
width: 90%;
height: 40px;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
58
Enrollment no. :- 230843116002
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<form>
<h2>Word Search</h2>
<label for="sentence">Enter your sentence:</label>
<input type="text" name="sentence" id="sentence" required>
<input type="submit" value="Next" id="submit" />
</form>
<script>
var submit = document.getElementById("submit");
submit.addEventListener("click", function (event) {
event.preventDefault();
var word = prompt("Enter the word you want to find");
var sentence = document.getElementById("sentence").value;
var temp = sentence.split(" ");
for (i = 0; i < temp.length; i++) {
if (temp[i].toLowerCase() == word.toLowerCase()) {
alert("The word is at position : " + (i + 1));
}
}
});
</script>
</body>
</html>
59
Enrollment no. :- 230843116002
Output:
60
Enrollment no. :- 230843116002
6.5 : Write an HTML file with JavaScript that finds position of first
occurrence of vowel “a” , last occurrence of a vowel “a” in a given word and
returns the string between them. For example ajanta- then script would
return first occurrence of “a”-that is position 1 and last occurrence-6 and
string between them is “jant”
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pr 6.5</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
form {
max-width: 300px;
margin: 40px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"] {
width: 90%;
height: 40px;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
61
Enrollment no. :- 230843116002
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<form>
<h2>Vowel "a" Positions</h2>
<label for="sentence">Enter your word:</label>
<input type="text" name="sentence" id="sentence" required>
<input type="submit" value="Find" id="submit" />
</form>
<script>
var submit = document.getElementById("submit");
submit.addEventListener("click", function (event) {
event.preventDefault();
var sentence = document.getElementById("sentence").value;
var temp = sentence.toLowerCase().split("");
var firstAIndex = -1;
var lastAIndex = -1;
for (i = 0; i < temp.length; i++) {
if (temp[i] === 'a') {
if (firstAIndex === -1) {
firstAIndex = i; // +1 because indexing starts at 1
}
lastAIndex = i; // +1 because indexing starts at 1
}
}
if (firstAIndex !== -1 && lastAIndex !== -1) {
var substring = sentence.substring(firstAIndex + 1, lastAIndex);
alert("First occurrence of 'a': " + (firstAIndex + 1) + "\nLast occurrence of 'a': " +
(lastAIndex + 1) + "\nSubstring: " + substring);
} else {
alert("No 'a' found in the word.");
}
});
</script>
</body>
</html>
62
Enrollment no. :- 230843116002
Output:
63
Enrollment no. :- 230843116002
6.6 : Write a JavaScript which accepts N as input and display first N
Fibonacci numbers as list.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pr 6.6 </title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
form {
max-width: 300px;
margin: 40px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
}
input[type="number"] {
width: 90%;
height: 40px;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
64
Enrollment no. :- 230843116002
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<form id="fibonacci-form">
<h2>Fibonacci Sequence Generator</h2>
<label for="number">Enter the number of Fibonacci numbers:</label>
<input type="number" name="number" id="number" required min="1">
<input type="submit" value="Generate" />
</form>
<script>
document.getElementById("fibonacci-form").addEventListener("submit", function
(event) {
event.preventDefault(); // Prevent form submission
var n = parseInt(document.getElementById("number").value);
var result = generateFibonacci(n);
alert(`First ${n} Fibonacci numbers: ${result.join(", ")}`);
});
function generateFibonacci(n) {
var fib = [];
var a = 0, b = 1;
for (var i = 0; i < n; i++) {
fib.push(a);
var temp = a;
a = b;
b = temp + b;
}
return fib;
}
</script>
</body>
</html>
65
Enrollment no. :- 230843116002
Output:
66
Enrollment no. :- 230843116002
6.7 : Write a JavaScript that handles following mouse events Add necessary
elements.
(i) JavaScript gives the key code for the key pressed.
(ii) If the key pressed is “a”,”e”,”i”,”o”,”u” the script should announce that
vowel is pressed.
(iii) When the key is released background should change to blue
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pr 6.7</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<h1>Key Press and Mouse Events</h1>
<p id="key-code"></p>
<p id="vowel-announcement"></p>
<script>
document.addEventListener("keydown", function(event) {
let keyCode = event.keyCode;
document.getElementById("key-code").innerHTML = `Key code: ${keyCode}`;
let vowelKeys = ["a", "e", "i", "o", "u"];
let keyPressed = String.fromCharCode(keyCode).toLowerCase();
if (vowelKeys.includes(keyPressed)) {
document.getElementById("vowel-announcement").innerHTML = `Vowel
"${keyPressed}" pressed!`;
} else {
document.getElementById("vowel-announcement").innerHTML = "";
}
67
Enrollment no. :- 230843116002
});
document.addEventListener("keyup", function(event) {
document.body.style.backgroundColor = "blue";
});
document.addEventListener("mousedown", function(event) {
console.log("Mouse button pressed at coordinates (" + event.clientX + ", " +
event.clientY + ")");
});
document.addEventListener("mouseup", function(event) {
console.log("Mouse button released at coordinates (" + event.clientX + ", " +
event.clientY + ")");
});
document.addEventListener("mousemove", function(event) {
console.log("Mouse moved to coordinates (" + event.clientX + ", " + event.clientY +
")");
console.log("Mousemove event triggered!");
});
</script>
</body>
</html>
Output:
68
Enrollment no. :- 230843116002
6.8 Write a JavaScript to print characters of a string at odd positions.(for
example for the string India, I, d and a should get printed)
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pr 6.8</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
form {
max-width: 300px;
margin: 40px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"] {
width: 90%;
height: 40px;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
69
Enrollment no. :- 230843116002
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<form>
<h2>Print Characters at Odd Positions</h2>
<label for="sentence">Enter your word:</label>
<input type="text" name="sentence" id="sentence" required>
<input type="submit" value="Find" id="submit" />
</form>
<script>
var submit = document.getElementById("submit");
submit.addEventListener("click", function (event) {
event.preventDefault();
var sentence = document.getElementById("sentence").value;
var temp = sentence.split("");
var oddChars = "";
for (i = 0; i < temp.length; i++) {
if ((i + 1) % 2 !== 0) {
oddChars += temp[i];
}
}
alert("Characters at odd positions: " + oddChars);
});
</script>
</body>
</html>
70
Enrollment no. :- 230843116002
Output:
71
Enrollment no. :- 230843116002
6.9 : Write a JavaScript to take 2 digit number and then separate these 2
digits, then multiply first digit by itself for second digit times.( for example,
23 should be separated as 2 and 3. 2 should multiply with itself 3 times)
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pr 6.9</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
form {
max-width: 300px;
margin: 40px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"] {
width: 90%;
height: 40px;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
}
input[type="submit"] {
background-color: #4CAF50;
72
Enrollment no. :- 230843116002
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<form>
<h2>Digit Multiplication</h2>
<label for="number">Enter a two-digit number:</label>
<input type="text" name="number" id="number" required pattern="\d{2}">
<input type="submit" value="Calculate" id="submit" />
</form>
<script>
var submit = document.getElementById("submit");
submit.addEventListener("click", function (event) {
event.preventDefault();
var number = document.getElementById("number").value;
if (number.length === 2) {
var firstDigit = parseInt(number[0]);
var secondDigit = parseInt(number[1]);
var result = 1;
for (var i = 0; i < secondDigit; i++) {
result *= firstDigit;
}
alert("Result of " + firstDigit + " multiplied by itself " + secondDigit + " times is: "
+ result);
}
});
</script>
</body>
</html>
73
Enrollment no. :- 230843116002
Output:
74
Enrollment no. :- 230843116002
6.10 : Write a JavaScript that handles following mouse events. Add necessary
elements
(i) If the mouse is over the heading should turn yellow and if the mouse goes
out of the heading it should turn black.
(ii) If find time button is clicked show time and date information.
If button named “red” is clicked, background should change to red and If
button named “green” is clicked, background should change to green.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pr 6.10</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
button {
padding: 7px;
border: none;
background-color: rgb(60, 0, 201);
color: aliceblue;
border-radius: 3px;
}
</style>
</head>
<body>
<h2 id="heading" onmouseover="this.style.color='yellow'"
onmouseout="this.style.color='black'">Mouse Events</h2>
<button id="find-time">Find Time</button>
<button id="red">Red</button>
<button id="green">Green</button>
<p id="time-info"></p>
<script>
document.getElementById("find-time").addEventListener("click", function () {
75
Enrollment no. :- 230843116002
var currentTime = new Date();
document.getElementById("time-info").innerHTML = "Current Time: " +
currentTime.toLocaleTimeString() + " " + currentTime.toLocaleDateString();
});
document.getElementById("red").addEventListener("click", function () {
document.body.style.backgroundColor = "red";
});
document.getElementById("green").addEventListener("click", function () {
document.body.style.backgroundColor = "green";
});
</script>
</body>
</html>
Output:
76
Enrollment no. :- 230843116002
6.11 : Write a program that convert a string written in JSON format, into a
JavaScript object.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pr 6.11</title>
</head>
<body>
<h2 id="obj"></h2>
<script>
const jsonString = '{"name":"Ichigo","age":24,"city":"Karakura town"}';
const jsObject = JSON.parse(jsonString);
document.getElementById("obj").innerHTML = `<p> Name : ${jsObject.name} <br>
Age : ${jsObject.age} <br> City : ${jsObject.city}</p>`;
console.log(jsObject.name);
</script>
</body>
</html>
Output:
77
Enrollment no. :- 230843116002
Practical-7
Aim: Write programs using PHP.
7.1 : Write a PHP program to find whether entered year is leap year or not.
Code:
<?php
$resultMessage = "";
/ /Check if the form has been submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$year = $_POST["year"];
if (checkLeapYear($year)) {
$resultMessage = "$year is a leap year.";
} else {
$resultMessage = "$year is not a leap year.";
}
}
// Function to check if a year is a leap year
function checkLeapYear($year) {
if (($year % 4 == 0 && $year % 100 != 0) || $year % 400 == 0) {
return true;
} else {
return false;
}
}
?>
<!-- HTML form to input the year -->
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
form {
max-width: 300px;
margin: 40px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
78
Enrollment no. :- 230843116002
label {
display: block;
margin-bottom: 10px;
}
input[type="number"] {
width: 90%;
height: 40px;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
.result {
font-size: 18px;
font-weight: bold;
color: #00698f;
margin-top: 20px;
}
</style>
<form method="post">
<h2>Leap Year Checker</h2>
<label for="year">Enter a year:</label>
<input type="number" name="year" required>
<input type="submit" value="Check">
</form>
<!-- Display the result message -->
<?php if ($resultMessage): ?>
<center>
<p class="result"><?php echo $resultMessage; ?></p>
<?php endif; ?>
79
Enrollment no. :- 230843116002
Output:
80
Enrollment no. :- 230843116002
7.2 : Write a PHP program to display table of cube for 1 to 10.
Code:
<?php
// Check if the form has been submitted
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Generate the table of cubes
$table = "<table border='1'>";
$table .= "<tr><th>Number</th><th>Cube</th></tr>";
for ($i = 1; $i <= 10; $i++) {
$cube = $i * $i * $i;
$table .= "<tr><td>$i</td><td>$cube</td></tr>";
}
$table .= "</table>";
// Display the table
$displayTable = true;
}
?>
<!-- HTML form to submit the request -->
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
form {
max-width: 300px;
margin: 40px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
81
Enrollment no. :- 230843116002
.table-container {
margin-top: 20px;
}
</style>
<form method="post">
<h2>Table of Cubes</h2>
<input type="submit" value="Generate Table">
</form>
<!-- Display the table below the form -->
<?php if (isset($displayTable)): ?>
<center>
<div class="table-container">
<p>Table of Cubes:</p>
<?php echo $table; ?>
</div>
<?php endif; ?>
Output:
82
Enrollment no. :- 230843116002
7.3 : Write a PHP program to read a text file and store it in array and display
the content of array.
Code:
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$fileName = "dummy.txt";
$fileContent = file($fileName, FILE_IGNORE_NEW_LINES);
$dataArray = array();
foreach ($fileContent as $line) {
$dataArray[] = $line;
}
$displayArray = true;
}
?>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
}
form {
max-width: 300px;
margin: 40px auto;
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
.array-container {
margin-top: 20px;
83
Enrollment no. :- 230843116002
text-align: justify;
text-justify: inter-word;
}
</style>
<form method="post">
<h2>Read Text File and Display Array</h2>
<input type="submit" value="Read File and Display Array">
</form>
<?php if (isset($displayArray)): ?>
<div class="array-container">
<p>Array Content:</p>
<?php foreach ($dataArray as $element): ?>
<p><?= $element ?></p>
<?php endforeach; ?>
</div>
<?php endif; ?>
Output:
84
Enrollment no. :- 230843116002
7.4 : Write PHP to store information of employee (employee id, job title, and
years of experience) in an array. And output the data to a web page by
arranging the employees in ascending order of experience.
Code:
<?php
$employees = array();
$displayEmployees = false;
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Get the number of employees from the user
$numEmployees = $_POST['num_employees'];
// Loop through each employee and get their data from the user
for ($i = 0; $i < $numEmployees; $i++) {
$employeeId = $_POST["employee_id_$i"];
$jobTitle = $_POST["job_title_$i"];
$experience = $_POST["experience_$i"];
// Add employee data to the array
$employees[] = array('id' => $employeeId, 'job_title' => $jobTitle, 'experience' =>
$experience);
}
// Sort the employees array in ascending order of experience
usort($employees, function($a, $b) {
return $a['experience'] - $b['experience'];
});
$displayEmployees = true;
}
?>
<style>
/* Simple CSS styles */
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
}
h2 {
85
Enrollment no. :- 230843116002
color: #333;
}
form {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
table {
border-collapse: collapse;
width: 100%;
margin-top: 20px;
background-color: #fff;
}
th, td {
border: 1px solid #ddd;
padding: 10px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
input[type="number"], input[type="text"] {
width: calc(100% - 20px);
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
86
Enrollment no. :- 230843116002
input[type="submit"]:hover {
background-color: #45a049;
}
.employee-input {
margin-bottom: 15px;
}
</style>
<form method="post">
<h2>Enter Employee Information</h2>
<p>Enter the number of employees:</p>
<input type="number" name="num_employees" required min="1">
<br><br>
<div id="employeeFields">
<!-- Employee input fields will be generated here -->
</div>
<input type="submit" value="Display Employee List">
</form>
<script>
const numEmployeesInput = document.querySelector('input[name="num_employees"]');
const employeeFieldsDiv = document.querySelector('#employeeFields');
numEmployeesInput.addEventListener('input', () => {
employeeFieldsDiv.innerHTML = '';
const numEmployees = numEmployeesInput.value;
for (let i = 0; i < numEmployees; i++) {
const employeeInputHtml = `
<div class="employee-input">
<p>Employee ${i + 1}:</p>
<input type="number" name="employee_id_${i}" placeholder="Employee ID"
required>
<input type="text" name="job_title_${i}" placeholder="Job Title" required>
<input type="number" name="experience_${i}" placeholder="Years of
Experience" required>
</div>
`;
employeeFieldsDiv.innerHTML += employeeInputHtml;
}
});
</script>
87
Enrollment no. :- 230843116002
<?php if ($displayEmployees): ?>
<table>
<tr>
<th>Employee ID</th>
<th>Job Title</th>
<th>Years of Experience</th>
</tr>
<?php foreach ($employees as $employee): ?>
<tr>
<td><?= htmlspecialchars($employee['id']) ?></td>
<td><?= htmlspecialchars($employee['job_title']) ?></td>
<td><?= htmlspecialchars($employee['experience']) ?></td>
</tr>
<?php endforeach; ?>
</table>
<?php endif; ?>
Output:
88
Enrollment no. :- 230843116002
89
Enrollment no. :- 230843116002
7.5 : Make a simple login form using cookie and session.
Code:
<?php
session_start();
if (isset($_POST['username']) && isset($_POST['password'])) {
$username = $_POST['username'];
$password = $_POST['password'];
if ($username == 'admin' && $password == '123') {
setcookie('username', $username, time() + 3600);
$_SESSION['username'] = $username;
header('Location: ' . $_SERVER['PHP_SELF']);
exit;
} else {
$error = 'Invalid username or password.';
}
}
if (isset($_GET['logout'])) {
setcookie('username', '', time() - 3600);
session_destroy();
header('Location: ' . $_SERVER['PHP_SELF']);
exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pr 7.5</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.container {
width: 300px;
margin: 40px auto;
90
Enrollment no. :- 230843116002
padding: 20px;
background-color: #fff;
border: 1px solid #ddd;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h2 {
color: #333;
margin-top: 0;
text-align: center;
}
.input-field {
margin-bottom: 20px;
display: flex;
align-items: center;
}
.input-field label {
width: 30%;
text-align: right;
margin-right: 10px;
}
input[type="text"], input[type="password"] {
width: 60%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
margin-top: 10px;
}
input[type="submit"]:hover {
background-color: #45a049;
}
.error-message {
color: red;
text-align: center;
margin-bottom: 20px;
}
91
Enrollment no. :- 230843116002
</style>
</head>
<body>
<div class="container">
<h2>Login Form</h2>
<?php if (isset($error)) echo "<p class='error-message'>$error</p>"; ?>
<?php if (isset($_SESSION['username'])): ?>
<p>Welcome, <?php echo $_SESSION['username']; ?>! You are now logged in.</p>
<a href="?logout=true">Logout</a>
<?php else: ?>
<form method="post">
<div class="input-field">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>
<div class="input-field">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<input type="submit" value="Login">
</form>
<?php endif; ?>
</div>
</body>
</html>
92
Enrollment no. :- 230843116002
Output:
93
Enrollment no. :- 230843116002
Practical-8
Aim : Develop applications using PHP and MYSQL
8.1 : Make an application using PHP that collects student information like
name, PEN, Gender (use Radio Button), Branch (use Drop Down Box),
Semester, Contact number (Text Box should masked with numbers only)
and address. Create buttons for Insert, Delete, Update and Retrieve the
details in/from the database. Alter the table to add a column and add data in
that new column.
Code:
<?php
$servername = "localhost";
$username = "root"; // Your DB username
$password = ""; // Your DB password
$dbname = "student_db";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Initialize variables to hold student data for retrieval
$students = [];
$operationMessage = '';
// Handle form submission
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Use null coalescing operator to avoid undefined index notices
$name = $_POST['name'] ?? '';
$pen = $_POST['pen'] ?? '';
$gender = $_POST['gender'] ?? '';
$branch = $_POST['branch'] ?? '';
$semester = $_POST['semester'] ?? '';
$contact_number = $_POST['contact_number'] ?? '';
$address = $_POST['address'] ?? '';
$action = $_POST['action'] ?? '';
switch ($action) {
case 'insert':
$sql = "INSERT INTO students (name, pen, gender, branch, semester,
contact_number, address) VALUES ('$name', '$pen', '$gender', '$branch', $semester,
'$contact_number', '$address')";
94
Enrollment no. :- 230843116002
if ($conn->query($sql) === TRUE) {
$operationMessage = "New record created successfully.";
} else {
$operationMessage = "Error: " . $conn->error;
}
break;
case 'update':
$sql = "UPDATE students SET name='$name', gender='$gender', branch='$branch',
semester=$semester, contact_number='$contact_number', address='$address' WHERE
pen='$pen'";
if ($conn->query($sql) === TRUE) {
$operationMessage = "Record updated successfully.";
} else {
$operationMessage = "Error: " . $conn->error;
}
break;
case 'delete':
$sql = "DELETE FROM students WHERE pen='$pen'";
if ($conn->query($sql) === TRUE) {
$operationMessage = "Record deleted successfully.";
} else {
$operationMessage = "Error: " . $conn->error;
}
break;
case 'retrieve':
$sql = "SELECT * FROM students WHERE pen='$pen'";
$result = $conn->query($sql);
if ($result && $result->num_rows > 0) {
$students = $result->fetch_all(MYSQLI_ASSOC);
$operationMessage = "Records retrieved successfully.";
} else {
$operationMessage = "No records found for PEN: $pen.";
}
break;
}
}
$conn->close();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Student Information</title>
95
Enrollment no. :- 230843116002
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #333;
margin-bottom: 10px;
}
form {
width: 50%;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"],
input[type="number"],
select,
textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
}
input[type="radio"] {
margin-right: 10px;
}
button[type="submit"] {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button[type="submit"]:hover {
background-color: #3e8e41;
96
Enrollment no. :- 230843116002
.message {
color: green;
font-weight: bold;
}
.error {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Student Information Form</h1>
<form action="" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name "><br>
<label for="pen">PEN:</label>
<input type="text" id="pen" name="pen"><br>
<label>Gender:</label>
<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female <input type="radio"
name="gender" value="Other">
Other<br>
<label for="branch">Branch:</label>
<select id="branch" name="branch">
<option value="Computer Science">Computer Science</option>
<option value="Information Technology">Information Technology</option>
<option value="Electronics">Electronics</option>
<option value="Mechanical">Mechanical</option>
</select><br>
<label for="semester">Semester:</label>
<input type="number" id="semester" name="semester" min="1" max="8"><br>
<label for="contact_number">Contact Number:</label>
<input type="text" id="contact_number" name="contact_number" pattern="\d*"
maxlength="15"><br>
<label for="address">Address:</label>
<textarea id="address" name="address"></textarea><br>
<button type="submit" name="action" value="insert">Insert</button>
<button type="submit" name="action" value="update">Update</button>
<button type="submit" name="action" value="delete">Delete</button>
97
Enrollment no. :- 230843116002
<button type="submit" name="action" value="retrieve">Retrieve</button>
</form>
<?php if ($operationMessage): ?>
<p class="<?php echo strpos($operationMessage, 'Error') === 0 ? 'error' : 'message'; ?>">
<?php echo $operationMessage; ?>
</p>
<?php endif; ?>
<?php if (count($students) > 0): ?>
<h2>Student Records:</h2>
<ul>
<?php foreach ($students as $student): ?>
<li>PEN:
<?php echo $student['pen']; ?>, Name:
<?php echo $student['name']; ?>, Gender:
<?php echo $student['gender']; ?>, Branch:
<?php echo $student['branch']; ?>, Semester:
<?php echo $student['semester']; ?>, Contact:
<?php echo $student['contact_number']; ?>, Address:
<?php echo $student['address']; ?>
</li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</body>
</html>
98
Enrollment no. :- 230843116002
Output:
99
Enrollment no. :- 230843116002
100
Enrollment no. :- 230843116002
101
Enrollment no. :- 230843116002
8.2 : Customize your own WebPages/web application. You may use HTML,
Frame Navigation, CSS, JavaScript’s, PHP, Cookies, Session, MYSQL
Database Manipulation (Insert, Delete, Update and Retrieve), URL
Redirecting, File Uploads, and WEB SERVICES.
Code:
<?php
// Start session
session_start();
// Database connection
$conn = mysqli_connect("localhost", "root", "", "student_db");
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
// Initialize variables
$operationMessage = '';
$students = [];
// Handle form submissions
if ($_SERVER["REQUEST_METHOD"] == "POST") {
// Handle user data
if (isset($_POST['name']) && isset($_POST['email'])) {
$name = $_POST['name'];
$email = $_POST['email'];
// Insert data into MySQL database
$sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";
if (mysqli_query($conn, $sql)) {
$operationMessage = "New record created successfully";
} else {
$operationMessage = "Error: " . $sql . "<br>" . mysqli_error($conn);
}
}
// Handle file upload
if (isset($_FILES['file'])) {
$file_name = $_FILES['file']['name'];
$file_tmp = $_FILES['file']['tmp_name'];
$operationMessage .= " File uploaded successfully.";
}
// Handle session
102
Enrollment no. :- 230843116002
$_SESSION['username'] = $name ?? 'Guest';
}
// Retrieve data from MySQL database
$sql = "SELECT * FROM users";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
$students[] = $row;
}
}
// Close MySQL connection
mysqli_close($conn);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Application</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
// JavaScript code for form validation
function validateForm() {
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
if (name == "" || email == "") {
alert("Name and email must be filled out");
return false;
}
return true;
}
</script>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #00698f;
}
label {
display: block;
margin-bottom: 10px;
103
Enrollment no. :- 230843116002
input[type="text"],
input[type="email"],
input[type="file"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
.message {
color: green;
font-weight: bold;
}
.error {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Welcome to My Web Application</h1>
<form action="" method="post" enctype="multipart/form-data" onsubmit="return
validateForm();">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="file">Upload File:</label>
<input type="file" id="file" name="file">
<input type="submit" value="Submit">
104
Enrollment no. :- 230843116002
</form>
<?php if ($operationMessage): ?>
<p class="<?php echo strpos($operationMessage, 'Error') === 0 ? 'error' : 'message'; ?>">
<?php echo $operationMessage; ?>
</p>
<?php endif; ?>
<h2>Student Records:</h2>
<ul>
<?php foreach ($students as $student): ?>
<li>Name:
<?php echo $student['name']; ?>, Email:
<?php echo $student['email']; ?>
</li>
<?php endforeach; ?>
</ul>
<p>Welcome,
<?php echo $_SESSION['username']; ?>!
</p>
<?php if (isset($_COOKIE['username'])): ?>
<p>Cookie found:
<?php echo $_COOKIE['username']; ?>!
</p>
<?php endif; ?>
<script>
// JavaScript code to handle web service
fetch('web_service.php', {
method: 'GET'
})
.then(response => response.json())
.then(data => console.log(data));
</script>
</body>
</html>
105
Enrollment no. :- 230843116002
Output:
106
Enrollment no. :- 230843116002
Practical-9
Aim: Write a program of hello world using jQuery and Ajax.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pr9</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #00698f;
text-align: center;
}
#helloButton {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
#helloButton:hover {
background-color: #45a049;
}
107
Enrollment no. :- 230843116002
#message {
margin-top: 20px;
padding: 15px;
background-color: #ffffff;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
font-size: 18px;
color: #333;
}
</style>
<script>
$(document).ready(function () {
$("#helloButton").click(function () {
$.ajax({
url: 'hello.php',
type: 'GET',
success: function (response) {
$("#message").html(response);
},
error: function () {
$("#message").html("An error occurred while processing the request.");
}
});
});
});
</script>
</head>
<body>
<h1>Welcome to the Hello World Program</h1>
<button id="helloButton">Say Hello</button>
<div id="message"></div>
</body>
</html>
108
Enrollment no. :- 230843116002
Output:
109
You might also like
- Bcom-Iv-Sem-Web-Technologies Lab RecordNo ratings yetBcom-Iv-Sem-Web-Technologies Lab Record89 pages
- Practical File ON HTML: Maharshi Dayanand University RohtakNo ratings yetPractical File ON HTML: Maharshi Dayanand University Rohtak26 pages
- Practical 1 Introduction To HTML. Create A Basic HTML FileNo ratings yetPractical 1 Introduction To HTML. Create A Basic HTML File11 pages
- Web Application and Development: Lab ManualNo ratings yetWeb Application and Development: Lab Manual52 pages
- EContent 2 2023 06 06 12 49 44 WDH Manualpdf 2023 06 06 12 25 06No ratings yetEContent 2 2023 06 06 12 49 44 WDH Manualpdf 2023 06 06 12 25 0632 pages
- Class - X - Practical & Project File - Session - 2024-25100% (2)Class - X - Practical & Project File - Session - 2024-2536 pages
- R.E.D School, Charkhi: Computer ApplicationsNo ratings yetR.E.D School, Charkhi: Computer Applications16 pages
- Guru Gobind Singh Indraprastha University E-CommerceNo ratings yetGuru Gobind Singh Indraprastha University E-Commerce39 pages
- Internet Technology and web page designNo ratings yetInternet Technology and web page design32 pages
- R.E.D School, Charkhi: Computer ApplicationsNo ratings yetR.E.D School, Charkhi: Computer Applications16 pages
- The Role of Cultural Traditions: A Predictive Study On Husband's Age and Karwa ChauthNo ratings yetThe Role of Cultural Traditions: A Predictive Study On Husband's Age and Karwa Chauth59 pages
- FDP Brochure - Speaker Poster - ScheduleNo ratings yetFDP Brochure - Speaker Poster - Schedule5 pages
- LCD Backlight Inverter Drive IC: Features DescriptionNo ratings yetLCD Backlight Inverter Drive IC: Features Description14 pages
- 4116 - Ankush Shikshan Sanstha's G.H.Raisoni College of Engineering, NagpurNo ratings yet4116 - Ankush Shikshan Sanstha's G.H.Raisoni College of Engineering, Nagpur14 pages
- Innovation and Business Strategy in Hospitality: (Segi Crouse Code: Hos4223) (Uclan Module Code: Tl3304)No ratings yetInnovation and Business Strategy in Hospitality: (Segi Crouse Code: Hos4223) (Uclan Module Code: Tl3304)12 pages
- Bosch Professional Power Tools Implements Social Media CRM PlatformNo ratings yetBosch Professional Power Tools Implements Social Media CRM Platform2 pages
- Finlatics Investment Banking Experience Program: Arjun's Driving ForceNo ratings yetFinlatics Investment Banking Experience Program: Arjun's Driving Force2 pages
- LabVIEW Interface For Arduino Setup ProcedureNo ratings yetLabVIEW Interface For Arduino Setup Procedure15 pages
- The Challenges Oracle Forms Migration To ADFNo ratings yetThe Challenges Oracle Forms Migration To ADF18 pages
- Abdulazeez Et Al - Assessing Strucctural Intergrity of Existing Building StructuresNo ratings yetAbdulazeez Et Al - Assessing Strucctural Intergrity of Existing Building Structures10 pages
- Training Highlights Timer Pro ProfessionalNo ratings yetTraining Highlights Timer Pro Professional5 pages
- Aes67 Networked Audio Interoperability WhitepaperNo ratings yetAes67 Networked Audio Interoperability Whitepaper9 pages
- Week # 02 (Lecture 3 & 4) : Computer Graphics (CS-575)No ratings yetWeek # 02 (Lecture 3 & 4) : Computer Graphics (CS-575)10 pages
