WT Practical File
Uploaded by
chaturvedivikas38WT Practical File
Uploaded by
chaturvedivikas38Maharaja Surajmal Institute (MSI)
Janakpuri C-4
New Delhi- 110058
BCA 105 - Web Technologies
Practical Assignment File
Submitted By Submitted To
Name: Aryansh Garg Mr. Ravinder S. Kajal
Enrol Number: 01014902024
BCA(H) 2024-28
Section-B, Shift- 1st
Assignment 1
List of Assignment Create your Web Page on India using various basic HTML tags.
CODE
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Discover India</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to India</h1>
<nav>
<ul>
<li><a href="#culture">Culture</a></li>
<li><a href="#geography">Geography</a></li>
<li><a href="#festivals">Festivals</a></li>
<li><a href="#cuisine">Cuisine</a></li>
</ul>
</nav>
</header>
<main>
<section id="culture">
<h2>Culture</h2>
<p>India has a rich and diverse cultural heritage.Virtually all regions of India have their
distinctive places of pilgrimage, local saints and folk heroes, religious festivals, and associated fairs.
There are also innumerable festivals associated with individual villages or temples or with specific
castes and cults. The most popular of the religious festivals celebrated over the greater part of India
are Vasantpanchami (generally in February, the exact date determined by the Hindu lunar calendar),
in honour of Sarasvati, the goddess of learning; Holi (February–March), a time when traditional
hierarchical relationships are forgotten and celebrants throw coloured water and powder at one
another; Dussehra (September–October), when the story of the Ramayana is reenacted; and Diwali
(Divali; October–November), a time for lighting lamps and exchanging gifts. The major secular
holidays are Independence Day (August 15) and Republic Day </p>
<img src="https://3.bp.blogspot.com/-TnJ7BBUOZa8/WrhiiNttLlI/AAAAAAAAABI/J4aUVHH2-
ukHx3PGN_6wmXODtmGDDAmBwCLcBGAs/s1600/amazinf-facts-indian-culture.jpg" alt="Indian
Culture" width="250">
</section>
<section id="geography">
<h2>Geography</h2>
<p>India is known for its varied landscapes, from mountains to beaches.India is situated north
of the equator between 8°4' north (the mainland) to 37°6' north latitude and 68°7' east to 97°25'
east longitude.[2] It is the seventh-largest country in the world, with a total area of 3,287,263 square
kilometres (1,269,219 sq mi).[3][4][5] India measures 3,214 km (1,997 mi) from north to south and
2,933 km (1,822 mi) from east to west. It has a land frontier of 15,200 km (9,445 mi) and a coastline
of 7,516.6 km (4,671 mi).<br>
On the south, India projects into and is bounded by the Indian Ocean—in particular, by the
Arabian Sea on the west, the Lakshadweep Sea to the southwest, the Bay of Bengal on the east, and
the Indian Ocean proper to the south. The Palk Strait and Gulf of Mannar separate India from Sri
Lanka to its immediate southeast, and the Maldives are some 125 kilometres (78 mi) to the south of
India's Lakshadweep Islands across the Eight Degree Channel. India's Andaman and Nicobar Islands,
some 1,200 kilometres (750 mi) southeast of the mainland, share maritime borders with Myanmar,
Thailand and Indonesia. The southernmost tip of the Indian mainland (8°4′38″N, 77°31′56″E) is just
south of Kanyakumari, while the southernmost point in India is Indira Point on Great Nicobar Island.
The northernmost point which is under Indian administration is Indira Col, Siachen Glacier.[6] India's
territorial waters extend into the sea to a distance of 12 nautical miles (13.8 mi; 22.2 km) from the
coast baseline.[7] India has the 18th largest Exclusive Economic Zone of 2,305,143 km2 (890,021 sq
mi)</p>
<img src="https://i.pinimg.com/originals/4a/fd/c0/4afdc0bdfcbd7cd042391cff2163bb29.jpg"
alt="Indian Geography" width="250">
</section>
<section id="festivals">
<h2>Festivals</h2>
<p>India celebrates a multitude of festivals throughout the year.</p>
<img src="https://i.ytimg.com/vi/omcGccw6c58/maxresdefault.jpg" alt="Indian Festivals"
width="250">
</section>
<section id="cuisine">
<h2>Cuisine</h2>
<p>Indian cuisine is famous for its rich flavors and spices.Indian cuisine has shaped the history
of international relations; the spice trade between India and Europe was the primary catalyst for
Europe's Age of Discovery.[4] Spices were bought from India and traded around Europe and Asia.
Indian cuisine has influenced other cuisines across the world, especially those from Europe (Britain in
particular), the Middle East, Southern African, East Africa, Southeast Asia, North America, Mauritius,
Fiji, Oceania, and the Caribbean.
World Wildlife Fund (WWF)’s Living Planet Report released on 10 October 2024 emphasized
India’s food consumption pattern as the most sustainable among the big economies (G20
countries).</p>
<img src="https://www.pigeontravels.com/wp-content/uploads/2018/11/food-of-india.jpg"
alt="Indian Cuisine" width="250">
</section>
</main>
<footer>
<p>© 2024 Discover India</p>
</footer>
</body>
</html>
CSS
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
margin: 0;
padding: 0;
header {
background-color: #ff5722;
color: white;
padding: 20px 0;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
nav ul li {
display: inline;
margin: 0 15px;
nav a {
color: white;
text-decoration: none;
main {
padding: 20px;
section {
background-color: white;
border: 1px solid #ccc;
margin: 20px 0;
padding: 15px;
border-radius: 5px;
section img {
max-width: 100%;
height: auto;
border-radius: 5px;
footer {
text-align: center;
padding: 10px 0;
background-color: #333;
color: white;
OUTPUT
Assignment 2
Create an Restaurant Menu That use Ordered list, Unorder List, definition list, Nested list.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<device-width>, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Restaurant Menu</h1>
<ul>
<li><h3>Appetizers</h3>
<ul type="circle">
<li><b>Bruschetta</b><br>
Tooasted bread topped with diced tomatotes, basil, and olive oil</li>
<li><b>Stuffed Mushrooms<br></b>Mushrooms filled with cream cheese, garlic, and
herbs</li>
<li><b>Calamari<br></b>Fried calamari served with marinara sauce</li>
</ul>
</li>
</ul>
<ul>
<li><h3>Salads</h3>
<ul type="circle">
<li><b>Caesar Salad<br></b>Romaine lettuce, croutons, and parmesancheese, tossed in
Caesar dressing</li>
<li><b>Garden Salad<br></b>Mixed greens, tomatoes, cucumbers, and carrots</li>
<li><b>Greek Salad<br></b>
<li type="none"><u>Ingredients</u></li>
<ol>
<li>Feta cheese</li>
<li>Kalamata olives</li>
<li>Red onions</li>
<li>Bell peppers</li>
</ol>
<li type="none">
<li type="none"><u>Dressing</u>
<ol>
<li>OLive oil</li>
<li>Red wine vinegar</li>
</ol></li>
</li>
</ul>
</li>
</ul>
<ul><li><h3>Main Courses</h3></li>
<ul type="circle">
<li><b>Grilled Salmon</b><br>Served with lemon butter sauce and seasonal vegetables.</li>
<li><b>Chicken Alfredo<br></b>Fettuccine pasta in creamy Alfredo sauce, topped with grilled
chicken.</li>
<li><b>Vegetables stir-fry</b><br>Assorted vegetables sauteed in a light soy sauce, served with
rice.</li>
</ul>
</ul>
<ul><li><h3>Desserts</h3></li>
<dl>
<dt><b>Tiramisu</b>
<dd>coffee-flavoured italian dessert layered with mascarpone cheese</dd></dt>
<dt><b>Chocolate Lava Cake</b>
<dd>Warm chocolate cake with a gooey center, served with vanilla ice cream</dd></dt>
<dt><b>Cheesecake</b>
<dd>Creamy cheesecake topped with fresh strawberries</dd></dt>
</dl></ul>
</body>
</html>
OUTPUT
Assignment 3
Design a table and make use of following attributes: colspan, rowspan, thead, tbody, tfoot,
width, height, cellpadding, cellspacing etc.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Restaurant Menu</title>
<style>
table {
width: 80%;
height: auto;
border-collapse: collapse;
margin: 20px auto;
th, td {
border: 1px solid #333;
padding: 10px;
text-align: left;
th {
background-color: #f2f2f2;
</style>
</head>
<body>
<table width="100%" height="400" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th colspan="3">Restaurant Menu</th>
</tr>
<tr>
<th>Category</th>
<th>Description</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Appetizers</td>
<td>Bruschetta</td>
<td>₹ 672</td>
</tr>
<tr>
<td>Stuffed Mushrooms</td>
<td>₹ 756</td>
</tr>
<tr>
<td>Calamari</td>
<td>₹ 840</td>
</tr>
<tr>
<td rowspan="3">Main Courses</td>
<td>Grilled Salmon</td>
<td>₹ 1,510</td>
</tr>
<tr>
<td>Chicken Alfredo</td>
<td>₹ 1,260</td>
</tr>
<tr>
<td>Vegetable Stir-fry</td>
<td>₹ 1,008</td>
</tr>
<tr>
<td rowspan="3">Desserts</td>
<td>Tiramisu</td>
<td>₹ 340</td>
</tr>
<tr>
<td>Chocolate Lava Cake</td>
<td>₹ 420</td>
</tr>
<tr>
<td>Cheesecake</td>
<td> </td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" align="right">Total</td>
<td>₹ 7,310</td>
</tr>
</tfoot>
</table>
</body>
</html>
OUTPUT
Assignment 4
Create Student registration form for admission in college.
CODE
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>College Admission Registration</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>STUDENT REGISTRATION</h1>
<form>
<label for="name">Full Name</label>
<input type="text" id="name" name="name" required>
<label for="email">Email Address</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone" required>
<label for="dob">Date of Birth</label>
<input type="date" id="dob" name="dob" required>
<label for="course">Select Course</label>
<select id="course" name="course" required>
<option value="">--Select a Course--</option>
<option value="cs">Computer Science</option>
<option value="bca">Bachelor Of Computer Application</option>
<option value="me">Mechanical Engineering</option>
<option value="ce">Civil Engineering</option>
</select>
<label for="address">Address</label>
<textarea id="address" name="address" rows="4" required></textarea>
<button type="submit">Register</button>
</form>
</div>
</body>
</html>
CSS
body {
font-family: Arial, sans-serif;
background-color: #def7d9;
margin: 0;
padding: 0;
.container {
width: 350px;
margin: 50px auto;
padding: 40px;
background-color: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
h1 {
text-align: center;
color: #333;
label {
display: block;
margin: 10px 0 5px;
color: #555;
input, select, textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
input:focus, select:focus, textarea:focus {
border-color: #007bff;
outline: none;
button {
width: 100%;
padding: 10px;
background-color:rgb(36, 235, 36);
color: white;
border: none;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
button:hover {
background-color: #0056b3;
}
OUTPUT -
Assignment 5
Create a web page showing India's map and create hotspots on five different states and link them to
the e-Government sites of the respective states.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="india-map.jpg" usemap="#india">
<map name="india">
<area " href="https://rajasthan.gov.in/" coords="146,309,276,380" shape="rect">
<area " href="https://up.gov.in/" coords="383,317,465,373" shape="rect"></area>
<area " href="https://mp.gov.in/" coords="426,422,254,503" shape="rect"></area>
<area " href="https://www.karnataka.gov.in/" coords="229,670,293,779" shape="rect"></area>
<area " href="https://jk.gov.in/" coords="243,54,371,120" shape="rect"></area>
</map>
</area>
</map>
</body>
</html>
OUTPUT
Assignment 6
Create a web page using four frames and link them to an image, web page audio and video.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media Frames</title>
<style>
body {
display: flex;
flex-direction: column;
margin: 0;
height:2000px;
font-family: Arial, sans-serif;
.frame {
flex: 1;
border: 2px solid #ccc;
margin: 5px;
</style>
</head>
<body>
<iframe class="frame" src="image.html" title="Image Frame"></iframe>
<iframe class="frame" src="audio.html" title="Audio Frame"></iframe>
<iframe class="frame" src="video.html" title="Video Frame"></iframe>
<iframe class="frame" src="webpage.html" title="Web Page Frame"></iframe>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image</title>
</head>
<body>
<img src="image.jpg" alt="Your Image" style="width: 50%; height: auto;">
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Audio</title>
</head>
<body>
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video</title>
</head>
<body>
<video width="50%" controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web Page</title>
</head>
<body>
<h1>Welcome to the Web Page!</h1>
<p>This is a sample web page with some content.</p>
</body>
</html>
OUTPUT
Assignment 7
Create an Iframe and write some lines before and after it.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Iframe Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
iframe {
width: 100%;
height: 400px;
border: 1px solid #ccc;
</style>
</head>
<body>
<h1>Welcome to the Iframe Example</h1>
<p>This section contains some text before the iframe. Below, you will see an embedded
webpage.</p>
<iframe src="https://www.example.com" title="Example Iframe"></iframe>
<p>This section contains some text after the iframe. You can find more information below.</p>
<p>Feel free to explore the content inside the iframe!</p>
</body>
</html>
OUTPUT
Assignment 8
Create 3 similar webpage with inline and internal style sheet and external style sheet and apply all
Text styling attributes.
CODE
Inline Style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline Style Example</title>
</head>
<body>
<h1 style="color: blue; font-size: 36px; text-align: center;"><u>Inline Styles</u></h1>
<p style="font-size: 18px; font-weight: bold; color: green;"><i>This paragraph uses inline styles for
text formatting.</i></p>
<p style="font-size: 16px; color: gray; text-align: right;">Right-aligned text with inline styles.</p>
</body>
</html>
Internal Style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal Style Example</title>
<style>
body {
font-family: Arial, sans-serif;
h1 {
color: orangered;
font-size: 40px;
text-align: center;
p{
font-size: 18px;
font-weight: normal;
color:rgb(234, 66, 94);
.right-align {
text-align: right;
color: rgb(191, 11, 191);
</style>
</head>
<body>
<h1><u> Internal Styles</u></h1>
<p><i>This paragraph uses internal styles for text formatting.</i></p>
<p class="right-align">Right-aligned text with internal styles.</p>
</body>
</html>
External Style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width= initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style3.css">
</head>
<body>
<h1><u>External Styles</u></h1>
<p><i>This paragraph uses external styles for text formatting.</i></p>
<p class="right-align">Right-aligned text with external styles.</p>
</body>
</html>
body {
font-family: poppins, sans-serif;
h1 {
color: rgb(15, 168, 233);
font-size: 40px;
text-align: center;
p{
font-size: 18px;
font-weight: normal;
color:rgb(252, 94, 27);
.right-align {
text-align: right;
color: rgb(237, 26, 114);
}
Assignment 9
Make a Web page that uses all the following pseudo classes. Hover, active, focus, visited.
CODE
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudo-Class Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>PSEYDO-CLASS Example</h1>
<a href="#" class="link" onclick="markVisited(event)" >Link 1</a><br>
<a href="#" class="link" onclick="markVisited(event)" >Link 2</a><br>
<a href="#" class="link" onclick="markVisited(event)" >Link 3</a>
<script>
function markVisited(event) {
event.preventDefault();
const link = event.target;
link.classList.add('visited');
alert('You clicked on ' + link.textContent);
</script>
</body>
</html>
CSS
body {
font-family: Arial, sans-serif;
background-color: #f8f9fa;
margin: 0;
padding: 20px;
h1 {
text-align: center;
color: #333;
.link {
display: inline-block;
margin: 10px;
padding: 10px 20px;
text-decoration: none;
color: white;
background-color: #007bff;
border-radius: 5px;
transition: background-color 0.3s;
.link:hover {
background-color: #30db27;
.link:active {
background-color: #004085;
transform: scale(0.95);
.link:focus {
outline: 3px solid #0056b3;
}
.visited {
background-color: #0d0d0d;
OUTPUT
Assignment 10
Create a web page that use Id and class selector.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Web Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #161515;
margin: 0;
padding: 20px;
#header {
background-color: #5fd4fb;
color: white;
padding: 15px;
text-align: center;
.content {
background-color: white;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
margin-top: 20px;
}
.highlight {
background-color: rgb(254, 125, 217);
font-weight: bold;
</style>
</head>
<body>
<div id="header">
<h1>Welcome to My Web Page</h1>
</div>
<div class="content">
<h2>About This Page</h2>
<p>This is a simple web page that demonstrates the use of ID and class selectors in CSS.</p>
<p class="highlight">This text is highlighted using a class selector!</p>
</div>
</body>
</html>
OUTPUT
Assignment 11
Create separate web pages containing: 1. Container Class IL Grid III. Tables IV. Image V. Button VI.
Typography VII. Jumbotron VIII. Glyphicons.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Components Showcase</title>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/5.15.4/css/all.min.css">
<style>
body {
padding: 20px;
section {
margin-bottom: 40px;
</style>
</head>
<body>
<div class="container">
<!-- Container Class -->
<section id="container-class">
<h1>Container Class</h1>
<p>This is an example of a Bootstrap container.</p>
</section>
<!-- Grid -->
<section id="grid">
<h1>Grid System</h1>
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</div>
</section>
<!-- Tables -->
<section id="tables">
<h1>Tables</h1>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
</section>
<!-- Image -->
<section id="image">
<h1>Image Example</h1>
<img
src="https://th.bing.com/th/id/OIP.ICWzTCj6YIbZ19_6mSGsQwHaHR?rs=1&pid=ImgDetMain"
alt="Placeholder Image" class="img-fluid" width="300px">
</section>
<!-- Button -->
<section id="button">
<h1>Button Example</h1>
<button class="btn btn-primary">Click Me!</button>
</section>
<!-- Typography -->
<section id="typography">
<h1>Typography</h1>
<p class="lead">This is a lead paragraph.</p>
<p>This is a regular paragraph.</p>
<h2>Subheading</h2>
<p>Another paragraph under a subheading.</p>
</section>
<!-- Jumbotron -->
<section id="jumbotron">
<div class="jumbotron text-center">
<h1>Jumbotron Example</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra
attention to featured content or information.</p>
<button class="btn btn-primary">Learn more</button>
</div>
</section>
<!-- Glyphicons (using Font Awesome) -->
<section id="glyphicons">
<h1>Icons Example</h1>
<i class="fas fa-camera"></i> Camera Icon<br>
<i class="fas fa-heart"></i> Heart Icon<br>
<i class="fas fa-check-circle"></i> Check Circle Icon
</section>
</div>
</body>
</html>
OUTPUT
Assignment 12
WAP to make use of JavaScript Operator:: I. Arithmetic Operators II. Assignment Operators III.
Comparison Operators IV. Logical Operators V. Conditional Operators VI. Type Operators VII. Bitwise
Operators.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Operators Example</title>
</head>
<body>
<h1>JavaScript Operators Demonstration</h1>
<pre id="output"></pre>
<script>
const output = document.getElementById("output");
// I. Arithmetic Operators
let a = 10;
let b = 5;
output.innerText += `Arithmetic Operators:\n`;
output.innerText += `a + b = ${a + b}\n`; // Addition
output.innerText += `a - b = ${a - b}\n`; // Subtraction
output.innerText += `a * b = ${a * b}\n`; // Multiplication
output.innerText += `a / b = ${a / b}\n`; // Division
output.innerText += `a % b = ${a % b}\n\n`; // Modulus
// II. Assignment Operators
let c = 15;
output.innerText += `Assignment Operators:\n`;
c += 5; // c = c + 5
output.innerText += `c += 5: ${c}\n`;
c -= 5; // c = c - 5
output.innerText += `c -= 5: ${c}\n`;
c *= 2; // c = c * 2
output.innerText += `c *= 2: ${c}\n`;
c /= 3; // c = c / 3
output.innerText += `c /= 3: ${c}\n\n`;
// III. Comparison Operators
output.innerText += `Comparison Operators:\n`;
output.innerText += `a == b: ${a == b}\n`; // Equal to
output.innerText += `a != b: ${a != b}\n`; // Not equal to
output.innerText += `a > b: ${a > b}\n`; // Greater than
output.innerText += `a < b: ${a < b}\n`; // Less than
output.innerText += `a >= b: ${a >= b}\n`; // Greater than or equal to
output.innerText += `a <= b: ${a <= b}\n\n`; // Less than or equal to
// IV. Logical Operators
output.innerText += `Logical Operators:\n`;
output.innerText += `(a > 0 && b > 0): ${a > 0 && b > 0}\n`; // AND
output.innerText += `(a > 0 || b < 0): ${a > 0 || b < 0}\n`; // OR
output.innerText += `!(a > b): ${!(a > b)}\n\n`; // NOT
// V. Conditional (Ternary) Operator
output.innerText += `Conditional Operator:\n`;
let result = (a > b) ? 'a is greater' : 'b is greater';
output.innerText += `Result: ${result}\n\n`;
// VI. Type Operators
output.innerText += `Type Operators:\n`;
output.innerText += `typeof a: ${typeof a}\n`; // Type of a
output.innerText += `typeof b: ${typeof b}\n`; // Type of b
output.innerText += `typeof result: ${typeof result}\n\n`; // Type of result
// VII. Bitwise Operators
output.innerText += `Bitwise Operators:\n`;
output.innerText += `a & b: ${a & b}\n`; // Bitwise AND
output.innerText += `a | b: ${a | b}\n`; // Bitwise OR
output.innerText += `a ^ b: ${a ^ b}\n`; // Bitwise XOR
output.innerText += `~a: ${~a}\n`; // Bitwise NOT
output.innerText += `a << 1: ${a << 1}\n`; // Left shift
output.innerText += `a >> 1: ${a >> 1}\n`; // Right shift
</script>
</body>
</html>
OUTPUT
Assignment 13
WAP to make use of following JavaScript Statements: i.if ii. else iii. else if iv. switch v. while vi. do
while vii. for viii. for in ix. for of.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Control Statements Example</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #21013b;
color:aliceblue;
.result {
background-color: white;
color: black;
padding: 15px;
border: 1px solid #ccc;
border-radius: 5px;
margin-top: 10px;
</style>
</head>
<body>
<h1 align="center">JavaScript CONTROL STATEMENTS Example</h1>
<div class="result">
<h2>If-Else Statements</h2>
<p>Number is <span id="if-else-result"></span></p>
</div>
<div class="result">
<h2>Switch Statement</h2>
<p>Day of the week is <span id="switch-result"></span></p>
</div>
<div class="result">
<h2>While Loop</h2>
<p>Counting up to 5: <span id="while-result"></span></p>
</div>
<div class="result">
<h2>Do While Loop</h2>
<p>Counting down from 5: <span id="do-while-result"></span></p>
</div>
<div class="result">
<h2>For Loop</h2>
<p>Even numbers up to 10: <span id="for-result"></span></p>
</div>
<div class="result">
<h2>For In Loop</h2>
<p>Object properties: <span id="for-in-result"></span></p>
</div>
<div class="result">
<h2>For Of Loop</h2>
<p>Array values: <span id="for-of-result"></span></p>
</div>
<script>
// If-Else Statement
let num = 13;
let ifElseResult = (num > 10) ? "greater than 10" : "10 or less";
document.getElementById("if-else-result").innerText = ifElseResult;
// Switch Statement
let day = 4; // 1 = Sunday, 2 = Monday, ...
let dayName;
switch (day) {
case 1: dayName = "Sunday"; break;
case 2: dayName = "Monday"; break;
case 3: dayName = "Tuesday"; break;
case 4: dayName = "Wednesday"; break;
case 5: dayName = "Thursday"; break;
case 6: dayName = "Friday"; break;
case 7: dayName = "Saturday"; break;
default: dayName = "Invalid day"; break;
document.getElementById("switch-result").innerText = dayName;
// While Loop
let whileResult = [];
let count = 1;
while (count <= 15) {
whileResult.push(count);
count++;
document.getElementById("while-result").innerText = whileResult.join(", ");
// Do While Loop
let doWhileResult = [];
count = 8;
do {
doWhileResult.push(count);
count--;
} while (count >= 1);
document.getElementById("do-while-result").innerText = doWhileResult.join(", ");
// For Loop
let forResult = [];
for (let i = 0; i <= 10; i += 3) {
forResult.push(i);
document.getElementById("for-result").innerText = forResult.join(", ");
// For In Loop
let obj = {name: "Jenny", age: 25, city: "Local street"};
let forInResult = [];
for (let key in obj) {
forInResult.push(key + ": " + obj[key]);
document.getElementById("for-in-result").innerText = forInResult.join(", ");
// For Of Loop
let arr = ["Pineapple", "Banana", "Orange"];
let forOfResult = [];
for (let value of arr) {
forOfResult.push(value);
document.getElementById("for-of-result").innerText = forOfResult.join(", ");
</script>
</body>
</html>
OUTPUT
Assignment 14
WAP to show use of following object in JS. i.date ii.Math iii.string.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Object Examples</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
color: #333;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
h1 {
color: #007BFF;
button {
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007BFF;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
button:hover {
background-color: #0056b3;
#output {
margin-top: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
width: 300px;
text-align: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
p{
margin: 10px 0;
</style>
<script>
// Using Date Object
function showDate() {
const now = new Date();
return `Current Date and Time: ${now.toLocaleString()}`;
// Using Math Object
function showMath() {
const randomNum = Math.floor(Math.random() * 100) + 1;
const squareRoot = Math.sqrt(randomNum).toFixed(2);
return `Random Number: ${randomNum} | Square Root: ${squareRoot}`;
// Using String Object
function showString() {
const originalString = " JavaScript is awesome! ";
const trimmedString = originalString.trim();
const upperString = trimmedString.toUpperCase();
return `Original: "${originalString}" | Trimmed: "${trimmedString}" | Uppercase:
"${upperString}"`;
// Function to display all information
function displayInfo() {
const output = document.getElementById('output');
output.innerHTML = `
<h3>JavaScript Object Examples:</h3>
<p><strong>Date:</strong> ${showDate()}</p>
<p><strong>Math:</strong> ${showMath()}</p>
<p><strong>String:</strong> ${showString()}</p>
`;
</script>
</head>
<body>
<h1>JavaScript Object Examples</h1>
<button onclick="displayInfo()">Show Information</button>
<div id="output"></div>
</body>
</html>
OUTPUT
Assignment 15
WAP to show use of object in JavaScript. i. By object literal ii. By instance of object directly iii. By
using object constructor.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Object Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
color: #333;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
h1 {
color: #4CAF50;
button {
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
button:hover {
background-color: #45a049;
#output {
margin-top: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
width: 300px;
text-align: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
p{
margin: 10px 0;
</style>
<script>
// Object Literal
const carLiteral = {
make: 'Toyota',
model: 'Camry',
year: 2020,
displayInfo: function() {
return `${this.year} ${this.make} ${this.model}`;
};
// Instance of Object Directly
const carInstance = new Object();
carInstance.make = 'Honda';
carInstance.model = 'Civic';
carInstance.year = 2021;
carInstance.displayInfo = function() {
return `${this.year} ${this.make} ${this.model}`;
};
// Object Constructor
function Car(make, model, year) {
this.make = make;
this.model = model;
this.year = year;
this.displayInfo = function() {
return `${this.year} ${this.make} ${this.model}`;
};
const carConstructor = new Car('Ford', 'Focus', 2019);
// Function to display information about cars
function displayCars() {
const output = document.getElementById('output');
output.innerHTML = `
<h3>Car Details:</h3>
<p><strong>Object Literal:</strong> ${carLiteral.displayInfo()}</p>
<p><strong>Instance of Object Directly:</strong> ${carInstance.displayInfo()}</p>
<p><strong>Object Constructor:</strong> ${carConstructor.displayInfo()}</p>
`;
}
</script>
</head>
<body>
<h1>JavaScript Object Examples</h1>
<button onclick="displayCars()">Show Car Info</button>
<div id="output"></div>
</body>
</html>
OUTPUT
Assignment 16
WAP to show Validation in JavaScript.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #ebd8f2;
color: #333;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
h1 {
color:rgb(87, 9, 87);
form {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
input {
padding: 10px;
margin: 10px 0;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
box-sizing: border-box;
button {
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007BFF;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
button:hover {
background-color: #0056b3;
.error {
color: #d9534f;
margin-top: -10px;
margin-bottom: 10px;
font-size: 14px;
</style>
<script>
function validateForm(event) {
event.preventDefault(); // Prevent form submission
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const errorMessage = document.getElementById('error-message');
let valid = true;
errorMessage.innerHTML = '';
// Validate name
if (nameInput.value.trim() === '') {
valid = false;
errorMessage.innerHTML += '<p>Name is required.</p>';
// Validate email
const emailPattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
if (emailInput.value.trim() === '') {
valid = false;
errorMessage.innerHTML += '<p>Email is required.</p>';
} else if (!emailInput.value.match(emailPattern)) {
valid = false;
errorMessage.innerHTML += '<p>Please enter a valid email address.</p>';
if (valid) {
alert('Form submitted successfully!');
// Here, you can proceed with form submission
</script>
</head>
<body>
<h1>Form Validation Example</h1>
<form onsubmit="validateForm(event)">
<div id="error-message" class="error"></div>
<input type="text" id="name" placeholder="Your Name" />
<input type="email" id="email" placeholder="Your Email" />
<button type="submit">Submit</button>
</form>
</body>
</html>
OUTPUT
Assignment 17
WAP to show usage of inbuilt functions.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Inbuilt Functions Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #cccfcf;
color: #333;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
h1 {
color: #0b0b0b;
button {
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #0c0c0c;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
button:hover {
background-color: #080808;
#output {
margin-top: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
background-color: #fff;
width: 300px;
text-align: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
p{
margin: 10px 0;
.highlight {
font-weight: bold;
color: #D95D58;
</style>
<script>
function showInbuiltFunctions() {
// Math Functions
const randomNumber = Math.floor(Math.random() * 100) + 1;
const squareRoot = Math.sqrt(randomNumber).toFixed(2);
// Date Functions
const now = new Date();
const formattedDate = now.toLocaleString();
// String Functions
const originalString = " JavaScript is great! ";
const trimmedString = originalString.trim();
const upperCaseString = trimmedString.toUpperCase();
// Display Results
const output = document.getElementById('output');
output.innerHTML = `
<h3>Inbuilt Functions Results:</h3>
<p><span class="highlight">Random Number:</span> ${randomNumber}</p>
<p><span class="highlight">Square Root:</span> ${squareRoot}</p>
<p><span class="highlight">Current Date & Time:</span> ${formattedDate}</p>
<p><span class="highlight">Trimmed String:</span> "${trimmedString}"</p>
<p><span class="highlight">Uppercase String:</span> "${upperCaseString}"</p>
`;
</script>
</head>
<body>
<h1>JavaScript Inbuilt Functions Example</h1>
<button onclick="showInbuiltFunctions()">Show Results</button>
<div id="output"></div>
</body>
</html>
OUTPUT
Assignment 18
WAP to show usage of i. alert box ii. prompt box iii. comfirm box.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Dialog Boxes Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #ffe0b2;
color: #333;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
h1 {
color: #ff6f20;
button {
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #ff6f20;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
margin: 10px;
button:hover {
background-color: #ff4e00;
#output {
margin-top: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
background-color: #fff;
width: 300px;
text-align: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
</style>
<script>
function showAlert() {
alert("This is an alert box!");
function showPrompt() {
const userInput = prompt("Please enter your name:");
if (userInput) {
document.getElementById('output').innerHTML = `Hello, ${userInput}!`;
} else {
document.getElementById('output').innerHTML = "You canceled the prompt.";
}
}
function showConfirm() {
const userConfirmed = confirm("Are you sure you want to proceed?");
if (userConfirmed) {
document.getElementById('output').innerHTML = "You confirmed!";
} else {
document.getElementById('output').innerHTML = "You canceled the action.";
</script>
</head>
<body>
<h1>JavaScript Dialog Boxes</h1>
<button onclick="showAlert()">Show Alert</button>
<button onclick="showPrompt()">Show Prompt</button>
<button onclick="showConfirm()">Show Confirm</button>
<div id="output"></div>
</body>
</html>
OUTPUT
Assignment 19
WAP demonstrating i. Factorial of number ii. Prime number in a range iii. Reverse number.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Math Operations</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Math Operations</h1>
<div class="operation">
<h2>Factorial</h2>
<input type="number" id="factorialInput" placeholder="Enter a number">
<button onclick="calculateFactorial()">Calculate Factorial</button>
<p id="factorialResult"></p>
</div>
<div class="operation">
<h2>Prime Numbers in Range</h2>
<input type="number" id="startRange" placeholder="Start">
<input type="number" id="endRange" placeholder="End">
<button onclick="findPrimes()">Find Primes</button>
<p id="primeResult"></p>
</div>
<div class="operation">
<h2>Reverse a Number</h2>
<input type="number" id="reverseInput" placeholder="Enter a number">
<button onclick="reverseNumber()">Reverse Number</button>
<p id="reverseResult"></p>
</div>
</div>
<script>// Function to calculate the factorial of a number
function calculateFactorial() {
const n = parseInt(document.getElementById('factorialInput').value);
const result = factorial(n);
document.getElementById('factorialResult').innerText = `Factorial of ${n}: ${result}`;
function factorial(n) {
if (n < 0) {
return "Factorial is not defined for negative numbers.";
} else if (n === 0 || n === 1) {
return 1;
} else {
let result = 1;
for (let i = 2; i <= n; i++) {
result *= i;
return result;
// Function to find all prime numbers in a given range
function findPrimes() {
const start = parseInt(document.getElementById('startRange').value);
const end = parseInt(document.getElementById('endRange').value);
const primes = primeInRange(start, end);
document.getElementById('primeResult').innerText = `Prime numbers between ${start} and
${end}: ${primes.join(', ')}`;
function isPrime(num) {
if (num <= 1) return false;
for (let i = 2; i <= Math.sqrt(num); i++) {
if (num % i === 0) return false;
return true;
function primeInRange(start, end) {
const primes = [];
for (let num = start; num <= end; num++) {
if (isPrime(num)) {
primes.push(num);
return primes;
// Function to reverse a number
function reverseNumber() {
const n = parseInt(document.getElementById('reverseInput').value);
const reversed = n.toString().split('').reverse().join('');
document.getElementById('reverseResult').innerText = `Reverse of ${n}: ${reversed}`;
}
</script>
</body>
</html>
OUTPUT
Assignment 20
WAP to implement event handling using i. onclick ii. mouseover iii. mouseout iv. mousein v.
doubleclick vi. Mousemove.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
.container {
max-width: 600px;
margin: auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
h1 {
text-align: center;
.box {
margin: 10px 0;
padding: 20px;
text-align: center;
background: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
.box:hover {
background: #0056b3;
p{
font-weight: bold;
text-align: center;
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Handling Demo</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Event Handling Demo</h1>
<div class="box" id="clickBox">Click Me</div>
<div class="box" id="hoverBox">Hover Over Me</div>
<div class="box" id="dblClickBox">Double Click Me</div>
<div class="box" id="moveBox">Move Your Mouse Here</div>
<p id="eventInfo">Event Info will appear here.</p>
</div>
<script>// Get elements
const clickBox = document.getElementById('clickBox');
const hoverBox = document.getElementById('hoverBox');
const dblClickBox = document.getElementById('dblClickBox');
const moveBox = document.getElementById('moveBox');
const eventInfo = document.getElementById('eventInfo');
// Click event
clickBox.onclick = function() {
eventInfo.innerText = "Box clicked!";
};
// Mouseover event
hoverBox.onmouseover = function() {
eventInfo.innerText = "Mouse is over the box!";
};
// Mouseout event
hoverBox.onmouseout = function() {
eventInfo.innerText = "Mouse left the box!";
};
// Mouseenter event
moveBox.onmouseenter = function() {
eventInfo.innerText = "Mouse entered the moving box!";
};
// Double-click event
dblClickBox.ondblclick = function() {
eventInfo.innerText = "Box double-clicked!";
};
// Mousemove event
moveBox.onmousemove = function(event) {
const x = event.clientX;
const y = event.clientY;
eventInfo.innerText = `Mouse position: (${x}, ${y})`;
};
</script>
</body>
</html>
OUTPUT
Assignment 21
WAP in JavaScript to demonstrate 1. Blur ii. Focus iii. Reset iv. Submit v. Change vi. Load.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Handling Demo</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<style>
body {
font-family: Arial, sans-serif;
background-color:rgb(241, 237, 237);
margin: 0;
padding: 20px;
.container {
max-width: 600px;
margin: auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
h1 {
text-align: center;
label {
display: block;
margin: 10px 0 5px;
input, select {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
button {
padding: 10px 15px;
margin-right: 10px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
button:hover {
background: #0056b3;
p{
font-weight: bold;
text-align: center;
</style>
<div class="container">
<h1>Event Handling Demo</h1>
<form id="myForm">
<label for="name">Name:</label>
<input type="text" id="name" required>
<br>
<label for="email">Email:</label>
<input type="email" id="email" required>
<br>
<label for="select">Select an option:</label>
<select id="select" required>
<option value="">--Select--</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<br>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
<p id="eventInfo">Event Info will appear here.</p>
</div>
<script>// Get elements
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const selectInput = document.getElementById('select');
const form = document.getElementById('myForm');
const eventInfo = document.getElementById('eventInfo');
// Load event
window.onload = function() {
eventInfo.innerText = "Page loaded!";
};
// Focus event
nameInput.onfocus = function() {
eventInfo.innerText = "Name input focused!";
};
// Blur event
nameInput.onblur = function() {
eventInfo.innerText = "Name input lost focus!";
};
// Change event
selectInput.onchange = function() {
eventInfo.innerText = `Selected: ${selectInput.value}`;
};
// Submit event
form.onsubmit = function(event) {
event.preventDefault(); // Prevent form submission
eventInfo.innerText = `Form submitted! Name: ${nameInput.value}, Email:
${emailInput.value}`;
};
// Reset event
form.onreset = function() {
eventInfo.innerText = "Form reset!";
};
</script>
</body>
</html>
OUTPUT
Assignment 22
WAP to implement event handling using i. keydown ii. Keyup.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Key Event Handling Demo</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<style>body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
.container {
max-width: 600px;
margin: auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
h1 {
text-align: center;
}
input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
p{
font-weight: bold;
text-align: center;
</style>
<div class="container">
<h1>Key Event Handling Demo</h1>
<input type="text" id="inputField" placeholder="Type something here..." autofocus>
<p id="keyInfo">Press any key...</p>
</div>
<script>
// Get elements
const inputField = document.getElementById('inputField');
const keyInfo = document.getElementById('keyInfo');
// Keydown event
inputField.addEventListener('keydown', function(event) {
keyInfo.innerText = `Key down: ${event.key}`;
});
// Keyup event
inputField.addEventListener('keyup', function(event) {
keyInfo.innerText += ` | Key up: ${event.key}`;
});
</script>
</body>
</html>
OUTPUT
Assignment 23
WAP to show JS can change HTML content.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change HTML Content</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
.container {
max-width: 600px;
margin: auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
h1 {
text-align: center;
p{
text-align: center;
font-weight: bold;
button {
display: block;
margin: 20px auto;
padding: 10px 15px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
button:hover {
background: #0056b3;
</style>
<div class="container">
<h1>Change HTML Content with JavaScript</h1>
<p id="content">This is the original content of the paragraph.</p>
<button id="changeContentButton">Change Content</button>
</div>
<script>// Get the button and paragraph elements
const changeContentButton = document.getElementById('changeContentButton');
const contentParagraph = document.getElementById('content');
// Function to change the paragraph content
changeContentButton.onclick = function() {
contentParagraph.innerText = "The content has been changed!";
};
</script>
</body>
</html>
OUTPUT
Assignment 24
WAP to show JS can change HTML attribute value.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change HTML Attribute with JS and CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<style>body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
padding: 20px;
h1 {
color: #333;
transition: color 0.5s ease;
button {
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
button:hover {
background-color: #0056b3;
</style>
<h1 id="title">Change Image and Style Example</h1>
<img id="myImage" src="Image2.jpeg" alt="Image 1" width="300">
<br>
<button id="changeImageButton">Change Image and Style</button>
<script>document.getElementById('changeImageButton').addEventListener('click', function() {
const image = document.getElementById('myImage');
const title = document.getElementById('title');
// Change the src attribute of the image
image.setAttribute('src', 'Image1.jpeg'); // Change to a new image
image.setAttribute('alt', 'Image 2'); // Update alt attribute
// Change the title style
title.style.color = 'red'; // Change text color
title.innerText = 'Image Changed!'; // Change the text
});
</script>
</body>
</html>
OUTPUT
Assignment 25
WAP to show JS can change HTML style.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Style Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
padding: 20px;
h1 {
color: #333;
p{
transition: all 0.5s ease;
padding: 10px;
button {
padding: 10px 15px;
background-color: hsl(211, 90%, 58%);
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
button:hover {
background-color: #0056b3;
</style>
<h1>Change HTML Style Example</h1>
<p id="text">This is a sample paragraph. Click the button to change my style!</p>
<button id="changeStyleButton">Change Style</button>
<script>
document.getElementById('changeStyleButton').addEventListener('click', function() {
const paragraph = document.getElementById('text');
// Change style properties
paragraph.style.backgroundColor = '#9dccfe'; // Change background color
paragraph.style.color = '#333'; // Change text color
paragraph.style.fontSize = '1.5em'; // Change font size
paragraph.style.padding = '20px'; // Change padding
paragraph.style.borderRadius = '5px'; // Add border radius
});
</script>
</body>
</html>
OUTPUT
Assignment 26
WAP to show use of Window Object in JS. i. Navigation object ii. JavaScript Screen Object iii. Set-time
function.
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Window Object Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f4f4f4;
padding: 20px;
h1 {
color: #333;
div {
margin: 20px;
padding: 10px;
border: 1px solid #007bff;
border-radius: 5px;
background-color: #ffffff;
}
button {
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
button:hover {
background-color: #0056b3;
</style>
<h1>Window Object Demonstration</h1>
<div id="navInfo"></div>
<div id="screenInfo"></div>
<button id="setTimeoutButton">Show Alert After 3 Seconds</button>
<script>
// Navigation Object
const navInfo = document.getElementById('navInfo');
navInfo.innerText = `User Agent: ${navigator.userAgent}`;
// Screen Object
const screenInfo = document.getElementById('screenInfo');
screenInfo.innerText = `Screen Width: ${window.screen.width}, Screen Height:
${window.screen.height}`;
// Set Timeout Function
document.getElementById('setTimeoutButton').addEventListener('click', function() {
setTimeout(() => {
alert('This is an alert after 3 seconds!');
}, 3000);
});
</script>
</body>
</html>
OUTPUT
Assignment 27
Create an XML file containing note as the root element and to, from, subject and body as its child
element.
CODE
XML-
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>John Doe</to>
<from>Jane Smith</from>
<subject>Meeting Reminder</subject>
<body>Just a reminder about our meeting tomorrow at 10 AM.</body>
</note>
CSS -
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 20px;
.xml {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);
note {
display: block;
margin-bottom: 10px;
to, from, subject, body {
display: block;
margin: 5px 0;
padding: 5px;
background-color: #e9ecef;
border-radius: 3px;
to {
color: #007bff;
from {
color: #28a745;
subject {
font-weight: bold;
color: #dc3545;
body {
color: #343a40;
OUTPUT
Assignment 28
Create a well-formed XML file having 5 tags-food menu, category, name, price and calories.
Food_menu is the main parent element that contains category as the child element. Category is the
parent element of name, price and calories.
CODE
XML-
<?xml version="1.0" encoding="UTF-8"?>
<food_menu>
<category>
<name>Pizza</name>
<price>12.99</price>
<calories>300</calories>
</category>
<category>
<name>Burger</name>
<price>8.99</price>
<calories>450</calories>
</category>
<category>
<name>Pasta</name>
<price>10.99</price>
<calories>400</calories>
</category>
<category>
<name>Salad</name>
<price>7.99</price>
<calories>150</calories>
</category>
<category>
<name>Sushi</name>
<price>15.99</price>
<calories>250</calories>
</category>
</food_menu>
CSS -
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
.food-menu {
max-width: 600px;
margin: auto;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
.category {
border-bottom: 1px solid #e0e0e0;
padding: 10px 0;
.category:last-child {
border-bottom: none;
.name {
font-size: 1.5em;
margin: 0;
color: #333;
}
.price {
font-size: 1.2em;
color: #28a745;
margin: 5px 0;
.calories {
font-size: 1em;
color: #777;
OUTPUT
Assignment 29
WAP to display the bookstore details in XML with CSS and internal DTD.
CODE
XML-
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<!DOCTYPE books [
<!ELEMENT heading (#PCDATA)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)> <!ELEMENT publisher (#PCDATA)>
<!ELEMENT edition (#PCDATA)>
<!ELEMENT price (#PCDATA)>
]>
<books>
<heading>Welcome To Book Wonderland! </heading>
<book>
<title>Title: Web Programming</title> <author>Author: Chrisbates</author>
<publisher>Publisher: wiley</publisher>
<edition Edition 3</edition>
<price> Price: 300</price>
</book>
<book>
<title>Title: Internet world-wide-web</title>
<author>Author: Ditel</author>
<publisher>Publisher: Pearson</publisher>
<edition Edition3</edition>
<price>Price: 400</price>
</book>
<book>
<title>Title: computer Networks</title>
<author>Author: Foruouzan</author>
<publisher>Publisher: Mc Graw Hill</publisher>
<edition Edition 5/edition>
<price>Price: 700</price>
</book>
<book>
<title>Title: DBMS Concepts</title>
<author>Author: Navath</author>
<publisher>Publisher: Oxford</publisher>
<edition Edition: S</edition>
<price>Price: 600</price>
</book>
<book>
<title>Title: Linux Programming</title> <author>Author: Subhitab Das</author>
<publisher>Publisher: Oxford</publisher>
<edition Edition: B</edition>
<price>Price: 300</price>
</book>
</books>
CSS -
title,
author,
publisher,
edition,
price {
display: block;
font-size: 20px;
background-color: rgb(255, 255, 164);
heading {
font-size: 30px;
background-color: palegreen;
display: block;
padding: 20px 0px;
title {
font-size: 25px;
color: black;
padding: 10px 0px;
author {
font-size: 23px;
color: rgb(37, 37, 37);
publisher,
edition,
price {
color: rgb(58, 58, 58);
OUTPUT
Assignment 30
Create Valid XML doc using external DTD.
CODE
DTD file:
<!ELEMENT heading (#PCDATA)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT position (#PCDATA)> <!ELEMENT Course (#PCDATA)>
<!ELEMENT age (#PCDATA)>
<!ELEMENT salary (#PCDATA)>
XML file:
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<!DOCTYPE teacherdetails SYSTEM "teacherdetails.dtd">
<teacherdetails>
<heading> Name, position, course, age, salary of teachers</heading>
<teacher>
<name> Ankush Sharma </name>
<position> Assistant professor </position>
<course> BBA </course <age> 33 < /age>
<salary> Rs. 20,000 </salary>
</teacher>
<teacher>
<name> Tanmay Ahuja </name>
<position>Senior professor </position>
<course BCA </course
<age> 65 </age>
<salary Rs. 30,000 </salary>
</teacher>
<teacher>
<name> Akshita Puri </name>
<position> Assistant professor </position> <course> B.Ed </course>
<age> 27 </age>
<salary Rs. 23,000 </salary>
</teacher>
<teacher>
<name> Supriya Choudhary </name>
<position Associate professor </position>
<course> B.Ed </course <age> 35 </age>
<salary Rs. 30,000 </salary>
</teacher>
<teacher>
<name> Monika Tushir </name>
<position Associate professor </position>
<course BBA </course
<age> 29 </age>
<salary> Rs. 35,000 </salary>
</teacher>
CSS file:
heading, name, position, course, age, salary {
display: block;
heading {
font-size: 30px;
name {
font-size: 24px;
padding: 20px 0px 0px 0px;
position, course, age, salary {
font-size: 20px;
}
OUTPUT
You might also like
- A Mis Project Report: ON "The Village Café"No ratings yetA Mis Project Report: ON "The Village Café"49 pages
- A Mis Project Report: ON "The Village Café"No ratings yetA Mis Project Report: ON "The Village Café"48 pages
- Submitted To: Maharashtra Board of Technical EductaionNo ratings yetSubmitted To: Maharashtra Board of Technical Eductaion18 pages
- FNH - Section 3 Menus For Different OccassionNo ratings yetFNH - Section 3 Menus For Different Occassion20 pages
- Menu, Menu Knowledge and AccompanimentsNo ratings yetMenu, Menu Knowledge and Accompaniments15 pages
- Computer Project: Name:-Surya Narayan Das Class: - X Sec: - BNo ratings yetComputer Project: Name:-Surya Narayan Das Class: - X Sec: - B24 pages
- The Menu J Menu Knowledge and AccompanimentsNo ratings yetThe Menu J Menu Knowledge and Accompaniments40 pages
- Menu Plan: Breakfast/Brunch, Lunch / Dinner: Week 9No ratings yetMenu Plan: Breakfast/Brunch, Lunch / Dinner: Week 924 pages
- A Nalysis The Types of F&B Establishment S Fine DinningNo ratings yetA Nalysis The Types of F&B Establishment S Fine Dinning10 pages
- Online Restaurant Web Page (Front-End Web Development)No ratings yetOnline Restaurant Web Page (Front-End Web Development)15 pages
- CHAPTER 7 The Menu, Menu Knowledge and AccompanimentsNo ratings yetCHAPTER 7 The Menu, Menu Knowledge and Accompaniments78 pages
- Cooking Light: Low Calorie Cooking the Paleo and Grain Free WayFrom EverandCooking Light: Low Calorie Cooking the Paleo and Grain Free WayNo ratings yet
- Dairy Free Diet: The Dairy Free Cookbook Reference for Dairy Free RecipesFrom EverandDairy Free Diet: The Dairy Free Cookbook Reference for Dairy Free RecipesNo ratings yet
- (Baker A.) Representations of Finite Groups (BookFi)No ratings yet(Baker A.) Representations of Finite Groups (BookFi)80 pages
- Grammar Exercises - Revisión Del IntentoNo ratings yetGrammar Exercises - Revisión Del Intento6 pages
- 09goods L Question - Wave On String (Eng)No ratings yet09goods L Question - Wave On String (Eng)13 pages
- Instant Ebooks Textbook O Pioneers Webster S German Thesaurus Edition Willa Cather Download All ChaptersNo ratings yetInstant Ebooks Textbook O Pioneers Webster S German Thesaurus Edition Willa Cather Download All Chapters85 pages
- Chapter - 06 - Positive - and - Neutral - Messages Without AnswerNo ratings yetChapter - 06 - Positive - and - Neutral - Messages Without Answer15 pages
- TEO - Self-Responsibility in Existentialism and BuddhismNo ratings yetTEO - Self-Responsibility in Existentialism and Buddhism12 pages
- Detailed Lesson Plan For Multigrade Classes in Grade 2 and 3100% (1)Detailed Lesson Plan For Multigrade Classes in Grade 2 and 34 pages
- Unit 7 - Visual Stories - Animation Video Project. - Unit 7 - Visual Stories - ProjectNo ratings yetUnit 7 - Visual Stories - Animation Video Project. - Unit 7 - Visual Stories - Project1 page
- Sunday School Lesson Called by God Jeremiah 1 - 4 10No ratings yetSunday School Lesson Called by God Jeremiah 1 - 4 105 pages
